/* ═══════════════════════════════════════════════════════════
   WEDDING · TIẾN KHẢI & THANH PHƯƠNG · 18.10.2026
   Concept: White Orchid Symphony
   Palette lấy từ moodboard: burgundy sâu + trắng ngà + đồng ấm
   ═══════════════════════════════════════════════════════════ */

:root{
  /* --- màu --- */
  --wine:        #410018;
  --wine-2:      #571028;
  --wine-deep:   #2A000E;
  --wine-soft:   #6E2740;

  --ivory:       #FAF7F1;
  --ivory-2:     #F3EEE4;
  --cream:       #EBE3D5;
  --sand:        #D6CEC1;

  --bronze:      #8C7660;
  --bronze-2:    #A28C74;
  --gold:        #C3A985;
  --ink:         #3B2B25;
  --ink-soft:    #6B564C;

  /* --- chữ --- */
  --serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --sans:   'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --script: 'Great Vibes', 'Cormorant Garamond', cursive;

  /* --- nhịp --- */
  --pad:     clamp(20px, 5vw, 64px);
  --sect:    clamp(72px, 11vw, 148px);
  --maxw:    1180px;
  --narrow:  700px;
  --ease:    cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ───────── layout helpers ───────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:var(--narrow); }
.center{ text-align:center; }

.hair{
  width:100%; max-width:220px; height:1px; margin:26px auto;
  background:linear-gradient(90deg,transparent,var(--sand) 22%,var(--bronze-2) 50%,var(--sand) 78%,transparent);
}
.hair--light{ background:linear-gradient(90deg,transparent,rgba(250,247,241,.18) 22%,rgba(195,169,133,.72) 50%,rgba(250,247,241,.18) 78%,transparent); }

/* ───────── typography atoms ───────── */
.script{
  font-family:var(--script); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.1; color:var(--bronze); margin:0 0 .35em;
}
.script--lg{ font-size:clamp(2.3rem,5.6vw,3.9rem); }

.shead{ margin-bottom:clamp(38px,6vw,72px); }
.shead__h{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,5.2vw,3.5rem);
  letter-spacing:.055em; line-height:1.15;
  margin:0; color:var(--wine);
}
.shead__sub{
  max-width:58ch; margin:1.1em auto 0;
  font-size:.9rem; font-weight:300; color:var(--ink-soft);
}
.shead--light .shead__h{ color:var(--ivory); }
.shead--light .script{ color:var(--gold); }
.shead--light .shead__sub{ color:rgba(250,247,241,.72); }

.tag{
  display:inline-block; margin-right:.5em; padding:.18em .7em;
  border:1px solid var(--bronze-2); border-radius:99px;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); vertical-align:2px;
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85em; background:var(--ivory-2);
  padding:.12em .42em; border-radius:3px; color:var(--wine-soft);
}

/* ───────── monogram K & P ───────── */
.mono{
  font-family:var(--serif); font-weight:300; color:var(--wine);
  display:flex; align-items:center; justify-content:center; gap:0;
  line-height:1; letter-spacing:0;
  font-size:clamp(2.6rem,6vw,3.6rem);
}
.mono--lg{ font-size:clamp(3.4rem,9vw,5rem); }
.mono__k,.mono__p{ display:block; }
.mono__k{ transform:translateX(.1em); }
.mono__p{ transform:translateX(-.1em); }
.mono__amp{
  font-size:.4em; color:var(--bronze-2);
  transform:translateY(.28em); font-style:italic; padding-inline:.1em;
}
.foot .mono{ color:var(--gold); }

/* ───────── reveal on scroll ───────── */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .95s var(--ease) var(--d,0s), transform .95s var(--ease) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ═══════════════════════════════════════
   CỔNG MỞ THIỆP
   ═══════════════════════════════════════ */
.gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:var(--pad);
  background:
    radial-gradient(120% 90% at 50% 8%, var(--wine-2) 0%, var(--wine) 46%, var(--wine-deep) 100%);
  transition:opacity .9s var(--ease), visibility .9s;
}
.gate.is-open{ opacity:0; visibility:hidden; pointer-events:none; }

.gate__flora{ position:absolute; opacity:.5; pointer-events:none; }
.gate__flora img{ width:100%; }
.gate__flora--tl{ top:-4%; left:-6%; width:clamp(160px,26vw,340px); transform:rotate(-14deg); }
.gate__flora--br{ bottom:-6%; right:-5%; width:clamp(130px,20vw,250px); transform:rotate(168deg); }

.gate__card{
  position:relative; z-index:2; text-align:center;
  width:min(100%,470px); padding:clamp(34px,6vw,52px) clamp(24px,5vw,44px) clamp(30px,5vw,44px);
  background:var(--ivory);
  border-radius:250px 250px 6px 6px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  animation:gateIn 1.1s var(--ease) both;
}
.gate__card::after{
  content:''; position:absolute; inset:9px;
  border:1px solid var(--sand);
  border-radius:242px 242px 3px 3px;
  pointer-events:none;
}
@keyframes gateIn{ from{ opacity:0; transform:translateY(24px) scale(.97); } }

.gate__eyebrow{
  margin:.9em 0 0; font-size:.66rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--bronze);
}
.gate__names{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,5.4vw,2.3rem); letter-spacing:.03em;
  line-height:1.28; margin:.5em 0 .3em; color:var(--wine);
}
.gate__names em{ display:block; font-size:.62em; color:var(--bronze-2); }
.gate__date{
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.3em;
  color:var(--ink-soft); margin:0;
}
.gate__guest{
  margin:1.5em 0 0; font-size:.82rem; color:var(--ink-soft);
}
.gate__guest strong{ font-weight:400; color:var(--wine); }

.gate__btn{
  margin-top:1.5em; display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 2.1em; border:0; cursor:pointer;
  background:var(--wine); color:var(--ivory);
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  border-radius:99px; transition:background .4s, transform .4s var(--ease);
}
.gate__btn:hover{ background:var(--wine-2); transform:translateY(-2px); }
.gate__hint{ margin:1.15em 0 0; font-size:.66rem; color:var(--bronze-2); }

/* ═══════════════════════════════════════
   NÚT NHẠC
   ═══════════════════════════════════════ */
.player{
  position:fixed; z-index:150;
  right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px);
  width:50px; height:50px; border:0; border-radius:50%; cursor:pointer;
  background:var(--wine); display:grid; place-items:center;
  box-shadow:0 12px 28px -10px rgba(65,0,24,.6);
  opacity:0; transform:scale(.7); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), background .3s;
}
.player.is-ready{ opacity:1; transform:none; pointer-events:auto; }
.player:hover{ background:var(--wine-2); }
.player__ring{
  position:absolute; inset:-5px; border-radius:50%;
  border:1px solid rgba(195,169,133,.45);
}
.player__bars{ display:flex; align-items:flex-end; gap:2.5px; height:15px; }
.player__bars i{
  width:2px; height:4px; background:var(--gold); border-radius:2px;
  transition:height .3s;
}
.player[aria-pressed="true"] .player__bars i{ animation:eq .95s ease-in-out infinite; }
.player[aria-pressed="true"] .player__bars i:nth-child(2){ animation-delay:.17s; }
.player[aria-pressed="true"] .player__bars i:nth-child(3){ animation-delay:.34s; }
.player[aria-pressed="true"] .player__bars i:nth-child(4){ animation-delay:.51s; }
@keyframes eq{ 0%,100%{height:4px} 50%{height:15px} }

