html[data-theme="dark"] {
    --ink: #c2d0ec;
    --muted: #a3abbc;
    --line: #343f51;
    --soft: #302301;
    --panel: #17212f;
    --circuit-bg: none;
}

html[data-theme="dark"] body {
    background: radial-gradient(circle at 18% 24%, rgba(36, 144, 255, 0.42), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(42, 214, 255, 0.2), transparent 24%),
        linear-gradient(180deg, #061427 0%, #0b2f60 48%, #0754a8 100%);
}

html[data-theme="dark"] body::before {
    background-image: var(--circuit-bg);
}

html[data-theme="dark"] a {
    color: inherit;
}

html[data-theme="dark"] .site-header {
    background: rgba(10, 32, 56, 0.78);
    border-bottom: 1px solid rgba(116, 231, 255, 0.24);
    box-shadow: 0 10px 30px rgba(6, 20, 39, 0);
}

html[data-theme="dark"] .site-header.is-scrolled {
    background: rgba(10, 32, 56, 0.82);
    border-bottom-color: rgba(99, 230, 255, 0.28);
    box-shadow: 0 14px 42px rgba(6, 20, 39, 0.18);
}

html[data-theme="dark"] .brand {
    color: #9dc1f9;
}

html[data-theme="dark"] .site-header .brand,
html[data-theme="dark"] .site-header .brand:visited {
    color: #dbeafe;
}

html[data-theme="dark"] .site-header .brand:hover,
html[data-theme="dark"] .site-header .brand:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(18, 60, 124, 0.08), 0 0 24px rgba(99, 230, 255, 0.14);
}

html[data-theme="dark"] .menu-toggle {
    background: rgba(23, 33, 47, 0.86);
    color: #9dc1f9;
    box-shadow: 0 8px 20px rgba(22, 32, 54, 0.08);
}

html[data-theme="dark"] .menu-toggle span {
    background: currentColor;
}

html[data-theme="dark"] .nav a,
html[data-theme="dark"] .nav button,
html[data-theme="dark"] .small-link {
    color: #dbeafe;
    background: transparent;
    border: 0;
}

html[data-theme="dark"] .nav a::after,
html[data-theme="dark"] .nav button::before,
html[data-theme="dark"] .small-link::after {
    background: linear-gradient(90deg, rgba(99, 230, 255, 0), rgba(99, 230, 255, 0.95), rgba(249, 115, 22, 0.55));
}

html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a:focus-visible,
html[data-theme="dark"] .nav a.active,
html[data-theme="dark"] .nav button:hover,
html[data-theme="dark"] .nav button:focus-visible,
html[data-theme="dark"] .small-link:hover,
html[data-theme="dark"] .small-link:focus-visible {
    color: #fff;
}

html[data-theme="dark"] .nav-drop-menu {
    border: 1px solid rgba(116, 231, 255, 0.24);
    background: linear-gradient(180deg, rgba(6, 20, 39, 0.96), rgba(6, 20, 39, 0.9));
}

html[data-theme="dark"] .nav-drop-menu a {
    color: #dbeafe;
}

html[data-theme="dark"] .nav-drop-menu a:hover,
html[data-theme="dark"] .nav-drop-menu a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .account-trigger {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: 0 8px 20px rgba(22, 32, 54, 0.08);
}

html[data-theme="dark"] .password-warning-icon {
    border: 2px solid #2d394a;
    background: #f59e0b;
    color: #fff;
}

html[data-theme="dark"] .account-dropdown {
    background: #17212f;
}

html[data-theme="dark"] .account-dropdown strong {
    color: #c2d0ec;
}

html[data-theme="dark"] .account-dropdown a {
    color: #a3abbc;
}

html[data-theme="dark"] .account-dropdown button {
    border: 0;
    background: transparent;
    color: #a3abbc;
}

html[data-theme="dark"] .account-dropdown .password-warning-link {
    color: #dc8f66;
    background: #2c2301;
}

html[data-theme="dark"] .account-dropdown a:hover,
html[data-theme="dark"] .account-dropdown button:hover {
    color: #9dc1f9;
    background: #1d2736;
}

html[data-theme="dark"] .hero {
    background: transparent;
}

