/* ══════════════════════════════════════════════════════════════
   GOLDEN HERITAGE — DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root{
  --noir:#120E0B;
  --noir-2:#1D1712;
  --wine:#4A0F1C;
  --wine-2:#6B1B2B;
  --gold:#C9A227;
  --gold-lt:#E8D5A3;
  --gold-dp:#8C6E1F;
  --ivory:#F8F3E9;
  --cream:#EFE5D2;
  --ink:#241E18;
  --ink-soft:#6E6053;
  --line:rgba(201,162,39,.28);
  --line-soft:rgba(36,30,24,.12);

  --sh-lift:0 24px 60px rgba(18,14,11,.20);
  --sh-deep:0 30px 90px rgba(18,14,11,.45);

  --serif:'Cormorant Garamond', Georgia, serif;
  --script:'Great Vibes', cursive;
  --sans:'Be Vietnam Pro', system-ui, sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --page:min(560px, 100%);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--noir); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16.5px; line-height:1.8;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{overflow:hidden;}
body.zoomed{font-size:19px;}

h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; line-height:1.15;}
p{margin:0;}
img{max-width:100%; display:block;}
button{font-family:var(--sans); cursor:pointer; border:0; background:none; color:inherit;}
a{color:inherit;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}

/* ══ SÂN KHẤU ══ */
.stage{
  width:var(--page); margin:0 auto; background:var(--ivory);
  position:relative; overflow:hidden;
  box-shadow:0 0 120px rgba(0,0,0,.6);
}

/* ══ TIỆN ÍCH ══ */
.sec{padding:96px 30px; position:relative;}
.sec--tight{padding:72px 30px;}
.ctr{text-align:center;}
.eyebrow{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-dp); font-weight:400; display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before,.eyebrow::after{content:''; width:26px; height:1px; background:var(--line);}
.h-sec{font-size:clamp(28px,7.4vw,38px); margin-top:16px; color:var(--wine);}
.lead{margin-top:14px; font-size:15px; color:var(--ink-soft); line-height:1.85;}

.rv{opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.rv.on{opacity:1; transform:none;}
.rv-d1{transition-delay:.12s;} .rv-d2{transition-delay:.24s;} .rv-d3{transition-delay:.36s;}

/* Đường ren phân cách */
.lace{display:block; width:180px; height:22px; margin:26px auto; overflow:visible;}
.lace path,.lace line{stroke:var(--gold); fill:none; stroke-width:.9; stroke-linecap:round;}
.lace circle{fill:var(--gold);}
.lace .dash{stroke-dasharray:300; stroke-dashoffset:300; transition:stroke-dashoffset 2.2s var(--ease);}
.rv.on .lace .dash{stroke-dashoffset:0;}

/* ══════════════════════════════════════════════════════════════
   [0] MÀN MỞ THIỆP — PHONG BÌ SÁP
   ══════════════════════════════════════════════════════════════ */
#veil{
  position:fixed; inset:0; z-index:200;
  background:
    radial-gradient(120% 90% at 50% 18%, #2B1218 0%, #1A0C10 45%, #0E0709 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
#veil.gone{opacity:0; visibility:hidden; pointer-events:none;}
#veil canvas{position:absolute; inset:0; width:100%; height:100%;}

.veil-in{position:relative; z-index:3; text-align:center; padding:0 28px; max-width:420px;}
.veil-to{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--gold-lt); opacity:.9;}
.veil-guest{font-family:var(--script); font-size:30px; color:var(--gold-lt); margin-top:2px; line-height:1.4;}

/* Phong bì */
.env{
  width:230px; height:158px; margin:30px auto 34px; position:relative;
  perspective:900px; cursor:pointer;
}
.env-body{
  position:absolute; inset:0;
  background:linear-gradient(160deg,#5C1422 0%,#3E0C16 55%,#2A0810 100%);
  border:1px solid rgba(201,162,39,.42);
  box-shadow:0 24px 50px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.4);
}
.env-body::after{ /* nếp gấp chữ V */
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom right, transparent 49.4%, rgba(201,162,39,.16) 50%, transparent 50.6%),
    linear-gradient(to bottom left,  transparent 49.4%, rgba(201,162,39,.16) 50%, transparent 50.6%);
}
.env-flap{
  position:absolute; top:0; left:0; width:100%; height:80px;
  background:linear-gradient(180deg,#6B1B2B,#4A0F1C);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center; transform:rotateX(0deg);
  transition:transform 1.15s cubic-bezier(.7,-.15,.25,1.2);
  border-bottom:1px solid rgba(201,162,39,.3);
  z-index:2;
}
.env.open .env-flap{transform:rotateX(178deg);}
.env-card{
  position:absolute; left:10px; right:10px; top:16px; height:120px;
  background:linear-gradient(180deg,var(--ivory),var(--cream));
  border:1px solid rgba(201,162,39,.4);
  transform:translateY(0) scale(.96); opacity:0;
  transition:transform 1s .45s var(--ease), opacity .5s .45s ease;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--script); font-size:26px; color:var(--wine);
}
.env.open .env-card{transform:translateY(-58px) scale(1); opacity:1;}

