:root{
  --night:#0D1130; --indigo:#13294B; --wine:#571432; --oxblood:#2B0A14; --lacquer:#8C1420; --jade:#0C3A38; --plum:#1F1030;
  --gold:#E2B653; --gold-soft:#F4DDA0; --gold-deep:#A9812B; --pink:#F4A3BC; --pink-soft:#FBD5E0; --thread:#FF5468;
  --paper:#FBF0DC; --ink:#2A1712; --text:#FFF3E0; --muted:rgba(255,243,224,.72); --line:rgba(226,182,83,.38);
  --display:"Fraunces","Noto Serif",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --han:"Noto Serif SC","Songti SC","Hiragino Mincho ProN","SimSun",serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%;height:100%}
html.locked,html.noscroll{overflow:hidden}
body{margin:0;min-height:100%;background:#0D1130;color:var(--text);font:400 1rem/1.7 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,blockquote,figure,ul,ol{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.han{font-family:var(--han);font-weight:900}
main{position:relative;z-index:1}
.h2{font:italic 300 clamp(2rem,5vw,3.7rem)/1.1 var(--display);text-wrap:balance}
.lead{color:var(--muted);max-width:44ch;font-size:clamp(1rem,1.3vw,1.1rem)}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.9em 1.7em;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);font:600 .95rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(226,182,83,.28)}
.btn.ghost{background:transparent;color:var(--gold-soft)}
.btn.ghost:hover{background:rgba(226,182,83,.12)}

