/* ============================================ THEME.CSS - ANT DESIGN COLOR SYSTEM Version 2.0 - Clean Architecture Built on Ant Design v5 Color System Source: https://ant.design/docs/react/customize-theme ============================================ */ /* ============================================ HƯỚNG DẪN SỬ DỤNG (Dành cho người mới bắt đầu) ============================================ 1. CÁCH DÙNG - Liên kết file CSS: - Mặc định theme sáng. Để chuyển sang tối, thêm data-theme="dark" vào thẻ html: - Có thể dùng nút toggle (class .theme-toggle-btn) kèm JavaScript nhỏ để chuyển đổi. 2. CÁC CLASS CHÍNH (có sẵn) - Layout: .navbar, .site-main, .hero, .content-section, .cards-grid - Thành phần: .card, .btn (primary/secondary/success/warning/danger) - Thông báo: .alert (info/success/warning/error) - Form: .form-group, .form-label, .form-input, .form-select, .form-textarea, .form-error, .form-hint - Menu: .nav-menu, .nav-link, .hamburger (mobile) - Bổ sung: .pagination, .breadcrumb, .switch, details/summary (accordion), input[type="range"] (slider) 3. MÀU SẮC VÀ BIẾN (tuỳ chỉnh dễ dàng) - Biến toàn cục: --color-bg-base, --color-text-primary, --color-primary-text, ... - Hệ thống 12 bảng màu (blue, green, ...) với 10 cấp độ, dùng prefix --ant-*. - Để thay đổi brand color, chỉ cần ghi đè --ant-blue-6 hoặc --color-primary-text. 4. RESPONSIVE - Tự động thích ứng với mọi thiết bị (breakpoint 768px). - Grid cards xếp cột linh hoạt, navbar chuyển thành menu hamburger trên mobile. 5. MỞ RỘNG - Khi thêm component mới, hãy tận dụng các biến có sẵn như --space-*, --radius-*, --color-*, --shadow-*. - Nếu cần tuỳ chỉnh riêng cho dự án, tạo file CSS khác và đặt sau file này. 6. LƯU Ý - File sử dụng CSS thuần, không yêu cầu JavaScript. Một số component (switch, accordion) hoạt động nhờ HTML/CSS thuần. - Hỗ trợ trình duyệt hiện đại (Chrome, Firefox, Safari, Edge). - Đã tối ưu cho người dùng có nhu cầu giảm chuyển động (prefers-reduced-motion). ============================================ */ /* ============================================ GOOGLE FONTS IMPORT ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================ GLOBAL RESET & TYPOGRAPHY ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--color-text-primary); background: var(--color-bg-base); min-height: 100vh; /* Ensure full coverage */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; margin-bottom: 16px; color: var(--color-text-primary); } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } /* Links */ a { color: var(--color-primary-text); text-decoration: none; } a:hover { color: var(--color-primary-text-hover); } /* Lists */ ul, ol { margin-bottom: 16px; padding-left: 24px; } li { margin-bottom: 4px; } /* Paragraphs */ p { margin-bottom: 16px; } /* Code */ code, pre { font-family: var(--font-mono); font-size: 13px; } code { background: var(--color-fill-secondary); padding: 2px 6px; border-radius: 3px; } pre { background: var(--color-bg-secondary); padding: 16px; border-radius: 8px; overflow-x: auto; } /* Tables */ table { width: 100%; border-collapse: collapse; margin-bottom: 16px; } th, td { border: 1px solid var(--color-border); padding: 12px; text-align: left; } th { background: var(--color-fill-secondary); font-weight: 600; } /* Images */ img { max-width: 100%; height: auto; display: block; } /* Blockquote */ blockquote { border-left: 4px solid var(--color-primary-border); padding-left: 16px; margin: 16px 0; color: var(--color-text-secondary); } /* Horizontal Rule */ hr { border: none; border-top: 1px solid var(--color-border); margin: 24px 0; } /* Selection */ ::selection { background: var(--color-primary-bg); color: var(--color-primary-text); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-fill-secondary); } ::-webkit-scrollbar-thumb { background: var(--color-fill); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-fill-tertiary); } /* ============================================ PHẦN 1: BẢNG MÀU CƠ BẢN (ANT DESIGN) 12 bảng màu × 10 cấp độ = 120+ biến ============================================ */ :root { /* Easing Functions - Ant Design */ --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* Seed Tokens - Brand Colors */ --ant-color-primary: #1677ff; --ant-color-success: #52c41a; --ant-color-warning: #faad14; --ant-color-error: #ff4d4f; /* Blue Palette (Primary) */ --ant-blue-1: #e6f4ff; --ant-blue-2: #bae0ff; --ant-blue-3: #91caff; --ant-blue-4: #69b1ff; --ant-blue-5: #4096ff; --ant-blue-6: #1677ff; /* Primary Blue */ --ant-blue-7: #0958d9; --ant-blue-8: #003eb3; --ant-blue-9: #002c8c; --ant-blue-10: #001d66; /* Green Palette (Success) */ --ant-green-1: #f6ffed; --ant-green-2: #d9f7be; --ant-green-3: #b7eb8f; --ant-green-4: #95de64; --ant-green-5: #73d13d; --ant-green-6: #52c41a; /* Base Green */ --ant-green-7: #389e0d; --ant-green-8: #237804; --ant-green-9: #135200; --ant-green-10: #092b00; /* Yellow Palette (Warning) */ --ant-yellow-1: #feffe6; --ant-yellow-2: #ffffb8; --ant-yellow-3: #fffb8f; --ant-yellow-4: #fff566; --ant-yellow-5: #ffec3d; --ant-yellow-6: #fadb14; /* Base Yellow */ --ant-yellow-7: #d4b106; --ant-yellow-8: #ad8b00; --ant-yellow-9: #876800; --ant-yellow-10: #614700; /* Red Palette (Error) */ --ant-red-1: #fff1f0; --ant-red-2: #ffccc7; --ant-red-3: #ffa39e; --ant-red-4: #ff7875; --ant-red-5: #ff4d4f; --ant-red-6: #f5222d; /* Base Red */ --ant-red-7: #cf1322; --ant-red-8: #a8071a; --ant-red-9: #850014; --ant-red-10: #5c0011; /* Purple Palette */ --ant-purple-1: #f9f0ff; --ant-purple-2: #efdbff; --ant-purple-3: #d3adf7; --ant-purple-4: #b37feb; --ant-purple-5: #9254de; --ant-purple-6: #722ed1; --ant-purple-7: #531dab; --ant-purple-8: #391085; --ant-purple-9: #22075e; --ant-purple-10: #120338; /* Cyan Palette */ --ant-cyan-1: #e6fffb; --ant-cyan-2: #b5f5ec; --ant-cyan-3: #87e8de; --ant-cyan-4: #5cdbd3; --ant-cyan-5: #36cfc9; --ant-cyan-6: #13c2c2; --ant-cyan-7: #08979c; --ant-cyan-8: #006d75; --ant-cyan-9: #00474f; --ant-cyan-10: #002329; /* Orange Palette */ --ant-orange-1: #fff7e6; --ant-orange-2: #ffe7ba; --ant-orange-3: #ffd591; --ant-orange-4: #ffc069; --ant-orange-5: #ffa940; --ant-orange-6: #fa8c16; --ant-orange-7: #d46b08; --ant-orange-8: #ad4e00; --ant-orange-9: #873800; --ant-orange-10: #612500; /* Volcano Palette */ --ant-volcano-1: #fff2e8; --ant-volcano-2: #ffd8bf; --ant-volcano-3: #ffbb96; --ant-volcano-4: #ff9c6e; --ant-volcano-5: #ff7a45; --ant-volcano-6: #fa541c; --ant-volcano-7: #d4380d; --ant-volcano-8: #ad2102; --ant-volcano-9: #871400; --ant-volcano-10: #610b00; /* Geekblue Palette */ --ant-geekblue-1: #f0f5ff; --ant-geekblue-2: #d6e4ff; --ant-geekblue-3: #adc6ff; --ant-geekblue-4: #85a5ff; --ant-geekblue-5: #597ef7; --ant-geekblue-6: #2f54eb; --ant-geekblue-7: #1d39c4; --ant-geekblue-8: #10239e; --ant-geekblue-9: #061178; --ant-geekblue-10: #030852; /* Gold Palette */ --ant-gold-1: #fffbe6; --ant-gold-2: #fff1b8; --ant-gold-3: #ffe58f; --ant-gold-4: #ffd666; --ant-gold-5: #ffc53d; --ant-gold-6: #faad14; --ant-gold-7: #d48806; --ant-gold-8: #ad6800; --ant-gold-9: #874d00; --ant-gold-10: #613400; /* Lime Palette */ --ant-lime-1: #fcffe6; --ant-lime-2: #f4ffb8; --ant-lime-3: #eaff8f; --ant-lime-4: #d3f261; --ant-lime-5: #bae637; --ant-lime-6: #a0d911; --ant-lime-7: #7cb305; --ant-lime-8: #5b8c00; --ant-lime-9: #3f6600; --ant-lime-10: #254000; /* Magenta Palette */ --ant-magenta-1: #fff0f6; --ant-magenta-2: #ffd6e7; --ant-magenta-3: #ffadd2; --ant-magenta-4: #ff85c0; --ant-magenta-5: #f759ab; --ant-magenta-6: #eb2f96; --ant-magenta-7: #c41d7f; --ant-magenta-8: #9e1068; --ant-magenta-9: #780650; --ant-magenta-10: #520339; } /* ============================================ PHẦN 2: THEME SÁNG/TỐI Áp dụng màu từ Phần 1 vào theme variables ============================================ */ /* LIGHT THEME (Default) */ [data-theme="light"] { /* Backgrounds */ --color-bg-base: var(--white); --color-bg-container: var(--white); --color-bg-secondary: var(--gray-1); --color-bg-elevated: var(--white); /* Text Colors */ --color-text-primary: rgba(0, 0, 0, 0.88); --color-text-secondary: rgba(0, 0, 0, 0.65); --color-text-tertiary: rgba(0, 0, 0, 0.45); --color-text-disabled: rgba(0, 0, 0, 0.25); /* Borders */ --color-border: var(--ant-gray-5); --color-border-secondary: var(--ant-gray-3); /* Fill Colors */ --color-fill: rgba(0, 0, 0, 0.15); --color-fill-secondary: rgba(0, 0, 0, 0.06); --color-fill-tertiary: rgba(0, 0, 0, 0.04); --color-fill-quaternary: rgba(0, 0, 0, 0.02); /* Shadows */ --shadow-color: rgba(0, 0, 0, 0.1); --color-bg-spotlight: rgba(0, 0, 0, 0.85); /* For tooltips/popovers */ --color-overlay: rgba(0, 0, 0, 0.45); /* For modal overlays */ /* White Color */ --color-white: #ffffff; /* Functional Colors */ --color-success: var(--ant-green-6); --color-warning: var(--ant-yellow-6); --color-error: var(--ant-red-6); --color-info: var(--ant-blue-6); /* Alert Backgrounds & Borders */ --color-success-bg: var(--ant-green-1); --color-success-border: var(--ant-green-3); --color-success-text: var(--ant-green-6); --color-warning-bg: var(--ant-yellow-1); --color-warning-border: var(--ant-yellow-3); --color-warning-text: var(--ant-yellow-6); --color-error-bg: var(--ant-red-1); --color-error-border: var(--ant-red-3); --color-error-text: var(--ant-red-6); --color-info-bg: var(--ant-blue-1); --color-info-border: var(--ant-blue-3); --color-info-text: var(--ant-blue-6); /* Component States */ --color-primary-bg: var(--ant-blue-1); --color-primary-bg-hover: var(--ant-blue-2); --color-primary-border: var(--ant-blue-3); --color-primary-border-hover: var(--ant-blue-4); --color-primary-hover: var(--ant-blue-5); --color-primary-active: var(--ant-blue-7); --color-primary-text: var(--ant-blue-6); --color-primary-text-hover: var(--ant-blue-5); --color-primary-text-active: var(--ant-blue-7); } /* DARK THEME */ [data-theme="dark"] { /* Backgrounds */ --color-bg-base: #141414; --color-bg-container: #1f1f1f; --color-bg-secondary: #141414; --color-bg-elevated: #1f1f1f; /* Text Colors */ --color-text-primary: rgba(255, 255, 255, 0.85); --color-text-secondary: rgba(255, 255, 255, 0.65); --color-text-tertiary: rgba(255, 255, 255, 0.45); --color-text-disabled: rgba(255, 255, 255, 0.25); /* Borders - Reduced opacity for softer look */ --color-border: rgba(255, 255, 255, 0.08); /* Changed from 0.12 */ --color-border-secondary: rgba(255, 255, 255, 0.04); /* Changed from 0.08 */ /* Fill Colors */ --color-fill: rgba(255, 255, 255, 0.12); --color-fill-secondary: rgba(255, 255, 255, 0.08); --color-fill-tertiary: rgba(255, 255, 255, 0.04); --color-fill-quaternary: rgba(255, 255, 255, 0.02); /* Shadows */ --shadow-color: rgba(0, 0, 0, 0.3); --color-bg-spotlight: rgba(0, 0, 0, 0.9); /* Darker for dark mode */ --color-overlay: rgba(0, 0, 0, 0.45); /* For modal overlays */ /* White Color */ --color-white: #ffffff; /* Functional Colors */ --color-success: var(--ant-green-5); --color-warning: var(--ant-yellow-5); --color-error: var(--ant-red-4); --color-info: var(--ant-blue-5); /* Alert Backgrounds & Borders (Dark Theme) */ --color-success-bg: var(--ant-green-9); --color-success-border: var(--ant-green-7); --color-success-text: var(--ant-green-5); --color-warning-bg: var(--ant-yellow-9); --color-warning-border: var(--ant-yellow-7); --color-warning-text: var(--ant-yellow-5); --color-error-bg: var(--ant-red-9); --color-error-border: var(--ant-red-7); --color-error-text: var(--ant-red-4); --color-info-bg: var(--ant-blue-9); --color-info-border: var(--ant-blue-7); --color-info-text: var(--ant-blue-5); /* Component States */ --color-primary-bg: rgba(22, 119, 255, 0.15); --color-primary-bg-hover: rgba(22, 119, 255, 0.25); --color-primary-border: rgba(22, 119, 255, 0.3); --color-primary-border-hover: rgba(22, 119, 255, 0.5); --color-primary-hover: var(--ant-blue-5); --color-primary-active: var(--ant-blue-7); --color-primary-text: var(--ant-blue-6); --color-primary-text-hover: var(--ant-blue-5); --color-primary-text-active: var(--ant-blue-7); } /* ============================================ PHẦN 3: THÀNH PHẦN WEBSITE Áp dụng theme variables vào components ============================================ */ /* NAVIGATION BAR */ .site-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: var(--color-bg-container); /* Nền navbar */ border-bottom: 1px solid var(--color-border); box-shadow: 0 2px 8px var(--shadow-color); /* Shadow cho navbar */ backdrop-filter: blur(8px); /* Glass effect */ } .navbar { background: transparent; /* Nền trong suốt, để nền cho site-header */ box-shadow: none; /* Bỏ shadow, để shadow cho site-header */ padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; } /* Left-aligned navigation menu */ .nav-menu { display: flex; gap: 8px; /* Khoảng cách giữa các menu items */ list-style: none; margin: 0; margin-right: auto; /* Đẩy toàn bộ menu sang trái */ padding: 0; } /* ✅ Override global li margin for navbar */ .nav-menu li { margin: 0; /* ✅ Reset margin-bottom: 4px from global li rule */ } /* Right controls: Language + Theme Toggle */ .nav-controls { display: flex; gap: 8px; align-items: center; } /* Language buttons container */ .nav-languages { display: flex; gap: 4px; align-items: center; } /* Theme mode buttons container */ .nav-theme-modes { display: flex; gap: 4px; align-items: center; } /* Hide hamburger on desktop */ .hamburger { display: none; flex-direction: column; gap: 4px; background: transparent; border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; padding: 8px; transition: all 0.2s; } .hamburger span { width: 24px; height: 2px; background: var(--color-text-primary); transition: all 0.3s; border-radius: 2px; } .hamburger:hover { background: var(--color-fill-secondary); } /* Navigation links - Use .btn-secondary class instead */ .nav-link { /* No custom styling - use .btn-secondary class in HTML */ } /* RESPONSIVE - MOBILE MENU */ @media (max-width: 768px) { .navbar { padding: 12px 16px; } /* Hide menu on mobile (show hamburger menu) */ .nav-menu { display: none; } /* Controls on RIGHT: Language + Theme */ .nav-controls { order: 1; /* Right side */ margin-left: auto; } /* Hamburger on RIGHT (after controls) */ .hamburger { display: flex; order: 2; /* Right side, after controls */ } /* Mobile dropdown menu - Floating style */ .nav-menu.active { display: flex; position: absolute; top: calc(100% + 8px); /* Cách navbar 8px */ right: 16px; /* Cách mép phải 16px */ left: auto; width: max-content; /* Width vừa nút dài nhất */ min-width: auto; /* Bỏ min-width cố định */ max-width: calc(100vw - 32px); /* Không vượt quá màn hình */ background: var(--color-bg-container); border: 1px solid var(--color-border); box-shadow: 0 4px 12px var(--shadow-color); flex-direction: column; padding: 16px; /* Padding đều 4 bên: 16px */ gap: 8px; /* Khoảng cách giữa các nút */ align-items: flex-end; /* Căn phải */ border-radius: 8px; /* Bo góc toàn bộ */ } .nav-link { display: block; padding: 8px 16px; /* Padding cho nút */ border-radius: 4px; /* Bo góc nút */ text-align: right; width: auto; } .nav-link:hover { background: var(--color-fill-secondary); /* Hover effect */ } /* Larger touch targets on mobile */ .theme-toggle-btn, .lang-toggle { padding: 8px 12px; font-size: 18px; } } /* TABLET - Fix text wrapping issue (769-825px) */ @media (min-width: 769px) and (max-width: 825px) { /* Reduce language button size to prevent nav items from wrapping */ .lang-btn { min-width: 36px !important; /* ✅ Reduced from 48px */ min-height: 28px !important; /* ✅ Reduced from 36px */ } /* Also reduce theme buttons */ .theme-btn { width: 32px !important; height: 32px !important; } /* Prevent nav links from wrapping */ .nav-link { white-space: nowrap; /* ✅ Keep text on one line */ } } /* THEME TOGGLE BUTTONS - FIXED STYLES */ /* Light mode button: ALWAYS LIGHT STYLE */ .theme-btn.light-mode-btn { background: var(--white); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 6px 10px; cursor: pointer; font-size: 18px; border-radius: 4px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .theme-btn.light-mode-btn:hover { background: var(--gray-1); border-color: var(--color-border); } /* Dark mode button: ALWAYS DARK STYLE */ .theme-btn.dark-mode-btn { background: var(--color-bg-container); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 6px 10px; cursor: pointer; font-size: 18px; border-radius: 4px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .theme-btn.dark-mode-btn:hover { background: var(--color-bg-base); border-color: var(--color-border); } /* LANGUAGE SWITCHER BUTTONS */ .lang-btn, .lang-btn.btn, .lang-btn.btn-secondary { background: transparent; border: 1px solid transparent; padding: 0 !important; /* ✅ Override .btn padding */ cursor: pointer; border-radius: 4px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; min-width: 48px; /* ✅ 36 × 4/3 ratio */ min-height: 36px; /* ✅ Minimum touch target */ } .lang-btn img { display: block; width: 24px; /* ✅ Fixed flag width */ height: 18px; /* ✅ Fixed flag height */ flex-shrink: 0; /* ✅ Prevent stretching */ object-fit: contain; /* ✅ Maintain aspect ratio */ } .lang-btn:hover { background: var(--color-fill-secondary); border-color: var(--color-border); } .lang-btn.active { background: var(--color-fill-secondary); border-color: var(--color-border); } /* SITE HEADER */ .site-header { position: sticky; top: 0; z-index: 1000; } /* SITE MAIN */ .site-main { max-width: 1200px; margin: 0 auto; padding: 32px 24px; } /* HERO SECTION */ .hero { text-align: center; padding: 64px 24px; background: var(--color-bg-secondary); border-radius: 8px; margin-bottom: 32px; } /* Hero Layout - 2 columns */ .hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1000px; margin: 0 auto; } @media (max-width: 768px) { .hero-layout { grid-template-columns: 1fr; gap: 32px; } } /* Hero Avatar */ .hero-avatar-wrapper { display: flex; justify-content: center; } .hero-avatar { width: 100%; max-width: 350px; aspect-ratio: 1; object-fit: cover; border-radius: 10%; } /* Hero Content */ .hero-title { font-size: 36px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; text-align: left; } .hero-subtitle { font-size: 18px; color: var(--color-text-secondary); margin-bottom: 24px; text-align: left; } .hero-intro { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); margin-bottom: 24px; text-align: left; /* ✅ CĂN TRÁI */ } /* HERO CONTACT SECTION */ .hero-contact { margin-top: 24px; margin-bottom: 24px; } .hero-contact-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; /* ✅ CĂN TRÁI */ } .hero-contact-list { list-style: none; padding: 0; margin: 0; } .hero-contact-list li { display: flex; align-items: baseline; /* ✅ CĂN THEO BASELINE CỦA TEXT */ gap: 8px; margin-bottom: 8px; color: var(--color-text-secondary); flex-wrap: wrap; /* ✅ WRAP KHI DÀI */ } .contact-label { font-weight: 600; color: var(--color-text-primary); flex-shrink: 0; /* ✅ KHÔNG BỊ NÉN */ white-space: nowrap; /* ✅ KHÔNG WRAP LABEL */ } .hero-contact-list a { color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s; } .hero-contact-list a:hover { color: var(--color-primary); text-decoration: underline; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; /* ✅ CĂN GIỮA CÁC NÚT THEO CHIỀU DỌC */ } .hero-cta .alert { display: inline-block; margin-bottom: 0; padding: 6px 12px; /* ✅ GIẢM PADDING TỪ 12px 16px → 6px 12px */ } /* HERO BADGE - For status badges */ .hero-badge { font-size: 14px; line-height: 1.2; display: inline-block; } /* CONTENT SECTIONS */ .content-section { margin-bottom: 48px; } .section-title { font-size: 24px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 24px; padding-bottom: 8px; border-bottom: 2px solid var(--color-primary-border); } /* CARDS GRID */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } @media (max-width: 768px) { .cards-grid { grid-template-columns: 1fr; } } /* Stats Grid - Special grid for stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; text-align: center; } .stat-number { font-size: 32px; font-weight: 700; color: var(--color-primary-text); } .stat-label { color: var(--color-text-secondary); font-size: 14px; margin-top: 8px; } .nav-link { color: var(--color-text-secondary); } /* TAG CLOUD - For competencies/skills */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* BUTTON UTILITIES */ .btn-block { display: inline-block; margin-top: 16px; } /* Small button variant - For tool tags */ .btn-sm { font-size: 13px; padding: 4px 12px; } /* CATEGORY ICON - For software categories */ .category-icon { font-size: 48px; margin-bottom: 16px; } /* TOOL LIST - Flex layout for tool tags */ .tool-list { display: flex; flex-wrap: wrap; gap: 8px; } /* LIST STYLING */ .list-secondary { margin: 16px 0; padding-left: 20px; color: var(--color-text-secondary); } /* METRIC BOX */ .metric-box { margin-top: 16px; padding: 12px; background: var(--color-fill-secondary); border-radius: 4px; } .metric-text { color: var(--color-text-tertiary); font-size: 13px; } /* ARTICLE PAGES */ .article { background: var(--color-bg-container); color: var(--color-text-primary); } .article-title { color: var(--color-text-primary); } .article-meta { color: var(--color-text-secondary); } .article-content { color: var(--color-text-primary); } /* CARDS */ .card { background: var(--color-bg-container); border: 1px solid var(--color-border); border-radius: var(--radius-lg); /* 8px */ box-shadow: var(--shadow-md); padding: var(--space-5); /* 20px - Added per review */ transition: all 0.2s var(--ease-out); } .card-title { color: var(--color-text-primary); } .card-content { color: var(--color-text-secondary); } .card:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* INFO BOXES / ALERTS */ .alert { padding: 12px 16px; border-radius: 4px; border: 1px solid; } .alert-info { background: var(--color-info-bg, var(--ant-blue-1)); border-color: var(--color-info-border, var(--ant-blue-3)); color: var(--color-info-text, var(--ant-blue-6)); } .alert-success { background: var(--color-success-bg, var(--ant-green-1)); border-color: var(--color-success-border, var(--ant-green-3)); color: var(--color-success-text, var(--ant-green-6)); } .alert-warning { background: var(--color-warning-bg, var(--ant-yellow-1)); border-color: var(--color-warning-border, var(--ant-yellow-3)); color: var(--color-warning-text, var(--ant-yellow-6)); } .alert-error { background: var(--color-error-bg, var(--ant-red-1)); border-color: var(--color-error-border, var(--ant-red-3)); color: var(--color-error-text, var(--ant-red-6)); } /* BUTTONS */ .btn { padding: 4px 15px; /* Ant Design standard */ border-radius: var(--radius-md); /* 4px */ font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease-out); } .btn-primary { background: var(--color-primary-text); color: var(--color-white); border: none; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05); } .btn-primary:hover { background: var(--color-primary-text-hover); } .btn-primary:active { background: var(--color-primary-text-active); } .btn-secondary { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); } .btn-secondary:hover { color: var(--color-primary-text); border-color: var(--color-primary-border); } /* Active state for .btn-secondary */ .btn-secondary.active { color: var(--color-primary-text); border-color: var(--color-primary-border); } .btn-success { background: var(--color-success); color: var(--color-white); } .btn-success:hover { background: var(--ant-green-5); } .btn-warning { background: var(--color-warning); color: var(--color-white); } .btn-warning:hover { background: var(--ant-yellow-5); } .btn-danger { background: var(--color-error); color: var(--color-white); } .btn-danger:hover { background: var(--ant-red-5); } /* PROGRESS BARS */ .progress { background: var(--color-fill-secondary); border-radius: 4px; height: 8px; } .progress-bar { background: var(--color-primary-text); border-radius: 4px; transition: width 0.3s; } .progress-success .progress-bar { background: var(--color-success); } .progress-warning .progress-bar { background: var(--color-warning); } .progress-error .progress-bar { background: var(--color-error); } /* STEPS */ .steps { display: flex; gap: 16px; } .step { flex: 1; text-align: center; } .step-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--color-fill-secondary); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; } .step.finished .step-icon { background: var(--color-success); color: var(--color-white); } .step.active .step-icon { background: var(--color-primary-text); color: var(--color-white); } .step-label { color: var(--color-text-secondary); font-size: 14px; } .step.finished .step-label, .step.active .step-label { color: var(--color-text-primary); } /* FORMS */ .form-group { margin-bottom: 16px; } .form-label { display: block; margin-bottom: 8px; color: var(--color-text-primary); font-weight: 500; } .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-container); color: var(--color-text-primary); font-size: 14px; } .form-input:focus { border-color: var(--color-primary-border); outline: none; box-shadow: 0 0 0 2px var(--color-primary-bg); } .form-input:disabled { background: var(--color-fill-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .form-input::placeholder { color: var(--color-text-disabled); } .form-select { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-container); color: var(--color-text-primary); font-size: 14px; } .form-select:focus { border-color: var(--color-primary-border); outline: none; box-shadow: 0 0 0 2px var(--color-primary-bg); } .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-container); color: var(--color-text-primary); font-size: 14px; min-height: 100px; resize: vertical; } .form-textarea:focus-visible { border-color: var(--color-primary-border); outline: 2px solid var(--color-primary-border); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-primary-bg); } .form-checkbox, .form-radio { accent-color: var(--color-primary-text); } .form-error { color: var(--color-error); font-size: 12px; margin-top: 4px; } .form-hint { color: var(--color-text-tertiary); font-size: 12px; margin-top: 4px; } /* MENUS / DROPDOWNS */ .menu { background: var(--color-bg-container); border: 1px solid var(--color-border); border-radius: 4px; box-shadow: 0 4px 12px var(--shadow-color); } .menu-item { padding: 8px 16px; color: var(--color-text-primary); cursor: pointer; } .menu-item:hover { background: var(--color-fill-quaternary); } .menu-item.active { background: var(--color-primary-bg); color: var(--color-primary-text); } .menu-divider { height: 1px; background: var(--color-border-secondary); margin: 4px 0; } /* TABS */ .tabs { border-bottom: 1px solid var(--color-border); } .tab { padding: 12px 16px; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--color-text-primary); } .tab.active { color: var(--color-primary-text); border-bottom-color: var(--color-primary-text); } /* TAGS / BADGES */ .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; border: 1px solid; } .tag-default { background: var(--color-fill-secondary); border-color: var(--color-border); color: var(--color-text-secondary); } .tag-primary { background: var(--color-primary-bg); border-color: var(--color-primary-border); color: var(--color-primary-text); } .tag-success { background: var(--color-success-bg, var(--ant-green-1)); border-color: var(--color-success-border, var(--ant-green-3)); color: var(--color-success-text, var(--ant-green-6)); } .tag-warning { background: var(--color-warning-bg, var(--ant-yellow-1)); border-color: var(--color-warning-border, var(--ant-yellow-3)); color: var(--color-warning-text, var(--ant-yellow-6)); } .tag-error { background: var(--color-error-bg, var(--ant-red-1)); border-color: var(--color-error-border, var(--ant-red-3)); color: var(--color-error-text, var(--ant-red-6)); } /* MODALS / DIALOGS */ .modal-overlay { background: var(--color-overlay, rgba(0, 0, 0, 0.45)); } .modal { background: var(--color-bg-elevated); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow-color); } .modal-header { border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); } .modal-body { color: var(--color-text-primary); } .modal-footer { border-top: 1px solid var(--color-border); } /* TOOLTIPS / POPOVERS */ .tooltip { background: var(--color-bg-spotlight); color: var(--color-white); border-radius: 4px; padding: 8px 12px; } .popover { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-color); } /* SEGMENTED CONTROLS */ .segmented { background: var(--color-fill-secondary); border-radius: 4px; padding: 4px; display: inline-flex; } .segmented-item { padding: 6px 16px; color: var(--color-text-secondary); cursor: pointer; border-radius: 4px; } .segmented-item:hover { color: var(--color-text-primary); } .segmented-item.active { background: var(--color-bg-container); color: var(--color-text-primary); box-shadow: 0 2px 4px var(--shadow-color); } /* AVATAR */ .avatar { background: var(--color-fill-secondary); color: var(--color-text-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* DIVIDERS */ .divider { height: 1px; background: var(--color-border); margin: 16px 0; } .divider-vertical { width: 1px; height: 1em; background: var(--color-border); margin: 0 8px; } /* SKELETON LOADERS */ .skeleton { background: linear-gradient( 90deg, var(--color-fill-secondary) 25%, var(--color-fill) 50%, var(--color-fill-secondary) 75% ); background-size: 200% 100%; animation: loading 1.5s ease-in-out infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================ PHẦN 4: YẾU TỐ PHỤ TRỢ Typography, Spacing, Utilities ============================================ */ /* TYPOGRAPHY */ :root { /* Fonts */ --font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace; --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; /* Font Sizes */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; } /* SPACING SCALE */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; } /* BORDER RADIUS */ :root { --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; } /* SHADOWS - Ant Design v5 Style */ :root { --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 0 1px 0 rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 20px 0 rgba(0, 0, 0, 0.06), 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 0 1px 0 rgba(0, 0, 0, 0.04); --shadow-xl: 0 12px 32px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 0 1px 0 rgba(0, 0, 0, 0.06); --shadow-2xl: 0 20px 48px 0 rgba(0, 0, 0, 0.12), 0 0 16px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.08); } /* GRAY SCALE */ :root { --gray-0: #ffffff; --gray-1: #f5f5f5; --gray-2: #f0f0f0; --gray-3: #e0e0e0; --gray-4: #b8b8b8; --gray-5: #8a8a8a; --gray-6: #6a6a6a; --gray-7: #4a4a4a; --gray-8: #2d2d2d; --gray-9: #1a1a1a; --gray-10: #0a0a0a; --black: var(--gray-10); --white: var(--gray-0); } /* UTILITIES */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-tertiary { color: var(--color-text-tertiary); } .text-disabled { color: var(--color-text-disabled); } .bg-primary { background: var(--color-primary-bg); } .bg-secondary { background: var(--color-bg-secondary); } .bg-container { background: var(--color-bg-container); } .border-primary { border-color: var(--color-primary-border); } .border-default { border-color: var(--color-border); } /* Layout Utilities */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: 8px; } .gap-4 { gap: 16px; } /* Screen Reader Only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================ PHẦN 4.5: EXTENDED COMPONENTS Bổ sung các components còn thiếu ============================================ */ /* RANGE SLIDER */ input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; } input[type="range"]:focus { outline: none; } /* Track */ input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--color-fill-secondary); border-radius: var(--radius-sm); } input[type="range"]::-moz-range-track { height: 4px; background: var(--color-fill-secondary); border-radius: var(--radius-sm); } /* Thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary-text); border: none; margin-top: -4px; cursor: pointer; transition: all 0.2s var(--ease-out); } input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary-text); border: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); background: var(--color-primary-text-hover); } /* SWITCH / TOGGLE */ .switch { position: relative; display: inline-block; width: 44px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .slider-switch { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-fill); transition: 0.3s; border-radius: 22px; } .slider-switch:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: var(--color-bg-container); transition: 0.3s; border-radius: 50%; } input:checked + .slider-switch { background-color: var(--color-primary-text); } input:checked + .slider-switch:before { transform: translateX(22px); } input:focus-visible + .slider-switch { box-shadow: 0 0 0 2px var(--color-primary-bg); } /* PAGINATION */ .pagination { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0; } .page-item { display: inline-block; } .page-link { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); transition: all 0.2s var(--ease-out); } .page-link:hover { border-color: var(--color-primary-border); color: var(--color-primary-text); } .page-item.active .page-link { background: var(--color-primary-text); border-color: var(--color-primary-text); color: var(--color-white); } .page-item.disabled .page-link { opacity: 0.5; cursor: not-allowed; } /* ACCORDION / COLLAPSE */ details { margin-bottom: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-container); } summary { padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 500; color: var(--color-text-primary); transition: background 0.2s; } summary:hover { background: var(--color-fill-quaternary); } details[open] summary { border-bottom: 1px solid var(--color-border); } details[open] { padding-bottom: var(--space-3); } details .accordion-content { padding: var(--space-3) var(--space-4); color: var(--color-text-secondary); } /* BREADCRUMB */ .breadcrumb { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 var(--space-4) 0; background: transparent; } .breadcrumb-item { font-size: 14px; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 var(--space-2); color: var(--color-text-tertiary); } .breadcrumb-link { color: var(--color-text-secondary); text-decoration: none; } .breadcrumb-link:hover { color: var(--color-primary-text); } .breadcrumb-item.active .breadcrumb-link { color: var(--color-text-primary); font-weight: 500; } /* ============================================ PHẦN 5: RESPONSIVE & ANIMATIONS Media queries, Transitions, Effects ============================================ */ /* RESPONSIVE BREAKPOINTS */ @media (max-width: 768px) { :root { --text-base: 13px; --text-lg: 15px; --text-xl: 18px; } .card { padding: 12px; } .btn { padding: 6px 12px; font-size: 13px; } } /* ACCESSIBILITY */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================ FOOTER STYLES ============================================ */ .site-footer { margin-top: 80px; } .site-footer-bg { background: var(--color-fill-secondary); /* Same as navbar */ width: 100%; } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; /* Same as navbar */ } /* Footer 3-line Layout */ .footer-links-line, .footer-contact-line, .footer-copyright-line { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; padding: 8px 0; /* Reduced from 16px to 8px */ } /* Line 1: Quick Links */ .footer-links-line { padding-top: 24px; /* Keep 24px top padding */ padding-bottom: 8px; } .footer-links-line a { color: var(--color-text-secondary); text-decoration: none; font-size: 14px; transition: color 0.2s; white-space: nowrap; } .footer-links-line a:hover { color: var(--color-primary-text-hover); } /* Line 2: Contact Info */ .footer-contact-line { color: var(--color-text-tertiary); font-size: 13px; } .footer-contact-line span, .footer-contact-line a { white-space: nowrap; color: var(--color-text-tertiary); text-decoration: none; transition: color 0.2s; } .footer-contact-line a:hover { color: var(--color-primary); text-decoration: underline; } .footer-zalo-link { margin-left: 0; } .footer-divider { color: var(--color-border); user-select: none; } /* Line 3: Copyright */ .footer-copyright-line { padding-top: 8px; padding-bottom: 24px; /* Keep 24px bottom padding */ border-top: 1px solid var(--color-border); margin-top: 8px; } .footer-copyright-line p { color: var(--color-text-tertiary); font-size: 13px; margin: 0; } /* Mobile Responsive */ @media (max-width: 768px) { .footer-links-line, .footer-contact-line { flex-direction: column; gap: 8px; text-align: center; } .footer-links-line { padding: 20px 0 12px 0; } .footer-contact-line { font-size: 12px; } .footer-divider { display: none; /* Hide dividers on mobile */ } }