/* ============================================================================
   site.css — HỆ THỐNG THIẾT KẾ BONBON
   ---------------------------------------------------------------------------
   PHONG CÁCH: "Pop du lịch" — vui, ấm, hướng khách trẻ đi chơi, nhưng vẫn đủ
   tin cậy để người ta dám chuyển tiền cọc. Vui nằm ở HÌNH DẠNG và NHỊP ĐIỆU
   (bo góc lớn, nhãn dán nghiêng, biểu tượng nảy) chứ không nằm ở việc đổ thật
   nhiều màu — màu loạn thì trông rẻ tiền chứ không trông vui.

   NGUYÊN TẮC (đọc trước khi sửa):
     1. MỌI giá trị màu / khoảng cách / bo góc đều lấy từ biến token ở mục 1.
        Không viết hex hay px thô trong component.
     2. BỘ MÀU CÓ VAI TRÒ RÕ RÀNG, không dùng lẫn:
          --accent (cam san hô) = hành động chính. Nút đặt xe, liên kết, tiêu điểm.
          --mint                = tín hiệu TỐT có thật (còn trống, tiết kiệm, đã xác minh).
          --sun                 = trang trí thuần túy (tia nắng, nhãn dán, gạch chân).
                                  KHÔNG BAO GIỜ làm chữ trên nền sáng — vàng trên trắng không đọc nổi.
          --grape               = điểm xuyết hiếm, để dải màu không bị đơn điệu.
        Ngoài ra chỉ còn màu ngữ nghĩa: success / warn / danger / info.
     3. Màu riêng của từng chiếc xe (--car) CHỈ dùng làm dấu nhận biết nhỏ
        (chấm màu, vạch viền). Không dùng làm nền nút — xe trắng sẽ không đọc được.
     4. Mỗi màu có BẢN CHO CHỮ riêng (--accent-ink, --mint-ink). Bản gốc đủ tươi
        để làm nền nút, nhưng đặt làm chữ trên nền trắng thì tụt dưới 4.5:1.
        Cần viết chữ màu ⇒ luôn dùng bản -ink.
     5. Nền tối KHÔNG phải nền sáng đảo ngược: bề mặt càng nổi thì càng SÁNG hơn,
        và giữ sắc ấm chứ không trôi về xám xanh.
   ========================================================================== */

/* ==========================================================================
   1. TOKEN
   ========================================================================== */
:root {
    /* ---- Cỡ chữ: một thang duy nhất, tỉ lệ ~1.25 ---- */
    --text-xs: 0.75rem;      /* 12px — nhãn phụ, chú thích */
    --text-sm: 0.8125rem;    /* 13px — meta, bảng dày đặc  */
    --text-md: 0.9375rem;    /* 15px — chữ phụ trong thẻ    */
    --text-base: 1rem;       /* 16px — chữ nội dung         */
    --text-lg: 1.25rem;      /* 20px — tiêu đề khối         */
    --text-xl: 1.75rem;      /* 28px — tiêu đề mục          */
    --text-2xl: 2.25rem;     /* 36px — tiêu đề trang        */
    --text-3xl: 3.25rem;     /* 52px — hero                 */

    /* ---- Hai họ chữ: Fredoka bo tròn để "vui", Be Vietnam Pro để đọc lâu ----
       Cả hai đều có bộ dấu tiếng Việt đầy đủ. Fredoka CHỈ dùng cho tiêu đề và
       con số lớn; đặt cả đoạn văn bằng Fredoka thì đọc mỏi mắt. */
    /* Baloo 2 thay cho Fredoka: cùng kiểu chữ bo tròn nhưng CÓ bộ ký tự tiếng
       Việt đầy đủ. Fredoka thiếu dải U+1EA0–U+1EF1 (ạ ả ầ ế ộ…) nên trình duyệt
       phải mượn phông khác cho đúng mấy chữ có dấu — đó là lý do tiêu đề bị
       lỗi phông kiểu "Tạo tài khoản" mỗi chữ một dáng. */
    --font-display: 'Baloo 2', 'Be Vietnam Pro', ui-rounded, system-ui, sans-serif;
    --font-body: 'Be Vietnam Pro', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;

    /* ---- Khoảng cách: bội số của 4px ---- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px;

    /* ---- Bo góc: lớn hơn hẳn bản cũ. Đây là thứ tạo cảm giác "mềm và vui"
           nhanh nhất, trước cả màu sắc. ---- */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ---- Màu trung tính: mang sắc ẤM (hue 30) — nền kem thay vì trắng lạnh.
           Cùng một thẻ trắng đặt trên nền kem sẽ tự nổi lên mà không cần bóng. ---- */
    --bg:            hsl(38 52% 97%);
    --bg-subtle:     hsl(36 44% 94%);
    --surface:       hsl(0 0% 100%);
    --surface-raised:hsl(0 0% 100%);
    --surface-sunken:hsl(36 44% 96%);
    --border:        hsl(30 28% 88%);
    --border-strong: hsl(28 24% 78%);
    --text:          hsl(24 30% 13%);
    --text-soft:     hsl(25 16% 34%);    /* 8.9:1 trên nền kem */
    --muted:         hsl(25 12% 44%);    /* 5.4:1 — an toàn cho cả chữ nhỏ */

    /* ---- CAM SAN HÔ: màu thương hiệu, dành cho hành động chính ---- */
    --accent:        hsl(12 85% 50%);    /* nền nút + chữ trắng = 4.6:1 */
    --accent-hover:  hsl(12 82% 43%);
    --accent-ink:    hsl(10 78% 40%);    /* chữ cam trên nền sáng = 6.1:1 */
    --accent-soft:   hsl(16 100% 96%);
    --accent-border: hsl(14 82% 86%);
    --accent-fg:     hsl(0 0% 100%);

    /* ---- MINT: tín hiệu tích cực có thật (còn trống, rẻ, đã xác minh) ---- */
    --mint:          hsl(168 68% 40%);
    --mint-ink:      hsl(170 72% 27%);   /* bản dùng cho chữ = 5.6:1 */
    --mint-soft:     hsl(166 62% 94%);
    --mint-border:   hsl(166 48% 80%);

    /* ---- NẮNG: chỉ trang trí. Không bao giờ làm chữ trên nền sáng. ---- */
    --sun:           hsl(42 96% 56%);
    --sun-soft:      hsl(45 100% 92%);
    --sun-border:    hsl(42 90% 78%);

    /* ---- NHO: điểm xuyết hiếm cho đỡ đơn điệu ---- */
    --grape:         hsl(272 58% 56%);
    --grape-ink:     hsl(272 55% 44%);
    --grape-soft:    hsl(272 70% 96%);

    /* ---- Màu ngữ nghĩa ---- */
    --success: hsl(160 68% 27%);  --success-soft: hsl(158 58% 94%);  --success-border: hsl(158 42% 80%);
    --warn:    hsl(32 88% 32%);   --warn-soft:    hsl(40 96% 93%);   --warn-border:    hsl(40 78% 78%);
    --danger:  hsl(354 70% 44%);  --danger-soft:  hsl(354 88% 96%);  --danger-border:  hsl(354 66% 87%);
    --info:    hsl(222 72% 45%);  --info-soft:    hsl(222 92% 96%);  --info-border:    hsl(222 66% 86%);
    --star:    hsl(38 94% 46%);

    /* ---- Nền tối ẤM dùng cho footer & dải kêu gọi (nâu mận, không phải xanh than) ---- */
    --ink:      hsl(20 26% 12%);
    --ink-2:    hsl(18 24% 17%);
    --on-ink:   hsl(36 40% 96%);
    --on-ink-soft: hsl(30 16% 74%);
    --ink-border: hsl(20 16% 26%);

    /* ---- Đổ bóng: ám sắc ấm để hoà vào nền kem. Bóng lạnh trên nền ấm
           trông như vết bẩn. ---- */
    --shadow-sm: 0 1px 2px hsl(24 40% 20% / .06);
    --shadow:    0 2px 4px hsl(24 40% 20% / .06), 0 8px 20px -8px hsl(24 40% 20% / .16);
    --shadow-lg: 0 4px 8px hsl(24 40% 20% / .07), 0 22px 48px -14px hsl(24 40% 20% / .24);
    /* Bóng "kẹo": khối màu đặc lệch xuống, dùng cho nút và nhãn dán chính. */
    --shadow-pop: 0 4px 0 hsl(12 60% 36%);
    --shadow-pop-sm: 0 3px 0 hsl(12 60% 36%);

    /* ---- Chuyển động ---- */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);   /* nảy nhẹ cho tương tác vui */
    --dur: 180ms;

    /* ---- Layout ---- */
    --container: 1220px;
    --header-h: 72px;

    /* ---- Màu chiếc xe hiện tại (đặt inline trên từng thẻ) ---- */
    --car: var(--accent);
}

