/* ==========================================================================
   Sao Xanh · bản GSAP
   Bố cục và màu giống bản thuần (../sao-xanh). Khác biệt: mọi chuyển động do GSAP
   điều khiển, nên ở đây không còn transition cho các trạng thái hiện/ẩn, pin hay
   parallax. Màu vẫn đổi theo --n (0 = ngày, 1 = đêm) do js/core.js đặt.
   ========================================================================== */

:root {
  --n: 0;
  --blue: #2148d6;
  --paper-d: #e9ecf5;  --paper-n: #081433;
  --ink-d:   #2148d6;  --ink-n:   #e6ecff;
  --mute-d:  #6a7bbd;  --mute-n:  #93a3dc;
  --card-d:  #f5f6fb;  --card-n:  #10204f;

  --paper: color-mix(in oklab, var(--paper-d), var(--paper-n) calc(var(--n) * 100%));
  --ink:   color-mix(in oklab, var(--ink-d),   var(--ink-n)   calc(var(--n) * 100%));
  --mute:  color-mix(in oklab, var(--mute-d),  var(--mute-n)  calc(var(--n) * 100%));
  --card:  color-mix(in oklab, var(--card-d),  var(--card-n)  calc(var(--n) * 100%));
  --faint: color-mix(in oklab, var(--ink) 24%, transparent);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --pad: clamp(20px, 6vw, 96px);
  --bar: 60px;
  color-scheme: light;
}
@supports not (color: color-mix(in oklab, red, blue)) {
  :root { --paper: var(--paper-d); --ink: var(--ink-d); --mute: var(--mute-d); --card: var(--card-d); --faint: rgba(33, 72, 214, .24); }
  :root.is-night { --paper: var(--paper-n); --ink: var(--ink-n); --mute: var(--mute-n); --card: var(--card-n); --faint: rgba(230, 236, 255, .24); }
}
:root.is-night { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--paper); }
.js body.is-loading { overflow: hidden; }

/* Lenis (lấy từ lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Trước khi JS đặt trạng thái đầu cho phần mở đầu thì giấu đi, tránh nháy (FOUC) */
.js .hero { visibility: hidden; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 99px; text-decoration: none; }
.skip:focus { top: 12px; }

.label {
  font: 500 10.5px/1.5 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}
.title {
  font: 300 clamp(58px, 9.4vw, 156px)/.92 var(--serif);
  letter-spacing: -.015em;
  margin: .1em 0 0;
}
em { font-style: italic; }

/* ---------- chữ tách từng ký tự (SplitText) ----------
   SplitText bọc mỗi ký tự .ch trong .ch-mask (overflow: clip). Nới mặt nạ lên trên
   và xuống dưới để dấu tiếng Việt (ờ, ễ, ậ…) không bị cắt. */
.ch-mask { padding: .18em .03em .1em; margin: -.18em -.03em -.1em; }

/* ---------- nền bầu trời ---------- */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.sky-fallback { display: none; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 22% 30%, color-mix(in oklab, var(--mute) 30%, transparent), transparent 70%),
    radial-gradient(36vmax 28vmax at 78% 70%, color-mix(in oklab, var(--mute) 26%, transparent), transparent 70%),
    var(--paper);
}
.no-gl .sky { display: none; }
.no-gl .sky-fallback { display: block; }

