/* ===================================================================
   XE DU LỊCH ĐÔNG NAM — Design tokens
   Nguồn DUY NHẤT cho màu, chữ, khoảng cách, bo góc, bóng đổ.
   KHÔNG hard-code mã màu ở file khác; luôn dùng biến ở đây.

   Bảng màu lấy từ nhận diện in sẵn của khách (docs/logo.png,
   docs/Xe-Du-Lich.png): XANH là cấu trúc, ĐỎ là hành động và con số.
   Đảo vai hai màu là trang đọc như biển quảng cáo.

   Tên biến là hợp đồng với các file CSS còn lại: ĐỔI GIÁ TRỊ, đừng đổi tên.
   =================================================================== */

:root {
    /* ---- Màu thương hiệu ---- */
    --c-primary: #0068ae;          /* xanh Đông Nam: header, tiêu đề, viền */
    --c-primary-dark: #17527f;     /* xanh đậm: nền tối, hover */
    --c-primary-darker: #0f3a5c;   /* xanh đậm nhất: chân trang, dải quy trình */
    --c-primary-soft: #3b84cc;     /* xanh nhạt: gradient, viền nhấn */
    --c-primary-mist: #edf4fb;     /* xanh rất nhạt: nền section xen kẽ */
    --c-accent: #bc2328;           /* đỏ Đông Nam: CTA, giá, gạch dưới tiêu đề */
    --c-accent-dark: #9c1b20;      /* đỏ đậm: hover CTA */
    --c-accent-soft: #fbe9e9;      /* đỏ nhạt: nền huy hiệu, nền trích dẫn */

    /* ---- Màu trung tính ---- */
    --c-ink: #10202f;              /* chữ tiêu đề */
    --c-body: #131313;             /* chữ thân bài */
    --c-muted: #464646;            /* chữ phụ, chú thích */
    --c-line: #dfe6ee;             /* viền */
    --c-line-soft: #eef2f7;        /* viền rất nhạt, kẻ bảng */
    --c-bg: #ffffff;
    --c-bg-soft: #f4f7fb;          /* nền section xen kẽ */
    --c-white: #ffffff;

    /* ---- Trạng thái ---- */
    --c-success: #127a45;
    --c-danger: #b3261e;
    --c-star: #e0a82e;
    --c-success-soft: #e3f3ea;
    --c-danger-soft: #fbe6e5;
    --c-info: #1e68b2;
    --c-info-soft: #e7eff8;
    /* ---- Chữ ----
       HAI HỌ FONT, mỗi họ một việc. <link> khai ở Frontend/MasterPage.master.

       1) Be Vietnam Pro — toàn bộ chữ.
          Font Việt, dấu được vẽ RIÊNG cho từng ký tự nên tổ hợp dấu chồng
          (Ế Ộ Ữ ề ộ ữ) không đè lên nhau ở cỡ tiêu đề lớn.

       2) Inter — CHỈ CHỮ SỐ, tải đúng glyph 0-9 . , đ qua &text= (~17 KB).
          Lý do: Be Vietnam Pro KHÔNG có bảng `tnum`; ép bằng
          `font-feature-settings: "tnum" 1` cũng vô hiệu — đã đo, bề rộng chữ số
          chạy từ 17,8 đến 28,9 px, tức cột giá không bao giờ thẳng hàng.
          Inter có tnum: mọi chữ số đúng 25,83 px.
          (Font hệ thống cũ cũng không có tnum: 19,3 - 24,8 px. Suốt thời gian đó
          `font-variant-numeric: tabular-nums` trong base.css là lời hứa suông.)

       Ghép hai họ trong cùng một dòng an toàn: đã đo chiều cao chữ số lệch 1,3%
       (75 so với 74) và cap-height 74 so với 73 — mắt thường không nhận ra.

       ⚠️ --font-num PHẢI để Be Vietnam Pro ngay sau Inter: subset Inter chỉ có
       chữ số, mọi ký tự khác rơi xuống mục kế tiếp trong danh sách. Bỏ
       Be Vietnam Pro ra là chữ nằm cùng dòng với số nhảy về font hệ thống. */
    --font-display: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-base: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-num: "Inter", "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --fs-hero: clamp(2.1rem, 5.2vw, 3.1rem);
    /* Cấp "statement": câu định vị giữa trang. Không có cấp này thì thang chữ
       nhảy thẳng từ hero xuống h2 và phần giữa trang đọc rất phẳng. */
    --fs-statement: clamp(1.75rem, 3.4vw, 2.75rem);
    --fs-h1: clamp(1.9rem, 4vw, 2.5rem);
    --fs-h2: clamp(1.6rem, 3vw, 2.1rem);
    --fs-h3: clamp(1.1rem, 1.6vw, 1.35rem);
    --fs-lead: clamp(1.03rem, 1.3vw, 1.16rem);
    --fs-body: 1rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-kicker: 0.78rem;
    --lh-tight: 1.18;
    --lh-heading: 1.28;
    --lh-body: 1.68;
    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* ---- Khoảng cách ---- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.75rem;
    --sp-8: 4rem;
    --sp-9: 5.5rem;
    --section-y: clamp(2rem, 6vw, 3rem);
    --container: 1400px;
    --gutter: clamp(1rem, 3vw, 1.75rem);
    /* ---- Bo góc ----
       Bo nhỏ, gần vuông: nhận diện in của khách dùng toàn hình khối góc nhọn
       (dải chéo đỏ/xanh). Bo tròn nhiều là lệch hẳn khỏi bộ nhận diện đó. */
    --radius-xs: 3px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* ---- Bóng đổ ---- */
    --shadow-xs: 0 1px 2px rgba(16, 32, 47, .06);
    --shadow-sm: 0 2px 8px rgba(16, 32, 47, .07);
    --shadow: 0 6px 20px rgba(16, 32, 47, .09);
    --shadow-lg: 0 16px 40px rgba(16, 32, 47, .14);
    --shadow-accent: 0 8px 22px rgba(188, 35, 40, .28);

    /* ---- Đường kẻ nhấn dưới tiêu đề section ---- */
    --rule: 3px;
    --rule-w: 52px;

    /* ---- Chuyển động ---- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur: .22s;

    /* ---- Lớp xếp chồng ---- */
    --z-header: 1030;
    --z-float: 1040;
    --z-overlay: 1050;

    /* ---- Chiều cao header (JS/CSS cùng đọc) ---- */
    --header-h: 76px;
    --header-h-sm: 62px;
}