/* Tử Vi · Bát Tự — the first face, remade 1 Nov 2026 as a lacquer night (tuvi-theme.css has the paint).
   The idea: Tử Vi is the sky round the pole star, and the lá số is that sky cut into twelve palaces. So the page opens
   on the real sky turning (one night of star trails) with the chart of this very hour set over it like a lacquer box,
   and its centre holds the Suzhou star map (1247) turning slowly round the pole. Every later section carries the same
   twelve-palace ring or an old star map; gold leaf is the one accent, son red only on seals.
   Motion: the ring's palaces settle in clockwise from Tỵ, the words rise once, sections rise as they enter, the centre
   map turns; all of it stops for prefers-reduced-motion. Nothing waits hidden without a fallback (landing.js). */

:root {
  --t-display: clamp(60px, 7.4vw, 116px);
  --t-head: clamp(38px, 4.4vw, 66px);
  --t-list: clamp(26px, 2.6vw, 38px);
  --t-lead: clamp(17px, 1.05rem + 0.3vw, 20px);
  --t-text: 16px;
  --gap-cell: 6px;
  --page-x: max(var(--gutter), env(safe-area-inset-left, 0px));
  --wrap: 1320px;
  --inset-x: max(var(--page-x), calc((100vw - var(--wrap)) / 2));
  --section-gap: clamp(96px, 11vw, 176px);
  --r-panel: 22px;
}

#landing { background: transparent; color: var(--ink); font-family: var(--sans); font-size: var(--t-text); line-height: 1.6; overflow-x: clip; }
#landing h1, #landing h2, #landing h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; line-height: 1.02; }
#landing p { max-width: 62ch; }
#landing a:not(.btn) { color: inherit; }
.gold { color: var(--gold); }

/* ── Actions ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--gold); color: var(--on-clay); font-family: var(--sans); font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 0 0 0 transparent; transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-quick); }
.btn::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover { box-shadow: var(--glow); background: color-mix(in oklab, var(--gold) 92%, white); }
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn.small { min-height: 44px; padding: 0 18px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.btn.small::after { transform: rotate(-90deg); }
.btn.small:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); background: transparent; }
.link-quiet { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--gold) 60%, transparent); text-underline-offset: 6px; text-decoration-thickness: 1px; transition: color var(--dur-quick), text-decoration-color var(--dur-quick); }
.link-quiet:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* ── The wordmark: the lá số glyph (twelve palaces round the centre), then the name ── */
.mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 23px; letter-spacing: 0; text-decoration: none; color: var(--ink); white-space: nowrap; }
.mark::before { content: ''; flex: none; width: 24px; height: 24px; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.4' y='3.4' width='17.2' height='17.2' rx='1.8'/%3E%3Crect x='7.7' y='7.7' width='8.6' height='8.6'/%3E%3Cpath d='M7.7 3.4v4.3M12 3.4v4.3M16.3 3.4v4.3M7.7 16.3v4.3M12 16.3v4.3M16.3 16.3v4.3M3.4 7.7h4.3M3.4 12h4.3M3.4 16.3h4.3M16.3 7.7h4.3M16.3 12h4.3M16.3 16.3h4.3'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.4' y='3.4' width='17.2' height='17.2' rx='1.8'/%3E%3Crect x='7.7' y='7.7' width='8.6' height='8.6'/%3E%3Cpath d='M7.7 3.4v4.3M12 3.4v4.3M16.3 3.4v4.3M7.7 16.3v4.3M12 16.3v4.3M16.3 16.3v4.3M3.4 7.7h4.3M3.4 12h4.3M3.4 16.3h4.3M16.3 7.7h4.3M16.3 12h4.3M16.3 16.3h4.3'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── The bar over the sky ── */
.lbar { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--inset-x); }
.lbar nav { display: flex; gap: 28px; }
.lbar nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-soft); padding: 10px 0; position: relative; transition: color var(--dur-quick); }
.lbar nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.lbar nav a:hover { color: var(--ink); }
.lbar nav a:hover::after { transform: scaleX(1); }

