/* =============================================================================
   Noku — hệ thiết kế cho web.

   Port từ app: `rn/src/theme/tokens.ts` (màu, bảng bán kính, thang chữ),
   `rn/src/theme/corners.ts` (đường cong liên tục + luật đồng tâm),
   spec `rn/docs/port-spec/03-theme.md`.

   Nguyên tắc: HAI MÀU (mực + nền). Không gradient, không bóng đổ trên card.
   Light = nền trắng + VIỀN MỰC (outlined design). Dark = "soft dark" ấm,
   card SÁNG HƠN nền, chữ kem.

   Sửa màu hay bán kính thì sửa ở app trước, rồi chép sang đây — file này là
   bản sao, không phải nguồn sự thật.
   ========================================================================== */

/* ---------- 1. Token màu ------------------------------------------------- */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #ffffff;
  --fg: #2b2b2b;
  --mut: #6b6b6b;          /* đậm hơn #707070 một bậc để mọi cặp đạt AA */
  --hair: #2b2b2b;          /* viền card/chip/input = mực (đặc trưng light) */
  --hair-soft: #c9c9c9;     /* outlineVariant — đường kẻ phụ, không phải viền card */
  --fill: #efefef;          /* surfaceContainerHighest */
  --fill-2: #ededed;        /* primaryContainer */
  --primary: #2b2b2b;
  --on-primary: #ffffff;

  /* Dải nền xen kẽ để cắt nhịp trang. Sáng: hơi xám hơn nền. */
  --band: #f5f5f4;

  --scrim: rgba(255, 255, 255, 0.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #1c1b19;
    --surface: #282623;
    --fg: #f0ede6;
    --mut: #aba8a0;
    --hair: #3f3c36;
    --hair-soft: #4a4740;
    --fill: #33312c;
    --fill-2: #33312c;
    --primary: #f0ede6;
    --on-primary: #201f1c;

    /* Tối: dải SÁNG HƠN nền, giữ đúng luật soft-dark của app. */
    --band: #232220;

    --scrim: rgba(28, 27, 25, 0.72);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #1c1b19;
  --surface: #282623;
  --fg: #f0ede6;
  --mut: #aba8a0;
  --hair: #3f3c36;
  --hair-soft: #4a4740;
  --fill: #33312c;
  --fill-2: #33312c;
  --primary: #f0ede6;
  --on-primary: #201f1c;

  --band: #232220;

  --scrim: rgba(28, 27, 25, 0.72);
}

/* ---------- 2. Bảng bán kính (03 §4.2) ----------------------------------- */
/* Không đặt bán kính tuỳ tiện ở nơi khác — chỉ dùng các biến dưới đây.       */

:root {
  --r-card: 24px;
  --r-button: 16px;
  --r-input: 14px;
  --r-chip: 12px;
  --r-fab: 18px;
  --r-badge: 8px;
  --r-sheet: 28px;
  --r-nav: 30px;   /* nav pill — capsule, KHÔNG squircle */
  --r-lens: 22px;
  --r-phone: 54px; /* khung máy; màn hình bên trong = 54 − 10 = 44 (đồng tâm) */
}

/* ---------- 3. Thang chữ ------------------------------------------------- */
/*
   App có 6 cỡ (64/24/18/16/14/12) và 2 weight (400/700). Trang web cần thêm
   vài bậc cho khổ màn hình lớn. Thang dưới đây gồm 8 bậc:

     56 hero · 40 tiêu đề section · 28 tiêu đề khối · 20 tiêu đề con
     · 18 đoạn dẫn · 16 body · 14 chi tiết · 12 nhãn

   Quy tắc bám theo: chữ càng lớn thì letter-spacing càng âm và line-height
   càng chặt (1.06 → 1.15 → 1.3 → 1.7). Tiếng Việt có dấu nên line-height nới
   hơn tiếng Anh một chút, và hero không tụt quá sâu trên điện thoại (56→32,
   không phải 60→28) để câu định vị không mất sức.

   KHÔNG thêm cỡ nào ngoài bảng này.
*/