/* ---------- Khung cố định: thanh tiến trình, nhạc, mục lục ---------- */
#topbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none}
#topbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--pink));transform-origin:0 50%;transform:scaleX(0)}
.music{position:fixed;top:calc(14px + var(--safe-t));right:14px;z-index:70;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(13,17,48,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:background .25s}
.music:hover{background:rgba(13,17,48,.85)}
.eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.eq i{display:block;width:3px;height:4px;background:currentColor;border-radius:2px}
.music[aria-pressed="true"] .eq i{animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.25s}.eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.music.nudge::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--gold);animation:ring 1.6s ease-out infinite}
@keyframes ring{from{transform:scale(.8);opacity:.9}to{transform:scale(1.5);opacity:0}}
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:6px}
.rail button{position:relative;width:22px;height:22px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.rail button i{display:block;width:8px;height:8px;border-radius:50%;border:1px solid var(--gold);transition:transform .3s,background .3s}
.rail button.on i{background:var(--gold);transform:scale(1.5)}
.rail button::after{content:attr(data-t);position:absolute;right:30px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font:500 .8rem/1 var(--sans);color:var(--text);background:rgba(13,17,48,.85);padding:7px 11px;border-radius:99px;border:1px solid var(--line);opacity:0;pointer-events:none;transition:.25s}
.rail button:hover::after,.rail button:focus-visible::after{opacity:1;transform:translate(0,-50%)}
@media (min-width:900px){.rail{display:flex}}
.chap{position:fixed;left:16px;bottom:calc(14px + var(--safe-b));z-index:50;display:flex;align-items:center;gap:8px;font:500 .78rem/1 var(--sans);color:var(--muted);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.chap .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
#ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.toast{position:fixed;left:50%;bottom:calc(28px + var(--safe-b));z-index:130;transform:translate(-50%,20px);opacity:0;background:var(--gold);color:var(--ink);padding:.7em 1.3em;border-radius:99px;font:600 .9rem/1.2 var(--sans);pointer-events:none;transition:.35s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Bìa: nhấn hoặc cuộn để mở ---------- */
.cover{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;text-align:center;
 background:
  radial-gradient(circle 1.6px at 12% 22%,rgba(255,243,224,.9),rgba(255,243,224,0)),
  radial-gradient(circle 1.2px at 28% 68%,rgba(255,243,224,.7),rgba(255,243,224,0)),
  radial-gradient(circle 1.6px at 44% 12%,rgba(255,243,224,.8),rgba(255,243,224,0)),
  radial-gradient(circle 1.2px at 63% 80%,rgba(255,243,224,.6),rgba(255,243,224,0)),
  radial-gradient(circle 1.6px at 78% 30%,rgba(255,243,224,.9),rgba(255,243,224,0)),
  radial-gradient(circle 1.2px at 90% 62%,rgba(255,243,224,.7),rgba(255,243,224,0)),
  radial-gradient(circle 1.2px at 8% 84%,rgba(255,243,224,.6),rgba(255,243,224,0)),
  radial-gradient(70% 45% at 50% 112%,rgba(140,20,32,.6),rgba(140,20,32,0) 70%),
  #0D1130;
 transition:opacity .9s ease .6s,visibility 0s linear 1.5s}
.cover.opening{opacity:0;visibility:hidden}
.cover-in{display:grid;justify-items:center;gap:14px;max-width:560px}
.seal{width:118px;height:118px;border-radius:50%;border:0;cursor:pointer;margin-bottom:12px;display:grid;place-items:center;color:var(--gold-soft);font-size:3.4rem;line-height:1;
 background:radial-gradient(circle at 35% 28%,#B9242F,var(--lacquer) 55%,#5A0C16);
 box-shadow:0 0 0 2px var(--gold-deep),0 0 0 8px rgba(226,182,83,.16),0 24px 70px rgba(140,20,32,.6);
 animation:sealGlow 3.4s ease-in-out infinite;transition:transform 1.5s cubic-bezier(.7,0,.25,1),opacity 1.1s ease}
@keyframes sealGlow{50%{box-shadow:0 0 0 2px var(--gold),0 0 0 14px rgba(226,182,83,.1),0 24px 90px rgba(200,40,50,.75)}}
.cover.opening .seal{transform:scale(16);opacity:0;animation:none}
.cv-small{font:400 .95rem/1.4 var(--sans);color:var(--muted)}
.cv-names{font:italic 300 clamp(2.5rem,10vw,4.8rem)/1.05 var(--display);text-wrap:balance}
.cv-names i{font-size:.6em;color:var(--gold);margin:0 .12em}
.cv-date{font:300 1.4rem/1 var(--display);letter-spacing:.14em;color:var(--gold-soft);margin-bottom:10px}
.cv-hint{font-size:.82rem;color:var(--muted);animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.35}}

/* ---------- Phần ghim (sticky) ---------- */
.pin{position:relative;height:calc(var(--h)*1vh);height:calc(var(--h)*1svh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding-top:var(--safe-t)}

/* Chương 1: thiệp mời, hoa sen nở theo cuộn */
.hero .stage{display:grid;place-items:center;perspective:1300px}
#lotus{position:absolute;inset:0;width:100%;height:100%}
.hl{position:absolute;left:0;right:0;top:calc(13svh + var(--safe-t));padding:0 24px;text-align:center;font:italic 300 clamp(1.5rem,4.2vw,2.7rem)/1.35 var(--display);text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.5);will-change:opacity,transform}
.hl2{opacity:0}
.scroll-hint{position:absolute;left:50%;bottom:calc(5svh + var(--safe-b));transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font-size:.8rem;color:var(--muted);will-change:opacity}
.scroll-hint span{display:block;width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:drip 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.card{position:absolute;left:50%;top:50%;width:min(90vw,500px);opacity:0;padding:clamp(30px,5svh,46px) clamp(22px,5vw,40px) clamp(24px,4svh,36px);text-align:center;color:var(--ink);border-radius:4px;will-change:transform,opacity;
 background:radial-gradient(120% 70% at 50% 0%,#FFFAF0,rgba(255,250,240,0) 60%),linear-gradient(180deg,#FBF0DC,#F4E2C1);
 box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 0 1px rgba(169,129,43,.55),0 0 120px rgba(226,182,83,.25)}
.card::before,.card::after{content:"";position:absolute;pointer-events:none}
.card::before{inset:10px;border:1px solid var(--gold-deep)}
.card::after{inset:15px;border:1px solid rgba(169,129,43,.35)}
.stamp{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#B9242F,var(--lacquer));color:var(--gold-soft);display:grid;place-items:center;font-size:1.7rem;line-height:1;box-shadow:0 0 0 2px var(--gold-deep),0 8px 18px rgba(0,0,0,.35)}
.c-small{font:400 .84rem/1.55 var(--sans);color:#6B4B3C}
.names{font:italic 300 clamp(2.2rem,min(9vw,7.6svh),3.6rem)/1.02 var(--display);margin:.32em 0 .1em;color:var(--ink)}
.names .amp{display:block;font-size:.46em;color:var(--lacquer);margin:.08em 0}
.rule{width:64px;height:1px;background:var(--gold-deep);margin:.85em auto}
.when{font:500 1.02rem/1.45 var(--sans)}
.lunar{margin-bottom:.4em}
.card .where{margin-top:.7em}
.card .where b{font-weight:600;color:var(--ink)}

/* Chương 2, 3: chú rể, cô dâu */
.person .stage{display:grid;align-items:center}
.person-grid{width:min(1180px,100%);height:100%;margin:0 auto;padding:0 clamp(20px,5vw,56px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,6vw,96px);align-items:center}
.person.rev .person-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.person.rev .arch-wrap{order:2}
.arch-wrap{position:relative;justify-self:center;height:min(76svh,580px);aspect-ratio:3/4.2;max-width:100%}
.arch{position:absolute;inset:0;border-radius:999px 999px 14px 14px;overflow:hidden;background:#0a1230;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.arch-ring{position:absolute;inset:-14px;border-radius:999px 999px 24px 24px;border:1px solid var(--line);pointer-events:none}
.arch .layer{position:absolute;will-change:transform}
.arch .layer.sky,.arch .layer.photo{left:0;top:-6%;width:100%;height:112%;object-fit:cover}
.arch svg.layer{left:0;top:-6%;width:100%;height:112%}
.arch .layer.sun{left:50%;top:40%;width:36%;aspect-ratio:1;margin-left:-18%;border-radius:50%;background:radial-gradient(circle,var(--c) 0 58%,rgba(255,225,168,0) 72%)}
.arch .layer.letter{left:0;right:0;top:0;bottom:0;display:grid;justify-items:center;align-content:start;padding-top:16%;font:italic 300 clamp(6rem,15vw,10rem)/1 var(--display);color:rgba(255,243,224,.17)}
.steps{position:relative;display:grid;padding-left:30px;min-height:min(52svh,420px)}
.srail{position:absolute;left:0;top:6%;bottom:6%;width:2px;background:rgba(255,255,255,.16)}
.srail i{display:block;width:100%;height:100%;background:var(--gold);transform-origin:top;transform:scaleY(0)}
.step{grid-area:1/1;align-self:center;opacity:0;will-change:transform,opacity}
.role{font:500 .95rem/1.4 var(--sans);color:var(--gold-soft);margin-bottom:.4rem}
.pname{font:italic 300 clamp(2.8rem,7.4vw,5.4rem)/1 var(--display);margin:0 0 .35em}
.step p{max-width:36ch;color:var(--muted)}
.step .story{font:300 clamp(1.15rem,2.1vw,1.6rem)/1.65 var(--display);color:var(--text);max-width:30em}
.step .quote{font:italic 300 clamp(1.4rem,2.9vw,2.3rem)/1.4 var(--display);color:var(--text);max-width:22em;text-wrap:balance}
.step .sign{margin-top:1rem;color:var(--gold-soft);font:italic 300 1.3rem/1 var(--display)}
.bride .role{color:var(--pink-soft)}
.bride .srail i{background:var(--pink)}

/* Chương 4: hai gia đình, sợi tơ hồng */
.fam .stage{background:none}
.fam-stage{position:absolute;inset:0;padding:var(--safe-t) clamp(16px,5vw,64px) 0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(12px,3vw,48px)}
.fam-card{padding:clamp(20px,3vw,34px);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,243,224,.07),rgba(255,243,224,.02));will-change:transform,opacity;opacity:0}
.fam-card h2{font:italic 300 clamp(1.8rem,3.4vw,2.6rem)/1.1 var(--display);color:var(--gold-soft);margin-bottom:.6em}
.fam-card .who{font-size:1.08rem;line-height:1.8}
.fam-card .addr{margin-top:.8em;font-size:.9rem;color:var(--muted)}
.fam-card.l{text-align:right;border-radius:24px 4px 4px 24px}
.fam-card.r{text-align:left;border-radius:4px 24px 24px 4px}
.fam-mid{--sr:clamp(48px,7vw,75px);position:relative;display:grid;place-items:center;text-align:center;width:min(30vw,300px)}
.fam-cap{position:absolute;left:0;right:0;top:calc(50% + var(--sr) + 32px);display:grid;justify-items:center;gap:10px}
.fam-seal{position:relative;z-index:4;display:grid;place-items:center;width:clamp(96px,14vw,150px);aspect-ratio:1;border-radius:50%;font-size:clamp(3rem,7vw,5.4rem);line-height:1;color:var(--gold-soft);background:radial-gradient(circle at 35% 28%,#B9242F,var(--lacquer) 58%,#5A0C16);box-shadow:0 0 0 2px var(--gold-deep),0 0 0 9px rgba(226,182,83,.12),0 0 90px rgba(255,84,104,.35);will-change:transform,opacity;opacity:0}
.fam-tag{font:italic 300 clamp(1.25rem,2.2vw,1.8rem)/1.3 var(--display);text-wrap:balance;opacity:0}
.fam-note{font-size:.85rem;color:var(--muted);opacity:0;max-width:26ch}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
#threadPath,#threadPath2{fill:none;stroke:var(--thread);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,84,104,.8))}
#knot{fill:var(--oxblood);stroke:var(--thread);stroke-width:3;opacity:0}
@media (max-width:820px){
  .fam-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;gap:26px}
  .fam-card{padding:16px 18px}
  .fam-card.l,.fam-card.r{text-align:center;border-radius:20px}
  .fam-card h2{margin-bottom:.3em}
  .fam-card .who{font-size:1rem;line-height:1.6}
  .fam-mid{width:100%;gap:8px}
  .fam-seal{width:84px;font-size:2.7rem}
  .fam-note{display:none}
  .fam-mid{position:static}
  .fam-cap{display:contents}
  .fam-tag{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 78px);max-width:none;padding:0 28px;font-size:1.35rem}
}

/* Chương 5: lễ cưới + bản đồ (sticky) */
.event{position:relative;padding:clamp(60px,10svh,120px) clamp(20px,5vw,56px) clamp(60px,10svh,120px)}
.event-grid{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:start}
.ev-info .blk{min-height:78svh;display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.ev-info .blk:last-child{min-height:70svh}
.date-big{font:300 clamp(1.4rem,2.6vw,2rem)/1.2 var(--display);color:var(--gold-soft)}
.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:440px;margin-top:.4rem}
.cd div{border-top:1px solid var(--line);padding-top:10px}
.cd b{display:block;font:300 clamp(2.2rem,5vw,3.6rem)/1 var(--display);font-variant-numeric:tabular-nums}
.cd span{font-size:.82rem;color:var(--muted)}
.tl{list-style:none;padding:0 0 0 28px;margin:.6rem 0 0;border-left:1px solid var(--line);display:grid;gap:30px}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-33px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(226,182,83,.2)}
.tl time{display:block;font:italic 300 clamp(1.7rem,3vw,2.3rem)/1.1 var(--display);color:var(--gold-soft)}
.tl p{color:var(--muted);max-width:32ch}
.venue{font:italic 300 clamp(1.8rem,3.4vw,2.6rem)/1.15 var(--display)}
.ev-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:.6rem}
.map-sticky{position:sticky;top:calc(9svh + var(--safe-t));height:80svh}
.map-card{position:relative;height:100%;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#0A2F2D;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.map-card>svg{position:absolute;inset:0;width:100%;height:100%}
.map-note{position:absolute;left:14px;top:12px;font-size:.74rem;color:rgba(255,243,224,.65);background:rgba(6,30,28,.65);padding:4px 11px;border-radius:99px}
.map-venue{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 16px;border-radius:14px;background:rgba(6,30,28,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.map-venue.on{opacity:1;transform:none}
.map-venue b{display:block;font:italic 400 1.2rem/1.2 var(--display)}
.map-venue span{font-size:.85rem;color:var(--muted)}
.map-lbl{font:italic 400 19px var(--display);fill:rgba(255,243,224,.6)}
#route{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
  .event-grid{grid-template-columns:1fr;gap:0}
  .map-sticky{order:-1;top:calc(8px + var(--safe-t));height:42svh;z-index:3}
  .map-venue{display:none}
  .ev-info .blk{min-height:64svh}
  .ev-info .blk:last-child{min-height:60svh}
}

/* Chương 6: album cuộn ngang */
.album .stage{display:flex;flex-direction:column;justify-content:center;perspective:1400px}
.album-title{position:absolute;left:4vw;top:calc(9svh + var(--safe-t));font:italic 300 clamp(5rem,20vw,17rem)/.9 var(--display);color:transparent;-webkit-text-stroke:1px rgba(226,182,83,.3);white-space:nowrap;pointer-events:none;will-change:transform}
.track{position:relative;display:flex;align-items:center;gap:clamp(18px,3vw,44px);padding:0 8vw;width:max-content;will-change:transform}
.ph-card{position:relative;flex:none;width:clamp(240px,min(34vw,60svh),460px);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;text-align:left;will-change:transform}
.ph-frame{position:absolute;inset:0;overflow:hidden;background:#150a22;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ph-frame{border-radius:10px}
.ph-art{position:absolute;top:0;bottom:0;left:-10%;width:120%;will-change:transform}
.ph-art svg,.ph-art img{display:block;width:100%;height:100%;object-fit:cover}
.ph-cap{position:absolute;left:0;right:0;bottom:0;padding:54px 20px 18px;background:linear-gradient(transparent,rgba(8,4,16,.78));display:grid;gap:2px;text-align:center}
.ph-cap b{font:italic 400 1.25rem/1.2 var(--display)}
.ph-cap small{font-size:.8rem;color:var(--muted)}
.album-ui{position:absolute;left:8vw;right:8vw;bottom:calc(5svh + var(--safe-b));display:flex;align-items:center;gap:18px;font-size:.85rem;color:var(--muted)}
.album-bar{flex:1;height:2px;background:rgba(255,255,255,.16)}
.album-bar i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
.lb{position:fixed;inset:0;z-index:120;display:none;place-items:center;background:rgba(6,4,16,.97)}
.lb.open{display:grid}
.lb-fig{width:min(88vw,540px);display:grid;gap:14px;text-align:center}
.lb-art{aspect-ratio:4/5;max-height:74svh;border-radius:8px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6);margin:0 auto;width:100%}
.lb-art svg,.lb-art img{display:block;width:100%;height:100%;object-fit:cover}
.lb figcaption{font:italic 300 1.3rem/1.3 var(--display)}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,243,224,.06);color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer}
.lb button:hover{background:rgba(255,243,224,.16)}
.lb-x{top:calc(14px + var(--safe-t));right:14px}
.lb-p{left:14px;top:50%;transform:translateY(-50%)}
.lb-n{right:14px;top:50%;transform:translateY(-50%)}

/* ---------- Phần cuộn tự do: xác nhận, lời chúc, cảm ơn ---------- */
.rsvp,.wishes{position:relative;padding:clamp(80px,14svh,150px) clamp(20px,5vw,56px);overflow:hidden}
.big-han{position:absolute;right:-3vw;top:6%;font-size:clamp(18rem,44vw,40rem);line-height:1;color:rgba(255,255,255,.055);pointer-events:none;will-change:transform}
.rsvp-grid{position:relative;z-index:1;width:min(1100px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,90px);align-items:start}
.rsvp-copy{position:sticky;top:20svh;display:grid;gap:1.2rem}
.panel{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,4vw,40px);background:rgba(20,4,8,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.form{display:grid;gap:22px}
fieldset{border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{display:block;padding:0;margin-bottom:8px;font:500 .92rem/1.3 var(--sans);color:var(--gold-soft)}
.input,.textarea{width:100%;padding:.9em 1em;border-radius:12px;border:1px solid rgba(255,243,224,.28);background:rgba(0,0,0,.2);color:var(--text);font:inherit;transition:border-color .2s,box-shadow .2s}
.textarea{resize:vertical;min-height:96px}
.input::placeholder,.textarea::placeholder{color:rgba(255,243,224,.42)}
.input:focus,.textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,182,83,.25)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip>span{display:inline-block;padding:.62em 1.15em;border:1px solid rgba(255,243,224,.32);border-radius:999px;font-size:.92rem;transition:background .2s,color .2s,border-color .2s}
.chip input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--gold-soft);outline-offset:2px}
.stepper{display:inline-flex;align-items:center;border:1px solid rgba(255,243,224,.32);border-radius:999px;overflow:hidden}
.stepper button{width:46px;height:46px;border:0;background:none;font-size:1.3rem;cursor:pointer}
.stepper button:hover{background:rgba(255,243,224,.1)}
.stepper span{min-width:44px;text-align:center;font:500 1.15rem/1 var(--sans)}
.err{min-height:1.2em;margin-top:6px;font-size:.85rem;color:#FFC9BF}
.done{display:grid;gap:14px;justify-items:start}
.done[hidden]{display:none}
.stamp-big{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#B9242F,#6A0F1C);color:var(--gold-soft);font-size:3rem;line-height:1;box-shadow:0 0 0 2px var(--gold-deep),0 12px 30px rgba(0,0,0,.4);animation:stamp .8s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stamp{from{transform:scale(2.4) rotate(-24deg);opacity:0}to{transform:scale(1) rotate(-8deg);opacity:1}}
.done h3{font:italic 300 clamp(1.7rem,3.4vw,2.4rem)/1.15 var(--display)}
.done p{color:var(--muted)}
.done-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

.wishes{background:none}
.wish-wrap{position:relative;z-index:1;width:min(1100px,100%);margin:0 auto}
.wish-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,90px);align-items:start;margin-bottom:clamp(60px,10svh,110px)}
.wish-top .h2{margin-bottom:1rem}
.wish-form{display:grid;gap:14px}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick button{padding:.5em 1em;border-radius:99px;border:1px solid rgba(255,243,224,.28);background:none;color:var(--muted);font-size:.85rem;cursor:pointer;transition:.2s}
.quick button:hover{border-color:var(--gold);color:var(--gold-soft)}
.wf-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.82rem;color:var(--muted)}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;padding-bottom:60px}
.wcol{display:grid;gap:24px;align-content:start;will-change:transform}
.slip{position:relative;padding:22px 24px 18px;border:1px solid var(--line);border-radius:4px 4px 30px 4px;background:linear-gradient(180deg,rgba(255,243,224,.11),rgba(255,243,224,.04));transform:rotate(var(--r,0deg))}
.slip::before{content:"";position:absolute;top:-11px;left:26px;width:1px;height:11px;background:var(--gold)}
.slip p{font:300 1.08rem/1.65 var(--display)}
.slip footer{margin-top:14px;font:500 .85rem/1.2 var(--sans);color:var(--gold-soft)}
.slip.fresh{animation:slipIn .9s cubic-bezier(.2,1.2,.3,1) both}
@keyframes slipIn{from{opacity:0;transform:translateY(-30px) scale(.85) rotate(-4deg)}}

