/* =============================================
   VFT Shop — Trang Giỏ hàng (/gio-hang/)

   Bám theo bố cục trang giỏ hàng của dự án
   nguyenlieusinhhoc.com (Flatsome):
     - 2 cột: bảng sản phẩm (trái) · hộp tổng cộng (phải)
     - thanh thao tác: "Tiếp tục xem sản phẩm" + "Cập nhật giỏ hàng"
     - sidebar: TỔNG CỘNG ĐƠN HÀNG -> nút thanh toán ->
       lưu ý phí vận chuyển -> phiếu ưu đãi
     - mobile: mỗi dòng thành 1 thẻ, có dòng "2 x 275.000đ"

   Khác bên kia: dùng bảng màu thương hiệu VFT
   (xem shop-tokens.css), không dùng màu của Flatsome.
   ============================================= */

/* ── Khoảng đệm tránh header cố định ─────── */
.woocommerce-cart .default_page,
.woocommerce-checkout .default_page {
    padding-top: 110px;
    padding-bottom: 60px;
}

.woocommerce-cart .sec_title,
.woocommerce-checkout .sec_title {
    font-size: 32px !important;
    line-height: 1.3 !important;
    margin-bottom: 25px;
}

/* ── Khung 2 cột ──────────────────────────────
   `align-items: stretch` để hai cột kết thúc bằng nhau:

   - Sidebar cao hơn (giỏ ít hàng) -> bảng sản phẩm kéo dài xuống cho bằng,
     phần dôi ra rơi vào thanh thao tác màu xám ở đáy bảng chứ không làm các
     dòng hàng giãn ra (xem `tr.cart_item { height: 1px }` bên dưới).
   - Bảng cao hơn (giỏ nhiều hàng) -> sidebar tự dính theo màn hình
     (`position: sticky`) nên hộp tổng tiền luôn trong tầm mắt, không bị bỏ lại
     một mình ở trên cùng.
   ─────────────────────────────────────────── */
.woocommerce-cart .content_post > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-gap: 30px;
    align-items: stretch;
}

/* Chỉ áp dụng ở bố cục 2 cột. Dưới 992px hai khối xếp dọc, và dưới 768px mỗi
   dòng hàng còn bị đổi thành thẻ `display:grid` — kéo giãn ở đó là vỡ layout. */
@media (min-width: 992px) {
    .woocommerce-cart .content_post > .woocommerce > form.woocommerce-cart-form {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .woocommerce-cart .content_post > .woocommerce > form.woocommerce-cart-form > table.cart {
        flex: 1 1 auto;
    }

    /* Chiều cao 1px = "chỉ cao bằng nội dung"; khoảng dôi ra dồn hết xuống hàng
       cuối (thanh thao tác), không kéo giãn từng dòng sản phẩm. */
    .woocommerce-cart table.cart tbody tr.cart_item {
        height: 1px;
    }

    .woocommerce-cart .cart-collaterals {
        position: sticky;
        top: 100px;
        align-self: start;
    }
}

.woocommerce-cart .content_post > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .content_post > .woocommerce > .cart-empty,
.woocommerce-cart .content_post > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart .content_post > .woocommerce > .return-to-shop,
.woocommerce-cart .content_post > .woocommerce > .cross-sells {
    grid-column: 1 / -1;
}

/* ── Bảng sản phẩm ───────────────────────── */
.woocommerce-cart table.cart {
    width: 100%;
    margin: 0;
    border: 1px solid var(--vft-line);
    border-radius: var(--vft-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--vft-shadow);
}

.woocommerce-cart table.cart thead th {
    background: var(--vft-primary-soft);
    color: var(--vft-primary-dark);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 14px 12px;
    border: 0;
    text-align: left;
    white-space: nowrap;
}

.woocommerce-cart table.cart thead th.product-price,
.woocommerce-cart table.cart thead th.product-quantity {
    text-align: center;
}

.woocommerce-cart table.cart thead th.product-subtotal {
    text-align: right;
}

.woocommerce-cart table.cart tbody td {
    padding: 16px 12px;
    border: 0;
    border-top: 1px solid var(--vft-line);
    vertical-align: middle;
    font-size: 15px;
    color: var(--vft-text);
    background: #fff;
}

.woocommerce-cart table.cart tbody tr:first-child td {
    border-top: 0;
}

.woocommerce-cart table.cart td.product-remove {
    width: 44px;
    text-align: center;
}

.woocommerce-cart table.cart td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--vft-muted) !important;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
    background: var(--vft-danger);
    color: #fff !important;
}

