:root{
  --bg:#f7fbff; --ink:#3d434b; --soft:#6b737d; --gold:#b9955a; --red:#8c0f12; --line:#d9dde2; --grey:#c9c9c4;
  --serif:"Cormorant Garamond",Georgia,serif; --script:"Great Vibes","Cormorant Garamond",cursive;--amp:"Great Vibes",cursive; --sans:"Be Vietnam Pro",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}

body{background:#eef2f6;color:var(--ink);font:400 15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.script{font-family:var(--script);font-weight:400}

/* ---------- Màn mở đầu ---------- */
.cover{position:fixed;top:0;bottom:0;left:50%;width:min(100%,430px);transform:translateX(-50%);z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1rem;overflow:hidden;transition:opacity .9s,visibility .9s}
.cover.gone{opacity:0;visibility:hidden}
.cover .art{position:absolute;left:0;width:100%;height:auto;pointer-events:none;user-select:none}
.cover .atop{top:0}
.cover .abot{bottom:0;transform:rotate(180deg);opacity:.7}
.cover{container-type:size}
.wi{white-space:pre-line;position:relative;font:400 min(11.5vw,3.6rem)/1.15 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#4a5058}
.cdate{position:relative;margin-top:1.2rem;font:400 min(6.5vw,2rem) var(--serif);color:var(--gold);letter-spacing:.08em}
.cdate span{display:inline-block;padding-bottom:.35rem;border-bottom:1px solid var(--gold);padding-inline:.6rem}
.cnames{position:relative;margin-top:2.2rem;max-width:100%;padding:0 1rem;font:400 min(9.5vw,2.9rem)/1.35 var(--script);color:#1d2127}
.cnames{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.1rem;width:100%}
.cnames span{white-space:nowrap}
.cnames i{font-style:normal;color:var(--gold);margin:0 .35rem}
.cto{position:relative;margin-top:2.4rem;color:var(--soft);font-size:.9rem}
.cto strong{display:block;font:500 1.5rem var(--serif);color:var(--ink);margin-top:.1rem}
.open{position:relative;margin-top:1.8rem;background:none;border:1px solid var(--gold);color:var(--gold);padding:.85em 2.4em;letter-spacing:.25em;text-transform:uppercase;font-size:.75rem;cursor:pointer;transition:.25s}
.open:hover{background:var(--gold);color:#fff}

/* ---------- Thân thiệp: cột hẹp như điện thoại ---------- */
#invite{max-width:430px;margin:0 auto;background:#fff;box-shadow:0 0 40px rgba(30,50,70,.08);overflow:hidden}
.ph{position:relative;background:linear-gradient(135deg,#e6ebef,#d5dce2)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.missing img{display:none}
.ph.missing::after{content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;font:italic 1.1rem var(--serif);color:#8a949e}

.hero{aspect-ratio:3/4.4;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 62%,#fff 99%),linear-gradient(rgba(247,251,255,.85) 0,rgba(247,251,255,.55) 14%,transparent 34%)}
.hero img{position:absolute;inset:0}
.hero .top{text-shadow:0 0 12px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.8);position:absolute;z-index:2;top:1.1rem;left:0;right:0;text-align:center;font-size:2rem;color:#1d2127}
.hero .top i{font-style:normal;color:var(--gold);margin:0 .4rem}
.hero-info{position:absolute;z-index:2;left:0;right:0;bottom:.5rem;text-align:center;padding:0 2rem}
.hi-title{font:500 1.15rem var(--serif);letter-spacing:.12em;text-transform:uppercase}
.hi-box{border-block:1px solid #444;margin:.5rem auto 0;padding:.5rem 0;max-width:320px}
.hi-time{font:600 1rem var(--serif);letter-spacing:.04em}
.hi-date{font:600 1.35rem var(--serif);letter-spacing:.35em}

.quote{padding:1.8rem 1.5rem .5rem;text-align:center;font:italic 400 1.3rem/1.5 var(--script);font-family:var(--script);color:#2a2f36;white-space:pre-line}
.families{display:grid;grid-template-columns:1fr 1fr;gap:1rem;text-align:center;padding:1.2rem 1.2rem 0}
.families h4{font:600 .8rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#000;margin-bottom:.4rem}
.families p{font-size:.78rem;text-transform:uppercase;line-height:2;color:#222}

.pair{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3.2rem 1rem 0;text-align:center;gap:0 .5rem}
.heart{position:absolute;left:50%;top:.7rem;width:48px;margin-left:-24px;color:#555}
.who small{display:block;font-size:.85rem;color:var(--soft)}
.who .script{display:block;font-size:2rem;line-height:1.4;color:#1d2127}
.frame{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--grey);padding:6px;margin-top:.4rem}
.frame .ph{aspect-ratio:3/4}

.announce{padding:1.2rem 0 0;text-align:center}
.rule{display:inline-block;font-size:1.9rem;color:#222;position:relative;padding-top:.5rem}
.rule::before{content:"";position:absolute;top:0;left:50%;width:120px;margin-left:-60px;height:1px;background:#33445a}
.announce>p{font-size:.9rem;margin:.1rem 0 .8rem}
.strip{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:6px;align-items:center}
.strip .ph{aspect-ratio:2/3}
.strip .ph:nth-child(2){aspect-ratio:2/3.1;transform:scale(1.04)}
.strip .ph:not(:nth-child(2)){aspect-ratio:3/4}

.ceremony{padding:2rem 1.2rem 0;text-align:center}
.ceremony h3{font:600 .85rem var(--serif);letter-spacing:.05em;text-transform:uppercase}
.ceremony>p{font-size:.88rem}
.dt{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:.4rem 0 .6rem}
.dt>span{font-size:.95rem}
.dt .mid{border-inline:1px solid #8a8f9a;padding:.1rem 1.6rem;display:grid;line-height:1.25}
.dt small{letter-spacing:.3em;text-transform:uppercase;font-size:.78rem}
.dt b{font:600 2.1rem var(--sans)}
.lunar{font-style:italic;font-size:.78rem;color:#333}
.party{padding:1.8rem 1.8rem 0}
.pbox{border:1px solid #111;border-radius:16px;background:#f3f3f3;padding:1.1rem 1rem;text-align:center}
.pbox h3{font:600 .9rem var(--sans);letter-spacing:.04em;text-transform:uppercase}
.pbox p{font-size:.88rem}
.pbox .pt{font:600 .95rem var(--sans);letter-spacing:.25em;margin:.1rem 0}

.calendar{padding:2rem 1.2rem 0}
.cal-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 .4rem;margin-bottom:.35rem}
.cal-head .script{font-size:2.3rem;color:#7d6455;line-height:1.1}
.cal-head b{font:600 4.2rem/.9 var(--serif);color:#7d6455}
.cal{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #eadfd8}
.cal .h{background:#7d6455;color:#fff;font:600 .68rem var(--sans);text-align:center;padding:.35rem 0}
.cal .d{aspect-ratio:1.1;display:grid;place-items:center;font-size:.82rem;color:#8a6f60;border:1px solid #f0e8e3;position:relative}
.cal .d.sun{font-weight:700}
.cal .d.hit{color:#8c0f12;font-weight:700}
.cal .d.hit svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);color:#b8333a}

.flourish{display:block;width:230px;margin:1.6rem 1rem .2rem auto;color:#555}
.serif-h{font:400 1.7rem var(--serif);letter-spacing:.02em;text-align:center}
.venue{padding:0 1.6rem}
.vcard{margin-top:.8rem;background:#e7e7e7;border-radius:18px;padding:1rem 1rem 1.1rem;text-align:center}
.vcard h4{font:600 .92rem var(--sans);letter-spacing:.03em;text-transform:uppercase}
.vcard>p{font-size:.8rem;margin:.6rem 0 .9rem}
.map{aspect-ratio:4/3;background:#cfd6dc;margin-bottom:.9rem}
.map iframe{width:100%;height:100%;border:0}
.pill{display:inline-block;border:0;border-radius:8px;padding:.6em 1.3em;font:600 .78rem var(--sans);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;text-decoration:none;background:#4b4b4b;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.pill.red{background:var(--red)}
.pill.light-unused{background:rgba(190,190,185,.85);color:#111;font-family:var(--serif);font-size:.95rem;font-weight:600}
.pill.red{font-family:var(--serif);font-size:.95rem}

.album{padding:2rem 1rem 0}
.serif-h.line{display:flex;align-items:center;gap:.8rem;text-align:left;font-size:1.5rem;margin-bottom:.9rem}
.serif-h.line::after{content:"";flex:1;height:1px;background:#777}
.masonry{columns:2;column-gap:6px}
.masonry .ph{margin-bottom:6px;break-inside:avoid;cursor:zoom-in}
.masonry .ph:nth-child(odd){aspect-ratio:3/4.4}
.masonry .ph:nth-child(even){aspect-ratio:3/3.7}
.closing{margin-top:1.4rem;aspect-ratio:3/4.4;display:grid;place-items:end center}
.closing::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.35)}
.closing img{position:absolute;inset:0}
.actions{position:relative;z-index:2;display:grid;gap:.9rem;justify-items:center;padding-bottom:22%}
.foot{padding:.8rem;text-align:center;font:italic 1rem var(--serif);border-top:1px solid #111;background:#fff}

/* Hộp thoại */
.modal{position:fixed;inset:0;z-index:60;background:rgba(20,26,32,.55);display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.sheet{position:relative;background:#fff;border-radius:16px;padding:1.6rem 1.3rem;width:100%;max-width:400px;max-height:92vh;overflow:auto;display:grid;gap:1rem}
.sheet h3{font:500 italic 1.6rem var(--serif);text-align:center}
.sheet label,.sheet legend{font-size:.82rem;color:var(--soft);display:grid;gap:.3rem}
.sheet input:not([type=radio]),.sheet textarea{font:inherit;color:var(--ink);padding:.7rem;border:1px solid #cfd5db;border-radius:8px}
.sheet fieldset{border:0;padding:0;display:grid;gap:.4rem}
.sheet .radio{display:flex;gap:.6rem;align-items:center;color:var(--ink);font-size:.95rem}
.sheet .pill{justify-self:center;padding:.8em 2em}
.x{position:absolute;top:.4rem;right:.8rem;font-size:1.8rem;background:none;border:0;cursor:pointer;color:var(--soft)}
.thanks{text-align:center;color:var(--red)}
.gift{border:1px solid var(--line);border-radius:12px;padding:1rem;text-align:center;margin-bottom:.8rem}
.gift h4{font:500 italic 1.2rem var(--serif)}
.gift .num{font:600 1.4rem var(--serif);letter-spacing:.08em}
.gift .pill{margin-top:.6rem;padding:.5em 1.1em;font-size:.7rem;font-family:var(--sans)}

@keyframes spin{to{transform:rotate(360deg)}}
#lightbox{position:fixed;inset:0;z-index:70;background:rgba(10,16,20,.94);display:grid;place-items:center;padding:1rem}
#lightbox[hidden]{display:none}
#lightbox img{max-height:92vh;object-fit:contain}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- Mọi kích thước màn hình ---------- */
body{background:radial-gradient(1200px 600px at 50% -10%,#f8fbff,#e7edf3)}
@media(min-width:700px){
  #invite{max-width:480px;margin-block:0}
  .cover{width:min(100%,480px)}
  body{font-size:16px}
}
@media(min-width:1100px){
  #invite{max-width:500px;box-shadow:0 20px 70px rgba(30,50,70,.16)}
  .cover{width:500px}
  
}
@media(max-height:640px){
  .cover{padding-block:1rem}
  .cnames{margin-top:1.2rem}.cto{margin-top:1.2rem}.open{margin-top:1rem}.cdate{margin-top:.7rem}
  .wi{font-size:min(9vw,2.6rem)}
}
@media(max-width:340px){.families p{font-size:.7rem}.frame{padding:4px;gap:4px}.pair .who .script{font-size:1.6rem}}
.pill,.open,.music,.x,.masonry .ph{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pill:hover{filter:brightness(1.1)}
.modal{padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}


/* ---------- Biến cột ---------- */
:root{--col:min(100vw,430px);--ease:cubic-bezier(.2,.7,.2,1)}
@media(min-width:700px){:root{--col:480px}}
@media(min-width:1100px){:root{--col:500px}}
#invite{padding-bottom:84px}

/* ---------- Hai cánh mở ra ---------- */
.cover{transform:translateX(-50%)}
.cover.gone{transition:none}
.door{z-index:80;pointer-events:none;transition:transform 1.45s cubic-bezier(.76,0,.2,1),opacity 1.45s cubic-bezier(.5,0,.9,.6)}
.door.l{clip-path:inset(0 50% 0 0)}
.door.r{clip-path:inset(0 0 0 50%)}
.door::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--gold),transparent);left:50%}
.door.l::after{left:calc(50% - 1px)}
.door.l.go{transform:translateX(-150%);opacity:0}
.door.r.go{transform:translateX(50%);opacity:0}

/* ---------- Hiện dần khi cuộn (nhẹ, mượt) ---------- */
.rv{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s cubic-bezier(.25,.6,.3,1) var(--d,0ms),transform .9s cubic-bezier(.25,.6,.3,1) var(--d,0ms);will-change:opacity,transform}
.rv.in{opacity:1;transform:translate3d(0,0,0);will-change:auto}
.pic.rv{transform:translate3d(0,18px,0)}
.pic.rv.in{transform:translate3d(0,0,0)}

/* ---------- Thanh nút nổi ---------- */
#fab{background:rgba(255,255,255,.94);position:fixed;z-index:45;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),var(--col) - 24px);max-width:380px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:6px;border-radius:999px;background:rgba(255,255,255,.82); saturate(1.4);-webkit- saturate(1.4);box-shadow:0 8px 30px rgba(30,50,70,.18),0 0 0 1px rgba(30,50,70,.06);animation:fabIn .8s var(--ease) .9s both}
#fab[hidden]{display:none}
@keyframes fabIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
#fab button{display:grid;justify-items:center;gap:1px;padding:.45rem .2rem;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;font:500 .66rem var(--sans);letter-spacing:.03em;transition:background .25s,color .25s}
#fab button:hover,#fab button:focus-visible{background:rgba(185,149,90,.16);color:#7b5d2c}
#fab button:active{transform:scale(.96)}
#fab svg{width:21px;height:21px}

/* ---------- Nhạc ---------- */
.music{position:fixed;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 68px);right:calc((100% - var(--col))/2 + .8rem);z-index:44;width:42px;height:42px;border-radius:50%;border:1px solid rgba(185,149,90,.6);background:rgba(255,255,255,.85);color:var(--gold);font-size:1.1rem;cursor:pointer}
.music.on{animation:spin 6s linear infinite;background:var(--gold);color:#fff}
.music[hidden]{display:none}

/* ---------- Nút chỉ đường ---------- */
.dirbox{position:relative;margin-top:.2rem;padding:.2rem 0 .3rem}
.dirrow{position:relative;display:flex;align-items:center;justify-content:center;gap:.2rem}
.orn{flex:0 0 auto;width:clamp(44px,17%,78px);height:auto;color:var(--gold);opacity:.95}
.orn.r{transform:scaleX(-1)}
.dir{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;background:linear-gradient(135deg,#e5303a,#c4121b 60%,#a50d15);color:#fff;font:700 .9rem var(--sans);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:.95em 1.5em;border-radius:999px;animation:breath 2.4s ease-in-out infinite;box-shadow:0 6px 18px rgba(215,25,32,.35),0 0 0 2px #fff,0 0 0 3px rgba(185,149,90,.8);white-space:nowrap}
.dir::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.55);border-radius:999px;pointer-events:none}
.dir::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
.dir svg{width:20px;height:20px;flex:0 0 auto}
.dir:hover{filter:brightness(.93)}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
@keyframes breath{0%,100%{transform:scale(1);box-shadow:0 6px 18px rgba(215,25,32,.35),0 0 0 2px #fff,0 0 0 3px rgba(185,149,90,.8)}50%{transform:scale(1.05);box-shadow:0 10px 26px rgba(215,25,32,.45),0 0 0 2px #fff,0 0 0 3px rgba(185,149,90,.8)}}
@media(max-width:360px){.dir{font-size:.8rem;padding:.9em 1.1em}.orn{width:34px}}
.venue{scroll-margin-top:12px}

/* ---------- Album trượt ngang ---------- */
.car{position:relative;margin:0 -1rem}
.track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px calc((100% - 74%)/2);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.track::-webkit-scrollbar{display:none}
.track.grab{cursor:grabbing;scroll-snap-type:none}
.slide{flex:0 0 74%;aspect-ratio:3/4.2;scroll-snap-align:center;border-radius:4px;overflow:hidden;opacity:.55;transform:scale(.93);transition:opacity .6s var(--ease),transform .6s var(--ease);user-select:none}
.slide.on{opacity:1;transform:none;cursor:zoom-in}
.nav{position:absolute;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;border:0;background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.2);font-size:1.5rem;line-height:1;color:var(--ink);cursor:pointer;z-index:2;transition:opacity .25s}
.nav.prev{left:.7rem}.nav.next{right:.7rem}
.nav:disabled{opacity:0;pointer-events:none}
.count{text-align:center;font:500 .8rem var(--sans);letter-spacing:.2em;color:var(--soft);margin-top:.7rem}
.album{padding-bottom:.4rem}
.closing{margin-top:1.4rem}
.actions{padding-bottom:30%}
.sheet.wide{max-width:min(94vw,400px)}
.pill.red{padding:.8em 1.8em}

/* ---------- Lightbox có điều hướng ---------- */
#lightbox .lx{position:absolute;top:1rem;right:1.2rem;font-size:2.4rem;color:#fff;background:none;border:0;cursor:pointer}
#lightbox .ln{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:2rem;cursor:pointer}
#lightbox .lp{left:.8rem}#lightbox .lq{right:.8rem}
#lightbox img{animation:lbIn .4s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ---------- Popup QR ---------- */
.qrs{display:grid;gap:1rem}
.gift{border:1px solid var(--line);border-radius:14px;padding:1rem;text-align:center}
.gift h4{font:500 italic 1.25rem var(--serif);margin-bottom:.6rem}
.qrbox{display:grid;justify-items:center;gap:.5rem;margin-bottom:.6rem}
.qr{width:min(100%,280px);aspect-ratio:auto;background:#fff}
.qr img{display:block;width:100%;height:auto}
.gift p{font-size:.86rem}
.gift .num{font:600 1.3rem var(--serif);letter-spacing:.07em}
.mini{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--gold);background:#fff;color:#7b5d2c;border-radius:999px;padding:.4em 1em;font:500 .72rem var(--sans);text-decoration:none;cursor:pointer;transition:.2s}
.mini:hover{background:var(--gold);color:#fff}
.mini svg{width:14px;height:14px}
.gift>.mini{margin-top:.6rem}
.gift.noqr .save{opacity:.55}
.mini.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(min-width:640px){
  .sheet.wide{max-width:660px}
  .qrs{grid-template-columns:1fr 1fr}   /* cô dâu bên trái, chú rể bên phải */
}
@media(max-width:360px){#fab span{display:none}#fab button{padding:.65rem}}
@media(prefers-reduced-motion:reduce){
  .dir,.dir::after,.music.on,#fab,#invite.reveal,#invite.show .hero img{animation:none!important}
  .rv,.pic img,.slide{transition:none!important}
}

/* ---------- Trái tim thở ---------- */
.heart{color:#555;transform-origin:50% 55%;animation:beat 2.6s ease-in-out infinite;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.12)}36%{transform:scale(1)}54%{transform:scale(1.07)}72%{transform:scale(1)}}
.pair .heart{width:46px;margin-left:-23px;top:.5rem}

/* ---------- Album: lưới nhiều ảnh ---------- */
.alb{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.alb>.ph,.alb .stack>.ph{cursor:zoom-in;overflow:hidden}
.alb>.ph{aspect-ratio:193/281}
.alb>.ph:last-child{grid-column:1/-1;aspect-ratio:16/10}
.alb .stack{display:grid;grid-template-rows:125fr 144fr;gap:5px}
.alb img{transition:transform .9s var(--ease)}
.alb .ph:hover img{transform:scale(1.04)}

.lph{width:min(86vw,420px);aspect-ratio:3/4;display:grid;place-items:center;background:linear-gradient(135deg,#e6ebef,#c9d2d9);color:#6b737d;font:italic 1.4rem var(--serif);border-radius:4px;animation:lbIn .4s var(--ease)}
.lph[hidden],#lightbox img[hidden]{display:none}
#lightbox .lx{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);font-size:2rem;line-height:1;display:grid;place-items:center;top:max(.8rem,env(safe-area-inset-top));right:.8rem}

/* Căn ảnh để không cắt mất mặt */
.frame img{object-position:50% 12%}
.hero img{object-position:50% 20%}
.alb>.ph:last-child img{object-position:50% 64%}

/* ---------- Thanh chuyển thiệp (chỉ để kiểm tra) ---------- */
#switch{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;gap:6px;padding:7px 8px;background:rgba(29,33,39,.92);overflow-x:auto;scrollbar-width:none}
#switch[hidden]{display:none}
#switch button:first-child{margin-left:auto}#switch button:last-child{margin-right:auto}
#switch button{flex:0 0 auto;border:1px solid rgba(255,255,255,.3);background:transparent;color:#e8e8e8;font:500 .78rem var(--sans);padding:.45em 1em;border-radius:999px;cursor:pointer;white-space:nowrap}
#switch button.on{background:var(--gold);border-color:var(--gold);color:#fff}
body.has-sw .cover{padding-top:3.4rem}
body.has-sw .hero .top{top:3.7rem}
.dt small.arr,.dt>span small{display:block;letter-spacing:.08em;text-transform:none;font-size:.72rem;font-style:italic;color:#555}

/* ---------- Chế độ chỉnh ảnh (chỉ có ở bản làm thiệp) ---------- */
#switch .edbtn{margin-left:10px;background:#fff;color:#1d2127;border-color:#fff;font-weight:600}
#switch .edbtn.on{background:#2e9e5b;border-color:#2e9e5b;color:#fff}
#switch:has(.edbtn) button:last-of-type{margin-right:0}
.edmsg{align-self:center;color:#cfe;font:500 .74rem var(--sans);white-space:nowrap;margin-right:auto}
.ed{display:none}
body.editing .ph[data-slot]{outline:2px dashed #2e9e5b;outline-offset:-3px;cursor:default!important}
body.editing .ed{display:flex;position:absolute;top:8px;right:8px;gap:6px;z-index:30}
.ed button{width:34px;height:34px;border-radius:50%;border:0;font:600 1.3rem/1 var(--sans);cursor:pointer;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ed-add{background:#2e9e5b}.ed-x{background:#d71920}
body.editing .ph.empty .ed-x,body.editing .ph.missing .ed-x{display:none}
body.editing .ph.empty .ed,body.editing .ph.missing .ed{inset:0;top:0;right:0;align-items:center;justify-content:center}
body.editing .ph.empty .ed-add,body.editing .ph.missing .ed-add{width:56px;height:56px;font-size:2rem}
body.editing .ph.missing::after{z-index:1}
body.editing .hero .ed{top:60px}
body.editing .hero .top,body.editing .hero-info{pointer-events:none}
#pool{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:12px}
#pool[hidden]{display:none}
.pl{background:#fff;border-radius:14px;width:min(960px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden}
.plh{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid #eee;font:600 .95rem var(--sans)}
.plx{border:0;background:none;font-size:1.6rem;cursor:pointer;line-height:1}
.plg{display:grid;align-content:start;grid-auto-rows:max-content;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;overflow:auto;flex:1}
@media(min-width:700px){.plg{grid-template-columns:repeat(6,1fr)}}
.pi{position:relative;border:3px solid transparent;padding:0;background:#eee;cursor:pointer;border-radius:4px;overflow:hidden;display:block}
.pi img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.pi.cur{border-color:#d4a73a}.pi.sel{border-color:#2e9e5b}
.pi em{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);color:#fff;font:normal .62rem/1.3 var(--sans);padding:3px 4px;text-align:left}
.plf{display:flex;gap:8px;justify-content:flex-end;padding:.7rem 1rem;border-top:1px solid #eee}
.plf button{border:1px solid #ccc;background:#fff;border-radius:999px;padding:.55em 1.5em;font:600 .9rem var(--sans);cursor:pointer}
.plf .pls{background:#2e9e5b;border-color:#2e9e5b;color:#fff}.plf .pls:disabled{opacity:.4;cursor:not-allowed}

body,body *{font-variant-numeric:lining-nums!important;font-feature-settings:"lnum" 1!important}
.ceremony>p:empty,.pbox p:empty{display:none}
.plf2{display:flex;gap:4px;margin:0 auto 0 12px}.plf2 button{border:1px solid #ccc;background:#fff;border-radius:999px;padding:.25em .8em;font:500 .78rem var(--sans);cursor:pointer}.plf2 button.on{background:#1d2127;border-color:#1d2127;color:#fff}.pi[hidden]{display:none}
#switch .edbtn.alt{background:transparent;color:#e8e8e8;border-color:rgba(255,255,255,.4)}

.mapfb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1rem;text-decoration:none;color:#1d2127;background:linear-gradient(#e9eef2,#dfe6ec);background-image:linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);background-size:28px 28px}
.mapfb[hidden]{display:none}
.mapfb svg{width:44px;height:44px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.mapfb b{font:600 .85rem var(--sans)}
.mapfb span{font:500 .75rem var(--sans);color:#fff;background:#1d6fd6;border-radius:999px;padding:.45em 1.1em}
.map{position:relative}
.map iframe[hidden]{display:none}

.ph.zoomable{cursor:zoom-in}
.ph.zoomable.missing{cursor:default}

/* lightbox controls: robust round buttons (iOS Safari), glyphs drawn with CSS so they are always centred */
#lightbox .lx,#lightbox .ln{box-sizing:border-box;-webkit-appearance:none;appearance:none;display:block;position:absolute;flex:none;margin:0;padding:0;min-width:0;width:44px;height:44px;aspect-ratio:1/1;border:0;border-radius:50%;background:rgba(255,255,255,.16);font-size:0;line-height:0;color:transparent;overflow:hidden;-webkit-tap-highlight-color:transparent}
#lightbox .lx{top:max(.8rem,env(safe-area-inset-top));right:.8rem}
#lightbox .ln{top:50%;margin-top:-22px}
#lightbox .lx::before,#lightbox .lx::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;background:#fff;border-radius:1px;transform:rotate(45deg)}
#lightbox .lx::after{transform:rotate(-45deg)}
#lightbox .ln::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:solid #fff;border-width:0 0 2px 2px}
#lightbox .lp::before{transform:translateX(2px) rotate(45deg)}
#lightbox .lq::before{transform:translateX(-2px) rotate(-135deg)}

/* gift button: pinned at 1/3 of the closing photo from the bottom (absolute, so iOS Safari grid quirks can't move it) */
.closing .actions{position:absolute;left:0;right:0;bottom:30%;top:auto;padding:0;z-index:2;display:flex;justify-content:center}

/* popup close button: fixed round box, glyph drawn in CSS (same fix as lightbox) */
.sheet .x{box-sizing:border-box;-webkit-appearance:none;appearance:none;display:block;position:absolute;top:.6rem;right:.6rem;width:40px;height:40px;aspect-ratio:1/1;margin:0;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.06);font-size:0;line-height:0;color:transparent;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet .x::before,.sheet .x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:#6b7580;border-radius:1px;transform:rotate(45deg)}
.sheet .x::after{transform:rotate(-45deg)}

/* very narrow screens (e.g. foldables folded, 280px): nothing may push past the viewport */
.qrs{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.qrs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.gift{min-width:0}
.gift .num{font-size:clamp(.95rem,5.4vw,1.3rem);overflow-wrap:anywhere}
.cal-head b{font-size:clamp(2.8rem,16vw,4.2rem)}
.cal-head .script{font-size:clamp(1.7rem,9vw,2.3rem)}
@media(max-width:320px){.sheet{padding:1.4rem .8rem}.gift{padding:.8rem .6rem}}
.sheet h3{padding:0 2.4rem}

/* short viewports (phones in landscape): shrink the cover so title and button both fit */
@media(max-height:460px){
  .cover{padding:.5rem 1rem}
  .wi{white-space:normal;font-size:min(8.5vh,1.9rem);letter-spacing:.12em}
  .cdate{margin-top:.5rem;font-size:min(6.2vh,1.4rem)}
  .cnames{margin-top:.7rem;font-size:min(9vh,2rem);flex-wrap:nowrap}
  .cto{margin-top:.6rem;font-size:.8rem}.cto strong{font-size:1.1rem}
  .open{margin-top:.8rem;padding:.6em 2em}
}