/* ============================================================================
   THIỆP ONLINE — giao diện thiệp (dùng chung cho trang khách xem + xem trước)
   Phần chung ở trên, mỗi mẫu một khối `.tpl-<id>` ở dưới.
   Mọi màu lấy từ biến --p --bg --a --ink để đổi tông là đổi cả thiệp.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.guest{background:color-mix(in srgb,var(--page,#ddd) 100%,transparent);min-height:100vh}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

.inv{
  --soft:color-mix(in srgb,var(--p) 9%,var(--bg));
  --line:color-mix(in srgb,var(--p) 28%,transparent);
  --muted:color-mix(in srgb,var(--ink) 68%,var(--bg));
  max-width:480px;margin:0 auto;min-height:100vh;
  background:var(--bg);color:var(--ink);font-family:var(--fb);
  font-size:15px;line-height:1.65;overflow:hidden;position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.12);
}
.inv section{position:relative;padding:60px 28px;text-align:center}
.sec-title{font-family:var(--fd);color:var(--p);font-weight:400;
  font-size:calc(40px * var(--ds,1));line-height:1.15;margin-bottom:22px}
.band{background:var(--p);color:var(--bg)}
.band .sec-title{color:var(--bg)}

/* ---- nút ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;
  text-decoration:none;cursor:pointer;border:1.5px solid var(--p);transition:transform .15s,opacity .15s}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--p);color:var(--bg);width:100%}
.btn.ghost{background:transparent;color:var(--p);margin-top:22px}
.btn.solid-inv{background:var(--bg);color:var(--p);border-color:var(--bg);margin-top:20px}

/* ---- bìa ---- */
.cover{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:48px!important}
.cd{position:absolute;pointer-events:none}
.eyebrow{font-family:var(--fh);letter-spacing:.28em;text-transform:uppercase;font-size:13px;color:var(--p);margin-bottom:24px;font-weight:600}
.cover-photo{width:230px;aspect-ratio:4/5;position:relative;z-index:1}
.cover-photo img,.ph-empty{width:100%;height:100%;object-fit:cover}
.ph-empty{display:grid;place-items:center;background:var(--soft);
  background-image:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--a) 45%,transparent),transparent 55%),
                   radial-gradient(circle at 75% 80%,color-mix(in srgb,var(--p) 22%,transparent),transparent 50%)}
.ph-empty span{font-family:var(--fd);font-size:110px;color:var(--p);line-height:1}
.baby{font-family:var(--fd);font-weight:400;color:var(--p);font-size:calc(66px * var(--ds,1));line-height:1.05;margin-top:26px}
.fullname{font-family:var(--fh);font-size:17px;letter-spacing:.06em;margin-top:6px}
.sub{font-size:14px;color:var(--muted);margin-top:8px}
.date-big{font-family:var(--fh);font-size:24px;letter-spacing:.14em;margin-top:18px;color:var(--ink);font-weight:600}
.date-big i{font-style:normal;color:var(--a);margin:0 .35em}
.scroll-hint{margin-top:34px;width:22px;height:34px;border:1.5px solid var(--line);border-radius:12px;position:relative}
.scroll-hint span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--p);animation:hint 1.8s infinite}
@keyframes hint{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---- lời mời ---- */
.divider{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--p);margin-bottom:26px}
.host-label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.host{font-family:var(--fh);font-size:22px;color:var(--p);margin:4px 0 18px;font-weight:600}
.msg{max-width:340px;margin:0 auto;color:var(--ink)}

