/* ==========================================================================
   CUSTOM CART PAGE STYLING (SỬ DỤNG BIẾN TOÀN CỤC & TỐI ƯU RESPONSIVE)
   ========================================================================== */

/* 1. KHUNG CHÍNH CĂN GIỮA 1200PX (KHỚP PADDING 20PX CỦA HEADER) */
.woocommerce-cart .site-main {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 20px 80px 20px !important;
    box-sizing: border-box !important;
}

.custom-woocommerce-global-wrap {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Tiêu đề GIỎ HÀNG */
.custom-cart-page-title {
    font-family: var(--ff-h2);
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    line-height: var(--lh-h2);
    color: var(--text-heading);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 0 35px 0 !important;
}

/* 2. TIÊU ĐỀ CỘT (SẢN PHẨM - SỐ LƯỢNG) */
.custom-cart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(138, 80, 56, 0.15) !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

.custom-cart-col-product,
.custom-cart-col-quantity {
    font-family: var(--font-secondary);
    font-size: var(--fs-caption);
    font-weight: 700 !important;
    color: var(--text-heading);
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.custom-cart-col-quantity {
    text-align: right !important;
}

/* 3. HÀNG SẢN PHẨM & ẢNH CÓ NÚT (X) TRÒN ĐÈ GÓC */
.custom-cart-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(138, 80, 56, 0.1) !important;
    width: 100% !important;
    gap: 12px !important;
}

.custom-cart-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Khung bọc ảnh chứa nút X tròn đè góc */
.custom-cart-item-img-wrap {
    position: relative !important;
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
}

.custom-cart-item-img-wrap .custom-remove-btn,
.custom-remove-btn,
.woocommerce-cart table.cart a.remove,
.woocommerce-cart a.remove {
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--text-white) !important;
    border: 1px solid var(--text-grey) !important;
    border-radius: 50% !important;
    color: var(--text-grey) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    transition: var(--transition-base) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-cart-item-img-wrap .custom-remove-btn:hover,
.woocommerce-cart table.cart a.remove:hover,
.woocommerce-cart a.remove:hover {
    border-color: var(--color-accent-1) !important;
    background-color: var(--color-accent-1) !important;
    color: var(--text-white) !important;
}

.custom-cart-item-thumbnail {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: var(--color-neutral) !important;
    border: 1px solid rgba(138, 80, 56, 0.1) !important;
}

.custom-cart-item-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Tên & giá sản phẩm */
.custom-cart-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.custom-cart-item-name,
.custom-cart-item-name a {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-body-s) !important;
    font-weight: var(--fw-menu-s) !important;
    color: var(--text-heading) !important;
    text-decoration: none !important;
    margin-bottom: 4px !important;
    display: block !important;
    transition: var(--transition-base) !important;
    word-break: break-word !important;
}

.custom-cart-item-name a:hover {
    color: var(--color-accent-1) !important;
}

.custom-cart-item-meta {
    font-family: var(--font-secondary) !important;
    font-size: var(--fs-caption) !important;
    color: var(--text-body) !important;
    font-weight: 500 !important;
}

/* Cụm tăng giảm số lượng (- 1 +) bên phải */
.custom-cart-item-right {
    flex-shrink: 0 !important;
}

.custom-qty-stepper {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid rgba(138, 80, 56, 0.25) !important;
    border-radius: 20px !important;
    height: 28px !important;
    padding: 0 4px !important;
    background: var(--color-primary) !important;
}

.custom-qty-btn {
    width: 22px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-body) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-base) !important;
}

.custom-qty-btn:hover {
    color: var(--text-heading) !important;
}

.custom-qty-stepper .quantity input.qty {
    width: 26px !important;
    height: 26px !important;
    border: none !important;
    text-align: center !important;
    font-family: var(--font-secondary) !important;
    font-size: var(--fs-caption) !important;
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* 4. HAI NÚT HÀNH ĐỘNG DƯỚI BẢNG SẢN PHẨM */
.custom-cart-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 25px !important;
    margin-bottom: 35px !important;
    width: 100% !important;
}

