:root {
    --brand: #ae1c3f;
    --brand-dark: #8f1734;
}

html, body {
    height: 100%;
    margin: 0;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#app-main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
}

header {
    background-color: var(--brand);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
}

html, body {
    overflow-x: hidden;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--brand);
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.footer-safe-pad {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

button {
    transition: background-color 0.2s, transform 0.2s;
}

button:hover {
    transform: scale(1.03);
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

#question-container, #answer-container {
    animation: fadeIn 0.4s ease-in-out;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#setup-container.collapsed { display: none; }
#setup-container.expanded { display: flex; }

select, input[type="number"] {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus, input[type="number"]:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(174, 28, 63, 0.15);
}

select option {
    color: #000;
}

.correct-answer {
    background-color: #d1fae5;
    border-color: #10b981;
    border-width: 2px;
}

.incorrect-answer {
    background-color: #fee2e2;
    border-color: #ef4444;
    border-width: 2px;
}

.selected-answer {
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    border-color: #64748b;
}

#question-status {
    background-color: white;
    color: var(--brand-dark);
    border-radius: 9999px;
}

#question-container h5 {
    color: #006633;
    text-align: justify;
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
}

.question {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: block;
    margin: 0;
    text-align: justify;
}

#answer-container div {
    text-align: justify;
}

#question-container p {
    color: #003366;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.4;
}

#answer-container div {
    font-size: 12px;
    line-height: 1.4;
    padding: 8px !important;
}

button#startQuiz, button#reloadPage {
    background-color: #EE7621;
    border-color: #EE7621;
}

button#startQuiz:hover, button#reloadPage:hover {
    background-color: #e65c00;
    border-color: #e65c00;
}

#submitQuiz {
    background-color: #009900;
    color: white;
}

#submitQuiz:hover {
    background-color: #00b300;
}

#confirmationModal, #resultModal {
    z-index: 1002;
}

.hidden { display: none; }

@media (min-width: 640px) {
    #confirmationModal div, #resultModal div { width: 400px; }
}

@media (max-width: 639px) {
    #confirmationModal div, #resultModal div { width: 90%; }
}

.logo {
    border: 1px solid white;
    border-radius: 4px;
}

/* --- Nut chon nguon de: he thong / tu upload --- */
.source-tab {
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 11px;
}

.source-tab.active-tab {
    background-color: var(--brand);
    color: white;
    border-color: var(--brand);
}

.source-tab:hover {
    transform: none;
}

/* --- Cac thanh phan form dung chung trong panel thiet lap --- */
.step-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}

.field-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.field-select, .field-input {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #fff;
}

.exam-check-list {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    max-height: 168px;
    overflow-y: auto;
    background-color: #fff;
}

.exam-check-empty {
    padding: 0.7rem;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

.exam-check-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}

.exam-check-row + .exam-check-row {
    border-top: 1px solid #f1f2f4;
}

.exam-check-row:hover {
    background-color: #f9fafb;
}

.exam-check-row.checked {
    background-color: #fdf1f4;
}

.exam-check-row input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--brand);
    flex-shrink: 0;
}

.exam-check-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.35;
}

.exam-check-count {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: #6b7280;
    background-color: #f3f4f6;
    border-radius: 9999px;
    padding: 0.15rem 0.55rem;
}

.exam-check-row.checked .exam-check-count {
    color: var(--brand-dark);
    background-color: #fbdde6;
}

.upload-box {
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
}

.btn-primary {
    background-color: #EE7621;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 12px;
}

.btn-primary:hover {
    background-color: #e65c00;
}

.btn-secondary {
    background-color: #4f46e5;
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 11px;
}

.btn-secondary:hover {
    background-color: #4338ca;
}

.count-chip {
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    color: #4b5563;
    font-size: 11px;
    font-weight: 500;
}

.count-chip.active-chip {
    background-color: var(--brand);
    border-color: var(--brand);
    color: white;
}

.count-chip:hover {
    transform: none;
    border-color: var(--brand);
}

.options-box {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    font-size: 11px;
    color: #374151;
    cursor: pointer;
}

.option-row + .option-row {
    border-top: 1px solid #e5e7eb;
}

