/* The Light Square e-brochure: site styles. Built from css/tokens.css; rules in DESIGN.md. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--c-cream); color: var(--c-ink);
  font: 400 var(--fs-body)/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
/* taps register at once and are never taken as a double-tap zoom (iOS) */
button, a, input, label, .reader { touch-action: manipulation; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: 1000; padding: var(--s-2) var(--s-4);
  background: var(--c-orange); color: var(--c-black); transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease); text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- typography ---------- */
.t-display { font-family: var(--f-display); font-weight: 900; line-height: .98; letter-spacing: -.01em; margin: 0; }
.t-sub { font-family: var(--f-display); font-style: italic; font-weight: 700; color: var(--c-brown); margin: 0; line-height: 1.2; }
.t-eyebrow { font: 500 var(--fs-eyebrow)/1.4 var(--f-sans); text-transform: uppercase; letter-spacing: .18em; color: var(--c-brown); margin: 0; }
.t-company { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* the template's thin brown rule that ends in a dot, leading into an italic title */
.dotrule { display: flex; align-items: center; gap: var(--s-3); color: var(--c-brown); }
.dotrule__line { flex: 1 1 auto; height: 1px; background: currentColor; opacity: .7; position: relative; min-width: 32px; }
.dotrule__line::after { content: ""; position: absolute; right: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dotrule__label { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: var(--fs-sub); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--radius);
  font: 600 .8rem/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--c-orange); color: var(--c-black); }
.btn--primary:hover { background: var(--c-orange-hover); }
.btn--dark { background: var(--c-black); color: var(--c-on-dark); }
.btn--dark:hover { background: var(--c-black-3); }
.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover { color: var(--c-orange); }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: .72rem; }
.btn--block { width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius);
  color: inherit; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  position: relative;
}
.icon-btn:hover { color: var(--c-orange); }
.icon-btn[aria-pressed="true"] { color: var(--c-orange); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn:disabled:hover { color: inherit; }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 900; background: var(--c-cream);
  display: grid; place-items: center; align-content: center; gap: var(--s-5);
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.loader__logo { width: min(320px, 70vw); height: auto; }
.loader__wave { width: min(520px, 86vw); aspect-ratio: 2 / 1; }
.loader__wave .wave { width: 100%; height: 100%; }
.loader__wave rect { transition: width 480ms var(--ease); }
.loader__text { margin: 0; text-align: center; }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- wave hosts ---------- */
[data-wave] { position: relative; overflow: hidden; }
[data-wave] > .wave { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .wave--drift .wave__band { animation: wave-drift 16s var(--ease-in-out) infinite alternate; }
  .wave--drift .wave__band--1 { animation-duration: 21s; animation-delay: -4s; }
  .wave--drift .wave__band--2 { animation-duration: 26s; animation-delay: -9s; }
}
@keyframes wave-drift { from { transform: translate3d(-1.5%, 1%, 0); } to { transform: translate3d(1.5%, -1.5%, 0); } }

/* ---------- header (landing) ---------- */
.site-header {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) clamp(var(--s-4), 4vw, var(--s-8)); color: var(--c-on-dark);
}
.site-header__logo { display: block; width: clamp(128px, 14vw, 180px); }
.site-header__logo img { width: 100%; height: auto; }
.site-header__nav { display: flex; align-items: center; gap: clamp(var(--s-3), 2.4vw, var(--s-6)); }
.site-header__nav a, .site-header__nav button {
  font: 500 var(--fs-eyebrow)/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--c-on-dark-soft); padding: var(--s-2) 0; transition: color var(--t-fast) var(--ease);
}
.site-header__nav a:hover, .site-header__nav button:hover { color: var(--c-orange); }
@media (max-width: 640px) { .site-header__nav .hide-sm { display: none; } }
body[data-state="reading"] .site-header { display: none; }

