/* ============================================================
   MONA IELTS Mock Test — style theo MONA Color Guide
   White dominant · ink text · 5 màu M-núi làm accent
   ============================================================ */
:root{
  --mona-white:#FFFFFF;
  --mona-paper:#F5F6FA;
  --mona-ink:#1B1F2A;
  --mona-deep-blue:#2E4EA8;
  --mona-blue:#3B82D6;
  --mona-purple:#963FDA;
  --mona-magenta:#E23164;
  --mona-orange:#F79009;
  --mona-ridge:linear-gradient(100deg,#2E4EA8,#3B82D6 27%,#963FDA 54%,#E23164 77%,#F79009);
  --ink-soft:#4A5064;
  --line:#E4E7F0;
  --ok:#1E9E6A;
  --radius:14px;
  --shadow:0 6px 24px rgba(27,31,42,.07);
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--mona-ink);background:var(--mona-white);line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--mona-blue);text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;
  font-weight:700;font-size:15.5px;padding:13px 28px;transition:.18s;white-space:nowrap}
.btn-cta{background:var(--mona-orange);color:var(--mona-ink)}
.btn-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-blue{background:var(--mona-blue);color:#fff}
.btn-blue:hover{background:var(--mona-deep-blue)}
.btn-ghost{background:#fff;color:var(--mona-ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--mona-blue);color:var(--mona-blue)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ============================================================
   PHÒNG THI (exam.html / writing.html / speaking.html)
   ============================================================ */
.exam-body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--mona-paper)}

/* header thi: trắng, viền gradient mảnh dưới */
.exam-top{flex:0 0 auto;background:#fff;display:flex;align-items:center;gap:16px;
  padding:10px 20px;position:relative;z-index:30}