.option-row:hover {
    background-color: #f9fafb;
}

.option-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand);
    flex-shrink: 0;
}

/* --- Nut Truoc / Sau dang thanh dai, de bam --- */
.nav-arrow-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    max-width: 7rem;
    justify-content: center;
    color: white;
    background-color: #374151;
    border-radius: 9999px;
    height: 2.5rem;
    padding: 0 0.9rem;
    font-size: 11px;
    font-weight: 600;
}

.nav-arrow-btn:hover {
    background-color: #1f2937;
}

.nav-arrow-btn:active {
    background-color: #111827;
}

.nav-arrow-btn:disabled {
    background-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.6);
}

/* --- Nut noi (FAB) keo/tha + panel danh sach cau hoi --- */
.nav-fab {
    position: fixed;
    z-index: 1001;
    touch-action: none;
    user-select: none;
}

.nav-fab.is-dragging {
    transition: none !important;
}

.nav-fab.is-peek {
    opacity: 0.55;
}

.nav-panel-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(6.5rem + env(safe-area-inset-bottom));
    z-index: 1001;
}

.nav-panel {
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
}

.nav-grid-scroll {
    overflow-y: auto;
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    border: 1px solid;
}

.legend-answered {
    background-color: #dbeafe;
    border-color: #60a5fa;
}

.legend-blank {
    background-color: #fff;
    border-color: #d1d5db;
}

.nav-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 0.4rem;
    font-size: 10px;
    font-weight: 500;
    color: #374151;
    background-color: #fff;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.nav-cell:hover {
    border-color: var(--brand);
    transform: none;
}

.nav-cell.nav-cell-answered {
    background-color: #dbeafe;
    border-color: #60a5fa;
    color: #1d4ed8;
}

.nav-cell.nav-cell-current {
    background-color: var(--brand);
    border-color: var(--brand);
    color: white;
}

/* --- The ung ho ca phe (donate), dat cuoi panel cau hinh --- */
.donate-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fff1f2, #fff7ed);
    border: 1.5px dashed #f9a8d4;
    border-radius: 0.85rem;
    padding: 0.75rem;
}

.donate-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
}

.donate-qr {
    width: 56px;
    height: 56px;
    border-radius: 0.4rem;
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    display: block;
}

.donate-title {
    font-size: 11px;
    font-weight: 700;
    color: #be185d;
    margin-bottom: 2px;
}

.donate-text {
    font-size: 10px;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

.donate-account {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border: 1px dashed #f9a8d4;
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    text-align: left;
}

.donate-account:hover {
    background-color: #fff1f2;
    transform: none;
}

.donate-account.copied {
    border-color: #34d399;
    background-color: #ecfdf5;
}

.donate-account-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.donate-account-number {
    font-size: 11px;
    font-weight: 700;
    color: #be185d;
    letter-spacing: 0.02em;
}

.donate-account-bank {
    font-size: 9px;
    color: #9ca3af;
    white-space: normal;
}

.donate-copy-icon {
    font-size: 11px;
    flex-shrink: 0;
}

/* --- Bo dem luot truy cap: dong chu nho, nhe nhang, dat cuoi khung thiet lap --- */
.visit-counter-wrap {
    text-align: center;
    font-size: 10.5px;
    color: #9ca3af;
    margin: 0;
}

#visit-counter {
    font-weight: 600;
    color: #6b7280;
}

/* ===================================================================
   Hop thoai chon giao dien (mobile gon nhe / desktop co dien)
   =================================================================== */
.theme-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2000;
}

.theme-modal-overlay.hidden {
    display: none;
}

.theme-modal-panel {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    text-align: center;
}

.theme-modal-panel h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.25rem;
}

.theme-modal-sub {
    font-size: 11px;
    color: #9ca3af;
    margin: 0 0 1rem;
}

.theme-modal-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.theme-option-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.6rem;
    background: #fff;
}

.theme-option-btn:hover {
    border-color: var(--brand);
    background-color: #fdf1f4;
    transform: none;
}

.theme-option-icon {
    font-size: 20px;
}

