/* ═══════════════════════════════════════════════════════════
   Luyện Grammar cùng AI — module CSS
   Brand palette: teal-cyan primary + violet accent.
   Design parallels Speaking but uses gr- prefix to avoid collisions.
   ═══════════════════════════════════════════════════════════ */

/* Hide Alpine x-cloak elements until the framework boots. */
[x-cloak] { display: none !important; }

:root {
    --gr-teal:        #0891B2;
    --gr-teal-mid:    #06B6D4;
    --gr-teal-lt:     #CFFAFE;
    --gr-teal-dk:     #155E75;

    --gr-violet:      #7C3AED;
    --gr-violet-mid:  #8B5CF6;
    --gr-violet-lt:   #EDE9FE;
    --gr-violet-dk:   #4C1D95;

    --gr-amber:       #F59E0B;
    --gr-amber-lt:    #FEF3C7;

    --gr-green:       #059669;
    --gr-green-lt:    #D1FAE5;

    --gr-red:         #DC2626;
    --gr-red-lt:      #FEE2E2;

    --gr-gray-50:     #F9FAFB;
    --gr-gray-100:    #F3F4F6;
    --gr-gray-200:    #E5E7EB;
    --gr-gray-300:    #D1D5DB;
    --gr-gray-400:    #9CA3AF;
    --gr-gray-500:    #6B7280;
    --gr-gray-600:    #4B5563;
    --gr-gray-700:    #374151;
    --gr-gray-900:    #111827;
    --gr-white:       #FFFFFF;
    --gr-sub-card:    var(--gr-gray-50);

    --gr-sidebar-w:   260px;
    --gr-radius:      14px;
    --gr-radius-sm:   8px;
    --gr-radius-lg:   18px;
    --gr-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --gr-shadow-md:   0 4px 8px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
    --gr-shadow-lg:   0 12px 28px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
    --gr-transition:  .18s cubic-bezier(.4,0,.2,1);
}

/* Dark mode token overrides */
.ae-dark-mode {
    --gr-gray-50:    #0F0F12;
    --gr-gray-100:   #27272A;
    --gr-gray-200:   #3F3F46;
    --gr-gray-300:   #52525B;
    --gr-gray-400:   #A1A1AA;
    --gr-gray-500:   #D4D4D8;
    --gr-gray-600:   #C7C7CC;
    --gr-gray-700:   #E4E4E7;
    --gr-gray-900:   #FAFAFA;
    --gr-white:      #1C1C1E;
    --gr-sub-card:   #2A2A2D;
    --gr-teal-lt:    rgba(6,182,212,.20);
    --gr-violet-lt:  rgba(124,58,237,.22);
    --gr-amber-lt:   rgba(245,158,11,.20);
    --gr-green-lt:   rgba(5,150,105,.20);
    --gr-red-lt:     rgba(220,38,38,.20);
    /* Brighter foreground variants for dark mode — base tokens are too
       dim on dark backgrounds (e.g. #7C3AED on #0F0F12 = unreadable). */
    --gr-violet:     #A78BFA;   /* violet-400 — readable on dark */
    --gr-violet-mid: #C4B5FD;   /* violet-300 — for em/links */
    --gr-violet-dk:  #DDD6FE;   /* violet-200 — strongest emphasis */
    --gr-teal:       #22D3EE;   /* cyan-400 */
    --gr-teal-dk:    #67E8F9;   /* cyan-300 */
    --gr-amber:      #FBBF24;   /* amber-400 */
    --gr-green:      #34D399;   /* emerald-400 */
    --gr-red:        #F87171;   /* red-400 */
    --gr-shadow:     0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --gr-shadow-md:  0 4px 8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
    --gr-shadow-lg:  0 12px 28px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
}

/* Hide theme header/footer on the grammar page */
.gr-full-page .hd,
.gr-full-page .ft,
.gr-full-page footer.ft { display: none !important; }

/* ── Root layout ───────────────────────────────────────── */
.gr-root {
    display: flex;
    min-height: 100vh;
    background: var(--gr-gray-50);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    line-height: 1.5;
    color: var(--gr-gray-900);
}

/* ── Sidebar ───────────────────────────────────────────── */
.gr-sidebar {
    width: var(--gr-sidebar-w);
    background: var(--gr-white);
    border-right: 1px solid var(--gr-gray-200);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 40;
    transition: transform .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}
.admin-bar .gr-sidebar { top: 32px; height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
    .admin-bar .gr-sidebar { top: 46px; height: calc(100vh - 46px); }
}

.gr-main {
    margin-left: var(--gr-sidebar-w);
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
    transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}

/* ── Sidebar collapse button — neutral white (light) / black (dark) ── */
.gr-sidebar-collapse {
    position: fixed;
    top: 50%;
    /* Center the 32x32 button on the 1px sidebar border line */
    left: calc(var(--gr-sidebar-w) - 16px);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 1px solid var(--gr-gray-300);
    background: var(--gr-white);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gr-gray-600);
    box-shadow: 0 2px 8px -1px rgba(0,0,0,.06);
    transition: color .15s ease, background .15s ease, border-color .15s ease, left .25s cubic-bezier(.4,0,.2,1), transform .15s ease, box-shadow .15s ease;
    padding: 0;
    z-index: 41;
}
.gr-sidebar-collapse:hover {
    background: var(--gr-violet);
    color: #fff;
    border-color: var(--gr-violet);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 16px -2px rgba(124,58,237,.40);
}
.gr-sidebar-collapse-icon {
    width: 20px;
    height: 20px;
}
/* Flat (modern) UI — chỉ glyph phẳng; asset skeuo ẩn (bật khi html.theme-skeuo) */
html:not(.theme-skeuo) .gr-sidebar-collapse .gr-icon-skeuo-light,
html:not(.theme-skeuo) .gr-sidebar-collapse .gr-icon-skeuo-dark,
html:not(.theme-skeuo) .gr-sidebar-expand .gr-icon-skeuo-light,
html:not(.theme-skeuo) .gr-sidebar-expand .gr-icon-skeuo-dark { display: none !important; }
html:not(.theme-skeuo) .gr-sidebar-collapse .gr-icon-flat,
html:not(.theme-skeuo) .gr-sidebar-expand .gr-icon-flat { display: block; }
.admin-bar .gr-sidebar-collapse { top: calc(50% + 16px); }
.gr-sidebar-collapsed .gr-sidebar-collapse { display: none; }
/* Dark mode — black bg + thin white border + white icon */
.ae-dark-mode .gr-sidebar-collapse {
    background: #0F172A;
    color: #fff;
    border-color: rgba(255,255,255,.40);
    box-shadow: 0 2px 8px -1px rgba(0,0,0,.40);
}
.ae-dark-mode .gr-sidebar-collapse:hover {
    background: var(--gr-violet);
    color: #fff;
    border-color: var(--gr-violet);
}

/* Floating expand button — appears at TOP-LEFT when sidebar collapsed */
.gr-sidebar-expand {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 50;
    width: 40px;
    height: 40px;
    border: 1px solid var(--gr-gray-200);
    background: var(--gr-white);
    border-radius: 10px;
    cursor: pointer;
    display: none; /* hidden when sidebar open */
    align-items: center;
    justify-content: center;
    color: var(--gr-gray-700);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transition: background .15s ease, transform .15s ease;
    padding: 0;
}
.gr-sidebar-expand:hover {
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    transform: scale(1.05);
}
.gr-sidebar-expand-icon {
    width: 20px;
    height: 20px;
}
.admin-bar .gr-sidebar-expand { top: 50px; }

/* Collapsed state */
.gr-sidebar-collapsed .gr-sidebar { transform: translateX(-100%); }
.gr-sidebar-collapsed .gr-main { margin-left: 0; }
.gr-sidebar-collapsed .gr-sidebar-expand { display: flex; }

/* Hide both toggles on mobile (mobile uses gr-mobile-toggle hamburger) */
@media (max-width: 1024px) {
    .gr-sidebar-collapse,
    .gr-sidebar-expand { display: none !important; }
    /* Drawer mobile ĐANG MỞ → hiện nút ổ khoá ở mép drawer để ĐÓNG (JS: mobile = close) */
    body.gr-sidebar-open .gr-sidebar-collapse { display: flex !important; z-index: 101; }
    .gr-sidebar-collapsed .gr-main { margin-left: 0; }
}

/* Brand row needs flex now to accommodate collapse button on the right */
.gr-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gr-sidebar-brand-text { flex: 1; min-width: 0; }

/* Dark mode */
.ae-dark-mode .gr-sidebar-collapse:hover {
    background: rgba(255,255,255,.06);
    color: #C4B5FD;
}
.ae-dark-mode .gr-sidebar-expand {
    background: rgba(15,23,42,.95);
    border-color: rgba(255,255,255,.12);
    color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.ae-dark-mode .gr-sidebar-expand:hover {
    background: rgba(124,58,237,.20);
    color: #C4B5FD;
}

.gr-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--gr-gray-200);
}
.gr-sidebar-brand-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--gr-teal-mid), var(--gr-violet-mid));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 4px 10px rgba(8,145,178,.30);
}
.gr-sidebar-brand-icon svg { width: 22px; height: 22px; }
.gr-sidebar-brand-name { font-weight: 800; font-size: 14px; color: var(--gr-gray-900); line-height: 1.2; letter-spacing: -.01em; }
.gr-sidebar-brand-sub  { font-size: 11px; color: var(--gr-gray-400); margin-top: 1px; }

.gr-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.gr-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--gr-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--gr-gray-500);
    text-decoration: none;
    transition: all var(--gr-transition);
    position: relative;
}
.gr-nav-item:hover { background: var(--gr-gray-100); color: var(--gr-gray-900); }
.gr-nav-item.is-active {
    background: var(--gr-teal-lt);
    color: var(--gr-teal-dk);
    font-weight: 600;
}
.ae-dark-mode .gr-nav-item.is-active { color: #67E8F9; }
.gr-nav-icon { width: 18px; height: 18px; flex-shrink: 0; }

.gr-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--gr-gray-200);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gr-home-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--gr-radius-sm);
    color: var(--gr-gray-500);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--gr-transition), color var(--gr-transition);
}
.gr-home-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.gr-home-link:hover {
    background: var(--gr-gray-100);
    color: var(--gr-gray-900);
    text-decoration: none;
}

.gr-footer-nav-link.is-active {
    background: linear-gradient(135deg, rgba(8,145,178,.10), rgba(34,211,238,.06));
    color: var(--gr-teal-dk);
    font-weight: 600;
}
.gr-footer-nav-link.is-active svg { color: var(--gr-teal); }
.ae-dark-mode .gr-footer-nav-link.is-active {
    background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(34,211,238,.08));
    color: #67E8F9;
}
.ae-dark-mode .gr-footer-nav-link.is-active svg { color: #67E8F9; }

.gr-back-sister {
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    font-weight: 600;
}
.gr-back-sister:hover { background: var(--gr-violet); color: #fff; }
.ae-dark-mode .gr-back-sister { color: #C4B5FD; }
.ae-dark-mode .gr-back-sister:hover { background: var(--gr-violet-mid); color: #fff; }

/* User chip */
.gr-user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.gr-user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.gr-user-name { font-size: 13px; font-weight: 600; color: var(--gr-gray-900); line-height: 1.25; }
.gr-user-sub  { font-size: 11px; color: var(--gr-amber); font-weight: 500; line-height: 1.25; }

/* Sidebar footer alignment */
.gr-sidebar-footer .gr-darkmode-btn,
.gr-sidebar-footer .gr-home-link,
.gr-sidebar-footer .gr-user-chip {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 8px 10px;
}
.gr-sidebar-footer .gr-darkmode-btn svg,
.gr-sidebar-footer .gr-home-link svg { width: 18px; height: 18px; justify-self: center; }
.gr-sidebar-footer .gr-user-avatar { width: 32px; height: 32px; justify-self: center; }
.gr-sidebar-footer .gr-user-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gr-sidebar-footer .gr-user-name,
.gr-sidebar-footer .gr-user-sub {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Dark mode toggle button */
.gr-darkmode-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gr-gray-500);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    border-radius: var(--gr-radius-sm);
    transition: background var(--gr-transition), color var(--gr-transition);
}
.gr-darkmode-btn:hover { background: var(--gr-gray-100); color: var(--gr-gray-900); }
.gr-dm-icon-sun  { display: none; }
.gr-darkmode-btn.is-dark .gr-dm-icon-moon { display: none; }
.gr-darkmode-btn.is-dark .gr-dm-icon-sun  { display: inline-block; }

/* ── Mobile bar ─────────────────────────────────────────── */
.gr-mobile-bar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--gr-white);
    border-bottom: 1px solid var(--gr-gray-200);
    z-index: 50;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
}
.admin-bar .gr-mobile-bar { top: 46px; }
.gr-mobile-toggle {
    width: 36px; height: 36px;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--gr-gray-700);
}
.gr-mobile-toggle svg { width: 20px; height: 20px; }
.gr-mobile-title { font-size: 16px; font-weight: 600; color: var(--gr-gray-900); }

/* ── Page wrapper ───────────────────────────────────────── */
.gr-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 28px 80px;
    transition: max-width .25s cubic-bezier(.4,0,.2,1), padding-left .25s cubic-bezier(.4,0,.2,1);
}
/* When sidebar is collapsed, expand all page containers to use full width */
.gr-sidebar-collapsed .gr-page,
.gr-sidebar-collapsed .gr-dashboard-page,
.gr-sidebar-collapsed .gr-exam-page {
    max-width: none !important;
    padding-left: 80px; /* leave room for the floating expand button on the left */
    padding-right: 48px;
}

/* ── Buttons ────────────────────────────────────────────── */
.gr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--gr-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition: all var(--gr-transition);
    line-height: 1;
}
.gr-btn svg { width: 16px; height: 16px; }
.gr-btn-primary {
    background: var(--gr-teal);
    color: #fff;
    border-color: var(--gr-teal);
    box-shadow: 0 4px 12px rgba(8,145,178,.28);
}
.gr-btn-primary:hover {
    background: var(--gr-teal-dk);
    border-color: var(--gr-teal-dk);
    color: #fff;
    box-shadow: 0 8px 18px rgba(8,145,178,.36);
}
.gr-btn-outline {
    background: transparent;
    color: var(--gr-teal);
    border-color: var(--gr-teal);
}
.gr-btn-outline:hover { background: var(--gr-teal-lt); }
.gr-btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 10px; }
.gr-btn-sm { padding: 7px 14px; font-size: 13px; }
.gr-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   ROADMAP
   ═══════════════════════════════════════════════════════════ */

/* Hero */
.gr-hero {
    display: flex;
    align-items: center;
    gap: 36px;
    background:
        radial-gradient(ellipse at 90% 10%, rgba(124,58,237,.30), transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(34,211,238,.30), transparent 55%),
        linear-gradient(135deg, var(--gr-teal-dk) 0%, var(--gr-violet-dk) 100%);
    border-radius: var(--gr-radius-lg);
    padding: 36px 40px;
    margin-bottom: 32px;
    color: #fff;
    overflow: hidden;
    position: relative;
}
.gr-hero-text { flex: 1; min-width: 0; }
.gr-hero-text h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -.015em;
}
.gr-hero-text p {
    margin: 0 0 22px;
    opacity: .88;
    font-size: 15px;
    max-width: 520px;
}
.gr-hero-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.gr-hero-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 12px;
    background: rgba(255,255,255,.10);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
}
.gr-hero-stat svg { width: 22px; height: 22px; opacity: .9; }
.gr-hero-stat-value { font-size: 22px; font-weight: 800; line-height: 1; }
.gr-hero-stat-label { font-size: 11px; opacity: .75; margin-top: 3px; }
.gr-hero-allclear {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(5,150,105,.25);
    border: 1px solid rgba(5,150,105,.45);
    border-radius: 10px;
    font-weight: 600;
}
.gr-hero-allclear svg { width: 24px; height: 24px; }

