/* ══════════════════════════════════════════════════════════════
   EMERALD VOW — LỜI THỀ NGỌC LỤC
   2 họ font: Marcellus (serif cổ điển thanh thoát) + Be Vietnam Pro
   ══════════════════════════════════════════════════════════════ */
:root{
  --jade:#0B2620;        /* ngọc lục sâu — nền chính */
  --jade-2:#123A31;      /* ngọc lục vừa */
  --jade-3:#1E5C4C;      /* ngọc lục sáng */
  --brass:#C9A961;       /* đồng thau — nhấn chính */
  --brass-lt:#E7D5A8;    /* đồng nhạt — chữ trên nền tối */
  --brass-dp:#8E7434;    /* đồng đậm — chữ trên nền sáng */
  --champ:#F2EDE3;       /* sâm panh — nền sáng */
  --champ-2:#E6DECF;     /* sâm panh đậm */
  --ink:#22302B;
  --ink-soft:#5F6F68;
  --mist:rgba(242,237,227,.72);
  --line:rgba(201,169,97,.32);
  --line-soft:rgba(34,48,43,.12);

  --sh:0 22px 56px rgba(11,38,32,.18);
  --sh-dp:0 32px 84px rgba(0,0,0,.5);
  --glow:0 0 26px rgba(201,169,97,.4);

  --serif:'Marcellus', Georgia, serif;
  --sans:'Be Vietnam Pro', system-ui, sans-serif;
  --ease:cubic-bezier(.19,1,.28,1);
  --page:min(560px,100%);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:#061713;color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.82;
  -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.2;}
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;}
}
.stage{width:var(--page);margin:0 auto;background:var(--champ);position:relative;overflow:hidden;
  box-shadow:0 0 120px rgba(0,0,0,.5);}

/* ══ TIỆN ÍCH ══ */
.sec{padding:100px 30px;position:relative;}
.sec--sm{padding:74px 30px;}
.sec--dark{background:linear-gradient(180deg,var(--jade) 0%,var(--jade-2) 100%);color:var(--champ);}
.sec--dark h2,.sec--dark h3{color:var(--champ);}
.sec--dark .eyebrow{color:var(--brass-lt);}
.sec--dark .lead{color:rgba(242,237,227,.72);}
.ctr{text-align:center;}
.eyebrow{font-size:10px;letter-spacing:.38em;text-transform:uppercase;color:var(--brass-dp);font-weight:500;}
.h-sec{font-size:clamp(26px,7vw,34px);margin-top:14px;color:var(--jade);}
.sec--dark .h-sec{color:var(--champ);}
.h-sec em{font-style:normal;color:var(--brass-dp);}
.sec--dark .h-sec em{color:var(--brass-lt);}
.lead{margin-top:16px;font-size:14.5px;color:var(--ink-soft);}
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.rv.on{opacity:1;transform:none;}
.rv-d1{transition-delay:.12s;}.rv-d2{transition-delay:.24s;}.rv-d3{transition-delay:.36s;}

.jewel{display:flex;align-items:center;gap:13px;margin:24px 0;}
.jewel i{flex:1;height:1px;background:var(--line);transform:scaleX(0);transition:transform 1.3s var(--ease);}
.jewel i:first-child{transform-origin:right;} .jewel i:last-child{transform-origin:left;}
.rv.on .jewel i{transform:scaleX(1);}
.jewel svg{width:18px;height:18px;flex:none;opacity:0;transition:opacity .7s .5s ease;}
.rv.on .jewel svg{opacity:1;}

/* ══════════════════════════════════════════════════════════════
   [0] MÀN MỞ — ĐÔI NHẪN LỒNG NHAU
   ══════════════════════════════════════════════════════════════ */
