diff --git a/apps/web-client/src/app/globals.css b/apps/web-client/src/app/globals.css
index 7fb3fcd4..07b766c3 100644
--- a/apps/web-client/src/app/globals.css
+++ b/apps/web-client/src/app/globals.css
@@ -158,25 +158,43 @@
   }
 }
 
+/**
+ * EN: Floating Animation - Creates a weightless hovering effect
+ * VI: Animation lơ lửng - Tạo hiệu ứng nhấp nhô không trọng lực
+ */
+@keyframes float {
+  0% {
+    transform: translateY(0px);
+  }
+
+  50% {
+    transform: translateY(-15px);
+  }
+
+  100% {
+    transform: translateY(0px);
+  }
+}
+
 /**
  * EN: Mesh Gradient Animation - Creates dynamic moving color spots
  * VI: Animation Mesh Gradient - Tạo các đốm màu di chuyển động
  */
 @keyframes mesh-move {
   0% {
-    transform: translate(0, 0) scale(1);
+    transform: translate(0, 0) scale(1) rotate(0deg);
   }
 
   33% {
-    transform: translate(5%, 10%) scale(1.1);
+    transform: translate(10%, 15%) scale(1.2) rotate(120deg);
   }
 
   66% {
-    transform: translate(-5%, 5%) scale(0.9);
+    transform: translate(-10%, 10%) scale(0.8) rotate(240deg);
   }
 
   100% {
-    transform: translate(0, 0) scale(1);
+    transform: translate(0, 0) scale(1) rotate(360deg);
   }
 }
 