.gr-hero .gr-btn-primary {
    background: #fff;
    color: #155E75;
    border-color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.gr-hero .gr-btn-primary:hover {
    background: #CFFAFE;
    color: #155E75;
    border-color: #CFFAFE;
}
/* Dark mode — must use !important because theme's dark-mode.css applies
   `html.ae-dark-mode a:not(.btn)` with high specificity that includes our
   anchor-styled buttons (we use `gr-btn` not `btn`, so :not(.btn) matches). */
.ae-dark-mode .gr-hero .gr-btn-primary {
    background: #fff !important;
    color: #155E75 !important;
    border-color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.ae-dark-mode .gr-hero .gr-btn-primary:hover {
    background: #67E8F9 !important;
    color: #134E4A !important;
    border-color: #67E8F9 !important;
}
.ae-dark-mode .gr-hero .gr-btn-primary svg { color: #155E75 !important; }

/* ─── Dark mode overrides — fix obscured headers in roadmap ─── */
.ae-dark-mode .gr-hero {
    /* Slightly more saturated gradient so text contrast stays high */
    background:
        radial-gradient(ellipse at 90% 10%, rgba(167,139,250,.45), transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(34,211,238,.40), transparent 55%),
        linear-gradient(135deg, #0E7490 0%, #5B21B6 100%) !important;
    color: #F8FAFC;
}
.ae-dark-mode .gr-hero-text h1 { color: #F8FAFC; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.ae-dark-mode .gr-hero-text p  { color: #E0E7FF; opacity: .95; }
.ae-dark-mode .gr-hero-stat {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.28);
}
.ae-dark-mode .gr-hero-stat-value { color: #F8FAFC; }
.ae-dark-mode .gr-hero-stat-label { color: #CBD5E1; opacity: 1; }

/* Tier section headers — body bg is dark, but tier-name was set to gray-900 */
.ae-dark-mode .gr-tier-name { color: #F8FAFC; }
.ae-dark-mode .gr-tier-desc { color: #94A3B8; }
.ae-dark-mode .gr-tier-header { border-bottom-color: rgba(255,255,255,.10); }
.ae-dark-mode .gr-tier-progress-text { color: #CBD5E1; }
.ae-dark-mode .gr-tier-progress-bar { background: rgba(255,255,255,.08); }

/* General anchor-button color override — theme's dark-mode.css applies
   `html.ae-dark-mode a:not(.btn)` which uses `.btn` not `.gr-btn`, so all
   our `gr-btn` anchors get washed-out text. Restore to inherit so the
   button-specific color rule wins. */
.ae-dark-mode a.gr-btn,
.ae-dark-mode a.gr-btn-primary,
.ae-dark-mode a.gr-btn-outline,
.ae-dark-mode a.gr-btn-ghost,
.ae-dark-mode a.gr-home-link,
.ae-dark-mode a.gr-back-sister,
.ae-dark-mode a.gr-lesson-back {
    color: inherit;
}
/* But NOT inside .gr-hero since we already pinned that to the dark-teal CTA. */
.gr-hero-art { flex-shrink: 0; opacity: .95; }

/* Style toggle dark mode override — prevent text invisible when active */
.ae-dark-mode .gr-style-toggle {
    background: rgba(0,0,0,.30);
    border-color: rgba(255,255,255,.18);
}
.ae-dark-mode .gr-style-toggle button {
    color: rgba(255,255,255,.72) !important;
}
.ae-dark-mode .gr-style-toggle button:hover { color: #fff !important; }
.ae-dark-mode .gr-style-toggle button.is-active {
    background: #fff;
    color: #4C1D95 !important;
}

/* TTS button loading shimmer */
.gr-icon-btn.is-loading,
.gr-icon-btn-sm.is-loading {
    pointer-events: none;
    position: relative;
}
.gr-icon-btn.is-loading svg,
.gr-icon-btn-sm.is-loading svg {
    opacity: .35;
}
.gr-icon-btn.is-loading::after,
.gr-icon-btn-sm.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--gr-teal-lt);
    border-top-color: var(--gr-teal);
    animation: gr-spin .7s linear infinite;
}

/* TTS playback state — active button gets a teal/violet glow + animation */
.gr-tts-btn.is-playing,
.gr-tts-btn-sm.is-playing {
    background: linear-gradient(135deg, var(--gr-teal-mid), var(--gr-violet-mid));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(8,145,178,.25), 0 4px 12px rgba(8,145,178,.35);
    animation: gr-tts-pulse 1.6s ease-in-out infinite;
}
.gr-tts-btn.is-paused,
.gr-tts-btn-sm.is-paused {
    background: var(--gr-amber-lt);
    border-color: var(--gr-amber);
    color: var(--gr-amber);
}
@keyframes gr-tts-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(8,145,178,.25), 0 4px 12px rgba(8,145,178,.35); }
    50%      { box-shadow: 0 0 0 8px rgba(124,58,237,.10), 0 6px 18px rgba(124,58,237,.40); }
}

/* Stop button (red, only visible while audio is active) */
.gr-tts-stop {
    background: var(--gr-red-lt) !important;
    color: var(--gr-red) !important;
    border-color: rgba(220,38,38,.30) !important;
}
.gr-tts-stop:hover {
    background: var(--gr-red) !important;
    color: #fff !important;
    border-color: var(--gr-red) !important;
}
.ae-dark-mode .gr-tts-stop {
    background: rgba(239,68,68,.20) !important;
    color: #FCA5A5 !important;
    border-color: rgba(239,68,68,.40) !important;
}

/* Admin badge in settings */
.gr-admin-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--gr-violet);
    color: #fff;
    text-transform: uppercase;
    margin-left: 4px;
    vertical-align: middle;
}
.gr-settings-row-text code {
    background: var(--gr-gray-100);
    color: var(--gr-violet);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    font-family: 'SF Mono', Consolas, monospace;
}

/* Tier section */
.gr-tier { margin-bottom: 44px; }
.gr-tier-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--gr-gray-200);
}
.gr-tier-badge {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.gr-tier-badge--1 { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.gr-tier-badge--2 { background: linear-gradient(135deg, #14B8A6, #0F766E); }
.gr-tier-badge--3 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.gr-tier-badge--4 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.gr-tier-meta { flex: 1; min-width: 0; }
.gr-tier-name { font-size: 22px; font-weight: 800; margin: 0; color: var(--gr-gray-900); letter-spacing: -.01em; }
.gr-tier-desc { font-size: 14px; color: var(--gr-gray-500); margin: 2px 0 0; }
.gr-tier-progress { flex-shrink: 0; min-width: 140px; text-align: right; }
.gr-tier-progress-text { font-size: 13px; font-weight: 700; color: var(--gr-gray-700); margin-bottom: 6px; }
.gr-tier-progress-bar { height: 8px; background: var(--gr-gray-200); border-radius: 999px; overflow: hidden; }
.gr-tier-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gr-teal-mid), var(--gr-violet-mid));
    transition: width .5s ease;
}

/* Trail — two-column layout where each row is a clean card.
   Cards alternate between left and right columns so the eye follows
   a zig-zag, but each card is visually self-contained (no overlap
   with a central trail line). A subtle connector dot pattern hints
   at the path between rows. */
.gr-trail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px 0;
}
.gr-trail::before {
    /* Subtle connector — sits BEHIND cards so they read as primary content.
       Only visible in the gap between cards. */
    content: "";
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 50%;
    width: 0;
    border-left: 2px dashed var(--gr-gray-200);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}
.ae-dark-mode .gr-trail::before { border-left-color: var(--gr-gray-300); }

.gr-trail-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    z-index: 1;
}
/* Left = card sits in the LEFT half, node + info aligned left-to-right */
.gr-trail-row--left {
    width: 50%;
    padding-right: 28px;       /* breathing room from the trail centre line */
    justify-content: flex-end;
    margin-right: auto;
}
/* Right = card sits in the RIGHT half, info on the LEFT of the node */
.gr-trail-row--right {
    width: 50%;
    padding-left: 28px;
    margin-left: auto;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Lesson node (clickable circle) */
.gr-node {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1; /* không bao giờ bị bóp méo */
    border-radius: 50%;
    background: var(--gr-white);
    border: 3px solid var(--gr-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gr-gray-400);
    text-decoration: none;
    box-shadow: var(--gr-shadow);
    transition: transform var(--gr-transition), box-shadow var(--gr-transition), background var(--gr-transition), border-color var(--gr-transition);
    z-index: 2;
}
.gr-node:hover { transform: translateY(-3px); box-shadow: var(--gr-shadow-md); }
.gr-node-icon { display: flex; align-items: center; justify-content: center; }
.gr-node-icon svg { width: 24px; height: 24px; }
.gr-node-num { font-size: 22px; font-weight: 800; }

.gr-node--available { border-color: var(--gr-teal-mid); color: var(--gr-teal); }
.gr-node--available:hover { background: var(--gr-teal-lt); }
.gr-node--current {
    border-color: var(--gr-teal-dk);
    color: var(--gr-teal-dk);
    background: linear-gradient(135deg, var(--gr-teal-mid), var(--gr-violet-mid));
    color: #fff;
    animation: gr-pulse 2.4s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(6,182,212,.4), var(--gr-shadow-md);
}
.gr-node--done {
    background: linear-gradient(135deg, #10B981, #059669);
    border-color: #047857;
    color: #fff;
}
.gr-node--locked {
    background: var(--gr-gray-100);
    border-color: var(--gr-gray-200);
    color: var(--gr-gray-400);
    cursor: not-allowed;
}
.gr-node--locked:hover { transform: none; box-shadow: var(--gr-shadow); }
.gr-node--stub { opacity: .85; }

@keyframes gr-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(6,182,212,.45), var(--gr-shadow-md); }
    70%  { box-shadow: 0 0 0 14px rgba(6,182,212,0), var(--gr-shadow-md); }
    100% { box-shadow: 0 0 0 0 rgba(6,182,212,0),   var(--gr-shadow-md); }
}

/* Progress ring around node */
.gr-node-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    pointer-events: none;
    overflow: visible;
}
.gr-node-ring circle:first-child { stroke: var(--gr-gray-200); fill: none; }
.gr-node-ring circle:last-child  {
    stroke: var(--gr-teal-mid);
    fill: none;
    transform: rotate(-90deg);
    transform-origin: center;
    stroke-linecap: round;
}

/* Trail info card — bona fide card with subtle bg so it visually separates
   from the trail line. Stays compact so two rows fit a screen. */
.gr-trail-info {
    flex: 1 1 0;
    min-width: 0;
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    padding: 14px 18px;
    box-shadow: var(--gr-shadow);
    transition: transform var(--gr-transition), box-shadow var(--gr-transition), border-color var(--gr-transition);
}
.gr-trail-row:hover .gr-trail-info {
    border-color: var(--gr-teal);
    box-shadow: var(--gr-shadow-md);
    transform: translateY(-1px);
}
.gr-trail-row--right .gr-trail-info { text-align: right; }
.gr-trail-info-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-gray-900);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gr-trail-row--right .gr-trail-info-name { justify-content: flex-end; }
.gr-trail-info-name-text {
    /* Allow long lesson names to wrap nicely without pushing the tag below */
    flex: 1 1 auto;
    min-width: 0;
}
.gr-trail-info-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gr-amber-lt);
    color: var(--gr-amber);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-trail-info-objs {
    font-size: 13px;
    color: var(--gr-gray-500);
    margin-top: 4px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gr-trail-info-meta {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.gr-trail-row--right .gr-trail-info-meta { justify-content: flex-end; }

.gr-trail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gr-gray-100);
    color: var(--gr-gray-600);
    font-size: 11px;
    font-weight: 600;
}
.gr-trail-chip svg { width: 12px; height: 12px; }
.gr-trail-chip--easy   { background: var(--gr-green-lt);  color: var(--gr-green); }
.gr-trail-chip--medium { background: var(--gr-amber-lt);  color: var(--gr-amber); }
.gr-trail-chip--hard   { background: var(--gr-red-lt);    color: var(--gr-red); }
.gr-trail-chip--done   { background: var(--gr-green-lt);  color: var(--gr-green); }
.gr-trail-chip--inprogress { background: var(--gr-teal-lt); color: var(--gr-teal-dk); }

/* Dark mode — brighter chip text since the lt tokens become rgba(*,.20)
   which provides enough background contrast but the foreground needs to
   be lifted for AA contrast. */
.ae-dark-mode .gr-trail-chip          { color: #E4E4E7; }
.ae-dark-mode .gr-trail-chip--easy    { color: #6EE7B7; background: rgba(16,185,129,.18); }
.ae-dark-mode .gr-trail-chip--medium  { color: #FCD34D; background: rgba(245,158,11,.18); }
.ae-dark-mode .gr-trail-chip--hard    { color: #FCA5A5; background: rgba(239,68,68,.20); }
.ae-dark-mode .gr-trail-chip--done    { color: #6EE7B7; background: rgba(16,185,129,.20); }
.ae-dark-mode .gr-trail-chip--inprogress { color: #67E8F9; background: rgba(34,211,238,.18); }
.ae-dark-mode .gr-trail-info-tag      { color: #FCD34D; background: rgba(245,158,11,.18); }

/* Foot CTA */
.gr-foot-cta {
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    display: flex;
    align-items: center;
    gap: 24px;
}
.gr-foot-cta-text {
    flex: 1;
    font-size: 14px;
    color: var(--gr-gray-600);
    line-height: 1.55;
}
.gr-foot-cta-text strong {
    display: block;
    color: var(--gr-gray-900);
    margin-bottom: 4px;
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .gr-sidebar {
        transform: translateX(-100%);
        top: 56px;
        height: calc(100vh - 56px);
        height: calc(100dvh - 56px);
    }
    .admin-bar .gr-sidebar {
        top: calc(46px + 56px);
        height: calc(100vh - 46px - 56px);
        height: calc(100dvh - 46px - 56px);
    }
    .gr-sidebar.is-open { transform: translateX(0); z-index: 45; }
    .gr-main { margin-left: 0; padding-top: 56px; }
    .gr-mobile-bar { display: flex; }

    .gr-sidebar-collapsed .gr-page,
    .gr-sidebar-collapsed .gr-dashboard-page,
    .gr-sidebar-collapsed .gr-exam-page {
        max-width: none !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .gr-hero { flex-direction: column; align-items: stretch; padding: 26px 24px; }
    .gr-hero-art { display: none; }

    .gr-trail::before { left: 32px; }
    .gr-trail-row,
    .gr-trail-row--left,
    .gr-trail-row--right {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
    }
    .gr-trail-row--right .gr-trail-info { text-align: left; }
    .gr-trail-row--right .gr-trail-info-name,
    .gr-trail-row--right .gr-trail-info-meta { justify-content: flex-start; }

    .gr-node { width: 56px; height: 56px; }

    .gr-tier-header { flex-wrap: wrap; }
    .gr-tier-progress { width: 100%; min-width: 0; text-align: left; margin-top: 8px; }

    .gr-foot-cta { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
    .gr-page { padding: 20px 16px 60px; }
    .gr-sidebar-collapsed .gr-page,
    .gr-sidebar-collapsed .gr-dashboard-page,
    .gr-sidebar-collapsed .gr-exam-page {
        padding: 20px 16px 60px !important;
    }
    .gr-hero-text h1 { font-size: 22px; }
    .gr-hero-stats { gap: 12px; }
    .gr-hero-stat { padding: 8px 12px 8px 10px; }
    .gr-hero-stat-value { font-size: 18px; }
    .gr-tier-name { font-size: 19px; }
    .gr-trail-info-name { font-size: 15px; }
    .gr-trail-info-objs { font-size: 12px; }
}

body.gr-sidebar-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════
   LESSON VIEW — split pane theory + exercises
   ═══════════════════════════════════════════════════════════ */

.gr-lesson-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 22px 60px;
}

.gr-lesson-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    margin-bottom: 18px;
    box-shadow: var(--gr-shadow);
}
.gr-lesson-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--gr-radius-sm);
    color: var(--gr-gray-600);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    background: var(--gr-gray-100);
    transition: all var(--gr-transition);
}
.gr-lesson-back svg { width: 16px; height: 16px; }
.gr-lesson-back:hover { background: var(--gr-teal-lt); color: var(--gr-teal-dk); }
.gr-lesson-topbar-title { flex: 1; min-width: 0; }
.gr-lesson-topbar-tier {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--gr-teal);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.gr-lesson-topbar-title h1 {
    font-size: 18px;
    font-weight: 800;
    color: var(--gr-gray-900);
    margin: 2px 0 0;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.gr-lesson-topbar-actions { display: flex; gap: 8px; }
.gr-icon-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gr-gray-200);
    background: var(--gr-white);
    color: var(--gr-teal);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--gr-transition);
}
.gr-icon-btn:hover { background: var(--gr-teal-lt); transform: scale(1.05); }
.gr-icon-btn svg { width: 18px; height: 18px; }
.gr-icon-btn-sm {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--gr-gray-200);
    border-radius: 50%;
    color: var(--gr-teal);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--gr-transition);
    flex-shrink: 0;
}
.gr-icon-btn-sm:hover { background: var(--gr-teal-lt); }
.gr-icon-btn-sm svg { width: 14px; height: 14px; }

.gr-lesson-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 22px;
    align-items: flex-start;
}

/* ── Chế độ tập trung: ẩn cột lý thuyết ──────────────────────────────
   Bấm «Ẩn lý thuyết» ở thanh trên. Cột bài tập ăn hết bề ngang và trang nới
   khung ra 1720px, đủ chỗ cho bảng, kéo-thả và câu dài không gãy dòng.
   `display: none` đặt ở ĐÂY chứ không chỉ dựa vào x-show, để cột không loé
   lên trong lúc chờ Alpine boot (script inline trong view-lesson.php gắn lớp
   này ngay lúc parse). */
.gr-lesson-page.is-theory-hidden { max-width: 1720px; }
.gr-lesson-page.is-theory-hidden .gr-lesson-theory { display: none; }
.gr-lesson-page.is-theory-hidden .gr-lesson-split { grid-template-columns: minmax(0, 1fr); }

/* Nút bật/tắt — sáng lên khi đang ở chế độ tập trung để biết mình đang ẩn */
.gr-btn-theory.is-off {
    background: var(--gr-teal, #0891B2);
    border-color: var(--gr-teal, #0891B2);
    color: #fff;
}
.gr-btn-theory.is-off svg { color: #fff; }

/* Ẩn lý thuyết trên màn rộng: xếp câu hỏi thành HAI CỘT thay vì kéo giãn một
   cột ra 1700px. Đáp án «are / am / is / be» trải hết bề ngang màn hình đọc
   rất mệt — mắt phải quét cả gang tay cho bốn chữ. Hai cột giữ dòng ngắn mà
   vẫn thấy được gấp đôi số câu trong một màn. */
@media (min-width: 1240px) {
    .gr-lesson-page.is-theory-hidden .gr-exercises-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 14px 18px;
    }
}
/* Dark: --gr-teal đổi thành cyan-400 sáng, chữ trắng lên đó là chữ chìm.
   Đảo lại — nền sáng thì mực phải tối. */
.ae-dark-mode .gr-btn-theory.is-off { color: #06222B; }
.ae-dark-mode .gr-btn-theory.is-off svg { color: #06222B; }

/* ── Theory pane (LEFT) ─────────────────────────────────── */
.gr-lesson-theory {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    padding: 28px 30px;
    min-width: 0;
}
.gr-theory-intro {
    background: linear-gradient(135deg, rgba(8,145,178,.08), rgba(124,58,237,.06));
    border-left: 3px solid var(--gr-teal);
    border-radius: var(--gr-radius-sm);
    padding: 14px 18px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gr-gray-700);
    margin-bottom: 22px;
}
.ae-dark-mode .gr-theory-intro {
    background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(167,139,250,.08));
    border-left-color: var(--gr-teal-mid);
}

.gr-theory-objectives {
    background: var(--gr-sub-card);
    border-radius: var(--gr-radius-sm);
    padding: 14px 18px;
    margin-bottom: 28px;
}
.gr-theory-objectives-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gr-violet);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.gr-theory-objectives-list {
    margin: 0;
    padding-left: 18px;
    color: var(--gr-gray-700);
    font-size: 14px;
    line-height: 1.6;
}
.gr-theory-objectives-list li { margin-bottom: 4px; }

.gr-theory-section { margin-bottom: 28px; }
.gr-theory-section-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gr-gray-200);
}
.gr-theory-section-head h2 {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: var(--gr-teal-dk);
    margin: 0;
    line-height: 1.35;
}
.ae-dark-mode .gr-theory-section-head h2 { color: #67E8F9; }

.gr-theory-section-body {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--gr-gray-700);
}
.gr-theory-section-body p:first-child { margin-top: 0; }
.gr-theory-section-body p:last-child  { margin-bottom: 0; }
.gr-theory-section-body code {
    background: var(--gr-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--gr-violet);
    font-family: 'SF Mono', Consolas, Monaco, monospace;
}
.gr-theory-section-body strong { color: var(--gr-gray-900); }
.gr-theory-section-body em     { color: var(--gr-violet); font-style: italic; }
/* English text chunks (wrapped in <en> tags for TTS — visually italic teal) */
.gr-theory-section-body .gr-en,
.gr-theory-table .gr-en {
    font-style: italic;
    color: var(--gr-teal, #0891b2);
    font-weight: 500;
}
.ae-dark-mode .gr-theory-section-body .gr-en,
.ae-dark-mode .gr-theory-table .gr-en {
    color: #67e8f9;
}
.gr-theory-section-body ul {
    padding-left: 22px;
    margin: 8px 0 12px;
}
.gr-theory-section-body li { margin-bottom: 4px; }

/* Tables in theory */
.gr-theory-table-wrap {
    margin: 14px 0;
    overflow-x: auto;
    border-radius: var(--gr-radius-sm);
    border: 1px solid var(--gr-gray-200);
}
.gr-theory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 1.55;
    background: var(--gr-white);
}
.gr-theory-table th {
    text-align: left;
    background: linear-gradient(135deg, var(--gr-teal), var(--gr-violet));
    color: #fff;
    font-weight: 700;
    padding: 10px 14px;
    font-size: 13px;
}
.gr-theory-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--gr-gray-200);
    color: var(--gr-gray-700);
    vertical-align: top;
}
.gr-theory-table td:first-child { font-weight: 600; color: var(--gr-gray-900); white-space: nowrap; }
.gr-theory-table tbody tr:nth-child(even) { background: var(--gr-sub-card); }
.gr-theory-table p { margin: 0; }
.gr-theory-table em { color: var(--gr-violet); font-style: italic; font-size: 12.5px; }

.gr-theory-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--gr-gray-500);
}
.gr-theory-empty svg { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--gr-gray-400); }

/* ── Exercise panel (RIGHT) ─────────────────────────────────
   Layout: both panes share the same row, naturally flow together.
   Sticky toolbar at the bottom of the right pane stays visible.
   Page-level scroll handles overflow — no internal scroll trap. */
.gr-lesson-exercises {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Auto-fit to content — when only 1-2 exercises render, the panel doesn't
       force itself to be 600px tall (used to push toolbar far off-screen). */
    align-self: start;
    overflow: visible;
}

.gr-exercises-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--gr-gray-200);
    background: linear-gradient(135deg, rgba(8,145,178,.06), rgba(124,58,237,.04));
}
.ae-dark-mode .gr-exercises-head {
    background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(167,139,250,.06));
}
.gr-exercises-title {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.gr-exercises-title-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gr-teal);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.gr-exercises-title-count {
    font-size: 14px;
    font-weight: 800;
    color: var(--gr-violet);
    background: var(--gr-violet-lt);
    padding: 2px 10px;
    border-radius: 999px;
}

/* Pinned "Sinh câu mới" button in lesson header */
.gr-btn-pin-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 12px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(124,58,237,.25);
}
.gr-btn-pin-new:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124,58,237,.35);
}
.gr-btn-pin-new:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.gr-exercises-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gr-objective-pills {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gr-objective-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--gr-radius-sm);
    background: var(--gr-white);
    border: 1.5px solid var(--gr-gray-200);
    color: var(--gr-gray-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all var(--gr-transition);
    line-height: 1.4;
}
.gr-objective-pill-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gr-gray-100);
    color: var(--gr-gray-600);
    font-weight: 700;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gr-objective-pill-label { flex: 1; min-width: 0; }