#veil{position:fixed;inset:0;z-index:200;
  background:radial-gradient(125% 95% at 50% 38%,#164034 0%,#0B2620 48%,#04120E 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 26px;transition:opacity 1.2s var(--ease),visibility 1.2s;overflow:hidden;}
#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:4;text-align:center;max-width:420px;width:100%;}
.veil-lbl{font-size:10px;letter-spacing:.38em;text-transform:uppercase;color:var(--brass-lt);opacity:.8;}
.veil-guest{margin-top:8px;font-family:var(--serif);font-size:21px;color:var(--champ);line-height:1.45;}

.rings{width:250px;height:190px;margin:28px auto 6px;cursor:pointer;display:block;overflow:visible;}
.rings .band{fill:none;stroke:url(#brassGrad);stroke-width:5;
  transition:transform 1.35s var(--ease);transform-box:fill-box;transform-origin:center;}
.rings .inner{fill:none;stroke:rgba(11,38,32,.55);stroke-width:1.2;
  transition:transform 1.35s var(--ease);transform-box:fill-box;transform-origin:center;}
.rings .gL{transform:translateX(-30px);}
.rings .gR{transform:translateX(30px);}
.rings.open .gL{transform:translateX(0);}
.rings.open .gR{transform:translateX(0);}
/* chữ khắc trên vành nhẫn — hiện sau khi lồng */
.rings .engrave{font-family:'Marcellus',serif;font-size:11px;letter-spacing:.24em;
  fill:var(--brass-lt);opacity:0;transition:opacity .9s .95s ease;}
.rings.open .engrave{opacity:1;}
/* tia sáng quét qua khi hai nhẫn chạm nhau */
.rings .glint{fill:#FFF6DE;opacity:0;}
.rings.open .glint{animation:glint .85s .95s ease-out forwards;}
@keyframes glint{0%{opacity:0;transform:scale(.3);}45%{opacity:.95;transform:scale(1.5);}100%{opacity:0;transform:scale(2.6);}}
.rings .halo{fill:rgba(201,169,97,.12);opacity:0;transform-box:fill-box;transform-origin:center;
  transition:opacity 1.1s ease,transform 1.4s var(--ease);}
.rings.open .halo{opacity:1;transform:scale(2.1);}

.veil-hint{margin-top:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-lt);opacity:.7;animation:breathe 2.8s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.95}}
.veil-btn{margin-top:22px;padding:13px 34px;border:1px solid var(--line);border-radius:999px;
  color:var(--brass-lt);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  transition:.42s var(--ease);}
.veil-btn:hover{background:var(--brass);color:var(--jade);border-color:var(--brass);box-shadow:var(--glow);}

/* ══════════════════════════════════════════════════════════════
   [1] HERO
   ══════════════════════════════════════════════════════════════ */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;text-align:center;padding:80px 28px 92px;overflow:hidden;background:var(--jade);}
#hero .ph{position:absolute;inset:0;background-image:var(--tcdt-emerald-hero-image) center/cover;
  filter:saturate(.62) brightness(.5) contrast(1.08) hue-rotate(118deg);
  animation:ken 30s ease-in-out infinite alternate;}
@keyframes ken{from{transform:scale(1.04);}to{transform:scale(1.16) translateY(-2%);}}
#hero .veil2{position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 34%,rgba(11,38,32,.28) 0%,rgba(11,38,32,.74) 58%,rgba(11,38,32,.97) 100%);}
#hero canvas{position:absolute;inset:0;width:100%;height:100%;}
.hero-in{position:relative;z-index:3;color:var(--champ);}
.hero-crest{width:100px;height:100px;margin:0 auto 22px;display:block;overflow:visible;}
.hero-crest .r{fill:none;stroke:var(--brass);stroke-width:.8;stroke-dasharray:340;stroke-dashoffset:340;}
.hero-crest.draw .r{animation:draw 2.4s var(--ease) forwards;}
.hero-crest .m{fill:none;stroke:var(--brass-lt);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:190;stroke-dashoffset:190;}
.hero-crest.draw .m{animation:draw 2s .5s var(--ease) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.hero-eyebrow{font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--brass-lt);opacity:.85;}
.hero-names{margin:16px 0 4px;font-size:clamp(38px,10.4vw,52px);line-height:1.12;color:#FCFAF4;}
.hero-names .amp{display:block;font-size:.46em;color:var(--brass-lt);margin:8px 0 4px;letter-spacing:.24em;}
.hero-rule{width:190px;height:12px;margin:14px auto 16px;overflow:visible;}
.hero-rule line{stroke:var(--brass);stroke-width:.8;stroke-dasharray:190;stroke-dashoffset:190;
  animation:draw 2s 1s var(--ease) forwards;}
.hero-rule .d{fill:var(--brass-lt);opacity:0;animation:fi .7s 2.3s ease forwards;}
@keyframes fi{to{opacity:1;}}
.hero-date{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:var(--brass-lt);}
.hero-venue{margin-top:7px;font-size:13px;color:rgba(242,237,227,.72);}
.cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;width:1px;height:48px;
  background:linear-gradient(var(--brass),transparent);overflow:hidden;}