.finale{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:clamp(80px,12svh,140px) 24px;overflow:hidden}
.fin-in{position:relative;z-index:1;display:grid;justify-items:center;gap:1.3rem;max-width:620px}
.fin-han{font-size:clamp(4.5rem,12vw,8rem);line-height:1;background:linear-gradient(120deg,var(--gold-deep),var(--gold-soft),var(--gold),var(--gold-soft),var(--gold-deep));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.fin-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:.4rem}
.fin-sign{font:italic 300 1.5rem/1.2 var(--display);color:var(--gold-soft);margin-top:.6rem}
.lanterns{position:absolute;inset:0;pointer-events:none}
.lantern{position:absolute;bottom:-14vh;left:var(--x);width:var(--s);height:calc(var(--s)*1.25);border-radius:42% 42% 46% 46%;background:radial-gradient(circle at 50% 62%,#FFE2A0,#FF9448 55%,#C23A1C);box-shadow:0 0 34px 8px rgba(255,150,70,.5);opacity:0}
.lantern::before{content:"";position:absolute;left:18%;right:18%;top:-4px;height:5px;border-radius:2px;background:#5A2A14}
.finale.on .lantern{animation:rise var(--d) linear var(--del) infinite}
@keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.9}100%{transform:translate3d(var(--dx),-125vh,0);opacity:0}}
.lantern.fly{position:fixed;bottom:auto;z-index:90;width:28px;height:35px;animation:fly 4s ease-out forwards}
@keyframes fly{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(36px,-115vh) scale(1.2) rotate(8deg)}}