/* ---- thời gian ---- */
.date-row{display:flex;align-items:center;justify-content:center;gap:14px}
.dr-side{flex:1;font-family:var(--fh);font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dr-mid b{display:block;font-family:var(--fh);font-size:58px;line-height:1;color:var(--p)}
.dr-mid span{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.lunar{font-style:italic;color:var(--muted);font-size:13.5px;margin-top:12px}
.times{display:flex;justify-content:center;gap:12px;margin:24px 0}
.times div{flex:1;max-width:150px;padding:12px 8px;border-radius:14px;background:var(--soft)}
.times span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.times b{font-family:var(--fh);font-size:24px;color:var(--p)}
.cal{max-width:320px;margin:8px auto 0;padding:18px 14px;border-radius:18px;border:1px solid var(--line)}
.cal-h{font-family:var(--fh);font-weight:600;font-size:17px;color:var(--p);margin-bottom:10px}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:13px}
.cal-w{color:var(--muted);font-size:11px;font-weight:600;margin-bottom:4px}
.cal-g span{aspect-ratio:1;display:grid;place-items:center;position:relative}
.cal-g .on svg{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);color:var(--a);animation:beat 1.4s infinite}
.cal-g .on b{position:relative;color:var(--bg);font-weight:700}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.countdown{display:flex;justify-content:center;gap:10px;margin-top:26px}
.countdown div{width:66px;padding:10px 0;border-radius:14px;background:var(--p);color:var(--bg)}
.countdown b{display:block;font-family:var(--fh);font-size:26px;line-height:1.1}
.countdown span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.cd-done{font-family:var(--fh);font-size:20px;color:var(--p)}

/* ---- địa điểm ---- */
.venue{font-family:var(--fh);font-size:22px;font-weight:600}
.addr{opacity:.9;margin-top:4px;max-width:320px;margin-inline:auto}
.map{margin-top:22px;border-radius:16px;overflow:hidden;border:3px solid color-mix(in srgb,var(--bg) 85%,transparent);aspect-ratio:4/3;background:var(--soft)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ---- chương trình ---- */
.tl{list-style:none;max-width:340px;margin:0 auto;text-align:left;position:relative}
.tl::before{content:"";position:absolute;left:74px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.tl li{display:grid;grid-template-columns:56px 36px 1fr;align-items:start;padding:10px 0}
.tl time{font-family:var(--fh);font-weight:600;color:var(--p);font-size:17px;text-align:right;padding-top:1px}
.tl .dot{display:grid;place-items:center;padding-top:4px;position:relative}
.tl .dot svg{width:18px;height:17px;color:var(--p);background:var(--bg);padding:1px}
.tl b{font-weight:600;font-size:15.5px}
.tl p{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---- album ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.grid .ph{border:0;padding:0;cursor:zoom-in;overflow:hidden;border-radius:12px;aspect-ratio:3/4;background:var(--soft)}
.grid .ph:nth-child(3n+1){grid-column:span 2;aspect-ratio:4/3}
.grid.n1 .ph{grid-column:span 2}
.grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.grid .ph:hover img{transform:scale(1.04)}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:94vw;max-height:84vh;border-radius:6px}
.lightbox button{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;width:44px;height:44px;border-radius:50%;font-size:22px;cursor:pointer}
.lightbox .x{top:16px;right:16px}.lightbox .pv{left:12px}.lightbox .nx{right:12px}
.lightbox .count{position:absolute;bottom:18px;color:#fff;font-size:13px;opacity:.8}

/* ---- RSVP ---- */
.rsvp{background:var(--soft)}
.rsvp-note{max-width:330px;margin:-6px auto 22px;font-size:14px}
.rsvp-form{max-width:360px;margin:0 auto;text-align:left;display:grid;gap:14px;padding:22px;border-radius:20px;background:var(--bg);box-shadow:0 8px 30px color-mix(in srgb,var(--p) 12%,transparent)}
.rsvp-form label{display:block;font-size:13.5px;font-weight:600}
.rsvp-form label > input,.rsvp-form label > select,.rsvp-form label > textarea{display:block;margin-top:6px}
.rsvp-form small{font-weight:400;color:var(--muted)}
.rsvp-form input:not([type=radio]),.rsvp-form select,.rsvp-form textarea{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-weight:400;font-size:15px;outline:none}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 15%,transparent)}
.rsvp-form fieldset{border:0;display:grid;gap:8px}
.rsvp-form legend{font-size:13.5px;font-weight:600;margin-bottom:6px}
.rsvp-form .radio{display:flex;align-items:center;gap:10px;font-weight:400;padding:10px 12px;border-radius:12px;border:1px solid var(--line);cursor:pointer}
.rsvp-form .radio:has(input:checked){border-color:var(--p);background:var(--soft)}
.rsvp-form .radio input{accent-color:var(--p);width:17px;height:17px}
.rsvp-form .guests[hidden]{display:none}
.form-msg{font-size:13.5px;text-align:center;min-height:1em}
.form-msg.err{color:#b91c1c}
.rsvp-done{max-width:360px;margin:0 auto;padding:28px 22px;border-radius:20px;background:var(--bg)}
.rsvp-done .big{font-family:var(--fd);font-size:calc(34px * var(--ds,1));color:var(--p)}
.wish-list{display:grid;gap:12px;max-width:380px;margin:0 auto;text-align:left}
.wish{padding:14px 16px;border-radius:16px;background:var(--soft);border-left:3px solid var(--a)}
.wish b{display:block;font-size:14px;color:var(--p)}
.wish p{font-size:14px}

/* ---- kết ---- */
.thanks-big{font-family:var(--fd);font-size:calc(60px * var(--ds,1));color:var(--p);line-height:1.1}
.thanks-sub{color:var(--muted)}
.studio{text-align:center;padding:34px 24px 40px;background:color-mix(in srgb,var(--ink) 92%,var(--p));color:color-mix(in srgb,var(--bg) 82%,transparent);font-size:12.5px}
.studio-name{display:block;color:var(--bg);font-family:'Be Vietnam Pro',var(--fb);letter-spacing:.3em;font-weight:600;font-size:15px;margin:6px 0 2px;text-decoration:none}
.studio-tag{opacity:.75}
.studio-cta{display:inline-block;margin-top:14px;padding:9px 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--bg) 40%,transparent);color:var(--bg);text-decoration:none;font-weight:500}

