/**
 * ==============================================================================================
 * BẢNG CẤU HÌNH MÀU SẮC TOÀN WEBSITE (DESIGN TOKENS & BRAND THEME)
 * NHÀ XE DŨNG MINH (CÔNG TY TNHH DŨNG MINH)
 * ==============================================================================================
 * Màu chủ đạo nhận diện thương hiệu:
 * 1. Xanh Royal Doanh Nghiệp (Dũng Minh Blue): #0D3F8D / #1045A1 / #08234D (Chủ đạo, Header, Footer)
 * 2. Đỏ Tươi Điểm Nhấn (Dũng Minh Red): #E51A22 / #DC2626 / #C8141B (Biểu tượng DM, Hotline, Nút Đặt Vé CTA)
 * 3. Vàng Gold Hoàng Gia (Royal Gold): #F59E0B / #D97706 (Sao đánh giá, huy hiệu chất lượng)
 * ==============================================================================================
 */

:root {
    /* --------------------------------------------------------------------------
     * 1. TONE MÀU CHỦ ĐẠO / XANH DOANH NGHIỆP DŨNG MINH (PRIMARY / ROYAL NAVY)
     * Dùng cho: Header, Topbar, Footer, Tiêu đề chính, Card headers
     * -------------------------------------------------------------------------- */
    --dm-blue: #0D3F8D;          /* Màu xanh chủ đạo Dũng Minh */
    --dm-blue-dark: #08234D;     /* Màu xanh đậm (Topbar, Footer) */
    --dm-blue-light: #1557BA;    /* Màu xanh sáng (Hover, viền card) */
    --dm-blue-deep: #05142B;     /* Màu xanh đen rất sâu */
    --dm-blue-soft: #F0F5FF;     /* Màu nền xanh nhạt cho section/badge */
    --dm-blue-rgb: 13, 63, 141;

    /* Tương thích ngược biến hệ thống */
    --bt-navy: var(--dm-blue);
    --bt-navy-dark: var(--dm-blue-dark);
    --bt-navy-light: var(--dm-blue-light);
    --bt-navy-deep: var(--dm-blue-deep);
    --bt-navy-soft: var(--dm-blue-soft);
    --bt-navy-rgb: var(--dm-blue-rgb);

    /* --------------------------------------------------------------------------
     * 2. TONE MÀU ĐIỂM NHẤN / ĐỎ THƯƠNG HIỆU & HOTLINE (ACCENT / PRIMARY CTA / RED)
     * Dùng cho: Nút bấm đặt vé, CTA chính, hotline badge, icon, tag, viền nổi bật
     * -------------------------------------------------------------------------- */
    --dm-red: #E51A22;           /* Màu đỏ chuẩn logo Dũng Minh & Hotline */
    --dm-red-hover: #C8141B;     /* Màu khi hover chuột vào nút bấm */
    --dm-red-active: #A50E14;    /* Màu khi active/click */
    --dm-red-light: #FEF2F2;     /* Nền đỏ nhạt */
    --dm-red-border: #FECACA;    /* Viền đỏ nhạt */
    --dm-red-shadow: rgba(229, 26, 34, 0.35);
    --dm-red-rgb: 229, 26, 34;

    /* Tương thích ngược biến hệ thống */
    --bt-orange: var(--dm-red);
    --bt-orange-hover: var(--dm-red-hover);
    --bt-orange-active: var(--dm-red-active);
    --bt-orange-light: var(--dm-red-light);
    --bt-orange-border: var(--dm-red-border);
    --bt-orange-shadow: var(--dm-red-shadow);
    --bt-orange-rgb: var(--dm-red-rgb);

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

    /* Tương thích ngược biến hệ thống */
    --bt-yellow: var(--dm-gold);
    --bt-yellow-hover: var(--dm-gold-hover);
    --bt-yellow-dark: var(--dm-gold-dark);
    --bt-yellow-light: var(--dm-gold-light);
    --bt-yellow-border: var(--dm-gold-border);
    --bt-yellow-shadow: var(--dm-gold-shadow);
    --bt-yellow-rgb: var(--dm-gold-rgb);

    /* --------------------------------------------------------------------------
     * 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: #0D3F8D;          /* Màu chữ tiêu đề / tối */

    /* --------------------------------------------------------------------------
     * 5. BRAND TOKEN MAPPING (ĐỒNG BỘ CẢ HỆ THỐNG)
     * -------------------------------------------------------------------------- */
    --brand-primary: var(--dm-blue);
    --brand-primary-hover: var(--dm-blue-light);
    --brand-primary-dark: var(--dm-blue-dark);
    --brand-primary-deep: var(--dm-blue-deep);
    --brand-primary-light: var(--dm-blue-soft);
    --brand-primary-border: #CDD9E5;
    --brand-primary-shadow: rgba(13, 63, 141, 0.25);
    --brand-primary-rgb: var(--dm-blue-rgb);

    --brand-cta: var(--dm-red);
    --brand-cta-hover: var(--dm-red-hover);
    --brand-cta-light: var(--dm-red-light);
    --brand-cta-shadow: var(--dm-red-shadow);
    --brand-cta-rgb: var(--dm-red-rgb);

    --brand-accent: var(--dm-red);
    --brand-accent-hover: var(--dm-red-hover);
    --brand-accent-dark: var(--dm-red-active);
    --brand-accent-light: var(--dm-red-light);
    --brand-accent-border: var(--dm-red-border);
    --brand-accent-shadow: var(--dm-red-shadow);
    --brand-accent-rgb: var(--dm-red-rgb);

    /* --------------------------------------------------------------------------
     * 6. MÀU VĂN BẢN (TYPOGRAPHY COLORS)
     * -------------------------------------------------------------------------- */
    --text-main: #0D3F8D;                 /* 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(--dm-red);        /* 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(--dm-blue);     /* Ghế mở bán */
    --seat-selected: var(--dm-red);       /* 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(--dm-red);
    --pd-teal-dark: var(--dm-red-hover);
    --pd-teal-hover: var(--dm-red-hover);
    --pd-teal-light: var(--dm-red-light);
    --pd-navy: var(--dm-blue);
    --pd-navy-dark: var(--dm-blue-dark);
    --pd-navy-light: var(--dm-blue-light);
    --pd-orange: var(--dm-red);
    --pd-orange-hover: var(--dm-red-hover);
    --pd-yellow: var(--dm-gold);
    --pd-yellow-light: #FEFCE8;
    --pd-yellow-dark: #D97706;
    --pd-dark: var(--dm-blue);
    --pd-muted: var(--bt-muted);
    --pd-text-main: var(--dm-blue);
    --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(--dm-red, #E51A22) 0%, var(--dm-red-hover, #C8141B) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px -4px var(--dm-red-shadow, rgba(229, 26, 34, 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(--dm-red-hover, #C8141B) 0%, var(--dm-red-active, #A50E14) 100%) !important;
    box-shadow: 0 12px 26px -4px var(--dm-red-shadow, rgba(229, 26, 34, 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, #0D3F8D 0%, #1557BA 100%) !important;
    color: #FFFFFF !important;
}

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

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

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

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