@media (max-width:820px){
  .person-grid,.person.rev .person-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:16px;align-content:start;padding-top:14px}
  .person.rev .arch-wrap{order:0}
  .arch-wrap{height:min(40svh,360px)}
  .arch-ring{inset:-9px}
  .steps{min-height:0;padding-left:22px;align-self:stretch}
  .step{align-self:start}
  .pname{font-size:clamp(2.4rem,11vw,3.4rem);margin-bottom:.2em}
  .step .story{font-size:1.1rem;line-height:1.6}
  .step .quote{font-size:1.4rem}
  .rsvp-grid,.wish-top{grid-template-columns:1fr}
  .rsvp-copy{position:static}
  .wall{grid-template-columns:1fr}
  .ph-card{width:68vw}
  .album-title{font-size:26vw}
  .chap{display:none}
}
@media (min-width:821px) and (max-width:1100px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .cover{transition:none}
}

/* ---------- Bổ sung ---------- */
.ph-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:6px}
.ph-card:hover .ph-frame{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px var(--line)}
[hidden]{display:none!important}

/* =========================================================
   Bản cập nhật: hai lễ, sơ đồ hai miền, thư viện ảnh
   ========================================================= */
.btn.sm{padding:.62em 1.25em;font-size:.85rem}
.cv-ev{margin:-2px 0 12px}