/* Dấu sáp */
.seal{
  position:absolute; top:60px; left:50%; margin-left:-27px;
  width:54px; height:54px; border-radius:50%; z-index:4;
  background:
    radial-gradient(circle at 34% 28%, #E8C765 0%, #C9A227 42%, #8C6E1F 78%, #5E4712 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:17px; letter-spacing:.02em; color:#3A0D16;
  transition:transform .55s var(--ease), opacity .55s ease;
}
.seal::after{
  content:''; position:absolute; inset:5px; border-radius:50%;
  border:1px solid rgba(58,13,22,.35);
}
.env.open .seal{transform:scale(.2) rotate(24deg) translateY(10px); opacity:0;}
/* mảnh sáp vỡ */
.shard{
  position:absolute; top:74px; left:50%; width:9px; height:9px; z-index:4;
  background:linear-gradient(140deg,#C9A227,#7E6118); opacity:0;
  clip-path:polygon(50% 0,100% 62%,74% 100%,20% 88%,0 38%);
}
.env.open .shard{animation:shardFly .95s var(--ease) forwards;}
@keyframes shardFly{
  0%{opacity:1; transform:translate(0,0) rotate(0);}
  100%{opacity:0; transform:translate(var(--sx),var(--sy)) rotate(var(--sr));}
}

.veil-hint{font-size:11px; letter-spacing:.3em; color:var(--gold); opacity:.7; text-transform:uppercase;}
.veil-btn{
  margin-top:22px; padding:13px 34px; border:1px solid var(--gold);
  color:var(--gold-lt); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  border-radius:999px; transition:.4s var(--ease); backdrop-filter:blur(4px);
}
.veil-btn:hover{background:var(--gold); color:#2A0810;}
.pulse{animation:pulse 2.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ══════════════════════════════════════════════════════════════
   [1] HERO
   ══════════════════════════════════════════════════════════════ */
#hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:70px 28px 96px; overflow:hidden; background:var(--noir);
}
#hero .ph{
  position:absolute; inset:0;
  background-image:var(--tcdt-hero-image); background-position:center; background-size:cover;
  filter:sepia(.42) saturate(.85) brightness(.62) contrast(1.05);
  animation:ken 26s ease-in-out infinite alternate;
}
@keyframes ken{0%{transform:scale(1.02) translate(0,0);}100%{transform:scale(1.16) translate(-1.5%,-2.5%);}}
#hero .vig{
  position:absolute; inset:0;
  background:
    radial-gradient(88% 68% at 50% 34%, rgba(18,14,11,.10) 0%, rgba(18,14,11,.62) 62%, rgba(18,14,11,.94) 100%),
    linear-gradient(180deg, rgba(74,15,28,.28) 0%, transparent 40%, rgba(18,14,11,.88) 100%);
}
#hero canvas{position:absolute; inset:0; width:100%; height:100%;}
.hero-in{position:relative; z-index:3; color:var(--ivory);}

.mono{width:104px; height:104px; margin:0 auto 26px; display:block;}
.mono .ring,.mono .ltr{fill:none; stroke:var(--gold-lt); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round;}
.mono .ring{stroke-width:.85; opacity:.75;}
.mono .dash{stroke-dasharray:520; stroke-dashoffset:520;}
.mono.draw .dash{animation:draw 2.4s var(--ease) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

.hero-eyebrow{font-size:10.5px; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-lt); opacity:.85;}
.hero-names{
  margin:18px 0 6px; font-family:var(--serif); font-weight:300;
  font-size:clamp(44px,12.5vw,66px); line-height:1.06; color:#FFFDF8;
  letter-spacing:.01em;
}
.hero-amp{display:block; font-family:var(--script); font-size:.62em; color:var(--gold-lt); margin:4px 0 2px; line-height:1;}
.hero-rule{width:190px; height:10px; margin:16px auto 18px;}
.hero-rule path{stroke:var(--gold-lt); fill:none; stroke-width:.9; stroke-dasharray:280; stroke-dashoffset:280; animation:draw 2.2s .9s var(--ease) forwards;}
.hero-date{font-size:12.5px; letter-spacing:.3em; color:var(--gold-lt);}
.hero-venue{margin-top:8px; font-size:13px; opacity:.8; font-weight:200;}

.cue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3; width:1px; height:52px; background:linear-gradient(var(--gold-lt),transparent); overflow:hidden;}
.cue::after{content:''; position:absolute; left:0; top:-52px; width:1px; height:52px; background:#FFF6DF; animation:cue 2.4s ease-in-out infinite;}
@keyframes cue{to{top:52px;}}

/* ══════════════════════════════════════════════════════════════
   [2] LỜI MỜI
   ══════════════════════════════════════════════════════════════ */
#invite{background:var(--ivory); position:relative;}
#invite::before{
  content:''; position:absolute; inset:22px; border:1px solid var(--line);
  pointer-events:none;
}
#invite::after{
  content:''; position:absolute; inset:30px; border:1px solid rgba(201,162,39,.14);
  pointer-events:none;
}
.inv-in{position:relative; z-index:2; text-align:center;}
.inv-guest{
  font-family:var(--script); font-size:clamp(30px,8.4vw,40px); color:var(--wine);
  margin:20px 0 6px; line-height:1.35;
}
.inv-role{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-dp);}
.inv-body{margin-top:20px; font-size:16px; color:var(--ink-soft); line-height:1.95;}
.inv-sign{margin-top:26px; font-family:var(--serif); font-style:italic; font-size:17px; color:var(--wine);}

