/* ============ GO MEDIA QUIZ — bảng điều khiển phòng live ============ */
:root{
  --navy:#0E2A75;
  --navy-deep:#081A4D;
  --ink:#141A2E;
  --pink:#FE2C55;
  --paper:#F3F5FA;
  --card:#FFFFFF;
  --line:#DDE3F0;
  --muted:#68708C;
  --green:#0F9D63;
  --amber:#B7791F;
  --radius:14px;
  --shadow:0 8px 28px rgba(14,42,117,.08);
  font-size:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.55;
  min-height:100vh;display:flex;flex-direction:column;
}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ---------- Thanh trên ---------- */
.topbar{
  background:var(--navy-deep);color:#fff;
  display:flex;justify-content:space-between;align-items:center;
  padding:.65rem 1.1rem;position:sticky;top:0;z-index:50;
}
.brand{font-weight:800;letter-spacing:.14em;font-size:.8rem}
.brand span{color:var(--pink)}
.onair{
  display:flex;align-items:center;gap:.45rem;
  font-size:.68rem;font-weight:800;letter-spacing:.22em;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.28rem .75rem;
}
.onair .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--pink);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
@media (prefers-reduced-motion:reduce){.onair .dot{animation:none}}

/* ---------- Khung màn hình ---------- */
.screen{width:100%;max-width:1060px;margin:0 auto;padding:1.4rem 1rem 3rem;flex:1}
.hero{padding:1.6rem .2rem 1.4rem}
.eyebrow{color:var(--pink);font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem}
.hero h1{
  font-weight:800;color:var(--navy);
  font-size:clamp(1.9rem,5.6vw,3rem);line-height:1.08;margin:.35rem 0 .55rem;
}
.hero .sub{color:var(--muted);max-width:34rem}
.facts{display:flex;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}
.fact{
  background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:.7rem 1.15rem;min-width:6.2rem;text-align:center;
}
.fact b{display:block;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.fact span{font-size:.72rem;opacity:.75;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Card & form ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem}
.card h2{color:var(--navy);font-weight:800;font-size:1.15rem;margin-bottom:.9rem}
label{display:block;font-weight:600;font-size:.88rem;margin:.85rem 0 .3rem}
label em{color:var(--pink);font-style:normal}
input,select{
  width:100%;font:inherit;padding:.72rem .85rem;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
input:focus,select:focus,button:focus-visible{outline:3px solid rgba(14,42,117,.28);outline-offset:1px;border-color:var(--navy)}
.rules{margin:1.1rem 0 .3rem;padding-left:1.15rem;color:var(--muted);font-size:.88rem}
.rules li{margin-bottom:.3rem}
.warn{background:#FFF6E5;border:1px solid #EAD29A;color:var(--amber);border-radius:10px;padding:.7rem .9rem;font-size:.87rem;margin-bottom:1rem}

/* ---------- Nút ---------- */
.btn{
  font:inherit;font-weight:700;border:none;border-radius:11px;cursor:pointer;
  padding:.7rem 1.25rem;transition:transform .06s ease,box-shadow .15s ease,background .15s;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-deep)}
.btn.danger{background:var(--pink);color:#fff}
.btn.danger:hover{filter:brightness(.93)}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--navy)}
.btn.big{width:100%;padding:.95rem;font-size:1.02rem;margin-top:1.2rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Thanh làm bài ---------- */
.quizbar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.4rem .15rem .65rem;
}
.who{display:flex;align-items:center;gap:.6rem;min-width:0}
.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{
  background:var(--navy);color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;border-radius:999px;padding:.22rem .6rem;white-space:nowrap;
}
.timer{
  font-weight:800;font-variant-numeric:tabular-nums;font-size:1.25rem;color:var(--navy);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.28rem .8rem;
}
.timer.low{color:var(--pink);border-color:var(--pink);animation:pulse 1.2s infinite}
.progress{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:1.1rem}
#progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--pink));border-radius:99px;transition:width .25s}

/* ---------- Lưới câu hỏi + bảng số ---------- */
.quizgrid{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:880px){
  .quizgrid{grid-template-columns:1fr 300px;align-items:start}
  .palette-card{position:sticky;top:4.4rem}
}
.qmeta{color:var(--muted);font-size:.85rem;font-weight:600;margin-bottom:.45rem}
.qmeta b{color:var(--pink);font-size:1rem}
.qtext{font-size:1.12rem;font-weight:700;line-height:1.5;color:var(--ink);margin-bottom:1.1rem}
.options{display:grid;gap:.6rem}
.opt{
  display:flex;gap:.75rem;align-items:flex-start;width:100%;text-align:left;
  font:inherit;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:.78rem .85rem;cursor:pointer;transition:border-color .12s,background .12s;
}
.opt:hover{border-color:var(--navy)}
.opt .tag{
  flex:0 0 1.7rem;height:1.7rem;border-radius:8px;display:grid;place-items:center;
  background:var(--paper);color:var(--navy);font-weight:800;font-size:.86rem;
}
.opt.sel{border-color:var(--navy);background:#EEF2FC}
.opt.sel .tag{background:var(--navy);color:#fff}
.qnav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.25rem}

.palette-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.palette-head h3{color:var(--navy);font-size:.95rem;font-weight:800}
.palette-head .muted{font-size:.78rem}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.35rem,1fr));gap:.42rem}
.pal{
  font:inherit;font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums;
  border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:9px;padding:.42rem 0;cursor:pointer;transition:all .1s;
}
.pal:hover{border-color:var(--navy);color:var(--navy)}
.pal.done{background:var(--navy);border-color:var(--navy);color:#fff}
.pal.cur{box-shadow:0 0 0 2.5px var(--pink);border-color:var(--pink)}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;margin:1rem 0 .2rem;font-size:.74rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:.35rem}
.sw{width:.85rem;height:.85rem;border-radius:4px;border:1.5px solid var(--line);display:inline-block}
.sw-done{background:var(--navy);border-color:var(--navy)}
.sw-cur{box-shadow:0 0 0 2px var(--pink)}

/* ---------- Kết quả ---------- */
.result-card{max-width:30rem;margin:2.4rem auto 0;text-align:center;padding:2.2rem 1.6rem}
.ring{
  width:9.5rem;height:9.5rem;border-radius:50%;margin:0 auto 1.1rem;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  border:7px solid var(--line);
}
.ring b{font-size:2.3rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.ring span{font-size:.78rem;color:var(--muted)}
.ring.pass{border-color:var(--green)}
.ring.fail{border-color:var(--pink)}
#result-title{color:var(--navy);font-weight:800}
.result-card .sub{color:var(--muted);margin:.4rem 0 1.1rem}
.result-meta{display:flex;justify-content:center;gap:2.2rem;margin-bottom:1rem}
.result-meta b{display:block;font-size:1.15rem;color:var(--ink)}
.result-meta .muted{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(8,17,45,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.modal-box{max-width:24rem;width:100%}
.modal-box h3{color:var(--navy);font-weight:800;margin-bottom:.5rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.2rem}
.center{text-align:center}
.spinner{
  width:2.6rem;height:2.6rem;margin:0 auto .9rem;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--pink);animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.foot{text-align:center;color:var(--muted);font-size:.75rem;padding:1.2rem 1rem 1.6rem}