diff --git a/apps/web-client/src/app/(auth)/forgot-password/page.tsx b/apps/web-client/src/app/(auth)/forgot-password/page.tsx
index 63548ac7..e1762aa5 100644
--- a/apps/web-client/src/app/(auth)/forgot-password/page.tsx
+++ b/apps/web-client/src/app/(auth)/forgot-password/page.tsx
@@ -112,24 +112,19 @@ export default function ForgotPasswordPage() {
     <main
       role="main"
       aria-label={t('auth.forgotPassword.title')}
-      className="min-h-screen flex items-center justify-center relative overflow-hidden bg-black py-12 px-4 sm:px-6 lg:px-8"
+      className="min-h-screen flex items-center justify-center relative overflow-hidden bg-bg-primary py-12 px-4 sm:px-6 lg:px-8"
     >
-      {/* EN: Cosmic Background Elements */}
-      {/* VI: Các thành phần nền vũ trụ */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
-        <div
-          className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50"
-          style={{ animationDelay: '-2s' }}
-        />
-      </div>
+      {/* EN: X.ai Minimal Design - No cosmic background */}
+      {/* VI: X.ai Minimal Design - Không có nền vũ trụ */}
 
       <AuthControls />
 
       <div className="w-full max-w-md space-y-8 relative z-10 glass-appear">
         <div className="text-center space-y-4">
           <div className="flex justify-center">
-            <div className="p-3 rounded-2xl bg-white/5 border border-white/10 shadow-glass-sm animate-float">
+            <div className="p-3 rounded-2xl bg-accent-primary/5 border border-accent-primary/10 shadow-glass-sm">
+              {/* EN: X.ai Minimal - Static icon (no floating) */}
+              {/* VI: X.ai Minimal - Icon tĩnh (không float) */}
               <svg
                 width="40"
                 height="40"
@@ -276,7 +271,7 @@ export default function ForgotPasswordPage() {
               <div className="text-center pt-4 border-t border-glass-subtle">
                 <Link
                   href="/login"
-                  className="text-sm font-medium text-text-secondary hover:text-white transition-colors inline-flex items-center gap-2 group"
+                  className="text-sm font-medium text-accent-primary hover:text-accent-primary-hover transition-colors inline-flex items-center gap-2 group"
                 >
                   <svg
                     className="h-4 w-4 transform group-hover:-translate-x-1 transition-transform"
diff --git a/apps/web-client/src/app/(auth)/login/page.tsx b/apps/web-client/src/app/(auth)/login/page.tsx
index 038fc8b0..2453be8f 100644
--- a/apps/web-client/src/app/(auth)/login/page.tsx
+++ b/apps/web-client/src/app/(auth)/login/page.tsx
@@ -113,24 +113,19 @@ export default function LoginPage() {
     <main
       role="main"
       aria-label={t('auth.login.pageLabel')}
-      className="min-h-screen flex items-center justify-center relative overflow-hidden bg-black py-12 px-4 sm:px-6 lg:px-8"
+      className="min-h-screen flex items-center justify-center relative overflow-hidden bg-bg-primary py-12 px-4 sm:px-6 lg:px-8"
     >
-      {/* EN: Cosmic Background Elements - X.ai style */}
-      {/* VI: Các thành phần nền vũ trụ - phong cách X.ai */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
-        <div
-          className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50"
-          style={{ animationDelay: '-2s' }}
-        />
-      </div>
+      {/* EN: X.ai Minimal Design - No cosmic background */}
+      {/* VI: X.ai Minimal Design - Không có nền vũ trụ */}
 
       <AuthControls />
 
       <div className="w-full max-w-md space-y-8 relative z-10 glass-appear">
         <div className="text-center space-y-4">
           <div className="flex justify-center">
-            <div className="p-3 rounded-2xl bg-white/5 border border-white/10 shadow-glass-sm animate-float">
+            <div className="p-3 rounded-2xl bg-accent-primary/5 border border-accent-primary/10 shadow-glass-sm">
+              {/* EN: X.ai Minimal - Static icon (no floating) */}
+              {/* VI: X.ai Minimal - Icon tĩnh (không float) */}
               <svg
                 width="40"
                 height="40"
diff --git a/apps/web-client/src/app/(auth)/register/page.tsx b/apps/web-client/src/app/(auth)/register/page.tsx
index c4ed8dcc..aa7b51b6 100644
--- a/apps/web-client/src/app/(auth)/register/page.tsx
+++ b/apps/web-client/src/app/(auth)/register/page.tsx
@@ -227,24 +227,19 @@ export default function RegisterPage() {
     <main
       role="main"
       aria-label={t('auth.register.createAccount')}
-      className="min-h-screen flex items-center justify-center relative overflow-hidden bg-black py-12 px-4 sm:px-6 lg:px-8"
+      className="min-h-screen flex items-center justify-center relative overflow-hidden bg-bg-primary py-12 px-4 sm:px-6 lg:px-8"
     >
-      {/* EN: Cosmic Background Elements */}
-      {/* VI: Các thành phần nền vũ trụ */}
-      <div className="absolute inset-0 z-0 pointer-events-none">
-        <div className="absolute top-[-10%] right-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
-        <div
-          className="absolute bottom-[-10%] left-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50"
-          style={{ animationDelay: '-2s' }}
-        />
-      </div>
+      {/* EN: X.ai Minimal Design - No cosmic background */}
+      {/* VI: X.ai Minimal Design - Không có nền vũ trụ */}
 
       <AuthControls />
 
       <div className="w-full max-w-md space-y-8 relative z-10 glass-appear">
         <div className="text-center space-y-4">
           <div className="flex justify-center">
-            <div className="p-3 rounded-2xl bg-white/5 border border-white/10 shadow-glass-sm animate-float">
+            <div className="p-3 rounded-2xl bg-accent-primary/5 border border-accent-primary/10 shadow-glass-sm">
+              {/* EN: X.ai Minimal - Static icon (no floating) */}
+              {/* VI: X.ai Minimal - Icon tĩnh (không float) */}
               <svg
                 width="40"
                 height="40"
diff --git a/apps/web-client/src/app/layout.tsx b/apps/web-client/src/app/layout.tsx
index 82c8d7d7..8def13f1 100644
--- a/apps/web-client/src/app/layout.tsx
+++ b/apps/web-client/src/app/layout.tsx
@@ -77,8 +77,8 @@ export default function RootLayout({
     // VI: Cấu trúc HTML gốc với ngôn ngữ động (sẽ được cập nhật bởi I18nProvider)
     <html lang="en" className={inter.variable} suppressHydrationWarning>
       <body>
-        <SkipToContent />
         <I18nProvider>
+          <SkipToContent />
           <QueryProvider>
             <ThemeProvider>{children}</ThemeProvider>
           </QueryProvider>
diff --git a/apps/web-client/src/features/shared/components/ui/button/button.tsx b/apps/web-client/src/features/shared/components/ui/button/button.tsx
index 29cce4b7..3a46f3ee 100644
--- a/apps/web-client/src/features/shared/components/ui/button/button.tsx
+++ b/apps/web-client/src/features/shared/components/ui/button/button.tsx
@@ -79,12 +79,14 @@ const buttonVariants = cva(
           'shadow-glass-md hover:shadow-glass-lg',
           'hover:bg-glass-hover',
         ],
-        // Brand (gradient button for main CTA)
+        // Brand (X.ai blue - solid color, no gradient)
         brand: [
-          'bg-brand-gradient text-white',
-          'shadow-brand hover:shadow-brand-lg',
-          'hover:scale-[1.02]',
-          'focus-visible:ring-brand-primary focus-visible:shadow-colored',
+          'bg-accent-primary text-white',
+          'shadow-md hover:shadow-lg',
+          'hover:bg-accent-primary-hover',
+          'transition-colors duration-quick',
+          'focus-visible:ring-2 focus-visible:ring-accent-primary/30',
+          'focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary',
         ],
       },
       size: {
@@ -108,7 +110,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends Omit<AriaButtonProps, 'className' | 'children'>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   /**
    * Custom className to merge with variant styles
    */
diff --git a/apps/web-client/src/features/shared/components/ui/input/input.tsx b/apps/web-client/src/features/shared/components/ui/input/input.tsx
index bf982763..3a4cfb48 100644
--- a/apps/web-client/src/features/shared/components/ui/input/input.tsx
+++ b/apps/web-client/src/features/shared/components/ui/input/input.tsx
@@ -200,10 +200,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               'text-base text-text-primary placeholder:text-text-tertiary',
               'transition-all duration-quick ease-smooth',
 
-              // Focus state with glass effect
+              // Focus state with X.ai blue ring (X.ai Minimal Design)
               'focus:outline-none focus:ring-2 focus:ring-offset-2',
-              'focus:ring-glass-focus focus:ring-offset-bg-primary',
-              'focus:bg-glass focus:border-glass-hover',
+              'focus:ring-accent-primary/30 focus:ring-offset-bg-primary',
+              'focus:bg-glass focus:border-accent-primary',
 
               // Invalid state
               'data-[invalid]:border-accent-error',
diff --git a/apps/web-client/src/styles/theme.css b/apps/web-client/src/styles/theme.css
index b451e22f..5a04950d 100644
--- a/apps/web-client/src/styles/theme.css
+++ b/apps/web-client/src/styles/theme.css
@@ -14,396 +14,400 @@
  */
 
 :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 - X.ai Minimal / Màu nền - X.ai Minimal */
+  --bg-primary: #15202b;
+  /* Warm dark gray - Main background (X.ai style) */
+  --bg-secondary: #1a2734;
+  /* Warm dark gray lighter - Card/Panel background */
+  --bg-tertiary: #1f2f3d;
+  /* Warm dark gray medium - Hover states */
+  --bg-elevated: #243442;
+  /* Warm dark gray elevated - 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) - X.ai Minimal / Màu chữ (tuân thủ WCAG) - X.ai Minimal */
+  --text-primary: #FFFFFF;
+  /* Pure white - Primary text */
+  --text-secondary: #8899A6;
+  /* X.ai gray - Secondary text (labels, descriptions) */
+  --text-tertiary: #657786;
+  /* X.ai dark gray - Tertiary text (captions, footnotes) */
+  --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 - X.ai Blue / Màu thương hiệu/Accent - X.ai Blue */
+  --accent-primary: #1D9BF0;
+  /* X.ai blue - Primary actions, links, focus */
+  --accent-primary-hover: #1a8cd8;
+  /* X.ai blue darker - Hover states */
+  --accent-primary-light: #8ecdf7;
+  /* X.ai blue lighter - Light accents */
+  --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 - X.ai Minimal / Màu viền - X.ai Minimal */
+  --border-primary: #222222;
+  /* Subtle borders */
+  --border-secondary: #333333;
+  /* Hover borders */
+  --border-focus: #1D9BF0;
+  /* Focus state - X.ai blue */
 
-   /* ============================================
-     EN: Minimal Brand Colors (x.ai Inspired)
-     VI: Màu thương hiệu tối giản (x.ai Inspired)
+  /* ============================================
+     EN: X.ai Brand Colors (2026 Minimal)
+     VI: Màu thương hiệu X.ai (2026 Minimal)
      ============================================ */
 
-   /* Primary Brand Color - Clean white accent */
-   --brand-primary: #FFFFFF;
-   --brand-primary-light: #F8F8F8;
-   --brand-primary-dark: #E5E5E5;
-   --brand-primary-contrast: #000000;
+  /* Primary Brand Color - X.ai Blue */
+  --brand-primary: #1D9BF0;
+  /* X.ai blue - Main brand color */
+  --brand-primary-light: #8ecdf7;
+  /* X.ai blue light */
+  --brand-primary-dark: #1a8cd8;
+  /* X.ai blue dark */
+  --brand-primary-contrast: #FFFFFF;
+  /* White text on X.ai blue */
 
-   /* Secondary Brand Color - Subtle gray */
-   --brand-secondary: #888888;
-   --brand-secondary-light: #AAAAAA;
-   --brand-secondary-dark: #666666;
+  /* Secondary Brand Color - Warm dark gray */
+  --brand-secondary: #8899A6;
+  /* X.ai gray */
+  --brand-secondary-light: #AAAAAA;
+  --brand-secondary-dark: #657786;
+  /* X.ai dark gray */
 
-   /* Accent Color - Minimal gray accent */
-   --brand-accent: #CCCCCC;
-   --brand-accent-light: #DDDDDD;
-   --brand-accent-dark: #BBBBBB;
+  /* No gradients - X.ai Minimalism uses solid colors only */
 
-   /* Brand Gradients - REMOVED for X.ai Minimalism */
-   /* Use solid colors instead for cleaner design */
-
-   /* ============================================
+  /* ============================================
      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 - 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.05);
-   /* Active/pressed state */
+  /* Glass Backgrounds - X.ai Ultra Minimal (2-5% opacity) */
+  --glass-bg-subtle: rgba(255, 255, 255, 0.01);
+  /* Ultra subtle - For minimal effect */
+  --glass-bg-default: rgba(255, 255, 255, 0.04);
+  /* Default X.ai minimal background (4%) */
+  --glass-bg-medium: rgba(255, 255, 255, 0.05);
+  /* Medium minimal effect */
+  --glass-bg-hover: rgba(255, 255, 255, 0.06);
+  /* Hover state */
+  --glass-bg-active: rgba(255, 255, 255, 0.08);
+  /* Active/pressed state */
 
-   /* 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.05);
-   /* Default border */
-   --glass-border-hover: rgba(255, 255, 255, 0.07);
-   /* Hover border */
-   --glass-border-focus: rgba(255, 255, 255, 0.10);
-   /* Focus state - more visible */
+  /* Glass Borders - X.ai Subtle */
+  --glass-border-subtle: rgba(255, 255, 255, 0.05);
+  /* Very subtle border */
+  --glass-border-default: rgba(255, 255, 255, 0.08);
+  /* Default X.ai border (8%) */
+  --glass-border-hover: rgba(255, 255, 255, 0.12);
+  /* Hover border */
+  --glass-border-focus: rgba(29, 155, 240, 0.5);
+  /* Focus state - X.ai blue (50%) */
 
-   /* Backdrop Blur Levels - Subtle to strong */
-   --glass-blur-sm: 4px;
-   /* Small blur - for inputs */
-   --glass-blur-md: 8px;
-   /* Medium blur - default */
-   --glass-blur-lg: 12px;
-   /* Large blur - for navigation */
-   --glass-blur-xl: 16px;
-   /* Extra large - for modals */
+  /* Backdrop Blur Levels - X.ai Minimal (Reduced) */
+  --glass-blur-sm: 4px;
+  /* Small blur - for inputs */
+  --glass-blur-md: 8px;
+  /* Medium blur - X.ai default (reduced from 16px) */
+  --glass-blur-lg: 12px;
+  /* Large blur - cards only */
+  --glass-blur-xl: 12px;
+  /* Max blur - X.ai keeps it subtle (reduced from 16px) */
 
-   /* Glass Shadows - Dark mode optimized */
-   --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
-   --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
-   --glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
-   --glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1);
-   /* Inner highlight */
+  /* Glass Shadows - Dark mode optimized */
+  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
+  --glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  /* Inner highlight */
 
-   /* Interactive Glass States */
-   --interactive-glass-rest: rgba(255, 255, 255, 0.04);
-   --interactive-glass-hover: rgba(255, 255, 255, 0.08);
-   --interactive-glass-active: rgba(255, 255, 255, 0.12);
-   --interactive-glass-disabled: rgba(255, 255, 255, 0.02);
+  /* Interactive Glass States */
+  --interactive-glass-rest: rgba(255, 255, 255, 0.04);
+  --interactive-glass-hover: rgba(255, 255, 255, 0.08);
+  --interactive-glass-active: rgba(255, 255, 255, 0.12);
+  --interactive-glass-disabled: rgba(255, 255, 255, 0.02);
 
-   /* Legacy support - keeping old variables for backward compatibility */
-   --glass-bg: var(--glass-bg-default);
-   --glass-border: var(--glass-border-default);
-   --glass-blur: var(--glass-blur-md);
+  /* Legacy support - keeping old variables for backward compatibility */
+  --glass-bg: var(--glass-bg-default);
+  --glass-border: var(--glass-border-default);
+  --glass-blur: var(--glass-blur-md);
 
-   /* ============================================
+  /* ============================================
      EN: Removed - Extended Shadows (X.ai Minimalist)
      VI: Đã xóa - Extended Shadows (X.ai Minimalist)
      ============================================ */
-   /* Removed brand shadows for minimalist approach */
-   /* Use --shadow or --shadow-lg instead */
+  /* Removed brand shadows for minimalist approach */
+  /* Use --shadow or --shadow-lg instead */
 
-   /* ============================================
+  /* ============================================
      EN: Light Mode Colors (Secondary Theme)
      VI: Màu sắc cho Light Mode (Theme phụ)
      ============================================ */
-   --bg-primary-light: #FFFFFF;
-   --bg-secondary-light: #FBFBFD;
-   /* Apple Gray */
-   --bg-tertiary-light: #F5F5F7;
-   --text-primary-light: #1D1D1F;
-   /* Apple Black */
-   --text-secondary-light: #86868B;
-   /* Apple Gray Text */
-   --border-primary-light: #D2D2D7;
+  --bg-primary-light: #FFFFFF;
+  --bg-secondary-light: #FBFBFD;
+  /* Apple Gray */
+  --bg-tertiary-light: #F5F5F7;
+  --text-primary-light: #1D1D1F;
+  /* Apple Black */
+  --text-secondary-light: #86868B;
+  /* Apple Gray Text */
+  --border-primary-light: #D2D2D7;
 
-   /* ============================================
+  /* ============================================
      EN: Typography
      VI: Kiểu chữ
      ============================================ */
 
-   /* Font Stack / Bộ font */
-   --font-sans: var(--font-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: var(--font-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: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  /* Display Font - For hero titles (48px+) */
+  --font-display: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
-   /* Heading Font - For section headings (24-36px) */
-   --font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  /* Heading Font - For section headings (24-36px) */
+  --font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
-   /* 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.75rem;
-   /* 28px - 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 - 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.75rem;
+  /* 28px - 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 - X.ai Minimalist (Bolder Impact) */
-   --font-thin: 100;
-   --font-extralight: 200;
-   --font-light: 300;
-   /* Light text */
-   --font-normal: 400;
-   /* Body text */
-   --font-medium: 500;
-   /* Emphasized */
-   --font-semibold: 600;
-   /* Headings */
-   --font-bold: 700;
-   /* Bold - stronger impact */
-   --font-extrabold: 800;
-   /* Extra bold - hero text */
-   --font-black: 900;
-   /* Black - maximum impact for titles */
+  /* Font Weights - X.ai Minimalist (Bolder Impact) */
+  --font-thin: 100;
+  --font-extralight: 200;
+  --font-light: 300;
+  /* Light text */
+  --font-normal: 400;
+  /* Body text */
+  --font-medium: 500;
+  /* Emphasized */
+  --font-semibold: 600;
+  /* Headings */
+  --font-bold: 700;
+  /* Bold - stronger impact */
+  --font-extrabold: 800;
+  /* Extra bold - hero text */
+  --font-black: 900;
+  /* Black - maximum impact for titles */
 
-   /* Letter Spacing - Clean Minimalist Look */
-   --tracking-tighter: -0.04em;
-   /* Very tight - for large display text */
-   --tracking-tight: -0.02em;
-   /* Tight - for headings */
-   --tracking-normal: 0;
-   /* Normal */
-   --tracking-wide: 0.02em;
-   /* Wide - for small caps */
-   --tracking-wider: 0.04em;
-   /* Wider - for emphasis */
+  /* Letter Spacing - Clean Minimalist Look */
+  --tracking-tighter: -0.04em;
+  /* Very tight - for large display text */
+  --tracking-tight: -0.02em;
+  /* Tight - for headings */
+  --tracking-normal: 0;
+  /* Normal */
+  --tracking-wide: 0.02em;
+  /* Wide - for small caps */
+  --tracking-wider: 0.04em;
+  /* Wider - for 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 */
 
-   /* Mobile Layout / Layout Mobile */
-   --mobile-header-height: 56px;
-   /* Standard mobile header height */
-   --mobile-bottom-nav-height: 64px;
-   /* iOS/Android bottom nav height */
-   --mobile-safe-area-top: env(safe-area-inset-top);
-   /* iOS notch safe area */
-   --mobile-safe-area-bottom: env(safe-area-inset-bottom);
-   /* iOS home indicator safe area */
+  /* Mobile Layout / Layout Mobile */
+  --mobile-header-height: 56px;
+  /* Standard mobile header height */
+  --mobile-bottom-nav-height: 64px;
+  /* iOS/Android bottom nav height */
+  --mobile-safe-area-top: env(safe-area-inset-top);
+  /* iOS notch safe area */
+  --mobile-safe-area-bottom: env(safe-area-inset-bottom);
+  /* iOS home indicator safe area */
 
-   /* 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 - X.ai Minimalist (Ultra Subtle)
      VI: Đổ bóng - X.ai Minimalist (Cực kỳ tinh tế)
      ============================================ */
-   --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-   /* Default shadow - subtle */
-   --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
-   /* Large shadow - for modals only */
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  /* Default shadow - subtle */
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
+  /* Large shadow - for modals only */
 
-   /* Legacy support - mapping to new shadows */
-   --shadow-sm: var(--shadow);
-   --shadow-md: var(--shadow);
-   --shadow-xl: var(--shadow-lg);
-   --shadow-glow: 0 0 8px rgba(255, 255, 255, 0.05);
-   /* Minimal glow for focus */
+  /* Legacy support - mapping to new shadows */
+  --shadow-sm: var(--shadow);
+  --shadow-md: var(--shadow);
+  --shadow-xl: var(--shadow-lg);
+  --shadow-glow: 0 0 8px rgba(255, 255, 255, 0.05);
+  /* Minimal 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 - X.ai Minimalist (Simplified) */
-   --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-   /* Smooth and natural - primary easing */
-   --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
-   /* Snappy - for quick interactions */
+  /* Timing Functions - X.ai Minimalist (Simplified) */
+  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  /* Smooth and natural - primary easing */
+  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
+  /* Snappy - for quick interactions */
 
-   /* Legacy support - mapping to new easing */
-   --ease-in: var(--ease-snap);
-   --ease-out: var(--ease-snap);
-   --ease-in-out: var(--ease-smooth);
-   --motion-ease-smooth: var(--ease-smooth);
-   --motion-ease-glide: var(--ease-snap);
+  /* Legacy support - mapping to new easing */
+  --ease-in: var(--ease-snap);
+  --ease-out: var(--ease-snap);
+  --ease-in-out: var(--ease-smooth);
+  --motion-ease-smooth: var(--ease-smooth);
+  --motion-ease-glide: var(--ease-snap);
 
-   /* Duration - X.ai Minimalist (Faster, Snappier) */
-   --duration-instant: 100ms;
-   /* Instant feedback */
-   --duration-fast: 150ms;
-   /* Hover effects */
-   --duration-normal: 200ms;
-   /* Default transitions - FASTER */
-   --duration-slow: 300ms;
-   /* Complex animations - FASTER */
+  /* Duration - X.ai Minimalist (Faster, Snappier) */
+  --duration-instant: 100ms;
+  /* Instant feedback */
+  --duration-fast: 150ms;
+  /* Hover effects */
+  --duration-normal: 200ms;
+  /* Default transitions - FASTER */
+  --duration-slow: 300ms;
+  /* Complex animations - FASTER */
 
-   /* Legacy support - mapping to new durations */
-   --duration-slower: var(--duration-slow);
-   --motion-duration-instant: var(--duration-instant);
-   --motion-duration-quick: var(--duration-fast);
-   --motion-duration-normal: var(--duration-normal);
-   --motion-duration-smooth: var(--duration-slow);
+  /* Legacy support - mapping to new durations */
+  --duration-slower: var(--duration-slow);
+  --motion-duration-instant: var(--duration-instant);
+  --motion-duration-quick: var(--duration-fast);
+  --motion-duration-normal: var(--duration-normal);
+  --motion-duration-smooth: var(--duration-slow);
 
-   /* ============================================
+  /* ============================================
      EN: Interactive States - X.ai Minimalist
      VI: Trạng thái tương tác - X.ai Minimalist
      ============================================ */
 
-   /* Removed bounce/elastic - too playful for minimalism */
+  /* Removed bounce/elastic - too playful for minimalism */
 
-   /* Hover Scale - Minimal movement */
-   --hover-scale-sm: 1.01;
-   /* Barely noticeable */
-   --hover-scale-md: 1.02;
-   /* Subtle */
+  /* Hover Scale - Minimal movement */
+  --hover-scale-sm: 1.01;
+  /* Barely noticeable */
+  --hover-scale-md: 1.02;
+  /* Subtle */
 
-   /* Active Scale - For pressed states */
-   --active-scale: 0.99;
-   /* Minimal press feedback */
+  /* Active Scale - For pressed states */
+  --active-scale: 0.99;
+  /* Minimal press feedback */
 }
 
 /* ============================================
@@ -411,14 +415,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);
+  }
 }
 
 /* ============================================
@@ -427,16 +431,25 @@
    ============================================ */
 [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;
+  /* X.ai Minimal Dark Theme */
+  --bg-primary: #15202b;
+  /* Warm dark gray */
+  --bg-secondary: #1a2734;
+  --bg-tertiary: #1f2f3d;
+  --bg-elevated: #243442;
+  --text-primary: #FFFFFF;
+  --text-secondary: #8899A6;
+  /* X.ai gray */
+  --text-tertiary: #657786;
+  /* X.ai dark gray */
+  --text-muted: #505050;
+  --border-primary: #222222;
+  --border-secondary: #333333;
+  --border-focus: #1D9BF0;
+  /* X.ai blue */
+  --accent-primary: #1D9BF0;
+  /* X.ai blue */
+  --accent-primary-hover: #1a8cd8;
 }
 
 /* ============================================
@@ -445,10 +458,19 @@
    ============================================ */
 [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);
+  /* X.ai Minimal Light Theme */
+  --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);
+  --border-focus: #1D9BF0;
+  /* X.ai blue stays in light mode */
+  --accent-primary: #1D9BF0;
+  /* X.ai blue */
+  --accent-primary-hover: #1a8cd8;
+  /* Glass effects adapted for light */
+  --glass-bg-default: rgba(0, 0, 0, 0.04);
+  --glass-border-default: rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file