/* ══════════════════════════════════════════════════════════════
   VILLA TERRACOTTA — BIỆT THỰ ĐẤT NUNG
   Vòm kính, hoa cỏ Địa Trung Hải, ánh nắng chiều muộn.
   2 họ font: EB Garamond + Be Vietnam Pro.
   ══════════════════════════════════════════════════════════════ */
:root{
  --cream:#F7F1E6;        /* kem — nền chính */
  --cream-2:#EFE6D6;      /* kem đậm — nền xen kẽ */
  --sand:#E3D5BF;         /* cát */
  --terra:#B5623C;        /* đất nung — nhấn chính */
  --terra-dp:#8E4527;     /* đất nung đậm */
  --olive:#6E7B54;        /* ô liu — lá */
  --olive-dp:#4C5739;     /* ô liu đậm */
  --teal:#2F5D5B;         /* xanh cổ vịt — nền tối */
  --teal-dp:#1E403F;
  --gold:#C08B4E;         /* vàng cổ */
  --gold-lt:#E4C18C;
  --cocoa:#3A2A22;        /* nâu đậm — chữ chính */
  --cocoa-soft:#7A6558;   /* chữ phụ */
  --line:rgba(58,42,34,.14);
  --line-gold:rgba(192,139,78,.38);

  --sh:0 22px 54px rgba(58,42,34,.16);
  --sh-3d:0 30px 70px rgba(58,42,34,.24);
  --sh-dp:0 34px 90px rgba(0,0,0,.45);

  --serif:'EB Garamond', 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:var(--cream-2);color:var(--cocoa);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.85;
  -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(--cream);position:relative;overflow:hidden;
  box-shadow:0 0 110px rgba(58,42,34,.22);}

/* ══ TIỆN ÍCH ══ */
.sec{padding:100px 30px;position:relative;z-index:2;}
.sec--sm{padding:74px 30px;}
.sec--alt{background:var(--cream-2);}
.sec--dark{background:linear-gradient(180deg,var(--teal) 0%,var(--teal-dp) 100%);color:var(--cream);}
.sec--dark h2,.sec--dark h3{color:var(--cream);}
.sec--dark .eyebrow{color:var(--gold-lt);}
.sec--dark .lead{color:rgba(247,241,230,.72);}
.ctr{text-align:center;}
.eyebrow{font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--terra);font-weight:500;}
.h-sec{font-size:clamp(27px,7.4vw,36px);margin-top:14px;color:var(--cocoa);}
.sec--dark .h-sec{color:var(--cream);}
.h-sec em{font-style:italic;color:var(--terra);}
.sec--dark .h-sec em{color:var(--gold-lt);}
.lead{margin-top:16px;font-size:14.5px;color:var(--cocoa-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;}

.orn{display:flex;align-items:center;gap:13px;margin:24px 0;}
.orn i{flex:1;height:1px;background:var(--line-gold);transform:scaleX(0);transition:transform 1.3s var(--ease);}
.orn i:first-child{transform-origin:right;} .orn i:last-child{transform-origin:left;}
.rv.on .orn i{transform:scaleX(1);}
.orn span{font-family:var(--serif);font-size:19px;color:var(--terra);opacity:0;transition:opacity .7s .5s ease;}
.rv.on .orn span{opacity:1;}

/* ══════════════════════════════════════════════════════════════
   HOA GÓC 3D — xếp lớp có chiều sâu thật
   ══════════════════════════════════════════════════════════════ */
.corner{position:absolute;pointer-events:none;z-index:3;transform-style:preserve-3d;}
.corner svg{display:block;filter:drop-shadow(0 8px 14px rgba(58,42,34,.16));}
.corner.tl{top:-14px;left:-20px;width:150px;}
.corner.br{bottom:-16px;right:-22px;width:170px;transform:rotate(180deg);}
.corner.tr{top:-10px;right:-18px;width:120px;transform:scaleX(-1);}

/* ══════════════════════════════════════════════════════════════
   [0] MÀN MỞ — CỬA VÒM KÍNH MỞ RA
   ══════════════════════════════════════════════════════════════ */
#veil{position:fixed;inset:0;z-index:200;overflow:hidden;
  background:linear-gradient(180deg,#F9F4EA 0%,#EFE2CE 46%,#E0CDB2 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1.2s var(--ease),visibility 1.2s;perspective:1200px;}
#veil.gone{opacity:0;visibility:hidden;pointer-events:none;}
/* nắng chiều xiên */
#veil .sunray{position:absolute;top:-25%;left:-10%;width:70%;height:150%;pointer-events:none;
  background:linear-gradient(102deg,transparent 42%,rgba(255,236,196,.5) 50%,transparent 58%);
  filter:blur(14px);animation:ray 12s ease-in-out infinite alternate;}
@keyframes ray{to{transform:translateX(46%) rotate(3deg);}}
#veil canvas{position:absolute;inset:0;width:100%;height:100%;}

.arch{position:relative;z-index:5;width:min(320px,80vw);cursor:pointer;transform-style:preserve-3d;}
.arch-frame{position:relative;aspect-ratio:3/4.4;border-radius:160px 160px 10px 10px;overflow:hidden;
  background:linear-gradient(175deg,rgba(255,255,255,.42),rgba(227,213,191,.28));
  border:2px solid var(--gold);box-shadow:var(--sh-3d),inset 0 0 40px rgba(255,255,255,.4);
  transform-style:preserve-3d;}
/* nan kính */
.arch-frame::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 49.6%,rgba(192,139,78,.5) 50%,transparent 50.4%),
    linear-gradient(0deg,transparent 32.6%,rgba(192,139,78,.35) 33%,transparent 33.4%),
    linear-gradient(0deg,transparent 65.6%,rgba(192,139,78,.35) 66%,transparent 66.4%);}
