/* ═══════════════════════════════════════════════════════════════════════════════════════
   il-paper.css — TỜ ĐỀ IELTS Listening, App học v3 (27/09/2026, Đợt 0).
   Dùng chung cho phòng làm bài Luyện tập (listening_player.php) và trang kết quả (listening_result.php):
   hai trang dựng tờ đề bằng CÙNG bộ dựng (il-paper.js) nên phải cùng một bộ áo, không thì học viên nhìn
   câu 5 ở trang kết quả khác hẳn lúc mình làm.
   Mọi luật nằm dưới `.ilpp` — phòng THI thử (body.il-exam) cố ý giống máy thi thật nên không mang lớp này.
   Mọi màu qua token; cỡ chữ đề đi qua biến --ilpp-fs (nút A−/A+ của phòng làm bài đổi biến này).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.ilpp{
    --ilpp-fs:      16px;
    --ilpp-surface: var(--color-surface);
    --ilpp-sunken:  color-mix(in srgb,var(--color-primary) 4%,var(--color-soft));
    --ilpp-tint:    color-mix(in srgb,var(--color-primary) 7%,var(--color-surface));
    --ilpp-wash:    color-mix(in srgb,var(--color-primary) 12%,var(--color-surface));
    --ilpp-border:  color-mix(in srgb,var(--color-primary-deep) 10%,var(--color-border));
    --ilpp-hair:    color-mix(in srgb,var(--color-primary-deep) 6%,var(--color-line));
    --ilpp-line:    color-mix(in srgb,var(--color-primary-deep) 24%,var(--color-border));
    --ilpp-ink:     var(--color-ink);
    --ilpp-text:    var(--color-secondary-text);
    --ilpp-muted:   color-mix(in srgb,var(--color-muted) 84%,var(--color-ink));
    --ilpp-strong:  var(--color-primary-hover);   /* nền đặc (không lật) */
    --ilpp-fg:      color-mix(in srgb,var(--color-primary-hover) 60%,var(--color-primary-deep));   /* chữ thương hiệu — tối thì sáng lên */
    --ilpp-deep:    var(--color-primary-deep);
    --ilpp-on:      var(--color-on-dark);
    display:flex;flex-direction:column;gap:6px;min-width:0;
    font-family:var(--font-sans);font-size:var(--ilpp-fs);line-height:1.7;color:var(--ilpp-text);
}
.ilpp[data-fs="lg"]{--ilpp-fs:17.5px}
.ilpp[data-fs="xl"]{--ilpp-fs:19px}
.ilpp[data-fs]{font-size:var(--ilpp-fs)}
.ilpp *,.ilpp *::before,.ilpp *::after{box-sizing:border-box}

/* Dải câu lệnh chung của section (sec.instructions) */
.ilpp .il-instruction-banner{
    margin:0 0 6px;padding:12px 16px;border:0;border-radius:12px;background:var(--ilpp-sunken);
    color:var(--ilpp-text);font-size:calc(var(--ilpp-fs) - 1.5px);font-weight:var(--fw-regular);line-height:1.6;
}
.ilpp .il-instruction-banner strong{display:block;margin-bottom:2px;font-size:14px;font-weight:var(--fw-bold);color:var(--ilpp-fg)}
.ilpp .il-pl-ctx-intro{padding:12px 16px;border-radius:12px;background:var(--ilpp-sunken)}
.ilpp .il-pl-ctx-sec-label{font-size:13px;font-weight:var(--fw-semibold);color:var(--ilpp-muted)}
.ilpp .il-pl-ctx-sec-text{font-size:var(--ilpp-fs);font-weight:var(--fw-semibold);color:var(--ilpp-ink)}