html[data-theme="dark"] .hero-copy {
    border: 1px solid rgba(147, 224, 255, 0.22);
    background: linear-gradient(135deg, rgba(4, 18, 39, 0.94), rgba(7, 42, 83, 0.88)),
        radial-gradient(circle at 8% 10%, rgba(99, 230, 255, 0.13), transparent 42%);
    box-shadow: 0 24px 64px rgba(0, 8, 24, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .hero-copy::after {
    background: linear-gradient(90deg, rgba(99, 230, 255, 0.05), transparent 45%, rgba(249, 115, 22, 0.04));
}

html[data-theme="dark"] .hero-copy h1 {
    color: #ffffff;
}

html[data-theme="dark"] .hero-title-accent {
    color: #ffad45;
}

html[data-theme="dark"] .hero-copy p {
    color: #a3abbc;
}

html[data-theme="dark"] .hero-copy .home-hero-kicker {
    color: #a8efff;
}

html[data-theme="dark"] .home-hero-kicker span {
    background: linear-gradient(90deg, #63e6ff, var(--orange));
    box-shadow: 0 0 14px rgba(99, 230, 255, 0.65);
}

html[data-theme="dark"] .hero-copy .home-hero-description {
    color: #eaf6ff;
}

html[data-theme="dark"] .home-hero-features a {
    border: 1px solid rgba(1, 75, 99, 0.72);
    background: rgba(28, 37, 52, 0.94);
    color: #9fc4f9;
    box-shadow: 0 8px 18px rgba(0, 12, 32, 0.16);
}

html[data-theme="dark"] .home-hero-features a:hover,
html[data-theme="dark"] .home-hero-features a:focus-visible {
    border-color: #2d394a;
    background: #17212f;
    color: #a6c8fc;
    box-shadow: 0 12px 24px rgba(0, 12, 32, 0.24), 0 0 22px rgba(99, 230, 255, 0.2);
}

html[data-theme="dark"] .hero-copy .home-hero-teacher {
    color: #d9edff;
}

html[data-theme="dark"] .home-hero-teacher::before {
    background: linear-gradient(180deg, #63e6ff, var(--orange));
    box-shadow: 0 0 14px rgba(99, 230, 255, 0.35);
}

html[data-theme="dark"] .home-hero-teacher strong {
    color: #ffd08e;
}

html[data-theme="dark"] .hero-copy .hero-actions::before {
    background: linear-gradient(90deg, rgba(112, 219, 255, 0), rgba(23, 33, 47, 0.66), rgba(249, 115, 22, 0.62));
}

html[data-theme="dark"] .hero-actions::before {
    background: linear-gradient(90deg, rgba(112, 219, 255, 0), rgba(112, 219, 255, 0.78), rgba(112, 219, 255, 0.38));
}

html[data-theme="dark"] .hero-actions::after {
    background: #76e7ff;
    box-shadow: 0 0 16px rgba(118, 231, 255, 0.82);
}

html[data-theme="dark"] .btn {
    border: 0;
    background: var(--orange);
    color: #fff;
}

html[data-theme="dark"] .btn:hover {
    box-shadow: 0 14px 30px rgba(252, 101, 18, 0.28);
}

html[data-theme="dark"] .btn.secondary {
    background: var(--blue);
}

html[data-theme="dark"] .btn.secondary:hover {
    box-shadow: 0 14px 30px rgba(16, 62, 132, 0.28);
}

html[data-theme="dark"] .btn.light {
    background: #17212f;
    color: #9dc1f9;
}

html[data-theme="dark"] .hero-image {
    background: #edc5a6;
}

html[data-theme="dark"] .image-lightbox {
    background: rgba(4, 12, 25, 0.78);
}

html[data-theme="dark"] .image-lightbox-frame {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .section.alt {
    background: transparent;
}

html[data-theme="dark"] .section-divider {
    border: 0;
    background: linear-gradient(90deg, rgba(118, 231, 255, 0), rgba(2, 53, 61, 0.56), rgba(118, 231, 255, 0)),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
    box-shadow: 0 0 18px rgba(118, 231, 255, 0.34);
}

html[data-theme="dark"] .section-title h2 {
    color: #f6fbff;
}

html[data-theme="dark"] .section-title p {
    color: rgba(219, 234, 254, 0.82);
}

html[data-theme="dark"] .feature {
    border: 1px solid rgba(219, 234, 254, 0.18);
    background: rgba(23, 33, 47, 0.96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

html[data-theme="dark"] .feature::before {
    background: linear-gradient(135deg, rgba(99, 230, 255, 0.16), rgba(249, 115, 22, 0.08) 52%, rgba(99, 230, 255, 0)),
        linear-gradient(90deg, rgba(99, 230, 255, 0), rgba(99, 230, 255, 0.32), rgba(99, 230, 255, 0));
}

html[data-theme="dark"] .feature::after {
    background: linear-gradient(90deg, rgba(99, 230, 255, 0), rgba(99, 230, 255, 0.82), rgba(249, 115, 22, 0.78));
}

html[data-theme="dark"] .feature:hover {
    border-color: rgba(99, 230, 255, 0.48);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(99, 230, 255, 0.08);
}

html[data-theme="dark"] .feature strong {
    color: #9dc1f9;
}

html[data-theme="dark"] .feature p {
    color: #a3abbc;
}

html[data-theme="dark"] .achievement-intro,
html[data-theme="dark"] .achievement-board {
    border: 1px solid rgba(219, 234, 254, 0.24);
    background: rgba(23, 33, 47, 0.97);
}

html[data-theme="dark"] .achievement-intro::after {
    color: rgba(157, 193, 249, 0.08);
}

html[data-theme="dark"] .achievement-badge {
    background: #2f2600;
    color: #cba471;
}

html[data-theme="dark"] .achievement-intro h2 {
    color: #9dc1f9;
}

html[data-theme="dark"] .achievement-intro p {
    color: #a3abbc;
}

html[data-theme="dark"] .achievement-summary article {
    border: 1px solid #30425a;
    background: #1a2433;
}

html[data-theme="dark"] .achievement-summary strong {
    color: #9dc1f9;
}

html[data-theme="dark"] .achievement-summary span {
    color: #a3abbc;
}

html[data-theme="dark"] .achievement-year-card {
    border: 1px solid #30425a;
    background: linear-gradient(180deg, #17212f 0%, #1b2433 100%);
}

html[data-theme="dark"] .achievement-year-card::before {
    background: radial-gradient(circle at 82% 12%, rgba(246, 184, 23, 0.18), rgba(99, 230, 255, 0.08) 34%, rgba(255, 255, 255, 0) 62%);
}

html[data-theme="dark"] .achievement-year-card:hover {
    border-color: rgba(16, 62, 132, 0.22);
    box-shadow: 0 16px 34px rgba(16, 62, 132, 0.14);
}

html[data-theme="dark"] .achievement-year-top {
    border-bottom: 1px solid #30425a;
}

html[data-theme="dark"] .achievement-year-top > strong {
    color: #9dc1f9;
}

html[data-theme="dark"] .achievement-result h3,
html[data-theme="dark"] .achievement-score h3 {
    color: #c2d0ec;
}

html[data-theme="dark"] .achievement-result h3 span,
html[data-theme="dark"] .achievement-score h3 span {
    background: #152b47;
    color: #9dc1f9;
}

html[data-theme="dark"] .achievement-list p {
    border: 1px solid #333f52;
    background: #17212f;
    color: #a3abbc;
}

html[data-theme="dark"] .achievement-list strong {
    color: #9dc1f9;
}

html[data-theme="dark"] .achievement-proof {
    border-bottom: 1px solid rgba(18, 60, 124, 0.28);
    color: #a3abbc;
}

html[data-theme="dark"] .achievement-proof:hover {
    border-color: #9dc1f9;
    color: #9dc1f9;
}

html[data-theme="dark"] .achievement-score {
    border: 1px solid #f6dfa0;
    background: linear-gradient(135deg, #2f2600 0%, #17212f 82%);
}

html[data-theme="dark"] .achievement-score div span {
    color: #cba471;
}

html[data-theme="dark"] .achievement-exam-stars a {
    border: 1px solid #f6dfa0;
    background: rgba(23, 33, 47, 0.82);
    color: #cba471;
}

html[data-theme="dark"] .achievement-exam-stars a:hover {
    border-color: #f97316;
    box-shadow: 0 10px 22px rgba(249, 115, 22, 0.16);
}

html[data-theme="dark"] .achievement-updating {
    border: 1px dashed #364e6e;
    background: #1a2433;
    color: #a3abbc;
}

html[data-theme="dark"] .learning-system-copy h2 {
    color: #f8fbff;
}

html[data-theme="dark"] .learning-system-copy p:not(.eyebrow) {
    color: rgba(219, 234, 254, 0.86);
}

html[data-theme="dark"] .learning-system-list div {
    color: #f8fbff;
}

html[data-theme="dark"] .learning-system-list span {
    background: rgba(99, 230, 255, 0.16);
    color: #63e6ff;
}

html[data-theme="dark"] .learning-dashboard {
    border: 1px solid rgba(219, 234, 254, 0.24);
    background: rgba(23, 33, 47, 0.97);
}

html[data-theme="dark"] .learning-dashboard-head strong {
    color: #9dc1f9;
}

html[data-theme="dark"] .learning-dashboard-head span {
    background: #122942;
    color: #9dc1f9;
}

html[data-theme="dark"] .learning-chart {
    border: 1px solid #30425a;
    background: #1a2433;
}

html[data-theme="dark"] .learning-chart i {
    background: linear-gradient(180deg, #63e6ff 0%, var(--blue) 100%);
}

html[data-theme="dark"] .learning-chart i:last-child {
    background: linear-gradient(180deg, #f6b817 0%, var(--orange) 100%);
}

html[data-theme="dark"] .learning-table div {
    border: 1px solid #333f52;
    background: #17212f;
    color: #a3abbc;
}

html[data-theme="dark"] .learning-table strong {
    color: #9dc1f9;
}

html[data-theme="dark"] .learning-table em {
    color: #a3abbc;
}

html[data-theme="dark"] .register-card,
html[data-theme="dark"] .form-card {
    background: rgba(23, 33, 47, 0.97);
}

html[data-theme="dark"] .register-card ul {
    color: #a3abbc;
}

html[data-theme="dark"] label {
    color: #c2d0ec;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border: 1px solid #354459;
    color: #c2d0ec;
    background: #17212f;
}

html[data-theme="dark"] .notice.success {
    color: #8dc39a;
    background: #01331c;
}

html[data-theme="dark"] .notice.error {
    color: #f8958a;
    background: #501e22;
}

html[data-theme="dark"] .consultation-page .site-header {
    background: rgba(10, 32, 56, 0.82);
    box-shadow: 0 12px 34px rgba(6, 20, 39, 0.2);
}

html[data-theme="dark"] .consultation-hero::before {
    background: radial-gradient(circle, rgba(45, 212, 255, 0.2), rgba(45, 212, 255, 0) 68%);
}

html[data-theme="dark"] .consultation-hero::after {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0) 68%);
}

html[data-theme="dark"] .consultation-kicker {
    color: #8eeaff;
}

html[data-theme="dark"] .consultation-kicker span {
    background: linear-gradient(90deg, #63e6ff, var(--orange));
    box-shadow: 0 0 14px rgba(99, 230, 255, 0.7);
}

html[data-theme="dark"] .consultation-hero h1 {
    color: #fff;
}

html[data-theme="dark"] .consultation-hero h1 span {
    color: #dff8ff;
}

html[data-theme="dark"] .consultation-hero h1 strong {
    color: #fff;
}

html[data-theme="dark"] .consultation-lead {
    color: rgba(224, 242, 254, 0.88);
}

html[data-theme="dark"] .consultation-highlights span {
    border: 1px solid rgba(99, 230, 255, 0.26);
    color: #dff8ff;
    background: rgba(6, 20, 39, 0.42);
}

html[data-theme="dark"] .consultation-intro .section-title h2 {
    color: #f6fbff;
}

html[data-theme="dark"] .consultation-page .form-card .hero-actions .btn::after {
    background: linear-gradient(90deg, rgba(99, 230, 255, 0), rgba(23, 33, 47, 0.96), rgba(99, 230, 255, 0.9), rgba(249, 115, 22, 0));
    box-shadow: 0 0 10px rgba(99, 230, 255, 0.55);
}

html[data-theme="dark"] .consultation-page .form-card .hero-actions .btn:hover,
html[data-theme="dark"] .consultation-page .form-card .hero-actions .btn:focus-visible {
    background: #fb812f;
    box-shadow: 0 10px 24px rgba(252, 101, 18, 0.28);
}

html[data-theme="dark"] .consultation-page .form-card .hero-actions .btn:active {
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] .consultation-page .consultation-zalo {
    background: #0068ff;
}

html[data-theme="dark"] .consultation-page .form-card .hero-actions .consultation-zalo:hover,
html[data-theme="dark"] .consultation-page .form-card .hero-actions .consultation-zalo:focus-visible {
    background: #1476ff;
    box-shadow: 0 10px 24px rgba(0, 104, 255, 0.28);
}

html[data-theme="dark"] .site-footer {
    border-top: 1px solid rgba(99, 230, 255, 0.28);
    color: #dbeafe;
    background: rgba(10, 32, 56, 0.82);
    box-shadow: 0 -14px 42px rgba(6, 20, 39, 0.18);
}

html[data-theme="dark"] .site-footer a {
    color: #fff;
}

html[data-theme="dark"] .site-footer .site-visits-dot {
    background: #3ccf91;
    box-shadow: 0 0 0 3px rgba(60, 207, 145, 0.25);
}

html[data-theme="dark"] .modal-overlay {
    background: rgba(10, 20, 35, 0.72);
}

html[data-theme="dark"] .auth-card {
    background: #17212f;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .auth-close {
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(23, 33, 47, 0.76);
    color: #99a6b8;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .auth-close:hover {
    border-color: rgba(180, 83, 9, 0.3);
    background: #332202;
    color: #db9b77;
    box-shadow: 0 7px 18px rgba(146, 64, 14, 0.13);
}

html[data-theme="dark"] .auth-close:focus-visible {
    outline: 3px solid rgba(255, 208, 0, 0.48);
    outline-offset: 2px;
}

html[data-theme="dark"] .auth-tabs {
    background: #1b2533;
    border-bottom: 1px solid #313d4f;
}

html[data-theme="dark"] .tab-trigger {
    border: 0;
    background: transparent;
    color: #a8b0bc;
}

html[data-theme="dark"] .tab-trigger.active {
    color: #dca180;
}

html[data-theme="dark"] .tab-trigger.active::after {
    background: #ffd000;
}

html[data-theme="dark"] .input-item label {
    color: #99a6b8;
}

html[data-theme="dark"] .game-input {
    border: 0;
    background: #1e2d4a;
    color: #ced6e6;
}

html[data-theme="dark"] .game-input::placeholder {
    color: #a8b0bc;
}

html[data-theme="dark"] .game-input:focus {
    outline: 3px solid rgba(255, 208, 0, 0.55);
    background: #17212f;
}

html[data-theme="dark"] .submit-btn {
    border: 0;
    background: linear-gradient(135deg, #ffd400, #eab308);
    color: #92400e;
    box-shadow: 0 12px 24px rgba(234, 179, 8, 0.22);
}

html[data-theme="dark"] .auth-divider {
    color: #94a3b8;
}

html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after {
    background: #21344d;
}

html[data-theme="dark"] .google-auth-btn {
    border: 1px solid #324358;
    background: #17212f;
    color: #c3cddb;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .google-auth-btn:hover {
    border-color: #394277;
}

html[data-theme="dark"] .google-mark {
    background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
    color: #fff;
}

html[data-theme="dark"] .cancel-btn {
    border: 0;
    background: transparent;
    color: #a8b0bc;
}

html[data-theme="dark"] .auth-message {
    background: #501e22;
    color: #f8958a;
}

html[data-theme="dark"] .auth-message.ok {
    background: #01331c;
    color: #8dc39a;
}

html[data-theme="dark"] .admin-page {
    background: #1c2635;
}

html[data-theme="dark"] .admin-topbar {
    background: #17212f;
}

html[data-theme="dark"] .admin-heading p {
    color: #a3abbc;
}

html[data-theme="dark"] .admin-table-wrap {
    background: #17212f;
}

html[data-theme="dark"] .admin-table th {
    color: #9dc1f9;
    background: #1b2533;
}

html[data-theme="dark"] .admin-table span {
    color: #a3abbc;
}

html[data-theme="dark"] .status-form button {
    border: 0;
    background: var(--blue);
    color: #fff;
}

html[data-theme="dark"] .status-form .delete-button {
    background: #293444;
    color: #b6bfce;
}

html[data-theme="dark"] .status-form .delete-button:hover {
    background: #374355;
}

html[data-theme="dark"] .empty-state {
    color: #a3abbc;
}

@media (max-width: 430px) {
    html[data-theme="dark"] .nav {
        background: #17212f;
    }

    html[data-theme="dark"] .nav > a,
    html[data-theme="dark"] .nav-dropdown > button {
        color: #9dc1f9;
    }

    html[data-theme="dark"] .nav > a:hover,
    html[data-theme="dark"] .nav > a:focus-visible,
    html[data-theme="dark"] .nav-dropdown > button:hover,
    html[data-theme="dark"] .nav-dropdown > button:focus-visible {
        color: #a6c8fc;
        background: #122942;
    }

    html[data-theme="dark"] .nav-drop-menu {
        box-shadow: none;
    }
}