html, body {
    font-family: 'Plus Jakarta Sans', 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--ig-bg);
    color: var(--ig-text);
    margin: 0;
    padding: 0;
    min-height: 100%;
    scroll-behavior: smooth;
}

:root, [data-theme="light"] {
    --ig-bg: #f8fafc;
    --ig-surface: #ffffff;
    --ig-text: #0f172a;
    --ig-text-secondary: #475569;
    --ig-border: #e2e8f0;
    --ig-primary: #0284c7;
    --ig-primary-hover: #0369a1;
    --ig-card-bg: #ffffff;
    --ig-danger: #ef4444;

    --landing-bg: radial-gradient(circle at 50% 8%, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
    --landing-text: #0f172a;
    --landing-title: #0f172a;
    --landing-subtitle: #475569;
    --landing-card-bg: #ffffff;

    /* Liquid Water Droplet Scrollbar (Light Mode) */
    --water-scroll-width: 9px;
    --water-track-bg: rgba(2, 132, 199, 0.04);
    --water-drop-thumb: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(186, 230, 253, 0.95) 12%,
        rgba(56, 189, 248, 0.85) 35%,
        rgba(2, 132, 199, 0.9) 75%,
        rgba(3, 105, 161, 0.95) 100%
    );
    --water-drop-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.95),
        inset 0 -2px 3px rgba(3, 105, 161, 0.4),
        0 2px 8px rgba(2, 132, 199, 0.35);
    --water-drop-hover: linear-gradient(
        180deg,
        #ffffff 0%,
        #7dd3fc 15%,
        #0ea5e9 45%,
        #0284c7 100%
    );
    --water-drop-hover-shadow: 
        inset 0 2px 4px #ffffff,
        0 0 14px rgba(2, 132, 199, 0.6);
}

[data-theme="dark"] {
    --ig-bg: #0b0d13;
    --ig-surface: #12151e;
    --ig-text: #f8fafc;
    --ig-text-secondary: #94a3b8;
    --ig-border: #232838;
    --ig-primary: #38bdf8;
    --ig-primary-hover: #0ea5e9;
    --ig-card-bg: #141721;
    --ig-danger: #f87171;

    --landing-bg: radial-gradient(circle at 50% 8%, #141721 0%, #0b0d13 55%, #06070a 100%);
    --landing-text: #f8fafc;
    --landing-title: #f8fafc;
    --landing-subtitle: #94a3b8;
    --landing-card-bg: #141721;

    /* Liquid Water Droplet Scrollbar (Dark Mode) */
    --water-scroll-width: 9px;
    --water-track-bg: rgba(56, 189, 248, 0.03);
    --water-drop-thumb: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(186, 230, 253, 0.85) 10%,
        rgba(56, 189, 248, 0.8) 32%,
        rgba(14, 165, 233, 0.85) 65%,
        rgba(2, 132, 199, 0.9) 100%
    );
    --water-drop-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(7, 12, 24, 0.6),
        0 2px 12px rgba(56, 189, 248, 0.55);
    --water-drop-hover: linear-gradient(
        180deg,
        #ffffff 0%,
        #bae6fd 12%,
        #38bdf8 38%,
        #0ea5e9 75%,
        #0284c7 100%
    );
    --water-drop-hover-shadow: 
        inset 0 2px 5px #ffffff,
        0 0 16px rgba(56, 189, 248, 0.85);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ig-bg: #0b0d13;
        --ig-surface: #12151e;
        --ig-text: #f8fafc;
        --ig-text-secondary: #94a3b8;
        --ig-border: #232838;
        --ig-primary: #38bdf8;
        --ig-primary-hover: #0ea5e9;
        --ig-card-bg: #141721;
        --ig-danger: #f87171;

        --landing-bg: radial-gradient(circle at 50% 8%, #141721 0%, #0b0d13 55%, #06070a 100%);
        --landing-text: #f8fafc;
        --landing-title: #f8fafc;
        --landing-subtitle: #94a3b8;
        --landing-card-bg: #0f172a;

        /* Liquid Water Droplet Scrollbar (Dark Mode) */
        --water-scroll-width: 9px;
        --water-track-bg: rgba(56, 189, 248, 0.03);
        --water-drop-thumb: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(186, 230, 253, 0.85) 10%,
            rgba(56, 189, 248, 0.8) 32%,
            rgba(14, 165, 233, 0.85) 65%,
            rgba(2, 132, 199, 0.9) 100%
        );
        --water-drop-shadow: 
            inset 0 2px 4px rgba(255, 255, 255, 0.9),
            inset 0 -2px 4px rgba(7, 12, 24, 0.6),
            0 2px 12px rgba(56, 189, 248, 0.55);
        --water-drop-hover: linear-gradient(
            180deg,
            #ffffff 0%,
            #bae6fd 12%,
            #38bdf8 38%,
            #0ea5e9 75%,
            #0284c7 100%
        );
        --water-drop-hover-shadow: 
            inset 0 2px 5px #ffffff,
            0 0 16px rgba(56, 189, 248, 0.85);
    }
}

