/* 9Listening — test page (Phase 2). Vanilla, scoped under .mlp-app. */
:root{
    --mlp-primary:#C8442C; --mlp-primary-d:#A5361F;
    --mlp-gap-soft:#FBEFE9; --mlp-gap-mid:#E0A48F;   /* v0.54.9: tint cho ô điền */
    --mlp-ink:#0F172A; --mlp-slate:#475569; --mlp-mut:#94A3B8;
    --mlp-line:#E2E8F0; --mlp-bg:#F8FAFC; --mlp-card:#fff;
}
*{box-sizing:border-box;}
html,body.mlp-app{margin:0;padding:0;}
body.mlp-app{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--mlp-bg); color:var(--mlp-ink);
    min-height:100vh; display:flex; flex-direction:column;
}
.mlp-app .material-symbols-outlined{font-size:20px;line-height:1;vertical-align:middle;}
.mlp-app .mlp-muted{color:var(--mlp-mut);}

/* ---- top bar ---- */
.mlp-bar{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:18px;
    background:linear-gradient(90deg,#1e293b,#334155);
    color:#fff; padding:9px 18px;
}
.mlp-bar-l{display:flex; align-items:center; gap:9px; min-width:0;}
.mlp-logo{font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; letter-spacing:-.02em;}
.mlp-sep{color:#64748b;}
.mlp-title{font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; color:#cbd5e1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px;}
.mlp-tag{font-size:10px; text-transform:capitalize; background:rgba(59,130,246,.25);
    color:#bfdbfe; padding:2px 8px; border-radius:999px; white-space:nowrap;}

.mlp-player{display:flex; align-items:center; gap:10px; flex:1; max-width:560px;}
.mlp-play{width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
    background:var(--mlp-primary); color:#fff; display:flex; align-items:center; justify-content:center;}
.mlp-play:hover{background:var(--mlp-primary-d);}
.mlp-play--start{width:auto; border-radius:999px; padding:0 15px 0 11px; gap:6px;}
.mlp-play-label{font-size:13px; font-weight:700; white-space:nowrap;}
.mlp-hint{font-size:11px; color:#94a3b8; flex:none; white-space:nowrap;}
.mlp-time{font-size:11px; font-variant-numeric:tabular-nums; color:#cbd5e1; flex:none;}
.mlp-dur{color:#94a3b8;}
.mlp-progress{flex:1; height:6px; background:rgba(255,255,255,.18); border-radius:999px;
    position:relative; cursor:pointer;}
.mlp-progress.locked{cursor:not-allowed;}
.mlp-fill{height:100%; width:0; background:var(--mlp-primary); border-radius:999px;}
.mlp-thumb{position:absolute; top:50%; left:0; width:12px;height:12px;border-radius:50%;
    background:#fff; transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.3);}
.mlp-mode{font-size:10px; color:#94a3b8; flex:none;}

.mlp-bar-r{display:flex; align-items:center; gap:14px; margin-left:auto;}
.mlp-toggle{display:flex; align-items:center; gap:5px; font-size:11px; color:#cbd5e1; cursor:pointer;}
.mlp-submit{display:flex; align-items:center; gap:6px; border:0; cursor:pointer;
    background:#22c55e; color:#fff; font-weight:700; font-size:13px; padding:8px 14px; border-radius:9px;}
.mlp-submit:disabled{background:#475569; color:#94a3b8; cursor:not-allowed;}
.mlp-submit:not(:disabled):hover{background:#16a34a;}

/* ---- main ---- */
.mlp-main{max-width:920px; width:100%; margin:0 auto; padding:22px 20px 60px;}
.mlp-context{display:flex; gap:8px; align-items:flex-start; background:#EFF6FF; color:#1e40af;
    border:1px solid #dbeafe; border-radius:12px; padding:11px 14px; font-size:13.5px; margin-bottom:16px;}
.mlp-context .material-symbols-outlined{font-size:18px; color:#C8442C;}

.mlp-gate{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#fffbeb; border:1px solid #fde68a; color:#92400e;
    border-radius:12px; padding:12px 16px; font-size:13.5px; margin-bottom:18px;}
.mlp-gate .material-symbols-outlined{color:#d97706;}
.mlp-gate.hidden{display:none;}
.mlp-start{margin-left:auto; border:0; cursor:pointer; background:var(--mlp-primary); color:#fff;
    font-weight:700; font-size:13px; padding:8px 16px; border-radius:9px;}
.mlp-start:hover{background:var(--mlp-primary-d);}

/* ---- completion note ---- */
.mlp-questions{background:var(--mlp-card); border:1px solid var(--mlp-line); border-radius:16px; padding:22px 24px;}
.mlp-note-sec{margin-bottom:16px;}
.mlp-note-h{font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--mlp-ink);
    margin-bottom:7px; padding-bottom:5px; border-bottom:1px solid var(--mlp-line);}
.mlp-note-line{font-size:14.5px; color:var(--mlp-slate); line-height:2.2; display:flex; align-items:center; flex-wrap:wrap; gap:4px;}
.mlp-bull{color:var(--mlp-mut);}
/* v0.54.9 — Ô ĐIỀN "DÒNG KẺ ĐỀ GIẤY" (mockup duyệt 2026-07-22).
   Nguyên tắc: chỗ trống là ĐƯỜNG KẺ CHẤM như đề Cambridge, số câu là chấm tròn
   cam nhạt; màu primary chỉ xuất hiện khi TƯƠNG TÁC (focus) hoặc đã điền,
   không đứng thường trực trong bảng -> hết rối. */
.mlp-gapwrap{ display:inline-flex; align-items:baseline; gap:6px; vertical-align:baseline; white-space:nowrap; }
.mlp-gapno{ flex:none; align-self:center; width:18px; height:18px; border-radius:50%;
    background:var(--mlp-gap-soft,#FBEFE9); color:var(--mlp-primary);
    font:700 11px/18px 'JetBrains Mono',monospace; text-align:center; padding:0; }
.mlp-gap{border:0; border-bottom:2px dotted #A9B0BF; background:transparent;
    border-radius:0; padding:1px 2px 3px; font-size:14.5px; font-weight:400;
    font-family:inherit; color:var(--mlp-ink); width:118px; outline:none;
    transition:border-color .12s, background .12s;}
.mlp-gap:focus{border-bottom:2px solid var(--mlp-primary); background:var(--mlp-gap-soft,#FBEFE9);}

/* ---- MC ---- */
.mlp-mc-group{margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--mlp-line);}
.mlp-mc-group:last-child{border-bottom:0;}
.mlp-mc-stem{font-weight:600; font-size:14.5px; margin-bottom:10px;}
.mlp-mc-no{color:var(--mlp-primary); font-weight:700; margin-right:4px;}
.mlp-opt{display:flex; align-items:flex-start; gap:9px; padding:8px 10px; border-radius:9px;
    cursor:pointer; font-size:14px; color:var(--mlp-slate);}
.mlp-opt:hover{background:#F7F2E9;}
.mlp-opt input{margin-top:2px;}
.mlp-opt-lab{font-weight:700; color:var(--mlp-ink); min-width:16px;}

/* ---- generic ---- */
.mlp-q{font-size:14.5px; color:var(--mlp-slate); line-height:2.2;}
.mlp-q-no{font-weight:700; color:var(--mlp-primary); margin-right:5px;}

/* ---- result overlay (Phase 2 stub) ---- */
.mlp-overlay{position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex;
    align-items:center; justify-content:center; z-index:100;}
.mlp-overlay[hidden]{display:none;}
.mlp-result-card{background:#fff; border-radius:18px; padding:30px 36px; text-align:center; max-width:380px;}
.mlp-result-ico{font-size:46px; color:#22c55e;}
.mlp-result-score{font-family:'Manrope',sans-serif; font-weight:800; font-size:34px; margin:6px 0;}
.mlp-result-actions{display:flex; gap:10px; justify-content:center; margin-top:18px;}
.mlp-btn{border:1px solid var(--mlp-line); background:#fff; border-radius:9px; padding:9px 16px;
    font-weight:600; font-size:13px; cursor:pointer; text-decoration:none; color:var(--mlp-slate);}
.mlp-btn-primary{background:var(--mlp-primary); color:#fff; border-color:var(--mlp-primary);}

@media (max-width:760px){
    .mlp-bar{flex-wrap:wrap; gap:10px;}
    .mlp-player{order:3; flex-basis:100%; max-width:none;}
    .mlp-title,.mlp-tag{display:none;}
}

.mlp-mc-hint{ color:#C8442C; font-weight:600; font-size:13px; }

/* ===== Matching (select-first + 2-col cho skill) ===== */
.mlp-match{ margin-top:4px; }
.mlp-match-inst{ font-weight:600; color:#0F172A; margin:0 0 14px; line-height:1.5; }

.mlp-optbox{ border:1px solid #E2E8F0; background:#F8FAFC; border-radius:12px; padding:14px 16px; margin:0 0 18px; }
.mlp-optbox-title{ font-weight:700; color:#0F172A; margin-bottom:8px; }
.mlp-optbox-row{ padding:4px 0; color:#334155; line-height:1.5; }
.mlp-optbox-2col{ display:grid; grid-template-columns:1fr 1fr; column-gap:22px; }
.mlp-optbox-2col .mlp-optbox-title{ grid-column:1 / -1; }
@media (max-width:640px){ .mlp-optbox-2col{ grid-template-columns:1fr; } }
.mlp-optbox-row b{ display:inline-block; min-width:22px; color:#C8442C; }

.mlp-match-items{ display:flex; flex-direction:column; gap:10px; }
.mlp-match-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #EEF2F7;
    border-radius:12px; background:#fff; }
.mlp-match-no{ font-weight:700; color:#64748B; min-width:26px; text-align:right; }
/* v0.54.24 — select đáp án matching. Gộp về MỘT bộ rule duy nhất (trước đây có
   thêm khối "body.mlp-app .mlp-match-item select" đè lên: border 1.5px, bo 4px,
   focus outline 2px + border cùng lúc -> viền đỏ hai lớp dày; và .mlp-filled tô
   viền ĐEN #1a1a1a khiến ô đã chọn nhìn như đang lỗi). Nay: viền mảnh trung tính,
   đã chọn -> viền coral nhạt + chữ đậm, focus -> viền coral + quầng coral mờ. */
.mlp-match-sel{ border:1.5px solid #d8dce5; border-radius:9px; padding:0 12px; height:38px;
    font-size:14px; font-weight:600; font-family:inherit; background:#fff; min-width:104px;
    cursor:pointer; color:#0F172A; flex:0 0 auto; text-align:center; text-align-last:center;
    transition:border-color .12s, background .12s, box-shadow .12s; }
.mlp-match-sel:hover{ border-color:#bfc6d2; }
.mlp-match-sel:focus{ border-color:#C8442C; outline:none; box-shadow:0 0 0 3px rgba(200,68,44,.13); }
.mlp-match-sel.mlp-filled{ border-color:#E0A48F; background:#FDF7F5; font-weight:700; }
.mlp-match-sel.mlp-filled:focus{ border-color:#C8442C; }
.mlp-match-text{ flex:1; font-weight:600; color:#0F172A; line-height:1.4; }

/* 2 cot: options trai (sticky) - cau hoi phai - gon 1 man hinh (skill/pre_listening) */
.mlp-match-2col{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; }
.mlp-match-2col .mlp-match-inst{ flex-basis:100%; margin-bottom:4px; }
.mlp-match-2col .mlp-match-left{ flex:0 0 320px; position:sticky; top:88px; }
.mlp-match-2col .mlp-match-left .mlp-optbox{ margin:0; }
.mlp-match-2col .mlp-match-right{ flex:1 1 360px; min-width:300px; }
@media (max-width:760px){
    .mlp-match-2col{ flex-direction:column; }
    .mlp-match-2col .mlp-match-left{ position:static; flex-basis:auto; width:100%; }
}

/* MC compact grid (skill/pre_listening): gọn 1 màn hình */
.mlp-mc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mlp-mc-grid .mlp-mc-group{ margin:0; padding:14px 16px; border:1px solid var(--mlp-line); border-radius:12px; }
.mlp-mc-grid .mlp-mc-group:last-child{ border:1px solid var(--mlp-line); }
.mlp-mc-grid .mlp-mc-stem{ font-size:14px; }
.mlp-mc-grid .mlp-opt{ padding:6px 9px; }
@media (max-width:760px){ .mlp-mc-grid{ grid-template-columns:1fr; } }

.mlp-note-inst{font-weight:600;color:#0F172A;margin:0 0 12px;line-height:1.5;}
.mlp-inst{display:flex;gap:9px;align-items:flex-start;background:#FFFBEB;border:1px solid #FDE68A;
    border-radius:10px;padding:10px 13px;margin:0 0 14px;color:#78350F;font-size:13.5px;line-height:1.55;}
.mlp-inst .material-symbols-outlined{font-size:19px;color:#D97706;margin-top:1px;flex-shrink:0;}
.mlp-limit{background:#FDE68A;border-radius:6px;padding:0 6px;font-weight:800;color:#78350F;white-space:nowrap;}
.mlp-match-2col .mlp-inst{flex-basis:100%;}
.mlp-note-title{font-weight:800;font-size:15.5px;letter-spacing:.04em;color:#0F172A;margin-bottom:12px;text-transform:uppercase;text-align:center;}

/* ============================================================
   THEME v0.37 — IELTS exam look (navy + paper)
   ============================================================ */
body.mlp-app{background:#FBFAF6;color:#1a1a1a;font-family:Arial,"Helvetica Neue",system-ui,sans-serif;padding-bottom:78px}
body.mlp-app .mlp-bar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:2px solid #C8442C;
  display:flex;align-items:center;gap:14px;padding:9px 18px;box-shadow:none}
.mlp-brand{display:flex;align-items:center;gap:9px;min-width:0}
/* v0.54.22 — logo thương hiệu thay ô vuông "9L".
   Emblem SVG (sóng âm) + wordmark Manrope; ≤560px chỉ còn emblem cho gọn header. */
.mlp-lg{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  background:none;border-radius:0;width:auto;height:auto;color:inherit}
.mlp-lg .mlp-lgmark{width:26px;height:26px;display:block;flex-shrink:0}
.mlp-lgtext{font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;
  letter-spacing:-.03em;color:#1A1816;white-space:nowrap;line-height:1}
.mlp-lgtext b{color:#E8590C;font-weight:800}
@media(max-width:420px){.mlp-lgtext{display:none}}
/* v0.54.23: logo là <a> -> chặn gạch chân/màu link của theme, thêm hover nhẹ.
   Wordmark hiện cả trên mobile vì tên bài cạnh logo đã bỏ, header còn rộng. */
.mlp-lg,.mlp-lg:hover,.mlp-lg:focus{text-decoration:none;color:inherit;box-shadow:none}
.mlp-lg{transition:opacity .12s}
.mlp-lg:hover{opacity:.75}

.mlp-tt{min-width:0}
.mlp-tt b{display:block;font-size:13.5px;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Arial}
.mlp-tt span{display:block;font-size:11.5px;color:#5f6b7a}
body.mlp-app .mlp-player{margin-left:auto;background:#FAECE8;border:1px solid #cddcf0;border-radius:999px;padding:5px 12px 5px 5px;gap:9px}
body.mlp-app .mlp-play{background:#C8442C;width:32px;height:32px}
body.mlp-app .mlp-play:hover{background:#A5361F}
body.mlp-app .mlp-play--start{width:auto;border-radius:999px;padding:0 14px 0 8px;height:32px}
body.mlp-app .mlp-progress{background:#c7d6e8;height:5px}
body.mlp-app .mlp-fill{background:#C8442C}
body.mlp-app .mlp-thumb{background:#C8442C;border:2px solid #fff}
body.mlp-app .mlp-time{color:#5f6b7a;font-size:11px}
body.mlp-app .mlp-mode{background:transparent;border:1px solid #cddcf0;color:#C8442C;font-size:10.5px}
body.mlp-app .mlp-hint{color:#8a5a00;font-size:10.5px}

/* tờ giấy thi */
body.mlp-app .mlp-main{max-width:none;padding:22px 16px}
.mlp-sheet{max-width:840px;margin:0 auto;background:#fff;border:1px solid #e4e9ef;border-radius:4px;
  box-shadow:0 1px 3px rgba(15,23,42,.07);padding:32px 44px 46px}
@media(max-width:700px){.mlp-sheet{padding:20px 16px 36px}}
body.mlp-app .mlp-context{background:#FAECE8;border:1px solid #cddcf0;color:#23405f;border-radius:6px;margin-bottom:22px}
body.mlp-app .mlp-context .material-symbols-outlined{color:#C8442C}

/* header bộ câu hỏi + instruction giọng đề */
.mlp-qhead{margin:26px 0 2px}
.mlp-qhead:first-child{margin-top:0}
.mlp-qhead b{font-size:16px;color:#1a1a1a}
body.mlp-app .mlp-inst{font-style:italic;color:#1a1a1a;margin:4px 0 16px;font-size:13.8px;line-height:1.55;
  background:none;border:0;padding:0;display:block}
.mlp-limit{font-style:normal;font-weight:800;text-decoration:underline;text-underline-offset:3px;background:none;color:inherit;padding:0;border-radius:0;white-space:normal}

/* tiêu đề bảng + notes */
body.mlp-app .mlp-note{border:0;background:transparent;padding:0}
body.mlp-app .mlp-note-title{font-size:15.5px;letter-spacing:.06em;margin:16px 0 14px}

/* v0.54.9 — inline style đã gỡ khỏi PHP nên KHÔNG cần !important nữa.
   Đã điền: gạch liền cam nhạt + chữ đậm (theo mockup duyệt), badge số chuyển đặc. */
body.mlp-app .mlp-gap:focus{background:var(--mlp-gap-soft,#FBEFE9);border-bottom-color:var(--mlp-primary)}
body.mlp-app .mlp-gap.mlp-filled{background:transparent;border-bottom:2px solid var(--mlp-gap-mid,#E0A48F);font-weight:600}
body.mlp-app .mlp-gapwrap:has(.mlp-filled) .mlp-gapno{background:var(--mlp-primary);color:#fff}

/* options box A–H: đóng khung kiểu đề giấy */
body.mlp-app .mlp-optbox{border:1.5px solid #1a1a1a;background:#fff;border-radius:0;max-width:480px;margin:0 auto 20px;padding:0}
body.mlp-app .mlp-optbox-title{text-align:center;border-bottom:1.5px solid #1a1a1a;padding:7px 10px;margin:0;font-size:13.5px;letter-spacing:.03em}
body.mlp-app .mlp-optbox .mlp-optbox-row{padding:3px 16px}
body.mlp-app .mlp-optbox-2col{padding:8px 0}
body.mlp-app .mlp-optbox-2col .mlp-optbox-title{margin:-8px 0 6px}
body.mlp-app .mlp-optbox-row b{color:#1a1a1a}

/* v0.54.24: khối override cũ cho "body.mlp-app .mlp-match-item select" đã GỠ —
   nó đè lên .mlp-match-sel gây viền hai lớp khi focus và viền đen khi đã chọn.
   Toàn bộ style select matching nay nằm ở .mlp-match-sel phía trên. */

/* MC options */
body.mlp-app .mlp-opt{border:1px solid #e4e9ef;border-radius:6px}
body.mlp-app .mlp-opt:hover{border-color:#C8442C;background:#f7fafd}
body.mlp-app .mlp-opt-lab{color:#C8442C}
body.mlp-app .mlp-mc-no{color:#1a1a1a}

/* palette đáy */
.mlp-palette{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1.5px solid #c9d2dc;
  display:flex;align-items:center;gap:14px;padding:9px 18px;z-index:30}
.mlp-pt{font-size:11.5px;color:#5f6b7a;font-weight:800;flex-shrink:0}
.mlp-pcells{display:flex;gap:7px;flex-wrap:wrap}
.mlp-pcell{width:32px;height:32px;border:1.5px solid #c9d2dc;border-radius:4px;display:grid;place-items:center;
  font-weight:800;font-size:12.5px;color:#5f6b7a;cursor:pointer;background:#fff;user-select:none}
.mlp-pcell.done{background:#C8442C;border-color:#C8442C;color:#fff}
.mlp-pcell.cur{outline:2.5px solid #C8442C;outline-offset:1.5px}
.mlp-plegend{display:flex;gap:11px;font-size:11px;color:#5f6b7a;margin-left:auto}
.mlp-plegend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.mlp-plegend .a{background:#C8442C}.mlp-plegend .b{border:1.5px solid #c9d2dc;background:#fff}
body.mlp-app .mlp-submit{margin-left:0;background:#C8442C;border-radius:6px;font-weight:800}
body.mlp-app .mlp-submit:hover:not(:disabled){background:#A5361F}
body.mlp-app .mlp-submit:disabled{background:#9db4cf}
@media(max-width:700px){.mlp-plegend{display:none}}
/* v0.41 — mẹo đọc đề: nằm trong header, chiếm chỗ audio; bấm Bắt đầu nghe mới hiện player */
.mlp-hide{display:none !important}
.mlp-preread{margin-left:auto;display:flex;gap:9px;align-items:center;background:#fffbeb;
  border:1px solid #fde68a;border-radius:999px;padding:5px 6px 5px 14px;color:#78350f;
  font-size:12.5px;line-height:1.45;min-width:0}
.mlp-preread .material-symbols-outlined{font-size:17px;color:#d97706;flex-shrink:0}
.mlp-preread-tt{min-width:0}
.mlp-preread-start{flex-shrink:0;border:0;border-radius:999px;background:#C8442C;color:#fff;
  font:800 12.5px Arial;padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.mlp-preread-start .material-symbols-outlined{font-size:16px;color:#fff}
.mlp-preread-start:hover{background:#A5361F}
.mlp-preread.gone{display:none}
@media(max-width:700px){
  .mlp-preread{padding-left:10px}
  .mlp-preread-tt{display:none}   /* mobile: chỉ giữ icon + nút, tip đầy đủ không đủ chỗ */
}
/* v0.45 — bảng completion kiểu đề thi */
.mlp-tablewrap{overflow-x:auto;margin:0 0 10px}
.mlp-extable{border-collapse:collapse;width:100%;font-size:13.8px}
.mlp-extable th,.mlp-extable td{border:1.2px solid #1a1a1a;padding:8px 11px;text-align:left;vertical-align:middle}
.mlp-extable th{background:#F6F1E8;font-weight:800}
.mlp-extable td .mlp-gapwrap{white-space:nowrap}
@media(max-width:640px){.mlp-extable{font-size:12.5px}.mlp-extable th,.mlp-extable td{padding:6px 8px}}
/* v0.46 — ảnh minh hoạ (map/diagram) */
.mlp-qimg{display:block;max-width:100%;height:auto;border:1.2px solid #1a1a1a;border-radius:4px;margin:4px 0 16px;background:#fff}
/* v0.46.3 — sentence completion: mỗi câu một dòng thoáng, không bullet */
.mlp-sentlist{list-style:none;margin:2px 0 0;padding:0}
.mlp-sentlist li{margin:0 0 16px;line-height:2;padding:0}
.mlp-sentlist li:last-child{margin-bottom:0}
/* v0.48.1 — tiêu đề khối map khi không có hộp lựa chọn */
.mlp-optbox-title-solo{font-weight:800;text-align:center;font-size:14px;margin:2px 0 10px}
/* v0.49 — form 2 cột: mobile dồn 1 cột */
@media(max-width:560px){
  .mlp-formrows{grid-template-columns:1fr !important;row-gap:4px !important}
  .mlp-form-lb{padding-top:10px !important;font-weight:700;font-size:12.5px;color:#6F6A63}
}

/* v0.49.7 — sub-list trong notes: mờ & nhỏ hơn main list, ô điền giữ nét */
.mlp-notelist .mlp-subline{color:#6f6a63;font-size:.94em}
.mlp-notelist .mlp-subline::marker{color:#b7b0a6}
.mlp-notelist .mlp-subline .mlp-gap input,
.mlp-notelist .mlp-subline .mlp-gap{color:var(--ink,#1A1816);font-size:1.02rem}

/* v0.49.8 — highlighter trong trang làm bài */
mark.mlp-hl{background:#FFE34A;color:inherit;padding:0 1px;border-radius:3px;cursor:pointer;transition:background .12s}
mark.mlp-hl:hover{background:#f6d51f}
.mlp-hlbtn{position:absolute;z-index:9999;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;
  background:#1A1816;color:#fff;border:0;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;
  cursor:pointer;box-shadow:0 4px 14px rgba(26,24,22,.28);font-family:inherit}
.mlp-hlbtn:hover{background:#C8442C}

/* v0.49.9 — sentence completion biến thể B: reset first/last (inline style không làm được) */
.mlp-sentlist li:first-child{padding-top:2px !important}
.mlp-sentlist li:last-child{border-bottom:0 !important;padding-bottom:2px !important}

/* v0.49.11 — nhánh summary rich (bài lưu từ editor): đồng bộ nhịp thở với notelist gốc.
   !important để thắng reset của Flatsome trên ul/li. */
.mlp-note-rich ul, .mlp-note-rich ol{list-style:disc;margin:2px 0 4px !important;padding:0 0 0 24px !important}
.mlp-note-rich li{margin:0 0 9px !important;padding:0 !important;line-height:1.95 !important}
.mlp-note-rich li:last-child{margin-bottom:0 !important}
.mlp-note-rich p{margin:0 0 12px;line-height:1.95}
.mlp-note-rich p:last-child{margin-bottom:0}

/* v0.49.15 — Map labelling 2 cột: ảnh trái / câu hỏi phải (sticky) */
.mlp-maplay{display:grid;grid-template-columns:3fr minmax(280px,2fr);gap:26px;align-items:start}
.mlp-maplay .mlp-qimg{width:100% !important;max-width:100% !important;margin:0 !important}
.mlp-maplay-qs{position:sticky;top:16px}
.mlp-maplay-qs .mlp-match-items{margin-top:0}
.mlp-maplay-qs .mlp-match-item{padding:11px 0;border-bottom:1px dashed #e6e0d5;margin:0}
.mlp-maplay-qs .mlp-match-item:last-child{border-bottom:0}
@media (max-width:820px){
  .mlp-maplay{grid-template-columns:1fr}
  .mlp-maplay-qs{position:static}
}

/* v0.49.17 — bài Map/diagram (match block có ảnh): nới trang 920 → 1200px cho ảnh lớn hơn */
.mlp-wide .mlp-main{max-width:1200px}
/* v0.49.19 — matching có hộp lựa chọn: 2 cột mặc định; instruction chiếm trọn hàng đầu */
.mlp-match-2col .mlp-inst{flex-basis:100%;margin-bottom:4px}
/* v0.49.20 — hộp lựa chọn nằm trong panel trái hẹp (matching 2 cột): bỏ chia 2 cột chữ,
   mỗi lựa chọn một dòng cho dễ đọc */
.mlp-match-2col .mlp-match-left .mlp-optbox-2col{grid-template-columns:1fr}
/* v0.49.21 — mobile đè inline flex của matching 2 cột */
@media (max-width:760px){
  .mlp-match-2col{display:block !important}
  .mlp-match-2col .mlp-match-left{position:static !important;flex:none !important;margin-bottom:14px}
}
/* v0.51.3 — section diagram trong test hỗn hợp: 2 cột (mobile xếp dọc) */
.mlp-diaglay .mlp-qimg{width:100% !important;max-width:100% !important;margin:0 !important}
.mlp-diaglay-qs .mlp-notelist li{padding:11px 0;border-bottom:1px dashed #e6e0d5;margin:0 !important;list-style:none}
.mlp-diaglay-qs .mlp-notelist{padding-left:0 !important;list-style:none}
.mlp-diaglay-qs .mlp-notelist li:last-child{border-bottom:0}
@media (max-width:820px){
  .mlp-diaglay{display:block !important}
  .mlp-diaglay-qs{position:static !important;margin-top:14px}
}

/* v0.54.7 — badge admin-only trên test page (học viên không bao giờ render) */
.mlp-admin-edit{display:inline-flex;align-items:center;gap:5px;margin-right:12px;padding:3px 10px;
  border:1px dashed #d97706;border-radius:8px;color:#b45309;background:#fffbeb;font-size:12px;
  font-weight:600;text-decoration:none;max-width:340px;white-space:nowrap;overflow:hidden}
.mlp-admin-edit .material-symbols-outlined{font-size:15px}
.mlp-admin-edit .mlp-ae-t{overflow:hidden;text-overflow:ellipsis}
.mlp-admin-edit:hover{background:#fef3c7;color:#92400e}

/* ============================================================
   v0.54.13 — CHẶN IN / LƯU PDF (đồng bộ cơ chế bên 9reading)
   Khi in: giấu toàn bộ nội dung bài, chỉ để lại thông báo.
   Lưu ý: đây là RÀO CẢN, không phải bảo mật tuyệt đối — người
   quyết tâm vẫn chụp màn hình được; mục tiêu là chặn việc in
   hàng loạt đề/đáp án một cách tiện tay.
   ============================================================ */
@media print {
  html, body { background: #fff !important; }
  body > * { display: none !important; }
  body::before {
    content: "Nội dung 9Listening được bảo vệ bản quyền — vui lòng luyện tập trực tiếp trên website. Mọi hình thức in ấn, sao chép, phát tán đều không được phép.";
    display: block !important;
    padding: 90px 60px;
    font: 600 15px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1A1816;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }
}
/* Lớp phủ khi phát hiện thao tác in (JS bật) */
.mlp-noprint-veil{position:fixed;inset:0;background:#fff;z-index:99999;display:flex;
  align-items:center;justify-content:center;padding:28px;text-align:center;
  font:600 15px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif;color:#1A1816}
.mlp-noprint-veil span{max-width:460px}

/* v0.54.64 — icon SVG nội tuyến */
.mlp-ic{display:inline-block;vertical-align:-.18em;flex:none}

/* v0.54.68 — đổi icon play/pause bằng class (SVG nội tuyến, không dùng id nữa) */
.mlp-play .mlp-ico-pause,.aplay .mlp-ico-pause{display:none}
.mlp-play.is-playing .mlp-ico-play,.aplay.is-playing .mlp-ico-play{display:none}
.mlp-play.is-playing .mlp-ico-pause,.aplay.is-playing .mlp-ico-pause{display:inline-flex}
.mlp-ico-play,.mlp-ico-pause{display:inline-flex;align-items:center}

/* v0.54.69 — tooltip cho nút Nộp bài đang khoá */
.mlp-submit-wrap{position:relative;display:inline-flex}
.mlp-submit-tip{position:absolute;bottom:calc(100% + 10px);right:0;z-index:60;
  background:#241F1C;color:#fff;font-size:12.5px;line-height:1.45;font-weight:600;
  padding:9px 13px;border-radius:10px;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s,transform .14s,visibility .14s;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.5);pointer-events:none}
.mlp-submit-tip::after{content:"";position:absolute;top:100%;right:26px;border:6px solid transparent;border-top-color:#241F1C}
.mlp-submit-wrap.is-locked:hover .mlp-submit-tip,
.mlp-submit-wrap.is-locked:focus-within .mlp-submit-tip{opacity:1;visibility:visible;transform:translateY(0)}
.mlp-submit-wrap.is-locked{cursor:not-allowed}
.mlp-submit-wrap.is-locked .mlp-submit{pointer-events:none}
@media(max-width:640px){.mlp-submit-tip{white-space:normal;width:230px}}

/* v0.55.0 — icon huy chương ở màn hoàn thành là SVG */
.mlp-result-ico{display:flex;align-items:center;justify-content:center}
.mlp-result-ico .mlp-ic{width:34px;height:34px}