/* ---------- hero ---------- */
.hero {
  /* phones: the hero fills the screen even with the browser toolbars hidden;
     --hidden is the strip that sits under the toolbars while they are shown */
  --hidden: max(0px, calc(var(--lvh) * 100 - var(--vh) * 100));
  --surface: calc(var(--vh) * 17 + var(--hidden));
  /* exactly one screen on every device; the content below scales with the height */
  position: relative; height: 100vh; height: calc(var(--lvh) * 100); min-height: 540px; overflow: hidden; isolation: isolate;
  background: var(--c-black); color: var(--c-on-dark);
}
.hero__bg, .hero__bg picture, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg { z-index: -3; }
.hero__bg img { object-fit: cover; object-position: 50% 40%; transform: scale(1.06); filter: saturate(.85) blur(2px); }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 35%, rgba(10, 6, 4, .25), rgba(10, 6, 4, .78) 70%),
    linear-gradient(to right, rgba(10, 6, 4, .82) 0%, rgba(10, 6, 4, .45) 55%, rgba(10, 6, 4, .3) 100%);
}
.hero__surface {
  position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: var(--surface);
  background: linear-gradient(to bottom, #4A372C 0%, var(--c-surface) 14%, #1E140E 100%);
  box-shadow: 0 -1px 0 rgba(243, 238, 230, .08);
}
.hero__wave {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: var(--surface); opacity: .2; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 30%, #000 75%); mask: linear-gradient(to bottom, transparent 30%, #000 75%);
}
.hero__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6); padding: 0 clamp(var(--s-4), 5vw, var(--s-9));
  max-width: 1600px; width: 100%; height: 100%; margin: 0 auto;
}
.hero__copy { max-width: 560px; align-self: center; padding: clamp(72px, calc(var(--vh) * 12), 112px) 0 calc(var(--surface) - var(--s-5)); }
.hero__copy .t-eyebrow { color: var(--c-orange); margin-bottom: clamp(var(--s-3), calc(var(--vh) * 2.4), var(--s-5)); }
.hero__title { margin: 0; }
.hero__title img { width: min(440px, 80vw, calc(var(--vh) * 44)); height: auto; }
.hero__tagline { color: var(--c-on-dark); font-size: var(--fs-sub); margin: clamp(var(--s-3), calc(var(--vh) * 2.4), var(--s-5)) 0 0; font-weight: 700; }
.hero__lead { color: var(--c-on-dark-soft); max-width: 44ch; margin: var(--s-3) 0 clamp(var(--s-4), calc(var(--vh) * 3.2), var(--s-6)); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__actions .btn--ghost { color: var(--c-on-dark); }
.hero__actions .btn--ghost:hover { color: var(--c-orange); }

.resume {
  margin-top: clamp(var(--s-3), calc(var(--vh) * 2.4), var(--s-5)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--s-4); border-left: 2px solid var(--c-orange); background: rgba(10, 6, 4, .55);
  font-size: var(--fs-small); color: var(--c-on-dark);
}
.resume__actions { display: flex; gap: var(--s-4); }
.resume button { font-weight: 600; color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; }
.resume button + button { color: var(--c-on-dark-soft); }

/* the closed brochure standing on the table (template page 3) */
.hero__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(var(--surface) - calc(var(--vh) * 3)); }
.hero-book {
  position: relative; display: block; height: min(calc(var(--vh) * 58), 640px); aspect-ratio: 2481 / 3508;
  transform-origin: 50% 100%; transition: transform 280ms var(--ease); cursor: pointer;
}
.hero-book img { width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-book); background: var(--c-cream-light); }
.hero-book:hover, .hero-book:focus-visible { transform: scale(1.04); }
.hero-book__hint {
  position: absolute; left: 50%; bottom: 18%; transform: translate(-50%, 6px); opacity: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); pointer-events: none;
  width: max-content; max-width: calc(100% - var(--s-4)); text-align: center;
  padding: var(--s-2) var(--s-3); background: rgba(10, 6, 4, .82); color: var(--c-on-dark);
  font: 600 .64rem/1.35 var(--f-sans); letter-spacing: .08em; text-transform: uppercase;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.hero-book__hint .icon { width: 16px; height: 16px; color: var(--c-orange); }
.hero-book:hover .hero-book__hint, .hero-book:focus-visible .hero-book__hint { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .hero-book__hint { opacity: 1; transform: translate(-50%, 0); } } /* touch: always show */
.hero__shadow {
  position: absolute; bottom: calc(var(--surface) - calc(var(--vh) * 5)); left: 50%; width: min(46%, 400px); height: calc(var(--vh) * 5); transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 72%); filter: blur(6px);
  pointer-events: none; z-index: -1;
}

.lbl-short { display: none; }

/* Phones and tablets: the landing is exactly one screen. The text sits on top
   and the cover takes whatever height is left above the table surface. */
