/* ============================================================
   BỘ CHẠY THIỆP DÙNG CHUNG — phần giao diện chung cho 5 mẫu
   Mỗi mẫu tự đặt màu qua biến CSS (khai báo trong index.html của mẫu):
     --nen, --chu, --chu-phu, --nhan, --tren-nhan, --vien, --the (nền thẻ),
     --phu-toi (lớp phủ hộp thoại), --rem (màu rèm che ảnh), --font-doc
   Hiệu ứng chỉ dùng transform + opacity; tắt hết khi prefers-reduced-motion.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.is-locked{overflow:hidden}
img,picture{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--nhan);outline-offset:3px}
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* ---------- XUẤT HIỆN KHI CUỘN (chỉ khi JS chạy: .js) ---------- */
.js [data-r]{opacity:0;transition:opacity .9s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s);will-change:opacity,transform}
.js [data-r="up"]{transform:translate3d(0,32px,0)}
.js [data-r="down"]{transform:translate3d(0,-26px,0)}
.js [data-r="left"]{transform:translate3d(-36px,0,0)}
.js [data-r="right"]{transform:translate3d(36px,0,0)}
.js [data-r="zoom"]{transform:scale(.9)}
.js [data-r="zoom-out"]{transform:scale(1.1)}
.js [data-r="tilt"]{transform:perspective(900px) rotateX(22deg) translate3d(0,30px,0);transform-origin:50% 100%}
.js [data-r="swing"]{transform:perspective(900px) rotateY(-24deg);transform-origin:0 50%}
.js [data-r].in{opacity:1;transform:none}

/* rèm mở ảnh: tấm che trượt đi (scaleX), ảnh thu từ 1.18 về 1 */
.rem{position:relative;overflow:hidden}
.js .rem::after{content:"";position:absolute;inset:-1px;z-index:2;background:var(--rem,var(--nen));transform-origin:100% 50%;
  transition:transform 1.25s var(--ease-io) var(--d,0s);pointer-events:none}
.js .rem.rem-doc::after{transform-origin:50% 0}
.js .rem img{transform:scale(1.18);transition:transform 1.9s var(--ease) var(--d,0s)}
.js .rem.in::after{transform:scaleX(0)}
.js .rem.rem-doc.in::after{transform:scaleY(0)}
.js .rem.in img{transform:none}

/* chữ tách từng ký tự / từng từ */
.js [data-split] .sp{display:inline-block;opacity:0;transform:translate3d(0,.55em,0) rotate(5deg);
  transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0s) + var(--i) * 45ms)}
.js [data-split].in .sp{opacity:1;transform:none}
[data-split] .sp-gap{display:inline-block;width:.28em}
[data-split] .sp-tu{display:inline-block;white-space:nowrap}

/* thị sai: lớp trong của ảnh lớn */
[data-px]{will-change:transform}

/* ---------- NÚT NỔI: NHẠC + TỰ CUỘN ---------- */
.fab{position:fixed;right:calc(14px + env(safe-area-inset-right));z-index:85;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;gap:3px;padding:0;border:1px solid var(--fab-vien,rgba(255,255,255,.6));border-radius:50%;cursor:pointer;
  background:var(--fab-nen,var(--nhan));color:var(--fab-chu,var(--tren-nhan));box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transform:translateZ(0);transition:opacity .4s,transform .4s var(--ease)}
.fab[hidden]{display:none}
.fab-nhac{bottom:calc(20px + env(safe-area-inset-bottom))}
.fab-cuon{bottom:calc(74px + env(safe-area-inset-bottom));background:var(--fab-nen-2,rgba(255,255,255,.92));color:var(--fab-chu-2,var(--nhan));border-color:var(--vien)}
.fab-nhac i{display:block;width:3px;height:5px;border-radius:2px;background:currentColor;transform-origin:50% 100%}
.fab-nhac.is-on i{animation:eq .9s ease-in-out infinite}
.fab-nhac.is-on i:nth-child(2){animation-delay:.18s}
.fab-nhac.is-on i:nth-child(3){animation-delay:.36s}
.fab-nhac.is-on i:nth-child(4){animation-delay:.54s}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(3.2)}}
.fab-nhac:not(.is-on)::after{content:"";position:absolute;width:26px;height:1.5px;background:currentColor;transform:rotate(-45deg);opacity:.8}
.fab svg{width:16px;height:16px}
.fab-cuon .i-dung{display:none}
.fab-cuon.is-on .i-chay{display:none}
.fab-cuon.is-on .i-dung{display:block}
@media(min-width:600px){.fab{right:auto;left:calc(50% + 240px + 16px)}}

/* ---------- HỘP THOẠI ---------- */
.hop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;
  background:var(--phu-toi,rgba(20,14,12,.72));opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.hop.open{opacity:1;visibility:visible}
.hop-the{position:relative;width:100%;max-width:400px;max-height:88vh;overflow-y:auto;padding:30px 22px 24px;border-radius:var(--bo,14px);
  background:var(--the,#fff);color:var(--chu);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);transform:translate3d(0,24px,0) scale(.97);
  transition:transform .5s var(--ease)}
.hop.open .hop-the{transform:none}
.hop-dong{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;background:transparent;
  font-size:24px;line-height:1;color:var(--chu-phu)}

/* ---------- QUÀ MỪNG (dùng chung) ---------- */
.qua-tk{margin:0 0 14px;padding:18px 16px;border:1px solid var(--vien);border-radius:calc(var(--bo,14px) - 4px);text-align:center;background:var(--nen)}
.qua-tk h4{margin:0;font-family:var(--font-doc);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-phu)}
.qua-qr{width:150px;height:150px;margin:12px auto;padding:10px;border-radius:8px;background:#fff;border:1px solid var(--vien)}
.qua-qr svg{width:100%;height:100%;display:block}
.qua-so{margin:4px 0 0;font-family:var(--font-doc);font-size:20px;font-weight:600;letter-spacing:.08em;color:var(--chu);font-variant-numeric:tabular-nums}
.qua-ten{margin:2px 0 0;font-family:var(--font-doc);font-size:15px;color:var(--chu-phu)}
.nut-chep{margin-top:10px;padding:9px 20px;border:1px solid var(--nhan);border-radius:999px;cursor:pointer;background:transparent;
  font-family:var(--font-doc);font-size:14px;color:var(--nhan)}
.qua-ghichu{margin:6px 0 0;font-family:var(--font-doc);font-size:13px;line-height:1.5;color:var(--chu-phu);text-align:center}

/* ---------- XEM ẢNH LỚN ---------- */
.lb{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(10,8,7,.94);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;touch-action:none}
.lb.open{opacity:1;visibility:visible}
.lb-khung{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-anh{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;
  transition:transform .45s var(--ease),opacity .3s;transform-origin:50% 50%;cursor:zoom-in}
.lb.zoomed .lb-anh{cursor:grab;transition:transform .08s linear}
.lb-anh.chuyen{opacity:0;transform:scale(.96)}
.lb button{position:absolute;z-index:2;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.12);
  color:#fff;font-size:24px;line-height:1;-webkit-tap-highlight-color:transparent}
.lb-dong{top:calc(12px + env(safe-area-inset-top));right:12px}
.lb-truoc{left:10px;top:50%;margin-top:-22px}
.lb-sau{right:10px;top:50%;margin-top:-22px}
.lb-dem{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));margin:0;text-align:center;font:14px/1.4 system-ui,sans-serif;
  letter-spacing:.14em;color:rgba(255,255,255,.8)}
.lb-goiy{position:absolute;left:16px;top:calc(22px + env(safe-area-inset-top));margin:0;font:13px/1.4 system-ui,sans-serif;color:rgba(255,255,255,.6)}
[data-full]{cursor:zoom-in}

/* ---------- THÔNG BÁO NHỎ ---------- */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:99;max-width:min(88vw,360px);padding:11px 20px;
  border-radius:999px;background:rgba(30,24,22,.94);color:#fff;font:15px/1.5 var(--font-doc,system-ui);text-align:center;opacity:0;
  pointer-events:none;transform:translate3d(-50%,14px,0);transition:opacity .3s,transform .4s var(--ease)}
.toast.show{opacity:1;transform:translate3d(-50%,0,0)}

/* ---------- PHÁO HOA KHI MỞ THIỆP + CÁNH HOA RƠI ---------- */
.no{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden}
.no i{position:absolute;display:block;width:1em;height:1em;animation:no cubic-bezier(.15,.65,.3,1) forwards}
.no svg,.roi svg{width:100%;height:100%;display:block}
@keyframes no{0%{transform:translate3d(-50%,-50%,0) scale(.2);opacity:0}12%{opacity:1}75%{opacity:1}
  100%{transform:translate3d(calc(-50% + var(--tx)),calc(-50% + var(--ty)),0) rotate(var(--rot)) scale(1);opacity:0}}
.roi{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.roi i{position:absolute;top:-30px;display:block;width:1em;height:1em;animation:roi linear infinite}
@keyframes roi{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}10%{opacity:.85}
  50%{transform:translate3d(var(--lac,20px),50vh,0) rotate(180deg)}90%{opacity:.7}100%{transform:translate3d(0,108vh,0) rotate(360deg);opacity:0}}

/* ---------- LỜI CHÚC MỚI THÊM ---------- */
.chuc-moi{animation:chucMoi .8s var(--ease) both}
@keyframes chucMoi{from{opacity:0;transform:translate3d(0,-14px,0) scale(.98)}to{opacity:1;transform:none}}

/* ---------- CHÂN THIỆP (gói Miễn phí / Chuẩn — F19-AC4) ---------- */
.chan-thiep{padding:22px 16px calc(30px + env(safe-area-inset-bottom));text-align:center;font-family:var(--font-doc);font-size:13px;color:var(--chu-phu)}
.chan-thiep a{color:inherit;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .js [data-r],.js [data-split] .sp{opacity:1!important;transform:none!important;transition:none!important}
  .js .rem::after{display:none}
  .js .rem img{transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}