/* ── VIEW TRANSITIONS EXPANDING CIRCLE FROM BUTTON ── */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 99999;
}

/* ── LOGO SWITCHING (LIGHT VS DARK) ── */
.brand-logo-light {
    display: block !important;
}

.brand-logo-dark {
    display: none !important;
}

[data-theme="dark"] .brand-logo-light {
    display: none !important;
}

[data-theme="dark"] .brand-logo-dark {
    display: block !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo-light {
        display: none !important;
    }
    :root:not([data-theme="light"]) .brand-logo-dark {
        display: block !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════ */
/* LIQUID WATER DROPLET SCROLLBAR (THANH CUỘN HIỆU ỨNG GIỌT NƯỚC DI CHUYỂN DẦN) */
/* ══════════════════════════════════════════════════════════════════════ */

/* Ẩn thanh cuộn mặc định của trình duyệt khi trang kích hoạt DropletScrollbar giọt nước */
html.has-droplet-scrollbar {
    scrollbar-width: none;
}
html.has-droplet-scrollbar::-webkit-scrollbar,
html.has-droplet-scrollbar body::-webkit-scrollbar {
    display: none;
}

/* Thanh cuộn cho các khung cuộn nội bộ (Modal, bảng tra cứu, sidebar) */
::-webkit-scrollbar {
    width: var(--water-scroll-width, 7px);
    height: var(--water-scroll-width, 7px);
}

::-webkit-scrollbar-track {
    background: var(--water-track-bg, transparent);
    border-radius: 9999px;
    margin: 4px 0;
}

/* Giọt nước (Scrollbar Thumb) với phản quang và khúc xạ chất lỏng */
::-webkit-scrollbar-thumb {
    background: var(--water-drop-thumb);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: var(--water-drop-shadow);
    min-height: 48px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    cursor: grab;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--water-drop-hover);
    box-shadow: var(--water-drop-hover-shadow);
}

::-webkit-scrollbar-thumb:active {
    background: var(--water-drop-hover);
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.95), inset 0 2px 6px #ffffff;
    cursor: grabbing;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Chuẩn Firefox hiện đại cho các khung cuộn nội bộ */
.scrollable-content,
.modal-body,
.sb-nav {
    scrollbar-width: thin;
    scrollbar-color: #38bdf8 transparent;
}

[data-theme="light"] .scrollable-content,
[data-theme="light"] .modal-body,
[data-theme="light"] .sb-nav {
    scrollbar-color: #0284c7 transparent;
}

/* ── GLOBAL HOME LANDING DARK THEME RULES ── */
[data-theme="dark"] .landing-container {
    background: radial-gradient(circle at 50% 8%, #0f172a 0%, #090d16 55%, #050811 100%) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .main-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .subtitle {
    color: #94a3b8 !important;
}

[data-theme="dark"] .monolith-card {
    background: #0f172a !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .card-content h2 {
    color: #f8fafc !important;
}

[data-theme="dark"] .card-content p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .ielts-card {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 20px 45px -15px rgba(2, 132, 199, 0.4), 0 0 25px rgba(56, 189, 248, 0.25) !important;
}

[data-theme="dark"] .hsk-card {
    border-color: rgba(244, 63, 94, 0.4) !important;
    box-shadow: 0 20px 45px -15px rgba(239, 68, 68, 0.4), 0 0 25px rgba(244, 63, 94, 0.25) !important;
}

[data-theme="dark"] .ielts-btn {
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    background: rgba(56, 189, 248, 0.08) !important;
}

[data-theme="dark"] .ielts-btn:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: #38bdf8 !important;
}

[data-theme="dark"] .hsk-btn {
    color: #fb7185 !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
    background: rgba(244, 63, 94, 0.08) !important;
}

[data-theme="dark"] .hsk-btn:hover {
    background: rgba(244, 63, 94, 0.18) !important;
    border-color: #fb7185 !important;
}

/* ── UNIVERSAL WORKSPACE EYE-COMFORT & THEME RULES ── */
[data-theme="dark"] .page-title,
[data-theme="dark"] h1.page-title,
[data-theme="dark"] .section-heading,
[data-theme="dark"] h2.section-heading,
[data-theme="dark"] .topic-title,
[data-theme="dark"] .audio-card-title,
[data-theme="dark"] .exercise-video-title,
[data-theme="dark"] .question-title,
[data-theme="dark"] .vocab-title,
[data-theme="dark"] .vocab-preview-header h3,
[data-theme="dark"] .card-icon-header h3,
[data-theme="dark"] .section-title-wrap h3,
[data-theme="dark"] .story-title,
[data-theme="dark"] .module-info h4,
[data-theme="dark"] .goal-section h3,
[data-theme="dark"] .chip-word,
[data-theme="dark"] .sp-q-text h3,
[data-theme="dark"] .title-section h1,
[data-theme="dark"] .audio-modal-title h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .section-desc,
[data-theme="dark"] .topic-sub,
[data-theme="dark"] .audio-card-desc,
[data-theme="dark"] .audio-unit-count,
[data-theme="dark"] .date-subtitle,
[data-theme="dark"] .vocab-subtitle,
[data-theme="dark"] .story-excerpt,
[data-theme="dark"] .module-info p,
[data-theme="dark"] .submission-meta,
[data-theme="dark"] .audio-modal-sub {
    color: #94a3b8 !important;
}

[data-theme="dark"] .audio-lesson-card,
[data-theme="dark"] .topic-card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .engnovate-video-card,
[data-theme="dark"] .engnovate-transcript-wrapper,
[data-theme="dark"] .flashcard-nav-header,
[data-theme="dark"] .engnovate-header-bar,
[data-theme="dark"] .audio-modal-card,
[data-theme="dark"] .dictation-card-wrapper,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .module-card,
[data-theme="dark"] .goal-section,
[data-theme="dark"] .latest-result,
[data-theme="dark"] .vocab-preview-section,
[data-theme="dark"] .story-card,
[data-theme="dark"] .review-header-card,
[data-theme="dark"] .filter-panel-card,
[data-theme="dark"] .vocab-header-card,
[data-theme="dark"] .vocab-table-container,
[data-theme="dark"] .master-table-wrapper,
[data-theme="dark"] .featured-table-wrapper,
[data-theme="dark"] .lesson-hero-compact,
[data-theme="dark"] .lesson-section,
[data-theme="dark"] .formula-card,
[data-theme="dark"] .exercise-section-enhanced,
[data-theme="dark"] .exercise-card,
[data-theme="dark"] .mocktest-controls-bar,
[data-theme="dark"] .collection-title-bar,
[data-theme="dark"] .test-block,
[data-theme="dark"] .skill-card,
[data-theme="dark"] .skill-card-summary,
[data-theme="dark"] .summary-loading,
[data-theme="dark"] .summary-empty,
[data-theme="dark"] .task-card,
[data-theme="dark"] .history-table-wrap,
[data-theme="dark"] .diagnostic-card,
[data-theme="dark"] .checklist-card,
[data-theme="dark"] .game-card,
[data-theme="dark"] .hub-rules-card,
[data-theme="dark"] .question-block,
[data-theme="dark"] .task-instruction,
[data-theme="dark"] .sample-essay-card,
[data-theme="dark"] .avatar-picker-panel,
[data-theme="dark"] .sp-think-card,
[data-theme="dark"] .sp-result-card,
[data-theme="dark"] .sp-setup-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .test-card,
[data-theme="dark"] .exam-card,
[data-theme="dark"] .grammar-card,
[data-theme="dark"] .activity-item,
[data-theme="dark"] .audio-player-box {
    background-color: var(--ig-card-bg) !important;
    border-color: var(--ig-border) !important;
    color: var(--ig-text) !important;
}

[data-theme="dark"] .user-speech-card,
[data-theme="dark"] .speech-display-box,
[data-theme="dark"] .dictation-diff-box,
[data-theme="dark"] .user-audio-review-bar,
[data-theme="dark"] .engnovate-audio-player-box {
    background-color: #111d33 !important;
    border-color: var(--ig-border) !important;
    color: var(--ig-text) !important;
}

[data-theme="dark"] .overall-progress-chip,
[data-theme="dark"] .btn-corner-mic-test,
[data-theme="dark"] .btn-back-to-topics,
[data-theme="dark"] .btn-engnovate-back,
[data-theme="dark"] .stepper-btn,
[data-theme="dark"] .speed-chip,
[data-theme="dark"] .engnovate-ctrl-btn,
[data-theme="dark"] .unit-counter-pill,
[data-theme="dark"] .segment-timing-pill,
[data-theme="dark"] .level-tab-btn,
[data-theme="dark"] .btn-card-action,
[data-theme="dark"] .btn-start-test-mini,
[data-theme="dark"] .sp-btn-secondary {
    background-color: var(--ig-card-bg) !important;
    border-color: var(--ig-border) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .overall-progress-chip:hover,
[data-theme="dark"] .btn-corner-mic-test:hover,
[data-theme="dark"] .btn-back-to-topics:hover,
[data-theme="dark"] .btn-engnovate-back:hover,
[data-theme="dark"] .stepper-btn:hover:not(:disabled),
[data-theme="dark"] .speed-chip:hover,
[data-theme="dark"] .engnovate-ctrl-btn:hover:not(:disabled),
[data-theme="dark"] .level-tab-btn:hover,
[data-theme="dark"] .btn-start-test-mini:hover,
[data-theme="dark"] .sp-btn-secondary:hover {
    background-color: #1a2c4c !important;
    border-color: #38bdf8 !important;
    color: #f8fafc !important;
}

/* Inputs & Selects */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .search-input-wrapper input,
[data-theme="dark"] .search-input-group input,
[data-theme="dark"] .category-select-wrapper select {
    background-color: #111d33 !important;
    border-color: var(--ig-border) !important;
    color: #f8fafc !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
}

/* View Mode Toggles & Tabs */
[data-theme="dark"] .part-selector-tabs,
[data-theme="dark"] .view-mode-toggle {
    background-color: var(--ig-surface) !important;
    border-color: var(--ig-border) !important;
}

[data-theme="dark"] .part-tab-num {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .part-tab-label,
[data-theme="dark"] .toggle-btn {
    color: #94a3b8 !important;
}

[data-theme="dark"] .part-tab-btn:hover,
[data-theme="dark"] .toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .part-tab-btn.active,
[data-theme="dark"] .toggle-btn.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .part-tab-btn.active .part-tab-num,
[data-theme="dark"] .part-tab-btn.active .part-tab-label {
    color: #ffffff !important;
}

/* Sp Speaking Exam Room */
[data-theme="dark"] .sp-body {
    background: #0b1325 !important;
}

/* Vocab chip on Dashboard */
[data-theme="dark"] .vocab-chip {
    background: #111d33 !important;
    border-color: #233554 !important;
}
[data-theme="dark"] .chip-meaning {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .chip-topic {
    background: #15243f !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Global Bootstrap Dark Mode Utility Overrides */
[data-theme="dark"] .text-primary {
    color: #38bdf8 !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-black {
    color: #f8fafc !important;
}

[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

[data-theme="dark"] .bg-white {
    background-color: #141721 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .bg-light {
    background-color: #12151e !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .border {
    border-color: #232838 !important;
}

[data-theme="dark"] .border-top {
    border-top-color: #232838 !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: #232838 !important;
}

[data-theme="dark"] .table {
    color: #f8fafc !important;
    border-color: #232838 !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #f8fafc !important;
    border-bottom-color: #232838 !important;
}

[data-theme="dark"] .card {
    background-color: #141721 !important;
    border-color: #232838 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .modal-content {
    background-color: #141721 !important;
    border-color: #232838 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: #141721 !important;
    border-color: #232838 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .dropdown-item {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: #1d2230 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .list-group-item {
    background-color: #141721 !important;
    border-color: #232838 !important;
    color: #f8fafc !important;
}


h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--ig-primary);
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

.btn-primary {
    color: #fff;
    background-color: var(--ig-primary);
    border-color: var(--ig-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ===== Màn hình tải lúc khởi động: Fox Pet chạy & nhảy trên thanh tiến độ =====
   --blazor-load-percentage / --blazor-load-percentage-text do blazor.webassembly.js
   tự cập nhật theo % tài nguyên (.wasm/.dll) đã tải về, bám sát tiến trình thực tế. */
.pet-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #ffffff;
    font-family: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, sans-serif;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s;
}

.pet-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

    .pet-loader::before {
        content: "Master Your Languages";
        font-size: 1.35rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 75px; /* chừa khoảng trống cho pet rướn nhảy cao không đè chữ */
        letter-spacing: -0.02em;
    }

.pet-track {
    position: relative; /* không overflow:hidden để pet nhảy vọt lên không bị che khuất */
    width: min(440px, 86vw);
    height: 12px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(255, 255, 255, 0.8);
}

.pet-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--blazor-load-percentage, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg,
        #3b82f6 0%,
        #6366f1 30%,
        #8b5cf6 60%,
        #ec4899 100%
    );
    background-size: 200% 100%;
    animation: pet-bar-flow 2.5s ease-in-out infinite alternate;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.45);
    transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pet-bar-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.pet-runner-wrapper {
    position: absolute;
    left: var(--blazor-load-percentage, 0%);
    bottom: calc(100% - 6px);
    transform: translateX(-50%);
    pointer-events: none;
    transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== Giai đoạn 1: Chạy đều thoăn thoắt nét vẽ gốc 100% (0% - 80%) ===== */
.pet-runner {
    width: 84px;
    height: 84px;
    background-image: url('../images/loading-pet/pet-run-spritesheet.png');
    background-size: calc(84px * 4) 84px;
    background-repeat: no-repeat;
    background-position: 0 0;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
    animation: pet-run-cycle 0.5s steps(4) infinite, pet-run-bob 0.25s ease-in-out infinite alternate;
}

@keyframes pet-run-cycle {
    from { background-position: 0 0; }
    to { background-position: calc(-84px * 4) 0; }
}

@keyframes pet-run-bob {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-3px); }
}

/* ===== Giai đoạn 2: Bật nhảy vọt lên & tiếp đất ở cuối (80% - 100%) ===== */
.pet-runner.jumping {
    background-image: url('../images/loading-pet/pet-jump-spritesheet.png');
    background-size: calc(84px * 6) 84px;
    animation: pet-jump-cycle 0.8s steps(6) infinite, pet-grand-leap 0.8s cubic-bezier(0.35, 0.05, 0.45, 0.95) infinite;
}

@keyframes pet-jump-cycle {
    from { background-position: 0 0; }
    to { background-position: calc(-84px * 6) 0; }
}

@keyframes pet-grand-leap {
    0% {
        transform: translateY(3px) scaleY(0.95); /* Rướn thấp tích lực */
    }
    20% {
        transform: translateY(-16px) rotate(-4deg); /* Bật vọt lên cao */
    }
    45% {
        transform: translateY(-30px) rotate(2deg); /* Đỉnh nhảy bổng trên thanh */
    }
    65% {
        transform: translateY(-12px) rotate(4deg); /* Hạ độ cao */
    }
    80% {
        transform: translateY(4px) scaleY(0.92); /* Tiếp đất nén lực & văng bụi */
    }
    100% {
        transform: translateY(0px) scaleY(1); /* Đứng thẳng vinh quang */
    }
}

/* Bóng đổ động dưới chân pet */
.pet-shadow {
    width: 42px;
    height: 6px;
    background: rgba(15, 23, 42, 0.18);
    border-radius: 50%;
    margin-top: -6px;
    animation: pet-run-shadow 0.18s ease-in-out infinite alternate;
}

@keyframes pet-run-shadow {
    0% { transform: scale(1); opacity: 0.25; }
    100% { transform: scale(0.85); opacity: 0.18; }
}

.pet-runner.jumping + .pet-shadow {
    animation: pet-jump-shadow 0.8s cubic-bezier(0.35, 0.05, 0.45, 0.95) infinite;
}

@keyframes pet-jump-shadow {
    0% { transform: scale(1.15); opacity: 0.35; }
    45% { transform: scale(0.5); opacity: 0.08; }
    80% { transform: scale(1.35, 1.2); opacity: 0.45; }
    100% { transform: scale(1); opacity: 0.25; }
}

.pet-percent {
    margin-top: 6px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 3px 14px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    font-weight: 800;
    font-size: 0.88rem;
    color: #0f172a;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ─── UNIFIED LEFT SIDEBAR STYLING (PREMIUM IMMERSIVE THEMES) ─── */
.left-sidebar {
    position: fixed;
    left: 0; 
    top: 0; 
    bottom: 0;
    width: 260px;
    background: #0f172a;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 600;
    transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1), transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    color: #ffffff;
}

.left-sidebar.collapsed {
    width: 74px !important;
}

/* ── Header ── */
.left-sidebar .sb-header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    gap: 8px;
    background: transparent !important;
}

.left-sidebar .sb-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    min-width: 0;
}

.left-sidebar .sb-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.left-sidebar .sb-brand-text {
    font-weight: 800;
    font-size: 1.15rem;
    color: #ffffff !important;
    letter-spacing: -0.3px;
}

.left-sidebar .sb-brand-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}