@media (max-width: 900px) {
  .site-header { display: none; } /* one logo on phones: the large title logo */
  .hero { --surface: calc(var(--vh) * 14 + var(--hidden)); min-height: 520px; }
  .hero__inner { display: flex; flex-direction: column; gap: 0; }
  .hero__copy { flex: none; padding: max(var(--s-7), calc(env(safe-area-inset-top) + var(--s-5))) 0 0; align-self: stretch; max-width: 600px; }
  .hero__stage { flex: 1 1 0; min-height: 0; padding: 0; display: block; }
  /* the cover stands on the table; it uses the free space but stays modest */
  .hero-book {
    position: absolute; left: 50%; top: auto; bottom: calc(var(--surface) - calc(var(--vh) * 3));
    height: min(calc(100% - var(--surface) + calc(var(--vh) * 3) - var(--s-4)), calc(var(--vh) * 43));
    width: auto; transform: translateX(-50%);
  }
  .hero-book:hover, .hero-book:focus-visible { transform: translateX(-50%) scale(1.04); }
  .hero__shadow { bottom: calc(var(--surface) - calc(var(--vh) * 5)); }
}
@media (max-width: 600px) {
  .hero__copy .t-eyebrow { display: none; }
  .hero__title img { width: min(240px, 64vw); }
  .hero__tagline { margin-top: var(--s-2); }
  .hero__lead { font-size: .9rem; line-height: 1.5; margin: var(--s-2) 0 var(--s-4); }
  .hero__actions { flex-wrap: nowrap; gap: var(--s-2); }
  .hero__actions .btn { min-height: 44px; padding: 0 var(--s-4); }
  .hero__actions .btn--primary { flex: 1 1 auto; }
  .hero__actions .lbl-long { display: none; }
  .hero__actions .lbl-short { display: inline; }
  .hero-book__hint .icon { display: none; }
  .resume { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); }
}

/* ---------- reader ---------- */
.reader {
  /* a full-screen layer over the page: nothing behind it can scroll, so swipes
     only ever turn pages, and "Đóng" / Back returns to the landing page */
  position: fixed; inset: 0; z-index: 50; display: none;
  background: var(--c-black); color: var(--c-on-dark); overflow: hidden; overscroll-behavior: contain;
  grid-template-rows: auto minmax(0, 1fr) auto; isolation: isolate;
}
body[data-state="reading"] .reader { display: grid; }
body[data-state="reading"] .hero,
body[data-state="reading"] .contact { display: none; }
html:has(body[data-state="reading"]), body[data-state="reading"] { overflow: hidden; }
.reader__texture { position: absolute; z-index: -1; left: 0; bottom: 0; width: 70%; height: 70%; opacity: .32; pointer-events: none; }
.reader__texture--r { left: auto; right: 0; top: 0; bottom: auto; width: 55%; height: 55%; opacity: .2; }

.reader__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
  padding: var(--s-2) clamp(var(--s-3), 2vw, var(--s-5)); border-bottom: 1px solid var(--c-line-dark);
  background: rgba(10, 6, 4, .72); position: relative; z-index: 3;
}
.reader__brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; text-decoration: none; }
.reader__brand img { width: 118px; height: auto; }
.reader__brand .t-eyebrow { color: var(--c-on-dark-soft); white-space: nowrap; }
.reader__actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.reader__actions .sep { width: 1px; height: 20px; background: var(--c-line-dark); margin: 0 var(--s-2); }

.reader__close {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; margin-left: var(--s-3); padding: 0 var(--s-4);
  border: 1px solid var(--c-line-dark); border-radius: var(--radius); color: var(--c-on-dark);
  font: 600 .72rem/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.reader__close:hover { color: var(--c-orange); border-color: var(--c-orange); }
.reader__close .icon { width: 16px; height: 16px; }
.mode-toggle { display: inline-flex; border: 1px solid var(--c-line-dark); border-radius: var(--radius); padding: 2px; }
.mode-toggle button {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); height: 34px;
  font: 600 .72rem/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-on-dark-soft);
  border-radius: 1px; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mode-toggle button .icon { width: 17px; height: 17px; }
.mode-toggle button[aria-checked="true"] { background: var(--c-orange); color: var(--c-black); }
.mode-toggle button:not([aria-checked="true"]):hover { color: var(--c-on-dark); }