/* ── The ring: twelve palaces round an empty centre (the hero's chart, the reading ring) ── */
.ring { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: var(--gap-cell); aspect-ratio: 1; }
.ring .cell { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; border-radius: 10px; }
.ring .hole { grid-area: 2 / 2 / 4 / 4; }
.ring [data-b="5"] { grid-area: 1 / 1; } .ring [data-b="6"] { grid-area: 1 / 2; } .ring [data-b="7"] { grid-area: 1 / 3; } .ring [data-b="8"] { grid-area: 1 / 4; }
.ring [data-b="4"] { grid-area: 2 / 1; } .ring [data-b="9"] { grid-area: 2 / 4; }
.ring [data-b="3"] { grid-area: 3 / 1; } .ring [data-b="10"] { grid-area: 3 / 4; }
.ring [data-b="2"] { grid-area: 4 / 1; } .ring [data-b="1"] { grid-area: 4 / 2; } .ring [data-b="0"] { grid-area: 4 / 3; } .ring [data-b="11"] { grid-area: 4 / 4; }

/* ── Hero: the sky, the words, the chart of this hour ── */
.hero { position: relative; isolation: isolate; min-height: max(100svh, 700px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 88px); padding: 116px var(--inset-x) 72px; }
.hero-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; filter: saturate(0.75) contrast(1.05); }
.hero-sky::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--night) 0%, color-mix(in oklab, var(--night) 86%, transparent) 30%, color-mix(in oklab, var(--night) 25%, transparent) 70%, color-mix(in oklab, var(--night) 45%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklab, var(--night) 70%, transparent) 0%, transparent 22%, transparent 70%, var(--night) 100%); }
.hero-text { display: grid; gap: 26px; justify-items: start; max-width: 600px; }
.hero h1 { font-size: var(--t-display); font-weight: 600; line-height: 0.92; letter-spacing: -0.02em; margin: 0; }
.hero .lead { font-size: var(--t-lead); line-height: 1.6; margin: 0; max-width: 34ch; color: var(--ink-soft); }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero-note { margin: 0; color: var(--ink-faint); font-size: 15px; }

