/* Self-hosted fonts — Fraunces + Hanken Grotesk (OFL), latin + latin-ext, from Google Fonts static woff2. SOFT/WONK pinned at default 0. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   AXIMOO Studios — aximoo.css v3 · "Mực & Ngà" (classic × modern)
   Locked 2026-07-21: ivory paper + ink type + metallic gilt,
   one noir night band; Fraunces (opsz-pinned) × Hanken Grotesk.
   Legacy token aliases preserved so interior pages keep working.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* paper & ink */
  --ivory: #F4EFE6;            /* nền chính */
  --ivory-2: #F8F5EE;          /* card / panel */
  --ivory-3: #E9E2D2;          /* panel đậm */
  --ink: #1E1B16;              /* mực */
  --ink-9: #141210;            /* mực sâu */
  --ink-80: rgba(30,27,22,.8);
  --ink-70: rgba(30,27,22,.72);
  --ink-55: rgba(30,27,22,.55);
  --ink-45: rgba(30,27,22,.45);
  --ink-40: rgba(30,27,22,.4);
  /* gilt (vàng kim — KHÔNG vàng mật ong) */
  --gilt: #C9A227;
  --gilt-2: #E4C05A;
  --gilt-deep: #7E650F;   /* vàng sâu cho chữ NHỎ trên nền ngà (đạt AA) */
  --champ: #F2DC9B;
  /* noir night (brand) — dải đêm trên WEB dùng cặp --night lục ấm bên dưới */
  --noir: #0E0D0B;
  --noir-2: #16130D;
  --noir-ink: #F1EBDC;         /* chữ ngà trên nền đêm */
  /* dải đêm web: rừng lục ấm (Đan chốt 22/07 — web sáng/tươi, noir chỉ cho logo) */
  --night: #153A2C;
  --night-2: #0C271D;
  /* gilt nhấn nút */
  --gilt-3: #B8941F;           /* gilt sẫm hơn một nấc — hover nút vàng */
  /* gia vị — dùng có kiểm soát */
  --emerald: #1C4436;
  /* hairlines */
  --hair: rgba(30,27,22,.22);
  --line: rgba(30,27,22,.13);
  /* legacy aliases (trang trong còn tham chiếu) */
  --cream: var(--ivory);
  --cream-2: var(--ivory-2);
  --cream-3: var(--ivory-3);
  --brown: var(--ink);
  --bark: var(--ink);
  --saddle: var(--ink-70);
  --amber: var(--gilt);
  --gold: var(--gilt);
  --peach: var(--gilt-2);
  --peach-2: var(--champ);
  /* type */
  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-sans: "Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* geometry */
  --nav-h: 74px;
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --radius: 14px;
  --radius-sm: 8px;
  --pad-x: clamp(20px, 5vw, 64px);
  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-soft: 0 1px 0 rgba(30,27,22,.04);
  --shadow-lift: 0 10px 30px rgba(30,27,22,.10);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 1.0625rem; /* 17px ở root 16 — để rem nên cả hệ chữ scale được theo màn hình lớn */
  line-height: 1.65;
  color: var(--ink-80);
  background: var(--ivory);
  font-synthesis: none;
  font-optical-sizing: auto;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* hidden phải luôn thắng mọi display của class (btn/card... đặt display riêng) */
[hidden] { display: none !important; }
/* chỉ dành cho screen reader — không chiếm chỗ, không hiện */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
p a, .prose a { border-bottom: 1.4px solid var(--gilt); padding-bottom: 1px; }
/* gilt-deep: gilt thường chỉ 1.4–2.1:1 trên nền sáng — trượt AA 3:1 (đo 23/07) */
:focus-visible { outline: 2px solid var(--gilt-deep); outline-offset: 3px; }
.night :focus-visible { outline-color: var(--gilt-2); }
::selection { background: var(--champ); color: var(--ink-9); }