.cue::after{content:'';position:absolute;left:0;top:-48px;width:1px;height:48px;background:var(--brass-lt);
  animation:cuego 2.4s ease-in-out infinite;}
@keyframes cuego{to{top:48px;}}

/* ══════════════════════════════════════════════════════════════
   [2] LỜI MỜI
   ══════════════════════════════════════════════════════════════ */
.inv{max-width:430px;margin:0 auto;text-align:center;position:relative;padding:38px 24px;}
.inv::before,.inv::after{content:'';position:absolute;left:24px;right:24px;height:1px;background:var(--line);}
.inv::before{top:0;} .inv::after{bottom:0;}
.inv-role{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-dp);}
.inv-guest{font-family:var(--serif);font-size:clamp(26px,7.2vw,33px);color:var(--jade);margin:15px 0 4px;line-height:1.35;}
.inv-body{margin-top:22px;font-size:15.5px;color:var(--ink-soft);line-height:2;}
.inv-quote{margin-top:24px;font-family:var(--serif);font-size:17px;color:var(--brass-dp);line-height:1.75;}
.inv-sign{margin-top:24px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--jade);}

/* ══════════════════════════════════════════════════════════════
   [3] CÔ DÂU & CHÚ RỂ
   ══════════════════════════════════════════════════════════════ */
#couple{background:var(--champ-2);}
.duo{margin-top:38px;display:grid;gap:34px;}
.person{text-align:center;}
.pf{width:174px;aspect-ratio:4/5;margin:0 auto 18px;position:relative;overflow:hidden;box-shadow:var(--sh);}
.pf img{width:100%;height:100%;object-fit:cover;filter:saturate(.86);transition:transform 1.2s var(--ease);}
.person:hover .pf img{transform:scale(1.05);}
.pf::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 7px rgba(242,237,227,.55);}
.p-role{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-dp);}
.p-name{font-family:var(--serif);font-size:26px;color:var(--jade);margin-top:6px;}
.p-desc{margin-top:9px;font-size:13.5px;color:var(--ink-soft);max-width:250px;margin-inline:auto;line-height:1.8;}
.p-par{margin-top:14px;font-size:13px;color:var(--ink-soft);line-height:1.85;}
.p-par span{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-dp);margin-bottom:3px;}
.duo-amp{text-align:center;font-family:var(--serif);font-size:26px;color:var(--brass);letter-spacing:.24em;}

/* ══════════════════════════════════════════════════════════════
   [4] LỊCH THÁNG + ĐẾM NGƯỢC
   ══════════════════════════════════════════════════════════════ */
.cal{max-width:330px;margin:32px auto 0;padding:26px 20px;background:rgba(242,237,227,.06);
  border:1px solid rgba(231,213,168,.22);}
.cal-m{font-family:var(--serif);font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  text-align:center;color:var(--brass-lt);margin-bottom:16px;}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;}
.cal-g .dow{font-size:9.5px;letter-spacing:.06em;color:rgba(242,237,227,.42);padding-bottom:6px;}
.cal-g .d{font-family:var(--serif);font-size:14px;padding:7px 0;color:rgba(242,237,227,.78);
  font-variant-numeric:tabular-nums;}