.woocommerce-cart table.cart td.product-thumbnail {
    width: 90px;
}

.woocommerce-cart table.cart td.product-thumbnail img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    border: 1px solid var(--vft-line);
    border-radius: var(--vft-radius-sm);
    background: #fff;
    display: block;
}

.woocommerce-cart table.cart td.product-name a {
    color: var(--vft-primary-dark);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.45;
}

.woocommerce-cart table.cart td.product-name a:hover {
    color: var(--vft-primary);
}

.woocommerce-cart table.cart td.product-name .variation {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--vft-muted);
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-quantity {
    text-align: center;
    white-space: nowrap;
}

.woocommerce-cart table.cart td.product-subtotal {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: var(--vft-primary-dark);
}

/* Dòng "2 x 275.000đ" chỉ hiện trên mobile */
.woocommerce-cart .vft-cart-mobile-price {
    display: none;
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--vft-muted);
}

/* ── Ô số lượng có nút − / + ──────────────── */
.woocommerce-cart .quantity {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--vft-line);
    border-radius: var(--vft-radius-sm);
    overflow: hidden;
    background: #fff;
}

.woocommerce-cart .quantity .vft-qty-btn {
    width: 34px;
    border: 0;
    background: var(--vft-bg-soft);
    color: var(--vft-primary-dark);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}

.woocommerce-cart .quantity .vft-qty-btn:hover {
    background: var(--vft-primary-soft);
}

.woocommerce-cart .quantity input.qty,
.woocommerce-cart .quantity input[type=number] {
    width: 48px;
    height: 38px;
    border: 0;
    border-left: 1px solid var(--vft-line);
    border-right: 1px solid var(--vft-line);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--vft-text);
    background: #fff;
    box-shadow: none;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity input[type=number]::-webkit-outer-spin-button,
.woocommerce-cart .quantity input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* Đang gọi AJAX đổi số lượng: chỉ mờ đúng dòng đó, không phủ overlay
   chặn cả bảng như blockUI của WooCommerce. Nút − / + vẫn bấm được. */
.woocommerce-cart tr.cart_item.vft-row-busy td.product-subtotal,
.woocommerce-cart tr.cart_item.vft-row-busy .vft-cart-mobile-price {
    opacity: .45;
    transition: opacity .15s ease;
}

/* ── Thanh thao tác dưới bảng ─────────────── */
/* WooCommerce in ra theo thứ tự: [phiếu ưu đãi] [Cập nhật giỏ hàng]
   rồi mới tới hook chèn nút "Tiếp tục xem sản phẩm". Dùng `order` để
   kéo nút Tiếp tục về bên trái, giống bố cục bên nguyenlieusinhhoc.com. */
.woocommerce-cart table.cart td.actions {
    padding: 16px 20px;
    background: var(--vft-bg-soft);
    border-top: 1px solid var(--vft-line);
    /* Bảng được kéo cao cho bằng sidebar (xem khối "Khung 2 cột"), phần dôi ra
       nằm ở ô này — canh nội dung lên trên để nút bám ngay dưới danh sách hàng,
       khoảng trống dồn xuống đáy thẻ. */
    vertical-align: top;
}

.woocommerce-cart table.cart td.actions::after {
    content: "";
    display: table;
    clear: both;
}

.woocommerce-cart table.cart td.actions .vft-btn-continue {
    float: left;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"] {
    float: right;
}

/* Phiếu ưu đãi được dựng lại ở sidebar (giống bên kia),
   nên bản nằm sẵn trong bảng của WooCommerce bị ẩn đi. */
.woocommerce-cart table.cart td.actions .coupon {
    display: none !important;
}

.woocommerce-cart .vft-btn-continue,
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--vft-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    border: 1px solid var(--vft-primary);
}

.woocommerce-cart .vft-btn-continue {
    background: #fff;
    color: var(--vft-primary) !important;
}

