/* WinTok Studio — neon × glass (Peter 06/09). Nền vẫn ĐEN theo logo; neon là lớp ánh sáng phủ lên,
   không phải màu nền. Kính = nền mờ + viền tóc + backdrop-filter. Tên lớp giữ nguyên như bản trước
   nên mọi trang cũ chạy y hệt, chỉ khác cách nhìn. Tự viết toàn bộ. */
:root{
  --bg:#0e0628;--bg-2:#170b3a;--fg:#f4f6fb;--fg-2:#a7aec3;--fg-3:#737b93;
  --neon:#3ce8ff;--neon-2:#ff45e0;--neon-3:#8b5cff;
  --acc:#ffffff;--acc-2:#e4e4e4;--hl:#ffffff;--ok:#3ff5a8;--err:#ff4d76;--warn:#ffcf5c;
  --frost:rgba(255,255,255,.05);--frost-2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.2);
  --line-neon:rgba(60,232,255,.42);
  --blur:blur(18px) saturate(150%);
  --shadow:0 26px 64px -28px rgba(0,0,0,.9);
  --glow:0 0 26px -6px rgba(60,232,255,.55);
  --glow-2:0 0 30px -6px rgba(255,69,224,.5);
  --r:14px;--r-lg:22px;
  --g1:#1a1030;--g2:#0b0b16;--g3:#07070d;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);min-height:100vh;
  font:15px/1.6 Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;
}
/* Hai quầng neon + lưới mảnh, cố định phía sau mọi thứ — nguồn sáng của cả trang. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 620px at 14% 64%,rgba(214,80,220,.42),transparent 66%),
    radial-gradient(820px 560px at 90% 28%,rgba(52,72,255,.46),transparent 62%),
    radial-gradient(1100px 560px at 46% 44%,rgba(150,72,232,.3),transparent 70%),
    radial-gradient(900px 700px at 28% 106%,rgba(176,40,176,.34),transparent 70%),
    linear-gradient(180deg,#140a3c 0%,#1f0c52 46%,#2a0b4f 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background-image:
    radial-gradient(1.2px 1.2px at 12px 18px,#fff 60%,transparent),
    radial-gradient(1px 1px at 83px 64px,rgba(255,255,255,.85) 60%,transparent),
    radial-gradient(1.6px 1.6px at 141px 122px,#fff 60%,transparent),
    radial-gradient(1px 1px at 47px 171px,rgba(230,215,255,.8) 60%,transparent),
    radial-gradient(1.3px 1.3px at 196px 37px,rgba(255,255,255,.9) 60%,transparent),
    radial-gradient(2px 2px at 260px 210px,#fff 50%,transparent),
    radial-gradient(1px 1px at 310px 95px,rgba(255,255,255,.7) 60%,transparent),
    radial-gradient(2.4px 2.4px at 400px 330px,rgba(255,240,255,.95) 45%,transparent);
  background-size:220px 220px,220px 220px,220px 220px,220px 220px,220px 220px,340px 340px,340px 340px,530px 530px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--neon);color:#04141a}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px}

/* ── header ── */
.top{position:sticky;top:0;z-index:20;background:rgba(6,6,12,.66);backdrop-filter:var(--blur);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--neon),var(--neon-2),transparent);opacity:.55}
.top .in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.brand img{height:26px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(60,232,255,.45))}
.top nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.top nav a{padding:8px 12px;border-radius:9px;color:var(--fg-2);font-weight:500;font-size:14px;transition:color .15s,background .15s}
.top nav a:hover,.top nav a.on{color:var(--fg);background:var(--frost-2)}
.top nav .cta{border:1px solid var(--line-2);color:var(--fg);background:transparent}
.top nav .cta:hover{background:var(--frost-2);border-color:var(--line-neon)}
.top nav .dl{background:#fff;color:#000;font-weight:700;border:1px solid #fff}
.top nav .dl:hover{background:#fff;color:#000;box-shadow:var(--glow)}
@media (max-width:720px){.top nav a:not(.dl):not(#nav-user){display:none}}

/* ── nút ── */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--frost-2);backdrop-filter:blur(8px);color:var(--fg);border-radius:12px;padding:12px 20px;
  font:inherit;font-weight:600;font-size:15px;white-space:nowrap;
  transition:transform .12s,box-shadow .18s,border-color .18s,background .18s}
.btn:hover{border-color:var(--line-neon);box-shadow:var(--glow)}
.btn:active{transform:scale(.98)}
.btn.white{background:#fff;color:#08080d;border-color:transparent;font-weight:700}
.btn.white:hover{background:#fff;box-shadow:0 0 34px -6px rgba(60,232,255,.75)}
.btn.rose{background:linear-gradient(120deg,rgba(60,232,255,.16),rgba(255,69,224,.16));color:#fff;border:1px solid var(--line-neon)}
.btn.rose:hover{box-shadow:var(--glow-2);border-color:rgba(255,69,224,.5)}
.btn.sm{padding:8px 14px;font-size:13.5px;border-radius:10px}
.btn.ico{width:42px;height:42px;padding:0;justify-content:center;border-radius:11px}
.btn:disabled{opacity:.5;cursor:wait;box-shadow:none}
.btn .ar{transition:transform .15s}
.btn:hover .ar{transform:translateX(3px)}
.btn .sub{font-weight:500;color:var(--fg-3);font-size:12.5px}
.btn.white .sub{color:#555}

/* ── hero ── */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 12% 8%,var(--g1) 0%,var(--g2) 48%,var(--g3) 80%,transparent 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.9'/%3E%3C/svg%3E")}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.hero .in{position:relative;max-width:1180px;margin:0 auto;padding:84px 20px 110px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);border:1px solid var(--line-neon);font-size:13px;color:var(--fg-2);font-weight:500;box-shadow:0 0 22px -10px rgba(60,232,255,.8)}
.badge svg{width:14px;height:14px;color:var(--neon)}
h1{font-size:clamp(36px,5.6vw,66px);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:22px 0 18px}
h1 .hl{background:#fff;color:#000;padding:0 .16em;border-radius:.12em;display:inline-block;line-height:1.02;
  box-shadow:0 0 34px -4px rgba(60,232,255,.75),0 0 60px -10px rgba(255,69,224,.55)}
.hero p.lead{font-size:17.5px;color:var(--fg-2);max-width:560px;margin:0 0 30px;line-height:1.65}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.stage{position:relative;aspect-ratio:9/13;max-width:360px;margin:0 auto;border-radius:30px;
  background:linear-gradient(160deg,rgba(40,26,74,.9),rgba(8,8,16,.95));border:1px solid var(--line-2);
  box-shadow:var(--shadow),0 0 70px -30px rgba(139,92,255,.9),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden}
.stage .bar{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-2)}
.stage .live{background:linear-gradient(120deg,var(--neon),var(--neon-2));color:#07070d;font-weight:800;font-size:11px;padding:2px 7px;border-radius:6px;letter-spacing:.06em}
.stage .who{display:flex;align-items:center;gap:8px;margin-left:auto}
.stage .who i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--neon),var(--neon-2));display:block}
.stage .glow{position:absolute;inset:auto -30% -20% -30%;height:70%;background:radial-gradient(closest-side,rgba(139,92,255,.4),transparent 70%);filter:blur(12px)}
.stage .chip{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
  background:rgba(10,10,18,.62);border:1px solid var(--line-2);backdrop-filter:var(--blur);font-size:13px;font-weight:600;animation:float 5s ease-in-out infinite}
.stage .chip b{color:var(--neon)}
.stage .chip:nth-child(3){left:18px;top:34%;animation-delay:-1s}
.stage .chip:nth-child(4){right:18px;top:48%;animation-delay:-2.6s}
.stage .chip:nth-child(5){left:34px;top:64%;animation-delay:-4s}
.stage .logo{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:62%;opacity:.96;filter:drop-shadow(0 8px 34px rgba(60,232,255,.5))}
.stage .foot{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:6px}
.stage .foot span{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.13)}
.stage .foot span:first-child{background:linear-gradient(90deg,var(--neon),var(--neon-2))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){.hero .in{grid-template-columns:1fr;padding:56px 20px 80px}.stage{display:none}}

/* ── khối chung ── */
section.blk{max-width:1180px;margin:0 auto;padding:64px 20px}
.kicker{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:linear-gradient(90deg,var(--neon),var(--neon-2));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1.12;margin:10px 0 10px;font-weight:800}
.sub{color:var(--fg-2);max-width:640px;margin:0 0 30px;font-size:16px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{position:relative;background:var(--frost);backdrop-filter:var(--blur);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),var(--shadow);
  transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.card:hover{transform:translateY(-3px);border-color:var(--line-neon);background:var(--frost-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--glow)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(135deg,var(--neon),var(--neon-3));color:#07070d;box-shadow:0 0 26px -8px rgba(60,232,255,.9)}
.card .ic svg{width:22px;height:22px}
.card h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.card p{margin:0;color:var(--fg-2);font-size:14.5px}

/* ── kho ── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.tabs button{cursor:pointer;font:inherit;font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);transition:.15s}
.tabs button:hover{border-color:var(--line-neon);color:var(--fg)}
.tabs button.on{background:linear-gradient(120deg,var(--neon),var(--neon-2));color:#07070d;border-color:transparent;box-shadow:var(--glow)}
.tabs .sp{flex:1}
.tabs input{background:var(--frost);border:1px solid var(--line-2);color:var(--fg);border-radius:999px;padding:8px 14px;font:inherit;min-width:220px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.prod{display:flex;flex-direction:column;background:var(--frost);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.prod:hover{transform:translateY(-3px);border-color:var(--line-neon);box-shadow:var(--glow)}
.prod .thumb{aspect-ratio:4/3;background:radial-gradient(120% 90% at 30% 20%,rgba(139,92,255,.35),#0a0a12 72%);display:grid;place-items:center;position:relative}
.prod .thumb img{width:100%;height:100%;object-fit:cover}
.prod .thumb .fx{font-size:44px;filter:drop-shadow(0 8px 24px rgba(60,232,255,.6))}
.prod .tagtop{position:absolute;left:12px;top:12px;font-size:10.5px;letter-spacing:.12em;font-weight:800;text-transform:uppercase;color:#07070d;background:linear-gradient(120deg,var(--neon),var(--neon-2));padding:4px 8px;border-radius:6px}
.prod .body{padding:16px 16px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .ten{font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.01em}
.prod .phu{color:var(--fg-3);font-size:12.5px}
.prod .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.prod .gia{font-weight:800;font-size:17px}
.prod .gia.free{color:var(--ok)}
.empty{text-align:center;padding:48px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--fg-2)}
.center{text-align:center;margin-top:26px}

/* ── các bước ── */
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding:0;list-style:none;margin:0}
.steps li{counter-increment:s;background:var(--frost);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 22px 66px;position:relative;color:var(--fg-2)}
.steps li b{color:var(--fg);display:block;margin-bottom:4px;font-size:16px}
.steps li::before{content:counter(s);position:absolute;left:20px;top:20px;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--neon),var(--neon-3));color:#07070d;font-weight:800;display:grid;place-items:center;box-shadow:0 0 22px -8px rgba(60,232,255,.9)}

/* ── tải app ── */
.dlbox{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:var(--frost);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:28px;padding:34px 30px;box-shadow:var(--shadow)}
.dlbox .req{color:var(--fg-2);font-size:14px;margin:0}
.dlbox .req b{color:var(--fg)}
.dlbox .act{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
@media (max-width:760px){.dlbox{grid-template-columns:1fr}}

/* ── hỗ trợ + CTA cuối ── */
.support{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.support .card{display:flex;align-items:center;gap:14px}
.support .card .ic{margin:0}
.cta-end{margin:30px auto 70px;max-width:1180px;padding:0 20px}
.cta-end .in{position:relative;overflow:hidden;border-radius:28px;padding:56px 28px;text-align:center;
  background:radial-gradient(700px 340px at 50% 0%,rgba(139,92,255,.32),rgba(12,12,20,.9) 62%);
  border:1px solid var(--line-neon);box-shadow:0 0 80px -40px rgba(60,232,255,.9)}
.cta-end h2{margin-top:0}
footer{border-top:1px solid var(--line);color:var(--fg-3);font-size:13px}
footer .in{max-width:1180px;margin:0 auto;padding:26px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
footer .in span{margin-left:auto}

/* ── trang con: form, hộp ── */
main.page{max-width:1080px;margin:0 auto;padding:40px 20px 70px}
.page h1{font-size:clamp(28px,4vw,44px);margin:6px 0 8px}
.form{max-width:440px;background:var(--frost);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),var(--shadow)}
label{display:block;font-size:12.5px;color:var(--fg-2);margin:12px 0 5px;font-weight:500}
input,select,textarea{width:100%;background:rgba(0,0,0,.42);border:1px solid var(--line-2);color:var(--fg);border-radius:11px;padding:11px 13px;font:inherit;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(60,232,255,.18)}
.ftabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 18px}
.ftabs button{cursor:pointer;font:inherit;font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2)}
.ftabs button.on{background:linear-gradient(120deg,var(--neon),var(--neon-2));color:#07070d;border-color:transparent}
.hint{color:var(--fg-2);font-size:13.5px}
.box{background:var(--frost);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-top:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12.5px;color:var(--fg-2);margin:2px 6px 2px 0}
code{background:rgba(0,0,0,.5);border:1px solid var(--line);padding:2px 7px;border-radius:7px;font-size:12.5px;word-break:break-all;color:var(--neon)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(14,14,22,.9);backdrop-filter:var(--blur);
  border:1px solid var(--line-2);padding:11px 16px;border-radius:12px;box-shadow:var(--shadow);display:none;max-width:90vw;z-index:30;font-size:14px}
.toast.err{border-color:var(--err);box-shadow:0 0 30px -10px var(--err)}
.toast.ok{border-color:var(--ok);box-shadow:0 0 30px -10px var(--ok)}
.free{color:var(--ok);font-weight:800}
.price b{color:var(--fg)}
a.lnk{color:var(--neon);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){section.blk{padding:44px 16px}main.page{padding:26px 16px 60px}}

/* ══ TRANG CHỦ 13/09/2026 tối (Peter: theo mẫu anh gửi) — nền có lưới, hero một dòng, khung điện thoại, video giới thiệu.
   Chỉ áp cho body.trang-chu; các trang khác (tài khoản, gói, quản trị) giữ nguyên neon × glass.
   15/09 (Peter: "đổi màu chủ đạo sang màu xanh neon của logo tiktok, màu đỏ đang hơi chói"): nền đỏ thẫm → đen ánh xanh,
   màu chính --chinh = #d68cff (tím sao, nền ngân hà theo ảnh Peter 15/09 tối). --hang-d/c/b/a là màu riêng từng hạng của gói hỗ trợ idol. ══ */
body.trang-chu{--chinh:#d68cff;--chinh-2:#9fb4ff;--hong:#ff0050;--fg-2:#cdc3e6;--fg-3:#9d92bd;
  --line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.2);--line-neon:rgba(214,140,255,.45);
  --glow:0 0 30px -8px rgba(214,140,255,.55);--glow-2:0 0 30px -6px rgba(214,140,255,.4);--neon:#d68cff;--neon-2:#9fb4ff;
  --nen-the:rgba(24,12,60,.66);--hang-d:#3ddc97;--hang-c:#4da3ff;--hang-b:#ff78c4;--hang-a:#ffc53d;
  background:#0e0628}
/* nền ngân hà + sao: body::before / body::after ở đầu file, dùng chung mọi trang */
body.trang-chu .hero-luoi{display:none}
body.trang-chu .top{background:rgba(16,8,44,.55)}
body.trang-chu .top::after{background:linear-gradient(90deg,transparent,var(--chinh),var(--chinh-2),transparent)}
body.trang-chu .brand img{height:30px;filter:drop-shadow(0 0 12px rgba(214,140,255,.45))}
body.trang-chu .brand span{font-weight:800;letter-spacing:-.01em} body.trang-chu .brand i{font-style:normal;color:var(--fg-3);margin:0 2px}
body.trang-chu ::selection{background:var(--chinh);color:#1d0838}
body.trang-chu .top nav .dl:hover{box-shadow:var(--glow)}

.hero-v2{background:none;min-height:calc(100vh - 56px);display:flex;align-items:center}
.hero-v2::before{display:none}
.hero-v2::after{height:120px;background:linear-gradient(180deg,transparent,rgba(14,6,40,.9))}
.hero-nen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(1.3) contrast(1.1);pointer-events:none}
.hero-luoi{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(900px 620px at 40% 50%,#000 25%,transparent 78%)}
.hero-v2 .in{grid-template-columns:1.05fr .95fr;padding:56px 20px 90px;gap:36px}
.hero-v2 .badge{border-color:var(--line-neon);box-shadow:0 0 22px -10px rgba(214,140,255,.8);color:#f3e2ff;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;font-weight:700}
.badge .cham{width:8px;height:8px;border-radius:50%;background:var(--chinh);box-shadow:0 0 12px var(--chinh);animation:nhip 1.6s ease-in-out infinite}
@keyframes nhip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
.hero-v2 h1{font-size:clamp(38px,5.6vw,74px);line-height:1.02;letter-spacing:-.035em;font-weight:900;margin:24px 0 14px;max-width:11ch;
  text-shadow:0 12px 60px rgba(0,0,0,.55)}
.hero-v2 h1 em{font-style:normal;background:linear-gradient(90deg,#ffe0ff,#d68cff 55%,#9fb4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.chu-ky{font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 30px;padding-left:2px}
.chu-ky b{color:#fff;font-weight:800}
.hero-v2 .ctas{gap:12px}
.hero-v2 .btn.white:hover{box-shadow:0 0 40px -6px rgba(214,140,255,.75)}
.hero-v2 .btn.rose{background:linear-gradient(120deg,rgba(214,140,255,.2),rgba(214,140,255,.06));border-color:var(--line-neon)}

/* video giới thiệu */
.gioi-thieu{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:64px 20px 10px}
.gioi-thieu h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.025em;margin:0 0 8px;font-weight:800}
.gioi-thieu .lead{color:var(--fg-2);max-width:640px;margin:0 0 24px;font-size:16px}
.gioi-thieu{padding-bottom:80px}
.video-lon{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);
  background:radial-gradient(700px 400px at 30% 20%,rgba(120,90,255,.4),transparent 65%),linear-gradient(160deg,#2a1466,#0e0628);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 80px -30px rgba(214,140,255,.4)}
.video-lon video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.video-lon .video-cho{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.video-lon .video-cho img{width:min(180px,30%);filter:drop-shadow(0 10px 34px rgba(214,140,255,.45))}
.video-lon.cho .video-cho{display:flex}
/* 14/09: chưa có video giới thiệu thì khung trong suốt, lộ cảnh 3D (quà, hologram Universe) phía sau */
.video-lon.cho{background:radial-gradient(700px 400px at 30% 20%,rgba(120,90,255,.16),transparent 65%),linear-gradient(160deg,rgba(42,20,102,.28),rgba(14,6,40,.34))}
body.trang-chu footer{border-top:1px solid var(--line)}
@media (max-width:900px){
  .hero-v2 .in{grid-template-columns:1fr;padding:36px 20px 70px;gap:28px}
  .hero-chu{text-align:center} .hero-v2 h1{max-width:none;margin-left:auto;margin-right:auto} .hero-v2 .ctas{justify-content:center}
}

/* ══ 13/09 khuya: chuyển động 3D (Peter: "phát triển motion 3d cho website") ══ */
#nen-3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
body.trang-chu .top,body.trang-chu .hero,body.trang-chu .gioi-thieu,body.trang-chu .ho-tro-dau,body.trang-chu footer{position:relative;z-index:1}
body.trang-chu .top{z-index:20}
.hero-nen{opacity:.16}
.dien-thoai{perspective:1200px}
.dien-thoai .dt-khung{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.dien-thoai{transform-style:preserve-3d;transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){#nen-3d{display:none}}

/* ══ 13/09 khuya (Peter: khung điện thoại theo mẫu live) — màn livestream 9:16: thanh trên (kênh, LIVE, người xem),
   bình luận góc trái, cột tim bay cạnh phải, ô Comment ở đáy. Cỡ trong màn tính theo em: 1em = 10px khi khung rộng
   340px, khung hẹp trên điện thoại co theo đúng tỉ lệ. Nghiêng 3D vẫn do khối "chuyển động 3D" phía trên. ══ */
.dien-thoai{position:relative;justify-self:center;width:min(340px,82vw)}
.dt-khung{position:relative;width:100%;aspect-ratio:9/16;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#121215;
  container-type:inline-size;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 26px 56px -26px rgba(0,0,0,.85),0 0 90px -22px rgba(214,140,255,.4)}
.dt-man{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:15px;color:#fff;text-align:left;line-height:1.3;
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:10px;font-size:calc(100cqw / 34);
  -webkit-user-select:none;user-select:none;
  background:linear-gradient(90deg,rgba(0,0,0,.6),transparent 28%,transparent 72%,rgba(0,0,0,.6)),
    radial-gradient(circle at 50% 46%,rgba(210,92,255,.6),rgba(255,62,150,.32) 32%,rgba(110,30,150,.12) 56%,transparent 74%),
    repeating-conic-gradient(#242428 0 25%,#141417 0 50%) 0 0/2.8em 2.8em}
.dt-man,.dt-man *{pointer-events:none}
.dt-man::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.36),transparent 15%,transparent 60%,rgba(0,0,0,.46))}
.dt-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dt-dau,.dt-bl,.dt-tim,.dt-day{position:absolute;z-index:2}

/* thanh trên */
.dt-dau{top:1.6em;left:1.6em;right:1.6em;display:flex;align-items:center;justify-content:space-between;gap:.8em}
.dt-kenh{display:flex;align-items:center;gap:.8em;min-width:0}
.dt-kenh-anh{display:block;width:2.8em;height:2.8em;flex:none;border-radius:50%;background:#0b0b10;object-fit:contain;padding:.35em;
  border:1px solid rgba(255,255,255,.28)}   /* logo chữ trắng: nền trắng làm logo biến mất */
.dt-kenh b{font-size:1.3em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.dt-dau-phai{display:flex;align-items:center;gap:.6em;flex:none}
.dt-nhan-live,.dt-nhan-xem{display:flex;align-items:center;gap:.35em;height:2.2em;padding:0 .6em;border-radius:4px;font-size:1.05em;line-height:1}
.dt-nhan-live{background:linear-gradient(90deg,#e91e63,#ff2d75);font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 1.4em -.3em rgba(255,45,117,.8)}
.dt-cham{width:.45em;height:.45em;border-radius:50%;background:#fff;animation:nhip 1.4s ease-in-out infinite}
.dt-nhan-xem{background:rgba(0,0,0,.42);font-weight:600;font-variant-numeric:tabular-nums}
.dt-nhan-xem svg{width:1.3em;height:1.3em}
.dt-dong{width:1.8em;height:1.8em;margin-left:.2em}

/* bình luận: JS thêm .dt-bl-vao (trượt lên) và .dt-bl-ra (mờ rồi gỡ) */
.dt-bl{left:1.6em;right:6.6em;bottom:7.4em;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1.4em;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dt-bl-dong{display:flex;align-items:center;gap:.9em;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.dt-bl-vao{opacity:0;transform:translateY(.8em)}
.dt-bl-ra{opacity:0;transform:translateY(-.5em)}
.dt-bl-anh{width:3em;height:3em;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden}
.dt-bl-anh svg{width:1.9em;height:1.9em;opacity:.95}
.dt-bl-anh b{font-size:1.4em;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.dt-bl-anh.mau-cam{background:linear-gradient(135deg,#ff8a3d,#ffd34e)}
.dt-bl-anh.mau-ngoc{background:#19c3b1}
.dt-bl-anh.mau-hong{background:#ff5d9e}
.dt-bl-anh.mau-tim{background:#8b5cf6}
.dt-bl-chu{display:flex;flex-direction:column;gap:.15em;min-width:0}
.dt-bl-ten,.dt-bl-noi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-bl-ten{font-size:1.1em;font-weight:500;color:rgba(255,255,255,.7)}
.dt-bl-noi{font-size:1.2em;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.45)}

/* cột tim: .dt-tim-tinh đứng yên (khi tắt chuyển động), .dt-tim-bay do JS sinh */
.dt-tim{right:1.2em;bottom:6.6em;width:5.4em;height:50%}
.dt-tim svg{position:absolute;fill:currentColor;transform-origin:50% 50%}
.dt-tim-tinh{left:var(--x);bottom:var(--y);width:var(--s);height:var(--s);opacity:var(--o)}
.dt-tim .do{color:#ff3b6b}
.dt-tim-bay{bottom:0;opacity:0}

/* đáy: ô Comment, gửi, tim */
.dt-day{left:1.6em;right:1.6em;bottom:1.6em;display:flex;align-items:center;gap:1.6em}
.dt-o-bl{flex:1;min-width:0;height:4.2em;display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:0 .9em 0 1.6em;
  border:1px solid rgba(255,255,255,.85);border-radius:999px}
.dt-o-bl span{font-size:1.3em;font-weight:700}
.dt-o-bl svg{width:2em;height:2em;flex:none}
.dt-nut{width:2.2em;height:2.2em;flex:none}
.dt-bong{position:absolute;left:8%;right:8%;bottom:-44px;height:64px;background:radial-gradient(closest-side,rgba(214,140,255,.5),transparent);filter:blur(22px);pointer-events:none}
@media (max-width:900px){.dien-thoai{width:min(300px,78vw)}}

/* 13/09 khuya: thanh đầu trang khổ điện thoại — 375px không đủ chỗ cho logo + "Wintok · Peter" + Đăng nhập + nút tải:
   tên gãy hai dòng, nút tải gãy ba dòng. Dưới 480px giữ logo, ẩn chữ tên, nút không xuống dòng. */
@media (max-width:480px){
  body.trang-chu .brand span{display:none}
  body.trang-chu .top .in{gap:8px;padding:10px 14px}
  body.trang-chu .top nav{gap:2px}
  body.trang-chu .top nav a{padding:7px 9px;font-size:13px;white-space:nowrap}
}

/* 14/09 (tìm kiếm): khối chữ giới thiệu và câu hỏi thường gặp dưới Video giới thiệu. Hai section dùng lại .gioi-thieu
   nên đã nằm trên canvas 3D (z-index:1); màu lấy theo token của body.trang-chu. Không có ô tính năng. */
/* 15/09: chữ nằm thẳng trên quà 3D bay qua thì đứt nét ở khổ điện thoại, nên đoạn giới thiệu có tấm nền giống details
   và cả hai dùng nền .65 (details trước là .45). */
.gt-chu{padding-top:0;padding-bottom:56px}
.gt-chu .lead{max-width:760px;line-height:1.7;padding:14px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--nen-the)}
#hoi-dap h2{margin-bottom:18px}
#hoi-dap details{max-width:760px;margin:0 0 10px;padding:14px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--nen-the)}
#hoi-dap summary{cursor:pointer;font-weight:700}
#hoi-dap details p{margin:10px 0 0;color:var(--fg-2);line-height:1.65}

/* ══ 15/09/2026 (Peter): gói hỗ trợ idol lên đầu trang chủ, mỗi hạng một màu, phần idol nhận in to, nút liên hệ có icon,
   pop-up đăng ký tư vấn. Dùng chung cho trang chủ và /goi-ho-tro-idol-livestream/. ══ */
.ho-tro-dau{max-width:1180px;margin:0 auto;padding:44px 20px 28px}
.htd-dau{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px;align-items:end;margin-bottom:26px}
.ho-tro-dau h2{font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-.03em;font-weight:900;margin:16px 0 12px}
.ho-tro-dau h2 em{font-style:normal;background:linear-gradient(90deg,#ffe0ff,#d68cff 55%,#9fb4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ho-tro-dau .lead{color:var(--fg-2);font-size:17px;line-height:1.65;margin:0;max-width:660px}
.ho-tro-dau .lead b{color:var(--fg)}
.htd-nut{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.htd-lh{margin-top:16px}
/* mã Zalo quét nhanh: zalo-qr.png chỉ giữ phần mã, đã cắt avatar và tên trong ảnh gốc (Peter 15/09) */
.zalo-qr{display:flex;align-items:center;gap:16px;margin-top:16px;padding:12px 18px 12px 12px;width:fit-content;max-width:100%;
  border-radius:18px;border:1px solid var(--line-neon);background:rgba(22,11,56,.84)}
.zalo-qr img{width:120px;height:120px;flex:none;padding:8px;border-radius:12px;background:#fff}
.zalo-qr b{display:block;font-size:16px;color:var(--fg)}
.zalo-qr span{display:block;font-size:13.5px;line-height:1.5;color:var(--fg-3);margin-top:4px;max-width:30ch}
@media (max-width:900px){.htd-dau{grid-template-columns:1fr}.htd-nut{justify-content:flex-start}}

/* nút CTA có icon: <a|button class="nut-cta"><span class="ic">svg</span><span>Chữ<small>dòng phụ</small></span></a> */
.nut-cta{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:7px 16px 7px 7px;border-radius:14px;border:1px solid var(--line-2);
  background:var(--nen-the,rgba(24,12,60,.66));color:var(--fg);font:inherit;font-weight:700;font-size:15px;line-height:1.2;text-align:left;cursor:pointer;
  transition:transform .12s,box-shadow .18s,border-color .18s,background .18s}
.nut-cta:hover{border-color:var(--line-neon);box-shadow:var(--glow);transform:translateY(-1px)}
.nut-cta:active{transform:scale(.98)}
.nut-cta:disabled{opacity:.6;cursor:wait;transform:none}
.nut-cta .ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(214,140,255,.14);color:var(--chinh,#d68cff)}
.nut-cta .ic svg{width:19px;height:19px}
.nut-cta small{display:block;font-size:12px;font-weight:500;color:var(--fg-3);margin-top:2px}
.nut-cta.chinh{background:var(--chinh,#d68cff);border-color:transparent;color:#1d0838}
.nut-cta.chinh .ic{background:rgba(29,8,56,.14);color:#1d0838}
.nut-cta.chinh small{color:rgba(29,8,56,.72)}
.nut-cta.chinh:hover{box-shadow:0 0 36px -6px rgba(214,140,255,.85)}
.nut-cta.trang{background:#fff;border-color:transparent;color:#051012}
.nut-cta.trang .ic{background:#dcfbfa;color:#007d79}
.cta-lh{display:flex;flex-wrap:wrap;gap:10px}

/* thẻ hạng: màu theo --mau (hang-d/c/b/a); số idol nhận là chữ to nhất trong thẻ */
.hang-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0}
@media (max-width:1040px){.hang-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.hang-luoi{grid-template-columns:1fr}}
/* padding-top chừa chỗ cho huy hiệu .hang-nhan ở mọi thẻ: huy hiệu không đè tên hạng, số % các thẻ vẫn thẳng hàng.
   Mỗi dòng color-mix() có dòng dự phòng ngay trước cho trình duyệt cũ, để thẻ không mất viền và nền màu hạng. */
.hang{--mau:var(--chinh);position:relative;display:flex;flex-direction:column;gap:12px;padding:52px 20px 20px;border-radius:20px;
  border:1px solid var(--mau);
  border:1px solid color-mix(in srgb,var(--mau) 45%,transparent);
  background:rgba(22,11,56,.84);
  background:linear-gradient(180deg,color-mix(in srgb,var(--mau) 17%,transparent),transparent 45%),rgba(22,11,56,.84);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.9),0 0 54px -32px var(--mau)}
.hang-d{--mau:var(--hang-d)} .hang-c{--mau:var(--hang-c)} .hang-b{--mau:var(--hang-b)} .hang-a{--mau:var(--hang-a)}
.hang::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--mau)}
.hang-nhan{position:absolute;top:18px;left:20px;max-width:calc(100% - 40px);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--mau);color:#170a33}
.hang-ten{margin:0;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.hang-ten b{color:var(--mau);font-size:16px}
.hang-idol{margin:2px 0 0}
.hang-idol small{display:block;font-size:13px;font-weight:800;color:var(--fg);text-transform:uppercase;letter-spacing:.08em}
.hang-idol b{display:block;font-size:clamp(54px,5.4vw,70px);line-height:1;font-weight:900;letter-spacing:-.035em;color:var(--mau);
  font-variant-numeric:tabular-nums;text-shadow:0 0 36px var(--mau);text-shadow:0 0 36px color-mix(in srgb,var(--mau) 55%,transparent)}
.hang-idol span{display:block;font-size:13.5px;font-weight:600;color:var(--fg);margin-top:6px}
.hang-wt{margin:0;font-size:12.5px;color:var(--fg-3)}
.phu-trach{margin:0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:12px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em}
.phu-trach b{display:block;color:var(--fg);font-size:14.5px;text-transform:none;letter-spacing:0;margin-top:2px}
.hang-gom{margin:0;font-size:13px;color:var(--mau);font-weight:700}
.hang-diem{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px;line-height:1.5;color:var(--fg)}
.hang-diem li{position:relative;padding-left:28px}
.hang-diem li::before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:900;color:#170a33;background:var(--mau)}
.hang .nut-cta{margin-top:auto;justify-content:center;padding-right:14px;border-color:var(--mau);border-color:color-mix(in srgb,var(--mau) 50%,transparent)}
.hang .nut-cta .ic{background:rgba(255,255,255,.08);background:color-mix(in srgb,var(--mau) 22%,transparent);color:var(--mau)}
.hang .nut-cta:hover{box-shadow:0 0 30px -8px var(--mau);border-color:var(--mau)}

/* nhấn mạnh: hỗ trợ kháng nghị tài khoản (Peter 15/09) */
.bao-ve{display:flex;gap:16px;align-items:center;margin:18px 0 0;padding:18px 20px;border-radius:18px;border:1px solid var(--line-neon);
  background:linear-gradient(100deg,rgba(214,140,255,.18),rgba(214,140,255,.04) 60%),rgba(22,11,56,.84)}
.bao-ve .ic{flex:none;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:var(--chinh);color:#1d0838;box-shadow:0 0 30px -8px rgba(214,140,255,.9)}
.bao-ve .ic svg{width:28px;height:28px}
.bao-ve p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.55}
.bao-ve .bv-tieu{color:var(--fg);font-size:clamp(17px,2vw,21px);font-weight:800;margin-bottom:3px}
.bao-ve b{color:var(--chinh)}
@media (max-width:560px){.bao-ve{align-items:flex-start;padding:16px}.bao-ve .ic{width:44px;height:44px}}

/* pop-up đăng ký tư vấn (tu-van.js) */
.tv-hop{width:min(430px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--line-neon);border-radius:20px;background:#04191b;color:var(--fg);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 60px -30px rgba(214,140,255,.8)}
.tv-hop::backdrop{background:rgba(1,6,8,.74);backdrop-filter:blur(4px)}
.tv-trong{position:relative;padding:26px 24px 22px}
.tv-dong{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.tv-dong:hover{border-color:var(--line-neon)}
.tv-trong h2{margin:0 40px 6px 0;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.tv-trong p{margin:0;color:var(--fg-2);font-size:14.5px;line-height:1.55}
.tv-hang{display:inline-block;margin:10px 0 0;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(214,140,255,.14);color:var(--chinh-2)}
.tv-trong label{margin:16px 0 6px;font-size:13px;color:var(--fg)}
.tv-trong input[type=tel]{font-size:18px;letter-spacing:.04em;padding:13px 14px}
.tv-ts{margin-top:12px}
.tv-trong .tv-loi{min-height:20px;margin-top:8px;color:#ff7b95;font-size:13.5px}
.tv-trong .nut-cta{width:100%;justify-content:center;margin-top:6px}
.tv-trong .tv-cam-ket{margin-top:12px;font-size:12.5px;color:var(--fg-3)}
.tv-xong .ic-xong{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--chinh);color:#1d0838;margin-bottom:12px}
.tv-xong .ic-xong svg{width:28px;height:28px}
@media (max-width:420px){.tv-trong{padding:22px 16px 18px}}

/* ══ trang gói hỗ trợ idol (/goi-ho-tro-idol-livestream/, /en/…, /zh/…): chuyển từ CSS nội tuyến sang đây 15/09 tối để ba bản
   ngôn ngữ dùng chung. Không nạp /3d.js ở trang này (LCP mobile). ══ */
[hidden]{display:none!important}
.gh{position:relative;z-index:1}
.gh-in{max-width:1180px;margin:0 auto;padding-inline:20px}
.gh-dau{padding-block:40px 10px}
.vun{font-size:13px;color:var(--fg-3);margin:0}
.vun a{color:var(--fg-2)} .vun a:hover{color:var(--fg)}
.gh-dau h1{font-size:clamp(32px,4.8vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:900;margin:18px 0 18px;max-width:20ch}
.gh-dau h1 em{font-style:normal;background:linear-gradient(90deg,#ffe0ff,#d68cff 55%,#9fb4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tom-tat{max-width:820px;margin:0;font-size:17px;line-height:1.72;color:var(--fg-2)}
.tom-tat b{color:var(--fg)}
.cap-nhat{font-size:13px;color:var(--fg-3);margin:10px 0 0}
.gh-dau .cta-lh{margin-top:22px}
.gh-khoi{padding-block:40px;scroll-margin-top:20px}
.gh-khoi h2{margin:0 0 8px}
.gh-khoi .de{color:var(--fg-2);max-width:780px;margin:0 0 24px;font-size:16px;line-height:1.65}

/* bảng điểm khác nhau: cột mỗi hạng một màu; dưới 760 px mỗi hàng thành một khối, ô mang nhãn hạng ở data-label */
.bang-vo{border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:rgba(22,11,56,.84)}
table.bang{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.bang th,.bang td{padding:13px 14px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line)}
.bang .c-d{--mau:var(--hang-d)} .bang .c-c{--mau:var(--hang-c)} .bang .c-b{--mau:var(--hang-b)} .bang .c-a{--mau:var(--hang-a)}
.bang thead th{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;background:rgba(0,0,0,.28)}
.bang thead th:first-child{text-align:left;color:var(--fg-3)}
.bang thead :is(.c-d,.c-c,.c-b,.c-a){color:var(--mau);box-shadow:inset 0 3px 0 var(--mau)}
.bang tbody th{text-align:left;color:var(--fg);font-weight:700;width:28%}
.bang td{color:var(--fg-2);border-left:1px solid var(--line)}
.bang td:is(.c-d,.c-c,.c-b,.c-a){background:rgba(255,255,255,.03);background:color-mix(in srgb,var(--mau) 7%,transparent)}
.bang .dong-idol th{font-size:15.5px}
.bang .dong-idol td b{font-size:30px;font-weight:900;color:var(--mau);letter-spacing:-.02em}
.bang .co{color:var(--mau);font-weight:800}
.bang .khong{color:var(--fg-3)}
.bang .dong-bao-ve th{color:var(--fg);background:rgba(214,140,255,.1)}
.bang .dong-bao-ve td{background:rgba(214,140,255,.1);color:var(--chinh);font-weight:800}
@media (max-width:760px){
  .bang,.bang tbody,.bang tr,.bang th,.bang td{display:block;width:auto}
  .bang thead{display:none}
  .bang tr{padding:14px 16px;border-bottom:1px solid var(--line-2)}
  .bang tbody th{width:auto;padding:0 0 8px;border:0;font-size:15.5px;background:none!important}
  .bang td{border:0;padding:6px 10px;margin:0 0 4px;border-radius:8px;display:grid;grid-template-columns:5.6em 1fr;gap:10px;text-align:left;align-items:center}
  .bang td::before{content:attr(data-label);color:var(--mau,var(--chinh));font-weight:800;font-size:12.5px}
  .bang .dong-idol td b{font-size:24px}
}

.chung-luoi{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.chung-luoi li{position:relative;padding:13px 16px 13px 46px;border:1px solid var(--line);border-radius:14px;background:rgba(22,11,56,.76);color:var(--fg);font-size:14.5px;line-height:1.5}
.chung-luoi li::before{content:"✓";position:absolute;left:15px;top:13px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;background:var(--chinh);color:#1d0838}
.hoi-dap details{max-width:820px}
.lien-he{position:relative;overflow:hidden;border-radius:24px;padding:40px 28px;border:1px solid var(--line-neon);
  background:radial-gradient(700px 340px at 50% 0%,rgba(214,140,255,.2),rgba(22,11,56,.92) 64%);box-shadow:0 0 80px -40px rgba(214,140,255,.7)}
.lien-he h2{margin-top:0}
.lien-he .cta-lh{margin-top:20px}
.lien-he .chinh-thuc{margin:18px 0 0;font-size:13.5px;color:var(--fg-3)}
.lien-he .chinh-thuc b{color:var(--fg-2)}
@media (max-width:560px){.gh-in{padding-inline:16px}.gh-khoi{padding-block:32px}.tom-tat{font-size:16px}.lien-he{padding:28px 18px}}

/* 15/09 tối: nút đổi ngôn ngữ trên thanh đầu trang (VI / EN / 中文), link thẳng sang trang tương ứng. Là div, không phải nav,
   để khỏi dính luật ".top nav a" ẩn link khi hẹp. Dưới 480px ẩn "Đăng nhập" để đủ chỗ cho logo + ngôn ngữ + nút tải. */
.ngon-ngu{display:flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:10px;flex:none}
.ngon-ngu a{padding:4px 8px;border-radius:7px;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--fg-3);white-space:nowrap}
.ngon-ngu a:hover{color:var(--fg)}
.ngon-ngu a.on{background:var(--chinh,var(--neon));color:#1d0838}
@media (max-width:480px){.ngon-ngu a{padding:3px 6px;font-size:12px} body.trang-chu .top #nav-user{display:none}}

/* 15/09 tối (Peter): cảnh báo trang giả mạo. Tên miền viết chữ thường, không gắn link. */
.canh-bao{display:flex;gap:10px;margin:16px 0 0;padding:12px 16px;max-width:760px;border-radius:14px;border:1px solid rgba(255,197,61,.5);
  background:rgba(255,197,61,.08);color:var(--fg-2);font-size:13.5px;line-height:1.55}
.canh-bao::before{content:"⚠";color:#ffc53d;font-size:16px;line-height:1.35}
.canh-bao b{color:#ffd978}