.cal-g .d.hl{position:relative;color:var(--jade);font-weight:400;}
.cal-g .d.hl::before{content:'';position:absolute;inset:2px;border-radius:50%;background:var(--brass-lt);z-index:-1;}
.cal-g .d.hl::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--brass);
  animation:ringp 2.8s ease-in-out infinite;}
@keyframes ringp{0%,100%{transform:scale(1);opacity:.75;}50%{transform:scale(1.18);opacity:0;}}
.cal-lunar{margin-top:14px;text-align:center;font-size:12px;color:rgba(242,237,227,.55);font-style:italic;}

.cd{margin-top:32px;display:flex;justify-content:center;gap:9px;}
.cd-u{flex:1;max-width:80px;}
.cd-n{font-family:var(--serif);font-size:clamp(26px,7.4vw,33px);color:var(--brass-lt);padding:18px 0;
  border:1px solid rgba(231,213,168,.26);background:rgba(242,237,227,.05);font-variant-numeric:tabular-nums;}
.cd-n.tick{color:#FFF6DE;border-color:var(--brass);}
.cd-l{margin-top:9px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(231,213,168,.75);}

/* ══════════════════════════════════════════════════════════════
   [5] SỰ KIỆN — có nút ẩn/hiện bản đồ và chọn phương tiện
   ══════════════════════════════════════════════════════════════ */
.ev{margin-top:28px;padding:30px 24px;border:1px solid var(--line);position:relative;
  background:linear-gradient(180deg,rgba(201,169,97,.05),transparent 60%);}
.ev+.ev{margin-top:20px;}
.ev-tag{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-dp);}
.ev-name{font-family:var(--serif);font-size:21px;color:var(--jade);margin-top:6px;}
.ev-time{font-family:var(--serif);font-size:32px;color:var(--ink);margin-top:13px;font-variant-numeric:tabular-nums;}
.ev-date{margin-top:5px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-dp);}
.ev-lunar{margin-top:3px;font-size:12.5px;color:var(--ink-soft);font-style:italic;}
.ev-venue{margin-top:17px;font-family:var(--serif);font-size:18px;color:var(--jade);}
.ev-addr{margin-top:4px;font-size:13px;color:var(--ink-soft);line-height:1.7;}
.btn{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:12px 26px;
  border:1px solid var(--jade);color:var(--jade);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;transition:.42s var(--ease);}
.btn:hover{background:var(--jade);color:var(--champ);}
.btn--fill{background:var(--jade);color:var(--champ);}
.btn--fill:hover{background:var(--jade-3);}
.btn--brass{border-color:var(--brass);color:var(--brass-dp);}
.btn--brass:hover{background:var(--brass);color:var(--jade);}
.btn--ghost{border-color:rgba(231,213,168,.4);color:var(--brass-lt);}
.btn--ghost:hover{background:var(--brass-lt);color:var(--jade);}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;}
.travel{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap;}
.travel button{padding:8px 14px;border:1px solid var(--line-soft);font-size:11px;color:var(--ink-soft);transition:.3s;}
.travel button.on{background:var(--jade);border-color:var(--jade);color:var(--champ);}
.map{margin-top:16px;aspect-ratio:16/10;border:1px solid var(--line-soft);overflow:hidden;
  max-height:0;opacity:0;transition:max-height .7s var(--ease),opacity .5s ease,margin-top .5s;}
.map.on{max-height:400px;opacity:1;}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.7) hue-rotate(96deg) contrast(1.02);}
.map-toggle{margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dp);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.3s;}
.map-toggle:hover{color:var(--jade);border-color:var(--jade);}

/* ══════════════════════════════════════════════════════════════
   [6] CÂU CHUYỆN
   ══════════════════════════════════════════════════════════════ */
.tl{margin-top:38px;position:relative;padding-left:32px;}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(var(--brass),rgba(201,169,97,.15));}
.tl-i{position:relative;padding-bottom:42px;}
.tl-i:last-child{padding-bottom:0;}
.tl-i::before{content:'';position:absolute;left:-32px;top:5px;width:9px;height:9px;
  background:var(--brass);transform:rotate(45deg);box-shadow:0 0 0 4px rgba(201,169,97,.14);}