.exam-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--mona-ridge)}
.exam-brand{display:flex;align-items:center;gap:10px;min-width:0}
.exam-brand img{height:26px;width:auto}
.exam-brand .who{font-size:12.5px;color:var(--ink-soft);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-brand .who b{display:block;color:var(--mona-ink);font-size:13.5px}
.exam-timer{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--mona-paper);
  border:1.5px solid var(--line);border-radius:999px;padding:7px 18px;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.exam-timer svg{flex:0 0 auto}
.exam-timer.warn{border-color:var(--mona-orange);color:var(--mona-orange);animation:pulse 1.2s infinite}
.exam-timer.danger{border-color:var(--mona-magenta);color:var(--mona-magenta);animation:pulse .7s infinite}
@keyframes pulse{50%{opacity:.55}}
.exam-actions{display:flex;gap:10px}

/* vùng đề 2 cột */
.exam-main{flex:1 1 auto;display:flex;min-height:0}
.pane{flex:1 1 50%;overflow-y:auto;padding:26px 30px 60px;background:#fff}
.pane-left{border-right:1.5px solid var(--line)}
.pane-single{flex-basis:100%}
.pane h2{font-size:20px;margin-bottom:4px}
.pane h3{font-size:16.5px;margin:18px 0 8px}
.passage-title{font-size:22px;font-weight:800;margin:6px 0 14px}
.passage p{margin:0 0 14px;color:var(--mona-ink)}
.passage .para-label{font-weight:800;color:var(--mona-deep-blue);margin-right:6px}
.part-meta{display:inline-flex;align-items:center;gap:8px;background:var(--mona-paper);border-radius:999px;
  padding:4px 14px;font-size:13px;font-weight:700;color:var(--mona-deep-blue);margin-bottom:10px}
.instructions{background:var(--mona-paper);border-left:4px solid var(--mona-blue);border-radius:0 10px 10px 0;
  padding:12px 16px;font-size:14.5px;color:var(--ink-soft);margin:14px 0 18px}
.instructions b{color:var(--mona-ink)}

/* highlight + note trên passage */
mark.hl{background:rgba(247,144,9,.35);border-radius:3px;padding:0 1px}
mark.hl.note{background:rgba(150,63,218,.22);border-bottom:2px dotted var(--mona-purple);cursor:help}
#hlToolbar{position:absolute;z-index:99;display:none;background:var(--mona-ink);border-radius:10px;padding:6px;gap:4px;box-shadow:var(--shadow)}
#hlToolbar button{background:transparent;border:0;color:#fff;font-size:13px;font-weight:600;padding:6px 10px;border-radius:7px}
#hlToolbar button:hover{background:rgba(255,255,255,.14)}

/* câu hỏi */
.q-block{margin-bottom:26px}
.q-item{padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:#fff;scroll-margin-top:80px}
.q-item.active{border-color:var(--mona-blue);box-shadow:0 0 0 3px rgba(59,130,214,.14)}
.q-item.flagged{border-color:var(--mona-purple)}
.q-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:8px;
  background:var(--mona-deep-blue);color:#fff;font-weight:800;font-size:13.5px;margin-right:9px;padding:0 6px}
.q-text{font-size:15.5px}
.q-opts{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.q-opts label{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1.5px solid var(--line);
  border-radius:10px;font-size:15px;cursor:pointer;transition:.15s}
.q-opts label:hover{border-color:var(--mona-blue)}
.q-opts label:has(input:checked){border-color:var(--mona-blue);background:rgba(59,130,214,.07)}
.q-opts input{accent-color:var(--mona-blue);margin-top:4px;flex:0 0 auto}
.q-gap input[type=text],.q-item select{border:1.5px solid var(--line);border-radius:9px;padding:8px 12px;
  font-size:15px;font-family:inherit;min-width:170px;color:var(--mona-ink)}
.q-gap input[type=text]:focus,.q-item select:focus{outline:none;border-color:var(--mona-blue);box-shadow:0 0 0 3px rgba(59,130,214,.14)}
.q-flag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);
  cursor:pointer;user-select:none;float:right}
.q-flag input{accent-color:var(--mona-purple)}
.q-head{display:flex;align-items:flex-start}
.gaptext{line-height:2.35;font-size:15.5px}
.gaptext input{border:0;border-bottom:2px solid var(--mona-blue);background:rgba(59,130,214,.06);
  border-radius:6px 6px 0 0;padding:4px 10px;font-size:15px;font-family:inherit;width:150px;text-align:center;color:var(--mona-ink)}
.gaptext input:focus{outline:none;background:rgba(59,130,214,.12)}
.gaptext .gn{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  border-radius:6px;background:var(--mona-deep-blue);color:#fff;font-weight:800;font-size:12px;margin-right:4px}

/* thanh điều hướng câu dưới đáy */
.exam-nav{flex:0 0 auto;background:#fff;border-top:1.5px solid var(--line);padding:10px 18px;
  display:flex;align-items:center;gap:14px;overflow-x:auto}
.nav-part{display:flex;align-items:center;gap:5px}
.nav-part .lbl{font-size:12px;font-weight:800;color:var(--ink-soft);margin-right:4px;white-space:nowrap}
.nav-q{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line);background:#fff;
  font-size:13px;font-weight:700;color:var(--mona-ink);position:relative;flex:0 0 auto}
.nav-q.answered{background:var(--mona-blue);border-color:var(--mona-blue);color:#fff}
.nav-q.current{outline:2.5px solid var(--mona-orange);outline-offset:1.5px}
.nav-q.flagged::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;
  border-radius:50%;background:var(--mona-purple);border:2px solid #fff}

/* audio bar (listening) */
.audio-bar{display:flex;align-items:center;gap:14px;background:var(--mona-paper);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;margin-bottom:18px}
.audio-bar .ico{width:42px;height:42px;border-radius:12px;background:var(--mona-blue);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.audio-bar .st{font-size:13.5px;color:var(--ink-soft)}
.audio-bar .st b{display:block;color:var(--mona-ink);font-size:15px}
.audio-progress{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.audio-progress i{display:block;height:100%;width:0;background:var(--mona-ridge);transition:width .5s linear}

/* modal */
.modal-wrap{position:fixed;inset:0;background:rgba(27,31,42,.55);display:none;align-items:center;
  justify-content:center;z-index:100;padding:20px}
.modal-wrap.show{display:flex}
.modal{background:#fff;border-radius:20px;max-width:480px;width:100%;padding:30px 30px 26px;text-align:center;box-shadow:var(--shadow)}
.modal h3{font-size:21px;margin-bottom:10px}
.modal p{color:var(--ink-soft);font-size:15px;margin-bottom:20px}
.modal .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   WRITING
   ============================================================ */
.writing-area{width:100%;height:100%;min-height:340px;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;font-family:inherit;font-size:15.5px;line-height:1.8;resize:none;color:var(--mona-ink)}
.writing-area:focus{outline:none;border-color:var(--mona-blue);box-shadow:0 0 0 3px rgba(59,130,214,.12)}
.wcount{font-size:13.5px;color:var(--ink-soft);margin-top:8px;display:flex;justify-content:space-between}
.wcount b{color:var(--mona-blue);font-size:15px}
.task-tab{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:14px}
.task-tab button{border:0;background:#fff;padding:9px 22px;font-weight:700;font-size:14px;color:var(--ink-soft)}
.task-tab button.on{background:var(--mona-deep-blue);color:#fff}

/* ============================================================
   TRANG THƯỜNG (index / result) — landing style
   ============================================================ */
.page{max-width:1120px;margin:0 auto;padding:0 22px}
.site-head{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:50;border-bottom:1px solid var(--line)}
.site-head .page{display:flex;align-items:center;gap:22px;height:66px}
.site-head img{height:30px}
.site-head nav{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:14.5px;font-weight:600}
.site-head nav a{color:var(--mona-ink)}
.site-head nav a:hover{color:var(--mona-blue)}
.grad-text{background:var(--mona-ridge);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--mona-paper);border:1px solid var(--line);
  border-radius:999px;padding:6px 16px;font-size:13px;font-weight:700;color:var(--mona-deep-blue)}
.section{padding:64px 0}
.section h2.sec-title{font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.3;margin-bottom:10px}
.sec-sub{color:var(--ink-soft);font-size:16.5px;max-width:640px}
.cards{display:grid;gap:18px;margin-top:30px}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:24px;transition:.2s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card h3{font-size:17.5px;margin-bottom:6px}
.card p{font-size:14.5px;color:var(--ink-soft)}
.card .meta{font-size:13px;color:var(--ink-soft);margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}
.card .meta span{display:inline-flex;align-items:center;gap:5px}
.tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.4px;border-radius:6px;padding:3px 9px;text-transform:uppercase}
footer.site-foot{border-top:1.5px solid var(--line);padding:34px 0;margin-top:40px}
footer.site-foot .page{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
footer.site-foot img{height:24px}
footer.site-foot p{font-size:13.5px;color:var(--ink-soft)}
footer.site-foot .cta-line{margin-left:auto;font-size:14px;font-weight:600}

@media (max-width:960px){
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .cards.c3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .exam-main{flex-direction:column}
  .pane{flex-basis:auto;min-height:40vh}
  .pane-left{border-right:0;border-bottom:1.5px solid var(--line)}
  .exam-brand .who{display:none}
  .cards.c4,.cards.c3,.cards.c2{grid-template-columns:1fr}
  .exam-timer{font-size:15px;padding:6px 13px}
  .btn{padding:11px 20px;font-size:14.5px}
}