/* ---------- Headings — Fraunces, trục ghim ---------- */
h1, h2, h3, .display-xl, .display-lg, .display-md {
  font-family: var(--ff-display);
  color: var(--ink);
  margin: 0;
  font-weight: 560;
}
h1, .display-xl {
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(2.625rem, 1.5rem + 5.5vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
h2, .display-lg {
  font-variation-settings: "opsz" 84, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.875rem, 1.35rem + 2.6vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
}
h3, .display-md {
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 580;
}
h4 { font-family: var(--ff-sans); font-weight: 600; font-size: 1.1875rem; line-height: 1.35; color: var(--ink); margin: 0; }
h1 em, h2 em, h3 em, .display-xl em, .display-lg em, .display-md em {
  font-style: italic; color: var(--gilt);
  /* nghiêng dùng trục quang học THẤP: nét điềm đạm, bỏ kiểu nghiêng phô diễn của opsz cao */
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
}
.night h1 em, .night h2 em { color: var(--champ); }

/* ---------- Text roles ---------- */
p { margin: 0 0 1em; }
.lead { font-size: 1.25rem; line-height: 1.55; font-weight: 400; color: var(--ink-70); max-width: 32em; }
.muted { color: var(--ink-70); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }
.kicker { font-size: .8125rem; letter-spacing: .08em; color: var(--ink-70); }

/* eyebrow — nhãn small-caps gilt */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-sans);
  font-variant-caps: small-caps;
  letter-spacing: .14em;
  font-size: .9375rem;
  font-weight: 550;
  color: var(--gilt-deep); /* gilt thường trượt AA trên mọi nền sáng (đo 23/07) */
}
.eyebrow.center { display: block; text-align: center; }

/* folio / № line */
.folio { font-size: .8125rem; letter-spacing: .08em; color: var(--ink-70); font-variant-numeric: lining-nums; }
.folio .no { font-family: var(--ff-display); color: var(--gilt); }

/* ---------- Ornaments ---------- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .04;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rule-soft { border: 0; height: 1px; background: var(--line); margin: 0 auto; max-width: var(--maxw); }
.rule-dbl { border-top: 1px solid var(--hair); position: relative; }
.rule-dbl::after { content: ""; display: block; border-top: 1px solid var(--hair); margin-top: 3px; }
.fleuron { display: flex; align-items: center; justify-content: center; gap: 18px; }
.fleuron .ln { width: clamp(56px, 12vw, 110px); height: 1px; background: var(--hair); }
.fleuron img, .fleuron svg { display: block; }
.underline-sketch { box-shadow: inset 0 -2px 0 var(--gilt); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.container-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--pad-x); }
section { padding: clamp(56px, 9vw, 96px) 0; }
.section-tight { padding: clamp(36px, 6vw, 64px) 0; }

/* ---------- Masthead (trang chủ — kiểu bìa sách) ---------- */
.mast { padding: 26px 0 0; background: var(--ivory); }
.mast-row { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mast-side { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-70); font-weight: 500; }
.mast-side.r { text-align: right; }
.mast-side.r a { color: var(--ink); font-weight: 600; }
.mast-c { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mast-c .wm { font-family: var(--ff-display); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; font-weight: 600; font-size: 1.875rem; letter-spacing: .22em; margin-right: -.22em; color: var(--ink); }
.mast .rule-dbl { max-width: calc(var(--maxw) - 2 * var(--pad-x)); margin: 20px auto 0; }
.navline { max-width: calc(var(--maxw) - 2 * var(--pad-x)); margin: 0 auto; display: flex; justify-content: center; gap: clamp(22px, 5vw, 52px); padding: 14px 0; border-bottom: 1px solid var(--line); }
.navline a { font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--ink-70); }
.navline a[aria-current="page"], .navline a:hover { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .mast-row { grid-template-columns: 1fr; text-align: center; }
  .mast-side { display: none; }
  .navline { flex-wrap: wrap; gap: 18px; }
}