/* ============================================================================
   HIỆU ỨNG (chỉ khi có lớp .anim — trang khách & nút "Xem hiệu ứng")
   Dùng translate/scale/rotate RIÊNG chứ không dùng transform, để không đè lên
   các góc xoay sẵn của mẫu (ảnh polaroid nghiêng, nhãn dán nghiêng…).
   ========================================================================== */
.anim{--ease:cubic-bezier(.16,.84,.24,1)}
/* chung: nhoè → rõ, trồi nhẹ lên */
.anim .fx{opacity:0;filter:blur(14px);translate:0 18px;scale:.97;
  transition:opacity 1.1s var(--ease),filter 1.3s var(--ease),translate 1.3s var(--ease),scale 1.3s var(--ease);
  transition-delay:var(--d,0s)}
.anim .in .fx,.anim .in.fx{opacity:1;filter:blur(0);translate:0 0;scale:1}
/* chữ giãn rồi khép lại */
.anim .fx-track{transition-property:opacity,filter,translate,scale,letter-spacing;transition-duration:1.1s,1.3s,1.3s,1.3s,1.8s}
/* chỉ giãn chữ khi phần chứa nó CHƯA hiện; hiện rồi thì về đúng khoảng cách riêng của mẫu */
@media (prefers-reduced-motion:no-preference){.anim :not(.in) > .fx-track{letter-spacing:.7em}}
/* ảnh bìa: nhoè + phóng, ảnh bên trong từ từ "đứng lại" */
.anim .fx-photo{opacity:0;filter:blur(22px) saturate(.6);scale:1.06;
  transition:opacity 1.4s var(--ease) var(--d),filter 2s var(--ease) var(--d),scale 2.2s var(--ease) var(--d)}
.anim .fx-photo img,.anim .fx-photo .ph-empty{scale:1.25;transition:scale 3.2s var(--ease) var(--d)}
.anim .in .fx-photo{opacity:1;filter:none;scale:1}
.anim .in .fx-photo img,.anim .in .fx-photo .ph-empty{scale:1}
/* chữ viết tay: quét từ trái sang như đang viết */
.anim .fx-wipe{display:inline-block;clip-path:inset(-40% 100% -40% -12%);filter:blur(5px);opacity:.3;
  transition:clip-path 2s cubic-bezier(.55,.1,.25,1) var(--d,0s),filter 1.6s var(--ease) var(--d,0s),opacity .8s ease var(--d,0s)}