/* Nút Tiếp tục xem sản phẩm (Bên trái) */
.custom-btn-continue {
    padding: 10px 20px !important;
    border: 1px solid var(--color-accent-2) !important;
    background: transparent !important;
    color: var(--color-accent-2) !important;
    font-family: var(--ff-btn-s) !important;
    font-size: var(--fs-btn-s) !important;
    line-height: var(--lh-btn-s) !important;
    font-weight: var(--fw-btn-s) !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    transition: var(--transition-base) !important;
    text-align: center !important;
}

.custom-btn-continue:hover {
    background-color: var(--color-accent-2) !important;
    color: var(--text-white) !important;
}

/* Nút Cập nhật giỏ hàng (Bên phải) */
.custom-btn-update {
    padding: 10px 24px !important;
    background-color: var(--color-icon) !important;
    color: var(--text-white) !important;
    font-family: var(--ff-btn-s) !important;
    font-size: var(--fs-btn-s) !important;
    line-height: var(--lh-btn-s) !important;
    font-weight: var(--fw-btn-s) !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important;
    text-align: center !important;
}

.custom-btn-update:hover {
    background-color: var(--color-accent-2) !important;
}

/* 5. KHỐI TỔNG CỘNG & MÃ ƯU ĐÃI (CHUẨN 100% MẪU) */
.custom-cart-collaterals,
.woocommerce-cart .cart-collaterals {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-top: 10px !important;
    background: transparent !important;
}

.custom-cart-totals-box,
.custom-coupon-section,
.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100% !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    float: none !important;
}