.theme-option-title {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.theme-option-desc {
    font-size: 11px;
    color: #6b7280;
}

/* ===================================================================
   Giao dien Desktop co dien (chi anh huong man hinh lam bai)
   =================================================================== */
.exam-title-bar {
    background-color: #4a4a4a;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 16px;
}

body:not(.theme-desktop):not(.theme-win95) .exam-title-bar {
    display: none !important;
}

#resultModal #scoreBadge {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border: 7px solid #2f6fb3;
    font-size: 20px;
    font-weight: 700;
    color: #222;
    flex-shrink: 0;
}

.score-badge.pass { border-color: #2e8b3d; }
.score-badge.fail { border-color: #c0392b; }

body:not(.theme-desktop):not(.theme-win95) .score-badge {
    display: none !important;
}

body.theme-desktop , body.theme-win95 {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

body.theme-desktop #app-main , body.theme-win95 #app-main {
    max-width: 900px !important;
}

body.theme-desktop header , body.theme-win95 header {
    background-color: #3a3a3a;
    box-shadow: none;
    border-bottom: 1px solid #2a2a2a;
}

body.theme-desktop .logo , body.theme-win95 .logo {
    border-color: rgba(255, 255, 255, 0.4);
}

body.theme-desktop #quiz-timer , body.theme-win95 #quiz-timer {
    background-color: transparent;
    color: #cfcfcf;
    font-weight: 600;
}

body.theme-desktop #submitQuiz , body.theme-win95 #submitQuiz {
    background-color: #fff;
    color: #c0392b;
    border: 1px solid #c9c9c9;
}

body.theme-desktop #submitQuiz:hover , body.theme-win95 #submitQuiz:hover {
    background-color: #f0f0f0;
}

/* Khi dang lam bai: bo gioi han chieu rong, khung cau hoi trai dai het man hinh nhu file mau */
body.theme-desktop #app-main.exam-mode , body.theme-win95 #app-main.exam-mode {
    max-width: none !important;
    padding: 0 !important;
}

body.theme-desktop #app-main.exam-mode #result-banner , body.theme-win95 #app-main.exam-mode #result-banner {
    margin-left: 16px;
    margin-right: 16px;
}

body.theme-desktop #quiz-container , body.theme-win95 #quiz-container {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 28px 30px 40px;
}

body.theme-desktop #question-container p , body.theme-win95 #question-container p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #222;
}

body.theme-desktop #answer-container div , body.theme-win95 #answer-container div {
    position: relative;
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 10px 14px 10px 36px !important;
    border-radius: 4px;
    border: 1px solid transparent;
}

body.theme-desktop #answer-container div:hover , body.theme-win95 #answer-container div:hover {
    background-color: #f5f7fa;
}

body.theme-desktop #answer-container div::before , body.theme-win95 #answer-container div::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #9aa0b0;
    background: #fff;
    box-sizing: border-box;
}

body.theme-desktop #answer-container div.selected-answer , body.theme-win95 #answer-container div.selected-answer {
    background-color: #eef4fc;
    border-color: transparent;
}

body.theme-desktop #answer-container div.selected-answer::before , body.theme-win95 #answer-container div.selected-answer::before {
    border-color: #2f6fb3;
    background: radial-gradient(circle, #2f6fb3 40%, #fff 44%);
}

body.theme-desktop #answer-container div.correct-answer::before , body.theme-win95 #answer-container div.correct-answer::before {
    border-color: #2e8b3d;
    background: radial-gradient(circle, #2e8b3d 40%, #fff 44%);
}

body.theme-desktop #answer-container div.incorrect-answer::before , body.theme-win95 #answer-container div.incorrect-answer::before {
    border-color: #c0392b;
    background: radial-gradient(circle, #c0392b 40%, #fff 44%);
}

body.theme-desktop footer , body.theme-win95 footer {
    background-color: #4a4a4a;
    box-shadow: none;
}

body.theme-desktop #quiz-footer > div , body.theme-win95 #quiz-footer > div {
    max-width: none;
    width: 100%;
    padding-left: 22px;
    padding-right: 22px;
}

body.theme-desktop .nav-arrow-btn , body.theme-win95 .nav-arrow-btn {
    background-color: #fff;
    color: #333;
    border-radius: 4px;
}