/* ═══════════════════════════════════════
   1 · HERO
   ═══════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  padding:var(--pad); display:grid;
  background:
    radial-gradient(130% 100% at 78% 12%, var(--wine-2) 0%, var(--wine) 42%, var(--wine-deep) 100%);
  isolation:isolate;
}
.hero__frame{
  position:relative; display:grid; align-content:center;
  border:1px solid rgba(195,169,133,.3);
  padding:clamp(26px,5vw,66px) clamp(20px,4vw,54px);
}
.hero__grid{
  display:grid; gap:clamp(34px,5vw,64px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero__grid{ grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,80px); }
}

.hero__type{ color:var(--ivory); text-align:center; }
@media (min-width:900px){ .hero__type{ text-align:left; } }
.hero__type .script{ color:var(--gold); }

.hero__names{
  font-family:var(--serif); font-weight:300; color:var(--ivory);
  font-size:clamp(2.15rem,6.4vw,4.15rem);
  line-height:1.08; letter-spacing:.02em; margin:0;
}
.hero__names span{ display:block; }
.hero__amp{
  display:block; font-size:.46em; color:var(--gold);
  margin:.1em 0; font-style:italic;
}
.hero__rule{
  display:flex; align-items:center; gap:.7em;
  margin:1.5em auto; max-width:250px; color:var(--gold);
}
@media (min-width:900px){ .hero__rule{ margin-inline:0; } }
.hero__rule i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(195,169,133,.75)); }
.hero__rule i:last-child{ background:linear-gradient(90deg,rgba(195,169,133,.75),transparent); }

.hero__date{
  font-family:var(--serif); font-size:clamp(1.05rem,2.3vw,1.4rem);
  letter-spacing:.14em; color:var(--ivory); margin:0;
}
.hero__lunar{
  font-size:.76rem; letter-spacing:.1em; color:rgba(250,247,241,.6);
  margin:.5em 0 0; font-style:italic;
}
.hero__venue{
  margin:1.6em 0 0; font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
}

.hero__photo{ position:relative; margin:0; }
.arch{
  overflow:hidden;
  border-radius:50vw 50vw 4px 4px;
  border:1px solid rgba(195,169,133,.38);
  padding:8px;
  background:rgba(250,247,241,.05);
}
.arch img{
  width:100%; aspect-ratio:4/4.6; object-fit:cover; object-position:50% 32%;
  border-radius:50vw 50vw 2px 2px;
}
.hero__sprig{
  position:absolute; z-index:2; pointer-events:none;
  width:clamp(90px,15vw,180px);
  bottom:-4%; left:-9%;
  transform:rotate(158deg);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.3));
}

.hero__scroll{
  position:absolute; left:50%; bottom:clamp(12px,2.4vw,26px);
  transform:translateX(-50%); width:1px; height:clamp(38px,6vw,58px);
  background:rgba(195,169,133,.35); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--gold);
  animation:scrollCue 2.3s var(--ease) infinite;
}
@keyframes scrollCue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

.petals{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; pointer-events:none; opacity:.5;
}

/* ═══════════════════════════════════════
   2 · ĐẾM NGƯỢC
   ═══════════════════════════════════════ */
.count{
  background:var(--ivory-2); text-align:center;
  padding:clamp(44px,7vw,76px) var(--pad);
  border-block:1px solid var(--sand);
}
.count__lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,2.2vw,1.25rem); color:var(--bronze); margin:0;
}
.count__lead--after{ margin-top:1.1em; }
.count__row{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(16px,5vw,54px); margin:1.4em 0 0;
}
.count__cell{ min-width:62px; }
.count__cell b{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.5rem,7vw,4rem); line-height:1;
  color:var(--wine); font-variant-numeric:tabular-nums;
}
.count__cell span{
  display:block; margin-top:.55em; font-size:.63rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--bronze-2);
}

/* ═══════════════════════════════════════
   3 · THƯ MỜI
   ═══════════════════════════════════════ */