.gr-objective-pill-check {
    width: 14px; height: 14px;
    color: var(--gr-green);
    opacity: 0;
    flex-shrink: 0;
}
.gr-objective-pill:hover { border-color: var(--gr-teal-mid); }
.gr-objective-pill.is-active {
    background: var(--gr-teal-lt);
    border-color: var(--gr-teal);
    color: var(--gr-teal-dk);
    font-weight: 600;
}
.ae-dark-mode .gr-objective-pill.is-active { color: #67E8F9; }
.gr-objective-pill.is-active .gr-objective-pill-num {
    background: var(--gr-teal); color: #fff;
}
.gr-objective-pill.is-touched .gr-objective-pill-num {
    background: var(--gr-amber-lt); color: var(--gr-amber);
}
.gr-objective-pill.is-done {
    background: rgba(5,150,105,.06);
    border-color: var(--gr-green);
    color: var(--gr-green);
}
.gr-objective-pill.is-done .gr-objective-pill-num {
    background: var(--gr-green); color: #fff;
}
.gr-objective-pill.is-done .gr-objective-pill-check { opacity: 1; }

.gr-exercises-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gr-gray-200);
}
.gr-stat-card {
    text-align: center;
    background: var(--gr-sub-card);
    border-radius: var(--gr-radius-sm);
    padding: 8px 6px;
}
.gr-stat-label { font-size: 10px; color: var(--gr-gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gr-stat-value { font-size: 18px; font-weight: 800; color: var(--gr-teal-dk); margin-top: 2px; }
.ae-dark-mode .gr-stat-value { color: #67E8F9; }
.gr-stat-value--good { color: var(--gr-green) !important; }

.gr-exercises-list {
    flex: 0 1 auto;
    padding: 16px 18px 4px;
    display: flex; flex-direction: column; gap: 16px;
    /* No internal scroll — let the page handle it */
    overflow: visible;
}

.gr-ex-card {
    border: 1.5px solid var(--gr-gray-200);
    border-radius: var(--gr-radius-sm);
    padding: 14px 16px;
    background: var(--gr-white);
    transition: border-color var(--gr-transition), background var(--gr-transition);
}
.gr-ex-card.is-correct { border-color: var(--gr-green); background: rgba(5,150,105,.03); }
.gr-ex-card.is-wrong   { border-color: var(--gr-red);   background: rgba(220,38,38,.03); }

.gr-ex-card-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.gr-ex-card-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--gr-teal);
    background: var(--gr-teal-lt);
    padding: 2px 9px;
    border-radius: 999px;
}
.gr-ex-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gr-gray-100);
    color: var(--gr-gray-600);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-ex-card-tag svg { width: 10px; height: 10px; }
.gr-tag-ai { background: linear-gradient(135deg, var(--gr-violet-lt), var(--gr-teal-lt)); color: var(--gr-violet); }
.gr-ex-bookmark {
    margin-left: auto;
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    color: var(--gr-gray-400);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: all var(--gr-transition);
}
.gr-ex-bookmark:hover { background: var(--gr-amber-lt); color: var(--gr-amber); }
.gr-ex-bookmark.is-on { color: var(--gr-amber); }
.gr-ex-bookmark svg { width: 16px; height: 16px; }

.gr-ex-instruction {
    font-size: 12.5px;
    color: var(--gr-gray-500);
    margin: 0 0 8px;
    font-style: italic;
}
.gr-ex-prompt {
    font-size: 14.5px;
    color: var(--gr-gray-900);
    line-height: 1.55;
    margin: 0 0 12px;
    font-weight: 500;
}
.gr-ex-prompt--hint { font-style: italic; color: var(--gr-gray-500); font-weight: normal; }

/* ── MCQ ── */
.gr-mcq-options { display: flex; flex-direction: column; gap: 6px; }
.gr-mcq-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--gr-radius-sm);
    border: 1.5px solid var(--gr-gray-200);
    background: var(--gr-white);
    color: var(--gr-gray-700);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: all var(--gr-transition);
    position: relative;
}
.gr-mcq-option:disabled { cursor: default; }
.gr-mcq-option:hover:not(:disabled) { border-color: var(--gr-teal); background: var(--gr-teal-lt); }
.gr-mcq-option.is-selected { border-color: var(--gr-teal); background: var(--gr-teal-lt); color: var(--gr-teal-dk); font-weight: 600; }
.ae-dark-mode .gr-mcq-option.is-selected { color: #67E8F9; }
.gr-mcq-option.is-correct { border-color: var(--gr-green); background: rgba(5,150,105,.10); color: var(--gr-green); font-weight: 600; }
.gr-mcq-option.is-wrong   { border-color: var(--gr-red);   background: rgba(220,38,38,.10);   color: var(--gr-red);   font-weight: 600; }
.gr-mcq-letter {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--gr-gray-100); color: var(--gr-gray-600);
    font-weight: 700; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gr-mcq-option.is-selected .gr-mcq-letter { background: var(--gr-teal); color: #fff; }
.gr-mcq-option.is-correct  .gr-mcq-letter { background: var(--gr-green); color: #fff; }
.gr-mcq-option.is-wrong    .gr-mcq-letter { background: var(--gr-red); color: #fff; }
.gr-mcq-value { flex: 1; min-width: 0; }
.gr-mcq-mark { width: 16px; height: 16px; flex-shrink: 0; }
.gr-mcq-mark--check { color: var(--gr-green); }
.gr-mcq-mark--cross { color: var(--gr-red); }

/* ── Arrange ── */
.gr-arrange-bank, .gr-arrange-target {
    border: 1.5px dashed var(--gr-gray-300);
    border-radius: var(--gr-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
}
.gr-arrange-target { border-color: var(--gr-teal-mid); border-style: solid; }
.gr-arrange-bank-label, .gr-arrange-target-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gr-gray-500);
    margin-bottom: 8px;
}
.gr-arrange-target-label { color: var(--gr-teal-dk); }
.ae-dark-mode .gr-arrange-target-label { color: #67E8F9; }
.gr-arrange-bank-words, .gr-arrange-target-words {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 32px;
    align-items: center;
}
.gr-arrange-word {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--gr-white);
    border: 1.5px solid var(--gr-gray-300);
    color: var(--gr-gray-800);
    font-size: 13.5px;
    cursor: pointer;
    transition: all .15s ease;
}
.gr-arrange-word:hover:not(:disabled) { background: var(--gr-teal-lt); border-color: var(--gr-teal); transform: translateY(-1px); }
.gr-arrange-word:disabled { cursor: default; }
.gr-arrange-word.is-used { opacity: .25; pointer-events: none; }
.gr-arrange-word--used {
    background: var(--gr-teal); color: #fff;
    border-color: var(--gr-teal);
}
.gr-arrange-word--used:hover { background: var(--gr-teal-dk); }
.gr-arrange-placeholder { color: var(--gr-gray-400); font-size: 13px; font-style: italic; }
.gr-arrange-correct {
    margin-top: 8px;
    font-size: 13px;
    color: var(--gr-green);
    background: rgba(5,150,105,.08);
    padding: 8px 12px;
    border-radius: var(--gr-radius-sm);
}
.gr-arrange-correct-label { display: block; font-size: 11px; font-weight: 600; opacity: .85; margin-bottom: 2px; }

/* ── Fill blank ── */
.gr-fillblank-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--gr-gray-200);
    border-radius: var(--gr-radius-sm);
    font-size: 14.5px;
    color: var(--gr-gray-900);
    background: var(--gr-white);
    transition: border-color var(--gr-transition);
}
.gr-fillblank-input:focus { outline: none; border-color: var(--gr-teal); box-shadow: 0 0 0 3px rgba(8,145,178,.15); }
.gr-fillblank-input.is-correct { border-color: var(--gr-green); background: rgba(5,150,105,.04); color: var(--gr-green); font-weight: 600; }
.gr-fillblank-input.is-wrong   { border-color: var(--gr-red);   background: rgba(220,38,38,.04);   color: var(--gr-red);   font-weight: 600; text-decoration: line-through; }
.gr-fillblank-hint { margin: 6px 0 0; font-size: 12px; color: var(--gr-gray-500); }

/* ── Errorfix ── */
.gr-errorfix-sentence {
    line-height: 2;
    font-size: 15px;
}
.gr-errorfix-word {
    background: transparent;
    border: 1.5px solid transparent;
    color: var(--gr-gray-800);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    transition: all .15s ease;
}
.gr-errorfix-word:hover:not(:disabled) { background: var(--gr-amber-lt); border-color: var(--gr-amber); }
.gr-errorfix-word.is-selected { background: var(--gr-amber-lt); border-color: var(--gr-amber); color: var(--gr-amber); font-weight: 700; text-decoration: line-through; }
.gr-errorfix-word.is-correct  { background: rgba(5,150,105,.10); border-color: var(--gr-green); color: var(--gr-green); font-weight: 700; }
.gr-errorfix-correction { margin-top: 12px; }
.gr-errorfix-correction label { display: block; font-size: 12px; color: var(--gr-gray-500); margin-bottom: 4px; }

/* ── Per-exercise feedback ── */
.gr-ex-feedback {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--gr-sub-card);
    border-radius: var(--gr-radius-sm);
    border-left: 3px solid var(--gr-gray-300);
}
.gr-ex-feedback-report {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--gr-gray-200);
    display: flex;
    justify-content: flex-end;
}
.gr-exam-q-report {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--gr-gray-200);
    display: flex;
    justify-content: flex-end;
}
.gr-ex-feedback-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
    font-size: 13.5px;
}
.gr-ex-feedback-head svg { width: 18px; height: 18px; }
.gr-ex-feedback-head.is-correct { color: var(--gr-green); }
.gr-ex-feedback-head.is-correct svg { color: var(--gr-green); }
.gr-ex-feedback-head.is-correct ~ * { color: var(--gr-green); }
.gr-ex-feedback-head.is-wrong   { color: var(--gr-red); }
.gr-ex-feedback-head.is-wrong svg { color: var(--gr-red); }
.gr-ex-feedback-head strong { font-weight: 700; }
.gr-ex-feedback-points {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--gr-amber);
    background: var(--gr-amber-lt);
    padding: 2px 8px;
    border-radius: 999px;
}
.gr-ex-card.is-correct .gr-ex-feedback { border-left-color: var(--gr-green); }
.gr-ex-card.is-wrong .gr-ex-feedback   { border-left-color: var(--gr-red); }
.gr-ex-feedback-body {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gr-gray-700);
}
.gr-ex-feedback-body p:first-child { margin-top: 0; }
.gr-ex-feedback-body p:last-child  { margin-bottom: 0; }
.gr-ex-feedback-body strong { color: var(--gr-gray-900); }
.gr-ex-feedback-body em     { color: var(--gr-violet); }
.gr-ex-feedback-loading {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--gr-gray-500); font-style: italic;
}
.gr-btn-link {
    background: none;
    border: none;
    color: var(--gr-violet);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.gr-btn-link:hover { color: var(--gr-violet-dk); }

/* ── Action toolbar — sticky at the bottom of viewport so user
       can always reach Kiểm tra without scrolling all the way down. */
.gr-exercises-toolbar {
    position: sticky;
    bottom: 0;
    /* +safe-area cho iPhone có home indicator (khỏi bị thanh dưới che nút) */
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--gr-gray-200);
    background: var(--gr-white);
    display: flex; flex-direction: column; gap: 10px;
    z-index: 5;
    /* Round only the bottom corners so it blends with the panel */
    border-bottom-left-radius: var(--gr-radius);
    border-bottom-right-radius: var(--gr-radius);
}
.gr-btn-block { width: 100%; justify-content: center; }
/* Count badge inside primary button — shows answered/total when partial */
.gr-btn-count {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 700;
    opacity: .80;
    background: rgba(255,255,255,.18);
    padding: 1px 8px;
    border-radius: 999px;
}
.gr-btn-ghost {
    background: transparent;
    color: var(--gr-gray-500);
    border-color: transparent;
}
.gr-btn-ghost:hover { background: var(--gr-gray-100); color: var(--gr-gray-900); }
.gr-exercises-toolbar-row {
    display: flex; gap: 8px;
}
.gr-exercises-toolbar-row .gr-btn { flex: 1; justify-content: center; }
.gr-exercises-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--gr-gray-500);
    font-size: 13.5px;
}

/* Spinner */
.gr-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--gr-gray-300);
    border-top-color: var(--gr-teal);
    border-radius: 50%;
    animation: gr-spin .7s linear infinite;
}
.gr-spinner--inline { width: 14px; height: 14px; border-width: 2px; }
@keyframes gr-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   CANDY SAGA ZIGZAG — Duolingo / Candy Crush style roadmap
   ═══════════════════════════════════════════════════════════ */

/* Hero actions row + style toggle */
.gr-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.gr-style-toggle {
    display: inline-flex;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    padding: 4px;
    backdrop-filter: blur(4px);
}
.gr-style-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.75);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--gr-transition);
}
.gr-style-toggle button svg { width: 14px; height: 14px; }
.gr-style-toggle button:hover,
.gr-style-toggle button:hover span { color: #fff !important; }
.gr-style-toggle button,
.gr-style-toggle button span {
    color: rgba(255,255,255,.75) !important;
}
.gr-style-toggle button.is-active {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.20);
}
.gr-style-toggle button.is-active,
.gr-style-toggle button.is-active span { color: #155E75 !important; }
html.ae-dark-mode .gr-style-toggle button.is-active,
html.ae-dark-mode .gr-style-toggle button.is-active span { color: #4C1D95 !important; }

/* ─── Track tabs (Tổng quát / IELTS chuyên sâu) ──────────── */
.gr-track-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px;
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.gr-track-tab {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--gr-gray-600);
    font-weight: 600;
    transition: all var(--gr-transition);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
}
.gr-track-tab svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .8; }
.gr-track-tab span { font-size: 15px; line-height: 1.2; }
.gr-track-tab small {
    font-size: 11px;
    color: var(--gr-gray-500);
    margin-left: auto;
    font-weight: 500;
    opacity: .9;
}
.gr-track-tab:hover {
    background: var(--gr-gray-50);
    color: var(--gr-gray-900);
}
.gr-track-tab.is-active {
    background: linear-gradient(135deg, #06B6D4 0%, #7C3AED 100%);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(124,58,237,.45);
}
.gr-track-tab.is-active svg { opacity: 1; }
.gr-track-tab.is-active small { color: rgba(255,255,255,.85); }

html.ae-dark-mode .gr-track-tabs {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
}
html.ae-dark-mode .gr-track-tab,
html.ae-dark-mode .gr-track-tab span {
    color: rgba(255,255,255,.78) !important;
}
html.ae-dark-mode .gr-track-tab small { color: rgba(255,255,255,.55) !important; }
html.ae-dark-mode .gr-track-tab:hover,
html.ae-dark-mode .gr-track-tab:hover span {
    background: rgba(255,255,255,.06);
    color: #fff !important;
}
html.ae-dark-mode .gr-track-tab.is-active,
html.ae-dark-mode .gr-track-tab.is-active span {
    color: #fff !important;
}
html.ae-dark-mode .gr-track-tab.is-active {
    box-shadow: 0 4px 14px -4px rgba(124,58,237,.65);
}
html.ae-dark-mode .gr-track-tab.is-active small { color: rgba(255,255,255,.85) !important; }

@media (max-width: 720px) {
    .gr-track-tabs { flex-direction: column; }
    .gr-track-tab small { margin-left: 0; }
}

/* Saga tier banner */
.gr-saga-tier { margin-bottom: 48px; }
.gr-saga-banner {
    position: relative;
    border-radius: var(--gr-radius-lg);
    padding: 22px 28px 26px;
    margin-bottom: 28px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
.gr-saga-banner-bg {
    position: absolute; inset: 0; z-index: -1;
}
.gr-saga-banner--1 { background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%); }
.gr-saga-banner--2 { background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%); }
.gr-saga-banner--3 { background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); }
.gr-saga-banner--4 { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
.gr-saga-banner-bg::before {
    content: ""; position: absolute;
    top: -40%; right: -10%;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    filter: blur(20px);
}
.gr-saga-banner-bg::after {
    content: ""; position: absolute;
    bottom: -50%; left: 20%;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    filter: blur(30px);
}
.gr-saga-banner-content { position: relative; z-index: 1; max-width: 70%; }
.gr-saga-banner-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.20);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.gr-saga-banner-title { font-size: 26px; font-weight: 900; margin: 0 0 6px; letter-spacing: -.01em; }
.gr-saga-banner-desc { font-size: 14px; opacity: .88; margin: 0 0 14px; }
.gr-saga-banner-bar {
    height: 6px;
    background: rgba(255,255,255,.20);
    border-radius: 999px;
    overflow: hidden;
    max-width: 320px;
}
.gr-saga-banner-fill {
    height: 100%;
    background: rgba(255,255,255,.95);
    border-radius: 999px;
    transition: width .6s ease;
}
.gr-saga-banner-emoji {
    position: absolute;
    right: 26px; top: 50%;
    transform: translateY(-50%);
    font-size: 80px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.20));
    z-index: 0;
    opacity: .9;
}

/* Snake path container */
.gr-saga-path {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 8px 0 28px;
    position: relative;
}
.gr-saga-path::before {
    /* Subtle dotted background pattern (game vibe) */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, var(--gr-gray-200) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .4;
    pointer-events: none;
    z-index: 0;
}
.ae-dark-mode .gr-saga-path::before { opacity: .15; }

.gr-saga-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.gr-saga-row--rev { flex-direction: row-reverse; }

/* Lesson node — big circular Candy-Crush style */
.gr-saga-node {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform var(--gr-transition);
    z-index: 2;
}
.gr-saga-node--up   { transform: translateY(-12px); }
.gr-saga-node--down { transform: translateY(12px); }
.gr-saga-node:hover { transform: translateY(-6px) scale(1.04); }
.gr-saga-node--up:hover   { transform: translateY(-18px) scale(1.04); }
.gr-saga-node--down:hover { transform: translateY(6px) scale(1.04); }

/* The colorful circle that is the "candy" */
.gr-saga-node-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    position: relative;
    z-index: 2;
    box-shadow:
        0 6px 0 rgba(0,0,0,.18),         /* Bottom 3D shadow (candy effect) */
        0 12px 18px rgba(0,0,0,.18),
        inset 0 -6px 0 rgba(0,0,0,.15),  /* Inner bottom shadow */
        inset 0 4px 0 rgba(255,255,255,.30); /* Inner top highlight (gloss) */
    transition: all var(--gr-transition);
}
.gr-saga-num { line-height: 1; }
.gr-saga-icon { width: 32px; height: 32px; }

/* Color variants per node state */
.gr-saga-node--available .gr-saga-node-circle {
    background: linear-gradient(180deg, #06B6D4 0%, #0891B2 100%);
}
.gr-saga-node--current .gr-saga-node-circle {
    background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);
    box-shadow:
        0 6px 0 #B45309,
        0 16px 24px rgba(245,158,11,.45),
        inset 0 -6px 0 rgba(180,83,9,.4),
        inset 0 4px 0 rgba(255,255,255,.40);
}
.gr-saga-node--done .gr-saga-node-circle {
    background: linear-gradient(180deg, #34D399 0%, #059669 100%);
    box-shadow:
        0 6px 0 #047857,
        0 12px 18px rgba(5,150,105,.30),
        inset 0 -6px 0 rgba(4,120,87,.4),
        inset 0 4px 0 rgba(255,255,255,.30);
}
.gr-saga-node--stub .gr-saga-node-circle {
    background: linear-gradient(180deg, #D1D5DB 0%, #9CA3AF 100%);
    box-shadow:
        0 4px 0 rgba(0,0,0,.18),
        0 8px 12px rgba(0,0,0,.10),
        inset 0 -4px 0 rgba(0,0,0,.10),
        inset 0 3px 0 rgba(255,255,255,.30);
    opacity: .85;
}

/* Difficulty hints — colored ring around the candy */
.gr-saga-node[data-difficulty="hard"] .gr-saga-node-circle {
    outline: 3px solid rgba(220,38,38,.55);
    outline-offset: 4px;
}
.gr-saga-node[data-difficulty="medium"] .gr-saga-node-circle {
    outline: 3px solid rgba(245,158,11,.40);
    outline-offset: 4px;
}

/* Pulsing aura for current */
.gr-saga-aura {
    position: absolute;
    top: 0; left: 50%;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,.50) 0%, transparent 70%);
    transform: translate(-50%, -12px);
    animation: gr-saga-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes gr-saga-pulse {
    0%, 100% { transform: translate(-50%, -12px) scale(.8); opacity: .6; }
    50%      { transform: translate(-50%, -12px) scale(1.4); opacity: .2; }
}

/* "PLAY" pin badge above current node */
.gr-saga-pin {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--gr-amber);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 900;
    border: 3px solid var(--gr-amber);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    z-index: 5;
    animation: gr-saga-bounce 1.6s ease-in-out infinite;
}
@keyframes gr-saga-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}

/* Progress ring around the node circle */
.gr-saga-progress-ring {
    position: absolute;
    top: -4px; left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}

/* Lesson name caption below node */
.gr-saga-name {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gr-gray-700);
    text-align: center;
    line-height: 1.25;
    width: 96px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.ae-dark-mode .gr-saga-name { color: var(--gr-gray-500); }

.gr-saga-node--current .gr-saga-name { color: var(--gr-amber); font-weight: 700; }
.gr-saga-node--done .gr-saga-name { color: var(--gr-green); font-weight: 600; }

