/* ============================================================
   VNF Storefront – Giỏ hàng / Đặt hàng nhanh
   Layout chuyên nghiệp + custom checkbox + tối ưu mobile.
   ============================================================ */
:root {
    --cart-primary: #11b22d;
    --cart-primary-d: #0e9426;
    --cart-border: #e5e8ee;
    --cart-soft: #f6f8fb;
    --cart-radius: 10px;
}

/* ===== Khung thẻ ===== */
.cart-box {
    max-width: 640px !important;
    margin: 26px auto !important;
    background: #fff !important;
    border: 1px solid var(--cart-border);
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(16,24,40,.07);
    padding: 24px 26px 28px !important;
}

    .cart-box h1 {
        font-size: 1.5rem;
        font-weight: 800;
        color: #1f2937;
        margin-bottom: 6px;
    }

    /* Tiêu đề mục (ghi đè nền xám inline) */
    .cart-box h5 {
        background: var(--cart-soft) !important;
        border-left: 3px solid var(--cart-primary);
        padding: 11px 13px !important;
        border-radius: 8px;
        font-size: .98rem;
        font-weight: 700;
        color: #374151;
        margin: 20px 0 12px;
    }

/* ===== Form controls ===== */
.cart-box .form-control {
    border: 1px solid var(--cart-border) !important;
    border-radius: var(--cart-radius) !important;
    padding: 10px 12px !important;
    font-size: .95rem;
    min-height: 44px;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .cart-box .form-control:focus {
        border-color: var(--cart-primary) !important;
        box-shadow: 0 0 0 3px rgba(17,178,45,.15) !important;
    }

.cart-box textarea.form-control {
    min-height: auto;
}

.cart-box label {
    font-weight: 600;
    font-size: .85rem;
    color: #4b5563;
    margin-bottom: 5px;
}

.cart-box .form-group {
    margin-bottom: 14px;
}

/* ===== Nút Hoàn tất đơn hàng ===== */
.cart-box #btnFinal {
    width: 100%;
    padding: 13px 20px !important;
    font-size: 1.06rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: var(--cart-primary) !important;
    border-color: var(--cart-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(17,178,45,.28);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .cart-box #btnFinal:hover {
        background: var(--cart-primary-d) !important;
        transform: translateY(-1px);
        box-shadow: 0 9px 22px rgba(17,178,45,.34);
    }

#dieu-khoan p {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 10px;
}

/* ===== Bảng sản phẩm ===== */
.cart-box .table {
    font-size: .9rem;
    margin-bottom: 0;
}

    .cart-box .table thead th {
        background: var(--cart-soft);
        color: #374151;
        font-weight: 700;
        border-bottom: 1px solid var(--cart-border);
        white-space: nowrap;
    }

    .cart-box .table td,
    .cart-box .table th {
        vertical-align: middle;
    }

    .cart-box .table img {
        border-radius: 8px;
    }

/* ô số lượng trong bảng gọn lại */
.cart-box .table input[type="number"] {
    max-width: 80px;
    padding: 6px 8px !important;
    min-height: 38px;
}

/* ===== Hộp ghi chú ===== */
.cart-box .ghi-chu {
    background: #fff7ed !important;
    border: 1px solid #fde4c4;
    border-radius: 10px;
    padding: 4px 16px !important;
    margin: 16px 0;
}

    .cart-box .ghi-chu ul {
        margin: 0;
        padding-left: 18px;
    }

        .cart-box .ghi-chu ul li {
            color: #92580a;
            padding: 7px 0 !important;
        }

/* ===== Accordion thanh toán ===== */
.cart-box .accordion-item {
    border: 1px solid var(--cart-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 6px;
}

.cart-box .accordion-button {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    cursor: pointer;
    background: var(--cart-soft);
    padding: 12px 14px;
    margin: 0;
}

.cart-box .accordion-body {
    font-size: .9rem;
    line-height: 1.6;
}

/* ===== Custom checkbox ===== */
.cart-box input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #c2c8d6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex: 0 0 auto;
    transition: background-color .15s ease, border-color .15s ease;
}

    .cart-box input[type="checkbox"]:hover {
        border-color: var(--cart-primary);
    }

    .cart-box input[type="checkbox"]:checked {
        background: var(--cart-primary);
        border-color: var(--cart-primary);
    }

        .cart-box input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* ===== Mobile ===== */
@media (max-width: 767px) {
    .cart-box {
        margin: 12px !important;
        padding: 16px 14px 22px !important;
        border-radius: 14px;
    }

        .cart-box h1 {
            font-size: 1.25rem;
        }

        .cart-box h5 {
            font-size: .92rem;
            margin: 16px 0 10px;
        }

        /* font 16px tránh iOS tự zoom khi focus */
        .cart-box .form-control {
            font-size: 16px;
        }

        .cart-box .table {
            font-size: .85rem;
        }

            .cart-box .table thead th,
            .cart-box .table td {
                padding: 7px 6px;
            }

        .cart-box .table input[type="number"] {
            max-width: 64px;
        }
    /* hàng tìm sản phẩm: 2 ô xuống dòng có khoảng cách */
    .cart-box .tim > [class*="col-"] {
        margin-bottom: 8px;
    }
}

/* ============================================================
   v2 - Khối tổng tiền, nút xóa, bảng chọn sản phẩm, trang hoàn
   tất và nhận diện kênh sỉ. Các rule dưới đây thay cho những
   khối <style> lặp lại từng trang (đã gỡ khỏi view).
   ============================================================ */

