/* =========================================================
   HATACA.VN - GIO HANG V2
   WooCommerce Cart Block
   Mục tiêu:
   - Hàng "SẢN PHẨM ... TỔNG" có 1 nền liền mạch.
   - Bỏ toàn bộ border chồng nhau trong danh sách sản phẩm.
   - Chỉ giữ 1 viền ngoài + đường phân cách 1px.
   - Sidebar "Tổng cộng giỏ hàng" dùng 1 khung duy nhất.
   ========================================================= */

/* =========================================================
   1. KHUNG TRANG
   ========================================================= */
body.woocommerce-cart .wp-block-woocommerce-cart {
    width: calc(100% - 48px) !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* =========================================================
   2. BẢNG SẢN PHẨM - RESET BORDER CŨ
   ========================================================= */
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart-items thead,
body.woocommerce-cart .wc-block-cart-items tbody,
body.woocommerce-cart .wc-block-cart-items tr,
body.woocommerce-cart .wc-block-cart-items th,
body.woocommerce-cart .wc-block-cart-items td,
body.woocommerce-cart .wc-block-cart-item__image,
body.woocommerce-cart .wc-block-cart-item__product,
body.woocommerce-cart .wc-block-cart-item__total,
body.woocommerce-cart .wc-block-cart-item__wrap {
    outline: 0 !important;
}

body.woocommerce-cart .wc-block-cart-items tr,
body.woocommerce-cart .wc-block-cart-items th,
body.woocommerce-cart .wc-block-cart-items td,
body.woocommerce-cart .wc-block-cart-item__image,
body.woocommerce-cart .wc-block-cart-item__product,
body.woocommerce-cart .wc-block-cart-item__total,
body.woocommerce-cart .wc-block-cart-item__wrap {
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * Không dùng border của table vì CSS Woo/global có thể chồng viền.
 * Dùng 1 box-shadow 1px làm viền ngoài duy nhất.
 */
body.woocommerce-cart .wc-block-cart-items {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;

    /* Màu nền này cũng lấp kín khoảng trống giữa các ô của THEAD */
    background: #F3F7FB !important;

    box-shadow: 0 0 0 1px #DCE4EC !important;
}

/* =========================================================
   3. HÀNG TIÊU ĐỀ: SẢN PHẨM ... TỔNG
   ========================================================= */

/*
 * Cho cả THEAD / TR / mọi phần tử con cùng nền.
 * Nhờ vậy không còn đoạn trắng lớn ở giữa "SẢN PHẨM" và "TỔNG".
 */
body.woocommerce-cart .wc-block-cart-items thead,
body.woocommerce-cart .wc-block-cart-items thead tr,
body.woocommerce-cart .wc-block-cart-items thead tr > * {
    background: #F3F7FB !important;
}

body.woocommerce-cart .wc-block-cart-items thead {
    box-shadow: inset 0 -1px 0 #DCE4EC !important;
}

body.woocommerce-cart .wc-block-cart-items thead th {
    padding: 15px 16px !important;
    border: 0 !important;
    color: #12304A !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}

/* =========================================================
   4. CÁC DÒNG SẢN PHẨM
   ========================================================= */
body.woocommerce-cart .wc-block-cart-items tbody,
body.woocommerce-cart .wc-block-cart-items tbody tr,
body.woocommerce-cart .wc-block-cart-items tbody td,
body.woocommerce-cart .wc-block-cart-item__image,
body.woocommerce-cart .wc-block-cart-item__product,
body.woocommerce-cart .wc-block-cart-item__total,
body.woocommerce-cart .wc-block-cart-item__wrap {
    background: #FFFFFF !important;
}

/* Padding đồng đều */
body.woocommerce-cart .wc-block-cart-items tbody td {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    vertical-align: top !important;
}

/*
 * Chỉ dùng đúng 1px để phân cách giữa các sản phẩm.
 * Không border trái/phải/dưới trên từng ô.
 */
body.woocommerce-cart .wc-block-cart-items tbody tr + tr td {
    border-top: 1px solid #E7EDF3 !important;
}

/* Chặn mọi viền phụ có thể đến từ theme/WooCommerce */
body.woocommerce-cart .wc-block-cart-items tbody tr::before,
body.woocommerce-cart .wc-block-cart-items tbody tr::after,
body.woocommerce-cart .wc-block-cart-items tbody td::before,
body.woocommerce-cart .wc-block-cart-items tbody td::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Ảnh sản phẩm */
body.woocommerce-cart .wc-block-cart-item__image img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

/* Tên sản phẩm */
body.woocommerce-cart .wc-block-components-product-name {
    color: #12304A !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

body.woocommerce-cart .wc-block-components-product-name:hover {
    color: #0057B8 !important;
}

/* Mô tả */
body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-product-metadata p {
    color: #64748B !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* Giá */
body.woocommerce-cart .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    color: #12304A !important;
}

/* Bộ chọn số lượng: chỉ 1 viền */
body.woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid #D8E2EC !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector::before,
body.woocommerce-cart .wc-block-components-quantity-selector::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector input,
body.woocommerce-cart .wc-block-components-quantity-selector button {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
}

/* Nút xóa */
body.woocommerce-cart .wc-block-cart-item__remove-link {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   5. SIDEBAR - TỔNG CỘNG GIỎ HÀNG
   ========================================================= */

/*
 * Chỉ giữ 1 khung ngoài cho toàn bộ sidebar.
 * Không tạo thêm một khung lồng bên trong.
 */
body.woocommerce-cart .wc-block-cart__sidebar {
    padding: 22px !important;
    border: 1px solid #DCE4EC !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(18, 48, 74, 0.07) !important;
    box-sizing: border-box !important;
}

/*
 * Bỏ border + overflow:hidden của bản cũ.
 * overflow:hidden chính là nguyên nhân có thể làm tiêu đề bị cắt.
 */
body.woocommerce-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Tiêu đề "Tổng cộng giỏ hàng" */
body.woocommerce-cart .wc-block-cart__totals-title,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    transform: none !important;

    color: #12304A !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

/* Các dòng coupon / tạm tính / phí / tổng */
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
    margin: 0 !important;
    padding: 15px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #E7EDF3 !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:last-child {
    border-bottom: 0 !important;
}

/* Tổng cuối */
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item {
    padding-top: 15px !important;
    background: #FFFFFF !important;
    color: #12304A !important;
    font-weight: 800 !important;
}

/* Nút thanh toán */
body.woocommerce-cart .wc-block-cart__submit {
    margin-top: 18px !important;
}

body.woocommerce-cart .wc-block-cart__submit-button {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: none !important;
}

/* =========================================================
   6. MOBILE
   ========================================================= */
@media (max-width: 781px) {

    body.woocommerce-cart .wp-block-woocommerce-cart {
        width: calc(100% - 28px) !important;
    }

    body.woocommerce-cart .wc-block-cart__sidebar {
        margin-top: 24px !important;
        padding: 18px !important;
    }

    body.woocommerce-cart .wc-block-cart-items tbody td {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}


/* =========================================================
   7. TINH CHỈNH HEADER BẢNG GIỎ HÀNG - V2.1
   - Ô SẢN PHẨM và TỔNG có viền 1px rõ ràng
   - Font đậm, sắc nét hơn
   ========================================================= */

/* Giữ đường phân cách dưới chạy xuyên suốt cả hàng */
body.woocommerce-cart .wc-block-cart-items thead {
    box-shadow: inset 0 -1px 0 #DCE4EC !important;
}

/* Font tiêu đề rõ hơn */
body.woocommerce-cart .wc-block-cart-items thead th {
    color: #0F2740 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
}

/*
 * Tạo viền 1px riêng cho ô đầu "SẢN PHẨM"
 * và ô cuối "TỔNG".
 * Dùng inset box-shadow để không phát sinh viền 2px do table.
 */
body.woocommerce-cart .wc-block-cart-items thead th:first-child,
body.woocommerce-cart .wc-block-cart-items thead th:last-child {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #DCE4EC !important;
    background: #EEF4F9 !important;
}

/* Căn chữ */
body.woocommerce-cart .wc-block-cart-items thead th:first-child {
    text-align: left !important;
}

body.woocommerce-cart .wc-block-cart-items thead th:last-child {
    text-align: right !important;
}

/* =========================================================
   8. MOBILE - GOM TOÀN BỘ GIÁ / KHUYẾN MẠI VÀO CÙNG SẢN PHẨM
   HATACA Cart V2.3
   ========================================================= */

/*
 * WooCommerce trên mobile đổi mỗi dòng sản phẩm sang dạng grid.
 * Bản này chủ động định nghĩa lại grid để:
 * - Ảnh ở cột trái.
 * - Thông tin sản phẩm ở cột phải.
 * - Cụm TỔNG (680.000 ₫ + Tiết kiệm 40.000 ₫) nằm NGAY DƯỚI
 *   thông tin sản phẩm, vẫn ở bên trong cùng một dòng/card.
 * - Không còn một cột giá riêng nằm ngoài sản phẩm.
 */

@media (max-width: 700px) {

    /* Bảng không được tạo chiều rộng lớn hơn khung */
    body.woocommerce-cart .wc-block-cart-items {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Mobile không cần hàng tiêu đề SẢN PHẨM | TỔNG */
    body.woocommerce-cart .wc-block-cart-items thead {
        display: none !important;
    }

    /*
     * Mỗi sản phẩm = một grid duy nhất.
     * Cụm TOTAL được đưa vào cột thông tin, bên dưới product.
     */
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row {
        display: grid !important;
        grid-template-columns: 76px minmax(0, 1fr) !important;
        grid-template-areas:
            "image product"
            "image total" !important;
        column-gap: 12px !important;
        row-gap: 6px !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;

        border: 0 !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* Chỉ 1 đường phân cách giữa các sản phẩm */
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row + tr.wc-block-cart-items__row {
        border-top: 1px solid #E7EDF3 !important;
    }

    /*
     * Xóa padding/border của từng TD.
     * Viền và nền thuộc về cả TR nên mọi nội dung đều nằm chung một khối.
     */
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row > td {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* Ảnh */
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row
    > .wc-block-cart-item__image {
        grid-area: image !important;
        align-self: start !important;
    }

    body.woocommerce-cart .wc-block-cart-item__image img {
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
        object-fit: cover !important;
    }

    /* Thông tin sản phẩm */
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row
    > .wc-block-cart-item__product {
        grid-area: product !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        align-self: start !important;
    }

    body.woocommerce-cart .wc-block-cart-item__wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * Cột TỔNG cũ nay trở thành một dòng nằm trong cùng sản phẩm.
     * Không còn fixed width 84/92px.
     */
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row
    > .wc-block-cart-item__total {
        grid-area: total !important;
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 2px 0 0 !important;
        text-align: left !important;
        justify-self: stretch !important;
        align-self: start !important;

        overflow: visible !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /*
     * Giá + badge tiết kiệm nằm gọn dưới thông tin sản phẩm.
     * Cho phép tự xuống dòng nếu điện thoại quá hẹp.
     */
    body.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px 8px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* 680.000 ₫ */
    body.woocommerce-cart .wc-block-cart-item__total
    .wc-block-components-product-price {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #12304A !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Tiết kiệm 40.000 ₫ */
    body.woocommerce-cart .wc-block-cart-item__total
    .wc-block-components-sale-badge {
        display: inline-flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 3px 6px !important;

        border: 0 !important;
        border-radius: 4px !important;
        background: #EEF4F9 !important;
        box-shadow: none !important;

        color: #12304A !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    body.woocommerce-cart .wc-block-cart-item__total
    .wc-block-components-sale-badge .wc-block-components-formatted-money-amount {
        white-space: nowrap !important;
    }

    /* Chặn mọi pseudo-element của Woo/theme làm lệch layout */
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row::before,
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row::after,
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row > td::before,
    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row > td::after {
        content: none !important;
        display: none !important;
    }
}


/* Điện thoại rất nhỏ */
@media (max-width: 390px) {

    body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        padding: 14px !important;
    }

    body.woocommerce-cart .wc-block-cart-item__image img {
        width: 68px !important;
        height: 68px !important;
        max-width: 68px !important;
    }

    body.woocommerce-cart .wc-block-cart-item__total
    .wc-block-components-product-price {
        font-size: 12px !important;
    }

    body.woocommerce-cart .wc-block-cart-item__total
    .wc-block-components-sale-badge {
        font-size: 9.5px !important;
        padding: 3px 5px !important;
    }
}


/* =========================================================
   9. FALLBACK THEO CONTAINER CLASS CỦA WOOCOMMERCE
   Dùng thêm vì Cart Block có responsive theo container,
   không chỉ theo viewport.
   ========================================================= */

body.woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items thead,
body.woocommerce-cart .wc-block-cart.is-small .wc-block-cart-items thead {
    display: none !important;
}

body.woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items__row,
body.woocommerce-cart .wc-block-cart.is-small .wc-block-cart-items__row {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-item__total,
body.woocommerce-cart .wc-block-cart.is-small .wc-block-cart-item__total {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* =========================================================
   10. CHỈ HIỂN THỊ GIÁ Ở MỘT VỊ TRÍ
   HATACA Cart V2.4
   ========================================================= */

/*
 * WooCommerce Cart Block mặc định có thể hiển thị:
 * 1) Giá đơn vị ngay dưới tên sản phẩm.
 * 2) Thành tiền của dòng sản phẩm ở khu vực TỔNG.
 *
 * HATACA chỉ giữ vị trí (2) vì đây là số tiền thực tế theo số lượng.
 * Trên mobile, vị trí TỔNG đã được đưa vào bên trong cùng card sản phẩm.
 */

/* Ẩn giá đơn vị nằm trong phần thông tin sản phẩm */
body.woocommerce-cart
.wc-block-cart-item__product
.wc-block-components-product-price {
    display: none !important;
}

/* Fallback cho một số phiên bản WooCommerce dùng wrapper riêng */
body.woocommerce-cart
.wc-block-cart-item__product
.wc-block-cart-item__prices {
    display: none !important;
}

/*
 * Không ảnh hưởng giá ở cột/khu vực TỔNG.
 * Giá tổng và badge "Tiết kiệm..." vẫn hiển thị bình thường.
 */
body.woocommerce-cart
.wc-block-cart-item__total
.wc-block-components-product-price {
    display: block !important;
}