.tl-y{font-family:var(--serif);font-size:14px;letter-spacing:.22em;color:var(--brass-lt);}
.tl-h{font-family:var(--serif);font-size:20px;margin-top:5px;color:var(--champ);}
.tl-p{margin-top:8px;font-size:14px;color:rgba(242,237,227,.68);line-height:1.9;}
.tl-img{margin-top:15px;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(201,169,97,.2);}
.tl-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.82) hue-rotate(8deg);}

/* ══════════════════════════════════════════════════════════════
   [7] ALBUM
   ══════════════════════════════════════════════════════════════ */
.gal{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.gal figure{margin:0;overflow:hidden;cursor:zoom-in;position:relative;box-shadow:var(--sh);}
.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:saturate(.86);
  transition:transform 1.1s var(--ease),filter .8s;}
.gal figure:hover img{transform:scale(1.05);filter:saturate(1.02);}
.gal figure::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(242,237,227,.45);}
#lb{position:fixed;inset:0;z-index:180;background:rgba(4,18,14,.96);display:none;
  align-items:center;justify-content:center;padding:22px;}
#lb.on{display:flex;}
#lb img{max-width:100%;max-height:86vh;box-shadow:var(--sh-dp);}
#lb button{position:absolute;width:44px;height:44px;color:var(--brass-lt);font-size:26px;}
#lb .x{top:16px;right:18px;} #lb .prev{left:6px;top:50%;transform:translateY(-50%);} #lb .next{right:6px;top:50%;transform:translateY(-50%);}

/* ══════════════════════════════════════════════════════════════
   FORM CHUNG
   ══════════════════════════════════════════════════════════════ */
.card{margin-top:26px;padding:30px 24px;background:var(--champ);border:1px solid var(--line);box-shadow:var(--sh);}
.sec--dark .card{background:rgba(242,237,227,.05);border-color:rgba(231,213,168,.22);}
label{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-dp);margin:20px 0 8px;}
.sec--dark label{color:var(--brass-lt);}
label .opt{text-transform:none;letter-spacing:0;color:var(--ink-soft);}
.sec--dark label .opt{color:rgba(242,237,227,.5);}
label:first-of-type{margin-top:0;}
input[type=text],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;border-radius:0;transition:border-color .35s;}
.sec--dark input,.sec--dark textarea,.sec--dark select{color:var(--champ);border-color:rgba(231,213,168,.24);}
.sec--dark select option{background:var(--jade-2);color:var(--champ);}
input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:.5;}
.sec--dark input::placeholder,.sec--dark textarea::placeholder{color:rgba(242,237,227,.4);}
input:focus,textarea:focus,select:focus{border-color:var(--brass);}
textarea{resize:vertical;min-height:70px;}
.seg{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;}
.seg button{flex:1;min-width:88px;padding:12px 6px;border:1px solid var(--line-soft);
  font-size:12.5px;color:var(--ink-soft);transition:.3s var(--ease);}
.sec--dark .seg button{border-color:rgba(231,213,168,.24);color:rgba(242,237,227,.7);}
.seg button.on{background:var(--jade);border-color:var(--jade);color:var(--champ);}
.sec--dark .seg button.on{background:var(--brass);border-color:var(--brass);color:var(--jade);}
.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(--jade);transition:.3s;}
.sec--dark .num button{border-color:rgba(231,213,168,.24);color:var(--brass-lt);}
.num button:hover{border-color:var(--brass);}
.num span{font-family:var(--serif);font-size:24px;min-width:32px;text-align:center;color:var(--jade);}
.sec--dark .num span{color:var(--brass-lt);}
.hp{position:absolute;left:-9999px;opacity:0;}
.submit{margin-top:26px;text-align:center;}
.gem-burst{position:fixed;z-index:190;pointer-events:none;}

/* ══════════════════════════════════════════════════════════════
   [10] LỜI CHÚC — có 3 mức riêng tư
   ══════════════════════════════════════════════════════════════ */