/* ===== Khối tổng tiền (tfoot #listProduct) ===== */
.cart-box .table tfoot th {
    border: 0;
    background: transparent;
}

.cart-box .table tfoot tr:first-child th {
    border-top: 2px solid var(--cart-border);
    padding-top: 12px;
}

.cart-box tfoot h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--cart-primary);
    font-variant-numeric: tabular-nums;
}

#rowDiscountTotal th {
    font-weight: 600;
}

/* dòng "Đơn tối thiểu" dịu lại thay vì đỏ gắt */
.cart-box tfoot th[style*="color:red"] {
    color: #b45309 !important;
    font-weight: 600;
    font-size: .85rem;
}

/* ===== Nút X xóa sản phẩm ===== */
.cart-box span.btn.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: #fff1f0;
    border: 1px solid #ffd6d3;
    color: #d43a32;
    font-weight: 700;
    line-height: 1;
}

    .cart-box span.btn.btn-danger:hover {
        background: #d43a32;
        border-color: #d43a32;
        color: #fff;
    }

/* ===== Bảng chọn sản phẩm (mua nhanh/mua sỉ) ===== */
.cart-box #products button.btn-success {
    padding: 6px 12px;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--cart-primary);
    border-color: var(--cart-primary);
    white-space: nowrap;
}

/* hàng đã chọn mua: xanh nhạt thay hồng cũ */
.cart-box .selected td {
    background: #eafaee !important;
}

/* tổng chạy "Đã chọn mua" */
#total2 {
    color: var(--cart-primary);
    font-variant-numeric: tabular-nums;
}

/* ===== Trang hoàn tất đơn ===== */
.order-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 4px 0 16px;
    padding: 14px;
    border: 1px dashed var(--cart-primary);
    border-radius: 12px;
    background: #f2fbf4;
}

    .order-code .oc-label {
        font-size: .82rem;
        color: #4b5563;
    }

    .order-code .oc-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--cart-primary);
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }

.cart-box .order-summary {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--cart-border);
    border-radius: 12px;
    background: var(--cart-soft);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

    .cart-box .order-summary > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 0;
    }

    /* dòng Tổng cộng: kẻ phân cách + nhấn mạnh, thay đỏ gắt inline */
    .cart-box .order-summary > div:last-child {
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--cart-border);
        color: var(--cart-primary) !important;
        font-size: 1.08em;
    }

/* ===== Nhận diện kênh sỉ ===== */
.cart-box.cart-si {
    border-top: 4px solid #e07800;
}

    .cart-box.cart-si h1::after {
        content: "KÊNH SỈ";
        display: inline-block;
        margin-left: 10px;
        padding: 3px 10px;
        border-radius: 999px;
        background: #fff3e4;
        border: 1px solid #f0b269;
        color: #e07800;
        font-size: .55em;
        font-weight: 700;
        vertical-align: middle;
        letter-spacing: .04em;
    }

/* ===== Trang theo dõi đơn (/myorder/tracking) ===== */
.trk-error {
    padding: 10px 14px;
    border: 1px solid #f5c2c0;
    border-radius: 10px;
    background: #fdf0ef;
    color: #b3261e;
    font-size: .92rem;
}

.trk-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
}

.trk-s1 { background: #eef4ff; color: #1b5fbf; }              /* Đơn mới */
.trk-s2, .trk-s5 { background: #fff7e0; color: #b45309; }      /* Đang xử lý / chờ giao */
.trk-s3, .trk-s6 { background: #e6f7e9; color: #0e9425; }      /* Đã xác nhận / đang giao */
.trk-s4 { background: #f1f2f4; color: #8a8f98; }               /* Đã hủy */
.trk-s7 { background: var(--cart-primary); color: #fff; }      /* Hoàn tất */

.trk-info {
    margin: 14px 0;
    padding: 4px 16px;
    border: 1px solid var(--cart-border);
    border-radius: 12px;
    font-size: .95rem;
}

    .trk-info > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px dashed #eef0f2;
    }

        .trk-info > div:last-child {
            border-bottom: 0;
        }

    .trk-info span {
        color: #6b7280;
    }

/* Thanh tiến trình trạng thái đơn (theo PositionIndex của bảng OrderStatus) */
.trk-steps {
    display: flex;
    justify-content: space-between;
    margin: 18px 4px 6px;
}

.trk-step {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    font-size: .72rem;
    color: #9aa0a6;
}

    /* đường nối giữa các bước */
    .trk-step + .trk-step::before {
        content: "";
        position: absolute;
        top: 7px;
        right: 50%;
        width: 100%;
        height: 2px;
        background: #e5e8ee;
    }

    .trk-step.done + .trk-step.done::before,
    .trk-step.done + .trk-step.current::before {
        background: var(--cart-primary);
    }

.trk-dot {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e5e8ee;
}

.trk-step.done .trk-dot {
    background: var(--cart-primary);
    border-color: var(--cart-primary);
}

.trk-step.current .trk-dot {
    border-color: var(--cart-primary);
    box-shadow: 0 0 0 3px rgba(17,178,45,.2);
}

.trk-step.current {
    color: var(--cart-primary);
    font-weight: 700;
}

.trk-step.done {
    color: #374151;
}

.trk-step-name {
    display: block;
    margin-top: 4px;
    line-height: 1.25;
}