/* ============ GLOBAL VARIABLES & RESET ============ */
:root {
    /* Primary Colors - Wisdemy Red */
    --primary: #bb2649;
    --primary-dark: #a31e3d;
    --primary-light: #fce7eb;
    /* Slightly darker pink for better visibility */
    --primary-gradient: linear-gradient(135deg, #fce7eb 0%, #fff0f3 50%, #f9d8de 100%);

    /* Secondary Colors */
    --secondary: #f48fb1;
    --secondary-dark: #c2185b;

    /* Status Colors */
    --success: #4caf50;
    --danger: #f44336;
    --warning: #ff9800;
    --info: #2196f3;

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-hint: #999999;
    --text-white: #ffffff;

    /* Backgrounds */
    --bg-main: #FCE4EC;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f5;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* Borders */
    --border: #e0e0e0;
    --border-light: #eeeeee;
    --border-dashed: 2px dashed #e68a9f;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 10px 25px rgba(187, 38, 73, 0.3);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 50px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-family: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* KHÓA KHUNG: chỉ nội dung bên trong cuộn, tránh cả trang rung/kéo trên iPhone/iPad */
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ============ TYPOGRAPHY ============ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5em;
    line-height: 1.3;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
}

p {
    margin-bottom: 1rem;
}

/* ============ LAYOUT & STRUCTURE ============ */
#app {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    position: relative;
    overscroll-behavior-y: contain;
}

/* Screens */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.4s ease, visibility 0.4s;
    background: var(--bg-main);
}

.screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 20;
}

.hidden {
    display: none !important;
}

/* ============ MAIN APPLICATION LAYOUT ============ */
/* ============ MAIN APPLICATION LAYOUT ============ */
#main-screen {
    display: flex;
    height: 100vh;
    height: 100svh;
    background: var(--bg-main);
    width: 100%;
}

/* ============ FULL-SCREEN MONITORING MODE ============ */
/* ============ FULL-SCREEN MONITORING MODE ============ */
body.monitoring-mode #sidebar,
body.monitoring-mode #mobile-header,
body.monitoring-mode .sidebar-overlay {
    display: none !important;
}

body.monitoring-mode #main-screen {
    height: 100vh;
    height: 100svh;
}

body.monitoring-mode .content-area {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    padding: 0;
}

/* ============ WIS TEX FULL-SCREEN MODE ============ */
body.wistex-fullscreen #sidebar,
body.wistex-fullscreen .sidebar-overlay,
body.wistex-fullscreen .mobile-header {
    display: none !important;
}

body.wistex-fullscreen #main-screen {
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
}

body.wistex-fullscreen .content-area {
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sidebar Navigation */
.sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--bg-card);
    height: 100%;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ============ MAIN CONTENT AREA ============ */
.content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    padding: 0;
    background: var(--bg-main);
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.content-page {
    max-width: 100%;
    margin: 0;
    width: 100%;
    padding: 15px 40px 40px 40px;
}

.page-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #bb2649;
    margin: 0;
    margin-bottom: 0 !important;
    padding: 11px 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.page-header h1 {
    font-size: 18px;
    font-weight: 700;
    color: white !important;
    margin: 0;
    letter-spacing: -0.3px;
}

.page-header p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin: 4px 0 0 0;
}

/* Container Utilities for consistent alignment */
.with-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.content-page.with-container {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* ============ TOOLBARS & ALIGNMENT ============ */
.white-toolbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
    z-index: 900;
    padding: 4px 0;
    margin: 0;
}

.header-container {
    max-width: 100%;
    margin: 0;
    width: 100%;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.toolbar-container {
    max-width: 100%;
    margin: 0;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.toolbar-nav-wrapper {
    flex-grow: 1;
}

.toolbar-search-wrapper {
    margin-left: auto;
}


.page-header .header-container {
    padding-top: 11px;
    padding-bottom: 11px;
    flex-direction: column;
    align-items: flex-start;
}

.white-toolbar .toolbar-container {
    padding-top: 0;
    padding-bottom: 0 !important;
}

/* Adjust page-header to remove direct padding if using container */
.page-header.with-container {
    padding: 0;
}

/* ============ CARD COMPONENTS ============ */
.ui-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: auto;
}

.ui-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    color: var(--text-hint);
    width: 100%;
    grid-column: 1 / -1;
    background: white;
    border-radius: 20px;
    border: 1px dashed rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
    .empty-state {
        padding: 30px 20px;
    }

    .empty-state .material-icons-round {
        font-size: 48px !important;
        margin-bottom: 12px;
    }

    .empty-state p {
        font-size: 15px;
    }
}


.grade-card {
    padding: 16px 20px !important;
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
    height: auto !important;
}

.grade-icon {
    width: 42px !important;
    height: 42px !important;
}

.grade-icon .material-icons-round {
    font-size: 22px !important;
}

.grade-card h3 {
    font-size: 17px !important;
}

.grade-card p {
    font-size: 12.5px !important;
}


/* ============ GRID SYSTEMS ============ */
.ui-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 30px;
}

.ui-grid .ui-card {
    height: 100%;
}

.ui-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.ui-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Lưới chọn khối lớp (Ngân hàng lý thuyết & Ngân hàng bài tập):
   Mỗi khối một hàng riêng — Lớp 10 / Lớp 11 / Lớp 12 xếp dọc,
   mỗi thẻ trải kín toàn bộ bề ngang khung hình, tự co theo mọi khổ màn hình. */
#grades-grid,
#theory-grades-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch;
}

#grades-grid > .grade-card,
#theory-grades-grid > .grade-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 992px) {

    .ui-grid-2,
    .ui-grid-3 {
        grid-template-columns: 1fr;
    }

    .content-area {
        padding: 0;
    }

    .page-header {
        margin: 0;
        padding: 16px 20px;
    }
}

.sidebar-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    height: 56px;
    width: auto;
}

.header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.header-welcome {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.header-brand {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
}

.sidebar-user-card {
    margin: 0 12px 16px 12px;
    padding: 16px;
    background: var(--primary-light);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(187, 38, 73, 0.1);
}

.user-avatar {
    width: 52px;
    height: 52px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(187, 38, 73, 0.3);
    overflow: hidden;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Focus Timer Trigger --- */
.focus-trigger-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #fecdd3;
    margin-left: auto;
    margin-right: 0;
    box-shadow: 0 2px 8px rgba(187, 38, 73, 0.05);
}

.focus-trigger-mini:hover {
    background: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(187, 38, 73, 0.1);
}

.focus-trigger-mini .material-icons-round {
    font-size: 20px;
    color: var(--primary);
}

/* --- Focus Timer Overlay (Refined Styles) --- */
.focus-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    overflow-y: auto;
    transition: background-color 0.5s ease;
    font-family: 'Inter', system-ui, sans-serif;
    color: white;
}

.focus-overlay.mode-pomodoro {
    background-color: #bb2649;
    /* Wisdemy Red */
}

.focus-overlay.mode-short {
    background-color: #f48fb1;
    /* Requested Pink */
}

.focus-overlay.mode-long {
    background-color: #0f172a;
    /* WisTex Blue */
}

.focus-container {
    max-width: 480px;
    width: 100%;
    margin-top: 40px;
}

.focus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    width: 100%;
    max-width: 620px;
}

.focus-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.focus-sound-controls {
    display: flex;
    gap: 8px;
}

.btn-sound-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.btn-sound-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-sound-toggle.active {
    background: white;
    color: #333;
}

.focus-timer-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 20px 0 30px 0;
    text-align: center;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.focus-timer-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
}

.focus-tab-btn {
    background: transparent;
    border: none;
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    opacity: 0.8;
}

.focus-tab-btn.active {
    background: rgba(0, 0, 0, 0.15);
    opacity: 1;
}

.focus-timer-display {
    font-size: 120px;
    font-weight: 800;
    margin: 20px 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.focus-main-btn {
    background: white;
    color: #ba4949;
    border: none;
    padding: 0 48px;
    height: 60px;
    border-radius: 6px;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 0 #ebebeb;
    transition: all 0.1s;
    text-transform: uppercase;
}

.focus-main-btn:active {
    transform: translateY(6px);
    box-shadow: none;
}

.mode-short-break .focus-main-btn {
    color: #38858a;
}

.mode-long-break .focus-main-btn {
    color: #397097;
}

.focus-task-section {
    width: 100%;
}

.focus-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.focus-add-task-btn {
    background: rgba(0, 0, 0, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    width: 100%;
    padding: 20px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.focus-task-item {
    background: white;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #333;
    cursor: pointer;
    border-left: 6px solid #ccc;
}

.focus-task-item.active {
    border-left-color: #333;
}

.focus-task-item.completed {
    opacity: 0.6;
}

.focus-task-item.completed .task-title {
    text-decoration: line-through;
}

.focus-task-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.focus-task-check.checked {
    background: #ba4949;
    border-color: #ba4949;
    color: white;
}

.mode-short-break .focus-task-check.checked {
    background: #38858a;
    border-color: #38858a;
}

.mode-long-break .focus-task-check.checked {
    background: #397097;
    border-color: #397097;
}

.focus-task-input-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 12px;
    color: #333;
}

.focus-task-input {
    width: 100%;
    border: none;
    font-size: 22px;
    font-weight: 700;
    padding: 10px 0;
    margin-bottom: 20px;
    outline: none;
    font-family: inherit;
}

.focus-task-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #efefef;
    margin: 0 -24px -24px -24px;
    padding: 14px 24px;
    border-radius: 0 0 8px 8px;
}

.btn-task-cancel {
    background: transparent;
    border: none;
    color: #666;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 16px;
}

.btn-task-save {
    background: #333;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}

.nav-item-disabled {
    opacity: 0.5;
    filter: grayscale(1) blur(0.5px);
    cursor: not-allowed !important;
    pointer-events: none;
}

.nav-item-disabled * {
    color: #94a3b8 !important;
}

/* Navigation Menu */
.nav-menu {
    list-style: none;
    padding: 0 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar customization for sidebar */
.nav-menu::-webkit-scrollbar {
    width: 6px;
}

.nav-menu::-webkit-scrollbar-track {
    background: transparent;
}

.nav-menu::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

.nav-menu::-webkit-scrollbar-thumb:hover {
    background: var(--text-hint);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.2s ease;
    margin-bottom: 2px;
    position: relative;
}

.nav-item:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.nav-item.active {
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 600;
}

.nav-item .material-icons-round {
    font-size: 24px;
    color: inherit;
}

/* Ổ khoá Ngân hàng đề thi trên menu (chỉ giáo viên) */
.nav-lock-toggle {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.18s ease;
    /* Trạng thái MỞ: xanh lá */
    background: #dcfce7;
    color: #16a34a;
    border: 1.5px solid #86efac;
}

.nav-lock-toggle .material-icons-round {
    font-size: 18px !important;
    color: inherit !important;
}

.nav-lock-toggle:hover {
    transform: scale(1.12);
    background: #bbf7d0;
    border-color: #4ade80;
}

/* Trạng thái KHOÁ: đỏ */
.nav-lock-toggle.locked {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
    animation: navLockPulse 2s ease-in-out infinite;
}

.nav-lock-toggle.locked:hover {
    background: #fecaca;
    border-color: #f87171;
}

/* Chưa đọc được trạng thái (server bản cũ) */
.nav-lock-toggle.stale {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #cbd5e1;
    animation: none;
}

@keyframes navLockPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

/* Notification Badge */
.nav-badge,
.notif-badge {
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.3);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
    /* Đẩy xuống sát đáy thanh bên. Trước đây khối này nằm ngay dưới danh sách
       menu nên bị nhô lên giữa màn hình khi menu ngắn (rõ nhất trên điện thoại). */
    margin-top: auto;
    flex-shrink: 0;
}

.footer-menu {
    flex: none;
    padding-bottom: 10px;
}

.logout-item:hover {
    background-color: #fff0f3 !important;
    color: var(--danger) !important;
}

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--danger);
    background: transparent;
    color: var(--danger);
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.btn-logout:hover {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 10px rgba(244, 67, 54, 0.2);
}

/* Content Area */
.content {
    flex: 1;
    padding: 0;
    /* Removed padding to make header flush */
    overflow-y: auto;
    background: var(--bg-main);
    position: relative;
    height: 100%;
}

.content-enter {
    animation: fadeInSlideUp 0.4s ease-out forwards;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============ COMPONENTS ============ */

/* Buttons */
.btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-secondary:hover {
    background-color: var(--primary-light);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-icon .material-icons-round {
    font-size: 22px;
}

.btn-icon.danger {
    color: #ef4444;
    border-color: #fecaca;
    background: #fef2f2;
}

.btn-icon.danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.btn-back-artistic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 0 var(--primary);
    position: relative;
    top: 0;
}

.btn-back-artistic:hover {
    top: -2px;
    box-shadow: 0 4px 0 var(--primary);
    background: var(--primary-light);
}

.btn-back-artistic:active {
    top: 1px;
    box-shadow: 0 1px 0 var(--primary);
}

/* Forms & Inputs */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 20px;
}

.input-wrapper input,
.input-wrapper select,
.form-input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
    background: var(--bg-card);
    color: var(--text-primary);
}

.form-input {
    padding-left: 14px;
    /* No icon padding */
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(187, 38, 73, 0.1);
}

.input-wrapper input::placeholder {
    color: var(--text-hint);
}

.password-toggle {
    position: absolute;
    right: 14px;
    color: var(--text-hint);
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.password-toggle:hover {
    color: var(--primary);
}

/* Modal / Dialog */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    backdrop-filter: blur(4px);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-main);
}

.modal-header h2 {
    font-size: 18px;
    margin: 0;
    color: var(--text-primary);
}

.btn-close {
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-hint);
    transition: color 0.2s;
}

.btn-close:hover {
    color: var(--danger);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    font-size: 15px;
    color: var(--text-secondary);
}

.modal-footer {
    padding: 16px 30px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-main);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05);
    /* Reduced glare from white background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(2px);
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    width: 100%;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-small {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 16px 30px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    border-left: 5px solid var(--primary);
    font-weight: 500;
    max-width: 400px;
}

.toast.success {
    border-left-color: var(--success);
}

.toast.success .material-icons-round {
    color: var(--success);
}

.toast.error {
    border-left-color: var(--danger);
}

.toast.error .material-icons-round {
    color: var(--danger);
}

.toast.info {
    border-left-color: var(--info);
}

.toast.info .material-icons-round {
    color: var(--info);
}

@keyframes toastSlideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============ UTILITIES & CARDS ============ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 12px;
    border: 1px solid var(--border-light);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.error-msg {
    color: var(--danger);
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}

/* ============ RESPONSIVE (MOBILE VIEW) ============ */
.mobile-header {
    display: none;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px 20px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 90;
    min-height: 60px;
}