.reader__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; outline: none; }
.stage__views { position: absolute; inset: var(--stage-pad-y, 28px) var(--stage-pad-x, 72px); transition: opacity var(--t-med) var(--ease); }
.stage__nav {
  position: absolute; top: 50%; z-index: 4; width: 48px; height: 72px; margin-top: -36px;
  display: grid; place-items: center; color: var(--c-on-dark-soft); transition: color var(--t-fast) var(--ease), opacity var(--t-fast);
}
.stage__nav:hover { color: var(--c-orange); }
.stage__nav:disabled { opacity: 0; pointer-events: none; }
.stage__nav .icon { width: 30px; height: 30px; stroke-width: 1.2; }
.stage__nav--prev { left: var(--s-3); }
.stage__nav--next { right: var(--s-3); }

.reader__bottom { position: relative; z-index: 3; background: rgba(10, 6, 4, .72); border-top: 1px solid var(--c-line-dark); }
.progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; }
.progress__fill { height: 100%; width: 100%; background: var(--c-orange); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--t-med) var(--ease); }
.reader__controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
  padding: var(--s-2) clamp(var(--s-3), 2vw, var(--s-5));
}
.pager { display: flex; align-items: center; gap: var(--s-2); }
.pager__label { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-small); color: var(--c-on-dark-soft); white-space: nowrap; }
.pager__current { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--c-on-dark); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: center; }
.goto { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--c-on-dark-soft); }
.goto input {
  width: 3.4em; height: 32px; text-align: center; background: transparent; color: var(--c-on-dark);
  border: 0; border-bottom: 1px solid var(--c-line-dark); border-radius: 0; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.goto input::-webkit-outer-spin-button, .goto input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.goto input:focus { border-bottom-color: var(--c-orange); outline: none; }
.zoom-tools { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.zoom-tools .sep { width: 1px; height: 20px; background: var(--c-line-dark); margin: 0 6px; }
.zoom-tools__level { min-width: 3.5em; text-align: center; font-size: .75rem; color: var(--c-on-dark-soft); font-variant-numeric: tabular-nums; }

/* autoplay button progress ring */
.autoplay-ring { position: absolute; inset: 4px; pointer-events: none; opacity: 0; }
.autoplay-ring circle { fill: none; stroke: var(--c-orange); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; }
.is-autoplaying .autoplay-ring { opacity: 1; }
.is-autoplaying .autoplay-ring circle { animation: ring var(--autoplay-ms, 6000ms) linear infinite; }
.is-autoplay-paused .autoplay-ring circle { animation-play-state: paused; opacity: .4; }
@keyframes ring { to { stroke-dashoffset: 0; } }

/* ---------- pages (shared by 3D and 2D renderers) ---------- */
.pg { position: relative; overflow: hidden; background: var(--c-cream-light); }
.pg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity 220ms var(--ease); }
.pg__img.is-loaded { opacity: 1; }
.pg__img.is-split-left, .pg__img.is-split-right { width: 200%; max-width: none; object-fit: fill; }
.pg__img.is-split-right { left: -100%; }
.pg::after { /* soft gutter shadow, set per side by the renderer */
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; opacity: 0;
}
.pg--left::after { right: 0; opacity: 1; background: linear-gradient(to left, rgba(0, 0, 0, .20), rgba(0, 0, 0, .06) 35%, rgba(0, 0, 0, 0)); }
.pg--right::after { left: 0; opacity: 1; background: linear-gradient(to right, rgba(0, 0, 0, .22), rgba(0, 0, 0, .07) 35%, rgba(0, 0, 0, 0)); }
.pg__loading { position: absolute; left: 20%; right: 20%; top: 50%; height: 1px; background: var(--c-line); overflow: hidden; }
.pg__loading::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--c-orange); animation: pg-load 1.1s var(--ease-in-out) infinite; }
.pg__img.is-loaded ~ .pg__loading { display: none; }
@keyframes pg-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* 3D book (StPageFlip) */
.book3d { position: absolute; left: 50%; top: 50%; transition: transform 600ms var(--ease); }
.book3d .stf__wrapper { width: 100%; height: 100%; }
.book3d .stf__block { box-shadow: none; }
.book3d-shadow { position: absolute; pointer-events: none; box-shadow: var(--shadow-book); transition: left 600ms var(--ease), width 600ms var(--ease); }
.book3d .stf__item { background: var(--c-cream-light); }

/* 2D slides */
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; left: 50%; top: 50%; display: flex; will-change: transform, opacity;
  box-shadow: var(--shadow-book);
}
.slide.is-plain { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6); }