.invite{
  position:relative; overflow:hidden;
  padding-block:var(--sect); background:var(--ivory);
}
.invite__wm{
  position:absolute; top:6%; right:-8%;
  width:clamp(190px,34vw,430px); opacity:.13;
  transform:rotate(12deg); pointer-events:none;
}
.invite__guest{
  font-family:var(--serif); font-size:clamp(1.6rem,4.4vw,2.5rem);
  color:var(--wine); margin:.1em 0 0; letter-spacing:.03em;
}
.invite__guest strong{ font-weight:400; }
.invite__body{ font-size:.95rem; color:var(--ink-soft); margin:0; }

.quote{
  margin:clamp(34px,5vw,54px) 0 0; padding:0; position:relative;
}
.quote::before{
  content:'“'; display:block; font-family:var(--serif);
  font-size:4rem; line-height:.6; color:var(--sand); margin-bottom:.1em;
}
.quote p{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,2.9vw,1.6rem); line-height:1.62;
  color:var(--wine-soft); margin:0;
}

/* ═══════════════════════════════════════
   4 · HAI GIA ĐÌNH
   ═══════════════════════════════════════ */
.fam{ padding-block:var(--sect); background:var(--ivory-2); }
.fam__grid{
  display:grid; gap:clamp(30px,5vw,20px);
  grid-template-columns:1fr; align-items:center; text-align:center;
}
@media (min-width:760px){
  .fam__grid{ grid-template-columns:1fr auto 1fr; }
}
.fam__side{
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bronze); margin:0 0 1.2em;
}
.fam__side span{ display:block; font-size:.85em; letter-spacing:.16em; opacity:.65; text-transform:none; font-style:italic; }
.fam__name{
  font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.5rem);
  color:var(--wine); margin:.12em 0; letter-spacing:.02em;
}
.fam__addr{ font-size:.8rem; color:var(--ink-soft); margin:1em 0 0; font-style:italic; }
.fam__mid img{
  width:clamp(58px,8vw,96px); opacity:.55; margin-inline:auto;
}

.couple{
  display:grid; gap:clamp(14px,3vw,10px); align-items:center;
  grid-template-columns:1fr; text-align:center;
  margin-top:clamp(48px,7vw,84px);
  padding-top:clamp(38px,5vw,58px);
  border-top:1px solid var(--sand);
}
@media (min-width:700px){ .couple{ grid-template-columns:1fr auto 1fr; } }
.couple__role{
  font-size:.64rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bronze-2); margin:0 0 .7em;
}
.couple__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,4.6vw,2.7rem); letter-spacing:.03em;
  color:var(--wine); margin:0;
}
.couple__amp{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--gold);
}

/* ═══════════════════════════════════════
   5 · CHUYỆN CỦA CHÚNG MÌNH
   ═══════════════════════════════════════ */
.story{ padding-block:var(--sect); background:var(--ivory); }

.ch{
  display:grid; gap:clamp(20px,3.5vw,44px);
  grid-template-columns:1fr;
  padding-block:clamp(40px,6vw,68px);
  border-top:1px solid var(--cream);
  align-items:start;
}
.ch:first-of-type{ border-top:0; }
@media (min-width:880px){
  .ch{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); column-gap:clamp(36px,5vw,68px); }
  .ch__no{ grid-column:1; }
  .ch__text{ grid-column:1; }
  .ch__media{ grid-column:2; grid-row:1 / span 2; }
  .ch--flip .ch__no,.ch--flip .ch__text{ grid-column:2; }
  .ch--flip .ch__media{ grid-column:1; grid-row:1 / span 2; }
}
.ch__no{
  font-size:.65rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--bronze-2); margin:0 0 1em;
  display:flex; align-items:center; gap:.9em;
}
.ch__no::after{ content:''; flex:1; height:1px; background:var(--cream); }
.ch__text h3{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,3.6vw,2.15rem); line-height:1.24;
  letter-spacing:.02em; color:var(--wine); margin:0 0 .7em;
}
.ch__text p{ margin:0 0 1em; color:var(--ink-soft); font-size:.93rem; }
.ch__text p:last-child{ margin-bottom:0; }
.ch__text em{ font-style:italic; color:var(--wine-soft); }
.ch__text strong{ font-weight:400; color:var(--wine); }