.hero-ring { position: relative; width: 100%; max-width: 640px; justify-self: end; }
.hero-ring .cell { padding: 12px 13px; background: color-mix(in oklab, var(--paper-sunk) 92%, transparent); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
.hero-ring .cell b { font-family: var(--serif); font-weight: 700; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.1; }
.hero-ring .cell span { font-size: 13px; line-height: 1.35; color: var(--gold); }
.hero-ring .cell .cell-gz { margin-top: auto; color: var(--ink-faint); font-size: 12.5px; }
.hero-ring .cell.soul { background: var(--gold); color: var(--on-clay); box-shadow: var(--glow); }
.hero-ring .cell.soul span, .hero-ring .cell.soul .cell-gz { color: color-mix(in oklab, var(--on-clay) 78%, var(--gold)); }
/* The centre: the Suzhou star map, cut round, turning about the pole like the sky; the hour over it. */
.hero-ring .hole { position: relative; overflow: hidden; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; padding: 9%; background: color-mix(in oklab, var(--night) 55%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.hero-ring .hole::before { content: ''; position: absolute; inset: 4%; z-index: -1; border-radius: 50%; background: url('/img/suzhou-pole-640.webp') center / cover; opacity: 0.4; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent); mask: radial-gradient(closest-side, #000 72%, transparent); }
.hero-ring .hole { isolation: isolate; }
.hole-hour { font-variant-numeric: lining-nums; font-feature-settings: "lnum"; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; margin: 0; color: var(--gold); }
.hole-date { font-size: 16px; margin: 0; color: var(--ink); }
.hole-say { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 30ch; }

/* ── Đọc từng cung: the reading ring, an index with preview ── */
.read { margin: var(--section-gap) auto 0; max-width: calc(var(--wrap) + 2 * var(--page-x)); padding: 0 var(--page-x); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.read-list { min-width: 0; }
.read-head { font-size: var(--t-head); margin: 0 0 28px; }
.read-names { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.read-names button { appearance: none; background: none; border: 0; padding: 6px 0; min-height: 48px; display: inline-flex; align-items: center; gap: 16px; font-family: var(--serif); font-size: var(--t-list); font-weight: 600; line-height: 1.1; color: var(--ink-faint); cursor: pointer; text-align: left; transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.read-names button::before { content: ''; width: 22px; height: 1.5px; background: var(--gold); transform: scaleX(0.35); transform-origin: left; opacity: 0.4; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.read-names button:hover { color: var(--ink-soft); }
.read-names button[aria-pressed="true"] { color: var(--ink); }
.read-names button[aria-pressed="true"]::before { transform: scaleX(1); opacity: 1; }
.read-names button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
/* The ring and its card share one grid cell: the card's margins (a quarter of the ring's width, plus a little) put it
   in the empty centre whatever the line under the ring holds; contain: size keeps a long card from stretching it. */
.read-stage { justify-self: center; width: min(600px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); }
.read-ring { grid-area: 1 / 1; }
.read-ring .cell { padding: 10px 11px; background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-faint); font-size: 14px; font-weight: 500; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.read-ring .cell.trine { background: var(--paper-sunk); color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 62%, transparent); }
.read-ring .cell.on { background: var(--gold); color: var(--on-clay); font-weight: 600; }
.palace-card { grid-area: 1 / 1; margin: calc(25% + 4px); contain: size; min-width: 0; overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; border-radius: 14px; background: var(--paper-sunk); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.palace-card.swap { opacity: 0; transform: translateY(8px); }
.pc-name { font-family: var(--serif); font-weight: 600; font-size: var(--t-list); line-height: 1.05; margin: 0; color: var(--gold); }
.pc-gz { margin: 0; color: var(--ink-faint); font-size: 14px; }
.pc-stars { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
.pc-minor { margin: 0; color: var(--ink-soft); font-size: 14px; }
.read-fact { grid-area: 2 / 1; margin: 20px 0 0; color: var(--ink-soft); font-size: 15px; }

/* ── Cách tính: drag through the four stages; the card sits on the Suzhou stone map ── */
.steps { margin: var(--section-gap) auto 0; max-width: calc(var(--wrap) + 2 * var(--page-x)); padding: 0 var(--page-x); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.steps-say { grid-area: 1 / 1; background: var(--paper-sunk); padding: 56px 56px 24px; border-radius: var(--r-panel) 0 0 0; box-shadow: inset 1px 1px 0 var(--rule); }
.steps-clause { font-size: var(--t-head); margin: 0; max-width: 13ch; transition: opacity 200ms var(--ease-out); }
.steps-show { grid-area: 1 / 2 / 3 / 3; min-height: 520px; display: grid; place-items: center; padding: 56px 32px; border-radius: 0 var(--r-panel) var(--r-panel) 0; overflow: hidden; position: relative; isolation: isolate; background: var(--night); box-shadow: inset 0 0 0 1px var(--rule); }
.steps-show::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(color-mix(in oklab, var(--night) 62%, transparent), color-mix(in oklab, var(--night) 62%, transparent)), url('/img/suzhou-full-1280.webp') 50% 30% / cover; }
.frag { width: min(440px, 100%); padding: 26px 28px; display: grid; gap: 2px; border-radius: 16px; background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 30px 60px -30px #000; }
.frag-k { margin: 12px 0 0; color: var(--ink-faint); font-size: 14px; }
.frag-k:first-child { margin-top: 0; }
.frag-v { margin: 0; font-size: 19px; color: var(--ink); }
.frag-v.strong { font-weight: 600; color: var(--gold); }
html.js .frag { display: none; }
html.js .frag.on { display: grid; animation: frag-in 360ms var(--ease-out); }
.steps-track { grid-area: 2 / 1; background: var(--paper-sunk); padding: 24px 56px 48px; border-radius: 0 0 0 var(--r-panel); box-shadow: inset 1px -1px 0 var(--rule); display: grid; gap: 16px; }
.steps-names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); font-size: 15px; }
.steps-names li { color: var(--ink-faint); transition: color var(--dur-base); }
.steps-names li.on { color: var(--gold); font-weight: 600; }
.rail { position: relative; height: 32px; }
.rail::before { content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 2px; border-radius: 2px; background: var(--rule-strong); }
.rail-fill { position: absolute; left: 0; top: 15px; height: 2px; width: var(--fill, 0%); background: var(--gold); transition: width 260ms var(--ease-out); }
#steps-range { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 32px; background: transparent; margin: 0; cursor: pointer; }
#steps-range::-webkit-slider-runnable-track { height: 32px; background: transparent; }
#steps-range::-moz-range-track { height: 32px; background: transparent; }
#steps-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: var(--gold); border: 0; box-shadow: 0 0 0 6px color-mix(in oklab, var(--gold) 22%, transparent); transition: box-shadow var(--dur-quick); }
#steps-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); border: 0; box-shadow: 0 0 0 6px color-mix(in oklab, var(--gold) 22%, transparent); }
#steps-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px color-mix(in oklab, var(--gold) 26%, transparent); }
#steps-range:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 16px; }

/* ── Tử Vi là một vùng trời: the old maps of that sky ── */
.sky { margin: var(--section-gap) auto 0; max-width: calc(var(--wrap) + 2 * var(--page-x)); padding: 0 var(--page-x); display: grid; gap: 40px; }
.sky-say { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.sky-say h2 { font-size: var(--t-head); margin: 0; }
.sky-say p { margin: 0; font-size: var(--t-lead); line-height: 1.6; color: var(--ink-soft); }
.sky-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sky-row li { border-radius: 16px; overflow: hidden; }
.sky-row figure { margin: 0; display: grid; gap: 12px; }
.sky-row figure > img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); transition: transform 900ms var(--ease-out), filter 600ms; filter: saturate(0.85); }
.sky-row li:hover figure > img { transform: scale(1.035); filter: saturate(1); }
.sky-row figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-soft); padding-right: 8px; }

/* ── Bát Tự: a lacquer panel; the star chart seen through the ring ── */
.bazi-panel { margin: var(--section-gap) auto 0; max-width: var(--wrap); width: calc(100% - 2 * var(--page-x)); border-radius: var(--r-panel); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; padding: 64px 64px 0; background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.bp-left { display: flex; flex-direction: column; gap: 40px; }
.bazi-panel h2 { font-size: var(--t-head); margin: 0; max-width: 12ch; }
.bp-shape { width: min(30vw, 440px); aspect-ratio: 1; margin-top: auto; margin-bottom: calc(min(30vw, 440px) * -0.18); }
.bp-shape img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='0' width='96' height='96' rx='8'/%3E%3Crect x='101' y='0' width='96' height='96' rx='8'/%3E%3Crect x='202' y='0' width='96' height='96' rx='8'/%3E%3Crect x='303' y='0' width='96' height='96' rx='8'/%3E%3Crect x='0' y='101' width='96' height='96' rx='8'/%3E%3Crect x='303' y='101' width='96' height='96' rx='8'/%3E%3Crect x='0' y='202' width='96' height='96' rx='8'/%3E%3Crect x='303' y='202' width='96' height='96' rx='8'/%3E%3Crect x='0' y='303' width='96' height='96' rx='8'/%3E%3Crect x='101' y='303' width='96' height='96' rx='8'/%3E%3Crect x='202' y='303' width='96' height='96' rx='8'/%3E%3Crect x='303' y='303' width='96' height='96' rx='8'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='0' width='96' height='96' rx='8'/%3E%3Crect x='101' y='0' width='96' height='96' rx='8'/%3E%3Crect x='202' y='0' width='96' height='96' rx='8'/%3E%3Crect x='303' y='0' width='96' height='96' rx='8'/%3E%3Crect x='0' y='101' width='96' height='96' rx='8'/%3E%3Crect x='303' y='101' width='96' height='96' rx='8'/%3E%3Crect x='0' y='202' width='96' height='96' rx='8'/%3E%3Crect x='303' y='202' width='96' height='96' rx='8'/%3E%3Crect x='0' y='303' width='96' height='96' rx='8'/%3E%3Crect x='101' y='303' width='96' height='96' rx='8'/%3E%3Crect x='202' y='303' width='96' height='96' rx='8'/%3E%3Crect x='303' y='303' width='96' height='96' rx='8'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bp-right { padding: 8px 0 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.bp-block { max-width: 36ch; display: grid; gap: 10px; padding-left: 20px; box-shadow: inset 2px 0 0 color-mix(in oklab, var(--gold) 50%, transparent); }
.bp-block h3 { font-size: 26px; margin: 0; color: var(--gold); }
.bp-block p { margin: 0; color: var(--ink-soft); }

/* ── Hỏi trước khi lập: a quiet list; the category in gold over each question ── */
.faq { margin: var(--section-gap) auto 0; max-width: calc(var(--wrap) + 2 * var(--page-x)); padding: 0 var(--page-x); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq h2 { font-size: var(--t-head); margin: 0; position: sticky; top: 32px; }
.faq-stack { display: grid; gap: 8px; }
.faq-card { background: var(--paper-sunk); border-radius: 14px; padding: 0 18px; }
.faq-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; column-gap: 20px; row-gap: 4px; align-items: center; padding: 24px 0; min-height: 64px; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-tab { grid-column: 1; font-size: 14px; font-weight: 600; color: var(--gold); }
.faq-q { grid-column: 1; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--ink); transition: color var(--dur-quick); }
.faq-card summary::after { content: ''; grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-strong); background: linear-gradient(var(--gold), var(--gold)) center / 11px 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1.5px 11px no-repeat; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-quick); }
.faq-card[open] summary::after { transform: rotate(135deg); box-shadow: inset 0 0 0 1px var(--gold); }
.faq-card summary:hover .faq-q { color: var(--gold); }
.faq-card > p { margin: 0; padding: 0 48px 26px 0; max-width: 60ch; color: var(--ink-soft); }
.faq-card[open] > p { animation: rise-in 320ms var(--ease-out); }

/* ── Sign-in (ui-tokens.css draws the card; this lays it on the night) ── */
#landing .auth { margin: var(--section-gap) auto 0; max-width: var(--wrap); width: calc(100% - 2 * var(--page-x)); min-height: auto; border-radius: var(--r-panel); overflow: hidden; background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--rule); }
#landing .auth-side { position: relative; isolation: isolate; background: var(--night); color: var(--ink); padding: 56px; justify-content: flex-end; min-height: 360px; }
#landing .auth-side::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--night) 10%, color-mix(in oklab, var(--night) 40%, transparent)), url('/img/dunhuang-pole-1280.webp') center / cover; opacity: 0.9; }
#landing .auth-side p { color: var(--ink-soft); }
.auth-big { font-size: var(--t-head); line-height: 1.02; margin: 0; color: var(--gold); }
#landing .auth-main { background: var(--paper-sunk); }
#landing .auth-provider { background: var(--paper); border-color: var(--rule-strong); min-height: 52px; transition: border-color var(--dur-quick), background var(--dur-quick); }
#landing .auth-provider:hover { border-color: var(--gold); background: var(--paper-deep); }
#landing .auth-email input { background: var(--paper); border-color: var(--rule-strong); min-height: 52px; }
#landing .auth-email input:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
#landing .auth-email button { background: var(--gold); color: var(--on-clay); min-height: 52px; border-radius: 999px; }

/* ── The close: the twelve canh giờ, the current one tallest and gold ── */
.close { margin-top: var(--section-gap); padding: 64px var(--inset-x) 36px; display: grid; gap: 56px; background: var(--paper-sunk); }
.close-mark { height: 30svh; min-height: 200px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-cell); align-items: end; }
.close-mark span { --h: 70%; height: var(--h); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; border-radius: 10px 10px 4px 4px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-faint); font-family: var(--serif); font-size: 20px; font-weight: 600; transition: height var(--dur-slow) var(--ease-settle), background var(--dur-base); }
.close-mark span.now { background: var(--gold); color: var(--on-clay); }
.close-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.close-cols nav { grid-column: 1 / 4; display: grid; gap: 2px; align-content: start; }
.close-cols nav a { padding: 8px 0; text-decoration: none; font-weight: 500; color: var(--ink); transition: color var(--dur-quick); }
.close-cols nav a:hover { color: var(--gold); }
.close-cols > p { grid-column: 4 / 8; margin: 0; color: var(--ink-soft); }
.close-cols > p.credits { grid-column: 8 / 13; color: var(--ink-faint); font-size: 13.5px; }
.close-cols > p.credits a { text-decoration-color: var(--rule-strong); }
.close-last { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink-faint); font-size: 14px; }
.close-last p { margin: 0; }

/* ── Motion: one entrance for the first screen, a rise for each section's parts, the centre map turning ── */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes frag-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes cell-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes word-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes breathe { 0%, 100% { box-shadow: var(--glow); } 50% { box-shadow: 0 0 0 1px var(--gold), 0 14px 54px -10px color-mix(in oklab, var(--gold) 60%, transparent); } }
@media (prefers-reduced-motion: no-preference) {
  html.motion [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-settle); transition-delay: calc(var(--i, 0) * 70ms); }
  html.motion [data-rise].in { opacity: 1; transform: none; }
  html.motion .hero-ring .cell { animation: cell-in 800ms var(--ease-settle) both; animation-delay: calc(200ms + var(--i, 0) * 55ms); }
  html.motion .hero-ring .hole { animation: fade 1200ms var(--ease-out) both 500ms; }
  html.motion .hero-text > * { animation: word-in 900ms var(--ease-settle) both; }
  html.motion .hero-text > :nth-child(2) { animation-delay: 90ms; }
  html.motion .hero-text > :nth-child(3) { animation-delay: 180ms; }
  html.motion .hero-text > :nth-child(4) { animation-delay: 260ms; }
  html.motion .hero-text > :nth-child(5) { animation-delay: 340ms; }
  html.motion .hero-video { animation: fade 1800ms var(--ease-out) both; }
  .hero-ring .hole::before { animation: turn 240s linear infinite; }
  .hero-ring .cell.soul { animation: breathe 5s ease-in-out infinite; }
  html.motion .hero-ring .cell.soul { animation: cell-in 800ms var(--ease-settle) both calc(200ms + var(--i, 0) * 55ms), breathe 5s ease-in-out 2s infinite; }
  .sky-row img { animation: drift 18s ease-in-out infinite alternate; }
  .sky-row li:nth-child(2) img { animation-delay: -6s; } .sky-row li:nth-child(3) img { animation-delay: -12s; }
}

/* ── Phones, tablets, and tall tablets (iPad Pro upright): words first, then the whole chart; one column ── */
@media (max-width: 960px), (max-aspect-ratio: 4/5) and (max-width: 1280px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; align-items: start; gap: 40px; padding: clamp(96px, 13svh, 140px) var(--page-x) 24px; }
  .hero-text { max-width: 640px; }
  .hero h1 { font-size: min(15vw, 104px); }
  .hero-ring { justify-self: center; max-width: 640px; }
  .hero-sky::after { background: linear-gradient(to bottom, color-mix(in oklab, var(--night) 55%, transparent) 0%, color-mix(in oklab, var(--night) 75%, transparent) 45%, var(--night) 100%); }
  .hero-video { height: 75%; }
}
@media (max-width: 960px) {
  .lbar nav { display: none; }
  .read { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .read-stage { width: min(560px, 100%); }
  .read-head { font-size: 34px; margin-bottom: 12px; }
  .read-names { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .read-names button { font-size: 22px; white-space: nowrap; min-height: 44px; }
  .read-names button::before { display: none; }
  .read-names button[aria-pressed="true"] { color: var(--gold); }
  .read-ring .cell { font-size: 12.5px; padding: 7px; }
  .palace-card { padding: 8px; gap: 4px; }
  .pc-name { font-size: 24px; }
  .pc-stars { font-size: 15px; }
  .pc-minor { font-size: 13px; }

  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .steps-show { grid-area: 1 / 1; min-height: 340px; padding: 32px 20px; border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .steps-say { grid-area: 2 / 1; padding: 28px 24px 8px; border-radius: 0; box-shadow: inset 1px 0 0 var(--rule), inset -1px 0 0 var(--rule); }
  .steps-track { grid-area: 3 / 1; padding: 16px 24px 28px; border-radius: 0 0 var(--r-panel) var(--r-panel); box-shadow: inset 1px -1px 0 var(--rule), inset -1px 0 0 var(--rule); }
  .steps-clause { font-size: 34px; }
  .steps-names { font-size: 14px; }

  .sky-say { grid-template-columns: 1fr; gap: 16px; }
  .sky-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }

  .bazi-panel { grid-template-columns: 1fr; gap: 24px; padding: 36px 24px 0; }
  .bazi-panel h2 { font-size: 40px; }
  .bp-left { display: contents; }
  .bp-shape { order: 3; width: 86%; margin: 8px auto -16%; }
  .bp-right { gap: 28px; padding-bottom: 24px; }

  .faq { grid-template-columns: 1fr; gap: 24px; }
  .faq h2 { position: static; font-size: 40px; }
  .faq-q { font-size: 18px; }
  .faq-card > p { padding-right: 0; }

  #landing .auth { grid-template-columns: 1fr; }
  #landing .auth-side { padding: 32px 24px; min-height: 240px; }
  #landing .auth-main { padding: 28px 24px 36px; }

  .close-mark { height: 22svh; min-height: 150px; gap: 4px; }
  .close-mark span { font-size: 13px; padding-bottom: 8px; writing-mode: vertical-rl; border-radius: 6px 6px 2px 2px; }
  .close-cols { grid-template-columns: 1fr 1fr; }
  .close-cols nav { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .close-cols > p, .close-cols > p.credits { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .hero-acts { width: 100%; }
  .hero-acts .btn { width: 100%; }
  .hero-ring .cell { padding: 7px 8px; border-radius: 8px; }
  .hero-ring .cell b { font-family: var(--sans); font-weight: 600; font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
  .hero-ring .cell span { display: none; }
  .hero-ring .hole { gap: 4px; padding: 7%; border-radius: 10px; }
  .hole-hour { font-size: 22px; }
  .hole-date { font-size: 13px; }
  .hole-say { display: none; } /* the note above the ring says the same */
  .ring { --gap-cell: 4px; }
  .read-ring .cell { border-radius: 7px; }
}
@media (max-width: 340px) {
  .hole-date { display: none; }
}

/* Hôm nay: seven day cards, one in view, swiped sideways (landing.js). The ring fills to the day's score. */
.today { --good: color-mix(in oklab, var(--gold) 55%, #6fbf8f); --bad: oklch(0.7 0.15 12); display: grid; gap: 10px; max-width: 460px; margin-top: 4px; }
.today-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tw-day { --tone: var(--gold); display: grid; justify-items: center; gap: 1px; min-height: 58px; padding: 7px 0 5px; border: 0; border-radius: 12px; background: var(--paper-sunk); color: var(--ink-soft); font: inherit; cursor: pointer; transition: background .15s, transform .12s; }
.tw-day.good { --tone: var(--good); }
.tw-day.bad { --tone: var(--bad); }
.tw-day span { font-size: 12px; }
.tw-day b { font-size: 16px; font-weight: 600; color: var(--ink); }
.tw-day i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--tone); }
.tw-day[aria-selected="true"] { background: var(--gold); color: var(--on-clay); }
.tw-day[aria-selected="true"] b, .tw-day[aria-selected="true"] i { color: var(--on-clay); }
.tw-day:active { transform: scale(.97); }
.tw-day:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.today-track { display: grid; }
#landing .day-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--paper-sunk);  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
#landing .day-card { --tone: var(--gold); }
#landing .day-card.good { --tone: var(--good); }
#landing .day-card.bad { --tone: var(--bad); }
.dc-ring { --p: 0; position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--tone) calc(var(--p) * 1%), color-mix(in oklab, var(--ink) 12%, transparent) 0); }
.dc-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--night, #0c1020); }
.dc-ring b, .dc-ring small { position: relative; display: block; }
.dc-ring b { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--tone); font-variant-numeric: lining-nums tabular-nums; }
.dc-ring small { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-soft); }
.dc-main { display: grid; gap: 4px; min-width: 0; }
.dc-main p { margin: 0; }
.dc-when { color: var(--ink); font-size: 15px; }
.dc-when b { color: var(--gold); font-weight: 600; }
.dc-when span { color: var(--ink-soft); }
.dc-verdict { color: var(--tone); font-weight: 600; }
.dc-cc { font-size: 13.5px; }
.dc-label { margin-top: 4px !important; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.dc-hours { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dc-hours li { padding: 3px 10px; border-radius: 999px; font-size: 13px; color: var(--ink); background: var(--paper-deep); }
.dc-hours li span { color: var(--ink-soft); }
.dc-do b { color: var(--good); font-weight: 600; margin-right: 4px; }
.dc-do.no b { color: var(--bad); }
@media (max-width: 600px) { #landing .day-card { grid-template-columns: 1fr; gap: 10px; } .dc-ring { width: 56px; height: 56px; } }
/* The landing bar: logo and Vào Chùa together on the left, page links on the right */
.lbar { justify-content: flex-start; }
.lbar nav { margin-left: auto; }

/* Gmail first in the eye (owner, 2 Nov 2026: "Tiếp tục với Gmail nổi trội hẳn để khách hàng dùng"): the one light button,
   Google's G, larger; Terranimus Mail (staff) and the email form stay quiet. The order stays the one-sign-in order. */
#landing .auth-provider.auth-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; background: #fff; color: #1f1f1f; border-color: #fff; font-size: 17px; font-weight: 700; }
#landing .auth-provider.auth-google:hover { background: #f1f3f4; border-color: #f1f3f4; }
#landing .auth-provider.auth-google:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.g-logo { width: 22px; height: 22px; flex: none; }
#landing .auth-email button { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
#landing .auth-email button:hover { border-color: var(--gold); color: var(--gold); }
.auth-inapp { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: color-mix(in oklab, var(--gold) 14%, var(--paper-sunk)); font-size: 15px; line-height: 1.5; }
.auth-inapp-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }