/* =====================================================
   BẢNG IPA TƯƠNG TÁC — stylephonetics.css  v3.0
   Responsive: mobile (≤480px) | tablet (≥600px) | desktop (≥900px) | wide (≥1280px)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans:wght@400;600&display=swap');

/* --- RESET & BIẾN --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:        #4f6ef7;
    --primary-dark:   #3a56d4;
    --primary-light:  #eef1ff;
    --primary-glow:   rgba(79,110,247,0.18);

    --success:        #10b981;
    --success-dark:   #059669;
    --success-light:  #d1fae5;

    --danger:         #ef4444;
    --danger-dark:    #dc2626;
    --warning:        #f59e0b;
    --warning-light:  #fef3c7;

    --bg:             #f0f4ff;
    --surface:        #ffffff;
    --surface-2:      #f8f9ff;
    --border:         #e2e8f8;
    --border-strong:  #c7d2fe;

    --text:           #1e2a45;
    --text-muted:     #64748b;
    --text-light:     #94a3b8;

    --vowel-bg:       #fffbeb;
    --vowel-border:   #fbbf24;
    --diphthong-bg:   #f0fdf4;
    --diphthong-border:#34d399;
    --consonant-bg:   #fff1f2;
    --consonant-border:#fb7185;

    --radius-sm:      6px;
    --radius:         12px;
    --radius-lg:      18px;
    --shadow-xs:      0 1px 3px rgba(30,42,69,0.06);
    --shadow-sm:      0 2px 10px rgba(30,42,69,0.08);
    --shadow-md:      0 6px 24px rgba(30,42,69,0.12);
    --shadow-glow:    0 0 0 3px var(--primary-glow);

    /* Header height để tính offset */
    --header-h:       58px;   /* hàng 1: logo + logout */
    --tabbar-h:       42px;   /* hàng 2: tabs (mobile/tablet) */
    --banner-h:       0px;    /* [MỚI] chiều cao thanh cảnh báo "đang xem tài khoản học viên" (giảng viên) — 0 khi không hiện */
    --total-top:      calc(var(--header-h) + var(--tabbar-h) + var(--banner-h)); /* tổng offset trên mobile */
    --footer-h:       52px;
}

/* [MỚI] Khi giảng viên đang "xem như học viên", đẩy toàn bộ header + nội dung xuống
   để nhường chỗ cho thanh cảnh báo cố định trên cùng */
body.has-impersonation-banner { --banner-h: 40px; }

/* =====================================================
   BASE
   ===================================================== */
html { font-size: 15px; scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Noto Sans', 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(79,110,247,0.06) 0%, transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(16,185,129,0.05) 0%, transparent 40%);
    color: var(--text);
    /* padding-top = header, padding-bottom = footer */
    padding: calc(var(--total-top) + 12px) 12px calc(var(--footer-h) + 16px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1 { text-align:center; font-size:1.4rem; font-weight:700; color:var(--text); margin:8px 0 14px; letter-spacing:-0.02em; }
h2 { font-size:1.1rem; font-weight:700; color:var(--text); margin:0 0 10px; letter-spacing:-0.01em; }
h3 { font-size:0.95rem; font-weight:600; color:var(--text); margin:0 0 8px; }

/* =====================================================
   HEADER CỐ ĐỊNH
   ===================================================== */
#site-header {
    position: fixed;
    top: var(--banner-h); left: 0; right: 0;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 16px rgba(30,42,69,0.10);
    z-index: 900;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-badge {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 10px var(--primary-glow);
    flex-shrink: 0;
}
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.logo-text strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -0.01em;
}
.logo-text span {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Tab nav — mobile/tablet: hàng riêng ngay dưới header, scroll ngang */
.header-tabs {
    position: fixed;
    top: calc(var(--banner-h) + var(--header-h));
    left: 0; right: 0;
    height: var(--tabbar-h);
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    box-shadow: 0 2px 8px rgba(30,42,69,0.06);
    z-index: 899;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px;
    align-items: center;
    justify-content: flex-start;
}
.header-tabs::-webkit-scrollbar { display: none; }

.header-tab-btn {
    flex-shrink: 0;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.01em;
    position: relative;
}
.header-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 50%; right: 50%;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: left 0.2s, right 0.2s;
}
.header-tab-btn.active {
    color: var(--primary);
    background: var(--primary-light);
}
.header-tab-btn.active::after {
    left: 8px;
    right: 8px;
}
.header-tab-btn:hover:not(.active) {
    background: var(--surface-2);
    color: var(--text);
}

/* --- [MỚI] TAB MẸ DẠNG DROPDOWN (Nền tảng / Chuyên sâu) --- */
.header-tab-dropdown {
    position: relative;
    flex-shrink: 0;
    display: flex;
}
.main-tab-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}
.main-tab-dropdown-btn .dropdown-arrow {
    font-size: 0.62rem;
    display: inline-block;
    transition: transform 0.2s;
    transform: translateY(1px);
}
.header-tab-dropdown.open .dropdown-arrow {
    transform: rotate(180deg) translateY(-1px);
}
/* Menu xổ xuống: dùng position:fixed (canh vị trí bằng JS) để không bị thanh tab
   (overflow-x:auto trên mobile) cắt mất phần tràn theo chiều dọc. */
.header-tab-dropdown-menu {
    position: fixed;
    display: none;
    flex-direction: column;
    min-width: 172px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 6px;
    gap: 2px;
    z-index: 950;
}
.header-tab-dropdown-menu.open { display: flex; }
.header-tab-dropdown-menu .header-tab-btn {
    width: 100%;
    text-align: left;
    padding: 9px 12px;
}
.header-tab-dropdown-menu .header-tab-btn::after { display: none; }
.header-tab-dropdown-menu .header-tab-btn.active {
    background: var(--primary-light);
    color: var(--primary);
}

/* --- [MỚI] Khung "Nội dung đang xây dựng" dùng cho các tab con của "Chuyên sâu" --- */
.wip-panel {
    background: var(--surface);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 54px 24px;
    text-align: center;
    color: var(--text-muted);
}
.wip-panel .wip-icon {
    display: block;
    font-size: 2.6rem;
    margin-bottom: 12px;
}
.wip-panel h3 {
    color: var(--text);
    font-size: 1.05rem;
    margin-bottom: 8px;
}
.wip-panel p {
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto;
}

/* =====================================================
   [MỚI] SƠ ĐỒ LỘ TRÌNH PHIÊN ÂM — TAB "MẤT GỐC" (Chuyên sâu)
   ===================================================== */
.roadmap-wrap { max-width: 760px; margin: 0 auto; }

/* --- Khối giới thiệu --- */
.roadmap-intro {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-md);
    margin-bottom: 20px;
}
.roadmap-intro-badge {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}
.roadmap-intro h3 {
    font-size: 1.22rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.roadmap-intro p {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 18px;
}
.roadmap-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.roadmap-stat {
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius);
    padding: 9px 16px;
    min-width: 74px;
}
.roadmap-stat strong { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.roadmap-stat span { display: block; font-size: 0.64rem; color: rgba(255,255,255,0.85); margin-top: 2px; letter-spacing: 0.02em; }

/* --- Dải tổng quan các giai đoạn --- */
.roadmap-stages {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 16px;
}
.roadmap-stages::-webkit-scrollbar { display: none; }
.roadmap-stage-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1.5px solid transparent;
}
.roadmap-stage-arrow { flex-shrink: 0; color: var(--text-light); font-size: 0.75rem; }

.stage-intro      { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }
.stage-vowel      { background: var(--vowel-bg);       color: #92660a; border-color: var(--vowel-border); }
.stage-diphthong  { background: var(--diphthong-bg);   color: #17794f; border-color: var(--diphthong-border); }
.stage-consonant  { background: var(--consonant-bg);   color: #b5324a; border-color: var(--consonant-border); }
.stage-stress     { background: var(--warning-light);  color: #92620a; border-color: var(--warning); }
.stage-flow       { background: var(--success-light);  color: var(--success-dark); border-color: var(--success); }

/* --- Timeline dọc 9 buổi học --- */
.roadmap-timeline { position: relative; padding-left: 34px; }
.roadmap-timeline::before {
    content: '';
    position: absolute;
    left: 14px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--border-strong);
    border-radius: 2px;
}
.roadmap-day { position: relative; margin-bottom: 14px; }
.roadmap-day:last-child { margin-bottom: 0; }
.roadmap-day-marker {
    position: absolute;
    left: -34px; top: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 0 0 4px var(--surface);
    z-index: 1;
}
.roadmap-day.stage-intro     .roadmap-day-marker { background: var(--primary); }
.roadmap-day.stage-vowel     .roadmap-day-marker { background: var(--vowel-border); }
.roadmap-day.stage-diphthong .roadmap-day-marker { background: var(--diphthong-border); }
.roadmap-day.stage-consonant .roadmap-day-marker { background: var(--consonant-border); }
.roadmap-day.stage-stress    .roadmap-day-marker { background: var(--warning); }
.roadmap-day.stage-flow      .roadmap-day-marker { background: var(--success); }

.roadmap-day-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid transparent;
    border-radius: var(--radius);
    padding: 13px 15px;
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s, box-shadow 0.2s;
}
.roadmap-day:hover .roadmap-day-card { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.roadmap-day.stage-intro     .roadmap-day-card { border-left-color: var(--primary); }
.roadmap-day.stage-vowel     .roadmap-day-card { border-left-color: var(--vowel-border); }
.roadmap-day.stage-diphthong .roadmap-day-card { border-left-color: var(--diphthong-border); }
.roadmap-day.stage-consonant .roadmap-day-card { border-left-color: var(--consonant-border); }
.roadmap-day.stage-stress    .roadmap-day-card { border-left-color: var(--warning); }
.roadmap-day.stage-flow      .roadmap-day-card { border-left-color: var(--success); }

.roadmap-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.roadmap-day-label { font-size: 0.66rem; font-weight: 800; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.roadmap-stage-tag { font-size: 0.66rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.roadmap-day.stage-intro     .roadmap-stage-tag { background: var(--primary-light); color: var(--primary-dark); }
.roadmap-day.stage-vowel     .roadmap-stage-tag { background: var(--vowel-bg); color: #92660a; }
.roadmap-day.stage-diphthong .roadmap-stage-tag { background: var(--diphthong-bg); color: #17794f; }
.roadmap-day.stage-consonant .roadmap-stage-tag { background: var(--consonant-bg); color: #b5324a; }
.roadmap-day.stage-stress    .roadmap-stage-tag { background: var(--warning-light); color: #92620a; }
.roadmap-day.stage-flow      .roadmap-stage-tag { background: var(--success-light); color: var(--success-dark); }

.roadmap-day-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.roadmap-topic-list { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.roadmap-topic-list li { font-size: 0.79rem; color: var(--text-muted); line-height: 1.5; padding-left: 15px; position: relative; }
.roadmap-topic-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--border-strong);
}
.roadmap-test-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.71rem;
    font-weight: 700;
    color: #92620a;
    background: var(--warning-light);
    border: 1px dashed var(--warning);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

/* --- Đích đến --- */
.roadmap-finish {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--success-light), #ecfdf5);
    border: 1.5px dashed var(--success);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-top: 18px;
}
.roadmap-finish-icon { font-size: 1.9rem; flex-shrink: 0; }
.roadmap-finish h4 { font-size: 0.94rem; font-weight: 800; color: var(--success-dark); margin-bottom: 3px; }
.roadmap-finish p { font-size: 0.79rem; color: var(--text-muted); line-height: 1.5; }

@media (min-width: 600px) {
    .roadmap-intro { padding: 32px 30px; }
    .roadmap-intro h3 { font-size: 1.45rem; }
    .roadmap-day-card { padding: 16px 20px; }
    .roadmap-day-card h4 { font-size: 0.98rem; }
    .roadmap-topic-list li { font-size: 0.82rem; }
}

/* =====================================================
   [MỚI] THANH CHUYỂN ĐỔI LỘ TRÌNH (Phiên âm ⇄ Ngữ pháp)
   ===================================================== */
.roadmap-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto 18px;
}
.roadmap-nav-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: var(--shadow-xs);
}
.roadmap-nav-btn:hover { background: var(--primary-light); }
.roadmap-nav-btn:active { transform: scale(0.9); }
.roadmap-nav-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.roadmap-nav-btn:disabled:hover { background: var(--surface); }

.roadmap-switcher-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}
.roadmap-switcher-tabs::-webkit-scrollbar { display: none; }
.roadmap-switcher-tab,
.worklife-switcher-tab,
.ielts-switcher-tab,
.grade-tab-btn,
.thpt-grade-tab-btn,
.g6-switcher-tab,
.g7-switcher-tab,
.g8-switcher-tab,
.g9-switcher-tab,
.g10-switcher-tab,
.g11-switcher-tab,
.g12-switcher-tab {
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.roadmap-switcher-tab.active,
.worklife-switcher-tab.active,
.ielts-switcher-tab.active,
.grade-tab-btn.active,
.thpt-grade-tab-btn.active,
.g6-switcher-tab.active,
.g7-switcher-tab.active,
.g8-switcher-tab.active,
.g9-switcher-tab.active,
.g10-switcher-tab.active,
.g11-switcher-tab.active,
.g12-switcher-tab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

/* --- Khung trượt (pager) chứa 2 trang lộ trình --- */
.roadmap-pager { overflow: hidden; }
.roadmap-track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.roadmap-page {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.roadmap-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
}
.roadmap-dot,
.worklife-dot,
.ielts-dot,
.g6-dot,
.g7-dot,
.g8-dot,
.g9-dot,
.g10-dot,
.g11-dot,
.g12-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-strong);
    cursor: pointer;
    transition: background 0.2s, width 0.2s, border-radius 0.2s;
}
.roadmap-dot.active,
.worklife-dot.active,
.ielts-dot.active,
.g6-dot.active,
.g7-dot.active,
.g8-dot.active,
.g9-dot.active,
.g10-dot.active,
.g11-dot.active,
.g12-dot.active {
    background: var(--primary);
    width: 20px;
    border-radius: 4px;
}

/* =====================================================
   [MỚI] LỘ TRÌNH NGỮ PHÁP 2 THÁNG — ACCORDION 4 GIAI ĐOẠN
   ===================================================== */
.roadmap-intro-grammar { background: linear-gradient(135deg, #6d5ef7 0%, #4c37c9 100%); }

.gstage-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
    margin: -6px 0 14px;
}

/* Bảng màu riêng cho từng giai đoạn ngữ pháp */
.gstage-pill-1 { background: var(--diphthong-bg); color: #17794f; border-color: var(--diphthong-border); }
.gstage-pill-2 { background: var(--vowel-bg);     color: #92660a; border-color: var(--vowel-border); }
.gstage-pill-3 { background: #fff7ed;             color: #b45309; border-color: #fb923c; }
.gstage-pill-4 { background: #fee2e2;             color: var(--danger-dark); border-color: var(--danger); }

.gstage-accordion { display: flex; flex-direction: column; gap: 12px; }

.gstage-block {
    --gstage-bg: var(--surface-2);
    --gstage-border: var(--border-strong);
    --gstage-text: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.gstage-1 { --gstage-bg: var(--diphthong-bg); --gstage-border: var(--diphthong-border); --gstage-text: #17794f; }
.gstage-2 { --gstage-bg: var(--vowel-bg);     --gstage-border: var(--vowel-border);     --gstage-text: #92660a; }
.gstage-3 { --gstage-bg: #fff7ed;             --gstage-border: #fb923c;                 --gstage-text: #b45309; }
.gstage-4 { --gstage-bg: #fee2e2;             --gstage-border: var(--danger);           --gstage-text: var(--danger-dark); }

.gstage-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--gstage-bg);
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.gstage-icon { font-size: 1.25rem; flex-shrink: 0; }
.gstage-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gstage-header-text h4 { font-size: 0.87rem; font-weight: 800; color: var(--text); letter-spacing: -0.005em; }
.gstage-meta { font-size: 0.69rem; font-weight: 700; color: var(--gstage-text); }
.gstage-chevron {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--gstage-text);
    transition: transform 0.25s;
}
.gstage-block.open .gstage-chevron { transform: rotate(180deg); }

.gstage-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.gstage-desc {
    padding: 12px 16px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.gday-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 14px;
}
.gday-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}
.gday-row:hover { background: var(--surface-2); }
.gday-num {
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--gstage-border);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gday-text { font-size: 0.79rem; color: var(--text-muted); line-height: 1.5; padding-top: 3px; }
.gday-row.gday-review .gday-num { background: var(--warning); }
.gday-row.gday-test .gday-num { background: var(--danger); }
.gday-row.gday-review .gday-text,
.gday-row.gday-test .gday-text { color: var(--text); font-weight: 700; }

@media (min-width: 600px) {
    .gstage-header-text h4 { font-size: 0.95rem; }
    .gday-text { font-size: 0.82rem; }
}

/* =====================================================
   [MỚI] LỘ TRÌNH TỪ VỰNG — KHÔNG GIỚI HẠN (mốc, không phải deadline)
   ===================================================== */
.roadmap-intro-vocab { background: linear-gradient(135deg, #0ea5b7 0%, #0b7285 100%); }

.vpill-1         { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }
.vpill-milestone { background: var(--warning-light);  color: #92620a;            border-color: var(--warning); }
.vpill-2         { background: var(--success-light);  color: var(--success-dark); border-color: var(--success); }

/* =====================================================
   [MỚI] LỘ TRÌNH NGƯỜI ĐI LÀM — CHUNG + 4 KỸ NĂNG RIÊNG
   ===================================================== */
.roadmap-intro-worklife-chung  { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.roadmap-intro-worklife-listen { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }
.roadmap-intro-worklife-speak  { background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); }
.roadmap-intro-worklife-read   { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.roadmap-intro-worklife-write  { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }

/* =====================================================
   [MỚI] LỘ TRÌNH THI THCS — CHỌN KHỐI LỚP + LỚP 6 (Global Success)
   ===================================================== */
.grade-tabs { margin-bottom: 16px; }

.roadmap-intro-g6-overview  { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.roadmap-intro-g6-phonetics { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
.roadmap-intro-g6-grammar   { background: linear-gradient(135deg, #eab308 0%, #a16207 100%); }
.roadmap-intro-g6-vocab     { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.roadmap-intro-g6-schedule  { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }

.grade-note-box {
    background: var(--surface-2);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 18px;
}
.grade-note-box h4 {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--text);
}
.grade-note-box ul {
    margin: 0;
    padding-left: 18px;
}
.grade-note-box li {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.5;
}
.grade-note-box li:last-child { margin-bottom: 0; }

.roadmap-intro-g8-overview  { background: linear-gradient(135deg, #0891b2 0%, #155e75 100%); }
.roadmap-intro-g8-phonetics { background: linear-gradient(135deg, #d946ef 0%, #a21caf 100%); }
.roadmap-intro-g8-grammar   { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.roadmap-intro-g8-vocab     { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.roadmap-intro-g8-schedule  { background: linear-gradient(135deg, #fb7185 0%, #be123c 100%); }

.roadmap-intro-g7-overview  { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.roadmap-intro-g7-phonetics { background: linear-gradient(135deg, #0d9488 0%, #115e59 100%); }
.roadmap-intro-g7-grammar   { background: linear-gradient(135deg, #ea580c 0%, #9a3412 100%); }
.roadmap-intro-g7-vocab     { background: linear-gradient(135deg, #65a30d 0%, #3f6212 100%); }
.roadmap-intro-g7-schedule  { background: linear-gradient(135deg, #db2777 0%, #9d174d 100%); }

.roadmap-intro-g9-overview  { background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); }
.roadmap-intro-g9-phonetics { background: linear-gradient(135deg, #0284c7 0%, #075985 100%); }
.roadmap-intro-g9-grammar   { background: linear-gradient(135deg, #ca8a04 0%, #854d0e 100%); }
.roadmap-intro-g9-vocab     { background: linear-gradient(135deg, #16a34a 0%, #14532d 100%); }
.roadmap-intro-g9-schedule  { background: linear-gradient(135deg, #e11d48 0%, #881337 100%); }

/* =====================================================
   [MỚI] LỘ TRÌNH THI THPT — LỚP 10 / 11 / 12 (Global Success)
   ===================================================== */
.roadmap-intro-g10-overview  { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.roadmap-intro-g10-phonetics { background: linear-gradient(135deg, #d946ef 0%, #a21caf 100%); }
.roadmap-intro-g10-grammar   { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.roadmap-intro-g10-vocab     { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }
.roadmap-intro-g10-schedule  { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }

.roadmap-intro-g11-overview  { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.roadmap-intro-g11-phonetics { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.roadmap-intro-g11-grammar   { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.roadmap-intro-g11-vocab     { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.roadmap-intro-g11-schedule  { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }

.roadmap-intro-g12-overview  { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.roadmap-intro-g12-phonetics { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); }
.roadmap-intro-g12-grammar   { background: linear-gradient(135deg, #eab308 0%, #a16207 100%); }
.roadmap-intro-g12-vocab     { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.roadmap-intro-g12-schedule  { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }

.vocab-unit-heading {
    font-size: 0.83rem;
    font-weight: 800;
    color: var(--text);
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.vocab-unit-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.vocab-unit-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: -4px 0 8px;
}
.vocab-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 4px;
}
.vocab-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 0.78rem;
    line-height: 1.4;
}
.vocab-word { font-weight: 700; color: var(--text); }
.vocab-pos {
    font-size: 0.65rem;
    color: var(--primary);
    background: var(--primary-light);
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 700;
    flex-shrink: 0;
}
.vocab-ipa {
    font-family: 'Courier New', Courier, monospace;
    color: var(--text-muted);
    flex-shrink: 0;
}
.vocab-meaning {
    color: var(--text-muted);
    flex: 1;
    min-width: 140px;
}

.vstage-block {
    --vstage-bg: var(--surface-2);
    --vstage-text: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    margin-bottom: 14px;
}
.vstage-block:last-of-type { margin-bottom: 0; }
.vstage-1 { --vstage-bg: var(--primary-light); --vstage-text: var(--primary-dark); }
.vstage-2 { --vstage-bg: var(--success-light); --vstage-text: var(--success-dark); }

.vstage-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--vstage-bg);
}
.vstage-icon { font-size: 1.3rem; flex-shrink: 0; }
.vstage-header-text h4 { font-size: 0.9rem; font-weight: 800; color: var(--text); margin-bottom: 2px; letter-spacing: -0.005em; }
.vstage-header-text span { font-size: 0.71rem; font-weight: 700; color: var(--vstage-text); }
.vstage-body { padding: 14px 16px 16px; }
.vstage-body .roadmap-topic-list { margin-bottom: 10px; }
.vstage-body .roadmap-topic-list li strong { color: var(--text); font-weight: 700; }

/* --- Ghi chú hành trình không hồi kết --- */
.vocab-infinity {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--primary-light), #eef1ff);
    border: 1.5px dashed var(--primary);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-top: 18px;
}
.vocab-infinity-icon { font-size: 1.9rem; flex-shrink: 0; }
.vocab-infinity h4 { font-size: 0.94rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 3px; }
.vocab-infinity p { font-size: 0.79rem; color: var(--text-muted); line-height: 1.5; }

@media (min-width: 600px) {
    .vstage-header-text h4 { font-size: 0.98rem; }
    .vstage-body .roadmap-topic-list li { font-size: 0.82rem; }
}

/* =====================================================
   KHU VỰC TÀI KHOẢN (avatar + tên / burger + dropdown)
   ===================================================== */
.account-area {
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
}

/* Avatar tròn dùng chung (trigger, menu, modal) */
.account-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    flex-shrink: 0;
    overflow: hidden;
    border: 1.5px solid var(--border-strong);
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar.avatar-lg { width: 44px; height: 44px; font-size: 1.05rem; }

/* Trigger: avatar + tên (mặc định ẩn trên mobile, hiện ≥600px) */
.account-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    max-width: 170px;
}
.account-trigger:hover { background: var(--primary-light); }
.account-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.account-caret { font-size: 0.6rem; color: var(--text-muted); flex-shrink: 0; }

/* Burger: chỉ hiện trên mobile (<600px) */
.account-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}
.account-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
}

/* Dropdown menu tài khoản */
.account-menu {
    position: fixed;
    display: none;
    flex-direction: column;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 8px;
    gap: 2px;
    z-index: 950;
}
.account-menu.open { display: flex; }

/* Hàng avatar+tên bên trong dropdown: chỉ cần thiết khi trigger đang ẩn (mobile) */
.account-menu-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.account-menu-identity .account-name { max-width: 150px; font-size: 0.86rem; }

.account-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
}
.account-menu-item:hover { background: var(--surface-2); }
.account-menu-item-danger { color: var(--danger-dark); }
.account-menu-item-danger:hover { background: var(--danger-light, #fee2e2); }
.account-menu-item-teacher { color: var(--primary-dark); }
.account-menu-item-teacher:hover { background: var(--primary-light); }

/* [MỚI] Thanh cảnh báo cố định trên cùng khi giảng viên đang "xem như học viên" */
.impersonation-banner {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 40px;
    z-index: 1000;
    background: linear-gradient(135deg, var(--warning), #d97706);
    color: #fff;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    flex-wrap: nowrap;
    text-align: center;
}
.impersonation-banner span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.impersonation-banner strong { font-weight: 800; }
.impersonation-return-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 16px;
    border: none;
    background: rgba(255,255,255,0.92);
    color: #92400e;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.impersonation-return-btn:hover { background: #fff; }
@media (max-width: 599px) {
    .impersonation-banner { font-size: 0.7rem; gap: 6px; }
    .impersonation-banner span { max-width: 55vw; }
}

@media (min-width: 600px) {
    .account-trigger { display: flex; }
    .account-burger { display: none; }
    .account-menu-identity { display: none; }
}

/* =====================================================
   MODAL HỒ SƠ CÁ NHÂN & CẮT ẢNH
   ===================================================== */
.profile-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15,23,42,.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}
.profile-modal-box {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 28px 24px 24px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.profile-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    border: none;
    background: var(--surface-2);
    border-radius: 50%;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
}
.profile-modal-close:hover { background: var(--border); color: var(--text); }

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    text-align: center;
}
.profile-avatar-preview {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 2rem;
    overflow: hidden;
    border: 2px solid var(--border-strong);
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-hint { font-size: 0.72rem; color: var(--text-muted); margin: 2px 0 0; }

.profile-field { margin-bottom: 16px; }
.profile-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.profile-field input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: inherit;
}
.profile-field input[type="text"]:focus { outline: none; border-color: var(--primary); }
.profile-readonly {
    padding: 9px 12px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    color: var(--text-muted);
}

.profile-achievements { margin-bottom: 20px; }
.profile-achievements h4 { font-size: 0.9rem; margin-bottom: 10px; }
.profile-achievements-list { display: flex; flex-direction: column; gap: 8px; }
.profile-ach-loading, .profile-ach-error { font-size: 0.8rem; color: var(--text-muted); }

/* [MỚI] "Thời gian đồng hành" - thời gian học viên bắt đầu học trên web cho đến nay */
.profile-enrollment { margin-bottom: 20px; }
.profile-enrollment h4 { font-size: 0.9rem; margin-bottom: 10px; }
.enrollment-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.enrollment-icon { font-size: 1.4rem; flex-shrink: 0; }
.enrollment-info { flex: 1; min-width: 0; }
.enrollment-main { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.enrollment-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.enrollment-edit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.enrollment-edit-row input[type="date"] {
    flex: 1;
    min-width: 130px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: inherit;
}
.enrollment-save-btn {
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.enrollment-save-btn:hover { background: var(--primary-dark); }
.enrollment-save-btn:disabled { opacity: 0.6; cursor: default; }

.ach-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ach-badge-special {
    background: linear-gradient(135deg, var(--primary-light), #fff);
    border-color: var(--primary);
}
.ach-badge-icon { font-size: 1.4rem; flex-shrink: 0; }
.ach-badge-info { flex: 1; min-width: 0; }
.ach-badge-title { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.ach-badge-desc { font-size: 0.74rem; color: var(--text-muted); margin: 1px 0 5px; }
.ach-progress-track {
    height: 5px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 4px;
    transition: width 0.3s;
}

.profile-leaderboard { margin-bottom: 20px; }
.profile-leaderboard h4 { font-size: 0.9rem; margin-bottom: 10px; }
.profile-leaderboard-list { display: flex; flex-direction: column; gap: 6px; }

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.leaderboard-row.is-me {
    background: var(--primary-light);
    border-color: var(--primary);
}
.leaderboard-rank {
    width: 26px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
}
.leaderboard-avatar { flex-shrink: 0; }
.leaderboard-avatar-img {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.leaderboard-avatar-fallback {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}
.leaderboard-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leaderboard-me-tag { color: var(--primary-dark); font-weight: 700; }
.leaderboard-score {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-dark);
}

/* [MỚI] Giảng viên loại/khôi phục học viên khỏi bảng xếp hạng chăm chỉ */
.leaderboard-exclude-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}
.leaderboard-exclude-btn:hover {
    opacity: 1;
    border-color: var(--danger);
    background: var(--danger);
    filter: none;
}
.leaderboard-excluded-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.leaderboard-excluded-section h5 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 8px;
}
.leaderboard-row-excluded {
    background: var(--surface);
    opacity: 0.85;
}
.leaderboard-restore-btn {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--surface-2);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.leaderboard-restore-btn:hover { background: var(--primary-light); }

.profile-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.profile-btn-primary, .profile-btn-secondary {
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}
.profile-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 2px 8px var(--primary-glow);
}
.profile-btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1.5px solid var(--border);
}
.profile-save-status { font-size: 0.76rem; color: var(--text-muted); }
.profile-save-status.success { color: var(--success-dark); }
.profile-save-status.error { color: var(--danger-dark); }

/* Cắt ảnh đại diện */
.avatar-crop-box { max-width: 340px; text-align: center; }
.avatar-crop-viewport {
    width: 280px;
    height: 280px;
    margin: 12px auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    border: 2px solid var(--border-strong);
}
#avatar-crop-canvas { touch-action: none; cursor: grab; display: block; }
#avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-zoom { width: 100%; margin: 6px 0 2px; }

/* =====================================================
   FOOTER
   ===================================================== */
#site-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--footer-h);
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 900;
    gap: 8px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.footer-brand .mini-badge {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
}
.footer-copy {
    font-size: 0.7rem;
    color: var(--text-light);
    text-align: center;
    flex: 1;
}
.footer-link {
    font-size: 0.72rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    flex-shrink: 0;
}
.footer-link:hover { text-decoration: underline; }

/* =====================================================
   AUTH
   ===================================================== */
/* Ẩn toàn bộ nội dung bên trong ngay từ đầu (trước khi JS xác nhận đăng nhập xong),
   tránh hiện nhoáng nội dung (ví dụ tab Phiên âm) rồi mới ẩn lại khi refresh trang. */
#inside { display: none; }

#auth-container {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 28px 20px 22px;
    margin-bottom: 18px;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#auth-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--success));
}
#auth-container h2 {
    font-size: 1.25rem;
    margin-bottom: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#auth-status {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #e0e7ff, #eff6ff);
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-sm);
    color: var(--primary-dark);
    white-space: pre-line;
}
#login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#login-form input {
    width: 100%;
    max-width: 340px;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
#login-form input::placeholder { color: var(--text-light); }
#login-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
    background: var(--surface);
}
#login-btn {
    width: 100%;
    max-width: 340px;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 14px var(--primary-glow);
    transition: transform 0.15s, box-shadow 0.15s;
}
#login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79,110,247,0.35);
}
/* [MỚI] Nút "Đăng nhập bằng Google" */
.google-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 11px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.google-login-btn:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.google-login-btn svg { flex-shrink: 0; }

#auth-container p { font-size: 0.82rem; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
#auth-container a { color: var(--primary); font-weight: 600; text-decoration: none; }
#auth-container a:hover { text-decoration: underline; }

/* =====================================================
   MAIN MENU (ẩn — đã chuyển vào header)
   Giữ lại để không break JS gắn event
   ===================================================== */
.main-menu { display: none; }

/* =====================================================
   NỘI DUNG TAB
   ===================================================== */
.main-tab-content        { display: none; width: 100%; }
.main-tab-content.active { display: block; }

#tab-phien-am.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =====================================================
   KHU VỰC IPA CHART
   ===================================================== */
.ipa-chart {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.tab-controls {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.tab-button {
    flex: 1;
    padding: 9px 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.tab-button.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 2px 8px var(--primary-glow);
}
.tab-button:hover:not(.active) {
    background: var(--primary-light);
    color: var(--primary);
}

.ipa-tabs-container {
    display: flex;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.ipa-tab-content {
    min-width: 100%;
    flex-shrink: 0;
    padding: 10px;
}
.ipa-tab-content h2,
.ipa-tab-content h3 { display: none; }

.ipa-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.ipa-section#monophthongs-section { background: var(--vowel-bg);     border: 2px solid var(--vowel-border); }
.ipa-section#diphthongs-section   { background: var(--diphthong-bg); border: 2px solid var(--diphthong-border); }
.ipa-section#consonants-section   { background: var(--consonant-bg); border: 2px solid var(--consonant-border); }

.ipa-symbol {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 5px;
    text-align: center;
    background: var(--surface);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    transition: background 0.18s, transform 0.15s, border-color 0.18s, box-shadow 0.18s;
    user-select: none;
}
.ipa-symbol:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
    z-index: 2;
}
.ipa-symbol.active {
    background: var(--primary-light);
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-sm);
}
.ipa-symbol.completed  { background: var(--success-light) !important; border-color: var(--success) !important; }
/* [MỚI] Ký tự đã gửi ghi âm nhưng CÒN GHI ÂM CHƯA ĐƯỢC CHẤM -> nền vàng. */
.ipa-symbol.submitted:not(.completed) { background: var(--warning-light) !important; border: 2px solid var(--warning) !important; }
/* [MỚI] Ký tự đã gửi ghi âm và giảng viên đã CHẤM XONG (không cần tự tick) -> cũng chuyển
   nền xanh lá giống như khi tự tick "hoàn thành", nhưng không đụng tới icon ☐/✔ (icon đó chỉ
   phản ánh đúng việc học viên có tự tick hay không). */
.ipa-symbol.graded-done:not(.completed) { background: var(--success-light) !important; border-color: var(--success) !important; }
/* [MỚI] Giảng viên vừa để lại bình luận yêu cầu SỬA/GHI ÂM LẠI cho ghi âm mới nhất của ký tự
   này -> nền đỏ, để học viên biết ngay cần ghi âm lại chứ chưa đạt. */
.ipa-symbol.needs-redo:not(.completed) { background: var(--danger-light, #fee2e2) !important; border: 2px solid var(--danger) !important; }

.ipa-symbol .symbol  { font-size: 1.35rem; font-weight: 700; color: var(--primary-dark); line-height: 1.1; }
.ipa-symbol .example { font-size: 0.7rem; font-style: italic; color: var(--text-muted); margin-top: 3px; }

.completion-container {
    position: absolute;
    top: 4px; right: 5px;
    font-size: 0.95rem;
    line-height: 1;
    z-index: 10;
    cursor: pointer;
    color: var(--border-strong);
    transition: color 0.2s, transform 0.15s;
    user-select: none;
}
.completion-container:hover { color: var(--text-muted); transform: scale(1.2); }
.ipa-symbol.completed .completion-status-icon { color: var(--success); }

/* =====================================================
   KHU VỰC HƯỚNG DẪN / VIDEO / GHI ÂM
   ===================================================== */
#guide-display {
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
#guide-display::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--success));
}

/* [MỚI] SỬA LỖI: trên desktop (≥900px) #guide-display có chiều cao CỐ ĐỊNH +
   overflow-y:auto để có thể cuộn khi nội dung dài. Nhưng khi 1 flex container có
   overflow khác "visible", trình duyệt đổi kích thước tối thiểu mặc định của các
   item con từ "auto" (theo nội dung) thành "0" — kết hợp với flex-shrink mặc định
   là 1, hễ danh sách ghi âm bên dưới dài ra vượt quá chiều cao khung là TOÀN BỘ
   các phần tử (kể cả video) bị co nhỏ lại cho vừa, thay vì chỉ phần danh sách
   ghi âm được cuộn. Khai báo flex-shrink:0 cho các phần tử con để chúng luôn giữ
   nguyên kích thước gốc; phần bị tràn sẽ được cuộn nhờ overflow-y:auto đã có sẵn.
*/
#guide-display > * {
    flex-shrink: 0;
}

/* --- VIDEO TO HƠN --- */
#video-custom-controls {
    display: flex;
    gap: 8px;
    width: 100%;
}
#video-custom-controls button {
    flex: 1;
    padding: 11px 10px;
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
}
#video-play-btn {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}
#video-play-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16,185,129,0.4);
}
#video-pause-btn {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}
#video-pause-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239,68,68,0.4);
}
#video-custom-controls button:disabled {
    background: var(--border);
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Video: chiếm toàn bộ chiều ngang, tỉ lệ 16:9 */
#vimeo-player-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1e2a45, #2d3f6b);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(30,42,69,0.18);
    /* Không giới hạn max-width — để đầy container */
}
#vimeo-player-container.video-hidden { display: none; }
#iframe-target        { width: 100%; height: 100%; }
#iframe-target iframe { width: 100%; height: 100%; border: none; display: block; }

#video-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: rgba(255,255,255,0.45);
    font-style: italic;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
}
#video-placeholder::before {
    content: '▶';
    font-size: 3rem;
    opacity: 0.25;
    display: block;
}

#guide-text-container { width: 100%; }
#guide-text {
    font-size: 0.92rem;
    color: var(--text);
    text-align: left;
    line-height: 1.7;
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

/* =====================================================
   KHU VỰC BÌNH LUẬN / GHI ÂM
   ===================================================== */
#comments-section {
    width: 100%;
    border-top: 1.5px solid var(--border);
    padding-top: 12px;
}
#comment-toggle-header {
    cursor: pointer;
    user-select: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary-dark);
    padding: 8px 12px;
    text-align: left;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}
#comment-toggle-header:hover { background: #dde7ff; }
.toggle-arrow { display: inline-block; transition: transform 0.2s; margin-right: 6px; }
#comment-content-wrapper.collapsed { display: none; }
#comment-toggle-header.collapsed .toggle-arrow { transform: rotate(-90deg); }

#new-comment-form { display: flex; flex-direction: column; gap: 9px; padding: 10px 4px 4px; }

#record-controls { display: flex; gap: 6px; flex-wrap: wrap; }
#record-controls button {
    flex: 1;
    padding: 9px 10px;
    font-size: 0.84rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px var(--primary-glow);
}
#record-controls button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow);
}
#record-controls button:disabled {
    background: var(--border);
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
#record-status     { font-size: 0.84rem; color: var(--danger); font-weight: 500; min-height: 1.2em; }
#recording-preview { width: 100%; display: none; border-radius: var(--radius-sm); }

/* [MỚI] Khung nhúng SoundCloud + nút mở link ngoài dự phòng — dùng cho "audio mẫu" trong Nói */
.soundcloud-embed-wrap { width: 100%; border-radius: var(--radius-sm); overflow: hidden; margin-top: 4px; }
.soundcloud-embed-wrap iframe { display: block; border: 0; }
.audio-link-fallback {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.audio-link-fallback:hover { background: #dde7ff; }

#comments-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    padding: 0 2px;
    scroll-behavior: smooth;
}
#comments-list::-webkit-scrollbar { width: 5px; }
#comments-list::-webkit-scrollbar-track { background: var(--border); border-radius: 10px; }
#comments-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

.comment-item {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.comment-item:hover { border-color: var(--border-strong); }
.comment-item-pending-grading:hover { border-color: var(--warning); }
.comment-item-graded:hover { border-color: var(--success); }
.comment-item-needs-redo:hover { border-color: var(--danger); }
.comment-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.comment-header-row .comment-sender { margin-bottom: 0; }
.comment-delete-btn {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-light);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.comment-delete-btn:hover { background: #fee2e2; border-color: #ef4444; }
.comment-delete-btn:active { transform: scale(0.92); }
.comment-delete-btn:disabled { opacity: 0.5; cursor: default; }
.comment-sender    { font-size: 0.8rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.comment-item p    { margin: 0 0 6px; color: var(--text); font-size: 0.86rem; white-space: pre-wrap; line-height: 1.5; }
.comment-item audio { width: 100%; height: 30px; border-radius: 4px; }
.comment-timestamp { font-size: 0.7rem; color: var(--text-light); margin-top: 5px; }

/* [MỚI] Nhận xét/bình luận của giảng viên gắn với 1 ghi âm cụ thể — học viên nhìn vào ghi âm
   của mình là thấy ngay giảng viên góp ý gì. */
.phonam-feedback-text {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-weight: 500;
}

/* [MỚI] Nhãn trạng thái chấm bài trên mỗi ghi âm (chờ chấm / đã chấm) */
.phonam-grade-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.phonam-grade-tag-pending { background: var(--warning-light); color: #92650c; border: 1px solid var(--warning); }
.phonam-grade-tag-done    { background: var(--success-light); color: var(--success-dark); border: 1px solid var(--success); }
.phonam-grade-tag-needs-redo { background: var(--danger-light, #fee2e2); color: var(--danger-dark); border: 1px solid var(--danger); }

/* [MỚI] Khung giảng viên chấm 1 ghi âm: ô nhận xét + 2 nút "Cần ghi âm lại" / "Đúng - Hoàn thành" */
.phonam-review-box {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.phonam-feedback-input {
    width: 100%;
    resize: vertical;
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
}
.phonam-review-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* [MỚI] Nút giảng viên bấm để đánh dấu ghi âm đã chấm ĐÚNG/hoàn thành */
.phonam-mark-graded-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--success);
    background: var(--success-light);
    color: var(--success-dark);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.phonam-mark-graded-btn:hover { background: var(--success); color: #fff; }
.phonam-mark-graded-btn:active { transform: scale(0.96); }
.phonam-mark-graded-btn:disabled { opacity: 0.6; cursor: default; }

/* [MỚI] Nút giảng viên bấm để yêu cầu học viên ghi âm lại (kèm bình luận bắt buộc) */
.phonam-redo-btn {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--danger);
    background: var(--danger-light, #fee2e2);
    color: var(--danger-dark);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.phonam-redo-btn:hover { background: var(--danger); color: #fff; }
.phonam-redo-btn:active { transform: scale(0.96); }
.phonam-redo-btn:disabled { opacity: 0.6; cursor: default; }

/* [MỚI] Nút "↺ Chấm lại" — nằm cạnh nhãn trạng thái, chỉ hiện khi ghi âm ĐÃ chấm xong. Giảng
   viên bấm vào để hoàn tác lượt chấm trước đó (lỡ bấm nhầm Đúng/Sai) và đưa ghi âm về lại
   "Chờ chấm" để chấm lại từ đầu. Cố tình để kiểu "mờ/nhạt" (viền đứt nét, chữ xám) như nút
   "↺ Tự động" bên module bài kiểm tra, vì đây là thao tác phụ chứ không phải hành động chính. */
.phonam-undo-grade-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.phonam-undo-grade-btn:hover { background: var(--warning-light); border-color: var(--warning); color: #92650c; }
.phonam-undo-grade-btn:active { transform: scale(0.94); }
.phonam-undo-grade-btn:disabled { opacity: 0.6; cursor: default; }

/* [MỚI] Ghi âm chưa được chấm -> nền vàng; giảng viên yêu cầu ghi âm lại -> nền đỏ; đã chấm
   đúng/hoàn thành -> nền xanh lá — học viên nhìn vào là biết ngay bài của mình đang ở đâu. */
.comment-item-pending-grading { border-color: var(--warning); background: var(--warning-light); }
.comment-item-graded { border-color: var(--success); background: var(--success-light); }
.comment-item-needs-redo { border-color: var(--danger); background: var(--danger-light, #fee2e2); }

/* [MỚI] Hiệu ứng nhấp nháy tạm thời khi điều hướng nhanh tới đúng ô ghi âm cần chấm */
.phonam-comment-highlight {
    animation: phonamHighlightPulse 1.4s ease-in-out 0s 2;
}
@keyframes phonamHighlightPulse {
    0%   { box-shadow: 0 0 0 0 var(--primary-glow); border-color: var(--primary); }
    50%  { box-shadow: 0 0 0 6px var(--primary-glow); border-color: var(--primary); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); border-color: var(--border); }
}

/* [MỚI] Bảng thông báo "đang chờ chấm" — chỉ giảng viên nhìn thấy, đặt ngay đầu tab Phiên âm */
.phonam-grading-panel {
    margin-bottom: 14px;
    border: 1px solid var(--warning);
    background: var(--warning-light);
    border-radius: var(--radius-sm, 10px);
    overflow: hidden;
}
.phonam-grading-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    flex-wrap: wrap;
}
.phonam-grading-panel-title { font-size: 0.86rem; font-weight: 700; color: #92650c; }
.phonam-grading-toggle {
    border: 1px solid var(--warning);
    background: var(--surface);
    color: #92650c;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.phonam-grading-toggle:hover { background: var(--warning); color: #fff; }
.phonam-grading-list {
    display: none;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    border-top: 1px solid var(--warning);
    background: var(--surface);
}
.phonam-grading-list.expanded { display: flex; }
.phonam-grading-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: background 0.15s;
}
.phonam-grading-item:last-child { border-bottom: none; }
.phonam-grading-item:hover { background: var(--primary-light); }
.phonam-grading-item-symbol {
    flex-shrink: 0;
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.8rem;
}
.phonam-grading-item-name { flex: 1; font-size: 0.82rem; font-weight: 600; }
.phonam-grading-item-time { flex-shrink: 0; font-size: 0.7rem; color: var(--text-light); }

/* =====================================================
   TAB LỊCH HỌC
   ===================================================== */
#tab-lich-hoc h2 { text-align: left; margin-bottom: 14px; }

#tab-lich-hoc > div:first-of-type {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
#tab-lich-hoc > div:first-of-type button {
    flex: 1 1 130px;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s;
}
#tab-lich-hoc > div:first-of-type button:hover { transform: translateY(-1px); }

.status-badge {
    padding: 9px 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.88rem;
    text-align: center;
    letter-spacing: 0.03em;
}
.locked-msg   { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.unlocked-msg { background: var(--success-light); color: #065f46; border: 1px solid #6ee7b7; }

.schedule-wrapper {
    height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-xs);
}
.schedule-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
.schedule-wrapper::-webkit-scrollbar-track { background: var(--border); }
.schedule-wrapper::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

.schedule-grid {
    display: grid;
    grid-template-columns: 54px repeat(7, minmax(36px, 1fr));
    gap: 1px;
    background: var(--border);
    min-width: 340px;
}
.schedule-grid.locked { pointer-events: none; opacity: 0.7; }

.header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 8px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    position: sticky;
    top: 0;
    z-index: 10;
    letter-spacing: 0.03em;
}
.time-cell {
    background: var(--surface-2);
    padding: 3px 2px;
    text-align: center;
    font-size: 0.66rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-weight: 500;
}
.slot {
    background: var(--surface);
    min-height: 24px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.1s;
}
.slot.available { background: linear-gradient(135deg, var(--success), var(--success-dark)) !important; }
.slot:not(.available):hover { background: var(--primary-light) !important; }

.schedule-block {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 4px 5px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    word-break: break-word;
    box-shadow: var(--shadow-xs);
    border: 1px solid rgba(255, 255, 255, 0.35);
    z-index: 5;
}
.schedule-block.empty-note {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    font-style: italic;
    opacity: 0.9;
}
/* [MỚI] Học viên xem lịch (không ở chế độ chỉnh sửa): ô ghi chú của chính mình -> xanh lá */
.schedule-block.own-note {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    font-style: normal;
    opacity: 1;
}
/* [MỚI] Ô ghi chú thuộc về học viên khác -> xám, không nổi bật bằng ô của chính mình */
.schedule-block.other-note {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: #fff;
    font-style: normal;
    opacity: 0.9;
}
.schedule-block:hover { filter: brightness(1.06); }

/* [MỚI] Hàng gộp thể hiện 1 khoảng khung giờ TRỐNG liên tiếp (không có ghi chú nào ở bất kỳ
   ngày nào) — chỉ hiện bên học viên, giúp bảng lịch gọn và dễ nhìn hơn. Bấm vào để mở chi tiết. */
.row-collapse-summary {
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 4;
    user-select: none;
    transition: background 0.1s, color 0.1s;
}
.row-collapse-summary:hover { background: var(--primary-light); color: var(--primary-dark); }

/* Ô giờ đầu tiên của 1 nhóm khung giờ trống đã được mở ra xem -> bấm lại để thu gọn.
   [CẬP NHẬT] Style rõ ràng như 1 nút bấm (nền màu, chữ đậm, thêm nhãn "▲ Thu gọn"
   bên dưới giờ) để học viên dễ nhận ra và bấm thu gọn lại, thay vì chỉ gạch chân mờ. */
.time-cell.row-collapse-toggle {
    cursor: pointer;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
    border-radius: 4px;
    flex-direction: column;
    gap: 1px;
    transition: background 0.1s, color 0.1s;
}
.time-cell.row-collapse-toggle::after {
    content: '▲ Thu gọn';
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.time-cell.row-collapse-toggle:hover { background: var(--primary); color: #fff; }

/* =====================================================
   TAB FOLDER
   ===================================================== */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.folder-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    padding: 26px 14px;
    text-align: center;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
    color: var(--text);
    position: relative;
    overflow: hidden;
}
.folder-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transform: scaleX(0);
    transition: transform 0.25s;
    transform-origin: left;
}
.folder-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    background: var(--primary-light);
}
.folder-card:hover::after { transform: scaleX(1); }

/* [MỚI] Badge số lượng bài kiểm tra chưa làm — hiện trên tab "Kiểm tra" và thẻ
   "Bài kiểm tra riêng" khi giảng viên vừa giao bài mới cho học viên */
.tab-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}
.tab-badge-count-corner {
    position: absolute;
    top: 8px;
    right: 8px;
    margin-left: 0;
}
/* [MỚI] Badge "chấm tròn" (không số) — dùng cho tab CHA khi 1 trong các mục CON của nó đang
   có badge số, để báo "có gì đó cần chú ý bên trong" mà không lặp lại đúng con số ở tab cha. */
.tab-badge-dot {
    min-width: 9px;
    width: 9px;
    height: 9px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

/* =====================================================
   TABLET (≥ 600px)
   ===================================================== */
@media (min-width: 600px) {
    :root { --header-h: 62px; --tabbar-h: 44px; --total-top: calc(var(--header-h) + var(--tabbar-h) + var(--banner-h)); }
    html { font-size: 15px; }
    body { padding: calc(var(--total-top) + 14px) 22px calc(var(--footer-h) + 18px); }

    .logo-text { display: flex; }

    .ipa-section {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    .ipa-symbol     { min-height: 72px; padding: 9px 7px; }
    .ipa-symbol .symbol  { font-size: 1.5rem; }
    .ipa-symbol .example { font-size: 0.76rem; }

    .schedule-grid { grid-template-columns: 60px repeat(7, minmax(50px, 1fr)); }
    .slot { min-height: 26px; }
    .time-cell { font-size: 0.7rem; }
}

/* =====================================================
   LAPTOP / PC (≥ 900px) — 2 cột tab phiên âm
   ===================================================== */
@media (min-width: 900px) {
    :root { --header-h: 64px; --tabbar-h: 0px; --total-top: calc(var(--header-h) + var(--banner-h)); }
    html { font-size: 15.5px; }
    body { padding: calc(var(--total-top) + 18px) 30px calc(var(--footer-h) + 20px); }

    /* Trên desktop: đưa tabs trở lại trong header (inline) */
    .header-tabs {
        position: static;
        height: auto;
        flex: 1;
        border-bottom: none;
        box-shadow: none;
        justify-content: center;
        padding: 0 4px;
        gap: 4px;
        overflow-x: visible;
    }

    .header-tab-btn { padding: 8px 16px; font-size: 0.82rem; }

    /* Tab phiên âm: 2 cột — IPA bên trái, guide bên phải */
    #tab-phien-am.active {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        grid-template-areas: "chart-area guide-area";
        align-items: start;
        gap: 20px;
        height: calc(100vh - var(--header-h) - var(--footer-h) - var(--banner-h) - 36px);
    }
    .ipa-chart     { grid-area: chart-area; overflow-y: auto; height: 100%; }
    #guide-display { grid-area: guide-area; overflow-y: auto; height: 100%; padding: 20px; }

    /* Video: trên desktop chiếm toàn bộ chiều ngang của guide-area */
    #vimeo-player-container {
        width: 100%;
        /* aspect-ratio giữ nguyên 16/9 → tự cao theo */
    }

    /* Ẩn tab IPA trên desktop */
    .tab-controls           { display: none; }
    .ipa-tabs-container     { display: block; overflow-x: visible; }
    .ipa-tab-content        { min-width: auto; flex-shrink: 1; }
    .ipa-tab-content h2,
    .ipa-tab-content h3 {
        display: block;
        text-align: left;
        margin: 10px 0 7px;
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .ipa-section {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        padding: 12px;
    }
    .ipa-symbol     { min-height: 82px; padding: 10px 7px; }
    .ipa-symbol .symbol  { font-size: 1.75rem; }
    .ipa-symbol .example { font-size: 0.8rem; }

    .schedule-grid { grid-template-columns: 70px repeat(7, minmax(60px, 1fr)); }
    .slot       { min-height: 28px; }
    .time-cell  { font-size: 0.73rem; padding: 4px; }
    .header     { font-size: 0.84rem; padding: 10px 6px; }

    #comments-list { max-height: 300px; }

    /* Scrollbar IPA */
    .ipa-chart::-webkit-scrollbar,
    #guide-display::-webkit-scrollbar { width: 5px; }
    .ipa-chart::-webkit-scrollbar-track,
    #guide-display::-webkit-scrollbar-track { background: var(--border); }
    .ipa-chart::-webkit-scrollbar-thumb,
    #guide-display::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
}

/* =====================================================
   PC RỘNG (≥ 1280px)
   ===================================================== */
@media (min-width: 1280px) {
    body { padding-left: 52px; padding-right: 52px; }
    h1 { font-size: 1.65rem; margin-bottom: 20px; }

    /* Video rất to trên màn hình rộng */
    #vimeo-player-container { border-radius: var(--radius); }

    .ipa-section {
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        gap: 13px;
        padding: 16px;
    }
    .ipa-symbol     { min-height: 92px; padding: 12px 8px; }
    .ipa-symbol .symbol  { font-size: 2.05rem; }
    .ipa-symbol .example { font-size: 0.85rem; }

    #guide-display { padding: 24px; gap: 16px; }
    #guide-text    { font-size: 1rem; }

    .schedule-grid { grid-template-columns: 76px repeat(7, minmax(72px, 1fr)); }
    .slot { min-height: 30px; }

    #comments-list { max-height: 380px; }

    .folder-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Không áp dụng cho các phần tử của game "Hứng từ" (.kid-game-block,
       .hell-eyes-decor, .hell-eye) vì animation ở đây LÀ cơ chế chơi game
       (ô chữ rơi xuống), không phải hiệu ứng trang trí đơn thuần. Nếu ép
       animation-duration về 0.01ms, ô chữ sẽ "rơi" xong ngay lập tức và biến
       mất khỏi vùng nhìn thấy trước khi người chơi kịp thấy — khiến màn hình
       chơi trông như trống trơn, chỉ còn nền màu. */
    *:not(.kid-game-block):not(.hell-eyes-decor):not(.hell-eye),
    *:not(.kid-game-block):not(.hell-eyes-decor):not(.hell-eye)::before,
    *:not(.kid-game-block):not(.hell-eyes-decor):not(.hell-eye)::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =====================================================
   TAB NGỮ PHÁP
   ===================================================== */

/* Header ngữ pháp: tiêu đề + thanh tìm kiếm */
.grammar-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

@media (min-width: 600px) {
    .grammar-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .grammar-header h2 { margin-bottom: 0; }
}

/* Thanh tìm kiếm */
.grammar-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: 30px;
    padding: 7px 14px;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s, box-shadow 0.2s;
    flex: 1;
    max-width: 420px;
}
.grammar-search-bar:focus-within {
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}
.grammar-search-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.6;
}
#grammar-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.88rem;
    color: var(--text);
    font-family: inherit;
}
#grammar-search-input::placeholder { color: var(--text-light); }
.grammar-search-clear {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0 2px;
    line-height: 1;
    display: none;
    transition: color 0.15s;
}
.grammar-search-clear:hover { color: var(--danger); }
.grammar-search-clear.visible { display: block; }

/* Highlight kết quả tìm kiếm */
.grammar-folder-card.search-hidden { display: none; }
.grammar-folder-card.search-match { border-color: var(--primary); background: var(--primary-light); }
/* [MỚI] Folder ngữ pháp học viên đã hoàn thành (đã mở bài kiểm tra + làm ít nhất 20 giây) */
.grammar-folder-card.grammar-folder-done {
    background: var(--success-light, #dcfce7);
    border-color: var(--success);
}
.grammar-folder-card.grammar-folder-done:hover { background: var(--success-light, #dcfce7); }
#grammar-no-results {
    text-align: center;
    color: var(--text-muted);
    padding: 30px 0;
    font-size: 0.9rem;
    display: none;
}
#grammar-no-results.visible { display: block; }

/* Panels: ẩn mặc định */
#grammar-panels { display: none; }

.grammar-panel {
    display: none;
    animation: grammarSlideIn 0.25s ease;
}
.grammar-panel.active { display: block; }

@keyframes grammarSlideIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Header panel */
.grammar-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}
.grammar-back-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.grammar-back-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.grammar-panel-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

/* Nội dung panel: 2 cột trên desktop */
.grammar-panel-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 900px) {
    .grammar-panel-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto auto;
        align-items: stretch;
        gap: 22px;
    }
    .grammar-video-block  { grid-column: 1; grid-row: 1; }
    .grammar-images-block { grid-column: 2; grid-row: 1 / 4; }
    .grammar-quiz-block   { grid-column: 1; grid-row: 2; }
    .grammar-doc-block    { grid-column: 1; grid-row: 3; }
}

/* Label section */
.grammar-section-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

/* Video block */
.grammar-video-block {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-xs);
}
.grammar-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
}
.grammar-video-wrapper iframe, .grammar-video-wrapper video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
    background: #000;
}

/* Hình ảnh block - MỘT khung duy nhất */
.grammar-images-block {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.grammar-single-image {
    width: 100%;
    height: 240px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
}
.grammar-single-image iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Tablet/desktop: khung ảnh chiếm hết khoảng trống còn lại của cột,
   tránh để trống phía dưới khi cột ảnh cao hơn (video + quiz) bên cạnh */
@media (min-width: 900px) {
    .grammar-images-block {
        height: 100%;
        min-height: 0;
    }
    .grammar-single-image {
        flex: 1 1 auto;
        height: auto;
        min-height: 320px;
    }
}
@media (min-width: 1280px) {
    .grammar-single-image { min-height: 380px; }
}

/* Nút Xem chi tiết — nằm dưới khung hình, nổi bật */
.grammar-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 18px;
    background: var(--surface-2);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-dark);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
    letter-spacing: 0.01em;
}
.grammar-detail-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.grammar-detail-btn:active {
    transform: translateY(0);
}

/* [MỚI] Tài liệu học / làm bài (Google Docs/Sheets) — cùng khung với khối video/quiz */
.grammar-doc-block {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.grammar-doc-block .grammar-single-image {
    height: 260px;
}

/* Quiz block - căn giữa nút */
.grammar-quiz-block {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}
.grammar-quiz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px var(--primary-glow);
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
}
.grammar-quiz-btn::before { content: '✏️'; font-size: 1rem; }
.grammar-quiz-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}
.grammar-quiz-btn:active { transform: translateY(0); }
.grammar-quiz-btn:disabled {
    background: var(--border);
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* =====================================================
   KHU VỰC QUẢN TRỊ NGỮ PHÁP (chỉ dành cho giảng viên)
   Cho phép giảng viên (giangvien@gmail.com) thêm / xóa folder con
   và chỉnh sửa tiêu đề, link YouTube, link Drive, link bài kiểm tra.
   ===================================================== */

/* Nút chung dùng trong khu vực quản trị ngữ pháp */
.grammar-admin-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.grammar-admin-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.grammar-admin-btn:active { transform: translateY(1px); }
.grammar-admin-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.grammar-admin-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.grammar-admin-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.grammar-admin-btn-danger {
    background: #fff;
    border-color: var(--danger);
    color: var(--danger-dark);
    margin-left: auto;
}
.grammar-admin-btn-danger:hover { background: #fee2e2; }

/* Thanh quản trị phía trên danh sách folder (nút Thêm folder mới) */
.grammar-admin-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

/* Nút xóa nổi trên góc thẻ folder ngữ pháp — chỉ giảng viên thấy nút này */
.grammar-card-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(239,68,68,0.92);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, background 0.15s;
    z-index: 2;
}
.grammar-card-delete-btn:hover { transform: scale(1.1); background: var(--danger-dark); }

/* Trạng thái lưu tự động (tiêu đề / video / ảnh / bài kiểm tra) */
.grammar-edit-save-status {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    min-height: 1.1em;
    margin: -8px 2px 10px;
}

/* Tiêu đề folder có thể chỉnh sửa trực tiếp (contenteditable) — chỉ giảng viên */
#grammar-panel-title.grammar-editable,
#dub-detail-title.grammar-editable {
    display: inline-block;
    min-width: 60px;
    outline: none;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    background: var(--surface-2);
    cursor: text;
    transition: border-color 0.15s, background 0.15s;
}
#grammar-panel-title.grammar-editable:focus,
#dub-detail-title.grammar-editable:focus {
    border-color: var(--primary);
    background: var(--surface);
}

/* Khung dán link (YouTube / Drive / bài kiểm tra) — chỉ hiện với giảng viên */
.grammar-edit-bar {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.grammar-edit-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--surface);
}
.grammar-edit-input:focus { outline: none; border-color: var(--primary); }

/* Thông báo tải/rỗng cho danh sách folder ngữ pháp */
.grammar-loading-msg,
.grammar-empty-msg {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.86rem;
    padding: 24px 0;
}

/* =====================================================
   TIN NGẮN (NEWS)
   ===================================================== */

/* Grid thumbnail tin tức */
.news-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 4px;
    animation: grammarSlideIn 0.25s ease;
}
@media (min-width: 600px) {
    .news-cards-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (min-width: 900px) {
    .news-cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Card tin ngắn */
.news-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: var(--shadow-xs);
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}
.news-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: var(--surface-2);
}
.news-card-title {
    padding: 10px 12px 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}
.news-card-date {
    padding: 0 12px 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* [MỚI] Bài tin ngắn HỌC VIÊN đã mở ra đọc rồi -> nền xanh lá nhạt, viền xanh lá, kèm nhãn
   "✓ Đã đọc" ở góc trên bên trái ảnh thumbnail — cùng tông màu "đã hoàn thành" đang dùng cho
   bảng phiên âm (.ipa-symbol.completed) và các nơi khác trong hệ thống. */
.news-card.news-card-read {
    background: var(--success-light);
    border-color: var(--success);
}
.news-card.news-card-read:hover {
    border-color: var(--success-dark);
}
.news-card.news-card-read .news-card-thumb {
    position: relative;
}
.news-card-read-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--success);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: var(--shadow-xs);
    z-index: 1;
}

/* Panel bài báo chi tiết */
.news-article-body {
    animation: grammarSlideIn 0.25s ease;
}
.news-article-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
    margin-bottom: 14px;
}
.news-article-img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 16px;
    display: block;
}
.news-article-text {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 22px;
    box-shadow: var(--shadow-xs);
}
.news-article-text p { margin-bottom: 10px; }
.news-article-text p:last-child { margin-bottom: 0; }

/* Tablet trở lên: bố cục 2 cột — ảnh bên trái (cố định, không bị bể), text bên phải */
@media (min-width: 600px) {
    .news-article-top {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 20px;
        align-items: start;
        margin-bottom: 22px;
    }
    .news-article-img {
        margin-bottom: 0;
        max-height: none;
        height: 100%;
        min-height: 220px;
        aspect-ratio: 4/5;
        position: sticky;
        top: calc(var(--total-top) + 14px);
    }
    .news-article-text { margin-bottom: 0; }
}
@media (min-width: 900px) {
    .news-article-top { grid-template-columns: 280px 1fr; gap: 26px; }
    .news-article-img  { min-height: 260px; }
}
@media (min-width: 1280px) {
    .news-article-top { grid-template-columns: 320px 1fr; }
}

/* Quiz section bên trong bài báo */
.news-quiz-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-xs);
}

/* Câu hỏi trắc nghiệm */
.news-question-block {
    margin-bottom: 20px;
}
.news-question-block:last-child { margin-bottom: 0; }
.news-question-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.5;
}
.news-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.86rem;
    color: var(--text);
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.news-option-label:hover { background: var(--primary-light); border-color: var(--primary); }
.news-option-label input[type="radio"] { accent-color: var(--primary); flex-shrink: 0; }

/* Trạng thái sau khi nộp */
.news-option-label.correct   { background: var(--success-light); border-color: var(--success); color: #065f46; font-weight: 600; }
.news-option-label.incorrect { background: #fee2e2; border-color: var(--danger); color: #991b1b; }

/* Kết quả */
.news-quiz-result {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.92rem;
    text-align: center;
}
.news-quiz-result.pass { background: var(--success-light); color: #065f46; border: 1.5px solid var(--success); }
.news-quiz-result.fail { background: #fee2e2; color: #991b1b; border: 1.5px solid var(--danger); }

/* --- Khung luyện dịch từng câu (AI hỗ trợ) --- */
.news-translate-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 20px;
    box-shadow: var(--shadow-xs);
}
.news-translate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.news-teacher-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: 1.5px solid var(--primary);
    border-radius: 20px;
    padding: 4px 12px;
}
.news-translate-teacher-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    line-height: 1.6;
}

/* Thanh tiến độ "Câu 3 / 12" */
.news-sentence-progress {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 12px;
}

/* Lịch sử các câu đã luyện — hiển thị lại để học viên ôn lại */
.news-sentence-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.news-sentence-history-item {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.82rem;
    line-height: 1.6;
}
.news-sentence-history-en {
    color: var(--text);
    font-weight: 600;
    margin-bottom: 4px;
}
.news-sentence-history-mine { color: var(--text-muted); }
.news-sentence-history-comment { margin: 2px 0; }
.news-sentence-history-comment.is-correct { color: #065f46; }
.news-sentence-history-comment.is-incorrect { color: #7c4a03; }
.news-sentence-history-ai   { color: var(--success-dark); }
.news-sentence-history-mine strong,
.news-sentence-history-comment strong,
.news-sentence-history-ai strong { color: var(--text); }

/* Thẻ luyện tập cho câu hiện tại */
.news-sentence-card {
    background: var(--surface-2);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.news-sentence-en {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 12px;
}
.news-translate-textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.news-translate-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}
.news-translate-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.news-translate-actions-buttons { display: flex; align-items: center; gap: 8px; }
.news-translate-status {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.news-quiz-submit-btn,
.news-translate-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px var(--primary-glow);
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
}
.news-quiz-submit-btn::before { content: '✏️'; font-size: 1rem; }
.news-translate-submit-btn { padding: 9px 22px; font-size: 0.82rem; }
.news-translate-submit-btn::before { content: '📤'; font-size: 1rem; }
.news-sentence-next-btn::before { content: none; }
.news-quiz-submit-btn:hover,
.news-translate-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}
.news-quiz-submit-btn:active,
.news-translate-submit-btn:active { transform: translateY(0); }
.news-quiz-submit-btn:disabled,
.news-translate-submit-btn:disabled {
    background: var(--border);
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Nhận xét của AI về bản dịch của học viên (xanh = đúng nghĩa, vàng = cần xem lại) */
.news-sentence-comment {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-strong);
    background: var(--surface-2);
}
.news-sentence-comment.is-correct {
    background: var(--success-light);
    border-color: var(--success);
}
.news-sentence-comment.is-incorrect {
    background: var(--warning-light);
    border-color: var(--warning);
}
.news-sentence-comment-label {
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.news-sentence-comment.is-correct .news-sentence-comment-label { color: #065f46; }
.news-sentence-comment.is-incorrect .news-sentence-comment-label { color: #7c4a03; }
.news-sentence-comment-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text);
}

/* Đáp án gợi ý do AI dịch */
.news-sentence-answer {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--success-light);
    border: 1.5px solid var(--success);
    border-radius: var(--radius-sm);
}
.news-sentence-answer-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #065f46;
    margin-bottom: 4px;
}
.news-sentence-answer-text {
    font-size: 0.88rem;
    color: #065f46;
    line-height: 1.6;
}

/* Câu hỏi dẫn dắt do AI tạo */
.news-sentence-question {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--warning-light);
    border: 1.5px solid var(--warning);
    border-radius: var(--radius-sm);
    text-align: center;
}
.news-sentence-question-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #7c4a03;
    line-height: 1.6;
    margin-bottom: 10px;
}
.news-sentence-next-btn { margin: 0 auto; }

/* Hoàn thành toàn bộ bài đọc */
.news-sentence-done {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.92rem;
    text-align: center;
    background: var(--success-light);
    color: #065f46;
    border: 1.5px solid var(--success);
}
.news-translate-locked-msg {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    text-align: center;
}

/* =====================================================
   KHU VỰC QUẢN TRỊ TIN TỨC (chỉ dành cho giảng viên)
   ===================================================== */

/* Nút chung dùng trong khu vực quản trị tin tức */
.news-admin-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.news-admin-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.news-admin-btn:active { transform: translateY(1px); }
.news-admin-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.news-admin-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.news-admin-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.news-admin-btn-danger {
    background: #fff;
    border-color: var(--danger);
    color: var(--danger-dark);
    margin-left: auto;
}
.news-admin-btn-danger:hover { background: #fee2e2; }

/* Thanh quản trị phía trên danh sách tin (nút Thêm bài mới) */
.news-admin-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

/* Nút xóa nổi trên góc thẻ tin tức */
.news-card { position: relative; }
.news-card-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(239,68,68,0.92);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, background 0.15s;
    z-index: 2;
}
.news-card-delete-btn:hover { transform: scale(1.1); background: var(--danger-dark); }

/* Trạng thái lưu tự động (dùng chung cho mọi khung chỉnh sửa tin) */
.news-edit-save-status {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    min-height: 1.1em;
    margin: 2px 2px 10px;
}

/* Tiêu đề + nội dung có thể chỉnh sửa trực tiếp (contenteditable) */
h3.news-editable,
.news-article-text.news-editable {
    outline: none;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    background: var(--surface-2);
    cursor: text;
    transition: border-color 0.15s, background 0.15s;
}
h3.news-editable:focus,
.news-article-text.news-editable:focus {
    border-color: var(--primary);
    background: var(--surface);
}

/* Input ngày (chỉnh sửa) trong header bài viết */
.news-edit-date-input {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--surface);
}
.news-edit-date-input:focus { outline: none; border-color: var(--primary); }

/* Khung dán link ảnh mới */
.news-edit-image-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.news-edit-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--surface);
}
.news-edit-input:focus { outline: none; border-color: var(--primary); }

@media (min-width: 600px) {
    .news-edit-image-bar { order: 2; margin-top: 10px; margin-bottom: 0; }
}

/* Thanh công cụ chỉnh sửa nội dung bài (nút In đậm) */
.news-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.news-edit-tool-btn {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.news-edit-tool-btn:hover { border-color: var(--primary); background: var(--primary-light); }

/* Khung chỉnh sửa câu hỏi trắc nghiệm (giảng viên) */
.news-quiz-edit-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -4px 0 14px;
}
.news-quiz-edit-block {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 16px;
}
.news-quiz-edit-block:last-child { margin-bottom: 0; }
.news-quiz-edit-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 6px;
}
.news-quiz-edit-question {
    margin-bottom: 10px;
    font-weight: 600;
}
.news-quiz-edit-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-quiz-edit-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.news-quiz-edit-option-row input[type="radio"] {
    accent-color: var(--success);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.news-quiz-edit-option-row input[type="radio"]:checked + .news-edit-input {
    border-color: var(--success);
    background: var(--success-light);
}

/* Thông báo tải/rỗng cho danh sách tin */
.news-loading-msg,
.news-empty-msg {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.86rem;
    padding: 24px 0;
}

/* =====================================================
   TRÒ LÔ TÔ (BINGO 2 NGƯỜI CHƠI)
   ===================================================== */

#loto-game-panel { animation: grammarSlideIn 0.25s ease; }

/* --- Màn hình chọn sheet --- */
.loto-setup-screen {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    box-shadow: var(--shadow-xs);
}
.loto-setup-intro {
    font-size: 0.88rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 520px;
    line-height: 1.6;
}
.loto-pick-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: 560px;
}
@media (min-width: 600px) {
    .loto-pick-grid { grid-template-columns: 1fr 1fr; }
}
.loto-pick-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 18px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.loto-pick-card.taken { border-color: var(--success); background: var(--success-light); }
.loto-pick-label { font-weight: 700; font-size: 0.96rem; color: var(--text); }
.loto-pick-status { font-size: 0.78rem; color: var(--text-muted); min-height: 1.2em; }
.loto-pick-card.taken .loto-pick-status { color: #065f46; font-weight: 600; }
.loto-pick-btn {
    padding: 9px 18px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--primary-glow);
    transition: transform 0.15s, box-shadow 0.15s;
}
.loto-pick-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); }
.loto-pick-btn:disabled { background: var(--border); color: var(--text-light); cursor: not-allowed; box-shadow: none; }

.loto-admin-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.loto-admin-toggle input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* --- Bàn chơi --- */
.loto-table-screen { display: flex; flex-direction: column; gap: 18px; }

.loto-admin-zone {
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.loto-admin-zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.loto-admin-zone-header h4 { margin-bottom: 0; }
.loto-strike-display {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--warning);
    background: var(--warning-light);
    padding: 4px 10px;
    border-radius: 20px;
}
.loto-strike-display.danger { color: var(--danger-dark); background: #fee2e2; }

.loto-timer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
@media (min-width: 600px) {
    .loto-timer-row { flex-direction: row; justify-content: space-between; align-items: center; }
}
.loto-timer-display {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    min-width: 90px;
    text-align: center;
    font-family: 'Inter', monospace;
    letter-spacing: -0.02em;
}
.loto-timer-display.warning { color: var(--warning); }
.loto-timer-display.danger  { color: var(--danger); animation: lotoPulse 0.6s infinite; }
@keyframes lotoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.loto-timer-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.loto-timer-custom-label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
#loto-timer-custom {
    width: 64px;
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    text-align: center;
    font-family: inherit;
}
#loto-timer-custom:focus { outline: none; border-color: var(--primary); }

.loto-btn-secondary {
    padding: 8px 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.loto-btn-secondary:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

.loto-random-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 6px 0 2px;
}
.loto-random-hint { font-size: 0.82rem; color: var(--text-muted); max-width: 480px; margin: 0 auto; }
#loto-random-btn { font-size: 1rem; padding: 12px 26px; }

.loto-pending-number {
    align-self: flex-start;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: 1.5px dashed var(--primary);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
}

.loto-answer-row { display: flex; flex-direction: column; gap: 8px; }
.loto-answer-row label { font-size: 0.82rem; color: var(--text-muted); }
.loto-answer-input-row { display: flex; gap: 8px; flex-wrap: wrap; }
#loto-answer-input {
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--text);
}
#loto-answer-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); background: var(--surface); }
#loto-answer-input:disabled { background: var(--border); color: var(--text-light); cursor: not-allowed; }

.loto-answer-feedback { font-size: 0.82rem; font-weight: 600; min-height: 1.3em; }
.loto-answer-feedback.error   { color: var(--danger-dark); }
.loto-answer-feedback.success { color: #065f46; }

.loto-current-result {
    font-size: 0.92rem;
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
.loto-current-result strong { color: var(--primary-dark); font-size: 1.05rem; }

/* --- Hai sheet người chơi --- */
.loto-sheets-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 768px) {
    .loto-sheets-row { grid-template-columns: 1fr 1fr; }
}

.loto-player-block {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.loto-player-block.my-sheet { border-color: var(--primary); box-shadow: var(--shadow-glow), var(--shadow-xs); }
.loto-player-block.winner   { border-color: var(--success); background: var(--success-light); }
.loto-player-block.loser    { border-color: var(--danger); opacity: 0.7; }

.loto-player-header { display: flex; align-items: center; justify-content: space-between; }
.loto-player-name { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.loto-player-badge { font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 12px; }
.loto-player-badge.badge-me      { background: var(--primary-light); color: var(--primary-dark); }
.loto-player-badge.badge-admin  { background: var(--warning-light); color: #92400e; }
.loto-player-badge.badge-win    { background: var(--success-light); color: #065f46; }
.loto-player-badge.badge-lose   { background: #fee2e2; color: #991b1b; }

.loto-sheet-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}
.loto-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, border-color 0.15s;
    user-select: none;
}
.loto-cell:hover:not(.marked):not(.disabled) { background: var(--primary-light); border-color: var(--primary); transform: scale(1.05); }
.loto-cell.marked { background: linear-gradient(135deg, var(--success), var(--success-dark)); color: #fff; border-color: var(--success-dark); }
.loto-cell.wrong-pick { background: linear-gradient(135deg, var(--danger), var(--danger-dark)); color: #fff; border-color: var(--danger-dark); }
.loto-cell.disabled { cursor: not-allowed; opacity: 0.55; }

@media (min-width: 600px) {
    .loto-cell { font-size: 1.1rem; }
}
@media (min-width: 900px) {
    .loto-cell { font-size: 1.25rem; }
}

.loto-bingo-btn {
    padding: 11px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    letter-spacing: 0.03em;
    box-shadow: 0 3px 12px rgba(16,185,129,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.loto-bingo-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,185,129,0.4); }
.loto-bingo-btn:disabled { background: var(--border); color: var(--text-light); cursor: not-allowed; box-shadow: none; }

.loto-log {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.loto-log-entry { line-height: 1.5; }
.loto-log-entry.log-win  { color: #065f46; font-weight: 700; }
.loto-log-entry.log-lose { color: #991b1b; font-weight: 700; }
.loto-log-entry.log-admin-err { color: var(--warning); font-weight: 600; }

#loto-restart-btn { align-self: center; }

/* --- Màn hình kết thúc --- */
.loto-end-screen {
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 36px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    box-shadow: var(--shadow-md);
}
.loto-end-message { font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.5; }

/* Nút hành động chính trong trò lô tô (không có icon bút chì) */
.loto-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px var(--primary-glow);
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
}
.loto-action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}
.loto-action-btn:active:not(:disabled) { transform: translateY(0); }
.loto-action-btn:disabled {
    background: var(--border);
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- Bổ sung thêm cho bản hoàn chỉnh --- */
#loto-game-panel { display: flex; flex-direction: column; gap: 18px; }

#loto-roster-line {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    text-align: center;
}

.loto-pick-card.mine { border-color: var(--primary); background: var(--primary-light); }
.loto-pick-card.mine .loto-pick-status { color: var(--primary-dark); font-weight: 700; }

#loto-start-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
#loto-start-box label { font-size: 0.85rem; color: var(--text-muted); }
#loto-timer-custom-setup {
    width: 80px;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: inherit;
    font-size: 0.9rem;
}

/* Ô đã đến lượt nhưng người chơi chọn sai / chậm hơn / hết giờ -> chuyển xám */
.loto-cell.gray {
    background: var(--border-strong);
    color: var(--text-muted);
    border-color: var(--text-light);
    cursor: not-allowed;
}
.loto-cell.gray:hover { transform: none !important; }

#loto-reset-btn { display: block; margin: 4px auto 0; }
/* ========== KID TOPICS (Cho bé - 50 chủ đề) ========== */
.kid-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.kid-topic-card{background:var(--surface-2,#f7f7f9);border:1px solid var(--border,#e2e2e6);border-radius:14px;padding:16px;cursor:pointer;text-align:center;transition:.15s;}
.kid-topic-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:var(--accent,#6d5bff);}
.kid-topic-card .kid-icon{font-size:32px;display:block;margin-bottom:8px;}
.kid-topic-card .kid-title{font-weight:600;font-size:14.5px;}
.kid-topic-card .kid-count{font-size:12px;opacity:.6;margin-top:4px;}

.kid-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.kid-subtab-btn{padding:8px 14px;border-radius:999px;border:1px solid var(--border,#e2e2e6);background:var(--surface,#fff);cursor:pointer;font-size:14px;}
.kid-subtab-btn.active{background:var(--accent,#6d5bff);color:#fff;border-color:var(--accent,#6d5bff);}
/* [MỚI] Phần luyện tập (Nối từ / Ô chữ / Câu chuyện / Trò chơi) đã hoàn thành đợt hiện tại -> nền xanh lá, giữ nguyên khi tải lại trang */
.kid-subtab-btn.phase-completed{background:var(--success-light,#d1fae5);border-color:var(--success,#10b981);color:var(--success-dark,#059669);font-weight:700;}
.kid-subtab-btn.phase-completed::after{content:" ✅";}
.kid-subtab-btn.phase-completed.active{background:var(--success,#10b981);border-color:var(--success,#10b981);color:#fff;}
/* [MỚI] Chủ đề "Cho bé" đã hoàn thành toàn bộ lộ trình -> thẻ chủ đề trong danh sách chuyển nền xanh lá */
.kid-topic-card.completed{background:var(--success-light,#d1fae5);border-color:var(--success,#10b981);}
.kid-topic-card.completed .kid-count{color:var(--success-dark,#059669);font-weight:700;}

.kid-btn{padding:9px 16px;border-radius:10px;border:1px solid var(--border,#e2e2e6);background:var(--surface,#fff);cursor:pointer;font-size:14px;}
.kid-btn-primary{background:var(--accent,#6d5bff);color:#fff;border-color:var(--accent,#6d5bff);}

/* [MỚI] Nút nổi "📊 Băng thông" (giảng viên) — JS đặt sẵn right:160px để né nút
   "🔑 Quyền đăng nhập", nhưng vì độ dài chữ hai nút không cố định (đặc biệt trên
   điện thoại/màn hẹp) nên vẫn đè lên nhau. Ở đây xếp CHỒNG THEO CHIỀU DỌC, cùng
   một mép phải với nút Quyền đăng nhập, để không bao giờ đụng ngang bất kể độ
   dài chữ. Dùng !important vì JS gán style trực tiếp (inline) nên có độ ưu tiên
   cao hơn CSS thường. */
#bandwidth-manager-btn{
    right:16px !important;
    left:auto !important;
    bottom:64px !important; /* nằm ngay phía trên nút Quyền đăng nhập (bottom:16px + chiều cao nút + khoảng cách) */
    white-space:nowrap;
}
#allowlist-manager-btn{ white-space:nowrap; }

@media (max-width:480px){
    #allowlist-manager-btn,
    #bandwidth-manager-btn{
        right:10px !important;
        font-size:12.5px;
        padding:8px 12px;
    }
    #bandwidth-manager-btn{ bottom:58px !important; }
}

.kid-hint{font-size:13px;opacity:.65;margin-bottom:12px;}

/* Flashcard */
.kid-flash-search-wrap{position:relative;display:flex;align-items:center;gap:8px;background:var(--surface,#fff);border:1.5px solid var(--border-strong,#d8d8dd);border-radius:30px;padding:8px 14px;margin:0 auto 12px;max-width:460px;transition:border-color .15s, box-shadow .15s;}
.kid-flash-search-wrap:focus-within{border-color:var(--accent,#6d5bff);box-shadow:0 0 0 3px rgba(109,91,255,.15);}
.kid-flash-search-icon{font-size:.9rem;opacity:.6;flex-shrink:0;}
.kid-flash-search-input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:14px;color:var(--text,#111);font-family:inherit;}
.kid-flash-search-input::placeholder{color:var(--text-light,#999);}
.kid-flash-search-clear{border:none;background:transparent;cursor:pointer;color:var(--text-muted,#888);font-size:.8rem;padding:0 2px;line-height:1;display:none;flex-shrink:0;}
.kid-flash-search-clear.visible{display:block;}
.kid-flash-search-clear:hover{color:var(--danger,#e5484d);}
.kid-flash-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface,#fff);border:1px solid var(--border,#e2e2e6);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);max-height:280px;overflow-y:auto;z-index:20;display:none;}
.kid-flash-search-results.visible{display:block;}
.kid-flash-search-item{display:flex;align-items:baseline;gap:10px;padding:9px 14px;cursor:pointer;text-align:left;border-bottom:1px solid var(--border,#f0f0f2);}
.kid-flash-search-item:last-child{border-bottom:none;}
.kid-flash-search-item:hover{background:var(--surface-2,#f7f7f9);}
.kid-flash-search-item .kfs-en{font-weight:700;font-size:14px;color:var(--text,#111);}
.kid-flash-search-item .kfs-vi{font-size:12.5px;opacity:.65;}
.kid-flash-search-empty{padding:14px;text-align:center;font-size:13px;opacity:.6;}
.kid-flash-progress{text-align:center;font-size:13px;opacity:.6;margin-bottom:10px;}
.kid-flashcard{max-width:460px;height:460px;margin:0 auto;perspective:1200px;cursor:pointer;}
.kid-flashcard-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d;}
.kid-flashcard.flipped .kid-flashcard-inner{transform:rotateY(180deg);}
.kid-flashcard-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.10);}
.kid-flashcard-front{background:linear-gradient(135deg,#6d5bff,#9b8cff);color:#fff;}
.kid-flashcard-back{background:linear-gradient(135deg,#ff9f6d,#ffcf6d);color:#3a2a00;transform:rotateY(180deg);}
.kid-flashcard-face .kf-word{font-size:26px;font-weight:700;}
.kf-word-row{display:flex;align-items:center;justify-content:center;gap:8px;}
.kf-speak-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.22);
    color:#fff;
    font-size:17px;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    transition:transform .15s ease, background .15s ease;
}
.kf-speak-btn:hover{background:rgba(255,255,255,.38);}
.kf-speak-btn:active{transform:scale(.88);background:rgba(255,255,255,.5);}
.kid-flashcard-face .kf-ipa{font-size:16px;opacity:.9;margin-top:6px;}
.kid-flashcard-face .kf-vi{font-size:20px;font-weight:700;}
.kid-flashcard-face .kf-ex{font-size:14px;margin-top:10px;font-style:italic;opacity:.9;}
.kid-flashcard-face .kf-ex-vi{font-size:13px;margin-top:6px;opacity:.85;}

/* ================================================================
   [MỚI] CHẤM PHÁT ÂM TỰ ĐỘNG (Web Speech API) trên Flashcard
   "Cho bé" / THCS-THPT + khung tra từ (word-lookup-popup).
   ================================================================ */
.kf-pronounce-row{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px auto 0;max-width:460px;}
.kf-mic-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:30px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(79,110,247,.28);transition:transform .15s ease, background .2s ease, box-shadow .2s ease;}
.kf-mic-btn:hover{transform:translateY(-1px);}
.kf-mic-btn:active{transform:scale(.95);}
.kf-mic-btn:disabled{cursor:default;opacity:.85;}
.kf-mic-btn.kf-mic-done{background:linear-gradient(135deg,var(--success),var(--success-dark));box-shadow:0 4px 14px rgba(16,185,129,.28);}
.kf-mic-btn.kf-mic-listening{background:linear-gradient(135deg,var(--danger),var(--danger-dark));animation:kfMicPulse 1s ease-in-out infinite;}
.kf-mic-icon{font-size:16px;line-height:1;}
@keyframes kfMicPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45);}
    50%{box-shadow:0 0 0 10px rgba(239,68,68,0);}
}
.kf-pronounce-status{font-size:12.5px;text-align:center;color:var(--text-muted);min-height:16px;max-width:420px;}
.kf-pronounce-status.kf-pronounce-correct{color:var(--success-dark);font-weight:700;}
.kf-pronounce-status.kf-pronounce-wrong{color:var(--danger-dark);font-weight:700;}
.kf-pronounce-status.kf-pronounce-listening{color:var(--danger-dark);font-weight:700;}
.kf-pronounce-status.kf-pronounce-unsupported{color:var(--warning);}

/* [MỚI] Ảnh dự phòng Pixabay khi ảnh từ vựng gốc bị lỗi: hiển thị dạng icon căn giữa, không bị crop xấu */
.kid-img-fallback{object-fit:contain !important;padding:16%;background:rgba(0,0,0,.04);}
.kid-flash-nav{display:flex;gap:10px;justify-content:center;margin-top:18px;}

.kf-img-wrap{width:100%;height:220px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative;}
.kf-img{max-height:220px;max-width:100%;border-radius:12px;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.20);}
.kf-img-placeholder{width:100%;height:220px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:30px;opacity:.7;}

/* ================================================================
   [MỚI] HIỆU ỨNG ĐỘNG ~3 GIÂY CHO MỖI THẺ TỪ VỰNG (Flashcard)
   Vì mỗi lần đổi thẻ, các phần tử bên trong mặt trước được tạo mới
   hoàn toàn (innerHTML), nên animation dưới đây sẽ TỰ CHẠY LẠI từ đầu
   mỗi khi bạn bấm "Trước / Sau" hoặc mở 1 chủ đề mới.
   ================================================================ */
.kf-anim-img{
    animation: kfPopIn .6s cubic-bezier(.34,1.56,.64,1) both,
               kfGlowPulse 1.2s ease-out .6s 2;
}
.kf-anim-word{
    opacity:0;
    animation: kfSlideFadeUp .5s ease-out .3s both;
}
.kf-anim-ipa{
    opacity:0;
    animation: kfSlideFadeUp .5s ease-out .55s both;
}
.kf-anim-speak{
    animation: kfSpeakWiggle .5s ease-in-out 1.4s 2;
}
.kf-sparkle{
    position:absolute;
    font-size:20px;
    opacity:0;
    pointer-events:none;
    animation: kfSparkleFloat 1.4s ease-out both;
}
.kf-sparkle-1{ top:6px; right:10%; animation-delay:.15s; }
.kf-sparkle-2{ bottom:14px; left:8%; font-size:16px; animation-delay:.5s; }

@keyframes kfPopIn{
    0%   { opacity:0; transform: scale(.55) rotate(-8deg); }
    60%  { opacity:1; transform: scale(1.08) rotate(3deg); }
    80%  { transform: scale(.97) rotate(-1deg); }
    100% { opacity:1; transform: scale(1) rotate(0deg); }
}
@keyframes kfGlowPulse{
    0%   { box-shadow: 0 4px 14px rgba(0,0,0,.20), 0 0 0 0 rgba(255,255,255,.55); }
    100% { box-shadow: 0 4px 14px rgba(0,0,0,.20), 0 0 0 22px rgba(255,255,255,0); }
}
@keyframes kfSlideFadeUp{
    0%   { opacity:0; transform: translateY(14px); }
    100% { opacity:1; transform: translateY(0); }
}
@keyframes kfSpeakWiggle{
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.18) rotate(-10deg); }
    50%      { transform: scale(1.05) rotate(8deg); }
    75%      { transform: scale(1.18) rotate(-6deg); }
}
@keyframes kfSparkleFloat{
    0%   { opacity:0; transform: translateY(4px) scale(.4) rotate(0deg); }
    18%  { opacity:1; }
    100% { opacity:0; transform: translateY(-38px) scale(1.15) rotate(30deg); }
}

/* Nối từ */
.kid-match-wrap{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;}
.kid-match-col{display:flex;flex-direction:column;gap:8px;min-width:200px;}
.kid-match-item{padding:8px 14px;border:2px solid var(--border,#e2e2e6);border-radius:10px;cursor:pointer;background:var(--surface,#fff);font-size:14px;user-select:none;display:flex;align-items:center;gap:10px;}
.kid-match-item.selected{border-color:var(--accent,#6d5bff);background:rgba(109,91,255,.08);}
.kid-match-item.correct{border-color:#2fb56d;background:rgba(47,181,109,.12);cursor:default;}
.kid-match-item.wrong{border-color:#ff5d5d;background:rgba(255,93,93,.12);}
.kid-match-result{text-align:center;margin:14px 0;font-weight:600;}
.kmi-img{width:32px;height:32px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--surface-2,#eee);}

/* Story */
.kid-story-title{font-size:20px;margin-bottom:10px;}
.kid-story-text{line-height:1.9;font-size:16px;background:var(--surface-2,#f7f7f9);padding:18px;border-radius:14px;}
.kid-story-text b{color:var(--accent,#6d5bff);}
.kid-story-translate-btn{margin-top:12px;padding:9px 16px;border:2px solid var(--accent,#6d5bff);border-radius:10px;background:transparent;color:var(--accent,#6d5bff);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease;}
.kid-story-translate-btn:hover{background:var(--accent,#6d5bff);color:#fff;}
.kid-story-text-vi{line-height:1.9;font-size:16px;background:rgba(109,91,255,.07);padding:18px;border-radius:14px;margin-top:12px;border-left:4px solid var(--accent,#6d5bff);}
.kid-story-text-vi b{color:var(--accent,#6d5bff);}
.kid-story-gallery{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
.kid-story-gallery-item{width:90px;text-align:center;font-size:12px;}
.ksg-img-wrap{width:90px;height:66px;border-radius:10px;overflow:hidden;background:var(--surface-2,#eee);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.10);margin-bottom:4px;}
.ksg-img-wrap img{width:100%;height:100%;object-fit:cover;}

/* ===== Cho bé — thông báo khóa Flashcard (25 từ đầu) ===== */
.kid-flash-lock-notice{background:rgba(109,91,255,.08);border:1.5px dashed var(--accent,#6d5bff);border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.6;margin-bottom:14px;}
.kid-flash-lock-notice b{color:var(--accent,#6d5bff);}

/* ===== Cho bé — Ô chữ (Word Search: tìm từ ẩn trong bảng 20x9 ô chữ cái) ===== */
/* Mobile-first: định nghĩa xếp trên, bảng ô chữ xếp dưới, luôn căn giữa và co vừa màn hình
   (< 768px) để học viên thấy trọn vẹn 20x9 ô mà không cần cuộn ngang. Từ 1024px (laptop) trở
   lên chuyển sang 1 hàng: định nghĩa bên trái, bảng ô chữ bên phải. */
.kid-ws-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:960px;margin:0 auto;}
.kid-ws-clues{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.7;width:100%;max-width:640px;}
.kid-ws-clues li{position:relative;padding:8px 12px 8px 34px;margin-bottom:6px;background:var(--surface-2,#f8f9ff);border:1.5px solid var(--border,#e2e8f8);border-radius:10px;transition:background .2s ease,border-color .2s ease,color .2s ease;}
.kid-ws-clues li::before{content:"?";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-weight:700;width:18px;height:18px;line-height:18px;border-radius:50%;background:var(--accent,#6d5bff);color:#fff;font-size:11px;text-align:center;}
.kid-ws-clues li.ws-clue-found{background:rgba(47,181,109,.12);border-color:#2fb56d;color:#1c7a45;text-decoration:line-through;}
.kid-ws-clues li.ws-clue-found::before{content:"✓";background:#2fb56d;}
.ws-clue-en{opacity:.6;font-size:12px;font-style:italic;}
.kid-ws-grid-col{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;}
.kid-ws-scroll-hint{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:13px;
    font-weight:700;
    color:var(--primary-dark,#3a56d4);
    background:var(--primary-light,#eef1ff);
    border:1.5px dashed var(--accent,#6d5bff);
    border-radius:999px;
    padding:6px 16px;
    animation:kidWsHintShake 1.6s ease-in-out infinite;
    white-space:nowrap;
}
@keyframes kidWsHintShake{
    0%,20%,100%{transform:translateX(0);}
    5%{transform:translateX(-5px);}
    10%{transform:translateX(5px);}
    15%{transform:translateX(-3px);}
}
.kid-ws-grid-scroll{
    width:100%;
    max-width:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    /* [SỬA LỖI] KHÔNG dùng display:flex ở đây: khi nội dung bên trong tràn ra ngoài,
       flex/grid container sẽ KHÔNG tính padding ở cạnh cuối (phải/dưới) vào vùng cuộn
       được, nên dù tăng padding cũng vô ích — ô chữ ngoài cùng bên phải vẫn bị hụt.
       Chỉ có đúng 1 phần tử con (.kid-ws-table) nên dùng layout khối bình thường là đủ,
       và layout khối thì padding cạnh cuối luôn được tính đúng vào vùng cuộn. */
    padding:16px;
    border-radius:12px;
    background:var(--surface-2,#f8f9ff);
    border:1.5px solid var(--border,#e2e8f8);
}
.kid-ws-table{
    --ws-cell:38px;
    --ws-gap:1px;
    display:grid;
    grid-template-columns:repeat(20,var(--ws-cell));
    grid-template-rows:repeat(9,var(--ws-cell));
    gap:var(--ws-gap);
    /* [SỬA LỖI] width/height trước đây chỉ tính đúng kích thước 20 ô / 9 ô mà QUÊN cộng
       thêm phần khoảng cách (gap) giữa các ô (19 khoảng gap ngang, 8 khoảng gap dọc).
       Vì bảng có overflow:hidden nên phần thiếu đó "nuốt" mất gần nửa cột/hàng cuối cùng. */
    width:calc(20 * var(--ws-cell) + 19 * var(--ws-gap));
    height:calc(9 * var(--ws-cell) + 8 * var(--ws-gap));
    flex:none;
    background:var(--border-strong,#c7d2fe);
    border:2px solid var(--border-strong,#c7d2fe);
    border-radius:10px;
    overflow:hidden;
    touch-action:pan-x pan-y;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
}
.ws-cell{
    background:#fff;
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    text-transform:uppercase;
    cursor:pointer;
    line-height:1;
}
.ws-cell.ws-selecting{background:var(--primary-light,#eef1ff);color:var(--primary-dark,#3a56d4);}
.ws-cell.ws-found{background:#2fb56d !important;color:#fff !important;}
.ws-cell.ws-wrong{background:rgba(255,93,93,.45);color:#8a1c1c;}
.kid-crossword-feedback{margin-top:12px;text-align:center;font-weight:600;min-height:20px;}
.kid-crossword-feedback.is-correct{color:#2fb56d;}
.kid-crossword-feedback.is-wrong{color:#ff5d5d;}

@media (min-width:480px){
    .kid-ws-table{ --ws-cell:42px; }
}
@media (min-width:1024px){
    .kid-ws-wrap{flex-direction:row;align-items:flex-start;justify-content:center;gap:32px;max-width:1180px;}
    .kid-ws-clues{order:1;flex:0 0 260px;max-width:260px;}
    .kid-ws-grid-col{order:2;flex:1 1 auto;max-width:900px;}
    .kid-ws-table{ --ws-cell:44px; }
    .kid-ws-scroll-hint{display:none;} /* Màn hình lớn thường đã đủ chỗ, không cần nhắc kéo nữa */
}

/* ===== Cho bé — Câu chuyện: điền từ khóa (thay cho bản dịch cả đoạn) ===== */
.kid-story-blank-wrap{display:inline-flex;align-items:center;gap:4px;margin:0 2px;}
.kid-story-blank-input{display:inline-block;min-width:3ch;border:none;border-bottom:2.5px solid var(--accent,#6d5bff);background:transparent;font:inherit;font-weight:700;text-align:center;color:var(--accent,#6d5bff);padding:1px 3px;outline:none;}
.kid-story-blank-input:focus{border-color:var(--primary,#6d5bff);}
.kid-story-blank-input.is-correct{border-color:#2fb56d;color:#2fb56d;}
.kid-story-blank-input.is-wrong{border-color:#ff5d5d;color:#ff5d5d;}
.kid-story-blank-hint{font-size:12.5px;opacity:.65;font-style:italic;}
.kid-story-feedback{margin-top:10px;text-align:center;font-weight:600;min-height:20px;}
.kid-story-feedback.is-correct{color:#2fb56d;}
.kid-story-feedback.is-wrong{color:#ff5d5d;}

/* ===== THCS/THPT — Câu chuyện kiểu mới: tối đa 4 khung ảnh 16:9 ===== */
.thcs-story-frames{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:6px;}
@media (max-width:720px){.thcs-story-frames{grid-template-columns:1fr;}}
.thcs-story-frame-card{background:var(--surface-2,#f7f7f9);border-radius:16px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.08);}
.thcs-story-frame-img-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#ddd;}
.thcs-story-frame-img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(16px) brightness(.85);transform:scale(1.05);transition:filter .4s ease;}
.thcs-story-frame-img-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:34px;background:linear-gradient(135deg,#dcdce6,#eef0fa);color:#9a9aa8;text-align:center;}
.thcs-story-frame-img-placeholder span{font-size:12px;font-weight:600;opacity:.8;}
.thcs-story-frame-card.unlocked .thcs-story-frame-img{filter:none;transform:none;}
.thcs-story-frame-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-align:center;font-size:13px;font-weight:600;padding:10px;text-shadow:0 1px 3px rgba(0,0,0,.5);transition:opacity .3s ease;}
.thcs-story-frame-lock{font-size:26px;}
.thcs-story-frame-card.unlocked .thcs-story-frame-overlay{opacity:0;pointer-events:none;}
.thcs-story-frame-text{margin-top:12px;line-height:2;font-size:15.5px;}
.thcs-story-frame-actions{display:flex;justify-content:center;margin-top:10px;}
.thcs-story-frame-feedback{margin-top:8px;text-align:center;font-weight:600;min-height:18px;font-size:14px;}
.thcs-story-frame-feedback.is-correct{color:#2fb56d;}
.thcs-story-frame-feedback.is-wrong{color:#ff5d5d;}

.thcs-story-blank-wrap{display:inline-flex;align-items:center;gap:4px;margin:0 2px;}
.thcs-story-blank-input{display:inline-block;min-width:3ch;border:none;border-bottom:2.5px solid var(--accent,#6d5bff);background:transparent;font:inherit;font-weight:700;text-align:center;color:var(--accent,#6d5bff);padding:1px 3px;outline:none;}
.thcs-story-blank-input:focus{border-color:var(--primary,#6d5bff);}
.thcs-story-blank-input.is-correct{border-color:#2fb56d;color:#2fb56d;}
.thcs-story-blank-input.is-wrong{border-color:#ff5d5d;color:#ff5d5d;}
.thcs-story-blank-hint{font-size:12.5px;opacity:.65;font-style:italic;}

/* ----- Khung soạn thảo (chỉ tài khoản giangvien@gmail.com) ----- */
.thcs-story-editor{margin-top:28px;padding-top:20px;border-top:2px dashed var(--border,#e2e2e6);}
.thcs-story-editor-title{margin-bottom:4px;}
.thcs-story-editor-frames{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:12px;}
@media (max-width:720px){.thcs-story-editor-frames{grid-template-columns:1fr;}}
.thcs-story-editor-card{background:var(--surface-2,#f7f7f9);border-radius:16px;padding:16px;box-shadow:0 4px 14px rgba(0,0,0,.06);}
.thcs-story-editor-card-title{margin:0 0 10px;}
.thcs-story-editor-image-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.thcs-story-editor-image-input{padding:9px 12px;border-radius:10px;border:2px solid var(--border,#e2e2e6);font-size:14px;font-family:inherit;}
.thcs-story-editor-image-input:focus{outline:none;border-color:var(--accent,#6d5bff);}
.thcs-story-editor-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#ddd;}
.thcs-story-editor-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12.5px;opacity:.75;}
.thcs-story-editor-bold-btn{padding:5px 10px;border-radius:8px;border:1.5px solid var(--border-strong,#c9c9d4);background:var(--surface,#fff);cursor:pointer;font-size:13px;}
.thcs-story-editor-bold-btn:hover{background:var(--accent,#6d5bff);color:#fff;border-color:var(--accent,#6d5bff);}
.thcs-story-editor-content{min-height:90px;line-height:1.8;font-size:15px;}
.thcs-story-editor-content b, .thcs-story-editor-content strong{color:var(--accent,#6d5bff);}
.thcs-story-editor-keywords{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.thcs-story-editor-keyword-empty{font-size:13px;opacity:.6;margin:4px 0;}
.thcs-story-editor-keyword-row{display:flex;align-items:center;gap:8px;font-size:14px;}
.thcs-story-editor-keyword-label{flex:0 0 auto;white-space:nowrap;}
.thcs-story-editor-keyword-input{flex:1;padding:6px 10px;border-radius:8px;border:2px solid var(--border,#e2e2e6);font-size:13.5px;font-family:inherit;}
.thcs-story-editor-keyword-input:focus{outline:none;border-color:var(--accent,#6d5bff);}
.thcs-story-editor-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;}
.thcs-story-editor-status{font-size:13px;opacity:.75;}
.thcs-story-editor-save-all{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding:16px 18px;background:var(--surface,#fff);border-radius:14px;border:2px solid var(--accent,#6d5bff);position:sticky;bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,.1);}
.thcs-story-editor-save-all-btn{font-size:15px;padding:12px 22px;}
.thcs-story-editor-save-all-status{font-size:13.5px;opacity:.85;}
[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--text-muted,#9a9aa5);}

.ksg-placeholder{font-size:20px;opacity:.5;}
.ksg-label{opacity:.75;}

/* ===== THCS/THPT — Lớp 6: khối lớp bị khóa (chưa ra mắt) ===== */
.thcs-grade-card{position:relative;}
.thcs-grade-card.locked{opacity:.45;cursor:not-allowed;}
.thcs-grade-card.locked:hover{transform:none;box-shadow:none;border-color:var(--border,#e2e2e6);}
.thcs-grade-card .kid-count{font-weight:600;}

/* ===== THCS/THPT — Unit: khóa / đã hoàn thành ===== */
.thcs-unit-card{position:relative;}
.thcs-unit-card.locked{opacity:.45;cursor:not-allowed;}
.thcs-unit-card.locked:hover{transform:none;box-shadow:none;border-color:var(--border,#e2e2e6);}
.thcs-unit-card.completed{background:var(--success-light,#d1fae5);border-color:var(--success,#10b981);}
.thcs-unit-card.completed .kid-count{color:var(--success-dark,#059669);font-weight:700;}

/* ===== THCS/THPT — Dịch câu (Việt -> Anh): điền từ khóa còn thiếu ===== */
.thcs-translate-progress{text-align:center;font-size:13px;opacity:.6;margin-bottom:10px;}
.thcs-translate-card{max-width:560px;margin:0 auto;background:var(--surface-2,#f7f7f9);border-radius:18px;padding:22px;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.thcs-translate-vi{font-size:19px;font-weight:700;line-height:1.6;margin-bottom:16px;text-align:center;}
.thcs-translate-sentence{font-size:17px;line-height:2;text-align:center;}
.thcs-translate-blank-input{display:inline-block;min-width:3ch;border:none;border-bottom:2.5px solid var(--accent,#6d5bff);background:transparent;font:inherit;font-weight:700;text-align:center;color:var(--accent,#6d5bff);padding:2px 4px;outline:none;margin:0 2px;}
.thcs-translate-blank-input:focus{border-color:var(--primary,#6d5bff);}
.thcs-translate-blank-input:disabled{opacity:.8;}
.thcs-translate-blank-input.is-wrong{border-color:#ff5d5d;color:#ff5d5d;animation:thcsShakeInput .35s;}
@keyframes thcsShakeInput{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-6px);}
    40%{transform:translateX(6px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(4px);}
}
.thcs-translate-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.thcs-translate-feedback{margin-top:14px;text-align:center;font-weight:600;min-height:20px;}
.thcs-translate-feedback.is-correct{color:#2fb56d;}
.thcs-translate-feedback.is-wrong{color:#ff5d5d;}
.thcs-translate-feedback .tf-answer{display:block;margin-top:6px;font-weight:400;opacity:.85;font-size:14px;}
.thcs-translate-feedback .tf-answer b{color:var(--accent,#6d5bff);}


.kf-img {
    max-height: 220px;
    max-width: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0,0,0,.20);
    
    /* Thêm 2 dòng này để tạo màu nền chờ khi ảnh chưa load xong */
    background-color: var(--surface-2, #e2e8f8); 
    min-width: 120px; /* Đảm bảo có một khoảng không gian giữ chỗ */
}
/* =====================================================
   TAB HƯỚNG DẪN
   ===================================================== */
.huongdan-guide-content { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
/* [MỚI] Nút xem lại vòng tham quan tương tác (spotlight) trong panel "Cách học trên web" */
.huongdan-replay-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
    padding: 11px 20px;
    border-radius: 22px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 2px 8px var(--primary-glow);
    transition: transform .15s ease;
}
.huongdan-replay-tour-btn:hover { transform: translateY(-1px); }
.huongdan-replay-tour-btn:active { transform: translateY(0); }
.huongdan-guide-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
}
.huongdan-guide-section h4 { font-size:0.95rem; font-weight:700; color:var(--primary-dark); margin-bottom:6px; }
.huongdan-guide-section p,
.huongdan-guide-section li { font-size:0.88rem; color:var(--text); line-height:1.55; }
.huongdan-guide-section ul { padding-left:20px; display:flex; flex-direction:column; gap:6px; margin-top:4px; }

/* --- Chat cộng đồng --- */
.chat-hint { font-size:0.85rem; color:var(--text-muted); margin-bottom:14px; line-height:1.5; }

#community-chat-box {
    display:flex;
    flex-direction:column;
    background: var(--surface);
    border:1.5px solid var(--border);
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow-xs);
}
#community-chat-messages {
    flex:1;
    min-height:280px;
    max-height:52vh;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background: var(--surface-2);
}
.chat-empty-msg { text-align:center; color:var(--text-light); font-size:0.85rem; margin-top:20px; }
.chat-message {
    max-width:80%;
    padding:9px 13px;
    border-radius: var(--radius);
    background: var(--surface);
    border:1px solid var(--border);
    align-self:flex-start;
    box-shadow: var(--shadow-xs);
}
.chat-message.own {
    align-self:flex-end;
    background: var(--primary-light);
    border-color: var(--primary);
}
.chat-message .chat-sender { font-size:0.75rem; font-weight:700; color:var(--primary-dark); margin-bottom:2px; }
.chat-message .chat-text { font-size:0.88rem; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.chat-message .chat-time { font-size:0.7rem; color:var(--text-light); margin-top:4px; text-align:right; }

#community-chat-composer {
    display:flex;
    gap:8px;
    padding:10px 12px;
    border-top:1.5px solid var(--border);
    background: var(--surface);
}
#community-chat-input {
    flex:1;
    resize:none;
    border:1.5px solid var(--border-strong);
    border-radius:20px;
    padding:9px 14px;
    font-family:inherit;
    font-size:0.88rem;
    outline:none;
    max-height:120px;
    color: var(--text);
}
#community-chat-input:focus { border-color:var(--primary); box-shadow: var(--shadow-glow); }
#community-chat-send-btn {
    padding:9px 18px;
    border:none;
    border-radius:20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff;
    font-weight:700;
    cursor:pointer;
    font-size:0.86rem;
    transition: transform 0.15s, box-shadow 0.15s;
}
#community-chat-send-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow: var(--shadow-sm); }
#community-chat-send-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
#community-chat-status { padding:6px 14px 2px; font-size:0.78rem; color:var(--danger); min-height:16px; }

/* --- Liên hệ admin --- */
.admin-contact-card {
    max-width:420px;
    margin:12px auto 0;
    text-align:center;
    background: var(--surface);
    border:1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding:32px 24px;
    box-shadow: var(--shadow-sm);
}
.admin-avatar {
    width:72px;
    height:72px;
    border-radius:50%;
    margin:0 auto 14px;
    background: linear-gradient(135deg, var(--primary), var(--success));
    color:#fff;
    font-size:1.8rem;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}
.admin-contact-card h4 { font-size:1.1rem; margin-bottom:8px; }
.admin-contact-desc { font-size:0.85rem; color:var(--text-muted); margin-bottom:18px; line-height:1.5; }
.admin-contact-row { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:18px; font-size:0.9rem; flex-wrap:wrap; }
.admin-contact-label { color:var(--text-muted); }
.admin-phone-link { color:var(--primary-dark); font-weight:700; text-decoration:none; }
.admin-phone-link:hover { text-decoration:underline; }
.zalo-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:12px 22px;
    border-radius:24px;
    text-decoration:none;
    background: linear-gradient(135deg,#0068ff,#0091ff);
    color:#fff;
    font-weight:700;
    font-size:0.92rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}
.zalo-btn:hover { transform:translateY(-2px); box-shadow: var(--shadow-md); }

@media (min-width: 600px) {
    #community-chat-messages { max-height:56vh; }
}
/* =====================================================
   TRÒ CHƠI HỨNG TỪ VỰNG
   ===================================================== */
.kid-game-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--surface-2);
    border-radius: 10px;
}
.kid-game-status {
    font-weight: 700;
    color: var(--primary-dark);
}
.kid-game-controls input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.kid-game-keyword {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--surface-2, #f2f2f7);
    color: var(--primary-dark, #2c3e50);
    min-height: 24px;
    transition: background 0.3s, color 0.3s;
}
.kid-game-keyword.kid-game-keyword-hidden {
    background: #1a0000;
    color: #ff5b3b;
    letter-spacing: 0.5px;
}
.kid-game-area {
    position: relative;
    width: 100%;
    height: 450px;
    background: #eef1ff;
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.5s;
}
.kid-game-area.death-mode {
    background: radial-gradient(ellipse at center, #1a0000 0%, #050000 65%, #000 100%);
}
/* ----- "Mắt địa ngục" tự vẽ bằng CSS, không cần ảnh ngoài ----- */
.hell-eyes-decor {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: hellEyesFadeIn 1s ease forwards;
}
.hell-eye {
    width: 64px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #ff5b3b 0%, #c40000 55%, rgba(196,0,0,0) 78%);
    box-shadow: 0 0 25px 12px rgba(255, 20, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hellEyeBlink 2.4s ease-in-out infinite;
}
.hell-eye:nth-child(2) { animation-delay: 0.05s; }
.hell-pupil {
    width: 9px;
    height: 26px;
    border-radius: 50%;
    background: #1a0000;
}
@keyframes hellEyesFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hellEyeBlink {
    0%, 40%, 100% { transform: scaleY(1); }
    46%           { transform: scaleY(0.1); }
    52%           { transform: scaleY(1); }
}
.kid-game-redline {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    height: 4px;
    background: red;
    box-shadow: 0 0 10px red;
    z-index: 10;
}
.kid-game-block {
    position: absolute;
    top: -60px;
    padding: 12px 18px;
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 15;
    animation-name: kidFallDown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes kidFallDown {
    from { top: -60px; }
    to   { top: 460px; }
}
.kid-game-block:active {
    transform: scale(0.95);
}
.death-mode .kid-game-block {
    background: #222;
    color: #fff;
    border-color: #ff0000;
    box-shadow: 0 0 8px #ff0000;
}
.kid-game-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    z-index: 20;
    line-height: 1.5;
}
/* ----- Trạng thái TẠM DỪNG (dừng thủ công hoặc tự động khi rời trò chơi) ----- */
.kid-game-area.game-paused::after {
    content: "⏸ ĐÃ TẠM DỪNG — bấm nút Tiếp tục để chơi tiếp";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    z-index: 18;
    letter-spacing: 0.3px;
}
#kid-game-pause.is-paused {
    background: #ff9f1c;
    color: #fff;
    border-color: #ff9f1c;
}
/* ----- Bảng tổng kết điểm khi hoàn thành 20 lượt chơi ----- */
.kid-game-result-panel {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    overflow-y: auto;
    text-align: center;
}
.kid-result-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--primary-dark, #2c3e50);
    margin: 0 0 6px;
}
.kid-result-score {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent, #6d5bff);
    margin-bottom: 14px;
}
.kid-result-table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
}
.kid-result-table th,
.kid-result-table td {
    border: 1px solid var(--border, #e2e2e6);
    padding: 6px 8px;
    text-align: center;
}
.kid-result-table th {
    background: var(--surface-2, #f2f2f7);
    position: sticky;
    top: 0;
}
.kid-result-row-correct td { background: rgba(47, 181, 109, 0.12); }
.kid-result-row-wrong td { background: rgba(255, 93, 93, 0.14); }
.kid-result-close-btn { margin-top: 16px; }
/* =====================================================
   TRA TỪ NHANH (AI) KHI CHẠM VÀO TỪ LÚC LUYỆN DỊCH
   + TỪ VỰNG CÁ NHÂN CỦA HỌC VIÊN ("Từ vựng của tôi")
   ===================================================== */

/* Từ có thể chạm vào trong câu đang luyện dịch / lịch sử các câu đã dịch */
.tappable-word {
    cursor: pointer;
    border-bottom: 1.5px dashed var(--primary);
    border-radius: 3px;
    padding: 0 1px;
    transition: background 0.15s, color 0.15s;
}
.tappable-word:hover,
.tappable-word:active {
    background: var(--primary-light);
    color: var(--primary-dark);
}
/* Từ đã có trong danh sách "Từ vựng của tôi" — tô sáng để học viên nhận ra ngay */
.tappable-word.known-word {
    border-bottom-style: solid;
    border-bottom-color: var(--success);
    background: var(--success-light);
    color: #065f46;
}
/* [MỚI] Nếu từ đó đã "đã học" (kiểm đúng liên tiếp 3 lần trong bài kiểm tra hàng tuần) ->
   đổi sang tô VÀNG khi gặp lại trong bài đọc, để phân biệt với từ mới lưu/còn đang học (xanh lá). */
.tappable-word.known-word.word-learned {
    border-bottom-color: #d97706;
    background: #fef3c7;
    color: #92400e;
}

/* --- Popup hiện nghĩa của từ khi chạm vào --- */
.word-lookup-popup {
    position: fixed;
    inset: 0;
    background: rgba(30, 42, 69, 0.45);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.word-lookup-inner {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 22px 20px 26px;
    box-shadow: var(--shadow-md);
    animation: wordLookupSlideUp 0.2s ease-out;
}
@keyframes wordLookupSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.word-lookup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.word-lookup-close:hover { background: var(--border); color: var(--text); }
.word-lookup-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 34px;
}
.word-lookup-word {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 0;
}
.word-lookup-speak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.word-lookup-speak-btn:hover { background: var(--primary); color: #fff; }
.word-lookup-speak-btn:active { transform: scale(0.88); }
.word-lookup-phonetic {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.word-lookup-phonetic:empty { display: none; margin-bottom: 0; }
.word-lookup-loading,
.word-lookup-error {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 10px 0;
}
.word-lookup-error { color: var(--danger-dark); }
/* [MỚI] Hàng micro chấm phát âm trong khung tra từ — chỉ hiện khi bắt buộc đọc đúng mới
   đóng được (Flashcard "Cho bé" / THCS-THPT), ẩn ở mọi nơi khác (mặc định display:none). */
.word-lookup-pronounce-row{display:none;flex-direction:column;align-items:center;gap:6px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border, #e5e7eb);}
.word-lookup-pronounce-row .kf-mic-btn{padding:9px 18px;font-size:13px;}
.word-lookup-pronounce-status{font-size:12.5px;text-align:center;color:var(--text-muted);min-height:16px;}
.word-lookup-pronounce-status.word-lookup-pronounce-correct{color:var(--success-dark);font-weight:700;}
.word-lookup-pronounce-status.word-lookup-pronounce-wrong{color:var(--danger-dark);font-weight:700;}
.word-lookup-pronounce-status.word-lookup-pronounce-listening{color:var(--danger-dark);font-weight:700;}
.word-lookup-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: 1.5px solid var(--primary);
    border-radius: 20px;
    padding: 3px 12px;
    margin-bottom: 10px;
}
.word-lookup-meaning {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.5;
}
.word-lookup-usage {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 10px;
}
.word-lookup-usage strong { color: var(--text); }
.word-lookup-example {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.86rem;
    line-height: 1.6;
    margin-bottom: 10px;
}
.word-lookup-example-en { color: var(--text); font-weight: 600; }
.word-lookup-example-vi { color: var(--text-muted); }
.word-lookup-save-status {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--success-dark);
    margin-top: 6px;
}
.word-lookup-save-status-error { color: var(--danger-dark); }

/* Khi từ đã có sẵn trong "Từ vựng của tôi" — chỉ hiện lại, không tra/lưu thêm */
.word-lookup-known-note {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
}
.word-lookup-known-entry {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.word-lookup-known-entry:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.word-lookup-relookup-btn {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 14px;
    background: var(--surface-2);
    color: var(--primary-dark);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.word-lookup-relookup-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* --- Toast thông báo nhỏ (vd: đã thêm từ vào từ vựng) --- */
.app-toast-container {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 2100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: 100%;
    padding: 0 16px;
}
.app-toast {
    max-width: 360px;
    background: var(--text);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s, transform 0.25s;
    text-align: center;
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast-success { background: linear-gradient(135deg, var(--success), var(--success-dark)); }
.app-toast-info { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }

/* --- Danh sách "Từ vựng của tôi" --- */
.myvocab-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}
.myvocab-item {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}
.myvocab-item-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.myvocab-word {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-dark);
}
.myvocab-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: 1.5px solid var(--primary);
    border-radius: 20px;
    padding: 2px 10px;
}
.myvocab-delete-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    opacity: 0.6;
    padding: 4px;
    border-radius: 6px;
}
.myvocab-delete-btn:hover { opacity: 1; background: #fee2e2; }
.myvocab-meaning {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.myvocab-usage {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 6px;
}
.myvocab-usage strong { color: var(--text); }
.myvocab-example {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 6px;
}
.myvocab-source {
    font-size: 0.74rem;
    color: var(--text-light);
    font-style: italic;
}

/* [MỚI] Từ đã "đã học" (kiểm đúng liên tiếp 3 lần trong bài kiểm tra hàng tuần) -> nền xanh
   lá trong danh sách "Kho từ vựng của tôi", cùng tông với các trạng thái "hoàn thành" khác
   trong hệ thống (ipa-symbol.completed, grammar-folder-done...). */
.myvocab-item.myvocab-item-learned {
    background: var(--success-light);
    border-color: var(--success);
    cursor: pointer;
}
.myvocab-item.myvocab-item-learned:hover { border-color: var(--success-dark); }
.myvocab-review-hint {
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #065f46;
    opacity: 0.75;
}
.myvocab-learned-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--success);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* [MỚI - Cloudflare Workers AI] Từ CHƯA "đã học" -> bấm vào để chủ động luyện đọc thêm
   (mở lại hộp thoại tra từ, xem openMyVocabPracticePopup trong scriptphonetics.js) */
.myvocab-item:not(.myvocab-item-learned) { cursor: pointer; }
.myvocab-item:not(.myvocab-item-learned):hover { border-color: var(--primary); }
.myvocab-practice-hint {
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-dark);
    opacity: 0.75;
}
.myvocab-pron-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: 1.5px solid var(--primary);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* [MỚI - Cloudflare Workers AI] Phiên âm IPA hiện cạnh từ trong "Kho từ vựng của tôi" */
.myvocab-phonetic {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* [MỚI - Cloudflare Workers AI] Từ CHƯA từng được chấm phát âm (dù đã học hay chưa) -> badge
   nổi bật + dòng nhắc màu đỏ, để học viên biết đây là việc bắt buộc phải làm trước */
.myvocab-pron-missing-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--danger-dark);
    background: #fee2e2;
    border: 1.5px solid var(--danger-dark);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}
.myvocab-practice-hint-required {
    color: var(--danger-dark);
    opacity: 1;
}

/* [MỚI - Cloudflare Workers AI] Bước đọc bắt buộc thêm trong bài kiểm tra từ vựng hàng tuần */
.vocab-weekly-pron-step {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vocab-weekly-pron-instruction {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* [MỚI] Banner báo có bài kiểm tra từ vựng hàng tuần, trong panel "Kho từ vựng của tôi" */
.vocab-weekly-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--primary-light), #fff);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 14px 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-dark);
}
.vocab-weekly-start-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.vocab-weekly-start-btn:hover { opacity: 0.88; }

/* [MỚI] Overlay làm bài kiểm tra từ vựng hàng tuần */
.vocab-weekly-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 42, 69, 0.5);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.vocab-weekly-modal {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.25));
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 0 0 20px;
}
.vocab-weekly-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1.5px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 700;
    color: var(--primary-dark);
}
.vocab-weekly-close-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 6px;
}
.vocab-weekly-close-btn:hover { background: var(--surface-2); }
.vocab-weekly-question-body { padding: 18px; }
.vocab-weekly-instruction {
    font-size: 0.86rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 10px;
}
.vocab-weekly-sentence {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.6;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.vocab-weekly-word {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-dark);
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
}
.vocab-weekly-meaning-hint {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.vocab-weekly-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 0.96rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}
.vocab-weekly-input:focus { outline: none; border-color: var(--primary); }
.vocab-weekly-actions { display: flex; }
.vocab-weekly-submit-btn, .vocab-weekly-next-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
}
.vocab-weekly-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.vocab-weekly-next-btn { margin-top: 12px; }
.vocab-weekly-feedback {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
}
.vocab-weekly-feedback-correct { background: var(--success-light); color: #065f46; border: 1.5px solid var(--success); }
.vocab-weekly-feedback-wrong   { background: #fee2e2; color: #991b1b; border: 1.5px solid #ef4444; }
.vocab-weekly-summary { text-align: center; padding: 10px 0; }
.vocab-weekly-summary-icon { font-size: 2.6rem; margin-bottom: 8px; }
.vocab-weekly-summary h3 { margin: 0 0 10px; color: var(--primary-dark); }
.vocab-weekly-summary p { margin: 4px 0; color: var(--text-muted); font-size: 0.92rem; }
.vocab-weekly-summary .vocab-weekly-submit-btn { margin-top: 14px; }

@media (min-width: 600px) {
    .word-lookup-popup { align-items: center; }
    .word-lookup-inner {
        border-radius: var(--radius-lg);
        max-width: 420px;
        animation: wordLookupFadeIn 0.18s ease-out;
    }
    @keyframes wordLookupFadeIn {
        from { transform: scale(0.96); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
    }
}
/* ===== [MỚI] HỘP THOẠI "HOÀN THÀNH CHỦ ĐỀ" (Cho bé) ===== */
.kid-complete-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.6);z-index:9999;display:flex;justify-content:center;align-items:center;padding:16px;}
.kid-complete-modal-box{background:#fff;border-radius:18px;padding:32px 28px;max-width:420px;width:100%;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.35);animation:kidCompletePop .35s ease;}
@keyframes kidCompletePop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
.kid-complete-emoji{font-size:56px;line-height:1;margin-bottom:10px;}
.kid-complete-modal-box h3{margin:0 0 10px;font-size:22px;color:var(--success-dark,#059669);}
.kid-complete-modal-box p{margin:0 0 22px;color:#555;font-size:14.5px;line-height:1.55;}
.kid-complete-modal-box .kid-btn{width:100%;}

/* ===== Khung NHẮC TIẾN ĐỘ (Cho bé) — hiện giữa màn hình, phải bấm ✕ mới đóng ===== */
.kid-hint-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.55);z-index:9998;display:flex;justify-content:center;align-items:center;padding:16px;}
.kid-hint-modal-box{position:relative;background:#fff;border-radius:18px;padding:36px 26px 28px;max-width:400px;width:100%;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.35);animation:kidCompletePop .35s ease;}
.kid-hint-emoji{font-size:38px;line-height:1;margin-bottom:8px;}
.kid-hint-modal-box p{margin:0;color:#333;font-size:15px;line-height:1.6;}
.kid-hint-modal-box p b{color:var(--primary-dark,#3a56d4);}
.kid-hint-modal-box .kid-hint-section-text{display:block;}
.kid-hint-modal-box .kid-hint-progress-text{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border,#e2e8f8);font-size:13px;color:#555;opacity:.85;}
.kid-hint-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;border-radius:50%;background:var(--surface-2,#f1f3fb);color:#555;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.kid-hint-close:hover{background:var(--border,#e2e8f8);color:#111;}
/* =====================================================
   LỒNG TIẾNG (tab Giải trí)
   ===================================================== */
.dub-video-wrapper { margin-bottom: 16px; }

/* Panel ẩn/hiện bằng CLASS thay vì inline style từ JS — trước đây JS set trực tiếp
   phần tử.style.display khiến quy tắc display:grid trong media query bên dưới luôn bị
   inline style đè mất (inline style luôn thắng bất kể độ đặc hiệu của stylesheet),
   khiến khung video không bao giờ được co lại theo cột mà tràn hết chiều ngang. */
#dub-panel { display: none; }
#dub-panel.dub-panel-open { display: block; }

/* #dub-detail-view (khung chi tiết 1 câu chuyện) CŨNG phải ẩn/hiện bằng class vì cùng
   lý do trên — JS bật/tắt bằng classList, KHÔNG dùng .style.display, để quy tắc
   display:grid bên dưới không bị inline style đè mất. */
#dub-detail-view { display: none; }
#dub-detail-view.dub-detail-open { display: block; }

/* ---- Bố cục 2 cột cho tablet/laptop/PC: video bên phải, phần luyện tập bên trái ---- */
@media (min-width: 900px) {
    #dub-detail-view.dub-detail-open {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
        grid-template-areas:
            "header header"
            "admin  admin"
            "left   right";
        column-gap: 26px;
        row-gap: 4px;
        align-items: start;
    }
    #dub-detail-view > .grammar-panel-header { grid-area: header; }
    #dub-detail-view > .dub-admin-bar { grid-area: admin; }
    #dub-detail-view > .dub-video-wrapper {
        grid-area: right;
        position: sticky;
        top: 16px;
        margin-bottom: 0;
    }
    #dub-detail-view > #dub-left-col { grid-area: left; min-width: 0; }
}

/* ---- Trạng thái tự động: "video đọc thoại gốc" rồi "ghi âm tự canh giờ" ---- */
.dub-phase-box {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
}
.dub-phase-label { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.dub-phase-track {
    height: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.dub-phase-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transition: width 0.1s linear;
}
.dub-phase-fill.rec { background: linear-gradient(90deg, var(--danger), var(--danger-dark)); }
.dub-phase-countdown {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.dub-auto-hint { font-size: 0.74rem; color: var(--text-light); text-align: center; margin: 0 0 14px; line-height: 1.5; }

.dub-empty-msg,
.dub-start-screen {
    text-align: center;
    padding: 22px 16px;
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.9rem;
}
.dub-start-screen p { margin-bottom: 14px; line-height: 1.6; }
.dub-resume-info {
    background: var(--primary-light);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 14px;
    text-align: left;
}
.dub-resume-info p { margin: 0 0 10px; line-height: 1.5; font-size: 0.86rem; }
.dub-resume-info p:last-child { margin-bottom: 0; }

/* --- Khung quản trị giảng viên --- */
.dub-admin-bar {
    background: var(--primary-light);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 18px;
}
.dub-admin-title { font-size: 0.92rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 12px; }
.dub-field { margin-bottom: 16px; }
.dub-field:last-child { margin-bottom: 0; }
.dub-admin-inline-row { display: flex; gap: 8px; }
.dub-admin-import-textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    font-family: 'Courier New', monospace;
    font-size: 0.76rem;
    line-height: 1.6;
    white-space: pre;
}
.dub-admin-progress-track {
    height: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}
.dub-admin-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transition: width 0.2s ease;
}
.dub-admin-status {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 6px;
    min-height: 14px;
}
.dub-admin-row {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin-bottom: 8px;
}
.dub-admin-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.dub-admin-row-time {
    width: 84px;
    flex-shrink: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.82rem;
    font-family: 'Courier New', monospace;
    text-align: center;
    background: var(--surface);
    color: var(--text);
}
.dub-admin-row-time:focus { outline: none; border-color: var(--primary); }
.dub-admin-row-text {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.84rem;
    background: var(--surface);
    color: var(--text);
}
.dub-admin-row-text:focus { outline: none; border-color: var(--primary); }
.dub-admin-row-translation {
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.8rem;
    font-style: italic;
    background: var(--surface);
    color: var(--text-muted);
}
.dub-admin-row-translation:focus { outline: none; border-color: var(--primary); }
.dub-admin-row-getcur,
.dub-admin-row-del {
    flex-shrink: 0;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}
.dub-admin-row-getcur:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.dub-admin-row-del:hover { border-color: var(--danger); color: var(--danger-dark); background: #fef2f2; }

/* --- Trạng thái tally (đang phát / sẵn sàng / đang ghi) --- */
.dub-tally-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.dub-tally-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--text-light);
    flex-shrink: 0;
}
.dub-tally-dot.standby { background: var(--warning); }
.dub-tally-dot.rec { background: var(--danger); animation: dubPulse 1.1s ease-in-out infinite; }
.dub-tally-dot.done { background: var(--success); }
@keyframes dubPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}

.dub-progress-track {
    height: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}
.dub-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transition: width 0.25s ease;
}

.dub-cue-line {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
}
.dub-cue-idx {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.dub-cue-text { font-size: 1.08rem; font-weight: 600; color: var(--text); line-height: 1.5; }
.dub-cue-translation { margin-top: 8px; font-size: 0.88rem; font-style: italic; color: var(--text-muted); line-height: 1.5; }

.dub-replay-btn {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
}
.dub-replay-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }
.dub-replay-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.dub-review-box {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}
.dub-review-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.dub-review-box audio { width: 100%; margin-bottom: 12px; }
.dub-review-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dub-review-hint { font-size: 0.74rem; color: var(--text-light); margin: 10px 0 0; }

.dub-preview-offer, .dub-preview-playing {
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 14px;
    text-align: center;
}
.dub-preview-offer p, .dub-preview-playing p { font-size: 0.86rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.55; }

.dub-record-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.dub-record-btn:hover { transform: translateY(-2px); }
.dub-record-core { width: 13px; height: 13px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dub-record-btn.idle {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 3px 12px var(--primary-glow);
}
.dub-record-btn.recording {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    color: #fff;
    box-shadow: 0 3px 14px rgba(239,68,68,0.35);
}
.dub-record-btn.recording .dub-record-core { border-radius: 3px; }

.dub-rec-list {
    list-style: none;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.dub-rec-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 0.8rem;
}
.dub-rec-list .dub-rec-time { font-family: 'Courier New', monospace; color: var(--primary-dark); font-weight: 700; flex-shrink: 0; }
.dub-rec-list .dub-rec-text { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dub-rec-list .dub-rec-translation { flex-basis: 100%; font-style: italic; font-size: 0.76rem; color: var(--text-light); }
.dub-rec-list audio { height: 30px; width: 130px; flex-shrink: 0; }
.dub-rec-redo-btn {
    flex-shrink: 0;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    padding: 5px 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}
.dub-rec-redo-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* --- Màn hình kết thúc --- */
.dub-finish-screen { text-align: center; }
.dub-finish-screen h4 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.dub-finish-choice { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.dub-finish-note { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; text-align: left; margin: 14px 0; }
.dub-save-options { text-align: left; }

.dub-export-option {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    background: var(--surface);
}
.dub-export-option h5 { font-size: 0.92rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.dub-export-option p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }

.dub-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}
.dub-tag-stable { background: var(--success-light); color: var(--success-dark); }
.dub-tag-exp { background: var(--warning-light); color: #92400e; }

.dub-export-status { font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; min-height: 16px; text-align: center; }

@media (min-width: 600px) {
    .dub-admin-row-text { font-size: 0.86rem; }
}

/* =====================================================================
   PODCAST — HỌC TỪ VỰNG BẰNG DICTATION QUA PODCAST (mục Từ vựng)
   ===================================================================== */

.pod-audio-box {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.pod-audio-box audio { width: 100%; display: block; margin-bottom: 10px; }
.pod-audio-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pod-audio-hint { font-size: 0.78rem; color: var(--text-muted); }

.pod-stage-switch {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.pod-stage-btn {
    flex: 1;
    padding: 10px 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    line-height: 1.5;
    transition: all 0.2s;
}
.pod-stage-btn small { font-weight: 500; font-size: 0.72rem; }
.pod-stage-btn.active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}
.pod-stage-btn.pod-stage-locked { opacity: 0.6; cursor: not-allowed; }

.pod-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.pod-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}
.pod-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transition: width 0.3s;
}
.pod-progress-text { font-size: 0.76rem; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

.pod-segment-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pod-segment-idx { font-size: 0.84rem; font-weight: 700; color: var(--text); }

.pod-segment-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    margin-bottom: 14px;
}
.pod-sentence {
    font-size: 1.05rem;
    line-height: 2.1;
    color: var(--text);
    margin-bottom: 16px;
}

/* [MỚI] Mỗi "đoạn script" hiển thị cho học viên có thể gồm nhiều dòng gốc (do giảng viên nhập
   riêng từng dòng); mỗi dòng xuống hàng riêng và có kí hiệu 🇻🇳 ở cuối để xổ xuống đúng bản dịch
   tiếng Việt của dòng đó, thay cho 1 nút "Xem bản dịch" chung cho cả đoạn như trước. */
.pod-script-line { margin-bottom: 6px; }
.pod-script-line:last-child { margin-bottom: 0; }
.pod-line-text { }
/* [MỚI] Tên người nói (tuỳ chọn) đứng trước mỗi câu — chỉ để hiển thị, không phải chỗ trống. */
.pod-line-speaker { font-weight: 800; color: var(--primary-dark); }
.pod-line-vi-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--surface-2);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.15s;
}
.pod-line-vi-toggle:hover { border-color: var(--primary); background: var(--primary-light); }
.pod-line-vi-toggle.is-active { background: var(--primary); border-color: var(--primary-dark); }
.pod-line-vi {
    font-size: 0.88rem;
    font-style: italic;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin: 6px 0 10px;
    line-height: 1.6;
}

/* Ô trống (Giai đoạn 1: span chờ đặt từ; Giai đoạn 2: input tự gõ) */
.pod-blank {
    display: inline-block;
    min-width: 46px;
    padding: 1px 8px;
    margin: 0 2px;
    border-radius: 8px;
    border: 1.5px dashed var(--border-strong);
    background: var(--surface-2);
    color: var(--text-light);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.pod-blank-filled { border-style: solid; color: var(--text); background: var(--primary-light); border-color: var(--primary); }
.pod-blank-correct { border-style: solid; background: var(--success-light); border-color: var(--success); color: var(--success-dark); cursor: default; }
.pod-blank-wrong { border-style: solid; background: #fee2e2; border-color: var(--danger); color: var(--danger-dark); animation: podShake 0.3s; }
.pod-blank-input {
    width: 70px;
    padding: 2px 6px;
    margin: 0 2px;
    border-radius: 8px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface-2);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--text);
}
.pod-blank-input:focus { outline: none; border-color: var(--primary); background: var(--primary-light); }
.pod-blank-input.pod-blank-wrong { border-color: var(--danger); background: #fee2e2; }
@keyframes podShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.pod-wordbox {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    margin-bottom: 14px;
    background: var(--surface-2);
    border-radius: var(--radius);
    border: 1px dashed var(--border-strong);
    min-height: 44px;
}
.pod-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
}
.pod-chip:hover { border-color: var(--primary); background: var(--primary-light); }
.pod-chip-selected { background: var(--primary); border-color: var(--primary-dark); color: #fff; }
.pod-wordbox-empty { font-size: 0.82rem; color: var(--text-light); font-style: italic; }

.pod-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

.pod-feedback { font-size: 0.86rem; font-weight: 600; min-height: 20px; }
.pod-feedback.is-correct { color: var(--success-dark); }
.pod-feedback.is-wrong { color: var(--danger-dark); }

.pod-quiz-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
}
.pod-quiz-box h4 { font-size: 0.9rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 10px; }
.pod-quiz-question { font-size: 0.94rem; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.pod-quiz-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
}
.pod-quiz-opt:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); }
.pod-quiz-opt:disabled { cursor: default; }
.pod-quiz-opt.is-correct { border-color: var(--success); background: var(--success-light); color: var(--success-dark); }
.pod-quiz-opt.is-wrong { border-color: var(--danger); background: #fee2e2; color: var(--danger-dark); }
.pod-quiz-feedback { font-size: 0.84rem; font-weight: 600; margin-top: 6px; }
.pod-quiz-feedback.is-correct { color: var(--success-dark); }
.pod-quiz-feedback.is-wrong { color: var(--danger-dark); }

/* Khung soạn đoạn (giảng viên) */
.pod-admin-segment {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--surface-2);
}
.pod-admin-segment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.88rem;
    color: var(--text);
}
.pod-admin-seg-en, .pod-admin-seg-vi { min-height: 70px; margin-bottom: 8px; }
.pod-admin-seg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pod-admin-seg-meta label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.pod-admin-seg-start { width: 90px; flex: none; }
.pod-admin-seg-speaker { width: 140px; flex: none; }
.pod-admin-quiz { margin-top: 8px; }
.pod-admin-quiz summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 8px; }
.pod-admin-quiz-opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pod-admin-quiz-opt-row input[type="text"] { flex: 1; }

/* =====================================================================
   BÀI KIỂM TRA RIÊNG (CUSTOM TEST MODULE)
   ===================================================================== */

#ctest-panel { margin-top: 18px; }

.ctest-loading-msg, .ctest-empty-msg {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 18px 4px;
}

/* ---- Danh sách bài kiểm tra ---- */
.ctest-list-container { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }

.ctest-test-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}

.ctest-test-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
}

.ctest-test-title { font-weight: 800; color: var(--text); font-size: 1rem; }
.ctest-test-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }

.ctest-test-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ctest-status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.ctest-status-not-started { background: var(--border); color: var(--text-muted); }
.ctest-status-in-progress { background: var(--warning-light); color: #92400e; }
.ctest-status-submitted   { background: var(--success-light); color: var(--success-dark); }
.ctest-status-draft       { background: var(--primary-light); color: var(--primary-dark); }
/* [MỚI] Huy hiệu điểm số có thể bấm vào để giảng viên xem & chấm lại bài đã nộp */
.ctest-status-badge-clickable {
    cursor: pointer;
    border: none;
    font-family: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    transition: filter 0.15s, transform 0.15s;
}
.ctest-status-badge-clickable:hover { filter: brightness(0.95); transform: translateY(-1px); }

.ctest-student-status-list {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ctest-student-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.84rem;
    flex-wrap: wrap;
}
.ctest-student-email { color: var(--text); font-weight: 600; }
.ctest-retry-btn {
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    cursor: pointer;
}
.ctest-retry-btn:hover { background: var(--primary-light); border-color: var(--primary); }

/* ---- Khung soạn bài (giảng viên) ---- */
.ctest-editor-field { margin-bottom: 16px; }
.ctest-editor-field .news-quiz-edit-label { display: block; margin-bottom: 6px; }
.ctest-duration-input { max-width: 180px; }

.ctest-save-status { font-size: 0.8rem; color: var(--text-muted); margin-right: 12px; }
.ctest-editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ---- Trình soạn thảo văn bản đơn giản (đậm / gạch chân / nghiêng) ---- */
.ctest-rich-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}
.ctest-rich-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.ctest-rich-btn {
    width: 28px;
    height: 26px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}
.ctest-rich-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.ctest-rich-hint { font-size: 0.72rem; color: var(--text-muted); margin-left: 6px; }
.ctest-rich-editable {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 0.92rem;
    line-height: 1.5;
    outline: none;
    color: var(--text);
}
.ctest-rich-editable:empty:before {
    content: attr(data-placeholder);
    color: var(--text-light);
}
.ctest-rich-editable.ctest-rich-small { min-height: 22px; padding: 7px 10px; font-size: 0.88rem; }

/* ---- Phần (section) trong khung soạn bài ---- */
.ctest-section-card {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
    background: var(--surface-2);
}
.ctest-section-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ctest-section-title-input {
    flex: 1;
    min-width: 160px;
    font-weight: 800;
    font-size: 0.98rem;
}
.ctest-section-remove-btn, .ctest-qcard-remove-btn, .ctest-row-remove-btn {
    border: 1px solid var(--danger);
    color: var(--danger-dark);
    background: #fff;
    border-radius: 8px;
    padding: 5px 9px;
    cursor: pointer;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.ctest-section-remove-btn:hover, .ctest-qcard-remove-btn:hover, .ctest-row-remove-btn:hover { background: #fee2e2; }

/* [MỚI] Nút "▲ / ▼" đảo thứ tự — dùng chung style nhẹ nhàng hơn nút xoá (không phải
   thao tác nguy hiểm), cho cả cấp "phần lớn" và cấp "từng câu hỏi". */
.ctest-section-move-up-btn, .ctest-section-move-down-btn,
.ctest-qcard-move-up-btn, .ctest-qcard-move-down-btn {
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    background: var(--surface);
    border-radius: 8px;
    padding: 5px 9px;
    cursor: pointer;
    font-size: 0.78rem;
    flex-shrink: 0;
    line-height: 1;
}
.ctest-section-move-up-btn:hover, .ctest-section-move-down-btn:hover,
.ctest-qcard-move-up-btn:hover, .ctest-qcard-move-down-btn:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary);
}

.ctest-question-list, .ctest-subq-list { display: flex; flex-direction: column; gap: 12px; }
.ctest-subq-list { margin-top: 10px; padding: 10px; border-left: 3px solid var(--primary-light); background: var(--surface); border-radius: 8px; }

.ctest-add-question-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.ctest-add-question-row .ctest-type-btn {
    font-size: 0.76rem;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    color: var(--text-muted);
}
.ctest-add-question-row .ctest-type-btn:hover { background: var(--primary-light); color: var(--primary-dark); border-style: solid; }

.ctest-qcard {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 12px;
}
.ctest-qcard-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.ctest-qcard-type-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary-dark);
    background: var(--primary-light);
    padding: 2px 9px;
    border-radius: 20px;
    margin-right: auto;
}

.ctest-image-field { margin-top: 8px; }
.ctest-image-field input { width: 100%; }
.ctest-image-preview { max-width: 220px; max-height: 140px; border-radius: 8px; margin-top: 6px; display: block; }
.ctest-image-scale-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ctest-image-scale-label { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.ctest-image-scale-slider { flex: 1; min-width: 0; }
.ctest-image-scale-value { font-size: 0.8rem; color: var(--text-muted); min-width: 52px; text-align: right; }
.ctest-image-scale-reset {
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.ctest-image-scale-reset:hover { background: var(--primary-light); color: var(--primary-dark); }

.ctest-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ctest-option-row .ctest-rich-wrap { flex: 1; }
.ctest-add-option-btn, .ctest-add-row-btn {
    margin-top: 4px;
    font-size: 0.78rem;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    color: var(--text-muted);
}
.ctest-add-option-btn:hover, .ctest-add-row-btn:hover { background: var(--primary-light); color: var(--primary-dark); }

.ctest-match-cols-editor { display: flex; gap: 14px; flex-wrap: wrap; }
.ctest-match-col-editor { flex: 1; min-width: 220px; }
.ctest-match-col-editor h5 { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.ctest-match-item-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ctest-match-item-row input { flex: 1; }
.ctest-match-pair-select { margin-top: 10px; }
.ctest-match-pair-row { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; margin-bottom: 4px; }
.ctest-match-pair-row select { flex: 1; }

/* ---- Ô trống trong câu điền khuyết / chọn từ trong khung ---- */
.ctest-blank-render { display: inline; line-height: 2.1; }
.ctest-blank-preview {
    display: inline-block;
    background: var(--warning-light);
    color: #92400e;
    padding: 1px 8px;
    border-radius: 6px;
    font-weight: 700;
    margin: 0 2px;
}
.ctest-blank-input, .ctest-blank-select {
    display: inline-block;
    min-width: 90px;
    border: none;
    border-bottom: 2px solid var(--primary);
    background: var(--primary-light);
    padding: 2px 6px;
    margin: 0 3px;
    font-size: 0.95rem;
    text-align: center;
    border-radius: 4px;
}
.ctest-blank-input:focus, .ctest-blank-select:focus { outline: none; background: #fff; }
.ctest-blank-result {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    margin: 0 2px;
    font-weight: 700;
}
.ctest-blank-result.ctest-ok { background: var(--success-light); color: var(--success-dark); }
.ctest-blank-result.ctest-wrong { background: #fee2e2; color: var(--danger-dark); }

.ctest-wordbank-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    margin-bottom: 12px;
}
.ctest-wordbank-word {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 8px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.86rem;
}

/* ---- Khu vực học viên làm bài ---- */
.ctest-take-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 10px;
}
.ctest-take-timer {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--primary-dark);
    background: var(--primary-light);
    padding: 6px 14px;
    border-radius: 20px;
    /* [MOI] Chi rieng dong ho (khong dinh ca tieu de/nut Quay lai) duoc
       ghim co dinh tren man hinh khi cuon, de hoc vien luon thay duoc
       thoi gian con lai du dang cuon o cau nao. Dung position:fixed
       (khong phai sticky) vi khung cha .ctest-take-header rat thap,
       neu dung sticky thi dong ho se het dinh ngay sau vai chuc px
       dau tien cuon qua. */
    position: fixed;
    top: calc(var(--total-top) + 10px);
    right: 14px;
    z-index: 500;
    box-shadow: 0 3px 12px rgba(30,42,69,0.18);
}
.ctest-take-timer.ctest-timer-low { color: var(--danger-dark); background: #fee2e2; animation: ctestPulse 1s infinite; }
@keyframes ctestPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.ctest-take-notes {
    background: var(--warning-light);
    color: #92400e;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.88rem;
    margin-bottom: 14px;
}

.ctest-violation-banner {
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 14px;
    background: #fee2e2;
    color: var(--danger-dark);
    border: 1px solid var(--danger);
}

.ctest-take-section { margin-bottom: 26px; }
.ctest-take-section-title { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.ctest-take-instructions {
    font-size: 0.86rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border-left: 3px solid var(--primary);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
}
/* Đoạn văn đọc hiểu (reading passage) dùng chung khung với .ctest-take-instructions
   nhưng cần chữ to, rõ, dễ đọc — không nhỏ/mờ như một dòng hướng dẫn ngắn. */
.ctest-take-passage {
    font-size: 1rem;
    color: var(--text);
    line-height: 1.7;
    padding: 14px 16px;
}

.ctest-take-qblock {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 14px;
    margin-bottom: 14px;
}
.ctest-take-qnum { font-weight: 800; color: var(--primary-dark); margin-right: 4px; }
.ctest-take-qprompt { margin-bottom: 10px; line-height: 1.6; }
.ctest-take-image { max-width: 100%; max-height: 260px; border-radius: 10px; margin: 8px 0; display: block; }

.ctest-take-options { display: flex; flex-direction: column; gap: 8px; }
.ctest-take-option-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.ctest-take-option-label:hover { background: var(--primary-light); }
.ctest-take-option-label input { margin-top: 3px; }

/* [MỚI] Dạng "Trắc nghiệm nhiều đáp án đúng" (checkbox) trong Bài kiểm tra riêng */
.ctest-multi-editor-hint {
    font-size: 0.82rem;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
}
.ctest-multi-take-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    margin: -4px 0 10px;
}

.ctest-reorder-strip, .ctest-reorder-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 42px;
    padding: 8px;
    border-radius: 8px;
}
.ctest-reorder-strip { border: 2px solid var(--primary); background: var(--primary-light); margin-bottom: 10px; }
.ctest-reorder-pool { border: 2px dashed var(--border-strong); background: var(--surface-2); }
.ctest-reorder-chip {
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    user-select: none;
}
.ctest-reorder-chip:hover { border-color: var(--primary); }

.ctest-match-take-wrap { display: flex; gap: 18px; flex-wrap: wrap; }
.ctest-match-take-col { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.ctest-match-take-item {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background: #fff;
    font-weight: 600;
    user-select: none;
    position: relative;
}
.ctest-match-take-item.ctest-match-selected { border-color: var(--primary); background: var(--primary-light); }
.ctest-match-take-item.ctest-match-paired { border-color: var(--success); }
.ctest-match-badge {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    background: var(--success);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    padding: 1px 5px;
    margin-right: 6px;
}

.ctest-submit-btn { width: 100%; margin-top: 10px; font-size: 1rem; padding: 12px; }

/* Chống bôi đen/copy trong lúc làm bài */
.ctest-no-select, .ctest-no-select * {
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Trang kết quả ---- */
.ctest-result-score {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: var(--radius);
    padding: 16px;
    margin: 10px 0 20px;
}
.ctest-result-item-wrong { color: var(--danger-dark); font-weight: 700; }
.ctest-result-correct-tag { color: var(--success-dark); font-weight: 700; margin-left: 6px; }

/* [MỚI] Giảng viên xem & CHẤM LẠI bài đã nộp ============================================ */
.ctest-teacher-grading-banner {
    background: var(--warning-light);
    color: #92400e;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid #f5d59a;
}
.ctest-q-excluded { opacity: 0.55; }

.ctest-override-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.ctest-override-state { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); margin-right: 4px; }
.ctest-override-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ctest-ov-btn {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ctest-ov-btn:hover { background: var(--surface-2); }
.ctest-ov-btn.ctest-ov-active-correct { background: var(--success-light); border-color: var(--success); color: var(--success-dark); }
.ctest-ov-btn.ctest-ov-active-wrong { background: #fee2e2; border-color: var(--danger); color: var(--danger-dark); }
.ctest-ov-btn.ctest-ov-active-exclude { background: var(--border); border-color: var(--text-muted); color: var(--text); }
.ctest-ov-btn.ctest-ov-reset { border-style: dashed; color: var(--text-muted); }

/* Bản gọn (icon) dùng ngay bên trong 1 chỗ trống / 1 cặp nối từ */
.ctest-override-compact { display: inline-flex; margin: 0 0 0 6px; padding: 0; border: none; vertical-align: middle; }
.ctest-override-compact .ctest-override-btns { gap: 2px; }
.ctest-override-compact .ctest-ov-btn { padding: 1px 6px; font-size: 0.76rem; border-radius: 10px; }

.ctest-blank-wrap { display: inline-flex; align-items: center; }
.ctest-blank-result.ctest-excluded { background: var(--border); color: var(--text-muted); text-decoration: line-through; }

.ctest-match-result-row { margin-bottom: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

@media (max-width: 700px) {
    .ctest-match-cols-editor, .ctest-match-take-wrap { flex-direction: column; }
    .ctest-test-row-main { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   ===== IELTS LISTENING TEST (tab "Kiểm tra" > "🎧 IELTS Listening Test") =====
   =================================================================== */

/* ---- Khung soạn bài (giảng viên) ---- */
.ilt-summary-bar {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 10px 0 16px;
}
.ilt-summary-bar .ilt-count-ok { color: var(--success-dark); font-weight: 700; }
.ilt-summary-bar .ilt-count-warn { color: #92400e; }

.ilt-part-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--surface);
}
.ilt-part-editor-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.ilt-part-editor-header h4 { margin: 0; font-size: 1.05rem; color: var(--primary-dark); letter-spacing: 0.03em; }
.ilt-part-count-badge {
    font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    background: var(--border); color: var(--text-muted); white-space: nowrap;
}
.ilt-part-count-badge.ilt-count-ok { background: var(--success-light); color: var(--success-dark); }
.ilt-part-count-badge.ilt-count-warn { background: var(--warning-light); color: #92400e; }
.ilt-part-intro-editor { margin-bottom: 10px; }

.ilt-sections-list { display: flex; flex-direction: column; gap: 14px; }
.ilt-section-editor {
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    padding: 12px;
    background: var(--bg);
}
.ilt-section-header-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ilt-section-heading-input { flex: 1; min-width: 180px; }
.ilt-section-instruction-editor { margin-bottom: 10px; }
.ilt-add-section-btn { margin-top: 10px; }

.ilt-blocks-list { display: flex; flex-direction: column; gap: 10px; }
.ilt-add-block-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.ilt-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}
.ilt-block-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: var(--primary-light); font-size: 0.8rem; font-weight: 700; color: var(--primary-dark);
}
.ilt-block-actions { display: flex; gap: 4px; }
.ilt-block-move-btn, .ilt-block-remove-btn {
    border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer;
    font-size: 0.78rem; padding: 2px 7px;
}
.ilt-block-move-btn:hover, .ilt-block-remove-btn:hover { background: var(--primary-light); }
.ilt-block-body { padding: 10px; }
.ilt-block-count-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.ilt-image-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ilt-image-row .news-edit-input { flex: 1; min-width: 180px; }
.ilt-upload-btn { cursor: pointer; white-space: nowrap; }
.ilt-upload-status { font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 4px; }
.ilt-image-caption-input { margin-top: 8px; }

.ilt-table-block-body { display: flex; flex-direction: column; gap: 8px; }
.ilt-table-toolbar { margin-bottom: 2px; }
.ilt-table-editor-wrap { overflow-x: auto; }
.ilt-table-editor { border-collapse: collapse; width: 100%; }
.ilt-table-editor td { border: 1px solid var(--border-strong); padding: 0; min-width: 110px; position: relative; }
.ilt-table-cell { padding: 6px 8px; min-height: 20px; outline: none; font-size: 0.88rem; padding-right: 22px; }
.ilt-table-cell:focus { background: var(--primary-light); }
.ilt-table-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.ilt-merge-btn { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; }
/* Ô đang được giữ Ctrl/Cmd để chọn ghép */
.ilt-table-editor td.ilt-cell-selected { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-light); }
/* Ô đã ghép (colspan/rowspan > 1) */
.ilt-table-editor td.ilt-cell-merged { background: #fffbea; }
.ilt-unmerge-btn {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px;
    padding: 0; border: none; border-radius: 4px; background: rgba(0,0,0,0.08); cursor: pointer; font-size: 11px;
}
.ilt-unmerge-btn:hover { background: rgba(0,0,0,0.18); }

.ilt-audio-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ilt-audio-row .news-edit-input { flex: 1; min-width: 220px; }
.ilt-audio-preview { width: 100%; margin-top: 8px; }

/* ---- Khung hiển thị khi làm bài / xem thử / xem kết quả (mô phỏng đề IELTS thật) ---- */
.ilt-render-root {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    line-height: 1.95;
}
.ilt-render-part { margin-bottom: 28px; }
.ilt-render-part:last-child { margin-bottom: 0; }
.ilt-render-part-title {
    font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em;
    color: var(--primary-dark); text-transform: uppercase;
    border-bottom: 2px solid var(--primary); padding-bottom: 6px; margin-bottom: 10px;
}
.ilt-render-part-intro { margin-bottom: 12px; color: var(--text); }
.ilt-render-section { margin-bottom: 18px; }
.ilt-render-section:last-child { margin-bottom: 0; }
.ilt-render-section-heading { font-weight: 700; margin: 10px 0 4px; color: var(--text); }
.ilt-render-section-instruction { font-style: italic; color: var(--text-muted); margin-bottom: 8px; font-size: 0.92rem; }

.ilt-view-paragraph { margin-bottom: 10px; }
.ilt-view-framed {
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bg);
    margin-bottom: 12px;
}

.ilt-num-badge { display: inline-block; min-width: 16px; font-weight: 800; color: var(--primary-dark); }
.ilt-blank { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; }
.ilt-blank-input {
    border: none; border-bottom: 1.5px solid var(--text-muted); background: transparent;
    padding: 1px 4px; min-width: 110px; font-size: 0.95em; font-family: inherit; color: var(--text);
}
.ilt-blank-input:focus { border-bottom-color: var(--primary); outline: none; }
.ilt-blank-input:disabled { color: var(--text-light); }
.ilt-blank-input.is-correct { border-bottom-color: #2fb56d; color: #2fb56d; }
.ilt-blank-input.is-wrong { border-bottom-color: #ff5d5d; color: #ff5d5d; }
.ilt-blank-result { padding: 1px 4px; border-radius: 4px; }
.ilt-blank-result.ilt-ok { background: var(--success-light); color: var(--success-dark); font-weight: 600; }
.ilt-blank-result.ilt-wrong { background: #fee2e2; color: var(--danger-dark); }

.ilt-view-table-wrap { overflow-x: auto; margin: 10px 0; }
.ilt-view-table { border-collapse: collapse; width: 100%; }
.ilt-view-table td { border: 1px solid var(--border-strong); padding: 8px 10px; vertical-align: top; }

.ilt-view-image-wrap { margin: 12px 0; text-align: center; }
.ilt-view-image { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.ilt-view-image-caption { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.ilt-view-mcq {
    display: block; margin-bottom: 14px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.ilt-mcq-head { display: flex; gap: 2px; font-weight: 600; margin-bottom: 8px; }
.ilt-mcq-options { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }
.ilt-mcq-option { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; font-size: 0.94rem; }
.ilt-mcq-option input { margin-top: 3px; }
.ilt-mcq-option.ilt-ok { color: var(--success-dark); font-weight: 700; }
.ilt-mcq-option.ilt-wrong { color: var(--danger-dark); text-decoration: line-through; }
.ilt-mcq-image { max-width: 260px; display: block; margin: 6px 0 8px 22px; border-radius: 8px; }

.ilt-take-audio { position: sticky; top: 4px; z-index: 3; width: 100%; margin-bottom: 12px; }
.ilt-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; font-weight: 400; }

/* Script thoại (transcript) — chỉ hiện ở màn hình kết quả sau khi nộp bài */
.ilt-part-transcript {
    margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--border-strong);
    border-radius: 10px; background: var(--surface);
}
.ilt-part-transcript > summary { cursor: pointer; font-weight: 700; color: var(--primary-dark); }
.ilt-part-transcript-body { margin-top: 10px; line-height: 1.6; white-space: pre-wrap; }
.ilt-part-transcript-label { display: block; margin-top: 14px; }
.ilt-part-transcript-editor { margin-bottom: 4px; }

/* Band điểm quy đổi thang 9.0 IELTS, hiện cùng điểm số ở màn hình kết quả */
.ilt-band-score { margin-top: 6px; font-size: 1rem; }
.ilt-band-score b { color: var(--primary-dark); font-size: 1.15rem; }

@media (max-width: 700px) {
    .ilt-part-editor-header { flex-wrap: wrap; }
    .ilt-mcq-image { margin-left: 0; max-width: 100%; }
}

/* ---- Điều hướng PART 1-4 (mỗi Part 1 "trang" riêng khi làm bài thật / xem thử) ---- */
.ilt-part-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ilt-part-nav-btn {
    padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--border-strong);
    background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: 0.88rem;
    cursor: pointer; letter-spacing: 0.02em;
}
.ilt-part-nav-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.ilt-part-nav-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- Bố cục khi làm bài thật: nội dung bài bên trái + Bảng câu trả lời cố định bên phải ---- */
.ilt-take-layout { display: flex; align-items: flex-start; gap: 20px; }
.ilt-take-main { flex: 1; min-width: 0; }

.ilt-answer-sheet {
    width: 232px; flex-shrink: 0;
    position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 14px;
}
.ilt-answer-sheet-title {
    font-weight: 800; color: var(--primary-dark); margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.ilt-answer-sheet-close { display: none; border: none; background: none; font-size: 1rem; cursor: pointer; color: var(--text-muted); }
.ilt-answer-sheet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.ilt-answer-sheet-item {
    border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: 7px;
    padding: 7px 0; font-weight: 700; font-size: 0.8rem; cursor: pointer; color: var(--text-muted);
}
.ilt-answer-sheet-item:hover { border-color: var(--primary); color: var(--primary-dark); }
.ilt-answer-sheet-item.is-answered { background: var(--success-light); border-color: var(--success); color: var(--success-dark); }
.ilt-answer-sheet-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--text-muted); }
.ilt-legend-item { display: flex; align-items: center; gap: 6px; }
.ilt-legend-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1.5px solid var(--border-strong); }
.ilt-legend-dot.ilt-legend-answered { background: var(--success-light); border-color: var(--success); }
.ilt-legend-dot.ilt-legend-unanswered { background: var(--surface); }

.ilt-answer-sheet-toggle {
    display: none; position: fixed; right: 16px; bottom: 16px; z-index: 500;
    border: none; border-radius: 999px; padding: 12px 20px; background: var(--primary); color: #fff;
    font-weight: 700; font-size: 0.88rem; box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer;
}

/* Nhấp nháy nhẹ khi bấm từ Bảng câu trả lời để nhảy tới đúng câu hỏi */
.ilt-jump-flash { animation: iltJumpFlash 1.2s ease; border-radius: 4px; }
@keyframes iltJumpFlash { 0% { background: #fff59d; } 100% { background: transparent; } }

/* Bôi đen (highlight) văn bản trong lúc làm bài — bấm lại vào chỗ đã bôi đen để xoá */
mark.ilt-highlight { background: #fff59d; padding: 0 1px; border-radius: 2px; cursor: pointer; }

@media (max-width: 900px) {
    .ilt-take-layout { flex-direction: column; }
    .ilt-answer-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
        max-height: 62vh; border-radius: 16px 16px 0 0; z-index: 600;
        box-shadow: 0 -8px 24px rgba(0,0,0,.25);
        transform: translateY(105%); transition: transform 0.25s ease;
    }
    .ilt-answer-sheet.is-open { transform: translateY(0); }
    .ilt-answer-sheet-close { display: inline-block; }
    .ilt-answer-sheet-toggle { display: inline-flex; align-items: center; gap: 6px; }
}

/* ---- Hộp thoại "sẵn sàng làm bài chưa" ---- */
.ilt-ready-modal-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ilt-ready-modal-box {
    background: #fff; border-radius: 18px; padding: 28px 26px; max-width: 460px; width: 100%;
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.ilt-ready-modal-box h3 { margin: 0 0 10px; color: var(--primary-dark); }
.ilt-ready-modal-box p { margin: 0 0 14px; color: var(--text); font-size: 0.92rem; line-height: 1.6; }
.ilt-ready-modal-rules { margin: 0 0 20px; padding-left: 20px; font-size: 0.86rem; line-height: 1.65; color: var(--text-muted); }
.ilt-ready-modal-rules li { margin-bottom: 6px; }
.ilt-ready-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ===================================================================
   ===== IELTS READING TEST (tab "Kiểm tra" > "📖 IELTS Reading Test") =====
   =================================================================== */

/* ---- Khung soạn bài (giảng viên) ---- */
.irt-summary-bar {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 10px 0 16px;
}
.irt-summary-bar .irt-count-ok { color: var(--success-dark); font-weight: 700; }
.irt-summary-bar .irt-count-warn { color: #92400e; }

.irt-part-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--surface);
}
.irt-part-editor-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.irt-part-editor-header h4 { margin: 0; font-size: 1.05rem; color: var(--primary-dark); letter-spacing: 0.03em; }
.irt-part-count-badge {
    font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    background: var(--border); color: var(--text-muted); white-space: nowrap;
}
.irt-part-count-badge.irt-count-ok { background: var(--success-light); color: var(--success-dark); }
.irt-part-count-badge.irt-count-warn { background: var(--warning-light); color: #92400e; }
.irt-part-intro-editor { margin-bottom: 10px; }

.irt-sections-list { display: flex; flex-direction: column; gap: 14px; }
.irt-section-editor {
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    padding: 12px;
    background: var(--bg);
}
.irt-section-header-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.irt-section-heading-input { flex: 1; min-width: 180px; }
.irt-section-instruction-editor { margin-bottom: 10px; }
.irt-add-section-btn { margin-top: 10px; }

.irt-blocks-list { display: flex; flex-direction: column; gap: 10px; }
.irt-add-block-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.irt-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}
.irt-block-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: var(--primary-light); font-size: 0.8rem; font-weight: 700; color: var(--primary-dark);
}
.irt-block-actions { display: flex; gap: 4px; }
.irt-block-move-btn, .irt-block-remove-btn {
    border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer;
    font-size: 0.78rem; padding: 2px 7px;
}
.irt-block-move-btn:hover, .irt-block-remove-btn:hover { background: var(--primary-light); }
.irt-block-body { padding: 10px; }
.irt-block-count-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.irt-image-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.irt-image-row .news-edit-input { flex: 1; min-width: 180px; }
.irt-upload-btn { cursor: pointer; white-space: nowrap; }
.irt-upload-status { font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 4px; }
.irt-image-caption-input { margin-top: 8px; }

.irt-table-block-body { display: flex; flex-direction: column; gap: 8px; }
.irt-table-toolbar { margin-bottom: 2px; }
.irt-table-editor-wrap { overflow-x: auto; }
.irt-table-editor { border-collapse: collapse; width: 100%; }
.irt-table-editor td { border: 1px solid var(--border-strong); padding: 0; min-width: 110px; position: relative; }
.irt-table-cell { padding: 6px 8px; min-height: 20px; outline: none; font-size: 0.88rem; padding-right: 22px; }
.irt-table-cell:focus { background: var(--primary-light); }
.irt-table-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.irt-merge-btn { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; }
/* Ô đang được giữ Ctrl/Cmd để chọn ghép */
.irt-table-editor td.irt-cell-selected { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-light); }
/* Ô đã ghép (colspan/rowspan > 1) */
.irt-table-editor td.irt-cell-merged { background: #fffbea; }
.irt-unmerge-btn {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px;
    padding: 0; border: none; border-radius: 4px; background: rgba(0,0,0,0.08); cursor: pointer; font-size: 11px;
}
.irt-unmerge-btn:hover { background: rgba(0,0,0,0.18); }


/* ---- Khung hiển thị khi làm bài / xem thử / xem kết quả (mô phỏng đề IELTS thật) ---- */
.irt-render-root {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    line-height: 1.95;
}
.irt-render-part { margin-bottom: 28px; }
.irt-render-part:last-child { margin-bottom: 0; }
.irt-render-part-title {
    font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em;
    color: var(--primary-dark); text-transform: uppercase;
    border-bottom: 2px solid var(--primary); padding-bottom: 6px; margin-bottom: 10px;
}
.irt-render-part-intro { margin-bottom: 12px; color: var(--text); }
.irt-render-section { margin-bottom: 18px; }
.irt-render-section:last-child { margin-bottom: 0; }
.irt-render-section-heading { font-weight: 700; margin: 10px 0 4px; color: var(--text); }
.irt-render-section-instruction { font-style: italic; color: var(--text-muted); margin-bottom: 8px; font-size: 0.92rem; }

.irt-view-paragraph { margin-bottom: 10px; }
.irt-view-framed {
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bg);
    margin-bottom: 12px;
}

.irt-num-badge { display: inline-block; min-width: 16px; font-weight: 800; color: var(--primary-dark); }
.irt-blank { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; }
.irt-blank-input {
    border: none; border-bottom: 1.5px solid var(--text-muted); background: transparent;
    padding: 1px 4px; min-width: 110px; font-size: 0.95em; font-family: inherit; color: var(--text);
}
.irt-blank-input:focus { border-bottom-color: var(--primary); outline: none; }
.irt-blank-input:disabled { color: var(--text-light); }
.irt-blank-input.is-correct { border-bottom-color: #2fb56d; color: #2fb56d; }
.irt-blank-input.is-wrong { border-bottom-color: #ff5d5d; color: #ff5d5d; }
.irt-blank-result { padding: 1px 4px; border-radius: 4px; }
.irt-blank-result.irt-ok { background: var(--success-light); color: var(--success-dark); font-weight: 600; }
.irt-blank-result.irt-wrong { background: #fee2e2; color: var(--danger-dark); }

.irt-view-table-wrap { overflow-x: auto; margin: 10px 0; }
.irt-view-table { border-collapse: collapse; width: 100%; }
.irt-view-table td { border: 1px solid var(--border-strong); padding: 8px 10px; vertical-align: top; }

.irt-view-image-wrap { margin: 12px 0; text-align: center; }
.irt-view-image { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.irt-view-image-caption { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.irt-view-mcq {
    display: block; margin-bottom: 14px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.irt-mcq-head { display: flex; gap: 2px; font-weight: 600; margin-bottom: 8px; }
.irt-mcq-options { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }
.irt-mcq-option { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; font-size: 0.94rem; }
.irt-mcq-option input { margin-top: 3px; }
.irt-mcq-option.irt-ok { color: var(--success-dark); font-weight: 700; }
.irt-mcq-option.irt-wrong { color: var(--danger-dark); text-decoration: line-through; }
.irt-mcq-image { max-width: 260px; display: block; margin: 6px 0 8px 22px; border-radius: 8px; }

/* ---- Trắc nghiệm NHIỀU đáp án (ô vuông ✔️) — "Choose TWO/THREE letters" ---- */
.irt-mcq-multi-badges { display: inline-flex; align-items: center; }
.irt-mcq-multi-num { display: inline-block; }
.irt-mcq-multi-hint { font-style: italic; color: var(--text-muted); font-size: 0.85rem; margin: -4px 0 8px; }
/* Checkbox mặc định của trình duyệt vốn đã là ô vuông (khác ô tròn của trắc nghiệm 1 đáp án) — chỉ chỉnh cỡ cho dễ bấm trên di động. */
.irt-view-mcq-multi .irt-mcq-option input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

.irt-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; font-weight: 400; }


/* Band điểm quy đổi thang 9.0 IELTS, hiện cùng điểm số ở màn hình kết quả */
.irt-band-score { margin-top: 6px; font-size: 1rem; }
.irt-band-score b { color: var(--primary-dark); font-size: 1.15rem; }

@media (max-width: 700px) {
    .irt-part-editor-header { flex-wrap: wrap; }
    .irt-mcq-image { margin-left: 0; max-width: 100%; }
}

/* ---- Điều hướng PASSAGE 1-3 (mỗi Passage 1 "trang" riêng khi làm bài thật / xem thử) ---- */
.irt-part-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.irt-part-nav-btn {
    padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--border-strong);
    background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: 0.88rem;
    cursor: pointer; letter-spacing: 0.02em;
}
.irt-part-nav-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.irt-part-nav-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- Bố cục khi làm bài thật: nội dung bài bên trái + Bảng câu trả lời cố định bên phải ---- */
.irt-take-layout { display: flex; align-items: flex-start; gap: 20px; }
.irt-take-main { flex: 1; min-width: 0; }

.irt-answer-sheet {
    width: 232px; flex-shrink: 0;
    position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 14px;
}
.irt-answer-sheet-title {
    font-weight: 800; color: var(--primary-dark); margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.irt-answer-sheet-title-text { display: flex; align-items: center; gap: 7px; }
.irt-answer-sheet-close { display: none; border: none; background: none; font-size: 1rem; cursor: pointer; color: var(--text-muted); }

/* ---- [MỚI] Nút bật/tắt "chế độ tập trung" (focus mode) — nằm ngay trong
   tiêu đề Bảng câu trả lời, cạnh nút Nộp bài (nằm chung .irt-answer-sheet) ---- */
.irt-focus-toggle-btn {
    border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-muted);
    border-radius: 7px; width: 26px; height: 26px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; line-height: 1; cursor: pointer;
}
.irt-focus-toggle-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.irt-focus-toggle-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Đồng hồ đếm giờ được gộp vào trong Bảng câu trả lời (thay vì neo fixed trên
   header như trước) — dùng lại class .ctest-take-timer (đổi màu khi sắp hết giờ...)
   nhưng ghi đè phần định vị "fixed" vì giờ nó nằm cố định bên trong sidebar rồi. */
#irt-take-timer.irt-take-timer-inline {
    position: static; top: auto; right: auto; z-index: auto;
    display: inline-block; width: 100%; text-align: center;
    margin: 0 0 10px; box-shadow: none;
}
.irt-answer-sheet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.irt-answer-sheet-item {
    border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: 7px;
    padding: 7px 0; font-weight: 700; font-size: 0.8rem; cursor: pointer; color: var(--text-muted);
}
.irt-answer-sheet-item:hover { border-color: var(--primary); color: var(--primary-dark); }
.irt-answer-sheet-item.is-answered { background: var(--success-light); border-color: var(--success); color: var(--success-dark); }
.irt-answer-sheet-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--text-muted); }
.irt-legend-item { display: flex; align-items: center; gap: 6px; }
.irt-legend-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1.5px solid var(--border-strong); }
.irt-legend-dot.irt-legend-answered { background: var(--success-light); border-color: var(--success); }
.irt-legend-dot.irt-legend-unanswered { background: var(--surface); }

.irt-answer-sheet-toggle {
    display: none; position: fixed; right: 16px; bottom: 16px; z-index: 500;
    border: none; border-radius: 999px; padding: 12px 20px; background: var(--primary); color: #fff;
    font-weight: 700; font-size: 0.88rem; box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer;
}
/* [FIX] O che do tap trung (focus mode), .irt-take-layout phong to z-index:3000
   phu kin man hinh -> nut nay (z-index:500 cu) bi de khuat phia duoi, khien hoc
   vien KHONG MO duoc Bang cau tra loi / KHONG THAY duoc nut Nop bai. Nang rieng
   z-index cua nut nay len tren layout do, va ne vung an toan (home indicator) tren
   iPhone bang env(safe-area-inset-bottom). */
#irt-take-view.irt-focus-active .irt-answer-sheet-toggle {
    z-index: 3500;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
}
/* An nut bam mo di trong luc Bang cau tra loi dang mo san (tranh de len nut Nop bai ben trong). */
.irt-answer-sheet-toggle.is-hidden { display: none !important; }

/* [MỚI] Nút "Nộp bài" giờ nằm chung trong .irt-answer-sheet (thay vì tách riêng
   bên khối nội dung bài đọc) — dùng lại .ctest-submit-btn (width:100%...), chỉ
   thêm khoảng cách với phần trên (legend). */
.irt-answer-sheet-submit-btn { margin-top: 14px; flex-shrink: 0; }

/* Nhấp nháy nhẹ khi bấm từ Bảng câu trả lời để nhảy tới đúng câu hỏi */
.irt-jump-flash { animation: irtJumpFlash 1.2s ease; border-radius: 4px; }
@keyframes irtJumpFlash { 0% { background: #fff59d; } 100% { background: transparent; } }

/* Bôi đen (highlight) văn bản trong lúc làm bài đọc — bấm lại vào chỗ đã bôi đen để xoá.
   Được lưu xuống CSDL cho tới khi nộp bài, không mất khi tải lại trang. */
mark.irt-highlight { background: #fff59d; padding: 0 1px; border-radius: 2px; cursor: pointer; }


@media (max-width: 900px) {
    .irt-take-layout { flex-direction: column; }
    .irt-answer-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
        max-height: 62vh; border-radius: 16px 16px 0 0; z-index: 600;
        box-shadow: 0 -8px 24px rgba(0,0,0,.25);
        transform: translateY(105%); transition: transform 0.25s ease;
    }
    .irt-answer-sheet.is-open { transform: translateY(0); }
    .irt-answer-sheet-close { display: inline-block; }
    .irt-answer-sheet-toggle { display: inline-flex; align-items: center; gap: 6px; }
}

/* =====================================================================
   [MỚI] CHẾ ĐỘ TẬP TRUNG (FOCUS MODE) khi làm bài đọc IELTS thật
   Mặc định BẬT ngay khi vào làm bài (gắn class "irt-focus-active" lên
   #irt-take-view bằng JS — hàm iltSetFocusMode). Khi bật: ẩn phần khung
   ứng dụng (header "← Quay lại" + tiêu đề bài) và .irt-take-layout (gồm
   irt-render-root bên trong .irt-take-main + .irt-answer-sheet) được
   phóng to chiếm trọn 100% chiều rộng/chiều cao màn hình, đè lên trên mọi
   thứ khác. Học viên bấm nút ⛶ trong Bảng câu trả lời để thoát ra lại
   giao diện bình thường bất cứ lúc nào.
   ===================================================================== */
#irt-take-view.irt-focus-active .ctest-take-header { display: none; }
#irt-take-view.irt-focus-active .irt-take-layout {
    position: fixed;
    inset: 0;
    z-index: 3000;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* [FIX] dvh chinh xac hon 100vh tren di dong (tru thanh dia chi trinh
                        duyet an/hien khi cuon), giup giao dien nam von ven dung trong 100%
                        chieu cao man hinh that thay vi bi tran/hut mot khoang. */
    max-width: 100vw;
    margin: 0;
    background: var(--bg);
    padding: 12px 14px;
    box-sizing: border-box;
    align-items: stretch; /* thêm dòng này */
}
/* [MỚI] .irt-take-main không tự cuộn nữa (bỏ overflow-y:auto) — nó chỉ còn là
   1 khung flex-column co giãn vừa đúng phần còn lại của màn hình. Thanh cuộn
   thật sự giờ nằm ở TỪNG CỘT bên trong (.irt-render-passage-col và
   .irt-render-questions-col — xem khối "Bố cục Passage / Câu hỏi" bên dưới),
   mỗi cột tự cuộn riêng, độc lập với nhau.
   Dưới tablet (điện thoại): 2 cột đó xếp thành đúng "2 khung trên/dưới", mỗi
   khung có thanh cuộn của chính nó, tất cả gói gọn trong 100dvh — không cuộn
   cả trang nữa. */
#irt-take-view.irt-focus-active .irt-take-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#irt-take-view.irt-focus-active #irt-violation-banner,
#irt-take-view.irt-focus-active .irt-part-nav {
    flex-shrink: 0;
}
#irt-take-view.irt-focus-active #irt-take-body,
#irt-take-view.irt-focus-active .irt-render-root,
#irt-take-view.irt-focus-active .irt-render-part {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#irt-take-view.irt-focus-active .irt-render-split {
    flex: 1 1 auto;
    min-height: 0;
}
/* Dưới tablet (điện thoại, <768px): khung passage ở TRÊN (~40% chiều cao) +
   khung câu hỏi ở DƯỚI (~60%, phần còn lại) — mỗi khung cuộn riêng bằng
   overflow-y:auto của chính nó, có viền phân cách rõ ràng giữa 2 khung. */
#irt-take-view.irt-focus-active .irt-render-passage-col {
    flex: 0 1 40%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid var(--border-strong);
    padding-bottom: 14px;
    margin-bottom: 12px;
}
#irt-take-view.irt-focus-active .irt-render-questions-col {
    flex: 1 1 60%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 56px; /* chừa chỗ cho nút nổi "📝 Đáp án" ở góc dưới, khỏi che câu cuối */
}
/* Từ tablet trở lên (>=768px): quay lại bố cục trái (passage) / phải (câu hỏi)
   như .irt-render-split gốc, nhưng đổi từ "sticky + cuộn cả .irt-take-main"
   sang mỗi cột tự cuộn trong đúng chiều cao cố định (khớp với .irt-take-main
   không còn cuộn nữa ở trên) — dùng viền dọc để phân tách 2 khung thay cho
   viền ngang lúc xếp chồng trên di động. */
@media (min-width: 768px) {
    #irt-take-view.irt-focus-active .irt-render-split { align-items: stretch; }
    #irt-take-view.irt-focus-active .irt-render-passage-col,
    #irt-take-view.irt-focus-active .irt-render-questions-col {
        flex: 1 1 50%;
        position: static;
        max-height: none;
    }
    #irt-take-view.irt-focus-active .irt-render-passage-col {
        border-bottom: none;
        border-right: 2px solid var(--border-strong);
        padding-bottom: 0;
        padding-right: 18px;
        margin-bottom: 0;
    }
}
/* Từ tablet trở lên: sidebar Bảng câu trả lời cũng cao trọn 100% (thay vì
   sticky/max-height như chế độ bình thường) để "gộp lại" với nội dung bài
   đọc thành một khối duy nhất chiếm hết màn hình. Dưới tablet vẫn giữ
   nguyên kiểu "bottom sheet" trượt lên (đã có sẵn ở @media 900px phía trên)
   để không phá vỡ thao tác chạm quen thuộc trên điện thoại. Từ mốc này trở
   lên nút "📝 Đáp án" nổi cũng không cần thiết nữa (sidebar luôn hiện sẵn)
   nên không cần chừa padding-bottom cho .irt-render-questions-col.
   */
@media (min-width: 901px) {
    #irt-take-view.irt-focus-active .irt-answer-sheet {
        position: static;
        top: auto;
        height: 100%;
        max-height: none;
        display: flex;
        flex-direction: column;
    }
    #irt-take-view.irt-focus-active .irt-answer-sheet-grid { overflow-y: auto; }
    #irt-take-view.irt-focus-active .irt-render-questions-col { padding-bottom: 0; }
}
/* Khoá cuộn nền trang khi đang ở chế độ tập trung để tránh 2 thanh cuộn chồng nhau. */
body.irt-focus-body-lock { overflow: hidden; }

/* ---- Hộp thoại "sẵn sàng làm bài chưa" ---- */
.irt-ready-modal-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.irt-ready-modal-box {
    background: #fff; border-radius: 18px; padding: 28px 26px; max-width: 460px; width: 100%;
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.irt-ready-modal-box h3 { margin: 0 0 10px; color: var(--primary-dark); }
.irt-ready-modal-box p { margin: 0 0 14px; color: var(--text); font-size: 0.92rem; line-height: 1.6; }
.irt-ready-modal-rules { margin: 0 0 20px; padding-left: 20px; font-size: 0.86rem; line-height: 1.65; color: var(--text-muted); }
.irt-ready-modal-rules li { margin-bottom: 6px; }
.irt-ready-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- Đoạn văn đọc (passage) — hiện phía trên các câu hỏi của mỗi Passage ---- */
.irt-render-passage {
    margin-bottom: 18px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.irt-render-passage-image { max-width: 100%; border-radius: 8px; margin-bottom: 10px; display: block; }
.irt-render-passage-text { line-height: 1.85; color: var(--text); }

/* [MỚI] .irt-render-part giờ được JS bật/tắt bằng display:flex (thay vì
   block trước đây) để dùng chung được với bố cục 2 khung cuộn riêng ở chế độ
   tập trung (focus mode) bên dưới — vẫn xếp dọc y hệt như block cũ (tiêu đề
   trên, nội dung dưới), không đổi gì về mặt hiển thị ở các chế độ khác. */
.irt-render-part { display: flex; flex-direction: column; }
.irt-render-part-title { flex-shrink: 0; }

/* ---- Bố cục Passage / Câu hỏi khi làm bài (mô phỏng màn hình thi IELTS thật) ----
   - Từ tablet trở lên (>=768px): chia đôi trái/phải — passage bên trái (cuộn riêng,
     dính lại khi cuộn trang) và câu hỏi bên phải, để học viên vừa đọc vừa trả lời
     mà không mất chỗ đang đọc.
   - Dưới tablet (điện thoại, <768px): xếp trên/dưới — passage ở trên, câu hỏi ở dưới,
     cuộn tự nhiên theo trang như bình thường. */
.irt-render-split { display: flex; flex-direction: column; gap: 18px; }
.irt-render-passage-col { min-width: 0; }
.irt-render-questions-col { min-width: 0; }

@media (min-width: 768px) {
    .irt-render-split { flex-direction: row; align-items: flex-start; gap: 24px; }
    .irt-render-passage-col,
    .irt-render-questions-col { flex: 1 1 50%; }
    .irt-render-passage-col {
        position: sticky; top: 12px;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }
    .irt-render-passage-col .irt-render-passage { margin-bottom: 0; }
}

/* ---- Khung soạn đoạn văn (passage) trong trình soạn bài ---- */
.irt-passage-editor-wrap { margin-bottom: 14px; }
.irt-passage-editor-wrap > label { display: block; margin-bottom: 6px; }
.irt-passage-image-field { margin-top: 10px; }

/* ---- Khối: Nối / Ghép (Matching) — dùng cho Matching Heading/Feature/
   Information/Ending. Có 1 "ngân hàng đáp án" dùng chung + danh sách câu hỏi,
   mỗi câu chọn 1 mục trong ngân hàng qua dropdown. ---- */
.irt-matching-bank-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.irt-matching-bank-row { display: flex; gap: 8px; align-items: center; }
.irt-matching-bank-key { width: 56px; flex-shrink: 0; text-align: center; font-weight: 700; }
.irt-matching-bank-text { flex: 1; }
.irt-matching-questions-list { display: flex; flex-direction: column; gap: 8px; }
.irt-matching-question-row { display: flex; gap: 8px; align-items: center; }
.irt-matching-question-prompt { flex: 1; }
.irt-matching-question-correct { width: 90px; flex-shrink: 0; }
.irt-matching-add-row-bar { display: flex; gap: 10px; margin-top: 8px; }

.irt-view-matching { margin-bottom: 16px; }
.irt-view-matching-bank {
    border: 1px dashed var(--border-strong); border-radius: 10px;
    padding: 10px 14px; margin-bottom: 12px; background: var(--surface);
}
.irt-view-matching-bank-title { font-weight: 700; margin-bottom: 6px; color: var(--primary-dark); }
.irt-view-matching-bank-item { margin-bottom: 3px; font-size: 0.92rem; }
.irt-view-matching-bank-item b { margin-right: 6px; }
.irt-view-matching-question {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.irt-view-matching-question select {
    padding: 4px 8px; border: 1.5px solid var(--border-strong); border-radius: 6px;
    font-family: inherit; font-size: 0.9rem; background: var(--surface);
}
.irt-view-matching-question select.is-correct { border-color: #2fb56d; color: #2fb56d; }
.irt-view-matching-question select.is-wrong { border-color: #ff5d5d; color: #ff5d5d; }
.irt-view-matching-answer-key { font-size: 0.85rem; color: var(--success-dark); font-weight: 700; }

/* ---- Nút điền nhanh True/False/Not Given trong khối trắc nghiệm ---- */
.irt-mcq-preset-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }


/* ===================================================================
   ===== LUYỆN NGHE — GIAI ĐOẠN 1 — NGHE LV1 (tab "Luyện kỹ năng" > "Nghe") =====
   =================================================================== */
.ln-quiz-card { max-width: 560px; margin: 0 auto; background: var(--surface-2,#f7f7f9); border-radius: 18px; padding: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }

.ln-play-row { display: flex; justify-content: center; margin-bottom: 14px; }

.ln-answer-input { display: block; width: 100%; max-width: 320px; margin: 14px auto 0; padding: 10px 14px; border: 2px solid var(--border,#e2e2e6); border-radius: 10px; font-size: 16px; text-align: center; font-family: inherit; }
.ln-answer-input:focus { outline: none; border-color: var(--accent,#6d5bff); }
.ln-answer-input.is-wrong { border-color: #ff5d5d; animation: thcsShakeInput .35s; }
.ln-answer-input:disabled { opacity: .7; }

.ln-chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.ln-chip { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border,#e2e2e6); background: var(--surface,#fff); cursor: pointer; font-size: 14.5px; font-weight: 600; transition: .15s; }
.ln-chip:hover { border-color: var(--accent,#6d5bff); }
.ln-chip.is-picked { opacity: .35; cursor: default; pointer-events: none; }

.ln-answer-slots { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 6px; }
.ln-slot { min-width: 64px; padding: 9px 12px; border-radius: 10px; border: 2px dashed var(--border,#e2e2e6); text-align: center; font-size: 14px; opacity: .6; }
.ln-slot.is-filled { border-style: solid; border-color: var(--accent,#6d5bff); opacity: 1; font-weight: 700; color: var(--accent,#6d5bff); }

.ln-display-box { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; background: var(--surface,#fff); border: 1px solid var(--border,#e2e2e6); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.ln-display-chip { padding: 6px 12px; border-radius: 8px; background: var(--surface-2,#f7f7f9); font-size: 13.5px; font-weight: 600; }
.ln-ask-line { text-align: center; font-size: 15px; margin-bottom: 6px; }

.ln-tick-list { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin: 0 auto; }
.ln-tick-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border,#e2e2e6); border-radius: 10px; background: var(--surface,#fff); cursor: pointer; font-size: 14.5px; text-align: left; width: 100%; font-family: inherit; }
.ln-tick-box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border,#c9c9d6); flex: 0 0 auto; position: relative; }
.ln-tick-item.is-ticked { border-color: var(--accent,#6d5bff); background: var(--surface-2,#f7f7f9); }
.ln-tick-item.is-ticked .ln-tick-box { background: var(--accent,#6d5bff); border-color: var(--accent,#6d5bff); }
.ln-tick-item.is-ticked .ln-tick-box::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* [MỚI] Dòng gợi ý (nghĩa tiếng Việt + phiên âm IPA) bên dưới ô nhập đáp án ở các câu nghe điền từ */
.ln-hint { text-align: center; font-size: 13.5px; opacity: .7; margin: 10px 0 0; }
/* [MỚI] Chú thích nghĩa tiếng Việt kế bên 1 từ tiếng Anh đang hiển thị (chip / danh sách tick) */
.ln-word-vi { font-weight: 400; opacity: .6; font-size: 12.5px; }

.ln-result-box { max-width: 480px; margin: 24px auto; text-align: center; background: var(--surface-2,#f7f7f9); border-radius: 18px; padding: 28px 22px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.ln-result-emoji { font-size: 44px; margin-bottom: 10px; }

/* ===================================================================
   ===== NGHE LV2 (nghe hiểu 1 câu — ngân hàng câu do giảng viên soạn) =====
   =================================================================== */

/* ----- Khung soạn câu hỏi (giảng viên) ----- */
.ln2-admin-box {
    max-width: 620px;
    margin: 0 auto 20px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}
.ln2-admin-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.ln2-type-tab {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.ln2-type-tab.active { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }
.ln2-admin-type-tabs.is-locked { opacity: .55; pointer-events: none; }

.ln2-admin-form { display: flex; flex-direction: column; gap: 12px; }
.ln2-field { display: flex; flex-direction: column; gap: 5px; }
.ln2-field label { font-size: 0.78rem; font-weight: 700; color: var(--primary-dark); }
.ln2-field .news-edit-input { width: 100%; }

.ln2-mc-edit-options { display: flex; flex-direction: column; gap: 8px; }
.ln2-mc-remove-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--danger);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ln2-mc-remove-btn:hover { border-color: var(--danger); background: var(--danger); color: #fff; }
.ln2-mc-add-btn {
    margin-top: 10px;
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
}
.ln2-mc-add-btn:hover { filter: brightness(0.97); }
.ln2-mc-question {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    margin: 4px 0 14px;
}

.ln2-admin-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.ln2-admin-status { font-size: 0.8rem; color: var(--success-dark); flex: 1; min-width: 120px; }
.ln2-admin-status.is-error { color: var(--danger-dark); }

/* ----- Danh sách câu hỏi đã soạn (giảng viên) ----- */
.ln2-item-list { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ln2-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.ln2-item-type-badge {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.ln2-item-audio-badge {
    flex: 0 0 auto;
    font-size: 0.8rem;
}
.ln2-item-preview {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ln2-item-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.ln2-item-edit-btn, .ln2-item-delete-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ln2-item-edit-btn:hover { border-color: var(--primary); }
.ln2-item-delete-btn:hover { border-color: var(--danger); background: var(--danger); filter: none; }
.ln2-item-delete-btn:hover { color: #fff; }

/* ----- Câu hỏi trắc nghiệm (học viên làm bài) ----- */
.ln2-mc-grid { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.ln2-mc-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    transition: .15s;
}
.ln2-mc-option:hover { border-color: var(--primary); }
.ln2-mc-letter {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
}
.ln2-mc-text { flex: 1; }
.ln2-mc-option.is-disabled { cursor: default; pointer-events: none; }
.ln2-mc-option.is-correct { border-color: var(--success); background: var(--success-light); }
.ln2-mc-option.is-correct .ln2-mc-letter { background: var(--success); border-color: var(--success); color: #fff; }
.ln2-mc-option.is-wrong { border-color: var(--danger); background: #fee2e2; }
.ln2-mc-option.is-wrong .ln2-mc-letter { background: var(--danger); border-color: var(--danger); color: #fff; }
.ln2-mc-option.is-selected-draft { border-color: var(--primary); background: var(--primary-light); }
/* ===================================================================
   ===== NGHE LV3 (nghe hiểu 1 đoạn hội thoại — nhiều dạng câu hỏi/đoạn) =====
   =================================================================== */

/* ----- Khung soạn từng câu hỏi con trong 1 đoạn hội thoại (giảng viên) ----- */
.ln3-subq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.ln3-subq-card {
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ln3-subq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ln3-subq-num { font-size: 0.78rem; font-weight: 700; color: var(--primary-dark); flex: 0 0 auto; }
.ln3-subq-type-select {
    flex: 1;
    min-width: 140px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}
.ln3-subq-remove-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--danger);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ln3-subq-remove-btn:hover { border-color: var(--danger); background: var(--danger); color: #fff; }
.ln3-subq-prompt {
    width: 100%;
    min-height: 44px;
    resize: vertical;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-family: inherit;
    font-size: 0.85rem;
}
.ln3-subq-answer-hint { font-size: 0.72rem; color: var(--text-muted); }

/* ----- Danh sách đoạn hội thoại đã soạn (giảng viên) ----- */
.ln3-item-subcount-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: 999px;
    padding: 2px 9px;
    flex: 0 0 auto;
}

/* ----- Làm bài (học viên) ----- */
.ln3-dialogue-title { font-size: 0.95rem; font-weight: 700; color: var(--text); text-align: center; margin: 0 0 10px; }
.ln3-take-subq { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 14px; }
.ln3-take-subq:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.ln3-take-subq-prompt { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.ln3-take-subq-prompt .ln3-take-subq-num { color: var(--primary-dark); margin-right: 6px; }
.ln3-take-essay-input {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-family: inherit;
    font-size: 0.88rem;
}
.ln3-take-essay-input.is-wrong { border-color: var(--danger); }
.ln3-take-feedback-line { font-size: 0.82rem; margin-top: 8px; padding: 6px 10px; border-radius: 8px; }
.ln3-take-feedback-line.is-correct { color: var(--success-dark); background: var(--success-light); }
.ln3-take-feedback-line.is-wrong { color: var(--danger-dark); background: #fee2e2; }

/* =====================================================
   [MỚI] LỘ TRÌNH IELTS — 4 CHẶNG (Nền tảng/Khởi động/Tăng tốc/Về đích)
   ===================================================== */
.roadmap-intro-ielts-1 { background: linear-gradient(135deg, #0ea5b7 0%, #0b7285 100%); }
.roadmap-intro-ielts-2 { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.roadmap-intro-ielts-3 { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.roadmap-intro-ielts-4 { background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%); }

.ielts-phase-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}
.ielts-phase-label:first-of-type { margin-top: 4px; }

/* --- Khối nội dung theo kỹ năng (giống vstage nhưng dùng riêng cho IELTS) --- */
.ielts-block {
    --ielts-bg: var(--surface-2);
    --ielts-text: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    margin-bottom: 14px;
}
.ielts-block:last-of-type { margin-bottom: 0; }
.ielts-skill-1 { --ielts-bg: var(--primary-light); --ielts-text: var(--primary-dark); }
.ielts-skill-2 { --ielts-bg: var(--diphthong-bg); --ielts-text: #17794f; }
.ielts-skill-3 { --ielts-bg: var(--vowel-bg);     --ielts-text: #92660a; }
.ielts-skill-4 { --ielts-bg: #e0f2fe;             --ielts-text: #075985; }
.ielts-skill-5 { --ielts-bg: var(--consonant-bg); --ielts-text: #b5324a; }
.ielts-skill-6 { --ielts-bg: #f3e8ff;             --ielts-text: #7e22ce; }

.ielts-block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ielts-bg);
}
.ielts-icon { font-size: 1.3rem; flex-shrink: 0; }
.ielts-header-text h4 { font-size: 0.9rem; font-weight: 800; color: var(--text); margin-bottom: 2px; letter-spacing: -0.005em; }
.ielts-header-text span { font-size: 0.71rem; font-weight: 700; color: var(--ielts-text); }
.ielts-block-body { padding: 14px 16px 16px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.ielts-block-body p { margin: 0 0 10px; }
.ielts-block-body p:last-child { margin-bottom: 0; }
.ielts-block-body strong { color: var(--text); font-weight: 700; }

/* --- Ví dụ hội thoại / câu mẫu --- */
.ielts-example {
    background: var(--primary-light);
    border-radius: 10px;
    padding: 13px 15px;
    margin: 10px 0;
}
.ielts-example-q { font-size: 0.79rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 6px; }
.ielts-example-a { font-size: 0.8rem; color: var(--text); line-height: 1.65; }
.ielts-example-a strong { color: var(--primary-dark); border-bottom: 2px solid var(--primary); }

/* --- Công thức A.R.E.A --- */
.ielts-formula {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1.5px solid #fb923c;
    border-radius: 12px;
    padding: 15px 16px;
    margin: 12px 0;
}
.ielts-formula h5 {
    font-size: 0.82rem;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 10px;
    text-align: center;
}
.ielts-formula-list { display: flex; flex-direction: column; gap: 7px; }
.ielts-formula-item {
    font-size: 0.79rem;
    color: #7c2d12;
    line-height: 1.5;
}
.ielts-formula-item strong {
    display: inline-block;
    min-width: 82px;
    color: #b45309;
    font-weight: 800;
}

/* --- So sánh Less Common / Idiomatic --- */
.ielts-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 12px 0;
}
.ielts-compare-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.ielts-compare-card h5 { font-size: 0.78rem; font-weight: 800; margin-bottom: 6px; }
.ielts-compare-card p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.ielts-compare-card.compare-common h5 { color: var(--danger-dark); }
.ielts-compare-card.compare-idiom h5  { color: var(--success-dark); }
.ielts-compare-card.compare-common { border-left: 3px solid var(--danger); }
.ielts-compare-card.compare-idiom  { border-left: 3px solid var(--success); }

/* --- Tag chủ đề / dạng bài --- */
.ielts-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ielts-tag {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* --- Thẻ sách / tài liệu tham khảo --- */
.ielts-books { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ielts-book {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.ielts-book-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}
.ielts-book-level {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    white-space: nowrap;
}
.ielts-book p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* --- Lưới thẻ dạng bài / chủ đề (Writing Task 2, Speaking Part 2) --- */
.ielts-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 12px 0;
}
.ielts-type-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.ielts-type-card h5 { font-size: 0.8rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 5px; }
.ielts-type-card p { font-size: 0.77rem; color: var(--text-muted); line-height: 1.5; font-style: italic; margin: 0; }

@media (min-width: 600px) {
    .ielts-compare { grid-template-columns: 1fr 1fr; }
    .ielts-type-grid { grid-template-columns: 1fr 1fr; }
    .ielts-header-text h4 { font-size: 0.98rem; }
    .ielts-block-body { font-size: 0.85rem; }
}
/* ===================================================================
   ===== LUYỆN VIẾT (kỹ năng Viết) — 3 giai đoạn =====
   =================================================================== */

/* ----- Khối giới thiệu chung mỗi giai đoạn ----- */
.wr-sub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.wr-sub-tab {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.wr-sub-tab.active { border-color: var(--primary); color: #fff; background: var(--primary); }

.wr-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.wr-chip {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.wr-chip.active { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }

.wr-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 0;
    margin-bottom: 10px;
}
.wr-back-link:hover { text-decoration: underline; }

/* ----- Từ khoá bắt buộc (Giai đoạn 1) ----- */
.wr-keyword-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.wr-keyword-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.82rem;
    border: 1px solid var(--border-strong);
}
.wr-keyword-chip.is-used { background: var(--success-light); color: var(--success-dark); border-color: var(--success); }

.wr-compose-textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    background: var(--surface);
    color: var(--text);
}
.wr-compose-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); }
.wr-compose-textarea.wr-tall { min-height: 220px; }

.wr-word-count { text-align: right; font-size: 0.75rem; color: var(--text-light); margin-top: 4px; }
.wr-word-count.is-short { color: var(--warning); font-weight: 700; }
.wr-word-count.is-ok { color: var(--success-dark); font-weight: 700; }

/* ----- Kết quả chấm AI (dùng chung cho cả 3 giai đoạn) ----- */
.wr-ai-feedback {
    margin-top: 16px;
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
}
.wr-ai-feedback.is-correct { border-color: var(--success); background: var(--success-light); }
.wr-ai-feedback.is-wrong { border-color: var(--danger); background: #fef2f2; }
.wr-ai-feedback-head { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 8px; font-size: 0.92rem; }
.wr-ai-feedback-body { font-size: 0.86rem; line-height: 1.65; color: var(--text); white-space: pre-line; }
.wr-ai-feedback-body b { color: var(--primary-dark); }
.wr-band-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    margin-left: 6px;
}
.wr-criteria-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.wr-criteria-row { display: flex; gap: 8px; font-size: 0.82rem; align-items: flex-start; }
.wr-criteria-row b { flex: 0 0 auto; color: var(--primary-dark); min-width: 108px; }

.wr-sample-toggle {
    margin-top: 12px;
    background: none;
    border: 1.5px dashed var(--border-strong);
    border-radius: 10px;
    padding: 8px 12px;
    width: 100%;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-dark);
    cursor: pointer;
}
.wr-sample-box { margin-top: 8px; font-size: 0.85rem; line-height: 1.6; background: var(--surface); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); white-space: pre-line; }

.wr-loading { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.88rem; }
.wr-loading::before { content: "⏳ "; }

/* ----- Giai đoạn 2a: Email công sở ----- */
.wr-level-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.wr-level-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 140px;
    text-align: center;
}
.wr-level-btn.active { border-color: var(--primary); color: #fff; background: var(--primary); }
.wr-scaffold-box {
    background: var(--warning-light);
    border: 1px dashed var(--warning);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.83rem;
    line-height: 1.6;
    white-space: pre-line;
    margin-bottom: 12px;
    color: #7a5300;
}

/* ----- Giai đoạn 2b: Nhắn tin / chat giả lập ----- */
.wr-glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.wr-glossary-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.wr-glossary-abbr { font-weight: 800; color: var(--primary-dark); font-size: 0.85rem; }
.wr-glossary-full { font-size: 0.72rem; color: var(--text-muted); }
.wr-glossary-vi { font-size: 0.74rem; color: var(--text); margin-top: 2px; }

.wr-chat-window {
    max-width: 560px;
    margin: 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    max-height: 480px;
    overflow-y: auto;
}
.wr-msg { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 0.87rem; line-height: 1.5; }
.wr-msg-them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.wr-msg-me { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.wr-msg-note { align-self: center; font-size: 0.72rem; color: var(--text-light); font-style: italic; text-align: center; }
.wr-chat-input-row { display: flex; gap: 8px; margin-top: 12px; max-width: 560px; margin-left: auto; margin-right: auto; }
.wr-chat-input-row input { flex: 1; border: 1.5px solid var(--border); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 0.87rem; }
.wr-chat-input-row input:focus { outline: none; border-color: var(--primary); }
.wr-chat-typing { align-self: flex-start; font-size: 0.78rem; color: var(--text-light); font-style: italic; }

/* ----- Giai đoạn 3: IELTS Task 1 / Task 2 ----- */
.wr-vocab-group { margin-bottom: 14px; }
.wr-vocab-group h5 { font-size: 0.82rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 6px; }
.wr-vocab-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-vocab-tags span { background: var(--primary-light); color: var(--primary-dark); border-radius: 999px; padding: 4px 10px; font-size: 0.76rem; font-weight: 600; }

.wr-t1-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 10px; }
.wr-t1-item-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: .15s; }
.wr-t1-item-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.08); border-color: var(--accent,#6d5bff); }
.wr-t1-item-card img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--border); }
.wr-t1-item-card-body { padding: 10px 12px; }
.wr-t1-item-type { font-size: 0.68rem; font-weight: 800; color: var(--primary-dark); text-transform: uppercase; }
.wr-t1-item-title { font-size: 0.83rem; font-weight: 700; margin-top: 2px; }
.wr-t1-chart-img { width: 100%; max-width: 480px; display: block; margin: 0 auto 14px; border-radius: 12px; border: 1px solid var(--border); }

.wr-t2-item-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto 10px; }
.wr-t2-item-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: .15s; }
.wr-t2-item-card:hover { border-color: var(--accent,#6d5bff); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.wr-t2-item-type { display: inline-block; font-size: 0.68rem; font-weight: 800; color: var(--primary-dark); background: var(--primary-light); border-radius: 999px; padding: 2px 9px; margin-bottom: 6px; }
.wr-t2-item-q { font-size: 0.87rem; font-weight: 600; line-height: 1.5; }

.wr-outline-toggle-btn { margin-bottom: 12px; }
.wr-area-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.wr-area-block { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 10px 12px; }
.wr-area-block label { display: block; font-size: 0.74rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 4px; }
.wr-area-block textarea { width: 100%; min-height: 44px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 0.82rem; }
@media (min-width: 700px) { .wr-area-grid { grid-template-columns: 1fr 1fr; } }

/* ----- Khung soạn nội dung (giảng viên) — dùng chung cho cả 3 giai đoạn ----- */
.wr-admin-box { max-width: 640px; margin: 0 auto 20px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px; }
.wr-admin-form { display: flex; flex-direction: column; gap: 12px; }
.wr-item-preview-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
/* ===================================================================
   ===== TAB "LUYỆN KỸ NĂNG" > "🗣️ NÓI" — GIAI ĐOẠN 1 =====
   Dùng lại tối đa các class sẵn có (kid-topic-card, ln2-*, thcs-translate-*,
   ln-quiz-card, ln-result-*...) — phần dưới đây chỉ thêm CSS cho những phần
   thật sự mới: khối ghi âm tự luyện (so khớp với đáp án mẫu) và các nhãn
   (tag) người lạ/người quen, formal/informal.
   =================================================================== */

/* Khối "tình huống" hiển thị trong bài Mở lời hội thoại */
.ls-situation-box {
    max-width: 460px;
    margin: 0 auto 14px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e2e2e6);
    border-radius: 14px;
    padding: 16px 18px;
    text-align: center;
}
.ls-situation-text { font-size: 15.5px; line-height: 1.55; }
.ls-tag-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.ls-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1.5px solid var(--border, #e2e2e6);
    background: var(--surface-2, #f7f7f9);
}
.ls-tag-stranger { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.ls-tag-acquaintance { color: #0369a1; border-color: #7dd3fc; background: #f0f9ff; }
.ls-tag-formal { color: var(--primary-dark, #4c3fcf); border-color: var(--primary, #6d5bff); background: var(--primary-light, #eeebff); }
.ls-tag-informal { color: var(--success-dark, #059669); border-color: var(--success, #10b981); background: var(--success-light, #d1fae5); }

/* Khối ghi âm tự luyện — xuất hiện sau khi học viên trả lời/nghe mẫu, để tự
   ghi âm nói lại rồi nghe lại so khớp. Dùng chung cho mọi hoạt động Nói. */
.ls-record-box {
    max-width: 460px;
    margin: 16px auto 0;
    background: var(--surface-2, #f7f7f9);
    border: 1.5px dashed var(--primary, #6d5bff);
    border-radius: 14px;
    padding: 16px 18px;
    text-align: center;
}
.ls-record-hint { font-size: 13px; font-weight: 700; margin: 0 0 8px; opacity: .85; }
.ls-record-target {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--primary-dark, #4c3fcf);
    line-height: 1.5;
    margin-bottom: 12px;
}
.ls-record-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ls-record-btn.is-recording {
    background: #ff5d5d;
    border-color: #ff5d5d;
    color: #fff;
    animation: lsRecordPulse 1.1s infinite;
}
@keyframes lsRecordPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,93,93,.45); }
    50% { box-shadow: 0 0 0 8px rgba(255,93,93,0); }
}
.ls-record-status { font-size: 12.5px; opacity: .75; margin: 10px 0 0; min-height: 16px; }
.ls-record-audio { display: block; width: 100%; margin-top: 10px; }

/* [MỚI] Nút "Gửi cho giảng viên chấm" + danh sách ghi âm/nhận xét đã gửi — thêm vào cuối mọi
   khối .ls-record-box (dùng chung cho 5 dạng bài luyện Nói). */
.ls-submit-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.ls-submit-row .kid-btn:disabled { opacity: .5; cursor: default; }
.spk-item-comments { text-align: left; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.spk-item-comments:empty { margin-top: 0; }
.spk-comment-meta { font-size: 0.78rem; font-weight: 600; color: var(--text-light); margin: 0 0 6px; }

/* [MỚI] Khung nhúng phát "âm thanh mẫu" khi giảng viên dán link SoundCloud (thay vì file .mp3
   trực tiếp) vào ô link có sẵn — tự hiện ngay cạnh nút "Nghe..." tương ứng, dùng chung cho cả
   5 dạng bài Nói (Hỏi-đáp, Mở lời hội thoại, Shadowing, Miêu tả sự việc). */
.spk-model-embed-box { margin: 10px auto 0; max-width: 420px; }
.spk-model-embed-note { font-size: 0.76rem; color: var(--text-muted); margin-bottom: 4px; font-style: italic; }

/* [MỚI] Danh sách "Ghi âm của bạn" — mỗi mục là 1 câu hỏi/chuỗi học viên đã ghi âm, kèm nhãn
   trạng thái duyệt (dùng lại spkBuildCard() nên tự có màu vàng/đỏ/xanh theo trạng thái chấm). */
#lsmt-review-list { display: flex; flex-direction: column; gap: 14px; }
.spk-review-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--surface);
}
.spk-review-item-title { font-weight: 700; margin-bottom: 10px; color: var(--text); }

/* ===================================================================
   ===== GIAI ĐOẠN 2 — "Shadowing" & "Miêu tả sự việc" =====
   =================================================================== */

/* Shadowing: khối văn bản đoạn hội thoại đang luyện tập */
.lssh-text-box {
    max-width: 480px;
    margin: 0 auto 14px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e2e2e6);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
}
.lssh-text-main { font-size: 16.5px; line-height: 1.6; font-weight: 600; }
.lssh-text-vi { font-size: 13px; opacity: .7; margin-top: 8px; }
.lssh-speed-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }

/* Miêu tả sự việc: dải chip các bước sự việc theo thứ tự */
.ls-steps-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto 14px;
}
.ls-step-chip {
    position: relative;
    width: 128px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e2e2e6);
    border-radius: 12px;
    padding: 10px 8px 8px;
    text-align: center;
}
.ls-step-chip-num {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary, #6d5bff);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ls-step-chip-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; margin-bottom: 6px; background: var(--surface-2, #f7f7f9); }
.ls-step-chip-text { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.ls-step-chip-vi { font-size: 11px; opacity: .65; margin-top: 3px; }

/* Soạn nội dung "Miêu tả sự việc": thẻ từng bước trong khung admin */
.lsmt-step-card {
    border: 1.5px dashed var(--border, #e2e2e6);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lsmt-step-card-head { display: flex; align-items: center; justify-content: space-between; }
.lsmt-step-num { font-size: 12px; font-weight: 800; color: var(--primary-dark, #4c3fcf); }

/* ===================================================================
   ===== GIAI ĐOẠN 3 — Khung A.R.E.A + gợi ý chuyển ý + tốc ký ý tưởng =====
   =================================================================== */

.lsarea-box-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 640px) {
    .lsarea-box-grid { grid-template-columns: 1fr 1fr; }
}
.lsarea-box {
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e2e2e6);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lsarea-box label { font-size: 0.78rem; font-weight: 700; color: var(--primary-dark, #4c3fcf); }
.lsarea-box textarea { width: 100%; }

.lsarea-linker-group { display: flex; flex-direction: column; gap: 6px; }
.lsarea-linker-label { font-size: 12.5px; font-weight: 800; opacity: .8; margin-top: 6px; }
.lsarea-linker-label:first-child { margin-top: 0; }

.lsarea-timer-display { font-weight: 800; font-size: 15px; color: var(--primary-dark, #4c3fcf); }


/* ============================================================
   [FIX iPhone] Ngan Safari/iOS tu dong ZOOM man hinh khi hoc vien
   cham vao o nhap lieu (input/textarea/select) co co chu < 16px.
   Day la hanh vi mac dinh cua iOS Safari, khong co cach tat bang
   thuoc tinh CSS/JS thong thuong - cach duy nhat la dam bao co
   chu toi thieu 16px tren man hinh nho. Chi ap dung cho mobile,
   khong anh huong giao dien desktop da co san.
   ============================================================ */
@media (max-width: 599px) {
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* =====================================================
   [MỚI] HƯỚNG DẪN THAM QUAN LẦN ĐẦU (ONBOARDING TOUR)
   Kiểu "spotlight": 1 lớp chặn click trong suốt phủ toàn màn hình
   (.onboard-tour-catcher) + 1 khung sáng đi theo từng mục đang giới
   thiệu (.onboard-tour-spotlight, dùng box-shadow để tạo vùng tối
   xung quanh) + 1 hộp thoại mô tả (.onboard-tour-tooltip).
   ===================================================== */
.onboard-tour-catcher {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: transparent;
}
.onboard-tour-spotlight {
    position: fixed;
    z-index: 10001;
    border-radius: var(--radius);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.72);
    border: 2px solid var(--primary);
    pointer-events: none;
    transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
                width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
}
.onboard-tour-spotlight.is-centered {
    top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(15, 23, 42, 0.72);
}
.onboard-tour-tooltip {
    position: fixed;
    z-index: 10002;
    width: min(320px, calc(100vw - 32px));
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 18px 20px;
    opacity: 1;
    transition: opacity .2s ease;
}
.onboard-tour-tooltip.is-welcome {
    text-align: center;
    width: min(360px, calc(100vw - 32px));
}
.onboard-tour-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--primary-dark);
    background: var(--primary-light);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.onboard-tour-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}
.onboard-tour-desc {
    font-size: .87rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}
.onboard-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.onboard-tour-tooltip.is-welcome .onboard-tour-footer {
    justify-content: center;
}
.onboard-tour-dots {
    display: flex;
    gap: 5px;
}
.onboard-tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background .2s, transform .2s;
}
.onboard-tour-dot.active {
    background: var(--primary);
    transform: scale(1.3);
}
.onboard-tour-actions { display: flex; align-items: center; gap: 8px; }
.onboard-tour-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 4px;
}
.onboard-tour-skip:hover { color: var(--text); }
.onboard-tour-next {
    padding: 9px 18px;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 2px 8px var(--primary-glow);
}
.onboard-tour-next:hover { transform: translateY(-1px); }

@media (max-width: 599px) {
    .onboard-tour-tooltip { padding: 14px 16px; }
    .onboard-tour-title { font-size: .95rem; }
    .onboard-tour-desc { font-size: .82rem; }
}
/* ===== [MỚI] Mục "Liên từ" (Conjunction) trong Từ vựng — filter theo khối lớp cộng dồn ===== */
.conj-grade-filter{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface-2,#f7f7f9);border:1px solid var(--border,#e2e2e6);border-radius:12px;padding:12px 16px;margin-bottom:18px;}
.conj-grade-filter label{font-size:14px;font-weight:600;white-space:nowrap;}
.conj-grade-filter input[type="range"]{flex:1;min-width:140px;accent-color:var(--accent,#6d5bff);}
.conj-category{margin-bottom:26px;}
.conj-category-title{font-size:17px;font-weight:700;margin:0 0 4px;}
.conj-category-note{font-size:13px;opacity:.65;margin:0 0 14px;}
.conj-subgroup{margin-bottom:18px;}
.conj-subgroup-title{font-size:14.5px;font-weight:700;color:var(--accent,#6d5bff);margin:0 0 8px;padding-left:8px;border-left:3px solid var(--accent,#6d5bff);}
.conj-item-row{background:var(--surface-2,#f7f7f9);border:1px solid var(--border,#e2e2e6);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.conj-item-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
.conj-item-term{font-weight:700;font-size:15px;}
.conj-item-grade{font-size:11px;font-weight:700;background:var(--accent,#6d5bff);color:#fff;border-radius:20px;padding:2px 9px;white-space:nowrap;}
.conj-item-meaning{font-size:13.5px;opacity:.85;margin-bottom:3px;}
.conj-item-usage{font-size:13px;opacity:.65;margin-bottom:7px;font-style:italic;}
.conj-item-example{font-size:14px;background:#fff;border-radius:8px;padding:8px 10px;line-height:1.5;}
.conj-empty-msg{font-size:13.5px;opacity:.6;font-style:italic;padding:10px 2px;}

/* ===== [MỚI] Chế độ "Luyện tập" trong mục Liên từ ===== */
.conj-practice-progress{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:600;opacity:.75;margin-bottom:12px;}
.conj-practice-sentence{font-size:16px;line-height:1.6;background:var(--surface-2,#f7f7f9);border:1px solid var(--border,#e2e2e6);border-radius:12px;padding:16px 18px;margin-bottom:16px;}
.conj-practice-sentence .conj-blank-slot{display:inline-block;min-width:70px;border-bottom:2px solid var(--accent,#6d5bff);text-align:center;font-weight:700;color:var(--accent,#6d5bff);}
.conj-practice-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
@media (max-width:520px){.conj-practice-options{grid-template-columns:1fr;}}
.conj-practice-option-btn{padding:12px 14px;border-radius:12px;border:2px solid var(--border,#e2e2e6);background:var(--surface,#fff);cursor:pointer;font-size:15px;font-weight:600;text-align:left;transition:transform .1s;}
.conj-practice-option-btn:hover:not(:disabled){border-color:var(--accent,#6d5bff);transform:translateY(-1px);}
.conj-practice-option-btn:disabled{cursor:default;}
.conj-practice-option-btn.correct{background:var(--success-light,#d1fae5);border-color:var(--success,#10b981);color:var(--success-dark,#059669);}
.conj-practice-option-btn.wrong{background:#fee2e2;border-color:#ef4444;color:#b91c1c;}
.conj-practice-feedback{font-size:14px;border-radius:10px;padding:10px 14px;margin-bottom:14px;}
.conj-practice-feedback.correct{background:var(--success-light,#d1fae5);color:var(--success-dark,#059669);}
.conj-practice-feedback.wrong{background:#fee2e2;color:#b91c1c;}
.conj-practice-feedback .conj-practice-meaning{opacity:.8;font-weight:400;margin-top:4px;}
#conj-practice-result{text-align:center;padding:24px 12px;}
#conj-practice-result-text{font-size:18px;font-weight:700;margin-bottom:16px;}
.conj-item-structure{font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 9px;white-space:nowrap;}
.conj-item-structure-clause{background:#e0e7ff;color:#4338ca;}
.conj-item-structure-phrase{background:#ffedd5;color:#c2410c;}
.conj-practice-fill{display:flex;gap:10px;margin-bottom:14px;}
.conj-practice-fill input{flex:1;padding:12px 14px;border-radius:12px;border:2px solid var(--border,#e2e2e6);font-size:15px;}
.conj-practice-fill input:focus{outline:none;border-color:var(--accent,#6d5bff);}
.conj-practice-fill input.correct{border-color:var(--success,#10b981);background:var(--success-light,#d1fae5);}
.conj-practice-fill input.wrong{border-color:#ef4444;background:#fee2e2;}
.conj-item-mistake-badge{font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 9px;white-space:nowrap;background:#fef3c7;color:#b45309;}

/* ===== [MỚI] Podcast: khuyết cụm từ tùy chỉnh + luyện dịch cụm từ ===== */
.pod-blank-meaning{font-size:12.5px;font-weight:600;color:var(--accent,#6d5bff);background:#ede9fe;border-radius:8px;padding:1px 8px;white-space:nowrap;}
.pod-phrase-vi{font-size:17px;font-weight:600;background:var(--surface-2,#f7f7f9);border:1px solid var(--border,#e2e2e6);border-radius:12px;padding:14px 16px;margin-bottom:8px;}
.pod-phrase-target-hint{font-size:13px;opacity:.65;margin-bottom:10px;font-style:italic;}
#podcast-phrase-answer-input{width:100%;box-sizing:border-box;margin-bottom:10px;}