.zg{position:absolute;inset:0;overflow:hidden;container-type:size;background:var(--zg-bg);color:var(--zg-ink);font-family:var(--zg-tf,'Playfair Display',Georgia,serif);-webkit-tap-highlight-color:transparent;transition:opacity var(--zg-fade) ease var(--zg-fade-delay);text-align:center}
.zg *,.zg *::before,.zg *::after{box-sizing:border-box}
.zg p{margin:0}
.zg[data-phase=opening]{opacity:0;pointer-events:none}
.zg-col{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.zg-col.zg-tag-below{justify-content:flex-end;padding-bottom:max(28px,7cqh)}
.zg-tag-below .zg-card{max-width:330px;padding:26px 24px}
.zg-tag-small .zg-card{max-width:270px;padding:26px 20px;transform:scale(.86)}
.zg-stack{display:flex;flex-direction:column;align-items:center;gap:14px}
.zg-mt8{margin-top:8px!important}.zg-mt12{margin-top:12px!important}.zg-mt16{margin-top:16px!important}.zg-mt20{margin-top:20px!important}.zg-mt24{margin-top:24px!important}.zg-mt28{margin-top:28px!important}
.zg-title{font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--zg-title);line-height:1.5}
.zg-names{font-family:var(--zg-nf,'Great Vibes',cursive);font-size:var(--zg-ns);line-height:1.15;color:var(--zg-ink);overflow-wrap:anywhere;text-wrap:balance}
/* S2: "&" thư pháp nghiêng tràn sang chữ kế bên → đệm riêng hai bên. */
.zg-amp{display:inline-block;margin:0 .2em 0 .08em}
.zg-date{font-size:17px;letter-spacing:.25em;color:var(--zg-ink)}
.zg-guest{font:400 15px/1.4 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--zg-muted)}
.zg-guest b{font-weight:600;color:var(--zg-ink)}
.zg-hint{font:500 13px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--zg-muted)}
.zg-btn{display:inline-flex;height:44px;min-width:44px;align-items:center;justify-content:center;border:0;border-radius:999px;padding:0 32px;font:600 15px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--zg-btn-ink);background:var(--zg-accent);cursor:pointer;transition:filter .15s,transform .15s;touch-action:manipulation}
.zg-btn:hover{filter:brightness(.95)}.zg-btn:active{transform:scale(.97)}
.zg-btn:focus-visible,.zg-seal-btn:focus-visible,.zg-tk-stub:focus-visible{outline:2px solid var(--zg-accent);outline-offset:3px}
.zg-btn-ghost{background:transparent;color:var(--zg-ink);border:1px solid currentColor;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:0 28px}
.zg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.zg-img-soft{opacity:.55}
.zg-img-veil{opacity:.22}
.zg-fadeout{transition:opacity 350ms ease}
.zg[data-phase=opening] .zg-fadeout{opacity:0}
.zg-names-ink{--zg-ink:#2b2125}.zg-date-ink{--zg-ink:#2b2125}.zg-guest-ink{--zg-ink:#2b2125;--zg-muted:#505460}
.zg-names-sm{font-size:calc(var(--zg-ns)*.72)}.zg-date-sm{font-size:13px;letter-spacing:.2em}
.zg-title-light{color:rgba(255,255,255,.88)}.zg-names-light,.zg-date-light{--zg-ink:#fff}.zg-guest-light{--zg-ink:#fff;--zg-muted:rgba(255,255,255,.82)}
.zg-names-light{text-shadow:0 2px 14px rgba(0,0,0,.35)}
.zg-gold{color:#d8b56a}.zg-names-cream,.zg-date-cream{--zg-ink:#f6e7c4}
.zg-title-ink{color:var(--zg-ink);opacity:.75}
.zg-mono{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border:1px solid #d8b56a;border-radius:50%;font:500 20px/1 var(--zg-tf,'Playfair Display',Georgia,serif);color:#e8cf96;letter-spacing:.04em}
.zg-mono-lg{width:96px;height:96px;font-size:28px;border-color:rgba(255,255,255,.7);color:#fff}

/* card / scratch */
.zg-card{--zg-title:var(--zg-accent);position:relative;width:100%;max-width:360px;border-radius:28px;background:rgba(255,255,255,.85);padding:44px 32px;box-shadow:0 8px 24px rgba(16,24,40,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--zg-ink:#2b2125;--zg-muted:#505460}
.zg-card[data-body]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zg-title) 32%,transparent),0 10px 30px rgba(0,0,0,.28)}
.zg-k-card,.zg-k-scratch{transition-timing-function:cubic-bezier(.22,1,.36,1)}
.zg-k-card .zg-col,.zg-k-scratch .zg-col{transition:transform 650ms cubic-bezier(.22,1,.36,1)}
.zg-k-card[data-phase=opening] .zg-col,.zg-k-scratch[data-phase=opening] .zg-col{transform:translateY(-4%)}
.zg-scratch{position:relative;margin-left:auto;margin-right:auto;height:80px;width:100%;max-width:260px;overflow:hidden;border-radius:16px;border:2px dashed var(--zg-a20)}
.zg-scratch-text{display:flex;height:100%;align-items:center;justify-content:center;font-size:20px;font-weight:600;letter-spacing:.18em;color:#2b2125}
.zg-scratch-cover{position:absolute;inset:0;background:linear-gradient(135deg,#cfd3da,#f4f5f7 50%,#b9bec7);transition:opacity 500ms ease}
.zg[data-phase=opening] .zg-scratch-cover{opacity:0}
.zg-scratch canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;touch-action:none}

/* curtain */
.zg-k-curtain,.zg-k-door{background:transparent}
.zg-cur{position:absolute;top:0;bottom:0;width:50.5%;box-shadow:inset 0 -40px 60px rgba(0,0,0,.35);transition:transform 1300ms cubic-bezier(.65,0,.35,1)}
.zg-cur-l{left:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 6px,rgba(255,255,255,.06) 6px 22px,rgba(0,0,0,.12) 22px 34px),linear-gradient(90deg,var(--zg-cur-d45),var(--zg-cur))}
.zg-cur-r{right:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 6px,rgba(255,255,255,.06) 6px 22px,rgba(0,0,0,.12) 22px 34px),linear-gradient(270deg,var(--zg-cur-d45),var(--zg-cur))}
.zg-valance{position:absolute;left:0;right:0;top:0;height:64px;background:linear-gradient(var(--zg-cur-d55),var(--zg-cur-d30));border-bottom:4px solid #d8b56a;transition:transform 1300ms cubic-bezier(.65,0,.35,1)}
.zg[data-phase=opening] .zg-cur-l{transform:translateX(-102%)}
.zg[data-phase=opening] .zg-cur-r{transform:translateX(102%)}
.zg[data-phase=opening] .zg-valance{transform:translateY(-110%)}
.zg-k-curtain .zg-fadeout{transition-duration:400ms}

/* door */
.zg-k-door{perspective:1400px}
.zg-leaf{position:absolute;top:0;bottom:0;width:50%;border:2px solid var(--zg-a20);transition:transform 1200ms cubic-bezier(.65,0,.35,1);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.zg-leaf-l{left:0;transform-origin:left center;background:linear-gradient(90deg,var(--zg-bg),var(--zg-bg-d))}
.zg-leaf-r{right:0;transform-origin:right center;background:linear-gradient(270deg,var(--zg-bg),var(--zg-bg-d))}
.zg-handle{position:absolute;top:50%;height:40px;width:6px;border-radius:999px;background:var(--zg-accent);transform:translateY(-50%)}
.zg-leaf-deco{overflow:hidden}
.zg-pano{position:absolute;left:14%;right:14%;border:2px solid color-mix(in srgb,var(--zg-ink) 18%,transparent);border-radius:6px;box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--zg-bg-d) 70%,transparent),inset 0 0 0 6px color-mix(in srgb,var(--zg-ink) 12%,transparent),0 1px 0 rgba(255,255,255,.25)}
.zg-pano-t{top:7%;height:38%}
.zg-pano-b{bottom:7%;height:38%}
.zg-leaf-deco .zg-handle{height:56px;width:8px;background:linear-gradient(90deg,#b8893b,#f3d27a 45%,#a8772c);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.zg-hy{position:absolute;top:max(14px,5%);width:min(104px,28cqw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--zg-l30),var(--zg-accent) 55%,var(--zg-d30));box-shadow:0 0 0 4px var(--zg-bg),0 0 0 6px var(--zg-accent);display:flex;align-items:center;justify-content:center;color:#f6d98b;font:700 min(60px,16cqw)/1 'Noto Serif SC','Songti SC','SimSun',serif}
.zg-hy-img{width:72%;height:72%;object-fit:contain}
.zg-hy-l{right:calc(min(104px,28cqw) / -2)}
.zg-hy-r{left:calc(min(104px,28cqw) / -2)}
.zg-leaf-deco .zg-handle{top:auto;bottom:max(12%,calc(50% - 250px));transform:none}
.zg[data-phase=opening] .zg-leaf-l{transform:rotateY(-105deg)}
.zg[data-phase=opening] .zg-leaf-r{transform:rotateY(105deg)}

/* wax seal */
.zg-wax{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:var(--zg-wax);height:var(--zg-wax);border-radius:50%;background:radial-gradient(circle at 34% 28%,var(--zg-l30),var(--zg-accent) 42%,var(--zg-d45));box-shadow:0 3px 8px rgba(0,0,0,.28),inset 0 -3px 6px rgba(0,0,0,.25);color:rgba(255,255,255,.92);font:600 calc(var(--zg-wax)*.27)/1 var(--zg-tf,'Playfair Display',Georgia,serif);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.zg-wax::before{content:"";position:absolute;inset:calc(var(--zg-wax)*-.07);z-index:-1;border-radius:46% 54% 51% 49%/53% 46% 54% 47%;background:var(--zg-d30)}
.zg-wax>span{display:flex;align-items:center;justify-content:center;width:72%;height:72%;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);white-space:nowrap}

/* envelope */
.zg-env{--w:min(320px,84cqw);position:relative;width:var(--w);aspect-ratio:3/2;perspective:1200px}
.zg-env-back{position:absolute;inset:0;border-radius:10px;background:var(--zg-l55);box-shadow:0 16px 36px rgba(0,0,0,.18)}
.zg-env-letter{position:absolute;left:6%;right:6%;top:7%;height:86%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;border-radius:8px;background:#fffdf9;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform 850ms cubic-bezier(.22,1,.36,1) 520ms}
.zg-env-front{position:absolute;inset:0;z-index:2;border-radius:10px;background:linear-gradient(to top,var(--zg-l70),var(--zg-l80));clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.zg-env-flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:3;transform-origin:top center;transition:transform 650ms cubic-bezier(.65,0,.35,1),z-index 0s linear 330ms}
.zg-env-flap-paper{position:absolute;inset:0;background:linear-gradient(var(--zg-l80),var(--zg-l70));clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}
.zg-env-seal{position:absolute;left:calc(50% - 27px);bottom:-22px;line-height:0;transition:opacity 180ms ease}
.zg[data-phase=opening] .zg-env-flap{transform:rotateX(180deg);z-index:0}
.zg[data-phase=opening] .zg-env-seal{opacity:0}
.zg[data-phase=opening] .zg-env-letter{transform:translateY(-58%)}

/* seal letter */
.zg-letter{position:relative;width:min(310px,84cqw);height:min(380px,54cqh);perspective:1200px}
.zg-lt{position:absolute;left:0;right:0;height:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;background:linear-gradient(#fffaf2,#f6ecdc);box-shadow:0 12px 30px rgba(0,0,0,.14);transition:transform 800ms cubic-bezier(.65,0,.35,1) 380ms,opacity 380ms ease 760ms}
.zg-lt-top{top:0;border-radius:12px 12px 0 0;transform-origin:top center;padding-bottom:42px}
.zg-lt-bot{bottom:0;border-radius:0 0 12px 12px;transform-origin:bottom center;border-top:1px solid rgba(80,50,20,.12);padding-top:42px;background:linear-gradient(#f6ecdc,#fffaf2)}
.zg-seal-btn{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;touch-action:manipulation}
.zg-seal-btn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--zg-accent);opacity:0;animation:zg-pulse 2.2s ease-out 1s infinite;pointer-events:none}
.zg-half{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform 650ms cubic-bezier(.3,.7,.4,1),opacity 420ms ease 220ms}
.zg-half-l{clip-path:polygon(0 0,53% 0,46% 22%,57% 40%,44% 61%,54% 79%,48% 100%,0 100%)}
.zg-half-r{clip-path:polygon(53% 0,100% 0,100% 100%,48% 100%,54% 79%,44% 61%,57% 40%,46% 22%)}
.zg[data-phase=opening] .zg-seal-btn::after{animation:none;opacity:0}
.zg[data-phase=opening] .zg-half-l{transform:translate(-34px,30px) rotate(-30deg);opacity:0}
.zg[data-phase=opening] .zg-half-r{transform:translate(34px,36px) rotate(26deg);opacity:0}
.zg[data-phase=opening] .zg-lt-top{transform:rotateX(-115deg);opacity:0}
.zg[data-phase=opening] .zg-lt-bot{transform:rotateX(115deg);opacity:0}
/* (S3) ảnh từng mảnh của "Sáp niêm phong": giấy thư = một ảnh phủ cả thư, mỗi nửa hiện phần của mình */
.zg-letter{--w:min(310px,84cqw)}
.zg-lt-artmode .zg-lt{background:none;overflow:hidden}
.zg-lt-paper{position:absolute;left:0;width:100%;height:200%;object-fit:cover;pointer-events:none;user-select:none;z-index:-1}
.zg-lt-artmode .zg-lt{isolation:isolate}
.zg-lt-top .zg-lt-paper{top:0}
.zg-lt-bot .zg-lt-paper{bottom:0}
.zg-lt-label{position:relative;display:flex;align-items:center;justify-content:center;width:96%;min-height:56%;padding:9% 11%;box-sizing:border-box}
.zg-lt-label .zg-names{font-size:calc(var(--zg-ns) * .78)}
.zg-lt-label-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:-1}
.zg-lt-label{isolation:isolate}
.zg-letter .zg-flw{bottom:-10%}
@keyframes zg-pulse{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.35);opacity:0}}

/* book */
.zg-book{position:relative;width:min(320px,84cqw);height:min(460px,64cqh);perspective:1800px}
.zg-book-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;border-radius:4px 14px 14px 4px;background:linear-gradient(90deg,rgba(80,50,20,.12),transparent 8%),#fffaf2;box-shadow:0 18px 40px rgba(0,0,0,.2)}
.zg-book-orn{font-size:28px;color:var(--zg-accent);margin-bottom:10px}
.zg-book-cover{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 28px;border-radius:4px 14px 14px 4px;background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.1) 3%,transparent 8%),radial-gradient(120% 90% at 30% 15%,var(--zg-d30),var(--zg-d55));box-shadow:0 18px 40px rgba(0,0,0,.28);transform-origin:left center;transition:transform 1050ms cubic-bezier(.65,0,.35,1);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.zg-book-cover::before,.zg-book-cover::after{content:"";position:absolute;pointer-events:none;border-radius:2px 8px 8px 2px}
.zg-book-cover::before{inset:12px 12px 12px 20px;border:1px solid rgba(216,181,106,.75)}
.zg-book-cover::after{inset:17px 17px 17px 25px;border:1px solid rgba(216,181,106,.35)}
.zg-book-img{width:58%;aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px 6px 6px;border:2px solid #d8b56a}
.zg[data-phase=opening] .zg-book-cover{transform:rotateY(-165deg)}

/* scroll */
.zg-scroll{--h:min(460px,68cqh);position:relative;width:min(320px,84cqw);height:var(--h)}
.zg-paper{--zg-title:var(--zg-accent);position:absolute;left:6%;right:6%;top:10px;bottom:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;background:linear-gradient(90deg,rgba(120,80,30,.14),transparent 12%,transparent 88%,rgba(120,80,30,.14)),linear-gradient(#f7edd8,#f1e2c2);box-shadow:0 10px 28px rgba(0,0,0,.14);clip-path:inset(0 0 0 0);animation:zg-unroll 1100ms cubic-bezier(.22,1,.36,1) 150ms backwards;transition:clip-path 700ms cubic-bezier(.65,0,.35,1)}
.zg-rod{position:absolute;left:0;right:0;height:22px;border-radius:11px;background:linear-gradient(#9a6a3e,#64401f 60%,#432914);box-shadow:0 4px 10px rgba(0,0,0,.28);transition:transform 700ms cubic-bezier(.65,0,.35,1)}
.zg-rod::before,.zg-rod::after{content:"";position:absolute;top:-4px;width:14px;height:30px;border-radius:6px;background:linear-gradient(#ecd08a,#a87f34)}
.zg-rod::before{left:-6px}.zg-rod::after{right:-6px}
.zg-rod-t{top:0;animation:zg-rod-t 1100ms cubic-bezier(.22,1,.36,1) 150ms backwards}
.zg-rod-b{bottom:0;animation:zg-rod-b 1100ms cubic-bezier(.22,1,.36,1) 150ms backwards}
.zg[data-phase=opening] .zg-paper{clip-path:inset(50% 0 50% 0)}
.zg[data-phase=opening] .zg-rod-t{transform:translateY(calc(var(--h)/2 - 11px))}
.zg[data-phase=opening] .zg-rod-b{transform:translateY(calc(var(--h)/-2 + 11px))}
@keyframes zg-unroll{from{clip-path:inset(50% 0 50% 0)}}
@keyframes zg-rod-t{from{transform:translateY(calc(var(--h)/2 - 11px))}}
@keyframes zg-rod-b{from{transform:translateY(calc(var(--h)/-2 + 11px))}}

/* arch */
.zg-k-arch{background:radial-gradient(90% 60% at 50% 40%,var(--zg-bg-l),var(--zg-bg))}
.zg-arch-col{transform-origin:50% 40%;transition:transform 950ms cubic-bezier(.55,0,.7,.25) 650ms}
.zg-arch{position:relative;width:min(220px,56cqw);height:min(300px,40cqh);overflow:hidden;border-radius:999px 999px 6px 6px;border:5px solid var(--zg-accent);box-shadow:0 0 0 6px var(--zg-a20),0 18px 40px rgba(0,0,0,.18);perspective:900px}
.zg-arch-view{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 70%,#fff8e8,var(--zg-l55))}
.zg-shut{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(0deg,transparent 0 44px,rgba(255,255,255,.7) 44px 47px),linear-gradient(90deg,transparent calc(50% - 1.5px),rgba(255,255,255,.7) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(160deg,var(--zg-sh-l),var(--zg-sh-d));opacity:.94;transition:transform 900ms cubic-bezier(.65,0,.35,1)}
.zg-shut-l{left:0;transform-origin:left center;border-right:1.5px solid rgba(255,255,255,.6)}
.zg-shut-r{right:0;transform-origin:right center;border-left:1.5px solid rgba(255,255,255,.6)}
.zg[data-phase=opening] .zg-shut-l{transform:rotateY(-112deg)}
.zg[data-phase=opening] .zg-shut-r{transform:rotateY(112deg)}
.zg[data-phase=opening] .zg-arch-col{transform:scale(2.6)}

/* minimal */
.zg-min>*{animation:zg-rise 900ms cubic-bezier(.22,1,.36,1) backwards}
.zg-min>*:nth-child(2){animation-delay:120ms}.zg-min>*:nth-child(3){animation-delay:240ms}.zg-min>*:nth-child(4){animation-delay:320ms}.zg-min>*:nth-child(n+5){animation-delay:420ms}
.zg-min-names{margin-top:18px!important;font-family:var(--zg-nf,'Playfair Display',Georgia,serif);font-style:italic;font-weight:400;font-size:calc(var(--zg-ns)*.86);line-height:1.2;color:var(--zg-ink);overflow-wrap:anywhere}
.zg-rule{display:block;width:44px;height:1px;margin:22px 0;background:var(--zg-accent)}
.zg-min{transition:opacity 600ms ease,transform 900ms cubic-bezier(.22,1,.36,1)}
.zg[data-phase=opening] .zg-min{opacity:0;transform:scale(1.04)}
@keyframes zg-rise{from{opacity:0;transform:translateY(12px)}}

/* mist */
.zg-k-mist{background:transparent}
.zg-veil{position:absolute;inset:0;background:var(--zg-bg);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);transition:background-color 1300ms ease 150ms,-webkit-backdrop-filter 1300ms ease 150ms,backdrop-filter 1300ms ease 150ms}
.zg-mist-img{opacity:.4;filter:blur(3px);transition:opacity 900ms ease 100ms}
.zg-fog{position:absolute;width:90cqmax;height:90cqmax;border-radius:50%;background:radial-gradient(closest-side,var(--zg-fog),transparent);animation:zg-drift 14s ease-in-out infinite alternate;transition:translate 1400ms cubic-bezier(.22,1,.36,1),opacity 1100ms ease}
.zg-fog-1{left:-45cqmax;top:-30cqmax}
.zg-fog-2{right:-50cqmax;bottom:-40cqmax;animation-duration:17s;animation-delay:-5s}
.zg-fog-3{left:-20cqmax;bottom:-55cqmax;opacity:.7;animation-duration:20s;animation-delay:-9s}
.zg-mist-col .zg-names{text-shadow:0 0 18px var(--zg-bg)}
.zg-mist-col{isolation:isolate}
.zg-mist-col::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(460px,108%);height:min(420px,72%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--zg-scrim),var(--zg-scrim) 55%,transparent);pointer-events:none}
.zg-mist-col :is(.zg-title,.zg-date,.zg-dear){text-shadow:0 0 12px var(--zg-bg),0 0 2px var(--zg-bg)}
.zg[data-phase=opening] .zg-veil{background-color:var(--zg-bg-0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.zg[data-phase=opening] .zg-mist-img{opacity:0}
.zg[data-phase=opening] .zg-fog{opacity:0}
.zg[data-phase=opening] .zg-fog-1{translate:-40% -30%}
.zg[data-phase=opening] .zg-fog-2{translate:40% 30%}
.zg[data-phase=opening] .zg-fog-3{translate:-30% 40%}
.zg-k-mist .zg-fadeout{transition-duration:450ms}
@keyframes zg-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(8%,5%) scale(1.12)}}

/* silk */
.zg-k-silk{background:transparent}
.zg-silk{position:absolute;inset:-60%;transform:rotate(-35deg);transition:transform 1150ms cubic-bezier(.7,0,.2,1)}
.zg-k-silk{--zg-ink:var(--zg-silk-ink);--zg-muted:var(--zg-silk-muted)}
.zg-silk-a{background:linear-gradient(90deg,transparent 30%,var(--zg-sheen,rgba(255,255,255,.45)) 44%,transparent 56%),linear-gradient(0deg,var(--zg-s1),var(--zg-s2) 40%,var(--zg-s3) 55%,var(--zg-s1));background-size:240% 100%,100% 100%;animation:zg-sheen 7s ease-in-out infinite alternate;box-shadow:-30px 0 40px rgba(0,0,0,.15)}
.zg-silk-b{background:linear-gradient(0deg,var(--zg-s3),var(--zg-silk-c,var(--zg-accent)));transition-delay:150ms}
.zg[data-phase=opening] .zg-silk{transform:rotate(-35deg) translateX(115%)}
@keyframes zg-sheen{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}

/* photo */
.zg-k-photo{background:transparent}
.zg-ph{position:absolute;inset:0;overflow:hidden;background:var(--zg-bg);transition:transform 1000ms cubic-bezier(.65,0,.35,1),border-radius 1000ms cubic-bezier(.65,0,.35,1),opacity 500ms ease 500ms}
.zg-ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zg-kenburns 9s cubic-bezier(.22,1,.36,1) backwards}
.zg-ph-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:30cqh;background:radial-gradient(120% 80% at 50% 25%,var(--zg-l15),var(--zg-d55))}
.zg-ph-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.18),transparent 28%,transparent 45%,rgba(0,0,0,.72))}
.zg-ph-text{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding:24px 24px max(40px,env(safe-area-inset-bottom));transition:opacity 350ms ease,transform 600ms cubic-bezier(.22,1,.36,1)}
.zg[data-phase=opening] .zg-ph{transform:scale(.72);border-radius:28px;opacity:0}
.zg[data-phase=opening] .zg-ph-text{opacity:0;transform:translateY(12px)}
@keyframes zg-kenburns{from{transform:scale(1.18)}}

/* polaroid */
.zg-k-polaroid{background:radial-gradient(var(--zg-a20) 1px,transparent 1.5px) 0 0/22px 22px,var(--zg-bg)}
.zg-pola{position:relative;width:min(250px,64cqw);padding:12px 12px 0;background:#fff;box-shadow:0 16px 34px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.08);transform:rotate(-4deg);animation:zg-drop 1000ms cubic-bezier(.34,1.36,.64,1) 120ms backwards;transition:transform 850ms cubic-bezier(.55,0,.75,.2)}
.zg-pola-photo{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(110% 90% at 30% 20%,var(--zg-l30),var(--zg-d45))}
.zg-pola-cap{padding:10px 4px 16px;font-family:var(--zg-nf,'Great Vibes',cursive);font-size:calc(var(--zg-ns)*.66);line-height:1.2;color:#2b2125;overflow-wrap:anywhere}
.zg-pola-line{display:block;white-space:nowrap}
.zg-tape{position:absolute;z-index:1;top:-13px;left:50%;width:92px;height:26px;margin-left:-46px;background:rgba(255,246,214,.78);box-shadow:0 1px 3px rgba(0,0,0,.12);transform:rotate(3deg)}
.zg[data-phase=opening] .zg-pola{transform:translateY(110cqh) rotate(24deg)}
.zg-k-polaroid .zg-fadeout{transition-duration:300ms}
@keyframes zg-drop{from{transform:translateY(-100cqh) rotate(-18deg)}}

/* petals */
.zg-ring-wrap{--rw:min(300px,78cqw);--r:calc(var(--rw)*.42);position:relative;width:var(--rw);height:var(--rw)}
.zg-ring{position:absolute;inset:0;animation:zg-spin 60s linear infinite}
.zg-petal{position:absolute;left:50%;top:50%;width:26px;height:42px;margin:-21px 0 0 -13px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(var(--zg-l55),var(--zg-l15));box-shadow:inset 0 -4px 8px rgba(0,0,0,.08);transform:rotate(var(--a)) translateY(calc(var(--r)*-1)) rotate(var(--t));transition:transform 1150ms cubic-bezier(.2,.7,.2,1) var(--d),opacity 900ms ease var(--d)}
.zg-petal-in{width:18px;height:30px;margin:-15px 0 0 -9px;background:linear-gradient(var(--zg-l80),var(--zg-l55));transform:rotate(var(--a)) translateY(calc(var(--r)*-.8)) rotate(var(--t))}
.zg-ring-in{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 700ms cubic-bezier(.22,1,.36,1),opacity 500ms ease}
.zg-ring-art .zg-petal{background:var(--zg-pimg) center/contain no-repeat;border-radius:0;box-shadow:none}
.zg-ring-art .zg-petal-in{opacity:.9}
.zg-names-ring{font-size:calc(var(--zg-ns)*.8)}
.zg[data-phase=opening] .zg-ring{animation-play-state:paused}
.zg[data-phase=opening] .zg-petal{transform:rotate(var(--a)) translateY(calc(var(--r)*-3.4)) rotate(200deg) scale(.6);opacity:0}
.zg[data-phase=opening] .zg-petal-in{transform:rotate(var(--a)) translateY(calc(var(--r)*-2.8)) rotate(-160deg) scale(.6);opacity:0}
.zg[data-phase=opening] .zg-ring-in{transform:scale(1.15);opacity:0}
@keyframes zg-spin{to{transform:rotate(360deg)}}

/* gift */
.zg-gift{position:relative;width:min(200px,52cqw);height:min(204px,53cqw);cursor:pointer;animation:zg-wiggle 3.4s ease-in-out 1.4s infinite}
.zg-box{position:absolute;left:6%;right:6%;bottom:0;height:62%;border-radius:6px;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 30%,transparent 70%,rgba(0,0,0,.14)),var(--zg-gbox,var(--zg-accent));box-shadow:0 14px 28px rgba(0,0,0,.2);transition:transform 600ms ease 250ms,opacity 500ms ease 350ms}
.zg-rib{position:absolute;top:0;bottom:0;left:50%;width:16%;transform:translateX(-50%);background:linear-gradient(90deg,var(--zg-rib-d,#d9b46a),var(--zg-rib-l,#fff3d0) 50%,var(--zg-rib-d,#d9b46a))}
.zg-lidgrp{position:absolute;left:0;right:0;top:0;height:46%;z-index:2;transition:transform 750ms cubic-bezier(.3,1.25,.5,1),opacity 420ms ease 480ms}
.zg-lid{position:absolute;left:0;right:0;bottom:0;height:44%;border-radius:6px;background:linear-gradient(var(--zg-gbox-l,var(--zg-l15)),var(--zg-gbox,var(--zg-accent)));box-shadow:0 4px 10px rgba(0,0,0,.2)}
.zg-bow{position:absolute;bottom:42%;width:30%;height:50%;border-radius:60% 60% 12% 60%/70% 70% 12% 70%;background:linear-gradient(var(--zg-rib-l,#fff3d0),var(--zg-rib-d,#d9b46a));box-shadow:inset 0 -4px 6px rgba(0,0,0,.12)}
.zg-bow-l{right:50%;transform-origin:100% 100%;transform:rotate(-24deg)}
.zg-bow-r{left:50%;transform-origin:0 100%;transform:scaleX(-1) rotate(-24deg)}
.zg-knot{position:absolute;left:50%;bottom:36%;z-index:1;width:16%;height:22%;transform:translateX(-50%);border-radius:40%;background:linear-gradient(var(--zg-rib-k,#f4dfa6),var(--zg-rib-kd,#c99c4a))}
.zg-burst{position:absolute;left:50%;top:40%;z-index:1;width:100%;height:100%;margin:-50% 0 0 -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,248,222,.95),rgba(255,214,140,.5) 45%,rgba(255,214,140,0));transform:scale(0);opacity:0}
.zg-tag{position:absolute;z-index:3;right:-8%;top:44%;display:flex;align-items:center;justify-content:center;min-width:38%;padding:6px 8px;border-radius:4px;background:#fffdf7;box-shadow:0 3px 8px rgba(0,0,0,.18);transform:rotate(12deg);font:600 14px/1 var(--zg-tf,'Playfair Display',Georgia,serif);color:var(--zg-d30);transition:opacity 300ms ease}
.zg[data-phase=opening] .zg-gift{animation:none}
.zg[data-phase=opening] .zg-lidgrp{transform:translate(-16%,-150%) rotate(-22deg);opacity:0}
.zg[data-phase=opening] .zg-box{transform:scale(.92) translateY(6%);opacity:0}
.zg[data-phase=opening] .zg-tag{opacity:0}
.zg[data-phase=opening] .zg-burst{animation:zg-burst 1100ms ease-out 150ms forwards}
@keyframes zg-wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-4deg)}90%{transform:rotate(4deg)}95%{transform:rotate(-2deg)}}
@keyframes zg-burst{0%{transform:scale(0);opacity:0}30%{opacity:1}100%{transform:scale(6);opacity:0}}

/* ticket */
.zg-ticket{position:relative;width:min(300px,80cqw);filter:drop-shadow(0 14px 26px rgba(0,0,0,.16))}
.zg-tk-main{--zg-title:var(--zg-accent);position:relative;padding:36px 24px 30px;border-radius:16px 16px 0 0;background:radial-gradient(circle at 0 100%,var(--zg-bg) 12px,transparent 12.5px),radial-gradient(circle at 100% 100%,var(--zg-bg) 12px,transparent 12.5px),#fffdf8;transition:transform 600ms cubic-bezier(.22,1,.36,1) 300ms}
.zg-tk-main::before{content:"";position:absolute;inset:9px 9px 14px;border:1px solid var(--zg-a20);border-radius:10px;pointer-events:none}
.zg-tk-main::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;border-bottom:2px dashed rgba(0,0,0,.2)}
.zg-tk-stub{display:flex;width:100%;height:76px;align-items:center;justify-content:center;gap:10px;border:0;border-radius:0 0 16px 16px;background:radial-gradient(circle at 0 0,var(--zg-bg) 12px,transparent 12.5px),radial-gradient(circle at 100% 0,var(--zg-bg) 12px,transparent 12.5px),var(--zg-accent);color:var(--zg-btn-ink);font:600 15px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.05em;cursor:pointer;transform-origin:100% 0;transition:transform 750ms cubic-bezier(.5,0,.75,0),opacity 450ms ease 300ms;touch-action:manipulation}
.zg-tk-cut{font-size:18px;opacity:.85}
.zg[data-phase=opening] .zg-tk-stub{transform:translateY(160%) rotate(16deg);opacity:0}
.zg[data-phase=opening] .zg-tk-main{transform:translateY(-6%) scale(1.03)}

/* lantern */
.zg-k-lantern{background:radial-gradient(120% 70% at 50% 110%,var(--zg-bg-l),var(--zg-bg) 62%)}
.zg-lanterns{position:absolute;inset:0;pointer-events:none}
.zg-lan{position:absolute;top:0;left:var(--x);width:var(--w);margin-left:calc(var(--w)/-2);transition:translate 1400ms cubic-bezier(.5,0,.75,.2) var(--d)}
.zg-lan-in{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;scale:var(--lk,1);animation:zg-bob var(--bob) ease-in-out var(--bd) infinite alternate}
.zg-lan-wide{display:none}
.zg-lan-col{scale:var(--lk,1)}
@container (min-width:900px) and (min-height:560px){.zg-lanterns,.zg-lan-col{--lk:1.4}.zg-lan-wide{display:block}}
@container (min-width:1400px) and (min-height:820px){.zg-lanterns,.zg-lan-col{--lk:1.75}}
@container (min-width:2200px) and (min-height:1200px){.zg-lanterns,.zg-lan-col{--lk:2.3}}
.zg-lan-str{width:1.5px;height:var(--s);background:rgba(216,181,106,.75)}
.zg-lan-cap{width:46%;height:calc(var(--w)*.12);border-radius:3px;background:linear-gradient(#f1d58f,#b88a3a)}
.zg-lan-body{width:100%;height:calc(var(--w)*.9);margin:-1px 0;border-radius:50%/46%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px calc(var(--w)/6)),radial-gradient(circle at 50% 45%,#ffd88e,var(--zg-accent) 48%,var(--zg-d45));box-shadow:0 0 calc(var(--w)*.7) rgba(255,170,60,.5)}
.zg-lan-tas{width:12%;height:calc(var(--w)*.55);border-radius:0 0 40% 40%;background:linear-gradient(#e9b94a,var(--zg-d30))}
.zg-lan-col .zg-names{text-shadow:0 0 24px rgba(255,190,90,.35)}
.zg[data-phase=opening] .zg-lan{translate:0 -135cqh}
.zg-k-lantern .zg-fadeout{transition-duration:500ms}
@keyframes zg-bob{from{transform:translateY(0) rotate(-2.5deg)}to{transform:translateY(8px) rotate(2.5deg)}}

/* ô xem trước: chuyển động lặp (sương, lụa, đèn, hoa, hộp quà…) chỉ chạy khi rê chuột/focus */
.zg[data-mini]:not([data-active]),.zg[data-mini]:not([data-active]) *{animation:none!important}

@media (prefers-reduced-motion: reduce){
  .zg,.zg *,.zg *::before,.zg *::after{animation:none!important;transition:none!important}
}

/* ── Cửa đôi: trượt + ảnh cánh tuỳ chỉnh ── */
.zg-door-way{position:absolute;top:0;bottom:0;left:50%;width:min(100cqw,max(62cqh,520px));transform:translateX(-50%);perspective:1400px}
.zg-k-door .zg-wall{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 44px),linear-gradient(var(--zg-wall,var(--zg-d45)),var(--zg-wall-d,var(--zg-d55)));transition:opacity 500ms ease 700ms}
.zg[data-phase=opening] .zg-wall{opacity:0}
.zg-leaf-art{background:var(--zg-wall-l,var(--zg-d30));border:0;overflow:hidden}
.zg-leaf-art>img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover;pointer-events:none;user-select:none}
.zg-leaf-l.zg-leaf-art>img{left:0}
.zg-leaf-r.zg-leaf-art>img{right:0}
.zg-leaf-art::after{content:"";position:absolute;inset:0;pointer-events:none}
.zg-leaf-l.zg-leaf-art::after{background:linear-gradient(90deg,transparent 80%,rgba(0,0,0,.28))}
.zg-leaf-r.zg-leaf-art::after{background:linear-gradient(270deg,transparent 80%,rgba(0,0,0,.28))}
.zg-door-slide .zg-leaf{transition:transform 1150ms cubic-bezier(.7,0,.25,1)}
.zg[data-phase=opening] .zg-door-slide .zg-leaf-l{transform:translateX(-101%)}
.zg[data-phase=opening] .zg-door-slide .zg-leaf-r{transform:translateX(101%)}
.zg-door-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 50%,rgba(255,244,214,.95),rgba(255,226,170,.35) 45%,transparent 72%);opacity:0;transform:scaleX(.08);transition:opacity 500ms ease 150ms,transform 1000ms cubic-bezier(.22,1,.36,1) 100ms}
.zg[data-phase=opening] .zg-door-glow{opacity:1;transform:scaleX(1)}
.zg-door-way .zg-hy{top:max(14px,7%)}

/* ── Phong bì cổ điển: màu thân / lót riêng + ảnh trong thư (tuỳ chọn) ── */
.zg-env[data-body] .zg-env-back{background:var(--zg-body-d)}
.zg-env[data-body] .zg-env-front{background:linear-gradient(to top,var(--zg-body),var(--zg-body-l))}
.zg-env[data-body] .zg-env-flap-paper{background:linear-gradient(var(--zg-lin),var(--zg-lin-d))}
.zg-env-photo{width:38%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:4px;border:2px solid var(--zg-l55)}

/* ── Phong bì: biến thể dùng chung ── */
/* Hoa hai bên: bám khung phong bì (--w), không vượt mép màn hình (100cqw của .zg). Lật gương đặt ở ảnh (.zg-flw-mir) —
   trước đây scaleX(-1) trên khung có transform-origin 70% làm cụm phải lệch ra ngoài ~40% bề ngang (bị cắt ở 430px). */
.zg-flw{position:absolute;bottom:-14%;width:calc(46% * var(--zg-fs,1));pointer-events:none;z-index:6;transition:transform 900ms cubic-bezier(.65,0,.35,1) 150ms,opacity 600ms ease 250ms}
.zg-flw-l{left:max(-22%,calc((var(--w,100cqw) - 100cqw) / 2));transform-origin:30% 100%;animation:zg-flw-in 1100ms cubic-bezier(.22,1,.36,1) 200ms backwards}
.zg-flw-r{right:max(-22%,calc((var(--w,100cqw) - 100cqw) / 2));transform-origin:70% 100%;animation:zg-flw-in-r 1100ms cubic-bezier(.22,1,.36,1) 200ms backwards}
.zg-flw-img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.zg-flw-mir{transform:scaleX(-1)}
.zg[data-phase=opening] .zg-flw-l{transform:translateX(-60%) rotate(-12deg);opacity:0}
.zg[data-phase=opening] .zg-flw-r{transform:translateX(60%) rotate(12deg);opacity:0}
@keyframes zg-flw-in{from{transform:translateX(-30%) rotate(-10deg);opacity:0}}
@keyframes zg-flw-in-r{from{transform:translateX(30%) rotate(10deg);opacity:0}}
.zg-seal-art{position:relative;display:inline-flex;align-items:center;justify-content:center}
.zg-seal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.zg-seal-txt{position:relative;font:600 13px/1 var(--zg-tf,'Playfair Display',Georgia,serif);color:rgba(80,50,10,.75);text-shadow:0 1px 0 rgba(255,255,255,.35);white-space:nowrap}
.zg-pk-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}

/* ── Phong bì "ảnh cắm" ── */
.zg-pk{--w:min(300px,72cqw,40cqh);position:relative;width:var(--w);height:calc(var(--w)*1.18);animation:zg-pk-in 900ms cubic-bezier(.22,1,.36,1) backwards}
.zg-pk-back,.zg-pk-front{position:absolute;left:0;right:0;bottom:0;height:calc(var(--w)*.86)}
.zg-pk-back{z-index:0;transition:transform 900ms cubic-bezier(.55,0,.75,.2) 200ms}
.zg-pk-flap{position:absolute;left:0;right:0;bottom:0;height:100%;border-radius:8px;background:linear-gradient(var(--zg-body-d),var(--zg-body-dd));box-shadow:0 18px 40px rgba(0,0,0,.22)}
.zg-pk-flap::before{content:"";position:absolute;left:0;right:0;top:-38%;height:62%;background:radial-gradient(circle at 30% 70%,rgba(255,255,255,.25) 0 6%,transparent 7%) 0 0/26px 26px,linear-gradient(var(--zg-lin),var(--zg-lin-d));clip-path:polygon(0 100%,50% 0,100% 100%)}
.zg-pk-card{position:absolute;z-index:1;left:12%;right:12%;top:0;height:calc(var(--w)*.86);padding:7px;background:#fffdf8;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.22);transform:rotate(-2deg);animation:zg-pk-peek 1100ms cubic-bezier(.22,1,.36,1) 350ms backwards;transition:transform 950ms cubic-bezier(.22,1,.36,1) 120ms}
.zg-pk-photo{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2px;display:flex;align-items:center;justify-content:center;background:radial-gradient(110% 90% at 30% 20%,var(--zg-l30),var(--zg-d45))}
.zg-pk-front{z-index:2;transition:transform 900ms cubic-bezier(.55,0,.75,.2) 200ms}
.zg-pk-pocket{position:absolute;inset:0;border-radius:0 0 8px 8px;background:linear-gradient(170deg,var(--zg-body),var(--zg-body-d));clip-path:polygon(0 18%,50% 44%,100% 18%,100% 100%,0 100%);filter:drop-shadow(0 -2px 3px rgba(0,0,0,.18))}
.zg-pk-label{position:absolute;z-index:3;left:50%;top:81%;width:56%;aspect-ratio:1.55;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 10%;border-radius:50%;background:#fffaf0;box-shadow:0 0 0 4px #fffaf0,0 0 0 5px rgba(160,130,80,.35),0 4px 10px rgba(0,0,0,.18);transition:transform 900ms cubic-bezier(.55,0,.75,.2) 200ms}
.zg-pk-label::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(circle,#fffaf0 58%,transparent 60%) 0 0/12px 12px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 9px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 9px));z-index:-1}
.zg-pk-label-art{background:none;box-shadow:none}
.zg-pk-label-art::before{display:none}
.zg-pk-label-img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:contain;z-index:-1}
.zg-pk-names{font-family:var(--zg-nf,'Great Vibes',cursive);font-size:calc(var(--w)*.085*var(--zg-nk,1));line-height:1.1;color:var(--zg-d30);overflow-wrap:anywhere}
.zg-pk-date{font-size:calc(var(--w)*.042);letter-spacing:.22em;color:#4a3b35}
/* Dấu sáp (50px) nằm ngay trên mép nhãn (--zg-lt = mép trên nhãn, kể cả viền ren), không đè lên nhãn — S1. */
.zg-pk{--zg-lt:calc(var(--w)*.775 - 9px)}
.zg-pk-seal{position:absolute;z-index:4;left:50%;top:calc(var(--zg-lt) - 54px);margin-left:-25px;line-height:0;transition:transform 300ms ease,opacity 250ms ease}
/* Ảnh từng mảnh (thân / túi PNG vuông cùng khung, vd. bộ T-221): lớp vuông xếp chồng, ảnh cắm nhỏ lại vừa lòng phong bì. */
.zg-pk-artmode .zg-pk-back,.zg-pk-artmode .zg-pk-front{height:var(--w);bottom:calc(var(--w)*-.06)}
.zg-pk-artmode .zg-pk-card{left:21%;right:21%;top:calc(var(--w)*.1);height:calc(var(--w)*.66)}
.zg-pk-artmode{--zg-lt:calc(var(--w)*.76)}
.zg-pk-artmode .zg-pk-label{top:77%;width:46%}
/* Nhãn dọc (labelShape "portrait"): bầu dục đứng, hợp tên dài xuống 2–3 dòng. */
.zg-pk-lp{--zg-lt:calc(var(--w)*.677 - 9px)}
.zg-pk-lp .zg-pk-label{top:78%;width:38%;aspect-ratio:.78;padding:0 7%}
.zg-pk-lp.zg-pk-artmode{--zg-lt:calc(var(--w)*.69)}
.zg-pk-lp.zg-pk-artmode .zg-pk-label{top:76%;width:34%}
.zg-pk .zg-flw{width:60%;bottom:-10%}
.zg-pk .zg-flw-l{left:max(-30%,calc((var(--w) - 100cqw) / 2))}
.zg-pk .zg-flw-r{right:max(-30%,calc((var(--w) - 100cqw) / 2))}
.zg[data-phase=opening] .zg-pk-seal{transform:scale(1.4);opacity:0}
.zg[data-phase=opening] .zg-pk-card{transform:translateY(calc(var(--w)*-.32)) scale(1.18) rotate(0deg)}
.zg[data-phase=opening] .zg-pk-front,.zg[data-phase=opening] .zg-pk-back{transform:translateY(80cqh)}
.zg[data-phase=opening] .zg-pk-label{transform:translate(-50%,calc(-50% + 80cqh))}
@keyframes zg-pk-in{from{transform:translateY(40px);opacity:0}}
@keyframes zg-pk-peek{from{transform:translateY(32%) rotate(0deg)}}

/* ── Phong bì "tách lớp" ── */
.zg-ly{--w:min(320px,84cqw);position:relative;width:var(--w);aspect-ratio:3/2;perspective:1200px;transform-style:preserve-3d}
.zg-ly-back{position:absolute;inset:0;border-radius:10px;background:var(--zg-body-d);box-shadow:0 16px 36px rgba(0,0,0,.2);transition:transform 900ms cubic-bezier(.22,1,.36,1) 650ms,opacity 600ms ease 750ms}
.zg-ly-letter{position:absolute;left:6%;right:6%;top:7%;height:86%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px;border-radius:8px;background:#fffdf9;box-shadow:0 2px 10px rgba(0,0,0,.12);overflow:hidden;transition:transform 900ms cubic-bezier(.22,1,.36,1) 420ms}
.zg-ly-photo{width:46%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:6px;border:2px solid var(--zg-l55)}
.zg-ly-front{position:absolute;inset:0;z-index:2;border-radius:10px;background:linear-gradient(to top,var(--zg-body),var(--zg-body-l));clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);transform-origin:50% 100%;transition:transform 850ms cubic-bezier(.55,0,.75,.2) 600ms,opacity 500ms ease 900ms}
.zg-ly-front:has(img){background:none;clip-path:none}
.zg-ly-flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:3;transform-origin:top center;transition:transform 600ms cubic-bezier(.65,0,.35,1),z-index 0s linear 300ms}
.zg-ly-flap-paper{position:absolute;inset:0;overflow:hidden;background:linear-gradient(var(--zg-lin),var(--zg-lin-d));clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0}
.zg-ly-lin-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zg-ly-seal{position:absolute;left:calc(50% - 26px);bottom:-22px;line-height:0;transition:opacity 180ms ease}
.zg[data-phase=opening] .zg-ly-flap{transform:rotateX(180deg);z-index:0}
.zg[data-phase=opening] .zg-ly-seal{opacity:0}
.zg[data-phase=opening] .zg-ly-letter{transform:translateY(-62%) translateZ(60px) scale(1.12)}
.zg[data-phase=opening] .zg-ly-front{transform:translateY(70%) rotateX(38deg);opacity:0}
.zg[data-phase=opening] .zg-ly-back{transform:translateY(24%) scale(.82);opacity:0}

/* ── Đĩa than ── */
.zg-vn{--s:min(270px,61cqw,33cqh);position:relative;width:calc(var(--s)*1.42);height:calc(var(--s)*1.06)}
.zg-vn-deck{position:absolute;z-index:0;left:calc(var(--s)*.1);top:calc(var(--s)*-.05);width:calc(var(--s)*1.32);height:calc(var(--s)*1.16);border-radius:calc(var(--s)*.06);background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 40%),repeating-linear-gradient(92deg,rgba(0,0,0,.06) 0 3px,transparent 3px 11px),linear-gradient(var(--zg-d45),var(--zg-d55));box-shadow:0 22px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);animation:zg-vn-in 900ms cubic-bezier(.22,1,.36,1) 120ms backwards}
.zg-vn-platter{position:absolute;left:calc(var(--s)*.12);top:calc(var(--s)*.08);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#2a2a2a 0 47%,#bdbdbd 47.5% 49%,#6c6c6c 49.5%);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.zg-vn-sleeve{position:absolute;z-index:2;left:0;top:calc(var(--s)*.03);width:var(--s);height:var(--s);overflow:hidden;border-radius:3px;background:var(--zg-body);box-shadow:0 14px 30px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.08);animation:zg-vn-in 900ms cubic-bezier(.22,1,.36,1) backwards;transition:transform 650ms cubic-bezier(.65,0,.35,1),opacity 450ms ease 200ms}
.zg-vn-art{position:absolute;inset:0;background:radial-gradient(circle at 50% 118%,var(--zg-l70) 0 18%,transparent 18.5%),repeating-conic-gradient(from -90deg at 50% 118%,var(--zg-body-l) 0 7deg,var(--zg-body) 7deg 14deg)}
.zg-vn-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zg-vn-sleeve::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 52%,rgba(0,0,0,.55)),linear-gradient(115deg,rgba(255,255,255,.18),transparent 40%)}
.zg-vn-tag{position:absolute;z-index:1;left:9px;top:9px;padding:3px 8px;border-radius:999px;background:var(--zg-accent);color:var(--zg-btn-ink);font:700 10px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em}
.zg-vn-ttl{position:absolute;z-index:1;left:10px;right:10px;bottom:9px;text-align:left;font-family:var(--zg-nf,'Great Vibes',cursive);font-size:calc(var(--s)*.13);line-height:1.05;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);overflow-wrap:anywhere}
.zg-vn-rec{position:absolute;z-index:1;left:calc(var(--s)*.02);top:calc(var(--s)*.05);width:calc(var(--s)*.96);height:calc(var(--s)*.96);transform:translateX(calc(var(--s)*.33));animation:zg-vn-peek 1100ms cubic-bezier(.22,1,.36,1) 300ms backwards;transition:transform 700ms cubic-bezier(.65,0,.35,1) 80ms}
.zg-vn-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 30%,rgba(255,255,255,.07) 30.5% 31%,transparent 31.5%),conic-gradient(from 20deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.09) 18deg,rgba(255,255,255,0) 40deg 180deg,rgba(255,255,255,.07) 200deg,rgba(255,255,255,0) 222deg),repeating-radial-gradient(circle,#141414 0 1.4px,#232323 1.4px 2.6px);box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 2px #0b0b0b}
.zg-vn-label{position:absolute;left:31%;top:31%;width:38%;height:38%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:radial-gradient(circle,#111 0 6%,transparent 6.5%),radial-gradient(circle at 35% 30%,var(--zg-l30),var(--zg-accent) 60%,var(--zg-d30));color:var(--zg-btn-ink)}
.zg-vn-mono{font:600 calc(var(--s)*.07)/1 var(--zg-tf,'Playfair Display',Georgia,serif);letter-spacing:.04em;transform:translateY(-38%)}
.zg-vn-side{font:600 calc(var(--s)*.03)/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;opacity:.85;transform:translateY(80%)}
.zg-vn-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 300deg,transparent 0deg,rgba(255,255,255,.16) 22deg,transparent 48deg 180deg,rgba(255,255,255,.1) 202deg,transparent 228deg)}
.zg-vn-arm{position:absolute;z-index:3;left:calc(var(--s)*1.33);top:calc(var(--s)*.07);width:0;height:0;transform:rotate(3deg);transition:transform 560ms cubic-bezier(.5,0,.3,1) 700ms}
.zg-vn-pivot{position:absolute;left:calc(var(--s)*-.075);top:calc(var(--s)*-.075);width:calc(var(--s)*.15);height:calc(var(--s)*.15);border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4f4f4,#9a9a9a 55%,#5a5a5a);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.zg-vn-rod{position:absolute;left:-2px;top:0;width:4px;height:calc(var(--s)*.64);border-radius:2px;background:linear-gradient(90deg,#8d8d8d,#f1f1f1 45%,#9d9d9d);box-shadow:1px 2px 4px rgba(0,0,0,.3)}
.zg-vn-head{position:absolute;left:calc(var(--s)*-.035);top:calc(var(--s)*.6);width:calc(var(--s)*.07);height:calc(var(--s)*.11);border-radius:3px;background:linear-gradient(#3a3a3a,#161616);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.zg[data-phase=opening] .zg-vn-sleeve{transform:translateX(calc(var(--s)*-.7)) rotate(-10deg);opacity:0}
.zg[data-phase=opening] .zg-vn-rec{transform:translateX(calc(var(--s)*.21))}
.zg[data-phase=opening] .zg-vn-arm{transform:rotate(34deg)}
.zg[data-phase=opening] .zg-vn-disc{animation:zg-vn-spin .95s linear 380ms infinite}
.zg-vn-col .zg-vn{transition:transform 600ms cubic-bezier(.55,0,.75,.2) 1250ms}
.zg[data-phase=opening] .zg-vn-col .zg-vn{transform:scale(1.25)}
@keyframes zg-vn-spin{to{transform:rotate(360deg)}}
@keyframes zg-vn-in{from{transform:translateY(30px) rotate(-4deg);opacity:0}}
@keyframes zg-vn-peek{from{transform:translateX(0)}}

/* ── Tờ báo ── */
.zg-k-newspaper{background:radial-gradient(120% 80% at 50% 30%,var(--zg-bg-l),var(--zg-bg))}
.zg-np{--w:min(350px,88cqw,48cqh);--h:calc(var(--w)*1.5);position:relative;width:var(--w);height:calc(var(--h)/2);transform-style:preserve-3d;font-family:var(--zg-tf,'Playfair Display',Georgia,serif);color:var(--zg-np-ink,#1e1b18);text-align:left}
.zg-np-wrap{transform:rotate(-2deg);animation:zg-np-in 900ms cubic-bezier(.22,1,.36,1) backwards;transition:transform 750ms cubic-bezier(.65,0,.35,1)}
.zg-np-zoom{perspective:1600px;transition:transform 700ms cubic-bezier(.55,0,.75,.2) 800ms}
.zg-np-top,.zg-np-face,.zg-np-back{position:absolute;inset:0;padding:calc(var(--w)*.05);background:linear-gradient(rgba(0,0,0,.025),transparent 30%),var(--zg-body);box-shadow:0 2px 0 rgba(0,0,0,.06)}
.zg-np-top{z-index:1;border-radius:2px 2px 0 0;box-shadow:0 18px 36px rgba(0,0,0,.18);display:flex;flex-direction:column}
.zg-np-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(transparent,rgba(0,0,0,.08));pointer-events:none}
.zg-np-mast{display:flex;align-items:center;gap:6px;border-bottom:3px double var(--zg-np-ink,#1e1b18);padding-bottom:4px}
.zg-np-ear{flex:none;font:600 calc(var(--w)*.026)/1.1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;border:1px solid var(--zg-np-ink,#1e1b18);padding:3px 4px;text-transform:uppercase}
.zg-np-name{flex:1;min-width:0;text-align:center;font-weight:900;font-size:calc(var(--w)*.06);line-height:1.05;letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere}
.zg-np-meta{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--zg-np-ink,#1e1b18);padding:3px 0;font:500 calc(var(--w)*.028)/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.zg-np-kick{margin-top:calc(var(--w)*.035)!important;font:700 calc(var(--w)*.03)/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--zg-np-kick,var(--zg-accent))}
.zg-np-head{margin-top:4px!important;font-weight:900;font-size:calc(var(--w)*.095);line-height:1.02;letter-spacing:-.01em;overflow-wrap:anywhere;text-wrap:balance}
.zg-np-row{flex:1;min-height:calc(var(--w)*.3);display:flex;gap:calc(var(--w)*.035);margin-top:calc(var(--w)*.03)}
/* (S5) tít 2 dòng: chữ co theo --zg-nh, ô ảnh nhường chỗ (không đặt chiều cao tối thiểu) */
.zg-np-2l .zg-np-head{font-size:calc(var(--w)*.095*var(--zg-nh,1));line-height:1.06}
.zg-np-2l .zg-np-row{min-height:0}
.zg-np-ph{position:relative;flex:0 0 52%;overflow:hidden;background:radial-gradient(110% 90% at 30% 20%,#cfc6b6,#7d7466);filter:grayscale(.15) contrast(1.05);display:flex;align-items:center;justify-content:center}
.zg-np-mono{font:italic 400 calc(var(--w)*.09)/1 var(--zg-tf,'Playfair Display',Georgia,serif);color:#f6f1e6}
.zg-np-txt,.zg-np-cols>i{flex:1;background:repeating-linear-gradient(transparent 0 4px,var(--zg-np-rule,rgba(30,27,24,.3)) 4px 6px);-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
.zg-np-bot{position:absolute;left:0;right:0;top:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 0;transform:rotateX(-179.4deg);transition:transform 760ms cubic-bezier(.65,0,.35,1)}
.zg-np-face,.zg-np-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.zg-np-face{border-radius:0 0 2px 2px;box-shadow:0 18px 36px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:calc(var(--w)*.03)}
.zg-np-back{transform:rotateX(180deg);background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.02)),var(--zg-body)}
.zg-np-cols{flex:1;display:flex;gap:calc(var(--w)*.03)}
.zg-np-box{border:2px solid var(--zg-np-ink,#1e1b18);padding:calc(var(--w)*.03);text-align:center}
.zg-np-dear{font:400 calc(var(--w)*.04)/1.3 var(--zg-tf,'Playfair Display',Georgia,serif)}
.zg-np-big{font-weight:900;font-size:calc(var(--w)*.075);letter-spacing:.06em;line-height:1.1}
.zg[data-phase=opening] .zg-np-bot{transform:rotateX(0deg)}
.zg[data-phase=opening] .zg-np-wrap{transform:translateY(calc(var(--h,0px) * -.25)) rotate(0deg)}
.zg-np-wrap{--h:calc(min(350px,88cqw,48cqh)*1.5)}
.zg[data-phase=opening] .zg-np-zoom{transform:scale(1.9);opacity:.0;transition:transform 700ms cubic-bezier(.55,0,.75,.2) 800ms,opacity 450ms ease 1050ms}
@keyframes zg-np-in{from{transform:translateY(-36px) rotate(-6deg);opacity:0}}

/* ── Bôi chọn chữ ── */
.zg-hl{position:relative;margin-top:68px!important;max-width:min(360px,88cqw);transition:transform 650ms cubic-bezier(.22,1,.36,1) 120ms,opacity 500ms ease 150ms}
.zg-hl-txt,.zg-hl-sel{margin:0;font:italic 400 calc(var(--zg-ns)*1.02)/1.28 var(--zg-nf,'Playfair Display',Georgia,serif);color:var(--zg-ink);overflow-wrap:anywhere;text-wrap:balance}
.zg-hl-txt>span{animation:zg-hl-type 90ms linear calc(300ms + var(--i) * var(--zg-st)) backwards}
.zg-hl-caret{position:relative;display:inline-block;width:0;height:1em;vertical-align:-.12em}
.zg-hl-caret::after{content:"";position:absolute;left:2px;top:0;width:2px;height:1.12em;border-radius:1px;background:var(--zg-accent);opacity:0;animation:zg-hl-blink 500ms steps(1) var(--zg-t0) 3 backwards}
.zg-hl-sel{position:absolute;inset:0;color:transparent;pointer-events:none;user-select:none}
.zg-hl-mark{transform-origin:0 50%;animation:zg-hl-sweep 520ms cubic-bezier(.4,0,.2,1) calc(var(--zg-t0) + 1500ms) backwards}
.zg-hl-mark>span{background:var(--zg-hl-c);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:3px}
.zg-hl-h{position:relative;display:inline-block;width:0;height:1em;vertical-align:-.14em;animation:zg-hl-pop 380ms cubic-bezier(.34,1.56,.64,1) calc(var(--zg-t0) + 1950ms) backwards}
.zg-hl-h::before{content:"";position:absolute;left:-1px;top:-.08em;width:2px;height:1.24em;background:var(--zg-accent)}
.zg-hl-h::after{content:"";position:absolute;left:-5px;width:10px;height:10px;border-radius:50%;background:var(--zg-accent)}
.zg-hl-h1::after{top:calc(-.08em - 9px)}
.zg-hl-h2::after{top:calc(1.16em - 1px)}
/* (S3, sửa lỗi) Chữ nghiêng: dấu của chữ cuối (ạ, ễ, ỹ…) tràn quá bề ngang chữ → tay nắm cuối lùi ra một chút, không che dấu. */
.zg-hl-h2{margin-left:.16em}
.zg-hl-mark>span{padding-right:.16em}
.zg-hl-bub{position:absolute;left:50%;bottom:calc(100% + 18px);display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:12px;background:#1f1f22;color:#fff;font:600 15px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.25);transform:translateX(-50%);transform-origin:50% 100%;animation:zg-hl-bub 520ms cubic-bezier(.34,1.56,.64,1) calc(var(--zg-t0) + 2250ms) backwards;transition:transform 480ms cubic-bezier(.22,1,.36,1),opacity 380ms ease 80ms}
.zg-hl-bub::after{content:"";position:absolute;left:50%;top:100%;margin-left:-8px;border:8px solid transparent;border-top-color:#1f1f22}
.zg-hl-bi{color:var(--zg-l55);font-size:14px}
.zg-hl-foot{animation:zg-rise 700ms cubic-bezier(.22,1,.36,1) calc(var(--zg-t0) + 2300ms) backwards}
.zg-k-highlight .zg-title{animation:zg-rise 700ms cubic-bezier(.22,1,.36,1) backwards}
.zg[data-phase=opening] .zg-hl-bub{transform:translateX(-50%) translateY(-26px) scale(1.25);opacity:0}
.zg[data-phase=opening] .zg-hl{transform:scale(1.08);opacity:0}
@keyframes zg-hl-type{from{opacity:0}}
@keyframes zg-hl-blink{0%{opacity:1}50%{opacity:0}}
@keyframes zg-hl-sweep{from{transform:scaleX(0)}}
@keyframes zg-hl-pop{from{transform:scale(0)}}
@keyframes zg-hl-bub{from{transform:translateX(-50%) scale(.2);opacity:0}}

/* ── Quạt xoè ── */
.zg-k-fan{background:radial-gradient(110% 70% at 50% 40%,var(--zg-bg-l),var(--zg-bg))}
.zg-fan{--R:min(168px,43cqw,29cqh);position:relative;width:calc(var(--R)*2.12);height:calc(var(--R)*1.12);transition:transform 950ms cubic-bezier(.55,0,.75,.2) 200ms,opacity 600ms ease 500ms}
.zg-fan-in{position:absolute;inset:0;transform-origin:50% 100%;animation:zg-fan-sway 5s ease-in-out 1.6s infinite alternate}
.zg-fb{position:absolute;left:50%;bottom:0;width:calc(var(--R)*.37);height:var(--R);margin-left:calc(var(--R)*-.185);transform-origin:50% 100%;transform:rotate(var(--a));animation:zg-fan-open 1150ms cubic-bezier(.3,1.25,.5,1) calc(120ms + var(--d)) backwards;transition:transform 900ms cubic-bezier(.22,1,.36,1)}
.zg-fb-paper{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 0,100% 0,66% 64%,34% 64%);background:var(--zg-l80)}
.zg-fb-paper::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.14),transparent 28% 72%,rgba(255,255,255,.22)),linear-gradient(#d8b56a 0 2.5%,transparent 2.5%);pointer-events:none}
.zg-fb-pic{position:absolute;left:calc(50% - var(--R));bottom:0;width:calc(var(--R)*2);height:var(--R);transform-origin:50% 100%;transform:rotate(calc(var(--a) * -1));animation:zg-fan-pic 1150ms cubic-bezier(.3,1.25,.5,1) calc(120ms + var(--d)) backwards;transition:transform 900ms cubic-bezier(.22,1,.36,1)}
.zg-fb-own{position:absolute;inset:0;width:100%;height:64%;object-fit:cover}
.zg-fb-paint{position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,transparent 0 30%,rgba(255,255,255,0) 30%),radial-gradient(circle at 64% 38%,var(--zg-accent) 0 9%,transparent 9.5%),radial-gradient(ellipse 22% 14% at 26% 60%,var(--zg-l30),transparent 70%),radial-gradient(ellipse 30% 16% at 78% 66%,var(--zg-l55),transparent 70%),linear-gradient(var(--zg-l80) 0 40%,var(--zg-l70) 70%,var(--zg-l55))}
.zg-fb-paint::after{content:"";position:absolute;left:0;right:0;bottom:24%;height:30%;background:linear-gradient(140deg,transparent 30%,var(--zg-d30) 30.5% 34%,transparent 34.5%),linear-gradient(40deg,transparent 52%,var(--zg-d45) 52.5% 56%,transparent 56.5%);opacity:.55}
.zg-fb-rib{position:absolute;left:50%;bottom:0;width:4px;margin-left:-2px;height:40%;border-radius:2px;background:linear-gradient(90deg,#4b2c14,#9a6a3e 50%,#4b2c14)}
.zg-fb-guard .zg-fb-rib{width:9px;margin-left:-4.5px;height:100%;background:linear-gradient(90deg,#3d2412,#a87442 50%,#3d2412);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.zg-fb:nth-child(even) .zg-fb-paper::after{background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 28% 72%,rgba(0,0,0,.12)),linear-gradient(#d8b56a 0 2.5%,transparent 2.5%)}
.zg-fan-rivet{position:absolute;z-index:2;left:50%;bottom:0;transform:translate(-50%,50%);line-height:0}
.zg-fan-txt{position:relative;margin-top:calc(var(--zg-ns)*.9 + 14px)!important;gap:12px}
.zg[data-phase=opening] .zg-fb{transform:rotate(calc(var(--a) * 1.45))}
.zg[data-phase=opening] .zg-fb-pic{transform:rotate(calc(var(--a) * -1.45))}
.zg[data-phase=opening] .zg-fan{transform:translateY(-6%) scale(2.1);opacity:0}
.zg[data-phase=opening] .zg-fan-in{animation:none}
@keyframes zg-fan-open{from{transform:rotate(0deg)}}
@keyframes zg-fan-pic{from{transform:rotate(0deg)}}
@keyframes zg-fan-sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}

/* ── Khối kính mờ ── */
.zg-k-glass{background:transparent}
.zg-gl-bg{position:absolute;inset:0;background:var(--zg-bg);transition:opacity 700ms ease 250ms}
.zg-gl-blobs{position:absolute;inset:0;background:radial-gradient(42% 30% at 22% 24%,var(--zg-l30),transparent 70%),radial-gradient(46% 34% at 82% 38%,var(--zg-l55),transparent 70%),radial-gradient(52% 32% at 40% 82%,var(--zg-accent),transparent 72%),radial-gradient(30% 24% at 76% 86%,var(--zg-l15),transparent 70%),var(--zg-bg)}
.zg-gl-grout{position:absolute;inset:0;background:rgba(255,255,255,.42);transition:opacity 500ms ease 300ms}
.zg-gl-wall{--cols:3;--rows:5;position:absolute;inset:0}
.zg-gb{--cc:var(--c);--rr:var(--r);--d0:var(--dd);--cw:calc(100cqw / var(--cols));--rh:calc(100cqh / var(--rows));position:absolute;left:calc(var(--cc) * var(--cw));top:calc(var(--rr) * var(--rh));width:var(--cw);height:var(--rh);animation:zg-gb-in 700ms cubic-bezier(.22,1,.36,1) calc(var(--d0) * .6) backwards;transition:transform 720ms cubic-bezier(.55,0,.75,.2) var(--d0),opacity 420ms ease calc(var(--d0) + 260ms)}
.zg-gb[data-wide]{display:none}
.zg-gb-in{position:absolute;left:calc(var(--cc) * var(--cw) * -1);top:calc(var(--rr) * var(--rh) * -1);width:100cqw;height:100cqh;filter:blur(14px) saturate(1.25);transform:scale(1.04)}
.zg-gb::before{content:"";position:absolute;inset:3px;z-index:1;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.16)),rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -12px 26px rgba(255,255,255,.16),inset 0 10px 18px rgba(0,0,0,.06)}
.zg-gb{overflow:hidden;clip-path:inset(3px round 14px)}
.zg-gb::after{content:"";position:absolute;z-index:2;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-160%) skewX(-12deg);animation:zg-gb-sheen 5.5s ease-in-out calc(1.2s + var(--d0) * 2) infinite}
.zg-gl-card{--zg-ink:#2b2125;--zg-muted:#505460;--zg-title:var(--zg-gl-title,var(--zg-accent));position:relative;width:100%;max-width:360px;padding:40px 30px;border-radius:28px;background:var(--zg-gl-card,rgba(255,255,255,.62));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 20px 50px rgba(30,20,40,.18);animation:zg-rise 800ms cubic-bezier(.22,1,.36,1) 350ms backwards}
.zg-gl-dark{--zg-ink:#fff8ef;--zg-muted:rgba(255,248,239,.8);--zg-title:var(--zg-gl-title,var(--zg-accent));background:var(--zg-gl-card,rgba(26,21,25,.56));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 20px 50px rgba(0,0,0,.32)}
.zg[data-phase=opening] .zg-gb{transform:scale(1.28) rotate(var(--rot));opacity:0}
.zg[data-phase=opening] .zg-gl-bg,.zg[data-phase=opening] .zg-gl-grout{opacity:0}
@container (orientation: landscape){
  .zg-gl-wall{--cols:6;--rows:4}
  .zg-gb{--cc:var(--c2);--rr:var(--r2);--d0:var(--dd2)}
  .zg-gb[data-wide]{display:block}
}
/* Màn rộng (máy tính): phóng to vật thể chính cho cân khung. */
@container (min-width:900px) and (min-height:560px){
  .zg-vn{--s:min(330px,36cqh)}
  .zg-np{--w:min(440px,52cqh)}
  .zg-np-wrap{--h:calc(min(440px,52cqh)*1.5)}
  .zg-fan{--R:min(230px,32cqh)}
  .zg-pk{--w:min(360px,42cqh)}
  .zg-hl{max-width:min(560px,70cqw)}
  .zg-hl-txt,.zg-hl-sel{font-size:calc(var(--zg-ns)*1.35)}
}
@keyframes zg-gb-in{from{transform:scale(.92);opacity:0}}
@keyframes zg-gb-sheen{0%,70%{transform:translateX(-160%) skewX(-12deg)}100%{transform:translateX(360%) skewX(-12deg)}}

/* (S5) Tối giản: chữ lớn mờ sau tên + font tên riêng */
.zg-min-big{position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-55%);font-family:var(--zg-tf,'Playfair Display',Georgia,serif);font-weight:400;line-height:.9;font-variant-numeric:lining-nums;color:var(--zg-title);opacity:.15;white-space:nowrap;pointer-events:none;user-select:none;animation:zg-big-in 1300ms cubic-bezier(.22,1,.36,1) backwards;transition:opacity 600ms ease,transform 900ms cubic-bezier(.22,1,.36,1)}
.zg[data-phase=opening] .zg-min-big{opacity:0;transform:translateY(-55%) scale(1.08)}
@keyframes zg-big-in{from{opacity:0;transform:translateY(-52%) scale(.94)}}
.zg-min-nf .zg-min-names{font-style:normal;text-wrap:balance}
/* (S5) Lụa: hoạ tiết in trên lụa (góc bù cho tấm lụa xoay -35° → sọc thẳng theo màn hình) + lớp mờ sau chữ */
.zg-silk-pt{position:absolute;inset:0;pointer-events:none}
.zg-silk-pt[data-pt=gingham]{background:repeating-linear-gradient(125deg,var(--zg-pt) 0 18px,transparent 18px 36px),repeating-linear-gradient(35deg,var(--zg-pt) 0 18px,transparent 18px 36px)}
.zg-silk-pt[data-pt=stripes]{background:repeating-linear-gradient(80deg,var(--zg-pt) 0 11px,transparent 11px 28px)}
.zg-silk-pt[data-pt=stripes-v]{background:repeating-linear-gradient(125deg,var(--zg-pt) 0 12px,transparent 12px 30px)}
.zg-col[data-pt]{isolation:isolate}
.zg-col[data-pt]::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(440px,104%);height:min(420px,70%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--zg-pt-scrim),var(--zg-pt-scrim) 58%,transparent);pointer-events:none}
/* (S5) Cuộn thư: giấy màu riêng + dây treo / tua */
.zg-paper[data-body]{background:linear-gradient(90deg,rgba(60,30,10,.16),transparent 12%,transparent 88%,rgba(60,30,10,.16)),linear-gradient(var(--zg-pp1),var(--zg-pp2))}
.zg-paper[data-dark] :is(.zg-names-ink,.zg-date-ink,.zg-guest-ink){--zg-ink:#fff8ef;--zg-muted:rgba(255,248,239,.8)}
.zg-tie{position:absolute;left:14%;right:14%;bottom:calc(100% - 4px);height:min(44px,7cqh);pointer-events:none}
.zg-tie svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.zg-tie-bow{position:absolute;left:50%;top:0;width:34px;height:16px;margin:-9px 0 0 -17px}
.zg-tie-bow::before,.zg-tie-bow::after{content:"";position:absolute;top:0;width:17px;height:16px;border-radius:60% 40% 40% 60%/60% 50% 50% 60%;background:linear-gradient(var(--zg-rib-l),var(--zg-rib-d));box-shadow:inset 0 -2px 3px rgba(0,0,0,.18)}
.zg-tie-bow::before{left:0;transform:rotate(-12deg)}
.zg-tie-bow::after{right:0;transform:scaleX(-1) rotate(-12deg)}
.zg-tas{position:absolute;top:calc(100% - 2px);width:7px;height:min(40px,6cqh);border-radius:2px 2px 3px 3px;background:repeating-linear-gradient(90deg,var(--zg-rib-d) 0 1.5px,var(--zg-rib) 1.5px 3px);box-shadow:0 2px 3px rgba(0,0,0,.2)}
.zg-tas::before{content:"";position:absolute;left:-3px;right:-3px;top:0;height:7px;border-radius:3px;background:var(--zg-rib-kd)}
.zg-tas-l{left:20%}.zg-tas-r{right:20%}
/* (S5) Vé: ảnh trên vé */
.zg-tk-ph{position:relative;display:block;margin:-22px -10px 18px;aspect-ratio:16/10;max-height:26cqh;overflow:hidden;border-radius:9px;background:var(--zg-a20)}
/* (S5) Kính khảm: màu từng ô */
.zg-gb-tint{position:absolute;inset:0;background:var(--zg-tile);opacity:.74}
/* (S5) Cào thẻ: màu mặt thẻ (body) → chữ ngày sáng / tối theo màu (ảnh image đè lên thì luật ảnh bên dưới thắng) */
.zg-scratch[data-body] .zg-scratch-text{color:var(--zg-sc-ink)}
/* (S5) Cào thẻ: mặt thẻ là ảnh (image) → thẻ cao hơn, chữ trắng có bóng */
.zg-scratch[data-img]{height:116px;background-clip:padding-box;background-origin:padding-box}
.zg-scratch[data-img] .zg-scratch-text{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ── (HT2) Ảnh lấy liền ── */
.zg-k-instax{background:radial-gradient(130% 80% at 50% 0%,var(--zg-bg-l),var(--zg-bg) 70%)}
.zg-ix-col{--w:min(236px,60cqw,33cqh)}
.zg-ix-pile{position:relative;width:var(--w);height:calc(var(--w)*1.593);animation:zg-ix-drop 900ms cubic-bezier(.34,1.3,.64,1) backwards;transition:transform 900ms cubic-bezier(.55,0,.75,.2),opacity 600ms ease 300ms}
.zg-ix{position:absolute;inset:0;display:block;margin:0;padding:calc(var(--w)*.074) calc(var(--w)*.074) 0;border:0;border-radius:calc(var(--w)*.03);background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 40%),var(--zg-ix-card);box-shadow:0 18px 36px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.04);color:var(--zg-ix-ink);font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.zg-ix-front{transform:rotate(-3deg)}
.zg-ix-front:focus-visible{outline:2px solid var(--zg-accent);outline-offset:4px}
.zg-ix-back{transform:translate(var(--x),var(--y)) rotate(var(--r));animation:zg-ix-drop 900ms cubic-bezier(.34,1.3,.64,1) var(--d) backwards;cursor:default;transition:transform 900ms cubic-bezier(.22,1,.36,1)}
.zg-ix-ph{position:relative;display:block;width:100%;aspect-ratio:46/62;overflow:hidden;border-radius:2px;background:#1e1c1a}
.zg-ix-dev{position:absolute;inset:0;display:block;animation:zg-ix-dev 2500ms cubic-bezier(.4,0,.2,1) 900ms backwards}
.zg-ix-milk{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 40%,#e3e4dc,#c9ccc2);opacity:0;pointer-events:none;animation:zg-ix-milk 2500ms ease-out 900ms backwards}
.zg-ix-pile[data-dev] :is(.zg-ix-dev,.zg-ix-milk){animation:none}
.zg-ix-empty,.zg-ix-blank{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(110% 90% at 30% 20%,var(--zg-l30),var(--zg-d45));font:500 calc(var(--w)*.12)/1 var(--zg-tf,'Playfair Display',Georgia,serif);color:rgba(255,255,255,.85)}
.zg-ix-blank{background:linear-gradient(160deg,#cfc8bd,#8e877c)}
.zg-ix-cap{display:flex;align-items:center;justify-content:center;height:calc(var(--w)*.37);padding:0 4px 4px;font-family:var(--zg-nf,'Great Vibes',cursive);font-size:calc(var(--w)*.115);line-height:1.1;color:var(--zg-ix-ink);overflow-wrap:anywhere;text-wrap:balance;transform:rotate(-1.5deg)}
.zg-ix .zg-tape{top:-12px}
.zg-ix-names{font-family:var(--zg-tf,'Playfair Display',Georgia,serif);font-size:calc(var(--zg-ns)*.6);letter-spacing:.02em}
.zg-ix-hint{transition:opacity 400ms ease}
.zg-ix-col[data-done] .zg-ix-hint{opacity:0}
.zg[data-phase=opening] .zg-ix-pile{transform:translateY(-6%) scale(1.45);opacity:0}
.zg[data-phase=opening] .zg-ix-back:nth-child(1){transform:translate(-70cqw,10%) rotate(-30deg)}
.zg[data-phase=opening] .zg-ix-back:nth-child(2){transform:translate(70cqw,-6%) rotate(28deg)}
.zg[data-phase=opening] .zg-ix-back:nth-child(3){transform:translate(-50cqw,40%) rotate(-12deg)}
@keyframes zg-ix-drop{from{transform:translateY(-105cqh) rotate(-16deg)}}
@keyframes zg-ix-dev{0%{filter:brightness(1.4) saturate(0) contrast(.5) blur(5px)}45%{filter:brightness(1.18) saturate(.35) contrast(.78) blur(2px)}100%{filter:none}}
@keyframes zg-ix-milk{0%,12%{opacity:.94}100%{opacity:0}}

/* ── (HT3) Màn khoá điện thoại ── */
.zg-k-lockscreen{background:var(--zg-bg)}
.zg-ls{position:absolute;inset:0;overflow:hidden;color:var(--zg-ink);touch-action:none;user-select:none;-webkit-user-select:none;font-family:ui-sans-serif,-apple-system,'SF Pro Display','Segoe UI',system-ui,sans-serif}
.zg-ls[data-img]{color:#fff}
.zg-ls-wall{position:absolute;inset:0;transition:transform 1000ms cubic-bezier(.65,0,.35,1),filter 900ms ease}
.zg-ls-grad{position:absolute;inset:0;background:radial-gradient(120% 70% at 30% 10%,var(--zg-l15),transparent 60%),radial-gradient(110% 80% at 80% 100%,var(--zg-d30),transparent 60%),var(--zg-bg)}
.zg-ls-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.06) 34%,rgba(0,0,0,0) 52%,rgba(0,0,0,.42))}
.zg-ls:not([data-img]) .zg-ls-shade{display:none}
.zg-ls-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:max(26px,6cqh) 16px max(18px,env(safe-area-inset-bottom));transition:transform 900ms cubic-bezier(.55,0,.75,.2),filter 700ms ease,opacity 600ms ease 200ms}
.zg-ls-top{display:flex;flex-direction:column;align-items:center;text-shadow:0 1px 10px rgba(0,0,0,.18)}
.zg-ls-lock{width:18px;height:18px;opacity:.9;margin-bottom:10px}
.zg-ls-title{color:inherit;opacity:.85;font:600 11px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.24em}
.zg-ls-date{margin-top:4px!important;color:inherit;font:500 min(17px,4.4cqw)/1.3 ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em}
.zg-ls .zg-date{--zg-ink:currentColor}
.zg-ls-time{min-height:1em;font-family:var(--zg-tf,ui-sans-serif,-apple-system,'SF Pro Display',system-ui,sans-serif);font-size:min(96px,24cqw,13cqh);font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zg-ls-names{margin-top:8px!important;font-family:var(--zg-nf,'Great Vibes',cursive);font-size:calc(var(--zg-ns)*.78);line-height:1.15;overflow-wrap:anywhere;text-wrap:balance}
.zg-ls-guest{margin-top:8px!important;--zg-ink:currentColor;--zg-muted:currentColor;opacity:.86;font-size:13px}
.zg-ls-notes{list-style:none;margin:auto 0 0;padding:0;width:min(380px,100%);display:flex;flex-direction:column;gap:8px}
.zg-ls-note{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:18px;background:var(--zg-ls-card,rgba(246,244,248,.74));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 6px 18px rgba(0,0,0,.14);color:var(--zg-ls-ink,#1d1b20);text-align:left;animation:zg-ls-note 650ms cubic-bezier(.22,1,.36,1) calc(700ms + var(--i) * 650ms) backwards}
.zg-ls-app{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--zg-accent);color:var(--zg-btn-ink);box-shadow:inset 0 -2px 4px rgba(0,0,0,.12)}
.zg-ls-ico{width:19px;height:19px}
.zg-ls-nb{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.zg-ls-nh{display:flex;justify-content:space-between;gap:8px;font:500 11px/1.3 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--zg-ls-muted,#5d5960)}
.zg-ls-nt{font:600 14px/1.3 ui-sans-serif,system-ui,sans-serif;overflow-wrap:anywhere}
.zg-ls-nx{font:400 13.5px/1.35 ui-sans-serif,system-ui,sans-serif;overflow-wrap:anywhere}
.zg-ls-foot{margin-top:18px;display:flex;justify-content:center;width:100%}
.zg-ls-btn{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;min-height:44px;padding:6px 18px 2px;border:0;background:none;color:inherit;font:500 14px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;touch-action:manipulation}
.zg-ls-btn:focus-visible{outline:1.5px solid color-mix(in srgb,currentColor 55%,transparent);outline-offset:2px;border-radius:16px}
.zg-ls-sw{opacity:.88;animation:zg-ls-hint 2.4s ease-in-out 2.8s infinite}
.zg-ls-bt{display:none}
.zg-ls-bar{width:134px;height:5px;border-radius:3px;background:currentColor;opacity:.85}
.zg[data-phase=opening] .zg-ls-ui{transform:translateY(-100%);filter:blur(6px);opacity:0}
.zg[data-phase=opening] .zg-ls-wall{transform:scale(1.12);filter:blur(14px)}
@keyframes zg-ls-note{from{opacity:0;transform:translateY(-26px) scale(.94)}}
@keyframes zg-ls-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){
  .zg-ls-sw,.zg-ls-bar{display:none}
  .zg-ls-btn{padding:0;border-radius:999px}
  .zg-ls-bt{display:inline-flex;height:44px;align-items:center;padding:0 30px;border-radius:999px;background:var(--zg-accent);color:var(--zg-btn-ink);font-weight:600}
}

/* ── (HT4) Bìa tạp chí ── */
.zg-mg{--w:min(330px,84cqw,46cqh);--ink:#fff;--ink-sh:0 1px 12px rgba(0,0,0,.45);position:relative;width:var(--w);height:calc(var(--w)*1.32);perspective:1800px;animation:zg-mg-in 900ms cubic-bezier(.22,1,.36,1) backwards}
.zg-mg[data-ink=dark]{--ink:#1a1716;--ink-sh:0 0 12px rgba(255,255,255,.4)}
.zg-mg-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;border-radius:3px;background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 8%),var(--zg-body);color:var(--zg-np-ink,#1e1b18);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.zg-mg-orn{font-size:22px;color:var(--zg-np-kick,var(--zg-accent));margin-bottom:10px}
.zg-mg-pnames{--zg-ink:var(--zg-np-ink,#1e1b18);font-size:calc(var(--zg-ns)*.78)}
.zg-mg-pdate{--zg-ink:var(--zg-np-ink,#1e1b18);font-size:14px}
.zg-mg-pguest{--zg-ink:var(--zg-np-ink,#1e1b18);--zg-muted:var(--zg-np-ink,#1e1b18)}
.zg-mg-cover{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:3px;background:#2a2624;box-shadow:0 22px 44px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.06);color:var(--ink);transform-origin:left center;transition:transform 1050ms cubic-bezier(.65,0,.35,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;text-align:left}
.zg-mg-blank{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,var(--zg-l30),var(--zg-d55))}
.zg-mg-head{position:absolute;left:4%;right:4%;top:2.5%;display:flex;flex-direction:column;align-items:center}
.zg-mg-mast{position:relative;z-index:1;width:100%;margin:0;font-family:var(--zg-tf,'Playfair Display',Georgia,serif);font-weight:900;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;color:var(--zg-accent);text-shadow:0 2px 14px rgba(0,0,0,.18)}
.zg-mg-subj{z-index:2}
.zg-mg-issue{position:relative;z-index:3;margin-top:4px!important;font:600 calc(var(--w)*.03)/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-align:center;text-shadow:var(--ink-sh)}
.zg-mg-badge{position:absolute;z-index:3;right:4%;top:25%;display:flex;align-items:center;justify-content:center;width:calc(var(--w)*.22);aspect-ratio:1;padding:7px;border-radius:50%;background:var(--zg-accent);color:var(--zg-btn-ink);font:700 calc(var(--w)*.03)/1.3 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center;transform:rotate(10deg);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.zg-mg-lines{position:absolute;z-index:3;inset:0;pointer-events:none}
.zg-mg-line{position:absolute;top:calc(44% + var(--i) * 13%);max-width:38%;margin:0;font:700 calc(var(--w)*.042)/1.15 var(--zg-tf,'Playfair Display',Georgia,serif);text-shadow:var(--ink-sh);overflow-wrap:anywhere;animation:zg-mg-line 700ms cubic-bezier(.22,1,.36,1) calc(500ms + var(--i) * 160ms) backwards}
.zg-mg-line::before{content:"";display:block;width:18px;height:2px;margin-bottom:5px;background:var(--zg-accent)}
.zg-mg-line-l{left:5%}
.zg-mg-line-r{right:5%;text-align:right}
.zg-mg-line-r::before{margin-left:auto}
.zg-mg-foot{position:absolute;z-index:3;left:5%;right:30%;bottom:4.5%}
.zg-mg-names{margin:0;font-family:var(--zg-nf,'Great Vibes',cursive);font-size:calc(var(--w)*.1);line-height:1.05;text-shadow:var(--ink-sh);overflow-wrap:anywhere;text-wrap:balance}
.zg-mg-date{margin-top:4px!important;font:600 calc(var(--w)*.034)/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;text-shadow:var(--ink-sh)}
.zg-mg-code{position:absolute;z-index:3;right:4.5%;bottom:4%;display:flex;flex-direction:column;align-items:center;gap:2px;width:calc(var(--w)*.2);padding:5px 6px 4px;background:#fff;color:#111}
.zg-mg-code i{display:block;width:100%;height:calc(var(--w)*.075);background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 2px,#111 2px 4px,transparent 4px 5px,#111 5px 6px,transparent 6px 8px,#111 8px 9px,transparent 9px 11px)}
.zg-mg-code small{font:500 calc(var(--w)*.022)/1.1 ui-sans-serif,system-ui,sans-serif;white-space:nowrap}
.zg-mg-gloss{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 42%,transparent 52%);background-size:260% 100%;animation:zg-mg-gloss 1400ms ease-out 700ms backwards;background-position:100% 0}
.zg[data-phase=opening] .zg-mg-cover{transform:rotateY(-165deg)}
@keyframes zg-mg-in{from{transform:translateY(30px) rotate(-3deg);opacity:0}}
@keyframes zg-mg-line{from{opacity:0;transform:translateY(10px)}}
@keyframes zg-mg-gloss{from{background-position:0 0}}