.mobile-header h2 {
    margin: 0;
    /* Cỡ chữ co theo bề ngang màn hình: máy hẹp thì nhỏ lại, máy rộng thì to
       ra, nhưng luôn nằm gọn MỘT hàng và không đụng nút menu / chuông.
       ("Thầy Phúc Võ" dài hơn "Wisdemy" nên cần giới hạn này.) */
    font-size: clamp(15px, 4.6vw, 19px);
    color: var(--primary);
    font-weight: 800;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    max-width: calc(100% - 130px);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mobile-header .menu-toggle {
    z-index: 2;
}

.mobile-header .mobile-notif {
    z-index: 2;
    min-width: 32px;
    display: flex;
    justify-content: flex-end;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
}

.menu-toggle:active {
    background: var(--bg-hover);
}

.mobile-notif {
    position: relative;
    cursor: pointer;
    color: var(--text-secondary);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    z-index: 95;
    opacity: 0;
    transition: opacity 0.3s;
}

@media (max-width: 900px) {
    .content {
        padding: 0;
    }
}

@media (max-width: 768px) {
    #main-screen {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -300px;
        /* Hide outside viewport */
        width: 280px;
        z-index: 100;
        box-shadow: var(--shadow-lg);
    }

    .sidebar.open {
        transform: translateX(300px);
        /* Bring into view via transform for smooth animation */
    }

    .mobile-header {
        display: flex;
    }

    .content-area {
        height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .search-active .search-close-btn {
        display: block;
    }
}

/* ========================================================
   MOBILE FULL-SCREEN FIX — iPhone safe area (mobile only)
   ======================================================== */
@media (max-width: 768px) {

    /* Kill any body/html margin or padding that causes white strips */
    html,
    body {
        padding: 0 !important;
        margin: 0 !important;
        /* White background = top strip behind notch is invisible (matches white header) */
        background: #ffffff;
        height: 100dvh;
        overflow: hidden;
    }

    /* Lock #app to TRUE screen edges, covering safe areas */
    #app {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* The mobile header already handles safe-area-inset-top internally via its padding */

    /* Scrollable area: fill remaining height below header
       and add gap for home indicator at bottom */
    .content-area {
        flex: 1 !important;
        overflow-y: auto !important;
        height: auto !important;
        /* Safely avoid content going under home indicator */
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }

    /* Online Teaching Schedule - Mobile Tweaks */
    .teacher-view-container .ls-grid-3,
    .teacher-view-container .ls-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .teacher-view-container .card {
        padding: 15px !important;
    }

    .teacher-view-container .form-group {
        margin-bottom: 12px !important;
    }
}


/* Mobile Optimization (Batch 2) */
@media (max-width: 480px) {
    .content-page {
        padding: 10px !important;
    }

    .question-card-v2 {
        padding: 15px !important;
        margin-bottom: 8px !important;
    }

    .q-content-v2 {
        font-size: 15px !important;
    }

    /* Compact Notifications */
    .notif-card {
        padding: 15px !important;
    }

    .notif-card h4 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    .notif-card p {
        font-size: 13px !important;
    }

    /* Expandable Search Bar UI */
    .toolbar-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
    }

    .toolbar-nav-wrapper {
        display: flex;
        align-items: center;
        flex: 1;
        overflow-x: auto;
        white-space: nowrap;
        transition: opacity 0.2s, transform 0.2s;
    }

    .search-active .toolbar-nav-wrapper {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    .toolbar-search-wrapper {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        left: auto;
        width: 48px;
        /* Icon width only initially */
        display: flex;
        align-items: center;
        background: white;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10;
        padding-left: 10px;
    }

    .search-active .toolbar-search-wrapper {
        left: 0;
        width: 100%;
        padding-right: 15px;
    }

    .search-toggle-btn {
        width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .search-input-expanding {
        flex: 1;
        border: none !important;
        padding: 0 10px !important;
        font-size: 14px !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s;
        background: transparent !important;
        box-shadow: none !important;
        height: 100% !important;
    }

    .search-active .search-input-expanding {
        opacity: 1;
        visibility: visible;
    }

    .search-close-btn {
        display: none;
        cursor: pointer;
        color: var(--text-hint);
        padding: 10px;
    }

    .search-active .search-close-btn {
        display: block !important;
    }
}

/* Tablet / Desktop fallback to ensure no breakage */
@media (min-width: 481px) {

    .search-toggle-btn,
    .search-close-btn {
        display: none !important;
    }

    .toolbar-search-wrapper {
        display: flex !important;
        position: static !important;
        width: auto !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .search-input-expanding {
        opacity: 1 !important;
        visibility: visible !important;
        width: 250px !important;
        background: #f8fafc !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        padding-left: 36px !important;
    }
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ============ FORM ELEMENTS ============ */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    background: white;
    outline: none;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(187, 38, 73, 0.1);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

/* ============ TAB NAVIGATION ============ */
.format-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.format-tab {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    background: #f1f5f9;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.format-tab:hover {
    background: #e2e8f0;
    color: var(--text-primary);
}

.format-tab.active {
    background: var(--primary);
    color: white !important;
    box-shadow: 0 4px 12px rgba(187, 38, 73, 0.2);
}

.format-tab .material-icons-round {
    font-size: 18px;
}

/* Bank filter row: 4 tabs luôn nằm 1 hàng, tự co theo bề rộng màn hình */
.bank-filter-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.format-tabs.fit-row {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 6px;
    width: 100%;
    margin: 0;
}

.format-tabs.fit-row .format-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 10px 6px;
    font-size: clamp(11px, 2.6vw, 14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.format-tabs.fit-row .format-tab .material-icons-round {
    font-size: clamp(13px, 3vw, 18px);
    flex-shrink: 0;
}

/* White Toolbar Tabs (WisGame Style) - Applied to Exercise/Theory/Student flows */
.white-toolbar .format-tabs {
    gap: 0;
    margin: 0;
    border-bottom: none;
    display: flex;
}

.white-toolbar .format-tab {
    padding: 16px 30px;
    background: none;
    border: none;
    border-radius: 0;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    font-size: 14.5px;
    border-bottom: 3px solid transparent;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    /* Fixed height for consistent toolbar look */
}

.white-toolbar .format-tab:hover {
    color: var(--primary);
    background: rgba(187, 38, 73, 0.03);
}

.white-toolbar .format-tab.active {
    color: var(--primary) !important;
    background: rgba(187, 38, 73, 0.05);
    border-bottom: 4px solid var(--primary);
    /* Slightly thicker line for emphasis */
    box-shadow: none;
}

/* --- Mobile Specific Toolbar & Tab Adjustments --- */
@media (max-width: 1024px) {

    /* Main Content Spacing */
    .content-page {
        padding: 12px !important;
    }

    /* Toolbar Layout (Back Btn + Card) */
    div[style*="display:flex; align-items:center; gap:15px; margin-bottom:24px"] {
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    /* Back Button Shrink */
    .back-btn-distinct {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }

    .back-btn-distinct .material-icons-round {
        font-size: 20px !important;
    }

    /* Inner Toolbar Card (Title + Search) */
    .ui-card[style*="flex:1; padding:12px 24px; display:flex; justify-content:space-between; align-items:center"],
    .ui-card[style*="flex:1; padding:12px 24px; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:15px"],
    .ui-card[style*="flex:1; padding:10px 20px; display:flex; justify-content:space-between; align-items:center"] {
        padding: 8px 12px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 44px;
    }

    .ui-card h3 {
        font-size: 14px !important;
        white-space: normal !important;
        margin: 0 !important;
    }

    /* Normalize mobile paddings to prevent overflow */
    .content-page,
    .content-page.with-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .toolbar-container,
    .header-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        gap: 10px !important;
    }

    /* Reduce inline padding for cards in toolbars */
    .content-page div[style*="align-items:center"]>.ui-card {
        padding: 8px 12px !important;
    }

    /* Search Input Shrink */
    #student-search-input {
        width: 100% !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 6px 12px 6px 30px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    #student-search-input+.material-icons-round {
        font-size: 16px !important;
        left: 8px !important;
    }

    /* Fix vertically stretched cards on real mobile devices */
    .ui-card,
    .stat-card {
        height: auto !important;
        min-height: unset !important;
    }

    /* Universal Overflow Fallback for all Cards on Mobile/Tablet */
    .ui-card {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }

    .ui-card>div[style*="display:flex"],
    .ui-card>div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    .ui-card img,
    .ui-card table {
        max-width: 100% !important;
        height: auto !important;
    }

    .ui-card table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-collapse: collapse !important;
    }

    .ui-grid,
    .ui-grid-2,
    .ui-grid-3,
    .ui-grid-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* White Toolbar Tabs Scrollable */
    .white-toolbar .format-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
    }

    .white-toolbar .format-tabs::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .white-toolbar .format-tab {
        padding: 0 15px !important;
        height: 42px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Breadcrumb Scrollable */
    .breadcrumb {
        white-space: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* Theory Search Input Shrink */
    #theory-search-input,
    #student-search-input,
    #question-search-input {
        width: 100% !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 6px 12px 6px 30px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    #theory-search-input+.material-icons-round,
    #student-search-input+.material-icons-round,
    #question-search-input+.material-icons-round {
        font-size: 16px !important;
        left: 8px !important;
    }

    /* Tablet Adjustments */
    @media (min-width: 481px) and (max-width: 1024px) {

        #theory-search-input,
        #student-search-input,
        #question-search-input {
            width: 250px !important;
        }

        /* iPad Matrix Row Adjustments */
        .matrix-row {
            gap: 8px !important;
            padding: 10px !important;
        }

        .m-row-num {
            min-width: 50px !important;
        }

        .m-row-chapter {
            min-width: 120px !important;
        }

        .m-row-topic {
            min-width: 130px !important;
        }

        .m-row-difficulty {
            flex-shrink: 0 !important;
        }
    }

    /* Wisdemy Letter: giảm padding khung để ô hồng bên trong rộng gần hết khung */
    .wisdemy-letter-frame { padding: 16px !important; }
    /* Chừa khoảng trên để tem đỏ "WISDEMY LETTER" không đè lên ô hồng */
    .wisdemy-letter-frame .wish-input-board { max-width: none !important; padding: 18px !important; margin-top: 30px !important; }

    /* Home Tabs: 2 lựa chọn nằm gọn trên 1 thanh, không cuộn ngang */
    .home-tabs {
        flex-wrap: nowrap !important;
        display: flex !important;
        min-height: 46px !important;
    }

    .home-tab {
        padding: 12px 4px !important;
        font-size: clamp(10.5px, 3vw, 14px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        gap: 5px !important;
    }

    .home-tab .material-icons-round {
        font-size: 16px !important;
        flex-shrink: 0;
    }

    /* Question Card Layout: Text then Image */
    .q-header-v2 {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .q-image-v2 {
        width: 100% !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        margin-top: 5px !important;
    }

    .q-image-v2 img {
        max-width: 100% !important;
        height: auto !important;
        display: inline-block !important;
    }
}

/* Home Navigation Tabs (Underline style) */
.home-tabs {
    display: flex;
    gap: 0;
    /* Thanh trắng cố định trên cùng, phủ HẾT bề ngang khung hình (phá padding 30px của container) */
    width: calc(100% + 60px) !important;
    max-width: none !important;
    margin: 0 -30px 26px;
    padding: 0 10px;
    border-bottom: 1px solid #eef0f3;
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.home-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

/* Bỏ khoảng đệm phía trên của khung Trang chủ để thanh trắng sát ngay mép trên */
.pink-theme-container {
    padding-top: 0 !important;
}

.ls-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.ls-grid-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.home-tab {
    padding: 14px 24px;
    border: none;
    background: none;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    /* Pull down to overlap parent border */
    font-family: 'Be Vietnam Pro', sans-serif;
}

.home-tab:hover {
    color: var(--primary);
}

.home-tab.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

.home-tab .material-icons-round {
    font-size: 22px;

}

/* ============ TEST TAKING INTERFACE ============ */
.test-header.full-width {
    background: var(--primary);
    color: white;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1001;
}

.test-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.test-info strong {
    font-size: 18px;
    font-weight: 800;
}

.test-timer {
    background: rgba(0, 0, 0, 0.15);
    padding: 8px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', monospace;
    font-weight: 700;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.test-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px;
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
    overflow: hidden;
    max-width: 100%;
    margin: 0;
}

.test-left-pane,
.test-right-pane {
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    border: 1px solid #e2e8f0;
}

.test-image-display {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.test-image-empty {
    text-align: center;
    color: #cbd5e1;
}

.test-image-empty .material-icons-round {
    font-size: 64px;
    margin-bottom: 12px;
}

.test-right-pane {
    padding: 30px;
}

.test-section-header {
    background: #f1f5f9;
    color: #64748b;
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.diff-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    margin-right: 8px;
}

.diff-badge.NB {
    background: #dcfce7;
    color: #166534;
}

.diff-badge.TH {
    background: #dbeafe;
    color: #1e40af;
}

.diff-badge.VD {
    background: #fef9c3;
    color: #854d0e;
}

.diff-badge.VDC {
    background: #fee2e2;
    color: #991b1b;
}

.test-option {
    border: 2px solid #f1f5f9 !important;
    background: white !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.test-option:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    transform: translateX(4px);
}

.test-option.selected {
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
    box-shadow: 0 4px 12px rgba(187, 38, 73, 0.1);
}

.ans-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.test-option.selected .ans-btn {
    background: var(--primary);
    color: white;
}

/* Base footer nav in grid */
.test-footer-nav {
    grid-column: span 2;
    background: var(--primary);
    padding: 12px 30px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}

/* Fixed footer when taking test */
body.taking-test .test-footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    border-radius: 0;
    padding: 12px 40px;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.2);
}

body.taking-test #sidebar,
body.taking-test .mobile-header {
    display: none !important;
}

body.taking-test .content-area {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

body.taking-test .test-layout {
    height: calc(100vh - 70px - 70px);
    height: calc(100dvh - 70px - 70px);
    /* Room for header and fixed footer */
    margin-bottom: 70px;
    /* Offset for fixed footer */
}

.test-nav-circles {
    display: none;
    /* Moved to summary popup */
}

.test-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #bb2649;
    padding: 10px 20px;
    color: white;
}

.footer-stat-container {
    background: white;
    color: #bb2649;
    padding: 6px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 120px;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.stat-value {
    font-size: 16px;
    font-weight: 800;
    color: #bb2649;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.stat-value span {
    font-size: 18px;
}


.footer-center {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.footer-center:active {
    transform: scale(0.9);
}

.summary-grid-popover {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 90%;
    max-width: 400px;
    background: white;
    border-radius: 24px 24px 12px 12px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    z-index: 2500;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-grid-popover.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.summary-grid-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.summary-grid-popover-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
    font-weight: 800;
}

.summary-popup-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    overflow-y: auto;
    max-height: 350px;
    padding: 4px;
}

/* Custom scrollbar for popover */
.summary-popup-grid::-webkit-scrollbar {
    width: 4px;
}

.summary-popup-grid::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.summary-circle {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2.5px solid transparent;
}

.summary-circle.answered {
    background: #10b981;
    color: white;
}

.summary-circle.flagged {
    background: #f59e0b;
    color: white;
}

.summary-circle.active {
    border-color: #bb2649;
    background: white;
    color: #bb2649;
}

.popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2400;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(2px);
}

.popover-overlay.active {
    opacity: 1;
    visibility: visible;
}


.nav-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.nav-circle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.nav-circle.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.nav-circle.answered {
    background: #4caf50;
    color: white;
}

.nav-circle.flagged {
    background: #f59e0b !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.test-nav-stats {
    background: white;
    color: var(--primary);
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tf-btn {
    padding: 8px 24px;
    border-radius: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s;
    color: #64748b;
}

.tf-btn.selected[data-val="D"] {
    background: #10b981;
    color: white;
    border-color: #10b981;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

.tf-btn.selected[data-val="S"] {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

.tf-btn.active-true {
    background: #10b981 !important;
    color: white !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

.tf-btn.active-false {
    background: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

.short-answer-box {
    width: 50px !important;
    height: 50px !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    padding: 0 !important;
}

.short-answer-box.filled {
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
}

/* Hide mobile image pane on desktop initially */
.mobile-img-pane {
    display: none;
}

@media (max-width: 1100px) {
    .test-layout {
        grid-template-columns: 1fr;
        padding: 10px 15px;
        height: calc(100vh - 120px);
        height: calc(100dvh - 120px);
        overflow: hidden;
        margin-top: 60px;
        gap: 0;
        display: flex;
        flex-direction: column;
    }

    .test-left-pane {
        display: none !important;
    }

    .test-right-pane {
        padding: 15px;
        flex: 1;
        overflow-y: auto;
        border-radius: 12px;
        border: none;
        box-shadow: none;
    }

    .mobile-img-pane {
        display: block;
    }

    .test-header.full-width {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2000;
        height: 70px;
    }

    body.taking-test .test-footer-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2000;
        height: auto;
        border-radius: 0 !important;
        padding: 8px 16px !important;
        grid-column: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #bb2649;
    }

    .footer-stat-container {
        padding: 5px 12px;
        min-width: 100px;
        border-radius: 12px;
    }

    .stat-label {
        font-size: 10px;
    }

    .stat-value {
        font-size: 14px;
    }

    .stat-value span {
        font-size: 16px;
    }


}

.hide-mobile-text {
    display: inline;
}

@media (max-width: 600px) {
    .hide-mobile-text {
        display: none !important;
    }
}

/* --- Matrix Test Mobile Refinements --- */
@media (max-width: 480px) {
    .mt-config-container {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .mt-config-section.right {
        padding-left: 0 !important;
        border-left: none !important;
        border-top: 1px solid var(--border);
        padding-top: 20px;
    }

    .matrix-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .matrix-count-container {
        width: 100%;
        justify-content: space-between;
    }

    .matrix-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .m-row-num {
        min-width: 50px !important;
    }

    .m-row-src {
        width: 65px !important;
        text-align: center !important;
        padding: 8px 4px !important;
    }

    .m-row-chapter,
    .m-row-topic {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 0 100% !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    .m-row-difficulty {
        margin: 0 auto !important;
    }

    /* Strict Mobile Wraps for Wrong Answers */
    .mt-wrong-list-grid,
    .mt-wrong-options-grid,
    .mt-wrong-list-grid>div,
    .mt-wrong-options-grid>div {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    /* Force format tabs to stay on one horizontal line */
    .format-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
    }

    .format-tabs::-webkit-scrollbar {
        display: none;
    }

    .format-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Force long math strings and text to wrap */
    .mt-wrong-list-grid * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Give a little breathing room to the screen edges if necessary */
    .mt-container-mobile {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ============ UNIVERSAL NOTIFICATION UI ============ */
html.no-scroll,
body.no-scroll,
.content-area.no-scroll,
.screen.no-scroll,
main.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
}

.notif-target-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.notif-target-btn:active {
    background: #f1f5f9;
    transform: scale(0.98);
}

.notif-target-btn.active {
    background: #bb264910;
    border-color: var(--primary);
    color: var(--primary);
}

/* Modal / Bottom Sheet Popup Styles */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 11000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.bottom-sheet-overlay.active {
    opacity: 1;
    visibility: visible;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 20px;
    z-index: 11001;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

.bottom-sheet.active {
    transform: translateY(0);
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 10px;
    margin: 0 auto 15px;
}

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.sheet-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
    scrollbar-width: thin;
    overscroll-behavior-y: contain;
}

/* Tablet & Desktop: make it a centered Modal instead of Bottom Sheet */
@media (min-width: 769px) {
    .bottom-sheet {
        top: 50%;
        left: 50%;
        width: 500px;
        height: auto;
        max-height: 80vh;
        border-radius: 24px;
        transform: translate(-50%, -40%) scale(0.95);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        bottom: auto;
    }

    .bottom-sheet.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
    }

    .sheet-handle {
        display: none;
    }
}

/* Standardized breadcrumb colors in page header */
.page-header .breadcrumb {
    color: white !important;
}

/* Hide empty breadcrumb to prevent it from creating extra gap */
.page-header .breadcrumb:empty {
    display: none !important;
}

.page-header .breadcrumb span,
.page-header .breadcrumb a {
    color: white !important;
    opacity: 1 !important;
}

/* Library Mobile Search Toggle */
@media (max-width: 768px) {

    .toolbar-container.search-active #library-actions,
    .toolbar-container.search-active #sim-teacher-actions {
        display: none !important;
    }

    .toolbar-container.search-active .toolbar-search-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .toolbar-container.search-active .search-input-expanding {
        width: 100% !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .toolbar-container.search-active .close-search {
        display: block !important;
    }

    .toolbar-container:not(.search-active) .search-toggle-btn {
        display: flex !important;
        width: 40px;
        height: 40px;
        background: #f1f5f9;
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        color: #64748b;
        cursor: pointer;
    }

    .toolbar-container:not(.search-active) .search-input-container {
        display: none !important;
    }
}

/* ====================================================
   MOBILE BOTTOM WHITE STRIP FIX — iPhone home indicator
   Targets ONLY phone screens (max 768px)
   ==================================================== */

/* PWA ONLY: apply safe-area bottom padding in standalone mode (Home Screen)
   This does NOT affect Safari browser view — only when opened as PWA */
@media (display-mode: standalone) and (max-width: 768px) {

    /* TOP BAR: push header below notch + extend red area 12px downward */
    .test-header.full-width {
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
        padding-bottom: 27px !important;
        /* base 15px + 12px more */
    }

    /* BOTTOM BAR: center content vertically (equal top/bottom padding) */
    body.taking-test .test-footer-nav {
        display: flex !important;
        align-items: center !important;
        padding-top: 6px !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    }



    /* Sidebar bottom safe area */
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Content area avoid home indicator */
    .content-area {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}

/* ============ PREMIUM AI BUTTON & FEEDBACK ============ */
.btn-ai-v2 {
    background: linear-gradient(135deg, #fff1f2, #ffe4e6);
    color: #bb2649 !important;
    border: 1px solid #fecdd3 !important;
    padding: 8px 18px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(187, 38, 73, 0.1);
    margin-left: auto;
    height: auto !important;
    width: auto !important;
}

.btn-ai-v2:hover {
    background: linear-gradient(135deg, #ffe4e6, #fecdd3);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(187, 38, 73, 0.15);
    border-color: #fda4af !important;
}

.btn-ai-v2:active {
    transform: translateY(0);
}

.btn-ai-v2 .material-icons-round {
    font-size: 20px !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

.answer-feedback.q-answer-v2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 15px;
    flex-wrap: nowrap;
    margin-top: 10px;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.feedback-text-v2 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
}

/* ============ MONITORING DASHBOARD ============ */
.monitoring-header {
    background: #bb2649;
    padding: 12px 30px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(187, 38, 73, 0.2);
    position: sticky;
    top: 0;
    z-index: 1100;
}

.monitoring-title-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

.monitoring-logo {
    height: 36px;
    filter: brightness(0) invert(1);
}

.monitoring-info h1 {
    font-size: 16px;
    margin: 0;
    color: white !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
}

.monitoring-info p {
    font-size: 11px;
    margin: 0;
    opacity: 0.8;
}

.monitoring-content {
    padding: 24px 30px;
    background: var(--bg-main);
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
    overflow-y: auto;
}

.monitoring-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 24px;
}

.stat-box {
    background: white;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #f1f5f9;
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
}

.monitoring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

.student-monitor-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.student-monitor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.06);
}

.student-monitor-card.warning {
    border: 2px solid #f59e0b;
    background: #fffdf0;
}

.student-monitor-card.danger {
    border: 2px solid #ef4444;
    background: #fef2f2;
}

.student-monitor-card.locked {
    opacity: 0.7;
    filter: grayscale(0.2);
    background: #f1f5f9;
}

.monitor-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.monitor-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.monitor-name-wrap {
    overflow: hidden;
}

.monitor-name {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monitor-sub {
    font-size: 11px;
    color: #64748b;
}

.monitor-status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.status-online {
    background: #dcfce7;
    color: #16a34a;
}

.status-offline {
    background: #f1f5f9;
    color: #64748b;
}

.status-blur {
    background: #fef3c7;
    color: #d97706;
}

.monitor-details {
    margin-top: 12px;
}

.monitor-detail {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #475569;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.monitor-detail:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-value {
    font-weight: 700;
    color: #1e293b;
}

.detail-icon {
    font-size: 15px;
    opacity: 0.5;
}

.btn-monitor-close {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 7px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-monitor-close:hover {
    background: white;
    color: #bb2649;
    transform: translateY(-1px);
}

/* ============ BLINKING EFFECT FOR UPCOMING EXAMS ============ */
@keyframes blink-red-glow {
    0% {
        background-color: #bb2649;
        box-shadow: 0 0 0 0 rgba(187, 38, 73, 0.7);
    }

    50% {
        background-color: #ef4444;
        box-shadow: 0 0 0 10px rgba(187, 38, 73, 0);
    }

    100% {
        background-color: #bb2649;
        box-shadow: 0 0 0 0 rgba(187, 38, 73, 0);
    }
}

.btn-blink {
    animation: blink-red-glow 1.5s infinite;
    border-color: transparent !important;
    color: white !important;
    font-weight: 800 !important;
}

/* Material Icons Global Alignment Fix */
.material-icons-round,
.material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ============ ONLINE SCHEDULE REDESIGN ============ */
.ls-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ls-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ls-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border-color: #e2e8f0;
}

/* New Layout: Header & Back Button */
.focus-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    margin-bottom: 20px;
    width: 100%;
}

.focus-back-container {
    width: 100%;
    max-width: 480px;
    /* Exact match with timer card width */
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

.btn-focus-back-icon {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
    font-size: 14px;
}

.btn-focus-back-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Precise UI Alignment */
.focus-header-bold {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 40px;
    position: relative;
    min-height: 100px;
}

.focus-logo-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.focus-logo-centered .material-icons-round {
    font-size: 32px;
}

.focus-logo-centered .focus-title {
    font-size: 24px;
    font-weight: 800;
}

/* Container & Card Alignment */
.focus-container {
    max-width: 480px;
    /* Unified width */
    width: 100%;
    margin: 0 auto;
}

/* Card Header: Tabs Left, Icons Right */
.focus-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    width: 100%;
}

.focus-timer-tabs-mini {
    display: flex;
    gap: 4px;
}

.focus-tab-btn-mini {
    background: transparent;
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

.focus-tab-btn-mini:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.focus-tab-btn-mini.active {
    background: rgba(0, 0, 0, 0.2);
    opacity: 1;
}

.focus-card-controls-right {
    display: flex;
    gap: 6px;
}

.focus-card-icon {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.focus-card-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Big Focus Mode (Bigger & Distraction-Free) */
.focus-container.big-focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
}

/* Show only the Exit Eye if needed, or hide all card controls */
.big-focus-task-name {
    font-size: 28px;
    font-weight: 700;
    margin-top: 20px;
    opacity: 0.95;
    text-align: center;
    animation: fadeIn 0.5s ease;
    color: white;
}

/* Smaller START Button */
.focus-main-btn-smaller {
    background: white;
    color: #ba4949;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 0 #ebebeb;
    transition: all 0.1s;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.focus-main-btn-smaller:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #ebebeb;
}

/* Zen Music Selector */
.music-selector-container-zen {
    position: relative;
    display: inline-block;
}

.music-popup-zen {
    position: absolute;
    top: 40px;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    display: none;
    z-index: 1000;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.music-popup-zen.show {
    display: block;
    animation: fadeInDownZen 0.2s ease;
}

@keyframes fadeInDownZen {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.music-option-zen {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}

.music-option-zen:last-child {
    border-bottom: none;
}

.music-option-zen:hover {
    background: #f8f9fa;
    color: #ba4949;
}

.music-option-zen.active {
    background: #fff5f5;
    color: #ba4949;
}

/* Zen Deep Focus Refinements */
.focus-container.deep-focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.focus-container.deep-focus .focus-timer-card {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: none;
}

.focus-container.deep-focus .focus-timer-display {
    font-size: 80px;
    margin: 20px 0;
}

.focus-container.deep-focus .focus-main-btn {
    padding: 10px 30px;
    font-size: 16px;
    min-width: 120px;
}

.focus-container.deep-focus .focus-eye-btn {
    top: 10px;
    right: 10px;
    opacity: 0.5;
}

.focus-container.deep-focus .focus-eye-btn:hover {
    opacity: 1;
}

.focus-eye-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.focus-eye-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ls-badge {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ls-badge-grade {
    background: #f1f5f9;
    color: #475569;
}

.ls-badge-grade-10 {
    background: #fee2e2;
    color: #991b1b;
}

.ls-badge-grade-11 {
    background: #dbeafe;
    color: #1e40af;
}

.ls-badge-grade-12 {
    background: #dcfce7;
    color: #166534;
}

.ls-badge-status-live {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fee2e2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ls-badge-status-live::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
}

.ls-content h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.4;
}

.ls-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}

.ls-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.ls-meta-item span {
    font-size: 18px;
    color: #94a3b8;
}

.ls-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed #f1f5f9;
}

.btn-ls-join {
    flex: 1;
    background: #bb2649;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}

.btn-ls-join:hover {
    background: #a01d3b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(187, 38, 73, 0.2);
}

.btn-ls-delete {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid #fee2e2;
    background: #fff;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.btn-ls-delete:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}
/* ============ MOBILE PHONE RESPONSIVE FIXES (<= 640px) — added 2026-07-24 ============ */
@media (max-width: 640px) {
    /* Giảm padding trang cho vừa màn hình hẹp, tránh tràn bố cục */
    .content-page { padding: 12px 16px 32px 16px !important; }

    /* Khung "Bổ trợ kiến thức" / Lý thuyết: xếp dọc thay vì 2 cột chật gây tràn chữ */
    .sup-split-wrapper { flex-direction: column !important; height: auto !important; overflow: visible !important; }
    .sup-split-wrapper > #sup-sidebar,
    .sup-split-wrapper > #sup-sidebar-manage {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 240px;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .sup-split-wrapper > #sup-main-content { padding: 20px 16px !important; }

    /* Bảng (lịch sử phản xạ...) : bỏ table-layout fixed để chữ xuống dòng đúng từ, không vỡ từng chữ cái */
    .ui-table { table-layout: auto !important; }
    .ui-table th, .ui-table td { padding: 10px 8px !important; font-size: 12.5px !important; }

    /* Tiêu đề trang không quá lớn trên điện thoại */
    .page-header h1 { font-size: 20px !important; line-height: 1.25 !important; }
    .page-header p { font-size: 12.5px !important; }

    /* Thanh công cụ (chọn khối + tìm kiếm) tự xuống hàng nếu chật */
    .white-toolbar .toolbar-container { flex-wrap: wrap !important; gap: 8px !important; }
    .white-toolbar .toolbar-container > div:last-child { width: 100% !important; }

    /* ==== Lò rèn phản xạ (chỉ điện thoại) ==== */
    /* Tab "Trận chiến" / "Lịch sử rèn luyện" luôn 1 hàng, chữ nhỏ */
    .reflex-white-tab { padding: 0 12px !important; gap: 0 !important; justify-content: space-around !important; }
    .reflex-white-tab .reflex-tab-btn { font-size: 13px !important; padding: 12px 4px !important; margin-right: 0 !important; white-space: nowrap !important; flex: 0 1 auto !important; }

    /* Bảng lịch sử rèn luyện: chiếm full width, chữ 1 hàng không bị cắt */
    .reflex-container { padding: 14px 8px !important; max-width: 100% !important; }
    .reflex-container .ui-card { border-radius: 12px !important; }
    .reflex-container .ui-table { table-layout: auto !important; width: 100% !important; }
    .reflex-container .ui-table th,
    .reflex-container .ui-table td { padding: 8px 5px !important; font-size: 10.5px !important; white-space: nowrap !important; text-align: center !important; }
    .reflex-container .ui-table th:first-child,
    .reflex-container .ui-table td:first-child { padding-left: 8px !important; text-align: left !important; }
    .reflex-container .ui-table td span { font-size: 10.5px !important; }
    .reflex-container .ui-table td span[style*="16px"] { font-size: 12px !important; }
    .reflex-container .ui-table .material-icons-round { font-size: 18px !important; }
}

/* ============ NGÂN HÀNG 2 CỘT (Lý thuyết / Bài tập) — added 2026-07-24 ============ */
.bank-split { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; }
.bank-tree { width: 340px; flex-shrink: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; border-right: 1px solid #d5dbe3; background: #e4e9f0; padding: 10px 8px; }
.bank-tree .bank-chapter { background: #fff; border: 1px solid #dde3ea; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.bank-tree .bank-children { background: #fbfcfd; }
.bank-panel { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 24px; background: #fff; min-width: 0; }

.bank-chapter { border-radius: 10px; margin-bottom: 4px; overflow: hidden; }
.bank-chapter-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; border-radius: 10px; font-weight: 700; color: #1e293b; font-size: 14px; transition: background .15s; }
.bank-chapter-head:hover { background: #f1f5f9; }
.bank-chapter-head .chev { transition: transform .2s; color: #94a3b8; font-size: 20px; }
.bank-chapter.open .bank-chapter-head .chev { transform: rotate(90deg); }
.bank-chapter-count { margin-left: auto; font-size: 12px; font-weight: 700; color: #bb2649; background: #bb26491a; padding: 1px 9px; border-radius: 20px; }
.bank-children { display: none; padding: 2px 0 6px 10px; }
.bank-chapter.open .bank-children { display: block; }
.bank-leaf { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 2px 0; cursor: pointer; border-radius: 8px; color: #475569; font-size: 13.5px; font-weight: 500; border-left: 2px solid transparent; transition: all .15s; }
.bank-leaf:hover { background: #f1f5f9; color: #1e293b; }
.bank-leaf.active { background: #bb26490f; color: #bb2649; font-weight: 700; border-left-color: #bb2649; }
.bank-leaf-count { margin-left: auto; font-size: 12px; font-weight: 600; color: #94a3b8; }
.bank-leaf.active .bank-leaf-count { color: #bb2649; }

/* ----- CẤP BÀI: nằm giữa Chương và Dạng bài ----- */
.bank-lesson { border-radius: 9px; margin: 3px 0; overflow: hidden; }
.bank-lesson-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer; border-radius: 9px; font-weight: 700; color: #334155; font-size: 13.5px; background: #f4f6f9; border-left: 3px solid #cbd5e1; transition: background .15s; }
.bank-lesson-head:hover { background: #eaeef4; }
.bank-lesson-head .chev { transition: transform .2s; color: #94a3b8; font-size: 18px; }
.bank-lesson.open .bank-lesson-head .chev { transform: rotate(90deg); }
.bank-lesson.open .bank-lesson-head { border-left-color: #bb2649; color: #bb2649; }
.bank-lesson-count { font-size: 11.5px; font-weight: 700; color: #64748b; background: #e2e8f0; padding: 1px 8px; border-radius: 20px; }
.bank-lesson-children { display: none; padding: 2px 0 4px 12px; }
.bank-lesson.open .bank-lesson-children { display: block; }

.bank-panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #94a3b8; text-align: center; padding: 40px; }
.bank-panel-empty .material-icons-round { font-size: 56px; margin-bottom: 12px; color: #cbd5e1; }

/* Nút quay lại trong panel ngân hàng — mặc định ẩn (web & iPad không thấy) */
.mobile-back-bar { display: none; align-items: center; margin: 0 0 12px 0; }
.mobile-back-bar button { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #bb2649; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 10px; cursor: pointer; }
.mobile-back-bar button .material-icons-round { font-size: 20px; }

/* Lớp phủ phóng to ảnh (chỉ dùng trên điện thoại) */
.img-zoom-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,0.9); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .15s ease; }
.img-zoom-overlay img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.img-zoom-close { position: fixed; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

@media (max-width: 640px) {
    /* NGÂN HÀNG 1 CỘT: mặc định chỉ hiện cây; chọn dạng/bài -> hiện panel + nút quay lại */
    .bank-split { flex-direction: column; flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; }
    .bank-tree { width: 100%; max-height: none; flex: 1 1 auto; border-right: none; border-bottom: none; }
    .bank-panel { display: none; padding: 14px 14px 28px; }
    .bank-split.mobile-panel-open .bank-tree { display: none; }
    .bank-split.mobile-panel-open .bank-panel { display: block; flex: 1 1 auto; }
    .mobile-back-bar { display: flex !important; }

    /* Câu hỏi: đề bài rồi tới hình (xuống dòng), ảnh nhỏ lại & canh giữa, chạm để phóng to */
    .q-content-row { flex-direction: column !important; gap: 10px !important; }
    .q-content-row .q-image-v2 { width: 100% !important; text-align: center !important; }
    .q-content-row .q-image-v2 img { max-width: 62% !important; cursor: zoom-in; }

    /* Ảnh nhúng trong nội dung/đáp án câu hỏi: canh giữa */
    .q-content-v2 img,
    .q-answer-v2 img,
    .sa-box-v2 img,
    .tf-table-v2 img,
    .options-table-v2 img,
    .bank-panel .q-main-v2 img { display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important; max-width: 92% !important; height: auto !important; }

    /* Tab bộ lọc: chữ + icon tự co vừa ô, không bị cắt */
    .format-tabs.fit-row .format-tab { font-size: clamp(8.5px, 2.5vw, 13px) !important; padding: 8px 3px !important; gap: 3px !important; }
    .format-tabs.fit-row .format-tab .material-icons-round { font-size: clamp(12px, 3.2vw, 16px) !important; }

    /* Đúng/Sai: mỗi ý một dòng, 2 nút Đúng/Sai nằm DƯỚI đáp án */
    .tf-table-v2, .tf-table-v2 tbody { display: block; width: 100%; }
    .tf-table-v2 tr { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid #eef0f3; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
    .tf-table-v2 td { border: none !important; padding: 0 !important; }
    .tf-table-v2 td:first-child { flex: 0 0 100%; margin-bottom: 4px; }
    .tf-table-v2 .tf-btn-cell { flex: 1 1 0; }
    .tf-table-v2 .tf-btn-cell .tf-btn-v2 { width: 100%; }
}

/* Panel ngân hàng (giáo viên): ẩn header/breadcrumb thừa của trang quản lý cũ khi nhúng vào cột phải */
.bank-panel .page-header { display: none !important; }
.bank-panel .white-toolbar { position: static !important; margin: 0 0 14px 0 !important; padding: 0 !important; border-bottom: none !important; background: transparent !important; }
.bank-panel .content-page { padding: 0 !important; margin: 0 !important; }
.bank-panel .back-btn-distinct { display: none !important; }

/* Panel ngân hàng: nút Thêm câu hỏi / Upload / Sắp xếp chỉ hiện icon (đồng bộ cả Lý thuyết & Bài tập) */
.bank-panel .btn-mobile-icon-only .btn-text-mobile { display: none !important; }
.bank-panel .btn-mobile-icon-only .material-icons-round { margin-right: 0 !important; }
.bank-panel .btn-mobile-icon-only { padding: 10px 14px !important; width: auto !important; min-width: 44px; justify-content: center; }

/* ============ THANH TÌM KIẾM + POPUP NGÂN HÀNG ============ */
.bank-searchbar { display:flex; align-items:center; gap:10px; padding:12px 20px; background:#fff; border-bottom:1px solid #eef0f3; flex-shrink:0; }
.bank-searchbar > .material-icons-round { color:#94a3b8; font-size:22px; }
.bank-searchbar input { flex:1; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; font-size:14px; outline:none; background:#f8fafc; transition:border-color .2s, background .2s; }
.bank-searchbar input:focus { border-color:#bb2649; background:#fff; }

.bank-search-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:10050; display:flex; align-items:flex-start; justify-content:center; padding:56px 16px; animation:fadeIn .15s ease; }
.bank-search-modal { background:#fff; border-radius:18px; width:100%; max-width:700px; max-height:82vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,0.3); }
.bank-search-head { padding:16px 22px; background:#bb2649; color:#fff; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.bank-search-head h3 { margin:0; font-size:16px; font-weight:800; color:#fff; }
.bank-search-close { background:rgba(255,255,255,0.15); border:none; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bank-search-list { overflow-y:auto; padding:14px; }
.bank-search-item { padding:14px 16px; border:1px solid #eef0f3; border-radius:12px; margin-bottom:10px; cursor:pointer; transition:all .15s; }
.bank-search-item:hover { border-color:#bb2649; background:#fff5f7; transform:translateX(3px); box-shadow:0 4px 14px rgba(187,38,73,0.08); }
.bank-search-loc { font-size:12px; color:#bb2649; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bank-search-loc .fmt-badge { background:#eef2ff; color:#4f46e5; padding:1px 8px; border-radius:20px; font-size:11px; }
.bank-search-snippet { font-size:14px; color:#1e293b; line-height:1.5; }
.bank-search-snippet mark { background:#fde68a; color:#1e293b; padding:0 3px; border-radius:3px; font-weight:700; }
.bank-search-empty { padding:40px 20px; text-align:center; color:#94a3b8; }

/* Ảnh nhúng trong nội dung câu hỏi (Ngân hàng LT/BT): luôn canh giữa */
.embedded-image {
    text-align: center !important;
    margin: 10px auto !important;
    width: 100%;
}
.embedded-image img {
    display: inline-block !important;
    margin: 0 auto !important;
    float: none !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Bảng lịch sử rèn luyện: canh giữa mọi cột */
.reflex-container .ui-table th,
.reflex-container .ui-table td {
    text-align: center;
    vertical-align: middle;
}

/* Placeholder cho ô góp ý (contenteditable) */
#feedback-text:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}
.fb-toolbar button:hover { background: #f1f5f9 !important; }

/* ============ KỆ SÁCH GỖ (WOODEN BOOKCASE) ============ */
/* Cột phải Kho sách xếp dọc để tủ gỗ lấp đầy phần còn lại */
#lib-panel { display: flex; flex-direction: column; }
#lib-panel .wood-bookcase { flex: 1 1 auto; }
/* Điện thoại: giữ nguyên hành vi 1 cột (ẩn panel tới khi chọn thư mục) */
@media (max-width: 640px) {
    #lib-panel { display: none; }
    .bank-split.mobile-panel-open #lib-panel { display: flex; }

    /* Kệ sách: trước đây tủ gỗ bị ép chiều cao cố định (flex:1 1 auto trong
       khung hẹp), nên khi có nhiều sách thì hàng cuối tràn ra ngoài, nằm bơ vơ
       dưới nền gỗ. Nay cho tủ tự cao theo số sách bên trong. */
    #lib-panel .wood-bookcase {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        padding-bottom: 26px;   /* chừa chỗ cho tấm ván dưới hàng sách cuối */
    }
    .wood-shelf {
        flex: 0 0 auto;
        align-content: flex-start;
        row-gap: 26px;
    }
    /* Sách nhỏ lại một chút để mỗi hàng xếp được nhiều cuốn hơn trên màn hẹp */
    #lib-panel .book-spine { width: 42px; height: 140px; }
    #lib-panel .wood-shelf {
        background: repeating-linear-gradient(
            to bottom,
            transparent 0, transparent 140px,
            #4b2e15 140px, #613b1c 152px, #4b2e15 166px);
    }
}

.wood-bookcase {
    background:
        linear-gradient(90deg, rgba(0,0,0,0.10) 0%, transparent 4%, transparent 96%, rgba(0,0,0,0.10) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #8a5a2b 0%, #7a4d24 100%);
    border: 10px solid #5c3a1e;
    border-radius: 14px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.35), 0 12px 28px rgba(92,58,30,0.35);
    padding: 18px 18px 6px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}
/* Tủ có NHIỀU kệ: nền ván gỗ lặp lại lấp đầy toàn bộ chiều cao còn lại */
.wood-shelf {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-start;
    gap: 14px;
    row-gap: 26px;
    padding: 6px 6px 0;
    /* Tấm ván nằm ngay dưới mỗi hàng sách (cao 160px + khe 26px), lặp xuống hết tủ */
    background: repeating-linear-gradient(
        to bottom,
        transparent 0, transparent 160px,
        #4b2e15 160px, #613b1c 172px, #4b2e15 186px);
    background-position: 0 6px;
}
/* Kệ trống: vẫn hiện các tấm ván, thông báo canh giữa */
.wood-shelf.is-empty { position: relative; }
.wood-empty {
    text-align: center;
    color: #f3e2cf;
    padding: 40px 20px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.wood-shelf.is-empty .wood-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wood-empty .material-icons-round { font-size:44px; display:block; margin-bottom:8px; opacity:.7; }

.book-spine {
    width: 48px;
    height: 160px;
    border-radius: 5px 5px 3px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 5px 10px;
    cursor: pointer;
    color: #fff8ef;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.15;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    box-shadow: inset -4px 0 6px rgba(0,0,0,0.28), inset 4px 0 5px rgba(255,255,255,0.18), 2px 4px 8px rgba(0,0,0,0.3);
    transition: transform .18s ease, box-shadow .18s ease;
    flex-shrink: 0;
}
.book-spine::after {
    content: '';
    position: absolute;
    top: 8px; bottom: 8px; left: 6px;
    width: 3px;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
}
.book-spine:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: inset -4px 0 6px rgba(0,0,0,0.28), 4px 10px 16px rgba(0,0,0,0.4); }
.book-spine .book-title { max-height: 132px; overflow: hidden; text-overflow: ellipsis; }
.book-spine.draft-book { opacity: .82; }
.book-spine.draft-book::before {
    content: 'NHÁP';
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    writing-mode: horizontal-tb; font-size: 8px; font-weight: 800;
    background: #fde047; color: #713f12; padding: 0 4px; border-radius: 4px;
}

/* ĐIỆN THOẠI (PWA): chạm vào sách -> sách nhô ra + to hơn một chút trước khi hiện 3 lựa chọn */
@media (max-width: 640px) {
    .book-spine { -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .18s ease; }
    .book-spine:hover { transform: none; box-shadow: inset -4px 0 6px rgba(0,0,0,0.28), inset 4px 0 5px rgba(255,255,255,0.18), 2px 4px 8px rgba(0,0,0,0.3); }
    .book-spine:active { transform: translateY(-6px) scale(1.06); }
    .book-spine.is-picked,
    .book-spine.is-picked:hover {
        transform: translateY(-16px) scale(1.14) rotate(-1.5deg);
        z-index: 3;
        box-shadow: inset -4px 0 6px rgba(0,0,0,0.28), inset 4px 0 5px rgba(255,255,255,0.18), 6px 14px 22px rgba(0,0,0,0.45);
    }
}

/* Thẻ hành động khi bấm vào cuốn sách */
.book-sheet-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.55); z-index:10060; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .15s ease; }
.book-sheet { background:#fff; border-radius:18px; width:100%; max-width:340px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,0.3); }
.book-sheet-head { padding:18px 20px; background:#5c3a1e; color:#fff; display:flex; gap:10px; align-items:center; }
.book-sheet-head .material-icons-round { font-size:26px; }
.book-sheet-title { font-weight:800; font-size:15px; line-height:1.3; }
.book-sheet-body { padding:12px; display:flex; flex-direction:column; gap:8px; }
.book-sheet-act { display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:12px; border:1px solid #eef0f3; background:#f8fafc; cursor:pointer; font-weight:700; font-size:14px; color:#1e293b; text-decoration:none; transition:.15s; }
.book-sheet-act:hover { border-color:#bb2649; background:#fff5f7; }
.book-sheet-act.danger { color:#ef4444; }
.book-sheet-act.danger:hover { border-color:#ef4444; background:#fef2f2; }

/* Đồng bộ font Times New Roman + cỡ chữ đề & đáp án (mọi định dạng: trắc nghiệm / đúng sai / trả lời ngắn) */
.question-card-v2 .q-content-v2,
.question-card-v2 .options-table-v2 td,
.question-card-v2 .option-label-v2,
.question-card-v2 .sa-box-v2,
.question-card-v2 .sa-answer-grid-v2,
.question-card-v2 .q-answer-v2,
.question-card-v2 .tf-btn-v2 {
    font-family: 'Times New Roman', Times, serif !important;
}
.question-card-v2 .q-content-v2,
.question-card-v2 .options-table-v2 td,
.question-card-v2 .options-table-v2 .option-label-v2 {
    font-size: 18px !important;
    line-height: 1.55 !important;
}

/* Cân đối cỡ công thức KaTeX với cỡ chữ đề & đáp án (cả 3 giao diện: web / iPad / điện thoại).
   KaTeX mặc định 1.21em nên công thức bị to hơn chữ thường — kéo về 1em cho khớp. added 2026-07-25 */
.katex { font-size: 1em !important; }
/* Không để chữ trong công thức bị nghiêng (KaTeX mặc định dùng font italic cho biến).
   Đổi sang font đứng KaTeX_Main. updated 2026-07-25 */
.katex .mathnormal,
.katex .mathit,
.katex .text {
    font-family: KaTeX_Main, 'Times New Roman', Times, serif !important;
    font-style: normal !important;
}

/* Panel giáo viên: ẩn ô tìm kiếm cũ (đã có thanh tìm kiếm toàn cục phía trên) */
.bank-panel .search-container-mobile { display: none !important; }
/* Giáo viên: 2–3 ô chọn định dạng thành hộp chữ nhật trên 1 hàng */
.bank-panel .white-toolbar .format-tabs { display: flex !important; gap: 10px !important; border-bottom: none !important; margin: 0 0 6px 0 !important; }
.bank-panel .white-toolbar .format-tab { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; padding: 10px 20px !important; background: #f8fafc !important; color: #475569 !important; font-weight: 700 !important; height: auto !important; }
.bank-panel .white-toolbar .format-tab::after, .bank-panel .white-toolbar .format-tab::before { display: none !important; }
.bank-panel .white-toolbar .format-tab.active { background: #bb2649 !important; color: #fff !important; border-color: #bb2649 !important; }

/* Menu sắp xếp phải nổi lên trên các thẻ câu hỏi (thẻ có transform tạo lớp xếp chồng riêng) */
.sort-dropdown { position: relative; z-index: 300; }
.sort-menu { z-index: 300 !important; }

/* Đề bài trong ngân hàng lý thuyết & bài tập: canh đều 2 bên (justify) - added 2026-07-25 */
.question-card-v2 .q-content-v2 { text-align: justify; text-justify: inter-word; }

/* Nhấp nháy (zoom in/out) mục Thông báo khi có thông báo mới - added 2026-07-25 */
@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.nav-item.notif-pulse .material-icons-round,
.nav-item.notif-pulse > span:not(.nav-badge) {
    animation: notifPulse 1s ease-in-out infinite;
    color: var(--primary);
}
.notif-pulse { animation: notifPulse 1.1s ease-in-out infinite; }

/* ============================================================
   CHỈ ĐIỆN THOẠI (≤640px) — SỬA 2 LỖI NGÂN HÀNG — added 2026-07-25
   Không ảnh hưởng iPad (641–1024px) và Web (>1024px).
   ============================================================ */
@media (max-width: 640px) {
    /* (1) Bỏ dải HỒNG dưới cùng ở Ngân hàng Lý thuyết & Bài tập.
       Nguyên nhân: .content-area nền hồng (--bg-main) + padding-bottom safe-area
       lộ ra dưới khối .bank-split. Bỏ padding hồng đó, cho nội dung phủ kín;
       chuyển khoảng đệm safe-area xuống chính panel câu hỏi để không che nút Home. */
    .content-area:has(.bank-split) { padding-bottom: 0 !important; }
    .content-area:has(.bank-split) .bank-panel {
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 16px)) !important;
    }

    /* (2) Thẻ câu hỏi (chế độ làm bài tương tác): đưa ĐỀ BÀI xuống dòng riêng,
       không nằm ngang hàng với "Câu N:" và mức độ.
       Thứ tự: Câu + mức độ → đề bài → hình → đáp án. */
    .question-card-v2.interactive-question .q-header-v2 {
        display: block !important;
    }
    .question-card-v2.interactive-question .q-title-row-v2 {
        margin-bottom: 8px !important;
    }
    .question-card-v2.interactive-question .q-content-row {
        display: block !important;
    }
}

/* ==========================================================================
   CHỈ ĐIỆN THOẠI (≤640px) — GÓI SỬA GIAO DIỆN GIÁO VIÊN — added 2026-07-27
   KHÔNG ảnh hưởng iPad (641–1024px) và Web (>1024px).
   Nội dung: (0) chống tràn viền  (1) Dashboard cấu hình nhân vật
             (2) Tiêu đề thẻ tự co  (3) Ngân hàng câu hỏi: ô chọn + thứ tự nút
             (4) Danh sách học sinh  (5) Lò rèn phản xạ  (6) Flashcards GV
   ========================================================================== */
@media (max-width: 640px) {

    /* ---------- (0) CHỐNG TRÀN VIỀN CHUNG ---------- */
    .content-page,
    .teacher-view-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .ui-card {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .content-page input,
    .content-page select,
    .content-page textarea,
    .teacher-view-container input,
    .teacher-view-container select,
    .teacher-view-container textarea {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .content-page pre,
    .content-page code {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }

    /* ---------- (1) DASHBOARD — CẤU HÌNH NHÂN VẬT ---------- */
    /* Lời chào mừng: ô nhập + biểu cảm xếp dọc, không bị bóp méo */
    #char-settings-form .char-welcome-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #char-settings-form textarea {
        font-size: 14px !important;
    }

    /* Lời động viên: hàng 1 = Phút | Thông điệp | Xóa ; hàng 2 = Biểu cảm (full) */
    .enc-row {
        grid-template-columns: 62px minmax(0, 1fr) 32px !important;
        gap: 8px !important;
        align-items: end !important;
        padding: 10px 8px !important;
    }

    .enc-row>.enc-col-time {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .enc-row>.enc-col-text {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .enc-row>.enc-del {
        grid-column: 3 !important;
        grid-row: 1 !important;
        padding: 0 !important;
        height: 36px !important;
    }

    .enc-row>.enc-col-exp {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .enc-row label {
        font-size: 10.5px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .enc-row .input-field {
        font-size: 13px !important;
        padding: 7px 8px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .enc-row .enc-del .material-icons-round {
        font-size: 20px !important;
    }

    /* ---------- (2) TIÊU ĐỀ THẺ TỰ CO THEO KHUNG HÌNH ---------- */
    .ui-card>h3,
    .ui-card>div>h3 {
        font-size: clamp(13.5px, 4.2vw, 17px) !important;
        line-height: 1.3 !important;
        min-width: 0 !important;
    }

    /* Tiêu đề bắt buộc nằm gọn 1 hàng (Duyệt lời chúc / Yêu cầu cấp lại mật khẩu) */
    .card-title-fit {
        white-space: nowrap !important;
        font-size: clamp(12.5px, 4.2vw, 17px) !important;
        overflow: hidden !important;
    }

    .card-title-fit .material-icons-round {
        flex-shrink: 0 !important;
        font-size: 20px !important;
    }

    .wish-sub-label {
        white-space: nowrap !important;
        font-size: 12.5px !important;
    }

    /* Dòng trạng thái rỗng của Wish Wall: luôn gọn trên 1 hàng */
    .wish-empty {
        white-space: nowrap !important;
        font-size: clamp(11px, 3.6vw, 14px) !important;
        padding: 16px 4px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ---------- (2b) XEM TRƯỚC FLASHCARD (GV) ---------- */
    /* Xem trước TOÀN MÀN HÌNH; bỏ nút "Chọn bài khác" thừa; nút X xuống góc phải dưới */
    .fca-preview-overlay {
        box-sizing: border-box !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .fca-preview-overlay .mobile-back-bar {
        display: none !important;
    }

    .fca-preview-overlay #fca-preview-content {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow-y: auto !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    .fca-preview-overlay .fc-wrapper {
        height: 100% !important;
        min-height: 100% !important;
        background: #fff1f2 !important;
    }

    .fca-preview-overlay .fc-main {
        min-height: 100% !important;
        border-radius: 0 !important;
    }

    /* Nút đóng: góc PHẢI DƯỚI, chừa vạch Home của iPhone */
    .fca-preview-close {
        position: fixed !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
        right: 16px !important;
        width: 46px !important;
        height: 46px !important;
        background: rgba(15, 23, 42, 0.82) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
        z-index: 100000 !important;
    }

    /* ---------- (3) NGÂN HÀNG LÝ THUYẾT / BÀI TẬP ---------- */
    /* Thứ tự khối: đề bài → đáp án → (ghi âm + lời giải) → (Sửa / Xóa) */
    .question-card-v2 {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .question-card-v2>.q-header-v2 {
        order: 1 !important;
        display: block !important;
        padding-right: 34px !important;
    }

    .question-card-v2>.q-main-v2 {
        order: 2 !important;
    }

    .question-card-v2>.soln-block-v2 {
        order: 3 !important;
        margin-top: 12px !important;
    }

    .question-card-v2>.q-actions-v2 {
        order: 4 !important;
        margin-top: 12px !important;
    }

    /* Ô vuông chọn câu: ghim GÓC PHẢI TRÊN CÙNG của thẻ câu hỏi */
    .question-card-v2 .q-checkbox-v2 {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        margin: 0 !important;
        z-index: 5 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* ---------- (4) DANH SÁCH TÀI KHOẢN HỌC SINH ---------- */
    .smc-actions-row {
        flex-wrap: nowrap !important;
    }

    .smc-icon-group {
        gap: 7px !important;
    }

    .smc-pwd-btn {
        flex-shrink: 0 !important;
    }

    /* ---------- (5) QUẢN LÝ LÒ RÈN PHẢN XẠ ---------- */
    .teacher-view-container:has(#reflex-mgmt-list) {
        padding: 10px 8px !important;
    }

    .ui-card.reflex-mgmt-card {
        overflow-x: hidden !important;
        border-radius: 12px !important;
        padding: 0 !important;
    }

    /* Ghi đè quy tắc .ui-card table{display:block} ở breakpoint ≤1024px */
    .ui-card.reflex-mgmt-card table.reflex-mgmt-table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        overflow-x: visible !important;
    }

    .reflex-mgmt-table th,
    .reflex-mgmt-table td {
        padding: 8px 3px !important;
        font-size: 11px !important;
        text-align: center !important;
        vertical-align: middle !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }

    /* Ẩn cột "Luyện gần nhất", đưa xuống dưới tên học sinh cho gọn */
    .reflex-mgmt-table .rm-col-last {
        display: none !important;
    }

    .reflex-mgmt-table .rm-name-last {
        display: block !important;
    }

    .reflex-mgmt-table .rm-name-main {
        font-size: 11.5px !important;
    }

    .reflex-mgmt-table .rm-name-user {
        font-size: 10px !important;
    }

    .reflex-mgmt-table th:nth-child(1),
    .reflex-mgmt-table td:nth-child(1) {
        width: 34% !important;
    }

    .reflex-mgmt-table th:nth-child(2),
    .reflex-mgmt-table td:nth-child(2) {
        width: 12% !important;
    }

    .reflex-mgmt-table th:nth-child(3),
    .reflex-mgmt-table td:nth-child(3) {
        width: 13% !important;
    }

    .reflex-mgmt-table th:nth-child(4),
    .reflex-mgmt-table td:nth-child(4) {
        width: 14% !important;
    }

    .reflex-mgmt-table th:nth-child(6),
    .reflex-mgmt-table td:nth-child(6) {
        width: 27% !important;
    }

    .reflex-mgmt-table .rm-lock-btn {
        padding: 5px 4px !important;
        font-size: 9.5px !important;
        gap: 3px !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .reflex-mgmt-table .rm-lock-btn .material-icons-round {
        font-size: 13px !important;
    }

    /* ---------- (6b) CÁC CHỖ TỪNG BỊ TRÀN VIỀN (rà soát 2026-07-27) ---------- */
    /* Khối "Số câu Phần 1/2/3" khi tạo đề: min-width 400px làm tràn màn hình */
    #theory-practice-counts {
        min-width: 0 !important;
        flex-direction: column !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    /* Màn xem lại bài thi (PDF + phiếu chấm / nhật ký giám sát): xếp dọc */
    .exam-review-split {
        flex-direction: column !important;
        overflow-y: auto !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .exam-review-split>div {
        min-width: 0 !important;
    }

    .exam-review-side {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* ==========================================================
       (7) LÒ RÈN PHẢN XẠ — HỌC SINH (cá nhân + 1 vs 1) — 2026-07-27
       Khung trắng gọn lại, chữ nhỏ, nằm giữa nền hồng;
       thanh câu hỏi mỏng cố định đáy, chỉ 1 ô tròn = câu hiện tại;
       đề canh đều 2 bên → ảnh → 4 đáp án.
       ========================================================== */

    /* --- Khung ngoài: full chiều rộng + canh giữa theo chiều dọc ---
       Lưu ý: .content-area là flex column, nên "margin: 0 auto" của
       .reflex-container làm khung co lại theo nội dung → phải ép width 100%. */
    /* CHỈ áp dụng cho màn ĐANG LÀM BÀI (.reflex-playing) — không đụng tới
       màn "Chọn chế độ rèn luyện" và "Lịch sử rèn luyện". */
    .reflex-container.reflex-playing {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px 62px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: calc(100dvh - 52px) !important;
    }

    /* --- Khung trắng: rộng cố định, canh giữa, có chiều cao tối thiểu --- */
    .reflex-exam-area {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding: 16px 14px !important;
        min-height: 330px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Thanh thời gian luôn nằm sát đáy khung → khung cân đối khi câu ngắn */
    .reflex-exam-area .reflex-footer {
        margin-top: auto !important;
    }

    .reflex-q-header {
        font-size: 15px !important;
        margin-bottom: 12px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .reflex-difficulty {
        font-size: 11px !important;
        padding: 2px 7px !important;
    }

    /* Đề bài: canh đều 2 bên, ảnh xuống dòng dưới đề */
    .reflex-q-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .reflex-q-content {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        text-align: justify !important;
        text-justify: inter-word !important;
        hyphens: auto !important;
        margin-bottom: 0 !important;
    }

    .reflex-q-imgwrap {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .reflex-q-image {
        max-width: 100% !important;
        max-height: 190px !important;
        width: auto !important;
        object-fit: contain !important;
        margin-bottom: 0 !important;
        border-radius: 10px !important;
    }

    /* --- 4 đáp án --- */
    .reflex-options {
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .reflex-opt {
        font-size: 13.5px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        gap: 8px !important;
        align-items: flex-start !important;
        line-height: 1.45 !important;
    }

    /* --- Thanh thời gian + đồng hồ --- */
    .reflex-footer {
        margin-top: 16px !important;
        gap: 10px !important;
    }

    #reflex-digital-clock {
        font-size: 14px !important;
        height: 30px !important;
        min-width: 50px !important;
        border-radius: 9px !important;
    }

    .reflex-exam-area>div:last-child {
        min-height: 0 !important;
        margin-top: 10px !important;
    }

    .btn-reflex-next {
        width: 48px !important;
        height: 48px !important;
    }

    /* --- Thanh câu hỏi: cao vừa khít ô tròn, cố định đáy, CHỈ 1 ô tròn --- */
    .reflex-progress-fixed {
        padding: 5px 10px !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 0 !important;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12) !important;
    }

    .reflex-progress-fixed .reflex-dot {
        display: none !important;
    }

    .reflex-progress-fixed .reflex-dot.current {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        font-size: 14px !important;
        background: #fff !important;
        border-color: #fff !important;
        color: #bb2649 !important;
    }

    /* --- Chế độ 1 vs 1: thu gọn header/footer trận đấu --- */
    .battle-header {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .battle-p1,
    .battle-p2 {
        gap: 8px !important;
        min-width: 0 !important;
    }

    .battle-name {
        width: auto !important;
        max-width: 78px !important;
        font-size: 11px !important;
    }

    .battle-score {
        font-size: 22px !important;
    }

    .battle-progress {
        max-width: 110px !important;
    }

    .battle-progress>div:first-child {
        font-size: 10px !important;
    }

    .battle-main {
        padding: 10px 12px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .battle-main .reflex-exam-area {
        width: 100% !important;
    }

    .battle-footer {
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .battle-timer-digital {
        font-size: 12px !important;
        right: 10px !important;
    }

    .battle-timer-text {
        font-size: 10px !important;
    }

    /* ---------- (6) FLASHCARDS (GIÁO VIÊN) ---------- */
    #fca-main .fca-main-header-top {
        padding: 12px 14px !important;
    }

    #fca-main .fca-main-header-bottom {
        padding: 12px 14px !important;
    }

    #fca-main .fca-main-content {
        padding: 14px !important;
    }

    #fca-main .fca-editor-title {
        font-size: clamp(15px, 4.6vw, 24px) !important;
        line-height: 1.3 !important;
    }

    #fca-main .fca-editor-subtitle {
        font-size: 12px !important;
    }

    #fca-main .fca-card-grid {
        margin-bottom: 40px !important;
    }
}

/* ============================================================
   KHO SÁCH — POPUP XEM TRƯỚC PDF (cả 3 giao diện) — added 2026-07-27
   Khung PDF phủ kín thân popup, không còn viền trắng bao quanh.
   ============================================================ */
.modal.lib-preview-modal .modal-content {
    width: 96%;
    max-width: 1100px;
    height: 92vh;
    max-height: 92vh;
    overflow: hidden;
}

.modal.lib-preview-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    background: #1f2937;
}

/* App.showModal bọc nội dung trong <p> — trình duyệt tách <div> ra ngoài,
   nên chỉ cần triệt tiêu các <p> rỗng còn sót lại. */
.modal.lib-preview-modal .modal-body>p {
    margin: 0 !important;
    padding: 0 !important;
}

.modal.lib-preview-modal .modal-body>p:empty {
    display: none !important;
}

.modal.lib-preview-modal .lib-pdf-wrap {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.modal.lib-preview-modal .lib-pdf-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Điện thoại: popup full màn hình, né tai thỏ + vạch Home */
@media (max-width: 640px) {
    .modal.lib-preview-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .modal.lib-preview-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Tiêu đề lùi xuống dưới tai thỏ / thanh trạng thái */
    .modal.lib-preview-modal .modal-header {
        padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important;
        flex-shrink: 0 !important;
    }

    .modal.lib-preview-modal .modal-header h2 {
        font-size: 15px !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* iOS không cho cuộn PDF nhúng trong <iframe> → điện thoại dùng PDF.js,
       mỗi trang là 1 <canvas> nằm trong vùng cuộn thật bên dưới. */
    .modal.lib-preview-modal .lib-pdf-wrap {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal.lib-preview-modal .lib-pdf-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        background: #1f2937 !important;
        padding-bottom: 10px !important;
    }

    /* Khối trang: bề ngang = mức zoom; >100% thì cuộn ngang được */
    .modal.lib-preview-modal .lib-pdf-pages {
        width: 100%;
        margin: 0 auto !important;
    }

    .modal.lib-preview-modal .lib-pdf-page {
        display: block !important;
        width: 100% !important;
        background: #fff !important;
        margin-bottom: 8px !important;
    }

    .modal.lib-preview-modal .lib-pdf-page canvas {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .modal.lib-preview-modal .lib-pdf-loading {
        color: #fff !important;
        text-align: center !important;
        padding: 48px 20px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .modal.lib-preview-modal .lib-pdf-loading .spinner {
        margin: 0 auto 12px !important;
    }

    /* Thanh dưới: cao vừa khít cụm nút zoom (34px) + 4px đệm trên/dưới = 42px.
       Không cộng safe-area vì popup đã nằm gọn phía trên vạch Home. */
    .modal.lib-preview-modal .modal-footer {
        padding: 4px 10px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 0 !important;
    }

    .modal.lib-preview-modal .lib-zoom-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        line-height: normal !important;
    }

    .modal.lib-preview-modal .lib-zoom-bar button {
        width: 38px !important;
        height: 34px !important;
        padding: 0 !important;
        border: 1px solid #f3c6d1 !important;
        background: #fff !important;
        color: #bb2649 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    .modal.lib-preview-modal .lib-zoom-bar button:active {
        background: #fff1f2 !important;
    }

    .modal.lib-preview-modal .lib-zoom-bar button .material-icons-round {
        font-size: 20px !important;
    }

    .modal.lib-preview-modal .lib-zoom-label {
        min-width: 52px !important;
        text-align: center !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #bb2649 !important;
        font-variant-numeric: tabular-nums !important;
    }
}

/* ============================================================
   BẢNG TIN: CẢM XÚC & BÌNH LUẬN (kiểu Facebook) — added 2026-07-27
   ============================================================ */

/* --- Tab "Bảng tin" nhấp nháy khi có bài đăng mới chưa xem --- */
@keyframes newsPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.09); }
}

.home-tab.news-alert {
    animation: newsPulse 1.15s ease-in-out infinite;
    position: relative;
    color: #bb2649 !important;
    font-weight: 800 !important;
}

.home-tab.news-alert .news-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .home-tab.news-alert { animation: none; }
}

/* --- Khối cảm xúc + bình luận --- */
.post-social {
    border-top: 1px solid #f1f5f9;
    padding: 6px 14px 10px;
    background: #fff;
}

.post-social-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    padding: 4px 2px;
    font-size: 13px;
    color: #64748b;
}

.post-social-summary .rs-left {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.post-social-summary .rs-emoji {
    font-size: 16px;
    line-height: 1;
    margin-right: -4px;
}

.post-social-summary .rs-count {
    margin-left: 8px;
    font-weight: 700;
    color: #475569;
}

.post-social-summary .rs-empty {
    font-style: italic;
    color: #94a3b8;
    font-size: 12.5px;
}

.post-social-summary .rs-right {
    background: none;
    border: none;
    padding: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.post-social-summary .rs-right:hover {
    text-decoration: underline;
    color: #bb2649;
}

.post-social-actions {
    position: relative;
    display: flex;
    gap: 6px;
    border-top: 1px solid #f1f5f9;
    padding-top: 6px;
}

.post-act-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 8px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: background .15s;
}

.post-act-btn:hover {
    background: #f1f5f9;
}

.post-act-btn .material-icons-round {
    font-size: 20px;
}

.post-act-btn .react-emoji {
    font-size: 18px;
    line-height: 1;
}

@keyframes reactPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.post-act-btn.pop {
    animation: reactPop .32s ease-out;
}

/* --- Bảng chọn cảm xúc --- */
.reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    display: none;
    gap: 2px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    z-index: 60;
}

.reaction-picker.open {
    display: flex;
    animation: pickerIn .18s ease-out;
}

@keyframes pickerIn {
    from { opacity: 0; transform: translateY(8px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.reaction-opt {
    position: relative;
    border: none;
    background: none;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 50%;
    transition: transform .15s;
}

.reaction-opt:hover {
    transform: scale(1.32) translateY(-4px);
}

.reaction-opt-emoji {
    font-size: 27px;
    line-height: 1;
    display: block;
}

.reaction-opt-label {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.reaction-opt:hover .reaction-opt-label {
    opacity: 1;
}

/* --- Danh sách bình luận --- */
.post-comments {
    border-top: 1px solid #f1f5f9;
    margin-top: 6px;
    padding-top: 10px;
}

.pc-loading,
.pc-empty {
    padding: 14px 4px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-style: italic;
}

.pc-list {
    max-height: 340px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
}

.pc-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.pc-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #bb2649;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-bubble-wrap {
    min-width: 0;
    flex: 1;
}

.pc-bubble {
    display: inline-block;
    max-width: 100%;
    background: #f1f5f9;
    border-radius: 16px;
    padding: 8px 13px;
}

.pc-name {
    font-weight: 800;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pc-badge {
    background: #bb2649;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.pc-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.pc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 0 0 13px;
    font-size: 11.5px;
    color: #94a3b8;
}

.pc-del {
    background: none;
    border: none;
    padding: 0;
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.pc-del:hover {
    color: #ef4444;
    text-decoration: underline;
}

/* --- Ô nhập bình luận --- */
.pc-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.pc-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
}

.pc-input:focus {
    border-color: #bb2649;
    background: #fff;
}

.pc-send {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #bb2649;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .15s;
}

.pc-send:hover {
    background: #a01f3e;
}

.pc-send .material-icons-round {
    font-size: 19px;
}

/* --- Điện thoại --- */
@media (max-width: 640px) {
    .post-social {
        padding: 4px 10px 8px;
    }

    .post-act-btn {
        font-size: 13px;
        padding: 8px 4px;
        gap: 5px;
    }

    .post-act-btn .material-icons-round {
        font-size: 18px;
    }

    .reaction-picker {
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 6px;
        gap: 0;
    }

    .reaction-picker.open {
        animation: none;
    }

    .reaction-opt-emoji {
        font-size: 24px;
    }

    .reaction-opt-label {
        display: none;
    }

    .pc-list {
        max-height: 300px;
    }

    .pc-avatar {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .pc-text {
        font-size: 13.5px;
    }

    .pc-input {
        height: 36px;
        font-size: 13.5px;
    }

    .pc-send {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   NGÂN HÀNG LÝ THUYẾT & BÀI TẬP — NỘI DUNG CÂU HỎI CO GIÃN THEO KHUNG
   (2026-07-28) Sửa lỗi: thu nhỏ cửa sổ -> chữ bị nén thành cột hẹp, ảnh
   chiếm chỗ cố định 200px. Nay đề bài và ảnh tự xuống dòng + tự co nhỏ.
   ========================================================================== */

/* --- Hàng "đề bài + ảnh": cho phép xuống dòng khi hết chỗ --- */
.question-card-v2 .q-content-row,
.bank-panel .q-content-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

/* Cột đề bài: cần tối thiểu 300px, dưới ngưỡng đó ảnh sẽ tự nhảy xuống dòng */
.question-card-v2 .q-content-row > .q-content-v2,
.bank-panel .q-content-row > .q-content-v2 {
    flex: 1 1 300px !important;
    min-width: 0 !important;
}

/* Ô ảnh: bỏ chiều rộng cứng 200px, tự co và tự canh giữa khi xuống dòng */
.question-card-v2 .q-content-row > .q-image-v2,
.bank-panel .q-content-row > .q-image-v2 {
    flex: 0 1 200px !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.question-card-v2 .q-content-row > .q-image-v2 img,
.bank-panel .q-content-row > .q-image-v2 img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    cursor: zoom-in;
}

/* Mọi ảnh nhúng trong đề/đáp án: không bao giờ tràn khung, bấm để phóng to */
.bank-panel img,
.question-card-v2 img {
    max-width: 100% !important;
    height: auto !important;
}

.bank-panel .q-content-v2 img,
.bank-panel .q-answer-v2 img,
.bank-panel .sa-box-v2 img,
.bank-panel .tf-table-v2 img,
.bank-panel .options-table-v2 img,
.question-card-v2 .q-content-v2 img,
.question-card-v2 .q-answer-v2 img {
    cursor: zoom-in;
}

/* Bảng dài trong đề bài: cuộn ngang thay vì đẩy vỡ khung */
.bank-panel table:not(.tf-table-v2):not(.options-table-v2) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cột cây chương/dạng thu hẹp dần khi cửa sổ nhỏ để chừa chỗ cho câu hỏi */
/* Thu hẹp cột cây CHỈ trên máy tính / máy tính bảng (>640px).
   Dưới 640px (điện thoại) cột cây phải chiếm TRỌN bề ngang — xem khối bên dưới. */
@media (min-width: 641px) and (max-width: 1200px) {
    .bank-tree { width: 280px; }
}

@media (min-width: 641px) and (max-width: 980px) {
    .bank-tree { width: 230px; }
    .bank-panel { padding: 16px 16px; }
}

/* ==========================================================================
   ĐIỆN THOẠI / PWA (≤640px): SƠ ĐỒ CÂY CHIẾM TRỌN BỀ NGANG — 2026-07-28
   Áp dụng cho mọi màn hình dùng bố cục 2 cột: Ngân hàng lý thuyết,
   Ngân hàng bài tập, Flashcards, Kho sách Vật lý, Bổ trợ kiến thức.
   ========================================================================== */
@media (max-width: 640px) {
    .bank-split {
        width: 100% !important;
        background: #e4e9f0 !important;
    }

    .bank-tree {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
        border-right: none !important;
        padding: 10px 12px calc(24px + env(safe-area-inset-bottom, 12px)) 12px !important;
    }

    /* Khi mở một mục: cây ẩn đi, khung nội dung chiếm trọn bề ngang */
    .bank-split.mobile-panel-open .bank-panel {
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
    }

    /* Tên chương / bài dài không bị cắt cụt trên màn hình hẹp */
    .bank-chapter-head,
    .bank-lesson-head,
    .bank-leaf {
        white-space: normal !important;
        word-break: break-word !important;
        align-items: flex-start !important;
    }

    .bank-chapter-count,
    .bank-lesson-count,
    .bank-leaf-count { flex-shrink: 0 !important; }
}

/* --- TRÌNH XEM ẢNH: kéo 4 góc để chỉnh cỡ, kéo giữa để di chuyển --- */
.img-zoom-overlay {
    display: block !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, 0.92) !important;
    overflow: hidden;
    cursor: default;
    touch-action: none;
}

.img-zoom-frame {
    position: absolute;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.img-zoom-frame:active { cursor: grabbing; }

.img-zoom-overlay .img-zoom-frame img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    object-fit: contain;
    border-radius: 10px;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* 4 tay nắm ở góc */
.img-zoom-frame .izh {
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 3px solid #bb2649;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    touch-action: none;
}

.img-zoom-frame .izh-nw { left: -11px; top: -11px; cursor: nwse-resize; }
.img-zoom-frame .izh-ne { right: -11px; top: -11px; cursor: nesw-resize; }
.img-zoom-frame .izh-sw { left: -11px; bottom: -11px; cursor: nesw-resize; }
.img-zoom-frame .izh-se { right: -11px; bottom: -11px; cursor: nwse-resize; }

/* Thanh công cụ */
.img-zoom-toolbar {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 6px 10px;
    backdrop-filter: blur(6px);
}

.img-zoom-toolbar button {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}

.img-zoom-toolbar button:hover { background: rgba(255, 255, 255, 0.28); }
.img-zoom-toolbar button[data-act="close"] { background: rgba(187, 38, 73, 0.85); }
.img-zoom-toolbar button[data-act="close"]:hover { background: #bb2649; }

.img-zoom-toolbar .izv-percent {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    min-width: 52px;
    text-align: center;
}

.img-zoom-hint {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    background: rgba(0, 0, 0, 0.45);
    padding: 7px 16px;
    border-radius: 20px;
    pointer-events: none;
    max-width: 92vw;
    text-align: center;
}

@media (max-width: 640px) {
    .img-zoom-toolbar { top: calc(env(safe-area-inset-top, 0px) + 10px); padding: 5px 8px; gap: 4px; }
    .img-zoom-toolbar button { width: 34px; height: 34px; }
    .img-zoom-frame .izh { width: 26px; height: 26px; left: -13px; top: -13px; }
    .img-zoom-frame .izh-ne { left: auto; right: -13px; }
    .img-zoom-frame .izh-sw { top: auto; bottom: -13px; }
    .img-zoom-frame .izh-se { left: auto; top: auto; right: -13px; bottom: -13px; }
    .img-zoom-hint { font-size: 11.5px; padding: 6px 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
}

/* ==========================================================================
   THỨ TỰ CỐ ĐỊNH TRONG THẺ CÂU HỎI (mọi khổ màn hình) — 2026-07-28
   (1) Câu N: + mức độ  →  (2) Đề bài  →  (3) Hình  →  (4) Đáp án
   Bảo đảm đề bài LUÔN nằm ở dòng riêng bên dưới, không bị đẩy sang cột phải.
   ========================================================================== */
/* Khung tiêu đề KHÔNG có ô tick (giao diện học sinh): xếp dọc hoàn toàn.
   Khung CÓ ô tick (giao diện giáo viên) giữ nguyên bố cục cũ. */
.bank-panel .question-card-v2 .q-header-v2:not(:has(> .q-checkbox-v2)),
.content-page .question-card-v2 .q-header-v2:not(:has(> .q-checkbox-v2)) {
    display: block !important;
}

/* Dòng "Câu N: + mức độ" luôn chiếm trọn một hàng riêng */
.bank-panel .question-card-v2 .q-title-row-v2,
.content-page .question-card-v2 .q-title-row-v2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

/* Đề bài + hình luôn nằm ở hàng bên dưới, trải hết bề ngang */
.bank-panel .question-card-v2 .q-content-row,
.content-page .question-card-v2 .q-content-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    clear: both !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

/* ==========================================================================
   ĐỒNG BỘ CỠ CHỮ ĐỀ BÀI ↔ ĐÁP ÁN + CANH ĐỀU 2 BÊN — 2026-07-28
   Một biến duy nhất --q-font điều khiển cỡ chữ của cả đề bài lẫn đáp án,
   tự co theo bề ngang màn hình (15px → 18px).
   ========================================================================== */
.question-card-v2 {
    --q-font: clamp(15px, 0.9rem + 0.35vw, 18px);
    --q-line: 1.6;
}

.question-card-v2 .q-content-v2,
.question-card-v2 .options-table-v2 td,
.question-card-v2 .options-table-v2 .option-label-v2,
.question-card-v2 .option-label-v2,
.question-card-v2 .sa-box-v2,
.question-card-v2 .sa-answer-grid-v2,
.question-card-v2 .q-answer-v2,
.question-card-v2 .tf-btn-v2,
.bank-panel .question-card-v2 .q-content-row > .q-content-v2 {
    font-size: var(--q-font) !important;
    line-height: var(--q-line) !important;
}

/* Canh đều 2 bên cho cả nội dung câu hỏi lẫn nội dung đáp án */
.question-card-v2 .q-content-v2,
.question-card-v2 .options-table-v2 td,
.question-card-v2 .sa-box-v2,
.bank-panel .question-card-v2 .q-content-row > .q-content-v2 {
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* Nhãn A. B. C. D. và các nút Đúng/Sai giữ canh trái, không bị justify kéo giãn */
.question-card-v2 .option-label-v2,
.question-card-v2 .tf-btn-v2,
.question-card-v2 .tf-btn-cell {
    text-align: left !important;
    text-justify: auto !important;
}

.question-card-v2 .tf-btn-cell { text-align: center !important; }

/* ==========================================================================
   FIX KHOẢNG TRẮNG LỚN Ở KHUNG HẸP (≤640px) — 2026-07-28
   Ở khổ này .q-content-row đổi sang flex-direction: column, khiến
   flex-basis 300px của khối đề bài bị hiểu thành CHIỀU CAO 300px
   → sinh ra một khoảng trắng lớn giữa đề bài và đáp án.
   Trả flex về auto để khối cao đúng bằng nội dung.
   ========================================================================== */
@media (max-width: 640px) {
    .bank-panel .question-card-v2 .q-content-row > .q-content-v2,
    .content-page .question-card-v2 .q-content-row > .q-content-v2,
    .question-card-v2 .q-content-row > .q-content-v2 {
        flex: 0 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .bank-panel .question-card-v2 .q-content-row > .q-image-v2,
    .content-page .question-card-v2 .q-content-row > .q-image-v2,
    .question-card-v2 .q-content-row > .q-image-v2 {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        max-width: min(100%, 260px) !important;
    }

    /* Hàng đề bài không tự sinh chiều cao thừa */
    .bank-panel .question-card-v2 .q-content-row,
    .content-page .question-card-v2 .q-content-row,
    .question-card-v2 .q-content-row {
        min-height: 0 !important;
        align-items: center !important;
    }
}

/* ==========================================================================
   BỔ TRỢ KIẾN THỨC — SƠ ĐỒ CÂY 3 CẤP: Chương → Bài → Chuyên đề — 2026-07-28
   Tên Bài bấm được để mở/đóng danh sách chuyên đề bên dưới.
   ========================================================================== */
.sup-lesson-group { margin: 2px 0 4px; }

.sup-lesson-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    font-size: 13px;
    background: #f1f5f9;
    transition: background .15s, color .15s;
    user-select: none;
}

.sup-lesson-head:hover { background: #e2e8f0; color: #bb2649; }

.sup-lesson-chev {
    font-size: 18px !important;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .2s;
}

.sup-lesson-group.open > .sup-lesson-head .sup-lesson-chev { transform: rotate(90deg); }

.sup-lesson-name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.sup-lesson-count {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: #bb2649;
    background: #bb26491a;
    padding: 1px 8px;
    border-radius: 20px;
}

/* Danh sách chuyên đề: đóng lại khi nhóm không mở */
.sup-lesson-topics { display: none; padding-left: 12px; }
.sup-lesson-group.open > .sup-lesson-topics { display: block; }

.sup-lesson-topics .bank-leaf {
    font-size: 13px;
    border-left: 2px solid #e2e8f0;
    border-radius: 0 8px 8px 0;
}

.sup-lesson-topics .bank-leaf.active { border-left-color: #bb2649; }

/* Nút "Xem trước" tài liệu đính kèm */
.sup-file-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #bb26491a;
    color: #bb2649;
    border: 1px solid #bb264933;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sup-file-preview-btn:hover { background: #bb2649; color: #fff; border-color: #bb2649; }
.sup-file-preview-btn .material-icons-round { font-size: 16px; }

/* Máy tính: giữ nguyên chữ đầy đủ */
.sup-meta-row .sup-lbl-mobile { display: none; }

/* ĐIỆN THOẠI (PWA): hàng thông tin bài gọn lại — Ngày | 👁 | ⬇ File bài học (1 hàng) */
@media (max-width: 640px) {
    .sup-meta-row {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        white-space: nowrap;
    }
    .sup-meta-row .sup-lbl-full { display: none !important; }
    .sup-meta-row .sup-lbl-mobile { display: inline; }
    .sup-meta-row .sup-file-preview-btn {
        padding: 5px 9px;
        flex-shrink: 0;
    }
    .sup-meta-row .sup-file-dl-btn {
        flex-shrink: 0;
        background: #bb26491a;
        border: 1px solid #bb264933;
        border-radius: 8px;
        padding: 5px 10px;
    }
    /* Tiêu đề chuyên đề gọn hơn trên điện thoại */
    .sup-theory-content { font-size: 15px !important; }
}
/* ============================================================
   NGÂN HÀNG ĐỀ THI — CHẾ ĐỘ TOÀN MÀN HÌNH (HỌC SINH)
   ============================================================ */
body.exam-bank-fs #sidebar,
body.exam-bank-fs .sidebar-overlay,
body.exam-bank-fs .mobile-header {
    display: none !important;
}

body.exam-bank-fs #main-screen { width: 100vw !important; }

body.exam-bank-fs .content-area {
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Dùng chung nền hồng của Ngân hàng Lý thuyết / Bài tập (--bg-main: #FCE4EC) */
    background: var(--bg-main) !important;
}

.ebfs-wrap {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
}

/* ---- Thanh tiêu đề cố định (đồng bộ cỡ chữ với Ngân hàng lý thuyết) ---- */
.ebfs-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #bb2649;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.ebfs-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 11px 30px;
}

.ebfs-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ebfs-brand {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.ebfs-hello {
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
    margin: 4px 0 0;
}

.ebfs-hello b { font-weight: 700; color: #fff; }

.ebfs-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ebfs-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .18s;
}

.ebfs-icon-btn:hover { background: rgba(255, 255, 255, .3); }
.ebfs-icon-btn.active { background: #fff; color: #bb2649; border-color: #fff; }
.ebfs-icon-btn .material-icons-round { font-size: 19px; }

/* ---- Thân trang ---- */
.ebfs-body {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 30px 60px;
}

/* ---- Bảng chọn khối + loại đề ---- */
/* Bảng chọn: tab khối và khung trắng dính liền thành một khối */
.ebfs-picker {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #f5dfe5;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 6px 20px rgba(187, 38, 73, .07);
}

.ebfs-grades {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 14px 0;
    background: #bb2649;
    border-right: none;
    flex-shrink: 0;
}

.ebfs-grade {
    position: relative;
    padding: 14px 24px 14px 22px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: default;
    white-space: nowrap;
    text-align: left;
    transition: background .18s, color .18s;
}

.ebfs-grade:not(.disabled):not(.active):hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* Tab đang chọn trắng liền mạch với khung, che luôn đường kẻ dọc */
.ebfs-grade.active {
    background: #fff;
    color: #bb2649;
    box-shadow: 1px 0 0 0 #fff;
    margin-right: -1px;
    padding-right: 25px;
}

.ebfs-grade.disabled { opacity: .6; }

/* Nút lật loại đề: chỉ bật ở @media điện thoại phía dưới */
.ebfs-mnav { display: none; }

.ebfs-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
}

/* Hiệu ứng trượt khi đổi khối */
@keyframes ebfsSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes ebfsSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes ebfsCardIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}

.ebfs-panel.slide-down { animation: ebfsSlideDown .34s cubic-bezier(.3, .9, .35, 1); }
.ebfs-panel.slide-up   { animation: ebfsSlideUp .34s cubic-bezier(.3, .9, .35, 1); }

/* Đổi khối 10 / 11 / 12: mờ dần thay vì trượt cả bảng lên xuống.
   Hiệu ứng trượt gây chóng mắt trên điện thoại vì bảng nội dung khá cao. */
@keyframes ebfsFadeSwap {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.ebfs-panel.grade-fade {
    animation: ebfsFadeSwap .28s cubic-bezier(.25, .8, .35, 1) both;
    will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
    .ebfs-panel.grade-fade { animation: none; }
}

.ebfs-panel-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* Khung giữ chiều cao cố định dù khối nào có nhiều chương hơn */
.ebfs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    flex: 1;
    min-height: 246px;
}

.ebfs-card {
    background: #fdf6f8;
    border: 1.5px solid #f2dee4;
    border-radius: 16px;
    padding: 18px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, background .18s, box-shadow .18s;
    font-family: inherit;
    overflow: hidden;
}

.ebfs-card:hover {
    border-color: #e3a4b4;
    background: #fff;
}

.ebfs-card.active {
    background: #fff5f7;
    border-color: #bb2649;
    border-width: 2.5px;
    margin: -1px;
    box-shadow: 0 0 0 4px rgba(187, 38, 73, .13), 0 8px 22px rgba(187, 38, 73, .22);
}

.ebfs-card-hit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
    cursor: pointer;
    flex-shrink: 0;
}

.ebfs-card-icon { font-size: 32px; color: #c08c9b; transition: .18s; }
.ebfs-card:hover .ebfs-card-icon { color: #bb2649; }
.ebfs-card.active .ebfs-card-icon { color: #bb2649; }

.ebfs-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #8a5a68;
    letter-spacing: .2px;
    line-height: 1.4;
    text-transform: uppercase;
}

.ebfs-card.active .ebfs-card-title { color: #bb2649; }

/* Chip tự xếp 2 cột, quá 4 hàng thì cuộn để khung không phình ra */
.ebfs-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 7px;
    margin-top: 2px;
    width: 100%;
    max-width: 250px;
    flex: 1;
    max-height: 152px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #e8c3cd transparent;
}

.ebfs-chips::-webkit-scrollbar { width: 5px; }
.ebfs-chips::-webkit-scrollbar-thumb { background: #e8c3cd; border-radius: 4px; }
.ebfs-chips::-webkit-scrollbar-track { background: transparent; }

.ebfs-chip {
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid #f0d8df;
    background: #fff;
    color: #8a5a68;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: .15s;
    font-family: inherit;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 32px;
}

.ebfs-chip:hover { border-color: #bb2649; color: #bb2649; }

.ebfs-chip.active {
    background: #bb2649;
    border-color: #bb2649;
    color: #fff;
    box-shadow: 0 2px 8px rgba(187, 38, 73, .3);
}
.ebfs-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ebfs-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 620px;
    min-width: 240px;
    background: #fff;
    border: 1px solid #f0d8df;
    border-radius: 40px;
    padding: 4px 5px 4px 16px;
}

.ebfs-search:focus-within { border-color: #bb2649; }
.ebfs-search-icon { color: #bb2649; font-size: 20px; flex-shrink: 0; }

.ebfs-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 9px 12px;
    font-size: 14px;
    color: #1e293b;
    font-family: inherit;
    min-width: 0;
}

.ebfs-search input::placeholder { color: #a5adb8; }

.ebfs-search-btn {
    border: none;
    background: #bb2649;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 9px 26px;
    border-radius: 30px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: .15s;
}

.ebfs-search-btn:hover { background: #a01f3e; }

/* Nút icon sắp xếp + menu thả xuống */
.ebfs-sort-wrap { position: relative; flex-shrink: 0; }

.ebfs-sort-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #f0d8df;
    background: #fff;
    color: #bb2649;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s;
}

.ebfs-sort-btn:hover { border-color: #bb2649; }
.ebfs-sort-btn.active { background: #bb2649; color: #fff; border-color: #bb2649; }
.ebfs-sort-btn .material-icons-round { font-size: 22px; }

.ebfs-sort-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 196px;
    background: #fff;
    border: 1px solid #f2dee4;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(187, 38, 73, .16);
    padding: 6px;
    z-index: 40;
}

.ebfs-sort-menu.open { display: block; }

.ebfs-sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: .13s;
}

.ebfs-sort-item .material-icons-round { font-size: 18px; color: #94a3b8; }
.ebfs-sort-item:hover { background: #fdf1f4; color: #bb2649; }
.ebfs-sort-item:hover .material-icons-round { color: #bb2649; }

.ebfs-sort-item.active {
    background: #fff1f4;
    color: #bb2649;
    font-weight: 700;
}

.ebfs-sort-item.active .material-icons-round { color: #bb2649; }

/* Nhãn dán độ khó ở góc thẻ đề — chỉ bật lại trong @media điện thoại bên dưới */
.exam-diff-sticker { display: none; }

/* ---- Điện thoại ---- */
@media (max-width: 640px) {
    /* Thanh tiêu đề gọn nhất có thể, vẫn chừa chỗ cho tai thỏ */
    .ebfs-topbar-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: center;
        padding-top: calc(7px + env(safe-area-inset-top, 0px));
        padding-right: calc(14px + env(safe-area-inset-right, 0px));
        padding-bottom: 7px;
        padding-left: calc(14px + env(safe-area-inset-left, 0px));
    }

    /* Cho tiêu đề, lời chào và cụm nút cùng nằm trong lưới của thanh */
    .ebfs-topbar-row { display: contents; }

    .ebfs-brand {
        grid-column: 1;
        grid-row: 1;
        font-size: 15px;
        line-height: 1.25;
    }

    .ebfs-hello {
        grid-column: 1;
        grid-row: 2;
        font-size: 11.5px;
        margin-top: 2px;
    }

    /* Cụm nút căn giữa theo chiều dọc của cả 2 dòng chữ */
    .ebfs-top-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        gap: 7px;
    }

    .ebfs-icon-btn {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .ebfs-icon-btn .material-icons-round { font-size: 17px; }

    .ebfs-body {
        padding: 18px 14px calc(50px + env(safe-area-inset-bottom, 0px));
        padding-left: calc(14px + env(safe-area-inset-left, 0px));
        padding-right: calc(14px + env(safe-area-inset-right, 0px));
    }
    .ebfs-picker { flex-direction: column; }

    .ebfs-grades {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0;
        gap: 0;
        border-right: none;
        border-bottom: none;
    }

    .ebfs-grade {
        flex: 1;
        text-align: center;
        padding: 13px 10px;
        font-size: 13px;
        margin-right: 0;
    }

    .ebfs-grade.active {
        box-shadow: 0 1px 0 0 #fff;
        margin: 0 0 -1px 0;
        padding-right: 10px;
    }

    .ebfs-panel { width: 100%; padding: 18px 14px 20px; }
    .ebfs-panel-title { font-size: 15px; }
    /* Ba loại đề chồng lên nhau, lật qua lại bằng nút < > */
    .ebfs-cards {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
        padding: 0 34px;
    }

    .ebfs-cards > .ebfs-card { display: none; }
    .ebfs-cards > .ebfs-card.active { display: flex; animation: ebfsCardIn .22s ease-out; }

    .ebfs-card { padding: 16px 14px; }
    .ebfs-card-icon { font-size: 30px; }

    .ebfs-mnav {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #f0d8df;
        background: #fff;
        color: #bb2649;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        z-index: 4;
        box-shadow: 0 3px 10px rgba(187, 38, 73, .16);
    }

    .ebfs-mnav:active { background: #bb2649; color: #fff; }
    .ebfs-mnav .material-icons-round { font-size: 21px; }
    .ebfs-mnav-prev { left: 2px; }
    .ebfs-mnav-next { right: 2px; }
    .ebfs-chips { max-width: 280px; margin-left: auto; margin-right: auto; max-height: none; overflow: visible; }
    /* Thẻ đề gọn lại: bỏ nhãn loại đề, ngày đăng và nhãn độ khó trong hàng chip */
    body.exam-bank-fs .exam-row { position: relative; padding-right: 58px; }
    body.exam-bank-fs .exam-meta-cat,
    body.exam-bank-fs .exam-meta-date,
    body.exam-bank-fs .exam-chip-diff { display: none !important; }

    body.exam-bank-fs .exam-meta {
        gap: 14px;
        flex-wrap: nowrap;
        font-size: 12px;
    }

    body.exam-bank-fs .exam-meta-score { display: none !important; }

    .exam-diff-sticker {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        min-width: 40px;
        padding: 3px 9px;
        border-radius: 20px;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
        z-index: 2;
    }

    .ebfs-semester { gap: 10px; margin-bottom: 16px; }

    .ebfs-sem-btn {
        flex: 1;
        min-width: 0;
        padding: 0 10px;
        height: 40px;
        font-size: 13.5px;
    }

    .ebfs-search { min-width: 0; }
    .ebfs-search-btn { padding: 9px 18px; }
}


/* ---- Chọn học kì (chỉ hiện với Đề thi định kì) ---- */
.ebfs-semester {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ebfs-sem-btn {
    min-width: 150px;
    height: 42px;
    padding: 0 24px;
    border-radius: 30px;
    border: 1.5px solid #f0d8df;
    background: #fff;
    color: #8a5a68;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: .15s;
}

.ebfs-sem-btn:hover { border-color: #bb2649; color: #bb2649; }

.ebfs-sem-btn.active {
    background: #bb2649;
    border-color: #bb2649;
    color: #fff;
    box-shadow: 0 4px 14px rgba(187, 38, 73, .28);
}

/* ---- Nút chuyển dạng + ô tick, nằm cùng hàng với "Câu n · mức độ" ----
   Dùng chung cho Ngân hàng bài tập và Ngân hàng lý thuyết.
   `margin-left:auto` đẩy cụm này sát mép phải của hàng tiêu đề.
   `flex-shrink:0` để đề bài dài mấy cũng không bóp méo hai nút. */
.q-title-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Hàng tiêu đề không được xuống dòng — có xuống thì hai nút lại rớt ra riêng,
   đúng cái tật vừa sửa. */
.q-title-row-v2 {
    flex-wrap: nowrap !important;
}

/* ---- Số thứ tự của đề, nằm trong ô tròn ở đầu khung thông tin ----
   Thay cho biểu tượng "quiz" cũ: nhìn vào là biết đang ở đề thứ mấy trong
   danh sách. Số chạy liên tục qua các trang (trang 2 bắt đầu từ 9). */
.exam-stt {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #bb2649 0%, #8b1a34 100%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(187, 38, 73, .25);
}

/* ---- Nút hành động dạng icon trong danh sách đề ---- */
.ebfs-act {
    height: 36px;
    min-width: 36px;
    padding: 0 9px;
    border-radius: 9px;
    border: 1px solid #ecd9df;
    background: #fff;
    color: #8a5a68;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    transition: .15s;
}

.ebfs-act .material-icons-round { font-size: 19px; }
.ebfs-act:hover { border-color: #bb2649; color: #bb2649; background: #fff5f7; }

.ebfs-act-primary {
    background: #bb2649;
    border-color: #bb2649;
    color: #fff;
}

.ebfs-act-primary:hover { background: #a01f3e; border-color: #a01f3e; color: #fff; }

.ebfs-act-sol {
    padding: 0 14px;
    border-color: #bb2649;
    color: #bb2649;
    background: #fff1f4;
}

body.exam-bank-fs .exam-row { transition: border-color .15s; }
body.exam-bank-fs .exam-row:hover { border-color: #edccd5 !important; }

/* ---- Khung xem trước đề ---- */
.ebfs-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(30, 20, 24, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ebfs-preview-box {
    background: #fff;
    border-radius: 16px;
    width: min(1000px, 100%);
    height: min(88vh, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.ebfs-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f2dee4;
    background: #fff5f7;
}

.ebfs-preview-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: #bb2649;
    min-width: 0;
}

.ebfs-preview-title span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebfs-preview-title .material-icons-round { font-size: 20px; flex-shrink: 0; }
.ebfs-preview-frame { flex: 1; width: 100%; border: none; background: #f6f7f9; }

@media (max-width: 640px) {
    .ebfs-preview-overlay { padding: 10px; }
    .ebfs-preview-box { height: 92vh; border-radius: 12px; }
    .ebfs-act { height: 34px; min-width: 34px; padding: 0 8px; }
    .ebfs-act-sol { padding: 0 12px; }
}

/* ---- Ngân hàng đề thi: phần riêng của giáo viên ---- */
.ebfs-card { position: relative; }

.ebfs-card-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #f0d8df;
    background: #fff;
    color: #bb2649;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    transition: .15s;
    z-index: 3;
}

.ebfs-card-edit:hover { opacity: 1; background: #bb2649; color: #fff; border-color: #bb2649; }
.ebfs-card-edit .material-icons-round { font-size: 16px; }

.ebfs-upload-btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 30px;
    border: none;
    background: #bb2649;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: .15s;
}

.ebfs-upload-btn:hover { background: #a01f3e; }
.ebfs-upload-btn .material-icons-round { font-size: 21px; }

.ebfs-act-danger { border-color: #f5c8c8; color: #dc2626; }
.ebfs-act-danger:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }

@media (max-width: 640px) {
    .ebfs-upload-btn { width: 100%; justify-content: center; }
}

/* ---- Ô gợi ý Trường / Sở ra đề ---- */
.sch-ac-list {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 232px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #f2dee4;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(30, 41, 59, .15);
    z-index: 60;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: #e8c3cd transparent;
}

.sch-ac-list::-webkit-scrollbar { width: 6px; }
.sch-ac-list::-webkit-scrollbar-thumb { background: #e8c3cd; border-radius: 4px; }

.sch-ac-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: #475569;
    cursor: pointer;
    transition: .12s;
}

.sch-ac-item:hover,
.sch-ac-item.active { background: #fff1f4; color: #bb2649; font-weight: 600; }

/* ============ MÃ BẢO VỆ TÀI KHOẢN GIÁO VIÊN ============ */
.pin-gate {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(30, 16, 22, .58);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pinFade .18s ease-out;
}

@keyframes pinFade { from { opacity: 0; } to { opacity: 1; } }

.pin-box {
    background: #fff;
    border-radius: 22px;
    padding: 30px 32px 26px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

@keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-9px); }
    40%, 80% { transform: translateX(9px); }
}

.pin-box.shake { animation: pinShake .35s ease; }

.pin-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff1f4;
    color: #bb2649;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon .material-icons-round { font-size: 28px; }

.pin-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #1e293b;
}

.pin-sub {
    margin: 6px 0 22px;
    font-size: 13.5px;
    color: #94a3b8;
}

.pin-inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pin-cell {
    width: 56px;
    height: 64px;
    border: 2px solid #eddbe1;
    border-radius: 14px;
    background: #fdf6f8;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #bb2649;
    font-family: inherit;
    outline: none;
    transition: .15s;
    -moz-appearance: textfield;
}

.pin-cell::-webkit-outer-spin-button,
.pin-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pin-cell:focus {
    border-color: #bb2649;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(187, 38, 73, .13);
}

.pin-cell.filled { border-color: #bb2649; background: #fff; }

.pin-error {
    min-height: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 14px;
}

.pin-actions {
    display: flex;
    gap: 9px;
    justify-content: center;
}

.pin-btn {
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: .15s;
}

.pin-btn .material-icons-round { font-size: 19px; }

.pin-btn-cancel {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
}

.pin-btn-cancel:hover { background: #f8fafc; }

.pin-btn-ok {
    border: none;
    background: #bb2649;
    color: #fff;
    flex: 1;
}

.pin-btn-ok:hover { background: #a01f3e; }

@media (max-width: 420px) {
    .pin-box { padding: 26px 20px 22px; }
    .pin-cell { width: 48px; height: 56px; font-size: 22px; }
    .pin-inputs { gap: 9px; }
    .pin-btn { padding: 0 13px; font-size: 13px; }
}

/* ---- Nút & hộp đổi link mô phỏng trong bài học (giáo viên) ---- */
.btn-edit-sim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: .15s;
    flex-shrink: 0;
}

.btn-edit-sim:hover { background: rgba(255, 255, 255, .26); }
.btn-edit-sim .material-icons-round { font-size: 16px; }
.btn-edit-sim.hidden { display: none !important; }

.sim-link-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(10, 14, 26, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sim-link-box {
    background: #fff;
    border-radius: 20px;
    padding: 26px 28px 24px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.sim-link-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.sim-link-head .material-icons-round {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff1f4;
    color: #bb2649;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    flex-shrink: 0;
}

.sim-link-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
}

.sim-link-head p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

#sim-link-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
}

#sim-link-input:focus { border-color: #bb2649; background: #fff; }

.sim-link-hint {
    margin: 9px 0 20px;
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
}

.sim-link-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.sim-link-btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: .15s;
}

.sim-link-btn .material-icons-round { font-size: 19px; }

.sim-link-cancel {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
}

.sim-link-cancel:hover { background: #f8fafc; }

.sim-link-ok {
    border: none;
    background: #bb2649;
    color: #fff;
}

.sim-link-ok:hover { background: #a01f3e; }

@media (max-width: 640px) {
    .btn-edit-sim { padding: 0 9px; height: 30px; }
    .btn-edit-sim .edit-sim-text { display: none; }
    .sim-link-box { padding: 22px 18px 20px; }
    .sim-link-head p { max-width: 200px; }
}

/* ============================================================
   LÀM BÀI THI — GIAO DIỆN RIÊNG CHO ĐIỆN THOẠI
   Mọi quy tắc nằm trong body.exam-mobile (chỉ bật khi <= 640px)
   ============================================================ */
#exam-pdf-mobile { display: none; }
#mpdf-zoombar { display: none; }

body.exam-mobile .exam-pdf-frame { display: none !important; }

body.exam-mobile #exam-pdf-mobile {
    display: block;
    position: absolute;
    inset: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #525659;
    padding: 8px 0 8px;
}

body.exam-mobile #mpdf-pages {
    width: 100%;
    margin: 0 auto;
    transition: width .18s ease;
}

body.exam-mobile .mpdf-page {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

body.exam-mobile .mpdf-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: #e2e8f0;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

body.exam-mobile .mpdf-msg .material-icons-round { font-size: 40px; opacity: .8; }

body.exam-mobile .mpdf-open {
    background: #fff;
    color: #bb2649;
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
}

body.exam-mobile #mpdf-zoombar {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(20, 20, 24, .78);
    border-radius: 22px;
    padding: 3px;
    z-index: 5;
}

body.exam-mobile #mpdf-zoombar button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

body.exam-mobile #mpdf-zoombar button .material-icons-round { font-size: 18px; }

body.exam-mobile #mpdf-zoom-lbl {
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    min-width: 38px;
    text-align: center;
}

/* ---- Thanh tiêu đề phiếu trả lời gộp luôn nút lật câu ---- */
body.exam-mobile .mq-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px !important;
    border-bottom: 1px solid #eddbe1 !important;
}

body.exam-mobile .mq-bar-mid {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

body.exam-mobile .mq-bar-label {
    font-size: 12px;
    font-weight: 800;
    color: #bb2649;
    text-transform: uppercase;
    letter-spacing: .4px;
}

body.exam-mobile .mq-counter {
    font-size: 12.5px;
    font-weight: 800;
    color: #bb2649;
    background: #fff1f4;
    padding: 2px 9px;
    border-radius: 20px;
}

body.exam-mobile .mq-nav {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1.5px solid #eddbe1;
    background: #fff;
    color: #bb2649;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

body.exam-mobile .mq-nav .material-icons-round { font-size: 22px; }
body.exam-mobile .mq-nav:active { background: #bb2649; color: #fff; }
body.exam-mobile .mq-nav.off { opacity: .3; pointer-events: none; }

body.exam-mobile #answer-sheet {
    padding: 8px 10px 62px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.exam-mobile #answer-sheet h4 {
    font-size: 12.5px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    text-align: center;
}

body.exam-mobile .exam-q-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

/* ---- Thẻ câu hỏi: mỗi màn một câu ---- */
@keyframes mSlideL {
    from { opacity: 0; transform: translateX(38px); }
    to   { opacity: 1; transform: none; }
}

@keyframes mSlideR {
    from { opacity: 0; transform: translateX(-38px); }
    to   { opacity: 1; transform: none; }
}

body.exam-mobile .mslide-l { animation: mSlideL .24s cubic-bezier(.3, .9, .35, 1); }
body.exam-mobile .mslide-r { animation: mSlideR .24s cubic-bezier(.3, .9, .35, 1); }

/* Mặc định ẩn hết, chỉ thẻ có .mshow mới hiện */
body.exam-mobile #answer-sheet [id^="exam-q-p"] { display: none !important; }
body.exam-mobile #answer-sheet [id^="exam-q-p"].mshow { display: block !important; }
body.exam-mobile #answer-sheet [id^="exam-q-p2"].mshow { display: grid !important; }

body.exam-mobile #answer-sheet [id^="exam-q-p"] {
    padding: 12px 12px 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(30, 41, 59, .07) !important;
    margin-bottom: 0 !important;
}

body.exam-mobile #answer-sheet [id^="exam-q-p"] > div:first-child {
    font-size: 14px !important;
    text-align: center;
    margin-bottom: 10px !important;
    color: #bb2649 !important;
}

body.exam-mobile .ans-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-width: 2px !important;
}

body.exam-mobile #answer-sheet [id^="exam-q-p1"] > div:last-of-type,
body.exam-mobile #answer-sheet [id^="exam-q-p3"] > div:last-of-type { gap: 12px !important; }

/* Phần 2 Đúng/Sai: a) b) một hàng, c) d) một hàng */
body.exam-mobile #answer-sheet [id^="exam-q-p2"] {
    grid-template-columns: 1fr 1fr;
    column-gap: 9px;
    row-gap: 9px;
    padding: 12px 10px !important;
}

body.exam-mobile #answer-sheet [id^="exam-q-p2"] > div:first-child {
    grid-column: 1 / -1;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

body.exam-mobile #answer-sheet [id^="exam-q-p2"] > div:not(:first-child) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px;
    padding: 6px 8px !important;
    border-bottom: none !important;
    background: #fdf6f8;
    border: 1px solid #f2dee4;
    border-radius: 11px;
}

body.exam-mobile #answer-sheet [id^="exam-q-p2"] > div:not(:first-child) > span:first-child {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #bb2649 !important;
    flex-shrink: 0;
}

body.exam-mobile #answer-sheet [id^="exam-q-p2"] > div:not(:first-child) > div {
    flex: 1;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
}

body.exam-mobile #answer-sheet [id^="exam-q-p2"] label { display: block; }

body.exam-mobile .tf-btn {
    width: 100% !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    min-width: 0 !important;
    border-radius: 9px !important;
    background: #fff;
}

body.exam-mobile .sa-input {
    width: 40px !important;
    height: 44px !important;
    font-size: 20px !important;
}

/* ---- Nút sao đánh dấu ---- */
body.exam-mobile .mflag {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e6e9ef;
    background: #fff;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: .15s;
}

body.exam-mobile .mflag .material-icons-round { font-size: 17px; }
body.exam-mobile .mflag.on { background: #fbbf24; border-color: #fbbf24; color: #fff; }


/* ---- Ô số ở thanh dưới: đang làm / đã điền / đánh dấu ---- */
body.exam-mobile #exam-timer {
    font-size: 17px !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    letter-spacing: .5px;
}

body.exam-mobile #fixed-bottom-nav {
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
}

body.exam-mobile #fixed-bottom-nav .exam-nav-circle {
    width: 34px;
    height: 34px;
    font-size: 13px;
    font-weight: 800;
}

body.exam-mobile #fixed-bottom-nav .exam-nav-circle.active {
    box-shadow: 0 0 0 3px #fbbf24;
    transform: scale(1.06);
}

body.exam-mobile #fixed-bottom-nav .exam-nav-circle.flagged {
    background: #fbbf24 !important;
    border-color: #fbbf24 !important;
    color: #fff !important;
}

body.exam-mobile #fixed-bottom-nav .exam-nav-circle.flagged::after { content: none; }

/* ============================================================================
   XEM LẠI BÀI THI — BỐ CỤC RIÊNG CHO ĐIỆN THOẠI
   ----------------------------------------------------------------------------
   Máy tính: đề thi bên trái, phiếu chấm bên phải (giữ nguyên như cũ).
   Điện thoại: màn hình hẹp nên xếp dọc theo thứ tự
     1. Thanh đỏ (tên đề + ngày thi, gọn trong 2 hàng)
     2. Thanh trắng "Phiếu chấm điểm chi tiết" kèm điểm số bên phải
     3. Đề thi (cuộn và phóng to được)
     4. Đáp án đã chấm từng phần
   Trước đây trên điện thoại phần đề thi bị đẩy mất, học sinh không xem lại được.
   ========================================================================== */

/* Ô điểm gọn cạnh phiếu chấm — mặc định ẩn, chỉ dùng cho điện thoại */
.rv-score-chip { display: none; }

/* ---- Ô câu bấm được để xem lại đề (Giai đoạn 14) ----
   Chỉ gắn cho đề Word: từng câu nằm sẵn trong bảng exam_questions nên bật
   popup đề của câu đó lên được. Đề PDF cũ không có dữ liệu này. */
.rv-cau-bam {
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}

.rv-cau-bam:hover {
    transform: translateY(-1px);
    border-color: #bb2649 !important;
    box-shadow: 0 4px 12px rgba(187, 38, 73, .15);
}

.rv-cau-bam:active { transform: none; }

/* Dòng gợi ý nhỏ ngay dưới tiêu đề phiếu chấm */
.rv-goi-y {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8a5a68;
    background: #fff5f7;
    border: 1px solid #f2dee4;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-weight: 600;
}

.rv-goi-y .material-icons-round { font-size: 16px; }

@media (max-width: 768px) {
    /* --- 1. Thanh đỏ: gọn lại còn 2 hàng --- */
    .rv-header { padding: 10px 14px !important; }
    .rv-header-row { gap: 10px !important; align-items: flex-start !important; }
    .rv-back { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
    .rv-back .material-icons-round { font-size: 20px; }

    /* Bỏ chữ "Xem lại bài thi:" cho ngắn, chỉ để tên đề */
    .rv-prefix { display: none; }
    .rv-title {
        font-size: 15px !important;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;      /* tối đa 2 hàng, dài hơn thì cắt bằng dấu ... */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Ngày thi: chữ mảnh, luôn nằm gọn 1 hàng */
    .rv-date {
        font-size: 11px !important;
        margin-top: 2px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Điểm to ở thanh đỏ chuyển xuống cạnh phiếu chấm */
    .rv-score-head { display: none !important; }

    /* --- 2. Xếp dọc: phiếu chấm lên trước, đề thi ở giữa --- */
    .rv-body {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    .rv-sheet {
        width: 100% !important;
        overflow: visible !important;
        border-right: none !important;
    }
    .rv-sheet-head {
        position: sticky;   /* luôn thấy tên phần và điểm khi cuộn */
        top: 0;
        z-index: 5;
        padding: 10px 14px !important;
    }

    /* Ô điểm nhỏ nằm khít cạnh dòng "Phiếu chấm điểm chi tiết" */
    .rv-score-chip {
        display: flex;
        align-items: baseline;
        gap: 1px;
        flex-shrink: 0;
        background: linear-gradient(135deg, #bb2649 0%, #8b1a34 100%);
        color: #fff;
        padding: 6px 12px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(187, 38, 73, 0.28);
    }
    .rv-score-chip-num { font-size: 19px; font-weight: 900; line-height: 1; }
    .rv-score-chip-max { font-size: 11px; font-weight: 700; opacity: 0.75; }

    /* --- 3. Đề thi: đưa lên trên phần đáp án, cuộn và phóng to được --- */
    .rv-pdf {
        order: -1;                 /* nằm trước danh sách đáp án */
        height: 62vh;              /* đủ cao để đọc, vẫn thấy đáp án bên dưới */
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;   /* cuộn mượt và phóng to trên iPhone */
    }
    .rv-pdf iframe { min-height: 100%; }
}

/* Màn hình rất hẹp: thu nhỏ thêm cho vừa */
@media (max-width: 400px) {
    .rv-title { font-size: 14px !important; }
    .rv-score-chip { padding: 5px 10px; }
    .rv-score-chip-num { font-size: 17px; }
    .rv-pdf { height: 56vh; }
}

/* ============================================================================
   BỔ SUNG CHO ĐIỆN THOẠI / PWA
   ========================================================================== */

/* --- 1. Đổi mật khẩu & Đăng xuất luôn nằm sát đáy thanh bên (CHỈ PWA) -----
   CHỈ áp dụng cho ứng dụng PWA trên điện thoại (display-mode: standalone).
   Web mở bằng trình duyệt trên máy tính và iPad KHÔNG bị ảnh hưởng.

   Nguyên nhân: ở dòng 3151 có sẵn khối dành riêng cho PWA đặt
   .sidebar { padding-bottom: env(safe-area-inset-bottom) }.
   Cộng thêm .sidebar { height: 100% } trong khi khung cha #app dùng 100svh,
   chiều cao hộp thanh bên tính ra ngắn hơn màn hình thật, nên khối chân
   trang dừng lại giữa chừng và để hở một mảng trắng bên dưới.

   Cách xử lý: ép chiều cao đúng bằng màn hình (100dvh — đơn vị dành riêng
   cho di động), bỏ padding dưới của thanh bên, và chuyển khoảng trống an
   toàn (vùng thanh gạt ngang iPhone) xuống chính khối chân trang.            */
/* Chỉ áp dụng cho màn hình điện thoại (≤640px). iPad rộng 768px trở lên nên
   KHÔNG dính, máy tính cũng không. Không dùng điều kiện display-mode nữa vì
   hai lần trước cách đó vẫn chưa ăn.

   Bỏ hẳn cách phụ thuộc chiều cao (flex + margin-top:auto). Thay vào đó neo
   khối chân trang TUYỆT ĐỐI vào đáy thanh bên: .sidebar đã là position:fixed
   với top:0 và bottom:0, nên chỉ cần bỏ chiều cao cố định là hộp của nó khớp
   đúng màn hình, và chân trang đặt bottom:0 sẽ luôn nằm sát đáy — bất kể
   danh sách menu dài hay ngắn, cuộn hay không cuộn.                          */
@media (max-width: 640px) {
    .sidebar {
        /* Bỏ height:100% để cặp top:0/bottom:0 quyết định chiều cao.
           Cũng bỏ padding-bottom của khối PWA ở dòng 3151 — khoảng trống an
           toàn được chuyển xuống chính khối chân trang bên dưới. */
        height: auto !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        box-sizing: border-box;
    }

    .sidebar > .sidebar-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 0;
        background: var(--bg-card);
        border-top: 1px solid var(--border-light);
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.04);
    }
    .sidebar > .sidebar-footer .footer-menu { padding-bottom: 0; }

    /* Chừa chỗ trống cuối danh sách menu để mục cuối không bị chân trang che */
    .sidebar > .nav-menu {
        padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Riêng ứng dụng PWA: ép thanh bên cao đúng bằng màn hình thật ---------
   TRIỆU CHỨNG: mở bằng Safari thì chân trang nằm sát đáy (đúng), nhưng mở
   bằng PWA thì nó dừng lại đúng chỗ mà thanh địa chỉ Safari sẽ nằm — dù PWA
   không hề có thanh đó. Thầy Phúc phát hiện ra điểm này.

   NGUYÊN NHÂN: iOS tính chiều cao cho thanh bên theo "màn hình TRỪ thanh
   trình duyệt" (đơn vị svh) thay vì màn hình đầy đủ. CSS có 3 đơn vị:
     svh = màn hình trừ thanh trình duyệt  (đang bị dùng — thiếu ~90pt)
     dvh = co giãn theo lúc                (đã thử, vẫn thiếu)
     lvh = màn hình ĐẦY ĐỦ                 (đúng thứ cần)

   Ba dòng height dưới đây xếp từ cũ đến mới; trình duyệt hiểu dòng nào thì
   dùng dòng cuối cùng nó hiểu, nên máy cũ vẫn chạy được.
   CHỈ áp dụng cho PWA — Safari và iPad giữ nguyên vì đang hiển thị đúng.     */
@media (display-mode: standalone) and (max-width: 640px) {
    .sidebar {
        height: 100vh !important;
        height: -webkit-fill-available !important;
        height: 100lvh !important;
        max-height: none !important;
        padding-bottom: 0 !important;
    }
}

/* --- 2. Tên đề thi: tách 2 dòng, không bị nhãn độ khó che ------------------
   Nhãn Dễ/TB/Khó nằm góc phải trên thẻ. Tên đề dài bị nó đè lên.
   Nay: dòng 1 là cụm mở đầu ("Đề thi"), dòng 2 là tên riêng với cỡ chữ
   tự co theo độ dài để nằm gọn một hàng.                                     */
.exam-title-pre,
.exam-title-main { display: inline; }

@media (max-width: 768px) {
    .exam-title-line { align-items: flex-start !important; }
    .exam-title-line .material-icons-round { margin-top: 2px; }
    .exam-title-text {
        display: block;
        padding-right: 58px;   /* chừa chỗ cho nhãn độ khó ở góc phải */
        line-height: 1.3;
    }
    .exam-title-pre {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 1px;
    }
    .exam-title-main {
        display: block;
        font-size: var(--exam-title-size, 14.5px);
        font-weight: 800;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Nhãn độ khó: thu gọn cho cân đối với tiêu đề 2 dòng */
    .exam-diff-sticker {
        font-size: 10.5px !important;
        padding: 3px 9px !important;
    }
}

/* --- Nút bật thông báo trên thanh đỏ ở mục Thông báo -----------------------
   Trước đây nằm trong menu chính, nay chuyển vào đây cho gọn menu.

   LƯU Ý: .header-container được CSS quy định xếp DỌC (flex-direction: column),
   nên nút phải đặt NGOÀI khối đó rồi cho cả thanh tiêu đề thành hàng ngang.
   Nhờ vậy phần tiêu đề giữ nguyên như cũ, nút nằm bên phải và ngang hàng.    */
.page-header.notif-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    /* Bỏ padding phải của thanh tiêu đề để tự canh nút bên dưới cho khớp
       đúng mép phải khung trắng nội dung. */
    padding-right: 0;
}
.page-header.notif-header > .header-container {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-push-btn {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s, transform .18s;
    /* Canh thẳng mép phải với khung trắng nội dung bên dưới.
       .content-page có padding phải 40px trên máy tính. */
    margin-right: 40px;
}
.notif-push-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.06); }
.notif-push-btn:active { transform: scale(0.96); }
.notif-push-btn img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}
.notif-push-btn .material-icons-round { color: #fff; font-size: 34px; }

/* Màn hình vừa: .content-page đổi padding phải thành 15px */
@media (max-width: 1024px) {
    .notif-push-btn { margin-right: 15px; }
}

/* Điện thoại: .content-page đổi padding phải thành 16px */
@media (max-width: 640px) {
    .notif-push-btn {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        margin-right: 16px;
    }
    .notif-push-btn img { width: 30px; height: 30px; }
    .notif-push-btn .material-icons-round { font-size: 28px; }
}

/* ============================================================================
   PHẢN HỒI HỌC SINH — nút xác nhận / xoá và lời cảm ơn
   ========================================================================== */

/* Nút tròn nhỏ bên giáo viên, chỉ có biểu tượng không có chữ */
.fb-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .16s, transform .16s;
    flex-shrink: 0;
}
.fb-btn .material-icons-round { font-size: 19px; }
.fb-btn:active { transform: scale(0.92); }

.fb-btn-ack { background: #dcfce7; color: #15803d; }
.fb-btn-ack:hover { background: #bbf7d0; }

.fb-btn-del { background: #fee2e2; color: #b91c1c; }
.fb-btn-del:hover { background: #fecaca; }

/* Đã xác nhận rồi thì thay nút bằng dấu tích tĩnh */
.fb-acked {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    flex-shrink: 0;
}
.fb-acked .material-icons-round { font-size: 21px; }

/* Ghi chú nhỏ dưới phản hồi ở phía giáo viên */
.fb-ack-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #cbd5e1;
    font-size: 11.5px;
    color: #64748b;
    font-style: italic;
}

/* Lời cảm ơn hiện dưới phản hồi ở phía học sinh */
.fb-thanks {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #166534;
    font-weight: 600;
    line-height: 1.45;
}
.fb-thanks .material-icons-round { font-size: 15px; color: #ef4444; flex-shrink: 0; }

@media (max-width: 640px) {
    .fb-thanks { font-size: 12px; padding: 7px 10px; }
    .fb-btn { width: 28px; height: 28px; }
    .fb-btn .material-icons-round { font-size: 17px; }
}

/* ============================================================================
   PWA TRÊN ĐIỆN THOẠI — XOÁ VỆT HỒNG Ở ĐÁY MÀN HÌNH   (thêm 07/08/2026)

   TRIỆU CHỨNG: mở bằng ứng dụng PWA trên điện thoại, ở đáy mọi trang (Bảng
   điều khiển, Thông báo, Tài khoản học sinh, Thùng rác, Phản hồi & Góp ý…)
   có một vệt hồng nằm ngay trên dải trắng của thanh gạt ngang iPhone. Mở
   bằng Safari hoặc trên iPad thì không có.

   NGUYÊN NHÂN: đúng thủ phạm đã gây lỗi thanh bên trước đây —
   #main-screen đặt height: 100svh. Trong PWA iOS, đơn vị svh KHÔNG bằng
   màn hình thật, nên khung #main-screen ngắn hơn khung cha #app (vốn đã
   position:fixed phủ kín màn hình). Vùng cuộn .content-area nằm trong
   #main-screen cũng bị ngắn theo, để hở một mảng — mảng đó lộ nền hồng
   (--bg-main: #FCE4EC) của lớp .screen bên dưới, thành vệt hồng Thầy thấy.

   CÁCH XỬ LÝ (hai lớp, chắc chắn hết dù iOS bản nào):
     1. Ép #main-screen cao đúng bằng #app — tức bằng màn hình thật.
        Ba dòng height xếp từ cũ đến mới, trình duyệt hiểu dòng nào dùng
        dòng đó (giống hệt cách đã sửa cho .sidebar ở trên).
     2. Đổi nền lót của #main-screen sang TRẮNG. Nếu vì lý do gì vẫn còn hở
        vài pixel thì chỗ hở đó là màu trắng, trùng với dải trắng của iPhone
        nên nhìn không thấy. Nền hồng của nội dung do .content-area giữ,
        không đổi gì — giao diện các trang vẫn y như cũ.

   CHỈ áp dụng cho PWA + màn hình điện thoại. Safari, iPad, máy tính giữ
   nguyên vì đang hiển thị đúng.
   ========================================================================== */
@media (display-mode: standalone) and (max-width: 768px) {

    #app {
        height: 100vh !important;
        height: -webkit-fill-available !important;
        height: 100lvh !important;
    }

    #main-screen {
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        background: #ffffff !important;
    }

    /* Vùng cuộn ăn hết chỗ còn lại dưới thanh tiêu đề — không để hở mảng nào.
       Vẫn giữ khoảng trống an toàn ở đáy để thẻ cuối không bị thanh gạt che. */
    #main-screen > .content-area {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }
}

/* ══════════ SÓNG TIẾN ĐỘ TRÊN THẺ ĐỀ — Ngân hàng đề thi (giáo viên) ══════════
   Ý tưởng: chiều ngang của cả thẻ đề tượng trưng cho SĨ SỐ CẢ KHỐI. Mỗi em nộp
   bài thì lớp sóng hồng dâng thêm một đoạn. Sóng tràn kín thẻ = cả khối đã làm
   xong đề đó. Nhờ vậy lướt mắt qua danh sách là biết ngay đề nào còn "nguội".
   Toàn bộ lớp sóng nằm ở z-index 0 và pointer-events:none nên không che chữ,
   không chắn nút bấm, và không ảnh hưởng gì tới thao tác cũ. */

.exam-row { position: relative; overflow: hidden; isolation: isolate; }
.exam-row-noi { position: relative; z-index: 1; }

.song-hs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Bề rộng = tỉ lệ học sinh đã làm. Rìa phải làm mờ dần cho mềm mắt, thay vì
   cắt phập một đường thẳng đứng. */
.song-lop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--song-tien, 0%);
    overflow: hidden;
    background: linear-gradient(90deg,
            rgba(255, 241, 246, .50) 0%,
            rgba(252, 222, 234, .78) 55%,
            rgba(249, 201, 220, .92) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    transition: width 1.15s cubic-bezier(.22, 1, .36, 1);
}

/* Ba dải sóng chồng nhau, khác chiều và khác tốc độ → giao thoa thành những
   nếp gợn không lặp lại, giống dải lụa. */
.song-lan { position: absolute; left: 0; width: 200%; }
.song-lan svg { display: block; width: 100%; height: 100%; }
.song-nen { fill: rgba(244, 143, 177, .30); }
.song-net { stroke: rgba(225, 29, 72, .22); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

@keyframes song-troi {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.song-lan-1 { top: 8%;   height: 92%;  opacity: .90; animation: song-troi 11s linear infinite; }
.song-lan-2 { top: 26%;  height: 74%;  opacity: .60; animation: song-troi 17s linear infinite reverse; }
.song-lan-3 { top: -4%;  height: 104%; opacity: .40; animation: song-troi 26s linear infinite; }

/* Đầu ngọn sóng — một vệt sáng thở nhè nhẹ, đánh dấu đang tới đâu. */
.song-dinh {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: var(--song-tien, 0%);
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, rgba(225, 29, 72, .55), transparent);
    animation: song-tho 2.8s ease-in-out infinite;
    transition: left 1.15s cubic-bezier(.22, 1, .36, 1);
}

@keyframes song-tho {
    0%, 100% { opacity: .30; }
    50%      { opacity: .95; }
}

/* Cả khối đã làm xong: bỏ rìa mờ, đậm màu lên và cho một vệt sáng lướt qua. */
.song-day-du .song-lop {
    -webkit-mask-image: none;
    mask-image: none;
    background: linear-gradient(90deg,
            rgba(255, 236, 244, .68) 0%,
            rgba(250, 208, 226, .88) 50%,
            rgba(244, 178, 208, .95) 100%);
}

.song-day-du .song-nen { fill: rgba(236, 114, 163, .34); }
.song-day-du .song-dinh { display: none; }

.song-day-du::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .60) 50%, transparent 64%);
    animation: song-loe 4.6s ease-in-out infinite;
}

@keyframes song-loe {
    0%        { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

/* Con số nhỏ đi kèm, để biết chính xác bao nhiêu trên bao nhiêu. */
.song-nhan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #be2b57;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(225, 29, 72, .18);
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.song-nhan .material-icons-round { font-size: 13px; }
.song-nhan i { font-style: normal; opacity: .45; margin: 0 1px; }

.song-nhan-du {
    color: #15803d;
    background: rgba(240, 253, 244, .92);
    border-color: rgba(22, 163, 74, .28);
}

@media (max-width: 640px) {
    .song-lop { -webkit-mask-image: none; mask-image: none; opacity: .9; }
}

/* Máy nào đặt "giảm chuyển động" thì giữ nguyên mực sóng, chỉ bỏ phần động. */
@media (prefers-reduced-motion: reduce) {
    .song-lan,
    .song-dinh,
    .song-day-du::after { animation: none !important; }
    .song-lop,
    .song-dinh { transition: none !important; }
}

/* ── Thẻ đề bên HỌC SINH: huy chương vàng · số bạn đã làm · huy hiệu HOT ── */

/* Điểm cao nhất em từng đạt — huy chương vàng thay cho dòng chữ dài. */
.hs-huy-chuong {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #a16207;
}

.hs-huy-chuong .material-icons-round {
    font-size: 17px;
    color: #eab308;
    filter: drop-shadow(0 1px 1px rgba(161, 98, 7, .35));
}

.hs-huy-chuong b { font-weight: 800; font-size: 12.5px; }

/* Bao nhiêu bạn đã làm đề này — đúng bằng độ dài của sóng phía sau. */
.hs-so-nguoi {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-secondary);
}

.hs-so-nguoi .material-icons-round { font-size: 16px; opacity: .75; }
.hs-so-nguoi b { font-weight: 800; font-size: 12.5px; }

/* Huy hiệu HOT — đề đang được nhiều bạn luyện. Ngọn lửa thở nhè nhẹ. */
.exam-hot {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 9px 3px 6px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #fff;
    background: linear-gradient(135deg, #f97316 0%, #e11d48 100%);
    box-shadow: 0 2px 8px rgba(225, 29, 72, .32);
    pointer-events: none;
}

.exam-hot .material-icons-round {
    font-size: 14px;
    animation: hot-chay 1.6s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes hot-chay {
    0%, 100% { transform: scale(1) rotate(-3deg); opacity: .92; }
    50%      { transform: scale(1.16) rotate(3deg); opacity: 1; }
}

/* Trên máy tính nhãn độ khó nằm ở hàng chip nên góc phải trống, HOT đứng một
   mình. Trên điện thoại nhãn độ khó chiếm sẵn góc đó — đẩy nó sang trái. */
@media (max-width: 640px) {
    .exam-row:has(.exam-hot) .exam-diff-sticker { right: 62px; }
}

@media (prefers-reduced-motion: reduce) {
    .exam-hot .material-icons-round { animation: none !important; }
}

/* Thẻ có huy hiệu HOT: đẩy cụm nút xuống một chút để không đụng ngọn lửa. */
.exam-row-hot .exam-actions-row { margin-top: 20px; }

/* Điểm cao nhất trước đây bị ẩn trên điện thoại vì dòng chữ quá dài. Nay chỉ
   còn một huy chương bé xíu nên cho hiện lại — đó là thứ học sinh muốn thấy. */
body.exam-bank-fs .exam-meta-score.hs-huy-chuong { display: inline-flex !important; }

/* ============================================================
   LỊCH MỞ ĐỀ — nút hình lịch trên thẻ đề (giáo viên) và nhãn
   trạng thái / lớp mờ khi hết hạn (học sinh).
   Logic: js/lich-de.js · lich_de_thi.js
   ============================================================ */

/* Chưa đặt lịch: nút xám nhạt, chìm xuống — nhìn là biết "chưa bật". */
.ebfs-act-lich {
    color: #a8b0bb;
    border-color: #e7ebf0;
    background: #fbfcfd;
}

.ebfs-act-lich:hover {
    color: #bb2649;
    border-color: #bb2649;
    background: #fff5f7;
}

/* Đã đặt lịch: nút phát sáng để lướt mắt qua danh sách là thấy ngay đề nào có hẹn giờ. */
.ebfs-act-lich.dang-bat {
    color: #fff;
    border-color: #bb2649;
    background: linear-gradient(135deg, #d63a5f, #a01f3e);
    box-shadow: 0 0 0 3px rgba(187, 38, 73, .14), 0 4px 12px rgba(187, 38, 73, .3);
    animation: lichSang 2.4s ease-in-out infinite;
}

.ebfs-act-lich.dang-bat:hover {
    color: #fff;
    background: linear-gradient(135deg, #c22e51, #8d1a35);
}

@keyframes lichSang {
    0%, 100% { box-shadow: 0 0 0 3px rgba(187, 38, 73, .14), 0 4px 12px rgba(187, 38, 73, .30); }
    50%      { box-shadow: 0 0 0 6px rgba(187, 38, 73, .06), 0 4px 16px rgba(187, 38, 73, .42); }
}

@media (prefers-reduced-motion: reduce) {
    .ebfs-act-lich.dang-bat { animation: none; }
}

/* ============================================================
   CHẤM LẠI TOÀN BỘ — nút mũi tên vòng trên thẻ đề định kì.
   Logic: js/teacher.js · moChamLai() · exam_parser/exam_barem_api.js

   Nút này CHỈ hiện khi đề đã có bài nộp VÀ barem hiện tại khác
   barem đã đông cứng ở ít nhất một bài — tức là đang có điểm cũ
   lệch với cách chấm mới. Chấm lại xong nút tự biến mất.

   ⚠ Màu CAM, không mượn đỏ của nút lịch: hai nút cạnh nhau mà
   cùng đỏ nhấp nháy thì lướt mắt qua danh sách sẽ tưởng đề nào
   cũng "có hẹn giờ". Cam = "còn việc dở", đỏ = "có lịch".
   ============================================================ */
.ebfs-act-cham-lai {
    color: #fff;
    border-color: #d97706;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .14), 0 4px 12px rgba(217, 119, 6, .3);
    animation: chamLaiSang 2.4s ease-in-out infinite;
}

.ebfs-act-cham-lai:hover {
    color: #fff;
    border-color: #b45309;
    background: linear-gradient(135deg, #d97706, #b45309);
}

@keyframes chamLaiSang {
    0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 6, .14), 0 4px 12px rgba(217, 119, 6, .30); }
    50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, .06), 0 4px 16px rgba(217, 119, 6, .42); }
}

@media (prefers-reduced-motion: reduce) {
    .ebfs-act-cham-lai { animation: none; }
}

/* Nhãn trạng thái lịch gắn cạnh các chip thông tin của đề */
.lich-nhan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.lich-nhan .material-icons-round { font-size: 13px; }

/* ---- Bên học sinh: đề chưa mở / đã hết hạn / hết lượt ---- */
/* Vẫn nhìn thấy đề (để biết mà chuẩn bị) nhưng mờ đi và không bấm được. */
.exam-row.de-khoa {
    opacity: .55;
    filter: grayscale(.55);
}

.exam-row.de-khoa .exam-actions-row .ebfs-act-primary {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: #f8fafc;
    cursor: not-allowed;
    box-shadow: none;
}

.exam-row.de-khoa .exam-actions-row .ebfs-act-primary:hover {
    background: #cbd5e1;
    border-color: #cbd5e1;
}

/* Sóng tiến độ và huy hiệu HOT trên thẻ bị khoá cũng phải dịu lại,
   nếu không nền hồng vẫn rực trong khi chữ đã mờ, nhìn rất chỏi. */
.exam-row.de-khoa .song-hs { opacity: .35; }
.exam-row.de-khoa .exam-hot { display: none; }

/* ==========================================================================
   CÂU HỎI CHÙM — KHUNG LỚN BỌC KHUNG NHỎ  (lát 2 · 10/08/2026)

   Hai câu dùng chung một đoạn dẫn đề nằm gọn trong MỘT khung lớn: trên cùng là
   đoạn dẫn (nền cam nhạt), dưới là các thẻ câu hỏi, cuối cùng là nút của cả chùm.

   ⚠ KHUNG NHỎ BÊN TRONG PHẢI BỎ VIỀN. Khung lồng khung trên điện thoại bị bóp
     hẹp vì padding cộng dồn hai lớp; tách bạch bằng NỀN TRẮNG trên nền xám nhạt
     là đủ, không tốn thêm một milimet chiều ngang nào.
   ========================================================================== */
.chum-lon {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #c2410c;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
}

/* ---- đoạn dẫn đề ---- */
.chum-dan {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

/* ĐOẠN DẪN PHẢI CÙNG FONT, CÙNG CỠ VỚI ĐỀ BÀI  (10/08/2026)

   Đoạn dẫn và đề bài là MỘT mạch đọc liền: đọc xong "Bảng bên dưới ghi lại nhiệt độ…"
   là mắt chạy thẳng xuống "Tại phút thứ 5, mẫu chất tồn tại ở thể". Trước đây đoạn dẫn
   thừa hưởng font sans-serif của cả trang, còn đề bài thì đã được ép Times New Roman
   18px ở khối "Đồng bộ font Times New Roman" (~dòng 4324) — hai kiểu chữ khác nhau
   nằm sát nhau nên nhìn như hai đề rời.

   ⚠ BA GIÁ TRỊ DƯỚI ĐÂY PHẢI KHỚP VỚI `.question-card-v2 .q-content-v2`.
     Sửa cỡ chữ đề bài ở khối kia thì phải sửa cả ở đây, nếu không lại lệch tiếp. */
.chum-dan-dau {
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    font-weight: 700;
    color: #c2410c;
    margin-bottom: 6px;
}

.chum-dan-noi {
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
    color: #7c2d12;
    line-height: 1.55;
    text-align: justify;
    text-justify: inter-word;
}

.chum-dan-anh { margin-top: 10px; }

.chum-dan-anh img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

/* ---- các khung nhỏ bên trong ---- */
.chum-con {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chum-lon .question-card-v2 {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 12px;
    background: #fff;
}

/* ---- hàng nút của cả chùm ---- */
.chum-nut {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 640px) {
    .chum-lon { padding: 10px; border-radius: 12px; }
    .chum-dan { padding: 10px 11px; }
    .chum-lon .question-card-v2 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Trên điện thoại, đề bài co xuống 15px (khối `@media (max-width: 480px)` ~dòng 1665).
   Đoạn dẫn phải co theo đúng bằng đó, nếu không đoạn dẫn lại to hơn chính câu hỏi. */
@media (max-width: 480px) {
    .chum-dan-noi { font-size: 15px; }
    .chum-dan-dau { font-size: 14px; }
}