/* hai cánh cửa */
.leaf{position:absolute;top:0;bottom:0;width:50%;z-index:4;
  background:linear-gradient(160deg,rgba(247,241,230,.94),rgba(227,213,191,.88));
  transition:transform 1.5s cubic-bezier(.62,0,.2,1);backface-visibility:hidden;}
.leaf::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,transparent 32.6%,rgba(192,139,78,.3) 33%,transparent 33.4%),
             linear-gradient(0deg,transparent 65.6%,rgba(192,139,78,.3) 66%,transparent 66.4%);}
.leaf.l{left:0;transform-origin:left center;border-right:1px solid rgba(192,139,78,.45);
  border-radius:160px 0 0 10px;}
.leaf.r{right:0;transform-origin:right center;border-radius:0 160px 10px 0;}
.arch.open .leaf.l{transform:rotateY(-118deg);}
.arch.open .leaf.r{transform:rotateY(118deg);}
/* nội dung sau cửa */
.arch-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 22px;z-index:2;
  opacity:0;transform:translateZ(-40px) scale(.94);
  transition:opacity 1s .55s ease,transform 1.3s .55s var(--ease);}
.arch.open .arch-in{opacity:1;transform:translateZ(0) scale(1);}
.arch-in .lbl{font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--terra);}
.arch-in .nm{margin:14px 0 6px;font-family:var(--serif);font-size:clamp(27px,7.6vw,34px);
  color:var(--cocoa);line-height:1.2;}
.arch-in .amp{display:block;font-style:italic;font-size:.52em;color:var(--terra);margin:4px 0;}
.arch-in .dt{margin-top:10px;font-size:11.5px;letter-spacing:.2em;color:var(--cocoa-soft);}
.arch-handle{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);
  background:radial-gradient(circle at 34% 30%,#F0DDB8,var(--gold) 70%);
  box-shadow:0 6px 16px rgba(58,42,34,.3);transition:opacity .5s ease,transform .5s ease;}
.arch.open .arch-handle{opacity:0;transform:translate(-50%,-50%) scale(.4);}

.veil-under{position:absolute;left:0;right:0;bottom:8%;z-index:6;text-align:center;padding:0 26px;}
.veil-guest{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--cocoa-soft);}
.veil-hint{margin-top:8px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra);
  animation:breathe 2.8s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.95}}