.gr-saga-tag {
    margin-top: 4px;
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: var(--gr-amber);
    background: var(--gr-amber-lt);
    padding: 1px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* 3 stars for completed */
.gr-saga-stars {
    display: inline-flex;
    gap: 2px;
    margin-top: 3px;
    color: #FBBF24;
}
.gr-saga-stars svg { width: 11px; height: 11px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.20)); }

/* Saga responsive */
@media (max-width: 900px) {
    .gr-saga-banner-content { max-width: 80%; }
    .gr-saga-banner-emoji { font-size: 56px; right: 18px; }
    .gr-saga-banner-title { font-size: 21px; }
    .gr-saga-row { gap: 8px; }
    .gr-saga-node { width: 72px; }
    .gr-saga-node-circle { width: 58px; height: 58px; font-size: 22px; }
    .gr-saga-name { width: 72px; font-size: 10px; }
    .gr-saga-aura { width: 78px; height: 78px; }
    .gr-saga-progress-ring { width: 66px; height: 66px; }
}
@media (max-width: 600px) {
    .gr-saga-banner { padding: 18px 18px 22px; }
    .gr-saga-banner-emoji { font-size: 44px; opacity: .35; }
    .gr-saga-banner-content { max-width: 100%; }
    .gr-saga-row { gap: 4px; padding: 0 4px; }
    .gr-saga-node { width: 60px; }
    .gr-saga-node-circle { width: 48px; height: 48px; font-size: 18px; }
    .gr-saga-icon { width: 22px; height: 22px; }
    .gr-saga-num { font-size: 18px; }
    .gr-saga-name { width: 62px; font-size: 9px; -webkit-line-clamp: 2; }
    .gr-saga-tag { font-size: 8px; }
    .gr-saga-stars svg { width: 9px; height: 9px; }
    .gr-saga-pin { width: 22px; height: 22px; font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════
   REVIEW QUEUE (ÔN TẬP)
   ═══════════════════════════════════════════════════════════ */
.gr-review-page { max-width: 920px; }
.gr-review-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.gr-review-hero h1 {
    font-size: 24px; font-weight: 800;
    color: var(--gr-gray-900);
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.gr-review-hero p { color: var(--gr-gray-500); font-size: 14px; margin: 0; max-width: 560px; line-height: 1.55; }

/* Filter tabs */
.gr-review-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gr-gray-200);
}
.gr-review-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--gr-radius-sm);
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--gr-gray-500);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--gr-transition);
}
.gr-review-tabs button svg { width: 14px; height: 14px; }
.gr-review-tabs button:hover { background: var(--gr-gray-100); color: var(--gr-gray-900); }
.gr-review-tabs button.is-active {
    background: var(--gr-teal-lt);
    color: var(--gr-teal-dk);
    border-color: var(--gr-teal);
}
.ae-dark-mode .gr-review-tabs button.is-active { color: #67E8F9; }
.gr-review-tab-count {
    margin-left: 4px;
    background: var(--gr-gray-200);
    color: var(--gr-gray-600);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}
.gr-review-tab-count--red    { background: var(--gr-red-lt);   color: var(--gr-red); }
.gr-review-tab-count--amber  { background: var(--gr-amber-lt); color: var(--gr-amber); }
.ae-dark-mode .gr-review-tab-count       { background: var(--gr-gray-200); color: var(--gr-gray-600); }
.ae-dark-mode .gr-review-tab-count--red  { background: rgba(239,68,68,.20);  color: #FCA5A5; }
.ae-dark-mode .gr-review-tab-count--amber{ background: rgba(245,158,11,.18); color: #FCD34D; }

/* Empty state */
.gr-review-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--gr-sub-card);
    border-radius: var(--gr-radius-lg);
}
.gr-review-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    color: var(--gr-green);
    background: var(--gr-green-lt);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.gr-review-empty-icon svg { width: 36px; height: 36px; }
.gr-review-empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--gr-gray-900); }
.gr-review-empty p { font-size: 14px; color: var(--gr-gray-500); margin: 0 auto 18px; max-width: 420px; }

/* Card list */
.gr-review-cards { display: flex; flex-direction: column; gap: 14px; }
.gr-review-card {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    padding: 18px 20px;
    border-left: 4px solid var(--gr-gray-300);
    transition: transform var(--gr-transition), box-shadow var(--gr-transition);
}
.gr-review-card:hover { transform: translateY(-1px); box-shadow: var(--gr-shadow-md); }
.gr-review-card--wrong       { border-left-color: var(--gr-red); }
.gr-review-card--bookmarked  { border-left-color: var(--gr-amber); }
.gr-review-card--bookmarked.gr-review-card--wrong { border-left-color: var(--gr-red); }

/* Card header */
.gr-review-card-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.gr-review-card-num {
    font-size: 12px; font-weight: 800;
    color: var(--gr-gray-400);
    background: var(--gr-gray-100);
    padding: 3px 9px;
    border-radius: 999px;
}
.gr-review-card-lesson {
    font-size: 13px;
    font-weight: 700;
    color: var(--gr-violet);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gr-review-card-lesson:hover { text-decoration: underline; }
.ae-dark-mode .gr-review-card-lesson { color: #C4B5FD; }
.gr-review-card-tag {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-review-card-tag--easy   { background: var(--gr-green-lt); color: var(--gr-green); }
.gr-review-card-tag--medium { background: var(--gr-amber-lt); color: var(--gr-amber); }
.gr-review-card-tag--hard   { background: var(--gr-red-lt);   color: var(--gr-red); }
.ae-dark-mode .gr-review-card-tag--easy   { background: rgba(16,185,129,.20); color: #6EE7B7; }
.ae-dark-mode .gr-review-card-tag--medium { background: rgba(245,158,11,.20); color: #FCD34D; }
.ae-dark-mode .gr-review-card-tag--hard   { background: rgba(239,68,68,.20);  color: #FCA5A5; }

.gr-review-card-bookmark {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gr-gray-400);
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--gr-transition);
}
.gr-review-card-bookmark svg { width: 18px; height: 18px; }
.gr-review-card-bookmark:hover { color: var(--gr-amber); background: var(--gr-amber-lt); }
.gr-review-card-bookmark.is-on { color: var(--gr-amber); }

.gr-review-card-instruction {
    font-size: 12.5px;
    color: var(--gr-gray-500);
    font-style: italic;
    margin: 0 0 6px;
}
.gr-review-card-prompt {
    font-size: 15px;
    color: var(--gr-gray-900);
    line-height: 1.55;
    margin: 0 0 14px;
    font-weight: 500;
}

/* Answer comparison */
.gr-review-card-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.gr-review-card-answer {
    background: var(--gr-sub-card);
    border-radius: var(--gr-radius-sm);
    padding: 10px 14px;
    border-left: 3px solid var(--gr-gray-300);
}
.gr-review-card-answer.is-wrong    { border-left-color: var(--gr-red); }
.gr-review-card-answer.is-correct  { border-left-color: var(--gr-green); }
.gr-review-card-answer--correct    { border-left-color: var(--gr-green); }
.gr-review-card-answer-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--gr-gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.gr-review-card-answer-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gr-gray-900);
    line-height: 1.45;
    word-break: break-word;
}
.gr-review-card-answer.is-wrong .gr-review-card-answer-value    { color: var(--gr-red); text-decoration: line-through; }
.gr-review-card-answer.is-correct .gr-review-card-answer-value  { color: var(--gr-green); }
.gr-review-card-answer--correct .gr-review-card-answer-value    { color: var(--gr-green); }
/* Subtle placeholder when user didn't answer or correct can't be extracted */
.gr-review-card-answer-empty {
    font-style: italic;
    font-weight: 500 !important;
    color: var(--gr-gray-500) !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
}
.ae-dark-mode .gr-review-card-answer.is-wrong .gr-review-card-answer-value   { color: #FCA5A5; }
.ae-dark-mode .gr-review-card-answer.is-correct .gr-review-card-answer-value,
.ae-dark-mode .gr-review-card-answer--correct .gr-review-card-answer-value   { color: #6EE7B7; }

/* AI explanation block */
.gr-review-card-ai {
    background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(8,145,178,.04));
    border-radius: var(--gr-radius-sm);
    padding: 12px 16px;
    margin-bottom: 14px;
    border-left: 3px solid var(--gr-violet);
}
.ae-dark-mode .gr-review-card-ai {
    background: linear-gradient(135deg, rgba(167,139,250,.10), rgba(34,211,238,.08));
}
.gr-review-card-ai-head {
    display: flex; align-items: center; gap: 6px;
    color: var(--gr-violet);
    font-size: 12px; font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-review-card-ai-head svg { width: 14px; height: 14px; }
.gr-review-card-ai p {
    font-size: 13.5px;
    color: var(--gr-gray-700);
    margin: 0 0 4px;
    line-height: 1.5;
}
.gr-review-card-ai-rule { font-size: 12.5px; color: var(--gr-gray-500); }
.gr-review-card-ai-rule em { color: var(--gr-violet); font-weight: 700; }

/* Footer */
.gr-review-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gr-gray-200);
    flex-wrap: wrap;
}
.gr-review-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--gr-gray-500);
}
.gr-review-card-meta svg { width: 13px; height: 13px; }
.gr-review-card-attempts { color: var(--gr-gray-400); }