/* chương chỉ có chữ */
.ch--solo{ grid-template-columns:1fr!important; text-align:center; max-width:640px; margin-inline:auto; }
.ch--solo .ch__no{ justify-content:center; }
.ch--solo .ch__no::after,.ch--solo .ch__no::before{ display:none; }
.ch--solo .ch__orn{ width:54px; margin:1.8em auto 0; opacity:.5; }

/* pull-quote trong story */
.pull{
  margin:1.6em 0 0; padding-left:1.3em;
  border-left:1px solid var(--gold);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,2.6vw,1.4rem); line-height:1.55;
  color:var(--wine-soft);
}
.pull cite{ display:block; margin-top:.6em; font-family:var(--sans); font-style:normal; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-2); }

/* ───── khung ảnh ───── */
.ph{ margin:0; position:relative; overflow:hidden; background:var(--cream); }
.ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.3s var(--ease), filter .6s;
}
.ph--tall img{ aspect-ratio:3/4; }
.ch__media .ph img{ aspect-ratio:3/4; }
.ch__media{ display:grid; gap:clamp(8px,1.4vw,14px); }
.ch__media--1{ grid-template-columns:1fr; }
.ch__media--2{ grid-template-columns:repeat(2,1fr); }
.ch__media--3{ grid-template-columns:repeat(2,1fr); }
.ch__media--3 .ph:first-child{ grid-column:span 2; }
.ch__media--3 .ph:first-child img{ aspect-ratio:16/11; }
.ch__media--4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:1080px){
  .ch__media--4{ grid-template-columns:repeat(4,1fr); }
}
.ch__media--grid{ grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .ch__media--grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .ch__media--grid{ grid-template-columns:repeat(4,1fr); } }

.ph[data-lb]{ cursor:zoom-in; }
.ph[data-lb]:hover img{ transform:scale(1.045); }

/* khung chờ ảnh studio */
.ph--slot::after{
  content:''; position:absolute; inset:0;
  border:1px solid rgba(195,169,133,.55);
  outline:1px dashed rgba(140,118,96,.32); outline-offset:-8px;
  pointer-events:none;
}
.ph--slot figcaption{
  position:absolute; left:10px; bottom:10px; z-index:2;
  padding:.3em .8em; border-radius:99px;
  background:rgba(65,0,24,.78); color:var(--ivory);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  backdrop-filter:blur(4px);
}

/* ═══════════════════════════════════════
   6 · ALBUM
   ═══════════════════════════════════════ */
.album{ padding-block:var(--sect); background:var(--ivory-2); }
.mosaic{
  display:grid; gap:clamp(8px,1.4vw,16px);
  grid-template-columns:repeat(2,1fr);
}
.mosaic .ph img{ aspect-ratio:4/5; }
@media (min-width:820px){
  .mosaic{ grid-template-columns:repeat(6,1fr); }
  .mosaic__a{ grid-column:span 2; }
  .mosaic__b{ grid-column:span 4; }
  .mosaic__b img{ aspect-ratio:3/2!important; }
  .mosaic__c{ grid-column:span 2; }
  .mosaic__c img{ aspect-ratio:2/3!important; }
  .mosaic__d{ grid-column:span 4; }
  .mosaic__d img{ aspect-ratio:3/2!important; }
  .mosaic__e{ grid-column:span 2; }
  .mosaic__f{ grid-column:span 4; }
  .mosaic__f img{ aspect-ratio:2/1!important; }
}
.album__more{ margin-top:clamp(30px,4vw,48px); }