.anim .in .fx-wipe,.anim .in.fx-wipe{clip-path:inset(-40% -12% -40% -12%);filter:none;opacity:1}
/* chữ in: từng chữ cái rơi xuống */
.fx-letters .ch{display:inline-block}
.anim .fx-letters .ch{opacity:0;filter:blur(10px);translate:0 -.45em;rotate:-12deg;
  transition:opacity .8s var(--ease),filter 1s var(--ease),translate 1.1s cubic-bezier(.3,1.5,.5,1),rotate 1.1s var(--ease);
  transition-delay:calc(var(--d,0s) + var(--i) * .075s)}
.anim .in .fx-letters .ch{opacity:1;filter:none;translate:0 0;rotate:0deg}
/* ô lịch gợn sóng lần lượt */
.anim .fx-cell{opacity:0;scale:.4;transition:opacity .5s ease var(--d),scale .6s cubic-bezier(.3,1.6,.5,1) var(--d)}
.anim .in .fx-cell{opacity:1;scale:1}
/* cành lá mọc ra */
.anim .d-branch{clip-path:inset(0 100% 0 0);transition:clip-path 2.4s var(--ease) var(--d,.4s)}
.anim .in .d-branch{clip-path:inset(0 0 0 0)}
.anim.tpl-kem-nau .frame{opacity:0;scale:1.05;transition:opacity 1.8s ease .2s,scale 2.4s var(--ease) .2s}
.anim.tpl-kem-nau .in .frame{opacity:1;scale:1}

/* hạt bay trên bìa */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particles i{position:absolute;display:block}
.particles b{display:block;width:100%;height:100%}
.particles svg{width:100%;height:100%;display:block}
.p-fall i{top:-6%;animation:p-fall var(--dur) linear var(--delay) infinite}
.p-fall b{animation:p-sway calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate}
.p-rise i{bottom:-6%;animation:p-rise var(--dur) linear var(--delay) infinite}
.p-rise b{animation:p-sway calc(var(--dur) / 4) ease-in-out var(--delay) infinite alternate}
.p-glow i{animation:p-glow var(--dur) ease-in-out var(--delay) infinite;filter:blur(1.5px)}
@keyframes p-fall{0%{translate:0 0;opacity:0}8%{opacity:1}92%{opacity:1}100%{translate:0 105vh;opacity:0}}
@keyframes p-rise{0%{translate:0 0;opacity:0}10%{opacity:1}85%{opacity:1}100%{translate:0 -100vh;opacity:0}}
@keyframes p-sway{from{translate:calc(var(--sway) * -1) 0;rotate:0deg}to{translate:var(--sway) 0;rotate:var(--rot)}}
@keyframes p-glow{0%,100%{opacity:0;scale:.6}50%{opacity:1;scale:1.15;translate:0 -14px}}
.cover > :not(.particles):not(.cd){position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .anim .fx,.anim .fx-photo,.anim .fx-photo img,.anim .fx-wipe,.anim .fx-letters .ch,.anim .fx-cell,.anim .d-branch,.anim.tpl-kem-nau .frame{
    opacity:1!important;filter:none!important;clip-path:none!important;translate:none!important;scale:none!important;rotate:none!important;transition:none!important}
  .particles{display:none}
  *{animation:none!important}
}

/* ---- màn mở thiệp ---- */
.opener{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:var(--p);color:var(--bg);text-align:center;padding:24px;transition:opacity .8s,visibility .8s}
.opener.gone{opacity:0;visibility:hidden}
.opener .env{width:min(300px,80vw);aspect-ratio:1.45;position:relative;margin:0 auto 28px;
  background:color-mix(in srgb,var(--bg) 92%,var(--p));border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.opener .env::before{content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(to bottom right,transparent 49.5%,color-mix(in srgb,var(--p) 12%,var(--bg)) 50%) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent 49.5%,color-mix(in srgb,var(--p) 12%,var(--bg)) 50%) right/50% 100% no-repeat}
.opener .flap{position:absolute;left:0;right:0;top:0;height:58%;background:color-mix(in srgb,var(--bg) 82%,var(--p));
  clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s}