.woocommerce-cart .vft-btn-continue:hover {
    background: var(--vft-primary);
    color: #fff !important;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"] {
    background: var(--vft-primary);
    color: #fff;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"]:hover:not([disabled]) {
    background: var(--vft-primary-hover);
    border-color: var(--vft-primary-hover);
}

/* WooCommerce in nút này ra ở trạng thái `disabled` (template cart/cart.php),
   cart.js của WooCommerce chỉ bật lên khi ô số lượng đổi. KHÔNG thể hiện trạng
   thái tắt bằng `opacity`: nền xanh + chữ trắng mờ đi là không đọc được chữ. */
.woocommerce-cart table.cart td.actions button[name="update_cart"][disabled] {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: var(--vft-muted);
    cursor: default;
}

/* Số lượng đã tự lưu bằng AJAX (assets/js/cart.js) nên nút "Cập nhật giỏ hàng"
   không còn việc gì để làm — JS chạy được thì ẩn hẳn cho khỏi có nút bấm không
   ăn. JS hỏng hoặc bị tắt thì class này không được gắn, nút vẫn còn nguyên và
   hoạt động đúng như WooCommerce mặc định. */
body.vft-cart-auto-qty table.cart td.actions button[name="update_cart"] {
    display: none !important;
}

/* ── Sidebar tổng cộng ───────────────────── */
.woocommerce-cart .cart-collaterals {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    float: none;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .vft-cart-panel {
    width: 100%;
    float: none;
    background: #fff;
    border: 1px solid var(--vft-line);
    border-radius: var(--vft-radius);
    box-shadow: var(--vft-shadow);
    padding: 18px;
    margin: 0;
}

/* Tiêu đề mặc định của WooCommerce được thay bằng
   .vft-panel-title (xem inc/cart-page.php). */
.woocommerce-cart .cart_totals > h2 {
    display: none;
}

.woocommerce-cart .vft-panel-title {
    margin: -18px -18px 16px;
    padding: 14px 18px;
    background: var(--vft-primary);
    color: #fff;
    border-radius: var(--vft-radius) var(--vft-radius) 0 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.3;
}

.woocommerce-cart .cart_totals table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    padding: 10px 0;
    border: 0;
    border-bottom: 1px dashed var(--vft-line);
    font-size: 15px;
    background: transparent;
}

.woocommerce-cart .cart_totals table th {
    text-align: left;
    font-weight: 500;
    color: var(--vft-muted);
}

.woocommerce-cart .cart_totals table td {
    text-align: right;
    color: var(--vft-text);
}

/* Ẩn dòng phí vận chuyển ở bảng tổng cộng giỏ hàng */
.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals table tr.shipping {
    display: none !important;
}

.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
    border-bottom: 0;
    padding-top: 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--vft-primary-dark);
}

.woocommerce-cart .cart_totals table tr.order-total td .amount {
    font-size: 22px;
    color: var(--vft-danger);
}

/* Dòng mã ưu đãi đã áp dụng */
.woocommerce-cart .cart_totals table tr.cart-discount th,
.woocommerce-cart .cart_totals table tr.cart-discount td {
    color: var(--vft-success);
    font-weight: 600;
}

.woocommerce-cart .cart_totals .woocommerce-remove-coupon {
    display: inline-block;
    margin-left: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vft-danger);
    text-decoration: none;
}

.woocommerce-cart .cart_totals .woocommerce-remove-coupon:hover {
    text-decoration: underline;
}

/* Nút tiến hành thanh toán */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 16px 0 0;
    margin: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0;
    margin: 0;
    border-radius: var(--vft-radius-sm);
    background: var(--vft-accent);
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--vft-accent-dark);
}

/* ── Lưu ý phí vận chuyển ────────────────── */
.woocommerce-cart .vft-cart-notice {
    background: var(--vft-bg-soft);
    border: 1px dashed #cbd5e1;
    border-radius: var(--vft-radius);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #334155;
}

.woocommerce-cart .vft-cart-notice__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vft-primary-dark);
}

.woocommerce-cart .vft-cart-notice p {
    margin: 0 0 4px;
}

.woocommerce-cart .vft-cart-notice p:last-child {
    margin-bottom: 0;
}

