diff --git a/apps/web-client/src/app/globals.css b/apps/web-client/src/app/globals.css
index cfe9ade9..7fb3fcd4 100644
--- a/apps/web-client/src/app/globals.css
+++ b/apps/web-client/src/app/globals.css
@@ -147,12 +147,36 @@
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(20px);
+    filter: blur(10px);
   }
 
   to {
     opacity: 1;
     transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+/**
+ * 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);
+  }
+
+  33% {
+    transform: translate(5%, 10%) scale(1.1);
+  }
+
+  66% {
+    transform: translate(-5%, 5%) scale(0.9);
+  }
+
+  100% {
+    transform: translate(0, 0) scale(1);
   }
 }
 
@@ -176,7 +200,48 @@
  */
 @layer utilities {
   .animate-fadeIn {
-    animation: fadeIn 0.3s ease-out forwards;
+    animation: fadeIn 0.8s var(--ease-spring) forwards;
+  }
+
+  .mesh-gradient {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -20;
+    background: var(--bg-primary);
+    overflow: hidden;
+  }
+
+  .mesh-spot {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.15;
+    animation: mesh-move 20s infinite alternate var(--ease-in-out);
+  }
+
+  .text-glow {
+    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  }
+
+  .text-brand-glow {
+    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
+  }
+
+  .glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid var(--glass-border);
+    transition: all var(--duration-normal) var(--ease-in-out);
+  }
+
+  .glass-card:hover {
+    background: var(--glass-bg-hover);
+    border-color: rgba(59, 130, 246, 0.4);
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-brand-lg);
   }
 
   .animate-shimmer {
diff --git a/apps/web-client/src/app/page.tsx b/apps/web-client/src/app/page.tsx
index 3b588a6f..94aee9ce 100644
--- a/apps/web-client/src/app/page.tsx
+++ b/apps/web-client/src/app/page.tsx
@@ -61,79 +61,98 @@ export default function Home() {
   return (
     <>
       <NavigationHeader />
-      {/* EN: Main content area with brand gradient background / VI: Khu vực nội dung chính với background gradient thương hiệu */}
-      <main className="relative min-h-screen flex flex-col items-center justify-center p-8 text-center bg-bg-primary text-text-primary overflow-hidden">
-        {/* EN: Brand gradient overlay / VI: Overlay gradient thương hiệu */}
-        <div className="absolute inset-0 bg-brand-gradient opacity-5 -z-10" />
 
-        {/* EN: Decorative brand dots / VI: Chấm trang trí thương hiệu */}
-        <div className="absolute top-20 left-10 w-3 h-3 rounded-full bg-brand-primary opacity-20 animate-pulse" />
-        <div className="absolute top-40 right-20 w-4 h-4 rounded-full bg-brand-secondary opacity-20 animate-pulse" style={{ animationDelay: '1s' }} />
-        <div className="absolute bottom-32 left-1/4 w-2 h-2 rounded-full bg-brand-accent opacity-20 animate-pulse" style={{ animationDelay: '2s' }} />
+      {/* EN: Dynamic Background - Mesh Gradient / VI: Nền động - Mesh Gradient */}
+      <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' }} />
+      </div>
 
-        <div className="max-w-container-lg w-full space-y-12 animate-fadeIn z-10">
-          {/* EN: Brand Logo / VI: Logo thương hiệu */}
-          <div className="flex justify-center mb-8">
-            <BrandLogo variant="full" size="xl" priority />
-          </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' }} />
 
-          {/* EN: Hero Title / VI: Tiêu đề Hero */}
-          <h1 className="text-6xl font-display font-bold tracking-tight mb-4 bg-clip-text text-transparent bg-brand-gradient-vertical leading-tight">
-            {t('home.title')}
-          </h1>
+        <div className="container-responsive flex flex-col items-center space-y-16 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" />
 
-          {/* EN: Subtitle/Description / VI: Phụ đề/Mô tả */}
-          <p className="text-xl text-text-secondary max-w-2xl mx-auto leading-relaxed">
-            {t('home.description')}
-          </p>
+            <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">
+              {t('home.title')}
+            </h1>
 
-          {/* EN: Conditional rendering based on authentication status / VI: Render có điều kiện dựa trên trạng thái xác thực */}
-          <div className="pt-8">
-            {isAuthenticated && user ? (
-              // EN: Authenticated user welcome message / VI: Thông báo chào mừng người dùng đã xác thực
-              <div className="space-y-6 p-8 rounded-2xl bg-glass-bg backdrop-blur-glass border border-glass-border inline-block min-w-[320px] shadow-brand">
-                <div className="w-20 h-20 bg-brand-gradient rounded-full mx-auto flex items-center justify-center mb-6 text-3xl font-semibold text-white shadow-colored">
-                  {user.email?.[0].toUpperCase()}
-                </div>
-                <p className="text-lg font-medium text-text-primary">
-                  {t('home.welcome', { email: user.email })}
-                </p>
-                <div className="inline-flex items-center px-4 py-2 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-2 animate-pulse" />
-                  {t('home.role', { role: user.role })}
-                </div>
-              </div>
-            ) : (
-              // EN: Login prompt for unauthenticated users / VI: Nhắc đăng nhập cho người dùng chưa xác thực
-              <div className="space-y-8">
-                <p className="text-text-secondary text-lg">
-                  {t('home.pleaseLogin')}
-                </p>
-                <div className="flex gap-4 justify-center flex-wrap">
+            <p className="text-2xl text-text-secondary max-w-2xl text-center 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">
+              {!isAuthenticated ? (
+                <>
                   <Button
                     variant="brand"
                     size="xl"
                     onClick={() => (window.location.href = '/auth/login')}
-                    className="px-12"
+                    className="px-12 py-7 text-lg rounded-full shadow-brand transition-all hover:scale-105 active:scale-95"
                   >
-                    Get Started
+                    Get Started Now
                   </Button>
                   <Button
                     variant="glass"
                     size="xl"
                     onClick={() => (window.location.href = '/auth/login')}
-                    className="px-12"
+                    className="px-12 py-7 text-lg rounded-full transition-all hover:bg-white/10"
                   >
                     Learn More
                   </Button>
+                </>
+              ) : (
+                <Button
+                  variant="brand"
+                  size="xl"
+                  onClick={() => (window.location.href = '/chat')}
+                  className="px-12 py-7 text-lg rounded-full shadow-brand"
+                >
+                  Go to 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 */}
+          {/* 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-6 pt-16 max-w-4xl mx-auto">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full pt-12">
               {[
                 { title: 'Fast Development', icon: Zap, desc: 'Build and deploy in minutes' },
                 { title: 'Enterprise Ready', icon: Building, desc: 'Production-grade platform' },
@@ -141,21 +160,25 @@ export default function Home() {
               ].map((feature, index) => (
                 <div
                   key={index}
-                  className="p-6 rounded-xl bg-glass-bg backdrop-blur-glass border border-glass-border hover:border-brand-primary/30 transition-all duration-normal hover:shadow-brand group"
+                  className="glass-card p-8 rounded-3xl group animate-fadeIn"
+                  style={{ animationDelay: `${0.6 + index * 0.15}s` }}
                 >
-                  <div className="flex justify-center mb-4 transition-transform duration-normal group-hover:scale-110">
-                    <feature.icon className="h-8 w-8 text-brand-primary" />
+                  <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>
-                  <h3 className="text-lg font-semibold mb-2 text-text-primary">
+                  <h3 className="text-xl font-bold mb-3 text-text-primary group-hover:text-brand-primary transition-colors">
                     {feature.title}
                   </h3>
-                  <p className="text-sm text-text-secondary">{feature.desc}</p>
+                  <p className="text-text-secondary leading-relaxed font-medium">
+                    {feature.desc}
+                  </p>
                 </div>
               ))}
             </div>
           )}
         </div>
       </main>
+
       <Footer />
     </>
   );
diff --git a/apps/web-client/src/components/layout/footer.tsx b/apps/web-client/src/components/layout/footer.tsx
index 45184c29..195a6687 100644
--- a/apps/web-client/src/components/layout/footer.tsx
+++ b/apps/web-client/src/components/layout/footer.tsx
@@ -155,7 +155,7 @@ export function Footer({ className }: FooterProps) {
                 <div className="border-t border-border-primary pt-8">
                     <div className="flex flex-col md:flex-row justify-between items-center gap-4">
                         {/* EN: Copyright notice / VI: Thông báo copyright */}
-                        <p className="text-sm text-text-secondary text-center md:text-left">
+                        <p className="text-sm text-text-tertiary text-center md:text-left">
                             {t('footer.copyright', { year: currentYear })}
                         </p>
 
@@ -164,7 +164,7 @@ export function Footer({ className }: FooterProps) {
                             <a
                                 href="#privacy"
                                 className={cn(
-                                    'text-sm text-text-secondary hover:text-brand-primary',
+                                    'text-sm text-text-tertiary hover:text-white',
                                     'transition-colors duration-fast',
                                     'focus-visible:outline-2 focus-visible:outline-accent-primary'
                                 )}
@@ -174,7 +174,7 @@ export function Footer({ className }: FooterProps) {
                             <a
                                 href="#terms"
                                 className={cn(
-                                    'text-sm text-text-secondary hover:text-brand-primary',
+                                    'text-sm text-text-tertiary hover:text-white',
                                     'transition-colors duration-fast',
                                     'focus-visible:outline-2 focus-visible:outline-accent-primary'
                                 )}
diff --git a/apps/web-client/src/components/layout/navigation-header.tsx b/apps/web-client/src/components/layout/navigation-header.tsx
index 3d31c6cf..2845e972 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-border-primary',
-                'bg-bg-primary/80 backdrop-blur-glass',
+                'sticky top-0 z-50 w-full border-b border-white/5',
+                'bg-bg-primary/20 backdrop-blur-xl',
                 'transition-all duration-normal',
                 className
             )}
diff --git a/apps/web-client/src/components/ui/language-switcher.tsx b/apps/web-client/src/components/ui/language-switcher.tsx
index 74faec7d..59cde1b1 100644
--- a/apps/web-client/src/components/ui/language-switcher.tsx
+++ b/apps/web-client/src/components/ui/language-switcher.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { usePathname, useRouter } from 'next/navigation';
 import { Button } from './button';
 import {
     DropdownMenu,
@@ -10,6 +9,7 @@ import {
     DropdownMenuItem
 } from './dropdown-menu';
 import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/use-translation';
 
 /**
  * EN: Language configuration
@@ -28,9 +28,8 @@ export type LanguageCode = typeof languages[number]['code'];
  * 
  * Features:
  * - Dropdown menu for language selection
- * - Persists locale to localStorage
- * - Updates URL locale parameter
- * - Smooth language switching
+ * - Persists locale to localStorage via context
+ * - Smooth language switching without page reload
  * 
  * @example
  * ```tsx
@@ -38,12 +37,7 @@ export type LanguageCode = typeof languages[number]['code'];
  * ```
  */
 export function LanguageSwitcher() {
-    const router = useRouter();
-    const pathname = usePathname();
-
-    // EN: Extract current locale from pathname
-    // VI: Trích xuất locale hiện tại từ pathname
-    const currentLocale = pathname.startsWith('/vi') ? 'vi' : 'en';
+    const { locale: currentLocale, setLocale } = useTranslation();
 
     const currentLanguage = languages.find(lang => lang.code === currentLocale) || languages[0];
 
@@ -52,27 +46,7 @@ export function LanguageSwitcher() {
      * VI: Xử lý thay đổi ngôn ngữ
      */
     const handleLanguageChange = (newLocale: LanguageCode) => {
-        // EN: Save to localStorage
-        // VI: Lưu vào localStorage
-        if (typeof window !== 'undefined') {
-            localStorage.setItem('preferredLocale', newLocale);
-        }
-
-        // EN: Update URL
-        // VI: Cập nhật URL
-        let newPathname = pathname;
-
-        // Remove existing locale prefix
-        if (pathname.startsWith('/en') || pathname.startsWith('/vi')) {
-            newPathname = pathname.substring(3) || '/';
-        }
-
-        // Add new locale prefix
-        if (newLocale !== 'en') {
-            newPathname = `/${newLocale}${newPathname}`;
-        }
-
-        router.push(newPathname);
+        setLocale(newLocale as any);
     };
 
     return (
@@ -121,8 +95,8 @@ export function LanguageSwitcher() {
 }
 
 /**
- * EN: Compact Language Switcher - Shows only flags
- * VI: Language Switcher nhỏ gọn - Chỉ hiển thị cờ
+ * EN: Compact Language Switcher - Shows only code
+ * VI: Language Switcher nhỏ gọn - Chỉ hiển thị mã
  * 
  * @example
  * ```tsx
@@ -130,30 +104,14 @@ export function LanguageSwitcher() {
  * ```
  */
 export function LanguageSwitcherCompact() {
-    const router = useRouter();
-    const pathname = usePathname();
-    const currentLocale = pathname.startsWith('/vi') ? 'vi' : 'en';
+    const { locale: currentLocale, setLocale } = useTranslation();
+    const currentLanguage = languages.find(lang => lang.code === currentLocale) || languages[0];
 
     const toggleLanguage = () => {
         const newLocale = currentLocale === 'en' ? 'vi' : 'en';
-
-        if (typeof window !== 'undefined') {
-            localStorage.setItem('preferredLocale', newLocale);
-        }
-
-        let newPathname = pathname;
-        if (pathname.startsWith('/en') || pathname.startsWith('/vi')) {
-            newPathname = pathname.substring(3) || '/';
-        }
-        if (newLocale !== 'en') {
-            newPathname = `/${newLocale}${newPathname}`;
-        }
-
-        router.push(newPathname);
+        setLocale(newLocale);
     };
 
-    const currentLanguage = languages.find(lang => lang.code === currentLocale) || languages[0];
-
     return (
         <Button
             variant="glass"
diff --git a/apps/web-client/src/styles/theme.css b/apps/web-client/src/styles/theme.css
index e225dda2..d875b32f 100644
--- a/apps/web-client/src/styles/theme.css
+++ b/apps/web-client/src/styles/theme.css
@@ -14,303 +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: #888888;
-   /* Mid grey - Secondary text */
-   --text-tertiary: #444444;
-   /* Dark grey - Tertiary/disabled text */
-   --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.08);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-blur: 10px;
 
-   /* ============================================
+  /* ============================================
      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 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);
 
-   /* ============================================
+  /* ============================================
      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: #F9F9F9;
+  --bg-secondary-light: #FFFFFF;
+  --bg-tertiary-light: #F0F0F0;
+  --text-primary-light: #000000;
+  --text-secondary-light: #666666;
+  --border-primary-light: #E5E5E5;
 
-   /* ============================================
+  /* ============================================
      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;
 }
 
 /* ============================================
@@ -318,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);
+  }
 }
 
 /* ============================================
@@ -334,15 +336,16 @@
    ============================================ */
 [data-theme="dark"],
 .dark {
-   --bg-primary: #000000;
-   --bg-secondary: #0A0A0A;
-   --bg-tertiary: #141414;
-   --bg-elevated: #1A1A1A;
-   --text-primary: #FFFFFF;
-   --text-secondary: #888888;
-   --text-tertiary: #444444;
-   --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;
 }
 
 /* ============================================
@@ -351,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