/* ============================================================ CiCC Platform Theme v4.0.0 — DESIGN TOKENS DUAL-MODE Light (default) & Dark toggled via [data-theme] on . No hardcoded !important — theme JS only sets data-theme attr. Toggle: document.documentElement.dataset.theme = 'light'|'dark' Storage: localStorage.cicc-theme = 'light'|'dark' (default: dark) ============================================================ */ /* === LIGHT MODE (default — nếu html không có data-theme) === */ html { --primary: #1a237e !important; --primary-light: #283593 !important; --primary-dark: #0d1442 !important; --secondary: #16a34a !important; --secondary-light: #22c55e !important; --accent: #f97316 !important; --accent-light: #fb923c !important; --gray-50: #f8fafc !important; --gray-100: #f1f5f9 !important; --gray-200: #e2e8f0 !important; --gray-300: #cbd5e1 !important; --gray-400: #94a3b8 !important; --gray-500: #64748b !important; --gray-600: #475569 !important; --gray-700: #334155 !important; --gray-800: #1e293b !important; --gray-900: #0f172a !important; --bg-primary: #ffffff !important; --bg-secondary: #f8fafc !important; --bg-card: #ffffff !important; --text-primary: #0f172a !important; --text-secondary: #475569 !important; --text-muted: #64748b !important; --border-color: #e2e8f0 !important; --cicc-navy: #0f172a !important; --cicc-blue: #1a237e !important; --cicc-white: #ffffff !important; --shadow-sm: 0 1px 2px rgba(15,23,42,0.06) !important; --shadow-md: 0 4px 10px rgba(15,23,42,0.08) !important; --shadow-lg: 0 10px 24px rgba(15,23,42,0.10) !important; --shadow-xl: 0 20px 40px rgba(15,23,42,0.12) !important; --transition-fast: 120ms ease !important; --transition-base: 200ms ease !important; --transition-slow: 300ms ease !important; --container-max: 1200px !important; --header-height: 72px !important; --topbar-height: 36px !important; --color-ai: #7c3aed !important; --color-ai-light: #a855f7 !important; /* Font — Việt hóa chuẩn */ --font-main: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; --font-heading: 'Be Vietnam Pro', 'Plus Jakarta Sans', 'Inter', sans-serif !important; } /* === DARK MODE (khi html có data-theme="dark") === */ [data-theme="dark"] { --primary: #3b82f6 !important; --primary-light: #60a5fa !important; --primary-dark: #1d4ed8 !important; --secondary: #4CAF50 !important; --secondary-light: #66BB6A !important; --accent: #fb923c !important; --accent-light: #fbbf24 !important; --gray-50: #0f172a !important; --gray-100: #1e293b !important; --gray-200: #334155 !important; --gray-300: #475569 !important; --gray-500: #94a3b8 !important; --gray-600: #cbd5e1 !important; --gray-700: #e2e8f0 !important; --gray-800: #f1f5f9 !important; --gray-900: #f8fafc !important; --bg-primary: #0f172a !important; --bg-secondary: #1e293b !important; --bg-card: #1e293b !important; --text-primary: #f1f5f9 !important; --text-secondary: #94a3b8 !important; --text-muted: #64748b !important; --border-color: #334155 !important; --cicc-navy: #0f172a !important; --cicc-blue: #60a5fa !important; --cicc-white: #ffffff !important; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3) !important; --shadow-md: 0 4px 6px rgba(0,0,0,0.4) !important; --shadow-lg: 0 12px 24px rgba(0,0,0,0.5) !important; --shadow-xl: 0 24px 48px rgba(0,0,0,0.6) !important; --transition-fast: 150ms ease !important; --transition-base: 300ms ease !important; --transition-slow: 500ms ease !important; --container-max: 1200px !important; --header-height: 72px !important; --topbar-height: 36px !important; --color-ai: #7c3aed !important; --color-ai-light: #a855f7 !important; /* Font — Việt hóa chuẩn */ --font-main: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; --font-heading: 'Be Vietnam Pro', 'Plus Jakarta Sans', 'Inter', sans-serif !important; } /* === GLOBAL OVERRIDE: body luôn dùng token của chế độ đang active === */ html, body, [data-theme="dark"] body, [data-theme="light"] body { background: var(--bg-primary) !important; color: var(--text-primary) !important; } /* === FOCUS + ACCESSIBILITY === */ *:focus-visible { outline: 2px var(--primary) solid !important; outline-offset: 2px !important; } .skip-link { position: absolute; top: -100px; left: 0; z-index: 9999; background: var(--bg-primary); color: var(--text-primary); padding: 8px; transition: top 0.2s; } .skip-link:focus { top: 0; } /* === REDUCED MOTION (nếu thầy/người dùng bật OS) === */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } /* === VARIANTS COMPONENT CLASSES (cùng token) === */ .section-tag { display: inline-block; background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important; color: #ffffff !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 4px 16px !important; border-radius: var(--radius-full) !important; margin-bottom: var(--space-md) !important; } .section-header h2 { color: var(--text-primary) !important; } .section-header p { color: var(--text-secondary) !important; } .btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; } .btn-primary:hover { background: var(--primary-light) !important; } .btn-accent { background: var(--accent) !important; border-color: var(--accent) !important; } .btn-accent:hover { background: var(--accent-light) !important; } /* Card hover nhẹ */ .pillar-card, .module-card, .course-card, .partner-card, .value-card, .vision-card, .service-list-card, .package-card, .app-detail-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: var(--shadow-sm) !important; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important; } .pillar-card:hover, .module-card:hover, .course-card:hover, .partner-card:hover, .value-card:hover, .vision-card:hover, .service-list-card:hover, .package-card:hover, .app-detail-card:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-lg) !important; border-color: var(--primary) !important; } /* gỡ animation infinite thầy ghét */ .marquee, .badge-float, .shimmer, .wiki-hue, .scroll-arrow { animation: none !important; } /* === RESPONSIVE === */ @media (max-width: 1200px) { .pillars-grid { grid-template-columns: repeat(3, 1fr) !important; } .house-pillars { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 900px) { .pillars-grid { grid-template-columns: repeat(2, 1fr) !important; } .modules-grid, .courses-grid, .values-grid, .vision-grid, .partners-grid, .packages-grid, .clients-categories, .founder-grid, .overview-grid, .contact-grid, .services-list-grid { grid-template-columns: 1fr !important; } .house-pillars { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .pillars-grid { grid-template-columns: 1fr !important; } .house-pillars { grid-template-columns: 1fr !important; } .hero-stats { grid-template-columns: repeat(2, 1fr) !important; } .about-stats { grid-template-columns: repeat(2, 1fr) !important; } .founder-milestones { grid-template-columns: 1fr !important; } .section-header h2 { font-size: 28px !important; } .container { padding: 0 var(--space-md) !important; } }