feat: Cải thiện giao diện trang chủ với thành phần Banner thông báo, cập nhật cấu trúc điều hướng và tối ưu hóa màu sắc cho phong cách tối giản.

apps/web-client/src/styles/theme.css

@@ -78,56 +78,56 @@
   /* Focus state - White */
 
   /* ============================================
-     EN: Brand Colors (Primary Identity)
-     VI: Màu thương hiệu (Nhận diện chính)
+     EN: Minimal Brand Colors (x.ai Inspired)
+     VI: Màu thương hiệu tối giản (x.ai Inspired)
      ============================================ */
 
-  /* Primary Brand Color - Main brand identity (Blue - Tech & Trust) */
-  --brand-primary: #3B82F6;
-  --brand-primary-light: #60A5FA;
-  --brand-primary-dark: #2563EB;
-  --brand-primary-contrast: #FFFFFF;
+  /* Primary Brand Color - Clean white accent */
+  --brand-primary: #FFFFFF;
+  --brand-primary-light: #F8F8F8;
+  --brand-primary-dark: #E5E5E5;
+  --brand-primary-contrast: #000000;
 
-  /* Secondary Brand Color - Supporting color (Purple - Innovation) */
-  --brand-secondary: #8B5CF6;
-  --brand-secondary-light: #A78BFA;
-  --brand-secondary-dark: #7C3AED;
+  /* Secondary Brand Color - Subtle gray */
+  --brand-secondary: #888888;
+  --brand-secondary-light: #AAAAAA;
+  --brand-secondary-dark: #666666;
 
-  /* Accent Color - Call-to-action (Cyan - Energy) */
-  --brand-accent: #06B6D4;
-  --brand-accent-light: #22D3EE;
-  --brand-accent-dark: #0891B2;
+  /* Accent Color - Minimal gray accent */
+  --brand-accent: #CCCCCC;
+  --brand-accent-light: #DDDDDD;
+  --brand-accent-dark: #BBBBBB;
 
-  /* Brand Gradients - For backgrounds and special elements */
-  --brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
-  --brand-gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
-  --brand-gradient-vertical: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
+  /* Brand Gradients - Minimal monochromatic */
+  --brand-gradient-primary: linear-gradient(135deg, #FFFFFF 0%, #CCCCCC 100%);
+  --brand-gradient-accent: linear-gradient(135deg, #FFFFFF 0%, #AAAAAA 100%);
+  --brand-gradient-vertical: linear-gradient(180deg, #FFFFFF 0%, #CCCCCC 100%);
 
   /* ============================================
-     EN: Glassmorphism Effects (Subtle x.ai Style)
-     VI: Hiệu ứng Glassmorphism (Phong cách x.ai tinh tế)
+     EN: Minimal Effects (x.ai Clean Style)
+     VI: Hiệu ứng tối giản (Phong cách x.ai sạch sẽ)
      ============================================ */
 
-  /* Glass Backgrounds - Very subtle for professional look */
-  --glass-bg-subtle: rgba(255, 255, 255, 0.02);
-  /* Ultra subtle - For minimal glass effect */
-  --glass-bg-default: rgba(255, 255, 255, 0.04);
-  /* Default glass background */
-  --glass-bg-medium: rgba(255, 255, 255, 0.06);
-  /* Medium glass effect */
-  --glass-bg-hover: rgba(255, 255, 255, 0.08);
+  /* Glass Backgrounds - Ultra minimal for clean look */
+  --glass-bg-subtle: rgba(255, 255, 255, 0.01);
+  /* Ultra subtle - For minimal effect */
+  --glass-bg-default: rgba(255, 255, 255, 0.02);
+  /* Default minimal background */
+  --glass-bg-medium: rgba(255, 255, 255, 0.03);
+  /* Medium minimal effect */
+  --glass-bg-hover: rgba(255, 255, 255, 0.04);
   /* Hover state */
-  --glass-bg-active: rgba(255, 255, 255, 0.10);
+  --glass-bg-active: rgba(255, 255, 255, 0.05);
   /* Active/pressed state */
 
-  /* Glass Borders - Thin and subtle */
-  --glass-border-subtle: rgba(255, 255, 255, 0.05);
+  /* Glass Borders - Very thin and subtle */
+  --glass-border-subtle: rgba(255, 255, 255, 0.03);
   /* Very subtle border */
-  --glass-border-default: rgba(255, 255, 255, 0.08);
+  --glass-border-default: rgba(255, 255, 255, 0.05);
   /* Default border */
-  --glass-border-hover: rgba(255, 255, 255, 0.12);
+  --glass-border-hover: rgba(255, 255, 255, 0.07);
   /* Hover border */
-  --glass-border-focus: rgba(255, 255, 255, 0.20);
+  --glass-border-focus: rgba(255, 255, 255, 0.10);
   /* Focus state - more visible */
 
   /* Backdrop Blur Levels - Subtle to strong */
@@ -196,15 +196,15 @@
   /* Heading Font - For section headings (24-36px) */
   --font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
-  /* Type Scale / Kích thước chữ */
-  --text-6xl: 3.75rem;
-  /* 60px - Hero titles */
-  --text-5xl: 3rem;
-  /* 48px - Page titles */
+  /* Type Scale - Clean minimal approach */
+  --text-6xl: 3.5rem;
+  /* 56px - Hero titles */
+  --text-5xl: 2.75rem;
+  /* 44px - Page titles */
   --text-4xl: 2.25rem;
   /* 36px - Section headers */
-  --text-3xl: 1.875rem;
-  /* 30px - Card headers */
+  --text-3xl: 1.75rem;
+  /* 28px - Card headers */
   --text-2xl: 1.5rem;
   /* 24px - Large body */
   --text-xl: 1.25rem;
@@ -226,7 +226,7 @@
   --leading-relaxed: 1.625;
   --leading-loose: 2;
 
-  /* Font Weights / Độ đậm chữ */
+  /* Font Weights - Clean and minimal */
   --font-thin: 100;
   --font-extralight: 200;
   --font-light: 300;
@@ -237,7 +237,9 @@
   /* Emphasized */
   --font-semibold: 600;
   /* Headings */
-  --font-bold: 700;
+  --font-bold: 600;
+  /* Clean bold - less heavy */
+  --font-extrabold: 700;
   /* Strong emphasis */
 
   /* ============================================