body { font-family: 'DM Sans', system-ui, sans-serif; background: radial-gradient(1200px 600px at -10% -20%, rgba(147, 197, 253, 0.28), transparent 60%), radial-gradient(1000px 480px at 110% 10%, rgba(191, 219, 254, 0.35), transparent 55%), #f8fbff; } .cn-font { font-family: 'Noto Sans SC', sans-serif; } .glass { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 35px -18px rgba(30, 64, 175, 0.28); } .hero-gradient { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 35%, #3b82f6 70%, #60a5fa 100%); } .card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(37, 99, 235, 0.4); } .quiz-option { transition: transform 0.14s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .quiz-option:hover:not(:disabled) { box-shadow: 0 10px 22px -16px rgba(37, 99, 235, 0.55); } .quiz-option:active:not(:disabled) { transform: scale(0.98); } .progress-shine { background: linear-gradient(90deg, #2563eb, #3b82f6, #93c5fd); background-size: 220% 100%; animation: shine 3.2s ease infinite; } @keyframes shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .fade-in { animation: fadeIn 0.42s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } #toast { border: 1px solid rgba(147, 197, 253, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #toast.show { opacity: 1; transform: translate(-50%, 0); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #60a5fa, #3b82f6); border-radius: 999px; } ::-webkit-scrollbar-track { background: #eaf2ff; } /* Dark mode (light default via JS toggle adds class `dark` on ) */ html.dark body { background: #050b18 !important; color: #e5e7eb !important; } html.dark .landing-nav { background: rgba(2, 6, 23, 0.65) !important; border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important; } html.dark .landing-nav-link { color: #cbd5e1 !important; } html.dark .landing-nav-link:hover { color: #93c5fd !important; background: rgba(30, 58, 138, 0.35) !important; } html.dark .glass { background: rgba(2, 6, 23, 0.58) !important; border-color: rgba(148, 163, 184, 0.22) !important; box-shadow: 0 10px 35px -18px rgba(0, 0, 0, 0.45) !important; } html.dark .hero-gradient { /* Match landing-nav dark background for consistency */ background: rgba(2, 6, 23, 0.65) !important; border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important; } html.dark .landing-mesh { background: #050b18 !important; } html.dark .landing-footer { background: rgba(2, 6, 23, 0.72) !important; border-top-color: rgba(148, 163, 184, 0.24) !important; } html.dark .landing-footer-link { color: #cbd5e1 !important; } html.dark .landing-footer-link:hover { color: #93c5fd !important; } html.dark #toast { background-color: #0b1220 !important; border-color: rgba(148, 163, 184, 0.35) !important; } /* Common text colors */ html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700, html.dark .text-slate-600, html.dark .text-slate-500, html.dark .text-slate-400 { color: #e5e7eb !important; } html.dark .text-slate-600 { color: #cbd5e1 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #a7b3c8 !important; } /* Common background colors */ html.dark .bg-slate-50 { background-color: #050b18 !important; } html.dark .bg-slate-100 { background-color: #0b1220 !important; } html.dark .bg-white { background-color: rgba(3, 7, 18, 0.88) !important; } html.dark .bg-white\/40 { background-color: rgba(3, 7, 18, 0.55) !important; } html.dark .bg-white\/60 { background-color: rgba(3, 7, 18, 0.68) !important; } html.dark .bg-white\/80 { background-color: rgba(3, 7, 18, 0.75) !important; } html.dark .bg-white\/90 { background-color: rgba(3, 7, 18, 0.86) !important; } html.dark .bg-slate-200\/80 { background-color: rgba(15, 23, 42, 0.65) !important; } /* Common border colors */ html.dark .border-slate-200, html.dark .border-slate-100, html.dark .border-slate-200\/80, html.dark .border-slate-100\/80, html.dark .border-slate-200\/80 { border-color: rgba(148, 163, 184, 0.28) !important; } /* Improved contrast for header navigation tabs and quiz mode in dark theme */ html.dark header.hero-gradient .nav-tab { background: rgba(255, 255, 255, 0.04) !important; color: #dbeefe !important; border-color: rgba(148,163,184,0.06) !important; } html.dark header.hero-gradient .nav-tab:hover { background: rgba(255, 255, 255, 0.06) !important; } /* When Tailwind utility sets bg-white on an active tab, override for strong contrast */ html.dark header.hero-gradient .nav-tab.bg-white, html.dark header.hero-gradient .nav-tab.bg-white.text-blue-800 { background: linear-gradient(180deg, rgba(18,52,86,0.95), rgba(24,82,150,0.95)) !important; color: #e6f6ff !important; box-shadow: 0 12px 30px -12px rgba(30,64,175,0.5) !important; border-color: rgba(59,130,246,0.28) !important; } /* Quiz mode buttons */ html.dark .quiz-mode { background: rgba(255,255,255,0.03); border-color: rgba(148,163,184,0.08); color: #e6eefc; } /* Active quiz-mode variant when the app applies border-blue-500/bg-blue-50 */ html.dark .quiz-mode.border-blue-500 { background: linear-gradient(180deg, rgba(14,50,87,0.9), rgba(23,78,140,0.9)) !important; color: #e8f6ff !important; border-color: rgba(99,102,241,0.22) !important; box-shadow: 0 10px 28px -14px rgba(37,99,235,0.45) !important; } /* Landing page */ /* Sync Số từ và Giọng đọc styles with quiz-mode in dark theme */ html.dark .count-option, html.dark .voice-option { background: rgba(255,255,255,0.03) !important; border-color: rgba(148,163,184,0.08) !important; color: #e6eefc !important; } /* Active/selected variants (Tailwind applies border-blue-500 or bg-blue-50) */ html.dark .count-option.border-blue-500, html.dark .count-option.bg-blue-50, html.dark .voice-option.border-blue-500, html.dark .voice-option.bg-blue-50 { background: linear-gradient(180deg, rgba(14,50,87,0.92), rgba(23,78,140,0.92)) !important; color: #e8f6ff !important; border-color: rgba(99,102,241,0.24) !important; box-shadow: 0 10px 28px -14px rgba(37,99,235,0.45) !important; } /* Adjust text inside voice-option to keep readable contrast */ html.dark .voice-option .font-semibold, html.dark .voice-option .text-slate-900 { color: #e6eefc !important; } /* Refine nav-tab contrast on blue header in dark mode */ html.dark header.hero-gradient .nav-tab { background: rgba(3,7,18,0.48) !important; color: #cfe8ff !important; border-color: rgba(148,163,184,0.12) !important; } html.dark header.hero-gradient .nav-tab:hover { background: rgba(3,7,18,0.6) !important; } /* Active nav tab override (Tailwind sets bg-white/text-blue-800) */ html.dark header.hero-gradient .nav-tab.bg-white, html.dark header.hero-gradient .nav-tab.bg-white.text-blue-800 { background: linear-gradient(135deg, #0b3a7a 0%, #1f6feb 100%) !important; color: #ffffff !important; border-color: rgba(59,130,246,0.28) !important; box-shadow: 0 12px 30px -12px rgba(30,64,175,0.52) !important; } .landing-mesh { background: radial-gradient(900px 500px at 80% -10%, rgba(96, 165, 250, 0.35), transparent 55%), radial-gradient(700px 420px at 0% 100%, rgba(147, 197, 253, 0.4), transparent 50%), #f0f7ff; } .landing-nav { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(148, 163, 184, 0.2); } .landing-hero-blob { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), transparent 55%), radial-gradient(circle at 70% 60%, rgba(191, 219, 254, 0.5), transparent 50%); } .landing-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; } .landing-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(37, 99, 235, 0.35); } html { scroll-behavior: smooth; }