@media (max-width: 600px) {
    .gr-review-card-answers { grid-template-columns: 1fr; }
    .gr-review-tabs button { padding: 7px 10px; font-size: 12.5px; }
    .gr-review-tab-count { font-size: 10px; padding: 1px 6px; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD (TIẾN ĐỘ)
   ═══════════════════════════════════════════════════════════ */
.gr-dashboard-page { max-width: 1100px; }
.gr-dash-hero {
    background: linear-gradient(135deg, var(--gr-teal-dk) 0%, var(--gr-violet-dk) 100%);
    border-radius: var(--gr-radius-lg);
    padding: 28px 32px;
    margin-bottom: 28px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.gr-dash-hero-text h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.gr-dash-hero-text p { margin: 0; opacity: .85; max-width: 580px; font-size: 14px; line-height: 1.55; }
.gr-dash-hero .gr-btn-primary {
    background: #fff;
    color: var(--gr-teal-dk);
    border-color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.gr-dash-hero .gr-btn-primary:hover { background: var(--gr-teal-lt); }

/* Dark mode hero — boost gradient saturation + add radial glows for contrast */
.ae-dark-mode .gr-dash-hero {
    background:
        radial-gradient(ellipse at 90% 10%, rgba(167,139,250,.40), transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(34,211,238,.35), transparent 55%),
        linear-gradient(135deg, #0E7490 0%, #5B21B6 100%) !important;
    color: #F8FAFC;
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.ae-dark-mode .gr-dash-hero-text h1 {
    color: #F8FAFC;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.ae-dark-mode .gr-dash-hero-text p { color: #E0E7FF; opacity: .95; }
.ae-dark-mode .gr-dash-hero .gr-btn-primary {
    background: #fff !important;
    color: #155E75 !important;
    border-color: #fff !important;
}
.ae-dark-mode .gr-dash-hero .gr-btn-primary:hover {
    background: #67E8F9 !important;
    color: #134E4A !important;
}

/* Stats grid */
.gr-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
.gr-dash-stat {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    padding: 18px 18px;
    box-shadow: var(--gr-shadow);
    display: flex; gap: 14px; align-items: flex-start;
    transition: transform var(--gr-transition), box-shadow var(--gr-transition);
}
.gr-dash-stat:hover { transform: translateY(-2px); box-shadow: var(--gr-shadow-md); }
.gr-dash-stat-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gr-dash-stat-icon svg { width: 22px; height: 22px; }
.gr-dash-stat--flame  .gr-dash-stat-icon { background: rgba(245,158,11,.12); color: var(--gr-amber); }
.gr-dash-stat--check  .gr-dash-stat-icon { background: rgba(5,150,105,.12); color: var(--gr-green); }
.gr-dash-stat--star   .gr-dash-stat-icon { background: rgba(124,58,237,.12); color: var(--gr-violet); }
.gr-dash-stat--target .gr-dash-stat-icon { background: rgba(8,145,178,.12); color: var(--gr-teal); }

.gr-dash-stat-value { font-size: 26px; font-weight: 900; line-height: 1; color: var(--gr-gray-900); }
.gr-dash-stat-of { font-size: 14px; color: var(--gr-gray-400); font-weight: 700; }
.gr-dash-stat-label { font-size: 12.5px; color: var(--gr-gray-500); margin-top: 4px; font-weight: 600; }
.gr-dash-stat-sub { font-size: 11px; color: var(--gr-gray-400); margin-top: 4px; }

/* Section blocks */
.gr-dash-section { margin-bottom: 28px; }
.gr-dash-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px; font-weight: 700;
    color: var(--gr-gray-900);
    margin: 0 0 14px;
    letter-spacing: -.005em;
}
.gr-dash-section-title svg { width: 20px; height: 20px; color: var(--gr-amber); }

/* Tier progress */
.gr-dash-tiers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.gr-dash-tier {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    padding: 14px 18px;
    box-shadow: var(--gr-shadow);
}
.gr-dash-tier-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.gr-dash-tier-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-dash-tier-tag--1 { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.gr-dash-tier-tag--2 { background: linear-gradient(135deg, #14B8A6, #0F766E); }
.gr-dash-tier-tag--3 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.gr-dash-tier-tag--4 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.gr-dash-tier-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--gr-gray-900); }
.gr-dash-tier-count { font-size: 13px; font-weight: 700; color: var(--gr-gray-500); }
.gr-dash-tier-bar { height: 8px; background: var(--gr-gray-200); border-radius: 999px; overflow: hidden; }
.gr-dash-tier-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.gr-dash-tier-fill--1 { background: linear-gradient(90deg, #06B6D4, #0891B2); }
.gr-dash-tier-fill--2 { background: linear-gradient(90deg, #14B8A6, #0F766E); }
.gr-dash-tier-fill--3 { background: linear-gradient(90deg, #8B5CF6, #6D28D9); }
.gr-dash-tier-fill--4 { background: linear-gradient(90deg, #F59E0B, #D97706); }

/* Weakness map */
.gr-dash-weak {
    display: grid;
    gap: 10px;
}
.gr-dash-weak-row {
    display: block;
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-left: 3px solid var(--gr-red);
    border-radius: var(--gr-radius);
    padding: 14px 18px;
    box-shadow: var(--gr-shadow);
    text-decoration: none;
    transition: transform var(--gr-transition), box-shadow var(--gr-transition), border-color var(--gr-transition);
}
.gr-dash-weak-row:hover { transform: translateX(2px); box-shadow: var(--gr-shadow-md); border-left-color: var(--gr-amber); text-decoration: none; }
.gr-dash-weak-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.gr-dash-weak-head strong { font-size: 14px; color: var(--gr-gray-900); font-weight: 700; }
.gr-dash-weak-rate {
    font-size: 12px; font-weight: 700;
    color: var(--gr-red);
    background: var(--gr-red-lt);
    padding: 2px 10px;
    border-radius: 999px;
}
.ae-dark-mode .gr-dash-weak-rate { color: #FCA5A5; background: rgba(239,68,68,.20); }
.gr-dash-weak-bar { height: 6px; background: var(--gr-gray-200); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.gr-dash-weak-fill { height: 100%; background: linear-gradient(90deg, var(--gr-amber), var(--gr-red)); border-radius: 999px; }
.gr-dash-weak-meta { font-size: 11.5px; color: var(--gr-gray-500); }

/* Empty state */
.gr-dash-empty {
    background: var(--gr-sub-card);
    border-radius: var(--gr-radius);
    padding: 28px 20px;
    text-align: center;
    color: var(--gr-gray-500);
}
.gr-dash-empty p { margin: 0 0 12px; font-size: 14px; }

/* Bookmark card */
.gr-dash-bookmark-card {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    text-decoration: none;
    color: inherit;
    transition: all var(--gr-transition);
}
.gr-dash-bookmark-card:hover { transform: translateY(-1px); box-shadow: var(--gr-shadow-md); border-color: var(--gr-amber); text-decoration: none; }
.gr-dash-bookmark-icon {
    width: 44px; height: 44px;
    background: var(--gr-amber-lt);
    color: var(--gr-amber);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gr-dash-bookmark-icon svg { width: 22px; height: 22px; }
.gr-dash-bookmark-text { flex: 1; }
.gr-dash-bookmark-text strong { display: block; font-size: 15px; font-weight: 700; color: var(--gr-gray-900); }
.gr-dash-bookmark-text span { font-size: 12.5px; color: var(--gr-gray-500); }
.gr-dash-bookmark-arrow { width: 18px; height: 18px; color: var(--gr-gray-400); }

@media (max-width: 900px) {
    .gr-dash-stats { grid-template-columns: repeat(2, 1fr); }
    .gr-dash-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .gr-dash-stats { grid-template-columns: 1fr; }
    .gr-dash-hero { padding: 22px 22px; }
    .gr-dash-hero-text h1 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS PAGE
   ═══════════════════════════════════════════════════════════ */
.gr-settings-page { max-width: 760px; }
.gr-settings-head { margin-bottom: 24px; }
.gr-settings-head h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; color: var(--gr-gray-900); letter-spacing: -.015em; }
.gr-settings-head p { font-size: 14px; color: var(--gr-gray-500); margin: 0; }

.gr-settings-loading {
    display: flex; align-items: center; gap: 10px;
    padding: 32px 16px;
    color: var(--gr-gray-500);
}

.gr-settings-groups { display: flex; flex-direction: column; gap: 16px; }
.gr-settings-group {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    overflow: hidden;
}
.gr-settings-group-head {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gr-gray-200);
}
.gr-settings-group-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gr-settings-group-icon svg { width: 20px; height: 20px; }
.gr-icon-violet { background: var(--gr-violet-lt); color: var(--gr-violet); }
.gr-icon-teal   { background: var(--gr-teal-lt);   color: var(--gr-teal); }
.gr-icon-amber  { background: var(--gr-amber-lt);  color: var(--gr-amber); }
.gr-settings-group-head h2 { font-size: 16px; font-weight: 700; margin: 0 0 2px; color: var(--gr-gray-900); }
.gr-settings-group-head p { font-size: 12.5px; color: var(--gr-gray-500); margin: 0; }

.gr-settings-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gr-gray-200);
}
.gr-settings-row:last-child { border-bottom: none; }
.gr-settings-row-text { flex: 1; min-width: 0; }
.gr-settings-row-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--gr-gray-900); margin-bottom: 3px; }
.gr-settings-row-text p { font-size: 12.5px; color: var(--gr-gray-500); margin: 0; line-height: 1.5; }

/* Toggle switch */
.gr-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}
.gr-toggle input { opacity: 0; width: 0; height: 0; }
.gr-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--gr-gray-300);
    border-radius: 999px;
    transition: background var(--gr-transition);
}
.gr-toggle-slider::before {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--gr-transition);
    box-shadow: 0 2px 4px rgba(0,0,0,.20);
}
.gr-toggle input:checked + .gr-toggle-slider {
    background: linear-gradient(135deg, var(--gr-teal-mid), var(--gr-violet-mid));
}
.gr-toggle input:checked + .gr-toggle-slider::before {
    transform: translateX(22px);
}

/* Radio group (roadmap style) */
.gr-settings-radio-group {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.gr-settings-radio { cursor: pointer; }
.gr-settings-radio input { display: none; }
.gr-settings-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--gr-gray-200);
    border-radius: var(--gr-radius-sm);
    color: var(--gr-gray-600);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--gr-transition);
}
.gr-settings-radio-label svg { width: 14px; height: 14px; }
.gr-settings-radio:hover .gr-settings-radio-label { border-color: var(--gr-teal-mid); color: var(--gr-teal-dk); }
.gr-settings-radio input:checked + .gr-settings-radio-label {
    background: var(--gr-teal-lt);
    border-color: var(--gr-teal);
    color: var(--gr-teal-dk);
    font-weight: 600;
}
.ae-dark-mode .gr-settings-radio input:checked + .gr-settings-radio-label { color: #67E8F9; }

/* Danger zone group */
.gr-settings-group--danger {
    border-color: rgba(220,38,38,.30);
    background: linear-gradient(135deg, rgba(220,38,38,.03), transparent 30%);
}
.gr-settings-group--danger .gr-settings-group-head {
    border-bottom-color: rgba(220,38,38,.18);
}
.gr-icon-red { background: var(--gr-red-lt); color: var(--gr-red); }
.ae-dark-mode .gr-icon-red { background: rgba(239,68,68,.20); color: #FCA5A5; }

.gr-btn-danger {
    background: var(--gr-red);
    color: #fff;
    border-color: var(--gr-red);
    box-shadow: 0 2px 6px rgba(220,38,38,.30);
}
.gr-btn-danger:hover:not(:disabled) {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
    box-shadow: 0 4px 12px rgba(220,38,38,.40);
}
.gr-btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.gr-btn-danger svg { width: 14px; height: 14px; }

/* Modal */
.gr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,15,18,.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.gr-modal {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius-lg);
    padding: 28px 28px 24px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0,0,0,.30);
    text-align: center;
}
.gr-modal-icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    background: var(--gr-red-lt);
    color: var(--gr-red);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: gr-modal-pulse 1.6s ease-in-out infinite;
}
.gr-modal-icon svg { width: 28px; height: 28px; }
@keyframes gr-modal-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.30); }
    50%      { box-shadow: 0 0 0 12px rgba(220,38,38,0); }
}
.gr-modal h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--gr-gray-900); }
.gr-modal p { font-size: 14px; color: var(--gr-gray-600); margin: 0 0 12px; line-height: 1.55; }
.gr-modal p strong { color: var(--gr-red); font-weight: 700; }
.ae-dark-mode .gr-modal p strong { color: #FCA5A5; }
.gr-modal-typecheck { font-size: 13px !important; }
.gr-modal-typecheck code {
    background: var(--gr-red-lt);
    color: var(--gr-red);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}
.ae-dark-mode .gr-modal-typecheck code { background: rgba(239,68,68,.20); color: #FCA5A5; }
.gr-modal-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--gr-gray-200);
    border-radius: var(--gr-radius-sm);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 18px;
    background: var(--gr-sub-card);
    color: var(--gr-gray-900);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.gr-modal-input:focus {
    outline: none;
    border-color: var(--gr-red);
    box-shadow: 0 0 0 3px rgba(220,38,38,.18);
}
.gr-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Inline feedback toast */
.gr-settings-feedback {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gr-teal), var(--gr-violet));
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    display: flex; align-items: center; gap: 8px;
    z-index: 10000;
}
.gr-settings-feedback svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
    .gr-settings-row { flex-direction: column; align-items: stretch; }
    .gr-settings-row-text { width: 100%; }
    .gr-settings-radio-group { width: 100%; }
    .gr-settings-radio { flex: 1; }
    .gr-settings-radio-label { justify-content: center; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD — Quảng Trường Danh Vọng
   ═══════════════════════════════════════════════════════════ */
.gr-lb { padding-bottom: 80px; }

/* ── HERO ───────────────────────────────────────────────── */
.gr-lb-hero {
    position: relative;
    border-radius: var(--gr-radius-lg);
    overflow: hidden;
    padding: 40px 32px 36px;
    margin-bottom: 28px;
    background: linear-gradient(135deg, #1E293B 0%, var(--gr-violet-dk) 100%);
    color: #fff;
    text-align: center;
    isolation: isolate;
}
.gr-lb-hero-bg { position: absolute; inset: 0; z-index: 0; }
.gr-lb-hero-orb {
    position: absolute;
    width: 240px; height: 240px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .4;
}
.gr-lb-hero-orb--gold   { top: -60px; left: -40px;  background: #F59E0B; }
.gr-lb-hero-orb--violet { bottom: -50px; right: -50px; background: #7C3AED; }
.gr-lb-hero-orb--cyan   { top: 30%; right: 20%; background: #06B6D4; opacity: .25; }
.gr-lb-hero-content { position: relative; z-index: 1; }
.gr-lb-trophy {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, #FBBF24, #D97706);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 12px 24px rgba(245,158,11,.35);
}
.gr-lb-trophy svg { width: 32px; height: 32px; }
.gr-lb-hero-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #FBBF24, #FCD34D, #F59E0B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gr-lb-hero-sub { margin: 0 auto 22px; max-width: 580px; opacity: .82; font-size: 14px; line-height: 1.55; }
.gr-lb-stats {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.gr-lb-stat {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 12px 22px;
    backdrop-filter: blur(6px);
    min-width: 120px;
}
.gr-lb-stat-value { font-size: 26px; font-weight: 800; line-height: 1; }
.gr-lb-stat-value--violet { color: #C4B5FD; }
.gr-lb-stat-label { font-size: 11px; opacity: .8; margin-top: 4px; letter-spacing: .04em; }

.gr-lb-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--gr-gray-500);
}

/* ── PODIUM ─────────────────────────────────────────────── */
.gr-podium-stage {
    position: relative;
    margin: 8px 0 36px;
    padding: 16px 0 0;
}
.gr-podium {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 14px;
    align-items: end;
    max-width: 800px;
    margin: 0 auto;
}
.gr-podium-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.gr-podium-slot--1st { order: 2; }
.gr-podium-slot--2nd { order: 1; }
.gr-podium-slot--3rd { order: 3; }

.gr-podium-rank-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 8px;
    color: #fff;
}
.gr-podium-rank-badge svg { width: 14px; height: 14px; }
.gr-rank--gold   { background: linear-gradient(135deg, #FBBF24, #D97706); box-shadow: 0 4px 10px rgba(245,158,11,.40); }
.gr-rank--silver { background: linear-gradient(135deg, #D1D5DB, #6B7280); box-shadow: 0 4px 10px rgba(107,114,128,.30); }
.gr-rank--bronze { background: linear-gradient(135deg, #D97706, #92400E); box-shadow: 0 4px 10px rgba(146,64,14,.30); }

.gr-podium-crown {
    position: absolute;
    top: -22px; left: 50%;
    transform: translateX(-50%);
    color: #FBBF24;
    animation: gr-crown-bob 2.4s ease-in-out infinite;
}
.gr-podium-crown svg { width: 32px; height: 32px; filter: drop-shadow(0 4px 8px rgba(251,191,36,.5)); }
@keyframes gr-crown-bob {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
    50%      { transform: translateX(-50%) translateY(-4px) rotate(3deg); }
}

.gr-podium-avatar-ring {
    width: 84px; height: 84px;
    border-radius: 50%;
    padding: 4px;
    margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center;
}
.gr-podium-slot--1st .gr-podium-avatar-ring { width: 100px; height: 100px; }
.gr-ring--gold   { background: linear-gradient(135deg, #FBBF24, #D97706); box-shadow: 0 8px 24px rgba(245,158,11,.35); }
.gr-ring--silver { background: linear-gradient(135deg, #D1D5DB, #6B7280); box-shadow: 0 6px 18px rgba(107,114,128,.25); }
.gr-ring--bronze { background: linear-gradient(135deg, #D97706, #92400E); box-shadow: 0 6px 18px rgba(146,64,14,.25); }
.gr-podium-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--gr-white); }

.gr-podium-name {
    font-size: 14px; font-weight: 700;
    color: var(--gr-gray-900);
    margin-bottom: 4px;
    line-height: 1.3;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gr-podium-slot--1st .gr-podium-name { font-size: 16px; }

.gr-lb-tier {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.gr-podium-stats-card {
    width: 100%;
    border-radius: 12px;
    padding: 12px 8px;
    color: #fff;
    margin-bottom: 8px;
}
.gr-stats--gold   { background: linear-gradient(135deg, #FBBF24, #D97706); box-shadow: 0 6px 14px rgba(245,158,11,.30); }
.gr-stats--silver { background: linear-gradient(135deg, #9CA3AF, #6B7280); }
.gr-stats--bronze { background: linear-gradient(135deg, #D97706, #92400E); }
.gr-podium-pts { font-size: 24px; font-weight: 900; line-height: 1; }
.gr-podium-slot--1st .gr-podium-pts { font-size: 30px; }
.gr-podium-pts-label { font-size: 10px; opacity: .85; margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
.gr-podium-meta {
    display: flex; justify-content: center; gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    opacity: .92;
}

.gr-podium-block {
    width: 100%;
    height: 36px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 16px; font-weight: 900;
}
.gr-podium-slot--1st .gr-podium-block { height: 60px; font-size: 22px; }
.gr-podium-slot--2nd .gr-podium-block { height: 46px; }
.gr-block--gold   { background: linear-gradient(180deg, #FBBF24, #B45309); }
.gr-block--silver { background: linear-gradient(180deg, #D1D5DB, #4B5563); }
.gr-block--bronze { background: linear-gradient(180deg, #D97706, #78350F); }

/* ── RANK 4-25 LIST ─────────────────────────────────────── */
.gr-lb-list-section { max-width: 800px; margin: 0 auto; }
.gr-lb-list-title {
    font-size: 18px; font-weight: 700;
    color: var(--gr-gray-900);
    margin: 0 0 14px;
    letter-spacing: -.005em;
}
.gr-lb-cards { display: flex; flex-direction: column; gap: 8px; }
.gr-lb-card {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    position: relative;
    transition: transform var(--gr-transition), box-shadow var(--gr-transition), border-color var(--gr-transition);
}
.gr-lb-card:hover { transform: translateY(-1px); box-shadow: var(--gr-shadow-md); border-color: var(--gr-teal-mid); }
.gr-lb-card.is-me {
    border-color: var(--gr-violet);
    box-shadow: 0 0 0 2px rgba(124,58,237,.18), var(--gr-shadow);
    background: linear-gradient(135deg, var(--gr-violet-lt), var(--gr-white));
}
.gr-lb-card-rank {
    font-size: 18px; font-weight: 800;
    color: var(--gr-gray-500);
    text-align: center;
}
.gr-lb-card-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gr-lb-card-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gr-lb-card-info { min-width: 0; }
.gr-lb-card-name {
    font-size: 14px; font-weight: 700;
    color: var(--gr-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gr-lb-card-meta {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 3px;
    font-size: 11px;
    color: var(--gr-gray-500);
}
.gr-lb-card-meta .gr-lb-tier { margin-bottom: 0; }
.gr-lb-card-pts {
    text-align: right;
    flex-shrink: 0;
}
.gr-lb-card-pts-value {
    font-size: 18px; font-weight: 800;
    color: var(--gr-violet);
    line-height: 1;
}
.gr-lb-card-pts-label { font-size: 10px; color: var(--gr-gray-500); margin-top: 2px; }
.gr-lb-card-mine-flag {
    position: absolute;
    top: -8px; right: 14px;
    background: var(--gr-violet);
    color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── EMPTY STATE ────────────────────────────────────────── */
.gr-lb-empty {
    text-align: center;
    padding: 60px 20px;
    max-width: 480px;
    margin: 0 auto;
}
.gr-lb-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    color: var(--gr-gray-400);
    background: var(--gr-gray-100);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}
.gr-lb-empty-icon svg { width: 36px; height: 36px; }
.gr-lb-empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--gr-gray-900); }
.gr-lb-empty p { color: var(--gr-gray-500); margin: 0 0 20px; font-size: 14px; }

@media (max-width: 700px) {
    .gr-lb-hero { padding: 28px 18px 24px; }
    .gr-lb-hero-title { font-size: 22px; }
    .gr-podium { grid-template-columns: 1fr; max-width: 320px; gap: 12px; }
    .gr-podium-slot--1st { order: 1; }
    .gr-podium-slot--2nd { order: 2; }
    .gr-podium-slot--3rd { order: 3; }
    .gr-podium-block { display: none; }
    .gr-lb-card { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 10px 12px; }
    .gr-lb-card-meta { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   THPT REPORT CARD on Dashboard (?view=dashboard)
   ═══════════════════════════════════════════════════════════ */
.gr-dash-thpt {
    margin-top: 32px;
}
.gr-dash-thpt .gr-dash-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gr-dash-thpt-badge {
    display: inline-block;
    padding: 2px 10px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-dash-thpt-empty {
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border: 1px solid var(--gr-gray-200);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
}
.gr-dash-thpt-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.gr-dash-thpt-empty strong {
    display: block;
    font-size: 16px;
    color: var(--gr-gray-900);
    margin-bottom: 4px;
}
.gr-dash-thpt-empty p {
    color: var(--gr-gray-700);
    font-size: 14px;
    max-width: 480px;
    margin: 0 auto 18px;
    line-height: 1.55;
}
.gr-dash-thpt-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 6px 16px -4px rgba(124,58,237,.35);
    transition: transform .15s ease, box-shadow .15s ease;
    margin-top: 16px;
}
.gr-dash-thpt-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(124,58,237,.5);
    color: #fff;
}

.gr-dash-thpt-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 768px) {
    .gr-dash-thpt-summary { grid-template-columns: repeat(2, 1fr); }
}
.gr-dash-thpt-stat {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}
.gr-dash-thpt-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--gr-gray-900);
    line-height: 1.2;
}
.gr-dash-thpt-stat-label {
    font-size: 11px;
    color: var(--gr-gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}
.gr-dash-thpt-stat--best {
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border-color: var(--gr-violet);
}
.gr-dash-thpt-stat--best .gr-dash-thpt-stat-value {
    background: linear-gradient(90deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gr-dash-thpt-table {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--gr-shadow);
}
.gr-dash-thpt-row {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1fr 1fr .8fr 1.2fr 100px;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gr-gray-100);
    font-size: 13px;
    color: var(--gr-gray-900);
}
.gr-dash-thpt-row:last-child { border-bottom: none; }
.gr-dash-thpt-row--head {
    background: var(--gr-gray-50);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--gr-gray-500);
}
.gr-dash-thpt-when { color: var(--gr-gray-700); font-size: 12px; }
.gr-dash-thpt-seed code {
    background: var(--gr-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--gr-violet);
}
.gr-dash-thpt-score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
.gr-dash-thpt-score strong {
    font-size: 18px;
    font-weight: 800;
}
.gr-dash-thpt-score span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-dash-thpt-score.is-excellent strong { color: var(--gr-green); }
.gr-dash-thpt-score.is-excellent span   { color: var(--gr-green); }
.gr-dash-thpt-score.is-pass      strong { color: var(--gr-amber); }
.gr-dash-thpt-score.is-pass      span   { color: var(--gr-amber); }
.gr-dash-thpt-score.is-fail      strong { color: var(--gr-red); }
.gr-dash-thpt-score.is-fail      span   { color: var(--gr-red); }
.gr-dash-thpt-time { font-variant-numeric: tabular-nums; color: var(--gr-gray-700); }
.gr-dash-thpt-parts { display: flex; gap: 4px; }
.gr-dash-thpt-part {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.gr-dash-thpt-part.is-ok   { background: var(--gr-green); }
.gr-dash-thpt-part.is-warn { background: var(--gr-amber); }
.gr-dash-thpt-part.is-bad  { background: var(--gr-red); }

/* "Xem lại" button on each row */
.gr-dash-thpt-review-btn {
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    border: 1px solid var(--gr-violet);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.gr-dash-thpt-review-btn svg { width: 14px; height: 14px; }
.gr-dash-thpt-review-btn:hover {
    background: var(--gr-violet);
    color: #fff;
}

/* Review modal */
.gr-dash-thpt-review-modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.gr-dash-thpt-review-panel {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.gr-dash-thpt-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gr-gray-200);
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
}
.gr-dash-thpt-review-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}
.gr-dash-thpt-review-seed {
    color: var(--gr-violet);
    font-weight: 600;
    font-size: 13px;
}
.gr-dash-thpt-review-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gr-gray-100);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s ease;
}
.gr-dash-thpt-review-close:hover { background: var(--gr-gray-200); }
.gr-dash-thpt-review-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.gr-dash-thpt-review-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 14px;
    background: var(--gr-gray-50);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}
.gr-dash-thpt-review-summary strong { color: var(--gr-gray-900); }
.gr-dash-thpt-review-loading,
.gr-dash-thpt-review-error {
    text-align: center;
    padding: 20px;
    color: var(--gr-gray-500);
}
.gr-dash-thpt-review-error { color: var(--gr-red); }
.gr-dash-thpt-review-part {
    margin-bottom: 22px;
}
.gr-dash-thpt-review-part h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gr-violet);
    border-bottom: 2px solid var(--gr-violet-lt);
    padding-bottom: 4px;
}
.gr-dash-thpt-review-q {
    background: var(--gr-gray-50);
    border-left: 3px solid var(--gr-gray-300);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.gr-dash-thpt-review-q.is-ok  { border-left-color: var(--gr-green); }
.gr-dash-thpt-review-q.is-bad { border-left-color: var(--gr-red); }
.gr-dash-thpt-review-q-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.gr-dash-thpt-review-q-num {
    font-size: 11px;
    color: var(--gr-gray-500);
    font-weight: 700;
    text-transform: uppercase;
}
.gr-dash-thpt-review-q-mark {
    font-size: 16px;
    font-weight: 800;
}
.gr-dash-thpt-review-q.is-ok  .gr-dash-thpt-review-q-mark { color: var(--gr-green); }
.gr-dash-thpt-review-q.is-bad .gr-dash-thpt-review-q-mark { color: var(--gr-red); }
.gr-dash-thpt-review-q-prompt {
    font-size: 13px;
    margin: 0 0 8px;
    color: var(--gr-gray-900);
}
.gr-dash-thpt-review-q-items {
    margin: 6px 0 8px;
    padding: 8px 8px 8px 28px;
    background: var(--gr-white);
    border-radius: 6px;
    list-style: lower-alpha;
    font-size: 12px;
}
.gr-dash-thpt-review-q-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gr-dash-thpt-review-q-opt {
    display: flex;
    gap: 8px;
    padding: 5px 10px;
    background: var(--gr-white);
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid transparent;
}
.gr-dash-thpt-review-q-opt.is-correct {
    background: var(--gr-green-lt);
    color: var(--gr-green);
    border-color: var(--gr-green);
    font-weight: 600;
}
.gr-dash-thpt-review-q-opt.is-user-wrong {
    background: var(--gr-red-lt);
    color: var(--gr-red);
    border-color: var(--gr-red);
    text-decoration: line-through;
}
.gr-dash-thpt-review-q-explain {
    margin: 6px 0 0;
    padding: 6px 8px;
    background: var(--gr-amber-lt);
    color: var(--gr-amber);
    border-radius: 4px;
    font-size: 11px;
}

/* Dark mode for review modal */
.ae-dark-mode .gr-dash-thpt-review-panel {
    background: #1E293B;
    color: #E2E8F0;
}
.ae-dark-mode .gr-dash-thpt-review-q,
.ae-dark-mode .gr-dash-thpt-review-summary {
    background: rgba(255,255,255,.04);
}
.ae-dark-mode .gr-dash-thpt-review-q-prompt,
.ae-dark-mode .gr-dash-thpt-review-summary strong { color: #F8FAFC; }
.ae-dark-mode .gr-dash-thpt-review-q-items,
.ae-dark-mode .gr-dash-thpt-review-q-opt { background: rgba(255,255,255,.04); }

@media (max-width: 768px) {
    .gr-dash-thpt-row { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
    .gr-dash-thpt-row--head { display: none; }
}

/* Dark mode for report card */
.ae-dark-mode .gr-dash-thpt-stat,
.ae-dark-mode .gr-dash-thpt-table,
.ae-dark-mode .gr-dash-thpt-empty {
    background: rgba(15,23,42,.85);
    border-color: rgba(255,255,255,.08);
}
.ae-dark-mode .gr-dash-thpt-stat-value { color: #F8FAFC; }
.ae-dark-mode .gr-dash-thpt-row--head  { background: rgba(255,255,255,.04); }
.ae-dark-mode .gr-dash-thpt-row        { border-color: rgba(255,255,255,.06); color: #E2E8F0; }
.ae-dark-mode .gr-dash-thpt-seed code  { background: rgba(255,255,255,.08); }

/* ═══════════════════════════════════════════════════════════
   THPT EXAM custom submit-confirm MODAL (replaces browser confirm())
   ═══════════════════════════════════════════════════════════ */
.gr-exam-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gr-exam-modal {
    background: #fff;
    border-radius: 20px;
    padding: 28px 28px 22px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    text-align: center;
}
.gr-exam-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gr-exam-modal-icon.is-warn    { background: var(--gr-amber-lt);  color: var(--gr-amber); }
.gr-exam-modal-icon.is-info    { background: var(--gr-violet-lt); color: var(--gr-violet); }
.gr-exam-modal-icon.is-success { background: var(--gr-green-lt);  color: var(--gr-green); }
.gr-exam-modal-icon svg { width: 32px; height: 32px; }
.gr-exam-modal-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--gr-gray-900);
}
.gr-exam-modal-body {
    color: var(--gr-gray-700);
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
}
.gr-exam-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: var(--gr-gray-50);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 18px;
}
.gr-exam-modal-stat {
    text-align: center;
}
.gr-exam-modal-stat strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--gr-gray-900);
    line-height: 1.1;
}
.gr-exam-modal-stat span {
    font-size: 11px;
    color: var(--gr-gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-exam-modal-stat--warn strong { color: var(--gr-amber); }
.gr-exam-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.gr-exam-modal-actions .gr-exam-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 20px;
}
.gr-exam-btn-danger {
    background: linear-gradient(135deg, var(--gr-amber) 0%, #D97706 100%);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(245,158,11,.4);
}
.gr-exam-btn-danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(245,158,11,.55);
}

.ae-dark-mode .gr-exam-modal {
    background: #1E293B;
    color: #E2E8F0;
}
.ae-dark-mode .gr-exam-modal-title { color: #F8FAFC; }
.ae-dark-mode .gr-exam-modal-stats { background: rgba(255,255,255,.04); }

/* ═══════════════════════════════════════════════════════════
   PREMIUM NAV ITEM (sidebar) — locked / unlocked indicator
   ═══════════════════════════════════════════════════════════ */
.gr-nav-item--premium {
    position: relative;
}
.gr-nav-item--premium .gr-nav-lock {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--gr-amber);
    flex-shrink: 0;
}
.gr-nav-premium-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal-mid) 100%);
    margin-left: auto;
    box-shadow: 0 0 0 2px rgba(124,58,237,.15);
}
.gr-nav-item--locked {
    opacity: .65;
}
.gr-nav-item--locked:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   THPT EXAM PAGE — locked + unlocked + active modes
   ═══════════════════════════════════════════════════════════ */
.gr-exam-page {
    padding: 32px clamp(20px, 4vw, 48px) 64px;
    max-width: 1100px;
    margin: 0 auto;
    transition: max-width .25s cubic-bezier(.4,0,.2,1), padding-left .25s cubic-bezier(.4,0,.2,1);
}

/* Locked upsell card */
.gr-exam-locked {
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border: 1px solid rgba(124,58,237,.2);
    border-radius: 24px;
    padding: 56px 48px;
    text-align: center;
    box-shadow: var(--gr-shadow-lg);
    color: var(--gr-gray-900);
}
.gr-exam-locked-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 40px -8px rgba(124,58,237,.45);
}
.gr-exam-locked-icon svg {
    width: 40px;
    height: 40px;
}
.gr-exam-locked h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 12px;
    background: linear-gradient(90deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gr-exam-locked p {
    color: var(--gr-gray-700);
    font-size: 15px;
    line-height: 1.65;
    max-width: 600px;
    margin: 0 auto 16px;
}
.gr-exam-locked-features {
    list-style: none;
    margin: 24px auto;
    padding: 0;
    max-width: 460px;
    text-align: left;
}
.gr-exam-locked-features li {
    padding: 10px 16px;
    background: rgba(255,255,255,.65);
    border-radius: 10px;
    margin-bottom: 8px;
    color: var(--gr-gray-900);
    font-weight: 500;
}
.gr-exam-locked-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 14px 28px;
    background: var(--gr-amber-lt);
    border-radius: 999px;
    color: var(--gr-amber);
    font-weight: 700;
    font-size: 14px;
}

/* Unlocked — hero + setup */
.gr-exam-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 24px;
    box-shadow: 0 16px 40px -16px rgba(124,58,237,.4);
}
.gr-exam-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255,255,255,.2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}
.gr-exam-hero h1 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}
.gr-exam-hero p {
    margin: 0;
    font-size: 14px;
    opacity: .92;
    max-width: 520px;
    line-height: 1.55;
}
.gr-exam-hero-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,.16);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gr-exam-hero-icon svg { width: 40px; height: 40px; color: #fff; }

.gr-exam-setup {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--gr-shadow-md);
}
.gr-exam-setup h2 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
}

/* ── Format quick stats (40/50/4/10) ── */
.gr-exam-format-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 600px) {
    .gr-exam-format-grid { grid-template-columns: repeat(2, 1fr); }
}
.gr-exam-format-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 12px;
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border: 1px solid rgba(124,58,237,.15);
    border-radius: 14px;
    text-align: center;
}
.gr-exam-format-cell strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(90deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gr-exam-format-cell span {
    font-size: 12px;
    color: var(--gr-gray-700);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Parts overview (4 numbered rows) ── */
.gr-exam-parts-overview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    padding: 18px;
    background: var(--gr-gray-50);
    border: 1px dashed var(--gr-gray-300);
    border-radius: 14px;
}
.gr-exam-part-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--gr-white);
    border-radius: 10px;
    border: 1px solid var(--gr-gray-200);
    transition: transform .15s ease, box-shadow .15s ease;
}
.gr-exam-part-row:hover {
    transform: translateX(2px);
    box-shadow: var(--gr-shadow);
}
.gr-exam-part-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-radius: 10px;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 4px 10px -2px rgba(124,58,237,.35);
}
.gr-exam-part-row > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.gr-exam-part-row strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--gr-gray-900);
    line-height: 1.3;
}
.gr-exam-part-row small {
    font-size: 12px;
    color: var(--gr-gray-500);
    line-height: 1.4;
}

/* ── Setup form ── */
.gr-exam-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 600px) {
    .gr-exam-form { grid-template-columns: 1fr; }
}
.gr-exam-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gr-exam-field label {
    font-size: 13px;
    color: var(--gr-gray-700);
    font-weight: 600;
}
.gr-exam-field input[type="text"],
.gr-exam-field select {
    padding: 10px 12px;
    border: 1px solid var(--gr-gray-300);
    border-radius: 8px;
    background: var(--gr-white);
    font-size: 14px;
    color: var(--gr-gray-900);
    font-family: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.gr-exam-field input[type="text"]:focus,
.gr-exam-field select:focus {
    outline: none;
    border-color: var(--gr-violet);
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.gr-exam-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--gr-gray-300);
    border-radius: 8px;
    background: var(--gr-white);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.gr-exam-toggle:hover { border-color: var(--gr-violet); background: var(--gr-violet-lt); }
.gr-exam-toggle input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--gr-violet);
}

/* ── Seed input (Mã đề) — aligned with .gr-exam-toggle visual style ── */
.gr-exam-seed-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--gr-gray-300);
    border-radius: 8px;
    background: var(--gr-white);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
    height: 40px; /* match .gr-exam-toggle vertical rhythm */
}
.gr-exam-seed-row:focus-within {
    border-color: var(--gr-violet);
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.gr-exam-seed-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    background: transparent !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: 'SF Mono', 'JetBrains Mono', Menlo, monospace;
    color: var(--gr-gray-900) !important;
    height: 100% !important;
}
.gr-exam-seed-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    color: var(--gr-gray-400);
    font-size: 13px;
}
.gr-exam-seed-rand {
    flex-shrink: 0;
    width: 40px;
    height: 100%;
    border: none;
    border-left: 1px solid var(--gr-gray-200);
    background: var(--gr-gray-50);
    color: var(--gr-violet);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.gr-exam-seed-rand:hover {
    background: var(--gr-violet);
    color: #fff;
}
.gr-exam-seed-rand svg {
    width: 18px;
    height: 18px;
}

/* Form hint below the form grid */
.gr-exam-form-hint {
    margin: 0 0 22px;
    padding: 10px 14px;
    background: var(--gr-violet-lt);
    color: var(--gr-gray-700);
    font-size: 12.5px;
    line-height: 1.55;
    border-radius: 8px;
    border-left: 3px solid var(--gr-violet);
}
.gr-exam-form-hint strong { color: var(--gr-violet); font-weight: 700; }
.gr-exam-form-hint em { font-style: normal; font-weight: 600; color: var(--gr-gray-900); }

/* Dark mode overrides */
.ae-dark-mode .gr-exam-field > label:not(.gr-exam-toggle) {
    color: #E2E8F0 !important;
}
.ae-dark-mode .gr-exam-seed-row {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
}
.ae-dark-mode .gr-exam-seed-input { color: #E2E8F0 !important; }
.ae-dark-mode .gr-exam-seed-input::placeholder { color: #64748B; }
.ae-dark-mode .gr-exam-seed-rand {
    background: rgba(255,255,255,.04);
    border-left-color: rgba(255,255,255,.10);
    color: #C4B5FD;
}
.ae-dark-mode .gr-exam-seed-rand:hover {
    background: var(--gr-violet);
    color: #fff;
}
.ae-dark-mode .gr-exam-form-hint {
    background: rgba(124,58,237,.12);
    color: #CBD5E1;
}
.ae-dark-mode .gr-exam-form-hint em { color: #F8FAFC; }

.gr-exam-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 8px 20px -4px rgba(124,58,237,.4);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.gr-exam-start-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(124,58,237,.55);
}
.gr-exam-start-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}
.gr-exam-start-btn svg { width: 18px; height: 18px; }

.gr-exam-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--gr-red-lt);
    color: var(--gr-red);
    border-left: 3px solid var(--gr-red);
    border-radius: 6px;
    font-size: 13px;
}

/* Dark mode for setup section */
.ae-dark-mode .gr-exam-setup,
.ae-dark-mode .gr-exam-parts-overview,
.ae-dark-mode .gr-exam-part-row {
    background: rgba(15,23,42,.85);
    border-color: rgba(255,255,255,.08);
    color: #E2E8F0;
}
.ae-dark-mode .gr-exam-part-row strong { color: #F8FAFC; }
.ae-dark-mode .gr-exam-part-row small  { color: #94A3B8; }
.ae-dark-mode .gr-exam-format-cell {
    background: rgba(255,255,255,.04);
    border-color: rgba(124,58,237,.30);
}
.ae-dark-mode .gr-exam-format-cell span { color: #CBD5E1; }
.ae-dark-mode .gr-exam-field input[type="text"],
.ae-dark-mode .gr-exam-toggle,
.ae-dark-mode .gr-exam-field select {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    color: #E2E8F0;
}
/* (older .gr-exam-form/field/start-btn duplicates removed — see lines ~3420 above) */

/* ── Part navigation pills (top of active exam) ── */
.gr-exam-part-header {
    padding: 18px 24px 10px;
    border-bottom: 1px dashed var(--gr-gray-200);
    background: var(--gr-gray-50);
}
.gr-exam-part-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 12px;
    scrollbar-width: thin;
}
.gr-exam-part-pill {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: var(--gr-white);
    border: 1.5px solid var(--gr-gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    min-width: 80px;
    line-height: 1.2;
}
.gr-exam-part-pill:hover { border-color: var(--gr-violet); }
.gr-exam-part-pill span {
    font-size: 13px;
    font-weight: 700;
    color: var(--gr-gray-900);
}
.gr-exam-part-pill small {
    font-size: 10px;
    color: var(--gr-gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
/* Done state: light mint bg, dark green text (good contrast on light + dark mode) */
.gr-exam-part-pill.is-done {
    background: var(--gr-green-lt);
    border-color: var(--gr-green);
}
.gr-exam-part-pill.is-done span  { color: var(--gr-green); }
.gr-exam-part-pill.is-done small { color: var(--gr-green); opacity: .85; }

/* Current state ALWAYS wins over done — violet-teal gradient with white text.
   Listed AFTER is-done so the cascade gives current priority. */
.gr-exam-part-pill.is-current,
.gr-exam-part-pill.is-current.is-done {
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%) !important;
    border-color: var(--gr-violet) !important;
    box-shadow: 0 4px 12px -4px rgba(124,58,237,.35);
}
.gr-exam-part-pill.is-current span,
.gr-exam-part-pill.is-current small,
.gr-exam-part-pill.is-current.is-done span,
.gr-exam-part-pill.is-current.is-done small { color: #fff !important; opacity: 1 !important; }

.gr-exam-part-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-gray-900);
}
.gr-exam-part-instr {
    margin: 0;
    font-size: 13px;
    color: var(--gr-gray-600);
    font-style: italic;
}

/* ── Passages display (announcements / flyers / reading passages) ── */
.gr-exam-passages {
    margin-bottom: 24px;
}
.gr-exam-passage {
    background: linear-gradient(135deg, var(--gr-amber-lt) 0%, #FFF8E7 100%);
    border-left: 4px solid var(--gr-amber);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 16px;
    box-shadow: var(--gr-shadow);
}
.gr-exam-passage-kind {
    display: inline-block;
    padding: 3px 10px;
    background: var(--gr-amber);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.gr-exam-passage h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gr-gray-900);
}
.gr-exam-passage-text {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.85;
    color: var(--gr-gray-900);
    word-wrap: break-word;
    background: transparent;
    border: none;
}

/* ── Blank pills inline in passage text ── */
.gr-exam-blank {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    margin: 0 3px;
    background: var(--gr-white);
    border: 1.5px solid var(--gr-gray-300);
    border-radius: 999px;
    font-weight: 600;
    color: var(--gr-gray-500);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.04), 0 1px 0 rgba(255,255,255,.6);
    transition: all .18s ease;
    line-height: 1.3;
    vertical-align: middle;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.gr-exam-blank:hover {
    border-color: var(--gr-violet);
    color: var(--gr-violet);
    transform: translateY(-1px);
}
.gr-exam-blank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.gr-exam-blank-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, var(--gr-gray-400) 25%, transparent 25%, transparent 50%, var(--gr-gray-400) 50%, var(--gr-gray-400) 75%, transparent 75%);
    background-size: 8px 2px;
    border-radius: 1px;
}
/* Active blank — currently being answered */
.gr-exam-blank.is-current {
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border-color: var(--gr-violet);
    color: var(--gr-violet);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15), inset 0 -2px 0 rgba(124,58,237,.10);
    transform: scale(1.05);
    animation: gr-blank-pulse 2s ease-in-out infinite;
}
.gr-exam-blank.is-current .gr-exam-blank-num {
    background: var(--gr-violet);
    color: #fff;
}
.gr-exam-blank.is-current .gr-exam-blank-line {
    background: linear-gradient(90deg, var(--gr-violet) 25%, transparent 25%, transparent 50%, var(--gr-violet) 50%, var(--gr-violet) 75%, transparent 75%);
    background-size: 8px 2px;
}
@keyframes gr-blank-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(124,58,237,.15), inset 0 -2px 0 rgba(124,58,237,.10); }
    50%      { box-shadow: 0 0 0 6px rgba(124,58,237,.10), inset 0 -2px 0 rgba(124,58,237,.10); }
}

/* Dark mode for blanks */
.ae-dark-mode .gr-exam-blank {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    color: #94A3B8;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,.04);
}
.ae-dark-mode .gr-exam-blank-num { background: rgba(124,58,237,.20); color: #C4B5FD; }
.ae-dark-mode .gr-exam-blank.is-current { background: linear-gradient(135deg, rgba(124,58,237,.20) 0%, rgba(34,211,238,.20) 100%); border-color: #A78BFA; }
.ae-dark-mode .gr-exam-blank.is-current .gr-exam-blank-num { background: var(--gr-violet); color: #fff; }

/* ── Ordering question items ── */
.gr-exam-q-items {
    background: var(--gr-gray-50);
    border-left: 3px solid var(--gr-violet);
    border-radius: 8px;
    padding: 14px 14px 14px 38px;
    margin: 12px 0 18px;
    list-style: lower-alpha;
}
.gr-exam-q-items li {
    padding: 4px 0;
    line-height: 1.5;
    color: var(--gr-gray-900);
}

/* ── Question pad sections (grouped per part) ── */
.gr-exam-q-pad {
    background: var(--gr-gray-50);
    border-radius: 12px;
    padding: 16px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.gr-exam-q-pad-section { display: flex; flex-direction: column; gap: 6px; }
.gr-exam-q-pad-label {
    font-size: 11px;
    color: var(--gr-gray-500);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-exam-q-pad-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════
   THPT QUESTION PAD — 4 ROWS, one per part, pill on LEFT + cells on RIGHT
   ═══════════════════════════════════════════════════════════ */
.gr-exam-q-pad--rows {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    background: var(--gr-gray-50);
    border-radius: 14px;
    padding: 14px 16px 16px;
    margin-top: 24px;
    border: 1px solid var(--gr-gray-200);
}
.gr-exam-q-pad-legend-top {
    display: flex !important;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--gr-gray-300);
    font-size: 12px;
    color: var(--gr-gray-600);
}
.gr-exam-q-pad-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gr-exam-q-pad-mini {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--gr-gray-300);
    background: var(--gr-white);
}
.gr-exam-q-pad-mini.is-answered {
    background: var(--gr-teal-lt);
    border-color: var(--gr-teal-mid);
}
.gr-exam-q-pad-mini.is-current {
    background: linear-gradient(135deg, var(--gr-violet), var(--gr-teal));
    border-color: transparent;
}

/* Each part = its own row — pill vertically centered with cells block */
.gr-exam-q-pad-line {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--gr-gray-200);
}
.gr-exam-q-pad-line:last-child { border-bottom: none; }

/* Pill on LEFT preceding cells — clickable to jump to that part */
.gr-exam-q-pad-line-pill {
    flex-shrink: 0;
    width: 110px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    text-align: left;
}
.gr-exam-q-pad-line-pill:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 14px -4px rgba(124,58,237,.35);
    filter: brightness(1.10);
}
.gr-exam-q-pad-line-pill.is-current-part {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 8px 22px -4px rgba(124,58,237,.55);
    filter: brightness(1.15) saturate(1.20);
    z-index: 1;
    position: relative;
}
.ae-dark-mode .gr-exam-q-pad-line-pill.is-current-part {
    box-shadow: 0 0 0 3px rgba(167,139,250,.55), 0 8px 22px -4px rgba(124,58,237,.65);
}
.gr-exam-q-pad-line-pill strong { color: #fff !important; }
.gr-exam-q-pad-line-pill small { color: #fff !important; }
/* Distinct vivid colors per part — force solid bg with !important to defeat any cascade override */
.gr-exam-q-pad-line-pill[data-part="1"] { background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%) !important; }
.gr-exam-q-pad-line-pill[data-part="2"] { background: linear-gradient(135deg, #0891B2 0%, #155E75 100%) !important; }
.gr-exam-q-pad-line-pill[data-part="3"] { background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%) !important; }
.gr-exam-q-pad-line-pill[data-part="4"] { background: linear-gradient(135deg, #059669 0%, #065F46 100%) !important; }
.gr-exam-q-pad-line-pill,
.gr-exam-q-pad-line-pill strong,
.gr-exam-q-pad-line-pill small {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.20);
}
.gr-exam-q-pad-line-pill strong {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}
.gr-exam-q-pad-line-pill small {
    font-size: 11px;
    font-weight: 600;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

/* Cells flow ngang in this part's row */
.gr-exam-q-pad-line-cells {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}

/* Color the cells faintly by part */
.gr-exam-q-pad-cell[data-part="1"] { border-color: rgba(124,58,237,.30); }
.gr-exam-q-pad-cell[data-part="2"] { border-color: rgba(8,145,178,.30); }
.gr-exam-q-pad-cell[data-part="3"] { border-color: rgba(245,158,11,.30); }
.gr-exam-q-pad-cell[data-part="4"] { border-color: rgba(5,150,105,.30); }
.gr-exam-q-pad-cell[data-part="1"]:hover { color: var(--gr-violet); border-color: var(--gr-violet); }
.gr-exam-q-pad-cell[data-part="2"]:hover { color: var(--gr-teal);   border-color: var(--gr-teal); }
.gr-exam-q-pad-cell[data-part="3"]:hover { color: var(--gr-amber);  border-color: var(--gr-amber); }
.gr-exam-q-pad-cell[data-part="4"]:hover { color: var(--gr-green);  border-color: var(--gr-green); }

/* Mobile — pill stacks above cells */
@media (max-width: 640px) {
    .gr-exam-q-pad-line { flex-direction: column; gap: 8px; }
    .gr-exam-q-pad-line-pill { width: 100%; flex-direction: row; gap: 6px; padding: 6px 10px; }
}

.ae-dark-mode .gr-exam-q-pad--rows {
    background: rgba(15,23,42,.6);
    border-color: rgba(255,255,255,.08);
}
.ae-dark-mode .gr-exam-q-pad-legend-top {
    color: #94A3B8;
    border-bottom-color: rgba(255,255,255,.10);
}
.ae-dark-mode .gr-exam-q-pad-mini {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.20);
}
.ae-dark-mode .gr-exam-q-pad-mini.is-answered {
    background: rgba(34,211,238,.20);
    border-color: rgba(34,211,238,.50);
}
.ae-dark-mode .gr-exam-q-pad-line {
    border-bottom-color: rgba(255,255,255,.06);
}
/* Cells in dark mode */
.ae-dark-mode .gr-exam-q-pad-cell {
    background: rgba(255,255,255,.04);
    color: #CBD5E1;
    border-color: rgba(255,255,255,.12);
}
.ae-dark-mode .gr-exam-q-pad-cell:hover {
    background: rgba(255,255,255,.08);
}
.ae-dark-mode .gr-exam-q-pad-cell.is-answered {
    background: rgba(34,211,238,.20) !important;
    border-color: rgba(34,211,238,.55) !important;
    color: #67E8F9 !important;
}
.ae-dark-mode .gr-exam-q-pad-cell.is-current {
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal-mid) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 2px rgba(167,139,250,.45), 0 4px 10px rgba(124,58,237,.40);
}
.ae-dark-mode .gr-exam-q-pad-line-pill {
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
}
.ae-dark-mode .gr-exam-q-pad-line-pill.is-current-part {
    box-shadow: 0 0 0 3px rgba(167,139,250,.40), 0 6px 16px -4px rgba(0,0,0,.5);
}

/* ── Old inline pad (with sectioned groups) — kept for reference ── */
.gr-exam-q-pad--inline {
    background: var(--gr-gray-50);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 24px;
    border: 1px solid var(--gr-gray-200);
}
.gr-exam-q-pad-legend {
    display: flex;
    gap: 18px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--gr-gray-300);
    font-size: 12px;
    color: var(--gr-gray-600);
    flex-wrap: wrap;
}
.gr-exam-q-pad-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gr-exam-q-pad-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}
.gr-exam-q-pad-group {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--gr-white);
    border-radius: 10px;
    border: 1.5px solid transparent;
    border-left-width: 4px;
}
.gr-exam-q-pad-group[data-part="1"] { border-left-color: var(--gr-violet); }
.gr-exam-q-pad-group[data-part="2"] { border-left-color: var(--gr-teal); }
.gr-exam-q-pad-group[data-part="3"] { border-left-color: var(--gr-amber); }
.gr-exam-q-pad-group[data-part="4"] { border-left-color: var(--gr-green); }

.gr-exam-q-pad-group-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}
.gr-exam-q-pad-group-pill {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gr-gray-700);
}
.gr-exam-q-pad-group-count {
    font-size: 11px;
    color: var(--gr-gray-500);
}
.gr-exam-q-pad-cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 5px;
}