/* ---- Nền tối: bề mặt sáng dần theo độ nổi, GIỮ SẮC ẤM, viền gánh vai trò của bóng ---- */
:root[data-theme="dark"], html.theme-dark {
    --bg:            hsl(24 22% 8%);
    --bg-subtle:     hsl(24 20% 11%);
    --surface:       hsl(24 18% 13%);
    --surface-raised:hsl(24 16% 17%);
    --surface-sunken:hsl(24 22% 10%);
    --border:        hsl(24 14% 24%);
    --border-strong: hsl(24 12% 34%);
    --text:          hsl(36 32% 95%);
    --text-soft:     hsl(30 14% 76%);
    --muted:         hsl(28 11% 64%);

    /* Nền tối cần màu SÁNG và BÃO HOÀ THẤP hơn để không bị chói. */
    --accent:        hsl(14 90% 62%);
    --accent-hover:  hsl(14 92% 70%);
    --accent-ink:    hsl(16 92% 68%);
    --accent-soft:   hsl(14 42% 17%);
    --accent-border: hsl(14 46% 32%);
    --accent-fg:     hsl(20 40% 9%);

    --mint:          hsl(166 60% 52%);
    --mint-ink:      hsl(166 64% 60%);
    --mint-soft:     hsl(168 34% 15%);
    --mint-border:   hsl(168 30% 30%);

    --sun:           hsl(42 92% 62%);
    --sun-soft:      hsl(42 36% 16%);
    --sun-border:    hsl(42 32% 32%);

    --grape:         hsl(272 72% 72%);
    --grape-ink:     hsl(272 74% 76%);
    --grape-soft:    hsl(272 34% 18%);

    --success: hsl(158 58% 58%); --success-soft: hsl(158 32% 14%); --success-border: hsl(158 28% 28%);
    --warn:    hsl(40 92% 64%);  --warn-soft:    hsl(40 36% 15%);  --warn-border:    hsl(40 32% 30%);
    --danger:  hsl(354 88% 70%); --danger-soft:  hsl(354 36% 16%); --danger-border:  hsl(354 32% 33%);
    --info:    hsl(218 88% 72%); --info-soft:    hsl(218 36% 16%); --info-border:    hsl(218 32% 33%);
    --star:    hsl(42 96% 62%);

    --ink:      hsl(24 22% 10%);
    --ink-2:    hsl(24 20% 14%);
    --on-ink:   hsl(36 30% 95%);
    --on-ink-soft: hsl(30 14% 70%);
    --ink-border: hsl(24 14% 24%);

    --shadow-sm: 0 1px 2px hsl(0 0% 0% / .34);
    --shadow:    0 2px 4px hsl(0 0% 0% / .34), 0 8px 20px -8px hsl(0 0% 0% / .54);
    --shadow-lg: 0 4px 8px hsl(0 0% 0% / .34), 0 22px 48px -14px hsl(0 0% 0% / .62);
    --shadow-pop: 0 4px 0 hsl(14 50% 32%);
    --shadow-pop-sm: 0 3px 0 hsl(14 50% 32%);
}

/* Người dùng chưa chọn thủ công thì đi theo thiết lập hệ điều hành.
   Giữ y hệt khối trên — CSS chưa cho phép gộp hai bộ chọn khác cơ chế này. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            hsl(24 22% 8%);
        --bg-subtle:     hsl(24 20% 11%);
        --surface:       hsl(24 18% 13%);
        --surface-raised:hsl(24 16% 17%);
        --surface-sunken:hsl(24 22% 10%);
        --border:        hsl(24 14% 24%);
        --border-strong: hsl(24 12% 34%);
        --text:          hsl(36 32% 95%);
        --text-soft:     hsl(30 14% 76%);
        --muted:         hsl(28 11% 64%);

        --accent:        hsl(14 90% 62%);
        --accent-hover:  hsl(14 92% 70%);
        --accent-ink:    hsl(16 92% 68%);
        --accent-soft:   hsl(14 42% 17%);
        --accent-border: hsl(14 46% 32%);
        --accent-fg:     hsl(20 40% 9%);

        --mint:          hsl(166 60% 52%);
        --mint-ink:      hsl(166 64% 60%);
        --mint-soft:     hsl(168 34% 15%);
        --mint-border:   hsl(168 30% 30%);

        --sun:           hsl(42 92% 62%);
        --sun-soft:      hsl(42 36% 16%);
        --sun-border:    hsl(42 32% 32%);

        --grape:         hsl(272 72% 72%);
        --grape-ink:     hsl(272 74% 76%);
        --grape-soft:    hsl(272 34% 18%);

        --success: hsl(158 58% 58%); --success-soft: hsl(158 32% 14%); --success-border: hsl(158 28% 28%);
        --warn:    hsl(40 92% 64%);  --warn-soft:    hsl(40 36% 15%);  --warn-border:    hsl(40 32% 30%);
        --danger:  hsl(354 88% 70%); --danger-soft:  hsl(354 36% 16%); --danger-border:  hsl(354 32% 33%);
        --info:    hsl(218 88% 72%); --info-soft:    hsl(218 36% 16%); --info-border:    hsl(218 32% 33%);
        --star:    hsl(42 96% 62%);

        --ink:      hsl(24 22% 10%);
        --ink-2:    hsl(24 20% 14%);
        --on-ink:   hsl(36 30% 95%);
        --on-ink-soft: hsl(30 14% 70%);
        --ink-border: hsl(24 14% 24%);

        --shadow-sm: 0 1px 2px hsl(0 0% 0% / .34);
        --shadow:    0 2px 4px hsl(0 0% 0% / .34), 0 8px 20px -8px hsl(0 0% 0% / .54);
        --shadow-lg: 0 4px 8px hsl(0 0% 0% / .34), 0 22px 48px -14px hsl(0 0% 0% / .62);
        --shadow-pop: 0 4px 0 hsl(14 50% 32%);
        --shadow-pop-sm: 0 3px 0 hsl(14 50% 32%);
    }
}

/* ==========================================================================
   2. NỀN TẢNG
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Tiêu đề dùng họ chữ bo tròn — đây là chỗ "chất vui" hiện rõ nhất mà không
   ảnh hưởng tới tốc độ đọc của phần nội dung. Phông đã tròn sẵn nên không
   cần bóp letter-spacing âm nhiều như phông chữ vuông.
   line-height 1.25: tiếng Việt có chữ đội hai dấu (Ế, Ộ, ẳ) cao hơn chữ Latin
   thường, để 1.15 là dấu dễ bị cụt khi tiêu đề xuống dòng. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 600;
}
h1, h2 { font-weight: 700; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* Vòng focus dùng chung — mọi thứ bấm được đều phải thấy được khi tab tới. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Bỏ outline mặc định CHỈ khi đã có :focus-visible thay thế ở trên. */
:focus:not(:focus-visible) { outline: none; }

/* Liên kết bỏ qua điều hướng — chỉ hiện khi tab vào. */
.skip-link {
    position: absolute; left: var(--space-4); top: -100px; z-index: 999;
    background: var(--accent); color: var(--accent-fg);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius);
    font-weight: 600; transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}
.container-narrow { max-width: 760px; }

/* Khoảng cách GIỮA các mục lớn gấp 2–3 lần khoảng cách BÊN TRONG chúng. */
.section { padding-block: var(--space-16); }
.section-tight { padding-block: var(--space-10); }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }

.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8);
}
.section-head h2 { font-size: clamp(var(--text-lg), 3.2vw, var(--text-xl)); }
.section-head p { color: var(--muted); margin-top: var(--space-2); max-width: 60ch; }
.section-head.center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

/* Nhãn mục dạng viên thuốc màu thay cho dòng chữ in hoa trơn — bắt mắt hơn
   và tự tạo nhịp điệu khi cuộn qua nhiều mục liên tiếp. */
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
    background: var(--accent-soft); color: var(--accent-ink);
    border: 1px solid var(--accent-border);
    font-weight: 700; font-size: var(--text-xs);
    letter-spacing: .04em;
    margin-bottom: var(--space-3);
}
/* Biến thể để các mục liền nhau không bị lặp một màu duy nhất. */
.eyebrow-mint  { background: var(--mint-soft); color: var(--mint-ink); border-color: var(--mint-border); }
.eyebrow-sun   { background: var(--sun-soft); color: var(--warn); border-color: var(--sun-border); }
.eyebrow-grape { background: var(--grape-soft); color: var(--grape-ink); border-color: hsl(272 50% 88%); }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); } .stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); } .stack-5 { gap: var(--space-5); } .stack-6 { gap: var(--space-6); }
/* Đặt tên là .hstack chứ không phải .row: các trang đăng nhập/đăng ký do
   ASP.NET Identity sinh ra dùng lưới Bootstrap với .row, trùng tên sẽ vỡ layout. */
.hstack { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.grow { flex: 1; }

.muted { color: var(--muted); }
.soft { color: var(--text-soft); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.nums { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. NÚT
   ========================================================================== */
/* Nút dạng viên thuốc bo tròn hoàn toàn. Nút chính có bóng khối đặc bên dưới
   và LÚN XUỐNG khi bấm — cảm giác như phím bấm thật, đây là chi tiết "vui"
   rẻ nhất mà hiệu quả nhất vì người dùng chạm vào nó suốt. */
.btn {
    --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1.5px solid var(--btn-bd); border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--text-md); font-weight: 600; line-height: 1.2;
    cursor: pointer; white-space: nowrap;
    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out), transform var(--dur) var(--ease-bounce),
                box-shadow var(--dur) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-primary {
    --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: var(--accent);
    box-shadow: var(--shadow-pop);
}
.btn-primary:hover {
    --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover);
    box-shadow: 0 6px 0 hsl(12 60% 34%);
}
/* Bấm xuống: bóng co lại cùng lúc nút đi xuống ⇒ nút thật sự bị "ấn lún". */
.btn-primary:active { box-shadow: 0 1px 0 hsl(12 60% 34%); transform: translateY(3px); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { box-shadow: none; }

.btn-outline { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong); }
.btn-outline:hover { --btn-bg: var(--accent-soft); --btn-bd: var(--accent); --btn-fg: var(--accent-ink); }

.btn-soft { --btn-bg: var(--accent-soft); --btn-fg: var(--accent-ink); --btn-bd: var(--accent-border); }
.btn-soft:hover { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: var(--accent); }

/* Biến thể mint cho hành động "tích cực nhưng không phải hành động chính"
   (ví dụ: xem lịch còn trống, lưu chuyến). */
.btn-mint { --btn-bg: var(--mint-soft); --btn-fg: var(--mint-ink); --btn-bd: var(--mint-border); }
.btn-mint:hover { --btn-bg: var(--mint); --btn-fg: hsl(0 0% 100%); --btn-bd: var(--mint); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-soft); --btn-bd: transparent; }
.btn-ghost:hover { --btn-bg: var(--bg-subtle); --btn-fg: var(--text); }