:root {
  --fs-hero: clamp(32px, 5.2vw, 56px);
  --fs-section: clamp(24px, 3.4vw, 40px);
  --fs-feature: clamp(20px, 2.2vw, 28px);
  --fs-sub: 20px;
  --fs-lead: clamp(16px, 1.3vw, 18px);
  --fs-display: 64px;
  --fs-headline: 24px;
  --fs-title: 18px;
  --fs-body-lg: 16px;
  --fs-body: 14px;
  --fs-small: 12px;

  --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  --gut: 16px;              /* lề ngang mobile */
  --wrap: 1200px;

  /* Hai đường cong: 'ease' cho khối lớn trôi vào, 'ease-ui' cho đổi trạng thái. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 72px;
}

@media (min-width: 768px) {
  :root { --gut: 24px; }
}

/* ---------- 4. Reset ----------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h, 72px) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.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;
}

.skip-link {
  position: absolute;
  left: var(--gut);
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 999px;
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus-visible { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ---------- 5. Bo góc: đường cong liên tục ------------------------------- */
/*
   Trong app mọi khung chữ nhật bo góc dùng `borderCurve: 'continuous'` (kiểu
   góc Apple). Trên web tương đương là `corner-shape: squircle` (CSS Borders 4,
   Chrome 139+ / Safari mới). Trình duyệt chưa hỗ trợ chỉ thấy `border-radius`
   tròn thường — vẫn đúng bố cục, chỉ khác độ cong. Đó là fallback chấp nhận
   được, KHÔNG dùng SVG mask để giả lập.

   Capsule (bán kính ≥ nửa cạnh ngắn) KHÔNG dùng `.sq`: squircle ở bán kính
   nửa cạnh cho ra hình bị "bóp" nhẹ — app cũng loại trừ đúng như vậy.
*/

.sq { border-radius: var(--r, var(--r-card)); }

@supports (corner-shape: squircle) {
  .sq { corner-shape: squircle; }
}

/*
   Đồng tâm: phần tử con nằm SÁT GÓC khung với đệm đều thì bán kính con =
   bán kính khung − đệm. Khung đặt --r và --pad, con gọi .concentric.
   Chỉ dùng khi con thật sự sát góc — ô icon giữa một hàng thì không.
*/
.concentric {
  border-radius: max(0px, calc(var(--r, var(--r-card)) - var(--pad, 0px)));
}

@supports (corner-shape: squircle) {
  .concentric { corner-shape: squircle; }
}

/* ---------- 6. Bố cục ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/*
   Nhịp trang: các section xen kẽ nền thường và nền dải. Đó là thứ cắt trang
   dài thành từng đoạn đọc được, thay cho việc kẻ vạch ngăn khắp nơi.
*/
.section { padding-block: clamp(48px, 7.5vw, 96px); }
.section--alt { background: var(--band); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.section--hair { border-top: 1px solid var(--hair-soft); }

.stack > * + * { margin-top: var(--gap, 16px); }

.grid {
  display: grid;
  gap: var(--gap, 20px);
}

/* ---------- 7. Kiểu chữ dùng lại ---------------------------------------- */

.kicker {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut);
}

.h-hero {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.h-section {
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

/* Tiêu đề của một khối tính năng lớn. */
.h-feature {
  font-size: var(--fs-feature);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* Tiêu đề con: một bước, một ô trong lưới. */
.h-sub {
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.3;
}

.h-title {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.35;
}

/*
   Dòng thứ hai của tiêu đề, tông nhạt. Trang tham chiếu dùng màu nhấn cho nửa
   sau câu; ở đây chỉ có hai màu nên "nhấn" là chuyển sang tông mờ — vẫn tách
   được hai vế mà không phá luật hai màu.
*/
.h-soft { color: var(--mut); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--mut);
  max-width: 60ch;
}

.muted { color: var(--mut); }
.small { font-size: var(--fs-body); }
.tiny { font-size: var(--fs-small); }

/* ---------- 8. Card ------------------------------------------------------ */
/* App: elevation 0, nền surface, viền 1px hairline, bán kính 24. Không bóng. */

.card {
  --r: var(--r-card);
  --pad: 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: var(--pad);
}

@supports (corner-shape: squircle) {
  .card { corner-shape: squircle; }
}

.card--flush { padding: 0; --pad: 0px; }
.card--fill { background: var(--fill); border-color: transparent; }

/* Thẻ đảo màu (nút CTA, thẻ gói được chọn) — tự đảo theo mode như app. */
.card--ink {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.card--ink .muted,
.card--ink .kicker { color: color-mix(in srgb, var(--on-primary) 62%, transparent); }

/* ---------- 9. Nút ------------------------------------------------------- */

.btn {
  --r: var(--r-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
    color 0.18s var(--ease), border-color 0.18s var(--ease), opacity 0.18s var(--ease);
}

@supports (corner-shape: squircle) {
  .btn { corner-shape: squircle; }
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.btn--primary:hover { opacity: 0.86; }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--hair);
}

.btn--ghost:hover { background: var(--fill); }

.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 18px 28px; }

.btn__sub {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  opacity: 0.72;
  margin-top: 2px;
}

/* Capsule — bo tròn thường, không squircle (luật 3 của corners.ts). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.chip {
  --r: var(--r-chip);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: 700;
}

@supports (corner-shape: squircle) {
  .chip { corner-shape: squircle; }
}

/* Badge PREMIUM — bán kính 8, nền primary, chữ on-primary (03 §8). */
.badge {
  --r: var(--r-badge);
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--r);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@supports (corner-shape: squircle) {
  .badge { corner-shape: squircle; }
}

/* ---------- 9b. Tab trượt (segmented control) --------------------------- */
/*
   Viên trượt là một phần tử riêng, vị trí do JS đo từ nút đang chọn. Không JS
   thì viên nằm im ở nút đầu và các nút vẫn bấm được — nội dung không mất.
   Capsule nên bo tròn thường, không squircle.

   Nằm ở base.css chứ không ở patterns.css: privacy.html cũng dùng tab mà trang
   đó chỉ nạp base.css.
*/

.tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--fill);
}

.tabs__slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  border-radius: 999px;
  background: var(--primary);
  transition: transform 0.3s var(--ease-ui), width 0.3s var(--ease-ui);
  pointer-events: none;
}