@media (max-width: 600px) {
    .gr-exam-q-pad-flow { flex-direction: column; gap: 10px; }
    .gr-exam-q-pad-group { width: 100%; }
}

/* Cell styling (used by both old + new pads) */
.gr-exam-q-pad-cell {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--gr-gray-300);
    background: var(--gr-white);
    color: var(--gr-gray-700);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gr-exam-q-pad-cell:hover {
    border-color: var(--gr-violet);
    color: var(--gr-violet);
}
.gr-exam-q-pad-cell.is-answered {
    background: var(--gr-teal-lt);
    border-color: var(--gr-teal-mid);
    color: var(--gr-teal-dk);
}
.gr-exam-q-pad-cell.is-current {
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(124,58,237,.4);
}

/* ── Review-mode loading placeholder (prevents setup-screen flash) ── */
.gr-exam-review-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 80px 40px;
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border-radius: 16px;
    margin: 24px 0;
    text-align: center;
    min-height: 320px;
}
.gr-exam-review-loading-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(124,58,237,.20);
    border-top-color: var(--gr-violet);
    border-radius: 50%;
    animation: gr-spin 1s linear infinite;
}
.gr-exam-review-loading p {
    margin: 0;
    color: var(--gr-violet);
    font-size: 15px;
    font-weight: 600;
}
@keyframes gr-spin {
    to { transform: rotate(360deg); }
}
.ae-dark-mode .gr-exam-review-loading {
    background: linear-gradient(135deg, rgba(124,58,237,.12) 0%, rgba(34,211,238,.12) 100%);
}
.ae-dark-mode .gr-exam-review-loading p { color: #C4B5FD; }

.gr-exam-review-error {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
    padding: 48px 32px; margin: 24px 0;
    background: linear-gradient(135deg, var(--gr-red-lt) 0%, #FFF5F5 100%);
    border: 1px solid rgba(239,68,68,.25); border-radius: 16px; box-shadow: var(--gr-shadow-md);
}
.gr-exam-review-error-icon { font-size: 40px; line-height: 1; }
.gr-exam-review-error h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--gr-gray-900); }
.gr-exam-review-error p { margin: 0; max-width: 520px; color: var(--gr-gray-700); line-height: 1.55; }
.gr-exam-review-error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.ae-dark-mode .gr-exam-review-error {
    background: linear-gradient(135deg, rgba(239,68,68,.12) 0%, rgba(15,23,42,.85) 100%);
    border-color: rgba(239,68,68,.35);
}
.ae-dark-mode .gr-exam-review-error h2 { color: #F8FAFC; }
.ae-dark-mode .gr-exam-review-error p { color: #CBD5E1; }

/* ── Review banner shown above exam UI in review mode ── */
.gr-exam-review-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 8px 22px -6px rgba(124,58,237,.35);
}
.gr-exam-review-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.gr-exam-review-banner-icon svg {
    width: 22px;
    height: 22px;
}
.gr-exam-review-banner-text {
    flex: 1;
    line-height: 1.4;
}
.gr-exam-review-banner-text strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
}
.gr-exam-review-banner-text span {
    font-size: 13px;
    opacity: .92;
}
.gr-exam-review-banner-text code {
    background: rgba(255,255,255,.20);
    padding: 1px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, monospace;
    font-weight: 600;
}
.gr-exam-review-banner-back {
    flex-shrink: 0;
    padding: 8px 18px;
    background: rgba(255,255,255,.20);
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 13px;
    transition: background .15s ease;
}
.gr-exam-review-banner-back:hover {
    background: rgba(255,255,255,.32);
}