.left-sidebar .sb-collapse-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.left-sidebar .sb-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.05);
}

/* ── Section labels ── */
.left-sidebar .sb-section-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px 2px 14px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

/* ── CLEAN NAV ITEM CARDS ── */
.left-sidebar .sb-nav .sb-item,
.left-sidebar .sb-nav a.sb-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    margin-bottom: 4px !important;
}

.left-sidebar .sb-nav .sb-item-icon {
    width: 34px !important; 
    height: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: all 0.2s ease !important;
}

.left-sidebar .sb-item-name {
    font-weight: 600 !important;
    color: #ffffff !important;
}

.left-sidebar .sb-item-desc {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.left-sidebar .sb-bottom {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent !important;
    position: sticky;
    bottom: 0;
}

.left-sidebar .sb-switcher-card {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: none !important;
}

.left-sidebar .sb-switcher-label {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ========================================================================= */
/* 1. HSK THEME (CHINESE IMPERIAL RED & ROYAL GOLD ACCENTS)                  */
/* ========================================================================= */
.left-sidebar.theme-hsk {
    background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 45%, #450a0a 100%) !important;
    border-right: 1px solid rgba(254, 202, 202, 0.15) !important;
    box-shadow: 4px 0 25px rgba(153, 27, 27, 0.25) !important;
}

.left-sidebar.theme-hsk .sb-brand-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #451a03 !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4) !important;
}

.left-sidebar.theme-hsk .sb-brand-img {
    filter: drop-shadow(0 2px 8px rgba(250, 204, 21, 0.45)) !important;
}

.left-sidebar.theme-hsk .sb-brand-badge {
    background: #facc15 !important;
    color: #451a03 !important;
    font-weight: 800 !important;
}

.left-sidebar.theme-hsk .sb-section-label,
.left-sidebar.theme-hsk .sb-switcher-label {
    color: #facc15 !important;
}

.left-sidebar.theme-hsk .sb-nav .sb-item:hover,
.left-sidebar.theme-hsk .sb-nav a.sb-item:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-color: rgba(250, 204, 21, 0.35) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.left-sidebar.theme-hsk .sb-nav .sb-item:hover .sb-item-icon {
    background: rgba(250, 204, 21, 0.25) !important;
    color: #facc15 !important;
    border-color: #facc15 !important;
    transform: scale(1.1) !important;
}

.left-sidebar.theme-hsk .sb-nav .sb-item:hover .sb-item-desc {
    color: #fde047 !important;
}

.left-sidebar.theme-hsk .sb-nav .sb-item.active,
.left-sidebar.theme-hsk .sb-nav a.sb-item.active {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border: 1px solid rgba(250, 204, 21, 0.6) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.left-sidebar.theme-hsk .sb-nav .sb-item.active .sb-item-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #451a03 !important;
    border-color: #fde68a !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.5) !important;
}

.left-sidebar.theme-hsk .sb-nav .sb-item.active .sb-item-desc {
    color: #fde047 !important;
}


/* ========================================================================= */
/* 2. IELTS THEME (DEEP OCEAN NAVY BLUE & BRIGHT SKY/CYAN ACCENTS)           */
/* ========================================================================= */
.left-sidebar.theme-ielts {
    background: linear-gradient(180deg, #0c2340 0%, #081a30 50%, #040e1a 100%) !important;
    border-right: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow: 4px 0 25px rgba(8, 26, 48, 0.3) !important;
}

.left-sidebar.theme-ielts .sb-brand-icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.4) !important;
}

