:root{
  --navy:#141B4D; --navy2:#222C74; --blue:#2D4BD9; --soft:#E6EBFB;
  --purple:#7048E0; --psoft:#EEE9FD; --orange:#F2762E; --osoft:#FDEBDD;
  --green:#1FA97C; --gsoft:#E2F6EE; --red:#D9452F; --rsoft:#FBE7E3;
  --text:#1E2340; --muted:#5F688A; --line:#D9DEEF; --bg:#F7F8FC;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Leelawadee UI","Segoe UI",Tahoma,sans-serif; background:var(--bg); color:var(--text); line-height:1.6;}
.wrap{max-width:900px; margin:0 auto; padding:20px 16px 60px;}
.wrap.wide{max-width:1200px;}
header.top{background:var(--navy); color:#fff; padding:26px 16px 22px; text-align:center;}
header.top .pill{display:inline-block; background:var(--orange); color:#fff; font-weight:700; font-size:.85rem; padding:3px 14px; border-radius:999px; margin-bottom:10px;}
header.top h1{font-size:1.5rem; line-height:1.3;}
header.top p{color:#AEB8EE; font-size:.95rem; margin-top:6px;}
.card{background:#fff; border-radius:14px; box-shadow:0 3px 12px rgba(32,38,74,.10); padding:22px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px;}
@media (max-width:640px){.grid2{grid-template-columns:1fr;}}
.test-card{border-radius:14px; padding:22px; background:#fff; box-shadow:0 3px 12px rgba(32,38,74,.10); border-top:6px solid var(--blue); display:flex; flex-direction:column; gap:10px;}
.test-card.post{border-top-color:var(--orange);}
.test-card h2{font-size:1.2rem;}
.test-card .tag{align-self:flex-start; font-size:.8rem; font-weight:700; color:var(--blue); background:var(--soft); padding:2px 10px; border-radius:999px;}
.test-card.post .tag{color:var(--orange); background:var(--osoft);}
.test-card ul{margin-left:18px; font-size:.9rem; color:var(--muted);}
button, a.btn-ghost{font-family:inherit; font-size:1rem; font-weight:700; border:none; border-radius:10px; padding:11px 22px; cursor:pointer; transition:.15s;}
a.btn-ghost{display:inline-block; text-decoration:none; background:#fff; color:var(--blue); border:2px solid var(--blue);}
a.btn-ghost:hover{background:var(--soft);}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:#1E3AB0;}
.btn-orange{background:var(--orange); color:#fff;}
.btn-orange:hover{background:#D9600F;}
.btn-ghost{background:#fff; color:var(--blue); border:2px solid var(--blue);}
.btn-ghost:hover{background:var(--soft);}
.btn-muted{background:#EAEDF7; color:var(--muted);}
.btn-danger{background:var(--rsoft); color:var(--red);}
button:disabled{opacity:.45; cursor:not-allowed;}
.center{text-align:center;}
.muted{color:var(--muted);}
.small{font-size:.88rem;}
h2.sec{font-size:1.25rem; margin:26px 0 12px;}
/* quiz */
.progress-track{background:#E8ECF8; border-radius:999px; height:10px; margin:14px 0 4px; overflow:hidden;}
.progress-fill{background:var(--blue); height:100%; width:0; border-radius:999px; transition:width .25s;}
.post-mode .progress-fill{background:var(--orange);}
.qhead{display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:.9rem; color:var(--muted); gap:10px; flex-wrap:wrap;}
.qhead .timer{font-weight:700; color:var(--red);}
.qtext{font-size:1.15rem; font-weight:700; margin:14px 0 16px; line-height:1.55;}
.opt{display:flex; gap:12px; align-items:flex-start; background:#fff; border:2px solid var(--line); border-radius:12px; padding:13px 16px; margin-bottom:10px; cursor:pointer; transition:.12s;}
.opt:hover{border-color:var(--blue);}
.opt.sel{border-color:var(--blue); background:var(--soft);}
.post-mode .opt.sel{border-color:var(--orange); background:var(--osoft);}
.opt .key{flex:0 0 28px; height:28px; border-radius:50%; background:#EEF1FA; color:var(--muted); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.9rem;}
.opt.sel .key{background:var(--blue); color:#fff;}
.post-mode .opt.sel .key{background:var(--orange);}
.navrow{display:flex; justify-content:space-between; gap:10px; margin-top:18px;}
input.field{width:100%; font-family:inherit; font-size:1rem; padding:11px 14px; border:2px solid var(--line); border-radius:10px; margin-top:6px;}
input.field:focus{outline:none; border-color:var(--blue);}
label{font-weight:700; font-size:.95rem;}
/* result */
.score-big{font-size:3.2rem; font-weight:800; line-height:1.1;}
.pass-badge{display:inline-block; padding:4px 18px; border-radius:999px; font-weight:800; margin-top:6px;}
.pass{background:var(--gsoft); color:var(--green);}
.npass{background:var(--rsoft); color:var(--red);}
table{width:100%; border-collapse:collapse; background:#fff; font-size:.9rem;}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top;}
th{background:var(--soft);}
tr:nth-child(even) td{background:#FBFCFE;}
.review-item{border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:#fff;}
.review-item .rq{font-weight:700;}
.review-item .ok{color:var(--green); font-weight:700;}
.review-item .bad{color:var(--red); font-weight:700;}
.review-item .ex{font-size:.88rem; color:var(--muted); margin-top:4px;}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:14px 0;}
.stat{background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(32,38,74,.08); padding:14px; text-align:center;}
.stat .num{font-size:1.6rem; font-weight:800;}
.stat .lbl{font-size:.82rem; color:var(--muted);}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0;}
.banner{border-radius:12px; padding:14px 18px; margin-top:14px; font-size:.95rem;}
.banner.grow{background:var(--gsoft); color:#14503C;}
.warnbox{background:var(--osoft); color:#7A4517; border-radius:10px; padding:10px 14px; margin-top:12px; font-size:.9rem;}
.errbox{background:var(--rsoft); color:var(--red); border-radius:10px; padding:10px 14px; margin-top:12px; font-size:.9rem;}
/* report */
.report-wrap{padding-top:18px;}
.summary-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:14px 0;}
.form-row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:14px 0;}
.form-row .grp{display:flex; flex-direction:column;}
.badge-pre{background:var(--soft); color:var(--blue); padding:2px 10px; border-radius:999px; font-weight:700; font-size:.8rem;}
.badge-post{background:var(--osoft); color:var(--orange); padding:2px 10px; border-radius:999px; font-weight:700; font-size:.8rem;}
.table-scroll{overflow-x:auto;}
.pos{color:var(--green); font-weight:800;}
.neg{color:var(--red); font-weight:800;}
@media print{
  header.top{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .noprint{display:none !important;}
  body{background:#fff;}
}