.btn-danger { --btn-bg: var(--surface); --btn-fg: var(--danger); --btn-bd: var(--danger-border); }
.btn-danger:hover { --btn-bg: var(--danger); --btn-fg: hsl(0 0% 100%); --btn-bd: var(--danger); }

/* Nút "Tiếp tục với Google". Giữ đúng quy chuẩn nhận diện của Google: nền
   trắng, viền xám, chữ đen — khách quen mắt nên tin tưởng bấm ngay. Vì vậy nút
   này KHÔNG đổi màu theo bảng màu Bonbon như các nút khác, chỉ hover đậm nền. */
.btn-google {
    --btn-bg: hsl(0 0% 100%); --btn-fg: hsl(0 0% 13%); --btn-bd: hsl(0 0% 76%);
    font-weight: 600;
}
.btn-google:hover { --btn-bg: hsl(0 0% 96%); --btn-bd: hsl(0 0% 62%); }
.btn-google-logo { flex-shrink: 0; }

/* Vạch ngăn "hoặc đăng ký bằng email" giữa nút Google và form nhập tay. */
.or-divider {
    display: flex; align-items: center; gap: var(--space-3);
    margin-block: var(--space-5);
}
.or-divider > span:first-child, .or-divider > span:last-child {
    flex: 1; height: 1px; background: var(--border);
}

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-block { width: 100%; }

/* Nút chỉ có icon — vẫn phải đủ 40px cho ngón tay chạm. */
.btn-icon {
    width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill);
    display: inline-grid; place-items: center; flex-shrink: 0;
    background: var(--surface); color: var(--text-soft);
    border: 1px solid var(--border); cursor: pointer;
    transition: all var(--dur) var(--ease-bounce);
}
.btn-icon:hover {
    background: var(--accent-soft); color: var(--accent-ink);
    border-color: var(--accent-border); transform: translateY(-2px);
}

/* ==========================================================================
   5. Ô NHẬP LIỆU
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field > label, .label {
    font-size: var(--text-xs); font-weight: 700; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: .05em;
    display: flex; align-items: center; gap: var(--space-2);
}
.control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    font-size: var(--text-md);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.control::placeholder { color: var(--muted); }
.control:hover:not(:disabled) { border-color: var(--muted); }
.control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px hsl(from var(--accent) h s l / .18);
}
.control:disabled { background: var(--bg-subtle); color: var(--muted); cursor: not-allowed; }
select.control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23718096' d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--space-3) center;
    background-size: 18px; padding-right: var(--space-8);
}
textarea.control { min-height: 96px; resize: vertical; }

.field-error { color: var(--danger); font-size: var(--text-sm); font-weight: 600; }
.control.invalid, .input-validation-error { border-color: var(--danger); }

/* ---- Ô MẬT KHẨU: nút con mắt + bảng luật tự tích ----
   Khách gõ mật khẩu mà không thấy mình gõ gì thì rất dễ sai, nhất là trên điện
   thoại. Nút con mắt cho xem lại, bảng luật nói rõ còn thiếu điều kiện nào. */
.pw-input { position: relative; display: flex; align-items: center; }
.pw-input .control { padding-right: var(--space-10); }
.pw-eye {
    position: absolute; right: var(--space-2);
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-pill);
    display: grid; place-items: center;
    background: transparent; color: var(--muted); cursor: pointer;
    transition: color .15s, background .15s;
}
.pw-eye:hover { background: var(--bg-subtle); color: var(--text); }
.pw-eye[aria-pressed="true"] { color: var(--accent); }

.pw-rules { list-style: none; display: grid; gap: 2px; margin-top: 2px; }
.pw-rules li {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--muted);
    transition: color .15s;
}
.pw-rules li i { font-size: 0.85em; }
/* Đã đạt: chuyển xanh + dấu tích. Màu KHÔNG phải tín hiệu duy nhất — icon cũng
   đổi hình — nên người mù màu vẫn phân biệt được. */
.pw-rules li.ok { color: var(--mint-ink); font-weight: 600; }

/* Ô tìm kiếm có icon nằm trong */
.search-input { position: relative; display: flex; align-items: center; }
.search-input > i {
    position: absolute; left: var(--space-4); color: var(--muted); pointer-events: none;
}
.search-input .control { padding-left: var(--space-10); }

/* Checkbox / radio dạng hàng bấm được cả dòng */
.check-row {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--text-md); cursor: pointer; padding: var(--space-2) 0;
}
.check-row input[type="checkbox"], .check-row input[type="radio"] {
    width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.check-row .cnt { margin-left: auto; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }

/* ==========================================================================
   6. THẺ, HUY HIỆU, CHIP
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.card-flush { padding: 0; overflow: hidden; }
.card-head {
    display: flex; align-items: center; gap: var(--space-3);
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: var(--text-lg); }
.card-head i { color: var(--accent); }

.badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 700; line-height: 1.6;
    border: 1.5px solid transparent; white-space: nowrap;
}
.badge-neutral { background: var(--bg-subtle); color: var(--text-soft); border-color: var(--border); }
.badge-accent  { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-border); }
.badge-mint    { background: var(--mint-soft); color: var(--mint-ink); border-color: var(--mint-border); }
.badge-sun     { background: var(--sun-soft); color: var(--warn); border-color: var(--sun-border); }
.badge-grape   { background: var(--grape-soft); color: var(--grape-ink); border-color: hsl(272 50% 88%); }
.badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.badge-warn    { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.badge-info    { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }

/* --- NHÃN DÁN (sticker) ---------------------------------------------------
   Dùng cho nhãn nổi trên ảnh xe. Viền trắng dày + nghiêng nhẹ tạo cảm giác
   như miếng decal dán đè lên ảnh. Độ nghiêng giữ ở mức 2–3 độ: nghiêng nhiều
   hơn thì chữ bắt đầu khó đọc và trông cẩu thả chứ không còn vui.
   -------------------------------------------------------------------------- */
.sticker {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
    white-space: nowrap;
    background: var(--surface); color: var(--text);
    border: 2px solid var(--surface);
    box-shadow: 0 2px 6px hsl(24 40% 20% / .18);
    transform: rotate(-2deg);
}
.sticker-hot   { background: var(--accent); color: var(--accent-fg); }
.sticker-new   { background: var(--mint); color: hsl(0 0% 100%); transform: rotate(2deg); }
.sticker-sun   { background: var(--sun); color: hsl(30 60% 16%); }
.sticker-grape { background: var(--grape); color: hsl(0 0% 100%); transform: rotate(2deg); }
.sticker-busy  { background: var(--danger); color: hsl(0 0% 100%); }
/* Nhãn tối bán trong suốt cho thông tin phụ (loại xe) — không tranh chú ý
   với nhãn màu bên cạnh. */
.sticker-dim {
    background: hsl(24 30% 10% / .78); color: hsl(0 0% 100%);
    border-color: transparent; backdrop-filter: blur(6px);
}

/* Trạng thái đơn — kèm chấm màu để không truyền tin CHỈ bằng màu. */
.status-pill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 700; border: 1px solid transparent;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-pending   { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn-border); }
.st-confirmed { background: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }
.st-ongoing   { background: var(--accent-soft);  color: var(--accent);  border-color: var(--accent-border); }
.st-completed { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.st-cancelled { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-border); }

.chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--bg-subtle); color: var(--text-soft);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 600;
}

/* Chip lọc nhanh — bấm được, có trạng thái đang chọn */
.chip-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface); color: var(--text-soft);
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: 600; cursor: pointer;
    transition: all var(--dur) var(--ease-out);
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip-btn[aria-pressed="true"], .chip-btn.active {
    background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
/* Chip đang lọc, có nút gỡ */
.chip-removable {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent-border); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: 600;
}
.chip-removable button, .chip-removable a {
    display: grid; place-items: center; width: 20px; height: 20px;
    background: transparent; border: 0; border-radius: 50%;
    color: inherit; cursor: pointer; font-size: var(--text-sm); text-decoration: none;
}
.chip-removable button:hover, .chip-removable a:hover { background: hsl(from var(--accent) h s l / .2); }

.rating { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; font-size: var(--text-sm); }
.rating i { color: var(--star); }
.stars i { color: var(--star); font-size: var(--text-sm); }

/* ==========================================================================
   7. HEADER
   ========================================================================== */
/* Header SÁNG màu kem. Bản cũ dùng nền đen — trông chững chạc nhưng lạnh;
   với khách trẻ đi chơi thì nền kem + logo kẹo thân thiện hơn nhiều, và
   nó nối liền mạch với hero bên dưới thay vì cắt ngang bằng một dải đen. */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: hsl(from var(--bg) h s l / .88);
    backdrop-filter: blur(14px) saturate(1.6);
    border-bottom: 1px solid var(--border);
}
.navbar {
    display: flex; align-items: center; gap: var(--space-5);
    height: var(--header-h);
}
.brand {
    display: flex; align-items: center; gap: var(--space-3);
    color: var(--text); font-weight: 700; flex-shrink: 0;
    font-family: var(--font-display);
}
/* Logo "viên kẹo": khối bo tròn nghiêng nhẹ, hover thì dựng thẳng và nảy lên. */
.brand-mark {
    width: 40px; height: 40px; border-radius: 14px;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(145deg, var(--accent), hsl(32 92% 54%));
    color: var(--accent-fg); font-size: var(--text-lg);
    box-shadow: var(--shadow-pop-sm);
    transform: rotate(-6deg);
    transition: transform var(--dur) var(--ease-bounce);
}
.brand:hover .brand-mark { transform: rotate(0deg) scale(1.06); }
.brand-text { font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1; }
.brand-text span { color: var(--accent-ink); }