/* Thiệp mời: hai lễ cạnh nhau */
.card .kin{margin-top:.4em}
.ev2{display:grid;grid-template-columns:1fr 1fr;margin-top:.2em;text-align:center}
.ev2-i{padding:0 clamp(6px,2vw,14px)}
.ev2-i+.ev2-i{border-left:1px solid rgba(169,129,43,.4)}
.ev2-k{font:italic 400 clamp(1.15rem,3.6vw,1.45rem)/1.2 var(--display);color:var(--lacquer)}
.ev2 .when{font-size:clamp(.86rem,2.6vw,1rem);margin-top:.5em}
.ev2 .lunar{margin-bottom:.2em}
.ev2-t{font:italic 400 clamp(1.7rem,6vw,2.2rem)/1.1 var(--display);color:var(--ink);margin:.1em 0 .1em}
.card .lunar{font-size:.78rem}

/* Hai gia đình: ngày vui của từng bên */
.fam-ev{margin-top:1em;padding-top:.85em;border-top:1px solid var(--line)}
.fam-ev .fe-k{font:italic 400 1.3rem/1.2 var(--display);color:var(--gold-soft)}
.fam-ev .fe-d{font-weight:500;font-size:.98rem;margin-top:.15em}
.fam-ev .fe-t{font-size:.86rem;color:var(--muted)}
@media (max-width:820px){
  .fam-ev{margin-top:.6em;padding-top:.55em}
  .fam-ev .fe-k{font-size:1.15rem}
  .fam-ev .fe-d{font-size:.92rem}
  .fam-card .addr{margin-top:.5em;font-size:.84rem}
}

