/* Một đêm pháo hoa: trời đêm tím than, ánh hồng và vàng; lá thư là giấy ấm trên nền tối. */
:root{
  --night:#0b0718; --night-2:#1a0f33; --ink:#fdf3f6; --muted:#c9b8d6;
  --rose:#ff7aa2; --rose-deep:#e0457b; --gold:#ffd27a; --paper:#fff8f0; --paper-ink:#3b2433;
  --script:"Dancing Script",cursive;
  --display:"Playfair Display",Georgia,serif;
  --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tieu-de:"Quicksand",var(--body); /* tiêu đề lớn */
  --ngay:"Quicksand",var(--body);    /* ngày tháng 20 · 10 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  --nen:radial-gradient(120% 80% at 50% 0%,var(--night-2) 0%,var(--night) 60%);background:var(--night);
  -webkit-tap-highlight-color:transparent;overflow-x:hidden}
body.khoa{overflow:hidden;height:100vh}
[hidden]{display:none!important}

/* Bầu trời: sao + canvas pháo hoa nằm sau mọi thứ */
.sao{position:fixed;inset:0;pointer-events:none;z-index:0;background:var(--nen);background-color:var(--night);transform:translateZ(0)}
.sao i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;animation:lap 3s ease-in-out infinite}
@keyframes lap{50%{opacity:.08}}
#troi,.giay-mau{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.sao-bang{position:absolute;width:140px;height:1.5px;border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));box-shadow:0 0 6px rgba(255,255,255,.6);animation:bang 1.2s ease-out forwards}
@keyframes bang{0%{opacity:0;transform:rotate(148deg) translateX(0) scaleX(.2)}15%{opacity:1}100%{opacity:0;transform:rotate(148deg) translateX(320px) scaleX(1)}}

