/* base.css - reset, kiểu chữ, bố cục, responsive.
   Chỉ dùng biến CSS; giá trị mặc định của biến khai báo ở :root bên dưới,
   giá trị thật của từng thương hiệu nằm trong brands/<id>/theme.css.

   Biến dùng chung:
   --color-primary  --color-on-primary  --color-bg  --color-surface  --color-ink  --color-muted  --color-accent
   --font-heading  --font-body
   --radius

   Biến tuỳ chọn (theme.css không khai báo thì dùng giá trị pha sẵn ở dưới):
   --color-tint
   Biến tuỳ chọn không có giá trị ở dưới (component tự có giá trị thay thế):
   --font-hand  --footer-top  --footer-gap
   --btn-border  --btn-shadow  --btn-shadow-hover  --btn-lift (viền, bóng, độ nhấc khi rê chuột của nút .btn)
   --card-border  --card-shadow (viền, bóng của thẻ thông tin: clock, tips, policy, con dấu của hero haze)

   Biến bố cục và chuyển động (theme.css không cần khai báo):
   --container  --space-section  --duration */

/* Giá trị trung tính, chỉ được dùng khi theme.css của brand thiếu biến thì sẽ lấy giá trị mặc định ở đây,
   để trang không bị mất màu, font. Và theme.css được nạp sau base.css và cũng viết trong :root nên biến nào
   được khai báo sẽ ghi đè lên giá trị ở đây. */
:root {
  --color-primary: #1f4e79;
  --color-on-primary: #ffffff;
  --color-bg: #ffffff;
  --color-surface: #f3f4f6;
  --color-ink: #1f2328;
  --color-muted: #5b6470;
  --color-accent: #b4400a;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 0.5rem;
  /* Nền phụ cho khối cần nổi khỏi nền trang, ví dụ tấm thông tin ở footer kiểu columns.
     Mặc định pha từ màu chủ đạo và màu nền; thương hiệu muốn màu riêng thì khai báo trong theme.css. */
  --color-tint: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg));
  /* Mọi section đọc chung ba biến này, nên chỉnh một chỗ là cả trang đổi nhịp. */
  --container: 72rem;
  --space-section: 4rem;
  --duration: 0.2s;
}

/* Màn rộng thì section thoáng hơn; điện thoại giữ khoảng nhỏ để không phải cuộn nhiều. */
@media (min-width: 760px) {
  :root {
    --space-section: 6rem;
  }
}

/* Reset: bỏ khác biệt mặc định giữa các trình duyệt. */

/* Chiều rộng tính cả padding và viền, nên width: 100% không bị tràn khi thêm padding. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Trình duyệt tự thêm margin cho h1, p, ul…; bỏ hết để component tự quyết khoảng cách. */
* {
  margin: 0;
}

/* Ảnh không bao giờ rộng hơn khối chứa nó; display: block bỏ khoảng hở nhỏ dưới ảnh. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Ô nhập và nút mặc định không kế thừa font của trang. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Nền, chữ của cả trang lấy từ biến, nên đổi theme.css là đổi theo. */
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
}

/* Bấm link tới một khối (menu, nút đặt phòng): trang cuộn mượt tới đó, chừa chỗ cho header đang dính ở mép trên.
   --header-stuck do wl-header đo, vì mỗi thương hiệu một kiểu header, cao thấp khác nhau; chưa có header thì không chừa.
   Bật giảm chuyển động thì nhảy thẳng như cũ. */