/* ---------- Legacy nav (trang trong) ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 var(--pad-x);
  background: rgba(244,239,230,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-family: var(--ff-display); font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0; font-weight: 600; font-size: 1.125rem; letter-spacing: .14em; color: var(--ink); }
.nav-links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink-70); padding-bottom: 3px; }
.nav-links a:hover { color: var(--ink); box-shadow: inset 0 -1.6px 0 var(--gilt); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; transition: .25s var(--ease); }
.nav-mobile { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-mobile {
    display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 39;
    background: var(--ivory); padding: 28px var(--pad-x);
    flex-direction: column; gap: 6px;
  }
  .nav-mobile.open { display: flex; }
  .nav-mobile a {
    font-family: var(--ff-display); font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
    font-size: 1.5rem; font-weight: 560; color: var(--ink); padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- Buttons — chữ nhật, chữ hoa giãn cách ---------- */
.btn {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  line-height: 1; padding: 15px 30px;
  border: 1px solid transparent; border-radius: 100px; /* viên thuốc — nút vuông đọc là "cứng" giữa trời mềm (Đan 23/07) */
  cursor: pointer; transition: .25s var(--ease);
  font-variant-ligatures: none;
}
.btn-primary { background: var(--gilt); color: #221A0A; box-shadow: 0 6px 18px rgba(140,109,20,.25); }
.btn-primary:hover { background: var(--gilt-3); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(140,109,20,.32); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--noir-ink); }
.btn-cream { border-color: var(--gilt); color: var(--gilt-2); background: transparent; }
.btn-cream:hover { background: var(--gilt); color: var(--ink-9); }
.link-arrow { font-weight: 500; font-size: .9375rem; color: var(--ink); border-bottom: 1.6px solid var(--gilt); padding-bottom: 2px; }
.link-arrow:hover { color: var(--gilt); }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card {
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
}
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; font-size: .79375rem; line-height: 1.6; color: var(--ink-70); }
.card p { font-size: .84375rem; }
.card-icon { width: 28px; height: 28px; margin-bottom: 14px; }
.chip {
  display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  color: var(--gilt-deep); border: 1px solid var(--gilt); padding: 5px 12px; margin-bottom: 12px;
  font-variant-numeric: lining-nums;
}
.chip-outline { border-color: var(--hair); color: var(--ink-70); }

/* 3 cột kẻ chỉ dọc (trang chủ) */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.cols3 .col { padding: 6px 40px 4px; border-left: 1px solid var(--line); }
.cols3 .col:first-child { border-left: 0; padding-left: 0; }
.cols3 .col h3 { margin: 14px 0 10px; }
.cols3 .col p { font-size: .84375rem; line-height: 1.7; color: var(--ink-70); margin: 0; }
@media (max-width: 860px) {
  .cols3 { grid-template-columns: 1fr; }
  .cols3 .col { border-left: 0; padding: 20px 0; border-top: 1px solid var(--line); }
  .cols3 .col:first-child { border-top: 0; }
}
.shead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 44px; flex-wrap: wrap; }
.shead .sub { font-family: var(--ff-display); font-style: italic; font-size: .9375rem; color: var(--ink-70); }

/* feature (zigzag) */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.feature.flip { direction: rtl; } .feature.flip > * { direction: ltr; }
@media (max-width: 820px) { .feature, .feature.flip { grid-template-columns: 1fr; direction: ltr; } }