/* ══════════════════════════════════════════════════════════════
   [3] CÔ DÂU & CHÚ RỂ
   ══════════════════════════════════════════════════════════════ */
#couple{background:var(--cream);}
.duo{margin-top:40px; display:grid; gap:44px;}
.person{text-align:center;}
.frame{
  width:190px; aspect-ratio:3/4; margin:0 auto 20px; position:relative;
  border-radius:96px 96px 8px 8px; overflow:hidden;
  box-shadow:var(--sh-lift);
}
.frame img{width:100%; height:100%; object-fit:cover; filter:sepia(.24) saturate(.92) contrast(1.03); transition:transform 1.1s var(--ease);}
.person:hover .frame img{transform:scale(1.05);}
.frame::after{
  content:''; position:absolute; inset:7px; border:1px solid rgba(248,243,233,.55);
  border-radius:90px 90px 4px 4px; pointer-events:none;
}
.frame-ring{
  position:absolute; inset:-9px; border:1px solid var(--line);
  border-radius:104px 104px 12px 12px; pointer-events:none;
}
.p-role{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dp);}
.p-name{font-family:var(--serif); font-size:30px; color:var(--wine); margin-top:6px;}
.p-desc{margin-top:10px; font-size:14px; color:var(--ink-soft); max-width:250px; margin-inline:auto;}
.p-parents{margin-top:16px; font-size:13.5px; color:var(--ink-soft); line-height:1.9;}
.p-parents span{display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:4px;}
.duo-amp{
  font-family:var(--script); font-size:44px; color:var(--gold); text-align:center;
  line-height:1; margin:-8px 0;
}

/* ══════════════════════════════════════════════════════════════
   [4] ĐẾM NGƯỢC
   ══════════════════════════════════════════════════════════════ */