.nav-links { display: flex; gap: var(--space-1); margin-left: auto; align-items: center; }
.nav-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
    color: var(--text-soft); font-size: var(--text-md); font-weight: 600;
    /* Giữ nhãn trên MỘT dòng — không để "Trang chủ" rớt thành "Trang / chủ". */
    white-space: nowrap; flex: 0 0 auto; line-height: 1;
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav-links a i { font-size: 1.05em; }
.nav-links a:hover { color: var(--accent-ink); background: var(--accent-soft); }
/* Một cách thể hiện trạng thái đang xem duy nhất: viên thuốc màu nhấn đặc. */
.nav-links a[aria-current="page"] {
    color: var(--accent-fg); background: var(--accent);
}
.nav-links a[aria-current="page"]:hover { background: var(--accent-hover); color: var(--accent-fg); }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Nút icon (yêu thích / so sánh / đổi giao diện) */
.nav-icon {
    position: relative; width: 40px; height: 40px; border-radius: var(--radius-pill);
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--surface); color: var(--text-soft);
    border: 1px solid var(--border); cursor: pointer;
    transition: all var(--dur) var(--ease-bounce);
}
.nav-icon:hover {
    background: var(--accent-soft); color: var(--accent-ink);
    border-color: var(--accent-border); transform: translateY(-2px);
}
.nav-icon .dot-count {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
    padding-inline: 5px; border-radius: var(--radius-pill);
    background: var(--accent); color: var(--accent-fg);
    border: 2px solid var(--bg);
    font-size: 11px; font-weight: 700; display: grid; place-items: center;
    font-variant-numeric: tabular-nums;
}
.nav-icon .dot-count[hidden] { display: none; }

.btn-nav {
    padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: 700; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    transition: all var(--dur) var(--ease-bounce);
}
.btn-nav:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
.btn-nav-accent {
    background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
    box-shadow: var(--shadow-pop-sm);
}
.btn-nav-accent:hover {
    background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg);
    transform: translateY(-2px); box-shadow: 0 5px 0 hsl(12 60% 34%);
}

.user-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); font-size: var(--text-sm); font-weight: 600;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: border-color var(--dur) var(--ease-out);
}
.user-chip:hover { border-color: var(--accent-border); }
.user-chip i { color: var(--accent); font-size: var(--text-lg); }

.nav-toggle { display: none; }

/* Ngăn kéo điều hướng cho màn hình hẹp */
.nav-drawer {
    position: fixed; inset: 0; z-index: 80;
    background: hsl(220 30% 6% / .6);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease-out);
}
.nav-drawer[data-open="true"] { opacity: 1; pointer-events: auto; }
.nav-drawer-panel {
    position: absolute; inset-block: 0; right: 0; width: min(330px, 86vw);
    background: var(--bg); border-left: 1px solid var(--border);
    padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1);
    transform: translateX(100%); transition: transform var(--dur) var(--ease-out);
    overflow-y: auto;
}
.nav-drawer[data-open="true"] .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-panel a, .nav-drawer-panel button {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill);
    color: var(--text-soft); font-weight: 600; font-size: var(--text-md);
    background: transparent; border: 0; text-align: left; width: 100%; cursor: pointer;
}
.nav-drawer-panel a:hover, .nav-drawer-panel button:hover {
    background: var(--accent-soft); color: var(--accent-ink);
}
.nav-drawer-panel i { color: var(--muted); }
.nav-drawer-panel a:hover i, .nav-drawer-panel button:hover i { color: var(--accent); }
.nav-drawer-sep { height: 1px; background: var(--border); margin-block: var(--space-3); }

/* ==========================================================================
   8. THÔNG BÁO
   ========================================================================== */
.alert {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid transparent; border-radius: var(--radius);
    font-size: var(--text-md); font-weight: 500;
}
.alert i { font-size: var(--text-lg); flex-shrink: 0; line-height: 1.4; }
.alert-error   { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-border); }
.alert-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.alert-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }
.alert-warn    { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn-border); }

/* Thông báo nổi góc màn hình (JS bắn ra khi lưu yêu thích, thêm so sánh…) */
.toast-stack {
    position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
    z-index: 90; display: flex; flex-direction: column; gap: var(--space-2);
    pointer-events: none; width: min(420px, calc(100vw - var(--space-8)));
}
.toast {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--ink); color: var(--on-ink);
    border: 1px solid var(--ink-border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); font-size: var(--text-md); font-weight: 500;
    animation: toast-in 200ms var(--ease-out);
}
.toast i { color: var(--accent); font-size: var(--text-lg); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   9. HERO + BẢNG TÌM KIẾM
   ========================================================================== */
/* Hero nền KEM ẤM. Bản cũ dùng nền đen — an toàn nhưng lạnh và giống hệt mọi
   trang thuê xe khác. Nền sáng cộng vài khối màu mờ bay phía sau cho cảm giác
   nắng, biển, đi chơi; chữ vẫn là chữ đen trên nền sáng nên đọc rất thoải mái. */
.hero {
    position: relative; overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(680px 380px at 88% -10%, hsl(from var(--sun) h s l / .30), transparent 68%),
        radial-gradient(560px 340px at 6% 8%, hsl(from var(--accent) h s l / .16), transparent 66%),
        radial-gradient(520px 320px at 62% 96%, hsl(from var(--mint) h s l / .16), transparent 68%),
        var(--bg);
    padding-block: var(--space-16) var(--space-20);
}
/* Hai "quả bóng" màu trôi rất chậm phía sau nội dung. Biên độ nhỏ và thời
   lượng dài để nó là không khí nền, không phải thứ giành sự chú ý. */
.hero::before, .hero::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(8px); opacity: .5; pointer-events: none;
}
.hero::before {
    width: 190px; height: 190px; top: 12%; right: 7%;
    background: radial-gradient(circle at 32% 32%, hsl(42 96% 74% / .85), hsl(28 92% 62% / .35));
    animation: float-slow 13s ease-in-out infinite;
}
.hero::after {
    width: 130px; height: 130px; bottom: 16%; left: 4%;
    background: radial-gradient(circle at 34% 34%, hsl(166 70% 74% / .8), hsl(180 62% 58% / .3));
    animation: float-slow 17s ease-in-out infinite reverse;
}
@keyframes float-slow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-16px, 22px, 0) scale(1.07); }
}

.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-5); margin-bottom: var(--space-5);
    background: var(--surface); border: 2px solid var(--accent-border);
    border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700;
    color: var(--accent-ink); box-shadow: var(--shadow-sm);
}
.hero-badge i { color: var(--accent); }
.hero h1 {
    font-size: clamp(2.1rem, 5.4vw, var(--text-3xl));
    font-weight: 700; margin-bottom: var(--space-4); line-height: 1.18;
}
/* Chữ được tô sáng: gạch nền màu nắng nằm SAU chữ, không phải đổi màu chữ.
   Giữ được độ tương phản tối đa mà vẫn nhấn mạnh rất rõ. */
.hero h1 .hl {
    position: relative; display: inline-block; color: var(--text);
    padding-inline: 4px;
}
.hero h1 .hl::after {
    content: ""; position: absolute; z-index: -1;
    inset-inline: -2px; bottom: 6%; height: 38%;
    background: var(--sun); border-radius: 6px;
    transform: rotate(-1deg);
}
.hero .lead {
    font-size: clamp(var(--text-base), 2vw, var(--text-lg));
    color: var(--text-soft); max-width: 58ch; line-height: 1.65;
}
.hero-trust {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    margin-top: var(--space-6); font-size: var(--text-md); font-weight: 600;
}
/* Mỗi lời cam kết là một viên thuốc trắng riêng — dễ quét mắt hơn một dòng
   chữ dài ngăn cách bằng dấu chấm. */
.hero-trust span {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-soft); box-shadow: var(--shadow-sm);
}
.hero-trust i { color: var(--mint-ink); }

/* Bảng tìm kiếm nổi lên, đè xuống phần dưới hero */
.search-panel {
    position: relative; z-index: 3;
    margin-top: var(--space-8);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.search-tabs {
    display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-2);
    background: var(--surface-sunken); border-bottom: 1px solid var(--border);
}
/* Tab dạng viên thuốc rời thay cho tab dính mép — tròn trịa và dễ bấm hơn
   trên điện thoại, nơi phần lớn khách du lịch đặt xe. */
.search-tab {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: transparent; border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    color: var(--muted); font-size: var(--text-md); font-weight: 600; cursor: pointer;
    transition: all var(--dur) var(--ease-bounce);
}
.search-tab:hover { color: var(--accent-ink); background: var(--accent-soft); }
.search-tab[aria-selected="true"] {
    background: var(--accent); border-color: var(--accent);
    color: var(--accent-fg); box-shadow: var(--shadow-pop-sm);
}
.search-body { padding: var(--space-5); }
.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
    align-items: end;
}
.search-grid .submit-cell { grid-column: 1 / -1; }

/* ==========================================================================
   10. Ô THỐNG KÊ
   ========================================================================== */
