/* ═══════════════════════════════════════════════════════════════════════════
   IELTS Listening — đề bài (prompt) dựng bởi public/assets/js/il-prompt.js.
   Dùng chung cho listening_player / listening_result / listening_review.
   ═══════════════════════════════════════════════════════════════════════════ */

.il-pr-text        { white-space: normal; }
.il-pr-text + .il-pr-tablewrap,
.il-pr-tablewrap + .il-pr-text { margin-top: var(--space-3); }

/* 🚨 Bảng PHẢI cuộn được trong khung của nó. Để bảng tự tràn thì trên điện thoại
   cột cuối bị cắt cụt mà không có gì báo — học viên không biết là còn nội dung. */
.il-pr-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.il-pr-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 320px;
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
}

.il-pr-table th,
.il-pr-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
    text-align: left;
    vertical-align: middle;
    color: var(--color-text);
    line-height: var(--lh-body);
}

.il-pr-table th {
    background: var(--color-soft);
    color: var(--color-ink);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.il-pr-table tr:last-child td { border-bottom: 0; }
.il-pr-table th:last-child,
.il-pr-table td:last-child     { border-right: 0; }

/* Ảnh sơ đồ / bản đồ của câu hỏi. Dùng chung cho cả ba trang Listening. */
.il-pl-q-fig {
    margin: 0 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-2);
    overflow: hidden;
}

.il-pl-q-fig img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-sm);
}

/* Câu nhiều ô nhập (bảng / sơ đồ) — mỗi ô một nhãn riêng, thay vì bắt học viên
   nhồi mọi đáp án vào một dòng ngăn bằng dấu chấm phẩy. */
.il-pl-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.il-pl-cell        { display: flex; flex-direction: column; gap: var(--space-1); }
.il-pl-cell-lbl    {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-secondary-text);
}

/* Chỗ trống trong đề — ô gạch liền mạch, không bị ngắt dòng giữa chừng. */
.il-pr-blank {
    display: inline-block;
    min-width: 92px;
    border-bottom: 2px solid var(--color-primary);
    vertical-align: baseline;
    margin: 0 var(--space-1);
}

.il-pr-table .il-pr-blank { min-width: 110px; }

@media (max-width: 640px) {
    .il-pr-table         { font-size: var(--fs-micro); }
    .il-pr-table th,
    .il-pr-table td      { padding: var(--space-2); }
    .il-pr-blank         { min-width: 72px; }
    .il-pr-table .il-pr-blank { min-width: 84px; }
}