.privacy{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.privacy button{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;
  border:1px solid rgba(231,213,168,.22);text-align:left;transition:.3s var(--ease);}
.privacy button.on{border-color:var(--brass);background:rgba(201,169,97,.1);}
.privacy .dot{flex:none;width:14px;height:14px;border-radius:50%;border:1px solid rgba(231,213,168,.5);
  margin-top:4px;position:relative;}
.privacy button.on .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brass);}
.privacy .t{font-size:13.5px;color:var(--champ);}
.privacy .s{font-size:12px;color:rgba(242,237,227,.55);margin-top:1px;line-height:1.55;}
.wlist{margin-top:26px;display:flex;flex-direction:column;gap:13px;}
.w{border-left:1px solid var(--brass);padding:9px 0 9px 15px;animation:wIn .6s var(--ease) both;}
@keyframes wIn{from{opacity:0;transform:translateY(8px);}}
.w-n{font-family:var(--serif);font-size:16px;color:var(--champ);}
.w-n .badge{font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-lt);border:1px solid rgba(231,213,168,.32);padding:2px 7px;margin-left:8px;vertical-align:middle;}
.w-m{margin-top:3px;font-size:13.5px;color:rgba(242,237,227,.68);line-height:1.8;}

/* ══════════════════════════════════════════════════════════════
   [11] BỨC TƯỜNG CHỮ KÝ ⭐
   ══════════════════════════════════════════════════════════════ */
.sign-wall{margin-top:26px;position:relative;aspect-ratio:4/3;background:var(--champ);
  border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;}
.sign-wall canvas{position:absolute;inset:0;width:100%;height:100%;}
.sign-wall .frame{position:absolute;inset:10px;border:1px solid rgba(201,169,97,.28);pointer-events:none;}
.sign-wall .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dp);z-index:2;}
.sign-wall .ttl{position:absolute;left:0;right:0;top:22px;text-align:center;font-family:var(--serif);
  font-size:15px;letter-spacing:.16em;color:var(--jade);z-index:2;}

.pad-wrap{margin-top:20px;}
.pad{position:relative;width:100%;aspect-ratio:5/2;background:#FBF9F4;border:1px solid var(--line-soft);
  touch-action:none;cursor:crosshair;}
.pad canvas{position:absolute;inset:0;width:100%;height:100%;}
.pad .base{position:absolute;left:9%;right:9%;bottom:26%;height:1px;background:var(--line-soft);pointer-events:none;}
.pad .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);opacity:.5;
  pointer-events:none;transition:opacity .3s;}
.pad.drawn .ph{opacity:0;}
.pad-acts{display:flex;gap:9px;margin-top:12px;}
.pad-acts button{flex:1;padding:11px 6px;border:1px solid var(--line-soft);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);transition:.3s;}
.pad-acts button:hover{border-color:var(--brass);color:var(--brass-dp);}
.pad-acts .primary{background:var(--jade);border-color:var(--jade);color:var(--champ);}
.pad-acts .primary:hover{background:var(--jade-3);border-color:var(--jade-3);color:var(--champ);}

/* ══════════════════════════════════════════════════════════════
   [12] THƯ GỬI TƯƠNG LAI ⭐
   ══════════════════════════════════════════════════════════════ */
.future{margin-top:26px;padding:28px 24px;border:1px solid rgba(231,213,168,.24);
  background:linear-gradient(165deg,rgba(201,169,97,.09),rgba(11,38,32,.2));position:relative;overflow:hidden;}
.future::before{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,97,.18),transparent 70%);}
.future-lock{display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
.future-lock svg{width:26px;height:26px;flex:none;stroke:var(--brass-lt);fill:none;stroke-width:1.3;}
.future-lock .t{font-family:var(--serif);font-size:17px;color:var(--champ);}
.future-lock .s{font-size:12px;color:rgba(242,237,227,.6);margin-top:1px;}
.future-cd{margin-top:18px;display:flex;gap:16px;justify-content:center;position:relative;z-index:2;}
.future-cd div{text-align:center;}
.future-cd .n{font-family:var(--serif);font-size:24px;color:var(--brass-lt);font-variant-numeric:tabular-nums;}
.future-cd .l{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,237,227,.5);margin-top:4px;}

