/* =========================================================
   DENTOT.VN - PREMIUM CART
   WooCommerce / Responsive / GSAP
   Loader -> Popup / Coupon Before Subtotal
   Full Checkout Steps On Mobile
   Scope: .cart-container.page-checkout
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {
    --dt-cart-primary: #ff7100;
    --dt-cart-primary-dark: #e95f00;
    --dt-cart-primary-light: #ff9d18;
    --dt-cart-yellow: #ffc44d;

    --dt-cart-text: #252525;
    --dt-cart-heading: #171717;
    --dt-cart-muted: #666666;

    --dt-cart-page-bg: #f7f8fa;
    --dt-cart-card-bg: #ffffff;

    --dt-cart-border: #e9eaed;

    --dt-cart-radius: 20px;

    --dt-cart-shadow:
        0 14px 40px rgba(28, 32, 38, 0.07),
        0 3px 10px rgba(28, 32, 38, 0.03);

    --dt-cart-sticky-top: 105px;

    --dt-cart-mouse-x: 50%;
    --dt-cart-mouse-y: 50%;
}


/* =========================================================
   02. CART PAGE BACKGROUND
   ========================================================= */

#main:has(.cart-container.page-checkout) {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 7% 10%,
            rgba(255, 168, 66, 0.10),
            transparent 24%),
        radial-gradient(circle at 94% 72%,
            rgba(255, 113, 0, 0.055),
            transparent 27%),
        var(--dt-cart-page-bg);
}


#main:has(.cart-container.page-checkout)::before,
#main:has(.cart-container.page-checkout)::after {
    content: "";

    position: absolute;

    pointer-events: none;

    border-radius: 50%;
}


#main:has(.cart-container.page-checkout)::before {
    width: 420px;
    height: 420px;

    top: -230px;
    left: -210px;

    background:
        radial-gradient(circle,
            rgba(255, 162, 45, 0.11),
            transparent 68%);
}


#main:has(.cart-container.page-checkout)::after {
    width: 400px;
    height: 400px;

    right: -240px;
    bottom: -130px;

    background:
        radial-gradient(circle,
            rgba(255, 113, 0, 0.07),
            transparent 68%);
}


/* =========================================================
   03. REMOVE DEFAULT WOOCOMMERCE LOADER
   ========================================================= */

.cart-container.page-checkout .blockUI.blockOverlay {
    opacity: 1 !important;

    background-color:
        rgba(255, 255, 255, 0.66) !important;

    background-image:
        none !important;

    -webkit-backdrop-filter:
        blur(1.5px);

    backdrop-filter:
        blur(1.5px);

    cursor: wait;

    border-radius: inherit;
}


.cart-container.page-checkout .blockUI.blockOverlay::before,

.cart-container.page-checkout .blockUI.blockOverlay::after,

.cart-container.page-checkout .woocommerce-cart-form.processing::before,

.cart-container.page-checkout .woocommerce-cart-form.processing::after,

.cart-container.page-checkout .cart_totals.processing::before,

.cart-container.page-checkout .cart_totals.processing::after,

.cart-container.page-checkout .cart-sidebar.processing::before,

.cart-container.page-checkout .cart-sidebar.processing::after,

.cart-container.page-checkout .woocommerce.processing::before,

.cart-container.page-checkout .woocommerce.processing::after,

.cart-container.page-checkout .loader::before,

.cart-container.page-checkout .loader::after,

.cart-container.page-checkout .woocommerce-loader::before,

.cart-container.page-checkout .woocommerce-loader::after,

.cart-container.page-checkout .loading-spin::before,

.cart-container.page-checkout .loading-spin::after {
    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;
    background-image: none !important;

    box-shadow: none !important;

    animation: none !important;

    transform: none !important;
}


.cart-container.page-checkout .blockUI.blockOverlay .loader,

.cart-container.page-checkout .blockUI.blockOverlay .loading-spin,

.cart-container.page-checkout .blockUI.blockOverlay .woocommerce-loader {
    display: none !important;
}


/* =========================================================
   04. GLOBAL INDETERMINATE LOADER
   ========================================================= */

.dt-cart-global-loader {
    position: fixed;

    z-index: 1000001;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin: 0;
    padding: 0;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -50%) scale(0.9);
}


