/* ielts-exam.css — Màn hình làm bài kiểu IELTS trên máy: giới thiệu bài thi, thanh trên/dưới, Settings, kéo – thả, Reading/Writing/Speaking
   (tách từ index.html; thứ tự nạp các file CSS phải giữ như trong index.html) */
/* ================= Trang chọn bài: thẻ "Practice test N" ================= */
.tests{--navy:#1f3a5f;display:block}
.tcard{font-family:Montserrat,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:#fff;border-radius:22px;padding:22px 24px 24px;margin:0 0 22px;box-shadow:0 8px 28px rgba(31,58,95,.10);color:var(--navy)}
.tcard h2{margin:0 0 16px;font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.scard{--sc:#2aa5bd;--sb:#cfe8ed;--sg:linear-gradient(180deg,#3bb8cf,#1e8ba1);display:flex;flex-direction:column;align-items:center;gap:8px;min-height:236px;padding:16px 12px 14px;border:1px solid var(--sb);border-radius:16px;background:#fff;transition:box-shadow .15s,transform .15s}
.scard:hover{box-shadow:0 6px 18px rgba(31,58,95,.10);transform:translateY(-1px)}
.s-reading{--sc:#2e6b3f;--sb:#d2e3d7;--sg:linear-gradient(180deg,#3f8452,#22572f)}
.s-writing{--sc:#e58f3d;--sb:#f7e3cf;--sg:linear-gradient(180deg,#f7b56f,#d98a3d)}
.s-speaking{--sc:#b0566a;--sb:#f0d5dc;--sg:linear-gradient(180deg,#c86f82,#a44d60)}
.sh{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:var(--navy)}
.sh svg{width:30px;height:30px;flex:none;stroke:var(--sc);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sinfo{font-size:11.5px;color:#7a8898;text-align:center;line-height:1.35}
.sstat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;min-height:56px}
.sband{font-size:30px;font-weight:800;line-height:1.1;color:var(--sc)}
.ssub{font-size:11.5px;color:#7a8898}
.sdone{font-size:15px;font-weight:700;color:var(--sc)}
.snone{font-size:13px;color:#a0abb8}
.take{width:100%;max-width:172px;border:0;border-radius:999px;padding:11px 0;background:var(--sg);color:#fff;font:800 16px Montserrat,"Segoe UI",Arial,sans-serif;text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 3px 9px rgba(0,0,0,.16);cursor:pointer;transition:filter .15s,transform .05s}
.take:hover{filter:brightness(1.08)}
.take:active{transform:translateY(1px)}
.keybtn{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid #cdd5dd;border-radius:50%;background:#fff;cursor:pointer;padding:0}
.keybtn svg{width:22px;height:22px;stroke:var(--sc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.keybtn:hover:not(:disabled){border-color:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 18%,transparent)}
.keybtn:disabled{opacity:.38;cursor:not-allowed}
.scard.empty{justify-content:flex-start;background:#fafbfc}
.take:focus-visible,.keybtn:focus-visible,.startfull:focus-visible,.finfo:focus-visible{outline:3px solid #7aa7ff;outline-offset:2px}
.fullbar{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;margin-top:16px;padding:14px 22px 14px 62px;border-radius:16px;background:linear-gradient(180deg,#eceff2,#d9dde3)}
.ribbon{position:absolute;left:-32px;top:12px;width:112px;padding:2px 0;background:#d0121b;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-align:center;transform:rotate(-45deg);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.fgrid svg{width:30px;height:30px;stroke:var(--navy);fill:none;stroke-width:1.7;display:block}
.ftitle{font-size:20px;font-weight:800;color:var(--navy);white-space:nowrap}
.finfo{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:3px;vertical-align:super;border:1.4px solid var(--navy);border-radius:50%;font-size:9px;font-weight:800;cursor:help}
.fprog{position:relative;flex:1;min-width:150px;max-width:300px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--navy);border-radius:999px;background:#eef1f5;overflow:hidden;font-size:13px;color:var(--navy)}
.fprog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#a9d6e2,#6fb5c9);border-radius:999px 0 0 999px}
.fprog span{position:relative}
.startfull{margin-left:auto;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:14px 40px;background:#2a4365;color:#fff;font:800 17px Montserrat,"Segoe UI",Arial,sans-serif;cursor:pointer;box-shadow:0 3px 10px rgba(31,58,95,.3)}
.startfull svg{width:20px;height:20px;fill:#fff}
.startfull:hover:not(:disabled){background:#1f3552}
.startfull:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:860px){.skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .tcard{padding:18px 14px 18px;border-radius:18px}
  .tcard h2{font-size:21px}
  .scard{min-height:0;padding:14px 8px 12px}
  .sh{font-size:15px}.sh svg{width:24px;height:24px}
  .take{font-size:14px;padding:10px 0}
  .fullbar{flex-wrap:wrap;gap:12px;padding:14px 14px 14px 52px}
  .fprog{order:3;flex-basis:100%;max-width:none}
  .startfull{padding:12px 28px}
}

/* ================= Trang giới thiệu bài thi (giống IELTS trên máy) ================= */
#examIntro,#confirmDetails,#soundCheck{min-height:100vh;background:#e0edf5;font-family:Arial,Helvetica,sans-serif;color:#222}
.ei-bar{display:flex;align-items:center;gap:12px;height:52px;padding:0 20px;background:#fafafa;border-bottom:1px solid #d9dde1;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ei-ico{width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#8c8c8c;border:0;padding:0}
.ei-ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ei-btn{cursor:pointer}.ei-btn:hover{background:#767676}
.ei-btn:focus-visible,.ei-help:focus-visible,#eiVol:focus-visible,.ei-start:focus-visible,#eiBack:focus-visible{outline:3px solid #2c7bb6;outline-offset:2px}
.ei-cand{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ei-spacer{flex:1}
.ei-vol{display:flex;align-items:center;gap:10px;margin-right:40px}
#eiVol{--p:90%;-webkit-appearance:none;appearance:none;width:112px;height:12px;border-radius:6px;border:0;cursor:pointer;background:linear-gradient(90deg,#8c8c8c var(--p),#d3e5f0 var(--p))}
#eiVol::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:1px solid #9aa4ab;box-shadow:0 1px 2px rgba(0,0,0,.3)}
#eiVol::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid #9aa4ab;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ei-help{background:#8c8c8c;color:#fff;border:0;border-radius:5px;padding:9px 14px;font:16px Arial,sans-serif;cursor:pointer}
.ei-help:hover{background:#767676}
.ei-page{padding:34px 16px 40px}
.ei-card{max-width:692px;margin:0 auto;border:1px solid #cbdae5;border-radius:14px;padding:52px 20px 36px}
.ei-card h1{margin:0 0 14px;font-size:24px;font-weight:700;color:#2b2b2b}
.ei-time{margin:0 0 36px;font-size:14px}
.ei-card h2{margin:0 0 3px;font-size:24px;font-weight:700;text-transform:uppercase;color:#2b2b2b}
.ei-card ul{margin:0 0 40px;padding-left:40px;font-size:14px;line-height:25px}
.ei-card ul:nth-of-type(1){margin-bottom:36px}
.ei-warn{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 14px;font-size:14px}
.ei-warn i{width:15px;height:15px;flex:none;border-radius:50%;background:#2c7bb6;color:#fff;font:700 11px/15px Arial,sans-serif;text-align:center;font-style:normal}
.ei-opts{max-width:560px;margin:-16px auto 26px;padding:14px 18px;border:1px solid #cbdae5;border-radius:10px;background:rgba(255,255,255,.55);font-size:14px}
.ei-opts[hidden]{display:none}
.ei-opts .chk{display:flex;gap:9px;align-items:flex-start;margin:6px 0;line-height:1.45;font-weight:400;cursor:pointer}
.ei-opts .chk[hidden]{display:none}
.ei-opts input{margin-top:3px;flex:none}
.ei-cond{max-width:560px;margin-left:auto;margin-right:auto;text-align:left;align-items:flex-start;color:#3b4a57}
.ei-cond i{margin-top:2px}
.ei-start{display:block;margin:0 auto;padding:10px 12px;background:#fff;border:1px solid #dcdcdc;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.18);font:700 14px Arial,sans-serif;cursor:pointer}
.ei-start:hover{background:#f4f8fb}
.ei-back{max-width:692px;margin:14px auto 0;text-align:left}
#eiBack,#cdBack,#scBack{background:none;border:0;padding:4px 0;color:#2c5f86;font-size:13px;cursor:pointer;text-decoration:underline}
@media (max-width:640px){.ei-bar{padding:0 10px;gap:8px}.ei-vol{margin-right:8px}#eiVol{width:70px}.ei-card{padding:30px 14px 26px}.ei-card h2{font-size:19px}.ei-cand{font-size:14px}}

/* ---- Confirm details / Sound check (trước khi vào Listening, giống bài thi thật) ---- */
.ei-narrow{max-width:480px;text-align:center}
.ei-narrow h1{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 18px}
.ei-hpico{width:34px;height:34px;flex:none;stroke:#5d6a74;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ei-narrow > p{margin:0 0 26px;font-size:15px;line-height:1.6;color:#333}
.ei-narrow .btn-play{margin:0 auto 26px}
.cd-box{border:1px solid #d9dde1;border-radius:8px;padding:2px 22px;margin:0 0 24px;text-align:left}
.cd-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #eceff2;font-size:15px}
.cd-row:last-child{border-bottom:0}
.cd-lbl{color:#5d6a74}
.cd-val{font-weight:700;color:#222}
@media (max-width:640px){.ei-narrow{max-width:100%}}

/* ================= Màn hình làm bài kiểu IELTS trên máy (Listening · Reading · Writing · Speaking) ================= */
.hico{display:none;width:36px;height:36px;flex:none;align-items:center;justify-content:center;border-radius:50%;background:#8c8c8c}
.hico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#test.exam{background:#e0edf5;font-family:Arial,Helvetica,sans-serif;color:#222}
.exam .hico{display:inline-flex}
.exam .hdr{background:#fafafa;color:#222;padding:0 20px;border-bottom:1px solid #d9dde1;box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative;z-index:2}
.exam .hdr .who{color:#222;font-size:17px;gap:12px}
.exam .hdr .logo{display:none}
.exam .timer{display:flex;align-items:center;gap:10px;color:#222;font-size:14px;font-weight:400;cursor:default;padding:4px 8px}
.exam .timer:hover{background:none}
.exam .tn{font-size:18px}
.exam .hright{align-items:center;gap:8px}
.exam .vol{gap:10px;margin-right:18px;color:#222}
.exam #vol{--p:90%;-webkit-appearance:none;appearance:none;width:112px;height:12px;border-radius:6px;border:0;cursor:pointer;background:linear-gradient(90deg,#8c8c8c var(--p),#d3e5f0 var(--p))}
.exam #vol::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:1px solid #9aa4ab;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.exam #vol::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid #9aa4ab;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.exam .hbtn{background:#8c8c8c;color:#fff;border:0;border-radius:5px;padding:9px 14px;font-size:16px}
.exam .hbtn:hover{background:#767676}
.exam #btnSkip,.exam #btnExit{background:none;color:#5d6a74;border:1px solid #b7c2ca;font-size:13px;padding:6px 10px;margin-left:2px}
.exam #btnSkip:hover,.exam #btnExit:hover{background:#e6eef3}
.k-listening .band{display:none}
.k-listening #paneR .pane-in{max-width:960px;margin:0 auto;padding:26px 28px 40px}
.exam .phead h2{margin:0 0 6px;font-size:22px}
.exam .phead p{margin:0 0 4px;font-size:14px}
.exam .stage{display:none;color:#5d6a74;font-style:italic;font-size:13px}
.exam.practice .stage{display:block}
.exam .group{margin:30px 0 0}
.exam .ghead{background:none;border:0;border-radius:0;padding:0;margin:0 0 14px}
.exam .ghead h3{margin:0 0 4px;font-size:14px}
.exam .ghead p{margin:2px 0;font-size:14px}
.exam .q{border:0;padding:8px 4px}
.exam .qhead{font-size:14.5px}
.exam .qnum{min-width:0;height:auto;padding:0;border:0;background:none;color:#222;font-size:14.5px;margin-right:2px}
.exam .cur > .qhead .qnum,.exam .gap.cur .qnum{background:none;color:#0a7ab5}
.exam .flag{display:inline-flex;align-items:center;color:#9aa4ab;font-size:17px;padding:0 2px;margin-left:2px}
.exam .flag:hover{color:#6c7680}
.exam .flag.on{color:var(--red)}
.exam .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 48px}
.exam .opts{margin:8px 0 0 24px;gap:10px;font-size:14px}
.exam .opts input[type=radio]{-webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:2px;border:1px solid #b5c3ce;border-radius:50%;background:#f3f7fa}
.exam .opts input[type=radio]:checked{border-color:#1f6fa8;background:radial-gradient(circle,#1f6fa8 0 42%,#f3f7fa 48% 100%)}
.exam .opts input[type=radio]:focus-visible{outline:2px solid #0a9bd8;outline-offset:2px}
.exam .selrow{margin:8px 0 0 24px}
.exam select{background:#fff;border-color:#b5c3ce}
.exam .q.sel{display:flex;align-items:center;gap:14px}
.exam .q.sel .qtext{flex:1}
.exam .q.sel .selrow{margin:0}
.exam .notes{border:0;padding:0;margin:0}
.exam .notes h4{margin:0 0 8px;font-size:15px}
.exam .notes li{line-height:2.3;font-size:14.5px}
.exam .gap.lg input[type=text]{width:118px;height:26px;padding:0 6px;text-align:center;font:700 13px Arial,sans-serif;color:#222;background:#e9f1f6;border:1px solid #c6d5e0;border-radius:3px}
.exam .gap.lg input::placeholder{color:#98a6b1;font-weight:700}
.exam .gap.lg input:focus{background:#fff;border-color:#0a9bd8;outline:0}
.exam .gap.lg.cur input{border-color:#0a9bd8}
.exam .foot{background:transparent;border:0;padding:8px 22px 18px;gap:16px;min-height:0}
.rvw{display:none}
.exam .rvw{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;color:#222}
.exam .rvw input{width:15px;height:15px;margin:0}
.exam .parts{position:relative;flex:1;flex-wrap:nowrap;overflow-x:auto;gap:22px;padding:10px 14px;background:#fff;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.14);scrollbar-width:thin}
.exam .part{flex:none;gap:8px}
.exam .part .pname{font-size:14px}
.exam .part.off{border:0;border-radius:6px;padding:5px 10px;gap:8px;background:none;color:#333;font:inherit;font-size:14px}
.exam .part.off:hover{background:#eef3f7}
.exam .part.off .pcnt{color:#5d6a74;white-space:nowrap}
.exam .part.off.hasfl .pcnt::after{content:"";display:inline-block;margin-left:6px;border-style:solid;border-width:0 8px 8px 0;border-color:transparent #d0021b transparent transparent;vertical-align:top}
.exam .nums{flex-wrap:nowrap;gap:4px}
.exam .nb{width:26px;height:26px;padding:0;border:0;border-radius:4px;background:#5b5b5b;color:#fff;font-size:12px;font-weight:700}
.exam .nb:hover{background:#3f3f3f}
.exam .nb.ans{background:#fff;color:#333;box-shadow:inset 0 0 0 1.5px #5b5b5b;border:0}
.exam .nb.cur,.exam .nb.cur.ans{background:#0a9bd8;color:#fff;box-shadow:none;border:0}
.exam .nb.fl::after{border-width:0 9px 9px 0}
.exam #btnSubmit{display:none}
.exam .nav{width:38px;height:38px;border-radius:50%;background-color:#8c8c8c;font-size:0;background-repeat:no-repeat;background-position:center;background-size:22px}
.exam .nav:hover{background-color:#767676}
.exam .nav:disabled{background-color:#c3cad0}
.exam #btnPrev{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")}
.exam #btnNext{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.exam .listbox{border:1px solid #c6d5e0;border-radius:6px;background:#fff}
/* ---- Menu Settings ---- */
.setwrap{position:relative}
.gear{display:inline-flex;margin-right:6px;vertical-align:-3px}
.gear svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.setpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:340px;max-width:calc(100vw - 24px);background:#fff;color:#222;border:1px solid #c3ccd3;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:14px 16px 16px;text-align:left;font-size:14px}
.sethead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sethead b{font-size:16px}
.setx{border:0;background:none;font-size:16px;cursor:pointer;color:#5d6a74;padding:2px 6px}
.setpanel fieldset{border:0;border-top:1px solid #e3e8ec;margin:8px 0 0;padding:10px 0 0}
.setpanel legend{font-weight:700;padding:0;margin-bottom:8px;font-size:13.5px}
.segs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.segs.col{grid-template-columns:1fr 1fr}
.seg,.sw{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid #c3ccd3;background:#f7f9fb;color:#222;border-radius:5px;padding:6px 4px;font-size:11.5px;cursor:pointer;line-height:1.2;text-align:center}
.seg span{font-weight:700;line-height:1}
.seg.on,.sw.on{border:2px solid #0a7ab5;background:#e7f4fb;padding:5px 3px}
.seg:focus-visible,.sw:focus-visible{outline:2px solid #0a9bd8;outline-offset:1px}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.sw i{display:block;width:26px;height:26px;border-radius:50%;border:1px solid #9aa4ab}
.sw:disabled{opacity:.4;cursor:not-allowed}
.segs.col .seg{flex-direction:row;justify-content:flex-start;gap:8px;padding:7px 8px;font-size:12.5px}
.segs.col .seg.on{padding:6px 7px}
.cprev{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:3px;font-size:13px;border:1px solid #9aa4ab;background:#e0edf5;color:#222}
.con-bow .cprev{background:#fff;color:#000;border-color:#000}
.con-wob .cprev{background:#000;color:#fff}
.con-yob .cprev{background:#000;color:#ffeb3b}
.setnote{grid-column:1/-1;margin:4px 0 0;font-size:12px;color:#5d6a74}
.setreset{margin-top:12px;border:1px solid #c3ccd3;background:#fff;border-radius:4px;padding:6px 12px;cursor:pointer;font-size:13px}
/* Màu nền */
#test.exam{background:var(--examBg,#e0edf5)}
/* Tương phản cao: phủ màu cho toàn bộ màn hình thi (trừ ảnh / biểu đồ và menu Settings) */
#test.exam[data-con="bow"]{--cbg:#fff;--cfg:#000;--cln:#000;--cac:#000;--cacf:#fff}
#test.exam[data-con="wob"]{--cbg:#000;--cfg:#fff;--cln:#fff;--cac:#fff;--cacf:#000}
#test.exam[data-con="yob"]{--cbg:#000;--cfg:#ffeb3b;--cln:#ffeb3b;--cac:#ffeb3b;--cacf:#000}
#test.exam:not([data-con="std"]){background:var(--cbg)}
#test.exam:not([data-con="std"]) :is(div,span,p,h1,h2,h3,h4,li,ul,label,b,i,em,strong,section,header,footer,nav,main,button,input,textarea,select,table,td,th,tr,fieldset,legend,small,a):not(.setpanel):not(.setpanel *):not(.qimg *):not(.chartbox *):not(.sw i){background-color:var(--cbg) !important;color:var(--cfg) !important;border-color:var(--cln) !important;box-shadow:none !important}
#test#test.exam:not([data-con="std"]) :is(input[type=text],textarea,.dz,.ddopt,.listbox,.ddlist,.parts,.hbtn,.nb,.nav,.gap.lg input){border:1px solid var(--cln) !important}
#test#test.exam:not([data-con="std"]) :is(.nb.cur,.nb.cur.ans,.seg.on,.ddarmed,.hbtn:hover,.ddv){background-color:var(--cac) !important;color:var(--cacf) !important}
#test#test.exam:not([data-con="std"]) .nb:not(.ans):not(.cur){background-color:var(--cbg) !important;text-decoration:underline}
#test#test.exam:not([data-con="std"]) .nb.ans:not(.cur){border-width:2px !important}
#test#test.exam:not([data-con="std"]) :is(.hl,.hl *){background-color:#ffeb3b !important;color:#000 !important}
#test#test.exam:not([data-con="std"]) input[type=radio]{border:1px solid var(--cln) !important;background:var(--cbg) !important}
#test#test.exam:not([data-con="std"]) input[type=radio]:checked{background:radial-gradient(circle,var(--cfg) 0 42%,var(--cbg) 48% 100%) !important}
#test#test.exam[data-con="bow"] .nav{background-color:#000 !important}
#test#test#test.exam:not([data-con="std"]) :is(.ddv *,.ddarmed *,.nb.cur *,.seg.on *){background-color:transparent !important;color:inherit !important}
#test#test.exam:not([data-con="std"]) :is(svg,.hico svg){color:var(--cfg);stroke:currentColor}
#test#test.exam:not([data-con="std"]) ::placeholder{color:var(--cfg);opacity:.7}
#test#test.exam:not([data-con="std"]) .flag.on{color:#ff5252 !important}
#test#test.exam:not([data-con="std"]) .divider::before,#test#test.exam:not([data-con="std"]) .divider::after{background:var(--cln)}
/* ---- Kéo – thả (matching headings / endings / list matching) ---- */
.exam .dz{display:inline-flex;align-items:center;justify-content:center;min-width:130px;min-height:30px;padding:3px 8px;border:1px dashed #9fb3c2;border-radius:4px;background:#f3f7fa;vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-select:none;font-size:14px;line-height:1.35;text-align:left}
.exam .dz .dzph{font:700 13px Arial,sans-serif;color:#98a6b1}
.exam .dz:focus-visible,.exam .dz.cur{border-color:#0a9bd8;border-style:solid}
.exam .dz.dzok{background:#e7f4fb;border-color:#0a9bd8}
.exam .dz.over{background:#cfeaf8;border:2px solid #0a9bd8}
.exam .dz.filled{border-style:solid;border-color:#1f6fa8;background:#fff;padding:2px}
.exam .dz.dzhead{display:flex;width:100%;min-height:36px;justify-content:flex-start}
.exam .dzrow{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.exam .dzwrap{display:inline-flex;align-items:center;gap:4px}
.exam .q.dditem{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.exam .q.dditem .qtext{flex:1 1 220px;font-size:14.5px}
.exam .q.dditem .dz{min-width:220px}
.exam .ddlist{margin:16px 0 0;border:1px solid #c6d5e0;border-radius:6px;background:#fff;padding:12px 14px}
.exam .ddlist h4{margin:0 0 10px;font-size:15px}
.exam .ddopt,.exam .ddv{display:flex;gap:8px;align-items:flex-start;border:1px solid #b5c3ce;border-radius:4px;background:#fff;padding:6px 10px;margin:0 0 6px;font-size:14px;line-height:1.4;cursor:grab;user-select:none;-webkit-user-select:none}
.exam .ddopt:hover{border-color:#1f6fa8;background:#f3f8fc}
.exam .ddopt b{min-width:22px}
.exam .ddopt[hidden]{display:none}
.exam .ddv{margin:0;width:100%;border-color:transparent;background:#e9f3fa}
.exam .ddarmed{outline:2px solid #0a9bd8;outline-offset:1px;background:#e1f1fa}
.exam .dragging{opacity:.45}
@media (max-width:800px){
  .exam .qgrid{grid-template-columns:1fr}
  .exam .hdr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;height:auto;min-height:52px;padding:6px 10px;gap:6px 10px}
  .exam .hdr .who{flex:1 1 100%;order:1;font-size:14px;gap:8px}
  .exam .hdr .who .nm{display:inline}
  .exam .timer{order:2;padding:0}
  .exam .hright{order:3;flex:1;justify-content:flex-end;flex-wrap:wrap;gap:6px}
  .exam .hico{width:30px;height:30px}
  .exam .hico svg{width:17px;height:17px}
  .exam .vol{margin-right:2px;gap:6px}
  .exam #vol{width:60px}
  .exam .hbtn{padding:6px 10px;font-size:14px}
  .exam .foot{padding:6px 10px 12px;gap:10px}
  .exam .part.off{padding:4px 6px}
  .exam .part.off .pcnt{display:none}
  .k-listening #paneR .pane-in{padding:18px 14px 30px}
  .qimg{max-width:92%}
  .exam .q.sel{flex-direction:column;align-items:flex-start}
  .exam .q.sel .selrow{margin-top:8px}
}

/* ---- Dùng chung: tiêu đề Part + chú thích phía trên hai khung ---- */
.exam .band{background:transparent;border:0;padding:18px 28px 8px;font-size:14px;line-height:1.45}
.exam .band h2{margin:0 0 5px;font-size:20px;color:#1e1e1e}
.exam .band p{margin:0}
.exam .hbtn:disabled{opacity:.5}
.exam .split{min-height:0}
.exam .divider{width:12px;background:transparent;border:0}
.exam .divider::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#c3d2dd}
.exam .divider::after{left:4px;top:24px;height:64px;width:4px;margin:0;border-radius:3px;background:#b3c1cb;box-shadow:none}
.exam .divider:hover,.exam .divider.drag{background:rgba(255,255,255,.35)}

/* ---- Reading ---- */
.k-reading .pane-in{padding:18px 54px 40px}
.k-reading #paneL .pane-in{padding-left:66px;padding-right:56px}
.k-reading .passage h2{margin:6px 0 16px;font-size:20px;text-align:center;text-transform:uppercase;letter-spacing:.01em}
.k-reading .passage .lead{display:none}
.k-reading .para{display:block;margin:0 0 14px;font-size:15px;line-height:1.62}
.k-reading .para .pl{display:block;margin:0 0 3px}
.k-reading .group + .group{margin-top:28px;padding-top:26px;border-top:2px solid #2d2b6f}
.k-reading .group{margin-top:0}
.k-reading .ghead{margin-bottom:12px}
.k-reading .q.sel .qhead{align-items:flex-start}
.k-reading .q.sel .selrow{margin:8px 0 0}
.exam .q.sel .selrow{margin-left:0}

/* ---- Writing ---- */
.k-writing .pane-in{padding:22px 54px 30px}
.k-writing #paneL .pane-in{padding-left:66px;padding-right:50px}
.k-writing .passage .wprompt{margin:0 0 16px;font-size:15px;line-height:1.55}
.k-writing .chartbox{margin:6px 0 16px;background:#fff;border:1px solid #2b2b2b;border-radius:0;padding:4px}
.k-writing .wbox{background:transparent;border:1px solid #666;border-radius:0;font:15px/1.6 Arial,Helvetica,sans-serif;padding:12px 14px;color:#222}
.k-writing .wbox:focus{outline:2px solid #0a9bd8;outline-offset:0;background:#f4f9fc}
.k-writing #paneR .pane-in{padding:22px 70px 18px 84px}
.k-writing .wcount{margin-top:8px;font-size:14px}
.k-writing .nums{gap:10px}
.k-writing .nb{width:30px;height:30px;font-size:14px}

/* ---- Speaking ---- */
.k-speaking .timer{cursor:default}
.k-speaking .timer .hico{display:none}
.k-speaking #timeText{display:block;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.k-speaking #paneR .pane-in{max-width:880px;margin:0 auto;padding:22px 28px 40px}
.k-speaking .spk .chk{color:#4a5661;font-size:14px}
.k-speaking .avatar{background:#8c8c8c;font-size:18px}
.k-speaking .bubble{background:#fff;border:1px solid #c6d5e0;border-radius:8px;font-size:17px}
.k-speaking .cue{background:#fff;border:1px solid #b5c3ce;border-radius:8px}
.k-speaking .spk .notebox{background:transparent;border:1px solid #666;border-radius:0;font:15px/1.6 Arial,sans-serif}
.k-speaking .recbox{background:#fff;border:1px solid #c6d5e0;border-radius:8px}
.k-speaking .recbox.on{border-color:var(--red)}
.k-speaking .meter{background:#dbe7ef}
.k-speaking .parts{gap:26px}
.k-speaking .spart{flex:none;border:0;padding:0;background:none;font-size:14px;color:#5a6670;border-radius:0}
.k-speaking .spart b{color:#222;margin-right:4px}
.k-speaking .spart.on{border:0;background:none;color:#0a7ab5;font-weight:700}
.k-speaking .spart.on b{color:#0a7ab5}
.k-speaking .fbtns .submit{height:38px;padding:0 22px;border-radius:19px;background:#5b5b5b;font-size:15px}
.k-speaking .fbtns .submit:hover{background:#3f3f3f}
.k-speaking .foot .fbtns{gap:8px}

@media (max-width:800px){
  .exam .band{padding:12px 14px 6px}
  .k-reading .pane-in,.k-writing .pane-in,.k-reading #paneL .pane-in,.k-writing #paneL .pane-in,.k-writing #paneR .pane-in{padding:14px 14px 30px}
  .k-speaking #paneR .pane-in{padding:14px 14px 30px}
}

.exam .tn{font-variant-numeric:tabular-nums;display:inline-block;min-width:3.4em;text-align:right}

/* Cửa vào: nút kiểm tra máy chủ */
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-size:13px;text-decoration:underline;cursor:pointer}
.diag{list-style:none;margin:8px 0 12px;padding:10px 14px;background:var(--soft);border-radius:4px;font-size:14px;line-height:1.5}
.diag li{margin:0 0 6px}
.diag li.ok b{color:var(--ok)}
.diag li.no b{color:var(--bad)}
.diag .exp{margin:2px 0 0 18px;color:var(--muted);font-size:13px}
.diag li.info b{color:var(--accent)}