.veil-btn{margin-top:16px;padding:13px 32px;border:1px solid var(--terra);border-radius:999px;
  color:var(--terra);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  transition:.42s var(--ease);}
.veil-btn:hover{background:var(--terra);color:var(--cream);}

/* ══════════════════════════════════════════════════════════════
   [1] HERO — VƯỜN KÍNH 3D 5 LỚP
   ══════════════════════════════════════════════════════════════ */
#hero{position:relative;min-height:100svh;overflow:hidden;perspective:900px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:70px 26px 96px;}
.scene{position:absolute;inset:-8%;transform-style:preserve-3d;will-change:transform;}
.layer{position:absolute;inset:0;transform-style:preserve-3d;}
.l-sky{background:linear-gradient(180deg,#FBF3E5 0%,#F3E2C8 42%,#E8D0AE 100%);}
.l-photo{background:var(--tcdt-hero-image) center/cover;
  opacity:.42;mix-blend-mode:multiply;filter:sepia(.3) saturate(.85);}
.l-arch{display:flex;align-items:center;justify-content:center;}
.l-arch .glass{width:74%;height:78%;border-radius:50% 50% 8px 8px/38% 38% 8px 8px;
  border:2px solid rgba(192,139,78,.5);
  background:linear-gradient(175deg,rgba(255,255,255,.3),rgba(255,255,255,.05));
  box-shadow:inset 0 0 60px rgba(255,255,255,.45);}
.l-arch .glass::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 49.7%,rgba(192,139,78,.32) 50%,transparent 50.3%),
             linear-gradient(0deg,transparent 39.7%,rgba(192,139,78,.24) 40%,transparent 40.3%),
             linear-gradient(0deg,transparent 69.7%,rgba(192,139,78,.24) 70%,transparent 70.3%);}
.l-far,.l-mid,.l-near{pointer-events:none;}
.l-far svg,.l-mid svg,.l-near svg{position:absolute;}
#hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;}
.hero-in{position:relative;z-index:6;}
.hero-eyebrow{font-size:9.5px;letter-spacing:.44em;text-transform:uppercase;color:var(--terra);}
.hero-names{margin:16px 0 4px;font-size:clamp(38px,10.6vw,52px);line-height:1.1;color:var(--cocoa);}
.hero-names .amp{display:block;font-style:italic;font-size:.5em;color:var(--terra);margin:6px 0 4px;}
.hero-orn{font-family:var(--serif);font-size:20px;color:var(--gold);margin:8px 0;opacity:0;
  animation:fi 1s 1.4s ease forwards;}
@keyframes fi{to{opacity:1;}}
.hero-date{font-family:var(--serif);font-size:16px;color:var(--cocoa-soft);letter-spacing:.06em;}
.hero-venue{margin-top:6px;font-size:12.5px;color:var(--cocoa-soft);opacity:.85;}
.tiltnote{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--cocoa-soft);opacity:.5;}
.cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra);opacity:.6;
  animation:bob 2.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);}}

/* ══════════════════════════════════════════════════════════════
   [2] BÁO TIN — hai bên gia đình, thứ bậc, quê quán
   ══════════════════════════════════════════════════════════════ */
.fam{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;margin-top:34px;align-items:start;}
.fam-col{text-align:center;}
.fam-col .side{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra);}
.fam-col .p{margin-top:10px;font-family:var(--serif);font-size:16px;color:var(--cocoa);line-height:1.65;}
.fam-col .home{margin-top:8px;font-size:12px;color:var(--cocoa-soft);font-style:italic;}
.fam-div{width:1px;background:var(--line);align-self:stretch;}
.announce{margin-top:34px;text-align:center;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cocoa-soft);line-height:2;}
.child{margin-top:26px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center;}
.child .n{font-family:var(--serif);font-size:clamp(20px,5.4vw,25px);color:var(--cocoa);}
.child .rank{margin-top:4px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);}
.child .amp{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold);}

/* ══════════════════════════════════════════════════════════════
   [3] CÔ DÂU & CHÚ RỂ — THẺ LẬT 3D
   ══════════════════════════════════════════════════════════════ */