.tabs button {
  position: relative;
  z-index: 1;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--mut);
  cursor: pointer;
  transition: color 0.3s var(--ease-ui);
}

.tabs button[aria-selected='true'] { color: var(--on-primary); }

/* Không JS: viên trượt ẩn, nút đang chọn tự tô nền. */
html:not(.js) .tabs__slider { display: none; }
html:not(.js) .tabs button[aria-selected='true'] {
  background: var(--primary);
  color: var(--on-primary);
}

.tab-panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tabs__slider { transition: none; }
}

/* ---------- 10. Ô icon --------------------------------------------------- */

.icon-box {
  --r: var(--r-chip);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--fg);
}

@supports (corner-shape: squircle) {
  .icon-box { corner-shape: squircle; }
}

.icon-box svg { width: 22px; height: 22px; }

/* ---------- 12. Placeholder ảnh ----------------------------------------- */
/*
   Mỗi chỗ ảnh đã có sẵn <img> trỏ tới tên file cố định trong assets/img/.
   Chưa có file → JS giữ nguyên ô gạch đứt kèm nhãn. Thả file đúng tên vào là
   ảnh tự hiện, KHÔNG phải sửa HTML.
*/

.ph {
  position: relative;
  overflow: hidden;
  background: var(--fill);
  border: 1px dashed var(--hair-soft);
}