/* zoom layer */
.zoom { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: var(--c-black); touch-action: none; cursor: grab; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.zoom.is-open { opacity: 1; }
.zoom.is-panning { cursor: grabbing; }
.zoom__content { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.zoom__content.is-animating { transition: transform var(--t-med) var(--ease); }
.zoom__content .pg { position: absolute; top: 0; }
.zoom__hint {
  position: absolute; left: 50%; bottom: var(--s-4); transform: translateX(-50%); padding: var(--s-2) var(--s-4);
  background: rgba(10, 6, 4, .78); color: var(--c-on-dark); font-size: .8rem; pointer-events: none; white-space: nowrap;
  transition: opacity var(--t-med) var(--ease) 1.8s;
}
.zoom.is-open .zoom__hint { opacity: 0; }

/* fullscreen fallback (iPhone Safari has no element fullscreen) */
body.is-pseudo-fullscreen { overflow: hidden; }
body.is-pseudo-fullscreen .reader { z-index: 600; }
.reader:fullscreen { height: 100%; }
.reader:-webkit-full-screen { height: 100%; width: 100%; }

/* responsive reader */
@media (max-width: 1023px) {
  .stage__views { --stage-pad-x: 16px; --stage-pad-y: 16px; }
  .stage__nav { display: none; }
  .reader__brand .t-eyebrow { display: none; }
}
/* ---------- phone reader (matches phoneQuery in js/viewer.js) ---------- */
@media (max-width: 767px), (pointer: coarse) and (max-height: 520px) {
  /* one simple bar on top: logo, contents, share, PDF, close */
  .reader__top { grid-template-columns: auto 1fr; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); }
  .reader__brand img { width: 88px; }
  .reader__brand .t-eyebrow,
  .mode-toggle, .reader__actions .sep,
  [data-action="autoplay"], [data-action="fullscreen"],
  .stage__nav, .goto__label, .zoom-tools .sep, .zoom-tools__level, .zoom-tools .zoom-reset,
  .reader__controls [data-action="first"], .reader__controls [data-action="last"] { display: none !important; }
  .reader__actions { gap: 0; }
  .reader__close { margin-left: var(--s-1); padding: 0 var(--s-3); }
  .reader__controls { grid-template-columns: auto 1fr auto; padding: var(--s-1) var(--s-2) max(var(--s-1), env(safe-area-inset-bottom)); gap: var(--s-1); }
  .reader__controls .pager:nth-child(2) { justify-content: center; }
  /* 16px text: iPhone zooms the whole page when a smaller text box is focused */
  .goto { display: none !important; } /* phones pick a page from the number grid instead of typing */
  .stage__views { --stage-pad-x: 6px; --stage-pad-y: 10px; }
}
.strip {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip__slot { flex: 0 0 100%; display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.strip .pg { box-shadow: var(--shadow-book); }
.zoom__close {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; display: none; align-items: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-4); background: rgba(10, 6, 4, .85); color: var(--c-on-dark);
  border: 1px solid var(--c-line-dark); font: 600 .72rem/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 767px), (pointer: coarse) { .zoom__close { display: inline-flex; } }
@media (max-width: 359px) {
  .mode-toggle button .icon { display: none; }
}
/* ---------- contact section (back cover) ---------- */
.contact {
  position: relative; background: var(--c-cream); color: var(--c-ink); overflow: hidden;
  /* a full screen of its own, like the back cover (never half hero / half cream) */
  min-height: 100vh; min-height: calc(var(--lvh) * 100); display: flex; flex-direction: column;
}
.contact__inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.contact .site-foot { width: 100%; }
/* scrolling settles on a whole screen: the landing or the back cover */
html:has(body[data-state="landing"]) { scroll-snap-type: y proximity; }
.hero { scroll-snap-align: start; }
.contact { scroll-snap-align: end; } /* bottom edge on the screen edge: no hero strip above it */
.contact__divider { height: 120px; flex: none; }
@media (max-width: 600px) {
  .contact__divider { height: 56px; }
  .contact__inner { padding-top: 0; padding-bottom: var(--s-4); }
  .contact__cover { padding: var(--s-4) 0; }
  .contact__logos { margin-bottom: var(--s-6); gap: var(--s-5); }
  .contact__lines { flex-direction: column; align-items: center; font-size: .88rem; }
  .contact .site-foot { padding-top: var(--s-3); padding-bottom: max(var(--s-3), env(safe-area-inset-bottom)); flex-direction: column; gap: var(--s-1); text-align: center; }
}
.contact__divider .wave { opacity: .9; }
.contact__inner { max-width: 1120px; margin: 0 auto; padding: var(--s-5) clamp(var(--s-4), 5vw, var(--s-8)) var(--s-7); }
.contact__cover { text-align: center; padding: var(--s-6) 0; position: relative; }
.contact__logos { display: flex; justify-content: center; align-items: center; gap: clamp(var(--s-5), 6vw, var(--s-8)); flex-wrap: wrap; margin-bottom: var(--s-8); }
.contact__logos .ree { width: clamp(84px, 10vw, 118px); height: auto; }
.contact__logos .tls { width: clamp(200px, 26vw, 300px); height: auto; }
.contact__company { font-size: clamp(1.15rem, .9rem + 1.1vw, 1.75rem); color: #58595B; margin: 0 0 var(--s-4); }
.contact__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); font-size: .95rem; color: #58595B; }
.contact__lines li { display: inline-flex; align-items: center; gap: var(--s-2); }
.contact__lines .icon { width: 16px; height: 16px; stroke-width: 1.3; }
.contact__lines a { text-decoration: none; }
.contact__lines a:hover { color: var(--c-orange); }
.contact__lines .full { flex-basis: 100%; justify-content: center; }
.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) clamp(var(--s-4), 5vw, var(--s-8)); border-top: 1px solid var(--c-line); max-width: 1120px; margin: 0 auto; font-size: .78rem; color: var(--c-ink-soft); }

