body { overflow-x: hidden; }

        :root {
            --body-bg: #0b1111;
            --widget-title-color: #fff;
            --widget-link-color: #888;
            --widget-badge-bg: rgba(255,255,255,0.05);
            --widget-badge-color: #aaa;
            --exam-paper-bg: rgba(255,255,255,0.025);
            --exam-paper-border: rgba(92,225,230,0.09);
            --exam-text-color: #ddd;
            --exam-bold-color: #f4f4f4;
            --exam-title-color: #f0f0f0;
            --exam-divider-color: rgba(92,225,230,0.1);
        }

        body:not(.dark-mode) {
            --body-bg: #f8fafc;
            --widget-title-color: #1e293b;
            --widget-link-color: #64748b;
            --widget-badge-bg: rgba(0,0,0,0.05);
            --widget-badge-color: #475569;
            --exam-paper-bg: #ffffff;
            --exam-paper-border: rgba(15,23,42,0.08);
            --exam-text-color: #334155;
            --exam-bold-color: #0f172a;
            --exam-title-color: #1e293b;
            --exam-divider-color: rgba(15,23,42,0.08);
            --accent-cyan: #009eb3;
        }

        body {
            background-color: var(--body-bg);
            transition: background-color 0.3s ease;
        }

        .main-wrapper {
            position: relative;
            max-width: 2000px !important;
            width: 100% !important;
            margin: 0 auto !important;
            transform: none !important;
            left: 0 !important;
            transition: transform 0s !important;
        }

        .main-content-layout {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 36px;
            margin-top: 20px;
            min-width: 0;
        }

        .tags-comment-sidebar {
            display: flex;
            flex-direction: column;
            gap: 36px;
            position: sticky;
            top: 100px;
            height: fit-content;
            z-index: 1;
        }

        .side-widget-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            color: var(--widget-title-color);
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            transition: color 0.3s ease;
        }

        body.light-mode .side-widget-title {
            border-bottom: 1px solid rgba(0,0,0,0.08);
        }

        .side-widget-list {
            list-style: none; padding: 0; margin: 0;
            display: flex; flex-direction: column; gap: 12px;
        }

        .side-widget-list a {
            display: flex; justify-content: space-between; align-items: center;
            color: var(--widget-link-color); text-decoration: none; font-size: 0.85rem; transition: all 0.2s;
        }

        .side-widget-list a:hover { color: var(--accent-cyan); transform: translateX(4px); }

        .side-widget-list a span {
            font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
            background: var(--widget-badge-bg); padding: 2px 8px;
            border-radius: 12px; color: var(--widget-badge-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        @media (max-width: 1100px) {
            .main-content-layout { grid-template-columns: 1fr; }
            .tags-comment-sidebar { position: static; }
        }

        .main-articles-body {
            min-width: 0;
            overflow: hidden;
        }
        
        .math-editor-layout {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 25px;
            align-items: start;
        }
        @media (max-width: 1300px) {
            .math-editor-layout { grid-template-columns: 1fr; }
        }
        .math-editor-right {
            position: sticky;
            top: 100px;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
            padding-right: 5px;
        }
        .math-editor-right::-webkit-scrollbar { width: 4px; }
        .math-editor-right::-webkit-scrollbar-thumb { background: rgba(92,225,230,0.2); border-radius: 4px; }

        .exam-back-btn {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--accent-cyan, #5ce1e6); text-decoration: none;
            font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;
            letter-spacing: 1px; text-transform: uppercase;
            margin-bottom: 22px; opacity: 0.65; transition: opacity 0.2s;
        }
        .exam-back-btn:hover { opacity: 1; }

        .exam-meta { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
        .exam-tag {
            font-size: 0.7rem; font-family: 'JetBrains Mono', monospace;
            padding: 4px 13px; border-radius: 20px;
            border: 1px solid rgba(92,225,230,0.35);
            color: var(--accent-cyan, #5ce1e6);
        }

        .latex-hero { margin-bottom: 22px; }
        .latex-hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 1.6rem;
            color: var(--exam-title-color);
            margin: 0 0 5px 0;
        }
        .latex-hero p { font-size: 0.85rem; color: var(--exam-text-color); opacity: 0.7; margin: 0; }

        .snippet-toolbar {
            column-count: 2;
            column-gap: 12px;
            margin-bottom: 16px;
        }
        .snip-group-row { 
            display: flex; 
            flex-direction: column; 
            background: rgba(255,255,255,0.02); 
            border: 1px solid rgba(92,225,230,0.15); 
            border-radius: 8px; 
            overflow: hidden;
            margin-bottom: 12px;
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .snip-group-row .snip-group-label {
            width: 100%; margin: 0; padding: 6px 10px; font-size: 0.65rem; font-family: 'JetBrains Mono', monospace;
            letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-cyan, #5ce1e6); opacity: 0.8;
            background: rgba(92,225,230,0.08); border-bottom: 1px solid rgba(92,225,230,0.12); display: flex; align-items: center;
            cursor: pointer; user-select: none;
        }
        .snip-group-btns { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; padding: 6px; min-width: 0; justify-content: flex-start; }
        .snip-btn {
            background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 6px;
            color: var(--exam-text-color); font-family: 'JetBrains Mono', monospace; font-size: 1.1rem;
            cursor: pointer; transition: all 0.1s; min-width: 32px; height: auto; min-height: 32px;
            display: inline-flex; justify-content: center; align-items: center;
        }
        .snip-btn:hover { background: rgba(92,225,230,0.15); border-color: rgba(92,225,230,0.4); transform: scale(1.1); z-index: 2; position: relative; }
        .snip-btn mjx-container { overflow: hidden !important; pointer-events: none; }
        
        .snip-group-row.collapsed .snip-group-btns { display: none; }
        .snip-group-row.collapsed .toggle-icon { transform: rotate(-90deg); }
        .snip-group-row.dragging { opacity: 0.4; border: 1px dashed var(--accent-cyan) !important; }
        .snip-group-row.drag-over { border-top: 2px solid var(--accent-cyan) !important; }
        
        body:not(.dark-mode) .snippet-toolbar { }
        body:not(.dark-mode) .snip-group-row { background: #f8fafc; border-color: rgba(15,23,42,0.15); }
        body:not(.dark-mode) .snip-group-row .snip-group-label { background: rgba(0,0,0,0.04); border-color: rgba(15,23,42,0.08); color: var(--accent-cyan); }
        body:not(.dark-mode) .snip-btn:hover { background: rgba(0,0,0,0.06); border-color: rgba(15,23,42,0.2); }

        .latex-workspace {
            display: flex;
            flex-direction: column;
            gap: 18px;
            align-items: stretch;
            min-width: 0;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .pane-header {
            display: flex; align-items: center; justify-content: space-between;
            background: rgba(92,225,230,0.06);
            border: 1px solid rgba(92,225,230,0.12);
            border-bottom: none;
            border-radius: 10px 10px 0 0;
            padding: 9px 15px;
        }
        .pane-title {
            font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
            letter-spacing: 1.2px; text-transform: uppercase;
            color: var(--accent-cyan, #5ce1e6);
        }
        .pane-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end;}
        .pane-btn {
            background: rgba(92,225,230,0.09); border: 1px solid rgba(92,225,230,0.22); border-radius: 5px; padding: 4px 11px;
            color: var(--accent-cyan, #5ce1e6); font-family: 'JetBrains Mono', monospace; font-size: 0.70rem;
            letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; white-space: nowrap;
        }
        .pane-btn:hover { background: rgba(92,225,230,0.2); border-color: rgba(92,225,230,0.55); }
        .pane-btn.danger { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.22); color: #f87171; }
        .pane-btn.danger:hover { background: rgba(248,113,113,0.2); }

        /* MathQuill modifications */
        .math-editor-container {
            width: 100%; min-height: 200px; box-sizing: border-box;
            background: rgba(255,255,255,0.025); border: 1px solid rgba(92,225,230,0.10); border-top: none; border-radius: 0 0 10px 10px;
            color: var(--exam-text-color); overflow-x: auto; cursor: text; display: flex; flex-direction: column; align-items: stretch; padding: 15px 0;
        }
        body:not(.dark-mode) .math-editor-container { background: #ffffff; border-color: rgba(15,23,42,0.1); }
        
                math-field {
            width: 100%; border: none !important; box-shadow: none !important; padding: 5px 20px; font-size: 1.6rem; outline: none !important; background: transparent !important; color: var(--exam-text-color);
            --caret-color: var(--accent-cyan);
            --selection-background-color: rgba(92,225,230,0.2);
            --selection-color: var(--accent-cyan);
        }
        math-field:focus-within { border: none !important; box-shadow: none !important; outline: none !important; background: rgba(92,225,230,0.02) !important; }

        #latex-output {
            width: 100%; height: 100px; margin-top: 10px; background: rgba(255,255,255,0.025);
            border: 1px solid rgba(92,225,230,0.10); border-radius: 10px; padding: 12px;
            color: var(--exam-text-color); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
            resize: vertical; box-sizing: border-box; outline: none;
        }
        body:not(.dark-mode) #latex-output { background: #ffffff; border-color: rgba(15,23,42,0.1); }

    

/* Zen Mode */
body.zen-mode #sidebar-placeholder,
body.zen-mode #topbar-placeholder,
body.zen-mode .tags-comment-sidebar,
body.zen-mode .exam-meta,
body.zen-mode .exam-back-btn,
body.zen-mode .latex-hero,
body.zen-mode .math-notice {
    display: none !important;
}

body.zen-mode .main-content-layout {
    grid-template-columns: 1fr;
    margin-top: 0;
    gap: 0;
}

body.zen-mode .main-wrapper {
    padding: 0;
    margin: 0;
    max-width: 100% !important;
}

body.zen-mode .latex-workspace {
    margin-bottom: 0;
}


/* Vietnamese Inline Input Popup Premium */
.vi-input-wrapper {
    position: fixed;
    z-index: 10000;
    animation: viPopup 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.vi-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--nav-bg, #1e293b);
    border: 1px solid var(--accent-cyan, #5ce1e6);
    border-radius: 12px;
    padding: 8px 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
}

.vi-input-container input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--exam-text-color, #e2e8f0);
    font-size: 1.2rem;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    min-width: 250px;
}

.vi-input-container input::placeholder {
    color: var(--exam-text-color);
    opacity: 0.4;
}

.vi-input-container .vi-icon {
    font-size: 1.3rem;
}

.vi-input-container .vi-hint {
    font-size: 0.75rem;
    color: var(--exam-text-color);
    opacity: 0.5;
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

@keyframes viPopup {
    0% { opacity: 0; transform: translateY(15px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Nút Nổi Bật & Nút Trợ Giúp ── */
.pane-btn.btn-highlight {
    background: rgba(92,225,230,0.18) !important;
    border-color: rgba(92,225,230,0.55) !important;
    color: var(--accent-cyan, #5ce1e6) !important;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(92,225,230,0.12);
}
.pane-btn.btn-highlight:hover {
    background: rgba(92,225,230,0.30) !important;
    border-color: rgba(92,225,230,0.85) !important;
    box-shadow: 0 0 14px rgba(92,225,230,0.25);
}

.pane-btn-help {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2px 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.70rem;
    color: var(--exam-text-color);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
    outline: none;
}
.pane-btn-help:hover {
    background: rgba(92,225,230,0.15);
    border-color: var(--accent-cyan, #5ce1e6);
    color: var(--accent-cyan, #5ce1e6);
}

/* ── Modal Hướng Dẫn MathType Trực Quan ── */
.guide-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 16px;
}
.guide-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.guide-modal-box {
    background: var(--body-bg, #0b1111);
    border: 1px solid rgba(92,225,230,0.25);
    border-radius: 14px;
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.65);
    display: flex;
    flex-direction: column;
    transform: translateY(15px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.guide-modal-overlay.active .guide-modal-box {
    transform: translateY(0) scale(1);
}
body:not(.dark-mode) .guide-modal-box {
    background: #ffffff;
    border-color: rgba(15,23,42,0.15);
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.guide-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(92,225,230,0.12);
}
.guide-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.12rem;
    color: var(--exam-bold-color, #fff);
    display: flex;
    align-items: center;
}
.guide-modal-close {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: var(--exam-text-color);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
}
.guide-modal-close:hover {
    opacity: 1;
    color: var(--accent-cyan, #5ce1e6);
}

.guide-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--exam-text-color);
    line-height: 1.6;
}

.guide-step-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px 16px;
}
body:not(.dark-mode) .guide-step-card {
    background: #f8fafc;
    border-color: rgba(15,23,42,0.08);
}

.guide-step-card.highlight {
    background: rgba(92,225,230,0.04);
    border-color: rgba(92,225,230,0.30);
}
body:not(.dark-mode) .guide-step-card.highlight {
    background: rgba(0,158,179,0.05);
    border-color: rgba(0,158,179,0.25);
}

.guide-step-card .step-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.70rem;
    color: var(--accent-cyan, #5ce1e6);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin-bottom: 5px;
}
.guide-step-card h4 {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    color: var(--exam-bold-color, #fff);
    font-weight: 600;
}
.guide-step-card ol {
    margin: 6px 0 0 18px;
    padding: 0;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.guide-step-card kbd {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    color: var(--exam-bold-color, #fff);
    display: inline-block;
    vertical-align: middle;
}
body:not(.dark-mode) .guide-step-card kbd {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #0f172a;
}
.guide-step-card kbd.kbd-accent {
    background: rgba(92,225,230,0.16);
    border-color: rgba(92,225,230,0.6);
    color: var(--accent-cyan, #5ce1e6);
    font-weight: bold;
}

.guide-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(92,225,230,0.12);
    display: flex;
    justify-content: flex-end;
}