.duo{margin-top:38px;display:grid;gap:30px;perspective:1100px;}
.flip{position:relative;aspect-ratio:3/4.1;cursor:pointer;transform-style:preserve-3d;
  transition:transform .95s var(--ease);}
.flip.on{transform:rotateY(180deg);}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:120px 120px 10px 10px;overflow:hidden;box-shadow:var(--sh-3d);}
.face.front img{width:100%;height:100%;object-fit:cover;filter:sepia(.16) saturate(.94);}
.face.front::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(58,42,34,.72) 100%);}
.face.front .cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--cream);z-index:2;}
.face.front .role{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-lt);}
.face.front .nm{margin-top:5px;font-family:var(--serif);font-size:24px;}
.face.front .tap{margin-top:6px;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;}
.face.back{transform:rotateY(180deg);background:linear-gradient(170deg,var(--cream),var(--sand));
  border:1px solid var(--line-gold);padding:30px 22px;display:flex;flex-direction:column;justify-content:center;
  text-align:center;}
.face.back .nm{font-family:var(--serif);font-size:22px;color:var(--terra);}
.face.back .desc{margin-top:12px;font-size:13px;color:var(--cocoa-soft);line-height:1.85;}
.face.back .meta{margin-top:16px;font-size:12.5px;color:var(--cocoa);line-height:1.8;}
.face.back .meta span{display:block;font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--terra);margin-bottom:3px;}
.face.back .back-hint{margin-top:16px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cocoa-soft);opacity:.65;}

/* ══════════════════════════════════════════════════════════════
   [4] LỊCH + ĐẾM NGƯỢC
   ══════════════════════════════════════════════════════════════ */
.cal{max-width:330px;margin:30px auto 0;padding:24px 18px;background:rgba(247,241,230,.07);
  border:1px solid rgba(228,193,140,.24);}
.cal-m{font-family:var(--serif);font-size:14px;letter-spacing:.2em;text-align:center;
  color:var(--gold-lt);margin-bottom:14px;}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;}
.cal-g .dow{font-size:9px;color:rgba(247,241,230,.45);padding-bottom:5px;}
.cal-g .d{font-family:var(--serif);font-size:14px;padding:6px 0;color:rgba(247,241,230,.8);
  position:relative;font-variant-numeric:tabular-nums;}
.cal-g .d.hl{color:var(--teal-dp);font-weight:500;}
.cal-g .d.hl svg{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);z-index:-1;}
.cal-g .d.hl svg path{fill:var(--terra);}
.cal-g .d.hl::after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(228,193,140,.55);animation:pulse 2.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.2);opacity:0;}}
.cd{margin-top:30px;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(--gold-lt);padding:17px 0;
  border:1px solid rgba(228,193,140,.28);background:rgba(247,241,230,.05);font-variant-numeric:tabular-nums;}
.cd-n.tick{color:#FFF8E9;border-color:var(--gold);}
.cd-l{margin-top:9px;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(228,193,140,.75);}

/* ══════════════════════════════════════════════════════════════
   [5] HAI TIỆC — tab nhà trai / nhà gái
   ══════════════════════════════════════════════════════════════ */
.vtabs{display:flex;gap:8px;margin-top:28px;}
.vtabs button{flex:1;padding:13px 0;border:1px solid var(--line);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa-soft);transition:.3s;}
.vtabs button.on{background:var(--terra);border-color:var(--terra);color:var(--cream);}
.vpane{display:none;padding-top:26px;}
.vpane.on{display:block;animation:fin .5s var(--ease);}
@keyframes fin{from{opacity:0;transform:translateY(10px);}}
.ev{padding:30px 24px;border:1px solid var(--line-gold);position:relative;text-align:center;
  background:linear-gradient(180deg,rgba(192,139,78,.05),transparent 60%);}