/* ---------- dialogs ---------- */
dialog {
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0; max-width: calc(100vw - 32px);
  background: var(--c-cream); color: var(--c-ink);
}
dialog::backdrop { background: rgba(10, 6, 4, .72); }
dialog[open] { animation: dlg-in var(--t-med) var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px); } }
.dlg { width: 480px; }
.dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-5) 0; }
.dlg__head h2 { font-size: var(--fs-h2); color: var(--c-black); }
.dlg__head .t-sub { font-size: 1.05rem; margin-top: var(--s-1); }
.dlg__body { padding: var(--s-5); }
.share-link { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.share-link input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--s-3); border: 1px solid var(--c-line); background: var(--c-cream-light); border-radius: var(--radius); font-size: .9rem; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s-2); }
.share-grid .btn { color: var(--c-black); }
.zalo-mark { font: 800 .7rem/1 var(--f-sans); letter-spacing: .02em; }
.share-grid .btn--ghost { border-color: var(--c-line); }
.share-grid .btn--ghost:hover { border-color: var(--c-orange); color: var(--c-brown); }

/* thumbnails drawer */
.drawer { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(calc(var(--vh) * 100) - 32px); }
.drawer[open] { display: flex; flex-direction: column; }
.drawer .dlg__body { overflow: auto; overscroll-behavior: contain; }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s-5) var(--s-4); }
.thumbs button { display: grid; gap: var(--s-2); width: 100%; text-align: left; }
.thumbs__img { position: relative; aspect-ratio: 2481 / 3508; background: var(--c-cream-light); border: 1px solid var(--c-line); overflow: hidden; transition: border-color var(--t-fast); }
.thumbs__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumbs__img img.is-split-left, .thumbs__img img.is-split-right { width: 200%; max-width: none; object-fit: fill; }
.thumbs__img img.is-split-right { left: -100%; }
.thumbs button:hover .thumbs__img { border-color: var(--c-orange); }
.thumbs [aria-current="page"] .thumbs__img { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.thumbs__meta { display: grid; gap: 0; font-size: .78rem; line-height: 1.35; }
.thumbs__meta b { font: 800 .95rem/1.2 var(--f-display); color: var(--c-black); }
.thumbs__meta span { color: var(--c-ink-soft); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 950; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--c-black); color: var(--c-on-dark); padding: var(--s-3) var(--s-5); border-left: 2px solid var(--c-orange);
  font-size: .9rem; max-width: calc(100vw - 32px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* page-number picker */
button.pager__label { padding: var(--s-1) var(--s-2); border-radius: var(--radius); }
button.pager__label:hover .pager__current { color: var(--c-orange); }
.pick { width: 420px; }
.pick__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.pick__grid button {
  height: 48px; border: 1px solid var(--c-line); background: var(--c-cream-light); color: var(--c-black);
  font: 800 1.05rem/1 var(--f-display); font-variant-numeric: tabular-nums; border-radius: var(--radius);
}
.pick__grid button:hover { border-color: var(--c-orange); }
.pick__grid button[aria-current="page"] { background: var(--c-orange); border-color: var(--c-orange); }