/**
 * ==============================================================================================
 * BẢNG CẤU HÌNH MÀU SẮC TOÀN WEBSITE (DESIGN TOKENS & BRAND THEME)
 * NHÀ XE TÂN KIM CHI
 * Tone Chủ Đạo: Vàng Hoàng Kim Tân Kim Chi (#FAB814 / #F59E0B) & Đen Than Chì Sang Trọng (#111827 / #0F172A)
 * Điểm Nhấn: Vàng Hổ Phách & Vàng Hoàng Yến (#FBBF24 / #F59E0B)
 * ==============================================================================================
 */

:root {
    /* --------------------------------------------------------------------------
     * 1. TONE MÀU ĐEN THAN CHÌ SANG TRỌNG / LUXURY CHARCOAL & SLATE (PRIMARY DARK)
     * Dùng cho: Topbar, Footer, Tiêu đề chính, Card headers nền tối
     * -------------------------------------------------------------------------- */
    --bt-navy: #111827;          /* Màu đen than chì sang trọng chủ đạo */
    --bt-navy-dark: #0B0F17;     /* Màu tối hơn cho Topbar, Footer */
    --bt-navy-light: #1F2937;    /* Màu sáng hơn khi hover */
    --bt-navy-deep: #030712;     /* Màu nền siêu tối */
    --bt-navy-soft: #FFFBEB;     /* Màu nền nhạt pha vàng kim nhẹ */
    --bt-navy-rgb: 17, 24, 39;

    /* --------------------------------------------------------------------------
     * 2. TONE MÀU VÀNG HOÀNG KIM TÂN KIM CHI / CHỦ ĐẠO THƯƠNG HIỆU & NÚT BẤM (PRIMARY GOLD)
     * Dùng cho: Nút bấm đặt vé, CTA chính, icon, tag, viền nổi bật, trạng thái
     * -------------------------------------------------------------------------- */
    --bt-orange: #FAB814;        /* Vàng Hoàng Kim chuẩn logo Tân Kim Chi */
    --bt-orange-hover: #E09000;  /* Màu hover vàng cam đậm */
    --bt-orange-active: #B45309; /* Màu active / click */
    --bt-orange-light: #FEF3C7;  /* Nền vàng kim siêu nhạt */
    --bt-orange-border: #FDE68A; /* Viền vàng kim nhạt */
    --bt-orange-shadow: rgba(250, 184, 20, 0.45);
    --bt-orange-rgb: 250, 184, 20;

    /* Tân Kim Chi Gold Alias & Legacy Mapping */
    --tp-green: #FAB814;
    --tp-green-hover: #E09000;
    --tp-green-dark: #B45309;
    --tp-green-light: #FEF3C7;
    --tp-green-border: #FDE68A;
    --tp-green-shadow: rgba(250, 184, 20, 0.45);
    --tp-green-rgb: 250, 184, 20;

    --tkc-gold: #FAB814;
    --tkc-gold-hover: #E09000;
    --tkc-black: #111827;

    /* --------------------------------------------------------------------------
     * 3. TONE MÀU PHỤ / VÀNG HỔ PHÁCH (SECONDARY ACCENT / GOLD / AMBER / STAR)
     * Dùng cho: Sao đánh giá, huy hiệu VIP, vạch trang trí, điểm nhấn hotline
     * -------------------------------------------------------------------------- */
    --bt-yellow: #F59E0B;        /* Màu sao đánh giá, huy hiệu, hotline */
    --bt-yellow-hover: #D97706;  /* Màu hover */
    --bt-yellow-dark: #B45309;
    --bt-yellow-light: #FFFBEB;  /* Nền nhạt cho thông báo / khuyến mãi */
    --bt-yellow-border: #FDE68A;
    --bt-yellow-shadow: rgba(245, 158, 11, 0.45);
    --bt-yellow-rgb: 245, 158, 11;

    /* --------------------------------------------------------------------------
     * 4. TONE MÀU NỀN & CHỮ MÔ TẢ (BACKGROUND & MUTED TEXT)
     * -------------------------------------------------------------------------- */
    --bt-paper: #F9FAFB;         /* Nền xám ngọc trai thanh lịch */
    --bt-muted: #6B7280;         /* Màu chữ xám mô tả phụ */
    --bt-dark: #111827;          /* Màu chữ tiêu đề */

    /* --------------------------------------------------------------------------
     * 5. BRAND TOKEN MAPPING (ĐỒNG BỘ CẢ HỆ THỐNG)
     * -------------------------------------------------------------------------- */
    --brand-primary: var(--bt-orange);
    --brand-primary-hover: var(--bt-orange-hover);
    --brand-primary-dark: var(--bt-orange-active);
    --brand-primary-deep: var(--bt-navy);
    --brand-primary-light: var(--bt-orange-light);
    --brand-primary-border: var(--bt-orange-border);
    --brand-primary-shadow: var(--bt-orange-shadow);
    --brand-primary-rgb: var(--bt-orange-rgb);

    --brand-cta: var(--bt-orange);
    --brand-cta-hover: var(--bt-orange-hover);
    --brand-cta-light: var(--bt-orange-light);
    --brand-cta-shadow: var(--bt-orange-shadow);
    --brand-cta-rgb: var(--bt-orange-rgb);

    --brand-accent: var(--bt-yellow);
    --brand-accent-hover: var(--bt-yellow-hover);
    --brand-accent-dark: var(--bt-yellow-dark);
    --brand-accent-light: var(--bt-yellow-light);
    --brand-accent-border: var(--bt-yellow-border);
    --brand-accent-shadow: var(--bt-yellow-shadow);
    --brand-accent-rgb: var(--bt-yellow-rgb);

    /* --------------------------------------------------------------------------
     * 6. MÀU VĂN BẢN (TYPOGRAPHY COLORS)
     * -------------------------------------------------------------------------- */
    --text-main: #111827;                 /* Màu chữ tiêu đề và nội dung chính */
    --text-muted: var(--bt-muted);        /* Màu chữ phụ, mô tả phụ */
    --text-light: #9CA3AF;                /* Màu chữ mờ, nhãn phụ */
    --text-inverse: #FFFFFF;              /* Màu chữ trắng trên nền tối */

    /* --------------------------------------------------------------------------
     * 7. MÀU NỀN & VIỀN BỐ CỤC (BACKGROUND & BORDER COLORS)
     * -------------------------------------------------------------------------- */
    --bg-page: var(--bt-paper);           /* Màu nền toàn bộ website */
    --bg-card: #FFFFFF;                   /* Màu nền các thẻ / Card / Box */
    --bg-card-alt: #FFFDF5;               /* Màu nền thẻ phụ / ô tìm kiếm phụ */
    --border-color: #E5E7EB;              /* Màu đường viền khung thẻ */
    --border-color-light: #F3F4F6;        /* Màu đường phân cách nhẹ */
    --border-focus: var(--bt-orange);     /* Màu viền khi click vào ô nhập liệu */

    /* --------------------------------------------------------------------------
     * 8. TRẠNG THÁI GHẾ & HỆ THỐNG (SEAT & SYSTEM STATUS)
     * -------------------------------------------------------------------------- */
    --seat-available: var(--bt-orange);   /* Ghế mở bán */
    --seat-selected: #D97706;             /* Ghế đang chọn */
    --seat-held: #FEF3C7;                 /* Ghế đang giữ */
    --seat-sold: #CBD5E1;                 /* Ghế đã bán */
    --seat-blocked: #E2E8F0;              /* Ghế khóa */

    /* --------------------------------------------------------------------------
     * 9. ALIAS MAPPING (ĐỒNG BỘ TƯƠNG THÍCH VỚI TOÀN BỘ CÁC TRANG CON)
     * -------------------------------------------------------------------------- */
    --pd-teal: var(--bt-orange);
    --pd-teal-dark: var(--bt-orange-hover);
    --pd-teal-hover: var(--bt-orange-hover);
    --pd-teal-light: #FEF3C7;
    --pd-navy: var(--bt-navy);
    --pd-navy-dark: var(--bt-navy-dark);
    --pd-navy-light: var(--bt-navy-light);
    --pd-orange: var(--bt-orange);
    --pd-orange-hover: var(--bt-orange-hover);
    --pd-yellow: var(--bt-yellow);
    --pd-yellow-light: #FFFBEB;
    --pd-yellow-dark: var(--bt-yellow-dark);
    --pd-dark: var(--bt-navy);
    --pd-muted: var(--bt-muted);
    --pd-text-main: var(--bt-navy);
    --pd-bg: var(--bg-page);
    --pd-border: var(--border-color);
}