/* Review mode option states */
.gr-exam-q-opt.is-correct {
    background: linear-gradient(135deg, var(--gr-green-lt) 0%, #ECFCCB 100%);
    border-color: var(--gr-green);
    color: var(--gr-green);
    font-weight: 700;
}
.gr-exam-q-opt.is-correct .gr-exam-q-opt-letter {
    background: var(--gr-green);
    color: #fff;
    border-color: var(--gr-green);
}
.gr-exam-q-opt.is-user-wrong {
    background: var(--gr-red-lt);
    border-color: var(--gr-red);
    color: var(--gr-red);
    font-weight: 700;
}
.gr-exam-q-opt.is-user-wrong .gr-exam-q-opt-letter {
    background: var(--gr-red);
    color: #fff;
    border-color: var(--gr-red);
}
.gr-exam-q-opt.is-locked {
    cursor: default;
}
.gr-exam-q-opt.is-locked:hover {
    transform: none;
}
.gr-exam-q-opt-mark {
    margin-left: auto;
    font-size: 18px;
    font-weight: 800;
}
.gr-exam-q-explain {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--gr-amber-lt);
    color: var(--gr-gray-900);
    border-left: 3px solid var(--gr-amber);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
}
.gr-exam-q-explain strong { color: var(--gr-amber); margin-right: 6px; }

.ae-dark-mode .gr-exam-q-opt.is-correct {
    background: rgba(16,185,129,.18);
    color: #6EE7B7;
}
.ae-dark-mode .gr-exam-q-opt.is-user-wrong {
    background: rgba(239,68,68,.18);
    color: #FCA5A5;
}
.ae-dark-mode .gr-exam-q-explain {
    background: rgba(245,158,11,.12);
    color: #F8FAFC;
}

/* Kết thúc / abandon button in top bar */
.gr-exam-bar-abandon {
    background: transparent;
    border: 1px solid var(--gr-red);
    color: var(--gr-red);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}
.gr-exam-bar-abandon:hover {
    background: var(--gr-red-lt);
}

/* Dark mode */
.ae-dark-mode .gr-exam-q-pad--inline,
.ae-dark-mode .gr-exam-q-pad-group {
    background: rgba(15,23,42,.6);
    border-color: rgba(255,255,255,.08);
}
.ae-dark-mode .gr-exam-q-pad-cell {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    color: #CBD5E1;
}
.ae-dark-mode .gr-exam-q-pad-group-pill { color: #CBD5E1; }
.ae-dark-mode .gr-exam-q-pad-cell.is-answered {
    background: rgba(34,211,238,.18);
    border-color: rgba(34,211,238,.40);
    color: #67E8F9;
}

/* ── Result screen header ── */
.gr-exam-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--gr-gray-200);
}
.gr-exam-result-head h2 {
    margin: 0;
    font-size: 22px;
}
.gr-exam-result-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 14px;
    box-shadow: 0 8px 20px -6px rgba(124,58,237,.4);
}
.gr-exam-result-score-num {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}
.gr-exam-result-score-max {
    font-size: 16px;
    opacity: .85;
}

/* ── Per-part stats bars (result screen) ── */
.gr-exam-part-stats {
    margin: 24px 0;
    padding: 18px;
    background: var(--gr-gray-50);
    border-radius: 12px;
}
.gr-exam-part-stats h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gr-gray-900);
}
.gr-exam-part-stat {
    display: grid;
    grid-template-columns: 220px 1fr 70px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}
@media (max-width: 600px) {
    .gr-exam-part-stat { grid-template-columns: 1fr 60px; }
    .gr-exam-part-stat-label { grid-column: 1 / -1; }
}
.gr-exam-part-stat-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
.gr-exam-part-stat-label strong {
    color: var(--gr-violet);
    font-weight: 700;
}
.gr-exam-part-stat-label span {
    color: var(--gr-gray-700);
    font-size: 12px;
}
.gr-exam-part-stat-bar {
    height: 10px;
    background: var(--gr-gray-200);
    border-radius: 999px;
    overflow: hidden;
}
.gr-exam-part-stat-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}
.gr-exam-part-stat-num {
    text-align: right;
    font-weight: 700;
    color: var(--gr-gray-900);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ── Review screen ── */
.gr-exam-review-part {
    margin-bottom: 32px;
}
.gr-exam-review-part-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gr-violet-lt);
}
.gr-exam-part-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-exam-review-items {
    background: var(--gr-gray-50);
    border-left: 3px solid var(--gr-gray-300);
    border-radius: 6px;
    padding: 10px 10px 10px 32px;
    margin: 8px 0;
    list-style: lower-alpha;
    font-size: 12px;
}
.gr-exam-review-items li { padding: 2px 0; }

/* Dark mode parts */
.ae-dark-mode .gr-exam-part-header,
.ae-dark-mode .gr-exam-q-pad,
.ae-dark-mode .gr-exam-part-stats,
.ae-dark-mode .gr-exam-q-items,
.ae-dark-mode .gr-exam-review-items {
    background: rgba(255,255,255,.04);
}
.ae-dark-mode .gr-exam-part-pill {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
}
.ae-dark-mode .gr-exam-part-pill span { color: #E2E8F0; }
.ae-dark-mode .gr-exam-passage {
    background: linear-gradient(135deg, rgba(245,158,11,.10) 0%, rgba(245,158,11,.04) 100%);
    color: #F8FAFC;
}
.ae-dark-mode .gr-exam-passage h4,
.ae-dark-mode .gr-exam-passage-text { color: #F8FAFC; }
.ae-dark-mode .gr-exam-part-title { color: #F8FAFC; }
.ae-dark-mode .gr-exam-part-instr { color: #94A3B8; }
.ae-dark-mode .gr-exam-q-items li,
.ae-dark-mode .gr-exam-part-stat-num { color: #F8FAFC; }

/* ═══════════════════════════════════════════════════════════
   THPT EXAM — 2-PANEL SPLIT (passage LEFT, question RIGHT)
   Inspired by IELTS exam interface. Stacks on mobile.
   ═══════════════════════════════════════════════════════════ */
.gr-exam-active--split {
    background: var(--gr-white);
    border-radius: 16px;
    box-shadow: var(--gr-shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gr-exam-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 600px;
    border-top: 1px solid var(--gr-gray-200);
}
.gr-exam-split-left {
    padding: 24px 28px;
    background: linear-gradient(180deg, var(--gr-gray-50) 0%, #FCFCFD 100%);
    border-right: 1px solid var(--gr-gray-200);
    overflow-y: auto;
    max-height: calc(100vh - 240px);
}
.gr-exam-split-right {
    padding: 24px 28px;
    background: var(--gr-white);
    overflow-y: auto;
    max-height: calc(100vh - 240px);
}
.gr-exam-split-left.is-empty { background: var(--gr-gray-50); }
.gr-exam-split-left-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--gr-gray-500);
    padding: 40px 20px;
}
.gr-exam-split-left-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: .5;
}
.gr-exam-split-left-empty p {
    font-size: 14px;
    max-width: 280px;
    line-height: 1.6;
}
.gr-exam-ordering-panel {
    background: var(--gr-violet-lt);
    border-left: 4px solid var(--gr-violet);
    border-radius: 8px;
    padding: 16px 18px;
}
.gr-exam-ordering-panel .gr-exam-passage-kind {
    background: var(--gr-violet);
    margin-bottom: 12px;
}
.gr-exam-ordering-panel .gr-exam-q-items {
    margin: 0;
}

/* Inline submit-row at bottom of right panel (always visible, mobile-friendly) */
.gr-exam-q-submit-row {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--gr-gray-300);
    display: flex;
    justify-content: center;
}
.gr-exam-btn-submit-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--gr-amber) 0%, #D97706 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 18px -4px rgba(245,158,11,.45);
    transition: all .18s ease;
}
.gr-exam-btn-submit-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(245,158,11,.6);
}

/* Focus mode toggle button */
.gr-exam-bar-focus {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--gr-gray-300);
    background: var(--gr-white);
    color: var(--gr-gray-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
.gr-exam-bar-focus:hover {
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    border-color: var(--gr-violet);
}
.gr-exam-bar-focus svg { width: 16px; height: 16px; }

/* Focus mode — hide sidebar globally + expand exam to full width */
body.gr-exam-focus-mode .gr-sidebar { display: none !important; }
body.gr-exam-focus-mode .gr-main { margin-left: 0 !important; }
body.gr-exam-focus-mode .gr-exam-page { max-width: none; padding: 16px 24px 32px; }
body.gr-exam-focus-mode .gr-mobile-bar { display: none !important; }

/* Mobile — stack panels */
@media (max-width: 900px) {
    .gr-exam-split { grid-template-columns: 1fr; }
    .gr-exam-split-left {
        border-right: none;
        border-bottom: 2px dashed var(--gr-gray-300);
        max-height: 50vh;
    }
    .gr-exam-split-right { max-height: none; }
}

/* Make sure option click area is large + responsive */
.gr-exam-q-opt {
    width: 100%;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.gr-exam-q-opt-text {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

/* Dark mode for split panels */
.ae-dark-mode .gr-exam-split-left,
.ae-dark-mode .gr-exam-split-right {
    background: rgba(15,23,42,.85);
    color: #E2E8F0;
}
.ae-dark-mode .gr-exam-split-left {
    background: linear-gradient(180deg, rgba(15,23,42,.95) 0%, rgba(15,23,42,.80) 100%);
    border-right-color: rgba(255,255,255,.08);
}
.ae-dark-mode .gr-exam-split { border-top-color: rgba(255,255,255,.08); }
.ae-dark-mode .gr-exam-split-left-empty p { color: #94A3B8; }
.ae-dark-mode .gr-exam-bar-focus {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    color: #CBD5E1;
}

/* ═══════════════════════════════════════════════════════════
   Active exam UI (legacy — kept for backward-compat)
   ═══════════════════════════════════════════════════════════ */
.gr-exam-active {
    background: var(--gr-white);
    border-radius: 16px;
    box-shadow: var(--gr-shadow-md);
    overflow: hidden;
}
.gr-exam-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--gr-gray-50);
    border-bottom: 1px solid var(--gr-gray-200);
}
.gr-exam-bar-progress { flex: 1; }
.gr-exam-bar-num {
    display: block;
    font-size: 12px;
    color: var(--gr-gray-500);
    font-weight: 600;
    margin-bottom: 4px;
}
.ae-dark-mode .gr-exam-bar-num,
.ae-dark-mode .gr-exam-bar-num strong {
    color: #E2E8F0 !important;
    text-shadow: none !important;
}
.ae-dark-mode .gr-exam-q-num {
    color: #C4B5FD !important;
    background: rgba(124, 58, 237, 0.22) !important;
}
.gr-exam-bar-track {
    height: 6px;
    background: var(--gr-gray-200);
    border-radius: 999px;
    overflow: hidden;
}
.gr-exam-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    transition: width .3s ease;
}
.gr-exam-bar-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.gr-exam-bar-timer svg { width: 14px; height: 14px; }
.gr-exam-bar-timer .is-warning { color: var(--gr-red); }
.gr-exam-bar-submit {
    padding: 9px 22px;
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #fff !important;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: .02em;
    box-shadow: 0 4px 12px -2px rgba(5,150,105,.40), inset 0 -1px 0 rgba(0,0,0,.10);
    transition: transform .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gr-exam-bar-submit:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(5,150,105,.55), inset 0 -1px 0 rgba(0,0,0,.10);
}
.gr-exam-bar-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px -2px rgba(5,150,105,.45), inset 0 1px 2px rgba(0,0,0,.15);
}

.gr-exam-question {
    padding: 32px;
}
.gr-exam-q-num {
    display: inline-block;
    padding: 4px 10px;
    background: var(--gr-violet-lt);
    color: var(--gr-violet);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}
.gr-exam-q-instruction {
    color: var(--gr-gray-500);
    font-size: 13px;
    margin: 0 0 8px;
}
.gr-exam-q-prompt {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gr-gray-900);
}
.gr-exam-q-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.gr-exam-q-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--gr-gray-50);
    border: 1.5px solid var(--gr-gray-200);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    transition: all .14s ease;
    color: var(--gr-gray-900);
}
.gr-exam-q-opt:hover {
    background: var(--gr-violet-lt);
    border-color: var(--gr-violet);
}
.gr-exam-q-opt.is-selected {
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border-color: var(--gr-violet);
    box-shadow: 0 4px 12px -4px rgba(124,58,237,.35);
}
.gr-exam-q-opt-letter {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--gr-violet);
}
.gr-exam-q-opt.is-selected .gr-exam-q-opt-letter {
    background: var(--gr-violet);
    color: #fff;
    border-color: var(--gr-violet);
}
.gr-exam-q-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 8px;
    padding-top: 16px;
    border-top: 1px dashed var(--gr-gray-200);
    gap: 12px;
    flex-wrap: wrap;
}
.gr-exam-q-nav .gr-exam-btn {
    flex-shrink: 0;
    min-width: 130px;
    justify-content: center;
}
.ae-dark-mode .gr-exam-q-nav { border-top-color: rgba(255,255,255,.10); }
.gr-exam-btn {
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid transparent;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.gr-exam-btn:disabled { opacity: .4; cursor: not-allowed; }
.gr-exam-btn-primary {
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
}
.gr-exam-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(124,58,237,.4);
}
.gr-exam-btn-secondary {
    background: var(--gr-gray-100);
    color: var(--gr-gray-700);
    border-color: var(--gr-gray-200);
}
.gr-exam-btn-secondary:hover:not(:disabled) {
    background: var(--gr-gray-200);
}

/* Question pad — jump to any */
.gr-exam-q-pad {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 6px;
    padding: 16px;
    background: var(--gr-gray-50);
    border-radius: 12px;
    border: 1px dashed var(--gr-gray-300);
}
.gr-exam-q-pad-cell {
    aspect-ratio: 1;
    background: #fff;
    border: 1.5px solid var(--gr-gray-200);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--gr-gray-500);
    transition: all .12s ease;
}
.gr-exam-q-pad-cell:hover { background: var(--gr-violet-lt); }
.gr-exam-q-pad-cell.is-answered {
    background: var(--gr-teal-lt);
    color: var(--gr-teal-dk);
    border-color: var(--gr-teal-mid);
}
.gr-exam-q-pad-cell.is-current {
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    color: #fff;
    border-color: var(--gr-violet);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(124,58,237,.3);
}