body.theme-desktop .nav-arrow-btn:hover:not(:disabled) , body.theme-win95 .nav-arrow-btn:hover:not(:disabled) {
    background-color: #f0f0f0;
}

body.theme-desktop .nav-arrow-btn:disabled , body.theme-win95 .nav-arrow-btn:disabled {
    background-color: #d9d9d9;
    color: #999;
}

body.theme-desktop #question-status , body.theme-win95 #question-status {
    background-color: #fff;
    color: #222;
}

body.theme-desktop .nav-fab , body.theme-win95 .nav-fab {
    background-color: #2f6fb3 !important;
}

body.theme-desktop .nav-cell.nav-cell-answered , body.theme-win95 .nav-cell.nav-cell-answered {
    background-color: #dbe7fb;
    border-color: #7fb2e6;
    color: #2f6fb3;
}

body.theme-desktop .nav-cell.nav-cell-current , body.theme-win95 .nav-cell.nav-cell-current {
    background-color: #2f6fb3;
    border-color: #2f6fb3;
}

body.theme-desktop .legend-answered , body.theme-win95 .legend-answered {
    background-color: #dbe7fb;
    border-color: #7fb2e6;
}

body.theme-desktop #confirmSubmit , body.theme-win95 #confirmSubmit {
    background-color: #c0392b;
}

body.theme-desktop #confirmSubmit:hover , body.theme-win95 #confirmSubmit:hover {
    background-color: #a5311f;
}

body.theme-desktop #closeResultModal , body.theme-win95 #closeResultModal {
    background-color: #44576f;
}

body.theme-desktop #closeResultModal:hover , body.theme-win95 #closeResultModal:hover {
    background-color: #3a4a60;
}

body.theme-desktop #themeSwitchBtn , body.theme-win95 #themeSwitchBtn {
    background-color: #fff;
    color: #333;
    border: 1px solid #c9c9c9;
}

body.theme-desktop #themeSwitchBtn:hover , body.theme-win95 #themeSwitchBtn:hover {
    background-color: #f0f0f0;
}

/* Nut lam moi trang tren giao dien mobile - chay o che do PWA khong co nut refresh cua trinh duyet */
.mobile-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    flex-shrink: 0;
}

.mobile-refresh-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

body.theme-desktop .mobile-refresh-btn , body.theme-win95 .mobile-refresh-btn {
    display: none;
}

.desktop-q-counter {
    display: none;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}

body.theme-desktop .desktop-q-counter , body.theme-win95 .desktop-q-counter {
    display: block;
}

/* Nut Nop bai / Danh sach cau hoi rieng cho desktop, thay the FAB tren mobile */
.bottom-btn-desktop {
    display: none;
}

body.theme-desktop .bottom-btn-desktop , body.theme-win95 .bottom-btn-desktop {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #fff;
    color: #333;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 12px;
    font-weight: 600;
}

body.theme-desktop .bottom-btn-desktop:hover , body.theme-win95 .bottom-btn-desktop:hover {
    background-color: #f0f0f0;
}

.bottom-btn-desktop.hidden {
    display: none !important;
}

body.theme-desktop #submitQuizDesktop , body.theme-win95 #submitQuizDesktop {
    color: #c0392b;
    border-color: #c0392b;
    margin-right: auto;
}

body.theme-desktop #btnListDesktop , body.theme-win95 #btnListDesktop {
    margin-left: auto;
}

/* Tren desktop: an nut Nop bai o header va FAB, dung ban footer thay the */
body.theme-desktop #submitQuiz,
body.theme-win95 #submitQuiz,
body.theme-desktop #questionNavToggle,
body.theme-win95 #questionNavToggle {
    display: none !important;
}

/* Thuong hieu ben trai header, chi hien tren desktop */
.desktop-brand {
    display: none;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}

body.theme-desktop .desktop-brand , body.theme-win95 .desktop-brand {
    display: inline-block;
    color: #fff;
}

/* Bo dem cau hoi + thoi gian giua header, chi hien tren desktop */
.desktop-q-counter {
    display: none;
    text-align: center;
}