#count{
  background:linear-gradient(175deg,var(--wine) 0%,#3A0B15 60%,var(--noir) 100%);
  color:var(--ivory); text-align:center; position:relative; overflow:hidden;
}
#count::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 50% at 50% 0%, rgba(201,162,39,.16), transparent 70%);
}
#count .h-sec{color:var(--ivory);}
#count .eyebrow{color:var(--gold-lt);}
#count .eyebrow::before,#count .eyebrow::after{background:rgba(232,213,163,.4);}
.cd{position:relative; z-index:2; display:flex; justify-content:center; gap:10px; margin-top:36px;}
.cd-u{flex:1; max-width:86px;}
.cd-n{
  font-family:var(--serif); font-size:clamp(30px,8.6vw,40px); line-height:1;
  padding:20px 0 18px; color:#FFF8E8;
  border:1px solid rgba(232,213,163,.32);
  background:linear-gradient(180deg, rgba(232,213,163,.10), rgba(232,213,163,.02));
  position:relative;
}
.cd-n::after{content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(18,14,11,.28);}
.cd-n.flip{animation:flip .55s var(--ease);}
@keyframes flip{0%{transform:rotateX(0);}42%{transform:rotateX(86deg); background:rgba(201,162,39,.3);}58%{transform:rotateX(-86deg); background:rgba(201,162,39,.3);}100%{transform:rotateX(0);}}
.cd-l{margin-top:11px; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-lt); opacity:.85;}
.cd-note{position:relative; z-index:2; margin-top:26px; font-size:13.5px; color:rgba(248,243,233,.68); font-style:italic; font-family:var(--serif);}

/* ══════════════════════════════════════════════════════════════
   [5] SỰ KIỆN
   ══════════════════════════════════════════════════════════════ */
#events{background:var(--ivory);}
.ev{
  margin-top:34px; border:1px solid var(--line); padding:34px 24px 28px;
  position:relative; text-align:center; background:linear-gradient(180deg, rgba(201,162,39,.05), transparent 55%);
}
.ev + .ev{margin-top:22px;}
.ev-no{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--ivory); padding:0 14px; font-family:var(--serif);
  font-size:15px; color:var(--gold-dp); letter-spacing:.16em;
}
.ev-name{font-family:var(--serif); font-size:25px; color:var(--wine);}
.ev-time{margin-top:12px; font-family:var(--serif); font-size:34px; color:var(--ink);}
.ev-date{margin-top:6px; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp);}
.ev-lunar{margin-top:4px; font-size:12.5px; color:var(--ink-soft); font-style:italic;}
.ev-venue{margin-top:18px; font-family:var(--serif); font-size:19px; color:var(--wine);}
.ev-addr{margin-top:5px; font-size:13.5px; color:var(--ink-soft); line-height:1.7;}
.btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  padding:13px 30px; border:1px solid var(--wine); color:var(--wine);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  border-radius:999px; transition:.42s var(--ease);
}
.btn:hover{background:var(--wine); color:var(--ivory); box-shadow:0 14px 30px rgba(74,15,28,.28);}
.btn--solid{background:var(--wine); color:var(--ivory);}
.btn--solid:hover{background:var(--wine-2);}
.btn--gold{border-color:var(--gold); color:var(--gold-dp);}
.btn--gold:hover{background:var(--gold); color:#2A0810; box-shadow:0 14px 30px rgba(201,162,39,.3);}
.btn svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6;}
.map{margin-top:22px; height:220px; border:1px solid var(--line); overflow:hidden;}
.map iframe{width:100%; height:100%; border:0; filter:sepia(.22) saturate(.9);}

/* ══════════════════════════════════════════════════════════════
   [6] CÂU CHUYỆN
   ══════════════════════════════════════════════════════════════ */
