/**
 * Ngăn giỏ hàng trượt phải + bảng chọn của chip Số ngày / Gói cước.
 * Prefix: ghv3. Nạp ở mọi trang (ngăn giỏ mở được từ header), sau
 * edit-mini-cart-wat.css — chỉ đè những gì khác Figma.
 *
 * Figma "GIỎ HÀNG - POPUP - Desktop", ngăn = node 1776:97476 (500 rộng):
 * đệm 0/48/48/32; tiêu đề Manrope 700 24/33.6 #1a0f33; mỗi dòng: cờ 40 · tên
 * Manrope 700 16/24 · chip · thùng rác 24; hàng dưới: ô số lượng cao 40 bo 99
 * + giá Inter 700 16 #6941c6. Đáy: "Tổng tiền" Manrope 800 20 #4600b9,
 * "Tiết kiệm" #6c6d75, nút viền "Xem giỏ hàng", nút tím "Thanh toán", dòng vé.
 */

/* ---------------------------------------------------------- khung ngăn */

/*
 * Flatsome lấy bề rộng ngăn từ biến --drawer-width; phần CSS nội tuyến của
 * Customizer đặt ".off-canvas .mfp-content.off-canvas-cart { 360px }" nạp SAU
 * tệp này nên phải hơn một bậc chọn (thêm .mfp-wrap).
 */
.mfp-wrap.off-canvas-right .mfp-content.off-canvas-cart {
    background: #fff;
}

@media (min-width: 550px) {
    .mfp-wrap.off-canvas-right .mfp-content.off-canvas-cart {
        --drawer-width: 500px;
        max-width: 100%;
    }
}

.off-canvas-cart .cart-popup-inner {
    padding: 16px 48px 48px 32px;
    font-family: 'Inter', sans-serif;
}

.off-canvas-cart .cart-popup-title {
    padding: 8px 0 16px 20px;
    margin: 0;
}

.off-canvas-cart .cart-popup-title .heading-font.uppercase {
    display: block;
    margin: 0;
    font: 700 24px/33.6px 'Manrope', sans-serif;
    color: #1a0f33;
    letter-spacing: 0;
}

/* nút đóng: ô 44, dấu X xám 24 (x-close của Figma) */
.mfp-wrap.off-canvas-right:has(.off-canvas-cart) .mfp-close {
    top: 19px;
    right: 48px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent !important;
    border-radius: 8px;
    color: #a4a7ae;
    opacity: 1;
    box-shadow: none;
    /* Flatsome để "difference" (cho X nổi trên mọi nền) — trên nền trắng của ngăn nó đảo nền hover thành đen */
    mix-blend-mode: normal;
}

.mfp-wrap.off-canvas-right:has(.off-canvas-cart) .mfp-close svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.mfp-wrap.off-canvas-right:has(.off-canvas-cart) .mfp-close:hover {
    background: #f5f5f5 !important;
}

/* ngăn mở ra là nút này được focus sẵn: đừng tô nền đen như nút thường */
.mfp-wrap.off-canvas-right:has(.off-canvas-cart) .mfp-close:focus {
    background: transparent !important;
    color: #a4a7ae;
    outline: 0;
}

.mfp-wrap.off-canvas-right:has(.off-canvas-cart) .mfp-close:focus-visible {
    outline: 2px solid #7f56d9;
    outline-offset: 2px;
}

/* đang đổi gói: mờ đi chờ cart fragments vẽ lại */
.widget_shopping_cart_content.ghv3-dang-tai {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}

/* ---------------------------------------------------------- một dòng */

.off-canvas-cart li.edit-mini-cart-wat-item {
    grid-template-columns: 56px minmax(0, 1fr) 34px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 16px 0 !important;
    border-top: 1px solid #f5f5f8;
    border-bottom: 2px solid #f5f5f8;
    overflow: visible;
}

.off-canvas-cart li.edit-mini-cart-wat-item:last-child {
    border-bottom: 2px solid #f5f5f8;
}

.off-canvas-cart li.edit-mini-cart-wat-item + li.edit-mini-cart-wat-item {
    border-top: 0;
}