/* ── Câu rời: số câu · đề · ô trả lời cùng một hàng ── */
.ilpp .il-pl-q{
    position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:6px;
    margin:0;padding:8px 12px;border:0;border-radius:12px;background:transparent;box-shadow:none;
    transition:background var(--dur-fast) var(--ease);
}
.ilpp .il-pl-q:hover{background:var(--ilpp-tint)}
.ilpp .il-pl-q.is-flagged{border:0;padding-left:12px}
.ilpp .il-pl-q.il-exam-paper,
.ilpp .il-pl-q.il-completion-group,
.ilpp .il-pl-q.il-flowchart{display:block;padding:0;border-radius:0;background:transparent}
.ilpp .il-pl-q.il-flowchart{padding:12px;border-radius:12px}
.ilpp .il-pl-q-head{flex:1 1 300px;min-width:0;display:flex;align-items:flex-start;gap:12px;margin:0}
.ilpp .il-pl-q-num,
.ilpp .il-exam-qno{
    all:unset;position:relative;flex:0 0 auto;box-sizing:border-box;
    width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
    background:var(--ilpp-sunken);color:var(--ilpp-muted);
    font:var(--fw-bold) 13.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;
}
.ilpp .il-pl-q.is-flagged .il-pl-q-num{background:var(--ilpp-sunken);box-shadow:none}
.ilpp .il-pl-q-prompt{flex:1;min-width:0;padding-top:2px;font-size:var(--ilpp-fs);font-weight:var(--fw-medium);color:var(--ilpp-ink);line-height:1.6}
.ilpp .il-pr-text{font-size:inherit;line-height:inherit;color:inherit}
.ilpp .il-pl-q > .il-pl-input{flex:0 0 min(260px,100%);margin-left:auto}
.ilpp .il-pl-input{
    display:inline-block;width:auto;min-width:0;height:38px;padding:0 12px;margin:0;vertical-align:middle;
    border:1px solid var(--ilpp-border);border-radius:10px;
    background:var(--ilpp-surface);color:var(--ilpp-ink);text-align:left;box-shadow:none;
    font:var(--fw-semibold) calc(var(--ilpp-fs) - 1px) var(--font-sans);
    transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.ilpp .il-pl-input:focus{outline:0;border-color:var(--ilpp-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent)}
.ilpp .il-pl-input::placeholder{color:var(--ilpp-muted);font-weight:var(--fw-regular)}
.ilpp .il-pr-blank{display:inline-block;min-width:0;margin:0 3px;vertical-align:baseline;border:0;background:none}
.ilpp .il-pr-blank .il-pl-input{width:11em;max-width:100%}
.ilpp .il-pl-q-actions{display:none}
.ilpp .il-pl-input-meta{flex-basis:100%;margin:0 0 0 42px;font-size:13px;font-weight:var(--fw-medium);color:var(--ilpp-muted)}
.ilpp .il-pl-q-context{
    flex-basis:100%;margin:2px 0 0 42px;padding:12px 14px;border:0;border-radius:10px;background:var(--ilpp-sunken);
    font-size:calc(var(--ilpp-fs) - 1.5px);color:var(--ilpp-text);max-height:480px;overflow:auto;position:relative;
}
.ilpp .il-pl-q-context.is-collapsed{max-height:84px;overflow:hidden;cursor:pointer}
.ilpp .il-pl-q-context.is-collapsed::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:40px;pointer-events:none;
    background:linear-gradient(to top,var(--ilpp-sunken),transparent);
}
.ilpp .il-pl-q-context-toggle{
    flex-basis:100%;margin-left:42px;padding:2px 0;border:0;background:none;cursor:pointer;
    color:var(--ilpp-fg);font:var(--fw-semibold) 13px var(--font-sans);text-align:left;
}
.ilpp .il-pl-q-fig{flex-basis:100%;margin:6px 0 0 42px}
.ilpp .il-pl-q-fig img{display:block;max-width:100%;height:auto;max-height:min(48vh,440px);border-radius:8px}
.ilpp .il-pl-q > :is(.il-pl-opts,.il-pl-match,.il-pl-inline-table,.il-pl-cells){flex-basis:100%;min-width:0;margin-left:42px}

