/* style.css - Gộp toàn bộ style cho cả Light Mode và Dark Mode */

/* Định nghĩa biến CSS cho cả Light và Dark Mode */
:root {
    /* Light Theme Variables - Cải thiện độ tương phản */
    --bg-main-light: #f3f4f6; /* Tailwind gray-100 */
    --text-main-light: #111827; /* Tailwind gray-900 */
    --text-secondary-light: #374151; /* Tailwind gray-700 */
    --text-muted-light: #6b7280; /* Tailwind gray-500 */

    --card-bg-light: #ffffff;
    --card-bg-hover-light: #e5e7eb; /* Tailwind gray-200 */
    --border-main-light: #9ca3af; /* Tailwind gray-400 */

    --select-bg-light: #ffffff; /* White */
    --select-border-light: #9ca3af; /* Tailwind gray-400 */
    --select-text-light: #111827; /* Dark gray / Black */
    --select-focus-ring-light: #3b82f6;

    --btn-primary-bg-light: #2563eb; /* blue-600 */
    --btn-primary-hover-bg-light: #1d4ed8; /* blue-700 */
    --btn-primary-text-light: #ffffff;

    --btn-secondary-bg-light: var(--btn-primary-bg-light);
    --btn-secondary-hover-bg-light: var(--btn-primary-hover-bg-light);
    --btn-secondary-text-light: var(--btn-primary-text-light);

    --btn-outline-border-light: #1d4ed8;
    --btn-outline-text-light: #1d4ed8;
    --btn-outline-light-hover-bg: #dbeafe;
    --btn-outline-light-hover-text: #1e40af;

    --link-text-light: #1d4ed8;
    --link-hover-text-light: #1e3a8a;

    --header-bg-light: #ffffff;
    --header-text-light: #111827;
    --header-nav-link-light: #374151;
    --header-nav-link-hover-light: var(--link-text-light);
    --header-dropdown-bg-light: #ffffff;
    --header-dropdown-border-light: var(--border-main-light);
    --header-dropdown-item-text-light: var(--text-secondary-light);
    --header-dropdown-item-hover-bg-light: var(--card-bg-hover-light);
    --header-dropdown-item-hover-text-light: var(--link-text-light);
    --theme-toggle-icon-light: #4b5563;
    --theme-toggle-icon-hover-light: var(--link-text-light);

    /* Dark Theme Variables */
    --bg-main-dark: #0f172a;
    --text-main-dark: #f8fafc;
    --text-secondary-dark: #e2e8f0;
    --text-muted-dark: #94a3b8;

    --card-bg-dark: #1e293b;
    --card-bg-hover-dark: #334155;
    --border-main-dark: #334155;

    --select-bg-dark: #334155;
    --select-border-dark: #475569;
    --select-text-dark: var(--text-main-dark);
    --select-focus-ring-dark: #60a5fa;

    --btn-primary-bg-dark: #3b82f6;
    --btn-primary-hover-bg-dark: #2563eb;
    --btn-primary-text-dark: #ffffff;

    --btn-secondary-bg-dark: #475569; 
    --btn-secondary-hover-bg-dark: #334155;
    --btn-secondary-text-dark: #ffffff;

    --btn-outline-border-dark: #60a5fa;
    --btn-outline-text-dark: #93c5fd;
    --btn-outline-hover-bg-dark: #1e293b;
    --btn-outline-hover-text-dark: #bae6fd;

    --link-text-dark: #60a5fa;
    --link-hover-text-dark: #93c5fd;

    --header-bg-dark: var(--card-bg-dark);
    --header-text-dark: var(--text-main-dark);
    --header-nav-link-dark: var(--text-secondary-dark);
    --header-nav-link-hover-dark: var(--link-text-dark);
    --header-dropdown-bg-dark: var(--card-bg-dark);
    --header-dropdown-border-dark: var(--border-main-dark);
    --header-dropdown-item-text-dark: var(--text-secondary-dark);
    --header-dropdown-item-hover-bg-dark: var(--card-bg-hover-dark);
    --header-dropdown-item-hover-text-dark: var(--link-text-dark);
    --theme-toggle-icon-dark: #94a3b8;
    --theme-toggle-icon-hover-dark: var(--link-text-dark);

    /* Variables for options (correct/incorrect) */
    --option-correct-bg-dark: #065f46;
    --option-correct-border-dark: #34d399;
    --option-correct-text-dark: var(--text-main-dark); 

    --option-incorrect-bg-dark: #991b1b; 
    --option-incorrect-border-dark: #f87171;
    --option-incorrect-text-dark: var(--text-main-dark); 

    --option-correct-bg-light: #dcfce7; 
    --option-correct-border-light: #4ade80; 
    --option-correct-text-light: var(--text-main-light); 

    --option-incorrect-bg-light: #fee2e2; 
    --option-incorrect-border-light: #f87171; 
    --option-incorrect-text-light: var(--text-main-light); 

    /* Feedback colors */
    --feedback-correct-bg-dark: #064E3B;
    --feedback-correct-border-dark: #34D399;
    --feedback-correct-text-dark: #D1FAE5;
    --feedback-incorrect-bg-dark: #7F1D1D;
    --feedback-incorrect-border-dark: #F87171;
    --feedback-incorrect-text-dark: #FEE2E2;

    --feedback-correct-bg-light: #ecfdf5;
    --feedback-correct-border-light: #34d399;
    --feedback-correct-text-light: #047857;
    --feedback-incorrect-bg-light: #fff1f2;
    --feedback-incorrect-border-light: #f43f5e;
    --feedback-incorrect-text-light: #be123c;

    /* Tooltip */
    --tooltip-bg-dark: #e2e8f0; /* Nền sáng cho tooltip ở dark mode */
    --tooltip-text-dark: var(--text-main-light); /* Chữ tối (đen) cho tooltip ở dark mode */
    --tooltip-bg-light: #1e293b; /* Nền tối cho tooltip ở light mode */
    --tooltip-text-light: var(--text-main-dark); /* Chữ sáng (trắng) cho tooltip ở light mode */


    /* Button Warning */
    --btn-warning-bg-dark: #f59e0b;
    --btn-warning-hover-bg-dark: #d97706;
    --btn-warning-text-dark: #ffffff;
    --btn-warning-bg-light: #f59e0b;
    --btn-warning-hover-bg-light: #d97706;
    --btn-warning-text-light: #ffffff;

    /* Explanation Box Light Mode */
    --explanation-container-bg-light: #f9fafb; 
    --explanation-container-border-light: #d1d5db; 
    --explanation-heading-text-light: var(--text-main-light);
    --explanation-content-text-light: var(--text-main-light); 
}