/* Tiêu đề TỔNG CỘNG GIỎ HÀNG (H4 nhỏ gọn) */
.custom-cart-totals-box h2,
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart-collaterals h2 {
    font-family: var(--ff-h4) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-h4) !important;
    line-height: var(--lh-h4) !important;
    color: var(--text-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Bảng Tạm tính - Vận chuyển - Tổng */
.custom-totals-table,
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart table.shop_table.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    border-top: 1px solid #EAEAEA !important;
    border-bottom: 1px solid #EAEAEA !important;
    margin: 0 0 20px 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.custom-totals-table tr,
.woocommerce-cart .cart_totals table.shop_table tr {
    border: none !important;
    border-bottom: 1px solid #EAEAEA !important;
    background: transparent !important;
}

.custom-totals-table tr:last-child,
.woocommerce-cart .cart_totals table.shop_table tr:last-child {
    border-bottom: none !important;
}

.custom-totals-table th,
.woocommerce-cart .cart_totals table.shop_table th {
    padding: 14px 10px 14px 0 !important;
    font-family: var(--font-secondary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    text-align: left !important;
    border: none !important;
    background: transparent !important;
    width: 35% !important;
    vertical-align: middle !important;
}

.custom-totals-table td,
.woocommerce-cart .cart_totals table.shop_table td {
    padding: 14px 0 14px 10px !important;
    font-family: var(--font-secondary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    text-align: right !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* Hàng Vận chuyển (Shipment) */
.woocommerce-cart .cart_totals table.shop_table tr.shipping td {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--text-body) !important;
    line-height: 1.5 !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.shipping td .woocommerce-shipping-calculator {
    margin-top: 6px !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.shipping td a.shipping-calculator-button {
    color: var(--color-accent-2) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* Nút TIẾN HÀNH THANH TOÁN (100% full width) */
.wc-proceed-to-checkout,
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    width: 100% !important;
}

.wc-proceed-to-checkout a.checkout-button,
.custom-cart-totals-box a.checkout-button,
.woocommerce-cart .cart_totals a.checkout-button,
.woocommerce-cart a.checkout-button.button.alt {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background-color: #333333 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-family: var(--ff-btn-m) !important;
    font-size: var(--fs-btn-m) !important;
    line-height: var(--lh-btn-m) !important;
    font-weight: var(--fw-btn-m) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    border: none !important;
    box-sizing: border-box !important;
    transition: var(--transition-base) !important;
    float: none !important;
}

.wc-proceed-to-checkout a.checkout-button:hover,
.custom-cart-totals-box a.checkout-button:hover,
.woocommerce-cart .cart_totals a.checkout-button:hover,
.woocommerce-cart a.checkout-button.button.alt:hover {
    background-color: #111111 !important;
    color: #FFFFFF !important;
}

/* KHỐI MÃ ƯU ĐÃI (CÓ KHOẢNG CÁCH TÁCH BIỆT RÕ RÀNG) */
.custom-coupon-section,
.woocommerce-cart .coupon,
.woocommerce-cart .cart_totals .coupon {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
}

.custom-coupon-title {
    font-family: var(--font-secondary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #EAEAEA !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.custom-coupon-form-wrap,
.woocommerce-cart form .coupon,
.woocommerce-cart .coupon,
.woocommerce-cart .actions .coupon {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ô nhập mã giảm giá (Có margin-bottom 12px tách biệt) */
.custom-coupon-input,
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-cart .coupon input.input-text,
.woocommerce-cart #coupon_code,
.woocommerce-cart input[name="coupon_code"] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    padding: 10px 14px !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 2px !important;
    font-family: var(--font-secondary) !important;
    font-size: 13px !important;
    color: var(--text-body) !important;
    background: #FFFFFF !important;
    outline: none !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 0 12px 0 !important; /* Tách biệt hoàn toàn với nút bên dưới */
}

.custom-coupon-input::placeholder,
.woocommerce-cart .coupon input.input-text::placeholder,
.woocommerce-cart #coupon_code::placeholder {
    color: #A0A0A0 !important;
}

/* Nút Áp dụng */
.custom-coupon-btn,
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart .coupon button.button,
.woocommerce-cart button[name="apply_coupon"] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    padding: 10px 15px !important;
    background-color: #FFFFFF !important;
    color: #555555 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 2px !important;
    font-family: var(--ff-btn-s) !important;
    font-size: var(--fs-btn-s) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: var(--transition-base) !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
}

.custom-coupon-btn:hover,
.woocommerce-cart .coupon button.button:hover,
.woocommerce-cart button[name="apply_coupon"]:hover {
    background-color: #F5F5F5 !important;
    color: #111111 !important;
    border-color: #CCCCCC !important;
}

/* 6. RESPONSIVE TOÀN DIỆN CHO MOBILE & TABLET (< 768px - KHỚP 20PX HEADER) */
@media (max-width: 767px) {
    .woocommerce-cart .site-main {
        padding: 25px 20px 60px 20px !important;
    }

    .custom-woocommerce-global-wrap {
        padding: 0 !important;
    }

    .custom-cart-page-title {
        font-size: var(--fs-h2) !important;
        margin: 5px 0 20px 0 !important;
    }

    .custom-cart-item {
        padding: 14px 0 !important;
    }

    .custom-cart-item-img-wrap {
        width: 65px !important;
        height: 65px !important;
    }

    /* 2 nút xếp dọc full 100% trên mobile */
    .custom-cart-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin: 20px 0 30px 0 !important;
    }

    .custom-btn-continue,
    .custom-btn-update {
        width: 100% !important;
        display: block !important;
        padding: 12px 15px !important;
        text-align: center !important;
    }

    /* Toàn bộ khối tổng cộng & mã giảm giá giãn 100% bề ngang */
    .custom-cart-collaterals,
    .woocommerce-cart .cart-collaterals {
        align-items: stretch !important;
    }

    .custom-cart-totals-box,
    .custom-coupon-section,
    .woocommerce-cart .cart-collaterals .cart_totals {
        max-width: 100% !important;
        width: 100% !important;
    }
}