/* ══════════════════════════════════════════════════════════════
   [13] ĐỀ XUẤT BÀI HÁT
   ══════════════════════════════════════════════════════════════ */
.song-list{margin-top:20px;display:flex;flex-direction:column;gap:9px;}
.song{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid rgba(231,213,168,.18);
  animation:wIn .55s var(--ease) both;}
.song .no{font-family:var(--serif);font-size:13px;color:var(--brass-lt);opacity:.7;min-width:20px;}
.song .t{font-size:14px;color:var(--champ);}
.song .a{font-size:12px;color:rgba(242,237,227,.5);}
.song .by{margin-left:auto;font-size:11px;color:rgba(242,237,227,.42);white-space:nowrap;}

/* ══════════════════════════════════════════════════════════════
   [14] HỘP MỪNG + CẢM ƠN
   ══════════════════════════════════════════════════════════════ */
.tabs{display:flex;margin-top:24px;gap:8px;}
.tabs button{flex:1;padding:13px 0;border:1px solid var(--line-soft);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);transition:.3s;}
.tabs button.on{background:var(--jade);border-color:var(--jade);color:var(--champ);}
.pane{display:none;text-align:center;padding-top:26px;}
.pane.on{display:block;animation:fin .5s var(--ease);}
@keyframes fin{from{opacity:0;transform:translateY(10px);}}
.qr{width:172px;height:172px;margin:0 auto;padding:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);}
.bank{margin-top:16px;font-family:var(--serif);font-size:19px;color:var(--jade);}
.acct{margin-top:4px;font-size:14.5px;color:var(--ink-soft);letter-spacing:.06em;}
.owner{margin-top:2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dp);}
.copy{margin-top:14px;border:1px solid var(--line-soft);padding:9px 18px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--jade);transition:.3s;}
.copy:hover{border-color:var(--brass);color:var(--brass-dp);}

#thanks{background:radial-gradient(110% 80% at 50% 0%,var(--jade-2) 0%,var(--jade) 52%,#04120E 100%);
  color:var(--champ);text-align:center;padding-bottom:118px;position:relative;overflow:hidden;}
#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(22px,5.8vw,28px);line-height:1.55;color:var(--champ);}
.th-h em{font-style:normal;color:var(--brass-lt);}
.th-sig{margin-top:22px;font-family:var(--serif);font-size:26px;color:var(--brass-lt);letter-spacing:.06em;}
.th-date{margin-top:9px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(242,237,227,.5);}
.acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
.acts button{padding:11px 20px;border:1px solid rgba(231,213,168,.36);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lt);transition:.35s var(--ease);}
.acts button:hover{background:var(--brass-lt);color:var(--jade);border-color:var(--brass-lt);}
.credit{margin-top:44px;font-size:9.5px;letter-spacing:.16em;color:rgba(242,237,227,.26);}

/* ══ 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:var(--jade);border:1px solid var(--line);color:var(--brass-lt);
  box-shadow:0 10px 26px rgba(0,0,0,.35);transition:.35s var(--ease);}
.fab:hover{background:var(--jade-3);transform:translateY(-2px);}
.fab .txt{font-size:12px;}
.gem-ic{width:16px;height:16px;background:var(--brass-lt);
  clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);}
[data-play="1"] .gem-ic{animation:spin 4.5s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,150%);z-index:220;
  background:var(--jade);border:1px solid var(--line);color:var(--champ);padding:14px 26px;font-size:13.5px;
  box-shadow:var(--sh-dp);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(--jade-3),var(--brass));}

@media(min-width:768px){
  .stage{--page:600px;}
  .sec{padding:118px 46px;}
  .duo{grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;}
}

/* WordPress dynamic image bridge; visual values remain canonical. */
body.skin-emerald-vow{--tcdt-emerald-hero-image:var(--tcdt-hero-image);}