/* stats / facts */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { text-align: center; padding: 22px 10px; background: var(--ivory-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.stat b { font-family: var(--ff-display); font-size: 1.75rem; font-weight: 560; color: var(--ink); display: block; }
.fact-label { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-deep); font-weight: 600; }
.fact-value { font-weight: 500; color: var(--ink); }
.card .fact-value { font-size: .9375rem; color: var(--ink); }
.footnote { font-size: .875rem; color: var(--ink-70); }

/* callout */
.callout { border-left: 2px solid var(--gilt); background: var(--ivory-2); padding: 18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* swatches (trang press) */
.swatch { text-align: center; }
.swatch-chip { height: 72px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.swatch-name { font-weight: 600; font-size: .8125rem; margin-top: 8px; color: var(--ink); }
.swatch-hex { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; color: var(--ink-70); }

/* ---------- Night / noir band ---------- */
.night {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(242,220,155,.08), transparent 60%),
    linear-gradient(172deg, var(--night), var(--night-2));
  color: var(--noir-ink); position: relative; overflow: hidden;
}
.night h1, .night h2, .night h3 { color: var(--noir-ink); }
.night p, .night .lead { color: rgba(241,235,220,.78); font-weight: 450; letter-spacing: .005em; }
.night .eyebrow { color: var(--gilt-2); }
/* card trong dải đêm vẫn là "giấy" ngà → chữ phải quay về mực */
.night .card h3 { color: var(--ink); }
.night .card p { color: var(--ink-70); font-weight: 400; letter-spacing: 0; }
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--champ); opacity: .7; }

/* ---------- Hero (trang chủ — căn giữa trang trọng) ---------- */
.hero-editorial { text-align: center; padding: clamp(64px, 10vw, 110px) var(--pad-x) clamp(56px, 8vw, 88px); position: relative; }
.hero-editorial h1 { max-width: 16ch; margin: 24px auto 0; }
.hero-editorial .lead { margin: 0 auto; text-align: center; }
.hero-editorial .fleuron { margin: 32px auto 26px; }
.hero-editorial .cta-row { justify-content: center; margin-top: 40px; }
.hero-mark { display: block; margin: 0 auto; }