.ev-tag{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra);}
.ev-time{font-family:var(--serif);font-size:38px;color:var(--cocoa);margin-top:12px;font-variant-numeric:tabular-nums;}
.ev-date{margin-top:6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa-soft);}
.ev-lunar{margin-top:3px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--cocoa-soft);}
.ev-venue{margin-top:18px;font-family:var(--serif);font-size:19px;color:var(--terra);}
.ev-addr{margin-top:4px;font-size:13px;color:var(--cocoa-soft);line-height:1.7;}
.btn{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:12px 28px;
  border:1px solid var(--terra);border-radius:999px;color:var(--terra);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;text-decoration:none;transition:.42s var(--ease);}
.btn:hover{background:var(--terra);color:var(--cream);}
.btn--fill{background:var(--terra);color:var(--cream);}
.btn--fill:hover{background:var(--terra-dp);}
.btn--olive{border-color:var(--olive);color:var(--olive-dp);}
.btn--olive:hover{background:var(--olive);color:var(--cream);}
.btn--ghost{border-color:rgba(228,193,140,.4);color:var(--gold-lt);}
.btn--ghost:hover{background:var(--gold-lt);color:var(--teal-dp);}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;}
.map{margin-top:18px;aspect-ratio:16/10;border:1px solid var(--line);overflow:hidden;}
.map iframe{width:100%;height:100%;border:0;filter:sepia(.24) saturate(.82);}

/* ══════════════════════════════════════════════════════════════
   [6] LỊCH TRÌNH CÓ ICON
   ══════════════════════════════════════════════════════════════ */
.sched{margin-top:34px;}
.srow{display:grid;grid-template-columns:44px 62px 1fr;gap:12px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line);}
.srow:first-child{border-top:1px solid var(--line);}
.sicon{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-gold);
  display:flex;align-items:center;justify-content:center;background:rgba(192,139,78,.07);}
.sicon svg{width:20px;height:20px;stroke:var(--terra);fill:none;stroke-width:1.3;stroke-linecap:round;}
.stime{font-family:var(--serif);font-size:17px;color:var(--terra);font-variant-numeric:tabular-nums;}
.stxt{font-size:14px;color:var(--cocoa);}

/* ══════════════════════════════════════════════════════════════
   [7] DRESS CODE
   ══════════════════════════════════════════════════════════════ */
.dress{margin-top:26px;text-align:center;}
.swatches{display:flex;justify-content:center;gap:12px;margin-top:18px;}
.sw{width:46px;height:46px;border-radius:50%;box-shadow:var(--sh);position:relative;
  transition:transform .4s var(--ease);}
.sw:hover{transform:translateY(-4px) scale(1.06);}
.sw::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
.sw-l{margin-top:12px;font-size:11px;color:var(--cocoa-soft);}

/* ══════════════════════════════════════════════════════════════
   [8] ALBUM — COVERFLOW 3D
   ══════════════════════════════════════════════════════════════ */
.flow{margin-top:32px;position:relative;height:390px;perspective:1300px;}
.flow-track{position:absolute;inset:0;transform-style:preserve-3d;}
.fcard{position:absolute;top:50%;left:50%;width:63%;aspect-ratio:3/4;margin:-31.5% 0 0 -31.5%;
  overflow:hidden;box-shadow:var(--sh-3d);cursor:pointer;
  transition:transform .78s var(--ease),opacity .78s ease,filter .78s ease;}
.fcard img{width:100%;height:100%;object-fit:cover;filter:sepia(.14) saturate(.94);}
.fcard::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(247,241,230,.55);}
.flow-nav{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:18px;}
.flow-nav button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  font-size:19px;color:var(--terra);transition:.3s;}
.flow-nav button:hover{border-color:var(--terra);background:var(--terra);color:var(--cream);}
.flow-idx{font-family:var(--serif);font-size:14px;color:var(--cocoa-soft);min-width:52px;text-align:center;
  font-variant-numeric:tabular-nums;}