/* ── Trắc nghiệm · chọn nhiều · ghép nối · bản đồ ── */
.ilpp .il-exam-paper{padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.ilpp .il-exam-paper__head{display:none}
.ilpp .il-exam-paper__body{padding:0;background:none}
.ilpp .il-exam-single-block{padding:0}
.ilpp .il-exam-single-block__head{margin:12px 0 4px;padding:12px 16px;border:0;border-radius:12px;background:var(--ilpp-sunken)}
.ilpp .il-exam-single-block.is-single .il-exam-single-block__head{display:none}
.ilpp :is(.il-exam-single-block__range,.il-exam-shared__range,.il-exam-matching__range,.il-exam-map__range,.il-flowchart__range,.il-completion-group__range){
    display:block;margin:0 0 2px;font-size:14px;font-weight:var(--fw-bold);letter-spacing:0;text-transform:none;color:var(--ilpp-fg);
}
.ilpp .il-exam-single-block__topic{margin:3px 0 0;font-weight:var(--fw-semibold);color:var(--ilpp-ink)}
.ilpp .il-exam-single-block__rule{margin:2px 0 0;font-size:calc(var(--ilpp-fs) - 1.5px);font-style:normal;font-weight:var(--fw-regular);color:var(--ilpp-text)}
.ilpp .il-exam-question{
    position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;
    padding:10px 12px;border:0;border-radius:12px;scroll-margin:12px;
}
.ilpp .il-exam-question__prompt{margin:2px 0 10px;font-size:var(--ilpp-fs);font-weight:var(--fw-medium);color:var(--ilpp-ink);line-height:1.6}
.ilpp :is(.il-exam-options,.il-pl-opts){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:720px;margin:0}
.ilpp :is(.il-exam-option,.il-pl-opt){
    position:relative;display:flex;align-items:center;gap:10px;min-height:42px;
    padding:6px 12px 6px 7px;border:1px solid var(--ilpp-border);border-radius:11px;
    background:var(--ilpp-surface);color:var(--ilpp-text);cursor:pointer;transform:none;user-select:none;
    font-size:calc(var(--ilpp-fs) - 1.5px);line-height:1.45;
    transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.ilpp :is(.il-exam-option,.il-pl-opt):hover{border-color:color-mix(in srgb,var(--color-primary) 55%,var(--color-border));background:var(--ilpp-tint);color:var(--ilpp-ink);transform:none}
.ilpp :is(.il-exam-option,.il-pl-opt) input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ilpp :is(.il-exam-option,.il-pl-opt):focus-within{outline:2px solid var(--ilpp-strong);outline-offset:2px}
.ilpp :is(.il-exam-option__letter,.il-pl-opt-label){
    flex-shrink:0;width:28px;height:28px;min-width:0;border:0;border-radius:8px;display:grid;place-items:center;
    background:var(--ilpp-sunken);color:var(--ilpp-muted);font:var(--fw-bold) 13px/1 var(--font-sans);box-shadow:none;
}
.ilpp .il-pl-opt:hover .il-pl-opt-label{border:0;background:var(--ilpp-wash);color:var(--ilpp-fg)}
.ilpp .il-pl-opt-text{flex:1;font-size:inherit;font-weight:var(--fw-medium);color:inherit;line-height:inherit}
.ilpp :is(.il-exam-option,.il-pl-opt).is-selected{border-color:var(--ilpp-strong);background:var(--ilpp-wash);color:var(--ilpp-ink);font-weight:var(--fw-semibold);box-shadow:none}
.ilpp .il-exam-option.is-selected .il-exam-option__letter,
.ilpp .il-pl-opt.is-selected .il-pl-opt-label{background:var(--ilpp-strong);color:var(--ilpp-on);box-shadow:none}
.ilpp :is(.il-exam-shared,.il-exam-matching,.il-exam-map,.il-flowchart){position:relative;margin:4px 0;padding:12px;border:0;border-radius:12px;scroll-margin:12px}
.ilpp :is(.il-exam-shared__prompt,.il-exam-matching__instruction,.il-exam-map__instruction,.il-flowchart__instruction){margin:0 0 4px;font-size:var(--ilpp-fs);font-weight:var(--fw-medium);color:var(--ilpp-ink);line-height:1.6}
.ilpp :is(.il-exam-shared__rule,.il-flowchart__rule){margin:0 0 12px;font-size:calc(var(--ilpp-fs) - 1.5px);font-weight:var(--fw-regular);color:var(--ilpp-text)}
.ilpp .il-exam-shared__count{margin-top:8px;font-size:13px;color:var(--ilpp-muted)}
.ilpp :is(.il-exam-matching__layout,.il-flowchart__layout){display:grid;grid-template-columns:minmax(220px,.95fr) minmax(260px,1.25fr);gap:16px;align-items:start}
.ilpp :is(.il-exam-option-bank,.il-flowchart__options){padding:12px 16px;border:0;border-radius:12px;background:var(--ilpp-sunken)}
.ilpp :is(.il-exam-option-bank__title,.il-flowchart__options-title){display:block;margin-bottom:6px;font-size:13px;font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none;color:var(--ilpp-muted)}
.ilpp :is(.il-exam-option-bank__item,.il-flowchart__option){display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:4px 0;font-size:calc(var(--ilpp-fs) - 2px);line-height:1.45;color:var(--ilpp-text)}
.ilpp :is(.il-exam-option-bank__label,.il-flowchart__option-label){font-weight:var(--fw-bold);color:var(--ilpp-fg)}
.ilpp .il-exam-match-rows{display:flex;flex-direction:column;gap:2px;border-top:0}
.ilpp :is(.il-exam-match-row,.il-exam-map__row){display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border:0;border-radius:10px;scroll-margin:12px}
.ilpp :is(.il-exam-match-row__number,.il-exam-map__number){
    display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ilpp-sunken);color:var(--ilpp-muted);
    font:var(--fw-bold) 13.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;
}
.ilpp :is(.il-exam-match-row__text,.il-exam-map__label){font-size:calc(var(--ilpp-fs) - 1px);line-height:1.45;color:var(--ilpp-ink)}
.ilpp :is(.il-exam-select,.il-pl-match-row__sel){
    height:38px;min-width:72px;max-width:100%;padding:0 28px 0 12px;border:1px solid var(--ilpp-border);border-radius:10px;
    background-color:var(--ilpp-surface);color:var(--ilpp-ink);font:var(--fw-bold) 14.5px var(--font-sans);cursor:pointer;
}
.ilpp :is(.il-exam-select,.il-pl-match-row__sel):focus{outline:0;border-color:var(--ilpp-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent)}
.ilpp .il-exam-map__figure{display:flex;justify-content:center;margin:6px 0 12px;padding:8px;max-width:none;border:1px solid var(--ilpp-hair);border-radius:12px;background:var(--ilpp-sunken)}
.ilpp .il-exam-map__figure img{display:block;width:auto;max-width:100%;height:auto;max-height:min(46vh,480px);border-radius:8px;object-fit:contain}
.ilpp .il-exam-map__figure--source-page{padding:0;overflow:hidden;aspect-ratio:5 / 3}
.ilpp .il-exam-map__figure--source-page img{width:100%;max-height:none;border-radius:0;transform:translateY(-20%)}
.ilpp .il-exam-map__answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.ilpp .il-flowchart__diagram{padding:16px;border:1px solid var(--ilpp-border);border-radius:12px;background:var(--ilpp-surface)}
.ilpp .il-flowchart__title{margin:0 0 14px;text-align:center;font-size:var(--ilpp-fs);font-weight:var(--fw-bold);color:var(--ilpp-ink)}
.ilpp .il-flowchart__step{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--ilpp-hair);scroll-margin:12px}
.ilpp .il-flowchart__step:first-of-type{border-top:0}
.ilpp .il-flowchart__label{font-size:calc(var(--ilpp-fs) - 1px);line-height:1.45;color:var(--ilpp-text)}
.ilpp .il-flowchart__no{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-right:9px;padding:0 6px;border-radius:var(--radius-pill);background:var(--ilpp-wash);color:var(--ilpp-fg);font-size:12.5px;font-weight:var(--fw-bold);vertical-align:1px}
.ilpp .il-flowchart__step .il-exam-select{width:100%}
.ilpp .il-flowchart__arrow{height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-size:20px;font-weight:var(--fw-bold);line-height:1}
.ilpp .il-pl-match{display:flex;flex-direction:column;gap:10px}
.ilpp .il-pl-match-bank{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border:0;border-radius:12px;background:var(--ilpp-sunken)}
.ilpp .il-pl-match-bank__title{font-size:13px;font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none;color:var(--ilpp-muted)}
.ilpp .il-pl-match-bank__row{display:flex;gap:10px;align-items:baseline;font-size:calc(var(--ilpp-fs) - 2px);color:var(--ilpp-text);transition:opacity var(--dur-fast) var(--ease)}
.ilpp .il-pl-match-bank__key{flex:0 0 auto;min-width:22px;font-weight:var(--fw-bold);color:var(--ilpp-fg)}
.ilpp .il-pl-match-bank__val{flex:1}
.ilpp .il-pl-match-bank__row.is-used{opacity:.45}
.ilpp .il-pl-match-bank__row.is-used .il-pl-match-bank__val{text-decoration:line-through}
.ilpp .il-pl-match__rows{display:flex;flex-direction:column;gap:6px}
.ilpp .il-pl-match-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--ilpp-hair);border-radius:10px;background:var(--ilpp-surface)}
.ilpp .il-pl-match-row__key{flex:0 0 auto;min-width:22px;font-weight:var(--fw-bold);color:var(--ilpp-ink)}
.ilpp .il-pl-match-row__text{flex:1 1 180px;font-size:calc(var(--ilpp-fs) - 1.5px);color:var(--ilpp-text)}
.ilpp .il-pl-match-row__sel{flex:0 1 auto;min-width:160px}
.ilpp .il-pl-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 14px}
.ilpp .il-pl-cell{display:flex;flex-direction:column;gap:4px}
.ilpp .il-pl-cell-lbl{font-size:13px;font-weight:var(--fw-semibold);color:var(--ilpp-muted)}
.ilpp .il-pl-cell .il-pl-input{width:100%}