.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
  pointer-events: none;
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/*
   Ảnh chỉ ẩn chờ khi JS chạy được — site.js là thứ gỡ nó ra sau khi ảnh tải
   xong. Không có JS mà vẫn ẩn thì ảnh không bao giờ hiện lại, nên trạng thái
   ẩn nằm sau .js, và đường không-JS được cho một khung phẳng không nhãn.
*/
.js .ph img {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

html:not(.js) .ph {
  border-style: solid;
  border-color: var(--hair);
}

html:not(.js) .ph::after { content: none; }

.ph.has-img {
  background: var(--fill);
  border-style: solid;
  border-color: var(--hair);
}

.ph.has-img::after { content: none; }
.js .ph.has-img img { opacity: 1; }

/* ---------- 13. Khung iPhone -------------------------------------------- */
/*
   Đồng tâm với góc màn hình: khung --r-phone (54), đệm 10 → màn hình 44.
   Đúng luật `screenConcentric()` của app, chỉ khác là web không đọc được
   modelId nên dùng thẳng số spec.
*/

.phone {
  --r: var(--r-phone);
  --pad: 10px;
  position: relative;
  width: 100%;
  /* Bề ngang đi qua biến để mỗi nơi dùng tự chỉnh: hero cần khung to, thẻ
     tính năng cần khung nhỏ hơn (xem patterns.css mục 3). */
  max-width: var(--phone-w, 320px);
  margin-inline: auto;
  padding: var(--pad);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}

@supports (corner-shape: squircle) {
  .phone { corner-shape: squircle; }
}

.phone__screen {
  position: relative;
  aspect-ratio: 1290 / 2796;
  width: 100%;
}

/* Tai thỏ / Dynamic Island — thuần trang trí, ẩn với trình đọc màn hình. */
.phone__island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 20px;
  border-radius: 999px;
  background: var(--fg);
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}

/* ---------- 13b. Ảnh mockup có sẵn khung máy -------------------------- */
/*
   Ảnh app xuất từ bản mockup trong E:\Design\noku đã có sẵn khung iPhone và
   nền trong suốt, nên KHÔNG lồng vào .phone nữa, lồng là hai lớp khung. Ảnh
   cả điện thoại đứng cao gần gấp đôi bề ngang; ảnh cận cảnh gần vuông.
   Bề ngang ảnh điện thoại đi qua --phone-w giống khung .phone, nên thẻ tính
   năng vẫn chỉnh kích thước ở đúng một chỗ.
*/
.mockup {
  width: 100%;
  margin: 0 auto;
}

.mockup img {
  display: block;
  width: 100%;
  height: auto;
}

.mockup--phone { max-width: var(--phone-w, 320px); }
.mockup--closeup { max-width: 420px; }

/* ---------- 14. Song ngữ ------------------------------------------------- */
/*
   Cả hai ngôn ngữ nằm sẵn trong HTML, CSS ẩn bản không dùng — nhưng CHỈ khi JS
   chạy được (html.js). Không có JS thì hiện cả hai chứ không mất bản nào: thà
   đọc hai lần còn hơn mất hẳn một thứ tiếng.

   !important ở đây là CÓ CHỦ Ý. Đây là công tắc trạng thái của cả trang, nó
   phải thắng mọi quy tắc display của từng section — kể cả selector có id như
   `#hero .hero__line { display: block }`. Thiếu nó thì tiêu đề hero hiện cả
   hai thứ tiếng cùng lúc (đã xảy ra một lần, đừng gỡ).

   Không JS render, không tải lại trang, và bot tìm kiếm luôn đọc được cả hai.
*/

html.js[data-lang='vi'] [lang='en'] { display: none !important; }
html.js[data-lang='en'] [lang='vi'] { display: none !important; }

