/* SOLUNA XI — giấy ivory, chữ khắc, một tấm tranh sống. */
:root {
  --paper: #ebddc6;
  --paper-2: #e4d4b8;
  --ink: #3f382f;
  --ink-2: #5f5444;
  --ink-3: #685943;
  --gold: #a8742f;
  --line: rgba(63, 56, 47, .22);
  --ivory: #f4ead8;
  --night: #1b2433;
  --serif-d: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --serif: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; touch-action: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- loader ---------- */
#loader { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--paper); transition: opacity 1.1s var(--ease), visibility 1.1s; }
#loader img { width: 64px; height: auto; opacity: .9; animation: breathe 3.6s var(--ease-io) infinite; }
.loader-word { font-family: var(--sans); font-size: 11px; letter-spacing: .5em; color: var(--ink-2); padding-left: .5em; }
.loader-line { width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.loader-line i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
body.is-ready #loader { opacity: 0; visibility: hidden; }
@keyframes breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06) rotate(8deg); } }

/* ---------- stage ---------- */
#stage { position: fixed; inset: 0; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fallback { position: absolute; inset: 0; display: none; }
.no-gl #fallback { display: block; }
.no-gl #gl { display: none; }
.fb { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; max-width: none; transform-origin: 0 0; }
.fb-wash { position: absolute; inset: 0; pointer-events: none; }

#hits { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hit { position: absolute; pointer-events: none; cursor: pointer; border-radius: 6px; }
#hits[data-active="3"] .hit[data-i="3"], #hits[data-active="4"] .hit[data-i="4"], #hits[data-active="5"] .hit[data-i="5"], #hits[data-active="6"] .hit[data-i="6"] { pointer-events: auto; }
.hit:focus-visible { outline: 1px solid rgba(255, 240, 210, .8); }