.dt-cart-global-loader::before {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid rgba(255, 113, 0, 0.10);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.96);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 18px 45px rgba(24, 28, 33, 0.16),
        0 5px 14px rgba(24, 28, 33, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


.dt-cart-global-loader::after {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 147, 18, 0.07),
            transparent 70%);
}


.dt-cart-global-loader svg {
    position: relative;

    z-index: 2;

    display: block;

    width: 42px;
    height: 42px;

    overflow: visible;

    animation:
        dt-cart-spinner-rotate 0.88s linear infinite;
}


.dt-cart-global-loader__track {
    fill: none;

    stroke:
        #e5e7ea;

    stroke-width:
        3.2;
}


.dt-cart-global-loader__value {
    fill: none;

    stroke:
        var(--dt-cart-primary);

    stroke-width:
        3.2;

    stroke-linecap:
        round;

    stroke-dasharray:
        18 82;

    filter:
        drop-shadow(0 2px 2px rgba(255, 113, 0, 0.24));

    animation:
        dt-cart-spinner-dash 1.25s ease-in-out infinite;
}


@keyframes dt-cart-spinner-rotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes dt-cart-spinner-dash {

    0% {
        stroke-dasharray:
            8 92;

        stroke-dashoffset:
            0;
    }

    50% {
        stroke-dasharray:
            54 46;

        stroke-dashoffset:
            -23;
    }

    100% {
        stroke-dasharray:
            8 92;

        stroke-dashoffset:
            -100;
    }

}


/* =========================================================
   05. WOOCOMMERCE POPUP
   ========================================================= */

.cart-container.page-checkout .woocommerce-notices-wrapper {
    position: fixed !important;

    z-index: 999999 !important;

    top: 50% !important;
    left: 50% !important;

    display: flex;

    flex-direction: column;

    gap: 10px;

    width:
        min(460px,
            calc(100vw - 32px));

    max-height:
        calc(100vh - 32px);

    margin: 0 !important;
    padding: 0 !important;

    overflow-y: auto;

    pointer-events: none;

    transform:
        translate(-50%, -50%) !important;

    overscroll-behavior:
        contain;

    overflow-anchor:
        none;
}


.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-message,

.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-info,

.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-error {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 80px;

    margin: 0 !important;

    padding:
        17px 54px 17px 69px !important;

    overflow: hidden;

    box-sizing:
        border-box;

    border:
        1px solid #e3e5e8 !important;

    border-radius:
        18px;

    color:
        #272727;

    background:
        rgba(255, 255, 255, 0.985);

    -webkit-backdrop-filter:
        blur(20px) saturate(160%);

    backdrop-filter:
        blur(20px) saturate(160%);

    box-shadow:
        0 28px 75px rgba(20, 24, 30, 0.20),
        0 7px 22px rgba(20, 24, 30, 0.08);

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.5;

    pointer-events:
        auto;

    overflow-anchor:
        none;
}


.cart-container.page-checkout .dt-cart-popup-pending {
    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;
}


/* =========================================================
   06. POPUP STATUS
   ========================================================= */

.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-message {
    border-left:
        4px solid #25a447 !important;
}


.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-info {
    border-left:
        4px solid var(--dt-cart-primary) !important;
}


.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-error {
    border-left:
        4px solid #df4c4c !important;
}


.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-message::before,

.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-info::before,

.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-error::before {
    position: absolute !important;

    top: 50% !important;
    left: 17px !important;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0 !important;

    border-radius: 50%;

    color:
        #ffffff !important;

    font-size:
        17px;

    font-weight:
        900;

    line-height:
        1;

    transform:
        translateY(-50%);
}


