:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#16304c;background:#edf3f8;font-size:16px}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,select{font:inherit}
button{cursor:pointer}
a{color:#126a9f}
.app{min-height:100vh}
.topbar{height:76px;background:#103960;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,58px);border-bottom:4px solid #f4c95d}
.brand{display:flex;align-items:center;gap:13px;font-size:17px;font-weight:800;letter-spacing:.055em;line-height:1.08}
.brand small{display:block;margin-top:4px;font-size:11px;letter-spacing:.19em;font-weight:700;color:#a9cae4}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;border:2px solid #f4c95d;border-radius:8px;color:#f4c95d;font-size:23px;font-family:Georgia,serif}
.official-link{color:#e8f5ff;font-size:14px;text-decoration:none;border:1px solid #497397;padding:10px 14px;border-radius:9px}
.official-link:hover,.official-link:focus-visible{background:#1a4b74}
.layout{max-width:1500px;min-height:calc(100vh - 130px);margin:auto;display:grid;grid-template-columns:300px minmax(0,1fr);gap:27px;padding:32px clamp(16px,3vw,42px)}
.sidebar,.workspace{background:white;border:1px solid #d4e0e9;box-shadow:0 12px 34px rgba(17,52,82,.06)}
.sidebar{border-radius:18px;padding:26px 22px;height:max-content}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.17em;color:#2475a7}
.sidebar h1{font-size:28px;line-height:1.15;margin:10px 0}
.sidebar-head p{color:#60798e;margin:0 0 28px;line-height:1.5;font-size:15px}
.field-group{margin:20px 0}
.field-group label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.field-group select{width:100%;padding:12px 14px;border:1px solid #b8ccd9;border-radius:10px;background:#f9fcfe;color:#17344d;min-height:46px}
.field-group select:focus-visible,.button:focus-visible,.choice:focus-visible,.dot:focus-visible{outline:3px solid #f4c95d;outline-offset:2px}
.exam-meta{border-top:1px solid #dce7ee;border-bottom:1px solid #dce7ee;padding:14px 0;margin-top:20px}
.exam-meta div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.exam-meta span{color:#688196}
.exam-meta strong{color:#17344d}
.source-note{margin-top:25px;background:#f2f7fa;border-left:3px solid #4f9abf;padding:15px 16px;border-radius:0 9px 9px 0;font-size:13px;line-height:1.45}
.source-note strong{font-size:14px}
.source-note p{margin:7px 0 9px;color:#4f6475}
.source-note a{text-decoration:none;font-weight:700}
.workspace{border-radius:18px;padding:clamp(20px,3vw,38px)}
.workspace-top{display:flex;justify-content:space-between;align-items:start;gap:18px}
.workspace-top h2{font-size:clamp(24px,2.8vw,34px);margin:8px 0 5px;line-height:1.2}
.workspace-top p{margin:0;color:#648093;font-size:15px}
.timer{min-width:145px;border:1px solid #cbdae4;background:#f6fafc;border-radius:12px;padding:12px 15px;text-align:center}
.timer span{font-size:10px;font-weight:800;letter-spacing:.08em;color:#55738a;display:block}
.timer strong{display:block;font-size:24px;font-variant-numeric:tabular-nums;margin-top:3px}
.timer.urgent{background:#fff0eb;border-color:#efaa9a;color:#b2402b}
.progress-row{display:flex;justify-content:space-between;margin-top:27px;margin-bottom:10px;font-size:14px;font-weight:700;color:#4d6c82}
.progress-track{height:6px;background:#e5eef4;border-radius:10px;overflow:hidden}
.progress-track>div{height:100%;width:0;background:#f4ba37;transition:width .25s}
.question-card{margin-top:27px;border:1px solid #d8e4eb;border-radius:16px;padding:clamp(20px,3vw,32px);background:#fff}
.question-head{display:flex;justify-content:space-between;align-items:center}
.topic-tag{display:inline-flex;background:#e9f4fa;color:#146b99;padding:7px 11px;border-radius:7px;font-size:13px;font-weight:700}
.question-number{color:#d7e2e9;font-size:34px;font-weight:800}
.passage{font-size:17px;line-height:1.8;color:#294458;background:#f4f8fb;border-left:4px solid #67a7c5;border-radius:8px;padding:16px 18px;margin:18px 0;white-space:pre-line}
.question-text{font-size:clamp(20px,2vw,25px);line-height:1.45;font-weight:700;max-width:850px;margin:18px 0 12px;color:#17324e}
.question-vi{font-size:15px;line-height:1.5;color:#667d8e;margin:0 0 23px}
.choices{display:grid;gap:11px}
.choice{width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid #cbdbe5;border-radius:10px;min-height:57px;padding:11px 14px;color:#263e52;font-size:16px}
.choice:hover{border-color:#6cabc9;background:#f6fbfe}
.choice.selected{border:2px solid #1c79a9;background:#eaf6fb;padding:10px 13px}
.choice-letter{width:29px;height:29px;border:1px solid #aec5d3;border-radius:7px;display:grid;place-items:center;flex:none;font-weight:800;color:#4c7087}
.choice.selected .choice-letter{background:#1c79a9;border-color:#1c79a9;color:white}
.question-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.question-actions-right{display:flex;gap:10px}
.button{border-radius:10px;min-height:45px;padding:10px 17px;font-weight:700;border:1px solid transparent}
.button.primary{background:#f4c95d;color:#18354e}
.button.primary:hover{background:#eab63c}
.button.secondary{background:white;border-color:#c8dbe6;color:#255879}
.button.secondary:hover{background:#f2f8fb}
.button:disabled{opacity:.45;cursor:not-allowed}
.question-nav{margin-top:29px;border-top:1px solid #e2eaf0;padding-top:18px}
.question-nav p{font-size:14px;color:#617c8f;margin:0 0 12px}
.dots{display:flex;gap:9px;flex-wrap:wrap}
.dot{width:37px;height:37px;border:1px solid #cbdce6;border-radius:9px;background:white;color:#486c82;font-weight:700}
.dot.answered{background:#dbeef8;border-color:#6ea6c1}
.dot.current{background:#174d75;color:white;border-color:#174d75}
.result-panel{margin-top:26px}
.result-head{background:#103960;color:white;border-radius:15px;padding:25px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.result-head h3{margin:0;font-size:25px}
.result-head p{margin:6px 0 0;color:#bcd4e6}
.score{font-size:42px;font-weight:800;color:#f4c95d;white-space:nowrap}
.review-item{margin-top:14px;border:1px solid #d9e5ec;border-radius:12px;padding:17px 19px}
.review-item.correct{border-left:4px solid #3c956a}.review-item.wrong{border-left:4px solid #c85f49}
.review-item h4{font-size:16px;line-height:1.45;margin:6px 0}
.review-item p{margin:6px 0;color:#526c7e;line-height:1.5;font-size:14px}
.review-item .status{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.review-item.correct .status{color:#247b54}.review-item.wrong .status{color:#b54b37}
.result-actions{margin:22px 0}
footer{max-width:1500px;margin:auto;padding:0 clamp(16px,3vw,42px) 24px;display:flex;justify-content:space-between;gap:20px;color:#60788a;font-size:12px;line-height:1.5}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.sidebar-head,.exam-meta,.source-note{grid-column:1/-1}.sidebar-head p{margin-bottom:4px}.field-group{margin:12px 0}.exam-meta{display:flex;justify-content:space-between;gap:14px}.exam-meta div{display:block}.exam-meta strong{display:block;margin-top:4px}.source-note{margin-top:14px}}
@media(max-width:620px){.topbar{height:68px;padding:0 15px}.brand{font-size:14px}.brand-mark{width:31px;height:31px}.official-link{font-size:12px;padding:7px 8px}.layout{padding:15px 11px;gap:14px}.sidebar,.workspace{border-radius:13px}.sidebar{display:block;padding:19px}.sidebar h1{font-size:24px}.workspace-top{flex-direction:column}.timer{align-self:stretch;display:flex;justify-content:space-between;align-items:center;text-align:left}.timer strong{margin:0}.question-card{margin-top:20px}.question-actions{flex-wrap:wrap}.question-actions-right{width:100%;justify-content:space-between}.button{padding:9px 12px}.result-head{align-items:start;flex-direction:column}footer{display:block;padding:0 18px 20px}footer span{display:block;margin-top:8px}}
@media print{.app{display:none!important}body::after{content:"Bộ luyện chỉ cung cấp để làm bài trực tuyến tại Hoa Văn GCT.";display:block;padding:40px;color:#333;font-size:18px}}

.button.flagged{border-color:#c27c36;background:#fff5e8;color:#9a5017}
.dot.flagged{box-shadow:inset 0 0 0 2px #e3933a}
.dot.flagged::after{content:'★';font-size:9px;vertical-align:top;margin-left:1px;color:#bd681f}
@media(max-width:620px){.question-actions-right{flex-wrap:wrap}.question-actions-right .button{flex:1 1 auto}.sidebar .field-group{margin:14px 0}}