html {
  scroll-padding-top: var(--header-stuck, 0px);
  /* Thanh cuộn của trang: mảnh, màu chủ đạo của thương hiệu trên nền trong suốt.
     Firefox và Chrome mới đọc hai thuộc tính chuẩn này; Safari đọc các quy tắc ::-webkit-scrollbar bên dưới. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

html::-webkit-scrollbar {
  width: 8px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 80%, var(--color-ink));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Nút tròn đổi thương hiệu của BTC (wd2026.js tự chèn, không sửa tệp đó): BTC đặt ở góc dưới phải và để trong suốt
   tới khi rê chuột vào. Đội chuyển sang góc dưới trái và cho nút tròn luôn hiện, để BGK thấy ngay; nút
   "Đổi dữ liệu demo" vẫn chỉ hiện khi rê chuột hoặc bấm vào nút tròn, nằm bên phải nút.
   Có html phía trước để mạnh hơn style wd2026.js chèn vào sau base.css. */
html .wd2026-fab-wrap {
  right: auto;
  left: 10px;
  flex-direction: row;
  opacity: 1;
}

/* Đổi thương hiệu xong, wd2026.js hiện màn hỏi "tải lại trang?"; core.js bấm giúp "Để sau" nhưng hộp thoại của BTC
   mờ dần 0,2 giây nên câu hỏi vẫn hiện thoáng qua. Hộp thoại đang ở màn đó thì ẩn ngay, không chạy hiệu ứng mờ;
   lần mở sau wd2026.js vẽ lại danh sách nên hộp thoại hiện bình thường. */
html .wd2026-overlay:has(.wd2026-confirm) {
  visibility: hidden;
  transition: none;
}

/* Kiểu chữ. */

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.15;
  /* Chia đều chữ giữa các dòng, tránh dòng cuối chỉ còn một chữ. */
  text-wrap: balance;
}

/* Cỡ tiêu đề co theo bề ngang màn hình: điện thoại không tràn chữ, màn lớn không bị nhỏ.
   Có phần rem nên người dùng phóng to trình duyệt thì chữ vẫn to theo. */
h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
}

h2 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

/* Liên kết trong component (menu, chân trang) mặc định theo màu chữ xung quanh,
   thay vì màu xanh, tím của trình duyệt; component muốn màu khác thì tự đặt. */
a {
  color: inherit;
}

/* Chỉ áp cho liên kết trong đoạn chữ. Liên kết có class (như .btn) do class đó tự lo,
   nếu không thì nút <a class="btn"> rê chuột vào cũng bị đổi màu.
   Chữ dùng màu nhấn chứ không dùng màu chủ đạo: màu chủ đạo có thể là màu sáng chỉ hợp làm nền nút,
   còn màu nhấn thương hiệu nào cũng phải đọc được trên nền trang. */
a:not([class]) {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

a:not([class]):hover {
  color: var(--color-ink);
}

/* Bố cục chung. */

/* Khung nội dung: rộng tối đa --container, luôn chừa 1rem lề mỗi bên trên điện thoại. */
.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

/* Mỗi section là một thẻ <wl-*> nằm trong <main>. Thẻ tự đặt tên mặc định nằm chung dòng,
   nên đổi sang khối. Đệm trên và dưới giống nhau cho mọi section, nên nhịp trang đều. */
main > * {
  display: block;
  padding-block: var(--space-section);
}

/* Lưới: điện thoại 1 cột (viết trước), màn rộng hơn mới thêm cột. */
.grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Nút kêu gọi hành động dùng chung. */

/* Dùng cho cả <a> và <button>: <a class="btn" href="#dat-cho">Giữ chỗ</a> */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  /* 2.75rem = 44px: vùng bấm tối thiểu để dễ chạm trên điện thoại. */
  min-height: 2.75rem;
  padding: 0.75em 1.5em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 2px solid var(--btn-border, var(--color-primary));
  border-radius: var(--radius);
  box-shadow: var(--btn-shadow, none);
  cursor: pointer;
  transition: background-color var(--duration) ease, border-color var(--duration) ease,
    box-shadow var(--duration) ease, translate var(--duration) ease;
}

/* Hover: pha thêm một chút màu chữ chính để nút tối lại, không ghi cứng mã màu nào. */
.btn:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, var(--color-ink));
  border-color: var(--btn-border, color-mix(in srgb, var(--color-primary) 85%, var(--color-ink)));
  box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
  translate: var(--btn-lift, 0 0);
}

/* Nút phụ: viền màu chủ đạo, nền trong suốt. Dùng cho liên kết phụ như "Xem lịch trình".
   Chữ dùng màu nhấn cùng lý do với liên kết ở trên. */
.btn--ghost {
  color: var(--color-accent);
  background: transparent;
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Viền chỉ hiện khi dùng bàn phím (Tab), bấm chuột thì không. Áp cho mọi phần tử bấm được. */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Giảm chuyển động. */

/* AGENTS.md cấm !important, nên không dùng được * { transition: none !important }.
   Thay vào đó mọi transition, animation dùng var(--duration); bật "giảm chuyển động" thì đặt về 0.
   Hiệu ứng chạy bằng JS (GSAP, AOS) không đọc biến này, phải tự kiểm matchMedia trong JS. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0s;
  }
}