/* timo.logiclab.vn — LogicLab luyện thi TIMO. Giao diện phòng thi: sạch, nghiêm túc, chữ to rõ. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#eef2f9;color:#1c2333;font-size:17px;line-height:1.5;
  min-height:100dvh;display:flex;flex-direction:column;
}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;touch-action:manipulation}
.hidden{display:none !important}

/* ---------- thanh trên ---------- */
.top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg,#0d2f63,#1a4d99);color:#fff;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
}
.brand{font-size:16px}
.brand b{font-size:17px}
.top .sp{flex:1}
.tbtn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);font-size:18px}
.clock{
  font-variant-numeric:tabular-nums;font-weight:900;font-size:20px;background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.5);border-radius:10px;padding:4px 12px
}
.clock.warn{background:#f28c28;border-color:#ffd9ad}
.clock.red{background:#e0534a;border-color:#ffc4c0;animation:blink 1s ease infinite}
@keyframes blink{50%{opacity:.65}}

/* ---------- khung màn ---------- */
.scr{display:none;flex:1}
.scr.open{display:block}
.wrap{max-width:860px;margin:0 auto;padding:16px 14px 40px;width:100%}
.wrap.narrow{max-width:640px}

.hero{text-align:center;padding:18px 8px 6px}
.hero-badge{
  display:inline-block;background:#123c7a;color:#fff;font-weight:900;font-size:26px;letter-spacing:2px;
  border-radius:14px;padding:8px 22px;margin-bottom:10px;box-shadow:0 6px 16px rgba(18,60,122,.35)
}
.hero h1{font-size:26px;color:#0d2f63}
.hero p{font-size:14.5px;color:#54648a;margin-top:8px}

.card{background:#fff;border-radius:16px;padding:18px;margin:14px 0;box-shadow:0 4px 16px rgba(13,47,99,.08)}
.card h3{font-size:19px;color:#0d2f63;margin-bottom:6px}
.card .cardp{font-size:14.5px;color:#54648a;margin-bottom:10px}
.card label{display:block;font-size:14px;font-weight:700;color:#39496e;margin:12px 0 4px}
.card input{width:100%;font-size:19px;padding:12px 14px;border:2.5px solid #cdd9ee;border-radius:12px;background:#fbfcff}
.card input:focus{outline:none;border-color:#1a4d99}
.dob-row{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;gap:8px}
.dob-row select{
  width:100%;font-size:18px;padding:12px 10px;border:2.5px solid #cdd9ee;border-radius:12px;background:#fbfcff;
  color:#1c2333;font-family:inherit;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' fill='none' stroke='%235b73a0' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:18px;padding-right:28px
}
.dob-row select:focus{outline:none;border-color:#1a4d99}
.dob-hint{font-size:12.5px;color:#8b97b5;margin-top:4px;display:grid;grid-template-columns:1fr 1.15fr 1.15fr;gap:8px;text-align:center}
.lvsel{
  width:100%;font-size:18px;padding:12px 14px;border:2.5px solid #cdd9ee;border-radius:12px;background:#fbfcff;
  color:#1c2333;font-family:inherit;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 8l5 5 5-5' fill='none' stroke='%235b73a0' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:36px
}
.lvsel:focus{outline:none;border-color:#1a4d99}
.linkbtn{
  display:block;width:100%;margin-top:12px;padding:10px;font-size:15px;font-weight:800;
  color:#1a5cbf;background:none;text-align:center
}
.linkbtn:active{opacity:.6}
.shead .linkbtn{margin-top:6px;font-size:14px}
.card.center{text-align:center}

.big{
  display:block;width:100%;margin-top:14px;border-radius:14px;padding:15px;font-size:18px;font-weight:800;min-height:54px;text-align:center
}
.big.go{background:linear-gradient(160deg,#123c7a,#1a5cbf);color:#fff}
.big.warn{background:linear-gradient(160deg,#c2410c,#ea701b);color:#fff}
.big.plain{background:#e8eefa;color:#123c7a;border:2px solid #c3d4f0}
.big:active{transform:scale(.985)}
.big.half{flex:1;margin-top:0}
.note{font-size:13px;color:#7c8aab;margin-top:10px;line-height:1.5}
.foot{font-size:12.5px;color:#8b97b5;text-align:center;padding:18px 10px;line-height:1.6}

.qk{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:2.5px solid #cdd9ee;
  border-radius:14px;padding:12px 14px;margin-top:10px;font-size:16px}
.qk b{color:#0d2f63}
.qk:active{background:#f2f6ff}

/* ---------- chọn bảng ---------- */
.shead{text-align:center;padding:8px 0 4px}
.shead h2{font-size:23px;color:#0d2f63}
.shead p{font-size:14.5px;color:#54648a;margin-top:4px}
.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.dv-card{
  background:#fff;border:2.5px solid #cdd9ee;border-radius:14px;padding:14px 10px;text-align:center;
  box-shadow:0 3px 10px rgba(13,47,99,.06)
}
.dv-card:active{transform:scale(.97)}
.dv-card.suggest{border-color:#1a5cbf;box-shadow:0 0 0 3px rgba(26,92,191,.18)}
.dv-card .den{font-size:16px;font-weight:900;color:#0d2f63}
.dv-card .dvi{font-size:13.5px;color:#54648a}
.dv-card .dtag{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:800;color:#1a5cbf;background:#e8f0fe;border-radius:99px;padding:2px 10px}

/* ---------- vòng thi ---------- */
.round-line{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:12px 14px;margin-top:10px;border:2.5px solid #cdd9ee}
.round-line.lock{opacity:.55}
.round-line .ri{font-size:22px}
.round-line b{display:block;font-size:15.5px;color:#0d2f63}
.round-line small{font-size:13px;color:#54648a}
.round-line .tag{margin-left:auto;font-size:12px;font-weight:800;border-radius:99px;padding:3px 10px;background:#e6f7ec;color:#137a3c;white-space:nowrap}
.round-line.lock .tag{background:#f2f2f5;color:#8b97b5}
.sec-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.sec-grid{grid-template-columns:1fr 1fr}}
.sec-btn{
  display:flex;align-items:center;gap:10px;background:#f7faff;border:2px solid #cdd9ee;border-radius:12px;
  padding:11px 12px;text-align:left;font-size:15px
}
.sec-btn:active{background:#e8f0fe}
.sec-btn b{color:#0d2f63;display:block;font-size:15px}
.sec-btn small{color:#54648a;font-size:12.5px}
.sec-btn .prog{margin-left:auto;font-size:12.5px;font-weight:800;color:#1a5cbf;white-space:nowrap}

/* ---------- bìa đề ---------- */
.paper{background:#fff;border-radius:16px;padding:22px;box-shadow:0 6px 20px rgba(13,47,99,.12);border-top:8px solid #123c7a}
.paper-head{display:flex;gap:14px;align-items:center;border-bottom:2px solid #e3eaf6;padding-bottom:12px}
.paper-logo{background:#123c7a;color:#fff;font-weight:900;font-size:22px;letter-spacing:1px;border-radius:12px;padding:10px 16px}
.paper-org{font-size:14.5px;font-weight:800;color:#0d2f63;line-height:1.4}
.paper-org span{font-weight:600;color:#7c8aab;font-size:12.5px}
.paper-round{text-align:center;font-size:19px;font-weight:900;color:#c2410c;margin:14px 0 4px;letter-spacing:.5px}
.paper-div{text-align:center;font-size:17px;font-weight:800;color:#0d2f63;margin-bottom:12px}
.paper-info{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:12px}
.paper-info td{border:1px solid #e3eaf6;padding:8px 10px;color:#39496e}
.paper-info td:first-child{width:44%;background:#f7faff;font-weight:700}
.paper-inst{font-size:14px;color:#39496e;background:#fffbeb;border:1.5px solid #fde68a;border-radius:10px;padding:10px 14px}
.paper-inst ol{margin:6px 0 0 18px}
.paper-inst li{margin:3px 0}

/* ---------- phòng thi ---------- */
.q-meta{font-size:14px;font-weight:900;color:#1a5cbf;text-transform:uppercase;letter-spacing:.5px;margin:6px 2px}
.qcard{padding:20px}
.q-en{font-size:18.5px;font-weight:700;color:#101828;line-height:1.6}
.q-vi{font-size:16px;color:#4b5a7a;line-height:1.6;margin-top:10px;padding-top:10px;border-top:1.5px dashed #e3eaf6}
.ans-row{display:flex;align-items:center;gap:12px;margin-top:16px}
.ans-lbl{font-size:14.5px;font-weight:800;color:#39496e;white-space:nowrap}
.ans-row input{
  flex:1;font-size:24px;font-weight:800;text-align:center;padding:10px;border:3px solid #1a5cbf;
  border-radius:12px;background:#f7faff;color:#0d2f63;min-width:0
}
.ans-row input:focus{outline:none;box-shadow:0 0 0 3px rgba(26,92,191,.2)}
.nav-row{display:flex;gap:10px;margin-top:12px}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-top:14px}
.pal{
  aspect-ratio:1;border-radius:10px;border:2px solid #cdd9ee;background:#fff;font-size:14px;font-weight:800;color:#54648a;
  display:grid;place-items:center
}
.pal.filled{background:#123c7a;border-color:#123c7a;color:#fff}
.pal.cur{box-shadow:0 0 0 3px rgba(234,112,27,.6)}
.pal:active{transform:scale(.94)}

/* ---------- kết quả ---------- */
.medal{font-size:74px;line-height:1}
.score{font-size:40px;font-weight:900;color:#0d2f63;margin-top:6px}
.rs-sub{font-size:15.5px;color:#39496e;margin-top:8px}
.rs-note{font-size:12.5px;color:#8b97b5;margin-top:10px}

/* ---------- xem lại ---------- */
.rv{background:#fff;border-radius:14px;padding:16px;margin:12px 0;border-left:6px solid #cdd9ee}
.rv.ok{border-left-color:#1f9d4d}
.rv.bad{border-left-color:#e0534a}
.rv .rv-meta{font-size:12.5px;font-weight:900;color:#1a5cbf;text-transform:uppercase}
.rv .rv-en{font-size:15.5px;font-weight:700;color:#101828;margin-top:6px}
.rv .rv-vi{font-size:14px;color:#4b5a7a;margin-top:4px}
.rv .rv-ans{font-size:15px;margin-top:8px;font-weight:700}
.rv .rv-ans .good{color:#137a3c}
.rv .rv-ans .wrong{color:#c02736}
.rv .rv-sol{font-size:14px;color:#39496e;background:#f7faff;border-radius:10px;padding:8px 12px;margin-top:8px}

/* ---------- luyện ---------- */
.p-fb{display:none;margin-top:14px;border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.55}
.p-fb.show{display:block}
.p-fb.good{background:#e6f7ec;border:2px solid #9ae0b6;color:#0f6631}
.p-fb.bad{background:#fdecea;border:2px solid #f3b6b0;color:#a8322b}
.p-fb .sol{display:block;margin-top:6px;color:#39496e}

/* ---------- popup ---------- */
.pop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,25,55,.6);
  opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;padding:20px}
.pop.go{opacity:1}
.pop .em{font-size:84px;animation:zoomIn 1.6s ease-out forwards}
.pop .t{color:#fff;font-size:24px;font-weight:900;margin-top:8px}
.pop .s{color:#ffe89a;font-size:16px;margin-top:6px}
@keyframes zoomIn{0%{transform:scale(.3)}40%{transform:scale(1.15)}60%{transform:scale(1)}100%{transform:scale(1)}}