/* ============================================================ KHẢ VĂN — DARK MODE (web public) Kích hoạt bằng thuộc tính [data-theme="dark"] trên . JS trong _nav.html set theo: localStorage > prefers-color-scheme. Dùng override theo prefix từng trang (.lh-/.lt-/.hp-/.kh-/.kvx-) vì các trang con hardcode màu #fff trong CSS inline. ============================================================ */ :root { --kvd-bg: #0d1117; --kvd-surface: #161b22; --kvd-surface-2: #1c2230; --kvd-ink: #e6edf3; --kvd-ink-muted: #9aa7b2; --kvd-line: #2a3542; --kvd-green: #2ea36a; --kvd-input: #1c2230; --kvd-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } /* Chuyển màu mượt khi bật/tắt (tôn trọng reduced-motion) */ html.kv-theme-ready body { transition: background-color .25s ease, color .2s ease; } html.kv-theme-ready .lh-form, html.kv-theme-ready .lt-prog, html.kv-theme-ready .lt-pillar, html.kv-theme-ready .lt-stat, html.kv-theme-ready .lt-review, html.kv-theme-ready .lt-form, html.kv-theme-ready .hp-card, html.kv-theme-ready .hp-faq__item, html.kv-theme-ready .kh-card, html.kv-theme-ready .kh-testimonial, html.kv-theme-ready .feat-card, html.kv-theme-ready .kvx-card, html.kv-theme-ready input, html.kv-theme-ready select, html.kv-theme-ready textarea, html.kv-theme-ready .bg-white { transition: background-color .25s ease, border-color .25s ease, color .2s ease; } @media (prefers-reduced-motion: reduce) { html.kv-theme-ready body, html.kv-theme-ready body * { transition: none !important; } } /* ============================================================ 1) NỀN TRANG + TEXT CƠ BẢN ============================================================ */ [data-theme="dark"] body { background: var(--kvd-bg) !important; color: var(--kvd-ink) !important; } [data-theme="dark"] body.kv-redesign { background: var(--kvd-bg) !important; color: var(--kvd-ink) !important; } /* ============================================================ 2) TRANG CHỦ (kv-redesign) — map token ============================================================ */ [data-theme="dark"] body.kv-redesign { --white: var(--kvd-surface); --text-dark: var(--kvd-ink); --text-muted: var(--kvd-ink-muted); --border: var(--kvd-line); --green-light: var(--kvd-surface-2); --kv-green-soft: var(--kvd-surface-2); --shadow-soft: var(--kvd-shadow); --shadow-card: var(--kvd-shadow); } [data-theme="dark"] body.kv-redesign .kvx-card, [data-theme="dark"] body.kv-redesign .kvx-panel, [data-theme="dark"] body.kv-redesign .kv-form-panel, [data-theme="dark"] body.kv-redesign .kvx-field { background: var(--kvd-surface); color: var(--kvd-ink); border-color: var(--kvd-line); } [data-theme="dark"] body.kv-redesign .kvx-field::placeholder { color: #6b7684; } [data-theme="dark"] body.kv-redesign .kvx-section--alt, [data-theme="dark"] body.kv-redesign .kvx-soft { background: var(--kvd-surface-2); } /* Card / bề mặt trắng literal (#fff) trong kv-redesign.css */ [data-theme="dark"] body.kv-redesign .kvx-stats__grid, [data-theme="dark"] body.kv-redesign .kvx-why__card, [data-theme="dark"] body.kv-redesign .kvx-form, [data-theme="dark"] body.kv-redesign .kvx-design--light, [data-theme="dark"] body.kv-redesign .kvx-btn--light { background: var(--kvd-surface) !important; border-color: var(--kvd-line); color: var(--kvd-ink); } [data-theme="dark"] body.kv-redesign .kvx-tm-nav, [data-theme="dark"] body.kv-redesign .kvx-tm-nav[disabled]:hover { background: var(--kvd-surface) !important; border-color: var(--kvd-line); color: var(--kvd-green); } [data-theme="dark"] body.kv-redesign .kvx-hero-shell { background: var(--kvd-surface-2); } [data-theme="dark"] body.kv-redesign .kvx-form .kvx-field { background: var(--kvd-input); } /* ============================================================ 3) HELPER CHUNG cho các trang con (theo prefix) Bề mặt trắng -> surface; nền nhạt -> surface-2 ============================================================ */ [data-theme="dark"] .lh-sec, [data-theme="dark"] .lt-sec, [data-theme="dark"] .hp-sec, [data-theme="dark"] .kh-sec { color: var(--kvd-ink); } /* --- Card / panel bề mặt trắng --- */ [data-theme="dark"] .lh-form, [data-theme="dark"] .lt-prog, [data-theme="dark"] .lt-pillar, [data-theme="dark"] .lt-stat, [data-theme="dark"] .lt-review, [data-theme="dark"] .lt-form, [data-theme="dark"] .hp-card, [data-theme="dark"] .hp-faq__item, [data-theme="dark"] .hp-compare, [data-theme="dark"] .kh-card, [data-theme="dark"] .kh-testimonial, [data-theme="dark"] .feat-card { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; box-shadow: var(--kvd-shadow) !important; color: var(--kvd-ink); } /* --- Nền section nhạt (alt) --- */ [data-theme="dark"] .lh-sec--alt, [data-theme="dark"] .lt-sec--alt, [data-theme="dark"] .hp-sec--alt { background: var(--kvd-surface-2) !important; } /* --- Tiêu đề/tag nền trắng --- */ [data-theme="dark"] .lt-head__tag, [data-theme="dark"] .lh-head__tag, [data-theme="dark"] .hp-head__tag, [data-theme="dark"] .lt-level, [data-theme="dark"] .feat-head__tag, [data-theme="dark"] .feat-card__badge--pop { background: var(--kvd-surface-2) !important; color: var(--kvd-green) !important; border-color: var(--kvd-line) !important; } /* --- Text màu tối -> sáng --- */ [data-theme="dark"] .lt-hero__lead, [data-theme="dark"] .lt-review p, [data-theme="dark"] .lh-hero__lead, [data-theme="dark"] .hp-lead, [data-theme="dark"] .kh-muted { color: var(--kvd-ink-muted) !important; } /* --- Input/select/textarea --- */ [data-theme="dark"] .lh-field input, [data-theme="dark"] .lh-field select, [data-theme="dark"] .lh-field textarea, [data-theme="dark"] .lt-field input, [data-theme="dark"] .lt-field select, [data-theme="dark"] .lt-field textarea, [data-theme="dark"] .hp-field input, [data-theme="dark"] .hp-field select, [data-theme="dark"] .hp-field textarea { background: var(--kvd-input) !important; border-color: var(--kvd-line) !important; color: var(--kvd-ink) !important; } [data-theme="dark"] .lh-field input::placeholder, [data-theme="dark"] .lt-field input::placeholder, [data-theme="dark"] .hp-field input::placeholder, [data-theme="dark"] .lh-field textarea::placeholder, [data-theme="dark"] .lt-field textarea::placeholder, [data-theme="dark"] .hp-field textarea::placeholder { color: #6b7684 !important; } /* label giữ sáng trên nền tối */ [data-theme="dark"] .lh-field label, [data-theme="dark"] .lt-field label, [data-theme="dark"] .hp-field label { color: var(--kvd-green) !important; } /* --- Bảng học phí --- */ [data-theme="dark"] .hp-table tbody tr:nth-child(odd) { background: var(--kvd-surface) !important; } [data-theme="dark"] .hp-table tbody tr:nth-child(even) { background: var(--kvd-surface-2) !important; } [data-theme="dark"] .hp-table th, [data-theme="dark"] .hp-table td { color: var(--kvd-ink) !important; border-color: var(--kvd-line) !important; } /* --- FAQ hover --- */ [data-theme="dark"] .hp-faq__q { background: var(--kvd-surface) !important; color: var(--kvd-ink) !important; } [data-theme="dark"] .hp-faq__q:hover { background: var(--kvd-surface-2) !important; } /* --- Học phí: bề mặt bổ sung --- */ [data-theme="dark"] .hp-compare, [data-theme="dark"] .hp-quote__form { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; } [data-theme="dark"] .hp-price__meta { background: var(--kvd-surface-2) !important; border-color: var(--kvd-line) !important; color: var(--kvd-ink-muted) !important; } [data-theme="dark"] .hp-hero__feat span { background: var(--kvd-surface-2) !important; } /* --- Khóa học: toolbar / tab / icon --- */ [data-theme="dark"] .kh-toolbar-card { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; box-shadow: var(--kvd-shadow) !important; } [data-theme="dark"] .kh-tab { background: var(--kvd-surface-2) !important; border-color: var(--kvd-line) !important; color: var(--kvd-ink) !important; } [data-theme="dark"] .kh-tab:hover { background: var(--kvd-surface) !important; border-color: var(--kvd-green) !important; } [data-theme="dark"] .kh-why-icon { background: var(--kvd-surface-2) !important; } /* --- Nút outline (nền trắng) --- */ [data-theme="dark"] .lt-btn--outline, [data-theme="dark"] .hp-btn--outline { background: var(--kvd-surface) !important; color: var(--kvd-green) !important; border-color: var(--kvd-green) !important; } /* ============================================================ 3b) VỀ CHÚNG TÔI (vt-) / GIẢNG VIÊN (gv-) / BLOG (bv-) ============================================================ */ /* Card / panel nền trắng */ [data-theme="dark"] .vt-mission__card, [data-theme="dark"] .vt-achieve-card, [data-theme="dark"] .vt-bento__item, [data-theme="dark"] .vt-pillar-item, [data-theme="dark"] .vt-review, [data-theme="dark"] .vt-hv-card, [data-theme="dark"] .gv-fcard, [data-theme="dark"] .gv-row, [data-theme="dark"] .gv-cert, [data-theme="dark"] .gv-review, [data-theme="dark"] .bv-fcard, [data-theme="dark"] .bv-card { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; box-shadow: var(--kvd-shadow) !important; color: var(--kvd-ink); } /* Tag / tab / nút outline nền trắng */ [data-theme="dark"] .vt-head__tag, [data-theme="dark"] .gv-head__tag, [data-theme="dark"] .bv-tab, [data-theme="dark"] .gv-btn--outline, [data-theme="dark"] .bv-btn--outline, [data-theme="dark"] .vt-btn--glass { background: var(--kvd-surface-2) !important; color: var(--kvd-green) !important; border-color: var(--kvd-line) !important; } [data-theme="dark"] .bv-tab.is-active, [data-theme="dark"] .bv-tab:hover { background: var(--kvd-green) !important; color: #fff !important; } /* Text phụ */ [data-theme="dark"] .vt-head p, [data-theme="dark"] .vt-review p, [data-theme="dark"] .gv-fcard p, [data-theme="dark"] .bv-card p { color: var(--kvd-ink-muted); } /* About page contrast fixes */ [data-theme="dark"] .vt-sec, [data-theme="dark"] .vt-sec--milestones { background: var(--kvd-bg) !important; color: var(--kvd-ink) !important; } [data-theme="dark"] .vt-sec--alt { background: var(--kvd-surface-2) !important; } [data-theme="dark"] .vt-stats { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; box-shadow: var(--kvd-shadow) !important; } [data-theme="dark"] .vt-head h2, [data-theme="dark"] .vt-stat strong, [data-theme="dark"] .vt-achieve-card strong, [data-theme="dark"] .vt-mile-node h4, [data-theme="dark"] .vt-review-col h3, [data-theme="dark"] .vt-hv-card strong { color: var(--kvd-green) !important; } [data-theme="dark"] .vt-sec--dark .vt-head h2, [data-theme="dark"] .vt-cta h2 { color: #fff !important; } [data-theme="dark"] .vt-stat span, [data-theme="dark"] .vt-mission__card p, [data-theme="dark"] .vt-mission li, [data-theme="dark"] .vt-mile-node p, [data-theme="dark"] .vt-achieve-card span, [data-theme="dark"] .vt-review blockquote, [data-theme="dark"] .vt-hv-card blockquote, [data-theme="dark"] .vt-review__who span, [data-theme="dark"] .vt-pillar-item p { color: var(--kvd-ink-muted) !important; } [data-theme="dark"] .vt-hero .vt-btn--glass { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .42) !important; color: #fff !important; } /* ============================================================ 3c) TRANG CHI TIẾT (ld-/gd-/kd-/cd-/bd-) ============================================================ */ [data-theme="dark"] .ld-content, [data-theme="dark"] .ld-rel, [data-theme="dark"] .gd-content, [data-theme="dark"] .gd-rel, [data-theme="dark"] .kd-content, [data-theme="dark"] .kd-rel-card, [data-theme="dark"] .cd-content, [data-theme="dark"] .cd-rel, [data-theme="dark"] .bd-rel { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; color: var(--kvd-ink); } [data-theme="dark"] .kd-btn--outline { background: var(--kvd-surface) !important; color: var(--kvd-green) !important; border-color: var(--kvd-green) !important; } /* Nội dung bài viết/khóa học: chữ + heading */ [data-theme="dark"] .kd-content, [data-theme="dark"] .bd-content { color: var(--kvd-ink) !important; } [data-theme="dark"] .bd-content h2, [data-theme="dark"] .bd-content h3, [data-theme="dark"] .kd-content h2, [data-theme="dark"] .kd-content h3 { color: #4cc38a !important; } /* ============================================================ 4) TAILWIND-BASED (khoa_hoc / trang_public) ============================================================ */ [data-theme="dark"] .bg-white { background: var(--kvd-surface) !important; } [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-900 { color: var(--kvd-ink) !important; } [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-500 { color: var(--kvd-ink-muted) !important; } [data-theme="dark"] .border-gray-300, [data-theme="dark"] .border-gray-200 { border-color: var(--kvd-line) !important; } [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background: var(--kvd-surface-2) !important; } /* ============================================================ 5) NAV TOGGLE BUTTON ============================================================ */ .kv-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--kv-border, #e2e8f0); background: transparent; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; transition: background .15s ease, color .15s ease, border-color .15s ease; } .kv-theme-toggle:hover { background: rgba(0,0,0,.05); } [data-theme="dark"] .kv-theme-toggle { border-color: var(--kvd-line); color: var(--kvd-ink); } [data-theme="dark"] .kv-theme-toggle:hover { background: rgba(255,255,255,.08); } .kv-theme-toggle .ri-moon-line { display: inline; } .kv-theme-toggle .ri-sun-line { display: none; } [data-theme="dark"] .kv-theme-toggle .ri-moon-line { display: none; } [data-theme="dark"] .kv-theme-toggle .ri-sun-line { display: inline; } .kv-theme-toggle__label { display: none; } /* Toggle trong menu mobile: dạng hàng đầy đủ có nhãn */ .kv-theme-toggle--mobile { width: 100%; height: auto; justify-content: flex-start; gap: 10px; border: 0; border-radius: 0; padding: 12px 4px; font-size: 16px; } .kv-theme-toggle--mobile .kv-theme-toggle__label { display: inline; font-weight: 600; } .kv-theme-toggle--mobile:hover { background: transparent; } [data-theme="dark"] .kv-theme-toggle--mobile .kv-theme-toggle__label::after { content: ' (đang bật)'; font-weight: 400; opacity: .6; } /* Footer đã tối sẵn -> giữ nguyên, chỉ đảm bảo viền */ [data-theme="dark"] .hp-footer, [data-theme="dark"] .kv-footer { border-color: var(--kvd-line); } /* ============================================================ 9) HOMEPAGE REDESIGN — hero intro / badges / app-nav / FAB (hardcode #fff trong kv-redesign.css + mobile-nav.css) ============================================================ */ [data-theme="dark"] body.kv-redesign .kvx-hero--parent, [data-theme="dark"] body.kv-redesign .kvx-hero.kvx-hero--media { background: var(--kvd-bg) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__panel { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; box-shadow: var(--kvd-shadow) !important; color: var(--kvd-ink); } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__panel::after { background: radial-gradient(circle, rgba(245, 197, 24, .08) 0%, transparent 68%); } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__title { color: var(--kvd-ink) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__sub { color: var(--kvd-ink-muted) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__cta .kvx-btn--ghost { background: transparent !important; color: var(--kvd-ink) !important; border-color: var(--kvd-line) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__cta .kvx-btn--ghost:hover { background: rgba(255, 255, 255, .06) !important; border-color: var(--kvd-green) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__dots button { background: rgba(46, 163, 106, .28); } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__dots button.is-active { background: var(--kvd-green); } [data-theme="dark"] body.kv-redesign .kvx-hero-badge { background: var(--kvd-surface-2) !important; border-color: var(--kvd-line) !important; color: var(--kvd-ink); } [data-theme="dark"] body.kv-redesign .kvx-hero-badge__title, [data-theme="dark"] body.kv-redesign .kvx-hero-badge__strong { color: var(--kvd-ink) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-badge__sub { color: var(--kvd-ink-muted) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-badge__icon { background: rgba(46, 163, 106, .18) !important; color: var(--kvd-green) !important; } [data-theme="dark"] body.kv-redesign .kvx-hero-trust--light, [data-theme="dark"] body.kv-redesign .kvx-hero-trust { color: var(--kvd-ink-muted); } @media (min-width: 992px) { [data-theme="dark"] body.kv-redesign .kvx-hero-intro { background: linear-gradient(180deg, transparent 0%, rgba(13, 17, 23, .72) 100%); } [data-theme="dark"] body.kv-redesign .kvx-hero-intro__panel { background: rgba(22, 27, 34, .96) !important; } } /* Stats / guide / why / path cards còn #fff literal */ [data-theme="dark"] body.kv-redesign .kvx-parent-guide { background: radial-gradient(ellipse 70% 55% at 8% 0%, rgba(16, 185, 129, .12), transparent 55%), linear-gradient(180deg, #0b1a14 0%, #10251c 100%) !important; } [data-theme="dark"] body.kv-redesign .kvx-parent-age-card { background: linear-gradient(165deg, var(--kvd-surface) 0%, rgba(16, 185, 129, .08) 100%) !important; border-color: var(--kvd-line) !important; color: var(--kvd-ink); box-shadow: none; } [data-theme="dark"] body.kv-redesign .kvx-parent-age-card h3 { color: var(--kvd-ink); } [data-theme="dark"] body.kv-redesign .kvx-parent-age-card__desc { color: var(--kvd-muted, #9cb3a8); } [data-theme="dark"] body.kv-redesign .kvx-parent-guide__hint { background: rgba(16, 37, 28, .8); border-color: var(--kvd-line); color: var(--kvd-muted, #9cb3a8); } [data-theme="dark"] body.kv-redesign .kvx-title, [data-theme="dark"] body.kv-redesign .kvx-stat__val, [data-theme="dark"] body.kv-redesign h2, [data-theme="dark"] body.kv-redesign h3 { color: var(--kvd-ink); } [data-theme="dark"] body.kv-redesign .kvx-lead, [data-theme="dark"] body.kv-redesign .kvx-stat__label, [data-theme="dark"] body.kv-redesign .kvx-muted { color: var(--kvd-ink-muted) !important; } [data-theme="dark"] body.kv-redesign .kvx-section, [data-theme="dark"] body.kv-redesign .kvx-section--warm { background: var(--kvd-bg) !important; } /* Bottom app nav */ [data-theme="dark"] .kv-app-nav { background: rgba(22, 27, 34, .97) !important; border-top-color: var(--kvd-line) !important; box-shadow: 0 -6px 24px rgba(0, 0, 0, .35); } [data-theme="dark"] .kv-app-nav__item { color: #8b97a5; } [data-theme="dark"] .kv-app-nav__item.is-active { color: var(--kvd-green); } [data-theme="dark"] .kv-app-nav__call-btn { border-color: var(--kvd-surface) !important; } /* Floating chat hub */ [data-theme="dark"] .kv-float-hub__item { background: var(--kvd-surface) !important; color: var(--kvd-ink) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 0 1px var(--kvd-line); } [data-theme="dark"] .kv-float-top { background: var(--kvd-surface) !important; color: var(--kvd-ink) !important; border-color: var(--kvd-line) !important; } /* Mobile drawer */ [data-theme="dark"] .kv-mobile-nav { background: var(--kvd-surface) !important; color: var(--kvd-ink); } [data-theme="dark"] .kv-mobile-nav a { color: var(--kvd-ink) !important; } /* ============================================================ 10) TRANG CON (kvp-*) — card #fff cứng trong kv-pages.css ============================================================ */ [data-theme="dark"] body.kv-redesign .kvp-stats, [data-theme="dark"] body.kv-redesign .kvp-stat, [data-theme="dark"] body.kv-redesign .kvp-mission, [data-theme="dark"] body.kv-redesign .kvp-mile, [data-theme="dark"] body.kv-redesign .kvp-card, [data-theme="dark"] body.kv-redesign .kvp-pillar, [data-theme="dark"] body.kv-redesign .kvp-review, [data-theme="dark"] body.kv-redesign .kvp-offer, [data-theme="dark"] body.kv-redesign .kvp-tab, [data-theme="dark"] body.kv-redesign .kvp-info-card, [data-theme="dark"] body.kv-redesign .kvp-btn--ghost { background: var(--kvd-surface) !important; border-color: var(--kvd-line) !important; color: var(--kvd-ink); } [data-theme="dark"] body.kv-redesign .kvp-mission h3, [data-theme="dark"] body.kv-redesign .kvp-mile h3, [data-theme="dark"] body.kv-redesign .kvp-card__body h3, [data-theme="dark"] body.kv-redesign .kvp-pillar h3, [data-theme="dark"] body.kv-redesign .kvp-review__who strong, [data-theme="dark"] body.kv-redesign .kvp-stat strong, [data-theme="dark"] body.kv-redesign .kvp-info-card h3 { color: var(--kvd-ink) !important; } [data-theme="dark"] body.kv-redesign .kvp-mission p, [data-theme="dark"] body.kv-redesign .kvp-checklist li, [data-theme="dark"] body.kv-redesign .kvp-mile p, [data-theme="dark"] body.kv-redesign .kvp-card__body p, [data-theme="dark"] body.kv-redesign .kvp-pillar p, [data-theme="dark"] body.kv-redesign .kvp-review blockquote, [data-theme="dark"] body.kv-redesign .kvp-stat span, [data-theme="dark"] body.kv-redesign .kvp-review__who span { color: var(--kvd-ink-muted) !important; } [data-theme="dark"] body.kv-redesign .kvp-sec--white { background: var(--kvd-bg) !important; } [data-theme="dark"] body.kv-redesign .kvp-offer--promo { background: linear-gradient(180deg, var(--kvd-surface-2), var(--kvd-surface)) !important; }