/* ---- Hero "big skies": tranh trời + sao bay tự do ---- */
.hero-sky { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-x); }
.hero-sky .sky { display: block; width: 100%; height: auto; }
h1.hero-claim {
  font-variation-settings: "opsz" 84, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.125rem);
  line-height: 1.2;
  max-width: 48rem;
  margin: 10px auto 0;
  text-wrap: balance;
}
.h1-star { height: .72em; width: auto; vertical-align: -.04em; }
/* sao nhỏ lấp lánh chậm — mỗi sao một nhịp */
.hero-sky .tw { animation: twinkle 4.6s ease-in-out infinite; }
.hero-sky .tw:nth-of-type(3n) { animation-duration: 5.8s; animation-delay: -2.1s; }
.hero-sky .tw:nth-of-type(3n+1) { animation-duration: 4s; animation-delay: -1.2s; }
.hero-sky .tw:nth-of-type(4n) { animation-duration: 6.6s; animation-delay: -3.4s; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
/* đồ chơi: bấm trời thắp sao ước */
.hero-sky svg { cursor: pointer; }
.hero-sky .uw {
  fill: var(--gilt);
  transform-box: fill-box; transform-origin: center;
  /* twinkle-uw đáy 1 (khớp fill-value của wish-pop) — dùng twinkle thường sẽ sụt sáng 1→.35 đột ngột */
  animation: wish-pop .5s var(--ease) both, twinkle-uw 4.8s ease-in-out .6s infinite;
}
@keyframes twinkle-uw { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
/* footnote hero là nút thật (bàn phím bấm được) nhưng nhìn y như chữ chú thích */
.wish-btn { background: none; border: 0; padding: 0; margin: 2px 0 0; cursor: pointer; font: inherit; font-size: .875rem; color: var(--ink-70); }
.wish-btn:hover { color: var(--ink); }
@keyframes wish-pop {
  0% { opacity: 0; transform: scale(.2) rotate(-18deg); }
  60% { opacity: 1; transform: scale(1.3) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.hero-sky .uw-out { animation: wish-out .6s var(--ease) forwards; }
@keyframes wish-out { to { opacity: 0; transform: scale(.3); } }
@media (prefers-reduced-motion: reduce) {
  .hero-sky .uw { animation: none; }
  .hero-sky .uw-out { animation: none; opacity: 0; }
}

/* mây BAY THẬT: vào từ mép trái, hiện dần, trôi hết trời rồi tan ở mép phải, lặp mãi.
   Mỗi đám tự khai vị trí gốc/tốc độ/pha qua --cx/--cdur/--cdel (inline trên SVG).
   Viền blur nhẹ cho mềm như mây thật; reduced-motion → đứng yên tại --cx. */
.hero-sky .cl, .hero-sky .ci {
  transform: translateX(var(--cx, 600px));
  animation: cloud-cross var(--cdur, 100s) linear var(--cdel, 0s) infinite;
  will-change: transform, opacity;
}
.hero-sky .cl { filter: blur(.5px); }
/* vệt ti tầng phải NHOÈ như sương — không blur thì trên màn lớn thành thanh trắng cứng */
.hero-sky .ci { filter: blur(3px); }
@keyframes cloud-cross {
  0% { transform: translateX(-180px); opacity: 0; }
  7% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateX(1380px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sky .cl, .hero-sky .ci { animation: none; opacity: 1; }
}

/* quầng sáng "thắp" một lần khi tải trang — mỗi quầng về đúng độ mờ riêng */
.hero-sky .halo { --halo-o: .2; opacity: 0; animation: lightup 1.8s var(--ease) .35s forwards; }
.hero-sky .halo.dim { --halo-o: .08; }
@keyframes lightup { to { opacity: var(--halo-o); } }
@media (prefers-reduced-motion: reduce) {
  .hero-sky .tw { animation: none; opacity: .8; }
  .hero-sky .halo { animation: none; opacity: var(--halo-o); }
}

/* ---------- Footer — colophon ---------- */
.footer { background: var(--ivory); color: var(--ink-70); border-top: 1px solid var(--line); padding: 52px 0 34px; }
.footer .fleuron { margin-bottom: 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer .brand-name { color: var(--ink); }
.footer-tagline { font-size: .8125rem; line-height: 1.7; color: var(--ink-70); max-width: 30ch; }
.footer-col-title { font-size: .625rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 10px; }
.footer-col-list { list-style: none; margin: 0; padding: 0; }
.footer-col-list li { margin-bottom: 7px; }
.footer-col-list a { font-size: .8125rem; color: var(--ink-70); font-weight: 300; }
.footer-col-list a:hover { color: var(--gilt); }
.footer-bottom { max-width: var(--maxw); margin: 34px auto 0; padding: 16px var(--pad-x) 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-bottom-text { font-size: .78125rem; color: var(--ink-70); }
.footer-legal { font-family: var(--ff-display); font-style: italic; font-size: .8125rem; color: var(--ink-70); text-align: center; max-width: var(--maxw); margin: 26px auto 0; padding: 0 var(--pad-x); }

/* ---------- Legal pages ---------- */
/* đầu trang tài liệu: một hơi thở trời sớm rất nhẹ, nối gu sky-journey của trang chủ */
.page-header { padding: clamp(48px, 8vw, 84px) 0 clamp(28px, 5vw, 48px); text-align: center; background: linear-gradient(#E9F1F6, var(--ivory)); }
/* h1 có max-width inline phải tự căn giữa — không thì tít neo trái giữa header căn giữa */
.page-header h1 { margin-inline: auto; }
.legal-grid { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 64px); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x) 80px; }
@media (max-width: 820px) { .legal-grid { grid-template-columns: 1fr; } }
.toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; }
.toc-title { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; font-size: .8125rem; color: var(--ink-70); padding: 4px 0; }
.toc a:hover { color: var(--gilt); }
.prose h2 { font-size: 1.5rem; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.prose p, .prose li { font-size: .9375rem; line-height: 1.7; color: var(--ink-70); }

/* ---------- Hành trình bầu trời (CHỈ trang chủ): cuộn = ngày trôi thành đêm ----------
   Mỗi "hồi" một gradient, màu cuối hồi trước = màu đầu hồi sau nên trời liền mạch:
   bình minh xanh → giờ vàng → hoàng hôn → chạng vạng tím → đêm rừng sâu → thung lũng. */
body.journey { background: #0A1B19; }
.jz { position: relative; overflow: hidden; }
.jz-dawn { background: linear-gradient(#A6CBEA 0%, #CFE3EC 46%, #EEE2C3 100%); padding-top: 0; padding-bottom: clamp(48px, 7vw, 84px); }
.jz-gold { background: linear-gradient(#EEE2C3, #F2D2A4); }
.jz-sunset { background: linear-gradient(#F2D2A4, #CE9683); }
.jz-dusk {
  background: linear-gradient(#CE9683 0%, #6B5A72 20%, #494A6B 58%, #2C3B52 100%);
  padding-top: clamp(150px, 22vw, 260px); padding-bottom: clamp(100px, 13vw, 160px);
}
.jz-night { background: linear-gradient(#2C3B52 0%, #17332F 46%, #0F2724 100%); padding-top: clamp(90px, 11vw, 140px); padding-bottom: clamp(90px, 12vw, 150px); }
.mast-sky { background: transparent; }
.hero-sky-wide { max-width: none; padding: 0; }
/* chữ trên nửa đêm của hành trình (bg trong suốt, khác .night có nền riêng) */
.deep, .deep h1, .deep h2, .deep h3 { color: var(--noir-ink); }
.deep p, .deep .lead { color: rgba(241,235,220,.78); font-weight: 450; letter-spacing: .005em; }
.deep .eyebrow { color: var(--gilt-2); }
.deep h1 em, .deep h2 em { color: var(--champ); }
.deep :focus-visible { outline-color: var(--gilt-2); }
.deep .link-arrow { color: var(--noir-ink); }
.deep .link-arrow:hover { color: var(--gilt-2); }
.jz-dusk .stars { opacity: .55; }
/* tương phản trên các dải sáng của hành trình (đo AA 23/07):
   em gilt chìm trên nền vàng/cam → dawn dùng gilt-deep (4.2:1), sunset dùng mực (9.4:1);
   eyebrow/folio gilt chìm trên gold/sunset → về ink-70 */
.jz-dawn h1 em { color: var(--gilt-deep); }
.jz-sunset h2 em { color: var(--ink); }
.jz-gold .eyebrow, .jz-sunset .eyebrow,
.jz-gold .folio .no, .jz-sunset .folio .no { color: var(--ink-70); }
/* game hoà vào trời đêm — bỏ hộp */
.jz-night .wg-sky { border: 0; border-radius: 0; }
/* footer = thung lũng đêm */
.footer-night { background: linear-gradient(#0F2724, #0A1B19); border-top: 0; padding-top: 0; }
.footer-night .valley { margin: 0 0 38px; }
.footer-night .valley svg { display: block; width: 100%; height: auto; }
.footer-night .brand-name, .footer-night .footer-col-title { color: var(--noir-ink); }
.footer-night .footer-tagline, .footer-night .footer-col-list a, .footer-night .footer-legal { color: rgba(241,235,220,.66); }
.footer-night .footer-col-list a:hover { color: var(--gilt-2); }
.footer-night .fleuron .ln { background: rgba(242,220,155,.25); }
.ff { animation: ff-blink 3.8s ease-in-out infinite; }
.ff.f2 { animation-duration: 5.2s; animation-delay: -1.6s; }
.ff.f3 { animation-duration: 4.4s; animation-delay: -2.6s; }
@keyframes ff-blink { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ff { animation: none; opacity: .6; } }

/* ---------- Nightly-wish game (trang chủ, dải đêm) ----------
   Một game tí hon chơi ngay trên trang: bắt sao ước đang rơi,
   đủ 12 sao thì chòm sao nối thành đúng dấu sao-đôi AXIMOO.
   Chỉ hiện khi có JS; không JS thì <noscript> giữ dấu tĩnh. ---------- */
.wishgame { display: none; }
html.js .wishgame { display: block; max-width: 900px; margin: 34px auto 0; }
.wg-sky {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(242,220,155,.22);
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
/* sao đang rơi — vị trí do JS lái, KHÔNG transition transform; màu ăn token qua class */
.wg-fs { will-change: transform; fill: var(--champ); filter: drop-shadow(0 0 4px rgba(242,220,155,.45)); }
.wg-fs.wg-alt { fill: var(--gilt-2); }
/* "sao ước lớn" hiếm — rực rỡ hơn, đáng săn */
.wg-fs.wg-big { filter: drop-shadow(0 0 8px rgba(242,220,155,.85)); }
.wg-fs.wg-out { transition: opacity .55s var(--ease); opacity: 0 !important; }
/* đốt chòm sao: điểm mờ chờ sẵn → đốm sáng khi được thắp; đốt KẾ TIẾP nhấp nháy mách đường */
.wg-gd { fill: var(--champ); opacity: .22; }
.wg-gd.wg-next { animation: wg-next-pulse 2.2s ease-in-out infinite; }
@keyframes wg-next-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
.wg-dot {
  fill: var(--champ); transform-box: fill-box; transform-origin: center;
  animation: wg-dot-in .45s var(--ease) both, wg-dot-tw 4.5s ease-in-out 1.2s infinite;
  filter: drop-shadow(0 0 4px rgba(242,220,155,.8));
}
@keyframes wg-dot-in {
  0% { opacity: 0; transform: scale(.2); }
  60% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wg-dot-tw { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* nét nối TỰ VẼ từ đốt trước sang đốt mới như nét bút (dashoffset chạy về 0) */
.wg-ln {
  stroke: var(--champ); stroke-width: 1.2; opacity: .5;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200);
  animation: wg-ln-draw .55s ease-out forwards;
  filter: drop-shadow(0 0 3px rgba(242,220,155,.55));
}
@keyframes wg-ln-draw { to { stroke-dashoffset: 0; } }
/* màn kết: các nét loé sáng một nhịp rồi lắng lại (giữ dashoffset 0 đã vẽ xong) */
.wishgame.wg-done .wg-ln { opacity: .5; stroke-dashoffset: 0; animation: wg-ln-shine 1.1s ease-in-out .15s; }
@keyframes wg-ln-shine { 0%, 100% { opacity: .5; } 40% { opacity: .95; } }
/* sao bay về chòm (có đuôi) + cú nổ sparkle khi bắt trúng + gợn khi bắt hụt */
.wg-fly { fill: var(--champ); filter: drop-shadow(0 0 4px rgba(242,220,155,.7)); }
.wg-flytrail { fill: var(--champ); }
.wg-pop { fill: var(--champ); transform-box: fill-box; transform-origin: center; animation: wg-pop .5s ease-out forwards; }
@keyframes wg-pop { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.wg-spark { fill: var(--champ); animation: wg-spark .62s cubic-bezier(.16,.84,.44,1) forwards; }
@keyframes wg-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}
.wg-ring { fill: none; stroke: var(--champ); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: wg-ring2 .55s ease-out forwards; }
@keyframes wg-ring2 { 0% { opacity: .7; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }
.wg-rip { fill: none; stroke: var(--champ); stroke-width: 1; animation: wg-rip .5s ease-out forwards; }
@keyframes wg-rip { 0% { opacity: .4; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
/* màn kết: loé sáng → dấu sao-đôi mặt-cắt VÀNG THẬT hiện dần trong chòm + mưa sao */
.wg-poly { fill: var(--champ); opacity: 0; transition: opacity 1.4s var(--ease); }
.wishgame.wg-done .wg-poly { opacity: .08; }
.wishgame.wg-done .wg-gd { opacity: .38; }
.wg-mark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.wishgame.wg-done .wg-mark {
  animation: wg-mark-in 1.6s var(--ease) .4s forwards, wg-mark-breathe 7s ease-in-out 2.4s infinite;
}
@keyframes wg-mark-in { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: .92; transform: scale(1); } }
@keyframes wg-mark-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
.wg-flash { transform-box: fill-box; transform-origin: center; animation: wg-flash2 1.2s ease-out forwards; }
@keyframes wg-flash2 { 0% { opacity: 0; transform: scale(.3); } 22% { opacity: .6; } 100% { opacity: 0; transform: scale(1.7); } }
.wg-rain { fill: var(--gilt-2); animation: wg-rain-fall 2.6s ease-in forwards; }
@keyframes wg-rain-fall {
  0% { opacity: 0; transform: translateY(-14px); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translateY(48px); }
}
/* .night/.deep .wg-line: cần 0-2-0 để thắng .night p/.deep p (0-1-1) — không thì color/tracking chết */
.night .wg-line, .deep .wg-line { margin: 14px 0 0; font-size: .9375rem; font-weight: 450; letter-spacing: .12em; color: rgba(241,235,220,.62); }
/* nút tắt/mở tiếng — kín đáo dưới dòng đếm */
.wg-sound {
  display: block; margin: 6px auto 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .75rem; letter-spacing: .08em; color: rgba(241,235,220,.45);
}
.wg-sound:hover { color: rgba(241,235,220,.85); }
.wg-again { margin-top: 12px; }
/* nút bắt-sao cho bàn phím/screen reader: ẩn kiểu skip-link, hiện khi focus phím */
.wg-catch:not(:focus-visible) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wg-catch:focus-visible { margin-top: 12px; }
/* máy nhỏ: tắt glow filter trong game cho nhẹ GPU (dưới đúng breakpoint portrait của game) */
@media (max-width: 560px) {
  .wg-dot, .wg-ln, .wg-fs, .wg-fly { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-dot, .wg-ln { animation: none; opacity: 1; }
  .wg-ln, .wishgame.wg-done .wg-ln { opacity: .5; animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .wg-gd.wg-next { animation: none; opacity: .5; }
  .wg-pop, .wg-rip, .wg-spark, .wg-ring, .wg-flash, .wg-rain { animation: none; opacity: 0; }
  .wg-fs.wg-caught { transition: none; opacity: .12; }
  .wg-poly, .wg-fs.wg-out { transition: none; }
  .wg-fs, .wg-ln, .wg-dot, .wg-fly { filter: none; }
  .wishgame.wg-done .wg-mark { animation: none; opacity: .92; transform: none; }
}

/* ---------- Màn hình PC lớn: chữ to lên tương xứng, tranh trời không phóng quá cỡ ----------
   (Đan xem trên màn ~2000px: nhãn 10–11px thành li ti cạnh sao khổng lồ) */
@media (min-width: 1600px) {
  html { font-size: 18.5px; }
  :root { --maxw: 1340px; --maxw-narrow: 860px; }
  .hero-sky-wide { max-width: 1680px; margin-inline: auto; }
  .mast-side { font-size: .6875rem; }
  .navline a { font-size: .75rem; }
}
@media (min-width: 2100px) {
  html { font-size: 20.5px; }
  :root { --maxw: 1500px; }
  .hero-sky-wide { max-width: 1900px; }
}

/* ---------- Reveal — chỉ chạy khi có JS (bot tắt JS vẫn đọc đủ) ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-delay="1"] { transition-delay: .08s; }
html.js [data-delay="2"] { transition-delay: .16s; }
html.js [data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}