/* ═══════════════════════════════════════
   nút
   ═══════════════════════════════════════ */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  padding:.95em 2.3em; border:1px solid var(--bronze-2);
  background:transparent; color:var(--wine);
  font-family:var(--sans); font-size:.7rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; border-radius:99px;
  transition:background .45s var(--ease), color .45s, border-color .45s, transform .45s var(--ease);
}
.btn:hover{ background:var(--wine); border-color:var(--wine); color:var(--ivory); transform:translateY(-2px); }
.btn--solid{ background:var(--wine); border-color:var(--wine); color:var(--ivory); }
.btn--solid:hover{ background:var(--wine-2); border-color:var(--wine-2); }
.btn--ghost{ border-color:var(--sand); }
.event .btn, .rsvp .btn{ border-color:rgba(195,169,133,.6); color:var(--gold); }
.event .btn:hover, .rsvp .btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--wine-deep); }
.rsvp .btn--solid{ background:var(--gold); border-color:var(--gold); color:var(--wine-deep); }
.rsvp .btn--solid:hover{ background:var(--ivory); border-color:var(--ivory); color:var(--wine); }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ═══════════════════════════════════════
   7 · SỰ KIỆN
   ═══════════════════════════════════════ */
.event{
  padding-block:var(--sect);
  background:
    radial-gradient(115% 85% at 22% 0%, var(--wine-2) 0%, var(--wine) 48%, var(--wine-deep) 100%);
  color:var(--ivory);
}
.event__grid{
  display:grid; gap:clamp(18px,3vw,30px);
  grid-template-columns:1fr;
}
@media (min-width:840px){ .event__grid{ grid-template-columns:1fr 1.12fr; align-items:stretch; } }

.ev{
  position:relative; text-align:center;
  padding:clamp(32px,5vw,54px) clamp(22px,4vw,40px);
  border:1px solid rgba(195,169,133,.32);
  background:rgba(250,247,241,.035);
}
.ev--main{ background:rgba(250,247,241,.075); border-color:rgba(195,169,133,.55); }
.ev__ic{ color:var(--gold); display:grid; place-items:center; margin-bottom:1.4em; }
.ev__kicker{
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin:0;
}
.ev__kicker--en{
  font-size:.62rem; letter-spacing:.2em; text-transform:none;
  font-style:italic; color:rgba(250,247,241,.5); margin-top:.35em;
}
.ev__time{
  font-family:var(--serif); margin:.7em 0 0;
  display:flex; align-items:baseline; justify-content:center; gap:.35em;
}
.ev__time b{ font-weight:300; font-size:clamp(3rem,8vw,4.4rem); line-height:1; color:var(--ivory); }
.ev__time span{ font-size:clamp(1rem,2.2vw,1.3rem); font-style:italic; color:var(--gold); }
.ev__where{ margin:0; }
.ev__where strong{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,3.2vw,1.85rem); letter-spacing:.03em; color:var(--ivory);
}
.ev__note{ margin:.8em 0 0; font-size:.8rem; color:rgba(250,247,241,.68); }
.ev__runsheet{
  list-style:none; margin:1.8em 0 0; padding:1.3em 0 0;
  border-top:1px solid rgba(195,169,133,.25);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5em 2em;
  font-size:.76rem; color:rgba(250,247,241,.75);
}
.ev__runsheet b{
  font-family:var(--serif); font-weight:400; font-size:1.05em;
  color:var(--gold); margin-right:.5em; letter-spacing:.06em;
}
.event__cta{ margin-top:clamp(34px,5vw,54px); }

/* ═══════════════════════════════════════
   8 · ĐỊA ĐIỂM
   ═══════════════════════════════════════ */
.venue{ padding-block:var(--sect); background:var(--ivory); }
.venue__grid{
  display:grid; gap:clamp(24px,4vw,48px);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:860px){ .venue__grid{ grid-template-columns:1.25fr 1fr; } }
