/**
 * ==============================================================================================
 * BẢNG CẤU HÌNH MÀU SẮC TOÀN WEBSITE (DESIGN TOKENS & BRAND THEME)
 * BẢO TRƯỜNG LIMOUSINE
 * ==============================================================================================
 */

:root {
    /* --------------------------------------------------------------------------
     * 0. FONT CHỮ TOÀN HỆ THỐNG (TYPOGRAPHY - LEXEND)
     * -------------------------------------------------------------------------- */
    --font-body: 'Lexend', sans-serif;
    --font-sans: 'Lexend', sans-serif;
    --font-heading: 'Lexend', sans-serif;

    /* --------------------------------------------------------------------------
     * 1. TONE MÀU CHỦ ĐẠO / XANH ĐEN (PRIMARY / NAVY)
     * Dùng cho: Header, Topbar, Footer, Tiêu đề chính, Card headers
     * -------------------------------------------------------------------------- */
    --bt-navy: #183B68;          /* Màu chủ đạo chính của website */
    --bt-navy-dark: #0F2440;     /* Màu tối hơn (Topbar, Footer đậm) */
    --bt-navy-light: #234E84;    /* Màu sáng hơn (Hover, viền card) */
    --bt-navy-deep: #091728;     /* Màu xanh đen rất sâu */
    --bt-navy-soft: #f0f4f9;     /* Màu nền xanh nhạt cho section/badge */
    --bt-navy-rgb: 24, 59, 104;

    /* --------------------------------------------------------------------------
     * 2. TONE MÀU ĐIỂM NHẤN / NÚT BẤM / CAM (ACCENT / PRIMARY CTA)
     * Dùng cho: Nút bấm đặt vé, CTA chính, icon, tag, viền nổi bật
     * -------------------------------------------------------------------------- */
    --bt-orange: #E26A20;        /* Màu nút bấm, icon, tag, viền nổi bật */
    --bt-orange-hover: #C65310;  /* Màu khi hover chuột vào nút bấm */
    --bt-orange-active: #A84206; /* Màu khi active/click */
    --bt-orange-light: #FFF5EE;  /* Nền cam nhạt */
    --bt-orange-border: #FED7AA; /* Viền cam nhạt */
    --bt-orange-shadow: rgba(226, 106, 32, 0.35);
    --bt-orange-rgb: 226, 106, 32;

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

    /* --------------------------------------------------------------------------
     * 4. TONE MÀU NỀN & CHỮ MÔ TẢ (BACKGROUND & MUTED TEXT)
     * -------------------------------------------------------------------------- */
    --bt-paper: #F8FAFC;         /* Nền xám nhạt hiện đại của các Section */
    --bt-muted: #5A6E85;         /* Màu chữ xám mô tả phụ */
    --bt-dark: #183B68;          /* Màu chữ tiêu đề / tối */

    /* --------------------------------------------------------------------------
     * 5. BRAND TOKEN MAPPING (ĐỒNG BỘ CẢ HỆ THỐNG)
     * -------------------------------------------------------------------------- */
    --brand-primary: var(--bt-navy);
    --brand-primary-hover: var(--bt-navy-light);
    --brand-primary-dark: var(--bt-navy-dark);
    --brand-primary-deep: var(--bt-navy-deep);
    --brand-primary-light: var(--bt-navy-soft);
    --brand-primary-border: #cdd9e5;
    --brand-primary-shadow: rgba(24, 59, 104, 0.25);
    --brand-primary-rgb: var(--bt-navy-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: var(--bt-navy);          /* 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: #94a3b8;                /* 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: #f1f5f9;               /* Màu nền thẻ phụ / ô tìm kiếm phụ */
    --border-color: #e2e8f0;              /* Màu đường viền khung thẻ */
    --border-color-light: #f1f5f9;        /* 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: var(--bt-yellow);    /* 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: #FFF5EE;
    --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: #FEFCE8;
    --pd-yellow-dark: var(--bt-orange-hover);
    --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, var(--bt-orange, #E26A20) 0%, var(--bt-orange-hover, #C65310) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px -4px var(--bt-orange-shadow, rgba(226, 106, 32, 0.4)) !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, var(--bt-orange-hover, #C65310) 0%, var(--bt-orange-active, #A84206) 100%) !important;
    box-shadow: 0 12px 26px -4px var(--bt-orange-shadow, rgba(226, 106, 32, 0.55)) !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, #183B68 0%, #234E84 100%) !important;
    color: #FFFFFF !important;
}

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

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

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

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