/**
 * Mô-đun "Học tiếng Lào" — Dự án ST-Viet-Lao (C40 phần 1, 3b; thiết kế lại 19/10/2026). NukeViet tự nạp tệp này ở các
 * trang của mô-đun. Màu và thước đo lấy biến --st-* của tools\giao-dien\custom.css (ba phương án nhận diện); mỗi biến có
 * giá trị dự phòng. Chữ Lào dùng phông chuẩn Phetsarath OT (khai @font-face «Phetsarath OT Web» trong custom.css, tệp ở
 * themes/default/fonts/phetsarath-ot/, 19/10/2026); Noto Sans Lao (SIL OFL 1.1, themes/default/fonts/noto-sans-lao/ cùng
 * OFL.txt) là phông dự phòng. Không tải phông từ máy chủ ngoài.
 */

@font-face {
    font-family: 'Noto Sans Lao';
    src: url('../fonts/noto-sans-lao/NotoSansLao_400Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Lao';
    src: url('../fonts/noto-sans-lao/NotoSansLao_700Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.hoc-tap :lang(lo),
.hoc-tap .hoc-tap-lao {
    font-family: 'Phetsarath OT Web', 'Noto Sans Lao', 'Phetsarath OT', 'Leelawadee UI', sans-serif;
    line-height: 1.9;
}

/* ---------- Khung: một thẻ trắng rộng hết khung trang (thẳng hàng đầu trang, 19/10/2026) ---------- */

.hoc-tap {
    margin: 0 0 24px;
    padding: 30px 36px 36px;
    background: var(--st-card, #ffffff);
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    border-radius: var(--st-r, 14px);
    box-shadow: var(--st-shadow, 0 1px 2px rgba(20, 20, 50, 0.05), 0 6px 22px rgba(20, 20, 50, 0.06));
    font-size: 16px;
    line-height: 1.65;
}

@media (max-width: 767.98px) {
    .hoc-tap {
        padding: 20px 16px 26px;
    }
}

.hoc-tap h1 {
    color: var(--st-text, #1b1b2a);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 4px 0 14px;
}

.hoc-tap h2 {
    position: relative;
    color: var(--st-text, #1b1b2a);
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 14px;
    padding-left: 14px;
}

.hoc-tap h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 5px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--st-primary, #3a3d98), var(--st-secondary, #1a6b45));
}

.hoc-tap h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 18px 0 8px;
}

.hoc-tap h4 {
    font-size: 15px;
    color: var(--st-muted, #4c4c63);
    margin: 12px 0 4px;
}

.hoc-tap-dan,
.hoc-tap-vi-tri {
    color: var(--st-muted, #4c4c63);
}

.hoc-tap-vi-tri {
    font-size: 14px;
    margin-bottom: 10px;
}

/* Mỗi hoạt động là một phần riêng, cách nhau bằng đường kẻ mảnh. */
.hoc-tap-hoat-dong {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
}

/* ---------- Danh sách bài (trang «Học tiếng Lào») ---------- */

.hoc-tap h2.hoc-tap-khoa {
    font-size: 22px;
    margin-top: 28px;
}

.hoc-tap h3.hoc-tap-cap {
    color: var(--st-primary, #3a3d98);
    font-size: 17px;
    margin-top: 22px;
}

.hoc-tap h4.hoc-tap-chu-de {
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 6px;
}

.hoc-tap-ds-bai {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    border-radius: var(--st-r-sm, 10px);
    overflow: hidden;
    background: var(--st-card, #ffffff);
}

.hoc-tap-ds-bai li {
    border-top: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
}

.hoc-tap-ds-bai li:first-child {
    border-top: 0;
}

.hoc-tap-ds-bai li a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px;
    color: var(--st-text, #1b1b2a);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.hoc-tap-so-bai {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--st-surface2, #ededf6);
    color: var(--st-primary, #3a3d98);
    font-size: 13px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}

.hoc-tap-ten-bai {
    flex: 1 1 auto;
}

.hoc-tap-ds-bai li a::after {
    content: '›';
    margin-left: auto;
    color: var(--st-border, #74748c);
    font-size: 20px;
    transition: transform 160ms ease;
}

.hoc-tap-ds-bai li a:hover,
.hoc-tap-ds-bai li a:focus {
    background: var(--st-surface, #fafafd);
    color: var(--st-primary, #3a3d98);
}

.hoc-tap-ds-bai li a:hover::after {
    transform: translateX(3px);
}

/* ---------- Chọn giáo trình (thẻ khoá) và mục lục khoá (0.8.0) ---------- */

.hoc-tap-nhom-khoa {
    margin-top: 26px;
}

/* Mỗi khoá một hàng rộng (ít khoá, chữ mô tả dài): nội dung bên trái, nút bên phải; điện thoại thì xếp dọc. */
.hoc-tap-luoi-khoa {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.hoc-tap-the-khoa {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 22px 18px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    border-left: 4px solid var(--st-primary, #3a3d98);
    border-radius: var(--st-r, 14px);
    background: var(--st-card, #ffffff);
    box-shadow: 0 1px 2px rgba(20, 20, 50, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.hoc-tap-the-khoa:hover {
    transform: translateY(-2px);
    box-shadow: var(--st-shadow-hover, 0 2px 4px rgba(20, 20, 50, 0.06), 0 12px 32px rgba(20, 20, 50, 0.1));
}

.hoc-tap-the-khoa-nhap {
    border-style: dashed;
    border-left: 4px solid #d9a441;
}

@media (min-width: 768px) {
    .hoc-tap-the-khoa {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 28px;
        padding: 22px 26px;
    }

    .hoc-tap-the-khoa > * {
        grid-column: 1;
    }

    .hoc-tap-the-khoa > .hoc-tap-hang-nut-khoa {
        grid-column: 2;
        grid-row: 1 / span 5;
        align-self: center;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
    }

    .hoc-tap-the-khoa .hoc-tap-so-lieu-khoa {
        margin-bottom: 0;
    }
}

.hoc-tap-the-khoa-dau {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 4px;
    margin-bottom: 8px;
}

.hoc-tap-the-khoa h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 8px;
}

.hoc-tap-the-khoa h3 a {
    color: var(--st-text, #1b1b2a);
    text-decoration: none;
}

.hoc-tap-the-khoa h3 a:hover {
    color: var(--st-primary, #3a3d98);
}

.hoc-tap-mo-ta-khoa {
    color: var(--st-muted, #4c4c63);
    margin: 0 0 8px;
}

.hoc-tap-nguon-khoa {
    font-size: 14px;
    color: var(--st-muted, #4c4c63);
    font-style: italic;
    margin: 0 0 8px;
}

.hoc-tap-so-lieu-khoa {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-primary, #3a3d98);
    margin: 0 0 14px;
}

.hoc-tap-hang-nut-khoa {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.hoc-tap-nut.hoc-tap-nut-vien,
.hoc-tap-nut.hoc-tap-nut-vien:link,
.hoc-tap-nut.hoc-tap-nut-vien:visited {
    background: transparent;
    color: var(--st-primary, #3a3d98);
    border: 1px solid var(--st-primary, #3a3d98);
}

.hoc-tap-nut.hoc-tap-nut-vien:hover,
.hoc-tap-nut.hoc-tap-nut-vien:focus {
    background: var(--st-surface2, #ededf6);
    color: var(--st-primary, #3a3d98);
    box-shadow: none;
}

.hoc-tap-nhan-trinh-do,
.hoc-tap-nhan-nhap {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: 999px;
}

.hoc-tap-nhan-trinh-do {
    background: var(--st-surface2, #ededf6);
    color: var(--st-primary, #3a3d98);
}

.hoc-tap-nhan-nhap {
    background: #fbf0df;
    color: #6b4100;
    margin-left: 8px;
}

.hoc-tap-the-khoa-dau .hoc-tap-nhan-nhap {
    margin-left: 0;
}

.hoc-tap-nhan-mo {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e3f3ea;
    color: #13522f;
}

.hoc-tap-moi-ngan {
    margin: 4px 0 18px;
}

/* Đầu trang khoá. */
.hoc-tap-dau-khoa {
    padding: 22px 24px;
    margin: 6px 0 22px;
    border-radius: var(--st-r, 14px);
    background: linear-gradient(135deg, var(--st-surface2, #ededf6) 0%, var(--st-surface, #fafafd) 100%);
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.08));
}

.hoc-tap-dau-khoa h1 {
    margin-top: 8px;
}

.hoc-tap-dau-khoa p:last-child {
    margin-bottom: 0;
}

/* Thân trang khoá: mục lục bám bên trái (màn hình rộng) + các chương. */
.hoc-tap-khoa-than {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.hoc-tap-muc-luc {
    position: sticky;
    top: 72px;
    padding: 14px 14px 10px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    border-radius: var(--st-r, 14px);
    background: var(--st-surface, #fafafd);
}

.hoc-tap-muc-luc-tieu-de {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-muted, #4c4c63);
    margin: 0 0 8px;
}

.hoc-tap-muc-luc ol {
    margin: 0;
    padding-left: 20px;
}

.hoc-tap-muc-luc li {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.45;
}

.hoc-tap-chuong {
    margin-bottom: 14px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    border-radius: var(--st-r, 14px);
    background: var(--st-card, #ffffff);
    overflow: hidden;
    scroll-margin-top: 80px;
}

.hoc-tap-chuong > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    background: var(--st-surface, #fafafd);
    font-weight: 700;
    font-size: 17px;
}

.hoc-tap-chuong > summary::-webkit-details-marker {
    display: none;
}

.hoc-tap-chuong > summary::after {
    content: '▾';
    margin-left: 4px;
    color: var(--st-border, #74748c);
    transition: transform 160ms ease;
}

.hoc-tap-chuong:not([open]) > summary::after {
    transform: rotate(-90deg);
}

.hoc-tap-chuong[open] > summary {
    border-bottom: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
}

.hoc-tap-chuong-so {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--st-primary, #3a3d98);
    color: var(--st-primary-contrast, #ffffff);
    text-align: center;
    line-height: 32px;
    font-size: 15px;
}

.hoc-tap-chuong-ten {
    flex: 1 1 auto;
}

.hoc-tap-chuong-dem {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-muted, #4c4c63);
}

.hoc-tap-chuong h3.hoc-tap-chu-de {
    margin: 16px 18px 8px;
    font-size: 15px;
    color: var(--st-muted, #4c4c63);
}

.hoc-tap-chuong .hoc-tap-ds-bai {
    margin: 0 18px 16px;
}

@media (max-width: 860px) {
    .hoc-tap-khoa-than {
        grid-template-columns: minmax(0, 1fr);
    }

    .hoc-tap-muc-luc {
        display: none;
    }

    .hoc-tap-chuong .hoc-tap-ds-bai {
        margin: 0 10px 12px;
    }

    .hoc-tap-chuong h3.hoc-tap-chu-de {
        margin: 14px 12px 6px;
    }
}

/* Hàng nút nhảy tới từng phần của bài. */
.hoc-tap-nhay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
}

.hoc-tap-nhay-nhan {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-muted, #4c4c63);
    margin-right: 2px;
}

.hoc-tap-nhay a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--st-surface2, #ededf6);
    color: var(--st-primary, #3a3d98);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.hoc-tap-nhay a:hover,
.hoc-tap-nhay a:focus {
    background: var(--st-primary, #3a3d98);
    color: var(--st-primary-contrast, #ffffff);
}

.hoc-tap-hoat-dong {
    scroll-margin-top: 80px;
}

.hoc-tap-moi {
    padding: 24px;
    background-color: var(--st-surface2, #ededf6);
    border-radius: var(--st-r, 14px);
}

.hoc-tap-nut,
.hoc-tap-nut:link,
.hoc-tap-nut:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    background-color: var(--st-primary, #3a3d98);
    color: var(--st-primary-contrast, #ffffff);
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hoc-tap-nut:hover,
.hoc-tap-nut:focus {
    background-color: var(--st-deep, #282a6e);
    color: var(--st-primary-contrast, #ffffff);
    box-shadow: 0 6px 16px rgba(20, 20, 50, 0.18);
}

.hoc-tap-nut:active {
    transform: translateY(1px);
}

.hoc-tap-loi-bao {
    border-left: 4px solid #8a5300;
    background-color: #fbf0df;
    color: #2a1f17;
    padding: 12px 16px;
    border-radius: 0 var(--st-r-sm, 10px) var(--st-r-sm, 10px) 0;
    margin-bottom: 8px;
}

.hoc-tap-loi-bao p {
    margin: 4px 0;
}

.hoc-tap-loi-bao-tieu-de {
    font-weight: 700;
}

/* ---------- Giới thiệu từ mới: bảng gọn, kẻ vạch xen màu ---------- */

.hoc-tap-bang-khung {
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    border-radius: var(--st-r-sm, 10px);
    overflow: hidden;
    overflow-x: auto;
}

.hoc-tap-bang {
    width: 100%;
    border-collapse: collapse;
}

.hoc-tap-bang th {
    background: var(--st-surface, #fafafd);
    color: var(--st-muted, #4c4c63);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
}

.hoc-tap-bang td {
    padding: 6px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--st-line, rgba(20, 20, 50, 0.08));
}

.hoc-tap-bang tbody tr:last-child td {
    border-bottom: 0;
}

.hoc-tap-bang tbody tr:nth-child(even) td {
    background: var(--st-surface, #fafafd);
}

.hoc-tap-bang tbody tr:hover td {
    background: var(--st-surface2, #ededf6);
}

.hoc-tap-bang td:first-child {
    width: 34%;
}

.hoc-tap-bang .hoc-tap-tu-loai {
    color: var(--st-muted, #4c4c63);
    font-size: 14px;
}

.hoc-tap-bang .hoc-tap-lao,
.hoc-tap-cau .hoc-tap-lao {
    font-size: 22px;
}

/* ---------- Thẻ ghi nhớ ---------- */

.hoc-tap-the-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.hoc-tap-the {
    position: relative;
    min-height: 116px;
    padding: 14px 12px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.12));
    border-radius: var(--st-r, 14px);
    background-color: var(--st-card, #ffffff);
    color: var(--st-text, #1b1b2a);
    box-shadow: 0 1px 2px rgba(20, 20, 50, 0.05);
    cursor: pointer;
    text-align: center;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 200ms ease, color 200ms ease;
}

.hoc-tap-the:hover {
    transform: translateY(-2px);
    box-shadow: var(--st-shadow-hover, 0 2px 4px rgba(20, 20, 50, 0.06), 0 12px 32px rgba(20, 20, 50, 0.1));
}

.hoc-tap-the:focus-visible {
    outline: 3px solid var(--st-secondary, #1a6b45);
    outline-offset: 2px;
}

.hoc-tap-the-truoc {
    display: block;
    font-size: 26px;
}

.hoc-tap-the-sau {
    display: none;
    font-size: 17px;
    font-weight: 700;
}

.hoc-tap-the[aria-pressed='true'] {
    background-color: var(--st-primary, #3a3d98);
    border-color: var(--st-primary, #3a3d98);
    color: var(--st-primary-contrast, #ffffff);
}

.hoc-tap-the[aria-pressed='true'] .hoc-tap-the-truoc {
    font-size: 18px;
    opacity: 0.85;
}

.hoc-tap-the[aria-pressed='true'] .hoc-tap-the-sau {
    display: block;
    margin-top: 6px;
}

/* ---------- Mẫu câu ---------- */

.hoc-tap-cau {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.hoc-tap-cau li {
    padding: 12px 16px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    border-radius: var(--st-r-sm, 10px);
    background: var(--st-surface, #fafafd);
}

.hoc-tap-cau .hoc-tap-lao,
.hoc-tap-cau-nghia {
    display: block;
}

.hoc-tap-cau-nghia {
    color: var(--st-muted, #4c4c63);
}

/* ---------- Chuyển bài ---------- */

.hoc-tap-chuyen {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
    flex-wrap: wrap;
}

/* Vùng bấm tối thiểu 44 điểm ảnh trên điện thoại (WCAG 2.5.8 đòi tối thiểu 24). */
.hoc-tap-chuyen a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 16px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.12));
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.hoc-tap-chuyen a:hover,
.hoc-tap-chuyen a:focus {
    background: var(--st-surface2, #ededf6);
    border-color: transparent;
}

/* ---------- Trang đồng ý (C40 phần 2) ---------- */

.hoc-tap-hop {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.12));
    border-radius: var(--st-r-sm, 10px);
    background-color: var(--st-surface, #fafafd);
}

.hoc-tap-hop input[type='checkbox'] {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    margin-right: 6px;
}

.hoc-tap-ghi-chu,
.hoc-tap-chan-ds {
    color: var(--st-muted, #4c4c63);
    font-size: 14px;
}

.hoc-tap-chan-ds {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--st-line, rgba(20, 20, 50, 0.08));
}

.hoc-tap-thong-bao {
    padding: 10px 14px;
    border-left: 4px solid var(--st-primary, #3a3d98);
    border-radius: 0 var(--st-r-sm, 10px) var(--st-r-sm, 10px) 0;
    background-color: var(--st-surface2, #ededf6);
}

.hoc-tap-ds-rut {
    list-style: none;
    padding: 0;
}

.hoc-tap-ds-rut li {
    padding: 6px 0;
}

/* ---------- Mục tiêu, phiên âm, hội thoại, luyện tập (chấm ở trình duyệt — js/hoc-tap.js) ---------- */

.hoc-tap [hidden] {
    display: none !important;
}

.hoc-tap-thoi-luong {
    color: var(--st-muted, #4c4c63);
    margin-top: -8px;
}

.hoc-tap-muc-tieu {
    margin: 10px 0 16px;
    padding: 14px 18px;
    border-left: 4px solid var(--st-secondary, #1a6b45);
    border-radius: 0 var(--st-r-sm, 10px) var(--st-r-sm, 10px) 0;
    background-color: var(--st-surface2, #ededf6);
}

.hoc-tap-muc-tieu p {
    margin: 0 0 4px;
    font-weight: 700;
}

.hoc-tap-muc-tieu ul {
    margin: 0;
    padding-left: 20px;
}

.hoc-tap-phien-am {
    display: block;
    color: var(--st-muted, #4c4c63);
    font-style: italic;
}

.hoc-tap-bang td.hoc-tap-phien-am {
    display: table-cell;
}

/* Hội thoại: mỗi lời là một bong bóng; lời chẵn lệch sang phải cho dễ theo dõi hai người. */
.hoc-tap-hoi-thoai {
    margin-bottom: 18px;
}

.hoc-tap-hoi-thoai h3 {
    margin-top: 6px;
}

.hoc-tap-loi {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hoc-tap-loi li {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: var(--st-surface2, #ededf6);
}

.hoc-tap-loi li:nth-child(even) {
    align-self: flex-end;
    border-radius: 16px 16px 4px 16px;
    background: var(--st-surface, #fafafd);
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.1));
}

.hoc-tap-loi .hoc-tap-lao {
    font-size: 20px;
}

.hoc-tap-nguoi-noi {
    font-weight: 700;
    color: var(--st-primary, #3a3d98);
    margin-right: 4px;
}

.hoc-tap-loi .hoc-tap-cau-nghia {
    display: block;
    font-size: 15px;
}

@media (max-width: 767.98px) {
    .hoc-tap-loi li {
        max-width: 94%;
    }
}

.hoc-tap-ngu-lieu {
    margin: 14px 0;
    padding: 6px 16px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.12));
    border-radius: var(--st-r, 14px);
    background-color: var(--st-surface, #fafafd);
}

.hoc-tap-ngu-lieu summary {
    min-height: 44px;
    line-height: 44px;
    cursor: pointer;
    font-weight: 700;
}

.hoc-tap-diem {
    font-weight: 700;
    color: var(--st-secondary, #1a6b45);
}

.hoc-tap-cau-hoi {
    margin: 14px 0;
    padding: 16px 18px;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.12));
    border-radius: var(--st-r, 14px);
    background-color: var(--st-card, #ffffff);
    box-shadow: 0 1px 2px rgba(20, 20, 50, 0.04);
}

.hoc-tap-cau-so {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--st-muted, #4c4c63);
}

.hoc-tap-de p {
    margin: 0 0 6px;
}

.hoc-tap-de-lao {
    font-size: 24px;
}

.hoc-tap-lua-chon {
    border: 0;
    margin: 0 0 8px;
    padding: 0;
}

.hoc-tap-chon {
    display: block;
    min-height: 44px;
    padding: 9px 12px;
    margin: 6px 0;
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.16));
    border-radius: var(--st-r-sm, 10px);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.hoc-tap-chon:hover {
    background: var(--st-surface, #fafafd);
}

.hoc-tap-chon .hoc-tap-lao {
    font-size: 19px;
}

.hoc-tap-go input {
    max-width: 480px;
    font-size: 18px;
}

.hoc-tap-go input:lang(lo) {
    font-family: 'Phetsarath OT Web', 'Noto Sans Lao', 'Phetsarath OT', 'Leelawadee UI', sans-serif;
}

button.hoc-tap-nut {
    border: 0;
    cursor: pointer;
}

button.hoc-tap-nut-phu {
    background-color: var(--st-surface2, #ededf6);
    color: var(--st-text, #1b1b2a);
    border: 1px solid var(--st-line, rgba(20, 20, 50, 0.16));
}

button.hoc-tap-nut-phu:hover,
button.hoc-tap-nut-phu:focus {
    background-color: var(--st-surface, #fafafd);
    color: var(--st-text, #1b1b2a);
}

.hoc-tap-kq {
    font-weight: 700;
    margin: 8px 0 4px;
}

.hoc-tap-kq-dau {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
}

.hoc-tap-kq-dung {
    color: var(--st-secondary, #1a6b45);
}

.hoc-tap-kq-gan {
    color: var(--st-primary, #3a3d98);
}

.hoc-tap-gan .hoc-tap-lao,
.hoc-tap-ds-dap-an .hoc-tap-lao {
    font-size: 19px;
}

.hoc-tap-nhan {
    margin: 6px 0 2px;
    color: var(--st-muted, #4c4c63);
    font-weight: 700;
}

.hoc-tap-dap-an-tinh {
    margin-top: 6px;
}

/* Bài đọc / ngữ pháp (0.7.0): đoạn chữ Lào cỡ lớn, bản dịch gấp lại. */
.hoc-tap-bai-doc {
    margin-bottom: 18px;
}

.hoc-tap-doan {
    font-size: 20px;
    margin: 0 0 10px;
}

.hoc-tap-ban-dich {
    margin: 6px 0 16px;
    padding: 6px 16px;
    border-left: 4px solid var(--st-border, #74748c);
    border-radius: 0 var(--st-r-sm, 10px) var(--st-r-sm, 10px) 0;
    background: var(--st-surface, #fafafd);
}

.hoc-tap-ban-dich summary {
    min-height: 44px;
    line-height: 44px;
    cursor: pointer;
    font-weight: 700;
}

/* Câu hỏi mở (không có đáp án): chỉ đề + lời dặn. */
.hoc-tap-cau-mo {
    border-style: dashed;
    box-shadow: none;
}

/* Bàn phím: vòng tập trung rõ trên nút và trên ô lựa chọn (cả khi giao diện chung tắt outline). */
.hoc-tap button:focus-visible,
.hoc-tap summary:focus-visible,
.hoc-tap a:focus-visible {
    outline: 3px solid var(--st-secondary, #1a6b45);
    outline-offset: 2px;
}

.hoc-tap-chon:focus-within {
    outline: 3px solid var(--st-secondary, #1a6b45);
    outline-offset: 2px;
}

.hoc-tap-chon:has(input:checked) {
    border-width: 2px;
    border-color: var(--st-primary, #3a3d98);
    background: var(--st-surface2, #ededf6);
}

/* Bài NHÁP xem trước — chỉ quản trị viên và nhóm được xem nháp thấy (C40 phần 3). */
.hoc-tap-ban-nhap {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 2px dashed var(--st-primary, #3a3d98);
    border-radius: var(--st-r-sm, 10px);
    background-color: var(--st-surface2, #ededf6);
}

.hoc-tap-ban-nhap p {
    margin: 0 0 4px;
}

.hoc-tap-ban-nhap ul {
    margin: 4px 0 0;
}