/* ---------- chương chữ ---------- */
#chapters { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ch { position: absolute; visibility: hidden; pointer-events: none; color: var(--ink); --g: 1; }
.ch.is-current { pointer-events: auto; }
.ch > * { will-change: transform, opacity; }
.eyebrow { margin: 0; font-family: var(--sans); font-weight: 400; font-size: var(--fs-eye); letter-spacing: .32em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
.title { margin: calc(var(--g) * 22px) 0 0; font-family: var(--serif-d); font-weight: 500; font-size: var(--fs-title); line-height: .9; letter-spacing: -.005em; color: var(--title, var(--gold)); white-space: nowrap; }
.title .tl { display: block; }
.title .tc { display: inline-block; will-change: transform, opacity, filter; }
.sub { margin: calc(var(--g) * 34px) 0 0; font-family: var(--serif); font-weight: 400; font-size: var(--fs-sub); line-height: 1.12; color: #463d31; letter-spacing: -.005em; }
.body { margin: calc(var(--g) * 26px) 0 0; font-family: var(--serif); font-size: var(--fs-body); line-height: 1.58; color: #625643; }
.rule { display: block; width: calc(var(--g) * 30px); min-width: 22px; height: 1px; margin: calc(var(--g) * 38px) 0 0; background: #5d5243; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: calc(var(--g) * 28px); }
.cta { display: inline-flex; align-items: center; gap: 22px; padding: 8px 0; font-family: var(--sans); font-size: var(--fs-cta); letter-spacing: .3em; text-transform: uppercase; color: #5f523f; position: relative; }
.cta .arrow { position: relative; width: 28px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.cta .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; }
.cta::before { content: ''; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); opacity: .5; }
.cta:hover .arrow, .cta:focus-visible .arrow { width: 44px; }
.cta:hover::before, .cta:focus-visible::before { transform: scaleX(1); }
.cta-2 { color: #625643; }
.ch-intro .body { letter-spacing: .02em; }
.ch-book .body { font-family: var(--sans); font-size: calc(var(--fs-cta) * 1.02); letter-spacing: .14em; color: var(--ink-3); line-height: 1.6; }
.ch-book .title { line-height: .86; }
.mode-wide .ch-book .body, .mode-split .ch-book .body, .mode-wide .ch-book .cta-2, .mode-split .ch-book .cta-2 { display: none; }

/* bảng đọc lá bài (SOLUNA — Celestial Tarot): thay chỗ tiêu đề + phụ đề + nút của chương The Star khi đã rút.
   Phần thân tự cuộn (data-soluna-scroll); thanh đáy không cuộn giữ dòng "không phải lời tiên đoán" (BR-12) + các nút */
.reflect { display: none; }
.ch.has-reflect .title, .ch.has-reflect .sub, .ch.has-reflect .body, .ch.has-reflect .rule, .ch.has-reflect .ctas { display: none; }
/* fill "backwards" (không "both"): sau khi hiện xong, độ mờ/dịch do app.js điều khiển để khối này mờ đi cùng chương khi rời The Star */
.ch.has-reflect .reflect { --rd: clamp(14px, 1.85vh, 17px); display: flex; flex-direction: column; min-height: 0; margin-top: calc(var(--g) * 22px); color: var(--brand-ink); animation: rise .9s var(--ease) backwards; }
.reflect > * { transition: opacity .35s var(--ease); }
.reflect.is-swapping > * { opacity: 0; }
.rd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 12px 26px 0; margin-right: -12px; scrollbar-width: thin; scrollbar-color: rgba(75, 68, 54, .28) transparent;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent); }
.rd-scroll.is-scrolled { -webkit-mask-image: linear-gradient(transparent, #000 26px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(transparent, #000 26px, #000 calc(100% - 30px), transparent); }
.rd-scroll.at-end { -webkit-mask-image: none; mask-image: none; }
.rd-scroll.is-scrolled.at-end { -webkit-mask-image: linear-gradient(transparent, #000 26px); mask-image: linear-gradient(transparent, #000 26px); }
/* wide: nửa dưới cột giấy của tranh là phong cảnh — một lớp giấy mềm (mép nhoè) sau bảng đọc giữ chữ dễ đọc */
.mode-wide .ch.has-reflect .reflect { position: relative; isolation: isolate; }
.mode-wide .ch.has-reflect .eyebrow { position: relative; z-index: 1; }
.mode-wide .ch.has-reflect .reflect::before { content: ''; position: absolute; z-index: -1; inset: -30px -46px -18px -80px; border-radius: 48px; background: rgba(236, 225, 203, .9); filter: blur(22px); pointer-events: none; }
.rd-scroll:focus { outline: none; }
.rd-scroll:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.rd-kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--terra-deep); }
.rd-rev-tag { padding: 2px 9px 3px; border: 1px solid rgba(158, 58, 22, .55); border-radius: 999px; font-size: 10px; letter-spacing: .16em; }
.rd-name { margin: 12px 0 0; font-family: 'Playfair Display', var(--serif-d); font-weight: 400; font-size: clamp(28px, 4.6vh, 46px); line-height: 1.08; letter-spacing: -.005em; color: var(--terra); outline: none; text-wrap: balance; }
.rd-alt { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-family: var(--serif-d); font-style: italic; font-size: calc(var(--rd) * 1.14); line-height: 1.3; color: var(--ink-2); }
.rd-ipa { font-family: var(--serif); font-style: normal; font-size: calc(var(--rd) * .92); letter-spacing: .02em; color: var(--ink-3); }
.rd-hint { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .05em; color: var(--ink-3); }
.rd-hint b { font-weight: 500; color: var(--ink-2); }
.rd-kw { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.rd-kw li { padding: 3px 10px 4px; border: 1px solid rgba(75, 68, 54, .26); border-radius: 999px; background: rgba(247, 241, 230, .45); font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--brand-ink); }
.rd-msg { margin: 18px 0 0; font-family: var(--serif-d); font-style: italic; font-weight: 500; font-size: clamp(20px, 2.8vh, 27px); line-height: 1.24; color: #6B4A2F; text-wrap: pretty; }
.rd-text { margin: 12px 0 0; font-family: var(--serif); font-size: var(--rd); line-height: 1.6; color: var(--brand-ink); text-wrap: pretty; }
.rd-h { margin: 18px 0 0; font-family: var(--sans); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--terra-deep); }
.rd-q { margin: 6px 0 0; font-family: var(--serif-d); font-style: italic; font-size: calc(var(--rd) * 1.22); line-height: 1.3; color: #463d31; text-wrap: pretty; }
.rd-a { margin: 6px 0 0; font-family: var(--serif); font-size: var(--rd); line-height: 1.55; color: var(--brand-ink); text-wrap: pretty; }
.rd-credit { margin: 20px 0 0; font-family: var(--sans); font-size: 10px; line-height: 1.6; letter-spacing: .03em; color: var(--ink-3); opacity: .9; }
.rd-bar { flex: none; padding-top: 10px; border-top: 1px solid rgba(75, 68, 54, .18); }
.rd-note { margin: 0; font-family: var(--sans); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }
.rd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; margin-top: 4px; }
.rd-again { gap: 16px; font-size: 11px; letter-spacing: .26em; color: #5f523f; }
/* mũi tên dài ra khi hover nhưng bề ngang nút giữ nguyên: nếu không, hàng nút xuống dòng, thanh đáy cao thêm và nút nhảy khỏi con trỏ */
.rd-again .arrow { margin-right: 16px; transition: width .5s var(--ease), margin-right .5s var(--ease); }
.rd-again:hover .arrow, .rd-again:focus-visible .arrow { margin-right: 0; }
.rd-close-x { display: none; }
.rd-close { position: relative; padding: 8px 0; font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); transition: color .4s var(--ease); }
.rd-close::before { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
.rd-close:hover, .rd-close:focus-visible { color: var(--terra-deep); }
.rd-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 8px 0; cursor: pointer; font-family: var(--sans); font-size: 11px; letter-spacing: .04em; color: var(--ink-2); user-select: none; }
.rd-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.rd-switch-ui { position: relative; flex: none; width: 28px; height: 16px; border: 1px solid rgba(75, 68, 54, .45); border-radius: 999px; transition: background .3s var(--ease), border-color .3s var(--ease); }
.rd-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); transition: transform .35s var(--ease), background .3s var(--ease); }
.rd-switch input:checked + .rd-switch-ui { background: var(--terra-deep); border-color: var(--terra-deep); }
.rd-switch input:checked + .rd-switch-ui::after { transform: translateX(12px); background: var(--ivory2); }
.rd-switch input:focus-visible + .rd-switch-ui { outline: 1px solid var(--gold); outline-offset: 3px; }
.tarot-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* portrait: bảng đọc là một tấm thẻ giấy ngà dưới lá bài (vị trí + chiều cao do app.js placeReading đặt) */
/* điện thoại ngang: cột rộng hơn (app.js), thanh đáy gọn */
body.short .ch.has-reflect .reflect { --rd: 14px; margin-top: 10px; }
body.short .rd-name { margin-top: 6px; font-size: 26px; }
body.short .rd-msg { font-size: 19px; margin-top: 12px; }
body.short .rd-kw { margin-top: 10px; }
body.short .rd-bar { padding-top: 6px; }
body.short .rd-note { font-size: 10.5px; letter-spacing: .02em; }
body.short .rd-row { gap: 0 22px; margin-top: 0; }
body.short .rd-again, body.short .rd-close, body.short .rd-switch { padding: 6px 0; }
.mode-portrait .ch.has-reflect .reflect { --rd: 15.5px; position: absolute; margin: 0; padding: 16px 18px 6px; background: rgba(247, 241, 230, .97); border: 1px solid rgba(75, 68, 54, .24); border-radius: 16px; box-shadow: 0 18px 44px rgba(40, 28, 10, .22); }
.mode-portrait .rd-name { margin-top: 8px; font-size: clamp(28px, 8vw, 40px); }
.mode-portrait .rd-msg { font-size: clamp(19px, 5.4vw, 25px); }
.mode-portrait .rd-scroll { padding-right: 8px; margin-right: -8px; }
.mode-portrait .rd-kicker { padding-right: 34px; }
.mode-portrait .rd-bar { padding-top: 8px; }
.mode-portrait .rd-note { font-size: 11px; letter-spacing: .04em; }
.mode-portrait .rd-row { gap: 2px 18px; margin-top: 0; }
.mode-portrait .rd-again { gap: 12px; letter-spacing: .2em; }
.mode-portrait .rd-again .arrow { width: 22px; margin-right: 0; }
/* portrait: nút đóng là dấu × tròn ở góc phải trên của tấm thẻ */
.mode-portrait .rd-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(75, 68, 54, .3); border-radius: 50%; background: rgba(247, 241, 230, .9); letter-spacing: 0; color: var(--ink-2); }
.mode-portrait .rd-close::before { left: -5px; right: -5px; height: 44px; }
.mode-portrait .rd-close-t { display: none; }
.mode-portrait .rd-close-x { display: block; font-family: var(--serif); font-size: 20px; line-height: 1; margin-top: -2px; }

/* ---------- lá bài ---------- */
/* độ mờ của cả khối do app.js đặt theo vị trí cuộn (không transition) — rời The Star thì lá bài tắt trong 20% đầu chặng */
.tarot { position: absolute; z-index: 4; perspective: 1600px; pointer-events: none; opacity: 0; }
.tarot.is-open { pointer-events: auto; }
/* lá bài luôn đặc: rút bài = mặt lưng xoay vào từ cạnh (rotateY -90° → 0), không hoà mờ chồng lên lá The Star vẽ trong tranh */
.tarot-card { position: absolute; inset: 0; width: 100%; height: 100%; transform-style: preserve-3d; perspective: 1600px; opacity: 1; visibility: hidden; transform: rotateY(-90deg) scale(.985); transition: transform .45s var(--ease-io), visibility 0s linear .45s; }
.tarot.is-open .tarot-card { visibility: visible; transform: rotateY(0) scale(1.02) translateY(-1%); filter: drop-shadow(0 18px 30px rgba(40, 28, 10, .35)); transition: transform .75s var(--ease-io), visibility 0s; }
.tarot-turn { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.25s var(--ease-io); }
.tarot.is-flipped .tarot-turn { transform: rotateY(180deg); }
.tarot-face { position: absolute; inset: 0; border-radius: 2.4% / 1.4%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* mặt lưng: tranh mặt lưng chính thức của bộ bài (chàm + vàng) */
.tarot-back { background: #1f2a4c; }
.tb-art, .tf-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.tarot-front { transform: rotateY(180deg); background: #efe6d4; }
.tarot.is-reversed .tf-art { transform: rotate(180deg); }
/* đang nạp lá vừa rút (chỉ hiện khi nạp lâu hơn nhịp mở bài): một quầng sáng tròn mềm lướt qua mặt lưng + mặt lưng thở nhẹ */
.tarot-back::after { content: ''; position: absolute; top: -12%; bottom: -12%; left: -70%; width: 70%; background: radial-gradient(closest-side, rgba(255, 233, 186, .4), rgba(255, 233, 186, 0)); opacity: 0; pointer-events: none; }
.tarot.is-loading .tarot-back::after { animation: tb-sheen 1.9s var(--ease-io) .95s infinite; }
.tarot.is-loading .tb-art { animation: tb-breathe 2.4s var(--ease-io) .95s infinite; }
@keyframes tb-sheen { 0% { transform: translateX(0); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateX(243%); opacity: 0; } }
@keyframes tb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } }
/* nhãn kiểu bảo tàng dưới lá bài: số La Mã (ẩn chính) + tên lá theo ngôn ngữ đang chọn — tên lá không nằm trong tranh */
.tarot-label { position: absolute; left: 50%; top: calc(100% + 12px); z-index: 1; display: flex; align-items: baseline; gap: .75em; max-width: calc(100% + 80px); margin: 0; padding: 5px 15px 6px; white-space: nowrap; background: rgba(247, 241, 230, .95); border: 1px solid rgba(75, 68, 54, .28); border-radius: 999px; box-shadow: 0 6px 18px rgba(40, 28, 10, .16); opacity: 0; transform: translate(-50%, 6px); transition: opacity .35s var(--ease), transform .5s var(--ease); pointer-events: none; }
.tarot.is-flipped .tarot-label:not(:empty) { opacity: 1; transform: translate(-50%, 0); transition: opacity .7s var(--ease) .75s, transform .9s var(--ease) .75s; }
.tl-k { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-deep); }
.tl-n { font-family: 'Playfair Display', var(--serif-d); font-size: 14px; letter-spacing: .02em; color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) {
  .tarot-card, .tarot.is-open .tarot-card { transform: none; }
  .tarot-card { opacity: 0; transition: opacity .3s, visibility 0s linear .3s; }
  .tarot.is-open .tarot-card { opacity: 1; transition: opacity .3s, visibility 0s; }
  .tarot-turn, .tarot.is-flipped .tarot-turn { transform: none; }
  .tarot-front { transform: none; opacity: 0; transition: opacity .4s; }
  .tarot-back { transition: opacity .4s; }
  .tarot.is-flipped .tarot-front { opacity: 1; }
  .tarot.is-flipped .tarot-back { opacity: 0; }
  .tarot.is-flipped .tarot-label:not(:empty) { transition: opacity .4s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- khung Đất Nung + notch ---------- */
:root { --frame: 12px; --terra: #C75A28; --terra-deep: #9E3A16; --terra-soft: #E07A47; --ivory2: #F7F1E6; --brand-ink: #4B4436; }
#frame { position: fixed; inset: 0; z-index: 70; pointer-events: none; border: var(--frame) solid var(--terra); border-top-width: calc(var(--frame) + env(safe-area-inset-top, 0px)); opacity: 0; transition: opacity 1.2s var(--ease) .3s; }
body.is-ready #frame { opacity: 1; }
#frame .notch { position: absolute; left: 50%; transform: translateX(-50%); fill: var(--terra); display: block; }
#frame .notch-top { top: -1px; width: 220px; height: 60px; }
#frame .notch-bottom { bottom: -1px; width: 140px; height: 32px; }
.brand-notch { position: fixed; top: calc(var(--frame) - 2px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 72; width: 64px; height: 50px; display: grid; place-items: center; pointer-events: auto; }
.brand-notch img { width: 40px; height: auto; filter: brightness(0) invert(.96) sepia(.25) saturate(.8); transition: transform .9s var(--ease); }
.brand-notch:hover img { transform: rotate(-24deg) scale(1.06); }

/* ---------- header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 71; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--frame) + 16px + env(safe-area-inset-top, 0px)) calc(var(--frame) + clamp(16px, 2.4vw, 36px) + env(safe-area-inset-right, 0px)) 0 calc(var(--frame) + clamp(16px, 2.4vw, 36px) + env(safe-area-inset-left, 0px)); pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease) .6s; }
body.is-ready .site-header, body.is-ready .rail, body.is-ready .site-footer { opacity: 1; }
.site-header nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); pointer-events: auto; }
.hlink { font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--terra-deep); padding: 8px 0; position: relative; transition: color .5s var(--ease); text-shadow: 0 0 14px rgba(240, 228, 206, .9); }
.hlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); }
.hlink:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
/* nút đổi ngôn ngữ: liên kết chữ như các mục header (không viên nền); ngôn ngữ đang dùng gạch chân 1px.
   Màu theo tông của header (đất nung trên nền sáng, ngà trên nền tối) với quầng sáng để đọc được trên tranh */
.hlink-lang { letter-spacing: .14em; padding: 8px 0; }
.hlink-lang::after { display: none; }
.hlink-lang span { text-decoration: none; }   /* cả hai ngôn ngữ đủ đậm (≥ 4,5:1); ngôn ngữ đang dùng phân biệt bằng gạch chân + đậm hơn */
.hlink-lang span.on { opacity: 1; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hlink-reserve { position: relative; font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory2); background: var(--terra-deep); padding: 11px 20px; border-radius: 999px; transition: background .4s var(--ease), transform .4s var(--ease); box-shadow: 0 6px 18px rgba(120, 50, 20, .25); }
.hlink-reserve:hover { background: #7f2e11; transform: translateY(-1px); }
body[data-tone="dark"] .nav-right .hlink { color: var(--ivory2); text-shadow: 0 1px 12px rgba(10, 14, 24, .55); }
body[data-tone="light"] .nav-left .hlink, .mode-wide .nav-left .hlink, .mode-split .nav-left .hlink { color: var(--terra-deep); text-shadow: 0 0 14px rgba(240, 228, 206, .9); }

/* ---------- rail ---------- */
/* thước mảnh kiểu Comadre: một đường chỉ dọc, nấc ngắn chìa sang trái, chương đang đứng là một chấm Đất Nung trên đường chỉ.
   Không nền, không kính mờ — đọc được trên tranh nhờ quầng sáng (text-shadow / box-shadow) theo tông. Số La Mã chỉ hiện khi rê chuột
   hoặc ở chương đang đứng. Đường chỉ ở right: 3px = tâm của chấm 7px. */
.rail { position: fixed; right: calc(var(--frame) + clamp(12px, 1.8vw, 28px) + env(safe-area-inset-right, 0px)); top: 50%; z-index: 69; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 0; color: var(--brand-ink); opacity: 0; transition: opacity 1.2s var(--ease) .8s, color .6s var(--ease); --halo: rgba(240, 228, 206, .9); }
.rail::before { content: ''; position: absolute; right: 3px; top: 6px; bottom: 6px; width: 1px; background: currentColor; opacity: .32; box-shadow: 0 0 3px var(--halo); pointer-events: none; }
.rail-item { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 24px; color: var(--brand-ink); transition: color .6s var(--ease); text-shadow: 0 0 2px rgba(240, 228, 206, 1), 0 0 6px rgba(240, 228, 206, .95), 0 0 14px rgba(240, 228, 206, .9); }
.rail-num { font-family: var(--serif-d); font-size: 13.5px; font-weight: 500; letter-spacing: .06em; opacity: 0; transform: translateX(4px); width: 30px; text-align: right; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rail-name { position: absolute; right: 64px; padding: 5px 11px; border-radius: 999px; background: rgba(247, 241, 230, .9); color: var(--brand-ink); text-shadow: none; font-family: var(--sans); font-size: 10.5px; letter-spacing: .28em; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; box-shadow: 0 4px 14px rgba(40, 28, 10, .14); }
.rail-tick { width: 9px; height: 1px; margin-right: 3px; background: currentColor; opacity: .85; box-shadow: 0 0 0 1px var(--halo-1, rgba(240, 228, 206, .4)), 0 0 5px var(--halo); transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), border-radius .5s var(--ease), opacity .5s, background-color .5s; }
.rail:hover .rail-num, .rail:focus-within .rail-num, .rail-item.is-active .rail-num { opacity: 1; transform: none; }
.rail:hover .rail-item:not(.is-active) .rail-num { opacity: .78; }
.rail-item:hover .rail-num { opacity: 1 !important; }
body:not(.mode-portrait) .rail-item:not(.is-active):hover .rail-tick { width: 14px; opacity: 1; }
.rail-item:hover .rail-name { opacity: 1; transform: none; }
.rail-item.is-active .rail-num { font-weight: 600; }
.rail-item.is-active .rail-tick { width: 7px; height: 7px; margin-right: 0; border-radius: 50%; opacity: 1; background: var(--terra); box-shadow: 0 0 0 2px var(--halo); }
body[data-tone="dark"] .rail { color: var(--ivory); --halo: rgba(10, 14, 24, .6); --halo-1: rgba(10, 14, 24, .35); }
body[data-tone="dark"] .rail-item { color: var(--ivory); text-shadow: 0 0 2px rgba(10, 14, 24, .9), 0 0 6px rgba(10, 14, 24, .75), 0 0 12px rgba(10, 14, 24, .6); }
body[data-tone="dark"] .rail-name { background: rgba(20, 24, 34, .74); color: var(--ivory2); }
body[data-tone="dark"] .rail-item.is-active .rail-tick { background: var(--terra-soft); }
body[data-scene="end"] .rail, body[data-scene="end"] .rail-item { color: var(--ivory2); }
body[data-scene="end"] .rail { --halo: rgba(110, 36, 10, .35); --halo-1: transparent; }
body[data-scene="end"] .rail-item { text-shadow: none; }
body[data-scene="end"] .rail-item.is-active .rail-tick { background: var(--ivory2); }

/* ---------- footer: bộ đếm, tiến trình, âm thanh ---------- */
.site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 calc(var(--frame) + clamp(16px, 2.4vw, 36px) + env(safe-area-inset-right, 0px)) calc(var(--frame) + 14px + env(safe-area-inset-bottom)) calc(var(--frame) + clamp(16px, 2.4vw, 36px) + env(safe-area-inset-left, 0px)); pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease) .8s; }
.site-footer > * { pointer-events: auto; }
.counter { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 10px; letter-spacing: .3em; color: var(--ink-3); text-shadow: 0 0 12px rgba(240, 228, 206, .95), 0 0 3px rgba(240, 228, 206, .9); }
.counter #count-now { font-family: var(--serif-d); font-size: 15px; letter-spacing: .06em; color: var(--terra-deep); }
.counter i { width: 26px; height: 1px; background: currentColor; opacity: .5; }
.progress { position: fixed; left: calc(50% + 86px); right: calc(var(--frame) + 140px); bottom: calc(var(--frame) + 27px); height: 1px; background: rgba(75, 68, 54, .14); pointer-events: none; display: none; }
.progress i { position: absolute; inset: 0; background: var(--terra); transform-origin: 0 50%; transform: scaleX(0); }
/* một nút tròn equaliser duy nhất (kiểu Comadre). Tắt: vòng chỉ mảnh + bốn vạch tĩnh mờ. Bật: đĩa Đất Nung, vạch ngà nhảy.
   Trạng thái đọc bằng aria-pressed; viên Off/On cũ đã bỏ (giữ trong DOM, ẩn) */
.sound { display: inline-flex; align-items: center; gap: 10px; color: var(--terra-deep); padding: 2px 0; }
.sound-icon { position: relative; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid currentColor; display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 14px; box-shadow: 0 0 10px rgba(240, 228, 206, .55), inset 0 0 10px rgba(240, 228, 206, .35); transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.sound-icon i { width: 1.5px; height: 3px; background: currentColor; border-radius: 1px; opacity: .8; filter: drop-shadow(0 0 2px rgba(240, 228, 206, .9)); transition: height .3s, opacity .3s; }
.sound-icon i:nth-child(2) { height: 7px; } .sound-icon i:nth-child(3) { height: 5px; } .sound-icon i:nth-child(4) { height: 9px; }
.sound:hover .sound-icon { transform: scale(1.06); }
.sound:hover .sound-icon i { opacity: .9; }
.sound-pill { display: none; }
.sound[aria-pressed="true"] { color: var(--ivory2); }
.sound[aria-pressed="true"] .sound-icon { background: var(--terra); border-color: var(--terra); box-shadow: 0 6px 16px rgba(120, 50, 20, .25); }
.sound[aria-pressed="true"] .sound-icon i { opacity: 1; filter: none; animation: bar 1.1s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound-icon i:nth-child(2) { animation-delay: -.3s; } .sound[aria-pressed="true"] .sound-icon i:nth-child(3) { animation-delay: -.6s; } .sound[aria-pressed="true"] .sound-icon i:nth-child(4) { animation-delay: -.9s; }
body[data-tone="dark"] .sound[aria-pressed="false"] { color: var(--ivory2); }
body[data-tone="dark"] .sound[aria-pressed="false"] .sound-icon { box-shadow: 0 0 10px rgba(10, 14, 24, .5), inset 0 0 10px rgba(10, 14, 24, .3); }
body[data-tone="dark"] .sound[aria-pressed="false"] .sound-icon i { filter: drop-shadow(0 0 2px rgba(10, 14, 24, .8)); }
@keyframes bar { 0%, 100% { height: 3px; } 50% { height: 12px; } }
/* bộ đếm nằm trên cột giấy ở wide/split (ẩn ở portrait): giữ mực đậm cả ở chương tối; chỉ The End (nền đất nung) mới đổi sang ngà */
body[data-scene="end"] .counter { color: rgba(247, 241, 230, .82); text-shadow: none; }
body[data-scene="end"] .counter #count-now { color: var(--ivory2); }

/* ---------- hotspot chữ xoay (kiểu Comadre) ---------- */
#hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* con dấu Đất Nung: vành đặc (không mờ, không mask) mang chữ serif ngà ~13px, lòng trong suốt để thấy tranh, một chấm ngà viền đất nung ở tâm.
   Hình học theo đơn vị viewBox 100 (128px ⇒ 1,28px/đv; bán kính 50 đv = 100%): chân chữ R = 32,5 (app.js HS_R), chữ hoa ≤ 11 đv cao
   ~0,63em ⇒ dải chữ 32,5–39,4; dấu trên chữ hoa tiếng Việt (À, Ộ…) lên tới ~42, dấu nặng xuống ~31. Vành 28,7–44,5 đv (57,4–89%),
   hai chỉ ngà ở 29,5–29,9 và 43,3–43,7 đv — nằm ngoài tầm dấu, nên dấu không bị chỉ nuốt mất */
.hotspot { position: absolute; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.7); transition: opacity .8s var(--ease), transform .9s var(--ease); color: #F7F1E6; }
#hotspots[data-active="3"] .hotspot[data-i="3"], #hotspots[data-active="4"] .hotspot[data-i="4"], #hotspots[data-active="5"] .hotspot[data-i="5"], #hotspots[data-active="6"] .hotspot[data-i="6"], #hotspots[data-active="7"] .hotspot[data-i="7"] { opacity: 1; transform: none; pointer-events: auto; transition-delay: .35s; }
.hs-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: hs-spin 16s linear infinite; }
.hs-text text { font-family: var(--serif-d); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; fill: currentColor; }
/* rê chuột: vòng chữ quay nhanh hơn (app.js đổi playbackRate để không giật góc), chấm phồng lên, vòng trong hiện ra */
.hs-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #F7F1E6; box-shadow: 0 0 0 4px rgba(158, 58, 22, .94), 0 0 0 5px #F7F1E6, 0 2px 10px 5px rgba(40, 18, 6, .28); transition: transform .5s var(--ease); }
.hs-ring { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 1px solid #F7F1E6; opacity: 0; transform: scale(.4); animation: hs-pulse 2.8s var(--ease) infinite; box-shadow: 0 0 0 1px rgba(158, 58, 22, .35); }
.hotspot:hover .hs-dot { transform: scale(1.3); }
.hotspot:hover .hs-ring { animation: none; opacity: .9; transform: scale(1); transition: transform .5s var(--ease), opacity .3s; }
.hotspot:focus-visible { outline: 1px solid #F7F1E6; outline-offset: 2px; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
@keyframes hs-pulse { 0% { opacity: .0; transform: scale(.35); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25); } }

/* ---------- cổng âm thanh ---------- */
.gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain; background: rgba(235, 221, 198, .55); -webkit-backdrop-filter: blur(14px) saturate(.9); backdrop-filter: blur(14px) saturate(.9); opacity: 0; transition: opacity 1s var(--ease); }
.gate[hidden] { display: none; }
.gate.is-in { opacity: 1; }
.gate.is-out { opacity: 0; pointer-events: none; }
.gate-inner { margin: auto; max-width: 620px; text-align: center; color: var(--brand-ink); transform: translateY(18px); transition: transform 1.2s var(--ease); }
.gate.is-in .gate-inner { transform: none; }
.gate-mark { width: 58px; height: auto; margin: 0 auto 22px; animation: breathe 5s var(--ease-io) infinite; }
.gate-kicker { margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--terra-deep); }
.gate-title { margin: 14px 0 0; font-family: 'Playfair Display', var(--serif-d); font-style: italic; font-weight: 400; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; color: var(--terra-deep); }
.gate-text { margin: 18px auto 0; max-width: 34em; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: #5b4f3e; }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.gate-btn { font-family: var(--sans); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; padding: 15px 26px; border-radius: 999px; border: 1px solid var(--terra-deep); transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.gate-yes { background: var(--terra-deep); color: var(--ivory2); box-shadow: 0 10px 26px rgba(120, 50, 20, .28); }
.gate-yes:hover { background: #7f2e11; transform: translateY(-1px); }
.gate-no { color: var(--terra-deep); background: rgba(247, 241, 230, .6); }
.gate-no:hover { background: var(--ivory2); }
.gate-note { margin: 18px 0 0; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.gate-tag { margin: 26px 0 0; font-family: var(--serif-d); font-style: italic; font-size: 16px; color: var(--ink-3); }

/* ---------- The End ---------- */
.end-wrap { position: absolute; inset: 0; z-index: 8; pointer-events: none; visibility: hidden; }
.end-wrap.is-live { visibility: visible; pointer-events: auto; }


.scroll-cue { position: absolute; z-index: 6; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .4em; padding-left: .4em; color: var(--ink-2); text-transform: uppercase; opacity: 0; transition: opacity .6s; pointer-events: none; }
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--ink-2), transparent); transform-origin: 50% 0; animation: cue 2.4s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- panels ---------- */
dialog.panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100%; max-height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
dialog.panel::backdrop { background: rgba(28, 24, 18, 0); transition: background .5s var(--ease); }
dialog.panel.is-in::backdrop { background: rgba(28, 24, 18, .32); backdrop-filter: blur(2px); }
.panel-inner { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(22px, 4vh, 40px) clamp(22px, 3.4vw, 46px) 24px; background: var(--paper) url('assets/paper.webp'); background-size: 220px; box-shadow: -30px 0 60px rgba(40, 30, 15, .18); transform: translateX(104%); transition: transform .62s var(--ease-io); overflow: hidden; }
dialog.panel.is-in .panel-inner { transform: none; }
.panel-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.panel-close { font-family: var(--serif-d); font-size: 34px; line-height: 1; width: 44px; height: 44px; margin-right: -10px; color: var(--ink-2); transition: transform .5s var(--ease); }
.panel-close:hover { transform: rotate(90deg); }
.panel-head { margin-top: clamp(10px, 3vh, 30px); }
.panel-eyebrow { margin: 0; font-family: var(--sans); font-size: 10.5px; letter-spacing: .32em; color: var(--ink-3); }
.panel h2 { margin: 12px 0 0; font-family: var(--serif-d); font-weight: 500; font-size: clamp(44px, 7vh, 66px); line-height: .95; color: var(--gold); }
.panel-sub { margin: 12px 0 0; font-size: 18px; color: #625643; }
.panel-note { margin: 12px 0 0; font-family: var(--sans); font-size: 11px; line-height: 1.6; letter-spacing: .04em; color: var(--ink-3); }

.visit { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visit dt { font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.visit dd { margin: 0; font-size: 17px; color: var(--ink); }
/* form không tự cuộn: .panel-inner là vùng cuộn duy nhất (trước đây form co về 16px trên điện thoại ngang) */
.booking { display: grid; gap: 14px; margin-top: 20px; padding-bottom: 16px; overflow: visible; flex: none; align-content: start; grid-auto-rows: max-content; }
.booking label { display: grid; gap: 4px; }
.booking label span { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.booking input, .booking textarea { font: inherit; font-size: 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(63, 56, 47, .35); padding: 6px 0; border-radius: 0; outline: none; transition: border-color .3s; width: 100%; }
.booking input:focus, .booking textarea:focus { border-color: var(--gold); }
.booking .row { display: grid; grid-template-columns: 1.3fr 1fr .7fr; gap: 14px; }
.line-btn { justify-self: start; margin-top: 6px; font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; padding: 14px 26px; border: 1px solid var(--ink); border-radius: 999px; transition: background .4s, color .4s; }
.line-btn:hover { background: var(--ink); color: var(--paper); }
.line-btn.small { padding: 9px 18px; font-size: 10px; }
.form-msg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.form-msg:empty { display: none; }
.request { display: grid; gap: 10px; padding: 14px 16px; background: rgba(255, 250, 240, .45); border: 1px solid var(--line); }
.request pre { margin: 0; font-family: var(--serif); font-size: 15px; white-space: pre-wrap; }

/* ---------- split (tablet ngang) ---------- */
.mode-split .rail { right: 14px; }

/* ---------- portrait (điện thoại, tablet dọc) ---------- */
.mode-portrait .rail { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%); flex-direction: row; gap: 2px; }
.mode-portrait .rail-item { width: 22px; height: 22px; justify-content: center; }
.mode-portrait .rail-num, .mode-portrait .rail-name { display: none; }
.mode-portrait .rail-tick { width: 10px; opacity: .55; box-shadow: 0 0 6px rgba(0, 0, 0, .35); }
.mode-portrait .rail-item.is-active .rail-tick { width: 18px; opacity: 1; }
.mode-portrait .ctas { gap: 6px 24px; }
.mode-portrait .scroll-cue { color: var(--ivory); bottom: 64px; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.mode-portrait .scroll-cue i { background: linear-gradient(var(--ivory), transparent); }
@media (max-width: 599px) {
  .mode-portrait .body { display: none; }
  .mode-portrait .ch-book .body, .mode-portrait .ch-intro .body { display: block; }
  .mode-portrait .rule { display: none; }
  .mode-portrait .title { margin-top: 12px; }
  .mode-portrait .sub { margin-top: 14px; }
  .mode-portrait .body { margin-top: 12px; line-height: 1.45; }
  .mode-portrait .ctas { margin-top: 14px; }
  .booking .row { grid-template-columns: 1fr 1fr; }
  .booking .row label:last-child { grid-column: span 2; }
}
@media (max-height: 640px) and (max-width: 599px) { .mode-portrait .ch-intro .body { display: none; } }
body.short .body, body.short .rule { display: none; }
body.short .site-footer { padding-bottom: 10px; }
body.short .site-header { padding-top: 12px; padding-bottom: 12px; }
body.short .rail { gap: 0; }
body.short .rail-item { height: 20px; }

.noscript { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: var(--paper); font-family: var(--serif-d); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
}

/* ---------- XII: portrait + nhỏ ---------- */
/* dải giấy sau header được vẽ trong #stage (dưới khung đất nung và các lớp phủ), không vẽ trên header */
.mode-portrait .site-header { padding-top: calc(var(--frame) + 12px + env(safe-area-inset-top, 0px)); background: none; padding-bottom: 14px; }
body.mode-portrait #stage::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--frame) + 64px + env(safe-area-inset-top, 0px)); background: linear-gradient(rgba(235, 221, 198, .92) 60%, rgba(235, 221, 198, 0)); z-index: 7; pointer-events: none; }
.mode-portrait .nav-wide { display: none; }
.mode-portrait .hlink { font-size: 11px; letter-spacing: .16em; }
.mode-portrait .hlink-reserve { padding: 9px 14px; font-size: 10px; letter-spacing: .16em; }
.mode-portrait #frame .notch-top { width: 168px; height: 46px; }
.mode-portrait .brand-notch { width: 52px; height: 40px; }
.mode-portrait .brand-notch img { width: 30px; }
.mode-portrait .rail { top: auto; bottom: calc(var(--frame) + 16px + env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%); flex-direction: row; gap: 0; }
.mode-portrait .counter { display: none; }
.mode-portrait .site-footer { justify-content: flex-end; }
/* portrait: viên Off/On thu gọn — chỉ hiện trạng thái hiện tại cạnh nút, để không bị đọc thành nút "thêm" */
.mode-portrait .sound { gap: 6px; }
.mode-portrait .sound-pill { height: 24px; padding: 0 2px; font-size: 11px; letter-spacing: .1em; }
.mode-portrait .sound[aria-pressed="false"] .sound-on, .mode-portrait .sound[aria-pressed="true"] .sound-off { display: none; }
.mode-portrait .scroll-cue { bottom: calc(var(--frame) + 70px); }
.mode-split .nav-wide { display: none; }
@media (min-width: 1200px) { .mode-wide .progress { display: block; } }

/* ---------- XII: đặt bàn kiểu thẻ giấy trên nền Đất Nung ---------- */
dialog.panel { inset: var(--frame); width: auto; max-width: none; height: auto; max-height: none; background: transparent; }
dialog.panel::backdrop { background: rgba(20, 12, 6, 0); }
dialog.panel.is-in::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.panel::before { content: ''; position: fixed; inset: var(--frame); background: var(--terra) url('assets/paper.webp'); background-size: 220px; background-blend-mode: multiply; clip-path: circle(0% at 50% 100%); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); }
dialog.panel.is-in::before { clip-path: circle(150% at 50% 100%); }
dialog.panel .panel-inner { inset: auto; position: relative; margin: clamp(56px, 9vh, 96px) auto clamp(40px, 6vh, 64px); width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - var(--frame) * 2 - clamp(96px, 15vh, 160px)); max-height: calc(100dvh - var(--frame) * 2 - clamp(96px, 15vh, 160px)); background: var(--ivory2); box-shadow: 0 30px 80px rgba(60, 20, 5, .35); border: 1px solid var(--brand-ink); outline: 1px solid var(--brand-ink); outline-offset: -7px; transform: translateY(48px); opacity: 0; transition: transform .9s var(--ease) .25s, opacity .7s var(--ease) .25s; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(75, 68, 54, .3) transparent; }
dialog.panel .panel-inner::-webkit-scrollbar { width: 6px; }
dialog.panel .panel-inner::-webkit-scrollbar-thumb { background: rgba(75, 68, 54, .3); border-radius: 6px; }
dialog.panel.is-in .panel-inner { transform: none; opacity: 1; }
dialog.panel .panel-inner::before, dialog.panel .panel-inner::after { content: ''; position: absolute; width: 70px; height: 54px; pointer-events: none; }
dialog.panel h2 { font-family: 'Playfair Display', var(--serif-d); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--terra); }
/* nút đóng là con trực tiếp của dialog (không nằm trong .panel-inner đang có transform) nên không nhảy sau khi mở */
dialog.panel .panel-close { position: fixed; left: 50%; bottom: calc(var(--frame) + 4px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: 46px; height: 46px; margin: 0; border-radius: 50%; background: var(--ivory2); color: var(--terra-deep); box-shadow: 0 8px 20px rgba(60, 20, 5, .3); display: grid; place-items: center; line-height: 1; font-size: 28px; z-index: 3; opacity: 0; transition: opacity .5s var(--ease) .45s, transform .5s var(--ease); }
dialog.panel.is-in .panel-close { opacity: 1; }
dialog.panel .panel-close:hover { transform: translateX(-50%) rotate(90deg); }
dialog.panel .panel-notch { position: fixed; top: calc(var(--frame) - 2px); left: 50%; transform: translateX(-50%); width: 64px; height: 50px; display: grid; place-items: center; z-index: 3; opacity: 0; transition: opacity .5s var(--ease) .5s; pointer-events: none; }
dialog.panel .panel-notch img { width: 40px; height: auto; filter: brightness(0) invert(.96) sepia(.25) saturate(.8); }
dialog.panel.is-in .panel-notch { opacity: 1; }
.mode-portrait dialog.panel .panel-notch { width: 52px; height: 40px; }
.mode-portrait dialog.panel .panel-notch img { width: 30px; }
dialog.panel .line-btn { background: var(--terra-deep); color: var(--ivory2); border-color: var(--terra-deep); }
dialog.panel .line-btn:hover { background: #7f2e11; }
@media (max-height: 900px) { dialog.panel h2 { font-size: clamp(34px, 5.5vh, 52px); } .panel-kicker { display: none; } dialog.panel .panel-head { margin-top: 4px; } dialog.panel .visit { margin-top: 14px; padding: 10px 0; } dialog.panel .booking { gap: 10px; margin-top: 14px; } }
@media (max-height: 480px) { dialog.panel .panel-inner { margin: 20px auto 56px; max-height: calc(100vh - var(--frame) * 2 - 76px); max-height: calc(100dvh - var(--frame) * 2 - 76px); } .panel-head .panel-sub { display: none; } .panel-head { margin-top: 4px; } dialog.panel .visit { margin-top: 12px; padding: 10px 0; } dialog.panel .panel-notch { display: none; } }
body[data-scene="end"].mode-portrait #stage::after { background: linear-gradient(rgba(158, 58, 22, .94) 60%, rgba(158, 58, 22, 0)); z-index: 9; }
body[data-scene="end"] .hlink, body[data-scene="end"] .nav-left .hlink { color: var(--ivory2) !important; text-shadow: none !important; }
body[data-scene="end"].mode-portrait .rail { opacity: 0; pointer-events: none; }
body[data-scene="end"] .hlink-reserve { background: var(--ivory2); color: var(--terra-deep); }
body[data-scene="end"] .scroll-cue { display: none; }

/* ---------- XII: lớp phủ menu/bảo tàng nằm dưới khung, trên header ---------- */
:root { --sm-z: 73; --menu-z: 73; }
#frame { z-index: 74; }
.brand-notch { z-index: 75; }
body.overlay-open #frame .notch-bottom { opacity: 0; transition: opacity .3s; }
body.overlay-open .site-header .nav-left, body.overlay-open .site-header .nav-right, body.overlay-open .rail, body.overlay-open .site-footer, body.overlay-open #hotspots { opacity: 0; pointer-events: none; transition: opacity .4s; }

/* ---------- XII: sửa sau QA 1 ---------- */
.site-header { z-index: 76; }
.scroll-cue { bottom: calc(var(--frame) + 46px); }
.hotspot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle closest-side, transparent 58.4%, rgba(247, 241, 230, .5) 59% 59.8%, transparent 60.4%, transparent 86%, rgba(247, 241, 230, .5) 86.6% 87.4%, transparent 88%),
    radial-gradient(circle closest-side, transparent 56.6%, rgba(158, 58, 22, .94) 57.4% 89%, transparent 89.8%);
  filter: drop-shadow(0 3px 10px rgba(40, 18, 6, .28)); transition: transform .6s var(--ease); }

.mode-portrait .hlink-lang { position: fixed; left: calc(var(--frame) + 16px + env(safe-area-inset-left, 0px)); bottom: calc(var(--frame) + 14px + env(safe-area-inset-bottom)); z-index: 77; padding: 9px 12px; font-size: 11px; }
/* portrait: hàng nấc ngắn không nền (vạch 5px, chương đang đứng 16px Đất Nung), không đường chỉ */
.mode-portrait .rail { bottom: calc(var(--frame) + 52px + env(safe-area-inset-bottom)); padding: 0; }
.mode-portrait .rail::before { display: none; }
.mode-portrait .rail-item { width: 28px; height: 22px; justify-content: center; }
.mode-portrait .rail-num, .mode-portrait .rail-name { display: none; }
.mode-portrait .rail-tick { width: 5px; height: 1.5px; margin: 0; border-radius: 1px; opacity: .8; box-shadow: 0 0 4px var(--halo), 0 0 1px var(--halo); }
.mode-portrait .rail-item.is-active .rail-tick { width: 16px; height: 1.5px; margin: 0; border-radius: 1px; box-shadow: 0 0 4px var(--halo), 0 0 1px var(--halo); }
.mode-portrait .scroll-cue { bottom: calc(var(--frame) + 108px); }
body.overlay-open .hlink-lang { opacity: 0; pointer-events: none; }

/* ---------- XII: sửa sau QA 2 (integration) ---------- */
/* vùng chạm tối thiểu ~44px mà không đổi hình */
.hlink::before, .hlink-reserve::before, .cta::after, .rail-item::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.rail-item::after { left: -18px; right: -6px; height: 28px; }
.mode-portrait .rail-item::after { left: 0; right: 0; height: 44px; }
@media (hover: none) { body:not(.mode-portrait) .rail-item { height: 36px; } body:not(.mode-portrait) .rail { gap: 0; } body:not(.mode-portrait) .rail-item::after { height: 36px; } }

/* chờ nạp cảnh đích: vạch mảnh nhấp nháy ở đáy */
@keyframes wait-pulse { 0%, 100% { opacity: .45; transform: scaleX(.6); } 50% { opacity: 1; transform: scaleX(1); } }
body.is-waiting .progress { display: block; left: 38%; right: 38%; height: 2px; border-radius: 2px; bottom: calc(var(--frame) + 40px + env(safe-area-inset-bottom, 0px)); background: rgba(247, 241, 230, .7); box-shadow: 0 0 10px rgba(40, 28, 10, .35); animation: wait-pulse 1.1s var(--ease-io) infinite; z-index: 72; }
body.is-waiting .progress i { transform: none !important; background: var(--terra-deep); }
body.is-waiting { cursor: progress; }

/* lá bài trượt mượt khi khối chữ The Star đổi chiều cao */
.tarot.is-open { transition: left .7s var(--ease-io), top .7s var(--ease-io), width .7s var(--ease-io), height .7s var(--ease-io); }

/* cổng âm thanh trên điện thoại ngang */
@media (max-height: 480px) {
  .gate { padding: 16px; }
  .gate-mark { width: 40px; margin-bottom: 10px; }
  .gate-text { display: none; }
  .gate-title { margin-top: 8px; font-size: clamp(28px, 8vh, 40px); }
  .gate-actions { margin-top: 16px; }
  .gate-note { margin-top: 12px; }
  .gate-tag { margin-top: 12px; }
}

/* ---------- XII: sửa sau QA 3 (integration) ---------- */
/* điện thoại ngang (màn thấp, cảm ứng): thanh I–IX co lại để nằm gọn giữa nút "Book a table" và nút âm thanh.
   Mỗi nấc ≥ 24px (WCAG 2.5.8); 132px = header + footer + khe hở */
@media (hover: none) {
  body.short:not(.mode-portrait) .rail { gap: 0; padding: 0; }
  body.short:not(.mode-portrait) .rail-item { height: clamp(20px, calc((100vh - 132px) / 9), 26px); height: clamp(20px, calc((100dvh - 132px) / 9), 26px); gap: 6px; }
  body.short:not(.mode-portrait) .rail-item::after { height: 100%; }
}
body.short:not(.mode-portrait) .rail-num { font-size: 12.5px; width: 26px; }
body.short:not(.mode-portrait) .rail-item:not(.is-active) .rail-tick { width: 8px; }
/* The End trên màn thấp: chân trang cuộn lên đúng chỗ thanh chương — ẩn thanh như ở portrait (header + liên kết cuối trang vẫn điều hướng được) */
body.short[data-scene="end"] .rail { opacity: 0; pointer-events: none; }
/* bộ đếm chương nằm đè lên tranh trên màn thấp (cột giấy hẹp): đặt trên một viên giấy mờ. Màn ngang thường (kể cả chương Book,
   chữ nằm trên cánh hoa sáng màu) chỉ dùng quầng sáng giấy — "Book a table" là viên đặc duy nhất ở header/footer */
.counter { border-radius: 999px; transition: background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease); }
body.short:not(.mode-portrait) .counter { padding: 6px 13px 6px 12px; background: rgba(247, 241, 230, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(40, 28, 10, .12); color: var(--brand-ink); text-shadow: none; }
body.short:not(.mode-portrait) .counter #count-now { font-size: 14px; line-height: 1; }
body.short:not(.mode-portrait) .counter { gap: 10px; }
body.short:not(.mode-portrait) .counter i { width: 18px; }
body.short[data-scene="end"] .counter { background: rgba(110, 36, 10, .42); box-shadow: none; color: rgba(247, 241, 230, .92); }

/* đổi tông nhanh trên đường The End và các cú nhảy xa (app.js bật body.tone-fast): màu header/thanh chương/bộ đếm
   đổi trong 150 ms, khớp lúc vòm hoặc mực phủ qua — không có nửa giây chữ đất nung trên nền đất nung */
body.tone-fast .hlink, body.tone-fast .rail-item, body.tone-fast .rail-name, body.tone-fast .counter, body.tone-fast .counter #count-now { transition-duration: .15s !important; transition-delay: 0s !important; }
body.tone-fast .hlink-reserve { transition: background .15s var(--ease), color .15s var(--ease), transform .4s var(--ease); }
body.tone-fast .rail { transition: opacity .15s var(--ease), color .15s var(--ease); }
body.tone-fast .sound-icon, body.tone-fast .rail-tick { transition-duration: .15s !important; }

/* ---------- XII: polish sau vòng CD (integration) ---------- */
/* header trái chạm notch logo (app.js fitNav): ẩn Tarot trước, rồi The Museum */
body.nav-c1 .nav-left .hlink[data-goto="6"], body.nav-c2 .nav-left .nav-wide { display: none; }
/* điện thoại dọc: con dấu nhỏ lại 112px (chữ ~11,8px), cùng tỉ lệ vành */
.mode-portrait .hotspot { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
.mode-portrait .hs-ring { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
/* nút ngôn ngữ ở portrait: chữ trần trên tranh, căn theo nút âm thanh */
.mode-portrait .hlink-lang { padding: 12px 0; }
body[data-scene="end"] .hlink-lang { color: var(--ivory2); }
/* chương Book ở màn ngang: bộ đếm nằm trên hoa mẫu đơn mờ (không còn viên giấy) — một vầng giấy loang không viền phía sau,
   như giấy lộ ra dưới nét khắc; chữ mực đậm đọc được, không thành một "viên" thứ hai cạnh nút Book a table */
.counter { position: relative; isolation: isolate; }
.counter::before { content: ''; position: absolute; z-index: -1; left: -46px; right: -56px; top: -26px; bottom: -26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 228, 206, .92), rgba(240, 228, 206, .78) 45%, rgba(240, 228, 206, .35) 75%, rgba(240, 228, 206, 0)); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
body[data-scene="book"]:not(.mode-portrait):not(.short) .counter { color: var(--brand-ink); }
body[data-scene="book"]:not(.mode-portrait):not(.short) .counter::before { opacity: 1; }
/* điện thoại dọc: dải giấy ở đáy (đối xứng với dải giấy sau header) — nền cho nút ngôn ngữ, thanh chương và nút âm thanh
   khi chúng không còn viên nền. Dải bắt đầu ~30px trên thanh chương nên không chạm chân người lữ khách; ở The End (nền đất nung) thì ẩn */
body.mode-portrait #stage::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--frame) + 104px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(235, 221, 198, 0), rgba(235, 221, 198, .62) 30%, rgba(235, 221, 198, .93) 52%, rgba(235, 221, 198, .97) 66%); z-index: 7; pointer-events: none; transition: opacity .3s var(--ease); }
body[data-scene="end"].mode-portrait #stage::before { opacity: 0; }
/* trên dải giấy: chrome đáy luôn dùng tông sáng (chữ đất nung / mực), kể cả ở chương tối */
body.mode-portrait:not([data-scene="end"]) .nav-right .hlink-lang { color: var(--terra-deep); text-shadow: none; }
body.mode-portrait:not([data-scene="end"]) .sound[aria-pressed="false"] { color: var(--terra-deep); }
body.mode-portrait:not([data-scene="end"]) .sound[aria-pressed="false"] .sound-icon { box-shadow: none; }
body.mode-portrait:not([data-scene="end"]) .sound[aria-pressed="false"] .sound-icon i { filter: none; }
body.mode-portrait:not([data-scene="end"]) .rail, body.mode-portrait:not([data-scene="end"]) .rail-item { color: var(--brand-ink); text-shadow: none; --halo: rgba(240, 228, 206, .7); --halo-1: transparent; }
body.mode-portrait:not([data-scene="end"]) .rail-item.is-active .rail-tick { background: var(--terra); }
.mode-portrait .scroll-cue { color: var(--ink-2); text-shadow: none; z-index: 8; }
.mode-portrait .scroll-cue i { background: linear-gradient(var(--ink-2), transparent); }
/* split (tablet ngang): tranh neo đáy cột phải nên hàng header luôn nằm trên giấy — nút ngôn ngữ giữ tông sáng ở mọi chương */
body.mode-split:not([data-scene="end"]) .nav-right .hlink-lang { color: var(--terra-deep); text-shadow: 0 0 14px rgba(240, 228, 206, .9); }

/* ---------- XII: chốt (orchestrator) — EN·VI, nút âm thanh, thẻ đặt bàn ---------- */
.nav-right .hlink-lang { padding: 7px 12px; border-radius: 999px; background: rgba(247, 241, 230, .88); color: var(--terra-deep) !important; text-shadow: none !important; box-shadow: 0 0 0 1px rgba(158, 58, 22, .18); }
.nav-right .hlink-lang::after { display: none; }
.hlink-lang span { opacity: .55; } .hlink-lang span.on { opacity: 1; font-weight: 500; }
body[data-scene="end"] .nav-right .hlink-lang { background: rgba(247, 241, 230, .14); color: var(--ivory2) !important; box-shadow: 0 0 0 1px rgba(247, 241, 230, .35); }
.sound[aria-pressed="false"] .sound-icon { background: var(--terra); border-color: var(--terra); box-shadow: 0 4px 12px rgba(120, 50, 20, .22); }
.sound[aria-pressed="false"] .sound-icon i { background: var(--ivory2); filter: none; opacity: .75; }
body[data-tone="dark"] .sound[aria-pressed="false"] .sound-icon, body.mode-portrait:not([data-scene="end"]) .sound[aria-pressed="false"] .sound-icon { box-shadow: 0 4px 12px rgba(10, 14, 24, .3); }
body[data-scene="end"] .sound .sound-icon { background: var(--ivory2); }
body[data-scene="end"] .sound .sound-icon i { background: var(--terra-deep); }
dialog.panel .panel-inner { padding-bottom: 84px; }
body.short .scroll-cue { display: none; }