.venue__photo img{ aspect-ratio:2/1; }
.venue__info h3{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,4.4vw,2.6rem); letter-spacing:.03em;
  color:var(--wine); margin:0;
}
.venue__hall{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bronze); margin:.9em 0 0;
}
.venue__addr{ margin:1em 0 0; color:var(--ink-soft); font-size:.9rem; }
.venue__info .hair{ margin-inline:0; }
.venue__time{
  font-family:var(--serif); font-size:1.1rem; letter-spacing:.1em;
  color:var(--wine-soft); margin:0 0 1.6em;
}
.venue__map{
  margin-top:clamp(28px,4vw,48px);
  border:1px solid var(--sand); padding:8px; background:var(--ivory-2);
}
.venue__map iframe{
  display:block; width:100%; height:clamp(260px,42vw,420px);
  border:0; filter:saturate(.72) contrast(1.03);
}

/* ═══════════════════════════════════════
   9 · RSVP
   ═══════════════════════════════════════ */
.rsvp{
  position:relative; overflow:hidden; padding-block:var(--sect);
  background:
    radial-gradient(120% 90% at 50% 100%, var(--wine-2) 0%, var(--wine) 45%, var(--wine-deep) 100%);
  color:var(--ivory);
}
.rsvp__flora{ position:absolute; opacity:.32; pointer-events:none; }
.rsvp__flora--l{ top:2%; left:-7%; width:clamp(120px,20vw,250px); transform:rotate(-16deg); }
.rsvp__flora--r{ bottom:-5%; right:-8%; width:clamp(160px,26vw,330px); transform:rotate(172deg); }

.form{ position:relative; z-index:2; display:grid; gap:clamp(18px,2.6vw,26px); }
.form__row{ display:grid; gap:inherit; grid-template-columns:1fr; }
@media (min-width:620px){ .form__row{ grid-template-columns:1fr 1fr; } }

.fld{ display:block; }
.fld--set{ border:0; padding:0; margin:0; }
.fld__lb{
  display:block; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.85em; padding:0;
}
.fld__lb i{ font-style:normal; color:var(--wine-soft); filter:brightness(1.9); }