.stat-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: calc(-1 * var(--space-10)); position: relative; z-index: 4;
}
.stat {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Biểu tượng nghiêng nhẹ và dựng thẳng khi rê chuột — cùng ngôn ngữ với logo. */
.stat .ic {
    width: 48px; height: 48px; border-radius: 16px; flex-shrink: 0;
    display: grid; place-items: center; font-size: var(--text-lg);
    background: var(--accent-soft); color: var(--accent-ink);
    transform: rotate(-5deg);
    transition: transform var(--dur) var(--ease-bounce);
}
.stat:hover .ic { transform: rotate(0deg) scale(1.08); }
/* Mỗi ô thống kê một màu để hàng số liệu trông vui, không phải bốn ô cam giống hệt.
   Ở đây màu chỉ để trang trí nên dùng được cả --sun. */
.stat:nth-child(2) .ic { background: var(--mint-soft); color: var(--mint-ink); }
.stat:nth-child(3) .ic { background: var(--sun-soft); color: var(--warn); }
.stat:nth-child(4) .ic { background: var(--grape-soft); color: var(--grape-ink); }
.stat .num {
    font-family: var(--font-display);
    font-size: var(--text-xl); font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat .lbl { font-size: var(--text-sm); color: var(--muted); }

/* ==========================================================================
   11. TIÊU ĐỀ TRANG
   ========================================================================== */
/* Tiêu đề trang cũng chuyển sang nền kem cho khớp hero — cả site giờ đi theo
   một mạch sáng, chỉ footer và dải kêu gọi mới dùng nền tối làm điểm dừng. */
.page-head {
    position: relative; overflow: hidden;
    background:
        radial-gradient(560px 260px at 92% -30%, hsl(from var(--sun) h s l / .26), transparent 70%),
        radial-gradient(420px 240px at 4% 120%, hsl(from var(--mint) h s l / .14), transparent 70%),
        var(--bg-subtle);
    color: var(--text);
    padding-block: var(--space-10);
    border-bottom: 1px solid var(--border);
}
.page-head h1 { font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); }
.page-head p { color: var(--text-soft); margin-top: var(--space-3); max-width: 62ch; }

.breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb .sep { color: var(--muted); opacity: .6; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
/* Biến thể trên nền sáng (trang chi tiết xe) */
.breadcrumb-light a { color: var(--muted); }
.breadcrumb-light .sep { color: var(--muted); }
.breadcrumb-light [aria-current="page"] { color: var(--text); }

/* ==========================================================================
   12. TRANG DANH SÁCH XE — bố cục 2 cột
   ========================================================================== */
.browse-layout {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    padding-block: var(--space-8) var(--space-16);
}

/* --- Cột lọc bên trái --- */
.filter-panel {
    position: sticky; top: calc(var(--header-h) + var(--space-4));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-height: calc(100vh - var(--header-h) - var(--space-8));
    display: flex; flex-direction: column;
}
.filter-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.filter-head h2 { font-size: var(--text-base); display: flex; align-items: center; gap: var(--space-2); }
.filter-head h2 i { color: var(--accent); }
.filter-scroll { overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.filter-foot {
    padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border);
    display: flex; gap: var(--space-3); flex-shrink: 0; background: var(--surface-sunken);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.filter-group { display: flex; flex-direction: column; gap: var(--space-3); }
.filter-group + .filter-group { border-top: 1px solid var(--border); padding-top: var(--space-5); }
.filter-group > h3 {
    font-size: var(--text-xs); font-weight: 700; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: .05em;
    display: flex; align-items: center; gap: var(--space-2);
}
.filter-group > h3 i { color: var(--muted); }

/* Lưới lựa chọn dạng ô bấm (loại xe, hộp số…) */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--space-2); }
.opt-tile {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
    font-size: var(--text-xs); font-weight: 600; color: var(--text-soft);
    text-align: center; transition: all var(--dur) var(--ease-out);
}
.opt-tile i { font-size: var(--text-lg); color: var(--muted); }
.opt-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-tile:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.opt-tile:has(input:checked) {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.opt-tile:has(input:checked) i { color: var(--accent); }
.opt-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Thanh trượt khoảng giá */
.range-row { display: flex; align-items: center; gap: var(--space-3); }
.range-row .control { font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }

/* --- Cột kết quả bên phải --- */
.result-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.result-count { font-size: var(--text-md); }
.result-count strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

.view-toggle { display: inline-flex; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; }
.view-toggle button {
    display: grid; place-items: center; width: 34px; height: 30px;
    background: transparent; border: 0; border-radius: var(--radius-sm);
    color: var(--muted); cursor: pointer; transition: all var(--dur) var(--ease-out);
}
.view-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

.active-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }

.filter-toggle-mobile { display: none; }

/* ==========================================================================
   13. THẺ XE
   ========================================================================== */
.veh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}
/* Trong trang danh sách, cột kết quả hẹp hơn vì đã nhường 288px cho bộ lọc.
   Giữ nguyên mức 300px thì chỉ ra 2 cột — khách phải cuộn gấp rưỡi mới xem
   hết cùng số xe. Hạ xuống 260px là ra 3 cột mà thẻ vẫn đủ rộng để đọc. */
.browse-layout .veh-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.veh-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-bounce);
}
.veh-card:hover {
    transform: translateY(-6px); border-color: var(--accent-border); box-shadow: var(--shadow-lg);
}
.veh-card:focus-within { border-color: var(--accent); }
/* Vạch màu của chính chiếc xe — dấu nhận biết duy nhất dùng --car.
   Dày lên 5px và bo theo góc thẻ để hợp với bo góc lớn. */
.veh-card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px;
    background: var(--car); z-index: 3;
}

.veh-media {
    position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
    background: var(--bg-subtle);
}
/* Ảnh phóng to VÀ nghiêng rất nhẹ khi rê chuột — chiếc xe như đang chồm tới.
   Đây là chỗ "vui nhộn" của thẻ xe, nhưng vẫn giữ ảnh xe rõ ràng và trung thực
   để khách nhìn đúng chiếc mình sắp thuê. */
.veh-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 420ms var(--ease-out);
}
.veh-card:hover .veh-media img { transform: scale(1.07) rotate(-1.2deg); }
/* Lớp phủ ấm rất nhạt ở đáy ảnh giúp nhãn dán trắng luôn tách khỏi ảnh,
   kể cả khi chiếc xe cũng màu sáng. */
.veh-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, hsl(24 40% 12% / .22), transparent 42%);
}

.veh-tags {
    position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2;
    display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
}

/* Nút yêu thích / so sánh nổi trên ảnh */
.veh-actions {
    position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.icon-fab {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: hsl(0 0% 100% / .94); color: hsl(24 20% 32%);
    border: 0; cursor: pointer; backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm);
    transition: all var(--dur) var(--ease-bounce);
}
.icon-fab:hover { background: hsl(0 0% 100%); transform: scale(1.14) rotate(-6deg); }
.icon-fab[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
/* Tim đỏ nảy một nhịp khi vừa được bấm — phản hồi nhỏ nhưng khách rất thích. */
.icon-fab.fav[aria-pressed="true"] {
    background: var(--danger); color: hsl(0 0% 100%);
    animation: pop-beat 380ms var(--ease-bounce);
}
@keyframes pop-beat {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.32); }
    100% { transform: scale(1); }
}

.veh-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.veh-title { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
.veh-title a:hover { color: var(--accent-ink); }
.veh-loc { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--muted); }
.veh-loc i { color: var(--accent); }

/* Thông số dạng viên nhỏ — quét mắt nhanh hơn danh sách chữ trơn. */
.veh-specs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); }
.veh-specs span {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    background: var(--bg-subtle); color: var(--text-soft); font-weight: 600;
}
.veh-specs i { color: var(--muted); }
.veh-specs .rating { background: var(--sun-soft); color: var(--warn); }
.veh-specs .rating i { color: var(--star); }

.veh-color { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
.veh-color .dot {
    width: 14px; height: 14px; border-radius: 50%; background: var(--car);
    box-shadow: inset 0 0 0 1px hsl(24 20% 20% / .22);
}

.veh-foot {
    margin-top: auto; padding-top: var(--space-4); border-top: 1px dashed var(--border);
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3);
}
.veh-price .amt {
    font-family: var(--font-display);
    font-size: var(--text-xl); font-weight: 700; color: var(--accent-ink);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.veh-price .unit { font-size: var(--text-sm); color: var(--muted); }
/* Tổng tiền cho đúng khoảng ngày khách đang chọn — điểm khác biệt so với đối thủ,
   nên cho hẳn nền mint để mắt bắt được ngay. */
.veh-total {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-top: var(--space-2); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--mint-soft); color: var(--mint-ink);
    border: 1px solid var(--mint-border);
    font-size: var(--text-xs); font-weight: 700;
}
.veh-total.busy {
    background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border);
}

/* Nhãn ưu đãi thuê dài ngày. Dùng viền đứt + nền trong suốt để KHÔNG cạnh tranh
   với nhãn tổng tiền (nền mint đặc) — hai nhãn cùng độ đậm cạnh nhau thì mắt
   không biết nhìn cái nào trước. */
.veh-save {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-top: var(--space-2); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px dashed var(--mint-border); color: var(--mint-ink);
    font-size: var(--text-xs); font-weight: 700;
}

/* Dạng danh sách (list view) */
.veh-grid[data-view="list"] { grid-template-columns: 1fr; }
.veh-grid[data-view="list"] .veh-card { flex-direction: row; }
.veh-grid[data-view="list"] .veh-media { width: 280px; aspect-ratio: 4 / 3; flex-shrink: 0; }
.veh-grid[data-view="list"] .veh-card::before { inset: 0 auto 0 0; width: 3px; height: auto; }
.veh-grid[data-view="list"] .veh-body { padding: var(--space-5); }