/* ---------- 15. Reveal khi cuộn ------------------------------------------ */
/* Chỉ bật khi JS chạy (html.js) — không có JS thì nội dung hiện bình thường. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 16. Thanh điều hướng ---------------------------------------- */
/*
   Port của nav pill trong app: capsule bán kính 30, nền kính mờ, "lens" trượt
   theo mục đang xem. Capsule nên KHÔNG squircle.
*/

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--hair);
  border-radius: var(--r-nav);
  background: var(--surface);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__inner {
    background: var(--scrim);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav__brand svg { width: 26px; height: 26px; }

/*
   Logo trên thanh nav: hình chữ N cao đúng bằng icon trong các nút tròn (18px,
   xem .icon-btn svg). viewBox của thẻ svg cắt sát hình chữ N, vốn chỉ rộng 17 và
   cao 12 trong khung 24×24 của symbol, nên 18px ở đây là chiều cao thật của hình
   chứ không phải của khung trống bao quanh. Cả liên kết vẫn cao 40px như các nút
   để dễ bấm trên điện thoại. Logo ở chân trang không có class này nên giữ cỡ cũ.
*/
.nav .nav__brand { min-height: 40px; }
.nav .nav__mark { width: auto; height: 18px; aspect-ratio: 17 / 12; }

/*
   Thanh nav trên điện thoại chỉ còn logo. Chữ Noku ẩn khỏi mắt nhưng vẫn nằm
   trong thẻ, để trình đọc màn hình còn đọc được tên của liên kết. Dùng cùng
   mốc 900px mà thanh nav chuyển sang bố cục điện thoại. Chỉ nhắm vào .nav nên
   logo ở chân trang giữ nguyên.
*/
@media (max-width: 899px) {
  .nav .nav__brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

.nav__links {
  display: none;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}

.nav__links a {
  padding: 8px 14px;
  border-radius: var(--r-lens);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--mut);
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav__links a:hover { color: var(--fg); background: var(--fill); }
/* 'true' = mục đang cuộn tới trên trang chủ. 'page' = trang đang mở (trang pháp lý). */
.nav__links a[aria-current='true'],
.nav__links a[aria-current='page'] { color: var(--fg); background: var(--fill); }

.nav__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__tools { margin-left: 0; }
}

/* Nút tròn nhỏ trong nav — capsule, bo tròn thường. */
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.icon-btn:hover { background: var(--fill); }
.icon-btn svg { width: 18px; height: 18px; }

/* Toggle ngôn ngữ — capsule chia đôi, giống .lang của trang pháp lý. */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--hair);
  border-radius: 999px;
  overflow: hidden;
}

.lang-toggle button {
  padding: 8px 12px;
  border: 0;
  background: transparent;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--mut);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.lang-toggle button[aria-pressed='true'] {
  background: var(--primary);
  color: var(--on-primary);
}

/*
   Nút chủ đề là BẢN XEM TRƯỚC của chế độ sắp chuyển sang, cả icon lẫn màu:
   đang sáng thì hiện mặt trăng trên nền mực, đang tối thì hiện mặt trời trên
   nền kem. aria-label trong site.js nói đúng hành động này ("Chuyển sang giao
   diện tối" khi đang sáng), nên icon, màu và nhãn đọc cùng một nghĩa.

   Màu đi qua --primary / --on-primary, hai token vốn tự đảo theo chế độ, nên
   không phải viết riêng màu cho sáng và tối. Chú thích cũ ở đây ghi "hiện chế độ
   sẽ chuyển sang" nhưng code lại hiện chế độ hiện tại — bản này làm đúng như ghi.
*/
.icon-btn[data-theme-toggle] {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* Giữ nền đặc khi rê chuột — .icon-btn:hover đổi sang --fill sẽ làm mất màu đảo. */
.icon-btn[data-theme-toggle]:hover {
  background: var(--primary);
  opacity: 0.86;
}

/* Mặc định là chế độ sáng: hiện mặt trăng, ẩn mặt trời. */
.icon-btn .icon-sun { display: none; }

:root[data-theme='dark'] .icon-btn .icon-sun { display: block; }
:root[data-theme='dark'] .icon-btn .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-btn .icon-sun { display: block; }
  :root:not([data-theme='light']) .icon-btn .icon-moon { display: none; }
}