#story{background:var(--noir-2); color:var(--ivory); position:relative; overflow:hidden;}
#story::before{content:''; position:absolute; inset:0; background:radial-gradient(60% 40% at 20% 10%, rgba(201,162,39,.12), transparent 65%);}
#story .h-sec{color:var(--ivory);} #story .eyebrow{color:var(--gold-lt);}
#story .eyebrow::before,#story .eyebrow::after{background:rgba(232,213,163,.35);}
.tl{margin-top:40px; position:relative; padding-left:34px; z-index:2;}
.tl::before{content:''; position:absolute; left:9px; top:8px; bottom:8px; width:1px; background:linear-gradient(var(--gold),rgba(201,162,39,.1));}
.tl-i{position:relative; padding-bottom:42px;}
.tl-i:last-child{padding-bottom:0;}
.tl-i::before{
  content:''; position:absolute; left:-34px; top:6px; width:11px; height:11px;
  border-radius:50%; background:var(--noir-2); border:1.5px solid var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.12);
}
.tl-y{font-family:var(--serif); font-size:14px; letter-spacing:.24em; color:var(--gold-lt);}
.tl-h{font-family:var(--serif); font-size:23px; margin-top:5px; color:#FFF8E8;}
.tl-p{margin-top:8px; font-size:14.5px; color:rgba(248,243,233,.66); line-height:1.85;}
.tl-img{margin-top:16px; aspect-ratio:4/3; overflow:hidden; border:1px solid rgba(201,162,39,.22);}
.tl-img img{width:100%; height:100%; object-fit:cover; filter:sepia(.34) saturate(.8) brightness(.9);}

/* ══════════════════════════════════════════════════════════════
   [7] ALBUM
   ══════════════════════════════════════════════════════════════ */
#album{background:var(--ivory);}
.gal{margin-top:34px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.gal figure{margin:0; overflow:hidden; position:relative; cursor:zoom-in; box-shadow:var(--sh-lift);}
.gal figure:nth-child(1),.gal figure:nth-child(6){grid-column:span 2; aspect-ratio:16/10;}
.gal figure:not(:nth-child(1)):not(:nth-child(6)){aspect-ratio:3/4;}
.gal img{width:100%; height:100%; object-fit:cover; filter:sepia(.22) saturate(.9); transition:transform 1s var(--ease), filter .8s ease;}
.gal figure:hover img{transform:scale(1.06); filter:sepia(.06) saturate(1);}
.gal figure::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(248,243,233,.4);}

#lb{position:fixed; inset:0; z-index:180; background:rgba(12,8,7,.95); display:none; align-items:center; justify-content:center; padding:24px;}
#lb.on{display:flex;}
#lb img{max-width:100%; max-height:86vh; box-shadow:var(--sh-deep);}
#lb .x{position:absolute; top:20px; right:22px; width:44px; height:44px; color:var(--gold-lt); font-size:26px;}
#lb .nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; color:var(--gold-lt); font-size:30px;}
#lb .prev{left:10px;} #lb .next{right:10px;}

/* ══════════════════════════════════════════════════════════════
   [8] RSVP
   ══════════════════════════════════════════════════════════════ */
#rsvp{background:var(--cream); position:relative; overflow:hidden;}
.card{
  margin-top:30px; background:var(--ivory); border:1px solid var(--line);
  padding:30px 24px; box-shadow:var(--sh-lift); position:relative; z-index:2;
}
label{display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp); margin:20px 0 8px;}
label:first-of-type{margin-top:0;}
input[type=text],input[type=tel],textarea,select{
  width:100%; border:0; border-bottom:1px solid var(--line-soft); background:transparent;
  padding:10px 2px; font-family:var(--sans); font-size:16px; color:var(--ink);
  outline:none; transition:border-color .3s ease; border-radius:0;
}
input:focus,textarea:focus,select:focus{border-color:var(--gold);}
textarea{resize:vertical; min-height:74px;}
.seg{display:flex; gap:9px; margin-top:4px;}
.seg button{
  flex:1; padding:13px 6px; border:1px solid var(--line-soft); font-size:12.5px;
  color:var(--ink-soft); transition:.3s var(--ease); background:transparent;
}
.seg button.on{background:var(--wine); border-color:var(--wine); color:var(--ivory);}
.num{display:flex; align-items:center; gap:18px; margin-top:6px;}
.num button{width:40px; height:40px; border:1px solid var(--line-soft); border-radius:50%; font-size:19px; color:var(--wine); transition:.3s;}
.num button:hover{border-color:var(--gold); color:var(--gold-dp);}
.num span{font-family:var(--serif); font-size:26px; min-width:34px; text-align:center; color:var(--wine);}
.hp{position:absolute; left:-9999px; opacity:0;}
.submit{margin-top:28px; text-align:center;}

.petal-burst{position:fixed; z-index:190; pointer-events:none; border-radius:60% 0 60% 0;}

/* ══════════════════════════════════════════════════════════════
   [9] HỘP MỪNG
   ══════════════════════════════════════════════════════════════ */
#gift{background:var(--ivory);}
.tabs{display:flex; margin-top:28px; border-bottom:1px solid var(--line-soft);}
.tabs button{flex:1; padding:14px 0; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid transparent; transition:.3s;}
.tabs button.on{color:var(--wine); border-color:var(--gold);}
.pane{display:none; text-align:center; padding-top:28px;}
.pane.on{display:block; animation:fadeIn .5s var(--ease);}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}
.qr{width:180px; height:180px; margin:0 auto; padding:10px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-lift);}
.bank{margin-top:18px; font-family:var(--serif); font-size:20px; color:var(--wine);}
.acct{margin-top:4px; font-size:14.5px; color:var(--ink-soft); letter-spacing:.06em;}
.owner{margin-top:2px; font-size:12.5px; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase;}

/* ══════════════════════════════════════════════════════════════
   [10] LƯU BÚT & KẾT
   ══════════════════════════════════════════════════════════════ */
#wish{background:var(--cream);}
.wlist{margin-top:24px; display:flex; flex-direction:column; gap:14px;}
.w{border-left:2px solid var(--gold); padding:10px 0 10px 16px; animation:wIn .6s var(--ease) both;}
@keyframes wIn{from{opacity:0; transform:translateY(10px);}}
.w-n{font-family:var(--serif); font-size:16px; color:var(--wine);}
.w-m{margin-top:3px; font-size:14px; color:var(--ink-soft); line-height:1.75;}
.w-empty{text-align:center; font-size:13.5px; color:var(--ink-soft); opacity:.6; padding:18px 0; font-style:italic;}

#thanks{
  background:linear-gradient(185deg,var(--noir) 0%,#2A1116 55%,var(--wine) 100%);
  color:var(--ivory); text-align:center; position:relative; overflow:hidden;
  padding-bottom:120px;
}
#thanks canvas{position:absolute; inset:0; width:100%; height:100%;}
.th-in{position:relative; z-index:2;}
.th-h{font-family:var(--serif); font-size:clamp(24px,6.6vw,30px); line-height:1.45; color:#FFF8E8;}
.th-sig{margin-top:22px; font-family:var(--script); font-size:34px; color:var(--gold-lt);}
.th-date{margin-top:10px; font-size:11px; letter-spacing:.3em; color:rgba(232,213,163,.7);}
.acts{margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.acts button{
  padding:11px 20px; border:1px solid rgba(232,213,163,.4); border-radius:999px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-lt);
  transition:.35s var(--ease);
}
.acts button:hover{background:var(--gold); border-color:var(--gold); color:#2A0810;}
.credit{margin-top:44px; font-size:10px; letter-spacing:.14em; color:rgba(248,243,233,.28);}

/* ══════════════════════════════════════════════════════════════
   NÚT NỔI & TOAST
   ══════════════════════════════════════════════════════════════ */
.fabs{position:fixed; right:16px; bottom:20px; z-index:120; display:flex; flex-direction:column; gap:10px;}
.fab{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(74,15,28,.9); border:1px solid rgba(232,213,163,.45); color:var(--gold-lt);
  box-shadow:0 10px 26px rgba(0,0,0,.4); backdrop-filter:blur(8px); transition:.35s var(--ease);
}
.fab:hover{background:var(--wine-2); transform:translateY(-2px);}
.fab svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5;}
.disc{width:19px; height:19px; border-radius:50%; background:radial-gradient(circle,var(--gold-lt) 0 3.2px,#1A0C10 4px 62%,#3E0C16 63%);}
[data-play="1"] .disc{animation:spin 3.4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.fab .txt{font-size:12px; font-weight:400; letter-spacing:.04em;}

#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,150%); z-index:220;
  background:var(--wine); color:var(--ivory); padding:14px 26px; font-size:13.5px;
  border:1px solid rgba(232,213,163,.35); box-shadow:var(--sh-deep);
  transition:transform .55s var(--ease); max-width:88vw; text-align:center;
}
#toast.on{transform:translate(-50%,0);}

#prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:150; background:linear-gradient(90deg,var(--gold-dp),var(--gold-lt));}

/* ══ DESKTOP ══ */
@media(min-width:768px){
  .stage{--page:600px;}
  .sec{padding:112px 44px;}
  .duo{grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;}
  .duo-amp{margin:0;}
  .p-desc{max-width:none;}
}

/* WordPress port hooks: keep reference geometry/tokens, replace demo image URLs dynamically. */
#hero .ph{background-image:var(--tcdt-hero-image)!important}
.tcdt-port-loading{visibility:hidden}
/* The invitation is self-contained; no site chrome may leak into it. */
.tcdt-thiep-port ~ *, body.tcdt-thiep-port > header, body.tcdt-thiep-port > footer{display:none!important}