/* ==========================================================================
   14. TRẠNG THÁI RỖNG / ĐANG TẢI
   ========================================================================== */
.empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-3); padding: var(--space-16) var(--space-6);
    background: var(--surface); border: 2px dashed var(--border-strong); border-radius: var(--radius-xl);
}
/* Biểu tượng lắc nhẹ liên tục — trạng thái rỗng vốn là khoảnh khắc hụt hẫng,
   một chút chuyển động khiến nó bớt cụt lủn. Tự tắt khi người dùng bật
   "giảm chuyển động" nhờ quy tắc chung ở mục 24. */
.empty-state .ic {
    width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center;
    background: var(--sun-soft); color: var(--warn); font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
    animation: wobble 3.2s var(--ease-out) infinite;
}
@keyframes wobble {
    0%, 62%, 100% { transform: rotate(-6deg); }
    72%           { transform: rotate(7deg); }
    82%           { transform: rotate(-4deg); }
    92%           { transform: rotate(2deg); }
}
.empty-state h3 { font-size: var(--text-lg); }
.empty-state p { color: var(--muted); max-width: 46ch; }

/* Khung xương khi đang tải — giữ đúng hình dạng thẻ xe để không giật layout. */
.skeleton { background: var(--bg-subtle); border-radius: var(--radius); position: relative; overflow: hidden; }
.skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .35), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.skel-media { aspect-ratio: 4 / 3; }
.skel-line { height: 12px; margin: var(--space-3) var(--space-4); }
.skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; }

/* ==========================================================================
   15. PHÂN TRANG
   ========================================================================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 40px; height: 40px; padding-inline: var(--space-3);
    display: inline-grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums;
    transition: all var(--dur) var(--ease-out);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.pagination .gap { border: 0; background: transparent; color: var(--muted); }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ==========================================================================
   16. CHI TIẾT XE
   ========================================================================== */
.detail-layout {
    display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
    gap: var(--space-8); align-items: start;
    padding-block: var(--space-6) var(--space-16);
}

.gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-main {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-subtle);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }
.gallery-thumbs button {
    flex-shrink: 0; width: 92px; aspect-ratio: 4 / 3; padding: 0;
    border: 2px solid transparent; border-radius: var(--radius); overflow: hidden;
    background: var(--bg-subtle); cursor: pointer; transition: border-color var(--dur) var(--ease-out);
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button:hover { border-color: var(--border-strong); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--accent); }

.detail-title { font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl)); margin-top: var(--space-5); }
.detail-meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); color: var(--muted); font-size: var(--text-md); }
.detail-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.spec-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.spec-item .si {
    width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: grid; place-items: center; font-size: var(--text-base);
    background: var(--bg-subtle); color: var(--text-soft);
}
.spec-item .sk { font-size: var(--text-xs); color: var(--muted); }
.spec-item .sv { font-weight: 700; font-size: var(--text-md); }

.block { margin-top: var(--space-6); }
.block > h2 {
    font-size: var(--text-lg); display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.block > h2 i { color: var(--accent); }
.prose { font-size: var(--text-md); line-height: 1.75; color: var(--text-soft); max-width: 68ch; }

.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.feature-list li { list-style: none; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.feature-list i { color: var(--success); flex-shrink: 0; }

.doc-list { display: grid; gap: var(--space-3); }
.doc-item {
    display: flex; gap: var(--space-4); align-items: flex-start;
    padding: var(--space-4); background: var(--surface-sunken);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.doc-ic {
    width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: grid; place-items: center; font-size: var(--text-lg);
    background: var(--accent-soft); color: var(--accent);
}
.doc-title { font-weight: 700; font-size: var(--text-md); }
.doc-desc { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }

.policy-list { display: grid; gap: var(--space-3); }
.policy-list li { list-style: none; display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-md); }
.policy-list i { flex-shrink: 0; margin-top: 4px; }

/* Đánh giá */
.review-summary {
    display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
    padding: var(--space-5); background: var(--surface-sunken);
    border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--space-5);
}
.review-score { text-align: center; }
.review-score .n { font-size: var(--text-2xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.review-bars { flex: 1; min-width: 220px; display: grid; gap: var(--space-1); }
.review-bar { display: grid; grid-template-columns: 42px 1fr 32px; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
.review-bar .track { height: 6px; background: var(--bg-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.review-bar .fill { height: 100%; background: var(--star); border-radius: var(--radius-pill); }

.review { padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; }
.review-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; font-size: var(--text-md);
    background: var(--accent-soft); color: var(--accent);
}

/* ==========================================================================
   17. HỘP ĐẶT XE (cột phải, dính theo cuộn)
   ========================================================================== */
.booking-box {
    position: sticky; top: calc(var(--header-h) + var(--space-4));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.booking-head {
    padding: var(--space-5);
    background: var(--surface-sunken); border-bottom: 1px solid var(--border);
}
.booking-head .price { display: flex; align-items: baseline; gap: var(--space-2); }
.booking-head .price .a { font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.booking-head .price .u { color: var(--muted); font-size: var(--text-md); }
.booking-head .sub { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }

.booking-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mode-opt {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: var(--space-3); cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: var(--text-sm); font-weight: 600; color: var(--text-soft);
    transition: all var(--dur) var(--ease-out);
}
.mode-opt i { font-size: var(--text-lg); color: var(--muted); }
.mode-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-opt:hover { border-color: var(--border-strong); }
.mode-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.mode-opt:has(input:checked) i { color: var(--accent); }
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-opt.disabled { opacity: .45; cursor: not-allowed; }

/* Bảng giá tạm tính */
.quote-box {
    padding: var(--space-4); font-size: var(--text-md);
    background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius);
}
.quote-line { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: 3px; font-variant-numeric: tabular-nums; }
.quote-line .season { color: var(--accent); font-size: var(--text-xs); font-weight: 700; }
/* Ngày cuối tuần bị phụ thu: đổi sang màu cảnh báo chứ không dùng màu thương
   hiệu — cùng một màu cho "mùa cao điểm" và "cuối tuần" thì khách không phân
   biệt được hai lý do làm giá tăng. */
.quote-line .season.weekend { color: var(--warn); }
/* Dòng ĐƯỢC GIẢM tiền: mint là màu duy nhất trong hệ thống mang nghĩa "có lợi
   thật cho khách", nên khoản giảm phải mặc màu đó chứ không phải màu cam. */
.quote-line.save { color: var(--mint-ink); font-weight: 700; }
.quote-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border);
    font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums;
}
.quote-warn { display: flex; align-items: center; gap: var(--space-2); color: var(--danger); font-weight: 600; font-size: var(--text-sm); }
.quote-ok { display: flex; align-items: center; gap: var(--space-2); color: var(--success); font-weight: 600; font-size: var(--text-sm); }

.policy-mini {
    display: grid; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken); border: 1px dashed var(--border-strong);
    border-radius: var(--radius); font-size: var(--text-xs); color: var(--muted);
}
.policy-mini strong { color: var(--text); }
.policy-mini i { color: var(--accent); }

/* ==========================================================================
   18. LỊCH GIÁ & LỊCH BẬN — tính năng khác biệt
   ========================================================================== */
.calendar {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-5);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.cal-month { font-weight: 700; font-size: var(--text-md); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.cal-dow {
    text-align: center; font-size: var(--text-xs); font-weight: 700;
    color: var(--muted); padding-bottom: var(--space-2);
}
.cal-day {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; border-radius: var(--radius-sm); border: 1px solid transparent;
    font-size: var(--text-sm); font-variant-numeric: tabular-nums; position: relative;
}
.cal-day .d { font-weight: 600; line-height: 1; }
.cal-day .p { font-size: 10px; line-height: 1; color: var(--muted); }
.cal-day.out { opacity: .3; }
.cal-day.free { background: var(--surface); border-color: var(--border); }
.cal-day.cheap { background: var(--success-soft); border-color: var(--success-border); }
.cal-day.cheap .p { color: var(--success); font-weight: 700; }
.cal-day.peak { background: var(--warn-soft); border-color: var(--warn-border); }
.cal-day.peak .p { color: var(--warn); font-weight: 700; }
/* Ngày đã có người đặt: gạch chéo + đổi màu để không phụ thuộc riêng màu sắc. */
.cal-day.busy {
    background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, hsl(from var(--danger) h s l / .18) 4px, hsl(from var(--danger) h s l / .18) 8px);
}
.cal-day.busy .d { text-decoration: line-through; }
.cal-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); font-size: var(--text-xs); color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.cal-legend .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }

/* Gợi ý ngày rẻ nhất */
.cheap-hint {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); margin-top: var(--space-4);
    background: var(--success-soft); border: 1px solid var(--success-border);
    border-radius: var(--radius); font-size: var(--text-sm); color: var(--success); font-weight: 600;
}

/* ==========================================================================
   19. SO SÁNH XE
   ========================================================================== */
.compare-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(100%); transition: transform var(--dur) var(--ease-out);
}
.compare-bar[data-open="true"] { transform: translateY(0); }
.compare-bar-inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; }
.compare-slots { display: flex; gap: var(--space-3); flex: 1; flex-wrap: wrap; }
.compare-slot {
    position: relative; display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: var(--text-sm); font-weight: 600;
}
.compare-slot img { width: 40px; height: 30px; object-fit: cover; border-radius: var(--radius-sm); }
.compare-slot button { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0 var(--space-1); }
.compare-slot button:hover { color: var(--danger); }
.compare-slot.empty { border-style: dashed; color: var(--muted); padding: var(--space-3) var(--space-5); }

.compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.compare-table { min-width: 720px; font-size: var(--text-md); }
.compare-table th, .compare-table td {
    padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.compare-table thead th { background: var(--surface-sunken); position: sticky; top: 0; z-index: 1; }
.compare-table tbody th {
    width: 190px; font-size: var(--text-sm); color: var(--text-soft); font-weight: 600;
    background: var(--surface-sunken);
}
.compare-table td { font-variant-numeric: tabular-nums; }
/* Ô đang giữ giá trị tốt nhất của hàng đó. */
.compare-table td.best { background: var(--success-soft); font-weight: 700; color: var(--success); }
.compare-table td.best::after { content: " ✓"; }

/* ==========================================================================
   20. ĐƠN THUÊ / XÁC NHẬN
   ========================================================================== */
.booking-list { display: flex; flex-direction: column; gap: var(--space-4); }
.booking-row {
    display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: var(--space-5); align-items: center;
    padding: var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.booking-row img { width: 132px; height: 92px; object-fit: cover; border-radius: var(--radius); }

.confirm-hero { text-align: center; padding-block: var(--space-12) var(--space-6); }
.confirm-hero .ic {
    width: 76px; height: 76px; margin: 0 auto var(--space-5); border-radius: 50%;
    display: grid; place-items: center; font-size: var(--text-2xl);
    background: var(--success-soft); color: var(--success);
}

.next-steps .step { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px dashed var(--border); }
.next-steps .step:last-child { border-bottom: 0; }
.next-steps .step-no {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; font-size: var(--text-sm);
    background: var(--accent-soft); color: var(--accent);
}
.next-steps .step-title { font-weight: 700; font-size: var(--text-md); }
.next-steps .step-desc { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }

.deadline-box {
    display: flex; gap: var(--space-3); align-items: center;
    padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface-sunken);
}
.deadline-box i { font-size: var(--text-lg); flex-shrink: 0; }
.deadline-box.ok { background: var(--success-soft); border-color: var(--success-border); }
.deadline-box.ok i { color: var(--success); }
.deadline-box.late { background: var(--danger-soft); border-color: var(--danger-border); }
.deadline-box.late i { color: var(--danger); }

/* ==========================================================================
   21. KHỐI NỘI DUNG TRANG CHỦ
   ========================================================================== */
.perk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.perk {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-bounce);
}
.perk:hover { border-color: var(--accent-border); transform: translateY(-4px); }
.perk .ic {
    width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center;
    font-size: var(--text-xl); background: var(--accent-soft); color: var(--accent-ink);
    transform: rotate(-5deg);
    transition: transform var(--dur) var(--ease-bounce);
}
.perk:hover .ic { transform: rotate(4deg) scale(1.08); }
.perk:nth-child(2) .ic { background: var(--mint-soft); color: var(--mint-ink); transform: rotate(5deg); }
.perk:nth-child(3) .ic { background: var(--sun-soft); color: var(--warn); }
.perk:nth-child(4) .ic { background: var(--grape-soft); color: var(--grape-ink); transform: rotate(5deg); }
.perk h3 { font-size: var(--text-lg); }
.perk p { color: var(--muted); font-size: var(--text-md); }

/* --- Hỏi đáp dạng xổ xuống --------------------------------------------------
   Dùng <details>/<summary> thuần: mở/đóng và điều khiển bằng bàn phím do trình
   duyệt lo sẵn, không cần một dòng JS nào.
   -------------------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; margin-inline: auto; }
.faq-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color var(--dur) var(--ease-out);
}
.faq-item[open] { border-color: var(--accent-border); }
.faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
    cursor: pointer; list-style: none;
}
/* Ẩn mũi tên mặc định của trình duyệt để dùng biểu tượng riêng bên phải. */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--accent-ink); }
.faq-item > summary .caret {
    flex-shrink: 0; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-ink);
    transition: transform var(--dur) var(--ease-bounce);
}
.faq-item[open] > summary .caret { transform: rotate(180deg); }
.faq-item > .faq-answer {
    padding: 0 var(--space-6) var(--space-6);
    color: var(--text-soft); font-size: var(--text-md); line-height: 1.7; max-width: 68ch;
}

/* Điểm đến phổ biến */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.dest {
    position: relative; display: flex; align-items: flex-end;
    aspect-ratio: 4 / 3; padding: var(--space-5); overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--ink); color: hsl(0 0% 100%);
    transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur) var(--ease-out);
}
.dest:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-lg); }
/* Ảnh hiện ĐỦ SÁNG (không giảm opacity). Bản trước làm mờ ảnh để chữ dễ đọc,
   nhưng thế thì điểm đến trông u ám — mà mục đích của khối này là khiến người ta
   MUỐN ĐI. Việc bảo đảm tương phản đẩy hết sang lớp gradient bên dưới. */
.dest img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 460ms var(--ease-out);
}
.dest:hover img { transform: scale(1.09); }
/* Gradient chỉ đậm ở ĐÁY, nơi có chữ; nửa trên ảnh gần như nguyên bản.
   Đổ bóng chữ đơn thuần không đủ tin cậy trên ảnh biển trắng xoá. */
.dest::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, hsl(24 45% 8% / .92) 4%, hsl(24 45% 8% / .45) 38%, transparent 68%);
}
.dest-body { position: relative; z-index: 1; }
.dest-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.dest-count { font-size: var(--text-sm); opacity: .92; }

/* Quy trình 3 bước */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-6); }
.step-card { display: flex; flex-direction: column; gap: var(--space-3); }
.step-card .n {
    width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-fg);
    font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
    box-shadow: var(--shadow-pop-sm);
    transform: rotate(-5deg);
}
.step-card:nth-child(2) .n { background: var(--mint); box-shadow: 0 3px 0 hsl(168 62% 26%); transform: rotate(4deg); }
.step-card:nth-child(3) .n { background: var(--grape); box-shadow: 0 3px 0 hsl(272 48% 40%); transform: rotate(-3deg); }
.step-card h3 { font-size: var(--text-lg); }
.step-card p { color: var(--muted); font-size: var(--text-md); }

/* Dải mời chủ xe đăng ký */
.cta-band {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
    flex-wrap: wrap; padding: var(--space-10);
    background:
        radial-gradient(500px 300px at 88% 12%, hsl(from var(--sun) h s l / .26), transparent 70%),
        linear-gradient(135deg, var(--ink), var(--ink-2));
    color: var(--on-ink);
    border-radius: var(--radius-xl);
}
.cta-band h2 { font-size: var(--text-xl); }
.cta-band p { color: var(--on-ink-soft); margin-top: var(--space-3); max-width: 52ch; }
.cta-band > * { position: relative; z-index: 1; }

/* ==========================================================================
   21b. DANH BẠ NHÀ XE
   ========================================================================== */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); }

.shop-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}
.shop-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }

/* Dải ảnh xe tiêu biểu làm nền đầu thẻ */
.shop-cover { display: grid; grid-template-columns: repeat(4, 1fr); height: 96px; background: var(--bg-subtle); }
.shop-cover img { width: 100%; height: 100%; object-fit: cover; }
.shop-cover .more { display: grid; place-items: center; background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: var(--text-sm); }

