/**
 * ==============================================================================================
 * BẢNG CẤU HÌNH MÀU SẮC TOÀN WEBSITE (DESIGN TOKENS & BRAND THEME)
 * NHÀ XE HÒA HIỆP THÀNH PHÁT
 * Tone Chủ Đạo: Xanh Lá Thành Phát (#4BA82E) & Nâu Cà Phê Sang Trọng (#1E100B / #2B1711)
 * Điểm Nhấn: Vàng Hổ Phách (#F59E0B)
 * ==============================================================================================
 */

:root {
    /* --------------------------------------------------------------------------
     * 1. TONE MÀU NÂU ĐẬM SANG TRỌNG / LUXURY DEEP COFFEE (PRIMARY DARK)
     * Dùng cho: Topbar, Footer, Tiêu đề chính, Card headers nền tối
     * -------------------------------------------------------------------------- */
    --bt-navy: #1E100B;          /* Màu nâu cà phê đen chủ đạo */
    --bt-navy-dark: #130906;     /* Màu tối hơn cho Topbar, Footer */
    --bt-navy-light: #331C14;    /* Màu sáng hơn khi hover */
    --bt-navy-deep: #0D0604;     /* Màu nền siêu tối */
    --bt-navy-soft: #F4FBF1;     /* Màu nền nhạt pha xanh nhẹ */
    --bt-navy-rgb: 30, 16, 11;

    /* --------------------------------------------------------------------------
     * 2. TONE MÀU XANH LÁ THÀNH PHÁT / CHỦ ĐẠO THƯƠNG HIỆU & NÚT BẤM (PRIMARY GREEN)
     * 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: #4BA82E;        /* Xanh lá tươi mới Thành Phát */
    --bt-orange-hover: #3E9224;  /* Màu hover */
    --bt-orange-active: #31771C; /* Màu active / click */
    --bt-orange-light: #F0FDF4;  /* Nền xanh lá siêu nhạt */
    --bt-orange-border: #BBF7D0; /* Viền xanh lá nhạt */
    --bt-orange-shadow: rgba(75, 168, 46, 0.35);
    --bt-orange-rgb: 75, 168, 46;

    /* Thành Phát Green Alias */
    --tp-green: #4BA82E;
    --tp-green-hover: #3E9224;
    --tp-green-dark: #31771C;
    --tp-green-light: #F0FDF4;
    --tp-green-border: #BBF7D0;
    --tp-green-shadow: rgba(75, 168, 46, 0.35);
    --tp-green-rgb: 75, 168, 46;

    /* --------------------------------------------------------------------------
     * 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: #FEFCE8;  /* 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: #F8FAF7;         /* Nền xám xanh nhạt thanh lịch */
    --bt-muted: #5E6D7E;         /* Màu chữ xám mô tả phụ */
    --bt-dark: #1E100B;          /* 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: #1E100B;                 /* 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: #F1F5F0;               /* 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: #F0FDF4;
    --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-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, var(--bt-orange, #4BA82E) 0%, var(--bt-orange-hover, #3E9224) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px -4px var(--bt-orange-shadow, rgba(75, 168, 46, 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, #3E9224) 0%, var(--bt-orange-active, #31771C) 100%) !important;
    box-shadow: 0 12px 26px -4px var(--bt-orange-shadow, rgba(75, 168, 46, 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, #1E100B 0%, #2B1711 100%) !important;
    color: #FFFFFF !important;
}

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

.text-bt-orange, .text-\[\#E26A20\], .text-\[\#4BA82E\], .text-\[var\(--bt-orange\)\], [class*="text-[var(--bt-orange)]"] { color: #4BA82E !important; }
.bg-bt-orange, .bg-\[\#E26A20\], .bg-\[\#4BA82E\], .bg-\[var\(--bt-orange\)\], [class*="bg-[var(--bt-orange)]"] { background-color: #4BA82E !important; }
.border-bt-orange, .border-\[\#E26A20\], .border-\[\#4BA82E\], .border-\[var\(--bt-orange\)\], [class*="border-[var(--bt-orange)]"] { border-color: #4BA82E !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: #4BA82E !important; }
.bg-pd-teal, .bg-\[var\(--pd-teal\)\], [class*="bg-[var(--pd-teal)]"] { background-color: #4BA82E !important; }
.border-pd-teal, .border-\[var\(--pd-teal\)\], [class*="border-[var(--pd-teal)]"] { border-color: #4BA82E !important; }