/* cờ tròn 40 */
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-thumb {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: auto;
    height: auto;
    padding: 8px 0 8px 8px;
    background: none;
    border-radius: 0;
    overflow: visible;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-thumb img,
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-thumb img.chinh-anh-gh-mini-wat {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* tên + chip */
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-info {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-name {
    font: 700 16px/24px 'Manrope', sans-serif;
    color: #000;
    white-space: normal;
    overflow: visible;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-name:hover {
    color: #6941c6;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation {
    margin: 0;
    max-width: 100%;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
}

/* chip: nền #f4f4f4, viền #d5d7da, bo 99, Inter 600 14/20 #414651, mũi tên 20 */
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd {
    order: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 8px 12px !important;
    background: #f4f4f4;
    border: 1px solid #d5d7da;
    border-radius: 99px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), inset 0 -2px 0 rgba(10, 13, 18, .05);
    font: 600 14px/20px 'Inter', sans-serif;
    color: #414651;
    transition: border-color .15s, background-color .15s;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd[role="button"] {
    cursor: pointer;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd[role="button"]:hover,
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd:focus-visible,
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd.is-mo {
    background: #ede7fb;
    border-color: #7f56d9;
    outline: 0;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd p {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* thay dấu " - " cũ bằng mũi tên xuống */
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd::after,
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd.variation-Dunglng::after {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: url(../img/gio-hang/chevron-down.svg) center / 20px no-repeat;
    transition: transform .15s;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd.is-mo::after {
    transform: rotate(180deg);
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-variation dl.variation dd.variation-Sngy p::after {
    content: " Ngày";
}

/* nút "Thay đổi" cũ: chip làm thay */
.off-canvas-cart li.edit-mini-cart-wat-item > .edit-mini-cart-wat-edit-btn {
    display: none;
}

/* thùng rác 24 góc phải */
.off-canvas-cart li.edit-mini-cart-wat-item > a.remove.remove_from_cart_button {
    grid-column: 3;
    grid-row: 1;
    position: relative !important;
    top: auto;
    right: auto;
    width: 24px !important;
    height: 24px !important;
    margin: 8px;
    background: url(../img/gio-hang/thung-rac.svg) center / 24px no-repeat !important;
    border-radius: 0;
    transition: opacity .15s;
}

.off-canvas-cart li.edit-mini-cart-wat-item > a.remove.remove_from_cart_button:hover {
    opacity: .6;
}

/* hàng dưới: ô số lượng (giãn hết chỗ) · giá */
.off-canvas-cart li.edit-mini-cart-wat-item > .ux-mini-cart-qty {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    width: calc(100% - 136px);
    margin: 0 0 0 8px;
    padding: 8px 0;
}

.off-canvas-cart li.edit-mini-cart-wat-item .ux-mini-cart-qty .ux-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 89px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d5d7da;
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    box-sizing: border-box;
}

.off-canvas-cart li.edit-mini-cart-wat-item .ux-mini-cart-qty .ux-quantity input.qty {
    flex: 1;
    width: auto !important;
    min-width: 30px;
    height: 38px !important;
    background: transparent;
    font: 600 16px/24px 'Inter', sans-serif;
    color: #414651;
    -moz-appearance: textfield;
}

.off-canvas-cart li.edit-mini-cart-wat-item .ux-mini-cart-qty .ux-quantity .ux-quantity__button {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    font-size: 0;
    color: transparent !important;
    background: center / 14px no-repeat !important;
}

.off-canvas-cart li.edit-mini-cart-wat-item .ux-mini-cart-qty .ux-quantity .ux-quantity__button--minus {
    background-image: url(../img/gio-hang/minus.svg) !important;
}

.off-canvas-cart li.edit-mini-cart-wat-item .ux-mini-cart-qty .ux-quantity .ux-quantity__button--plus {
    background-image: url(../img/gio-hang/plus.svg) !important;
}

.off-canvas-cart li.edit-mini-cart-wat-item .ux-mini-cart-qty .ux-quantity .ux-quantity__button:hover {
    background-color: #f4f4f4 !important;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-price {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    padding: 5px;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-price,
.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-price :is(.amount, bdi) {
    font: 700 16px/23.4px 'Inter', sans-serif;
    color: #6941c6;
}

.off-canvas-cart li.edit-mini-cart-wat-item .edit-mini-cart-wat-price .woocommerce-Price-currencySymbol {
    font-size: 10.32px;
    vertical-align: .6em;
    color: #6941c6;
}

/* ---------------------------------------------------------- đáy ngăn */

.off-canvas-cart .ux-mini-cart-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 0;
    border-top: 1px solid #f5f5f5;
    background: #fff;
}

/* thẻ <p> tổng rỗng (khối tổng tiền là <div> nên trình duyệt đẩy ra ngoài) */
.off-canvas-cart .ux-mini-cart-footer > p.woocommerce-mini-cart__total,
.off-canvas-cart .ux-mini-cart-footer > p:empty {
    display: none;
}

.ghv3-mini-tong {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ghv3-mini-tong__dong,
.ghv3-mini-tong__tk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    letter-spacing: .4px;
}

.ghv3-mini-tong__dong,
.ghv3-mini-tong__dong :is(.amount, bdi, .woocommerce-Price-currencySymbol) {
    font: 800 20px/27px 'Manrope', sans-serif;
    color: #4600b9;
}

.ghv3-mini-tong__tk {
    font: 500 14px/27px 'Manrope', sans-serif;
    color: #6c6d75;
}

.ghv3-mini-tong__tk :is(.amount, bdi, .woocommerce-Price-currencySymbol) {
    font: 700 16px/27px 'Manrope', sans-serif;
    color: #6c6d75;
}

.off-canvas-cart .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.off-canvas-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 12px 18px;
    border-radius: 99px;
    font: 600 16px/24px 'Inter', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: background-color .15s, border-color .15s;
}

/* "Xem giỏ hàng": nền trắng, viền tím nhạt */
.off-canvas-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
    background: #fff;
    border: 1px solid #d6bbfb;
    color: #6941c6;
}

.off-canvas-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
    background: #f9f5ff;
    color: #6941c6;
}

/* "Thanh toán": nền tím */
.off-canvas-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout {
    background: #7f56d9;
    border: 2px solid rgba(255, 255, 255, .12);
    color: #fff;
}

.off-canvas-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout:hover {
    background: #6941c6;
    color: #fff;
}

/* vòng xoay "đang chuyển trang" trên nút trắng phải là màu tím */
.off-canvas-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout).dang-tai-wat::after {
    border-color: rgba(105, 65, 198, .3);
    border-top-color: #6941c6;
}

/* dòng "Mua thêm ... để giảm ...": vé xanh 32 bên trái */
.off-canvas-cart .ux-mini-cart-footer .woocommerce-thong-bao-wat.tdgg-wat-notice.tdgg-wat-mini-cart {
    position: relative;
    display: block;
    min-height: 32px;
    margin: 0;
    padding: 0 0 0 56px;
    border: 0;
    text-align: left;
    font: 400 14px/21px 'Inter', sans-serif;
    color: #00873f;
}

/* chữ lẫn <strong> nằm chung một khối: vé đặt tuyệt đối, không dùng flex (flex tách từng mẩu chữ thành cột) */
.off-canvas-cart .ux-mini-cart-footer .tdgg-wat-mini-cart::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    background: url(../img/gio-hang/ticket.svg) center / 32px no-repeat;
}

.off-canvas-cart .ux-mini-cart-footer .tdgg-wat-mini-cart .tdgg-wat-icon {
    display: none;
}

/* ---------------------------------------------------------- điện thoại */

@media (max-width: 549px) {
    .off-canvas-cart .cart-popup-inner {
        padding: 8px 16px 24px;
    }

    .off-canvas-cart .cart-popup-title {
        padding: 8px 56px 12px 8px;
    }

    .mfp-wrap.off-canvas-right:has(.off-canvas-cart) .mfp-close {
        top: 12px;
        right: 12px;
    }

    .off-canvas-cart li.edit-mini-cart-wat-item {
        grid-template-columns: 48px minmax(0, 1fr) 32px;
        column-gap: 8px;
    }

    .off-canvas-cart li.edit-mini-cart-wat-item > .ux-mini-cart-qty {
        width: calc(100% - 112px);
    }

    .ghv3-mini-tong__dong,
    .ghv3-mini-tong__dong :is(.amount, bdi, .woocommerce-Price-currencySymbol) {
        font-size: 18px;
    }
}

/* ---------------------------------------------------------- bảng trong ngăn */

.ghv3-bang.is-trong-ngan {
    z-index: 20;
    max-width: calc(100% - 32px);
}

/* ---------------------------------------------------------- bảng xổ xuống của chip
 * Figma "Số Ngày" 1772:92940 và "Dung Lượng" 1772:92939 (máy tính lẫn điện
 * thoại đều xổ ngay dưới chip): rộng 375, nền trắng, viền 1px #dadada, bo 18,
 * bóng 0 4 2 rgba(0,0,0,.25), đệm 16, gap 16. Gắn vào <body>, JS đặt vị trí.
 */
.ghv3-bang {
    position: absolute;
    z-index: 1005;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 375px;
    max-width: calc(100vw - 32px);
    max-height: min(560px, 75vh);
    padding: 16px;
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 18px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    outline: 0;
}

.ghv3-bang__dau {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ghv3-bang__ten {
    font: 600 18px/24px 'Inter', sans-serif;
    color: #000;
}

button.ghv3-bang__dong {
    flex: 0 0 24px;
    width: 24px;
    min-width: 0;
    height: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: url(../img/gio-hang/x-dong.svg) center / 24px no-repeat;
    border: 0;
    border-radius: 4px;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    transition: opacity .15s;
}

button.ghv3-bang__dong:hover {
    opacity: .7;
}

.ghv3-bang__than {
    flex: 1 1 auto;
    min-height: 0;
    /* chừa chỗ cho viền 2px của ô không bị cắt khi cuộn */
    margin: -2px;
    padding: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ghv3-bang__cho {
    padding: 8px 0;
    font-size: 14px;
    color: #717680;
}

.ghv3-bang.is-so .ghv3-bang__ds {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.ghv3-bang.is-the .ghv3-bang__ds {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* ô chọn: viền 2px #e8e8e8, bo 16; đang chọn viền tím, nền tím nhạt */
button.ghv3-bang__o {
    position: relative;
    margin: 0;
    min-height: 0;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    box-shadow: none;
    color: #000;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

button.ghv3-bang__o:hover:not(:disabled),
button.ghv3-bang__o:focus-visible {
    border-color: #b9a2ea;
    outline: 0;
}

button.ghv3-bang__o.is-chon {
    background: #f9f5ff;
    border-color: #7f56d9;
}

button.ghv3-bang__o:disabled {
    opacity: .35;
    cursor: not-allowed;
}

button.ghv3-bang__o.is-dang-doi {
    opacity: .6;
}

.ghv3-bang.is-dang-doi {
    pointer-events: none;
}

/* Số ngày: ô 48×48 (co lại theo bề ngang, luôn vuông) */
.ghv3-bang.is-so button.ghv3-bang__o {
    aspect-ratio: 1;
    width: 100%;
    max-width: 48px;
    height: auto;
    padding: 0;
    font: 400 16px/24px 'Inter', sans-serif;
}

/* Gói cước / dung lượng: nút tròn · tên · giá, cách nhau 16 */
.ghv3-bang.is-the button.ghv3-bang__o {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    height: auto;
    padding: 12px 16px;
    text-align: left;
    white-space: normal;
}

.ghv3-bang.is-the button.ghv3-bang__o.is-chon {
    background: #f5f3ff;
}

.ghv3-bang.is-the button.ghv3-bang__o::before {
    content: '';
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: url(../img/gio-hang/radio-chua-chon.svg) center / 20px no-repeat;
}

.ghv3-bang.is-the button.ghv3-bang__o.is-chon::before {
    background-image: url(../img/gio-hang/radio-da-chon.svg);
}

.ghv3-bang__o-ten {
    font: 700 20px/26px 'Manrope', sans-serif;
    color: #1a0f33;
}

.ghv3-bang__o-gia,
.ghv3-bang__o-gia .woocommerce-Price-amount {
    font: 700 20px/22.4px 'Manrope', sans-serif;
    color: #7f56d9;
}

/* giao diện chung tô màu riêng cho giá: ép về tím Figma */
.ghv3-bang .ghv3-bang__o-gia :is(.amount, bdi, .woocommerce-Price-currencySymbol) {
    color: #7f56d9 !important;
}

.ghv3-bang .ghv3-bang__o-gia del :is(.amount, bdi, .woocommerce-Price-currencySymbol) {
    color: #999 !important;
}

.ghv3-bang__o-gia .woocommerce-Price-currencySymbol {
    font-size: 12.9px;
    vertical-align: .55em;
}

.ghv3-bang__o-gia del,
.ghv3-bang__o-gia del .woocommerce-Price-amount {
    margin-right: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #999;
}

.ghv3-bang__o-gia ins {
    text-decoration: none;
}

/* nút Live Chat nằm đè lên bảng đang mở */
body.ghv3-dang-mo #chat-widget {
    visibility: hidden;
}

@media (max-width: 549px) {
    .ghv3-bang {
        max-height: 70vh;
    }

    .ghv3-bang__o-ten {
        font-size: 18px;
        line-height: 24px;
    }

    .ghv3-bang__o-gia,
    .ghv3-bang__o-gia .woocommerce-Price-amount {
        font-size: 18px;
    }
}


/* ---------------------------------------------------------- dòng vừa đổi gói, đang lưu ngầm
 * Chữ và giá đã đổi ngay trên màn hình; trong lúc chờ server (thường < 1 giây)
 * khoá chip của dòng đó (mã dòng trong giỏ sẽ đổi) và làm mờ nhẹ phần tiền.
 */
.ghv3-dang-luu :is(.edit-page-cart-wat-meta, .edit-mini-cart-wat-variation) dd {
    pointer-events: none;
}

.ghv3-dang-luu :is(.edit-page-cart-wat-price, .edit-mini-cart-wat-price) {
    opacity: .55;
    transition: opacity .15s;
}

/* ---------------------------------------------------------- đang tính lại tổng tiền
 * Sau khi đổi gói, các con số tổng chờ server tính lại (~1 giây): ẩn số cũ,
 * hiện vòng xoay nhỏ đúng chỗ đó. Lớp ghv3-dang-tinh do chip-bien-the-wat.js gắn.
 */
@keyframes ghv3-xoay-tong {
    to { transform: rotate(360deg); }
}

body.ghv3-dang-tinh .edit-page-cart-wat-table td,
body.ghv3-dang-tinh .ghv3-thanh__tong,
body.ghv3-dang-tinh .ghv3-mini-tong__dong strong,
body.ghv3-dang-tinh .ghv3-mini-tong__tk span:last-child {
    position: relative;
}

body.ghv3-dang-tinh .edit-page-cart-wat-table td *,
body.ghv3-dang-tinh .ghv3-thanh__tong *,
body.ghv3-dang-tinh .ghv3-thanh__tk,
body.ghv3-dang-tinh .ghv3-mini-tong__dong strong *,
body.ghv3-dang-tinh .ghv3-mini-tong__tk span:last-child * {
    visibility: hidden;
}

body.ghv3-dang-tinh .edit-page-cart-wat-table td::after,
body.ghv3-dang-tinh .ghv3-thanh__tong::after,
body.ghv3-dang-tinh .ghv3-mini-tong__dong strong::after,
body.ghv3-dang-tinh .ghv3-mini-tong__tk span:last-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(127, 86, 217, .25);
    border-top-color: #7f56d9;
    border-radius: 50%;
    animation: ghv3-xoay-tong .6s linear infinite;
}

/* số lớn (tổng thanh toán, thanh bám đáy): vòng to hơn. Thanh: gắn vào con số
   (.ghv3-thanh__tong) vì khung số trên điện thoại là display:contents */
body.ghv3-dang-tinh .edit-page-cart-wat-order-total td::after,
body.ghv3-dang-tinh .ghv3-thanh__tong::after,
body.ghv3-dang-tinh .ghv3-mini-tong__dong strong::after {
    width: 22px;
    height: 22px;
    margin-top: -11px;
}

@media (prefers-reduced-motion: reduce) {
    body.ghv3-dang-tinh :is(.edit-page-cart-wat-table td, .ghv3-thanh__tong, .ghv3-mini-tong__dong strong, .ghv3-mini-tong__tk span:last-child)::after {
        animation: none;
        border-top-color: rgba(127, 86, 217, .25);
    }
}