/* ── Tờ ghi chú / biểu mẫu / bảng dựng từ khung đề ── */
.ilpp .il-completion-group{margin:0 0 10px;padding:0;border:0;border-radius:0;background:none;overflow:visible;scroll-margin:12px}
.ilpp .il-completion-group__head{margin:6px 0 12px;padding:0;border:0;background:none}
.ilpp .il-completion-group__title{margin:0;font-size:calc(var(--ilpp-fs) + 1px);font-weight:var(--fw-bold);line-height:1.4;color:var(--ilpp-ink)}
.ilpp .il-completion-group__rule{margin:2px 0 0;font-size:calc(var(--ilpp-fs) - 1.5px);font-weight:var(--fw-regular);color:var(--ilpp-text)}
.ilpp .il-completion-paper{padding:18px 22px 20px;border:1px solid var(--ilpp-border);border-radius:14px;background:var(--ilpp-surface);overflow-x:auto}
/* Tờ chỉ chứa một bảng: bảng đã có khung riêng — bỏ khung ngoài cho khỏi hộp lồng hộp */
.ilpp .il-completion-paper:has(> table:only-child),
.ilpp .il-completion-paper:has(> .il-completion-paper__title + table:last-child){padding:0;border:0;border-radius:0;background:none}
.ilpp .il-completion-paper__title{max-width:none;margin:0 auto 12px;text-align:center;white-space:pre-line;font-size:var(--ilpp-fs);font-weight:var(--fw-bold);letter-spacing:0;line-height:1.5;color:var(--ilpp-ink)}
.ilpp .il-pl-ctx-title{margin:0 0 12px;text-align:center;font-size:var(--ilpp-fs);font-weight:var(--fw-bold);letter-spacing:0;text-transform:none;color:var(--ilpp-ink)}
.ilpp .il-completion-paper .il-pl-ctx-text{max-width:none;margin:0;padding:0;border:0;background:none;font-size:calc(var(--ilpp-fs) - .5px);line-height:1.95;color:var(--ilpp-ink)}
.ilpp .il-pl-ctx-text p{margin:0 0 4px;line-height:1.95}
.ilpp .il-pl-ctx-text p:empty{margin:0;height:4px}
.ilpp .il-pl-ctx-notes{padding:2px 0}
.ilpp .il-pl-ctx-notes__title{margin:0 0 10px;text-align:center;font-size:var(--ilpp-fs);font-weight:var(--fw-bold);color:var(--ilpp-ink)}
.ilpp .il-pl-ctx-notes p{margin:0 0 6px}
.ilpp .il-pl-ctx-notes__item{position:relative;padding-left:20px}
.ilpp .il-pl-ctx-notes__item::before{content:"•";position:absolute;left:3px;color:var(--color-primary);font-weight:var(--fw-bold)}
.ilpp .il-pl-ctx-notes__heading{margin-top:14px!important;font-weight:var(--fw-bold);color:var(--ilpp-ink)}
.ilpp .il-pl-ctx-notes__subheading{font-weight:var(--fw-semibold)}
.ilpp .il-pl-ctx-table{
    width:100%;min-width:520px;margin:0;border-collapse:separate;border-spacing:0;table-layout:auto;
    border:1px solid var(--ilpp-border);border-radius:12px;overflow:hidden;background:var(--ilpp-surface);box-shadow:none;
    font-size:calc(var(--ilpp-fs) - 1.5px);
}
.ilpp .il-completion-paper .il-pl-ctx-table{min-width:560px;border-color:var(--ilpp-border);box-shadow:none;table-layout:fixed}
.ilpp .il-pl-ctx-table :is(th,td){padding:10px 14px;border:0;border-top:1px solid var(--ilpp-hair);text-align:left;vertical-align:top;line-height:1.75}
.ilpp .il-pl-ctx-table :is(th,td) + :is(th,td){border-left:1px solid var(--ilpp-hair)}
.ilpp .il-pl-ctx-table tr:first-child > :is(th,td){border-top:0}
.ilpp .il-pl-ctx-table thead th{background:var(--ilpp-sunken);color:var(--ilpp-ink);font-size:calc(var(--ilpp-fs) - 2px);font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none}
.ilpp .il-pl-ctx-table tbody td{color:var(--ilpp-ink)}
.ilpp .il-pl-ctx-table tbody tr:hover td{background:transparent}
.ilpp .il-pl-ctx-table__caption td{background:var(--ilpp-wash);color:var(--ilpp-ink);font-weight:var(--fw-bold);text-align:center}
.ilpp .il-pl-ctx-form th{width:38%;max-width:280px;background:var(--ilpp-sunken);color:var(--ilpp-ink);font-size:inherit;font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none}
.ilpp .il-pl-ctx-form td{color:var(--ilpp-ink)}
.ilpp .il-pl-ctx-form__section th{width:auto;max-width:none;background:var(--ilpp-wash);color:var(--ilpp-ink);font-weight:var(--fw-bold)}
.ilpp .il-pl-ctx-form__list{margin:0;padding-left:18px;list-style:disc}
.ilpp .il-pl-ctx-form__list li{margin:0 0 4px;line-height:1.7}
.ilpp .il-pl-ctx-form__list li:last-child{margin-bottom:0}
.ilpp .il-completion-table--four-col :is(th,td):nth-child(1){width:18%}
.ilpp .il-completion-table--four-col :is(th,td):nth-child(2){width:32%}
.ilpp .il-completion-table--four-col :is(th,td):nth-child(3){width:24%}
.ilpp .il-completion-table--four-col :is(th,td):nth-child(4){width:26%}
.ilpp .il-pl-blank{display:inline-block;min-width:60px;height:1.2em;border-bottom:2px dotted var(--ilpp-line);vertical-align:text-bottom}
.ilpp .il-pl-q-num-tag{display:inline-block;margin:0 2px;padding:0 7px;border-radius:6px;background:var(--ilpp-sunken);color:var(--ilpp-muted);font-size:12px;font-weight:var(--fw-bold)}
.ilpp .il-pl-q-num-tag.is-current{background:var(--ilpp-strong);color:var(--ilpp-on);box-shadow:none}