/* Result screen */
.gr-exam-result {
    background: var(--gr-white);
    border: 1px solid var(--gr-gray-200);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--gr-shadow-md);
}
.gr-exam-result h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 800;
}
.gr-exam-result-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
@media (max-width: 768px) {
    .gr-exam-result-stats { grid-template-columns: repeat(2, 1fr); }
}
.gr-exam-stat {
    background: var(--gr-gray-50);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--gr-gray-200);
}
.gr-exam-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--gr-gray-900);
    line-height: 1.1;
}
.gr-exam-stat-label {
    font-size: 11px;
    color: var(--gr-gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}
.gr-exam-stat--score {
    background: linear-gradient(135deg, var(--gr-violet-lt) 0%, var(--gr-teal-lt) 100%);
    border-color: var(--gr-violet);
}
.gr-exam-stat--score .gr-exam-stat-value {
    background: linear-gradient(90deg, var(--gr-violet) 0%, var(--gr-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gr-exam-stat--ok    { background: var(--gr-green-lt); border-color: var(--gr-green); }
.gr-exam-stat--ok    .gr-exam-stat-value { color: var(--gr-green); }
.gr-exam-stat--bad   { background: var(--gr-red-lt);   border-color: var(--gr-red); }
.gr-exam-stat--bad   .gr-exam-stat-value { color: var(--gr-red); }

.gr-exam-review {
    margin-bottom: 24px;
}
.gr-exam-review h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
}
.gr-exam-review-item {
    background: var(--gr-gray-50);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid var(--gr-gray-300);
}
.gr-exam-review-item.is-ok  { border-left-color: var(--gr-green); }
.gr-exam-review-item.is-bad { border-left-color: var(--gr-red); }
.gr-exam-review-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.gr-exam-review-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--gr-gray-500);
}
.gr-exam-review-mark {
    font-size: 16px;
    font-weight: 800;
}
.gr-exam-review-item.is-ok  .gr-exam-review-mark { color: var(--gr-green); }
.gr-exam-review-item.is-bad .gr-exam-review-mark { color: var(--gr-red); }
.gr-exam-review-prompt {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--gr-gray-900);
    font-weight: 500;
}
.gr-exam-review-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.gr-exam-review-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--gr-white);
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid transparent;
}
.gr-exam-review-opt.is-correct {
    background: var(--gr-green-lt);
    border-color: var(--gr-green);
    color: var(--gr-green);
    font-weight: 600;
}
.gr-exam-review-opt.is-user-wrong {
    background: var(--gr-red-lt);
    border-color: var(--gr-red);
    color: var(--gr-red);
    font-weight: 600;
    text-decoration: line-through;
}
.gr-exam-review-opt-letter {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
    border: 1px solid currentColor;
}
.gr-exam-review-explain {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: var(--gr-amber-lt);
    color: var(--gr-amber);
    border-radius: 6px;
    font-size: 12px;
}

.gr-exam-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.gr-exam-actions .gr-exam-btn {
    padding: 12px 24px;
    font-size: 14px;
}

/* Dark mode for exam */
.ae-dark-mode .gr-exam-setup,
.ae-dark-mode .gr-exam-active,
.ae-dark-mode .gr-exam-result {
    background: rgba(15,23,42,.85);
    border-color: rgba(255,255,255,.08);
    color: #E2E8F0;
}
.ae-dark-mode .gr-exam-q-opt,
.ae-dark-mode .gr-exam-stat,
.ae-dark-mode .gr-exam-q-pad,
.ae-dark-mode .gr-exam-review-item,
.ae-dark-mode .gr-exam-bar {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    color: #E2E8F0;
}
.ae-dark-mode .gr-exam-q-prompt,
.ae-dark-mode .gr-exam-stat-value,
.ae-dark-mode .gr-exam-review-prompt,
.ae-dark-mode .gr-exam-result h2 { color: #F8FAFC; }
.ae-dark-mode .gr-exam-result-score-num {
    color: #fff !important;
    text-shadow: none !important;
}
.ae-dark-mode .gr-exam-result-score-max {
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important;
}
.ae-dark-mode .gr-exam-q-opt-letter,
.ae-dark-mode .gr-exam-q-pad-cell { background: rgba(255,255,255,.06); color: #CBD5E1; }
.ae-dark-mode .gr-exam-bar-submit {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 4px 14px -2px rgba(16,185,129,.50);
}
.ae-dark-mode .gr-exam-bar-submit:hover {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
}

/* ═══════════════════════════════════════════════════════════
   CEFR DIFFICULTY SELECTOR (premium)
   Sits next to "Giảng bài" — opens a 6-chip popover (A1–C2).
   ═══════════════════════════════════════════════════════════ */
.gr-cefr-wrap {
    position: relative;
    display: inline-flex;
}
.gr-btn-cefr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(8,145,178,.30);
    transition: all .18s ease;
    font-weight: 600;
    line-height: 1;
}
.gr-btn-cefr:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(8,145,178,.45);
    background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
}
.gr-btn-cefr.is-active {
    background: linear-gradient(135deg, #0E7490 0%, #155E75 100%);
    box-shadow: 0 6px 18px rgba(8,145,178,.55), inset 0 0 0 2px rgba(255,255,255,.2);
}
.gr-btn-cefr.is-locked {
    background: linear-gradient(135deg, #94A3B8 0%, #64748B 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
    opacity: .85;
}
.gr-btn-cefr.is-locked:hover {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
}
.gr-btn-cefr svg { width: 14px; height: 14px; flex-shrink: 0; }
.gr-btn-cefr strong { font-weight: 800; letter-spacing: .02em; }
.gr-btn-cefr .gr-btn-lock-icon {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    opacity: .85;
}

.gr-cefr-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    min-width: 320px;
    background: #fff;
    border: 1px solid var(--gr-gray-200);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.08);
    padding: 14px;
}
.gr-cefr-head {
    margin-bottom: 10px;
}
.gr-cefr-head strong {
    display: block;
    font-size: 14px;
    color: var(--gr-gray-900);
}
.gr-cefr-head small {
    color: var(--gr-gray-500);
    font-size: 12px;
}
.gr-cefr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.gr-cefr-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    background: var(--gr-gray-50);
    border: 1.5px solid var(--gr-gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    position: relative;
}
.gr-cefr-chip:hover:not(:disabled) {
    background: var(--gr-teal-lt);
    border-color: var(--gr-teal-mid);
    transform: translateY(-1px);
}
.gr-cefr-chip:disabled { opacity: .5; cursor: wait; }
.gr-cefr-chip.is-current {
    background: linear-gradient(135deg, var(--gr-teal) 0%, var(--gr-teal-mid) 100%);
    color: #fff;
    border-color: var(--gr-teal);
}
.gr-cefr-chip.is-loading { background: var(--gr-amber-lt); }
.gr-cefr-chip-lv {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
}
.gr-cefr-chip-label {
    font-size: 10px;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gr-cefr-spinner {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    color: var(--gr-amber);
    animation: gr-cefr-spin .8s linear infinite;
}
@keyframes gr-cefr-spin {
    to { transform: rotate(360deg); }
}
.gr-cefr-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--gr-gray-200);
}
.gr-cefr-reset {
    padding: 6px 14px;
    font-size: 12px;
    background: var(--gr-gray-100);
    border: 1px solid var(--gr-gray-200);
    border-radius: 999px;
    color: var(--gr-gray-700);
    cursor: pointer;
    transition: all .15s ease;
}
.gr-cefr-reset:hover {
    background: var(--gr-gray-200);
    color: var(--gr-gray-900);
}
.gr-cefr-foot {
    margin: 10px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    background: var(--gr-red-lt);
    color: var(--gr-red);
    border-radius: 6px;
    text-align: center;
}

/* Floating toast for CEFR swap confirm */
.gr-cefr-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--gr-gray-900);
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 99999;
}
.gr-cefr-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.gr-cefr-toast.is-success {
    background: linear-gradient(135deg, var(--gr-teal) 0%, var(--gr-teal-mid) 100%);
}
.gr-cefr-toast.is-info {
    background: linear-gradient(135deg, var(--gr-violet) 0%, var(--gr-violet-mid) 100%);
}
.gr-cefr-toast.is-error {
    background: var(--gr-red);
}

/* Dark mode */
.ae-dark-mode .gr-cefr-popover {
    background: #1E293B;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 12px 36px rgba(0,0,0,.6);
}
.ae-dark-mode .gr-cefr-head strong { color: #F8FAFC; }
.ae-dark-mode .gr-cefr-head small  { color: #94A3B8; }
.ae-dark-mode .gr-cefr-chip {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    color: #E2E8F0;
}
.ae-dark-mode .gr-cefr-chip:hover:not(:disabled) {
    background: rgba(34,211,238,.14);
    border-color: rgba(34,211,238,.50);
}
.ae-dark-mode .gr-cefr-reset {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    color: #CBD5E1;
}

/* ═══════════════════════════════════════════════════════════
   PRESENTATION MODE — fullscreen slide lecture player
   ═══════════════════════════════════════════════════════════ */
.gr-btn-presentation {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #fff;
    border-color: transparent;
    padding: 8px 16px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(245,158,11,.30);
}
.gr-btn-presentation:hover {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(245,158,11,.45);
    transform: translateY(-1px);
}
.gr-btn-presentation svg { width: 14px; height: 14px; }

.gr-presentation {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(124,58,237,.45) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(8,145,178,.35) 0%, transparent 55%),
        linear-gradient(180deg, #0F0E2C 0%, #1A1B3A 50%, #0F1B3D 100%);
    color: #fff;
    display: none; /* hidden by default */
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    transition: opacity .25s ease;
}
.gr-presentation.is-open {
    display: flex;
    opacity: 1;
}

/* Animated orbs in background */
.gr-pres-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gr-pres-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    animation: gr-pres-float 20s ease-in-out infinite;
}
.gr-pres-orb--1 { width: 480px; height: 480px; top: -100px; left: -100px;  background: #7C3AED; }
.gr-pres-orb--2 { width: 380px; height: 380px; bottom: -80px; right: -50px; background: #06B6D4; animation-delay: -7s; animation-duration: 25s; }
.gr-pres-orb--3 { width: 280px; height: 280px; top: 40%; left: 60%;        background: #FBBF24; animation-delay: -14s; opacity: .18; }
@keyframes gr-pres-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.06); }
    66%      { transform: translate(-30px, 30px) scale(.96); }
}

/* Top progress dots */
.gr-pres-progress {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 22px 80px 8px;
    flex-wrap: wrap;
}
.gr-pres-progress-dot {
    flex: 1;
    height: 4px;
    min-width: 16px;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: all .25s;
}
.gr-pres-progress-dot:hover  { background: rgba(255,255,255,.30); }
.gr-pres-progress-dot.is-active   { background: #FBBF24; box-shadow: 0 0 12px rgba(251,191,36,.55); }
.gr-pres-progress-dot.is-visited  { background: rgba(251,191,36,.50); }

/* Close (X) button */
.gr-pres-close {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 5;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    transition: all .2s;
}
.gr-pres-close:hover { background: rgba(255,255,255,.20); transform: rotate(90deg); }
.gr-pres-close svg { width: 18px; height: 18px; }

/* Stage — center area where slide content sits */
.gr-pres-stage {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
    min-height: 0;
}

.gr-pres-slide {
    text-align: center;
    max-width: 1200px;
    width: 100%;
    animation: gr-pres-slide-in .6s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
@keyframes gr-pres-slide-in {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gr-pres-slide-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.70);
    padding: 6px 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    margin: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
.gr-pres-slide-title {
    font-size: clamp(38px, 5.5vw, 64px);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin: 0;
    max-width: 1100px;
    background: linear-gradient(135deg, #FBBF24 0%, #FCD34D 50%, #F59E0B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 8px 24px rgba(251,191,36,.20));
}
.gr-pres-slide-body {
    font-size: clamp(17px, 1.5vw, 21px);
    color: rgba(255,255,255,.88);
    line-height: 1.75;
    max-width: 880px;
    width: 100%;
    margin: 0;
    /* Justify-like rhythm: keep each para readable, never let last line orphan */
    text-wrap: pretty;
    text-align: center;
}
.gr-pres-slide-body p { margin: 0 0 16px; }
.gr-pres-slide-body p:last-child { margin-bottom: 0; }
.gr-pres-slide-body strong { color: #FCD34D; font-weight: 700; }

/* Lead-in line before a numbered list */
.gr-pres-slide-body .gr-pres-lead {
    margin-bottom: 18px;
    font-size: clamp(18px, 1.6vw, 22px);
    color: rgba(255,255,255,.92);
    font-weight: 500;
}
.gr-pres-slide-body .gr-pres-tail {
    margin-top: 18px;
    color: rgba(255,255,255,.78);
    font-size: clamp(15px, 1.4vw, 19px);
    font-style: italic;
}

/* Numbered/bulleted list — generous line spacing on dark slide */
.gr-pres-slide-body .gr-pres-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.gr-pres-slide-body .gr-pres-list li {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 14px 22px;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.55;
    color: rgba(255,255,255,.90);
    backdrop-filter: blur(4px);
    transition: background .25s;
}
.gr-pres-slide-body .gr-pres-list li:hover {
    background: rgba(255,255,255,.08);
}
.gr-pres-list-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: 800;
    color: #FCD34D;
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.35);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 13px;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.gr-pres-slide-status {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.70);
    font-size: 14px;
    padding: 10px 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
}

/* Bottom controls — pills + transport, generous spacing */
.gr-pres-controls {
    position: relative;
    z-index: 2;
    padding: 0 80px 28px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.40) 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gr-pres-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 18px 0 4px;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    justify-content: center;
}
.gr-pres-pills::-webkit-scrollbar { height: 4px; }
.gr-pres-pills::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); border-radius: 2px; }
.gr-pres-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.75);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    max-width: 200px;
    transition: all .2s;
    backdrop-filter: blur(6px);
}
.gr-pres-pill:hover { background: rgba(255,255,255,.16); color: #fff; }
.gr-pres-pill.is-active {
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(124,58,237,.40);
}
.gr-pres-pill-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.gr-pres-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gr-pres-transport {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    padding-top: 4px;
}
.gr-pres-time {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.70);
    font-variant-numeric: tabular-nums;
    text-align: left;
    letter-spacing: .04em;
}
.gr-pres-transport-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}
.gr-pres-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
    backdrop-filter: blur(8px);
}
.gr-pres-btn svg { width: 18px; height: 18px; }
.gr-pres-btn:hover:not(:disabled) { background: rgba(255,255,255,.20); transform: scale(1.06); }
.gr-pres-btn:disabled { opacity: .3; cursor: not-allowed; }
.gr-pres-btn-play {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    border-color: #F59E0B;
    box-shadow: 0 6px 20px rgba(245,158,11,.45);
}
.gr-pres-btn-play:hover:not(:disabled) {
    background: linear-gradient(135deg, #FCD34D, #FBBF24);
    transform: scale(1.08);
    box-shadow: 0 8px 26px rgba(245,158,11,.60);
}
.gr-pres-btn-play svg { width: 22px; height: 22px; color: #1F1B0F; }

.gr-pres-autoplay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.78);
    cursor: pointer;
    justify-self: end;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    transition: background .2s;
}
.gr-pres-autoplay:hover { background: rgba(255,255,255,.12); }
.gr-pres-autoplay input { accent-color: #FBBF24; cursor: pointer; }

.gr-pres-hints {
    text-align: center;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255,255,255,.50);
    letter-spacing: .04em;
}
.gr-pres-hints kbd {
    display: inline-block;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    padding: 2px 8px;
    margin: 0 2px;
    font-size: 10px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: rgba(255,255,255,.85);
}

.gr-pres-watermark {
    position: absolute;
    bottom: 12px; right: 24px;
    font-size: 10px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.30);
    text-transform: uppercase;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 700px) {
    .gr-pres-progress { padding: 12px 20px 0; }
    .gr-pres-stage { padding: 16px 16px; box-sizing: border-box; overflow-x: hidden; }
    .gr-pres-slide { gap: 20px; box-sizing: border-box; max-width: 100%; padding: 0; }
    .gr-pres-slide-title { font-size: clamp(24px, 8vw, 32px) !important; line-height: 1.25; word-wrap: break-word; overflow-wrap: break-word; padding: 0 4px; }
    .gr-pres-slide-body { font-size: 15px !important; line-height: 1.6; padding: 0 8px; box-sizing: border-box; }
    .gr-pres-slide-body .gr-pres-lead { font-size: 16px !important; margin-bottom: 12px; }
    .gr-pres-slide-body .gr-pres-list { gap: 10px; max-width: 100%; box-sizing: border-box; }
    .gr-pres-slide-body .gr-pres-list li { font-size: 14.5px !important; padding: 12px 14px; margin: 0; box-sizing: border-box; }
    .gr-pres-controls { padding: 0 16px 16px; box-sizing: border-box; max-width: 100%; }
    .gr-pres-pill { font-size: 11.5px; padding: 6px 10px; }
    .gr-pres-pill-label { max-width: 90px; }
    .gr-pres-transport { gap: 12px; justify-content: center; }
    .gr-pres-time { min-width: 0; flex: 1 0 100%; text-align: center; order: -1; }
    .gr-pres-autoplay { flex: 1 0 100%; justify-content: center; order: 5; }
    .gr-pres-hints { font-size: 10px; }
    .gr-pres-close { top: 12px; right: 12px; width: 34px; height: 34px; }
    .gr-pres-close svg { width: 16px; height: 16px; }
    .gr-pres-slide-tag { padding: 4px 14px; font-size: 10px; margin-bottom: -10px; }
}

/* ── Lesson view responsive ── */
@media (max-width: 1024px) {
    .gr-lesson-split { grid-template-columns: 1fr; }
    .gr-lesson-page.is-theory-hidden { max-width: 100%; }
    .gr-lesson-exercises {
        position: static;
        max-height: none;
        min-height: 0;
    }
    /* FIX: list KHÔNG cap chiều cao (overflow:visible) — nếu cap 600px thì câu hỏi
       tràn ra ngoài hộp còn toolbar bị đặt ở mốc 600px -> đè lên giữa các câu (iOS/mobile). */
    .gr-exercises-list { max-height: none; }
    .gr-lesson-page { padding: 14px 16px 60px; box-sizing: border-box; overflow-x: hidden; max-width: 100vw; }
}
@media (max-width: 600px) {
    .gr-lesson-theory { padding: 18px 16px; box-sizing: border-box; max-width: 100%; overflow-x: hidden; }
    .gr-lesson-topbar { 
        display: grid; 
        grid-template-columns: auto 1fr; 
        gap: 12px 10px; 
        padding: 12px 14px; 
        box-sizing: border-box; 
        max-width: 100%; 
    }
    .gr-lesson-topbar-title { min-width: 0; }
    .gr-lesson-topbar-title h1 { font-size: 16px; word-wrap: break-word; overflow-wrap: break-word; }
    .gr-lesson-back span { display: none; }
    .gr-lesson-back { padding: 8px 4px; }
    .gr-lesson-topbar-actions { 
        grid-column: 1 / -1; 
        display: flex; 
        flex-wrap: wrap; 
        gap: 8px; 
        justify-content: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════
   AI busy / daily-quota popup
   Shown when gramAjax sees { gated:true, gate_type:'ai_busy' }.
   Copy is intentionally generic ("server overloaded") so students
   don't realise they were rate-limited as individuals.
   ═══════════════════════════════════════════════════════════════ */
.gr-ai-busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.gr-ai-busy-overlay.is-open { display: flex; }

.gr-ai-busy-card {
    width: 100%;
    max-width: 440px;
    background: var(--gr-white);
    border-radius: 18px;
    padding: 32px 28px 24px;
    text-align: center;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .4);
    animation: gr-ai-busy-in .2s ease;
}
@keyframes gr-ai-busy-in {
    from { transform: translateY(8px) scale(.96); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

.gr-ai-busy-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #B45309;
}
.gr-ai-busy-icon svg { width: 36px; height: 36px; }

.gr-ai-busy-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--gr-gray-900);
    letter-spacing: -.01em;
}
.gr-ai-busy-msg {
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--gr-gray-700);
    line-height: 1.55;
}
.gr-ai-busy-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(8, 145, 178, .08);
    border-radius: 999px;
    font-size: 12px;
    color: var(--gr-teal-dk);
    font-weight: 500;
    margin-bottom: 22px;
}
.gr-ai-busy-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gr-amber);
    animation: gr-ai-busy-pulse 1.4s ease-in-out infinite;
}
@keyframes gr-ai-busy-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

.gr-ai-busy-close {
    background: var(--gr-gray-900);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease;
}
.gr-ai-busy-close:hover { opacity: .85; }

.ae-dark-mode .gr-ai-busy-card {
    background: #0F172A;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .65);
}
.ae-dark-mode .gr-ai-busy-card h3 { color: #F1F5F9 !important; }
.ae-dark-mode .gr-ai-busy-msg     { color: #CBD5E1 !important; }
.ae-dark-mode .gr-ai-busy-icon    { background: rgba(245, 158, 11, .18); color: #FBBF24; }
.ae-dark-mode .gr-ai-busy-meta    { background: rgba(34, 211, 238, .12); color: #67E8F9 !important; }
.ae-dark-mode .gr-ai-busy-close   { background: #fff; color: #0F172A !important; }