body.theme-desktop .desktop-q-counter , body.theme-win95 .desktop-q-counter {
    display: block;
}

.desktop-q-counter-line1 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.desktop-q-counter-line2 {
    font-size: 10.5px;
    color: #cfcfcf;
    margin-top: 1px;
}

body.theme-desktop #quiz-timer , body.theme-win95 #quiz-timer {
    display: none;
}

/* Nut Quay lai / Tiep theo tren header, chi hien tren desktop */
.nav-btn-desktop {
    display: none;
}

body.theme-desktop .nav-btn-desktop , body.theme-win95 .nav-btn-desktop {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #fff;
    border: 1px solid #c9c9c9;
    color: #444;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

body.theme-desktop .nav-btn-desktop:hover:not(:disabled) , body.theme-win95 .nav-btn-desktop:hover:not(:disabled) {
    background-color: #f0f0f0;
}

body.theme-desktop .nav-btn-desktop:disabled , body.theme-win95 .nav-btn-desktop:disabled {
    opacity: 0.45;
}

/* An cac phan tu mobile bi trung lap voi header/footer desktop */
body.theme-desktop #quiz-footer #prev-button,
body.theme-win95 #quiz-footer #prev-button,
body.theme-desktop #quiz-footer #next-button,
body.theme-win95 #quiz-footer #next-button,
body.theme-desktop #question-status,
body.theme-win95 #question-status {
    display: none !important;
}

/* Nut co danh dau cau hoi, canh cau hoi - chi hien tren desktop */
.question-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.flag-btn-desktop {
    display: none;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    filter: grayscale(1);
    opacity: 0.5;
}

body.theme-desktop .flag-btn-desktop , body.theme-win95 .flag-btn-desktop {
    display: flex;
}

.flag-btn-desktop.active {
    border-color: #e08a1e;
    background-color: #fff6ea;
    filter: none;
    opacity: 1;
}

/* Nut OK cuoi thanh footer, hieu ung pulse khi bam - chi hien tren desktop */
body.theme-desktop #btnOkDesktop , body.theme-win95 #btnOkDesktop {
    background-color: #44576f;
    color: #fff;
    border-color: #44576f;
}

body.theme-desktop #btnOkDesktop:hover , body.theme-win95 #btnOkDesktop:hover {
    background-color: #3a4a60;
}

#btnOkDesktop.pulse {
    animation: btnOkPulse 0.35s ease;
}

@keyframes btnOkPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Danh sach cau hoi: luoi so tren mobile, danh sach day du (co van ban + co) tren desktop */
.nav-cell-num {
    display: block;
}

.nav-cell-text,
.nav-cell-flag {
    display: none;
}

body.theme-desktop .nav-panel-wrap , body.theme-win95 .nav-panel-wrap {
    max-width: none;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 900;
}

body.theme-desktop .nav-panel , body.theme-win95 .nav-panel {
    max-height: none;
    height: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

body.theme-desktop #question-nav-grid , body.theme-win95 #question-nav-grid {
    flex: 1 1 auto;
    padding: 0 30px 20px;
}

body.theme-desktop .nav-panel > div:first-child , body.theme-win95 .nav-panel > div:first-child {
    padding: 22px 30px 14px;
    border-bottom: 1px solid #e6e6e6;
}

body.theme-desktop #question-nav-grid , body.theme-win95 #question-nav-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.theme-desktop .nav-cell , body.theme-win95 .nav-cell {
    aspect-ratio: auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 8px;
    border: none;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0;
    font-size: 13px;
    text-align: left;
}

body.theme-desktop .nav-cell-num , body.theme-win95 .nav-cell-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #9aa0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #6f74c9;
}

body.theme-desktop .nav-cell.nav-cell-answered .nav-cell-num , body.theme-win95 .nav-cell.nav-cell-answered .nav-cell-num {
    background-color: #6f74c9;
    border-color: #6f74c9;
    color: #fff;
}

body.theme-desktop .nav-cell-text , body.theme-win95 .nav-cell-text {
    display: block;
    flex: 1 1 auto;
    white-space: normal;
    color: #333;
    line-height: 1.4;
}