/* ── Phiếu ưu đãi ────────────────────────── */
.woocommerce-cart .vft-coupon-form .vft-coupon-row {
    display: flex;
    gap: 8px;
}

.woocommerce-cart .vft-coupon-form input#vft_coupon_code {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--vft-line);
    border-radius: var(--vft-radius-sm);
    font-size: 14px;
    background: #fff;
    box-shadow: none;
    margin: 0;
}

.woocommerce-cart .vft-coupon-form button {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--vft-radius-sm);
    background: var(--vft-primary-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.woocommerce-cart .vft-coupon-form button:hover {
    background: var(--vft-primary);
}

/* ── Giỏ hàng trống ──────────────────────── */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message {
    text-align: center;
    font-size: 16px;
    color: var(--vft-muted);
}

.woocommerce-cart .return-to-shop {
    text-align: center;
}

.woocommerce-cart .return-to-shop a.button {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 26px;
    border-radius: var(--vft-radius-sm);
    background: var(--vft-primary);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
}

/* ── Dòng "Phí vận chuyển" trong hộp tổng tiền ─
   Giống trang Thanh toán (xem checkout.css): trả danh sách phương thức vận
   chuyển về căn trái và vẽ lại nút chọn — theme thuythu ẩn radio gốc
   (width/height = 0) để tự vẽ nút riêng.
   ─────────────────────────────────────────── */
.woocommerce-cart .cart_totals table tr.shipping td {
    text-align: left;
}

.woocommerce-cart ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-cart ul#shipping_method li {
    margin: 0 0 8px;
    line-height: 1.45;
}

.woocommerce-cart ul#shipping_method li:last-child {
    margin-bottom: 0;
}

.woocommerce-cart ul#shipping_method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.woocommerce-cart ul#shipping_method label {
    position: relative;
    display: block;
    margin: 0;
    padding-left: 26px;
    font-size: 14px;
    color: var(--vft-text);
    cursor: pointer;
}

.woocommerce-cart ul#shipping_method label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
}

.woocommerce-cart ul#shipping_method input[type="radio"]:checked + label::before {
    border-color: var(--vft-primary);
    background: var(--vft-primary);
    box-shadow: inset 0 0 0 3px #fff;
}

.woocommerce-cart .woocommerce-shipping-destination {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vft-muted);
}

/* ── Mobile ──────────────────────────────── */
@media (max-width: 991px) {
    .woocommerce-cart .content_post > .woocommerce {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .woocommerce-cart table.cart {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .woocommerce-cart table.cart thead {
        display: none;
    }

    .woocommerce-cart table.cart tbody tr.cart_item {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr) 34px;
        grid-gap: 4px 12px;
        align-items: start;
        position: relative;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--vft-line);
        border-radius: var(--vft-radius);
        background: #fff;
        box-shadow: var(--vft-shadow);
    }

    .woocommerce-cart table.cart tbody tr.cart_item td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .woocommerce-cart table.cart tbody tr.cart_item td::before {
        display: none !important;
    }

    .woocommerce-cart table.cart td.product-thumbnail {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: auto;
    }

    .woocommerce-cart table.cart td.product-name {
        grid-column: 2;
        grid-row: 1;
    }

    .woocommerce-cart table.cart td.product-remove {
        grid-column: 3;
        grid-row: 1;
        width: auto;
    }

    /* Giá đơn vị gộp vào dòng "2 x 275.000đ" dưới tên sản phẩm */
    .woocommerce-cart table.cart td.product-price {
        display: none !important;
    }

    .woocommerce-cart .vft-cart-mobile-price {
        display: block;
    }

    .woocommerce-cart table.cart td.product-quantity {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
    }

    .woocommerce-cart table.cart td.product-subtotal {
        grid-column: 1 / -1;
        grid-row: 3;
        text-align: right;
        padding-top: 8px;
        margin-top: 4px;
        border-top: 1px dashed var(--vft-line);
    }

    .woocommerce-cart table.cart tbody tr:not(.cart_item) td.actions {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .woocommerce-cart .vft-btn-continue,
    .woocommerce-cart table.cart td.actions button[name="update_cart"] {
        width: 100%;
    }
}