/* === Base Styles === */
html, body {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--bg-main-light);
    color: var(--text-secondary-light);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
    background-color: var(--bg-main-dark);
    color: var(--text-secondary-dark);
}

html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6 {
    color: var(--text-main-light);
}
html:not(.dark) label { /* Màu label mặc định cho Light mode */
    color: var(--text-secondary-light);
    font-weight: 500;
}
html:not(.dark) p:not([class*="text-"]) {
    color: var(--text-secondary-light);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: var(--text-main-dark);
}
.dark label { /* Màu label mặc định cho Dark mode */
    color: var(--text-secondary-dark);
    font-weight: 500;
}
.dark p:not([class*="text-"]) {
    color: var(--text-secondary-dark);
}

select {
    background-color: var(--select-bg-light);
    border: 1px solid var(--select-border-light);
    color: var(--select-text-light);
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
}
select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--select-focus-ring-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.dark select {
    background-color: var(--select-bg-dark);
    border-color: var(--select-border-dark);
    color: var(--select-text-dark);
}
.dark select:focus {
    border-color: var(--select-focus-ring-dark);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.4);
}
.dark select option {
    background-color: var(--select-bg-dark);
    color: var(--select-text-dark);
}

html:not(.dark) select#category-select-quick {
    background-color: var(--select-bg-light) !important; 
    color: var(--select-text-light) !important; 
    border-color: var(--select-border-light) !important; 
}
html:not(.dark) select#category-select-quick option {
    background-color: var(--select-bg-light); 
    color: var(--select-text-light); 
}


html:not(.dark) .settings-card input[type="text"],
html:not(.dark) .settings-card input[type="search"],
html:not(.dark) .settings-card textarea,
html:not(.dark) .quiz-card input[type="text"],
html:not(.dark) .quiz-card textarea {
    background-color: var(--card-bg-light);
    border: 1px solid var(--border-main-light);
    color: var(--text-main-light);
}

html:not(.dark) .settings-card input[type="text"]::placeholder,
html:not(.dark) .settings-card input[type="search"]::placeholder,
html:not(.dark) .settings-card textarea::placeholder {
    color: var(--text-muted-light);
    opacity: 1;
}