.shop-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-top: calc(-1 * var(--space-8)); position: relative; }
.shop-avatar {
    width: 56px; height: 56px; border-radius: var(--radius); flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; font-size: var(--text-lg);
    background: var(--accent); color: var(--accent-fg);
    border: 3px solid var(--surface); box-shadow: var(--shadow-sm);
}
.shop-name { font-size: var(--text-base); font-weight: 700; display: flex; align-items: center; gap: var(--space-2); }
.shop-name .verify { color: var(--info); font-size: var(--text-base); }
.shop-sub { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

.shop-body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.shop-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); text-align: center; }
.shop-stat { padding: var(--space-2); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); }
.shop-stat .n { font-size: var(--text-base); font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-stat .l { font-size: 11px; color: var(--muted); }
.shop-provinces { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.shop-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* Hồ sơ nhà xe (trang chi tiết) */
.shop-hero {
    display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
    padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}
.shop-hero .shop-avatar { width: 76px; height: 76px; font-size: var(--text-xl); }

/* ==========================================================================
   22. FOOTER
   ========================================================================== */
/* Footer giữ nền tối (nâu ấm) — sau cả trang nền kem, nó đóng vai trò dấu
   chấm hết, và làm logo cam bật lên lần cuối. */
.site-footer {
    position: relative;
    margin-top: var(--space-16);
    background: var(--ink); color: var(--on-ink-soft);
    padding-block: var(--space-12) var(--space-6);
}
/* Mép trên lượn sóng — chi tiết "vui" cuối cùng, và là chỗ an toàn nhất để
   đặt nó vì không có chữ nào chạy qua. */
.site-footer::before {
    content: ""; position: absolute; top: -22px; inset-inline: 0; height: 24px;
    background: var(--ink);
    mask-image: radial-gradient(22px at 22px 24px, transparent 98%, #000 100%);
    mask-size: 44px 24px; mask-repeat: repeat-x;
    -webkit-mask-image: radial-gradient(22px at 22px 24px, transparent 98%, #000 100%);
    -webkit-mask-size: 44px 24px; -webkit-mask-repeat: repeat-x;
}
.site-footer .brand { color: var(--on-ink); }
.site-footer .brand-text span { color: var(--accent); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-8); }
.site-footer h3 { color: var(--on-ink); font-size: var(--text-md); margin-bottom: var(--space-4); }
.site-footer a { display: block; padding-block: var(--space-1); font-size: var(--text-md); }
.site-footer a:hover { color: var(--accent); }
.site-footer p { font-size: var(--text-md); }
.footer-bottom {
    display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    margin-top: var(--space-8); padding-top: var(--space-5);
    border-top: 1px solid var(--ink-border); font-size: var(--text-sm);
}

/* ==========================================================================
   23. ĐÁP ỨNG MÀN HÌNH
   ========================================================================== */
@media (max-width: 1080px) {
    .browse-layout { grid-template-columns: 1fr; }
    /* Bộ lọc chuyển thành bảng trượt từ trái vào. */
    .filter-panel {
        position: fixed; inset-block: 0; left: 0; z-index: 85;
        width: min(340px, 90vw); max-height: none; border-radius: 0;
        border-inline-start: 0; box-shadow: var(--shadow-lg);
        transform: translateX(-100%); transition: transform var(--dur) var(--ease-out);
    }
    .filter-panel[data-open="true"] { transform: translateX(0); }
    .filter-foot { border-radius: 0; }
    .filter-toggle-mobile { display: inline-flex; }
    .filter-backdrop {
        position: fixed; inset: 0; z-index: 84; background: hsl(220 30% 6% / .5);
        opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out);
    }
    .filter-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
    .detail-layout { grid-template-columns: 1fr; }
    .booking-box { position: static; }
}

@media (max-width: 980px) {
    .nav-links { display: none; }
    .nav-toggle { display: grid; }
    .hide-sm { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .veh-grid[data-view="list"] .veh-card { flex-direction: column; }
    .veh-grid[data-view="list"] .veh-media { width: 100%; }
    .veh-grid[data-view="list"] .veh-card::before { inset: 0 0 auto 0; width: auto; height: 3px; }
}

@media (max-width: 640px) {
    :root { --space-16: 48px; --space-20: 56px; }
    .veh-grid { grid-template-columns: 1fr; }
    .booking-row { grid-template-columns: 1fr; }
    .booking-row img { width: 100%; height: 180px; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .stat-row { margin-top: var(--space-6); }
    .search-tabs { overflow-x: auto; }
    .cta-band { padding: var(--space-6); }
}

/* ==========================================================================
   24. GIẢM CHUYỂN ĐỘNG & IN ẤN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .site-footer, .booking-box, .compare-bar, .filter-panel, .toast-stack { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .veh-card { break-inside: avoid; border: 1px solid #ccc; }
}

/* ==========================================================================
   25. TƯƠNG THÍCH TRANG ĐĂNG NHẬP / ĐĂNG KÝ
   ---------------------------------------------------------------------------
   Các trang tài khoản do ASP.NET Core Identity sinh sẵn (Login, Register,
   Forgot password…) viết theo lớp của Bootstrap. Site này KHÔNG nạp Bootstrap
   (2.500 dòng CSS chỉ để phục vụ vài trang là quá lãng phí và làm lệch bộ token),
   nên phần dưới dịch đúng những lớp Identity dùng sang hệ token của mình.
   ========================================================================== */
.identity-page { max-width: 480px; margin-inline: auto; padding-block: var(--space-12); }
.identity-page h1, .identity-page h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.identity-page h4 { font-size: var(--text-lg); margin-bottom: var(--space-5); color: var(--text-soft); }
.identity-page hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-6); }
.identity-page section { display: block; }

/* Lưới */
.row { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.row > [class^="col"] { flex: 1 1 280px; min-width: 0; }
.col-md-4, .col-md-6, .col-lg-4, .col-lg-6, .col-12 { min-width: 0; }

/* Ô nhập */
.form-control {
    width: 100%; padding: var(--space-3) var(--space-4);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    font-size: var(--text-md);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.form-control:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px hsl(from var(--accent) h s l / .18);
}
/* Identity dùng nhãn nổi; ở đây chuyển thành nhãn đứng trên cho dễ đọc hơn. */
.form-floating { display: flex; flex-direction: column-reverse; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-floating > label { font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); margin-bottom: var(--space-2); }
.form-check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-check-input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-check-label { font-size: var(--text-md); }

/* Nút — dùng chung diện mạo với .btn của hệ thống */
.btn.btn-primary, button.btn-primary, .btn-lg.btn-primary {
    background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-link { background: transparent; border: 0; color: var(--accent); text-decoration: underline; padding: 0; }

/* Thông báo lỗi xác thực */
.text-danger, .validation-summary-errors { color: var(--danger); font-size: var(--text-sm); font-weight: 600; }
.validation-summary-errors ul { padding-left: var(--space-5); margin-top: var(--space-2); }
.text-success { color: var(--success); }
.text-muted { color: var(--muted); }

/* Vài lớp khoảng cách Identity hay dùng */
.w-100 { width: 100%; }
.d-inline { display: inline; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-4); } .mt-4 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-4); } .mb-4 { margin-bottom: var(--space-6); }
.my-3 { margin-block: var(--space-4); }
.p-3 { padding: var(--space-4); }
.text-center { text-align: center; }
.list-unstyled { list-style: none; padding: 0; }
.nav-pills { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-pills .nav-link {
    display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    color: var(--text-soft); font-weight: 600;
}
.nav-pills .nav-link.active { background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   LOGO HÃNG XE (dùng chung qua partial _BrandLogo)
   Logo hiển thị trên nền sáng (tile trắng) để luôn rõ ở cả 2 theme.
   ============================================================ */
.brand-logo-img { width: 66%; height: 66%; object-fit: contain; display: block; }
.brand-logo-mono { font-family: var(--font-display); font-weight: 700; color: var(--accent-ink);
    font-size: .9em; letter-spacing: .02em; }

/* ============================================================================
   ĐĂNG KÝ CHO THUÊ XE  (/tro-thanh-chu-xe)
   ---------------------------------------------------------------------------
   Trang này là hai archetype dán vào nhau và phải xử lý khác nhau:
     - NỬA TRÊN là trang bán hàng: chữ to, khoảng thở rộng, một nút duy nhất.
       Nó dùng lại nguyên .hero/.perk/.steps-grid/.faq-item của trang chủ nên
       chủ xe thấy vẫn đúng là Bonbon, không lạc sang một web nào khác.
     - NỬA DƯỚI là biểu mẫu: cột HẸP, mỗi nhóm trường một khung. Form đăng ký
       kéo dài hết chiều ngang màn hình là kiểu form không ai muốn điền.
   ========================================================================== */

/* Cột hẹp cho biểu mẫu — 640px là khoảng đọc thoải mái, không phải con số tuỳ ý. */
.partner-form-wrap { max-width: 640px; margin-inline: auto; }
.partner-form {
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-8);
}

/* Nhóm trường có tiêu đề. Dùng <fieldset> thật để trình đọc màn hình đọc được
   "Tài khoản đăng nhập" trước khi đọc từng ô — thẻ div không làm được việc đó. */
.form-block {
    display: flex; flex-direction: column; gap: var(--space-4);
    border: 0; padding: 0; margin: 0;
}
.form-block > legend {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
    padding-bottom: var(--space-3); margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--border); width: 100%;
}
.form-block > legend i { color: var(--accent); }

/* Hai trường đứng cạnh nhau khi còn chỗ, tự xuống dòng khi hẹp. */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* Dòng đồng ý điều khoản: ô tick phải thẳng hàng với DÒNG ĐẦU của đoạn văn,
   không phải giữa khối — căn giữa với đoạn ba dòng trông như lỗi. */
.check-line {
    display: flex; align-items: flex-start; gap: var(--space-3);
    font-size: var(--text-md); color: var(--text-soft); cursor: pointer;
}
.check-line input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
    accent-color: var(--accent); cursor: pointer;
}

@media (max-width: 560px) {
    .partner-form { padding: var(--space-5); }
    .field-pair { grid-template-columns: 1fr; }
}

/* ============================================================================
   TRẠNG THÁI HỒ SƠ ĐỐI TÁC  (/tro-thanh-chu-xe/trang-thai)
   Ba trạng thái, ba màu ngữ nghĩa — và mỗi màu đi kèm MỘT BIỂU TƯỢNG RIÊNG,
   để người mù màu vẫn phân biệt được "đã duyệt" với "bị từ chối".
   ========================================================================== */
.app-status { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5); }

.app-status-head {
    display: flex; align-items: flex-start; gap: var(--space-5);
    padding: var(--space-6); border-radius: var(--radius-lg);
    border: 1px solid var(--border); background: var(--surface);
}
.app-status-head .ic {
    width: 56px; height: 56px; border-radius: 18px; flex-shrink: 0;
    display: grid; place-items: center; font-size: var(--text-xl);
    transform: rotate(-5deg);
}
.app-status-head h1 { font-size: var(--text-xl); }
.app-status-head p { color: var(--text-soft); margin-top: var(--space-2); max-width: 56ch; }

.app-status-head.ok   { border-color: var(--mint-border); background: var(--mint-soft); }
.app-status-head.ok   .ic { background: var(--mint); color: hsl(0 0% 100%); }
.app-status-head.wait { border-color: var(--sun-border); background: var(--sun-soft); }
.app-status-head.wait .ic { background: var(--sun); color: hsl(24 40% 16%); }
.app-status-head.bad  { border-color: var(--danger-border); background: var(--danger-soft); }
.app-status-head.bad  .ic { background: var(--danger); color: hsl(0 0% 100%); }

.app-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.app-card h2 { font-size: var(--text-base); display: flex; align-items: center; gap: var(--space-2); }
.app-card h2 i { color: var(--accent); }

.app-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: 0; }
.app-fields dt, .app-intro dt { font-size: var(--text-xs); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.app-fields dd { margin: var(--space-1) 0 0; font-weight: 600; }
.app-intro { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.app-intro p { margin-top: var(--space-2); color: var(--text-soft); line-height: 1.7; }

.app-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }