:root{
  --accent:#9b1106; --g1:#6f0b04; --g2:#9b1106; --g3:#c8341f; --g4:#e8734a; --b1:#ff7a59; --b2:#c8102e; --b3:#ffb38a;
  --ink:#fff; --soft:rgba(255,255,255,.78); --line:rgba(255,255,255,.38);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 38%,var(--g3) 72%,var(--g4) 100%);
  background-attachment:fixed; overflow:hidden; -webkit-font-smoothing:antialiased;
}

/* nền gradient trôi chậm */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0}
.bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.bg i:nth-child(1){width:55vmax;height:55vmax;background:var(--b1);left:-15vmax;top:-20vmax}
.bg i:nth-child(2){width:45vmax;height:45vmax;background:var(--b2);right:-12vmax;bottom:-18vmax;animation-duration:28s}
.bg i:nth-child(3){width:30vmax;height:30vmax;background:var(--b3);right:15vmax;top:10vmax;opacity:.28;animation-duration:34s}
@keyframes drift{to{transform:translate3d(8vmax,6vmax,0) scale(1.15)}}

.progress{position:fixed;top:0;left:0;right:0;height:5px;background:rgba(255,255,255,.18);z-index:5}
.progress span{display:block;height:100%;width:0;background:#fff;border-radius:0 4px 4px 0;transition:width .55s cubic-bezier(.4,0,.2,1)}

.brand{position:fixed;top:22px;left:clamp(18px,4vw,40px);z-index:4;font-size:18px;letter-spacing:.02em;font-weight:300}
.brand b{font-weight:700}

#stage{position:relative;z-index:2;height:100dvh;overflow-y:auto;display:flex}
.screen{width:100%;max-width:760px;margin:auto;padding:84px clamp(20px,5vw,40px) 110px;animation:inUp .5s cubic-bezier(.2,.7,.2,1) both}
.screen.down{animation-name:inDown}
@keyframes inUp{from{opacity:0;transform:translateY(34px)}}
@keyframes inDown{from{opacity:0;transform:translateY(-34px)}}

.eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.q{display:flex;gap:12px;align-items:flex-start}
.q .num{flex:none;margin-top:.55em;font-size:12px;font-weight:700;background:#fff;color:var(--accent);border-radius:6px;padding:2px 7px;line-height:1.4}
h1,h2{font-weight:600;line-height:1.3;letter-spacing:-.01em}
h1{font-size:clamp(30px,5.4vw,48px);margin-bottom:22px}
h2{font-size:clamp(21px,3.4vw,30px)}
.desc{margin-top:10px;color:var(--soft);font-size:clamp(15px,2vw,18px);line-height:1.55}
.intro p{font-size:clamp(15px,2vw,18px);line-height:1.7;color:rgba(255,255,255,.9);margin-bottom:14px;font-weight:300}
.meta{margin-top:18px;font-size:14px;color:var(--soft)}

.field{margin-top:30px}
input.line,textarea.line{
  width:100%;background:transparent;border:0;border-bottom:2px solid var(--line);color:#fff;
  font:inherit;font-size:clamp(19px,3vw,27px);font-weight:300;padding:8px 0 10px;outline:none;transition:border-color .2s;
}
textarea.line{resize:none;min-height:3.4em;line-height:1.5}
input.line:focus,textarea.line:focus{border-color:#fff}
::placeholder{color:rgba(255,255,255,.45)}

.opts{margin-top:26px;display:flex;flex-direction:column;gap:10px;max-width:640px}
.opt{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;cursor:pointer;
  font:inherit;font-size:clamp(15px,2vw,18px);line-height:1.4;color:#fff;
  background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.3);border-radius:var(--ro,14px);padding:12px 16px;
  backdrop-filter:blur(6px);transition:background .18s,border-color .18s,transform .12s,color .18s;
}
.opt:hover{background:rgba(255,255,255,.22)}
.opt:active{transform:scale(.99)}
.opt .k{flex:none;width:26px;height:26px;border-radius:7px;border:1.5px solid rgba(255,255,255,.55);display:grid;place-items:center;font-size:12px;font-weight:600}
.opt.on{background:#fff;color:var(--accent);border-color:#fff;font-weight:500}
.opt.on .k{background:var(--accent);color:#fff;border-color:var(--accent)}
.other{margin-top:4px}
.other input.line{font-size:18px}

.actions{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btn{
  font:inherit;font-weight:600;font-size:18px;cursor:pointer;border:0;border-radius:var(--rb,999px);padding:13px 30px;
  background:#fff;color:var(--accent);box-shadow:0 8px 24px rgba(60,5,0,.28);transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(60,5,0,.36)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.hint{font-size:14px;color:var(--soft)}
.hint kbd{font:inherit;font-weight:700}
.err{margin-top:14px;font-size:15px;background:rgba(0,0,0,.26);padding:8px 14px;border-radius:10px;display:inline-block}
.shake{animation:shake .38s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.nav{position:fixed;right:clamp(14px,3vw,34px);bottom:clamp(14px,3vw,28px);z-index:5;display:flex;align-items:center;gap:8px}
.nav .count{font-size:13px;color:var(--soft);margin-right:6px}
.nav button{width:38px;height:38px;border-radius:10px;border:0;cursor:pointer;background:rgba(255,255,255,.2);color:#fff;font-size:20px;line-height:1;backdrop-filter:blur(6px)}
.nav button:hover{background:rgba(255,255,255,.34)}
.nav button:disabled{opacity:.35;cursor:default}
.nav.hide{display:none}

.thanks h1{margin-bottom:16px}
.heart{font-size:54px;margin-bottom:12px}

@media (max-width:560px){.screen{padding-top:76px}.btn{width:100%}.hint{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}

/* rating, quiz, classic */
.rate{margin-top:26px;display:flex;gap:8px;flex-wrap:wrap}
.rate button{width:52px;height:52px;border-radius:14px;cursor:pointer;font:inherit;font-size:18px;font-weight:600;color:#fff;background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.3);transition:.18s}
.rate button:hover{background:rgba(255,255,255,.24)}
.rate button.on{background:#fff;color:var(--accent);border-color:#fff}
.rate-lbl{display:flex;justify-content:space-between;max-width:640px;margin-top:10px;font-size:13px;color:var(--soft)}
.screen.classic{max-width:820px}
.screen.classic .blk{margin-bottom:54px}
.screen.classic .field{margin-top:20px}
.screen.classic h2{font-size:clamp(19px,2.6vw,24px)}
.score{font-size:clamp(54px,12vw,96px);font-weight:700;margin-bottom:6px;line-height:1}
.linkbtn{display:inline-block;margin-top:24px;text-decoration:none}
.closed h1{font-size:clamp(26px,4.5vw,38px)}

.rate button.star{width:46px;height:46px;font-size:28px;line-height:1;background:transparent;border-color:transparent;color:rgba(255,255,255,.5)}
.rate button.star.on{background:transparent;color:#ffd75e}
.rate.stars{gap:2px}
select.sel{width:100%;max-width:640px;padding:14px 16px;font:inherit;font-size:clamp(16px,2vw,19px);color:#fff;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);border-radius:14px}
select.sel option{color:#222}
.rank{display:flex;flex-direction:column;gap:8px;max-width:640px}
.rk{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.3);border-radius:14px;padding:8px 10px 8px 14px;font-size:clamp(15px,2vw,18px)}
.rk .n{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:700}
.rk .lbl{flex:1}
.rk button{width:34px;height:34px;border-radius:9px;border:0;cursor:pointer;background:rgba(255,255,255,.22);color:#fff;font-size:16px}
.rk button:disabled{opacity:.3;cursor:default}
.mtx{overflow-x:auto;margin-top:6px;max-width:100%}
.mtx table{border-collapse:collapse;min-width:100%}
.mtx th{font-size:13px;font-weight:500;color:var(--soft);padding:8px 10px;text-align:center}
.mtx td{padding:8px 10px;text-align:center;border-top:1px solid rgba(255,255,255,.18)}
.mtx td.rw{text-align:left;font-size:clamp(14px,2vw,17px);min-width:150px}
.mtx .dot{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:transparent;cursor:pointer}
.mtx .dot.on{background:#fff;box-shadow:inset 0 0 0 5px var(--accent)}

/* chọn bằng ảnh */
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:720px;margin-top:6px}
.pic{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;cursor:pointer;color:#fff;font:inherit;text-align:left;
  background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.3);border-radius:var(--ro,16px);transition:transform .15s,border-color .15s,background .15s}
.pic:hover{transform:translateY(-3px);background:rgba(255,255,255,.22)}
.pic img,.pic .noimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:rgba(0,0,0,.18)}
.pic .noimg{display:grid;place-items:center;font-size:34px}
.pic .cap{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:15px;line-height:1.3}
.pic .k{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;font-size:11px;font-weight:600}
.pic.on{background:#fff;color:var(--accent);border-color:#fff;font-weight:500}
.pic.on .k{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:560px){.pics{grid-template-columns:repeat(2,1fr)}}

/* tải file lên */
.drop{max-width:640px;border:2px dashed rgba(255,255,255,.5);border-radius:18px;padding:24px 18px;text-align:center;background:rgba(255,255,255,.08);transition:background .15s,border-color .15s}
.drop.over{background:rgba(255,255,255,.22);border-color:#fff}
.dz-ic{font-size:34px;margin-bottom:6px}.dz-t{font-size:15px;color:var(--soft);margin-bottom:12px}.dz-h{font-size:13px;color:var(--soft);margin-top:12px}
.btn.pickf{font-size:16px;padding:10px 24px}
.flist{max-width:640px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.fi{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);border-radius:12px;padding:9px 12px;font-size:15px}
.fi .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fi .st{font-size:13px;color:var(--soft)}
.fi .x{width:28px;height:28px;border-radius:8px;border:0;background:rgba(255,255,255,.22);color:#fff;cursor:pointer}
.fi .pbar{width:70px;height:6px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden}.fi .pbar i{display:block;height:100%;background:#fff}

/* logo, ảnh nền, hình minh hoạ */
.brand img{display:block;height:36px;width:auto;max-width:180px;object-fit:contain}
.gbg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center}
.gbg i{position:absolute;inset:0;background:linear-gradient(135deg,var(--g1),var(--g3))}
.art-bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg,var(--g2),var(--g4)) center/cover;background-size:cover;background-position:center;animation:fadeIn .6s both}
.art-bg i{position:absolute;inset:0;background:linear-gradient(135deg,var(--g1),var(--g3));opacity:.8}
@keyframes fadeIn{from{opacity:0}}
.screen.split{max-width:none;width:100%;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;min-height:100dvh}
.screen.split .pane{padding:84px clamp(24px,5vw,64px) 110px;align-self:center;min-width:0}
.screen.split.left{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.screen.split.left .art{order:-1;margin:76px 0 100px 28px}
.art{position:relative;margin:76px 28px 100px 0;border-radius:28px;overflow:hidden;min-height:320px;background:linear-gradient(135deg,var(--g2),var(--g4));box-shadow:0 20px 50px rgba(40,5,0,.28)}
.art-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.banner{position:relative;height:clamp(150px,26vw,260px);border-radius:22px;overflow:hidden;margin-bottom:26px;background:linear-gradient(135deg,var(--g2),var(--g4));box-shadow:0 14px 34px rgba(40,5,0,.25)}
@media (max-width:820px){
  .screen.split,.screen.split.left{display:flex;flex-direction:column;min-height:0}
  .art,.screen.split.left .art{order:-1;margin:74px 20px 0;height:30vh;min-height:170px;flex:none}
  .screen.split .pane{padding:26px 20px 110px}
}