body.theme-desktop .nav-cell.nav-cell-current , body.theme-win95 .nav-cell.nav-cell-current {
    background-color: #eef3fb;
    border-left: 3px solid #2f6fb3;
    padding-left: 5px;
}

body.theme-desktop .nav-cell.nav-cell-current .nav-cell-text , body.theme-win95 .nav-cell.nav-cell-current .nav-cell-text {
    font-weight: 700;
    color: #1c1c1c;
}

body.theme-desktop .nav-cell-flag , body.theme-win95 .nav-cell-flag {
    display: block;
    flex-shrink: 0;
    opacity: 0.25;
    font-size: 13px;
}

body.theme-desktop .nav-cell.nav-cell-flagged .nav-cell-flag , body.theme-win95 .nav-cell.nav-cell-flagged .nav-cell-flag {
    opacity: 1;
}

/* ===================================================================
   Giao dien Windows 95 hoai co - ke thua toan bo bo cuc cua theme
   Desktop o tren, chi doi lai mau sac / font / vien 3D cho dung chat
   retro. Dat sau cung de thang ve do uu tien khi trung selector.
   =================================================================== */

.win95-boot {
    position: fixed;
    inset: 0;
    background: #000;
    color: #c0c0c0;
    font-family: "Courier New", monospace;
    padding: 30px;
    z-index: 5000;
    font-size: 14px;
    line-height: 1.6;
}

.win95-cursor {
    animation: win95Blink 0.8s infinite;
}

@keyframes win95Blink {
    50% { opacity: 0; }
}

body.theme-win95 {
    font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
    background-color: #008080;
}

body.theme-win95 #app-main {
    background-color: #c0c0c0;
}

.win95-menu-bar {
    display: none;
    background-color: #c0c0c0;
    color: #000;
    padding: 4px 10px;
    font-size: 12px;
    gap: 18px;
    border-bottom: 1px solid #808080;
    box-shadow: 0 1px 0 #fff;
}

body.theme-win95 .win95-menu-bar {
    display: flex;
}

.win95-menu-bar span {
    cursor: pointer;
}

.win95-menu-bar span:hover {
    background-color: #000080;
    color: #fff;
}

.win95-controls {
    display: none;
    align-items: center;
    gap: 2px;
}

body.theme-win95 .win95-controls {
    display: flex;
}

.win95-btn {
    width: 20px;
    height: 19px;
    background-color: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    display: grid;
    place-items: center;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

.win95-btn:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

body.theme-win95 header {
    background-color: #000080;
    border-bottom: 2px solid #000;
}

body.theme-win95 .desktop-brand,
body.theme-win95 .desktop-q-counter-line1 {
    color: #fff;
    font-family: inherit;
}

body.theme-win95 .desktop-q-counter-line2 {
    color: #b8c4e0;
    font-family: inherit;
}

body.theme-win95 #themeSwitchBtn,
body.theme-win95 .mobile-refresh-btn,
body.theme-win95 .nav-btn-desktop,
body.theme-win95 .bottom-btn-desktop {
    background-color: #c0c0c0;
    color: #000;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    border-radius: 0;
    font-family: inherit;
}

body.theme-win95 #themeSwitchBtn:hover,
body.theme-win95 .mobile-refresh-btn:hover,
body.theme-win95 .nav-btn-desktop:hover:not(:disabled),
body.theme-win95 .bottom-btn-desktop:hover {
    background-color: #d4d4d4;
}

body.theme-win95 #themeSwitchBtn:active,
body.theme-win95 .nav-btn-desktop:active:not(:disabled),
body.theme-win95 .bottom-btn-desktop:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

body.theme-win95 #submitQuizDesktop {
    color: #000;
    border-color: #fff #404040 #404040 #fff;
}

body.theme-win95 #btnOkDesktop {
    background-color: #c0c0c0;
    color: #000;
}

/* Thanh tieu de bai thi - giu vai tro nhu thanh dia chi/duong dan file */
body.theme-win95 .exam-title-bar {
    background-color: #c0c0c0;
    color: #000;
    font-family: inherit;
    border-top: 2px solid #808080;
    border-bottom: none;
    box-shadow: inset 0 1px 0 #fff;
}