.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-message::before {
    content:
        "✓" !important;

    background:
        linear-gradient(135deg,
            #1f963e,
            #39b95b);
}


.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-info::before {
    content:
        "i" !important;

    background:
        linear-gradient(135deg,
            var(--dt-cart-primary),
            var(--dt-cart-primary-light));
}


.cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-error::before {
    content:
        "!" !important;

    background:
        linear-gradient(135deg,
            #d94343,
            #ed6262);
}


/* =========================================================
   07. POPUP CLOSE
   ========================================================= */

.cart-container.page-checkout .dt-cart-toast-close {
    position: absolute;

    z-index: 10;

    top: 50%;
    right: 14px;

    width:
        32px !important;

    height:
        32px !important;

    min-width:
        32px !important;

    min-height:
        32px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid #e2e4e7 !important;

    border-radius:
        50% !important;

    color:
        transparent !important;

    background:
        #f4f5f6 !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    font-size:
        0 !important;

    transform:
        translateY(-50%);
}


.cart-container.page-checkout .dt-cart-toast-close::before,

.cart-container.page-checkout .dt-cart-toast-close::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 12px;
    height: 2px;

    border-radius:
        999px;

    background:
        #777b81;
}


.cart-container.page-checkout .dt-cart-toast-close::before {
    transform:
        translate(-50%, -50%) rotate(45deg);
}


.cart-container.page-checkout .dt-cart-toast-close::after {
    transform:
        translate(-50%, -50%) rotate(-45deg);
}


/* =========================================================
   DENTOT.VN - CHECKOUT STEPS
   Desktop / Tablet / Mobile
   ========================================================= */


/* =========================================================
   08. CHECKOUT STEPS WRAPPER
   ========================================================= */

.checkout-page-title {
    position: relative;

    z-index: 3;

    margin: 0;

    padding:
        28px 0 20px;

    background:
        transparent;
}


.checkout-page-title .page-title-inner {
    width:
        100%;

    min-height:
        0;

    padding-inline:
        15px;
}


.checkout-page-title .page-title-inner .flex-col {
    width:
        100%;
}


/* =========================================================
   09. CHECKOUT STEPS NAVIGATION
   ========================================================= */

.checkout-page-title .checkout-breadcrumbs {
    counter-reset:
        dt-cart-step;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        nowrap !important;

    width:
        100%;

    gap:
        0;

    margin:
        0;

    color:
        var(--dt-cart-muted);

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;
}


/* =========================================================
   10. CHECKOUT STEP
   ========================================================= */

.checkout-page-title .checkout-breadcrumbs>a {
    counter-increment:
        dt-cart-step;

    position:
        relative;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    gap:
        9px;

    min-height:
        42px;

    padding:
        0 15px 0 9px;

    border:
        1px solid var(--dt-cart-border);

    border-radius:
        999px;

    color:
        #777777;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 3px 10px rgba(30, 30, 30, 0.025);

    text-decoration:
        none;
}


/* =========================================================
   11. STEP NUMBER
   ========================================================= */

.checkout-page-title .checkout-breadcrumbs>a::before {
    content:
        counter(dt-cart-step);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    border:
        1px solid #dedede;

    border-radius:
        50%;

    color:
        #777777;

    background:
        #f8f8f8;

    box-sizing:
        border-box;

    font-size:
        11px;

    font-weight:
        800;
}


/* =========================================================
   12. CURRENT STEP
   ========================================================= */

.checkout-page-title .checkout-breadcrumbs>a.current {
    color:
        var(--dt-cart-primary-dark);

    border-color:
        rgba(255, 113, 0, 0.25);

    background:
        #fff7ee;

    box-shadow:
        0 5px 16px rgba(255, 113, 0, 0.09);
}


.checkout-page-title .checkout-breadcrumbs>a.current::before {
    color:
        #ffffff;

    border-color:
        transparent;

    background:
        linear-gradient(135deg,
            var(--dt-cart-primary),
            var(--dt-cart-primary-light));
}


/* =========================================================
   13. CONNECTOR BETWEEN STEPS
   ========================================================= */

.checkout-page-title .checkout-breadcrumbs .divider {
    position:
        relative;

    display:
        block !important;

    flex:
        0 0 38px;

    width:
        38px;

    height:
        2px;

    margin:
        0 5px;

    color:
        transparent !important;

    font-size:
        0;
}


.checkout-page-title .checkout-breadcrumbs .divider i {
    display:
        none !important;
}


.checkout-page-title .checkout-breadcrumbs .divider::after {
    content: "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    right:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        #e2e3e6;

    transform:
        translateY(-50%);
}


/* =========================================================
   14. CART LAYOUT
   ========================================================= */

.cart-container.page-checkout {
    position: relative;

    z-index: 2;

    width:
        min(1200px,
            calc(100% - 32px));

    max-width:
        none;

    padding:
        5px 0 56px;
}


.cart-container.page-checkout .woocommerce.row {
    align-items:
        flex-start;
}


.cart-container.page-checkout .row-divided>.col+.col:not(.large-12) {
    border-left:
        0 !important;
}


@media screen and (min-width: 850px) {

    .cart-container.page-checkout .woocommerce>.large-7 {
        flex-basis:
            66% !important;

        max-width:
            66% !important;

        padding-right:
            12px;
    }


    .cart-container.page-checkout .cart-collaterals {
        flex-basis:
            34% !important;

        max-width:
            34% !important;

        padding-left:
            12px;
    }

}


/* =========================================================
   15. PRODUCT CARD
   ========================================================= */

.cart-container.page-checkout .woocommerce-cart-form {
    position: relative;

    overflow: hidden;

    margin: 0;

    padding:
        0 22px 18px;

    border:
        1px solid var(--dt-cart-border);

    border-radius:
        var(--dt-cart-radius);

    background:
        radial-gradient(circle at var(--dt-cart-mouse-x) var(--dt-cart-mouse-y),

            rgba(255, 145, 20, 0.055),

            transparent 260px),
        #ffffff;

    box-shadow:
        var(--dt-cart-shadow);
}


.cart-container.page-checkout .woocommerce-cart-form::after {
    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    left: 0;
    right: 0;

    height:
        4px;

    background:
        linear-gradient(90deg,
            var(--dt-cart-primary),
            var(--dt-cart-primary-light),
            var(--dt-cart-yellow));
}


.cart-container.page-checkout .cart-wrapper {
    overflow:
        visible;
}


/* =========================================================
   16. CART TABLE
   ========================================================= */

.cart-container.page-checkout .shop_table.cart {
    width:
        100%;

    margin:
        0;

    border:
        0;

    border-collapse:
        separate;

    border-spacing:
        0;
}


.cart-container.page-checkout .shop_table.cart thead th {
    padding:
        20px 9px 14px;

    border:
        0;

    border-bottom:
        1px solid var(--dt-cart-border);

    color:
        #555a61;

    background:
        #fafafa;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.cart-container.page-checkout .shop_table.cart tr.cart_item>td {
    padding:
        17px 9px;

    border:
        0;

    border-bottom:
        1px solid #ececef;

    vertical-align:
        middle;

    background:
        #ffffff;
}


/* =========================================================
   17. PRODUCT IMAGE / TEXT
   ========================================================= */

.cart-container.page-checkout .product-thumbnail img {
    display:
        block;

    width:
        72px !important;

    height:
        72px !important;

    padding:
        3px;

    object-fit:
        cover;

    border:
        1px solid #dfe1e5;

    border-radius:
        14px;

    background:
        #f5f6f7;
}


.cart-container.page-checkout .product-name>a {
    color:
        var(--dt-cart-heading);

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.45;
}


.cart-container.page-checkout .product-price .amount {
    color:
        #4f5359;

    font-size:
        13px;

    font-weight:
        600;
}


.cart-container.page-checkout .product-subtotal .amount {
    color:
        var(--dt-cart-primary-dark);

    font-size:
        14px;

    font-weight:
        800;
}


/* =========================================================
   18. REMOVE PRODUCT
   ========================================================= */

.cart-container.page-checkout .product-remove a.remove {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        29px;

    height:
        29px;

    border:
        1px solid #e6e6e6;

    border-radius:
        50%;

    color:
        #8c8c8c;

    background:
        #f8f8f8;
}


/* =========================================================
   19. QUANTITY
   ========================================================= */

.cart-container.page-checkout .ux-quantity.quantity {
    display:
        inline-grid;

    grid-template-columns:
        34px 38px 34px;

    align-items:
        center;

    height:
        38px;

    overflow:
        hidden;

    border:
        1px solid #dfe1e4;

    border-radius:
        10px;

    background:
        #ffffff;
}


.cart-container.page-checkout .ux-quantity__button {
    width:
        34px !important;

    min-width:
        34px !important;

    height:
        36px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    color:
        #54585e !important;

    background:
        #f7f8f9 !important;

    box-shadow:
        none !important;
}


.cart-container.page-checkout .quantity input.qty {
    width:
        38px !important;

    height:
        36px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-left:
        1px solid #e2e3e5 !important;

    border-right:
        1px solid #e2e3e5 !important;

    box-shadow:
        none !important;

    text-align:
        center;
}


/* =========================================================
   20. CART ACTION BUTTONS
   ========================================================= */

.cart-container.page-checkout .shop_table.cart td.actions {
    padding:
        18px 0 0;

    border:
        0;
}


.cart-container.page-checkout .continue-shopping {
    display:
        flex;

    align-items:
        center;

    float:
        left;

    margin:
        0 8px 0 0;
}


.cart-container.page-checkout .button-continue-shopping,

.cart-container.page-checkout button[name="update_cart"] {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    height:
        42px !important;

    min-height:
        42px !important;

    margin:
        0 7px 0 0 !important;

    padding:
        0 17px !important;

    border-radius:
        11px !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-transform:
        none !important;
}


.cart-container.page-checkout .button-continue-shopping {
    color:
        var(--dt-cart-primary-dark) !important;

    border:
        1px solid rgba(255, 113, 0, 0.30) !important;

    background:
        #fff7ee !important;
}


.cart-container.page-checkout button[name="update_cart"] {
    color:
        #565a60 !important;

    border:
        1px solid #e0e1e4 !important;

    background:
        #f5f6f7 !important;
}


.cart-container.page-checkout button[name="update_cart"]:not(:disabled) {
    color:
        #ffffff !important;

    border-color:
        var(--dt-cart-primary) !important;

    background:
        var(--dt-cart-primary) !important;
}


/* =========================================================
   21. CART SUMMARY CARD
   ========================================================= */

.cart-container.page-checkout .cart-sidebar.col-inner {
    position:
        sticky;

    top:
        var(--dt-cart-sticky-top);

    overflow:
        hidden;

    padding:
        0 22px 22px;

    box-sizing:
        border-box;

    border:
        1px solid var(--dt-cart-border);

    border-radius:
        var(--dt-cart-radius);

    background:
        #ffffff;

    box-shadow:
        var(--dt-cart-shadow);
}


.cart-container.page-checkout .cart_totals {
    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.cart-container.page-checkout .cart_totals>table:first-child {
    display:
        none !important;
}


/* =========================================================
   22. SUMMARY HEADER
   ========================================================= */

.cart-container.page-checkout .cart_totals>h2 {
    position:
        relative;

    left:
        -22px;

    display:
        flex !important;

    align-items:
        center;

    width:
        calc(100% + 44px) !important;

    max-width:
        none !important;

    min-height:
        72px;

    margin:
        0 0 18px !important;

    padding:
        0 22px !important;

    box-sizing:
        border-box !important;

    border:
        0 !important;

    color:
        #ffffff;

    background:
        linear-gradient(110deg,
            #f46600 0%,
            #ff7600 48%,
            #ff9418 100%);

    font-size:
        18px;

    font-weight:
        800;

    text-transform:
        none;
}


.cart-container.page-checkout .cart_totals>h2::before {
    content:
        "✓";

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

    margin-right:
        10px;

    border:
        1px solid rgba(255, 255, 255, 0.42);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.14);

    font-size:
        13px;
}


/* =========================================================
   23. COUPON BEFORE SUBTOTAL
   ========================================================= */

.cart-container.page-checkout .cart_totals>.ux-cart-coupon {
    width:
        100%;

    margin:
        0 0 16px !important;

    padding:
        14px;

    box-sizing:
        border-box;

    border:
        1px solid #ffd4aa;

    border-radius:
        13px;

    background:
        linear-gradient(135deg,
            #fff9f2,
            #fff6eb);
}


.cart-container.page-checkout .cart_totals>.ux-cart-coupon .widget-title {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    grid-column:
        1 / -1;

    margin:
        0 0 11px;

    padding:
        0;

    border:
        0 !important;

    color:
        #353535;

    font-size:
        13px;

    font-weight:
        800;

    text-transform:
        none;
}


.cart-container.page-checkout .cart_totals>.ux-cart-coupon .coupon {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    gap:
        8px;
}


.cart-container.page-checkout .cart_totals>.ux-cart-coupon #coupon_code {
    width:
        100% !important;

    min-width:
        0;

    height:
        42px;

    margin:
        0 !important;

    padding:
        0 13px;

    box-sizing:
        border-box;

    border:
        1px solid #dcdfe3;

    border-radius:
        10px;

    background:
        #ffffff;

    box-shadow:
        none !important;
}


.cart-container.page-checkout .cart_totals>.ux-cart-coupon button[name="apply_coupon"] {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        86px;

    height:
        42px;

    margin:
        0 !important;

    padding:
        0 14px;

    border:
        1px solid var(--dt-cart-primary) !important;

    border-radius:
        10px !important;

    color:
        var(--dt-cart-primary-dark) !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        none;
}


/* =========================================================
   24. SUMMARY TABLE
   ========================================================= */

.cart-container.page-checkout .cart_totals .shop_table {
    width:
        100%;

    margin:
        0;

    border:
        0;
}


.cart-container.page-checkout .cart_totals .shop_table th,

.cart-container.page-checkout .cart_totals .shop_table td {
    padding:
        13px 0;

    border:
        0;

    border-bottom:
        1px solid #e9eaec;

    background:
        transparent;
}


.cart-container.page-checkout .cart_totals .shop_table th {
    color:
        #555a60;

    font-size:
        13px;

    font-weight:
        600;

    text-transform:
        none;
}


.cart-container.page-checkout .cart_totals .shop_table td {
    color:
        #242424;

    font-size:
        13px;

    font-weight:
        800;

    text-align:
        right;
}


.cart-container.page-checkout .cart_totals .order-total th,

.cart-container.page-checkout .cart_totals .order-total td {
    padding:
        17px 0 9px;

    border-bottom:
        0;
}


.cart-container.page-checkout .cart_totals .order-total .amount {
    color:
        var(--dt-cart-primary-dark);

    font-size:
        23px;

    font-weight:
        900;
}


/* =========================================================
   25. CHECKOUT BUTTON
   ========================================================= */

.cart-container.page-checkout .wc-proceed-to-checkout {
    padding:
        20px 0 0;
}


.cart-container.page-checkout .checkout-button {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        52px;

    margin:
        0 !important;

    padding:
        0 50px 0 22px;

    border:
        0 !important;

    border-radius:
        13px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(110deg,
            #f46600,
            #ff7a00 55%,
            #ff9919) !important;

    box-shadow:
        0 10px 24px rgba(255, 113, 0, 0.26);

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1;

    text-transform:
        none;
}


.cart-container.page-checkout .checkout-button::after {
    content:
        "→";

    position:
        absolute;

    top:
        50%;

    right:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.18);

    transform:
        translateY(-50%);
}


/* =========================================================
   26. TABLET
   ========================================================= */

@media screen and (max-width: 849px) {

    .cart-container.page-checkout {
        width:
            calc(100% - 20px);
    }


    .cart-container.page-checkout .woocommerce.row {
        display:
            block;
    }


    .cart-container.page-checkout .woocommerce>.col {
        width:
            100% !important;

        max-width:
            100% !important;

        flex-basis:
            100% !important;
    }


    .cart-container.page-checkout .woocommerce>.large-7,

    .cart-container.page-checkout .cart-collaterals {
        padding-left:
            0 !important;

        padding-right:
            0 !important;
    }


    .cart-container.page-checkout .cart-collaterals {
        margin-top:
            18px;
    }


    .cart-container.page-checkout .cart-sidebar.col-inner {
        position:
            relative;

        top:
            auto;
    }

}


/* =========================================================
   DENTOT.VN - MOBILE
   Full 3 Checkout Steps
   ========================================================= */

@media screen and (max-width: 549px) {

    /* ---------------------------------------------------------
       27. MOBILE CHECKOUT TITLE
       --------------------------------------------------------- */

    .checkout-page-title {
        padding:
            16px 0 14px;
    }


    .checkout-page-title .page-title-inner {
        width:
            100%;

        padding:
            0 8px;
    }


    /*
     * Flatsome có class hide-for-small trên bước 2, bước 3
     * và divider.
     *
     * Bắt buộc override bằng !important.
     */

    .checkout-page-title .checkout-breadcrumbs>a.hide-for-small {
        display:
            inline-flex !important;
    }


    .checkout-page-title .checkout-breadcrumbs>.divider.hide-for-small {
        display:
            block !important;
    }


    /* ---------------------------------------------------------
       28. MOBILE CHECKOUT NAV
       --------------------------------------------------------- */

    .checkout-page-title .checkout-breadcrumbs {
        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        flex-wrap:
            nowrap !important;

        width:
            100%;

        max-width:
            100%;

        margin:
            0 auto;

        padding:
            0;

        overflow:
            visible;

        white-space:
            nowrap;

        font-size:
            10px;
    }


    /* ---------------------------------------------------------
       29. MOBILE STEP
       --------------------------------------------------------- */

    .checkout-page-title .checkout-breadcrumbs>a {
        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        flex:
            0 0 auto;

        gap:
            5px;

        min-width:
            0;

        min-height:
            36px;

        margin:
            0;

        padding:
            0 8px 0 6px;

        border-radius:
            999px;

        font-size:
            10px;

        font-weight:
            600;

        line-height:
            1;

        letter-spacing:
            -0.015em;
    }


    /* ---------------------------------------------------------
       30. MOBILE STEP NUMBER
       --------------------------------------------------------- */

    .checkout-page-title .checkout-breadcrumbs>a::before {
        width:
            22px;

        height:
            22px;

        flex:
            0 0 22px;

        font-size:
            9px;
    }


    /* ---------------------------------------------------------
       31. MOBILE CONNECTOR
       --------------------------------------------------------- */

    .checkout-page-title .checkout-breadcrumbs>.divider {
        display:
            block !important;

        flex:
            1 1 15px;

        width:
            auto;

        min-width:
            7px;

        max-width:
            20px;

        height:
            2px;

        margin:
            0 3px;

        padding:
            0;
    }


    /* ---------------------------------------------------------
       32. MOBILE LOADER
       --------------------------------------------------------- */

    .dt-cart-global-loader {
        width:
            56px;

        height:
            56px;
    }


    .dt-cart-global-loader svg {
        width:
            38px;

        height:
            38px;
    }


    /* ---------------------------------------------------------
       33. MOBILE POPUP
       --------------------------------------------------------- */

    .cart-container.page-checkout .woocommerce-notices-wrapper {
        width:
            calc(100vw - 24px);
    }


    .cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-message,

    .cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-info,

    .cart-container.page-checkout .woocommerce-notices-wrapper .woocommerce-error {
        min-height:
            72px;

        padding:
            14px 44px 14px 59px !important;

        font-size:
            13px;
    }


    /* ---------------------------------------------------------
       34. MOBILE CART
       --------------------------------------------------------- */

    .cart-container.page-checkout {
        width:
            calc(100% - 16px);

        padding-bottom:
            28px;
    }


    .cart-container.page-checkout .woocommerce-cart-form {
        padding:
            8px 10px 12px;

        border-radius:
            17px;
    }


    .cart-container.page-checkout .shop_table.cart {
        display:
            block;
    }


    .cart-container.page-checkout .shop_table.cart thead {
        display:
            none;
    }


    .cart-container.page-checkout .shop_table.cart tbody {
        display:
            block;
    }


    .cart-container.page-checkout .shop_table_responsive tr td::before {
        content:
            none !important;

        display:
            none !important;
    }


    /* ---------------------------------------------------------
       35. MOBILE PRODUCT CARD
       --------------------------------------------------------- */

    .cart-container.page-checkout .shop_table.cart tr.cart_item {
        position:
            relative;

        display:
            grid;

        grid-template-columns:
            72px minmax(0, 1fr);

        column-gap:
            12px;

        row-gap:
            7px;

        margin:
            8px 0;

        padding:
            13px;

        border:
            1px solid #e6e7e9;

        border-radius:
            15px;

        background:
            #ffffff;
    }


    .cart-container.page-checkout .shop_table.cart tr.cart_item>td {
        display:
            block;

        width:
            auto !important;

        padding:
            0 !important;

        border:
            0 !important;

        background:
            transparent !important;

        text-align:
            left !important;
    }


    .cart-container.page-checkout .shop_table.cart tr.cart_item .product-remove {
        position:
            absolute;

        top:
            8px;

        right:
            8px;
    }


    .cart-container.page-checkout .shop_table.cart tr.cart_item .product-thumbnail {
        grid-column:
            1;

        grid-row:
            1 / span 4;
    }


    .cart-container.page-checkout .product-thumbnail img {
        width:
            70px !important;

        height:
            70px !important;
    }


    .cart-container.page-checkout .shop_table.cart tr.cart_item .product-name {
        grid-column:
            2;

        padding-right:
            28px !important;
    }


    .cart-container.page-checkout .shop_table.cart tr.cart_item .product-price {
        display:
            none;
    }


    .cart-container.page-checkout .shop_table.cart tr.cart_item .product-quantity {
        grid-column:
            2;
    }


    .cart-container.page-checkout .shop_table.cart tr.cart_item .product-subtotal {
        grid-column:
            2;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;
    }


    /* ---------------------------------------------------------
       36. MOBILE CART ACTIONS
       Hai nút cùng 1 hàng
       --------------------------------------------------------- */

    .cart-container.page-checkout .shop_table.cart td.actions {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1.25fr) minmax(0, 0.95fr);

        align-items:
            stretch;

        gap:
            8px;

        width:
            100%;

        padding:
            10px 0 0 !important;
    }


    .cart-container.page-checkout .continue-shopping {
        display:
            block !important;

        float:
            none !important;

        width:
            100% !important;

        min-width:
            0;

        margin:
            0 !important;
    }


    .cart-container.page-checkout .button-continue-shopping,

    .cart-container.page-checkout button[name="update_cart"] {
        float:
            none !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 7px !important;

        white-space:
            nowrap !important;

        font-size:
            clamp(10px,
                2.8vw,
                12px) !important;

        text-align:
            center !important;
    }


    /* ---------------------------------------------------------
       37. MOBILE SUMMARY
       --------------------------------------------------------- */

    .cart-container.page-checkout .cart-sidebar.col-inner {
        padding:
            0 18px 18px;

        border-radius:
            18px;
    }


    .cart-container.page-checkout .cart_totals>h2 {
        left:
            -18px;

        width:
            calc(100% + 36px) !important;

        min-height:
            64px;

        margin:
            0 0 15px !important;

        padding:
            0 18px !important;

        font-size:
            16px;
    }


    /* ---------------------------------------------------------
       38. MOBILE COUPON
       --------------------------------------------------------- */

    .cart-container.page-checkout .cart_totals>.ux-cart-coupon {
        margin:
            0 0 14px !important;

        padding:
            13px;
    }


    .cart-container.page-checkout .cart_totals>.ux-cart-coupon .coupon {
        grid-template-columns:
            minmax(0, 1fr) auto;

        gap:
            7px;
    }


    .cart-container.page-checkout .cart_totals>.ux-cart-coupon button[name="apply_coupon"] {
        width:
            auto !important;

        min-width:
            82px;

        padding:
            0 11px;
    }

}


/* =========================================================
   39. SMALL MOBILE
   375px trở xuống
   ========================================================= */

@media screen and (max-width: 375px) {

    .checkout-page-title .page-title-inner {
        padding:
            0 5px;
    }


    .checkout-page-title .checkout-breadcrumbs>a {
        gap:
            4px;

        min-height:
            34px;

        padding:
            0 5px 0 4px;

        font-size:
            9px;

        letter-spacing:
            -0.025em;
    }


    .checkout-page-title .checkout-breadcrumbs>a::before {
        width:
            20px;

        height:
            20px;

        flex-basis:
            20px;

        font-size:
            8px;
    }


    .checkout-page-title .checkout-breadcrumbs>.divider {
        flex:
            1 1 8px;

        min-width:
            4px;

        max-width:
            11px;

        margin:
            0 1px;
    }


    .cart-container.page-checkout .shop_table.cart td.actions {
        grid-template-columns:
            minmax(0, 1.3fr) minmax(0, 0.9fr);

        gap:
            6px;
    }


    .cart-container.page-checkout .button-continue-shopping,

    .cart-container.page-checkout button[name="update_cart"] {
        padding:
            0 5px !important;

        font-size:
            10px !important;
    }

}


/* =========================================================
   40. EXTRA SMALL MOBILE
   340px trở xuống
   Vẫn giữ đủ 3 bước
   ========================================================= */

@media screen and (max-width: 340px) {

    .checkout-page-title .checkout-breadcrumbs>a {
        gap:
            3px;

        padding:
            0 4px 0 3px;

        font-size:
            8.4px;
    }


    .checkout-page-title .checkout-breadcrumbs>a::before {
        width:
            19px;

        height:
            19px;

        flex-basis:
            19px;
    }


    .checkout-page-title .checkout-breadcrumbs>.divider {
        min-width:
            3px;

        max-width:
            6px;

        margin:
            0 1px;
    }

}


/* =========================================================
   41. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dt-cart-global-loader svg {
        animation:
            none !important;
    }


    .dt-cart-global-loader__value {
        stroke-dasharray:
            30 70;

        animation:
            none !important;
    }

}