.opener.open .flap{transform:rotateX(180deg)}
.opener .seal{position:absolute;left:50%;top:58%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:var(--a);color:var(--p);display:grid;place-items:center;font-family:var(--fd);font-size:28px;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.opener h2{font-family:var(--fd);font-weight:400;font-size:calc(46px * var(--ds,1));line-height:1.1}
.opener p{opacity:.85;margin:6px 0 22px;font-size:14px}
.opener button{padding:13px 30px;border-radius:999px;border:0;background:var(--bg);color:var(--p);font-weight:700;cursor:pointer;font-size:15px}

/* ============================================================================
   MẪU 1 — RỪNG XANH (giống clip mẫu: xanh rêu + kem, chữ viết tay, polaroid)
   ========================================================================== */
.tpl-rung-xanh .cover{background:radial-gradient(ellipse at top,var(--soft),var(--bg) 65%)}
.tpl-rung-xanh .cd-tl{top:18px;left:-34px;width:220px;color:var(--p);opacity:.55;transform:rotate(-18deg)}
.tpl-rung-xanh .cd-br{bottom:30px;right:-34px;width:220px;color:var(--p);opacity:.55;transform:rotate(162deg)}
.tpl-rung-xanh .cover-photo{background:#fff;padding:10px 10px 38px;transform:rotate(-3.5deg);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.tpl-rung-xanh .cover-photo::after{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:color-mix(in srgb,var(--a) 55%,transparent);transform:rotate(3deg)}
.tpl-rung-xanh .eyebrow{font-family:var(--fh);font-style:italic;letter-spacing:.18em}
.tpl-rung-xanh .divider svg{width:170px}
.tpl-rung-xanh .when{background:var(--p);color:var(--bg)}
.tpl-rung-xanh .when .sec-title,.tpl-rung-xanh .when .dr-mid b,.tpl-rung-xanh .when .times b,.tpl-rung-xanh .when .cal-h{color:var(--bg)}
.tpl-rung-xanh .when .dr-side{border-color:color-mix(in srgb,var(--bg) 30%,transparent)}
.tpl-rung-xanh .when .times div{background:color-mix(in srgb,var(--bg) 10%,transparent)}
.tpl-rung-xanh .when .times span,.tpl-rung-xanh .when .cal-w,.tpl-rung-xanh .when .lunar{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.tpl-rung-xanh .when .cal{border-color:color-mix(in srgb,var(--bg) 25%,transparent)}
.tpl-rung-xanh .when .cal-g .on b{color:var(--p)}
.tpl-rung-xanh .when .countdown div{background:var(--bg);color:var(--p)}
.tpl-rung-xanh .when .btn.ghost{color:var(--bg);border-color:var(--bg)}
.tpl-rung-xanh .where{background:var(--bg);color:var(--ink)}
.tpl-rung-xanh .where .sec-title{color:var(--p)}
.tpl-rung-xanh .where .btn.solid-inv{background:var(--p);color:var(--bg);border-color:var(--p)}
.tpl-rung-xanh .where .map{border-color:var(--soft)}

/* ============================================================================
   MẪU 2 — MÂY HỒNG (pastel, ảnh khung vòm, mây trôi)
   ========================================================================== */
.tpl-may-hong{background:linear-gradient(180deg,var(--soft),var(--bg) 40%)}
.tpl-may-hong .cd{color:color-mix(in srgb,var(--a) 70%,#fff)}
.tpl-may-hong .c1{width:120px;top:40px;left:-20px;animation:drift 14s ease-in-out infinite}
.tpl-may-hong .c2{width:90px;top:120px;right:-10px;animation:drift 18s ease-in-out infinite reverse}
.tpl-may-hong .c3{width:140px;bottom:60px;left:30%;opacity:.7;animation:drift 22s ease-in-out infinite}
.tpl-may-hong .st1,.tpl-may-hong .st2,.tpl-may-hong .st3{color:var(--a);animation:twinkle 2.6s infinite}
.tpl-may-hong .st1{width:16px;top:90px;left:22%}.tpl-may-hong .st2{width:12px;top:200px;right:18%;animation-delay:.8s}.tpl-may-hong .st3{width:14px;bottom:150px;right:12%;animation-delay:1.6s}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.tpl-may-hong .cover-photo{border-radius:999px 999px 26px 26px;overflow:hidden;border:6px solid #fff;box-shadow:0 12px 34px color-mix(in srgb,var(--p) 25%,transparent)}
.tpl-may-hong .eyebrow{letter-spacing:.2em}
.tpl-may-hong .divider{color:var(--a)}
.tpl-may-hong .divider svg{width:14px}.tpl-may-hong .divider .s2{width:20px;color:var(--p)}
.tpl-may-hong .when,.tpl-may-hong .timeline{margin:0 16px;border-radius:30px;background:#fff;box-shadow:0 8px 30px color-mix(in srgb,var(--p) 10%,transparent)}
.tpl-may-hong .timeline{margin-top:20px}
.tpl-may-hong .band{margin:20px 16px;border-radius:30px}
.tpl-may-hong .countdown div{border-radius:50%;width:64px;height:64px;padding:0;display:flex;flex-direction:column;justify-content:center;background:var(--a);color:var(--ink)}
.tpl-may-hong .rsvp{background:transparent}

/* ============================================================================
   MẪU 3 — BIỂN XANH (thuỷ thủ, sóng, ảnh tròn viền dây thừng)
   ========================================================================== */
.tpl-bien-xanh .cover{background:linear-gradient(180deg,var(--soft) 0%,var(--bg) 70%)}
.tpl-bien-xanh .boat{width:64px;top:56px;right:34px;color:var(--p);animation:bob 3.4s ease-in-out infinite}
.tpl-bien-xanh .wv{left:0;right:0;bottom:0;height:46px;color:var(--p);opacity:.12}
.tpl-bien-xanh .wv svg{width:100%;height:100%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.tpl-bien-xanh .cover-photo{width:240px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:6px solid var(--bg);outline:3px dashed var(--p);outline-offset:4px;box-shadow:0 0 0 12px var(--soft)}
.tpl-bien-xanh .eyebrow{background:var(--p);color:var(--bg);padding:6px 16px;border-radius:999px;letter-spacing:.16em;font-size:12px}
.tpl-bien-xanh .baby{text-shadow:3px 3px 0 color-mix(in srgb,var(--a) 45%,transparent)}
.tpl-bien-xanh .divider svg{width:38px;color:var(--p)}
.tpl-bien-xanh .band{padding-top:80px;padding-bottom:80px}
.tpl-bien-xanh .band::before,.tpl-bien-xanh .band::after{content:"";position:absolute;left:0;right:0;height:26px;
  background:radial-gradient(circle at 15px -6px,transparent 18px,var(--p) 19px) repeat-x;background-size:30px 26px}
.tpl-bien-xanh .band::before{top:-1px;transform:scaleY(-1);background:radial-gradient(circle at 15px -6px,transparent 18px,var(--bg) 19px) repeat-x;background-size:30px 26px}
.tpl-bien-xanh .band::after{bottom:-1px;background:radial-gradient(circle at 15px -6px,transparent 18px,var(--bg) 19px) repeat-x;background-size:30px 26px;transform:scaleY(-1) rotate(180deg)}
.tpl-bien-xanh .countdown div{background:var(--bg);color:var(--p);border:2px solid var(--p);box-shadow:3px 3px 0 var(--a)}
.tpl-bien-xanh .times div{border:2px dashed var(--line);background:transparent}
.tpl-bien-xanh .cal-g .on svg{color:var(--a)}
.tpl-bien-xanh .sec-title{letter-spacing:.01em}

/* ============================================================================
   MẪU 4 — KEM NÂU (tối giản kiểu tạp chí, khung mảnh, chữ in hoa giãn)
   ========================================================================== */
.tpl-kem-nau .frame{inset:16px;border:1px solid var(--line)}
.tpl-kem-nau .frame::after{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--p) 14%,transparent)}
.tpl-kem-nau .eyebrow{font-family:'Be Vietnam Pro',sans-serif;font-weight:500;font-size:11px;letter-spacing:.42em}
.tpl-kem-nau .cover-photo{width:260px;aspect-ratio:3/4}
.tpl-kem-nau .baby{font-style:italic;font-weight:500;font-size:68px;letter-spacing:.01em}
.tpl-kem-nau .fullname{font-family:'Be Vietnam Pro',sans-serif;font-size:11px;letter-spacing:.38em;text-transform:uppercase}
.tpl-kem-nau .date-big{font-weight:500;letter-spacing:.3em;font-size:20px}
.tpl-kem-nau .sec-title{font-family:'Be Vietnam Pro',sans-serif;font-size:13px;letter-spacing:.42em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.tpl-kem-nau .sec-title::after{content:"";display:block;width:34px;height:1px;background:var(--p);margin:14px auto 0}
.tpl-kem-nau .band .sec-title{color:var(--bg)}.tpl-kem-nau .band .sec-title::after{background:var(--bg)}
.tpl-kem-nau .divider span{width:70px;height:1px;background:var(--p)}
.tpl-kem-nau .divider i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--p)}
.tpl-kem-nau .host{font-style:italic;font-weight:500;font-size:24px}
.tpl-kem-nau .msg{font-family:var(--fh);font-size:18px;font-style:italic;line-height:1.6}
.tpl-kem-nau .times div,.tpl-kem-nau .countdown div{border-radius:0}
.tpl-kem-nau .times div{background:transparent;border:1px solid var(--line)}
.tpl-kem-nau .cal{border-radius:0}
.tpl-kem-nau .cal-g .on svg{display:none}
.tpl-kem-nau .cal-g .on::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--p)}
.tpl-kem-nau .cal-g .on b{color:var(--bg)}
.tpl-kem-nau .btn{border-radius:0;letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:500}
.tpl-kem-nau .map{border-radius:0}
.tpl-kem-nau .grid{gap:4px}.tpl-kem-nau .grid .ph{border-radius:0}
.tpl-kem-nau .rsvp-form,.tpl-kem-nau .rsvp-form input:not([type=radio]),.tpl-kem-nau .rsvp-form select,.tpl-kem-nau .rsvp-form textarea,.tpl-kem-nau .rsvp-form .radio{border-radius:0}
.tpl-kem-nau .thanks-big{font-style:italic}

/* ============================================================================
   MẪU 5 — GẤU BÔNG (vui nhộn, bóng bay, viền dày đổ bóng lệch)
   ========================================================================== */
.tpl-gau-bong .cover{background:var(--bg)}
.tpl-gau-bong .bl1{width:110px;top:26px;left:4px;color:var(--ink);animation:float 5s ease-in-out infinite}
.tpl-gau-bong .bl2{width:90px;top:70px;right:6px;color:var(--ink);animation:float 6s ease-in-out infinite .8s;transform:scaleX(-1)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.tpl-gau-bong .conf{inset:0}
.tpl-gau-bong .conf i{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--a);opacity:.55}
.tpl-gau-bong .conf i:nth-child(3n){background:var(--p);border-radius:50%}
.tpl-gau-bong .cover-photo{border-radius:44% 56% 52% 48% / 52% 44% 56% 48%;overflow:hidden;
  border:5px solid var(--ink);box-shadow:8px 8px 0 var(--a)}
.tpl-gau-bong .eyebrow{font-family:var(--fd);font-size:17px;letter-spacing:.06em;background:var(--a);color:var(--ink);padding:4px 16px;border-radius:12px;transform:rotate(-2deg);text-transform:none;font-weight:700}
.tpl-gau-bong .baby{font-weight:800;font-size:72px;letter-spacing:-.01em;-webkit-text-stroke:0;text-shadow:4px 4px 0 var(--a)}
.tpl-gau-bong .sec-title{font-weight:800}
.tpl-gau-bong .divider{color:var(--p)}.tpl-gau-bong .divider svg{width:18px}
.tpl-gau-bong .divider .d-bear{width:64px}
.tpl-gau-bong .times div,.tpl-gau-bong .cal,.tpl-gau-bong .rsvp-form,.tpl-gau-bong .map{border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--bg)}
.tpl-gau-bong .countdown div{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--a)}
.tpl-gau-bong .btn{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-weight:800}
.tpl-gau-bong .btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}
.tpl-gau-bong .band .btn{box-shadow:4px 4px 0 var(--a)}
.tpl-gau-bong .grid .ph{border:2.5px solid var(--ink);border-radius:16px}
.tpl-gau-bong .rsvp{background:color-mix(in srgb,var(--a) 22%,var(--bg))}