html:not(.dark) .settings-card input[type="text"]:focus,
html:not(.dark) .settings-card input[type="search"]:focus,
html:not(.dark) .settings-card textarea:focus {
    border-color: var(--select-focus-ring-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

hr {
    border-color: var(--border-main-light);
}
.dark hr {
    border-color: var(--border-main-dark);
}

/* === General Component Styles (Option Button, Feedback Area) === */
.option-button { 
    display: block; width: 100%; text-align: left; padding: 12px 16px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
}
html:not(.dark) .option-button {
    border: 1px solid var(--border-main-light);
    background-color: var(--card-bg-light);
    color: var(--text-secondary-light);
}
html:not(.dark) .option-button:not(.correct):not(.incorrect):hover { 
    background-color: #e0e7ff;
    border-color: #60a5fa;
    color: #1e3a8a;
}
.dark .option-button {
    border: 1px solid var(--border-main-dark);
    background-color: var(--card-bg-dark);
    color: var(--text-secondary-dark);
}
.dark .option-button:not(.correct):not(.incorrect):hover { 
    background-color: #374151;
    border-color: #60a5fa;
    color: #f0f9ff;
}

html:not(.dark) .option-button.selected { background-color: var(--btn-primary-bg-light) !important; color: var(--btn-primary-text-light) !important; border-color: var(--btn-primary-hover-bg-light) !important; }
html:not(.dark) .option-button.correct { background-color: var(--option-correct-bg-light) !important; border-color: var(--option-correct-border-light) !important; color: var(--option-correct-text-light) !important; }
html:not(.dark) .option-button.incorrect { background-color: var(--option-incorrect-bg-light) !important; border-color: var(--option-incorrect-border-light) !important; color: var(--option-incorrect-text-light) !important; }
.dark .option-button.selected { background-color: var(--btn-primary-bg-dark) !important; color: var(--btn-primary-text-dark) !important; border-color: var(--btn-primary-hover-bg-dark) !important; }
.dark .option-button.correct { background-color: var(--option-correct-bg-dark) !important; border-color: var(--option-correct-border-dark) !important; color: var(--option-correct-text-dark) !important; }
.dark .option-button.incorrect { background-color: var(--option-incorrect-bg-dark) !important; border-color: var(--option-incorrect-border-dark) !important; color: var(--option-incorrect-text-dark) !important; }
.option-button.disabled { pointer-events: none; opacity: 0.7; }


/* Styling cho các lựa chọn đáp án trong learn_mode.js, study_topic.js (.learn-option-item) và quick_learn_mode.js (.option-item) */
.learn-option-item, .option-item { /* Áp dụng chung cho cả hai loại item */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Trạng thái mặc định và hover cho Light Mode */
html:not(.dark) .learn-option-item,
html:not(.dark) .option-item { 
    background-color: var(--card-bg-light);
    border-left-color: transparent; 
    border-color: var(--border-main-light); 
    color: var(--text-main-light); 
}
html:not(.dark) .learn-option-item label, 
html:not(.dark) .option-item label {
    color: var(--text-main-light) !important; 
}

html:not(.dark) .learn-option-item:not(.disabled):not(.correct):not(.incorrect):hover,
html:not(.dark) .option-item:not(.disabled):not(.correct):not(.incorrect):hover {
   background-color: #e0e7ff; 
   border-color: #a5b4fc;    
}
html:not(.dark) .learn-option-item:not(.disabled):not(.correct):not(.incorrect):hover label,
html:not(.dark) .option-item:not(.disabled):not(.correct):not(.incorrect):hover label {
   color: #1e3a8a !important; 
}


/* Trạng thái mặc định và hover cho Dark Mode */
.dark .learn-option-item,
.dark .option-item { 
    background-color: var(--card-bg-dark);
    border-left-color: transparent;
    border-color: var(--border-main-dark);
    color: var(--text-main-dark); 
}
.dark .learn-option-item label, 
.dark .option-item label {
    color: var(--text-main-dark) !important; 
}

.dark .learn-option-item:not(.disabled):not(.correct):not(.incorrect):hover,
.dark .option-item:not(.disabled):not(.correct):not(.incorrect):hover {
    background-color: #334155; 
    border-color: #4b5563; 
}
.dark .learn-option-item:not(.disabled):not(.correct):not(.incorrect):hover label,
.dark .option-item:not(.disabled):not(.correct):not(.incorrect):hover label {
    color: var(--text-main-dark) !important; 
}


/* Trạng thái ĐÚNG */
html:not(.dark) .learn-option-item.correct,
html:not(.dark) .option-item.correct {
    background-color: var(--option-correct-bg-light) !important;
    border-left-color: var(--option-correct-border-light) !important; 
    font-weight: 600;
}
html:not(.dark) .learn-option-item.correct label,
html:not(.dark) .option-item.correct label {
    color: var(--option-correct-text-light) !important; 
}

.dark .learn-option-item.correct,
.dark .option-item.correct {
    background-color: var(--option-correct-bg-dark) !important;
    border-left-color: var(--option-correct-border-dark) !important; 
    font-weight: 600;
}
.dark .learn-option-item.correct label,
.dark .option-item.correct label {
    color: var(--option-correct-text-dark) !important; 
}


/* Trạng thái SAI */
html:not(.dark) .learn-option-item.incorrect,
html:not(.dark) .option-item.incorrect { 
    background-color: var(--option-incorrect-bg-light) !important;
    border-left-color: var(--option-incorrect-border-light) !important; 
    font-weight: 600;
}
html:not(.dark) .learn-option-item.incorrect label,
html:not(.dark) .option-item.incorrect label {
    color: var(--option-incorrect-text-light) !important; 
}

.dark .learn-option-item.incorrect,
.dark .option-item.incorrect { 
    background-color: #dc2626 !important; 
    border-left-color: var(--option-incorrect-border-dark) !important; 
    font-weight: 600;
}
.dark .learn-option-item.incorrect label,
.dark .option-item.incorrect label {
    color: var(--option-incorrect-text-dark) !important; 
}


.learn-option-item.disabled,
.option-item.disabled {
    cursor: not-allowed;
    opacity: 0.7; 
}

.learn-option-item.disabled.correct:hover,
.option-item.disabled.correct:hover {
    background-color: var(--option-correct-bg-light) !important; 
}
.dark .learn-option-item.disabled.correct:hover,
.dark .option-item.disabled.correct:hover {
    background-color: var(--option-correct-bg-dark) !important; 
}
.learn-option-item.disabled.incorrect:hover,
.option-item.disabled.incorrect:hover {
    background-color: var(--option-incorrect-bg-light) !important; 
}
.dark .learn-option-item.disabled.incorrect:hover,
.dark .option-item.disabled.incorrect:hover {
    background-color: #dc2626 !important; 
}


#feedback-area { max-height: 400px; overflow-y: auto; line-height: 1.6; padding: 1rem; border-radius: 0.375rem; }
html:not(.dark) #feedback-area.correct-feedback { background-color: var(--feedback-correct-bg-light); border-left: 4px solid var(--feedback-correct-border-light); color: var(--feedback-correct-text-light); }
html:not(.dark) #feedback-area.incorrect-feedback { background-color: var(--feedback-incorrect-bg-light); border-left: 4px solid var(--feedback-incorrect-border-light); color: var(--feedback-incorrect-text-light); }
.dark #feedback-area.correct-feedback { background-color: var(--feedback-correct-bg-dark); border-left: 4px solid var(--feedback-correct-border-dark); color: var(--feedback-correct-text-dark); }
.dark #feedback-area.incorrect-feedback { background-color: var(--feedback-incorrect-bg-dark); border-left: 4px solid var(--feedback-incorrect-border-dark); color: var(--feedback-incorrect-text-dark); }

/* === Scrollbar Styles === */
.dark ::-webkit-scrollbar { width: 8px; }
.dark ::-webkit-scrollbar-track { background: #2d3748; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #333; }

/* === Prose Styles === */
.prose-styles img { max-width: 100%; height: auto; border-radius: 0.375rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
html:not(.dark) .prose-styles img { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px 0 rgba(0,0,0,0.04); }
.dark .prose-styles img { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.3); }
.prose-styles ul, .prose-styles ol { list-style-position: inside; margin-left: 1.25rem; }
.prose-styles ul { list-style-type: disc; } .prose-styles ol { list-style-type: decimal; }
html:not(.dark) .prose-styles blockquote { border-left: 4px solid var(--border-main-light); padding-left: 1rem; margin-left: 0; font-style: italic; color: var(--text-muted-light); }
.dark .prose-styles blockquote { border-left: 4px solid var(--border-main-dark); padding-left: 1rem; margin-left: 0; font-style: italic; color: var(--text-secondary-dark); }
.prose-styles h1, .prose-styles h2, .prose-styles h3 { font-weight: 600; margin-top: 1em; margin-bottom: 0.5em; }
.prose-styles h1 { font-size: 1.5em; } .prose-styles h2 { font-size: 1.25em; } .prose-styles h3 { font-size: 1.125em; }

/* === Card Styles === */
.learn-card, .filter-card, .quiz-card, .settings-card, .results-card, .feature-card, .sign-category-card, .sign-card {
    border: 1px solid var(--border-main-light);
    background-color: var(--card-bg-light);
    color: var(--text-main-light);
}
html:not(.dark) .settings-card h2, html:not(.dark) .quiz-card h2, html:not(.dark) .results-card h2, html:not(.dark) .feature-card h3, html:not(.dark) .sign-category-card h2, html:not(.dark) .filter-card h2 {
    color: var(--text-main-light);
}
html:not(.dark) .settings-card label, html:not(.dark) .quiz-card label,
html:not(.dark) .results-card p:not(.text-main),
html:not(.dark) .feature-card p:not(.text-main),
html:not(.dark) .sign-category-card p:not(.text-main),
html:not(.dark) .sign-card p:not(.text-main),
html:not(.dark) .filter-card label {
    color: var(--text-secondary-light);
}
html:not(.dark) .settings-card > .mb-3 > label { 
    color: var(--text-secondary-light);
}
html:not(.dark) #question-text-quick {
    color: var(--text-main-light) !important;
}
html:not(.dark) .question-info-line { 
    color: var(--text-secondary-light);
}
html:not(.dark) .question-text-learn { 
    color: var(--text-main-light);
}


.dark .learn-card, .dark .filter-card, .dark .quiz-card, .dark .settings-card, .dark .results-card, .dark .feature-card, .dark .sign-category-card, .dark .sign-card {
    border: 1px solid var(--border-main-dark);
    background-color: var(--card-bg-dark);
    color: var(--text-main-dark);
}
.dark .settings-card h2, .dark .quiz-card h2, .dark .results-card h2, .dark .feature-card h3, .dark .sign-category-card h2, .dark .filter-card h2 {
    color: var(--text-main-dark);
}
.dark .settings-card label, .dark .quiz-card label,
.dark .results-card p:not(.text-main),
.dark .feature-card p:not(.text-main),
.dark .sign-category-card p:not(.text-main),
.dark .sign-card p:not(.text-main),
.dark .filter-card label {
    color: var(--text-secondary-dark);
}
.dark .question-info-line {
    color: var(--text-secondary-dark);
}
.dark .question-text-learn {
    color: var(--text-main-dark);
}


/* === Tooltip Styles === */
.tooltip { 
    position: relative; 
    display: inline-block; 
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px; /* Increased width */
    text-align: left;
    border-radius: 6px;
    padding: 10px 12px; /* Increased padding */
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    margin-left: -150px; /* Adjusted for new width */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.875rem; /* Increased font size (Tailwind text-sm) */
    line-height: 1.5; /* Improved line height */
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%; 
    left: 50%;
    margin-left: -5px; 
    border-width: 5px;
    border-style: solid;
}

/* Light Mode Tooltip */
html:not(.dark) .tooltip .tooltiptext {
    background-color: var(--tooltip-bg-light); 
    color: var(--tooltip-text-light);       
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Slightly stronger shadow */
}
html:not(.dark) .tooltip .tooltiptext::after {
    border-color: var(--tooltip-bg-light) transparent transparent transparent; 
}

/* Dark Mode Tooltip */
.dark .tooltip .tooltiptext {
    background-color: var(--tooltip-bg-dark); 
    color: var(--tooltip-text-dark);       
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* Slightly stronger shadow */
}
.dark .tooltip .tooltiptext::after {
    border-color: var(--tooltip-bg-dark) transparent transparent transparent; 
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Styling for content within the tooltip */
.explanation-tooltip-content ul { list-style-type: disc; margin-left: 1.25rem; padding-left: 0.5rem; }
.explanation-tooltip-content ol { list-style-type: decimal; margin-left: 1.25rem; padding-left: 0.5rem; }
.explanation-tooltip-content p { margin-bottom: 0.625rem; } /* Increased margin */
.explanation-tooltip-content p:last-child { margin-bottom: 0; }
.explanation-tooltip-content strong { font-weight: 600; } /* Semibold for better emphasis */
.explanation-tooltip-content em { font-style: italic; }

/* Light Mode Tooltip Content Elements */
html:not(.dark) .explanation-tooltip-content { color: var(--tooltip-text-light); }
html:not(.dark) .explanation-tooltip-content p,
html:not(.dark) .explanation-tooltip-content ul,
html:not(.dark) .explanation-tooltip-content ol,
html:not(.dark) .explanation-tooltip-content li,
html:not(.dark) .explanation-tooltip-content strong,
html:not(.dark) .explanation-tooltip-content em { color: inherit; }
html:not(.dark) .explanation-tooltip-content a { color: #a5b4fc; text-decoration: underline; } /* Lighter blue for links */
html:not(.dark) .explanation-tooltip-content a:hover { color: #c7d2fe; }
html:not(.dark) .explanation-tooltip-content code { background-color: rgba(255,255,255,0.15); color: #e5e7eb; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
html:not(.dark) .explanation-tooltip-content pre { background-color: rgba(255,255,255,0.1); color: #e5e7eb; padding: 0.5rem; border-radius: 0.25rem; overflow-x: auto; font-size: 0.85em; }

/* Dark Mode Tooltip Content Elements */
.dark .explanation-tooltip-content { color: var(--tooltip-text-dark); }
.dark .explanation-tooltip-content p,
.dark .explanation-tooltip-content ul,
.dark .explanation-tooltip-content ol,
.dark .explanation-tooltip-content li,
.dark .explanation-tooltip-content strong,
.dark .explanation-tooltip-content em { color: inherit; }
.dark .explanation-tooltip-content a { color: #3b82f6; text-decoration: underline; } /* Standard blue for links */
.dark .explanation-tooltip-content a:hover { color: #2563eb; }
.dark .explanation-tooltip-content code { background-color: rgba(0,0,0,0.1); color: #1a202c; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
.dark .explanation-tooltip-content pre { background-color: rgba(0,0,0,0.05); color: #1a202c; padding: 0.5rem; border-radius: 0.25rem; overflow-x: auto; font-size: 0.85em; }


/* === Button Styles === */
.btn { padding: 0.625rem 1.25rem; border-radius: 0.375rem; font-weight: 600; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; text-align: center; cursor: pointer; }
html:not(.dark) .btn-primary { background-color: var(--btn-primary-bg-light); color: var(--btn-primary-text-light); }
html:not(.dark) .btn-primary:hover { background-color: var(--btn-primary-hover-bg-light); }
.dark .btn-primary { background-color: var(--btn-primary-bg-dark); color: var(--btn-primary-text-dark); }
.dark .btn-primary:hover { background-color: var(--btn-primary-hover-bg-dark); }

html:not(.dark) .btn-secondary {
    background-color: var(--btn-secondary-bg-light);
    color: var(--btn-secondary-text-light);
    border: none;
}
html:not(.dark) .btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg-light);
}

.dark .btn-secondary {
    background-color: var(--btn-secondary-bg-dark);
    color: var(--btn-secondary-text-dark);
    border: none;
}
.dark .btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg-dark);
}


html:not(.dark) .btn-outline { border: 1px solid var(--btn-outline-border-light); color: var(--btn-outline-text-light); background-color: transparent; }
html:not(.dark) .btn-outline:hover { background-color: var(--btn-outline-light-hover-bg); color: var(--btn-outline-light-hover-text); }
.dark .btn-outline { border: 1px solid var(--btn-outline-border-dark); color: var(--btn-outline-text-dark); background-color: transparent; }
.dark .btn-outline:hover { background-color: var(--btn-outline-hover-bg-dark); color: var(--btn-outline-hover-text-dark); }

html:not(.dark) .btn-warning { background-color: var(--btn-warning-bg-light); color: var(--btn-warning-text-light); }
html:not(.dark) .btn-warning:hover { background-color: var(--btn-warning-hover-bg-light); }
.dark .btn-warning { background-color: var(--btn-warning-bg-dark); color: var(--btn-warning-text-dark); }
.dark .btn-warning:hover { background-color: var(--btn-warning-hover-bg-dark); }


/* === Specific Page/Component Styles === */
/* Exam Pages (Motorbike & Car) */
.question-option { padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 0.375rem; }

.question-grid-item { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 500; border-radius: 0.25rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
html:not(.dark) .question-grid-item { background-color: var(--card-bg-light); border: 1px solid var(--border-main-light); color: var(--text-secondary-light); }
html:not(.dark) .question-grid-item:hover { background-color: var(--card-bg-hover-light); }
html:not(.dark) .question-grid-item.current { background-color: var(--btn-primary-bg-light); color: var(--btn-primary-text-light); border-color: var(--btn-primary-hover-bg-light); }
html:not(.dark) .question-grid-item.answered { background-color: var(--option-correct-bg-light); color: var(--option-correct-text-light); border-color: var(--option-correct-border-light); }
html:not(.dark) .question-grid-item.critical-failed { background-color: var(--option-incorrect-bg-light); color: var(--option-incorrect-text-light); border-color: var(--option-incorrect-border-light); }

.dark .question-grid-item { background-color: var(--card-bg-dark); border-color: var(--border-main-dark); color: var(--text-secondary-dark); }
.dark .question-grid-item:hover { background-color: var(--card-bg-hover-dark); }
.dark .question-grid-item.current { background-color: var(--btn-primary-bg-dark); color: var(--btn-primary-text-dark); border-color: var(--btn-primary-hover-bg-dark); }
.dark .question-grid-item.answered { background-color: var(--option-correct-bg-dark); color: var(--option-correct-text-dark); border-color: var(--option-correct-border-dark); }
.dark .question-grid-item.critical-failed { background-color: var(--option-incorrect-bg-dark); color: var(--option-incorrect-text-dark); border-color: var(--option-incorrect-border-dark); }

html:not(.dark) #exam-screen > div:first-child { background-color: var(--btn-primary-bg-light); color: var(--btn-primary-text-light); }
.dark #exam-screen > div:first-child { background-color: var(--btn-primary-bg-dark); color: var(--btn-primary-text-dark); }

html:not(.dark) #timer { background-color: #e0e7ff; color: #3730a3; padding: 0.25rem 0.75rem; border-radius: 0.25rem; }
html:not(.dark) #timer.timer-critical { background-color: var(--option-incorrect-bg-light); color: var(--option-incorrect-text-light); }
.dark #timer { background-color: var(--bg-main-dark); color: var(--text-main-dark); padding: 0.25rem 0.75rem; border-radius: 0.25rem; }
.dark #timer.timer-critical { background-color: var(--option-incorrect-bg-dark); color: var(--option-incorrect-text-dark); }

html:not(.dark) #question-text .text-red-600 { color: #b91c1c; }
.dark #question-text .text-red-600 { color: var(--option-incorrect-border-dark) !important; }

#exam-screen #question-text .text-red-600 { display: none !important; }
#result-review-area .text-red-600 { display: inline !important; }

html:not(.dark) #result-critical-info { color: var(--option-incorrect-text-light); background-color: var(--option-incorrect-bg-light); padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--option-incorrect-border-light); }
.dark #result-critical-info { color: var(--option-incorrect-text-dark) !important; background-color: var(--option-incorrect-bg-dark); padding: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--option-incorrect-border-dark); }

html:not(.dark) #result-status.status-pass { color: var(--option-correct-text-light); }
html:not(.dark) #result-status.status-fail { color: var(--option-incorrect-text-light); }
.dark #result-status.status-pass { color: var(--option-correct-text-dark) !important; }
.dark #result-status.status-fail { color: var(--option-incorrect-text-dark) !important; }

/* Result Review Area */
html:not(.dark) #result-review-area { border: 1px solid var(--border-main-light); background-color: #f9fafb; }
html:not(.dark) #result-review-area h3 { color: var(--text-main-light); }
html:not(.dark) #result-review-area .review-item-correct { background-color: #F0FDF4; border: 1px solid #BBF7D0; color: #14532D; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.25rem; }
html:not(.dark) #result-review-area .review-item-incorrect { background-color: #FFF1F2; border: 1px solid #FFCCD2; color: #991B1B; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.25rem; }
html:not(.dark) #result-review-area .review-item-critical { background-color: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-weight: bold; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.25rem; }
#result-review-area p, #result-review-area p i, #result-review-area p b { color: inherit; }

.dark #result-review-area { border-color: var(--border-main-dark); background-color: var(--bg-main-dark); }
.dark #result-review-area h3 { color: var(--text-main-dark); }
.dark #result-review-area .review-item-correct { border: 1px solid var(--option-correct-border-dark) !important; background-color: var(--option-correct-bg-dark) !important; color: var(--option-correct-text-dark) !important; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.25rem; }
.dark #result-review-area .review-item-incorrect { border: 1px solid var(--option-incorrect-border-dark) !important; background-color: var(--option-incorrect-bg-dark) !important; color: var(--option-incorrect-text-dark) !important; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.25rem; }
.dark #result-review-area .review-item-critical { border: 1px solid var(--option-incorrect-border-dark) !important; background-color: var(--option-incorrect-bg-dark) !important; color: var(--option-incorrect-text-dark) !important; font-weight: bold !important; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.25rem; }

/* Keyboard Hint */
html:not(.dark) .keyboard-hint { text-align: center; font-size: 0.8rem; color: var(--text-muted-light); margin-top: 0.25rem; margin-bottom: 0.25rem; }
.dark .keyboard-hint { text-align: center; font-size: 0.8rem; color: var(--text-muted-dark); margin-top: 0.25rem; margin-bottom: 0.25rem; }

/* Quick Learn Mode */
.question-number-button { transition: background-color 0.2s, color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
html:not(.dark) .question-number-button {
    background-color: var(--card-bg-light);
    border: 1px solid #6b7280;
    color: var(--text-main-light);
}
html:not(.dark) .question-number-button:hover {
    background-color: var(--card-bg-hover-light);
    border-color: #4b5563;
}
html:not(.dark) .question-number-button.active-question { background-color: var(--btn-primary-bg-light) !important; color: var(--btn-primary-text-light) !important; border-color: var(--btn-primary-hover-bg-light) !important; }
html:not(.dark) .question-number-button.answered-correct { background-color: var(--option-correct-bg-light) !important; color: var(--option-correct-text-light) !important; border-color: var(--option-correct-border-light) !important; }
html:not(.dark) .question-number-button.answered-incorrect { background-color: var(--option-incorrect-bg-light) !important; color: var(--option-incorrect-text-light) !important; border-color: var(--option-incorrect-border-light) !important; }

.dark .question-number-button { background-color: var(--card-bg-dark); border-color: var(--border-main-dark); color: var(--text-secondary-dark); }
.dark .question-number-button:hover { background-color: var(--card-bg-hover-dark); }
.dark .question-number-button.active-question { background-color: var(--btn-primary-bg-dark) !important; color: var(--btn-primary-text-dark) !important; border-color: var(--btn-primary-hover-bg-dark) !important; }
.dark .question-number-button.answered-correct { background-color: var(--option-correct-bg-dark) !important; color: var(--option-correct-text-dark) !important; border-color: var(--option-correct-border-dark) !important; }
.dark .question-number-button.answered-incorrect { background-color: var(--option-incorrect-bg-dark) !important; color: var(--option-incorrect-text-dark) !important; border-color: var(--option-incorrect-border-dark) !important; }

.search-results-item { padding: 0.5rem 0.75rem; cursor: pointer; }
html:not(.dark) .search-results-item { color: var(--text-secondary-light); }
html:not(.dark) .search-results-item:hover { background-color: var(--card-bg-hover-light); }
.dark .search-results-item { color: var(--text-secondary-dark); }
.dark .search-results-item:hover { background-color: var(--card-bg-hover-dark); }

/* Explanation Box for Quick Learn Mode - Light Theme */
html:not(.dark) #explanation-container-quick {
    background-color: var(--explanation-container-bg-light) !important;
    border: 1px solid var(--explanation-container-border-light) !important;
}
html:not(.dark) #explanation-container-quick h4 {
    color: var(--explanation-heading-text-light) !important;
}
html:not(.dark) #explanation-container-quick #explanation-content-quick,
html:not(.dark) #explanation-container-quick #explanation-content-quick p,
html:not(.dark) #explanation-container-quick #explanation-content-quick ul,
html:not(.dark) #explanation-container-quick #explanation-content-quick li {
    color: var(--explanation-content-text-light) !important;
}
html:not(.dark) #explanation-container-quick .prose-styles blockquote {
    border-left-color: var(--border-main-light);
    color: var(--text-muted-light);
}
html:not(.dark) #explanation-container-quick .dark\:prose-invert {
    --tw-prose-body: var(--explanation-content-text-light);
    --tw-prose-headings: var(--explanation-heading-text-light);
    --tw-prose-lead: var(--explanation-content-text-light);
    --tw-prose-links: var(--link-text-light);
    --tw-prose-bold: var(--explanation-content-text-light);
    --tw-prose-counters: var(--text-muted-light);
    --tw-prose-bullets: var(--text-muted-light);
    --tw-prose-hr: var(--border-main-light);
    --tw-prose-quotes: var(--explanation-content-text-light);
    --tw-prose-quote-borders: var(--border-main-light);
    --tw-prose-captions: var(--text-muted-light);
    --tw-prose-code: var(--text-main-light);
    --tw-prose-pre-code: var(--text-main-light);
    --tw-prose-pre-bg: #e5e7eb;
    --tw-prose-th-borders: var(--border-main-light);
    --tw-prose-td-borders: var(--border-main-light);
}

/* START: Styles for question text and explanation in study_topic.html Light Mode */
html:not(.dark) .quiz-card #question-text { /* Target #question-text within .quiz-card for specificity */
    color: var(--text-main-light) !important; /* Tailwind gray-900 for max contrast */
}

html:not(.dark) .quiz-card #explanation-container {
    background-color: var(--explanation-container-bg-light) !important; /* #f9fafb */
    border: 1px solid var(--explanation-container-border-light) !important; /* #d1d5db */
}
html:not(.dark) .quiz-card #explanation-container h4 {
    color: var(--explanation-heading-text-light) !important; /* Uses --text-main-light */
}
html:not(.dark) .quiz-card #explanation-container #explanation-content,
html:not(.dark) .quiz-card #explanation-container #explanation-content p,
html:not(.dark) .quiz-card #explanation-container #explanation-content ul,
html:not(.dark) .quiz-card #explanation-container #explanation-content li {
    color: var(--explanation-content-text-light) !important; /* Uses --text-main-light (đã được cập nhật ở :root) */
}
/* Ensure prose styles within this specific explanation content also use high contrast */
html:not(.dark) .quiz-card #explanation-container #explanation-content.prose :where(p):not(:where([class~="not-prose"] *)) {
    color: var(--explanation-content-text-light) !important;
}
html:not(.dark) .quiz-card #explanation-container #explanation-content.prose :where(strong):not(:where([class~="not-prose"] *)) {
    color: var(--explanation-content-text-light) !important;
}
html:not(.dark) .quiz-card #explanation-container #explanation-content.prose :where(a):not(:where([class~="not-prose"] *)) {
    color: var(--link-text-light) !important;
}
html:not(.dark) .quiz-card #explanation-container #explanation-content.prose :where(a):not(:where([class~="not-prose"] *)):hover {
    color: var(--link-hover-text-light) !important;
}
html:not(.dark) .quiz-card #explanation-container #explanation-content.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    color: var(--text-secondary-light) !important;
    border-left-color: var(--border-main-light) !important;
}
/* END: Styles for question text and explanation in study_topic.html Light Mode */


/* Sign Pages (bien-bao-phu.html, hoc-bien-bao.html) */
.sign-card { transition: transform 0.2s ease-in-out; }
.sign-card:hover { transform: translateY(-5px); }
.sign-image { max-height: 100px; object-fit: contain; }

.sign-category-card { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
html:not(.dark) .sign-category-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.08); background-color: var(--card-bg-hover-light); }
.dark .sign-category-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 10px 20px rgba(0,0,0,0.3), 0 6px 6px rgba(0,0,0,0.25); background-color: var(--card-bg-hover-dark); }
.sign-category-card svg { transition: transform 0.3s ease; }
.sign-category-card:hover svg { transform: scale(1.1); }
html:not(.dark) .sign-category-card h2 {color: var(--text-main-light);}
html:not(.dark) .sign-category-card p {color: var(--text-secondary-light);}


/* Index Page (hero, feature-card) */
.hero-section { background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('https://firebasestorage.googleapis.com/v0/b/nhatphuc-b4104.firebasestorage.app/o/luat-giao-thong.jpg?alt=media&token=398ceb12-e5f0-4a00-b673-9029a075a803'); background-size: cover; background-position: center; }
.feature-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
html:not(.dark) .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05); background-color: var(--card-bg-hover-light); }
.dark .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 4px 6px rgba(0,0,0,0.2); background-color: var(--card-bg-hover-dark); }
html:not(.dark) .feature-card h3 { color: var(--text-main-light); }
html:not(.dark) .feature-card p { color: var(--text-secondary-light); }