/* ---------- 16b. Nav: hiện dần khi cuộn + menu điện thoại --------------- */
/*
   Khối này từng nằm ở patterns.css. Chuyển sang đây vì cả ba trang đều dùng
   thanh nav, mà hai trang pháp lý chỉ nạp base.css, nên trước đó trên điện
   thoại trang pháp lý không có nút menu để sang trang khác.
*/
/*
   Lúc ở đầu trang thanh nav trong suốt, trôi cùng nội dung. Cuộn quá 80px thì
   viên pill mới "hiện hình": nền kính mờ + viền mực. Cách này giữ hero thoáng
   mà vẫn có chỗ bám khi đọc xuống dưới.
*/

.nav__inner {
  border-color: transparent;
  background: transparent;
  transition: background-color 0.3s var(--ease-ui), border-color 0.3s var(--ease-ui),
    backdrop-filter 0.3s var(--ease-ui);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__inner { -webkit-backdrop-filter: none; backdrop-filter: none; }

  .scrolled .nav__inner {
    background: var(--scrim);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }
}

.scrolled .nav__inner {
  border-color: var(--hair);
  background: var(--scrim);
}

/* Không JS thì không có class .scrolled — cho pill hiện hẳn để nav luôn rõ. */
html:not(.js) .nav__inner {
  border-color: var(--hair);
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .nav__inner { transition: none; }
}

/* Nút hamburger — chỉ có ở khổ hẹp. */
.nav__menu-btn { display: grid; }

@media (min-width: 900px) {
  .nav__menu-btn { display: none; }
}

/*
   Icon vẽ theo E:\Design\noku\hamburger.svg: hai thanh bo tròn, thanh dưới ngắn
   hơn và dạt phải. Nó nằm thẳng trong nút chứ không đi qua sprite, vì lúc mở menu
   phải điều khiển từng thanh để chập thành dấu X, mà <use> không cho CSS với tới
   từng phần bên trong.

   Mỗi thanh là một <line> nét tròn đầu, dày đúng bằng chiều cao thanh trong file
   gốc, nên lúc nghỉ trùng khít bản thiết kế. Thanh dưới được kẻ dài bằng thanh
   trên nhưng chỉ lộ phần bên phải nhờ stroke-dasharray. Khi mở menu nét lộ ra
   hết, để hai cánh dấu X dài bằng nhau.

   ViewBox vuông 100×100 (file gốc 100×38.46) để dấu X xoay 45° vẫn nằm trong
   khung. Tô bằng currentColor nên tự theo màu chữ của nút ở cả hai chế độ.
*/
.nav__menu-btn .menu-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.menu-icon line {
  stroke: currentColor;
  stroke-width: 12.82;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 50px 50px;
  transition: transform 0.3s var(--ease-ui), stroke-dasharray 0.3s var(--ease-ui),
    stroke-dashoffset 0.3s var(--ease-ui);
}

.menu-icon__bottom {
  stroke-dasharray: 56.68 200;
  stroke-dashoffset: -30.5;
}

.menu-open .menu-icon__top {
  transform: rotate(45deg) translateY(12.82px);
}

.menu-open .menu-icon__bottom {
  stroke-dasharray: 87.18 200;
  stroke-dashoffset: 0;
  transform: rotate(-45deg) translateY(-12.82px);
}

/*
   Menu điện thoại: tấm phủ kín màn hình. Dùng visibility chứ không display để
   còn chuyển động được, và để phần tử vẫn ra khỏi thứ tự tab khi đóng.
*/