/* ==========================================================================
   Màn chờ
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; color: #fff; }
.no-loader .loader, .loader.is-done { display: none; }
.loader-veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-veil path { fill: var(--blue); fill-rule: evenodd; }
.loader-moon { position: relative; display: grid; justify-items: center; gap: 10px; transition: opacity .5s; }
.loader-moon svg { width: 132px; height: 132px; overflow: visible; }
.moon-ring { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .8; stroke-dasharray: 1.6 3.2; }
.moon-dark { fill: rgba(255, 255, 255, .12); }
.moon-lit { fill: #f4f6ff; }
.moon-star { fill: #fff; }
.loader-pct { margin: 6px 0 0; font: 300 30px/1 var(--serif); font-variant-numeric: tabular-nums; }
.loader-pct small { font: 500 10px var(--sans); margin-left: 3px; letter-spacing: .1em; }
.loader-cap { margin: 0; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }

/* ==========================================================================
   Thanh trên cùng, menu, khung toạ độ
   ========================================================================== */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
  padding: 0 clamp(16px, 2.6vw, 40px);
  color: var(--ink);
}
.bar::before { content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--paper) 35%, color-mix(in oklab, var(--paper) 0%, transparent));
  opacity: var(--bar-bg, 0); transition: opacity .4s; }
.brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font: 400 22px/1 var(--serif); }
.brand svg { width: 11px; height: 11px; fill: currentColor; transition: rotate .8s var(--ease); }
.brand:hover svg { rotate: 90deg; }
.bar-meta { display: flex; gap: 18px; margin: 0; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.bar-meta span + span::before { content: '·'; margin-right: 18px; opacity: .6; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav a { position: relative; text-decoration: none; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 8px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav .nav-cta { padding: 8px 16px; border: 1px solid currentColor; border-radius: 99px; }
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover, .nav .nav-cta.is-active { background: var(--ink); color: var(--paper); }

.theme { display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.theme-knob { position: relative; width: 34px; height: 18px; border: 1px solid currentColor; border-radius: 99px; }
.theme-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transition: translate .5s var(--ease); }
[data-theme="night"] .theme-knob::after { translate: 16px 0; box-shadow: inset 3px -2px 0 0 var(--paper); }
.theme-day, .theme-night { opacity: .45; transition: opacity .3s; }
[data-theme="day"] .theme-day, [data-theme="night"] .theme-night { opacity: 1; }

.menu-btn { display: none; margin-left: auto; padding: 8px 16px; border: 1px solid currentColor; border-radius: 99px; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 18px 20px 28px; background: var(--blue); color: #f2f5ff; }
.menu[hidden] { display: none; }
.menu-head { display: flex; justify-content: space-between; align-items: center; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.menu-close { padding: 8px 16px; border: 1px solid currentColor; border-radius: 99px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.menu nav { margin: auto 0; display: grid; gap: 4px; }
.menu nav a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font: 300 clamp(40px, 11vw, 64px)/1.15 var(--serif); opacity: 0; translate: 0 20px; transition: opacity .6s var(--ease), translate .7s var(--ease); transition-delay: calc(var(--i) * 50ms + 80ms); }
.menu nav a i { font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .14em; opacity: .7; }
.menu.is-open nav a { opacity: 1; translate: none; }
.theme-lg { align-self: flex-start; font-size: 11px; }

.rail { position: fixed; inset: 0; z-index: 40; pointer-events: none; color: var(--ink); }
.rail-left, .rail-right { position: absolute; top: 50%; writing-mode: vertical-rl; display: flex; gap: 14px; font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.rail-left { left: 18px; transform: translateY(-50%) rotate(180deg); }
.rail-right { right: 18px; transform: translateY(-50%); opacity: .7; }
.rail-no { opacity: .6; }
.rail-track { position: absolute; left: 21px; top: calc(50% + 90px); height: 18vh; width: 1px; background: var(--faint); }
.rail-track i { position: absolute; left: -4px; top: calc(var(--rp, 0) * 100%); width: 9px; height: 9px; translate: 0 -50%;
  background: currentColor; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

.music { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--faint); color: var(--ink); display: grid; place-items: center; }
.music svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.music[aria-pressed="true"] svg path { animation: eq 1s ease-in-out infinite alternate; transform-origin: center; }
@keyframes eq { to { transform: scaleY(.4); } }

/* ==========================================================================
   00 · Mở đầu
   ========================================================================== */
.hero { position: relative; height: max(100svh, 620px); overflow: clip; }
.hero-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-arch { position: relative; margin: 0; width: clamp(200px, 23vw, 380px); aspect-ratio: 2 / 3; z-index: 2; translate: 0 4svh; }
.arch-clip { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50% 50% 0 0 / 33.34% 33.34% 0 0; background: color-mix(in oklab, var(--ink) 14%, transparent); }
.arch-clip img { width: 100%; height: 100%; object-fit: cover; }
.hero-arch::before { content: ''; position: absolute; inset: -12px -12px 0; border: 1px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 33% 33% 0 0; opacity: .6; }
.hero-orbit { position: absolute; left: 50%; top: 56%; width: 190%; translate: -50% -50%; rotate: -16deg; overflow: visible; pointer-events: none; }
.orbit-path { fill: none; stroke: var(--ink); stroke-width: .5; }
.orbit-star { fill: var(--ink); }

.hero-names { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 3; font-weight: 300; }
.hero-name { position: absolute; font: 300 clamp(84px, 17vw, 300px)/.8 var(--serif); letter-spacing: -.03em; }
.hero-name-a { left: 6.5vw; top: 19%; }
.hero-name-b { right: 6vw; bottom: 14%; }
.hero-amp { position: absolute; left: 50%; top: 52%; translate: -50% -50%; z-index: 4; font: italic 300 clamp(48px, 7vw, 120px)/1 var(--serif); color: #fff; text-shadow: 0 2px 30px rgba(10, 20, 60, .35); opacity: .95; }

.hero-kicker { position: absolute; left: 6.5vw; top: calc(var(--bar) + 4svh); display: grid; gap: 2px; }
.hero-save { position: absolute; left: 6.5vw; top: calc(var(--bar) + 4svh + 44px); opacity: .6; text-transform: none; letter-spacing: .08em; }
.hero-note { position: absolute; right: 6vw; top: calc(var(--bar) + 4svh); margin: 0; text-align: right; font: italic 400 clamp(18px, 1.7vw, 24px)/1.25 var(--serif); }
.hero-date { position: absolute; left: 6.5vw; bottom: 5svh; }
.hero-dmy { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 300 clamp(28px, 2.6vw, 40px)/1 var(--serif); }
.hero-dmy b { font-weight: 300; }
.hero-dmy i { width: 22px; height: 1px; background: currentColor; opacity: .6; }
.hero-scroll { position: absolute; right: 6vw; bottom: 5svh; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.hero-scroll i { position: relative; width: 1px; height: 54px; background: var(--faint); overflow: hidden; }
.hero-scroll i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: currentColor; animation: drop 2.2s var(--ease-io) infinite; }
@keyframes drop { to { top: 100%; } }


.twinkles { position: absolute; inset: 0; pointer-events: none; }
.twinkles svg, .bigdate-stars svg { position: absolute; translate: -50% -50%; overflow: visible; }
.twinkles path, .bigdate-stars path { fill: var(--ink); }

/* ---------- vùng ghim khi cuộn ----------
   ScrollTrigger (pin: true) giữ section đứng yên và tự chèn khoảng trống phía dưới,
   nên section chỉ cần cao đúng một màn hình. */
.pin, .story { position: relative; height: 100svh; }
.pin-inner { position: relative; height: 100%; overflow: clip; }

/* ==========================================================================
   01 · Lời mời
   ========================================================================== */
.chart { position: absolute; left: 50%; top: 50%; width: min(96vw, 128svh); translate: -50% -50%; overflow: visible; }
.chart circle, .chart line, .chart path.ln { fill: none; stroke: var(--ink); stroke-width: .5; }
.chart .tk { stroke-width: .4; }
.chart .dashed { stroke-dasharray: 2 4; }
.chart .st { fill: var(--ink); stroke: none; }
.chart text { fill: var(--ink); font: 500 5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.invite-head { position: absolute; left: 8vw; top: calc(var(--bar) + 10svh); }
.invite-text { position: absolute; right: 8vw; top: 52%; translate: 0 -50%; width: min(500px, 86vw); font: 400 clamp(21px, 1.9vw, 29px)/1.5 var(--serif); }
.invite-text p { margin: 0; text-wrap: pretty; }
.invite-sign { margin-top: 1.2em !important; display: grid; gap: 6px; }
.invite-sign span { font: 500 10.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.invite-sign em { font: italic 300 clamp(40px, 4vw, 64px)/1 var(--serif); }

/* ==========================================================================
   02 · Chúng mình
   ========================================================================== */
.about { position: relative; padding: 24svh var(--pad) 8svh; }
.sec-head { position: relative; z-index: 2; text-align: center; margin-bottom: 12svh; }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.trail-path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.trail-star { fill: var(--ink); }
.people { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; max-width: 1120px; margin: 0 auto; }
.person-b { margin-top: 26svh; }
.person-photo { margin: 0 0 28px; width: 100%; max-width: 420px; aspect-ratio: 2 / 3; }
.person-b .person-photo { margin-left: auto; }
.person-photo img { height: 124%; object-fit: cover; }
.chip { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.person-name { margin: 0 0 22px; font: 300 clamp(52px, 6.4vw, 104px)/.88 var(--serif); letter-spacing: -.02em; }
.facts { list-style: none; margin: 0; padding: 0; max-width: 420px; }
.facts li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--faint); font-size: 14px; line-height: 1.55; }
.facts b { font: 500 10px/2 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.person-b .person-name, .person-b .chip { margin-left: 0; }

.wide { position: relative; z-index: 2; margin: 22svh auto 0; max-width: 1400px; }
.wide-clip { aspect-ratio: 3 / 2; overflow: hidden; }
.wide-clip img { width: 100%; height: 100%; object-fit: cover; }
.wide figcaption { display: flex; justify-content: space-between; margin-top: 14px; }

/* ==========================================================================
   Chòm sao
   ========================================================================== */
.constel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.constel-svg .bg { fill: var(--ink); }
.constel-svg .edge { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.constel-svg .node { fill: var(--ink); }
.constel-svg .halo { fill: none; stroke: var(--ink); stroke-width: .8; }
.constel-svg text { fill: var(--ink); font: 500 10px var(--sans); letter-spacing: .16em; }
.constel-line { position: absolute; margin: 0; font: 300 clamp(46px, 7.4vw, 128px)/.95 var(--serif); letter-spacing: -.02em; }
.cl-1 { left: 8vw; top: calc(var(--bar) + 8svh); }
.cl-2 { right: 8vw; top: calc(var(--bar) + 17svh); text-align: right; }
.cl-3 { left: 10vw; bottom: 10svh; }

/* ==========================================================================
   03 · Chuyện tình (cuộn ngang)
   ========================================================================== */
.story-head { position: absolute; left: var(--pad); top: calc(var(--bar) + 3svh); z-index: 3; }
.story-head .title { font-size: clamp(42px, 5vw, 84px); }
.story-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; will-change: transform; }
.chapter { flex: 0 0 auto; width: min(78vw, 1000px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(28px, 4vw, 64px); padding-right: 8vw; }
.ch-photo { position: relative; margin: 0; width: clamp(220px, 30vw, 460px); aspect-ratio: 1; transition: scale 1s var(--ease), opacity 1s var(--ease), filter 1s var(--ease); scale: .82; opacity: .45; filter: grayscale(1); }
.ch-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ch-photo svg { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); overflow: visible; rotate: -90deg; }
.ch-photo circle { fill: none; stroke: var(--ink); stroke-width: .6; stroke-dasharray: 616; stroke-dashoffset: 616; transition: stroke-dashoffset 1.6s var(--ease); }
.chapter.is-active .ch-photo { scale: 1; opacity: 1; filter: none; }
.chapter.is-active .ch-photo circle { stroke-dashoffset: 0; }
.ch-photo .ring-star { fill: var(--ink); opacity: 0; transition: opacity .6s .8s; }
.chapter.is-active .ch-photo .ring-star { opacity: 1; }
.chapter.is-active .ch-photo svg { animation: ring 16s linear infinite; }
@keyframes ring { from { rotate: -90deg; } to { rotate: 270deg; } }
.ch-text { max-width: 380px; }
.ch-text p { margin: 0 0 14px; }
.ch-year { font: 300 clamp(70px, 9vw, 150px)/.85 var(--serif) !important; letter-spacing: -.03em; margin-bottom: 10px !important; }
.ch-title { margin: 0 0 14px; font: italic 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); }
.ch-where { opacity: .7; display: flex; align-items: center; gap: 10px; }
.ch-where::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.ch-text > * { transition: opacity .8s var(--ease), translate .8s var(--ease); }
.chapter:not(.is-active) .ch-text > * { opacity: .25; translate: 0 10px; }

.story-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 4svh; z-index: 3; display: flex; align-items: center; gap: 4vw; }
.timeline { position: relative; flex: 1; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--faint); }
.timeline::after { background: var(--ink); transform-origin: left; transform: scaleX(var(--tp, 0)); }
.timeline li { position: relative; z-index: 1; }
.timeline button { display: grid; justify-items: center; gap: 6px; padding: 18px 4px 0; font: 500 10px/1 var(--sans); letter-spacing: .12em; }
.timeline button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; translate: -50% -50%; margin-top: -9px; background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; transition: background .3s, scale .3s; }
.timeline .is-on button::before { background: var(--ink); }
.timeline .is-cur button::before { scale: 1.6; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); background: var(--ink); }
.timeline button span { opacity: .55; transition: opacity .3s; }
.timeline .is-cur button span { opacity: 1; }
.timeline { top: -9px; }
.story-ctl { display: flex; gap: 8px; }
.story-ctl button, .story-ctl a { padding: 9px 14px; border: 1px solid var(--faint); border-radius: 99px; font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.story-ctl button:hover, .story-ctl a:hover { border-color: currentColor; }
.story-ctl [aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.story-ctl [aria-pressed="true"] .play-off, .story-ctl [aria-pressed="false"] .play-on { display: none; }

/* ==========================================================================
   Chuyển sang đêm
   ========================================================================== */
.moon { position: absolute; right: 14vw; top: 50%; width: clamp(110px, 16vmin, 190px); aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset -.2em .12em 0 0 #f3f1e8; font-size: clamp(110px, 16vmin, 190px);
  filter: drop-shadow(0 0 30px rgba(220, 230, 255, .35)); }
.dusk-text { position: absolute; left: 10vw; top: 50%; translate: 0 -50%; font: 300 clamp(40px, 6.2vw, 108px)/1.04 var(--serif); letter-spacing: -.02em; }
.dusk-text p { margin: 0; text-wrap: balance; }

/* ==========================================================================
   04 · Hôn lễ
   ========================================================================== */
.wed { position: relative; padding: 18svh var(--pad) 16svh; max-width: 1240px; margin: 0 auto; }
.wed .sec-head, .notes .sec-head, .rsvp .sec-head { text-align: left; margin-bottom: 8svh; }
.bigdate { position: relative; margin: 0 0 10svh; }
.bigdate-num { margin: 0; display: flex; align-items: baseline; font: 300 clamp(76px, 16vw, 270px)/.86 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.bigdate-num i { font-style: italic; opacity: .6; margin: 0 -.02em; }
/* mỗi chữ số là một cột 0–9 trượt lên tới số đúng (js/wed.js) */
.roll { display: inline-block; height: .86em; overflow: clip; vertical-align: top; }
.roll > span { display: flex; flex-direction: column; }
.roll > span > b { display: block; height: .86em; font-weight: 300; }
.bigdate-day { margin: 10px 0 0; text-align: right; font: italic 300 clamp(30px, 3.4vw, 54px)/1 var(--serif); }
.bigdate-stars { position: absolute; inset: -12% -4%; pointer-events: none; }

.schedule { list-style: none; margin: 0 0 10svh; padding: 0; max-width: 760px; }
.schedule li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; font: 300 clamp(28px, 3vw, 46px)/1.1 var(--serif); }
.schedule i { flex: 1; border-bottom: 1px dotted var(--faint); translate: 0 -.25em; }
.schedule time { font-variant-numeric: tabular-nums; }

.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin: 0 0 12svh; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.countdown div { padding: 22px 0 18px; display: grid; gap: 4px; justify-items: center; }
.countdown div + div { border-left: 1px solid var(--faint); }
.countdown b { font: 300 clamp(40px, 5vw, 76px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.countdown small { font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

.venue { margin: 0 0 10svh; margin-left: auto; max-width: 620px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--faint); border-radius: 30px; background: color-mix(in oklab, var(--card) 70%, transparent); backdrop-filter: blur(6px); }
.venue-name { margin: 14px 0 12px; font: 300 clamp(36px, 3.6vw, 56px)/1 var(--serif); }
.venue-addr { margin: 0 0 26px; }
.venue-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.families { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4vw; max-width: 760px; margin: 0 auto; text-align: center; font: 400 clamp(20px, 1.8vw, 26px)/1.5 var(--serif); }
.families p { margin: 0; }
.families .label { margin-bottom: 10px; font-family: var(--sans); }
.families svg { width: 20px; fill: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 99px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, translate .3s; }
.btn:hover { translate: 0 -2px; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   05 · Lưu ý
   ========================================================================== */
.notes { padding: 10svh var(--pad) 14svh; max-width: 1240px; margin: 0 auto; }
.note-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.note { padding-top: 20px; border-top: 1px solid var(--ink); }
.note-no { margin: 0 0 8px; font: italic 300 40px/1 var(--serif); }
.note h3 { margin: 0 0 12px; font: 400 clamp(26px, 2.2vw, 34px)/1.1 var(--serif); }
.note p { margin: 0; }

/* ==========================================================================
   06 · Hồi đáp
   ========================================================================== */
.rsvp { padding: 14svh var(--pad) 16svh; max-width: 1240px; margin: 0 auto; }
.rsvp-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rsvp-intro { position: sticky; top: calc(var(--bar) + 6svh); font: 400 clamp(21px, 1.9vw, 28px)/1.45 var(--serif); }
.rsvp-intro p { margin: 0 0 1em; }

.form, .thanks { --ink: var(--blue); --faint: rgba(33, 72, 214, .26); --paper: #f3f5fc; color: var(--blue); background: #f3f5fc; border-radius: 34px; padding: clamp(26px, 4vw, 52px); box-shadow: 0 40px 80px -40px rgba(4, 14, 50, .45); }
.form { display: grid; gap: 30px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend, .f-label { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 12px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.form legend i, .f-label i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--faint); border-radius: 50%; font-size: 9px; letter-spacing: 0; }
.f-label small { text-transform: none; letter-spacing: .04em; opacity: .7; }
.field { display: block; }
.field input, .field textarea, .stepper input {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--faint); border-radius: 0; background: transparent; color: var(--blue);
  font: 400 16px/1.5 var(--sans); transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus, .stepper input:focus { outline: none; border-bottom-color: var(--blue); }
.field ::placeholder { color: rgba(33, 72, 214, .38); }
.field.is-bad input { border-bottom-color: #d33c2f; }

.f-attend { display: flex; flex-wrap: wrap; gap: 16px; }
.f-attend legend { width: 100%; }
.bubble { position: relative; cursor: pointer; }
.bubble input, .f-chips input, .check input { position: absolute; opacity: 0; pointer-events: none; }
.bubble span { display: grid; place-content: center; text-align: center; gap: 2px; width: clamp(118px, 12vw, 140px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--blue); transition: background .4s var(--ease), color .4s, border-style .4s, rotate .6s var(--ease); }
.bubble b { font: 400 24px/1 var(--serif); }
.bubble small { font: 500 9px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.bubble input:checked + span { background: var(--blue); color: #f3f5fc; border-style: solid; rotate: -8deg; }
.bubble input:focus-visible + span { outline: 1.5px solid var(--blue); outline-offset: 4px; }
.f-attend.is-bad .bubble span { border-color: #d33c2f; }

.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-chips legend { width: 100%; }
.f-chips label { cursor: pointer; }
.f-chips span { display: inline-block; padding: 10px 16px; border: 1px solid var(--faint); border-radius: 99px; font: 400 14px/1 var(--sans); transition: background .3s, color .3s, border-color .3s; }
.f-chips input:checked + span { background: var(--blue); color: #f3f5fc; border-color: var(--blue); }
.f-chips input:focus-visible + span { outline: 1.5px solid var(--blue); outline-offset: 3px; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--faint); border-radius: 99px; }
.stepper button { width: 44px; height: 44px; font-size: 20px; }
.stepper input { width: 46px; text-align: center; border: 0; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.check { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.check span::before { content: ''; display: inline-block; vertical-align: -5px; width: 20px; height: 20px; margin-right: 12px; border: 1px solid var(--blue); border-radius: 6px; transition: background .3s; }
.check input:checked + span::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23f3f5fc' stroke-width='2'/%3E%3C/svg%3E") center/contain; }
.check input:focus-visible + span::before { outline: 1.5px solid var(--blue); outline-offset: 3px; }

[data-when-attend] { transition: opacity .4s; }
.form.is-no [data-when-attend] { display: none; }
.form-error { margin: -10px 0 0; color: #d33c2f; font-size: 14px; }
.btn-send { width: 100%; padding: 18px; background: var(--blue); color: #f3f5fc; border-color: var(--blue); font-size: 11px; }
.btn-send[disabled] { opacity: .6; cursor: progress; }
.form-demo { margin: -12px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .75; }
.form-demo code { font-size: 11.5px; }

.thanks { display: grid; justify-items: center; text-align: center; gap: 8px; padding-block: clamp(48px, 7vw, 90px); }
.thanks[hidden] { display: none; }
.thanks svg { width: 46px; fill: var(--blue); animation: spin 6s linear infinite; }
.thanks h3 { margin: 8px 0 0; font: 300 clamp(40px, 4vw, 60px)/1 var(--serif); }
.thanks p { margin: 0 0 18px; max-width: 34ch; }
@keyframes spin { to { rotate: 360deg; } }

/* ==========================================================================
   Chân trang & ghi công
   ========================================================================== */
.foot { padding: 18svh var(--pad) 32px; text-align: center; }
.foot-thanks { margin: 0 0 6svh; font: italic 400 clamp(20px, 1.8vw, 26px)/1.5 var(--serif); }
.foot-names { margin: 0 0 10svh; font: 300 clamp(70px, 14vw, 240px)/.9 var(--serif); letter-spacing: -.03em; white-space: nowrap; }
.foot-names em { font-weight: 300; opacity: .7; }
.foot-row { display: flex; justify-content: space-between; align-items: center; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border-top: 1px solid var(--faint); padding-top: 18px; }
.link { font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.credits { width: min(560px, calc(100vw - 32px)); padding: clamp(26px, 4vw, 44px); border: 0; border-radius: 30px; background: #f3f5fc; color: var(--blue); }
.credits::backdrop { background: rgba(6, 14, 44, .5); backdrop-filter: blur(6px); }
.credits[open] { animation: pop .5s var(--ease); }
@keyframes pop { from { opacity: 0; translate: 0 20px; } }
.credits h2 { margin: 0 0 20px; font: 300 44px/1 var(--serif); }
.credits dl { display: grid; grid-template-columns: 110px 1fr; gap: 12px 18px; margin: 0 0 26px; font-size: 14px; }
.credits dt { font: 500 10px/2 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.credits dd { margin: 0; }
.credits .btn-ghost { --ink: var(--blue); --paper: #f3f5fc; }

/* ==========================================================================
   Màn hình nhỏ
   ========================================================================== */
@media (max-width: 1100px) {
  .bar-meta { display: none; }
}
@media (max-width: 900px) {
  :root { --bar: 56px; }
  .nav, .bar > .theme, .rail { display: none; }
  .menu-btn { display: inline-block; }
  .note-list { grid-template-columns: 1fr; }
  .rsvp-grid { grid-template-columns: 1fr; }
  .rsvp-intro { position: static; }
}
@media (max-width: 700px) {
  .hero-arch { width: 58vw; translate: 0 2svh; }
  .hero-name { font-size: 27vw; }
  .hero-name-a { left: 5vw; top: 15%; }
  .hero-name-b { right: 5vw; bottom: 17%; }
  .hero-note { display: none; }
  .hero-kicker { left: 5vw; }
  .hero-save { display: none; }
  .hero-date { left: 5vw; bottom: 3.5svh; }
  .hero-scroll { right: 5vw; bottom: 3.5svh; }
  .hero-scroll span { display: none; }

  .invite-head { left: 6vw; top: calc(var(--bar) + 5svh); }
  .invite-text { left: 6vw; right: 6vw; width: auto; top: auto; bottom: 8svh; translate: none; font-size: 19px; }

  .sec-head { margin-bottom: 8svh; }
  .people { grid-template-columns: 1fr; gap: 12svh; }
  .person-b { margin-top: 0; }
  .person-photo { width: 78%; }
  .person-b .person-photo { margin-left: auto; }
  .person-b { text-align: right; }
  .person-b .facts { margin-left: auto; text-align: left; }
  .wide-clip { aspect-ratio: 4 / 5; }

  .cl-1 { left: 6vw; top: calc(var(--bar) + 4svh); }
  .cl-2 { right: 6vw; top: calc(var(--bar) + 10svh); }
  .cl-3 { left: 6vw; right: 6vw; bottom: 6svh; }

  .story-head { top: calc(var(--bar) + 1svh); }
  .story-track { padding-left: 7vw; }
  .chapter { width: 86vw; grid-template-columns: 1fr; gap: 18px; padding-right: 6vw; align-content: center; }
  .ch-photo { width: min(60vw, 34svh); justify-self: center; }
  .ch-year { font-size: 64px !important; }
  .ch-title { font-size: 26px; }
  .ch-text { font-size: 14px; }
  .chapter:not(.is-active) .ch-text > * { opacity: 0; }
  .story-foot { flex-direction: column; align-items: stretch; gap: 14px; bottom: 2.5svh; }
  .timeline button span { font-size: 0; }
  .timeline .is-cur button span { font-size: 10px; position: absolute; top: 26px; white-space: nowrap; }
  .story-ctl { justify-content: center; flex-wrap: wrap; }

  .moon { right: 8vw; top: 26%; }
  .dusk-text { left: 6vw; right: 6vw; top: auto; bottom: 14svh; translate: none; font-size: 10.4vw; line-height: 1.1; }

  .bigdate-num { font-size: 19.5vw; }
  .countdown b { font-size: 36px; }
  .families { grid-template-columns: 1fr; gap: 20px; }
  .families svg { justify-self: center; }
  .foot-row { flex-wrap: wrap; gap: 14px; justify-content: center; }
  .foot-names { font-size: 15.5vw; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hero-name { font-size: 20vh; }
  .ch-photo { width: 46vh; }
}

/* ==========================================================================
   Giảm chuyển động
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}