/* Lễ cưới + bản đồ */
.ev-side{font:500 .9rem/1.3 var(--sans);color:var(--gold-soft)}
.trip b{color:var(--gold-soft);font-weight:600}
.ml{font-family:var(--display);font-style:italic;fill:rgba(255,243,224,.66);paint-order:stroke;stroke:rgba(6,30,28,.7);stroke-width:.5px}
.ml.b{font-style:normal;font-family:var(--sans);font-weight:600;fill:#FFF3E0}
.ml.s{fill:rgba(255,243,224,.5)}
.map-note{display:grid;gap:1px;padding:8px 14px;border-radius:14px;max-width:calc(100% - 84px)}
.map-note b{font:600 .82rem/1.3 var(--sans);color:var(--text)}
.map-note small{font-size:.7rem;color:rgba(255,243,224,.6)}
.map-venue{height:86px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;transform:none}
.map-venue .mv{position:absolute;inset:0;padding:11px 16px;border-radius:14px;background:rgba(6,30,28,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;pointer-events:none;display:grid;align-content:center}
.map-venue .mv.on{opacity:1;transform:none}
.map-venue .mv small{font-size:.72rem;color:var(--gold-soft)}
.map-venue .mv b{font:italic 400 1.15rem/1.2 var(--display)}
.map-venue .mv span{font-size:.82rem;color:var(--muted)}

/* Album: thẻ "Xem thêm" ở cuối track + nút hiện khi lướt hết */
.ph-more{position:relative;flex:none;align-self:center;width:clamp(240px,min(34vw,60svh),460px);aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:16px;padding:0 24px;border:1px dashed var(--line);border-radius:10px;background:rgba(226,182,83,.05);color:var(--text);cursor:pointer;text-align:center;font:inherit;transition:background .3s,border-color .3s}
.ph-more:hover{background:rgba(226,182,83,.14);border-color:var(--gold)}
.ph-more .plus{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--gold);color:var(--ink);font:300 2.6rem/1 var(--sans);box-shadow:0 0 0 8px rgba(226,182,83,.16);animation:pulseRing 2.6s ease-in-out infinite}
.ph-more b{font:italic 400 1.5rem/1.2 var(--display)}
.ph-more small{color:var(--muted);font-size:.85rem}
@keyframes pulseRing{50%{box-shadow:0 0 0 16px rgba(226,182,83,.04)}}
#albumMore{opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .4s,transform .4s,background .25s,box-shadow .25s;white-space:nowrap}
#albumMore.on{opacity:1;pointer-events:auto;transform:none}
.ph-cap:empty{display:none}

/* Khung xem ảnh: đếm ảnh + nút xem tất cả */
.lb-fig figcaption{display:grid;gap:2px;min-height:2.6em}
.lb-fig figcaption small{font:400 .82rem/1.3 var(--sans);color:var(--muted)}
.lb button.lb-all{position:absolute;left:50%;bottom:calc(16px + var(--safe-b));transform:translateX(-50%);width:auto;height:auto;padding:.7em 1.4em;border-radius:99px;font:600 .88rem/1 var(--sans);color:var(--gold-soft);border-color:var(--line)}
.lb-p,.lb-n{z-index:2}

/* Thư viện ảnh */
.gal{position:fixed;inset:0;z-index:110;display:none;flex-direction:column;background:rgba(9,6,20,.97)}
.gal.open{display:flex}
.gal-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(14px + var(--safe-t)) clamp(16px,4vw,48px) 14px;border-bottom:1px solid var(--line)}
.gal-h h2{font:italic 300 clamp(1.6rem,4vw,2.4rem)/1.1 var(--display)}
.gal-h p{font-size:.85rem;color:var(--muted)}
.gal-x{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,243,224,.06);color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer}
.gal-x:hover{background:rgba(255,243,224,.16)}
.gal-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:clamp(14px,3vw,32px) clamp(16px,4vw,48px) calc(40px + var(--safe-b))}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:clamp(8px,1.6vw,18px)}
.gal-item{position:relative;display:block;padding:0;border:0;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#150a22;cursor:pointer;animation:galIn .5s both}
.gal-item svg,.gal-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal-item:hover svg,.gal-item:hover img{transform:scale(1.06)}
.gal-item:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.gal-item .gi-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;background:linear-gradient(transparent,rgba(8,4,16,.75));font:italic 400 .95rem/1.2 var(--display);text-align:center;opacity:0;transition:opacity .3s}
.gal-item:hover .gi-cap,.gal-item:focus-visible .gi-cap{opacity:1}
@keyframes galIn{from{opacity:0;transform:translateY(14px)}}
.gal-more{display:grid;justify-items:center;gap:10px;padding:28px 0 8px;color:var(--muted);font-size:.85rem}
@media (max-width:820px){
  .ph-more{width:68vw}
  .album-ui{gap:12px;left:6vw;right:6vw}
  .map-note{padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){.ph-more .plus{animation:none}.gal-item{animation:none}}

.map-venue .mv b em{font-style:normal}

#mapSvg{--lk:1;--ok:1}
@media (max-width:820px){#mapSvg{--lk:1.5;--ok:1.25}}

/* Điện thoại: giữ hai thẻ gia đình vừa một màn hình, kể cả máy thấp (iPhone SE...) */
@media (max-width:820px){
  .fam-stage{padding-top:calc(var(--safe-t) + 92px);padding-bottom:16px;gap:22px}
  .fam-tag{top:calc(var(--safe-t) + 64px);font-size:1.25rem}
}
@media (max-width:820px) and (max-height:740px){
  .fam-stage{padding-top:calc(var(--safe-t) + 84px);gap:14px}
  .fam-card{padding:12px 16px}
  .fam-card h2{font-size:1.5rem;margin-bottom:.15em}
  .fam-card .who{font-size:.95rem;line-height:1.45}
  .fam-card .addr{margin-top:.3em;font-size:.78rem;line-height:1.4}
  .fam-ev{margin-top:.4em;padding-top:.4em}
  .fam-ev .fe-k{font-size:1.05rem}
  .fam-ev .fe-d{font-size:.86rem}
  .fam-ev .fe-t{font-size:.78rem}
  .fam-seal{width:68px;font-size:2.2rem}
  .card{padding-top:34px}
}

/* Gửi quà mừng cưới: hộp hiện mã QR chú rể và cô dâu */
.gift-btn{margin-top:1.5rem;gap:.7em}
.gift-btn svg{width:1.15em;height:1.15em;flex:none}
.gift{position:fixed;inset:0;z-index:125;display:none;padding:16px;overflow-y:auto;background:rgba(6,4,16,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gift.open{display:grid}
.gift-box{position:relative;width:min(760px,100%);margin:auto;padding:clamp(24px,4vw,42px) clamp(18px,4vw,40px);border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,#1C1028,#120A1E);box-shadow:0 30px 90px rgba(0,0,0,.6);text-align:center}
.gift-x{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,243,224,.06);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer}
.gift-x:hover{background:rgba(255,243,224,.16)}
.gift-box h2{font:italic 300 clamp(1.8rem,4vw,2.5rem)/1.1 var(--display);padding:0 34px}
.gift-lead{color:var(--muted);max-width:46ch;margin:.7rem auto 1.5rem;font-size:.95rem}
.gift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,26px)}
.gift-card{display:grid;justify-items:center;align-content:start;gap:10px;padding:18px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,243,224,.04)}
.gift-card h3{font:italic 400 1.4rem/1.2 var(--display);color:var(--gold-soft)}
.gift-card .gift-who{font-weight:600;letter-spacing:.03em;font-size:.95rem}
.gift-qr{display:grid;place-items:center;width:min(100%,240px);aspect-ratio:1;padding:10px;border-radius:14px;background:#fff;overflow:hidden}
.gift-qr img{display:block;width:100%;height:100%;object-fit:contain}
.gift-qr.empty{background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:.85rem;text-align:center}
.gift-info{display:grid;gap:2px;font-size:.88rem;color:var(--muted)}
.gift-info b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.gift-act{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@media (max-width:640px){.gift-grid{grid-template-columns:1fr}.gift-box{padding-top:56px}}

.gift-qr img.gen{image-rendering:pixelated}

/* Căn chữ 囍 vào đúng tâm vòng tròn (JS đo hình mực thật của glyph rồi đặt --ix, --iy) */
.ink{display:block;font-style:normal;line-height:1;transform:translate(var(--ix,0),var(--iy,0))}

/* Firebase: trạng thái tải lời chúc và gửi xác nhận */
.wall-state{min-height:1.4em;margin:0 0 14px;text-align:center;font-size:.9rem;color:var(--muted)}
.wall-state:empty{display:none}
.sync-note{min-height:1.3em;font-size:.85rem;color:var(--muted)}
.sync-note.ok{color:#9BD5A8}
.sync-note.err{color:#FFB4A8}