/* THU MUA XANH · bản nâng cấp trình chiếu (26/10/2026)
   01 bật đèn + bụi sáng · 04 đồng hồ 5 giây · 08 con dấu bằng chứng · 11 khung soi + tia quét · 14 câu chốt + mã QR · nút âm thanh.
   Chỉ transform / opacity cho chuyển động; chế độ an toàn và giảm chuyển động giữ đủ nội dung, đứng yên. */

/* ---------- HUD: nút âm thanh ---------- */
.hud-tools [data-act="sfx"] .snd-x { display: none; }
.sfx-off .hud-tools [data-act="sfx"] .snd-w { display: none; }
.sfx-off .hud-tools [data-act="sfx"] .snd-x { display: inline; }
.hud-tools [data-act="sfx"][aria-pressed="true"] { background: transparent; }
.hud-tools [data-act="sfx"][aria-pressed="true"]:hover { background: rgba(239, 234, 220, .1); }

/* ---------- 01 · màn bật đèn ---------- */
@property --wsp { syntax: '<percentage>'; inherits: false; initial-value: 15%; }
.wow-curtain { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; visibility: hidden; --wsp: 15%;
  background: radial-gradient(circle at 73% 47%, rgba(3, 8, 6, .2) 0%, rgba(3, 8, 6, .9) var(--wsp), #020504 calc(var(--wsp) + 20%));
  transition: opacity .5s ease, visibility 0s .5s; }
.wow-curtain.is-dark { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.wow-curtain.is-up { opacity: 0; visibility: hidden; --wsp: 150%; transition: --wsp 2s cubic-bezier(.55, 0, .25, 1), opacity 1.2s ease 1.2s, visibility 0s 2.4s; }
body:not(.present) .wow-curtain, body.safe .wow-curtain { display: none; }
/* vệt đèn rọi chéo từ trên trái xuống hộp */
.wow-beam { position: absolute; left: 47%; top: -30%; width: 22%; height: 120%; transform: rotate(-30deg); transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 232, 190, .13), rgba(255, 232, 190, .05) 55%, transparent 85%); filter: blur(calc(var(--u, 1vw) * 2.2)); }
.wow-curtain.is-dark .wow-beam { animation: wowBreath 5s ease-in-out infinite; }
@keyframes wowBreath { 50% { opacity: .65; } }
/* vệt sáng quét ngang lúc bật đèn */
.wow-sweep { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 214, .16) 45%, rgba(255, 252, 236, .3) 50%, rgba(255, 246, 214, .16) 55%, transparent); mix-blend-mode: screen; }
.wow-curtain.is-up .wow-sweep { animation: wowSweep 1.6s cubic-bezier(.45, 0, .2, 1) .15s both; }
@keyframes wowSweep { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(380%); } }
.wow-cue { position: absolute; left: 0; right: 0; bottom: calc(var(--u, 1vw) * 11); display: grid; justify-items: center; gap: .55em; margin: 0; font-family: var(--font-ui); color: rgba(242, 237, 225, .55); }
.wow-cue b { font-size: calc(var(--u, 1vw) * 1); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.wow-cue span { display: inline-flex; align-items: center; gap: .6em; font-size: calc(var(--u, 1vw) * 1.05); letter-spacing: .04em; animation: wowPulse 2.4s ease-in-out infinite; }
.wow-cue kbd { font: 600 .9em var(--font-ui); color: rgba(242, 237, 225, .85); border: 1px solid rgba(242, 237, 225, .35); border-radius: 4px; padding: .1em .55em; }
@keyframes wowPulse { 50% { opacity: .45; } }
.wow-curtain.is-up .wow-cue { opacity: 0; transition: opacity .3s; }
/* bụi sợi lơ lửng trong vệt đèn */
.wow-dust { position: fixed; inset: 0; z-index: 6; pointer-events: none; width: 100vw; height: 100vh; opacity: 0; transition: opacity 1.2s ease; }
.wow-dust.is-on { opacity: 1; }
body:not(.present) .wow-dust, body.safe .wow-dust { display: none; }
/* chữ mở màn: tối khi chưa bật đèn, hiện lần lượt khi đèn lên; tiêu đề có vệt sáng lướt qua */
body.present:not(.safe) .cn1 .fr > :is(.cn1-eye, .cn1-title, .cn1-sub, .cn1-foot, .cn1-chip, .cn1-go) { transition: opacity 1s var(--ez), translate 1.3s var(--ez); }
body.present:not(.safe) .cn1:not(.at1) .fr > :is(.cn1-eye, .cn1-title, .cn1-sub, .cn1-foot, .cn1-chip, .cn1-go) { opacity: 0; translate: 0 calc(var(--u) * 1.1); transition-duration: .2s; transition-delay: 0s !important; }
body.present:not(.safe) .cn1.at1 .cn1-eye { transition-delay: 1.15s; }
body.present:not(.safe) .cn1.at1 .cn1-title { transition-delay: 1.4s; }
body.present:not(.safe) .cn1.at1 .cn1-sub { transition-delay: 1.85s; }
body.present:not(.safe) .cn1.at1 .cn1-foot { transition-delay: 2.15s; }
body.present:not(.safe) .cn1.at1 .cn1-chip { transition-delay: 2.6s; }
body.present:not(.safe) .cn1.at1 .cn1-go { transition-delay: 3s; }
body.present:not(.safe) .cn1.at1 .cn1-title { background: linear-gradient(100deg, #F2EDE1 42%, #FFF6CF 50%, #F2EDE1 58%) 120% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wowShine 2.4s cubic-bezier(.45, 0, .2, 1) 2.2s both; }
@keyframes wowShine { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.cn1-title em { -webkit-text-fill-color: currentColor; }

/* ---------- 04 · mời một bạn: đồng hồ 5 giây ---------- */
.q4-tm { justify-self: start; display: inline-flex; align-items: center; gap: calc(var(--u) * 1.1); color: var(--ink2); font-size: var(--t-md); font-weight: 600; text-align: left; border-radius: 999px; padding: calc(var(--u) * .3) calc(var(--u) * 1.2) calc(var(--u) * .3) calc(var(--u) * .3); transition: background .3s var(--ez); }
.q4-tm:hover { background: rgba(242, 237, 225, .06); }
.q4-tm-r { position: relative; display: grid; place-items: center; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); flex: none; }
.q4-tm-r svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.q4-tm-r circle { fill: none; stroke-width: 3; }
.q4-tm-bg { stroke: var(--hair2); }
.q4-tm-run { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(207, 224, 108, .45)); }
.q4-tm.is-run .q4-tm-run { stroke-dashoffset: 1; transition: stroke-dashoffset 5s linear; }
.q4-tm.is-end .q4-tm-run { stroke-dashoffset: 1; }
.q4-tm.is-end .q4-tm-bg { stroke: #E39A72; }
.q4-tm-r b { position: relative; font-size: calc(var(--u) * 1.9); font-weight: 800; line-height: 1; color: var(--ivory); }
.q4-tm.is-run .q4-tm-r b { animation: wowTick 1s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.q4-tm.is-hot .q4-tm-r b { color: #F2C66B; }
.q4-tm.is-hot .q4-tm-run { stroke: #F2C66B; }
.q4-tm.is-end .q4-tm-r b { color: #E39A72; }
@keyframes wowTick { 0% { transform: scale(1.35); } 30% { transform: scale(1); } }
.q4-tm-t { display: grid; gap: .1em; line-height: 1.2; }
.q4-tm-t em { font-style: normal; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.q4-tm-t kbd { font-size: .9em; }
.q4.is-rev .q4-tm { display: none; }
.q4.is-rev .q4-qv { display: block; }

/* ---------- 08 · khoảnh khắc bằng chứng: ảnh lớn + con dấu ---------- */
body.present .q8:not(.at1) .z8-im { height: calc(var(--u) * 22.5); }
body.present .q8:not(.at1) .z8-cap b { font-size: calc(var(--u) * 2.7); }
.z8-stamp { position: absolute; right: 6%; bottom: 13%; z-index: 3; display: inline-block; padding: .2em .55em .14em; font: 900 calc(var(--u) * 2.25)/1 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; font-style: normal;
  color: #B91C1C; background: rgba(255, 251, 242, .92); border: calc(var(--u) * .26) solid #B91C1C; border-radius: calc(var(--u) * .45);
  box-shadow: inset 0 0 0 calc(var(--u) * .16) rgba(255, 251, 242, .92), inset 0 0 0 calc(var(--u) * .3) #B91C1C, 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0, 0, 0, .35);
  transform: rotate(-11deg); transform-origin: 100% 100%; pointer-events: none; transition: scale .9s var(--ez); }
.z8-c:nth-child(3) .z8-stamp { transform: rotate(-7deg); }
.z8-c:nth-child(4) .z8-stamp { transform: rotate(-13deg); }
.q8.at1 .z8-stamp { scale: .46; }
body.present .scene.is-in .z8-stamp { animation: wowStamp .44s cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(1.3s + var(--i) * .6s); }
@keyframes wowStamp { 0% { opacity: 0; scale: 2.8; } 55% { opacity: 1; scale: .9; } 78% { scale: 1.05; } 100% { opacity: 1; scale: 1; } }
.q8.at1 .z8-stamp { animation: none !important; }
body.present .scene.is-in .z8-im { animation: wowThud .32s cubic-bezier(.3, 0, .4, 1) both; animation-delay: calc(1.54s + var(--i) * .6s); }
@keyframes wowThud { 0%, 100% { translate: 0 0; } 35% { translate: 0 calc(var(--u) * .35); } }
body.safe .z8-stamp, body.safe .z8-im { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .z8-stamp, .z8-im { animation: none !important; } }

/* ---------- 11 · phòng soi: khung ngắm + tia quét trên ảnh thật ---------- */
.wow-vf { position: absolute; inset: 4%; z-index: 2; pointer-events: none; }
.wow-vf i { position: absolute; width: 13%; height: 8%; border: 0 solid rgba(207, 224, 108, .9); }
.wow-vf i:nth-child(1) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
.wow-vf i:nth-child(2) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
.wow-vf i:nth-child(3) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
.wow-vf i:nth-child(4) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; opacity: 0; }
.wow-scan { position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(207, 224, 108, .06) 50%, rgba(207, 224, 108, .32) 94%, rgba(240, 250, 180, .95) 100%); mix-blend-mode: screen; }
.wow-scan.is-on { animation: wowScan 1.15s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes wowScan { 0% { opacity: 1; transform: translateY(-100%); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(455%); } }
.cn11-mk::before { content: ''; position: absolute; inset: -55%; border-radius: 50%; border: 2px solid rgba(207, 224, 108, .7); opacity: 0; }
body.present:not(.safe) .q11 .cn11-mk::before { animation: wowPing 1.9s cubic-bezier(.2, .7, .3, 1) .6s infinite; }
@keyframes wowPing { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }
body.safe .wow-scan { display: none; }

/* ---------- 14 · kết: câu chốt + mã QR ---------- */
.cn14-s li { transition: opacity .8s var(--ez), transform 1s var(--ez), text-shadow 1.4s var(--ez); }
body.present:not(.safe) .cn14-s li.is-on { animation: wowLine 1.4s var(--ez) both; }
@keyframes wowLine { 0% { text-shadow: 0 0 calc(var(--u) * 2.4) rgba(255, 246, 214, .55); } 100% { text-shadow: 0 0 0 rgba(255, 246, 214, 0); } }
.cn14-qr { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 40.2); display: flex; align-items: center; gap: calc(var(--u) * 1.2); opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ez), transform 1s var(--ez); }
.cn14-qr.is-on { opacity: 1; transform: none; }
.cn14-qr img { width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); border-radius: calc(var(--u) * .5); box-shadow: 0 0 0 calc(var(--u) * .25) rgba(242, 237, 225, .12), 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(0, 0, 0, .45); }
.cn14-qr p { display: grid; gap: .2em; }
.cn14-qr b { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.cn14-qr span { font-size: var(--t-xs); color: var(--lime); letter-spacing: .01em; }