/* Ô trả lời nằm ngay trong câu của đề */
.ilpp .il-inline-answer{display:inline-flex;align-items:center;gap:6px;min-width:0;margin:0 3px;vertical-align:baseline;white-space:nowrap;scroll-margin:12px}
.ilpp .il-inline-answer__no{flex-shrink:0;font-size:13px;font-weight:var(--fw-bold);color:var(--ilpp-fg);font-variant-numeric:tabular-nums}
.ilpp .il-inline-answer__input{
    width:9.5em;min-width:0;height:34px;padding:0 10px;margin:0;
    border:1px solid var(--ilpp-border);border-radius:9px;
    background:var(--ilpp-sunken);color:var(--ilpp-ink);text-align:left;box-shadow:none;
    font:var(--fw-semibold) calc(var(--ilpp-fs) - 1px) var(--font-sans);
    transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.ilpp .il-inline-answer__input::placeholder{color:var(--ilpp-muted)}
.ilpp .il-inline-answer__input:hover{border-color:var(--ilpp-line)}
.ilpp .il-inline-answer__input:focus{outline:0;border-color:var(--ilpp-strong);background:var(--ilpp-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent)}
.ilpp .il-inline-answer.is-answered .il-inline-answer__input{background:var(--ilpp-tint);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border))}
.ilpp .il-inline-answer__select{width:auto;max-width:min(320px,60vw);padding-right:var(--space-4);cursor:pointer}
.ilpp .il-completion-table .il-inline-answer__input{width:7.5em}
.ilpp .il-pl-inline-table{margin-top:2px}
.ilpp .il-pl-inline-table .il-pr-tablewrap{margin:0;border-color:var(--ilpp-border)}
.ilpp .il-pl-inline-table .il-pr-table th{background:var(--ilpp-sunken);color:var(--ilpp-ink)}
.ilpp .il-pl-inline-table .il-pr-table :is(th,td){border-color:var(--ilpp-hair);line-height:1.65}
.ilpp .il-pl-inline-table .il-inline-answer__input{width:clamp(72px,10vw,120px)}