@@ -200,7 +218,11 @@
  */
 @layer utilities {
   .animate-fadeIn {
-    animation: fadeIn 0.8s var(--ease-spring) forwards;
+    animation: fadeIn 1s var(--ease-spring) forwards;
+  }
+
+  .animate-float {
+    animation: float 6s var(--ease-in-out) infinite;
   }
 
   .mesh-gradient {
@@ -212,14 +234,17 @@
     z-index: -20;
     background: var(--bg-primary);
     overflow: hidden;
+    transition: background-color var(--duration-slow) var(--ease-in-out);
   }
 
   .mesh-spot {
     position: absolute;
     border-radius: 50%;
-    filter: blur(80px);
+    filter: blur(100px);
     opacity: 0.15;
-    animation: mesh-move 20s infinite alternate var(--ease-in-out);
+    mix-blend-mode: soft-light;
+    animation: mesh-move 30s infinite linear;
+    will-change: transform;
   }
 
   .text-glow {
@@ -227,20 +252,21 @@
   }
 
   .text-brand-glow {
-    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
+    text-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
   }
 
   .glass-card {
     background: var(--glass-bg);
-    backdrop-filter: blur(var(--glass-blur));
+    backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
     transition: all var(--duration-normal) var(--ease-in-out);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   }
 
   .glass-card:hover {
     background: var(--glass-bg-hover);
-    border-color: rgba(59, 130, 246, 0.4);
-    transform: translateY(-4px);
+    border-color: rgba(255, 255, 255, 0.2);
+    transform: translateY(-8px) scale(1.02);
     box-shadow: var(--shadow-brand-lg);
   }
 
diff --git a/apps/web-client/src/app/page.tsx b/apps/web-client/src/app/page.tsx
index 94aee9ce..a165ca41 100644
--- a/apps/web-client/src/app/page.tsx
+++ b/apps/web-client/src/app/page.tsx
@@ -62,49 +62,54 @@ export default function Home() {
     <>
       <NavigationHeader />
 
-      {/* EN: Dynamic Background - Mesh Gradient / VI: Nền động - Mesh Gradient */}
+      {/* EN: Dynamic Background - Pastel Mesh Gradient / VI: Nền động - Mesh Gradient Pastel */}
       <div className="mesh-gradient">
-        <div className="mesh-spot w-[600px] h-[600px] bg-brand-primary -top-1/4 -left-1/4" />
-        <div className="mesh-spot w-[500px] h-[500px] bg-brand-secondary top-1/2 -right-1/4" style={{ animationDelay: '-5s' }} />
-        <div className="mesh-spot w-[400px] h-[400px] bg-brand-accent bottom-0 left-1/3" style={{ animationDelay: '-10s' }} />
+        {/* EN: Primary Pastel Blue / VI: Xanh Pastel chính */}
+        <div className="mesh-spot w-[800px] h-[800px] bg-[#93C5FD] -top-1/4 -left-1/4 opacity-[0.08]" />
+        {/* EN: Soft Purple / VI: Tím mềm */}
+        <div className="mesh-spot w-[600px] h-[600px] bg-[#C084FC] top-1/3 -right-1/4 opacity-[0.12]" style={{ animationDelay: '-7s' }} />
+        {/* EN: Bright Cyan / VI: Xanh lơ sáng */}
+        <div className="mesh-spot w-[500px] h-[500px] bg-[#67E8F9] -bottom-1/4 left-1/4 opacity-[0.1]" style={{ animationDelay: '-15s' }} />
       </div>
 
-      <main className="relative min-h-screen flex flex-col items-center pt-32 pb-20 p-8 overflow-hidden">
-        {/* EN: Decorative brand elements / VI: Các yếu tố trang trí thương hiệu */}
-        <div className="absolute top-40 left-10 w-2 h-2 rounded-full bg-brand-primary opacity-40 animate-pulse" />
-        <div className="absolute top-60 right-20 w-3 h-3 rounded-full bg-brand-secondary opacity-40 animate-pulse" style={{ animationDelay: '1.5s' }} />
+      <main className="relative min-h-screen flex flex-col items-center pt-40 pb-32 px-6 overflow-hidden">
+        {/* EN: Floating particles for depth / VI: Các hạt lơ lửng tạo chiều sâu */}
+        <div className="absolute top-1/4 left-10 w-2 h-2 rounded-full bg-[#93C5FD] opacity-20 animate-float" />
+        <div className="absolute top-1/2 right-10 w-3 h-3 rounded-full bg-[#C084FC] opacity-20 animate-float" style={{ animationDelay: '2s' }} />
 
-        <div className="container-responsive flex flex-col items-center space-y-16 z-10">
+        <div className="container-responsive flex flex-col items-center space-y-24 z-10">
           {/* EN: Hero Section / VI: Phần Hero */}
-          <div className="flex flex-col items-center space-y-8 max-w-4xl animate-fadeIn">
-            <BrandLogo variant="full" size="xl" priority className="mb-4 drop-shadow-2xl scale-110" />
+          <div className="flex flex-col items-center text-center space-y-10 max-w-5xl animate-fadeIn">
+            <div className="p-4 rounded-3xl bg-white/5 backdrop-blur-2xl border border-white/10 mb-6 animate-float shadow-2xl">
+              <BrandLogo variant="full" size="xl" priority className="scale-125" />
+            </div>
 
-            <h1 className="text-responsive-hero font-display font-black tracking-tighter bg-clip-text text-transparent bg-brand-gradient-vertical pb-2 drop-shadow-brand">
+            <h1 className="text-7xl md:text-8xl font-display font-black tracking-tight bg-clip-text text-transparent bg-brand-gradient-vertical leading-[0.9] pb-4 drop-shadow-2xl">
               {t('home.title')}
             </h1>
 
-            <p className="text-2xl text-text-secondary max-w-2xl text-center leading-relaxed font-medium">
+            <p className="text-2xl md:text-3xl text-text-secondary max-w-3xl leading-relaxed font-medium">
               {t('home.description')}
             </p>
 
-            <div className="flex flex-col sm:flex-row gap-6 pt-4 w-full sm:w-auto">
+            <div className="flex flex-col sm:flex-row gap-8 pt-6 w-full sm:w-auto">
               {!isAuthenticated ? (
                 <>
                   <Button
                     variant="brand"
                     size="xl"
                     onClick={() => (window.location.href = '/auth/login')}
-                    className="px-12 py-7 text-lg rounded-full shadow-brand transition-all hover:scale-105 active:scale-95"
+                    className="px-14 py-8 text-xl rounded-full shadow-brand transition-all hover:scale-110 active:scale-95 hover:shadow-brand-lg"
                   >
-                    Get Started Now
+                    Get Started
                   </Button>
                   <Button
                     variant="glass"
                     size="xl"
                     onClick={() => (window.location.href = '/auth/login')}
-                    className="px-12 py-7 text-lg rounded-full transition-all hover:bg-white/10"
+                    className="px-14 py-8 text-xl rounded-full transition-all hover:bg-white/15"
                   >
-                    Learn More
+                    Explore
                   </Button>
                 </>
               ) : (
@@ -112,47 +117,17 @@ export default function Home() {
                   variant="brand"
                   size="xl"
                   onClick={() => (window.location.href = '/chat')}
-                  className="px-12 py-7 text-lg rounded-full shadow-brand"
+                  className="px-14 py-8 text-xl rounded-full shadow-brand hover:scale-110"
                 >
-                  Go to Dashboard
+                  Dashboard
                 </Button>
               )}
             </div>
           </div>
 
-          {/* EN: Status / Context Area / VI: Khu vực trạng thái / ngữ cảnh */}
-          <div className="w-full flex justify-center animate-fadeIn" style={{ animationDelay: '0.4s' }}>
-            {isAuthenticated && user ? (
-              <div className="glass-card p-10 rounded-3xl inline-flex flex-col items-center space-y-6 min-w-[380px] shadow-2xl">
-                <div className="relative">
-                  <div className="absolute inset-0 bg-brand-primary blur-2xl opacity-20 animate-pulse" />
-                  <div className="w-24 h-24 bg-brand-gradient rounded-full flex items-center justify-center text-4xl font-bold text-white relative z-10">
-                    {user.email?.[0].toUpperCase()}
-                  </div>
-                </div>
-                <div className="text-center">
-                  <p className="text-xl font-semibold text-text-primary mb-1">
-                    {t('home.welcome', { email: user.email })}
-                  </p>
-                  <div className="inline-flex items-center px-4 py-1.5 rounded-full bg-bg-tertiary text-text-secondary text-sm border border-border-primary">
-                    <span className="w-2 h-2 rounded-full bg-accent-success mr-3 shadow-[0_0_8px_var(--accent-success)]" />
-                    <span className="uppercase tracking-widest font-bold text-xs">{user.role}</span>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="flex flex-col items-center space-y-4">
-                <div className="h-px w-20 bg-gradient-to-r from-transparent via-border-primary to-transparent" />
-                <p className="text-text-tertiary font-medium uppercase tracking-[0.2em] text-sm">
-                  {t('home.pleaseLogin')}
-                </p>
-              </div>
-            )}
-          </div>
-
           {/* EN: Feature Highlights / VI: Điểm nổi bật tính năng */}
           {!isAuthenticated && (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full pt-12">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-10 w-full">
               {[
                 { title: 'Fast Development', icon: Zap, desc: 'Build and deploy in minutes' },
                 { title: 'Enterprise Ready', icon: Building, desc: 'Production-grade platform' },
@@ -160,22 +135,48 @@ export default function Home() {
               ].map((feature, index) => (
                 <div
                   key={index}
-                  className="glass-card p-8 rounded-3xl group animate-fadeIn"
-                  style={{ animationDelay: `${0.6 + index * 0.15}s` }}
+                  className="glass-card p-10 rounded-[2.5rem] group animate-fadeIn animate-float"
+                  style={{
+                    animationDelay: `${index * 0.4}s`,
+                    animationDuration: '8s'
+                  }}
                 >
-                  <div className="w-16 h-16 rounded-2xl bg-brand-primary/10 flex items-center justify-center mb-6 transition-all duration-slower group-hover:bg-brand-primary group-hover:scale-110 group-hover:rotate-3 shadow-inner">
-                    <feature.icon className="h-8 w-8 text-brand-primary transition-colors group-hover:text-white" />
+                  <div className="w-20 h-20 rounded-3xl bg-brand-primary/10 flex items-center justify-center mb-8 transition-all duration-slower group-hover:bg-brand-primary group-hover:scale-110 group-hover:rotate-6 shadow-xl">
+                    <feature.icon className="h-10 w-10 text-brand-primary transition-colors group-hover:text-white" />
                   </div>
-                  <h3 className="text-xl font-bold mb-3 text-text-primary group-hover:text-brand-primary transition-colors">
+                  <h3 className="text-2xl font-black mb-4 text-text-primary group-hover:text-brand-primary transition-colors">
                     {feature.title}
                   </h3>
-                  <p className="text-text-secondary leading-relaxed font-medium">
+                  <p className="text-lg text-text-secondary leading-relaxed font-medium">
                     {feature.desc}
                   </p>
                 </div>
               ))}
             </div>
           )}
+
+          {/* EN: Status Section / VI: Khu vực trạng thái */}
+          <div className="animate-fadeIn" style={{ animationDelay: '1.2s' }}>
+            {isAuthenticated && user && (
+              <div className="glass-card p-12 rounded-[3.5rem] flex flex-col items-center space-y-8 min-w-[450px] shadow-[0_0_100px_rgba(59,130,246,0.1)]">
+                <div className="relative">
+                  <div className="absolute inset-0 bg-brand-primary blur-3xl opacity-30 animate-pulse" />
+                  <div className="w-28 h-28 bg-brand-gradient rounded-[2.5rem] flex items-center justify-center text-5xl font-black text-white relative z-10 rotate-3 animate-float">
+                    {user.email?.[0].toUpperCase()}
+                  </div>
+                </div>
+                <div className="text-center">
+                  <p className="text-2xl font-bold text-text-primary mb-2">
+                    {t('home.welcome', { email: user.email })}
+                  </p>
+                  <div className="inline-flex items-center px-6 py-2 rounded-full bg-white/5 text-text-secondary border border-white/10">
+                    <span className="w-3 h-3 rounded-full bg-accent-success mr-4 shadow-[0_0_12px_var(--accent-success)]" />
+                    <span className="uppercase tracking-[0.2em] font-black text-xs">{user.role}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       </main>
 
diff --git a/apps/web-client/src/components/layout/navigation-header.tsx b/apps/web-client/src/components/layout/navigation-header.tsx
index 2845e972..917634ec 100644
--- a/apps/web-client/src/components/layout/navigation-header.tsx
+++ b/apps/web-client/src/components/layout/navigation-header.tsx
@@ -55,8 +55,8 @@ export function NavigationHeader({
     return (
         <header
             className={cn(
-                'sticky top-0 z-50 w-full border-b border-white/5',
-                'bg-bg-primary/20 backdrop-blur-xl',
+                'sticky top-0 z-50 w-full border-b border-white/10',
+                'bg-bg-primary/30 backdrop-blur-2xl',
                 'transition-all duration-normal',
                 className
             )}
diff --git a/apps/web-client/src/styles/theme.css b/apps/web-client/src/styles/theme.css
index d875b32f..2bfd1fd6 100644
--- a/apps/web-client/src/styles/theme.css
+++ b/apps/web-client/src/styles/theme.css
@@ -14,305 +14,305 @@
  */
 
 :root {
-  /* ============================================
+   /* ============================================
      EN: Color Palette - Dark Mode (Primary Theme)
      VI: Bảng màu - Dark Mode (Theme chính)
      ============================================ */
 
-  /* Background Colors / Màu nền */
-  --bg-primary: #000000;
-  /* Pure black - Main background */
-  --bg-secondary: #0A0A0A;
-  /* Almost black - Card/Panel background */
-  --bg-tertiary: #141414;
-  /* Very dark grey - Hover states */
-  --bg-elevated: #1A1A1A;
-  /* Elevated surfaces (modals, dropdowns) */
+   /* Background Colors / Màu nền */
+   --bg-primary: #000000;
+   /* Pure black - Main background */
+   --bg-secondary: #0A0A0A;
+   /* Almost black - Card/Panel background */
+   --bg-tertiary: #141414;
+   /* Very dark grey - Hover states */
+   --bg-elevated: #1A1A1A;
+   /* Elevated surfaces (modals, dropdowns) */
 
-  /* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */
-  --text-primary: #FFFFFF;
-  /* Pure white - Primary text */
-  --text-secondary: #B0B0B0;
-  /* Lighter grey - Secondary text (Improved contrast) */
-  --text-tertiary: #808080;
-  /* Mid grey - Tertiary/disabled text (Improved contrast) */
-  --text-muted: #505050;
-  /* Dark grey - Muted elements */
-  --text-inverse: #000000;
-  /* Black - Text on light/white backgrounds */
+   /* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */
+   --text-primary: #FFFFFF;
+   /* Pure white - Primary text */
+   --text-secondary: #B0B0B0;
+   /* Lighter grey - Secondary text (Improved contrast) */
+   --text-tertiary: #808080;
+   /* Mid grey - Tertiary/disabled text (Improved contrast) */
+   --text-muted: #505050;
+   /* Dark grey - Muted elements */
+   --text-inverse: #000000;
+   /* Black - Text on light/white backgrounds */
 
-  /* Brand/Accent Colors / Màu thương hiệu/Accent */
-  --accent-primary: #FFFFFF;
-  /* White - Primary actions (High contrast) */
-  --accent-secondary: #333333;
-  /* Dark grey - Secondary actions */
-  --accent-success: #10B981;
-  /* Green - Success states */
-  --accent-warning: #F59E0B;
-  /* Amber - Warnings */
-  --accent-error: #EF4444;
-  /* Red - Errors */
-  --accent-info: #06B6D4;
-  /* Cyan - Info */
+   /* Brand/Accent Colors / Màu thương hiệu/Accent */
+   --accent-primary: #FFFFFF;
+   /* White - Primary actions (High contrast) */
+   --accent-secondary: #333333;
+   /* Dark grey - Secondary actions */
+   --accent-success: #10B981;
+   /* Green - Success states */
+   --accent-warning: #F59E0B;
+   /* Amber - Warnings */
+   --accent-error: #EF4444;
+   /* Red - Errors */
+   --accent-info: #06B6D4;
+   /* Cyan - Info */
 
-  /* Chat Specific Colors / Màu riêng cho Chat */
-  --chat-user-bubble: #1A1A1A;
-  /* Dark grey - User message */
-  --chat-ai-bubble: transparent;
-  /* Transparent - AI message (Minimal) */
-  --chat-user-text: #FFFFFF;
-  /* White text */
-  --chat-ai-text: #E5E5E5;
-  /* Off-white text */
-  --chat-timestamp: #555555;
-  /* Dark grey timestamp */
-  --chat-divider: #222222;
-  /* Divider between messages */
+   /* Chat Specific Colors / Màu riêng cho Chat */
+   --chat-user-bubble: #1A1A1A;
+   /* Dark grey - User message */
+   --chat-ai-bubble: transparent;
+   /* Transparent - AI message (Minimal) */
+   --chat-user-text: #FFFFFF;
+   /* White text */
+   --chat-ai-text: #E5E5E5;
+   /* Off-white text */
+   --chat-timestamp: #555555;
+   /* Dark grey timestamp */
+   --chat-divider: #222222;
+   /* Divider between messages */
 
-  /* Border Colors / Màu viền */
-  --border-primary: #222222;
-  /* Subtle borders */
-  --border-secondary: #333333;
-  /* Hover borders */
-  --border-focus: #FFFFFF;
-  /* Focus state - White */
+   /* Border Colors / Màu viền */
+   --border-primary: #222222;
+   /* Subtle borders */
+   --border-secondary: #333333;
+   /* Hover borders */
+   --border-focus: #FFFFFF;
+   /* Focus state - White */
 
-  /* ============================================
+   /* ============================================
      EN: Brand Colors (Primary Identity)
      VI: Màu thương hiệu (Nhận diện chính)
      ============================================ */
 
-  /* 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 - Main brand identity (Blue - Tech & Trust) */
+   --brand-primary: #3B82F6;
+   --brand-primary-light: #60A5FA;
+   --brand-primary-dark: #2563EB;
+   --brand-primary-contrast: #FFFFFF;
 
-  /* Secondary Brand Color - Supporting color (Purple - Innovation) */
-  --brand-secondary: #8B5CF6;
-  --brand-secondary-light: #A78BFA;
-  --brand-secondary-dark: #7C3AED;
+   /* Secondary Brand Color - Supporting color (Purple - Innovation) */
+   --brand-secondary: #8B5CF6;
+   --brand-secondary-light: #A78BFA;
+   --brand-secondary-dark: #7C3AED;
 
-  /* Accent Color - Call-to-action (Cyan - Energy) */
-  --brand-accent: #06B6D4;
-  --brand-accent-light: #22D3EE;
-  --brand-accent-dark: #0891B2;
+   /* Accent Color - Call-to-action (Cyan - Energy) */
+   --brand-accent: #06B6D4;
+   --brand-accent-light: #22D3EE;
+   --brand-accent-dark: #0891B2;
 
-  /* 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 - 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%);
 
-  /* ============================================
+   /* ============================================
      EN: Glassmorphism Effects
      VI: Hiệu ứng Glassmorphism
      ============================================ */
 
-  --glass-bg: rgba(255, 255, 255, 0.05);
-  --glass-bg-hover: rgba(255, 255, 255, 0.08);
-  --glass-border: rgba(255, 255, 255, 0.1);
-  --glass-blur: 10px;
+   --glass-bg: rgba(255, 255, 255, 0.05);
+   --glass-bg-hover: rgba(255, 255, 255, 0.1);
+   --glass-border: rgba(255, 255, 255, 0.08);
+   --glass-blur: 24px;
 
-  /* ============================================
+   /* ============================================
      EN: Extended Shadows & Effects
      VI: Shadows & Effects mở rộng
      ============================================ */
 
-  --shadow-brand: 0 10px 40px rgba(59, 130, 246, 0.2);
-  --shadow-brand-lg: 0 20px 60px rgba(59, 130, 246, 0.3);
-  --shadow-colored: 0 8px 30px rgba(59, 130, 246, 0.25);
+   --shadow-brand: 0 20px 50px rgba(59, 130, 246, 0.15);
+   --shadow-brand-lg: 0 30px 70px rgba(59, 130, 246, 0.25);
+   --shadow-colored: 0 10px 40px rgba(59, 130, 246, 0.3);
 
-  /* ============================================
+   /* ============================================
      EN: Light Mode Colors (Secondary Theme)
      VI: Màu sắc cho Light Mode (Theme phụ)
      ============================================ */
-  --bg-primary-light: #F9F9F9;
-  --bg-secondary-light: #FFFFFF;
-  --bg-tertiary-light: #F0F0F0;
-  --text-primary-light: #000000;
-  --text-secondary-light: #666666;
-  --border-primary-light: #E5E5E5;
+   --bg-primary-light: #FFFFFF;
+   --bg-secondary-light: #F8FAFC;
+   --bg-tertiary-light: #F1F5F9;
+   --text-primary-light: #0F172A;
+   --text-secondary-light: #475569;
+   --border-primary-light: #E2E8F0;
 
-  /* ============================================
+   /* ============================================
      EN: Typography
      VI: Kiểu chữ
      ============================================ */
 
-  /* Font Stack / Bộ font */
-  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+   /* Font Stack / Bộ font */
+   --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+   --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
 
-  /* Display Font - For hero titles (48px+) */
-  --font-display: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+   /* Display Font - For hero titles (48px+) */
+   --font-display: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
-  /* Heading Font - For section headings (24-36px) */
-  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+   /* Heading Font - For section headings (24-36px) */
+   --font-heading: "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 */
-  --text-4xl: 2.25rem;
-  /* 36px - Section headers */
-  --text-3xl: 1.875rem;
-  /* 30px - Card headers */
-  --text-2xl: 1.5rem;
-  /* 24px - Large body */
-  --text-xl: 1.25rem;
-  /* 20px - Emphasized text */
-  --text-lg: 1.125rem;
-  /* 18px - Large body */
-  --text-base: 1rem;
-  /* 16px - Default body */
-  --text-sm: 0.875rem;
-  /* 14px - Small text */
-  --text-xs: 0.75rem;
-  /* 12px - Captions */
+   /* Type Scale / Kích thước chữ */
+   --text-6xl: 3.75rem;
+   /* 60px - Hero titles */
+   --text-5xl: 3rem;
+   /* 48px - Page titles */
+   --text-4xl: 2.25rem;
+   /* 36px - Section headers */
+   --text-3xl: 1.875rem;
+   /* 30px - Card headers */
+   --text-2xl: 1.5rem;
+   /* 24px - Large body */
+   --text-xl: 1.25rem;
+   /* 20px - Emphasized text */
+   --text-lg: 1.125rem;
+   /* 18px - Large body */
+   --text-base: 1rem;
+   /* 16px - Default body */
+   --text-sm: 0.875rem;
+   /* 14px - Small text */
+   --text-xs: 0.75rem;
+   /* 12px - Captions */
 
-  /* Line Heights / Chiều cao dòng */
-  --leading-none: 1;
-  --leading-tight: 1.1;
-  --leading-snug: 1.2;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
+   /* Line Heights / Chiều cao dòng */
+   --leading-none: 1;
+   --leading-tight: 1.1;
+   --leading-snug: 1.2;
+   --leading-normal: 1.5;
+   --leading-relaxed: 1.625;
+   --leading-loose: 2;
 
-  /* Font Weights / Độ đậm chữ */
-  --font-light: 300;
-  /* Light text */
-  --font-normal: 400;
-  /* Body text */
-  --font-medium: 500;
-  /* Emphasized */
-  --font-semibold: 600;
-  /* Headings */
-  --font-bold: 700;
-  /* Strong emphasis */
+   /* Font Weights / Độ đậm chữ */
+   --font-light: 300;
+   /* Light text */
+   --font-normal: 400;
+   /* Body text */
+   --font-medium: 500;
+   /* Emphasized */
+   --font-semibold: 600;
+   /* Headings */
+   --font-bold: 700;
+   /* Strong emphasis */
 
-  /* ============================================
+   /* ============================================
      EN: Spacing & Layout
      VI: Khoảng cách & Bố cục
      ============================================ */
 
-  /* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */
-  --space-0: 0;
-  --space-1: 0.25rem;
-  /* 4px */
-  --space-2: 0.5rem;
-  /* 8px */
-  --space-3: 0.75rem;
-  /* 12px */
-  --space-4: 1rem;
-  /* 16px */
-  --space-5: 1.25rem;
-  /* 20px */
-  --space-6: 1.5rem;
-  /* 24px */
-  --space-8: 2rem;
-  /* 32px */
-  --space-10: 2.5rem;
-  /* 40px */
-  --space-12: 3rem;
-  /* 48px */
-  --space-16: 4rem;
-  /* 64px */
-  --space-20: 5rem;
-  /* 80px */
+   /* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */
+   --space-0: 0;
+   --space-1: 0.25rem;
+   /* 4px */
+   --space-2: 0.5rem;
+   /* 8px */
+   --space-3: 0.75rem;
+   /* 12px */
+   --space-4: 1rem;
+   /* 16px */
+   --space-5: 1.25rem;
+   /* 20px */
+   --space-6: 1.5rem;
+   /* 24px */
+   --space-8: 2rem;
+   /* 32px */
+   --space-10: 2.5rem;
+   /* 40px */
+   --space-12: 3rem;
+   /* 48px */
+   --space-16: 4rem;
+   /* 64px */
+   --space-20: 5rem;
+   /* 80px */
 
-  /* Container Widths / Chiều rộng container */
-  --container-sm: 640px;
-  /* Small devices */
-  --container-md: 768px;
-  /* Medium devices */
-  --container-lg: 1024px;
-  /* Large devices */
-  --container-xl: 1280px;
-  /* Extra large */
-  --container-2xl: 1536px;
-  /* 2X large */
-  --chat-max-width: 800px;
-  /* Max width for chat messages */
-  --sidebar-width: 280px;
-  /* Conversation history sidebar */
+   /* Container Widths / Chiều rộng container */
+   --container-sm: 640px;
+   /* Small devices */
+   --container-md: 768px;
+   /* Medium devices */
+   --container-lg: 1024px;
+   /* Large devices */
+   --container-xl: 1280px;
+   /* Extra large */
+   --container-2xl: 1536px;
+   /* 2X large */
+   --chat-max-width: 800px;
+   /* Max width for chat messages */
+   --sidebar-width: 280px;
+   /* Conversation history sidebar */
 
-  /* Border Radius / Bo góc */
-  --radius-sm: 2px;
-  /* Small elements - sharp */
-  --radius-md: 4px;
-  /* Buttons, inputs - sharp */
-  --radius-lg: 8px;
-  /* Cards - minimal roundness */
-  --radius-xl: 12px;
-  /* Large cards */
-  --radius-2xl: 16px;
-  /* Modals */
-  --radius-full: 9999px;
-  /* Full round - Avatars, pills */
+   /* Border Radius / Bo góc */
+   --radius-sm: 2px;
+   /* Small elements - sharp */
+   --radius-md: 4px;
+   /* Buttons, inputs - sharp */
+   --radius-lg: 8px;
+   /* Cards - minimal roundness */
+   --radius-xl: 12px;
+   /* Large cards */
+   --radius-2xl: 16px;
+   /* Modals */
+   --radius-full: 9999px;
+   /* Full round - Avatars, pills */
 
-  /* ============================================
+   /* ============================================
      EN: Shadows (Dark Mode Optimized)
      VI: Đổ bóng (Tối ưu cho Dark Mode)
      ============================================ */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.8);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.9);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.95);
-  --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
-  /* White glow for focus */
+   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8);
+   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.8);
+   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.9);
+   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.95);
+   --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
+   /* White glow for focus */
 
-  /* ============================================
+   /* ============================================
      EN: Grid System & Breakpoints
      VI: Hệ thống lưới & Điểm ngắt
      ============================================ */
-  --screen-sm: 640px;
-  /* Mobile landscape */
-  --screen-md: 768px;
-  /* Tablet */
-  --screen-lg: 1024px;
-  /* Desktop */
-  --screen-xl: 1280px;
-  /* Large desktop */
-  --screen-2xl: 1536px;
-  /* Extra large desktop */
+   --screen-sm: 640px;
+   /* Mobile landscape */
+   --screen-md: 768px;
+   /* Tablet */
+   --screen-lg: 1024px;
+   /* Desktop */
+   --screen-xl: 1280px;
+   /* Large desktop */
+   --screen-2xl: 1536px;
+   /* Extra large desktop */
 
-  /* ============================================
+   /* ============================================
      EN: Animation & Transitions
      VI: Animation & Chuyển tiếp
      ============================================ */
 
-  /* Timing Functions / Hàm thời gian */
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+   /* Timing Functions / Hàm thời gian */
+   --ease-in: cubic-bezier(0.4, 0, 1, 1);
+   --ease-out: cubic-bezier(0, 0, 0.2, 1);
+   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  /* Duration / Thời lượng */
-  --duration-fast: 150ms;
-  /* Hover effects */
-  --duration-normal: 250ms;
-  /* Default transitions */
-  --duration-slow: 350ms;
-  /* Complex animations */
-  --duration-slower: 500ms;
-  /* Page transitions */
+   /* Duration / Thời lượng */
+   --duration-fast: 150ms;
+   /* Hover effects */
+   --duration-normal: 250ms;
+   /* Default transitions */
+   --duration-slow: 350ms;
+   /* Complex animations */
+   --duration-slower: 500ms;
+   /* Page transitions */
 
-  /* ============================================
+   /* ============================================
      EN: Advanced Motion Tokens
      VI: Token chuyển động nâng cao
      ============================================ */
 
-  /* Motion Ease Functions - For micro-interactions */
-  --motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --motion-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+   /* Motion Ease Functions - For micro-interactions */
+   --motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+   --motion-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
 
-  /* Hover Scale - For interactive elements */
-  --hover-scale-sm: 1.02;
-  --hover-scale-md: 1.05;
-  --hover-scale-lg: 1.1;
+   /* Hover Scale - For interactive elements */
+   --hover-scale-sm: 1.02;
+   --hover-scale-md: 1.05;
+   --hover-scale-lg: 1.1;
 
-  /* Active Scale - For pressed states */
-  --active-scale: 0.98;
+   /* Active Scale - For pressed states */
+   --active-scale: 0.98;
 }
 
 /* ============================================
@@ -320,14 +320,14 @@
    VI: Ghi đè theme cho Light Mode
    ============================================ */
 @media (prefers-color-scheme: light) {
-  :root {
-    --bg-primary: var(--bg-primary-light);
-    --bg-secondary: var(--bg-secondary-light);
-    --bg-tertiary: var(--bg-tertiary-light);
-    --text-primary: var(--text-primary-light);
-    --text-secondary: var(--text-secondary-light);
-    --border-primary: var(--border-primary-light);
-  }
+   :root {
+      --bg-primary: var(--bg-primary-light);
+      --bg-secondary: var(--bg-secondary-light);
+      --bg-tertiary: var(--bg-tertiary-light);
+      --text-primary: var(--text-primary-light);
+      --text-secondary: var(--text-secondary-light);
+      --border-primary: var(--border-primary-light);
+   }
 }
 
 /* ============================================
@@ -336,16 +336,16 @@
    ============================================ */
 [data-theme="dark"],
 .dark {
-  --bg-primary: #000000;
-  --bg-secondary: #0A0A0A;
-  --bg-tertiary: #141414;
-  --bg-elevated: #1A1A1A;
-  --text-primary: #FFFFFF;
-  --text-secondary: #B0B0B0;
-  --text-tertiary: #808080;
-  --text-muted: #505050;
-  --border-primary: #222222;
-  --border-secondary: #333333;
+   --bg-primary: #000000;
+   --bg-secondary: #0A0A0A;
+   --bg-tertiary: #141414;
+   --bg-elevated: #1A1A1A;
+   --text-primary: #FFFFFF;
+   --text-secondary: #B0B0B0;
+   --text-tertiary: #808080;
+   --text-muted: #505050;
+   --border-primary: #222222;
+   --border-secondary: #333333;
 }
 
 /* ============================================
@@ -354,10 +354,10 @@
    ============================================ */
 [data-theme="light"],
 .light {
-  --bg-primary: var(--bg-primary-light);
-  --bg-secondary: var(--bg-secondary-light);
-  --bg-tertiary: var(--bg-tertiary-light);
-  --text-primary: var(--text-primary-light);
-  --text-secondary: var(--text-secondary-light);
-  --border-primary: var(--border-primary-light);
+   --bg-primary: var(--bg-primary-light);
+   --bg-secondary: var(--bg-secondary-light);
+   --bg-tertiary: var(--bg-tertiary-light);
+   --text-primary: var(--text-primary-light);
+   --text-secondary: var(--text-secondary-light);
+   --border-primary: var(--border-primary-light);
 }
\ No newline at end of file