@media (max-width: 899px) {
  /*
     Tấm menu chỉ TỒN TẠI khi mở. Bản trước để nó nằm sẵn với visibility:
     hidden cho đẹp lúc đóng, nhưng một phần tử position: fixed lấy khung chứa
     là khung nhìn KỂ CẢ thanh cuộn — trên Windows nó rộng hơn vùng nội dung
     đúng bằng bề rộng thanh cuộn (16px) và làm cả trang trượt ngang được.
     Bỏ hẳn khỏi bố cục là hết, đổi lại chỉ mất hiệu ứng lúc ĐÓNG.
  */
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 var(--gut);
    background: var(--bg);
  }

  .menu-open .nav__links {
    display: flex;
    animation: menuIn 0.28s var(--ease-ui);
  }

  @keyframes menuIn {
    from { opacity: 0; transform: translateY(-8px); }
  }

  .nav__links a {
    padding: 14px 18px;
    border-radius: var(--r-button);
    font-size: var(--fs-sub);
    text-align: center;
  }

  @supports (corner-shape: squircle) {
    .nav__links a { corner-shape: squircle; }
  }

  /*
     Tấm menu (.nav__links) là CON của .nav__inner, nên nó luôn vẽ đè lên nền
     của cha. Nâng z-index của .nav__inner không cứu được nút đóng — phải nâng
     chính hàng nút lên trên tấm menu, trong cùng ngữ cảnh xếp lớp.
  */
  .nav { z-index: 50; }
  .nav__inner { position: relative; z-index: 41; }
  .nav__tools { position: relative; z-index: 42; }

  .menu-open .nav__inner {
    border-color: var(--hair);
    background: var(--bg);
    /*
       PHẢI tắt kính mờ khi menu mở. backdrop-filter khác 'none' biến viên nav
       thành KHUNG CHỨA cho mọi con position: fixed, nên tấm menu bên trong nó
       thôi phủ kín khung nhìn mà co lại đúng bằng viên nav — hai mục đầu văng
       ra ngoài màn hình. Lúc menu mở viên nav đã có nền đặc nên bỏ kính không
       ai thấy. transition: none vì giá trị nội suy giữa chừng (blur(0px)) vẫn
       khác 'none' và vẫn đủ để tạo khung chứa.
    */
    transition: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-open .nav__links { animation: none; }
  .menu-icon line { transition: none; }
}

/* ---------- 17. Footer --------------------------------------------------- */

.footer {
  border-top: 1px solid var(--hair-soft);
  margin-top: clamp(56px, 9vw, 112px);
  padding-block: 40px 56px;
  font-size: var(--fs-body);
  color: var(--mut);
}

.footer a { color: var(--fg); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-weight: 700;
}

.footer__legal { margin-bottom: 8px; }

.footer__note {
  max-width: 62ch;
  line-height: 1.55;
}

/* ---------- 18. Trang pháp lý (privacy.html) -------- */

/*
   Văn bản pháp lý dài, để đọc chứ không để lướt, nên ưu tiên dễ đọc:
   - Thân bài hạ tông còn 80% màu chữ, tiêu đề mục giữ nguyên đậm màu. Vẫn là
     mực hoặc kem, chỉ nhạt đi, nên đúng luật hai màu. Tương phản còn khoảng
     7,5:1 ở chế độ sáng và 9,8:1 ở chế độ tối, vẫn trên mức AAA. Chữ sáng hết
     cỡ trên nền gần đen gây chói ở chế độ tối; hạ tông là để bớt chói.
   - KHÔNG dùng chữ mảnh: nét mảnh làm dấu tiếng Việt khó nhìn, nhòe ở chế độ
     tối, và phải tải thêm một độ đậm font.
   - Khoảng dòng 1,75 cho dấu tiếng Việt thoáng hơn.
   Cột chữ trải đúng bề rộng thanh nav, mép trái thẳng hàng với viên nav.
*/
.prose h2 { font-size: var(--fs-headline); font-weight: 700; margin: 40px 0 8px; }

.prose h3 {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.35;
  color: var(--fg);
  margin: 36px 0 8px;
}

.prose p {
  margin: 0 0 12px;
  line-height: 1.75;
  color: var(--fg);
  color: color-mix(in srgb, var(--fg) 80%, var(--bg));
}

/* Liên kết trong thân bài giữ đậm màu để nổi hơn chữ xung quanh. */
.prose a {
  color: var(--fg);
  text-underline-offset: 3px;
}