.left-sidebar.theme-ielts .sb-brand-img {
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.45)) !important;
}

.left-sidebar.theme-ielts .sb-brand-badge {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.left-sidebar.theme-ielts .sb-section-label,
.left-sidebar.theme-ielts .sb-switcher-label {
    color: #38bdf8 !important;
}

.left-sidebar.theme-ielts .sb-nav .sb-item:hover,
.left-sidebar.theme-ielts .sb-nav a.sb-item:hover {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.left-sidebar.theme-ielts .sb-nav .sb-item:hover .sb-item-icon {
    background: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
    transform: scale(1.1) !important;
}

.left-sidebar.theme-ielts .sb-nav .sb-item:hover .sb-item-desc {
    color: #7dd3fc !important;
}

.left-sidebar.theme-ielts .sb-nav .sb-item.active,
.left-sidebar.theme-ielts .sb-nav a.sb-item.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.left-sidebar.theme-ielts .sb-nav .sb-item.active .sb-item-icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
}

.left-sidebar.theme-ielts .sb-nav .sb-item.active .sb-item-desc {
    color: #7dd3fc !important;
}

/* ========================================================================= */
/* OBSIDIAN MIDNIGHT SIDEBAR — CHỈ ÁP DỤNG CHO HSK (DARK MODE)              */
/* ========================================================================= */
[data-theme="dark"] .left-sidebar.theme-hsk,
[data-theme="dark"].theme-hsk .left-sidebar {
    background: #090b10 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .left-sidebar .sb-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* HSK Dark Mode Sidebar Accents */
[data-theme="dark"] .left-sidebar.theme-hsk .sb-brand-icon {
    background: linear-gradient(135deg, #be123c 0%, #9f1239 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(190, 18, 60, 0.35) !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-brand-badge {
    background: #be123c !important;
    color: #ffffff !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-section-label,
[data-theme="dark"] .left-sidebar.theme-hsk .sb-switcher-label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav .sb-item:hover,
[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav a.sb-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav .sb-item:hover .sb-item-icon {
    background: rgba(244, 63, 94, 0.2) !important;
    color: #f43f5e !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav .sb-item:hover .sb-item-desc {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav .sb-item.active,
[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav a.sb-item.active {
    background: rgba(190, 18, 60, 0.16) !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(190, 18, 60, 0.15) !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav .sb-item.active .sb-item-icon {
    background: linear-gradient(135deg, #be123c, #9f1239) !important;
    color: #ffffff !important;
    border-color: #f43f5e !important;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.4) !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-nav .sb-item.active .sb-item-desc {
    color: #fda4af !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-bottom {
    background: #090b10 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-switcher-card {
    background: #12151e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-switcher {
    background: #090b10 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-switch-btn {
    color: #94a3b8 !important;
}

[data-theme="dark"] .left-sidebar.theme-hsk .sb-switch-btn.active {
    background: #be123c !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(190, 18, 60, 0.4) !important;
}

/* ─── COLLAPSED SIDEBAR OPTIMIZATIONS ─── */
.left-sidebar.collapsed {
    width: 72px !important;
}

.left-sidebar.collapsed .sb-header {
    justify-content: center !important;
    padding: 0 8px !important;
}

.left-sidebar.collapsed .sb-collapse-btn-standalone {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.left-sidebar.collapsed .sb-collapse-btn-standalone:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.left-sidebar.collapsed .sb-nav {
    padding: 12px 6px !important;
    align-items: center !important;
}

.left-sidebar.collapsed .sb-nav .sb-item,
.left-sidebar.collapsed .sb-nav a.sb-item {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 auto 6px auto !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.left-sidebar.collapsed .sb-nav .sb-item-icon {
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.left-sidebar.collapsed .sb-nav .sb-item:hover .sb-item-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.left-sidebar.collapsed.theme-ielts .sb-nav .sb-item.active .sb-item-icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
}

.left-sidebar.collapsed.theme-hsk .sb-nav .sb-item.active .sb-item-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #451a03 !important;
    border-color: #fde68a !important;
}

/* ─── SIDEBAR RIGHT-TO-LEFT FLYING ANIMATION ─── */
.left-sidebar .sb-nav-anim-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    animation: sbFlyRightToLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.left-sidebar .sb-anim-fly-in {
    animation: sbFlyRightToLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.left-sidebar .sb-nav-anim-wrapper .sb-section-label {
    animation: sbFlyRightToLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    animation-delay: 0.01s !important;
}

.left-sidebar .sb-nav-anim-wrapper .sb-item,
.left-sidebar .sb-nav-anim-wrapper a.sb-item {
    animation: sbItemFlyRightToLeft 0.38s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.left-sidebar .sb-nav-anim-wrapper .sb-item:nth-child(1),
.left-sidebar .sb-nav-anim-wrapper a.sb-item:nth-child(1) { animation-delay: 0.03s !important; }

.left-sidebar .sb-nav-anim-wrapper .sb-item:nth-child(2),
.left-sidebar .sb-nav-anim-wrapper a.sb-item:nth-child(2) { animation-delay: 0.07s !important; }

.left-sidebar .sb-nav-anim-wrapper .sb-item:nth-child(3),
.left-sidebar .sb-nav-anim-wrapper a.sb-item:nth-child(3) { animation-delay: 0.11s !important; }

.left-sidebar .sb-nav-anim-wrapper .sb-item:nth-child(4),
.left-sidebar .sb-nav-anim-wrapper a.sb-item:nth-child(4) { animation-delay: 0.15s !important; }

.left-sidebar .sb-nav-anim-wrapper .sb-item:nth-child(5),
.left-sidebar .sb-nav-anim-wrapper a.sb-item:nth-child(5) { animation-delay: 0.19s !important; }

.left-sidebar .sb-nav-anim-wrapper .sb-item:nth-child(6),
.left-sidebar .sb-nav-anim-wrapper a.sb-item:nth-child(6) { animation-delay: 0.23s !important; }

@keyframes sbFlyRightToLeft {
    0% {
        opacity: 0;
        transform: translateX(35px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sbItemFlyRightToLeft {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Global fallback for Admin Login inputs */
.admin-login-card .form-control-modern {
    width: 100% !important;
    height: 48px;
    padding: 12px 16px;
    background: #1e293b !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: block !important;
}

.admin-login-card .form-control-modern.with-icon-left {
    padding-left: 46px !important;
}

.admin-login-card .form-control-modern.with-icon-right {
    padding-right: 46px !important;
}

.admin-login-card .form-control-modern:focus {
    border-color: #38bdf8 !important;
    background: #0f172a !important;
    box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.22) !important;
}

.admin-login-card .form-control-modern::placeholder {
    color: #64748b !important;
}

/* =========================================================
   GLOBAL MASCOT COMPANION FALLBACK STYLES
   ========================================================= */
#mascotCompanionWidget,
.mascot-widget-wrapper {
    position: fixed !important;
    bottom: 22px !important;
    right: 22px !important;
    z-index: 10005 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    pointer-events: none !important;
}

#mascotCompanionWidget .mascot-main-area,
#mascotCompanionWidget .mascot-speech-bubble,
#mascotCompanionWidget .mascot-minimized-pill,
#mascotCompanionWidget .mascot-actor-btn,
#mascotCompanionWidget .btn-mascot-tool,
#mascotCompanionWidget .btn-mascot-menu-toggle {
    pointer-events: auto !important;
}

/* Luôn đảm bảo khung hiển thị Mascot là hình tròn mềm mại, trong suốt, không bao giờ lộ khung vuông */
#mascotCompanionWidget .mascot-viewport {
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
}

#mascotCompanionWidget .mascot-halo-backdrop {
    border-radius: 50% !important;
}

#mascotCompanionWidget .mascot-actor-btn {
    border-radius: 50% !important;
    overflow: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mascotCompanionWidget .mascot-actor-btn:focus,
#mascotCompanionWidget .mascot-actor-btn:active,
#mascotCompanionWidget .mascot-actor-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#mascotCompanionWidget .mascot-squash-span,
#mascotCompanionWidget .mascot-layer {
    border-radius: 50% !important;
    overflow: hidden !important;
    background-color: transparent !important;
}

/* Tuyệt đối không cho phép Mascot xuất hiện khi đang ở màn hình Loading (Pet Runner) */
body:has(#app-loader:not(.fade-out):not([style*="display: none"])) #mascotCompanionWidget,
body:has(#app-loader:not(.fade-out):not([style*="display: none"])) .mascot-widget-wrapper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}