/* ==============================================================================
 * NÚT BẤM CTA ĐẶT VÉ TOÀN HỆ THỐNG (.continue-booking-btn / .btn-brand-cta)
 * ============================================================================== */
.continue-booking-btn,
.btn-brand-cta {
    background: linear-gradient(135deg, #FAB814 0%, #E09000 100%) !important;
    color: #111827 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px -4px rgba(250, 184, 20, 0.45) !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.continue-booking-btn:hover:not(:disabled),
.btn-brand-cta:hover:not(:disabled) {
    background: linear-gradient(135deg, #E09000 0%, #B45309 100%) !important;
    box-shadow: 0 12px 26px -4px rgba(250, 184, 20, 0.6) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

.continue-booking-btn:disabled,
.btn-brand-cta:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==============================================================================
 * CÁC CLASS MÀU THƯƠNG HIỆU TOÀN DIỆN (ĐẢM BẢO 100% HIỂN THỊ CHÍNH XÁC)
 * ============================================================================== */
.booking-step-bar {
    background: linear-gradient(135deg, #111827 0%, #1F2937 100%) !important;
    color: #FFFFFF !important;
}

.text-bt-navy, .text-\[\#183B68\], .text-\[\#1E100B\], .text-\[var\(--bt-navy\)\], [class*="text-[var(--bt-navy)]"] { color: #111827 !important; }
.bg-bt-navy, .bg-\[\#183B68\], .bg-\[\#1E100B\], .bg-\[var\(--bt-navy\)\], [class*="bg-[var(--bt-navy)]"] { background-color: #111827 !important; }
.border-bt-navy, .border-\[\#183B68\], .border-\[\#1E100B\], .border-\[var\(--bt-navy\)\], [class*="border-[var(--bt-navy)]"] { border-color: #111827 !important; }

.text-bt-orange, .text-\[\#E26A20\], .text-\[\#FAB814\], .text-\[var\(--bt-orange\)\], [class*="text-[var(--bt-orange)]"] { color: #FAB814 !important; }
.bg-bt-orange, .bg-\[\#E26A20\], .bg-\[\#FAB814\], .bg-\[var\(--bt-orange\)\], [class*="bg-[var(--bt-orange)]"] { background-color: #FAB814 !important; }
.border-bt-orange, .border-\[\#E26A20\], .border-\[\#FAB814\], .border-\[var\(--bt-orange\)\], [class*="border-[var(--bt-orange)]"] { border-color: #FAB814 !important; }

.text-bt-yellow, .text-\[\#F5A623\], .text-\[\#F59E0B\], .text-\[var\(--bt-yellow\)\], [class*="text-[var(--bt-yellow)]"] { color: #FAB814 !important; }
.bg-bt-yellow, .bg-\[\#F5A623\], .bg-\[\#F59E0B\], .bg-\[var\(--bt-yellow\)\], [class*="bg-[var(--bt-yellow)]"] { background-color: #FAB814 !important; }
.border-bt-yellow, .border-\[\#F5A623\], .border-\[\#F59E0B\], .border-\[var\(--bt-yellow\)\], [class*="border-[var(--bt-yellow)]"] { border-color: #FAB814 !important; }

.text-pd-teal, .text-\[var\(--pd-teal\)\], [class*="text-[var(--pd-teal)]"] { color: #FAB814 !important; }
.bg-pd-teal, .bg-\[var\(--pd-teal\)\], [class*="bg-[var(--pd-teal)]"] { background-color: #FAB814 !important; }
.border-pd-teal, .border-\[var\(--pd-teal\)\], [class*="border-[var(--pd-teal)]"] { border-color: #FAB814 !important; }