/* Hiệu ứng hoành tráng cho màn mở đầu: tia sáng xoay nền, chớp sáng, rung máy khi pháo hoa nổ lớn */
.man-tia{position:fixed;inset:0;z-index:1;overflow:hidden;opacity:0;pointer-events:none;transition:opacity 1s}
.man-tia::before{content:"";position:absolute;left:50%;top:38%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
  background:repeating-conic-gradient(var(--rose) 0 4deg,transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 40%);mask:radial-gradient(circle,#000 0,transparent 40%);
  animation:xoay-tia 16s linear infinite}
.man-tia.bat{opacity:.16}
.man-chop{position:fixed;inset:0;z-index:8;background:radial-gradient(circle at 50% 38%,#fff,var(--gold) 60%,transparent 75%);opacity:0;pointer-events:none}
.man-chop.chop{animation:chop-sang .5s ease-out}
@keyframes chop-sang{0%{opacity:var(--do,.55)}100%{opacity:0}}
.giat-may{animation:giat-man .32s ease-out}
@keyframes giat-man{0%{transform:scale(1)}30%{transform:scale(1.018)}100%{transform:scale(1)}}

/* Cánh hoa rơi */
.canh-hoa{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;opacity:0;transition:opacity 3s}
.canh-hoa.hien{opacity:1}
.canh-hoa i{position:absolute;top:-30px;will-change:transform;width:var(--s);height:var(--s);animation:roi-canh var(--t) linear var(--d) infinite}
.canh-hoa i::before{content:"";position:absolute;inset:0;border-radius:150% 0;opacity:.8;
  background:linear-gradient(135deg,#ffd6e2,#ff7aa2 70%);animation:xoay-canh var(--x) ease-in-out infinite alternate}
@keyframes roi-canh{to{transform:translate(var(--dx),calc(100vh + 60px))}}
@keyframes xoay-canh{from{transform:rotate(-20deg) rotateX(0)}to{transform:rotate(200deg) rotateX(170deg)}}

/* Ảnh chibi */
.chibi{display:block;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#ffb3c7,#c9a7ff);
  box-shadow:0 0 0 3px rgba(255,210,122,.85),0 0 30px rgba(255,122,162,.55)}
.chibi img{width:100%;height:100%;object-fit:cover;display:block}
.chibi span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:700 1em var(--script);color:#fff;text-shadow:0 2px 8px rgba(120,20,60,.4)}
.chibi-mo{width:104px;height:104px;margin:0 auto 18px;font-size:48px;animation:noi 4s ease-in-out infinite}
@keyframes noi{50%{transform:translateY(-6px)}}

/* Link chung: chọn người */
.chon{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px 16px;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,rgba(42,22,80,.92),rgba(11,7,24,.96) 65%);overflow-y:auto;transition:opacity .5s,transform .5s}
.chon.an{opacity:0;transform:scale(1.04);pointer-events:none}
.chon h1{font-family:var(--tieu-de);font-weight:700;font-size:clamp(28px,8vw,40px);line-height:1.2;margin:12px 0 6px}
.chon p{margin:0;color:var(--muted)}
.ds-chon{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px;margin:34px auto 34px;max-width:380px}
.mot-nguoi{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink);text-decoration:none;
  opacity:0;transform:translateY(20px) scale(.9);animation:hien-nguoi .7s cubic-bezier(.2,1.4,.4,1) forwards}
.mot-nguoi .chibi{width:min(34vw,128px);aspect-ratio:1;font-size:min(16vw,60px);transition:transform .3s,box-shadow .3s}
.mot-nguoi b{font:700 26px var(--script);color:var(--rose)}
.mot-nguoi:hover .chibi,.mot-nguoi:focus-visible .chibi{transform:scale(1.07) rotate(-3deg);box-shadow:0 0 0 3px var(--gold),0 0 45px rgba(255,210,122,.8)}
.mot-nguoi:nth-child(even):hover .chibi{transform:scale(1.07) rotate(3deg)}
@keyframes hien-nguoi{to{opacity:1;transform:none}}
body.roi-di .mot-nguoi:not(.chon-roi){opacity:0;transform:scale(.8);transition:.4s;animation:none}
.mot-nguoi.chon-roi .chibi{transform:scale(1.25);box-shadow:0 0 0 4px var(--gold),0 0 70px rgba(255,210,122,1)}
body.dang-chon{overflow:hidden}
body.dang-chon main{visibility:hidden}
main{position:relative;z-index:2}
section{min-height:100vh;padding:72px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.khung{width:100%;max-width:520px}

/* Màn mở đầu */
#mo-dau{position:relative;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none}
.mo-dau-chu{transition:opacity .8s,transform .8s}
.mo-dau-chu.an{opacity:0;transform:translateY(-12px);pointer-events:none}
.nho{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.mo-dau-chu h1{font-family:var(--tieu-de);font-weight:700;font-size:clamp(28px,8vw,44px);line-height:1.2;margin:14px 0 6px}
.mo-dau-chu>.nho,.chon .khung>.nho{display:inline-block;font:700 15px/1 var(--ngay);letter-spacing:.14em;text-transform:none;color:var(--gold);
  padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}

.mo-dau-chu h1 em{font-family:var(--script);font-style:normal;color:var(--rose);font-size:1.25em;display:block;margin-top:4px}
.cham{margin-top:40px;display:inline-flex;flex-direction:column;align-items:center;gap:14px;color:var(--gold);font-size:14px}
.cham .vong{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--gold);position:relative}
.cham .vong::before,.cham .vong::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--gold);animation:loan 2s ease-out infinite}
.cham .vong::after{animation-delay:1s}
.cham .vong span{position:absolute;inset:22px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold)}
@keyframes loan{to{transform:scale(2.2);opacity:0}}
.keo-xuong{position:absolute;left:0;right:0;bottom:28px;text-align:center;color:var(--muted);font-size:14px;opacity:0;transition:opacity 1s;pointer-events:none}
.keo-xuong.hien{opacity:1;pointer-events:auto}
.keo-xuong a{color:inherit;text-decoration:none;display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.keo-xuong b{display:block;font-size:20px;animation:nay 1.6s ease-in-out infinite}
@keyframes nay{50%{transform:translateY(6px)}}

/* Lá thư */
.thu{background:var(--paper);color:var(--paper-ink);border-radius:18px;padding:34px 26px 30px;
  box-shadow:0 30px 80px -20px rgba(255,122,162,.35),0 0 0 1px rgba(255,255,255,.06);position:relative}
.thu::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(224,69,123,.25);border-radius:12px;pointer-events:none}
.thu .chao{font-family:var(--script);font-size:34px;color:var(--rose-deep);margin:0 0 14px;line-height:1.2}
.thu p{margin:0 0 14px;font-size:16.5px}
.thu .anh-rieng{width:100%;border-radius:12px;margin:6px 0 18px;display:block}
.thu .ky{text-align:right;margin-top:22px;font-size:14px;color:#8a6a7c}
.thu .ky b{display:block;font-family:var(--script);font-size:28px;color:var(--rose-deep);font-weight:700}
.hien-dan{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.hien-dan.ro{opacity:1;transform:none}
.thu p.hien-dan.ro{transition:none}
.thu .ch{opacity:0;transition:opacity .35s ease}
.thu.viet .ch{opacity:1;filter:none}
.thu.hien-het .ch,.thu.hien-het .hien-dan{transition:none!important;opacity:1;filter:none;transform:none}
.thu.viet .hien-dan:not(p){opacity:1;transform:none}

/* Phong thư */
.phong-bi{position:relative;width:100%;aspect-ratio:1.45;perspective:1400px;cursor:pointer;
  opacity:0;transform:translateY(40px) rotate(-4deg);transition:opacity 1s,transform 1.2s cubic-bezier(.2,1.3,.4,1)}
.phong-bi.hien{opacity:1;transform:none}
.phong-bi.hien:not(.mo){animation:dua 3.2s ease-in-out 1.2s infinite}
@keyframes dua{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg) translateY(-4px)}}
.phong-bi.xong{aspect-ratio:auto;cursor:default}
.pb-vo{position:absolute;left:0;right:0;top:0;height:100%;transition:opacity .7s,transform .8s}
.phong-bi.xong .pb-vo{opacity:0;transform:translateY(80px) scale(.94);pointer-events:none}
.pb-sau{position:absolute;inset:0;border-radius:14px;background:linear-gradient(#d98ba2,#efb3c3);
  box-shadow:0 30px 80px -20px rgba(255,122,162,.5)}
.pb-truoc{position:absolute;inset:0;z-index:2;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#ffe6ed,#f8c6d4);clip-path:polygon(0 0,50% 50%,100% 0,100% 100%,0 100%)}
.pb-truoc::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#ffdbe5,#fbd0dc);
  clip-path:polygon(0 100%,50% 50%,100% 100%)}
.pb-gui{position:absolute;left:0;right:0;bottom:7%;text-align:center;color:#a54a69;font-size:14px;z-index:1}
.pb-gui b{display:block;font:700 clamp(24px,7vw,32px)/1.1 var(--script);color:var(--rose-deep)}
.pb-nap{position:absolute;left:0;right:0;top:0;height:52%;z-index:3;transform-origin:50% 0;
  background:linear-gradient(180deg,#f3aec1,#ffd5e0);clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .9s cubic-bezier(.45,0,.2,1)}
.phong-bi.mo .pb-nap{transform:rotateX(180deg)}
.phong-bi.lat .pb-nap{z-index:0;filter:brightness(.88)}
.pb-dau{position:absolute;left:50%;top:51%;width:62px;height:62px;margin:-31px 0 0 -31px;z-index:4;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#ff8fae,#c8285e 58%,#86113e);color:#ffd9e4;font-size:26px;line-height:62px;padding:0;
  box-shadow:0 5px 12px rgba(80,0,30,.45),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 2px 4px rgba(255,255,255,.35);
  text-shadow:0 -1px 0 rgba(0,0,0,.3);transition:transform .45s,opacity .45s}
.pb-dau::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px dashed rgba(255,220,230,.55)}
.phong-bi.hien:not(.mo) .pb-dau{animation:dap 1.6s ease-in-out infinite}
@keyframes dap{50%{transform:scale(1.1)}}
.phong-bi.mo .pb-dau{transform:scale(1.6) rotate(25deg);opacity:0;pointer-events:none}
.phong-bi .thu{position:absolute;left:5%;right:5%;top:5%;height:90%;overflow:hidden;z-index:1;
  transition:transform 1s cubic-bezier(.3,.9,.3,1)}
.phong-bi.rut .thu{transform:translateY(-62%)}
.phong-bi.xong .thu{position:relative;left:auto;right:auto;top:auto;height:auto;overflow:visible;transform:none;z-index:5;transition:none}
.pb-goi-y{text-align:center;color:var(--gold);font-size:14px;margin:22px 0 0;transition:opacity .5s}
.pb-goi-y.an{opacity:0}

/* Tiêu đề phần */
.tieu-de{text-align:center;margin-bottom:8px}
.tieu-de h2{font-family:var(--tieu-de);font-weight:700;font-size:clamp(26px,7vw,36px);margin:8px 0 6px;line-height:1.2}
.tieu-de p{margin:0;color:var(--muted);font-size:15px}

.the{background:var(--paper);color:var(--paper-ink);border-radius:20px;padding:28px 24px 22px;width:100%;max-width:440px}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;border:0;
  font:600 15px var(--body);cursor:pointer;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;
  box-shadow:0 10px 30px -8px rgba(224,69,123,.6)}
.nut:active{transform:scale(.97)}

/* Hộp quà */
#qua .khung{text-align:center}
.hop{position:relative;width:170px;height:170px;margin:40px auto 10px;cursor:pointer;background:none;border:0;padding:0}
.hop .than-hop{position:absolute;left:10px;right:10px;bottom:0;height:110px;border-radius:8px;
  background:linear-gradient(160deg,#ff8fb1,#d93d72);box-shadow:inset 0 -14px 0 rgba(0,0,0,.12),0 20px 50px -10px rgba(255,122,162,.5)}
.hop .nap{position:absolute;left:0;right:0;top:34px;height:36px;border-radius:8px;background:linear-gradient(160deg,#ffa3c0,#e04d80);
  box-shadow:0 6px 0 rgba(0,0,0,.1);transition:transform .7s cubic-bezier(.3,1.6,.5,1);z-index:2}
.hop .ruy-bang-doc{position:absolute;left:50%;width:24px;margin-left:-12px;top:34px;bottom:0;background:var(--gold);z-index:3;transition:opacity .3s}
.hop .no{position:absolute;left:50%;top:6px;width:64px;height:34px;margin-left:-32px;z-index:3;transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.hop .no::before,.hop .no::after{content:"";position:absolute;top:0;width:30px;height:30px;border:7px solid var(--gold);border-radius:50% 50% 0 50%}
.hop .no::before{left:0;transform:rotate(-20deg)}
.hop .no::after{right:0;transform:scaleX(-1) rotate(-20deg)}
.hop.lac-hop{animation:rung .8s ease-in-out}
@keyframes rung{10%,50%,90%{transform:rotate(-7deg)}30%,70%{transform:rotate(7deg)}100%{transform:none}}
.hop.mo .nap,.hop.mo .no{transform:translateY(-70px) rotate(-18deg);opacity:0;transition:transform .6s,opacity .35s .15s}
.hop.mo .ruy-bang-doc{opacity:0}
.hop .anh-sang{position:absolute;left:50%;bottom:90px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  box-shadow:0 0 60px 40px rgba(255,210,122,.0);transition:box-shadow 1s}
.hop.mo .anh-sang{box-shadow:0 0 90px 60px rgba(255,210,122,.55)}
.qua-hien{max-width:380px;margin:20px auto 0}
.qua-hien .nho{color:#a07a8f}
.qua-hien .ten-qua{font-family:var(--display);font-size:24px;font-weight:600;margin:8px 0 0;line-height:1.35}
.qua-hien{animation:bat-len .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes bat-len{from{opacity:0;transform:translateY(30px) scale(.9)}}
.the-cao{position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 20px 60px -15px rgba(255,210,122,.55)}
.lop-cao{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .8s}
.lop-cao.xong{opacity:0;pointer-events:none}
.cao-goi-y{color:var(--gold);font-size:14px;margin:14px 0 0}

/* Kết */
#ket{text-align:center}
#ket h2{font-family:var(--ngay);font-weight:700;font-size:clamp(34px,10vw,56px);line-height:1.1;margin:10px 0;
  background:linear-gradient(100deg,#fdf3f6 35%,#ffd27a 45%,#fff 50%,#ffd27a 55%,#fdf3f6 65%);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:anh-kim 4s linear infinite}
@keyframes anh-kim{from{background-position:100% 0}to{background-position:0 0}}
#ket h2 em{font-family:var(--script);font-style:normal;color:var(--rose);-webkit-text-fill-color:var(--rose);display:block;font-size:.8em}
#ket .anh-chung{width:100%;border-radius:16px;margin:20px 0}
#ket .nut{margin-top:28px}

/* Nút nhạc */
.nut-nhac{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:9;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(20,10,40,.5);color:var(--ink);font-size:18px;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.nut-nhac.tat{opacity:.5;text-decoration:line-through}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sao i,.cham .vong::before,.cham .vong::after,.keo-xuong b,.phong-bi,.pb-dau,#ket h2,.chibi-mo,.mot-nguoi{animation:none!important}
  .mot-nguoi{opacity:1;transform:none}
  .man-tia,.giat-may{animation:none!important}
}

/* ================= Sticker kéo thả ================= */
.mo-dau-chu{position:relative}
#thu .khung{position:relative}
.sticker{position:absolute;z-index:6;padding:7px 14px;border-radius:999px;border:2px solid #fff;background:var(--rose);color:#fff;
  font:700 13px/1.1 var(--body);white-space:nowrap;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  rotate:var(--xoay);box-shadow:0 6px 16px rgba(0,0,0,.35);animation:dan .6s cubic-bezier(.2,1.6,.4,1) both;transition:scale .15s,box-shadow .15s}
.sticker.keo{cursor:grabbing;scale:1.12;box-shadow:0 16px 30px rgba(0,0,0,.45)}
@keyframes dan{from{opacity:0;scale:2.2}}
#thu .sticker{opacity:0;pointer-events:none;animation:none}
#thu .phong-bi.xong ~ .sticker{opacity:1;pointer-events:auto;animation:dan .6s cubic-bezier(.2,1.6,.4,1) both}

/* ================= Băng chữ chạy ================= */
.bang-chu{position:fixed;left:0;right:0;bottom:0;z-index:6;height:150px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1s}
.bang-chu.hien{opacity:1}
.bang{position:absolute;left:-10%;right:-10%;top:50%;padding:11px 0;white-space:nowrap;overflow:hidden;background:var(--rose);color:#fff;
  font:800 19px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.bang-1{transform:translateY(-50%) rotate(-4deg);z-index:1}
.bang-2{transform:translateY(-50%) rotate(3deg);background:var(--gold);color:#2a1630}
.chay{display:inline-flex;gap:18px;align-items:center;padding-right:18px;animation:chay 40s linear infinite}
.bang-2 .chay{animation-direction:reverse;animation-duration:48s}
.chay i{font-style:normal;opacity:.75}
@keyframes chay{to{transform:translateX(-50%)}}

/* ================= Thẻ nhân vật ================= */
#vibe .khung{max-width:380px}
.the-vibe{--tv-nen:#1c1030;--tv-chu:#fff;--tv-ray:rgba(255,255,255,.14);--tv-vien:linear-gradient(135deg,#ff9de2,#9ff3ff,#ffd27a,#ff9de2);
  position:relative;margin:28px auto 0;width:min(100%,310px);aspect-ratio:5/7.3;border-radius:22px;padding:4px;cursor:pointer;background:var(--tv-vien);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s ease;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 50px -10px var(--rose);animation:lac-the 6s ease-in-out infinite}
.the-vibe.nghieng{animation:none;transition:transform .08s}
@keyframes lac-the{0%,100%{transform:perspective(900px) rotateY(-9deg) rotateX(4deg)}50%{transform:perspective(900px) rotateY(9deg) rotateX(-3deg)}}
.tv-trong{position:relative;height:100%;border-radius:18px;overflow:hidden;background:var(--tv-nen);color:var(--tv-chu);padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px}
.tv-dau{display:flex;justify-content:space-between;align-items:center;font:700 10px var(--body);letter-spacing:.14em;opacity:.9}
.tv-hiem{padding:3px 9px;border-radius:6px;background:var(--gold);color:#1a0f2a;letter-spacing:.06em;font-size:12px}
.tv-emoji{font-size:20px;letter-spacing:0}
.tv-anh{flex:1;min-height:0;border-radius:14px;overflow:hidden;border:2px solid var(--tv-ray)}
.tv-anh img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.tv-ten{font:800 28px/1.05 var(--display);margin-top:3px}
.tv-danh-hieu{font-size:13px;color:var(--rose);font-weight:700;margin-top:-3px}
.tv-chi-so{display:grid;gap:6px;margin-top:2px}
.cs{display:grid;grid-template-columns:1fr auto;gap:3px 8px;font-size:11.5px;line-height:1.25;align-items:center}
.cs b{font:800 13px var(--body)}
.cs i{grid-column:1/-1;height:6px;border-radius:9px;background:var(--tv-ray);overflow:hidden}
.cs u{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--rose),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.2,1,.3,1)}
.the-vibe.mo .cs u{transform:scaleX(1)}
.cs.vo-cuc u{background:linear-gradient(90deg,#ff7aa2,#ffd27a,#7fe0b0,#8fe3ff,#c9a7ff,#ff7aa2);background-size:200% 100%;animation:cau-vong 2s linear infinite}
.cs.vo-cuc b{font-size:17px;line-height:.8}
@keyframes cau-vong{to{background-position:-200% 0}}
.tv-bong{position:absolute;inset:4px;border-radius:18px;pointer-events:none;opacity:.22;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.8),transparent 45%),
    linear-gradient(115deg,transparent 30%,rgba(255,157,226,.5) 45%,rgba(159,243,255,.5) 55%,transparent 70%)}
.the-vibe.nghieng .tv-bong{opacity:.55}

/* ================= 1. Y2K Holo (Ngân) ================= */
body.kieu-holo{--night:#0c0a1d;--night-2:#2a1f5c;--ink:#f4f0ff;--muted:#b9b0e0;--rose:#c7a6ff;--rose-deep:#7c4dff;--gold:#9ff3ff;
  --paper:#f7f4ff;--paper-ink:#2a1f4a;--display:"Quicksand",sans-serif;--script:"Quicksand",sans-serif;--tieu-de:"Quicksand",sans-serif;
  --nen:radial-gradient(55% 35% at 12% 8%,rgba(159,243,255,.2),transparent 70%),radial-gradient(50% 40% at 92% 28%,rgba(255,157,226,.2),transparent 70%),
    radial-gradient(120% 80% at 50% 0%,var(--night-2),var(--night) 62%);background:var(--night)}
.kieu-holo .mo-dau-chu h1 em,.kieu-holo .thu .chao,.kieu-holo .pb-gui b,.kieu-holo .tv-ten{
  background:linear-gradient(90deg,#ff9de2,#9ff3ff,#c7a6ff,#ff9de2);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cau-vong 5s linear infinite}
.kieu-holo .thu .chao{background-image:linear-gradient(90deg,#d63fb0,#2bb3d6,#7c4dff,#d63fb0)}
.kieu-holo .mo-dau-chu h1{font-weight:700;font-size:clamp(26px,7.4vw,40px);line-height:1.2}
.kieu-holo .mo-dau-chu h1 em{font-weight:700;font-size:1.3em;margin-top:6px}
.kieu-holo h2,.kieu-holo #ket h2{font-weight:700;letter-spacing:-.01em}
.kieu-holo .tieu-de h2{font-size:clamp(24px,6.6vw,34px)}
.kieu-holo #ket h2{font-size:clamp(30px,9vw,50px)}
.kieu-holo #ket h2 em{font-size:.55em;margin-bottom:8px}
.kieu-holo .thu{background:linear-gradient(135deg,#fdfbff,#f1ecff 55%,#eafbff)}
.kieu-holo .thu::before{border:2px solid transparent;background:linear-gradient(120deg,#ff9de2,#9ff3ff,#c7a6ff) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.kieu-holo .thu .chao{font-weight:700;font-size:30px;line-height:1.25}
.kieu-holo .thu .ky b{font:700 26px var(--display);color:var(--rose-deep)}
.kieu-holo .pb-sau{background:linear-gradient(#9c86e0,#c4b2f5)}
.kieu-holo .pb-truoc{background:linear-gradient(160deg,#f5f1ff,#d9ccff)}
.kieu-holo .pb-truoc::before{background:linear-gradient(0deg,#ece5ff,#e1d8ff)}
.kieu-holo .pb-nap{background:linear-gradient(180deg,#c3afff,#ece4ff)}
.kieu-holo .pb-dau{background:radial-gradient(circle at 35% 30%,#fff,#d6def0 40%,#8d97ba 78%);color:#7c4dff;text-shadow:none}
.kieu-holo .pb-gui{color:#7a6aa8}
.kieu-holo .pb-gui b{font:700 28px/1.15 var(--display);background-image:linear-gradient(90deg,#d63fb0,#2bb3d6,#7c4dff,#d63fb0)}
.kieu-holo .sticker{background:linear-gradient(120deg,#ffc4f0,#9ff3ff,#d9c6ff);color:#2a1f4a;font-family:var(--display);font-size:14px}
.kieu-holo .bang-1{background:linear-gradient(90deg,#ffc4f0,#9ff3ff,#d9c6ff,#ffc4f0);color:#2a1f4a}
.kieu-holo .bang-2{background:#120e2b;color:#9ff3ff;border-block:1px solid rgba(159,243,255,.4)}
.kieu-holo .canh-hoa i::before{border-radius:0;opacity:.95;background:linear-gradient(135deg,#fff,#9ff3ff 45%,#ffc4f0);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.kieu-holo .the-vibe{--tv-nen:linear-gradient(165deg,#221a4d,#140f30);--tv-vien:linear-gradient(135deg,#ffc4f0,#9ff3ff,#c7a6ff,#ffc4f0)}
.kieu-holo .tv-danh-hieu{color:#9ff3ff}
.kieu-holo .nut{background:linear-gradient(120deg,#c7a6ff,#7ef0ff);color:#1d1640;box-shadow:0 10px 30px -8px rgba(126,240,255,.6)}
.kieu-holo .chibi{box-shadow:0 0 0 3px #e9e1ff,0 0 34px rgba(159,243,255,.6)}

/* ================= 2. Neon Acid (Thảo) ================= */
body.kieu-neon{--night:#060606;--night-2:#111;--ink:#f2f2f2;--muted:#9a9a9a;--rose:#ff3df2;--rose-deep:#ff1fa8;--gold:#c6ff3d;
  --paper:#0f0f0f;--paper-ink:#ececec;--display:"Bricolage Grotesque",sans-serif;--script:"M PLUS Rounded 1c",sans-serif;--tieu-de:"M PLUS Rounded 1c",sans-serif;--body:"Space Mono",ui-monospace,monospace;
  font-size:15px;background:#060606;
  --nen:linear-gradient(rgba(198,255,61,.055) 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,rgba(198,255,61,.055) 1px,transparent 1px) 0 0/34px 34px}
.kieu-neon .mo-dau-chu h1{font-weight:800;letter-spacing:-.01em;font-size:clamp(27px,7.6vw,42px);line-height:1.15}
.kieu-neon .mo-dau-chu h1 em{color:var(--gold);font-size:1.2em;margin-top:10px;text-shadow:0 0 18px rgba(198,255,61,.7)}
.kieu-neon h2,.kieu-neon .tieu-de h2{font-weight:800;letter-spacing:-.01em}
.kieu-neon #ket h2{font-weight:700}
.kieu-neon #ket h2 em{-webkit-text-fill-color:var(--rose);text-shadow:0 0 22px rgba(255,61,242,.6)}
.kieu-neon .thu{background:#0f0f0f;border:2px solid var(--gold);border-radius:6px;box-shadow:8px 8px 0 var(--rose)}
.kieu-neon .thu::before{display:none}
.kieu-neon .thu .chao{font-weight:800;font-size:30px;color:var(--gold)}
.kieu-neon .thu p{font-size:14.5px;line-height:1.7}
.kieu-neon .thu .ky{color:#888}
.kieu-neon .thu .ky b{font-weight:800;font-size:26px;color:var(--rose)}
.kieu-neon .pb-sau{background:#151515;box-shadow:0 0 0 1.5px #c6ff3d,0 0 22px rgba(198,255,61,.4)}
.kieu-neon .pb-truoc{background:linear-gradient(160deg,#232323,#171717)}
.kieu-neon .pb-truoc::before{background:#1e1e1e}
.kieu-neon .pb-nap{background:linear-gradient(180deg,#2b2b2b,#1b1b1b)}
.kieu-neon .pb-dau{background:radial-gradient(circle at 35% 30%,#e5ff9a,#c6ff3d 55%,#8fbf10);color:#060606;text-shadow:none;box-shadow:0 0 22px rgba(198,255,61,.6)}
.kieu-neon .pb-dau::before{border-color:rgba(0,0,0,.35)}
.kieu-neon .pb-gui{color:#8a8a8a}
.kieu-neon .pb-gui b{font-weight:800;color:var(--gold)}
.kieu-neon .sticker{border-radius:6px;border-color:#000;background:var(--gold);color:#000;box-shadow:4px 4px 0 var(--rose);text-transform:uppercase;font-size:12px}
.kieu-neon .sticker:nth-of-type(even){background:var(--rose);color:#fff;box-shadow:4px 4px 0 var(--gold)}
.kieu-neon .bang{font-size:22px;letter-spacing:-.01em}
.kieu-neon .bang-1{background:var(--gold);color:#000}
.kieu-neon .bang-2{background:var(--rose);color:#fff}
.kieu-neon .canh-hoa i::before{border-radius:0;opacity:.9;background:var(--gold);
  clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%)}
.kieu-neon .canh-hoa i:nth-child(odd)::before{background:var(--rose)}
.kieu-neon .the-vibe{--tv-nen:#0d0d0d;--tv-vien:linear-gradient(135deg,#c6ff3d,#ff3df2);border-radius:10px}
.kieu-neon .tv-trong,.kieu-neon .tv-bong{border-radius:7px}
.kieu-neon .tv-ten{font-family:var(--tieu-de);color:var(--gold)}
.kieu-neon .nut{background:var(--gold);color:#000;border-radius:6px;box-shadow:5px 5px 0 var(--rose);font-family:var(--body);text-transform:uppercase}
.kieu-neon .the{border-radius:8px}
.kieu-neon .chibi{box-shadow:0 0 0 3px var(--gold),0 0 34px rgba(255,61,242,.6)}

/* ================= 3. Soft Denim & Daisy (Quyên) ================= */
body.kieu-denim{--night:#0e1b36;--night-2:#2f528f;--ink:#f3f7ff;--muted:#b9cae8;--rose:#ffb3c7;--rose-deep:#3a6fb5;--gold:#ffe08a;
  --paper:#fffdf6;--paper-ink:#23324d;--display:"Fraunces",Georgia,serif;--script:"Fraunces",Georgia,serif;--tieu-de:"Fraunces",Georgia,serif;--body:"Lexend",system-ui,sans-serif;
  --nen:radial-gradient(40% 25% at 20% 12%,rgba(255,255,255,.1),transparent 70%),radial-gradient(35% 22% at 85% 30%,rgba(255,255,255,.07),transparent 70%),
    radial-gradient(120% 80% at 50% 0%,var(--night-2),var(--night) 65%);background:var(--night)}
.kieu-denim .mo-dau-chu h1 em,.kieu-denim #ket h2 em{font-style:italic;font-weight:700;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.kieu-denim .tieu-de h2{font-style:italic}
.kieu-denim .thu{background:repeating-linear-gradient(180deg,transparent 0 27px,#dce8f8 27px 28px),var(--paper);background-position:0 20px;
  padding-left:52px;border-radius:6px}
.kieu-denim .thu::before{inset:0 auto 0 36px;width:0;border:0;border-left:1.5px solid rgba(232,106,146,.4);border-radius:0}
.kieu-denim .phong-bi.xong .thu::after{content:"";position:absolute;top:-13px;left:50%;width:120px;height:28px;margin-left:-60px;
  background:repeating-linear-gradient(45deg,rgba(255,224,138,.92) 0 8px,rgba(255,243,200,.92) 8px 16px);transform:rotate(-3deg);box-shadow:0 2px 5px rgba(0,0,0,.12)}
.kieu-denim .thu .chao{font-style:italic;font-weight:700;font-size:30px;color:#3a6fb5}
.kieu-denim .thu p{line-height:28px;font-size:15.5px}
.kieu-denim .thu .ky b{font:italic 700 26px var(--display);color:#3a6fb5}
.kieu-denim .pb-sau{background:linear-gradient(#5f8cc6,#86aee0)}
.kieu-denim .pb-truoc{background:linear-gradient(160deg,#e0ecfc,#b8d2f2)}
.kieu-denim .pb-truoc::before{background:linear-gradient(0deg,#d3e4f8,#c6dbf5)}
.kieu-denim .pb-nap{background:linear-gradient(180deg,#95bbe8,#d8e7fa)}
.kieu-denim .pb-dau{background:radial-gradient(circle at 35% 30%,#fff6d0,#ffd45e 55%,#e0a417);color:#fff}
.kieu-denim .pb-gui{color:#4f6f9e}
.kieu-denim .pb-gui b{font:italic 700 26px/1.1 var(--display);color:#3a6fb5}
.kieu-denim .sticker{background:var(--paper);color:#23324d;border:2px dashed #8ec5ff;font-weight:600}
.kieu-denim .sticker:nth-of-type(even){background:var(--gold);border-color:#fff}
.kieu-denim .bang{font:italic 700 21px/1 var(--display);text-transform:none;letter-spacing:0}
.kieu-denim .bang-1{background:#8ec5ff;color:#0e1b36}
.kieu-denim .bang-2{background:var(--gold);color:#23324d}
.kieu-denim .canh-hoa i{width:calc(var(--s) * 1.4);height:calc(var(--s) * 1.4)}
.kieu-denim .canh-hoa i::before{border-radius:50%;opacity:.9;
  background:radial-gradient(circle,#ffd45e 0 20%,transparent 22%),repeating-conic-gradient(#fff 0 20deg,transparent 22deg 36deg);
  -webkit-mask:radial-gradient(circle,#000 62%,transparent 64%);mask:radial-gradient(circle,#000 62%,transparent 64%)}
.kieu-denim .the-vibe{--tv-nen:#fffdf6;--tv-chu:#23324d;--tv-ray:rgba(35,50,77,.12);--tv-vien:linear-gradient(135deg,#8ec5ff,#ffe08a,#ffb3c7)}
.kieu-denim .tv-ten{font-style:italic;color:#3a6fb5}
.kieu-denim .tv-danh-hieu{color:#e86a92}
.kieu-denim .cs u{background:linear-gradient(90deg,#8ec5ff,#3a6fb5)}
.kieu-denim .nut{background:var(--gold);color:#23324d;box-shadow:0 10px 30px -8px rgba(255,224,138,.6)}
.kieu-denim .chibi{box-shadow:0 0 0 3px var(--paper),0 0 34px rgba(142,197,255,.6)}

/* ================= 4. Cherry Cola (Quỳnh Anh) ================= */
body.kieu-cherry{--night:#1c070d;--night-2:#4d1022;--ink:#fff1e0;--muted:#e6bdb3;--rose:#ff4d6d;--rose-deep:#d0123c;--gold:#ffc98a;
  --paper:#fff6ea;--paper-ink:#4a1c1c;--display:"Baloo 2",system-ui,sans-serif;--script:"Pacifico",cursive;--tieu-de:"Baloo 2",system-ui,sans-serif;--ngay:"Baloo 2",system-ui,sans-serif;
  --nen:radial-gradient(rgba(255,77,109,.13) 2px,transparent 2.6px) 0 0/26px 26px,radial-gradient(120% 80% at 50% 0%,var(--night-2),var(--night) 65%);
  background:var(--night)}
.kieu-cherry .mo-dau-chu h1,.kieu-cherry h2{font-weight:800}
.kieu-cherry .mo-dau-chu h1 em{font-weight:400;font-size:1.1em;margin-top:8px;text-shadow:3px 3px 0 rgba(255,241,224,.9)}
.kieu-cherry #ket h2 em{font-weight:400;font-size:.65em;margin-bottom:6px}
.kieu-cherry .thu{border:10px solid transparent;border-radius:16px;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,repeating-conic-gradient(#ff4d6d 0 25%,#ffd5dc 0 50%) 0 0/16px 16px border-box}
.kieu-cherry .thu::before{inset:6px;border-color:rgba(208,18,60,.3)}
.kieu-cherry .thu .chao{font-weight:400;font-size:28px;color:var(--rose-deep)}
.kieu-cherry .thu .ky b{font-weight:400;font-size:24px}
.kieu-cherry .pb-sau{background:linear-gradient(#a3162f,#c9284a)}
.kieu-cherry .pb-truoc{background:linear-gradient(160deg,#ff6f88,#e63a5c)}
.kieu-cherry .pb-truoc::before{background:linear-gradient(0deg,#f45574,#ef4a6b)}
.kieu-cherry .pb-nap{background:linear-gradient(180deg,#ff8197,#ff5c79)}
.kieu-cherry .pb-dau{background:radial-gradient(circle at 35% 30%,#fffaf2,#ffe6cc 55%,#e9b98a);color:#d0123c;text-shadow:none}
.kieu-cherry .pb-dau::before{border-color:rgba(208,18,60,.35)}
.kieu-cherry .pb-gui{color:#ffe1e7}
.kieu-cherry .pb-gui b{font-weight:400;color:#fff6ea;text-shadow:2px 2px 0 rgba(120,0,30,.3)}
.kieu-cherry .sticker{background:var(--rose);color:var(--paper);border:3px solid var(--paper);font:800 14px/1.1 var(--display)}
.kieu-cherry .sticker:nth-of-type(even){background:var(--paper);color:var(--rose-deep);border-color:var(--rose)}
.kieu-cherry .bang{font-size:22px;letter-spacing:.01em}
.kieu-cherry .bang-1{background:var(--rose);color:var(--paper)}
.kieu-cherry .bang-2{background:repeating-conic-gradient(#fff6ea 0 25%,#ffd5dc 0 50%) 0 0/18px 18px;color:var(--rose-deep)}
.kieu-cherry .canh-hoa i::before{border-radius:0;opacity:.85;background:linear-gradient(135deg,#ff8fa3,#ff4d6d);
  clip-path:polygon(50% 100%,8% 55%,0 30%,10% 8%,30% 0,50% 14%,70% 0,90% 8%,100% 30%,92% 55%)}
.kieu-cherry .the-vibe{--tv-nen:#fff6ea;--tv-chu:#4a1c1c;--tv-ray:rgba(208,18,60,.12);--tv-vien:repeating-conic-gradient(#ff4d6d 0 25%,#ffd5dc 0 50%) 0 0/16px 16px}
.kieu-cherry .tv-ten{font-weight:800;color:var(--rose-deep)}
.kieu-cherry .tv-danh-hieu{color:#c9733a}
.kieu-cherry .nut{background:var(--rose);border:3px solid var(--paper);box-shadow:0 10px 30px -8px rgba(255,77,109,.7)}
.kieu-cherry .chibi{box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--rose),0 0 34px rgba(255,77,109,.5)}

/* ================= 5. Hello Kitty Cute (Thảo) ================= */
body.kieu-kitty{--night:#45102c;--night-2:#8c2155;--ink:#fff5f9;--muted:#f0b8d2;--rose:#ff8fc4;--rose-deep:#ff2f7b;--gold:#ffd93d;
  --paper:#fffafc;--paper-ink:#7a1f45;--display:"Fredoka",sans-serif;--script:"Caveat",cursive;--tieu-de:"Fredoka",sans-serif;--ngay:"Fredoka",sans-serif;
  --nen:radial-gradient(circle,rgba(255,255,255,.35) 2px,transparent 2.6px) 0 0/30px 30px,radial-gradient(120% 80% at 50% 0%,var(--night-2),var(--night) 62%);
  background:var(--night)}
.kieu-kitty .mo-dau-chu h1{font-weight:600;font-size:clamp(27px,7.6vw,42px);line-height:1.2}
.kieu-kitty .mo-dau-chu h1 em{font-family:var(--script);font-style:normal;color:#fff;font-size:1.5em;margin-top:8px;text-shadow:3px 3px 0 var(--rose-deep)}
.kieu-kitty h2,.kieu-kitty .tieu-de h2{font-weight:600}
.kieu-kitty #ket h2{font-weight:600}
.kieu-kitty #ket h2 em{font-family:var(--script);font-style:normal;-webkit-text-fill-color:#fff;text-shadow:3px 3px 0 var(--rose-deep);font-size:.7em;margin-bottom:6px}
.kieu-kitty .thu{background:var(--paper);border-radius:28px;border:4px solid #fff;box-shadow:0 0 0 4px var(--rose),0 30px 70px -20px rgba(255,47,123,.5)}
.kieu-kitty .thu::before{border:2px dashed rgba(255,47,123,.3);border-radius:20px}
.kieu-kitty .thu .chao{font-size:36px;color:var(--rose-deep)}
.kieu-kitty .thu .ky b{font-size:30px;color:var(--rose-deep)}
.kieu-kitty .pb-sau{background:linear-gradient(#ffb8d6,#ffd3e6)}
.kieu-kitty .pb-truoc{background:linear-gradient(160deg,#fff0f6,#ffd3e6)}
.kieu-kitty .pb-truoc::before{background:linear-gradient(0deg,#ffe4f0,#ffd9ea)}
.kieu-kitty .pb-nap{background:linear-gradient(180deg,#ffc2dd,#fff0f6)}
.kieu-kitty .pb-dau{background:radial-gradient(circle at 35% 30%,#fff,#ff8fc4 45%,#ff2f7b 85%);color:#fff;text-shadow:none;box-shadow:0 0 0 3px #fff,0 6px 18px rgba(255,47,123,.5)}
.kieu-kitty .pb-dau::before{border-color:rgba(255,255,255,.6)}
.kieu-kitty .pb-gui{color:#b2567f}
.kieu-kitty .pb-gui b{color:var(--rose-deep)}
.kieu-kitty .sticker{border-radius:999px;background:#fff;color:var(--rose-deep);border-color:var(--rose);font-weight:700}
.kieu-kitty .sticker:nth-of-type(even){background:var(--rose-deep);color:#fff;border-color:#fff}
.kieu-kitty .bang{font-family:var(--display);font-weight:600}
.kieu-kitty .bang-1{background:#fff;color:var(--rose-deep)}
.kieu-kitty .bang-2{background:var(--rose-deep);color:#fff}
.kieu-kitty .canh-hoa i::before{border-radius:50%;opacity:.9;background:#fff}
.kieu-kitty .canh-hoa i:nth-child(odd)::before{background:var(--rose-deep)}
.kieu-kitty .canh-hoa i:nth-child(3n)::before{background:var(--gold)}
.kieu-kitty .the-vibe{--tv-nen:#fff0f6;--tv-chu:#7a1f45;--tv-ray:rgba(255,47,123,.15);--tv-vien:linear-gradient(135deg,#ff2f7b,#fff,#ff8fc4)}
.kieu-kitty .tv-ten{font-family:var(--display);color:var(--rose-deep)}
.kieu-kitty .tv-danh-hieu{color:#ff2f7b}
.kieu-kitty .cs u{background:linear-gradient(90deg,#ff8fc4,var(--rose-deep))}
.kieu-kitty .nut{background:var(--rose-deep);color:#fff;border:3px solid #fff;box-shadow:0 10px 30px -8px rgba(255,47,123,.7)}
.kieu-kitty .chibi{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--rose-deep),0 0 34px rgba(255,143,196,.6)}

@media (prefers-reduced-motion: reduce){
  .chay,.the-vibe,.sticker,.cs.vo-cuc u{animation:none!important}
  .bang-chu .chay{transform:translateX(-10%)}
}

/* ================= Màn chọn: lá bài úp ================= */
.la-up{position:relative;display:flex;align-items:center;justify-content:center;width:min(30vw,112px);aspect-ratio:5/7;border-radius:14px;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px),linear-gradient(160deg,#5b2a86,#2a1650);
  border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(255,210,122,.15),0 14px 40px -10px rgba(255,122,162,.6);
  animation:noi 3.6s ease-in-out infinite;transition:transform .3s,box-shadow .3s}
.mot-nguoi:nth-child(2) .la-up{animation-delay:-.9s}.mot-nguoi:nth-child(3) .la-up{animation-delay:-1.8s}.mot-nguoi:nth-child(4) .la-up{animation-delay:-2.7s}
.la-up i{font:700 44px var(--tieu-de);font-style:normal;color:var(--gold);text-shadow:0 0 18px rgba(255,210,122,.8)}
.la-up::after{content:"";position:absolute;inset:5px;border-radius:9px;border:1px dashed rgba(255,210,122,.5)}
.mot-nguoi:hover .la-up,.mot-nguoi:focus-visible .la-up{transform:translateY(-6px) rotate(-4deg) scale(1.05);box-shadow:0 0 0 4px rgba(255,210,122,.35),0 0 50px rgba(255,210,122,.7)}
.mot-nguoi.chon-roi .la-up{transform:scale(1.2) rotateY(180deg);transition:transform .45s}

/* ================= Quay gacha ================= */
body.dang-gacha #troi,body.dang-gacha .giay-mau{z-index:16}
.gacha{--g:#7ec8ff;position:fixed;inset:0;z-index:15;overflow:hidden;cursor:pointer;
  background:radial-gradient(circle at 50% 45%,rgba(10,5,25,.25),rgba(5,2,14,.9) 70%);transition:opacity .6s}
.gacha.an{opacity:0;pointer-events:none}
.g-tia{position:absolute;left:50%;top:45%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;opacity:0;
  background:repeating-conic-gradient(var(--g) 0 5deg,transparent 5deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 38%);mask:radial-gradient(circle,#000 0,transparent 38%);
  animation:xoay-tia 14s linear infinite;transition:opacity .5s}
.gacha.m1 .g-tia{opacity:.12}.gacha.m2 .g-tia{opacity:.22}.gacha.m3 .g-tia{opacity:.34}.gacha.m4 .g-tia,.gacha.mo-the .g-tia{opacity:.5}
@keyframes xoay-tia{to{transform:rotate(360deg)}}
.g-vong{position:absolute;left:50%;top:45%;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;
  border:2px dashed var(--g);box-shadow:0 0 30px var(--g),inset 0 0 30px var(--g);opacity:.55;animation:xoay-tia 7s linear infinite reverse;transition:border-color .3s,box-shadow .3s}
.g-vong::before{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid var(--g);opacity:.6}
.g-cau{--r:0px;position:absolute;left:50%;top:45%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--g) 45%,rgba(0,0,0,.45));
  box-shadow:0 0 40px 10px var(--g),0 0 120px 40px var(--g);transform:translateY(-75vh);transition:background .3s,box-shadow .3s,opacity .2s}
.gacha.roi .g-cau{animation:cau-roi .9s cubic-bezier(.45,0,.55,1.45) forwards,rung-cau .12s linear infinite}
.gacha.m2 .g-cau{--r:2px}.gacha.m3 .g-cau{--r:4px;width:116px;height:116px;margin:-58px 0 0 -58px}
.gacha.m4 .g-cau{--r:7px;width:130px;height:130px;margin:-65px 0 0 -65px;
  background:radial-gradient(circle at 35% 30%,#fff,transparent 55%),conic-gradient(#ff7aa2,#ffd27a,#7fe0b0,#8fe3ff,#c9a7ff,#ff7aa2);
  box-shadow:0 0 50px 16px #fff,0 0 140px 60px rgba(255,157,226,.8)}
@keyframes cau-roi{to{transform:none}}
@keyframes rung-cau{0%,100%{translate:0 0}25%{translate:calc(var(--r) * -1) var(--r)}50%{translate:var(--r) calc(var(--r) * -.5)}75%{translate:calc(var(--r) * -.5) calc(var(--r) * -1)}}
.gacha.mo-the .g-cau,.gacha.mo-the .g-vong{opacity:0;transition:opacity .15s}
.g-chu{position:absolute;left:16px;right:16px;bottom:14%;text-align:center;font:700 clamp(20px,6vw,28px)/1.25 var(--tieu-de);color:#fff;
  text-shadow:0 0 18px var(--g),0 0 40px var(--g)}
.g-chu.nay{animation:nay-chu .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes nay-chu{from{transform:scale(1.6);opacity:0}}
.gacha.mo-the .g-chu{bottom:auto;top:7%;color:var(--gold);text-shadow:0 0 18px rgba(255,210,122,.8)}
.g-loe{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.g-loe.no{animation:loe-trang 1s ease-out}
@keyframes loe-trang{0%{opacity:1}100%{opacity:0}}
.g-the{position:absolute;left:50%;top:47%;width:min(64vw,240px);aspect-ratio:5/7.4;margin-left:calc(min(64vw,240px) / -2);transform:translateY(-50%) scale(0);
  transform-style:preserve-3d;perspective:1000px}
.gacha.mo-the .g-the{animation:lat-the 1.3s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes lat-the{0%{transform:translateY(-50%) scale(.2) rotateY(720deg)}65%{transform:translateY(-50%) scale(1.08) rotateY(-12deg)}100%{transform:translateY(-50%) scale(1) rotateY(0)}}
.g-mat{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.g-sau{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;border:3px solid var(--gold);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 8px,transparent 8px 16px),linear-gradient(160deg,#5b2a86,#2a1650)}
.g-sau span{font:700 64px var(--tieu-de);color:var(--gold)}
.g-truoc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 14px 16px;text-align:center;
  border:3px solid transparent;background:linear-gradient(165deg,var(--night-2),var(--night)) padding-box,
    linear-gradient(135deg,#ff9de2,#9ff3ff,#ffd27a,#c9a7ff,#ff9de2) border-box;
  box-shadow:0 0 60px rgba(255,210,122,.55),0 0 0 1px rgba(255,255,255,.2)}
.g-sao{color:#ffd27a;letter-spacing:.2em;font-size:15px;text-shadow:0 0 10px rgba(255,210,122,.9)}
.g-hang{font:800 34px/1 var(--tieu-de);background:linear-gradient(90deg,#ff9de2,#ffd27a,#9ff3ff,#ff9de2);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:cau-vong 2.5s linear infinite}
.g-anh{width:100%;flex:1;min-height:0;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.25)}
.g-anh img{width:100%;height:100%;object-fit:cover;display:block}
.g-ten{font:700 24px/1.1 var(--tieu-de);color:var(--ink)}
.g-ti-le{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.g-nhan{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);animation:bat-len-giua .6s cubic-bezier(.2,1.4,.4,1)}
.g-nhan:active{transform:translateX(-50%) scale(.97)}
@keyframes bat-len-giua{from{opacity:0;transform:translateX(-50%) translateY(30px) scale(.9)}}

/* ================= Bảng tin: lời chúc + "một năm qua" dạng story vuốt xem ================= */
#wrapped .khung{max-width:400px}
.wr{position:relative;margin:24px auto 0;width:min(100%,340px);aspect-ratio:9/14;border-radius:24px;overflow:hidden;cursor:pointer;
  user-select:none;-webkit-user-select:none;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.wr:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.wr-thanh{position:absolute;left:12px;right:12px;top:12px;z-index:2;display:flex;gap:4px}
.wr-thanh i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.wr-thanh b{display:block;height:100%;width:0;background:#fff}
.wr-thanh i.xong b{width:100%}
.wr.chay .wr-thanh i.dang b{animation:thanh-chay var(--dai) linear forwards}
.wr-thanh i.dang:last-child b{width:100%;animation:none}
@keyframes thanh-chay{to{width:100%}}
.wr-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 26px 30px;color:#fff;overflow:hidden;text-align:center}
.wr-slide::before,.wr-slide::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}
.wr-slide::before{width:260px;height:260px;right:-90px;top:-60px;background:var(--gold)}
.wr-slide::after{width:200px;height:200px;left:-70px;bottom:-50px;background:var(--rose)}
.wr-slide.n0{background:linear-gradient(160deg,var(--rose-deep),var(--night))}
.wr-slide.n1{background:linear-gradient(160deg,var(--rose),var(--rose-deep))}
.wr-slide.n2{background:linear-gradient(160deg,var(--night-2),var(--rose-deep))}
.wr-slide.n3{background:linear-gradient(200deg,var(--gold),var(--rose))}
.wr-slide.n3{color:#1a0f24}
.wr-slide>*{position:relative;z-index:1;animation:vao-slide .6s cubic-bezier(.2,1,.3,1) both}
.wr-emoji{font-size:54px;line-height:1;animation-delay:.05s}
.wr-lon{font:700 clamp(32px,9vw,46px)/1.1 var(--tieu-de);letter-spacing:-.02em;animation-delay:.15s;text-shadow:0 4px 24px rgba(0,0,0,.25)}
.wr-chu{font:600 19px/1.4 var(--body);max-width:15em;animation-delay:.3s}
@keyframes vao-slide{from{opacity:0;transform:translateY(24px)}}

@media (prefers-reduced-motion: reduce){
  .la-up,.g-tia,.g-vong,.gacha.roi .g-cau{animation:none!important}
  .gacha.roi .g-cau{transform:none}
}
.g-tia,.g-vong,.g-cau{pointer-events:none}
.g-nhan{z-index:3}
.g-the,.g-chu{z-index:2}