/* === Header Styles === */
#main-header { background-color: var(--header-bg-light); }
.dark #main-header { background-color: var(--header-bg-dark); }

#header-logo-link { color: var(--header-text-light); }
.dark #header-logo-link { color: var(--header-text-dark); }
#header-logo-link:hover { opacity: 0.8; }

.nav-link, .nav-dropdown-button { color: var(--header-nav-link-light); }
.dark .nav-link, .dark .nav-dropdown-button { color: var(--header-nav-link-dark); }
.nav-link:hover, .nav-dropdown-button:hover { color: var(--header-nav-link-hover-light); }
.dark .nav-link:hover, .dark .nav-dropdown-button:hover { color: var(--header-nav-link-hover-dark); }

.nav-dropdown-menu { background-color: var(--header-dropdown-bg-light); border: 1px solid var(--header-dropdown-border-light); }
.dark .nav-dropdown-menu { background-color: var(--header-dropdown-bg-dark); border-color: var(--header-dropdown-border-dark); }
.nav-dropdown-item { color: var(--header-dropdown-item-text-light); }
.dark .nav-dropdown-item { color: var(--header-dropdown-item-text-dark); }
.nav-dropdown-item:hover { background-color: var(--header-dropdown-item-hover-bg-light); color: var(--header-dropdown-item-hover-text-light); }
.dark .nav-dropdown-item:hover { background-color: var(--header-dropdown-item-hover-bg-dark); color: var(--header-dropdown-item-hover-text-dark); }