/* ── Điện thoại: bảng xếp thành THẺ theo hàng — không tràn ngang, không cắt nửa cột ── */
@media (max-width:640px){
    .ilpp .il-pl-q{padding:8px}
    .ilpp .il-pl-q > .il-pl-input{flex:0 0 calc(100% - 42px);margin-left:42px}
    .ilpp .il-exam-question{padding:8px}
    .ilpp :is(.il-exam-options,.il-pl-opts){grid-template-columns:1fr}
    .ilpp :is(.il-exam-matching__layout,.il-flowchart__layout){grid-template-columns:1fr}
    .ilpp :is(.il-exam-option-bank,.il-flowchart__options){order:2}
    .ilpp .il-exam-map__answers{grid-template-columns:1fr}
    .ilpp .il-completion-paper{padding:12px;overflow:visible}
    .ilpp .il-inline-answer__input{width:7.5em}
    .ilpp .il-pr-blank .il-pl-input{width:9em}
    /* Bảng cột → mỗi hàng một khối; nhãn cột in lại trước ô (data-th do il-paper.js/ilppStack gắn). */
    .ilpp .il-pl-ctx-table.is-stack{min-width:0;border:0;border-radius:0;background:none;overflow:visible}
    .ilpp .il-pl-ctx-table.is-stack thead{display:none}
    .ilpp .il-pl-ctx-table.is-stack :is(tbody,tr,td,th){display:block;width:auto;max-width:none}
    .ilpp .il-pl-ctx-table.is-stack tr{margin:0 0 10px;border:1px solid var(--ilpp-border);border-radius:12px;background:var(--ilpp-surface);overflow:hidden}
    .ilpp .il-pl-ctx-table.is-stack :is(td,th){padding:8px 12px;border:0;border-top:1px solid var(--ilpp-hair)}
    .ilpp .il-pl-ctx-table.is-stack :is(td,th):first-child{border-top:0}
    .ilpp .il-pl-ctx-table.is-stack :is(td,th) + :is(td,th){border-left:0}
    .ilpp .il-pl-ctx-table.is-stack td[data-th]::before{
        content:attr(data-th);display:block;margin-bottom:1px;
        font-size:12.5px;font-weight:var(--fw-semibold);line-height:1.4;color:var(--ilpp-muted);
    }
    .ilpp .il-pl-ctx-table.is-stack td:empty{display:none}
    .ilpp .il-pl-ctx-table.is-stack .il-pl-ctx-table__caption td{border-radius:0;text-align:left}
    /* Biểu mẫu (nhãn | giá trị): MỘT thẻ, nhãn nhỏ nằm trên giá trị — không tách mỗi dòng một thẻ */
    .ilpp .il-pl-ctx-form.is-stack{border:1px solid var(--ilpp-border);border-radius:14px;background:var(--ilpp-surface);overflow:hidden}
    .ilpp .il-pl-ctx-form.is-stack tr{margin:0;border:0;border-top:1px solid var(--ilpp-hair);border-radius:0;background:none}
    .ilpp .il-pl-ctx-form.is-stack tr:first-child{border-top:0}
    .ilpp .il-pl-ctx-form.is-stack th{padding:10px 14px 0;border:0;background:none;font-size:13px;font-weight:var(--fw-semibold);color:var(--ilpp-muted)}
    .ilpp .il-pl-ctx-form.is-stack td{padding:2px 14px 10px;border:0}
    .ilpp .il-pl-ctx-form.is-stack .il-pl-ctx-form__section th{padding:12px 14px;background:var(--ilpp-sunken);font-size:calc(var(--ilpp-fs) - 1px);font-weight:var(--fw-bold);color:var(--ilpp-ink)}
}