/* Khu luyện IPA giao được cho lớp — /ielts/ipa/ (25/9/2026).
   Dùng chung biến màu của /ielts/style.css; chỉ khai phần riêng của khu này. */
.ip-wrap { max-width:1000px; margin:0 auto; padding:26px 20px 56px; }
.ip-lead { color:var(--muted); font-size:15px; line-height:1.75; max-width:760px; }

/* ---- danh sách bài ---- */
.ip-ds { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin-top:20px; }
.ip-bai { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line);
          border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.ip-bai:hover { border-color:var(--navy); }
.ip-bai h3 { margin:0 0 4px; font-size:17px; color:var(--navy); }
.ip-bai .am { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 8px; }
.ip-bai .am span { font-family:ui-monospace,Menlo,monospace; font-size:13.5px; border:1px solid var(--line);
                   border-radius:7px; padding:2px 8px; background:#F8FAFC; }
.ip-bai .meta { font-size:13px; color:var(--muted); }
.ip-bai .diem { font-weight:800; color:var(--ok); }

/* ---- màn bài ---- */
.ip-top { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.ip-top h1 { margin:2px 0 0; font-size:clamp(22px,3vw,30px); }
.ip-top .thong-tin { display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); }
.ip-man { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow); }
.ip-man + .ip-man { margin-top:16px; }
.ip-man h2 { margin:0 0 10px; font-size:19px; color:var(--navy); }

.ip-am { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.ip-am-dau { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ip-am-sym { font-family:ui-monospace,Menlo,monospace; font-size:24px; font-weight:800; color:var(--navy); }
.ip-am-tu { font-size:14px; color:var(--muted); flex:1; min-width:140px; }
.ip-am-than { margin-top:10px; font-size:14px; line-height:1.7; }
.ip-am-than b { color:var(--navy); }
.ip-drill { margin-top:8px; background:#F8FAFC; border-radius:9px; padding:9px 12px; font-size:14px; }
.ip-rec { margin-top:10px; }
.ip-rec audio { width:100%; margin-top:8px; }
.ip-rec-note { font-size:12.5px; color:var(--muted); margin:6px 0 0; }
.ip-rec-err { font-size:13px; color:#B91C1C; margin:6px 0 0; }

.ip-quiz-cau { font-size:15px; margin:0 0 12px; }
.ip-chon { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.ip-chon button { border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:11px 24px;
                  font-size:15px; font-weight:700; cursor:pointer; color:var(--text); }
.ip-chon button:hover:not(:disabled) { border-color:var(--navy); }
.ip-chon button:disabled { cursor:default; }
.ip-chon button.dung { border-color:var(--ok); background:var(--okbg); }
.ip-chon button.sai { border-color:#B91C1C; background:#FEE2E2; }
.ip-xet { margin-top:10px; font-size:14px; font-weight:700; min-height:22px; }
.ip-xet.ok { color:var(--ok); }
.ip-xet.no { color:#B91C1C; }
.ip-tien-do { display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.ip-tien-do .bar { flex:1; height:7px; background:#E8EDF5; border-radius:99px; overflow:hidden; }
.ip-tien-do .bar i { display:block; height:100%; background:var(--pink); width:0; transition:width .25s; }

.ip-kq-so { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); margin:14px 0; }
.ip-kq-so div { background:#F8FAFC; border-radius:11px; padding:13px 15px; }
.ip-kq-so b { display:block; font-size:26px; color:var(--pink); line-height:1.2; }
.ip-kq-so span { font-size:12.5px; color:var(--muted); }
.ip-lai { border-collapse:collapse; width:100%; font-size:14px; margin-top:8px; }
.ip-lai td { border-top:1px solid var(--line); padding:7px 6px; }
.ip-lai .x { color:#B91C1C; font-weight:700; }
.ip-hanh-dong { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.ip-loi { background:#FEE2E2; color:#991B1B; border-radius:10px; padding:14px 16px; }

@media (max-width:640px) {
  .ip-wrap { padding:18px 14px 44px; }
  .ip-man { padding:16px 14px; }
}