#mobile-menu { background-color: #f9fafb; }
.dark #mobile-menu { background-color: var(--header-dropdown-bg-dark); }
#mobile-menu > a, #mobile-menu .mobile-menu-toggle-btn { color: var(--header-dropdown-item-text-light); }
.dark #mobile-menu > a, .dark #mobile-menu .mobile-menu-toggle-btn { color: var(--header-dropdown-item-text-dark); }
#mobile-menu > a:hover, #mobile-menu .mobile-menu-toggle-btn:hover { background-color: var(--header-dropdown-item-hover-bg-light); color: var(--header-dropdown-item-hover-text-light); }
.dark #mobile-menu > a:hover, .dark #mobile-menu .mobile-menu-toggle-btn:hover { background-color: var(--header-dropdown-item-hover-bg-dark); color: var(--header-dropdown-item-hover-text-dark); }
.mobile-submenu a { color: #4b5563; }
.dark .mobile-submenu a { color: #d1d5db; }
.mobile-submenu a:hover { background-color: #e5e7eb; color: var(--header-dropdown-item-hover-text-light); }
.dark .mobile-submenu a:hover { background-color: #4b5563; color: var(--header-dropdown-item-hover-text-dark); }

#theme-toggle-btn-desktop, #theme-toggle-btn-mobile { color: var(--theme-toggle-icon-light); }
.dark #theme-toggle-btn-desktop, .dark #theme-toggle-btn-mobile { color: var(--theme-toggle-icon-dark); }
#theme-toggle-btn-desktop:hover, #theme-toggle-btn-mobile:hover { color: var(--theme-toggle-icon-hover-light); }
.dark #theme-toggle-btn-desktop:hover, .dark #theme-toggle-btn-mobile:hover { color: var(--theme-toggle-icon-hover-dark); }

#mobile-menu-button { color: var(--header-text-light); }
.dark #mobile-menu-button { color: var(--header-text-dark); }

/* Tailwind CSS Overrides for Dark Mode (if necessary, but prefer using variables) */
.dark .text-4xl, .dark .text-3xl, .dark .text-2xl, .dark .text-xl {
    color: var(--text-main-dark) !important;
}
.dark .text-lg {
    color: var(--text-secondary-dark) !important;
}

.dark .text-gray-100 { color: var(--text-main-dark) !important; }
.dark .text-gray-200 { color: var(--text-main-dark) !important; opacity: 0.95; }
.dark .text-gray-300 { color: var(--text-secondary-dark) !important; }
.dark .text-gray-400 { color: var(--text-muted-dark) !important; }


.dark .bg-gray-700 { background-color: var(--select-bg-dark) !important; }
.dark .border-gray-600 { border-color: var(--select-border-dark) !important; }

.dark .text-sky-400 { color: var(--link-text-dark) !important; }
.dark .hover\:text-sky-300:hover { color: var(--link-hover-text-dark) !important; }

html:not(.dark) main a:not(.btn):not([class*="bg-"]) {
    color: var(--link-text-light);
}
html:not(.dark) main a:not(.btn):not([class*="bg-"]):hover {
    color: var(--link-hover-text-light);
    text-decoration: underline;
}
.dark main a:not(.btn):not([class*="bg-"]) {
    color: var(--link-text-dark);
}
.dark main a:not(.btn):not([class*="bg-"]):hover {
    color: var(--link-hover-text-dark);
    text-decoration: underline;
}

/* === Loader and Modal Styles (from previous version, ensuring they are themed) === */
.loader, .loader-modal {
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
html:not(.dark) .loader, html:not(.dark) .loader-modal {
    border: 4px solid rgba(0, 0, 0, 0.1); /* Light gray border for spinner track */
    border-top: 4px solid var(--btn-primary-bg-light); /* Blue spinner */
}
.dark .loader, .dark .loader-modal {
    border: 4px solid rgba(243, 243, 243, 0.2); /* Lighter gray for dark mode track */
    border-top: 4px solid var(--btn-primary-bg-dark); /* Blue spinner for dark mode */
}

.loader { width: 30px; height: 30px; }
.loader-modal { width: 24px; height: 24px; margin-right: 8px; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal { transition: opacity 0.25s ease; }
.modal-active { overflow-x: hidden; overflow-y: auto; }
.modal-content { transition: transform 0.25s ease; }

#edit-image-preview-container {
    width: 200px; height: 150px;
    border: 1px dashed var(--border-main-light);
    display: flex; align-items: center; justify-content: center;
    text-align: center; margin-top: 0.5rem;
    background-color: var(--card-bg-light);
    border-radius: 0.375rem; position: relative;
}
.dark #edit-image-preview-container {
    border-color: var(--border-main-dark);
    background-color: var(--card-bg-dark);
}
#edit-image-preview-container img { max-width: 100%; max-height: 100%; object-fit: contain; }

.remove-image-btn {
    position: absolute; top: -10px; right: -10px;
    color: white; border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
html:not(.dark) .remove-image-btn {
    background-color: rgba(220, 38, 38, 0.9); /* Red */
    border: 1px solid var(--card-bg-light);
}
html:not(.dark) .remove-image-btn:hover { background-color: #b91c1c; }
.dark .remove-image-btn {
    background-color: rgba(239, 68, 68, 0.9); /* Brighter red for dark bg */
    border: 1px solid var(--card-bg-dark);
}
.dark .remove-image-btn:hover { background-color: #dc2626; }

.dark .question-option.selected {
    background-color: green !important; /* Test với màu xanh và !important */
    color: white !important;
}
.question-option.selected {
    background-color: green !important; /* Test với màu xanh và !important */
    color: white !important;
}
.text-6xl{
    color: white !important;
}