/* =================================================================
   GIAO DIỆN TRANG THANH TOÁN (ONE-PAGE CHECKOUT)
================================================================= */
body {
    background-color: #f4f6f8; /* Nền xám nhạt làm nổi bật các thẻ Card trắng */
}

.th-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px; /* Chia tỷ lệ: Cột trái bự, cột phải nhỏ */
    gap: 10px;
}

/* THIẾT KẾ THẺ CARD CHUNG */
.th-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.th-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eaecf0;
    padding-bottom: 15px;
}

.th-card-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.th-buy-more {
    font-size: 14px;
    color: #0159a0;
    text-decoration: none;
    font-weight: 500;
}
.th-buy-more:hover { text-decoration: underline; }

.th-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0 0 15px 0;
}

/* ITEM GIỎ HÀNG */
.th-cart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px dashed #eaecf0;
}
.th-cart-item:last-child { border-bottom: none; padding-bottom: 0; }

.item-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    padding: 5px;
}
.item-img img { width: 100%; height: 100%; object-fit: contain; }

.item-info { flex: 1; }
.item-name { font-size: 14px; font-weight: 600; color: #222; text-decoration: none; display: block; margin-bottom: 5px;}
.item-name:hover { color: #0159a0; }
.item-meta { align-items: center; gap: 6px; font-size: 12px; color: #666; margin-bottom: 5px; }
.color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ddd; }

.item-price-wrap { display: flex; align-items: center; gap: 10px; }
.price-current { font-size: 15px; font-weight: 700; color: #0159a0; }
.price-old { font-size: 12px; color: #999; text-decoration: line-through; }

.item-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #eaecf0;
    border-radius: 6px;
    overflow: hidden;
}
.btn-qty {
    background: #f8f9fa;
    border: none;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    color: #555;
}

.btn-qty:hover { background: #eaecf0; }
.btn-qty:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f8f9fa;
    color: #adb5bd;
}
.input-qty {
    width: 35px;
    height: 28px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;text-align: center !important;
    font-weight: 600;
}
.btn-trash {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #fff0f0;
    color: #dc3545 !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #fecaca;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-trash:hover {
    background: #dc3545;
    color: #fff !important;
    text-decoration: none;
}
.btn-trash:hover { color: #d0021b; }

.btn-copy-info {
    background: none;
    border: none;
    color: #0159a0;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
    border-radius: 4px;
}
.btn-copy-info:hover {
    background: #e3f2fd;
    color: #d70018;
}
/* DANH SÁCH MUA KÈM (UPSELL) */
.th-upsell-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: 0.2s;
}
.th-upsell-item:hover { border-color: #0159a0; background: #f8fcff; }
.th-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: #0159a0; }
.th-upsell-item img { width: 50px; height: 50px; object-fit: contain; }
.upsell-info { flex: 1; }
.upsell-name { font-size: 13px; font-weight: 600; color: #333; display: block; margin-bottom: 4px; }
.upsell-price { display: flex; gap: 8px; align-items: center; }
.upsell-price .new { font-size: 13px; font-weight: 700; color: #0159a0; }
.upsell-price .old { font-size: 11px; color: #999; text-decoration: line-through; }

/* FORM & INPUTS */
.th-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.form-group.full-width { grid-column: 1 / -1; }
.form-group{margin-bottom: 0;}
.th-input {
    width: 100%;
    height: 42px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 14px;
    color: #333;
    transition: 0.2s;
}
.th-input:focus { border-color: #0159a0; outline: none; box-shadow: 0 0 0 3px rgba(1, 89, 160, 0.1); }

/* RADIOS TÙY CHỈNH */
.th-delivery-methods { display: flex; gap: 20px; }
.th-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.th-radio-label input[type="radio"] { accent-color: #0159a0; width: 16px; height: 16px; }

/* TOGGLE HÓA ĐƠN */
.th-invoice-header { display: flex; justify-content: space-between; align-items: center; }

/* CỘT PHẢI (SIDEBAR) */
.th-sidebar-wrap { position: sticky; top: 20px; }
.th-sidebar-title { font-size: 14px; font-weight: 700; color: #222; margin: 0 0 12px 0; }

.th-promo-selected { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: #444; }
.th-promo-selected li { display: flex; gap: 8px; align-items: flex-start; }

/* GRID QUÀ TẶNG */
.th-gift-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.gift-item {
    display: flex; align-items: center; gap: 8px; padding: 8px;
    border: 1px solid #eaecf0; border-radius: 6px; background: #fafafa;
}
.gift-item img { width: 30px; height: 30px; object-fit: contain; }
.gift-item span { font-size: 11px; font-weight: 600; color: #333; line-height: 1.3;}

/* TỔNG KẾT ĐƠN HÀNG */
.th-order-summary { padding: 25px 20px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #444; margin-bottom: 12px; }
.summary-divider { border-top: 1px dashed #ccc; margin: 15px 0; }
.summary-row.final { font-weight: 700; font-size: 15px; }
.total-red { font-size: 22px; color: #d0021b; }

.summary-note { font-size: 12px; color: #666; font-style: italic; margin-top: 10px; }
.th-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #444; cursor: pointer;}
.th-checkbox-label input { margin-top: 3px; accent-color: #0159a0;}
.th-checkbox-label a { color: #0159a0; text-decoration: none;}

.btn-submit-order {
    width: 100%; height: 50px;
    background: #0159a0; color: #fff;
    border: none; border-radius: 8px;
    font-size: 16px; font-weight: 700;
    cursor: pointer; transition: 0.3s;
}
.btn-submit-order:hover { background: #004a87; }
.btn-submit-order:disabled { background: #999; cursor: not-allowed; }

/* =======================================================
   VOUCHER / MÃ GIẢM GIÁ
======================================================= */
.th-promo-selected i { margin-top: 3px; }
.th-voucher-wrapper { margin-bottom: 10px; }

.th-voucher-input-group {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Đổi viền xanh khi nhấp vào ô nhập mã */
.th-voucher-input-group:focus-within {
    border-color: #0159a0;
    box-shadow: 0 0 0 3px rgba(1, 89, 160, 0.1);
}

.voucher-icon {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    font-size: 14px;
    pointer-events: none;
}

.voucher-input {
    flex: 1;
    border: none !important;
    box-shadow: none !important;
    padding-left: 35px !important; /* Chừa chỗ cho cái icon vé */
    border-radius: 0;
    height: 42px;
    text-transform: uppercase; /* Thường mã giảm giá hay viết hoa */
}

.btn-apply-voucher {
    background: #0159a0;
    color: #fff;
    border: none;
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-apply-voucher:hover { background: #004a87; }
.btn-apply-voucher:disabled { background: #cbd5e1; cursor: not-allowed; color: #fff;}

.voucher-msg {
    font-size: 12px;
    margin-top: 6px;
    font-weight: 500;
}
.voucher-msg.success { color: #059669; }
.voucher-msg.error { color: #dc2626; }

/* Tinh chỉnh lại các dòng tính tiền */
.summary-row.text-success span { color: #059669; }

/* Khung note báo cáo */
.summary-note {
    background: #f8fafc;
    padding: 10px 12px;
    border-radius: 6px;
    color: #475569;
    font-size: 12px;
    margin-top: 15px;
    border-left: 3px solid #0159a0;
    line-height: 1.5;
}
.summary-note i { color: #0159a0; margin-right: 4px; }

/* =======================================================
   DANH SÁCH CỬA HÀNG VÀ BÁO LỖI (VALIDATION)
======================================================= */
/* Text báo lỗi (Validation) */
.th-error-msg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #d0021b;
    margin-top: 6px;
    font-weight: 500;
    line-height: 1.4;
}
.th-error-msg i {
    margin-top: 2px;
}

/* Danh sách cửa hàng (Dạng Grid) */
.th-store-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.th-store-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    margin: 0;
}

.th-store-item input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #0159a0;
    cursor: pointer;
}

.th-store-item .store-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.th-store-item .store-info strong {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.th-store-item .store-info span {
    font-size: 12px;
    color: #666;
}

/* Khi người dùng chọn vào cửa hàng đó */
.th-store-item:has(input:checked) {
    border-color: #0159a0;
    background: #f8fcff;
}

@media (min-width: 768px) {
    .th-store-list {
        grid-template-columns: 1fr 1fr; /* PC chia 2 cột cho gọn */
    }
}

/* RESPONSIVE MOBILE */
@media (max-width: 991px) {
    .th-checkout-grid { grid-template-columns: 1fr; }
    .th-sidebar-wrap { position: static; }
}
@media (max-width: 576px) {
    .th-form-grid { grid-template-columns: 1fr; }
    .th-cart-item { flex-direction: column; align-items: flex-start; }
    .item-actions { width: 100%; justify-content: space-between; margin-top: 10px; }
}