/* Khung thiet lap / khung cau hoi kieu panel Win95 */
body.theme-win95 #setup-container,
body.theme-win95 #quiz-container,
body.theme-win95 #result-banner {
    background-color: #c0c0c0;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 0;
    box-shadow: none;
}

body.theme-win95 #quiz-container {
    border: none;
}

body.theme-win95 #question-container p,
body.theme-win95 #question-container h5 {
    font-family: inherit;
    color: #000;
}

/* Nut bam kieu 3D noi len */
body.theme-win95 .btn-primary,
body.theme-win95 .btn-secondary,
body.theme-win95 .source-tab,
body.theme-win95 .count-chip,
body.theme-win95 #reloadPage {
    background-color: #c0c0c0 !important;
    color: #000 !important;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    border-radius: 0;
    font-family: inherit;
    box-shadow: none;
}

body.theme-win95 .btn-primary:active,
body.theme-win95 .btn-secondary:active,
body.theme-win95 .source-tab:active,
body.theme-win95 .count-chip:active,
body.theme-win95 #reloadPage:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

body.theme-win95 .source-tab.active-tab,
body.theme-win95 .count-chip.active-chip {
    background-color: #000080 !important;
    color: #fff !important;
}

/* O nhap / danh sach kieu sunken (chim xuong) */
body.theme-win95 .field-select,
body.theme-win95 .field-input,
body.theme-win95 .exam-check-list,
body.theme-win95 .options-box,
body.theme-win95 .upload-box {
    background-color: #fff;
    border: none;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 0;
}

body.theme-win95 .exam-check-row.checked {
    background-color: #000080;
}

body.theme-win95 .exam-check-row.checked .exam-check-name,
body.theme-win95 .exam-check-row.checked .exam-check-count {
    color: #fff;
    background: transparent;
}

/* Dap an dang o vuong, cham chon mau navy co dien */
body.theme-win95 #answer-container div {
    border-radius: 0 !important;
    border: 1px solid #808080 !important;
    background-color: #fff;
}

body.theme-win95 #answer-container div::before {
    border-radius: 0;
    border-color: #404040;
}

body.theme-win95 #answer-container div.selected-answer {
    background-color: #dce4f7;
}

body.theme-win95 #answer-container div.selected-answer::before,
body.theme-win95 #answer-container div.correct-answer::before,
body.theme-win95 #answer-container div.incorrect-answer::before {
    background: #000080;
    border-color: #000080;
}

/* Footer/taskbar mau xam co dien thay vi mau toi cua ban Desktop */
body.theme-win95 footer {
    background-color: #c0c0c0;
    border-top: 2px solid #fff;
}

body.theme-win95 #question-status {
    background-color: #c0c0c0;
    color: #000;
    border-radius: 0;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* Danh sach cau hoi - panel sunken, cham navy */
body.theme-win95 .nav-panel {
    background-color: #c0c0c0;
}

body.theme-win95 .nav-cell {
    border-bottom: 1px solid #808080 !important;
}

body.theme-win95 .nav-cell.nav-cell-current {
    background-color: #000080 !important;
    border-left: 3px solid #fff !important;
}

body.theme-win95 .nav-cell.nav-cell-current .nav-cell-text {
    color: #fff !important;
}

body.theme-win95 .nav-cell-num {
    border-radius: 0;
    border-color: #404040 #fff #fff #404040;
}

body.theme-win95 .nav-cell.nav-cell-answered .nav-cell-num {
    background-color: #000080 !important;
    border-color: #000080 !important;
}

/* Modal kieu hop thoai Win95 */
body.theme-win95 #confirmationModal > div,
body.theme-win95 #resultModal > div {
    background-color: #c0c0c0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    border-radius: 0;
}

body.theme-win95 #confirmSubmit,
body.theme-win95 #cancelSubmit,
body.theme-win95 #closeResultModal {
    background-color: #c0c0c0 !important;
    color: #000 !important;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    border-radius: 0;
}

body.theme-win95 #resultModal #scoreBadge {
    border-color: #000080;
    border-radius: 0;
}