.fld input[type=text],.fld input[type=tel],.fld select,.fld textarea{
  width:100%; padding:.85em 1em; font:inherit; font-size:.92rem;
  color:var(--ivory); background:rgba(250,247,241,.06);
  border:1px solid rgba(195,169,133,.34); border-radius:2px;
  transition:border-color .35s, background .35s;
}
.fld textarea{ resize:vertical; min-height:88px; }
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(250,247,241,.35); }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:0; border-color:var(--gold); background:rgba(250,247,241,.11);
}
.fld select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C3A985' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center; background-size:11px;
  padding-right:2.6em;
}
.fld select option{ background:var(--wine-deep); color:var(--ivory); }
.fld input:user-invalid,.fld textarea:user-invalid{ border-color:#D98A9E; }

.chips{ display:flex; flex-wrap:wrap; gap:.6em; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{
  display:block; padding:.7em 1.5em; border-radius:99px;
  border:1px solid rgba(195,169,133,.34);
  font-size:.82rem; color:rgba(250,247,241,.82);
  transition:background .3s, border-color .3s, color .3s;
}
.chip input:checked + span{
  background:var(--gold); border-color:var(--gold); color:var(--wine-deep);
}
.chip input:focus-visible + span{ outline:2px solid var(--ivory); outline-offset:2px; }

.form__msg{
  margin:0; min-height:1.4em; font-size:.85rem;
  color:var(--gold); text-align:center;
}
.form__msg.is-err{ color:#F0AEBC; }

/* ═══════════════════════════════════════
   10 · FOOTER
   ═══════════════════════════════════════ */
.foot{
  text-align:center; padding:clamp(56px,8vw,96px) var(--pad) clamp(70px,9vw,110px);
  background:var(--wine-deep); color:var(--ivory);
}
.foot .script{ color:var(--gold); }
.foot__txt{ margin:0; font-size:.88rem; color:rgba(250,247,241,.7); }
.foot__names{
  font-family:var(--serif); font-size:clamp(1.15rem,2.8vw,1.55rem);
  letter-spacing:.08em; margin:0; color:var(--ivory);
}
.foot__date{
  margin:.9em 0 0; font-size:.65rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--bronze-2);
}

/* ═══════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:rgba(20,0,8,.94); padding:clamp(14px,4vw,56px);
  animation:lbIn .35s var(--ease);
}
.lb[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0 } }
.lb__img{
  max-width:100%; max-height:86svh; object-fit:contain;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.lb__x,.lb__nav{
  position:absolute; border:0; cursor:pointer;
  background:rgba(250,247,241,.09); color:var(--ivory);
  display:grid; place-items:center; border-radius:50%;
  transition:background .3s;
}
.lb__x:hover,.lb__nav:hover{ background:rgba(250,247,241,.22); }
.lb__x{ top:clamp(12px,2.4vw,26px); right:clamp(12px,2.4vw,26px); width:42px; height:42px; font-size:1.5rem; line-height:1; }
.lb__nav{ top:50%; transform:translateY(-50%); width:46px; height:46px; font-size:1.8rem; line-height:1; }
.lb__nav--prev{ left:clamp(6px,1.6vw,22px); }
.lb__nav--next{ right:clamp(6px,1.6vw,22px); }
.lb__count{
  position:absolute; bottom:clamp(12px,2.4vw,26px); left:50%;
  transform:translateX(-50%); margin:0;
  font-size:.7rem; letter-spacing:.2em; color:var(--bronze-2);
}

/* ═══════════════════════════════════════
   IN THIỆP
   ═══════════════════════════════════════ */
@media print{
  .gate,.player,.hero__scroll,.petals,.venue__map,.rsvp,.lb,.album__more{ display:none!important; }
  body{ background:#fff; color:#000; }
  .hero,.event,.foot{ background:#fff!important; color:#000!important; }
  .hero__names,.shead__h,.ev__time b,.ev__where strong{ color:#410018!important; }
  .reveal{ opacity:1!important; transform:none!important; }
}

/* ═══════════════════════════════════════
   LANG TOGGLE BUTTON
   ═══════════════════════════════════════ */
.lang-btn{
  position:fixed; z-index:160;
  top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px);
  height:34px; padding:0 16px;
  background:rgba(65,0,24,.82); backdrop-filter:blur(10px);
  border:1px solid rgba(195,169,133,.30); border-radius:20px;
  color:var(--ivory); font-family:var(--sans);
  font-size:11px; letter-spacing:.12em;
  cursor:pointer;
  opacity:0; transform:scale(.7); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), background .3s;
}
.lang-btn.is-ready{ opacity:1; transform:none; pointer-events:auto; }
.lang-btn:hover{ background:var(--wine); }

/* ─── Bilingual element toggle ─── */
[data-lang="en"]{ display:none; }
html.lang-en [data-lang="vi"]{ display:none; }
html.lang-en [data-lang="en"]{ display:revert; }

/* ═══════════════════════════════════════
   MOBILE IMPROVEMENTS
   ═══════════════════════════════════════ */
@media (max-width:599px){
  /* Larger chip touch targets */
  .chip span{ min-height:44px; padding:10px 18px; display:flex; align-items:center; }
  /* Readable story text */
  .ch__text p{ font-size:.91rem; line-height:1.78; }
  .pull{ font-size:.98rem; }
  /* Tighter chapter heading */
  .ch__text h3{ font-size:clamp(1.28rem,5vw,1.8rem); }
  /* Countdown digits */
  .count__cell b{ font-size:clamp(2.2rem,9.5vw,3.2rem); }
  /* Event time */
  .ev__time b{ font-size:clamp(2.6rem,9vw,3.8rem); }
  /* Invite body */
  .invite__body{ font-size:.87rem; }
  /* Hero names smaller on tiny phones */
  .hero__names{ font-size:clamp(1.7rem,5.5vw,2.8rem); }
  /* Tighter section padding */
  .ev{ padding:clamp(24px,5vw,40px) clamp(18px,4vw,32px); }
}