#lb{position:fixed;inset:0;z-index:180;background:rgba(31,24,20,.96);display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:20px;}
#lb.on{display:flex;}
#lb .big{max-width:100%;max-height:70vh;box-shadow:var(--sh-dp);}
#lb .strip{display:flex;gap:7px;margin-top:16px;overflow-x:auto;max-width:100%;padding:4px;}
#lb .strip img{width:52px;height:64px;object-fit:cover;opacity:.4;cursor:pointer;transition:.3s;flex:none;}
#lb .strip img.on{opacity:1;box-shadow:0 0 0 1px var(--gold-lt);}
#lb button.nav{position:absolute;width:44px;height:44px;color:var(--gold-lt);font-size:26px;}
#lb .x{top:16px;right:18px;} #lb .prev{left:6px;top:46%;} #lb .next{right:6px;top:46%;}

/* ══════════════════════════════════════════════════════════════
   FORM
   ══════════════════════════════════════════════════════════════ */
.card{margin-top:26px;padding:30px 24px;background:var(--cream);border:1px solid var(--line-gold);
  box-shadow:var(--sh);}
.sec--dark .card{background:rgba(247,241,230,.06);border-color:rgba(228,193,140,.24);}
label{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra);margin:20px 0 8px;}
.sec--dark label{color:var(--gold-lt);}
label:first-of-type{margin-top:0;}
label .opt{text-transform:none;letter-spacing:0;color:var(--cocoa-soft);}
.sec--dark label .opt{color:rgba(247,241,230,.5);}
input[type=text],textarea,select{width:100%;border:0;border-bottom:1px solid var(--line);
  background:transparent;padding:10px 2px;font-family:var(--sans);font-size:16px;color:var(--cocoa);
  outline:none;border-radius:0;transition:border-color .35s;}
.sec--dark input,.sec--dark textarea,.sec--dark select{color:var(--cream);border-color:rgba(228,193,140,.26);}
.sec--dark select option{background:var(--teal-dp);color:var(--cream);}
input::placeholder,textarea::placeholder{color:var(--cocoa-soft);opacity:.5;}
.sec--dark input::placeholder,.sec--dark textarea::placeholder{color:rgba(247,241,230,.4);}
input:focus,textarea:focus,select:focus{border-color:var(--gold);}
textarea{resize:vertical;min-height:70px;}
.seg{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;}
.seg button{flex:1;min-width:96px;padding:12px 6px;border:1px solid var(--line);
  font-size:12.5px;color:var(--cocoa-soft);transition:.3s var(--ease);}
.sec--dark .seg button{border-color:rgba(228,193,140,.24);color:rgba(247,241,230,.72);}
.seg button.on{background:var(--terra);border-color:var(--terra);color:var(--cream);}
.sec--dark .seg button.on{background:var(--gold);border-color:var(--gold);color:var(--teal-dp);}
.num{display:flex;align-items:center;gap:18px;margin-top:6px;}
.num button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;font-size:19px;
  color:var(--terra);transition:.3s;}
.sec--dark .num button{border-color:rgba(228,193,140,.24);color:var(--gold-lt);}
.num span{font-family:var(--serif);font-size:24px;min-width:32px;text-align:center;}
.hp{position:absolute;left:-9999px;opacity:0;}
.submit{margin-top:26px;text-align:center;}
.petal-fly{position:fixed;z-index:190;pointer-events:none;}

/* ══════════════════════════════════════════════════════════════
   [11] HỘP QUÀ MỪNG 3D
   ══════════════════════════════════════════════════════════════ */
.giftwrap{margin-top:34px;display:flex;justify-content:center;perspective:1000px;}
.gbox{position:relative;width:190px;height:150px;transform-style:preserve-3d;cursor:pointer;
  transition:transform 1s var(--ease);}
.gbox.open{transform:translateY(-10px) rotateX(-8deg);}
.gbox-body{position:absolute;left:0;right:0;bottom:0;height:104px;transform-style:preserve-3d;}
.gbox-face{position:absolute;inset:0;}
.gf-front{background:linear-gradient(165deg,var(--terra),var(--terra-dp));transform:translateZ(46px);
  box-shadow:inset 0 0 30px rgba(0,0,0,.22);}
.gf-back{background:var(--terra-dp);transform:translateZ(-46px) rotateY(180deg);}
.gf-left{background:var(--terra-dp);width:92px;left:-46px;transform:rotateY(-90deg);}
.gf-right{background:#9C512F;width:92px;left:auto;right:-46px;transform:rotateY(90deg);}
/* ruy băng */
.gbox-body::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:20px;margin-left:-10px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold),var(--gold-lt));transform:translateZ(47px);}
.gbox-lid{position:absolute;left:-8px;right:-8px;top:26px;height:34px;transform-style:preserve-3d;
  transform-origin:left center;transition:transform 1s var(--ease);}
.gbox.open .gbox-lid{transform:rotateY(-108deg) translateX(-6px);}
.gl-top{position:absolute;inset:0;background:linear-gradient(165deg,#C86D45,var(--terra));
  transform:translateZ(52px);box-shadow:0 6px 14px rgba(58,42,34,.3);}
.gl-top::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:22px;margin-left:-11px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold),var(--gold-lt));}
.gbow{position:absolute;left:50%;top:6px;transform:translateX(-50%) translateZ(56px);
  width:52px;height:30px;transition:opacity .5s ease;}
.gbox.open .gbow{opacity:0;}
.gbow svg{width:100%;height:100%;}
.ghint{margin-top:16px;text-align:center;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--terra);animation:breathe 2.6s ease-in-out infinite;}
.gcontent{max-height:0;overflow:hidden;transition:max-height .9s var(--ease),opacity .6s ease;opacity:0;}
.gcontent.on{max-height:900px;opacity:1;}
.tabs{display:flex;gap:8px;margin-top:26px;}
.tabs button{flex:1;padding:12px 0;border:1px solid var(--line);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cocoa-soft);transition:.3s;}
.tabs button.on{background:var(--olive);border-color:var(--olive);color:var(--cream);}
.pane{display:none;text-align:center;padding-top:24px;}
.pane.on{display:block;animation:fin .5s var(--ease);}
.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(--terra);}
.acct{margin-top:4px;font-size:14.5px;color:var(--cocoa);letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.owner{margin-top:2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cocoa-soft);}
.gacts{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.gacts button{border:1px solid var(--line);padding:9px 16px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cocoa);transition:.3s;}
.gacts button:hover{border-color:var(--terra);color:var(--terra);}

/* ══════════════════════════════════════════════════════════════
   [12] LƯU BÚT
   ══════════════════════════════════════════════════════════════ */
.wlist{margin-top:24px;display:flex;flex-direction:column;gap:12px;}
.w{border-left:1px solid var(--gold);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(--cream);}
.w-n .badge{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);
  border:1px solid rgba(228,193,140,.34);padding:2px 7px;margin-left:8px;vertical-align:middle;}
.w-m{margin-top:2px;font-size:13.5px;color:rgba(247,241,230,.7);line-height:1.8;}

/* ══════════════════════════════════════════════════════════════
   [13] CẢM ƠN
   ══════════════════════════════════════════════════════════════ */
#thanks{text-align:center;padding-bottom:120px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--sand) 62%,#D8C4A6 100%);}
#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,29px);line-height:1.5;color:var(--cocoa);}
.th-h em{font-style:italic;color:var(--terra);}
.th-sig{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:28px;color:var(--terra);}
.th-date{margin-top:9px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cocoa-soft);}
.acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
.acts button{padding:11px 20px;border:1px solid var(--line-gold);border-radius:999px;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--terra);transition:.35s var(--ease);}
.acts button:hover{background:var(--terra);color:var(--cream);border-color:var(--terra);}
.credit{margin-top:44px;font-size:9.5px;letter-spacing:.16em;color:var(--cocoa-soft);opacity:.55;}

/* ══ 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(--cream);border:1px solid var(--line-gold);color:var(--terra);
  box-shadow:0 10px 24px rgba(58,42,34,.2);transition:.35s var(--ease);font-size:12px;}
.fab:hover{background:var(--terra);color:var(--cream);transform:translateY(-2px);}
.leaf-ic{width:17px;height:17px;background:currentColor;border-radius:50% 0 50% 0;}
[data-play="1"] .leaf-ic{animation:spin 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(--cocoa);color:var(--cream);padding:14px 26px;border-radius:999px;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(--olive),var(--terra),var(--gold));}

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