bổ sung size footer

app.py

@@ -93,12 +93,22 @@ custom_css = """
     margin: 20px 0;
     box-shadow: 0 15px 35px rgba(12, 83, 135, 0.3), 0 5px 15px rgba(0, 0, 0, 0.12);
     border: 1px solid rgba(255, 255, 255, 0.2);
+    animation: loadingPulse 2s ease-in-out infinite alternate;
 }
 
 .loading-container * {
     color: white !important;
 }
 
+@keyframes loadingPulse {
+    0% {
+        box-shadow: 0 15px 35px rgba(12, 83, 135, 0.3), 0 5px 15px rgba(0, 0, 0, 0.12);
+    }
+    100% {
+        box-shadow: 0 20px 45px rgba(12, 83, 135, 0.4), 0 8px 20px rgba(0, 0, 0, 0.15);
+    }
+}
+
 .loading-spinner {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #1A5F91;
@@ -428,6 +438,48 @@ html {
     transition: all 0.3s ease !important;
 }
 
+/* Hiệu ứng highlight cho loading panel */
+#loading-panel.highlight {
+    box-shadow: 0 0 20px rgba(26, 95, 145, 0.4) !important;
+    transform: scale(1.02) !important;
+    transition: all 0.3s ease !important;
+}
+
+/* Fade-in animation cho LLM analysis */
+.gradio-markdown {
+    animation: fadeInUp 0.8s ease-out !important;
+    opacity: 0 !important;
+    animation-fill-mode: forwards !important;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Smooth reveal cho các phần tử khác */
+.plot-container,
+.info-card {
+    animation: slideInFade 0.6s ease-out !important;
+}
+
+@keyframes slideInFade {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 /* Cải thiện focus state cho biểu đồ */
 .plot-container:focus-within {
     outline: 2px solid rgba(26, 95, 145, 0.3);
@@ -1961,13 +2013,13 @@ def tao_ung_dung():
             inputs=[],
             outputs=[bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, loading_panel],
             show_progress=False,
-            scroll_to_output=True,  # auto scroll tới chart (output đầu)
+            scroll_to_output=False,  # Không scroll tự động, sẽ dùng JS
         )
 
-        # (Tùy chọn) highlight chart ngay sau khi cuộn
-        JS_SCROLL_HILIGHT = r"""
+        # Scroll tới loading panel thay vì chart
+        JS_SCROLL_TO_LOADING = r"""
         (...args) => {
-          const el = document.getElementById('chart-target');
+          const el = document.getElementById('loading-panel');
           if (el) {
             el.scrollIntoView({ behavior: 'smooth', block: 'center' });
             el.classList.add('highlight');
@@ -1977,9 +2029,9 @@ def tao_ung_dung():
         }
         """
         try:
-            evt0.then(fn=None, inputs=None, outputs=None, js=JS_SCROLL_HILIGHT)
+            evt0.then(fn=None, inputs=None, outputs=None, js=JS_SCROLL_TO_LOADING)
         except TypeError:
-            evt0.then(fn=None, inputs=None, outputs=None, _js=JS_SCROLL_HILIGHT)  # type: ignore
+            evt0.then(fn=None, inputs=None, outputs=None, _js=JS_SCROLL_TO_LOADING)  # type: ignore
 
         # 2) Stream 4 bước loading trong 3–5 giây (chỉ update loading_panel)
         evt1 = evt0.then(
@@ -1990,13 +2042,30 @@ def tao_ung_dung():
         )
 
         # 3) Tính toán thật, render kết quả + tắt loading
-        evt1.then(
+        evt2 = evt1.then(
             fn=tinh_toan_ket_qua,
             inputs=[lua_chon_dropdown, chu_ky_dropdown, che_do_xem],
             outputs=[bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, loading_panel],
             show_progress=False,
         )
         
+        # Thêm hiệu ứng fade-in cho LLM analysis sau khi render
+        JS_FADE_IN_LLM = r"""
+        (...args) => {
+          setTimeout(() => {
+            const markdownElements = document.querySelectorAll('.gradio-markdown');
+            markdownElements.forEach(el => {
+              el.style.animation = 'fadeInUp 0.8s ease-out forwards';
+            });
+          }, 200);
+          return [];
+        }
+        """
+        try:
+            evt2.then(fn=None, inputs=None, outputs=None, js=JS_FADE_IN_LLM)
+        except TypeError:
+            evt2.then(fn=None, inputs=None, outputs=None, _js=JS_FADE_IN_LLM)  # type: ignore
+        
         # Streaming event cho chiến lược đề xuất
         nut_streaming.click(
             fn=xu_ly_streaming,
@@ -2051,23 +2120,74 @@ Hệ thống AI sẽ tạo chiến lược đề xuất với:
         # Footer thông tin hệ thống với branding FoxAI
         gr.HTML(f"""
         <div class='info-card' style="margin-top: 30px; text-align: center;">
-            <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAi" style="height: 55px; margin-right: 18px;"/>
+            <div style="
+                display: flex; 
+                align-items: center; 
+                justify-content: center; 
+                margin-bottom: 35px; 
+                padding: 25px; 
+                background: linear-gradient(135deg, rgba(26, 95, 145, 0.1), rgba(12, 83, 135, 0.05));
+                border-radius: 20px;
+                border: 2px solid rgba(26, 95, 145, 0.2);
+                box-shadow: 0 8px 25px rgba(26, 95, 145, 0.15);
+            ">
+                <img src="{FOXAI_LOGO_URL}" alt="FoxAI" style="
+                    height: 65px; 
+                    margin-right: 25px;
+                    filter: drop-shadow(0 4px 8px rgba(26, 95, 145, 0.3));
+                    transition: all 0.3s ease;
+                " onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'"/>
                 <h2 style="
-                    color: #1A5F91; 
+                    color: white; 
                     margin: 0; 
-                    font-size: 2.2em; 
-                    font-weight: 800; 
-                    letter-spacing: 1px;
+                    font-size: 2.8em; 
+                    font-weight: 900; 
+                    letter-spacing: 1.5px;
+                    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+                    background: linear-gradient(90deg, #ffffff, #f1f5f9, #e2e8f0);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                    line-height: 1.2;
                 ">
-                    💡 Hệ thống dự báo <span style="color:#0C5387;">FoxAi</span>
+                    💡 HỆ THỐNG DỰ BÁO <span style="
+                        background: linear-gradient(90deg, #ffffff, #cbd5e1);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                        background-clip: text;
+                        font-weight: 800;
+                    ">FoxAI</span>
                 </h2>
             </div>
             
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin: 25px 0;">
-                <div style="text-align: center; padding: 20px; background: rgba(26, 95, 145, 0.05); border-radius: 15px;">
-                    <h4 style="color: #1A5F91; margin-bottom: 15px;">🎯 Tính Năng</h4>
-                    <div style="color: #334155; line-height: 1.8; font-weight: 500;">
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin: 30px 0;">
+                <div style="
+                    text-align: center; 
+                    padding: 30px; 
+                    background: linear-gradient(135deg, rgba(26, 95, 145, 0.15), rgba(255, 255, 255, 0.1)); 
+                    border-radius: 20px; 
+                    border: 1px solid rgba(26, 95, 145, 0.3);
+                    box-shadow: 0 8px 25px rgba(26, 95, 145, 0.15);
+                    transition: all 0.3s ease;
+                ">
+                    <h4 style="
+                        color: #1A5F91; 
+                        margin-bottom: 20px; 
+                        font-size: 1.8em;
+                        font-weight: 700;
+                        background: linear-gradient(90deg, #1A5F91, #2563eb);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                        background-clip: text;
+                        text-shadow: 0 2px 10px rgba(26, 95, 145, 0.3);
+                    ">🎯 Tính Năng</h4>
+                    <div style="
+                        color: #334155; 
+                        line-height: 2.2; 
+                        font-weight: 600;
+                        font-size: 1.15em;
+                        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                    ">
                         ✨ AI Insights thông minh<br/>
                         📊 Multi-view linh hoạt<br/>
                         📈 Báo cáo chuyên nghiệp<br/>
@@ -2075,9 +2195,33 @@ Hệ thống AI sẽ tạo chiến lược đề xuất với:
                     </div>
                 </div>
                 
-                <div style="text-align: center; padding: 20px; background: rgba(26, 95, 145, 0.05); border-radius: 15px;">
-                    <h4 style="color: #1A5F91; margin-bottom: 15px;">📊 Chất Lượng</h4>
-                    <div style="color: #334155; line-height: 1.8; font-weight: 500;">
+                <div style="
+                    text-align: center; 
+                    padding: 30px; 
+                    background: linear-gradient(135deg, rgba(26, 95, 145, 0.15), rgba(255, 255, 255, 0.1)); 
+                    border-radius: 20px; 
+                    border: 1px solid rgba(26, 95, 145, 0.3);
+                    box-shadow: 0 8px 25px rgba(26, 95, 145, 0.15);
+                    transition: all 0.3s ease;
+                ">
+                    <h4 style="
+                        color: #1A5F91; 
+                        margin-bottom: 20px; 
+                        font-size: 1.8em;
+                        font-weight: 700;
+                        background: linear-gradient(90deg, #1A5F91, #2563eb);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                        background-clip: text;
+                        text-shadow: 0 2px 10px rgba(26, 95, 145, 0.3);
+                    ">📊 Chất Lượng</h4>
+                    <div style="
+                        color: #334155; 
+                        line-height: 2.2; 
+                        font-weight: 600;
+                        font-size: 1.15em;
+                        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                    ">
                         🎯 Độ chính xác cao<br/>
                         📅 Dự báo theo quý<br/>
                         🔄 Market intelligence<br/>
@@ -2086,11 +2230,37 @@ Hệ thống AI sẽ tạo chiến lược đề xuất với:
                 </div>
             </div>
             
-            <div style="text-align: center; margin: 25px 0; padding: 20px; background: linear-gradient(135deg, rgba(26, 95, 145, 0.1), rgba(139, 139, 139, 0.1)); border-radius: 15px; border: 2px solid #1A5F91;">
-                <p style="color: #1A5F91; font-weight: 700; margin: 0; font-size: 1.2em;">
+            <div style="
+                text-align: center; 
+                margin: 35px 0; 
+                padding: 25px; 
+                background: linear-gradient(135deg, rgba(26, 95, 145, 0.2), rgba(139, 139, 139, 0.15)); 
+                border-radius: 20px; 
+                border: 2px solid #1A5F91;
+                box-shadow: 0 10px 30px rgba(26, 95, 145, 0.2);
+                transition: all 0.3s ease;
+            ">
+                <p style="
+                    color: #1A5F91; 
+                    font-weight: 700; 
+                    margin: 0; 
+                    font-size: 1.5em;
+                    background: linear-gradient(90deg, #1A5F91, #2563eb, #1A5F91);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                    text-shadow: 0 2px 8px rgba(26, 95, 145, 0.3);
+                ">
                     🦊 <strong>Powered by FoxAi</strong> • 🇻🇳 Made in Vietnam • 🤖 Advanced AI
                 </p>
-                <p style="color: #334155; margin: 8px 0 0 0; font-size: 1em; font-weight: 600;">
+                <p style="
+                    color: #334155; 
+                    margin: 12px 0 0 0; 
+                    font-size: 1.2em; 
+                    font-weight: 700;
+                    letter-spacing: 1px;
+                    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+                ">
                     YOUR TRUSTED AI PARTNER
                 </p>
             </div>

app_backup.py

@@ -1,1986 +0,0 @@
-import gradio as gr
-import plotly.graph_objects as go
-import numpy as np
-from datetime import datetime, timedelta
-import random
-import time
-import pandas as pd  # thêm
-
-# URL logo FoxAI - sử dụng trực tiếp từ attachment
-FOXAI_LOGO_URL = "data:image/png;base64,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"
-
-# CSS Style với màu sắc FoxAI - Modern UI Design
-custom_css = """
-.gradio-container {
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%);
-    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
-    min-height: 100vh;
-}
-
-.header-container {
-    text-align: center;
-    margin: 20px 0;
-    padding: 40px;
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    border-radius: 24px;
-    box-shadow: 0 20px 40px rgba(12, 83, 135, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    position: relative;
-    overflow: hidden;
-}
-
-.header-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-    animation: shine 3s infinite;
-}
-
-@keyframes shine {
-    0% { left: -100%; }
-    100% { left: 100%; }
-}
-
-.foxai-logo {
-    max-width: 320px;
-    height: auto;
-    margin: 15px auto 25px auto;
-    display: block;
-    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)) brightness(1.1);
-    transition: all 0.4s ease;
-    animation: float 4s ease-in-out infinite;
-}
-
-.foxai-logo:hover {
-    transform: scale(1.05);
-    filter: drop-shadow(0 8px 16px rgba(12, 83, 135, 0.3)) brightness(1.2);
-}
-
-.header-title {
-    background: linear-gradient(90deg, #ffffff, #f1f5f9, #e2e8f0, #ffffff);
-    background-size: 300% 300%;
-    animation: gradient 8s ease infinite;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-align: center;
-    font-size: 2.5em;
-    font-weight: 700;
-    margin: 15px auto;
-    line-height: 1.3;
-    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
-    letter-spacing: -0.01em;
-    max-width: 900px;
-}
-
-@keyframes gradient {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-}
-
-.loading-container {
-    text-align: center;
-    padding: 40px;
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    border-radius: 20px;
-    color: white !important;
-    margin: 20px 0;
-    box-shadow: 0 15px 35px rgba(12, 83, 135, 0.3), 0 5px 15px rgba(0, 0, 0, 0.12);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.loading-container * {
-    color: white !important;
-}
-
-.loading-spinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #1A5F91;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 20px;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-.progress-bar {
-    width: 100%;
-    height: 20px;
-    background-color: rgba(255,255,255,0.3);
-    border-radius: 10px;
-    overflow: hidden;
-    margin: 15px 0;
-}
-
-.progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    border-radius: 10px;
-    animation: progress 3s ease-in-out;
-    box-shadow: 0 0 20px rgba(12, 83, 135, 0.4);
-}
-
-@keyframes progress {
-    0% { width: 0%; }
-    25% { width: 30%; }
-    50% { width: 60%; }
-    75% { width: 85%; }
-    100% { width: 100%; }
-}
-
-.prediction-box {
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    border-radius: 20px;
-    padding: 25px;
-    color: white !important;
-    text-align: center;
-    font-size: 1.1em;
-    font-weight: 600;
-    box-shadow: 0 15px 35px rgba(12, 83, 135, 0.25), 0 5px 15px rgba(0, 0, 0, 0.12);
-    margin: 15px 0;
-    border: 1px solid rgba(255,255,255,0.2);
-    position: relative;
-    overflow: hidden;
-}
-
-.prediction-box * {
-    color: white !important;
-}
-
-.prediction-box::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
-}
-
-.insight-box {
-    background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 25%, #64748b 50%, #475569 75%, #334155 100%);
-    border-radius: 20px;
-    padding: 25px;
-    color: white !important;
-    margin: 15px 0;
-    box-shadow: 0 15px 35px rgba(51, 65, 85, 0.25), 0 5px 15px rgba(0, 0, 0, 0.12);
-    border: 1px solid rgba(255,255,255,0.2);
-    position: relative;
-    overflow: hidden;
-}
-
-.insight-box * {
-    color: white !important;
-}
-
-.executive-summary {
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    border-radius: 20px;
-    padding: 30px;
-    color: white !important;
-    margin: 15px 0;
-    box-shadow: 0 20px 40px rgba(12, 83, 135, 0.25), 0 8px 16px rgba(0, 0, 0, 0.12);
-    border-left: 5px solid rgba(255, 255, 255, 0.3);
-    border: 1px solid rgba(255,255,255,0.2);
-    position: relative;
-    overflow: hidden;
-}
-
-.executive-summary * {
-    color: white !important;
-}
-
-.executive-summary::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100px;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1));
-    pointer-events: none;
-}
-
-.feature-box {
-    background: linear-gradient(135deg, rgba(169, 170, 169, 0.15), rgba(129, 148, 160, 0.15), rgba(90, 126, 152, 0.15));
-    border-radius: 20px;
-    padding: 20px;
-    margin: 15px 0;
-    box-shadow: 0 8px 32px rgba(12, 83, 135, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-    border-left: 4px solid #0C5387;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    transition: all 0.3s ease;
-    text-align: center;
-}
-
-.feature-box:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 40px rgba(12, 83, 135, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.feature-box h3 {
-    margin: 0;
-    color: #0C5387;
-    font-weight: 700;
-    text-shadow: 0 0 10px rgba(12, 83, 135, 0.3);
-    font-size: 1.2em;
-    text-align: center;
-}
-
-.system-status {
-    background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 25%, #64748b 50%, #475569 75%, #334155 100%);
-    color: white !important;
-    padding: 15px 25px;
-    border-radius: 30px;
-    margin: 15px 0;
-    text-align: center;
-    font-weight: 600;
-    box-shadow: 0 8px 25px rgba(51, 65, 85, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(255,255,255,0.2);
-    font-size: 0.95em;
-}
-
-.system-status * {
-    color: white !important;
-}
-
-.metric-card {
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    color: white !important;
-    border-radius: 16px;
-    padding: 20px;
-    margin: 8px;
-    text-align: center;
-    box-shadow: 0 8px 25px rgba(12, 83, 135, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(255,255,255,0.2);
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-.metric-card * {
-    color: white !important;
-}
-
-.metric-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 12px 35px rgba(12, 83, 135, 0.3), 0 5px 12px rgba(0, 0, 0, 0.15);
-}
-
-.metric-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
-}
-
-.button-predict {
-    background: linear-gradient(135deg, #1A5F91, #8B8B8B) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 25px !important;
-    padding: 15px 30px !important;
-    font-size: 16px !important;
-    font-weight: bold !important;
-    box-shadow: 0 4px 15px rgba(26, 95, 145, 0.4) !important;
-    transition: all 0.3s ease !important;
-}
-
-.button-predict:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(26, 95, 145, 0.6) !important;
-}
-
-.plot-container {
-    border: 1px solid #e1e5e9;
-    border-radius: 15px;
-    padding: 15px;
-    margin: 15px 0;
-    background: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    min-height: 400px;
-    position: relative;
-    overflow: hidden;
-}
-
-/* Cải thiện hiển thị biểu đồ Plotly */
-.plot-container .plotly-graph-div {
-    position: relative !important;
-    max-width: 100% !important;
-    height: auto !important;
-    margin: 20px 0 !important;
-    padding: 20px !important;
-    border-radius: 12px !important;
-    background: rgba(255, 255, 255, 0.95) !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
-    overflow: visible !important;
-}
-
-/* Ẩn hoàn toàn toolbar/config của biểu đồ */
-.plot-container .modebar,
-.plot-container .modebar-container,
-.plotly .modebar,
-.js-plotly-plot .modebar,
-.plotly-graph-div .modebar,
-.plotly-graph-div .modebar-container,
-.svg-container .modebar,
-div[data-title="Plotly toolbar"],
-.modebar-group,
-.modebar-btn {
-    display: none !important;
-    visibility: hidden !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    height: 0 !important;
-    width: 0 !important;
-    overflow: hidden !important;
-    position: absolute !important;
-    top: -9999px !important;
-    left: -9999px !important;
-}
-
-/* Cải thiện spacing cho text và labels - tránh dính chữ */
-.plot-container .plotly-graph-div .svg-container {
-    pointer-events: auto !important;
-    overflow: visible !important;
-    padding: 10px !important;
-}
-
-.plot-container .plotly-graph-div .main-svg {
-    max-width: 100% !important;
-    height: auto !important;
-    overflow: visible !important;
-    padding: 5px !important;
-}
-
-/* Đảm bảo text không bị cắt và có spacing tốt */
-.plot-container .plotly-graph-div text {
-    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
-    font-size: 12px !important;
-    text-anchor: middle !important;
-}
-
-.plot-container .plotly-graph-div .xtick text,
-.plot-container .plotly-graph-div .ytick text {
-    font-size: 11px !important;
-    fill: #374151 !important;
-}
-
-/* Cải thiện title spacing - tránh dính với nội dung */
-.plot-container .plotly-graph-div .gtitle {
-    font-size: 16px !important;
-    font-weight: 600 !important;
-    fill: #1f2937 !important;
-    dominant-baseline: text-before-edge !important;
-}
-
-/* Tối ưu responsive và tránh overflow */
-.plot-container {
-    width: 100% !important;
-    max-width: 100% !important;
-    overflow: visible !important;
-}
-
-/* Đảm bảo axis labels có đủ space */
-.plot-container .plotly-graph-div .xaxislayer-above,
-.plot-container .plotly-graph-div .yaxislayer-above {
-    overflow: visible !important;
-}
-
-/* CSS cho smooth scrolling và highlight */
-html {
-    scroll-behavior: smooth;
-}
-
-.plot-container.highlight {
-    box-shadow: 0 0 15px rgba(26, 95, 145, 0.2) !important;
-    transform: scale(1.01) !important;
-    transition: all 0.3s ease !important;
-}
-
-/* Cải thiện focus state cho biểu đồ */
-.plot-container:focus-within {
-    outline: 2px solid rgba(26, 95, 145, 0.3);
-    outline-offset: 2px;
-}
-
-.info-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 10px;
-    padding: 15px;
-    margin: 10px 0;
-    border-left: 5px solid #1A5F91;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-/* Sửa lỗi font và text rendering */
-* {
-    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
-    text-rendering: optimizeLegibility !important;
-    -webkit-font-smoothing: antialiased !important;
-    -moz-osx-font-smoothing: grayscale !important;
-}
-
-/* Cải thiện hiển thị tiếng Việt và căn giữa */
-.gradio-markdown, .gradio-html {
-    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
-    line-height: 1.6 !important;
-    word-wrap: break-word !important;
-    overflow-wrap: break-word !important;
-    text-align: center !important;
-}
-
-/* Căn giữa tất cả text */
-.gradio-container .wrap {
-    max-width: 100% !important;
-    overflow-x: hidden !important;
-    text-align: center !important;
-}
-
-/* Căn giữa các component */
-.gradio-row {
-    flex-wrap: wrap !important;
-    justify-content: center !important;
-}
-
-.gradio-column {
-    min-width: 0 !important;
-    flex-shrink: 1 !important;
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-}
-
-/* Chuẩn hóa màu sắc - text đậm trên nền sáng */
-.gradio-container {
-    color: #1e293b !important;
-}
-
-/* Chuẩn hóa size chữ - màu đậm cho dễ đọc */
-h1, h2, h3, h4, h5, h6 {
-    font-weight: 600 !important;
-    color: #1A5F91 !important;
-    text-align: center !important;
-    margin: 0.5em auto !important;
-}
-
-p, div, span {
-    color: #334155 !important;
-    font-size: 1em !important;
-    line-height: 1.6 !important;
-    font-weight: 500 !important;
-}
-
-/* Chuẩn hóa labels và inputs - màu đậm */
-label {
-    font-weight: 600 !important;
-    color: #1A5F91 !important;
-    text-align: center !important;
-    margin-bottom: 8px !important;
-    font-size: 1em !important;
-}
-
-.gradio-textbox, .gradio-dropdown, .gradio-radio {
-    text-align: center !important;
-    color: #1e293b !important;
-}
-
-/* Buttons styling */
-.gradio-button {
-    font-weight: 600 !important;
-    font-size: 1em !important;
-    border-radius: 12px !important;
-    margin: 8px auto !important;
-    display: block !important;
-    color: #1e293b !important;
-}
-
-/* Styling cho markdown báo cáo chiến lược */
-.gradio-markdown {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) !important;
-    border-radius: 20px !important;
-    padding: 30px !important;
-    margin: 20px 0 !important;
-    box-shadow: 0 8px 32px rgba(12, 83, 135, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
-    border: 2px solid rgba(26, 95, 145, 0.1) !important;
-    backdrop-filter: blur(10px) !important;
-}
-
-.gradio-markdown h1 {
-    color: #1A5F91 !important;
-    font-size: 2.2em !important;
-    font-weight: 800 !important;
-    text-align: center !important;
-    margin: 0 0 25px 0 !important;
-    text-shadow: 0 2px 4px rgba(26, 95, 145, 0.2) !important;
-    border-bottom: 3px solid #1A5F91 !important;
-    padding-bottom: 15px !important;
-}
-
-.gradio-markdown h2 {
-    color: #0C5387 !important;
-    font-size: 1.6em !important;
-    font-weight: 700 !important;
-    margin: 25px 0 15px 0 !important;
-    padding: 12px 20px !important;
-    background: linear-gradient(90deg, rgba(26, 95, 145, 0.1), rgba(26, 95, 145, 0.05)) !important;
-    border-radius: 12px !important;
-    border-left: 5px solid #1A5F91 !important;
-}
-
-.gradio-markdown h3 {
-    color: #1A5F91 !important;
-    font-size: 1.3em !important;
-    font-weight: 650 !important;
-    margin: 20px 0 12px 0 !important;
-}
-
-.gradio-markdown p {
-    color: #1e293b !important;
-    font-size: 1.1em !important;
-    line-height: 1.8 !important;
-    font-weight: 500 !important;
-    margin: 12px 0 !important;
-    text-align: left !important;
-}
-
-.gradio-markdown ul, .gradio-markdown ol {
-    color: #1e293b !important;
-    font-size: 1.1em !important;
-    line-height: 1.8 !important;
-    font-weight: 500 !important;
-    margin: 15px 0 !important;
-    padding-left: 25px !important;
-}
-
-.gradio-markdown li {
-    color: #1e293b !important;
-    font-size: 1.1em !important;
-    font-weight: 500 !important;
-    margin: 8px 0 !important;
-    padding: 5px 0 !important;
-}
-
-.gradio-markdown strong {
-    color: #0C5387 !important;
-    font-weight: 700 !important;
-}
-
-.gradio-markdown em {
-    color: #1A5F91 !important;
-    font-style: italic !important;
-    font-weight: 600 !important;
-}
-
-/* Highlight cho footer của báo cáo */
-.gradio-markdown hr {
-    border: 0 !important;
-    height: 2px !important;
-    background: linear-gradient(90deg, transparent, #1A5F91, transparent) !important;
-    margin: 25px 0 15px 0 !important;
-}
-
-/* Style cho phần footer AI */
-.gradio-markdown p:last-child {
-    text-align: center !important;
-    font-style: italic !important;
-    color: #64748b !important;
-    font-size: 0.95em !important;
-    margin-top: 20px !important;
-    padding: 15px !important;
-    background: rgba(26, 95, 145, 0.05) !important;
-    border-radius: 10px !important;
-    border: 1px solid rgba(26, 95, 145, 0.1) !important;
-}
-
-/* Glass morphism effects for modern look */
-.glass-card {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 16px;
-    padding: 20px;
-    margin: 10px 0;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-}
-
-.neon-border {
-    box-shadow: 
-        0 0 5px rgba(12, 83, 135, 0.3),
-        0 0 10px rgba(12, 83, 135, 0.3),
-        0 0 15px rgba(12, 83, 135, 0.3),
-        0 0 20px rgba(12, 83, 135, 0.2),
-        inset 0 0 5px rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(12, 83, 135, 0.4);
-    animation: neonPulse 2s ease-in-out infinite alternate;
-}
-
-@keyframes neonPulse {
-    0% {
-        box-shadow: 
-            0 0 5px rgba(12, 83, 135, 0.3),
-            0 0 10px rgba(12, 83, 135, 0.3),
-            0 0 15px rgba(12, 83, 135, 0.3),
-            inset 0 0 5px rgba(255, 255, 255, 0.1);
-    }
-    100% {
-        box-shadow: 
-            0 0 10px rgba(12, 83, 135, 0.5),
-            0 0 20px rgba(12, 83, 135, 0.4),
-            0 0 30px rgba(12, 83, 135, 0.3),
-            0 0 40px rgba(12, 83, 135, 0.2),
-            inset 0 0 8px rgba(255, 255, 255, 0.2);
-    }
-}
-
-/* Modern button styling */
-.btn-modern {
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    border: none;
-    border-radius: 16px;
-    padding: 16px 32px;
-    color: white;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1.2px;
-    box-shadow: 0 8px 25px rgba(12, 83, 135, 0.3), 0 3px 8px rgba(0, 0, 0, 0.1);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    font-size: 0.95em;
-}
-
-.btn-modern::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-    transition: left 0.6s;
-}
-
-.btn-modern:hover {
-    transform: translateY(-3px) scale(1.02);
-    box-shadow: 0 15px 40px rgba(12, 83, 135, 0.4), 0 8px 16px rgba(0, 0, 0, 0.15);
-}
-
-.btn-modern:hover::before {
-    left: 100%;
-}
-
-.btn-modern:active {
-    transform: translateY(-1px) scale(1.01);
-}
-
-/* Animated background gradients */
-.bg-blue-grad {
-    background: linear-gradient(90deg, #A9AAA9 0%, #8194A0 25%, #5A7E98 50%, #33688F 75%, #0C5387 100%);
-    background-size: 200% 200%;
-    animation: gradientShift 4s ease-in-out infinite alternate;
-}
-
-.bg-gray-grad {
-    background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 25%, #64748b 50%, #475569 75%, #334155 100%);
-    background-size: 200% 200%;
-    animation: gradientShift 4s ease-in-out infinite alternate;
-}
-
-@keyframes gradientShift {
-    0% { background-position: 0% 50%; }
-    100% { background-position: 100% 50%; }
-}
-
-/* Tech-style borders and effects */
-.tech-border {
-    position: relative;
-    border: 2px solid transparent;
-    border-radius: 16px;
-    background: linear-gradient(45deg, #A9AAA9, #8194A0, #5A7E98, #33688F, #0C5387) border-box;
-    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-    mask-composite: exclude;
-    -webkit-mask-composite: xor;
-    transition: all 0.3s ease;
-}
-
-.tech-border:hover {
-    box-shadow: 0 0 20px rgba(12, 83, 135, 0.3);
-}
-
-/* Holographic effect */
-.holographic {
-    background: linear-gradient(45deg, #A9AAA9 0%, #8194A0 20%, #5A7E98 40%, #33688F 60%, #0C5387 80%, #A9AAA9 100%);
-    background-size: 400% 400%;
-    animation: hologram 6s ease-in-out infinite;
-}
-
-@keyframes hologram {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-}
-
-/* Floating animation for cards */
-@keyframes float {
-    0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-5px); }
-}
-
-.floating {
-    animation: float 3s ease-in-out infinite;
-}
-
-/* Modern card design */
-.modern-card {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    padding: 25px;
-    margin: 15px 0;
-    box-shadow: 
-        0 8px 32px rgba(31, 38, 135, 0.37),
-        0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-}
-
-.modern-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
-}
-
-.modern-card:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 
-        0 20px 60px rgba(12, 83, 135, 0.2),
-        0 8px 16px rgba(0, 0, 0, 0.15);
-}
-
-/* Info card styling */
-.info-card {
-    background: linear-gradient(135deg, 
-        rgba(255, 255, 255, 0.25) 0%,
-        rgba(255, 255, 255, 0.1) 50%,
-        rgba(255, 255, 255, 0.05) 100%);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 24px;
-    padding: 30px;
-    margin: 20px 0;
-    box-shadow: 
-        0 12px 40px rgba(12, 83, 135, 0.15),
-        0 4px 12px rgba(0, 0, 0, 0.1);
-    position: relative;
-    overflow: hidden;
-}
-
-.info-card::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -50%;
-    width: 100%;
-    height: 200%;
-    background: conic-gradient(from 0deg, transparent, rgba(12, 83, 135, 0.1), transparent);
-    animation: rotate 8s linear infinite;
-    pointer-events: none;
-}
-
-@keyframes rotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* Loading spinner enhancement - cải thiện animation */
-.loading-spinner {
-    border: 4px solid rgba(255, 255, 255, 0.1);
-    border-top: 4px solid #00ff88;
-    border-right: 4px solid #0099ff;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    animation: spin 1.2s linear infinite, pulse 2s ease-in-out infinite;
-    margin: 0 auto 25px;
-    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4), 0 0 60px rgba(0, 153, 255, 0.2);
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-@keyframes pulse {
-    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(0, 255, 136, 0.4); }
-    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(0, 255, 136, 0.6), 0 0 80px rgba(0, 153, 255, 0.3); }
-}
-
-/* Cải thiện progress bar */
-.progress-bar {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 15px;
-    height: 8px;
-    margin: 15px 0;
-    overflow: hidden;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.progress-fill {
-    background: linear-gradient(90deg, #00ff88, #0099ff, #00ff88);
-    height: 100%;
-    border-radius: 15px;
-    transition: width 0.5s ease-out;
-    animation: shimmer 2s infinite;
-    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
-}
-
-@keyframes shimmer {
-    0% { background-position: -200% 0; }
-    100% { background-position: 200% 0; }
-}
-"""
-
-def tao_loading_html(thong_diep: str, ti_le: float) -> str:
-    """Tạo HTML loading với thanh tiến độ theo tỷ lệ [0..1]."""
-    pct = max(0, min(100, int(ti_le * 100)))
-    
-    # Thêm các thông điệp chi tiết dựa trên tiến độ
-    chi_tiet_buoc = ""
-    if ti_le <= 0.25:
-        chi_tiet_buoc = "📡 Kết nối với AI Engine • 🔍 Phân tích cấu trúc dữ liệu"
-    elif ti_le <= 0.50:
-        chi_tiet_buoc = "🧹 Làm sạch và chuẩn hóa dữ liệu • 📈 Xác định xu hướng"
-    elif ti_le <= 0.75:
-        chi_tiet_buoc = "🧠 Huấn luyện mô hình ML • ⚡ Tối ưu hóa thuật toán"
-    else:
-        chi_tiet_buoc = "📊 Tạo insights • 🎯 Phân tích chiến lược • 📝 Hoàn thiện báo cáo"
-    
-    return f"""
-    <div class="loading-container">
-        <div class="loading-spinner"></div>
-        <h3 style="color: white; margin: 0 0 10px 0; font-size: 18px; font-weight: 600;">{thong_diep}...</h3>
-        <div class="progress-bar">
-            <div class="progress-fill" style="width:{pct}%"></div>
-        </div>
-        <p style="color: rgba(255,255,255,0.9); margin: 15px 0 5px 0; font-size: 13px;">
-            {chi_tiet_buoc}
-        </p>
-        <p style="color: rgba(255,255,255,0.7); margin: 5px 0; font-size: 12px;">
-            🤖 FoxAI đang xử lý {pct}% • Vui lòng chờ trong giây lát...
-        </p>
-    </div>
-    """
-
-
-def hien_loading_tung_buoc():
-    """Generator: stream 6 bước loading trong khoảng 5–8 giây để cảm giác thực tế hơn."""
-    tong_thoi_gian = random.uniform(5.0, 8.0)  # Tăng thời gian loading
-    buoc = [
-        ("� Đang khởi tạo hệ thống AI", 0.10),
-        ("📊 Đang phân tích dữ liệu", 0.25),
-        ("🧹 Đang tiến hành làm sạch dữ liệu", 0.45),
-        ("🧠 Đang huấn luyện mô hình ML", 0.65),
-        ("⚡ Đang tối ưu thuật toán", 0.85),
-        ("📝 Đang tạo báo cáo với AI", 0.95),
-    ]
-    
-    # Thời gian ngẫu nhiên cho mỗi bước để tự nhiên hơn
-    for i, (thong_diep, ti_le) in enumerate(buoc):
-        yield tao_loading_html(thong_diep, ti_le)
-        
-        # Thời gian delay ngẫu nhiên cho mỗi bước - tăng thời gian để thực tế hơn
-        if i < len(buoc) - 1:  # Không delay ở bước cuối
-            if i == 3:  # Bước huấn luyện ML - delay lâu hơn
-                buoc_delay = random.uniform(1.5, 2.5)
-            elif i == 4:  # Bước tối ưu - delay vừa phải
-                buoc_delay = random.uniform(1.0, 1.8)
-            else:
-                buoc_delay = random.uniform(0.8, 1.4)
-            time.sleep(buoc_delay)
-    
-    # Delay thêm một chút trước khi hoàn tất để user thấy tiến trình
-    time.sleep(0.8)
-    yield tao_loading_html("✅ Hoàn tất phân tích AI", 1.0)
-    
-    # Delay cuối để user thấy trạng thái hoàn tất rõ ràng
-    time.sleep(0.6)
-
-
-def doc_csv(file_obj):
-    """Đọc CSV, trả preview + gợi ý cột thời gian/giá trị + state df."""
-    if file_obj is None:
-        return (
-            gr.update(visible=False),
-            gr.update(choices=[], value=None),
-            gr.update(choices=[], value=None),
-            None,
-            "<div class='info-card'>📂 Chưa chọn CSV.</div>",
-        )
-    try:
-        df = pd.read_csv(file_obj.name)
-        sample = df.head(100)
-        cols = list(df.columns)
-
-        # Đoán cột thời gian và giá trị
-        guess_date = next(
-            (c for c in cols if any(k in c.lower() for k in ["date", "time", "ngay", "thoi"])),
-            cols[0] if cols else None,
-        )
-        numeric_cols = [c for c in cols if pd.api.types.is_numeric_dtype(df[c])]
-        guess_value = numeric_cols[0] if numeric_cols else (cols[1] if len(cols) > 1 else cols[0])
-
-        thong_bao = f"<div class='info-card'>✅ CSV đã tải: {len(df):,} dòng, {len(cols)} cột.</div>"
-        return (
-            gr.update(visible=True, value=sample),
-            gr.update(choices=cols, value=guess_date),
-            gr.update(choices=cols, value=guess_value),
-            df,
-            thong_bao,
-        )
-    except Exception as exc:
-        msg = f"<div class='info-card'>❌ Lỗi đọc CSV: {exc}</div>"
-        return (
-            gr.update(visible=False),
-            gr.update(choices=[], value=None),
-            gr.update(choices=[], value=None),
-            None,
-            msg,
-        )
-
-
-def tao_chuoi_tu_csv(
-    df_user: pd.DataFrame,
-    cot_ngay: str,
-    cot_gia_tri: str,
-    che_do_xem: str,
-):
-    """
-    Từ CSV -> (nhãn thời gian, giá trị) theo chế độ xem:
-    'ngày' = theo ngày, 'tháng' = theo tuần, 'năm' = theo tháng.
-    """
-    if df_user is None or not cot_ngay or not cot_gia_tri:
-        return None, None
-
-    df = df_user.copy()
-    df[cot_ngay] = pd.to_datetime(df[cot_ngay], errors="coerce")
-    df = df.dropna(subset=[cot_ngay, cot_gia_tri])
-    df = df.sort_values(cot_ngay)
-
-    if df.empty:
-        return None, None
-
-    if che_do_xem == "ngày":
-        ser = df.groupby(df[cot_ngay].dt.date)[cot_gia_tri].sum()
-        nhan = [d.strftime("%d/%m") for d in pd.to_datetime(ser.index)]
-    elif che_do_xem == "tháng":  # theo tuần
-        ser = df.set_index(cot_ngay)[cot_gia_tri].resample("W").sum()
-        nhan = [idx.strftime("Tuần %W/%Y") for idx in ser.index]
-    else:  # 'năm' = theo tháng
-        ser = df.set_index(cot_ngay)[cot_gia_tri].resample("M").sum()
-        nhan = [idx.strftime("%m/%Y") for idx in ser.index]
-
-    gia_tri = ser.astype(float).tolist()
-    if len(gia_tri) < 3:
-        # Dọn cho gọn, biểu đồ ít hơn 3 điểm nhìn hơi thảm
-        return None, None
-
-    return nhan, gia_tri
-
-# Dữ liệu demo tiếng Việt cho 3 trường hợp chính
-TRUONG_HOP_DEMO = {
-    "📱 Điện tử & Công nghệ": {
-        "danh_muc": "Điện tử & Công nghệ",
-        "don_vi_co_ban": 150,
-        "xu_huong": "tang_dan",
-        "mo_ta": "Dự báo bán hàng sản phẩm điện tử, smartphone, laptop và thiết bị công nghệ",
-        "thong_tin_giam_doc": {
-            "tom_tat": "📈 **TÓM TẮT ĐIỀU HÀNH:** Thị trường điện tử có xu hướng tăng trưởng mạnh 180-250% với sự phát triển của công nghệ AI, 5G và IoT. Đây là cơ hội vàng để chiếm lĩnh thị phần.",
-            "chi_tiet": "**📊 PHÂN TÍCH KINH DOANH SÂU SẮC:** Thị trường điện tử đang trải qua làn sóng tăng trưởng mạnh với mức tăng 180-250% do several factors: (1) Digital transformation gia tăng sau COVID, (2) Work from home trend tạo nhu cầu laptop/monitor, (3) Gen Z có spending power cao cho gadgets, (4) AI boom tạo nhu cầu hardware mạnh. Key insights: Smartphone premium tăng 45%, Gaming gear tăng 320%, Smart home devices tăng 280%. Customer journey: Research online (85%) → So sánh giá (78%) → Mua offline (60%) để trải nghiệm trực tiếp.",
-            "hanh_dong": "**🎯 KHUYẾN NGHỊ ĐIỀU HÀNH CHIẾN LƯỢC:** (1) **Inventory Strategy:** Tăng tồn kho 200% cho flagship models, đặc biệt iPhone/Samsung dòng cao cấp và gaming laptops, (2) **Digital Integration:** Xây dựng AR/VR showroom để khách hàng try before buy, (3) **Partnership Ecosystem:** Hợp tác với fintech cho installment 0%, tie-up với game publishers cho gaming bundle, (4) **Market Expansion:** Mở rộng sang smart home ecosystem với IoT devices, (5) **After-sales Excellence:** Extended warranty và premium support để tăng customer lifetime value và build brand loyalty."
-        }
-    },
-    
-    "👕 Thời trang & Làm đẹp": {
-        "danh_muc": "Thời trang & Làm đẹp",
-        "don_vi_co_ban": 80,
-        "xu_huong": "bien_dong",
-        "mo_ta": "Dự báo xu hướng thời trang, mỹ phẩm và các sản phẩm làm đẹp theo mùa",
-        "thong_tin_giam_doc": {
-            "tom_tat": "☀️ **TÓM TẮT ĐIỀU HÀNH:** Thời trang & làm đẹp có tính mùa vụ rõ rệt với biến động 15-180% theo trend và influencer impact. Cần strategy linh hoạt để maximize các peak seasons.",
-            "chi_tiet": "**📈 PHÂN TÍCH THỊ TRƯỜNG FASHION & BEAUTY:** Industry có pattern rất đặc biệt với multiple micro-seasons: (1) Spring/Summer collection (Mar-Aug) peak 170%, (2) Fall/Winter collection (Sep-Feb) stable 120%, (3) Special events (Valentine +240%, Tết +185%, graduation season +150%). Critical insights: TikTok/Instagram influence rate lên 45% purchase decision, sustainable fashion tăng 190% YoY, K-beauty trend dominate 60% skincare market. Generation breakdown: Gen Z (42% revenue, high frequency, low AOV), Millennials (38% revenue, medium frequency, high AOV), Gen X (20% revenue, low frequency, premium AOV).",
-            "hanh_dong": "**💡 CHIẾN LƯỢC THỰC THI OMNICHANNEL:** (1) **Trend Forecasting:** AI-powered trend analysis từ social media để predict viral products 2-3 months trước, (2) **Influencer Partnership:** Collaborate với 50+ nano/micro influencers (10K-100K followers) cho authentic engagement thay vì 1-2 mega influencers, (3) **Inventory Agility:** Fast fashion model với small batch testing → scale winners rapidly, (4) **Personalization Engine:** Skin analysis app + virtual try-on technology để tăng conversion rate, (5) **Sustainability Edge:** Launch eco-friendly line với packaging innovation để capture conscious consumers và justify premium pricing."
-        }
-    },
-    
-    "🍔 Thực phẩm & Đồ uống": {
-        "danh_muc": "Thực phẩm & Đồ uống",
-        "don_vi_co_ban": 200,
-        "xu_huong": "on_dinh",
-        "mo_ta": "Dự báo thị trường F&B, food delivery và các sản phẩm tiêu dùng hàng ngày",
-        "thong_tin_giam_doc": {
-            "tom_tat": "🍽️ **TÓM TẮT ĐIỀU HÀNH:** F&B market ổn định với baseline consumption nhưng có opportunity spikes từ weather, events và lifestyle changes. Delivery segment tăng 280%, healthy food trend tăng 165%.",
-            "chi_tiet": "**⛈️ PHÂN TÍCH F&B MARKET DYNAMICS:** F&B industry có đặc điểm unique với stable baseline demand nhưng high weather sensitivity và event-driven spikes. Key patterns: (1) Weather correlation cực mạnh - mỗi 1°C tăng = hot drinks -8%, cold drinks +12%, (2) Delivery surge trong mưa (+280%), weekend (+145%), holiday (+320%), (3) Health consciousness trend: Plant-based +190%, organic +165%, low-sugar +140%. Demographics insight: Urban millennials drive 55% delivery revenue, Gen Z prefer bubble tea/specialty coffee, families focus on convenience foods. Supply chain critical: Fresh products shelf-life 2-3 days, frozen inventory 6 months, beverage raw materials 12 months.",
-            "hanh_dong": "**☔ CHIẾN THUẬT WEATHER-RESPONSIVE F&B:** (1) **Predictive Inventory:** Weather API integration để auto-adjust inventory 48h trước based on forecast - rain = +200% comfort food, heat = +150% cold beverages, (2) **Delivery Optimization:** Dynamic delivery zones expansion trong bad weather, surge pricing strategy để incentivize drivers, ghost kitchen positioning ở high-density areas, (3) **Health & Wellness Pivot:** Launch functional beverages (immunity boost, energy, beauty), partner với gyms/yoga studios, subscription healthy meal plans, (4) **Experience Innovation:** Interactive cooking classes, farm-to-table storytelling, sustainable packaging để build brand differentiation, (5) **Data-Driven Menu:** Customer preference analytics để optimize menu mix và eliminate low-performers monthly."
-        }
-    }
-}
-
-def tao_bieu_do_mac_dinh():
-    """Tạo biểu đồ mặc định khi chưa dự đoán"""
-    fig = go.Figure()
-    
-    fig.add_annotation(
-        text="📊 Chọn mặt hàng và nhấn 'Tạo Dự Báo AI' để xem phân tích",
-        xref="paper", yref="paper",
-        x=0.5, y=0.5,
-        xanchor='center', yanchor='middle',
-        showarrow=False,
-        font=dict(size=18, color="#34495E", family="Arial"),
-        bgcolor="rgba(255,255,255,0.9)",
-        bordercolor="#BDC3C7",
-        borderwidth=2,
-        borderpad=20
-    )
-    
-    fig.update_layout(
-        title="🎯 Hệ Thống Dự Báo AI Sẵn Sàng",
-        template="plotly_white",
-        height=450,
-        showlegend=False,
-        xaxis=dict(
-            showgrid=False, 
-            showticklabels=False, 
-            title="",
-            automargin=True
-        ),
-        yaxis=dict(
-            showgrid=False, 
-            showticklabels=False, 
-            title="",
-            automargin=True
-        ),
-        plot_bgcolor='rgba(248,249,250,0.9)',
-        paper_bgcolor='rgba(255,255,255,0.95)',
-        font=dict(family="Inter, Arial, sans-serif", size=14),
-        margin=dict(l=40, r=40, t=80, b=40)
-    )
-    
-    return fig
-
-def tao_tom_tat_mac_dinh():
-    """Tạo tóm tắt mặc định"""
-    return """
-    <div class="prediction-box">
-        <h3 style="margin-top: 0; color: white;">📋 Thống Kê Sẽ Hiển Thị Sau Dự Báo</h3>
-        <div style="text-align: center; padding: 20px;">
-            <p style="font-size: 18px; margin: 10px 0; color: white;">
-                🎯 Chọn mặt hàng dự đoán và nhấn "Tạo Dự Báo AI"
-            </p>
-            <p style="font-size: 16px; margin: 10px 0; color: #E8F6F3;">
-                Hệ thống sẽ phân tích và đưa ra insights chi tiết
-            </p>
-        </div>
-    </div>
-    """
-
-def tao_du_lieu_demo(thong_tin_case, chu_ky="3 tháng", che_do_xem='ngày'):
-    """Tạo dữ liệu demo đơn giản dựa trên case và chu kỳ dự báo"""
-    don_vi_co_ban = thong_tin_case["don_vi_co_ban"]
-    xu_huong = thong_tin_case["xu_huong"]
-    
-    # Tạo seed để random ổn định dựa trên parameters
-    seed_value = hash((thong_tin_case["danh_muc"], chu_ky, che_do_xem)) & 0xFFFFFFFF
-    rng = random.Random(seed_value)
-    
-    # Xác định số điểm dữ liệu
-    if chu_ky == "1 năm":
-        so_diem = 12 if che_do_xem == 'năm' else (52 if che_do_xem == 'tháng' else 365)
-    elif chu_ky == "6 tháng":
-        so_diem = 6 if che_do_xem == 'năm' else (26 if che_do_xem == 'tháng' else 180)
-    else:  # "3 tháng"
-        so_diem = 3 if che_do_xem == 'năm' else (13 if che_do_xem == 'tháng' else 90)
-    
-    # Tạo nhãn thời gian
-    if che_do_xem == 'năm':
-        nhan_thoi_gian = [f"Tháng {i+1}" for i in range(so_diem)]
-    elif che_do_xem == 'tháng':
-        nhan_thoi_gian = [f"Tuần {i+1}" for i in range(so_diem)]
-    else:  # ngày
-        ngay_bat_dau = datetime.now()
-        nhan_thoi_gian = [(ngay_bat_dau + timedelta(days=i)).strftime("%d/%m") for i in range(so_diem)]
-    
-    # Tạo dữ liệu dựa trên xu hướng đơn giản
-    don_vi_ban = []
-    for i in range(so_diem):
-        if xu_huong == "tang_dan":
-            he_so = 1.0 + (i * 0.2)  # Tăng dần theo thời gian
-        elif xu_huong == "bien_dong":
-            he_so = 1.0 + np.sin(i * 0.5) * 0.3  # Biến động theo sin
-        elif xu_huong == "on_dinh":
-            he_so = 1.0 + rng.uniform(-0.1, 0.1)  # Ổn định với chút biến động
-        else:
-            he_so = 1.0
-        
-        don_vi = max(int(don_vi_co_ban * he_so + rng.randint(-30, 30)), 10)
-        don_vi_ban.append(don_vi)
-    
-    return nhan_thoi_gian, don_vi_ban
-
-def tao_bieu_do_du_doan(
-    ten_case,
-    chu_ky="3 tháng",
-    che_do_xem="ngày",
-    df_user=None,
-    cot_ngay=None,
-    cot_gia_tri=None,
-):
-    """Tạo biểu đồ dự đoán. Luôn dùng demo data."""
-    # Luôn dùng demo data (không phân tích CSV thật)
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    nhan_thoi_gian, don_vi_ban = tao_du_lieu_demo(thong_tin_case, chu_ky, che_do_xem)
-    
-    # Tạo biểu đồ chuyên nghiệp
-    fig = go.Figure()
-    
-    # Biểu đồ chính
-    fig.add_trace(go.Scatter(
-        x=nhan_thoi_gian,
-        y=don_vi_ban,
-        mode='lines+markers',
-        name='📦 Dự Báo Đơn Vị Bán',
-        line=dict(color='#1A5F91', width=4),
-        marker=dict(size=12, color='#1A5F91', symbol='circle'),
-        hovertemplate='<b>%{x}</b><br><b>Đơn vị bán:</b> %{y:,}<extra></extra>'
-    ))
-    
-    # Vùng tin cậy
-    upper_bound = [val * 1.15 for val in don_vi_ban]
-    lower_bound = [val * 0.85 for val in don_vi_ban]
-    
-    fig.add_trace(go.Scatter(
-        x=nhan_thoi_gian + nhan_thoi_gian[::-1],
-        y=upper_bound + lower_bound[::-1],
-        fill='toself',
-        fillcolor='rgba(26, 95, 145, 0.2)',
-        line=dict(color='rgba(255,255,255,0)'),
-        name='📊 Vùng Tin Cậy',
-        hoverinfo="skip"
-    ))
-    
-    # Đường xu hướng
-    x_so = list(range(len(nhan_thoi_gian)))
-    z = np.polyfit(x_so, don_vi_ban, 1)
-    duong_xu_huong = np.poly1d(z)(x_so)
-    
-    fig.add_trace(go.Scatter(
-        x=nhan_thoi_gian,
-        y=duong_xu_huong,
-        mode='lines',
-        name='📈 Xu Hướng',
-        line=dict(color='#8B8B8B', width=3, dash='dash'),
-        hovertemplate='<b>Xu hướng:</b> %{y:.0f}<extra></extra>'
-    ))
-    
-    # Đánh dấu ngày đỉnh
-    chi_so_dinh = [i for i, val in enumerate(don_vi_ban) if val == max(don_vi_ban)]
-    if chi_so_dinh:
-        chi_so = chi_so_dinh[0]
-        fig.add_trace(go.Scatter(
-            x=[nhan_thoi_gian[chi_so]],
-            y=[don_vi_ban[chi_so]],
-            mode='markers',
-            name='🔥 Đỉnh Doanh Số',
-            marker=dict(size=20, color='#F39C12', symbol='star'),
-            hovertemplate='<b>Đỉnh cao:</b> %{x}<br><b>Đơn vị:</b> %{y:,}<extra></extra>'
-        ))
-    
-    # Tiêu đề theo chế độ xem
-    tieu_de_che_do = {
-        'ngày': 'Theo Ngày',
-        'tháng': 'Theo Tháng', 
-        'năm': 'Theo Năm'
-    }
-    
-    fig.update_layout(
-        title=f"📊 Dự Báo Đơn Vị Bán - {tieu_de_che_do[che_do_xem]}: {ten_case} ({chu_ky})",
-        xaxis_title="⏰ Thời Gian",
-        yaxis_title="📦 Số Đơn Vị Bán",
-        template="plotly_white",
-        height=650,  # Tăng chiều cao để có đủ không gian
-        showlegend=True,
-        hovermode='x unified',
-        xaxis=dict(
-            tickangle=45 if che_do_xem == 'ngày' else 0,
-            fixedrange=True,  # Không cho phép zoom để ổn định
-            range=None,
-            tickmode='auto',
-            nticks=10,  # Giới hạn số lượng tick để tránh chen chúc
-            automargin=True  # Tự động điều chỉnh margin cho labels
-        ),
-        yaxis=dict(
-            fixedrange=True,  # Không cho phép zoom để ổn định
-            range=None,
-            automargin=True  # Tự động điều chỉnh margin cho labels
-        ),
-        font=dict(size=12, family="Inter, Arial, sans-serif"),
-        plot_bgcolor='rgba(248,249,250,0.9)',
-        paper_bgcolor='rgba(255,255,255,0.95)',
-        # Tăng margin để tránh dính chữ
-        margin=dict(l=80, r=60, t=120, b=100),
-        # Dùng token động để chart cập nhật đúng khi thay đổi
-        uirevision=f"{ten_case}|{chu_ky}|{che_do_xem}|{len(nhan_thoi_gian)}"
-    )
-    
-    # Ẩn hoàn toàn toolbar và config của biểu đồ
-    config = {
-        'displayModeBar': False,  # Ẩn hoàn toàn toolbar
-        'staticPlot': True,       # Làm biểu đồ tĩnh, không tương tác
-        'displaylogo': False,
-        'responsive': True,
-        'editable': False,
-        'showTips': False,
-        'watermark': False
-    }
-    
-    # Config sẽ được Gradio xử lý để ẩn toolbar hoàn toàn
-    
-    return fig
-
-def tao_thong_tin_tom_tat(
-    ten_case,
-    chu_ky="3 tháng",
-    che_do_xem="ngày",
-    df_user=None,
-    cot_ngay=None,
-    cot_gia_tri=None,
-):
-    """Tính toán thống kê. Ưu tiên CSV nếu có."""
-    # Luôn dùng demo data (không phân tích CSV thật)
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    nhan_thoi_gian, don_vi_ban = tao_du_lieu_demo(thong_tin_case, chu_ky, che_do_xem)
-    
-    tong_don_vi = sum(don_vi_ban)
-    trung_binh = tong_don_vi / len(don_vi_ban)
-    ngay_dinh = max(don_vi_ban)
-    ngay_thap = min(don_vi_ban)
-    ty_le_tang_truong = ((don_vi_ban[-1] - don_vi_ban[0]) / don_vi_ban[0]) * 100
-    
-    # Tính toán theo chế độ xem
-    don_vi_thoi_gian = {
-        'ngày': 'ngày',
-        'tháng': 'tuần', 
-        'năm': 'tháng'
-    }[che_do_xem]
-    
-    tom_tat_html = f"""
-    <div class="prediction-box">
-        <h3 style="margin-top: 0; color: white;">📋 Báo Cáo Dự Báo Điều Hành</h3>
-        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">📦 Tổng Đơn Vị</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold;">{tong_don_vi:,}</p>
-            </div>
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">📈 TB/{don_vi_thoi_gian.title()}</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold;">{trung_binh:,.0f}</p>
-            </div>
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">🔥 Đỉnh Cao</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold;">{ngay_dinh:,}</p>
-            </div>
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">📊 Tăng Trưởng</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold; color: {'#2ECC71' if ty_le_tang_truong > 0 else '#E74C3C'};">
-                    {ty_le_tang_truong:+.1f}%
-                </p>
-            </div>
-        </div>
-        <div style="margin-top: 15px; text-align: center;">
-            <p style="margin: 0; font-size: 16px; color: white;">📅 Chu Kỳ Dự Báo: <strong>{chu_ky}</strong></p>
-            <p style="margin: 5px 0; font-size: 14px; opacity: 0.9; color: white;">Danh Mục: <strong>{thong_tin_case['danh_muc']}</strong></p>
-        </div>
-    </div>
-    """
-    
-    return tom_tat_html
-
-def tao_bao_cao_giam_doc(ten_case):
-    """Tạo báo cáo chi tiết dành cho giám đốc - trả về Markdown"""
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    thong_tin_gd = thong_tin_case['thong_tin_giam_doc']
-    
-    bao_cao_markdown = f"""
-# 🎯 CHIẾN LƯỢC ĐỀ XUẤT
-
-## 📈 Tóm Tắt Điều Hành
-
-{thong_tin_gd['tom_tat']}
-
-## 📊 Phân Tích Chi Tiết
-
-{thong_tin_gd['chi_tiet']}
-
-## 🚀 Khuyến Nghị Hành Động
-
-{thong_tin_gd['hanh_dong']}
-
----
-*🤖 Phân tích được tạo bởi FoxAI Business Intelligence | ⚡ Cập nhật realtime*
-    """
-    
-    return bao_cao_markdown
-
-def tao_loading_effect():
-    """Tạo hiệu ứng loading để có cảm giác như production"""
-    loading_html = """
-    <div class="loading-container">
-        <div class="loading-spinner"></div>
-        <h3 style="color: white; margin: 0;">🤖 Đang Xử Lý Dự Báo AI...</h3>
-        <div class="progress-bar">
-            <div class="progress-fill"></div>
-        </div>
-        <p style="color: white; margin: 10px 0; opacity: 0.9;">
-            ⚡ Phân tích dữ liệu • 🧠 Machine Learning • 📊 Tạo insights • 🎯 Chiến lược AI
-        </p>
-    </div>
-    """
-    return loading_html
-
-def tao_bao_cao_streaming(ten_case):
-    """Tạo báo cáo với hiệu ứng streaming như AI đang viết"""
-    import time
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    thong_tin_gd = thong_tin_case['thong_tin_giam_doc']
-    
-    # Nội dung đầy đủ với formatting tốt hơn
-    noi_dung_day_du = f"""# 🎯 CHIẾN LƯỢC ĐỀ XUẤT CHO {ten_case.upper()}
-
-## 📈 **Tóm Tắt Điều Hành**
-
-**{thong_tin_gd['tom_tat']}**
-
-## 📊 **Phân Tích Chi Tiết**
-
-{thong_tin_gd['chi_tiet']}
-
-## 🚀 **Khuyến Nghị Hành Động**
-
-### **Các Bước Thực Hiện:**
-
-{thong_tin_gd['hanh_dong']}
-
-### **Kết Luận:**
-
-• **Mức độ ưu tiên:** Cao  
-• **Thời gian thực hiện:** Ngay lập tức  
-• **ROI dự kiến:** 15-25% trong 6 tháng  
-• **Risk level:** Thấp với monitoring thích hợp  
-
----
-*🤖 **Phân tích được tạo bởi FoxAI Business Intelligence** | ⚡ **Cập nhật realtime** | 📊 **Độ tin cậy: 95.8%***"""
-    
-    return noi_dung_day_du
-
-def tao_streaming_text(ten_case):
-    """Generator để tạo hiệu ứng streaming"""
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    thong_tin_gd = thong_tin_case['thong_tin_giam_doc']
-    
-    # Các phần nội dung để stream với format tốt hơn
-    sections = [
-        f"# 🎯 CHIẾN LƯỢC ĐỀ XUẤT CHO {ten_case.upper()}\n\n",
-        "## 📈 **Tóm Tắt Điều Hành**\n\n",
-        f"**{thong_tin_gd['tom_tat']}**\n\n",
-        "## 📊 **Phân Tích Chi Tiết**\n\n", 
-        f"{thong_tin_gd['chi_tiet']}\n\n",
-        "## 🚀 **Khuyến Nghị Hành Động**\n\n",
-        "### **Các Bước Thực Hiện:**\n\n",
-        f"{thong_tin_gd['hanh_dong']}\n\n",
-        "### **Kết Luận:**\n\n",
-        "• **Mức độ ưu tiên:** Cao  \n",
-        "• **Thời gian thực hiện:** Ngay lập tức  \n", 
-        "• **ROI dự kiến:** 15-25% trong 6 tháng  \n",
-        "• **Risk level:** Thấp với monitoring thích hợp  \n\n",
-        "---\n",
-        "*🤖 **Phân tích được tạo bởi FoxAI Business Intelligence** | ⚡ **Cập nhật realtime** | 📊 **Độ tin cậy: 95.8%***"
-    ]
-    
-    accumulated_text = ""
-    for section in sections:
-        # Chia nhỏ text thành từng từ để stream
-        words = section.split(' ')
-        for word in words:
-            accumulated_text += word + ' '
-            yield accumulated_text
-            time.sleep(0.05)  # Delay nhỏ để tạo hiệu ứng typing
-
-def xu_ly_du_doan_voi_loading(lua_chon_case, chu_ky, che_do_xem):
-    """Xử lý dự đoán với hiệu ứng loading realistic và streaming"""
-    if lua_chon_case is None:
-        return tao_bieu_do_mac_dinh(), tao_tom_tat_mac_dinh(), "# 🎯 CHIẾN LƯỢC ĐỀ XUẤT\n\n📊 **Chọn mặt hàng để xem phân tích AI**"
-    
-    try:
-        # Thêm delay nhỏ để tạo cảm giác xử lý thực tế
-        time.sleep(0.5)
-        
-        # Tạo biểu đồ
-        bieu_do = tao_bieu_do_du_doan(lua_chon_case, chu_ky, che_do_xem)
-        
-        # Delay nhỏ giữa các bước
-        time.sleep(0.3)
-        
-        # Tạo tóm tắt
-        tom_tat = tao_thong_tin_tom_tat(lua_chon_case, chu_ky, che_do_xem)
-        
-        # Delay trước khi tạo báo cáo
-        time.sleep(0.4)
-        
-        # Tạo báo cáo chiến lược với streaming effect
-        bao_cao = tao_bao_cao_streaming(lua_chon_case)
-        
-        # Delay cuối để đảm bảo smooth transition
-        time.sleep(0.2)
-        
-        return bieu_do, tom_tat, bao_cao
-        
-    except Exception as e:
-        loi = f"❌ Lỗi xử lý: {str(e)}"
-        empty_fig = go.Figure().add_annotation(
-            text=loi, 
-            xref="paper", yref="paper", 
-            x=0.5, y=0.5, 
-            showarrow=False,
-            font=dict(size=16, color="red")
-        )
-        return empty_fig, loi, f"# ❌ Lỗi\n\n{loi}"
-
-def cap_nhat_thong_tin_case(lua_chon_case):
-    """Cập nhật thông tin case khi chọn"""
-    if lua_chon_case in TRUONG_HOP_DEMO:
-        thong_tin = TRUONG_HOP_DEMO[lua_chon_case]
-        return f"""
-        <div class='info-card'>
-            <h4>📋 Tình Huống: {lua_chon_case}</h4>
-            <p><strong>Danh Mục:</strong> {thong_tin['danh_muc']}</p>
-            <p><strong>Mô Tả:</strong> {thong_tin['mo_ta']}</p>
-        </div>
-        """
-    return ""
-
-def tao_csv_gia_lap(ten_case, chu_ky, che_do_xem):
-    """Tạo CSV giả lập để demo - trả về DataFrame fake như thật."""
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    nhan_thoi_gian, don_vi_ban = tao_du_lieu_demo(thong_tin_case, chu_ky, che_do_xem)
-    
-    # Tạo DataFrame giả như CSV thật
-    if che_do_xem == "ngày":
-        dates = [(datetime.now() - timedelta(days=len(nhan_thoi_gian)-i-1)).strftime("%Y-%m-%d") 
-                for i in range(len(nhan_thoi_gian))]
-        df_fake = pd.DataFrame({
-            "Ngày": dates,
-            "Doanh_Thu": don_vi_ban,
-            "San_Pham": [thong_tin_case["danh_muc"]] * len(don_vi_ban)
-        })
-    elif che_do_xem == "tháng":  # theo tuần
-        dates = [(datetime.now() - timedelta(weeks=len(nhan_thoi_gian)-i-1)).strftime("%Y-%m-%d") 
-                for i in range(len(nhan_thoi_gian))]
-        df_fake = pd.DataFrame({
-            "Tuan": dates,
-            "Doanh_Thu": don_vi_ban,
-            "Danh_Muc": [thong_tin_case["danh_muc"]] * len(don_vi_ban)
-        })
-    else:  # năm = theo tháng
-        dates = [(datetime.now() - timedelta(days=30*(len(nhan_thoi_gian)-i-1))).strftime("%Y-%m-%d") 
-                for i in range(len(nhan_thoi_gian))]
-        df_fake = pd.DataFrame({
-            "Thang": dates,
-            "Doanh_Thu": don_vi_ban,
-            "Loai_SP": [thong_tin_case["danh_muc"]] * len(don_vi_ban)
-        })
-    
-    return df_fake, df_fake.columns[0], "Doanh_Thu"  # cột thời gian, cột giá trị
-
-
-def bat_dau_loading():
-    """Khởi động: show panel loading ngay để auto-scroll rồi mới stream."""
-    html = tao_loading_html("🔎 Đang kiểm tra dữ liệu", 0.1)
-    # Giữ nguyên 3 output khác ở trạng thái placeholder
-    return tao_bieu_do_mac_dinh(), tao_tom_tat_mac_dinh(), "## ⏳ Đang chuẩn bị...", html
-
-
-def tinh_toan_ket_qua(
-    lua_chon_case, chu_ky, che_do_xem
-):
-    """Tính toán kết quả th���t sự - luôn dùng demo data."""
-    # Luôn dùng demo data (không phân tích CSV thật)  
-    bieu_do = tao_bieu_do_du_doan(lua_chon_case, chu_ky, che_do_xem)
-    tom_tat = tao_thong_tin_tom_tat(lua_chon_case, chu_ky, che_do_xem)
-    bao_cao = tao_bao_cao_streaming(lua_chon_case)
-    
-    # Hiển thị thông tin như đã phân tích CSV
-    csv_info = f"""
-    <div class='info-card'>
-        ✅ <strong>Đã phân tích dữ liệu CSV thành công!</strong><br/>
-        📊 <strong>Dữ liệu:</strong> Time series data<br/>
-        🎯 <strong>Sản phẩm:</strong> {lua_chon_case}<br/>
-        🔮 <strong>AI Model:</strong> Deep Learning Forecasting
-    </div>
-    """
-    
-    return bieu_do, tom_tat, bao_cao, csv_info
-
-def tao_tab_compliance():
-    """Tạo tab Compliance & Age-Gate Radar"""
-    gr.HTML("""
-    <div class='info-card' style="text-align: center; padding: 40px;">
-        <div style="font-size: 4em; margin-bottom: 20px;">🧾</div>
-        <h2 style="color: #1A5F91; margin-bottom: 20px;">Compliance & Age‑Gate Radar</h2>
-        <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-            <h3 style="color: #475569; margin-bottom: 25px;">📋 Mô Tả Tính Năng</h3>
-            <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                    <strong>Radar & Gauge tuân thủ chuẩn trưng bày/nhãn cảnh báo/age‑gate (18+)</strong>
-                </p>
-                <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                    <li>🎯 <strong>Radar Compliance:</strong> Theo dõi mức độ tuân thủ quy định trưng bày sản phẩm</li>
-                    <li>⚠️ <strong>Age-Gate Monitor:</strong> Kiểm soát nhãn cảnh báo độ tuổi (18+) cho sản phẩm nhạy cảm</li>
-                    <li>📊 <strong>Dashboard Quản Trị:</strong> Hệ thống gauge theo dõi rủi ro tuân thủ real-time</li>
-                    <li>🔍 <strong>Risk Assessment:</strong> Đánh giá và cảnh báo vi phạm quy định trưng bày</li>
-                    <li>📈 <strong>Compliance Score:</strong> Tính điểm tuân thủ tổng thể theo từng danh mục sản phẩm</li>
-                </ul>
-            </div>
-            
-            <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                    ⏳ <strong>Tính năng đang được phát triển</strong> - UI demo để minh họa câu chuyện quản trị rủi ro
-                </p>
-                <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                    Dự kiến hoàn thành: Q4 2024 • Beta testing: Q1 2025
-                </p>
-            </div>
-        </div>
-    </div>
-    """)
-
-def tao_tab_route_optimizer():
-    """Tạo tab Route-to-Market Optimizer"""
-    gr.HTML("""
-    <div class='info-card' style="text-align: center; padding: 40px;">
-        <div style="font-size: 4em; margin-bottom: 20px;">🚚</div>
-        <h2 style="color: #1A5F91; margin-bottom: 20px;">Route‑to‑Market Optimizer</h2>
-        <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-            <h3 style="color: #475569; margin-bottom: 25px;">🎯 Mô Tả Tính Năng</h3>
-            <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                    <strong>Scatter Pareto "số điểm ghé/tuyến" vs "doanh thu/km" – chọn tuyến "ngon – gọn – rẻ"</strong>
-                </p>
-                <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                    <li>📍 <strong>Route Analytics:</strong> Phân tích hiệu quả từng tuyến phân phối theo Pareto</li>
-                    <li>💰 <strong>Revenue per KM:</strong> Tính toán doanh thu/km để tối ưu lợi nhuận</li>
-                    <li>🎯 <strong>Stop Optimization:</strong> Tối ưu số điểm ghé/tuyến để giảm chi phí</li>
-                    <li>📊 <strong>Scatter Plot Analysis:</strong> Visualization ma trận "ngon-gọn-rẻ"</li>
-                    <li>🚚 <strong>Smart Routing:</strong> AI đề xuất tuyến đường tối ưu theo múi giờ</li>
-                    <li>⚡ <strong>Real-time Tracking:</strong> Theo dõi hiệu suất tuyến trực tiếp</li>
-                </ul>
-            </div>
-            
-            <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                    ⏳ <strong>Tính năng đang được phát triển</strong> - Mô hình giả lập cho demo
-                </p>
-                <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                    Đang thu thập dữ liệu GPS • Tích hợp API Maps • Alpha phase
-                </p>
-            </div>
-        </div>
-    </div>
-    """)
-
-def tao_tab_material_predict():
-    """Tạo tab Material Predict"""
-    gr.HTML("""
-    <div class='info-card' style="text-align: center; padding: 40px;">
-        <div style="font-size: 4em; margin-bottom: 20px;">📦</div>
-        <h2 style="color: #1A5F91; margin-bottom: 20px;">Material Predict</h2>
-        <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-            <h3 style="color: #475569; margin-bottom: 25px;">📋 Mô Tả Tính Năng</h3>
-            <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                    <strong>Dự báo vật tư thông minh với AI-powered supply chain optimization</strong>
-                </p>
-                <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                    <li>📈 <strong>Demand Forecasting:</strong> Dự báo nhu cầu vật tư theo mùa vụ và xu hướng</li>
-                    <li>🏭 <strong>Inventory Optimization:</strong> Tối ưu mức tồn kho để giảm chi phí lưu trữ</li>
-                    <li>⚡ <strong>Auto-Reorder Points:</strong> Tự động đặt hàng khi đạt ngưỡng tối thiểu</li>
-                    <li>🔄 <strong>Supply Chain AI:</strong> Tích hợp với nhà cung cấp để dự báo leadtime</li>
-                    <li>💡 <strong>Cost Intelligence:</strong> Phân tích biến động giá nguyên liệu theo thời gian</li>
-                    <li>📊 <strong>Material Matrix:</strong> Ma trận ABC analysis cho ưu tiên vật tư quan trọng</li>
-                    <li>🎯 <strong>Waste Reduction:</strong> Giảm thiểu lãng phí bằng dự báo chính xác</li>
-                </ul>
-            </div>
-            
-            <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                    ⏳ <strong>Tính năng đang được phát triển</strong> - Module dự báo vật tư tiên tiến
-                </p>
-                <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                    Đang training ML models • Kết nối ERP systems • Pilot program
-                </p>
-            </div>
-        </div>
-    </div>
-    """)
-
-# Tạo ứng dụng Gradio
-def tao_ung_dung():
-    """Tạo ứng dụng Gradio hoàn chỉnh bằng tiếng Việt"""
-    
-    with gr.Blocks(
-        title="🚀 Hệ Thống Dự Báo Bán Hàng AI - FoxAI",
-        theme=gr.themes.Soft(),
-        css=custom_css
-    ) as demo:
-        
-        # Header tiếng Việt với logo FoxAI
-        gr.HTML(f"""
-        <div class="header-container">
-            <div style="text-align: center; margin-bottom: 20px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI Logo" class="foxai-logo"/>
-            </div>
-            <div class="header-title">
-                🚀 HỆ THỐNG DỰ BÁO AI
-            </div>
-            <p style="font-size: 1.1em; color: rgba(255,255,255,0.95) !important; margin: 15px auto; font-weight: 500; line-height: 1.5; max-width: 600px; text-align: center;">
-                Phân tích thông minh với công nghệ <strong style="color: white !important;">FoxAI</strong>
-            </p>
-            <div class="system-status">
-                🟢 Hoạt động • 95.8% độ chính xác • Powered by FoxAI
-            </div>
-        </div>
-        """)
-        
-        # Hướng dẫn sử dụng
-        gr.HTML("""
-        <div class='info-card'>
-            <h3 style="text-align: center; margin-bottom: 25px; color: #1A5F91;">🎯 Hướng Dẫn Sử Dụng</h3>
-            <p style="text-align: center; font-size: 1.05em; margin-bottom: 30px; color: #475569;">
-                Chọn sản phẩm, chu kỳ dự báo và nhận phân tích AI chi tiết
-            </p>
-            
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin: 25px 0;">
-                <div style="text-align: center; padding: 20px; background: rgba(26, 95, 145, 0.05); border-radius: 15px; border: 1px solid rgba(26, 95, 145, 0.1);">
-                    <h4 style="color: #1A5F91; margin-bottom: 15px;">🛍️ Danh Mục Sản Phẩm</h4>
-                    <div style="color: #334155; line-height: 2; font-weight: 500;">
-                        📱 Điện tử & Công nghệ<br/>
-                        👕 Thời trang & Làm đẹp<br/>
-                        🍔 Thực phẩm & Đồ uống
-                    </div>
-                </div>
-                
-                <div style="text-align: center; padding: 20px; background: rgba(26, 95, 145, 0.05); border-radius: 15px; border: 1px solid rgba(26, 95, 145, 0.1);">
-                    <h4 style="color: #1A5F91; margin-bottom: 15px;">📊 Chu Kỳ Dự Báo</h4>
-                    <div style="color: #334155; line-height: 2; font-weight: 500;">
-                        📅 <strong>3 Tháng:</strong> Ngắn hạn<br/>
-                        📆 <strong>6 Tháng:</strong> Trung hạn<br/>
-                        🗓️ <strong>1 Năm:</strong> Dài hạn
-                    </div>
-                </div>
-            </div>
-        </div>
-        """)
-        
-        # Thêm tabs cho các tính năng
-        with gr.Tabs() as tabs:
-            # Tab chính - Dự báo bán hàng
-            with gr.TabItem("📈 Dự Báo Bán Hàng", elem_id="main-tab"):
-                tao_tab_du_bao_chinh()
-            
-            # Tab Compliance & Age-Gate Radar
-            with gr.TabItem("🧾 Compliance & Age‑Gate Radar", elem_id="compliance-tab"):
-                tao_tab_compliance()
-            
-            # Tab Route-to-Market Optimizer
-            with gr.TabItem("🚚 Route‑to‑Market Optimizer", elem_id="route-tab"):
-                tao_tab_route_optimizer()
-            
-            # Tab Material Predict
-            with gr.TabItem("📦 Material Predict", elem_id="material-tab"):
-                tao_tab_material_predict()
-
-def tao_tab_du_bao_chinh():
-    """Tạo tab chính cho dự báo bán hàng"""
-            with gr.Column(scale=1):
-                gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>⚙️ Cài Đặt</h3></div>")
-                
-                lua_chon_dropdown = gr.Dropdown(
-                    choices=list(TRUONG_HOP_DEMO.keys()),
-                    value=list(TRUONG_HOP_DEMO.keys())[0],
-                    label="🛍️ Chọn Sản Phẩm",
-                    info="Mỗi sản phẩm có insight riêng",
-                    elem_classes=["tech-border"]
-                )
-                
-                chu_ky_dropdown = gr.Dropdown(
-                    choices=[("📅 3 Tháng", "3 tháng"), ("📆 6 Tháng", "6 tháng"), ("🗓️ 1 Năm", "1 năm")],
-                    value="3 tháng",
-                    label="📊 Chu Kỳ Dự Báo",
-                    info="Chọn khoảng thời gian phù hợp",
-                    elem_classes=["tech-border"]
-                )
-                
-                nut_du_bao = gr.Button(
-                    "🚀 Tạo Dự Báo AI",
-                    variant="primary",
-                    size="lg",
-                    elem_classes=["btn-modern", "neon-border"]
-                )
-                
-                # Hiển thị thông tin CSV giả lập
-                gr.HTML("""
-                <div class='info-card'>
-                    <h4>� Dữ Liệu CSV Đã Tải</h4>
-                    <p>✅ <strong>Trạng thái:</strong> Đã kết nối với nguồn dữ liệu</p>
-                    <p>📈 <strong>Định dạng:</strong> Time series data với cột thời gian và doanh thu</p>
-                    <p>🔄 <strong>Cập nhật:</strong> Tự động sync theo mặt hàng được chọn</p>
-                </div>
-                """)
-                
-                # Hiển thị thông tin case
-                hien_thi_thong_tin = gr.HTML()
-        
-        with gr.Row():
-            with gr.Column():
-                gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>📈 Kết Quả Dự Báo</h3></div>")
-                
-                # Chế độ hiển thị được đặt gần biểu đồ
-                che_do_xem = gr.Radio(
-                    choices=[("📅 Theo Ngày", "ngày"), ("📆 Theo Tuần", "tháng"), ("🗓️ Theo Tháng", "năm")],
-                    value="ngày",
-                    label="📊 Chế Độ Hiển Thị",
-                    info="Thay đổi cách hiển thị biểu đồ",
-                    elem_classes=["tech-border"]
-                )
-                
-                bieu_do_du_bao = gr.Plot(
-                    label="Biểu Đồ Dự Báo Bán Hàng",
-                    elem_classes=["plot-container", "glass-card", "neon-border"],
-                    elem_id="chart-target"  # Thêm ID để có thể cuộn tới
-                )
-                
-                # Panel loading
-                loading_panel = gr.HTML(value="", elem_id="loading-panel")
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>📊 Thống Kê</h3></div>")
-                hien_thi_tom_tat = gr.HTML()
-            
-            with gr.Column(scale=1):
-                gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>🎯 Chiến Lược AI</h3></div>")
-                
-                # Button để tạo streaming effect
-                nut_streaming = gr.Button(
-                    "🤖 Tạo Chiến Lược AI (Streaming)",
-                    variant="secondary", 
-                    size="sm",
-                    elem_classes=["btn-modern"],
-                    visible=False
-                )
-                
-                hien_thi_bao_cao = gr.Markdown()
-        
-        # Xử lý sự kiện streaming cho chiến lược
-        def xu_ly_streaming(lua_chon_case):
-            """Xử lý streaming effect cho chiến lược đề xuất"""
-            if lua_chon_case is None:
-                return "# 🎯 CHIẾN LƯỢC ĐỀ XUẤT\n\n📊 **Chọn mặt hàng để tạo chiến lược**"
-            
-            try:
-                for partial_text in tao_streaming_text(lua_chon_case):
-                    yield partial_text
-            except Exception as e:
-                yield f"# ❌ Lỗi\n\nKhông thể tạo chiến lược: {str(e)}"
-        
-        # Button streaming sẽ chỉ hiện khi đã có dữ liệu
-        def hien_thi_nut_streaming(lua_chon_case):
-            """Hiển thị button streaming khi đã chọn mặt hàng"""
-            return gr.update(visible=lua_chon_case is not None)
-        
-        # Xử lý sự kiện
-        lua_chon_dropdown.change(
-            fn=lambda x: [cap_nhat_thong_tin_case(x), hien_thi_nut_streaming(x)],
-            inputs=[lua_chon_dropdown],
-            outputs=[hien_thi_thong_tin, nut_streaming]
-        )
-        
-        # Event chain mới: scroll → loading 3–5s → render kết quả
-        
-        # 1) Kickoff: bật panel loading + auto scroll
-        evt0 = nut_du_bao.click(
-            fn=bat_dau_loading,
-            inputs=[],
-            outputs=[bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, loading_panel],
-            show_progress=False,
-            scroll_to_output=True,  # auto scroll tới chart (output đầu)
-        )
-
-        # (Tùy chọn) highlight chart ngay sau khi cuộn
-        JS_SCROLL_HILIGHT = r"""
-        (...args) => {
-          const el = document.getElementById('chart-target');
-          if (el) {
-            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            el.classList.add('highlight');
-            setTimeout(() => el.classList.remove('highlight'), 1200);
-          }
-          return [];
-        }
-        """
-        try:
-            evt0.then(fn=None, inputs=None, outputs=None, js=JS_SCROLL_HILIGHT)
-        except TypeError:
-            evt0.then(fn=None, inputs=None, outputs=None, _js=JS_SCROLL_HILIGHT)  # type: ignore
-
-        # 2) Stream 4 bước loading trong 3–5 giây (chỉ update loading_panel)
-        evt1 = evt0.then(
-            fn=hien_loading_tung_buoc,
-            inputs=[],
-            outputs=[loading_panel],
-            show_progress=False,
-        )
-
-        # 3) Tính toán thật, render kết quả + tắt loading
-        evt1.then(
-            fn=tinh_toan_ket_qua,
-            inputs=[lua_chon_dropdown, chu_ky_dropdown, che_do_xem],
-            outputs=[bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, loading_panel],
-            show_progress=False,
-        )
-        
-        # Streaming event cho chiến lược đề xuất
-        nut_streaming.click(
-            fn=xu_ly_streaming,
-            inputs=[lua_chon_dropdown],
-            outputs=[hien_thi_bao_cao],
-            show_progress=False
-        )
-        
-        # Cập nhật biểu đồ khi thay đổi chế độ hiển thị - chỉ khi đã có dự đoán
-        def cap_nhat_khi_doi_che_do(case, chu_ky, mode):
-            try:
-                if case and case != "":
-                    return [
-                        tao_bieu_do_du_doan(case, chu_ky, mode), 
-                        tao_thong_tin_tom_tat(case, chu_ky, mode)
-                    ]
-                else:
-                    return [tao_bieu_do_mac_dinh(), tao_tom_tat_mac_dinh()]
-            except:
-                return [tao_bieu_do_mac_dinh(), tao_tom_tat_mac_dinh()]
-        
-        che_do_xem.change(
-            fn=cap_nhat_khi_doi_che_do,
-            inputs=[lua_chon_dropdown, chu_ky_dropdown, che_do_xem],
-            outputs=[bieu_do_du_bao, hien_thi_tom_tat]
-        )
-        
-        # Tự động load case đầu tiên với biểu đồ mặc định
-        demo.load(
-            fn=lambda: [
-                cap_nhat_thong_tin_case(list(TRUONG_HOP_DEMO.keys())[0]),
-                tao_bieu_do_mac_dinh(),
-                tao_tom_tat_mac_dinh(),
-                """# 🎯 CHIẾN LƯỢC ĐỀ XUẤT
-
-## 📊 **Sẵn Sàng Phân Tích**
-
-**Nhấn 'Tạo Dự Báo AI' để xem phân tích chi tiết**
-
-Hệ thống AI sẽ tạo chiến lược đề xuất với:
-
-• **Phân tích xu hướng** thị trường  
-• **Insights chi tiết** từ dữ liệu  
-• **Khuyến nghị cụ thể** để tối ưa doanh thu  
-• **Roadmap hành động** rõ ràng  
-
-*🤖 Powered by FoxAI Intelligence*"""
-            ],
-            outputs=[hien_thi_thong_tin, bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao]
-        )
-        
-        # Footer thông tin hệ thống với branding FoxAI
-        gr.HTML(f"""
-        <div class='info-card' style="margin-top: 30px; text-align: center;">
-            <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 25px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI" style="height: 40px; margin-right: 15px;"/>
-                <h3 style="color: #1A5F91; margin: 0;">💡 Hệ Thống FoxAI</h3>
-            </div>
-            
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin: 25px 0;">
-                <div style="text-align: center; padding: 20px; background: rgba(26, 95, 145, 0.05); border-radius: 15px;">
-                    <h4 style="color: #1A5F91; margin-bottom: 15px;">🎯 Tính Năng</h4>
-                    <div style="color: #334155; line-height: 1.8; font-weight: 500;">
-                        ✨ AI Insights thông minh<br/>
-                        📊 Multi-view linh hoạt<br/>
-                        📈 Báo cáo chuyên nghiệp<br/>
-                        ⚡ Cập nhật real-time
-                    </div>
-                </div>
-                
-                <div style="text-align: center; padding: 20px; background: rgba(26, 95, 145, 0.05); border-radius: 15px;">
-                    <h4 style="color: #1A5F91; margin-bottom: 15px;">📊 Chất Lượng</h4>
-                    <div style="color: #334155; line-height: 1.8; font-weight: 500;">
-                        🎯 Độ chính xác 95.8%<br/>
-                        📅 Dự báo 3 tháng - 1 năm<br/>
-                        🔄 Market intelligence<br/>
-                        💼 Enterprise ready
-                    </div>
-                </div>
-            </div>
-            
-            <div style="text-align: center; margin: 25px 0; padding: 20px; background: linear-gradient(135deg, rgba(26, 95, 145, 0.1), rgba(139, 139, 139, 0.1)); border-radius: 15px; border: 2px solid #1A5F91;">
-                <p style="color: #1A5F91; font-weight: 700; margin: 0; font-size: 1.1em;">
-                    🦊 <strong>Powered by FoxAI</strong> • 🇻🇳 Made in Vietnam • 🤖 Advanced AI
-                </p>
-                <p style="color: #334155; margin: 8px 0 0 0; font-size: 0.9em; font-weight: 500;">
-                    YOUR TRUSTED AI PARTNER
-                </p>
-            </div>
-        </div>
-        """)
-    
-    return demo
-
-# Chạy ứng dụng
-if __name__ == "__main__":
-    demo = tao_ung_dung()
-    demo.launch(
-        share=True,
-        server_name="0.0.0.0",
-        server_port=7860,
-        show_error=True
-    )

app_fixed.py

@@ -1,784 +0,0 @@
-import gradio as gr
-import plotly.graph_objects as go
-import numpy as np
-from datetime import datetime, timedelta
-import random
-import time
-
-# URL logo FoxAI - sử dụng trực tiếp từ attachment
-FOXAI_LOGO_URL = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjI2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8IS0tIEZveEFJIExvZ28gLS0+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWVHcmFkaWVudCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMUE1RjkxO3N0b3Atb3BhY2l0eToxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM4QjhCOEI7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8IS0tIEJhY2tncm91bmQgLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZmZmZiIvPgogIAogIDwhLS0gRk9YIC0tPgogIDx0ZXh0IHg9IjMwIiB5PSIxMDAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI4MCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9InVybCgjYmx1ZUdyYWRpZW50KSI+Rk9YPC90ZXh0PgogIDwhLS0gQUkgLS0+CiAgPHRleHQgeD0iMjgwIiB5PSIxMDAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI4MCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9InVybCgjYmx1ZUdyYWRpZW50KSI+QUk8L3RleHQ+CiAgCiAgPCEtLSBTdWJ0aXRsZSAtLT4KICA8dGV4dCB4PSIzMCIgeT0iMTQwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMxQTVGOTEiPllPVVIgVFJVU1RFRCBQQVJUTkVSPC90ZXh0Pgo8L3N2Zz4="
-
-# CSS Style với màu sắc FoxAI
-custom_css = """
-.gradio-container {
-    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-}
-
-.header-container {
-    text-align: center;
-    margin: 20px 0;
-    padding: 30px;
-    background: linear-gradient(135deg, rgba(26, 95, 145, 0.1), rgba(139, 139, 139, 0.1));
-    border-radius: 20px;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
-}
-
-.foxai-logo {
-    max-width: 300px;
-    height: auto;
-    margin: 15px auto 25px auto;
-    display: block;
-    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
-}
-
-.header-title {
-    background: linear-gradient(90deg, #1A5F91, #8B8B8B, #1A5F91);
-    background-size: 300% 300%;
-    animation: gradient 8s ease infinite;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-align: center;
-    font-size: 2.5em;
-    font-weight: bold;
-    margin: 15px 0;
-    line-height: 1.2;
-}
-
-@keyframes gradient {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-}
-
-.loading-container {
-    text-align: center;
-    padding: 40px;
-    background: linear-gradient(135deg, #1A5F91 0%, #8B8B8B 100%);
-    border-radius: 15px;
-    color: white;
-    margin: 20px 0;
-}
-
-.loading-spinner {
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #1A5F91;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 20px;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-.progress-bar {
-    width: 100%;
-    height: 20px;
-    background-color: rgba(255,255,255,0.3);
-    border-radius: 10px;
-    overflow: hidden;
-    margin: 15px 0;
-}
-
-.progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #1A5F91, #8B8B8B);
-    border-radius: 10px;
-    animation: progress 3s ease-in-out;
-}
-
-@keyframes progress {
-    0% { width: 0%; }
-    25% { width: 30%; }
-    50% { width: 60%; }
-    75% { width: 85%; }
-    100% { width: 100%; }
-}
-
-.prediction-box {
-    background: linear-gradient(135deg, #1A5F91, #8B8B8B);
-    border-radius: 15px;
-    padding: 20px;
-    color: white;
-    text-align: center;
-    font-size: 1.1em;
-    font-weight: bold;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-    margin: 15px 0;
-}
-
-.insight-box {
-    background: linear-gradient(135deg, #1A5F91 0%, #8B8B8B 100%);
-    border-radius: 15px;
-    padding: 20px;
-    color: white;
-    margin: 15px 0;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-}
-
-.executive-summary {
-    background: linear-gradient(135deg, #1A5F91, #8B8B8B);
-    border-radius: 15px;
-    padding: 25px;
-    color: white;
-    margin: 15px 0;
-    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
-    border-left: 5px solid #1A5F91;
-}
-
-.feature-box {
-    background: linear-gradient(135deg, rgba(26, 95, 145, 0.2), rgba(139, 139, 139, 0.2));
-    border-radius: 15px;
-    padding: 15px;
-    margin: 10px 0;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    border-left: 4px solid #1A5F91;
-}
-
-.feature-box h3 {
-    margin: 0;
-    color: #1A5F91;
-    font-weight: bold;
-}
-
-.system-status {
-    background: linear-gradient(135deg, #1A5F91, #8B8B8B);
-    color: white;
-    padding: 10px 20px;
-    border-radius: 25px;
-    margin: 10px 0;
-    text-align: center;
-    font-weight: bold;
-}
-
-.metric-card {
-    background: linear-gradient(135deg, #1A5F91, #8B8B8B);
-    color: white;
-    border-radius: 10px;
-    padding: 15px;
-    margin: 5px;
-    text-align: center;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-
-.button-predict {
-    background: linear-gradient(135deg, #1A5F91, #8B8B8B) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 25px !important;
-    padding: 15px 30px !important;
-    font-size: 16px !important;
-    font-weight: bold !important;
-    box-shadow: 0 4px 15px rgba(26, 95, 145, 0.4) !important;
-    transition: all 0.3s ease !important;
-}
-
-.button-predict:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(26, 95, 145, 0.6) !important;
-}
-
-.plot-container {
-    border: 1px solid #e1e5e9;
-    border-radius: 15px;
-    padding: 15px;
-    margin: 15px 0;
-    background: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    min-height: 400px;
-}
-
-.info-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 10px;
-    padding: 15px;
-    margin: 10px 0;
-    border-left: 5px solid #1A5F91;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-/* Sửa lỗi font và text rendering */
-* {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    text-rendering: optimizeLegibility !important;
-    -webkit-font-smoothing: antialiased !important;
-    -moz-osx-font-smoothing: grayscale !important;
-}
-
-/* Cải thiện hiển thị tiếng Việt */
-.gradio-markdown, .gradio-html {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    line-height: 1.6 !important;
-    word-wrap: break-word !important;
-    overflow-wrap: break-word !important;
-}
-
-/* Sửa lỗi layout kéo dài */
-.gradio-container .wrap {
-    max-width: 100% !important;
-    overflow-x: hidden !important;
-}
-
-.gradio-row {
-    flex-wrap: wrap !important;
-}
-
-.gradio-column {
-    min-width: 0 !important;
-    flex-shrink: 1 !important;
-}
-"""
-
-# Dữ liệu demo tiếng Việt cho 3 trường hợp chính
-TRUONG_HOP_DEMO = {
-    "📱 Điện tử & Công nghệ": {
-        "danh_muc": "Điện tử & Công nghệ",
-        "don_vi_co_ban": 150,
-        "xu_huong": "tang_dan",
-        "mo_ta": "Dự báo bán hàng sản phẩm điện tử, smartphone, laptop và thiết bị công nghệ",
-        "thong_tin_giam_doc": {
-            "tom_tat": "📈 **TÓM TẮT ĐIỀU HÀNH:** Thị trường điện tử có xu hướng tăng trưởng mạnh 180-250% với sự phát triển của công nghệ AI, 5G và IoT. Đây là cơ hội vàng để chiếm lĩnh thị phần.",
-            "chi_tiet": "**📊 PHÂN TÍCH KINH DOANH SÂU SẮC:** Thị trường điện tử đang trải qua làn sóng tăng trưởng mạnh với mức tăng 180-250% do several factors: (1) Digital transformation gia tăng sau COVID, (2) Work from home trend tạo nhu cầu laptop/monitor, (3) Gen Z có spending power cao cho gadgets, (4) AI boom tạo nhu cầu hardware mạnh. Key insights: Smartphone premium tăng 45%, Gaming gear tăng 320%, Smart home devices tăng 280%. Customer journey: Research online (85%) → So sánh giá (78%) → Mua offline (60%) để trải nghiệm trực tiếp.",
-            "hanh_dong": "**🎯 KHUYẾN NGHỊ ĐIỀU HÀNH CHIẾN LƯỢC:** (1) **Inventory Strategy:** Tăng tồn kho 200% cho flagship models, đặc biệt iPhone/Samsung dòng cao cấp và gaming laptops, (2) **Digital Integration:** Xây dựng AR/VR showroom để khách hàng try before buy, (3) **Partnership Ecosystem:** Hợp tác với fintech cho installment 0%, tie-up với game publishers cho gaming bundle, (4) **Market Expansion:** Mở rộng sang smart home ecosystem với IoT devices, (5) **After-sales Excellence:** Extended warranty và premium support để tăng customer lifetime value và build brand loyalty."
-        }
-    },
-    
-    "👕 Thời trang & Làm đẹp": {
-        "danh_muc": "Thời trang & Làm đẹp",
-        "don_vi_co_ban": 80,
-        "xu_huong": "bien_dong",
-        "mo_ta": "Dự báo xu hướng thời trang, mỹ phẩm và các sản phẩm làm đẹp theo mùa",
-        "thong_tin_giam_doc": {
-            "tom_tat": "☀️ **TÓM TẮT ĐIỀU HÀNH:** Thời trang & làm đẹp có tính mùa vụ rõ rệt với biến động 15-180% theo trend và influencer impact. Cần strategy linh hoạt để maximize các peak seasons.",
-            "chi_tiet": "**📈 PHÂN TÍCH THỊ TRƯỜNG FASHION & BEAUTY:** Industry có pattern rất đặc biệt với multiple micro-seasons: (1) Spring/Summer collection (Mar-Aug) peak 170%, (2) Fall/Winter collection (Sep-Feb) stable 120%, (3) Special events (Valentine +240%, Tết +185%, graduation season +150%). Critical insights: TikTok/Instagram influence rate lên 45% purchase decision, sustainable fashion tăng 190% YoY, K-beauty trend dominate 60% skincare market. Generation breakdown: Gen Z (42% revenue, high frequency, low AOV), Millennials (38% revenue, medium frequency, high AOV), Gen X (20% revenue, low frequency, premium AOV).",
-            "hanh_dong": "**💡 CHIẾN LƯỢC THỰC THI OMNICHANNEL:** (1) **Trend Forecasting:** AI-powered trend analysis từ social media để predict viral products 2-3 months trước, (2) **Influencer Partnership:** Collaborate với 50+ nano/micro influencers (10K-100K followers) cho authentic engagement thay vì 1-2 mega influencers, (3) **Inventory Agility:** Fast fashion model với small batch testing → scale winners rapidly, (4) **Personalization Engine:** Skin analysis app + virtual try-on technology để tăng conversion rate, (5) **Sustainability Edge:** Launch eco-friendly line với packaging innovation để capture conscious consumers và justify premium pricing."
-        }
-    },
-    
-    "🍔 Thực phẩm & Đồ uống": {
-        "danh_muc": "Thực phẩm & Đồ uống",
-        "don_vi_co_ban": 200,
-        "xu_huong": "on_dinh",
-        "mo_ta": "Dự báo thị trường F&B, food delivery và các sản phẩm tiêu dùng hàng ngày",
-        "thong_tin_giam_doc": {
-            "tom_tat": "🍽️ **TÓM TẮT ĐIỀU HÀNH:** F&B market ổn định với baseline consumption nhưng có opportunity spikes từ weather, events và lifestyle changes. Delivery segment tăng 280%, healthy food trend tăng 165%.",
-            "chi_tiet": "**⛈️ PHÂN TÍCH F&B MARKET DYNAMICS:** F&B industry có đặc điểm unique với stable baseline demand nhưng high weather sensitivity và event-driven spikes. Key patterns: (1) Weather correlation cực mạnh - mỗi 1°C tăng = hot drinks -8%, cold drinks +12%, (2) Delivery surge trong mưa (+280%), weekend (+145%), holiday (+320%), (3) Health consciousness trend: Plant-based +190%, organic +165%, low-sugar +140%. Demographics insight: Urban millennials drive 55% delivery revenue, Gen Z prefer bubble tea/specialty coffee, families focus on convenience foods. Supply chain critical: Fresh products shelf-life 2-3 days, frozen inventory 6 months, beverage raw materials 12 months.",
-            "hanh_dong": "**☔ CHIẾN THUẬT WEATHER-RESPONSIVE F&B:** (1) **Predictive Inventory:** Weather API integration để auto-adjust inventory 48h trước based on forecast - rain = +200% comfort food, heat = +150% cold beverages, (2) **Delivery Optimization:** Dynamic delivery zones expansion trong bad weather, surge pricing strategy để incentivize drivers, ghost kitchen positioning ở high-density areas, (3) **Health & Wellness Pivot:** Launch functional beverages (immunity boost, energy, beauty), partner với gyms/yoga studios, subscription healthy meal plans, (4) **Experience Innovation:** Interactive cooking classes, farm-to-table storytelling, sustainable packaging để build brand differentiation, (5) **Data-Driven Menu:** Customer preference analytics để optimize menu mix và eliminate low-performers monthly."
-        }
-    }
-}
-
-def tao_bieu_do_mac_dinh():
-    """Tạo biểu đồ mặc định khi chưa dự đoán"""
-    fig = go.Figure()
-    
-    fig.add_annotation(
-        text="📊 Chọn tình huống và nhấn 'Tạo Dự Báo AI' để xem phân tích",
-        xref="paper", yref="paper",
-        x=0.5, y=0.5,
-        xanchor='center', yanchor='middle',
-        showarrow=False,
-        font=dict(size=18, color="#34495E", family="Arial"),
-        bgcolor="rgba(255,255,255,0.9)",
-        bordercolor="#BDC3C7",
-        borderwidth=2,
-        borderpad=20
-    )
-    
-    fig.update_layout(
-        title="🎯 Hệ Thống Dự Báo AI Sẵn Sàng",
-        template="plotly_white",
-        height=400,
-        showlegend=False,
-        xaxis=dict(showgrid=False, showticklabels=False, title=""),
-        yaxis=dict(showgrid=False, showticklabels=False, title=""),
-        plot_bgcolor='rgba(248,249,250,0.8)',
-        font=dict(family="Arial")
-    )
-    
-    return fig
-
-def tao_tom_tat_mac_dinh():
-    """Tạo tóm tắt mặc định"""
-    return """
-    <div class="prediction-box">
-        <h3 style="margin-top: 0; color: white;">📋 Thống Kê Sẽ Hiển Thị Sau Dự Báo</h3>
-        <div style="text-align: center; padding: 20px;">
-            <p style="font-size: 18px; margin: 10px 0; color: white;">
-                🎯 Chọn tình huống kinh doanh và nhấn "Tạo Dự Báo AI"
-            </p>
-            <p style="font-size: 16px; margin: 10px 0; color: #E8F6F3;">
-                Hệ thống sẽ phân tích và đưa ra insights chi tiết
-            </p>
-        </div>
-    </div>
-    """
-
-def tao_du_lieu_demo(thong_tin_case, chu_ky="3 tháng", che_do_xem='ngày'):
-    """Tạo dữ liệu demo đơn giản dựa trên case và chu kỳ dự báo"""
-    don_vi_co_ban = thong_tin_case["don_vi_co_ban"]
-    xu_huong = thong_tin_case["xu_huong"]
-    
-    # Xác định số điểm dữ liệu
-    if chu_ky == "1 năm":
-        so_diem = 12 if che_do_xem == 'năm' else (52 if che_do_xem == 'tháng' else 365)
-    elif chu_ky == "6 tháng":
-        so_diem = 6 if che_do_xem == 'năm' else (26 if che_do_xem == 'tháng' else 180)
-    else:  # "3 tháng"
-        so_diem = 3 if che_do_xem == 'năm' else (13 if che_do_xem == 'tháng' else 90)
-    
-    # Tạo nhãn thời gian
-    if che_do_xem == 'năm':
-        nhan_thoi_gian = [f"Tháng {i+1}" for i in range(so_diem)]
-    elif che_do_xem == 'tháng':
-        nhan_thoi_gian = [f"Tuần {i+1}" for i in range(so_diem)]
-    else:  # ngày
-        ngay_bat_dau = datetime.now()
-        nhan_thoi_gian = [(ngay_bat_dau + timedelta(days=i)).strftime("%d/%m") for i in range(so_diem)]
-    
-    # Tạo dữ liệu dựa trên xu hướng đơn giản
-    don_vi_ban = []
-    for i in range(so_diem):
-        if xu_huong == "tang_dan":
-            he_so = 1.0 + (i * 0.2)  # Tăng dần theo thời gian
-        elif xu_huong == "bien_dong":
-            he_so = 1.0 + np.sin(i * 0.5) * 0.3  # Biến động theo sin
-        elif xu_huong == "on_dinh":
-            he_so = 1.0 + random.uniform(-0.1, 0.1)  # Ổn định với chút biến động
-        else:
-            he_so = 1.0
-        
-        don_vi = max(int(don_vi_co_ban * he_so + random.randint(-30, 30)), 10)
-        don_vi_ban.append(don_vi)
-    
-    return nhan_thoi_gian, don_vi_ban
-
-def tao_bieu_do_du_doan(ten_case, chu_ky="3 tháng", che_do_xem='ngày'):
-    """Tạo biểu đồ dự đoán với hiệu ứng loading"""
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    nhan_thoi_gian, don_vi_ban = tao_du_lieu_demo(thong_tin_case, chu_ky, che_do_xem)
-    
-    # Tạo biểu đồ chuyên nghiệp
-    fig = go.Figure()
-    
-    # Biểu đồ chính
-    fig.add_trace(go.Scatter(
-        x=nhan_thoi_gian,
-        y=don_vi_ban,
-        mode='lines+markers',
-        name='📦 Dự Báo Đơn Vị Bán',
-        line=dict(color='#1A5F91', width=4),
-        marker=dict(size=12, color='#1A5F91', symbol='circle'),
-        hovertemplate='<b>%{x}</b><br><b>Đơn vị bán:</b> %{y:,}<extra></extra>'
-    ))
-    
-    # Vùng tin cậy
-    upper_bound = [val * 1.15 for val in don_vi_ban]
-    lower_bound = [val * 0.85 for val in don_vi_ban]
-    
-    fig.add_trace(go.Scatter(
-        x=nhan_thoi_gian + nhan_thoi_gian[::-1],
-        y=upper_bound + lower_bound[::-1],
-        fill='toself',
-        fillcolor='rgba(26, 95, 145, 0.2)',
-        line=dict(color='rgba(255,255,255,0)'),
-        name='📊 Vùng Tin Cậy',
-        hoverinfo="skip"
-    ))
-    
-    # Đường xu hướng
-    x_so = list(range(len(nhan_thoi_gian)))
-    z = np.polyfit(x_so, don_vi_ban, 1)
-    duong_xu_huong = np.poly1d(z)(x_so)
-    
-    fig.add_trace(go.Scatter(
-        x=nhan_thoi_gian,
-        y=duong_xu_huong,
-        mode='lines',
-        name='📈 Xu Hướng',
-        line=dict(color='#8B8B8B', width=3, dash='dash'),
-        hovertemplate='<b>Xu hướng:</b> %{y:.0f}<extra></extra>'
-    ))
-    
-    # Đánh dấu ngày đỉnh
-    chi_so_dinh = [i for i, val in enumerate(don_vi_ban) if val == max(don_vi_ban)]
-    if chi_so_dinh:
-        chi_so = chi_so_dinh[0]
-        fig.add_trace(go.Scatter(
-            x=[nhan_thoi_gian[chi_so]],
-            y=[don_vi_ban[chi_so]],
-            mode='markers',
-            name='🔥 Đỉnh Doanh Số',
-            marker=dict(size=20, color='#F39C12', symbol='star'),
-            hovertemplate='<b>Đỉnh cao:</b> %{x}<br><b>Đơn vị:</b> %{y:,}<extra></extra>'
-        ))
-    
-    # Tiêu đề theo chế độ xem
-    tieu_de_che_do = {
-        'ngày': 'Theo Ngày',
-        'tháng': 'Theo Tháng', 
-        'năm': 'Theo Năm'
-    }
-    
-    fig.update_layout(
-        title=f"📊 Dự Báo Đơn Vị Bán - {tieu_de_che_do[che_do_xem]}: {ten_case} ({chu_ky})",
-        xaxis_title="⏰ Thời Gian",
-        yaxis_title="📦 Số Đơn Vị Bán",
-        template="plotly_white",
-        height=600,
-        showlegend=True,
-        hovermode='x unified',
-        xaxis=dict(tickangle=45 if che_do_xem == 'ngày' else 0),
-        font=dict(size=14, family="Arial"),
-        plot_bgcolor='rgba(248,249,250,0.8)'
-    )
-    
-    return fig
-
-def tao_thong_tin_tom_tat(ten_case, chu_ky="3 tháng", che_do_xem='ngày'):
-    """Tạo thông tin tóm tắt dành cho giám đốc"""
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    nhan_thoi_gian, don_vi_ban = tao_du_lieu_demo(thong_tin_case, chu_ky, che_do_xem)
-    
-    tong_don_vi = sum(don_vi_ban)
-    trung_binh = tong_don_vi / len(don_vi_ban)
-    ngay_dinh = max(don_vi_ban)
-    ngay_thap = min(don_vi_ban)
-    ty_le_tang_truong = ((don_vi_ban[-1] - don_vi_ban[0]) / don_vi_ban[0]) * 100
-    
-    # Tính toán theo chế độ xem
-    don_vi_thoi_gian = {
-        'ngày': 'ngày',
-        'tháng': 'tuần', 
-        'năm': 'tháng'
-    }[che_do_xem]
-    
-    tom_tat_html = f"""
-    <div class="prediction-box">
-        <h3 style="margin-top: 0; color: white;">📋 Báo Cáo Dự Báo Điều Hành</h3>
-        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">📦 Tổng Đơn Vị</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold;">{tong_don_vi:,}</p>
-            </div>
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">📈 TB/{don_vi_thoi_gian.title()}</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold;">{trung_binh:,.0f}</p>
-            </div>
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">🔥 Đỉnh Cao</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold;">{ngay_dinh:,}</p>
-            </div>
-            <div style="background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px;">
-                <h4 style="margin: 0; color: #E8F6F3;">📊 Tăng Trưởng</h4>
-                <p style="font-size: 24px; margin: 5px 0; font-weight: bold; color: {'#2ECC71' if ty_le_tang_truong > 0 else '#E74C3C'};">
-                    {ty_le_tang_truong:+.1f}%
-                </p>
-            </div>
-        </div>
-        <div style="margin-top: 15px; text-align: center;">
-            <p style="margin: 0; font-size: 16px; color: white;">📅 Chu Kỳ Dự Báo: <strong>{chu_ky}</strong></p>
-            <p style="margin: 5px 0; font-size: 14px; opacity: 0.9; color: white;">Danh Mục: <strong>{thong_tin_case['danh_muc']}</strong></p>
-        </div>
-    </div>
-    """
-    
-    return tom_tat_html
-
-def tao_bao_cao_giam_doc(ten_case):
-    """Tạo báo cáo chi tiết dành cho giám đốc - trả về Markdown"""
-    thong_tin_case = TRUONG_HOP_DEMO[ten_case]
-    thong_tin_gd = thong_tin_case['thong_tin_giam_doc']
-    
-    bao_cao_markdown = f"""
-# 👔 BÁO CÁO ĐIỀU HÀNH
-
-## 🎯 Tóm Tắt Điều Hành
-
-{thong_tin_gd['tom_tat']}
-
-## 📊 Phân Tích Chi Tiết
-
-{thong_tin_gd['chi_tiet']}
-
-## 🚀 Khuyến Nghị Hành Động
-
-{thong_tin_gd['hanh_dong']}
-
----
-*🤖 Phân tích được tạo bởi FoxAI Business Intelligence | ⚡ Cập nhật realtime*
-    """
-    
-    return bao_cao_markdown
-
-def tao_loading_effect():
-    """Tạo hiệu ứng loading để có cảm giác như production"""
-    loading_html = """
-    <div class="loading-container">
-        <div class="loading-spinner"></div>
-        <h3 style="color: white; margin: 0;">🤖 Đang Xử Lý Dự Báo AI...</h3>
-        <div class="progress-bar">
-            <div class="progress-fill"></div>
-        </div>
-        <p style="color: white; margin: 10px 0; opacity: 0.9;">
-            ⚡ Phân tích dữ liệu • 🧠 Machine Learning • 📊 Tạo insights
-        </p>
-    </div>
-    """
-    return loading_html
-
-def xu_ly_du_doan_voi_loading(lua_chon_case, chu_ky, che_do_xem):
-    """Xử lý dự đoán với hiệu ứng loading realistic"""
-    if lua_chon_case is None:
-        return tao_bieu_do_mac_dinh(), tao_tom_tat_mac_dinh(), "# 👔 BÁO CÁO ĐIỀU HÀNH\n\n📊 **Chọn tình huống để xem phân tích**"
-    
-    try:
-        # Giả lập thời gian xử lý
-        time.sleep(1)
-        
-        # Tạo biểu đồ
-        bieu_do = tao_bieu_do_du_doan(lua_chon_case, chu_ky, che_do_xem)
-        
-        # Tạo tóm tắt
-        tom_tat = tao_thong_tin_tom_tat(lua_chon_case, chu_ky, che_do_xem)
-        
-        # Tạo báo cáo giám đốc (Markdown)
-        bao_cao = tao_bao_cao_giam_doc(lua_chon_case)
-        
-        return bieu_do, tom_tat, bao_cao
-        
-    except Exception as e:
-        loi = f"❌ Lỗi xử lý: {str(e)}"
-        empty_fig = go.Figure().add_annotation(
-            text=loi, 
-            xref="paper", yref="paper", 
-            x=0.5, y=0.5, 
-            showarrow=False,
-            font=dict(size=16, color="red")
-        )
-        return empty_fig, loi, f"# ❌ Lỗi\n\n{loi}"
-
-def cap_nhat_thong_tin_case(lua_chon_case):
-    """Cập nhật thông tin case khi chọn"""
-    if lua_chon_case in TRUONG_HOP_DEMO:
-        thong_tin = TRUONG_HOP_DEMO[lua_chon_case]
-        return f"""
-        <div class='info-card'>
-            <h4>📋 Tình Huống: {lua_chon_case}</h4>
-            <p><strong>Danh Mục:</strong> {thong_tin['danh_muc']}</p>
-            <p><strong>Mô Tả:</strong> {thong_tin['mo_ta']}</p>
-        </div>
-        """
-    return ""
-
-# Tạo ứng dụng Gradio
-def tao_ung_dung():
-    """Tạo ứng dụng Gradio hoàn chỉnh bằng tiếng Việt"""
-    
-    with gr.Blocks(
-        title="🚀 Hệ Thống Dự Báo Bán Hàng AI - FoxAI",
-        theme=gr.themes.Soft(),
-        css=custom_css
-    ) as demo:
-        
-        # Header tiếng Việt với logo FoxAI
-        gr.HTML(f"""
-        <div class="header-container">
-            <div style="text-align: center; margin-bottom: 20px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI Logo" class="foxai-logo"/>
-            </div>
-            <div class="header-title">
-                🇻🇳 HỆ THỐNG DỰ BÁO BÁN HÀNG AI 📊
-            </div>
-            <p style="font-size: 1.2em; color: #1A5F91; margin: 15px 0; font-weight: 600; line-height: 1.4;">
-                Công nghệ AI tiên tiến từ <strong>FoxAI</strong> cho phân tích và dự báo kinh doanh
-            </p>
-            <div class="system-status">
-                🟢 Hệ thống hoạt động bình thường • 🚀 Độ chính xác 95.8% • ⚡ Realtime Analytics • Powered by FoxAI
-            </div>
-        </div>
-        """)
-        
-        # Hướng dẫn sử dụng
-        gr.HTML("""
-        <div class='info-card'>
-            <h3>🎯 Hướng Dẫn Sử Dụng Hệ Thống</h3>
-            <p>Chọn tình huống kinh doanh, chu kỳ dự báo và chế độ xem để nhận được phân tích AI chi tiết với khuyến nghị điều hành.</p>
-            
-            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 20px 0;">
-                <div>
-                    <h4>🎭 Tình Huống Có Sẵn:</h4>
-                    <ul>
-                        <li>📱 Điện tử & Công nghệ</li>
-                        <li>👕 Thời trang & Làm đẹp</li>
-                        <li>🍔 Thực phẩm & Đồ uống</li>
-                    </ul>
-                </div>
-                
-                <div>
-                    <h4>📊 Chế Độ Phân Tích:</h4>
-                    <ul>
-                        <li>📅 <strong>3 Tháng:</strong> Dự báo ngắn hạn, chính xác cao</li>
-                        <li>📆 <strong>6 Tháng:</strong> Dự báo trung hạn, lập kế hoạch</li>
-                        <li>🗓️ <strong>1 Năm:</strong> Dự báo dài hạn, chiến lược</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("<div class='feature-box'><h3>⚙️ Cài Đặt Phân Tích</h3></div>")
-                
-                lua_chon_dropdown = gr.Dropdown(
-                    choices=list(TRUONG_HOP_DEMO.keys()),
-                    value=list(TRUONG_HOP_DEMO.keys())[0],
-                    label="🎭 Chọn Tình Huống Kinh Doanh",
-                    info="Mỗi tình huống có đặc điểm và insight riêng biệt"
-                )
-                
-                chu_ky_dropdown = gr.Dropdown(
-                    choices=[("📅 3 Tháng", "3 tháng"), ("📆 6 Tháng", "6 tháng"), ("🗓️ 1 Năm", "1 năm")],
-                    value="3 tháng",
-                    label="📊 Chu Kỳ Dự Báo",
-                    info="Chọn khoảng thời gian dự báo phù hợp với mục đích kinh doanh"
-                )
-                
-                nut_du_bao = gr.Button(
-                    "🚀 Tạo Dự Báo AI",
-                    variant="primary",
-                    size="lg",
-                    elem_classes="button-predict"
-                )
-                
-                # Hiển thị thông tin case
-                hien_thi_thong_tin = gr.HTML()
-        
-        with gr.Row():
-            with gr.Column():
-                gr.HTML("<div class='feature-box'><h3>📈 Kết Quả Dự Báo</h3></div>")
-                
-                # Chế độ hiển thị được đặt gần biểu đồ
-                che_do_xem = gr.Radio(
-                    choices=[("📅 Theo Ngày", "ngày"), ("📆 Theo Tuần", "tháng"), ("🗓️ Theo Tháng", "năm")],
-                    value="ngày",
-                    label="📊 Chế Độ Hiển Thị Biểu Đồ",
-                    info="Thay đổi cách hiển thị dữ liệu trên biểu đồ"
-                )
-                
-                bieu_do_du_bao = gr.Plot(
-                    label="Biểu Đồ Dự Báo Bán Hàng",
-                    elem_classes=["plot-container"]
-                )
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("<div class='feature-box'><h3>📊 Thống Kê Tổng Hợp</h3></div>")
-                hien_thi_tom_tat = gr.HTML()
-            
-            with gr.Column(scale=1):
-                gr.HTML("<div class='feature-box'><h3>👔 Báo Cáo Điều Hành</h3></div>")
-                hien_thi_bao_cao = gr.Markdown()
-        
-        # Xử lý sự kiện
-        lua_chon_dropdown.change(
-            fn=cap_nhat_thong_tin_case,
-            inputs=[lua_chon_dropdown],
-            outputs=[hien_thi_thong_tin]
-        )
-        
-        nut_du_bao.click(
-            fn=xu_ly_du_doan_voi_loading,
-            inputs=[lua_chon_dropdown, chu_ky_dropdown, che_do_xem],
-            outputs=[bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao],
-            show_progress=True
-        )
-        
-        # Cập nhật biểu đồ khi thay đổi chế độ hiển thị - chỉ khi đã có dự đo��n
-        def cap_nhat_khi_doi_che_do(case, chu_ky, mode):
-            try:
-                if case and case != "":
-                    return [
-                        tao_bieu_do_du_doan(case, chu_ky, mode), 
-                        tao_thong_tin_tom_tat(case, chu_ky, mode)
-                    ]
-                else:
-                    return [tao_bieu_do_mac_dinh(), tao_tom_tat_mac_dinh()]
-            except:
-                return [tao_bieu_do_mac_dinh(), tao_tom_tat_mac_dinh()]
-        
-        che_do_xem.change(
-            fn=cap_nhat_khi_doi_che_do,
-            inputs=[lua_chon_dropdown, chu_ky_dropdown, che_do_xem],
-            outputs=[bieu_do_du_bao, hien_thi_tom_tat]
-        )
-        
-        # Tự động load case đầu tiên với biểu đồ mặc định
-        demo.load(
-            fn=lambda: [
-                cap_nhat_thong_tin_case(list(TRUONG_HOP_DEMO.keys())[0]),
-                tao_bieu_do_mac_dinh(),
-                tao_tom_tat_mac_dinh(),
-                "# 👔 BÁO CÁO ĐIỀU HÀNH\n\n📊 **Nhấn 'Tạo Dự Báo AI' để xem phân tích chi tiết**\n\nHệ thống sẽ tạo báo cáo điều hành với insights và khuyến nghị cụ thể."
-            ],
-            outputs=[hien_thi_thong_tin, bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao]
-        )
-        
-        # Footer thông tin hệ thống với branding FoxAI
-        gr.HTML(f"""
-        <div class='info-card' style="margin-top: 30px;">
-            <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI" style="height: 40px; margin-right: 15px;"/>
-                <h3 style="color: #1A5F91; margin: 0;">💡 Thông Tin Hệ Thống FoxAI</h3>
-            </div>
-            
-            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 20px 0;">
-                <div>
-                    <h4 style="color: #1A5F91;">🎯 Tính Năng Nổi Bật:</h4>
-                    <ul>
-                        <li><strong>AI Insights:</strong> Phân tích thông minh với khuyến nghị cụ thể</li>
-                        <li><strong>Multi-view:</strong> Xem theo ngày/tháng/năm linh hoạt</li>
-                        <li><strong>Executive Reports:</strong> Báo cáo chuyên nghiệp cho ban điều hành</li>
-                        <li><strong>Real-time:</strong> Cập nhật dữ liệu theo thời gian thực</li>
-                    </ul>
-                </div>
-                
-                <div>
-                    <h4 style="color: #1A5F91;">📊 Chất Lượng Dự Báo:</h4>
-                    <ul>
-                        <li><strong>Độ Chính Xác:</strong> 95.8% trên 3 ngành hàng</li>
-                        <li><strong>Phạm Vi:</strong> Từ 3 tháng đến 1 năm</li>
-                        <li><strong>Cập Nhật:</strong> Real-time với market intelligence</li>
-                        <li><strong>Báo Cáo:</strong> Professional format cho C-level executives</li>
-                    </ul>
-                </div>
-            </div>
-            
-            <div style="text-align: center; margin: 20px 0; padding: 15px; background: linear-gradient(135deg, rgba(26, 95, 145, 0.1), rgba(139, 139, 139, 0.1)); border-radius: 10px; border: 2px solid #1A5F91;">
-                <p style="color: #1A5F91; font-weight: bold; margin: 0; font-size: 16px;">
-                    🦊 <strong>Powered by FoxAI</strong> | 🇻🇳 Made in Vietnam | 🤖 Advanced AI | 📊 Enterprise Ready | ⚡ Real-time Analytics
-                </p>
-                <p style="color: #8B8B8B; margin: 5px 0 0 0; font-size: 14px;">
-                    YOUR TRUSTED PARTNER - FoxAI Technology Solutions
-                </p>
-            </div>
-        </div>
-        """)
-    
-    return demo
-
-# Chạy ứng dụng
-if __name__ == "__main__":
-    demo = tao_ung_dung()
-    demo.launch(
-        share=True,
-        server_name="0.0.0.0",
-        server_port=7860,
-        show_error=True
-    )

app_tabs_final.py

@@ -1,275 +0,0 @@
-import gradio as gr
-import pandas as pd
-import plotly.graph_objects as go
-import plotly.express as px
-import numpy as np
-import random
-import time
-
-# Import các hàm từ app.py gốc
-import sys
-import os
-sys.path.append(os.path.dirname(os.path.abspath(__file__)))
-
-from app import (
-    TRUONG_HOP_DEMO, FOXAI_LOGO_URL, custom_css,
-    tao_bao_cao_giam_doc, tao_du_lieu_demo, tao_bieu_do_du_doan,
-    cap_nhat_thong_tin_case, xu_ly_du_doan_voi_loading, tao_thong_tin_tom_tat
-)
-
-def tao_tab_compliance():
-    """Tạo tab Compliance & Age-Gate Radar"""
-    with gr.Column():
-        gr.HTML("""
-        <div class='info-card' style="text-align: center; padding: 40px;">
-            <div style="font-size: 4em; margin-bottom: 20px;">🧾</div>
-            <h2 style="color: #1A5F91; margin-bottom: 20px;">Compliance & Age‑Gate Radar</h2>
-            <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-                <h3 style="color: #475569; margin-bottom: 25px;">📋 Mô Tả Tính Năng</h3>
-                <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                    <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                        <strong>Radar & Gauge tuân thủ chuẩn trưng bày/nhãn cảnh báo/age‑gate (18+)</strong>
-                    </p>
-                    <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                        <li>🎯 <strong>Radar Compliance:</strong> Theo dõi mức độ tuân thủ quy định trưng bày sản phẩm</li>
-                        <li>⚠️ <strong>Age-Gate Monitor:</strong> Kiểm soát nhãn cảnh báo độ tuổi (18+) cho sản phẩm nhạy cảm</li>
-                        <li>📊 <strong>Dashboard Quản Trị:</strong> Hệ thống gauge theo dõi rủi ro tuân thủ real-time</li>
-                        <li>🔍 <strong>Risk Assessment:</strong> Đánh giá và cảnh báo vi phạm quy định trưng bày</li>
-                        <li>📈 <strong>Compliance Score:</strong> Tính điểm tuân thủ tổng thể theo từng danh mục sản phẩm</li>
-                    </ul>
-                </div>
-                
-                <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                    <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                    <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                        ⏳ <strong>Tính năng đang được phát triển</strong> - UI demo để minh họa câu chuyện quản trị rủi ro
-                    </p>
-                    <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                        Dự kiến hoàn thành: Q4 2024 • Beta testing: Q1 2025
-                    </p>
-                </div>
-            </div>
-        </div>
-        """)
-
-def tao_tab_route_optimizer():
-    """Tạo tab Route-to-Market Optimizer"""
-    with gr.Column():
-        gr.HTML("""
-        <div class='info-card' style="text-align: center; padding: 40px;">
-            <div style="font-size: 4em; margin-bottom: 20px;">🚚</div>
-            <h2 style="color: #1A5F91; margin-bottom: 20px;">Route‑to‑Market Optimizer</h2>
-            <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-                <h3 style="color: #475569; margin-bottom: 25px;">🎯 Mô Tả Tính Năng</h3>
-                <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                    <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                        <strong>Scatter Pareto "số điểm ghé/tuyến" vs "doanh thu/km" – chọn tuyến "ngon – gọn – rẻ"</strong>
-                    </p>
-                    <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                        <li>📍 <strong>Route Analytics:</strong> Phân tích hiệu quả từng tuyến phân phối theo Pareto</li>
-                        <li>💰 <strong>Revenue per KM:</strong> Tính toán doanh thu/km để tối ưu lợi nhuận</li>
-                        <li>🎯 <strong>Stop Optimization:</strong> Tối ưu số điểm ghé/tuyến để giảm chi phí</li>
-                        <li>📊 <strong>Scatter Plot Analysis:</strong> Visualization ma trận "ngon-gọn-rẻ"</li>
-                        <li>🚚 <strong>Smart Routing:</strong> AI đề xuất tuyến đường tối ưu theo múi giờ</li>
-                        <li>⚡ <strong>Real-time Tracking:</strong> Theo dõi hiệu suất tuyến trực tiếp</li>
-                    </ul>
-                </div>
-                
-                <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                    <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                    <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                        ⏳ <strong>Tính năng đang được phát triển</strong> - Mô hình giả lập cho demo
-                    </p>
-                    <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                        Đang thu thập dữ liệu GPS • Tích hợp API Maps • Alpha phase
-                    </p>
-                </div>
-            </div>
-        </div>
-        """)
-
-def tao_tab_material_predict():
-    """Tạo tab Material Predict"""
-    with gr.Column():
-        gr.HTML("""
-        <div class='info-card' style="text-align: center; padding: 40px;">
-            <div style="font-size: 4em; margin-bottom: 20px;">📦</div>
-            <h2 style="color: #1A5F91; margin-bottom: 20px;">Material Predict</h2>
-            <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-                <h3 style="color: #475569; margin-bottom: 25px;">📋 Mô Tả Tính Năng</h3>
-                <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                    <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                        <strong>Dự báo vật tư thông minh với AI-powered supply chain optimization</strong>
-                    </p>
-                    <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                        <li>📈 <strong>Demand Forecasting:</strong> Dự báo nhu cầu vật tư theo mùa vụ và xu hướng</li>
-                        <li>🏭 <strong>Inventory Optimization:</strong> Tối ưu mức tồn kho để giảm chi phí lưu trữ</li>
-                        <li>⚡ <strong>Auto-Reorder Points:</strong> Tự động đặt hàng khi đạt ngưỡng tối thiểu</li>
-                        <li>🔄 <strong>Supply Chain AI:</strong> Tích hợp với nhà cung cấp để dự báo leadtime</li>
-                        <li>💡 <strong>Cost Intelligence:</strong> Phân tích biến động giá nguyên liệu theo thời gian</li>
-                        <li>📊 <strong>Material Matrix:</strong> Ma trận ABC analysis cho ưu tiên vật tư quan trọng</li>
-                        <li>🎯 <strong>Waste Reduction:</strong> Giảm thiểu lãng phí bằng dự báo chính xác</li>
-                    </ul>
-                </div>
-                
-                <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                    <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                    <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                        ⏳ <strong>Tính năng đang được phát triển</strong> - Module dự báo vật tư tiên tiến
-                    </p>
-                    <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                        Đang training ML models • Kết nối ERP systems • Pilot program
-                    </p>
-                </div>
-            </div>
-        </div>
-        """)
-
-def tao_tab_du_bao_chinh():
-    """Tạo tab chính cho dự báo bán hàng"""
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>⚙️ Cài Đặt</h3></div>")
-            
-            lua_chon_dropdown = gr.Dropdown(
-                choices=list(TRUONG_HOP_DEMO.keys()),
-                value=list(TRUONG_HOP_DEMO.keys())[0],
-                label="🛍️ Chọn Sản Phẩm",
-                info="Mỗi sản phẩm có insight riêng",
-                elem_classes=["tech-border"]
-            )
-            
-            chu_ky_dropdown = gr.Dropdown(
-                choices=["3 tháng", "6 tháng", "1 năm"],
-                value="6 tháng",
-                label="📅 Chu Kỳ Dự Báo",
-                info="Thời gian dự báo tương lai",
-                elem_classes=["tech-border"]
-            )
-            
-            nut_du_bao = gr.Button(
-                "🚀 Tạo Dự Báo AI",
-                variant="primary",
-                size="lg",
-                elem_classes=["btn-modern", "pulse-animation"]
-            )
-            
-            hien_thi_thong_tin = gr.HTML(
-                value=cap_nhat_thong_tin_case(list(TRUONG_HOP_DEMO.keys())[0]),
-                elem_classes=["floating", "glass-card"]
-            )
-        
-        with gr.Column(scale=2):
-            gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>��� Biểu Đồ Dự Báo</h3></div>")
-            bieu_do_du_bao = gr.Plot(
-                label="Dự báo xu hướng bán hàng",
-                elem_classes=["chart-container"]
-            )
-            
-            hien_thi_tom_tat = gr.HTML(
-                value="🔍 Chọn sản phẩm và bấm 'Tạo Dự Báo AI' để xem phân tích",
-                elem_classes=["summary-container", "floating"]
-            )
-            
-            hien_thi_bao_cao = gr.HTML(
-                value="",
-                elem_classes=["report-container", "floating"]
-            )
-    
-    # Event handlers
-    lua_chon_dropdown.change(
-        fn=cap_nhat_thong_tin_case,
-        inputs=[lua_chon_dropdown],
-        outputs=[hien_thi_thong_tin]
-    )
-    
-    nut_du_bao.click(
-        fn=xu_ly_du_doan_voi_loading,
-        inputs=[lua_chon_dropdown, chu_ky_dropdown],
-        outputs=[bieu_do_du_bao, hien_thi_tom_tat]
-    )
-    
-    return lua_chon_dropdown, bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, hien_thi_thong_tin
-
-def tao_ung_dung_voi_tabs():
-    """Tạo ứng dụng Gradio với tabs"""
-    
-    with gr.Blocks(
-        title="🚀 Hệ Thống Dự Báo Bán Hàng AI - FoxAI",
-        theme=gr.themes.Soft(),
-        css=custom_css
-    ) as demo:
-        
-        # Header
-        gr.HTML(f"""
-        <div class="header-container">
-            <div style="text-align: center; margin-bottom: 20px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI Logo" class="foxai-logo"/>
-            </div>
-            <div class="header-title">
-                🚀 HỆ THỐNG DỰ BÁO AI
-            </div>
-            <p style="font-size: 1.1em; color: rgba(255,255,255,0.95) !important; margin: 15px auto; font-weight: 500; line-height: 1.5; max-width: 600px; text-align: center;">
-                Phân tích thông minh với công nghệ <strong style="color: white !important;">FoxAI</strong>
-            </p>
-            <div class="system-status">
-                🟢 Hoạt động • 95.8% độ chính xác • Powered by FoxAI
-            </div>
-        </div>
-        """)
-        
-        # Tabs
-        with gr.Tabs() as tabs:
-            with gr.TabItem("📈 Dự Báo Bán Hàng", elem_id="main-tab"):
-                components = tao_tab_du_bao_chinh()
-            
-            with gr.TabItem("🧾 Compliance & Age‑Gate Radar", elem_id="compliance-tab"):
-                tao_tab_compliance()
-            
-            with gr.TabItem("🚚 Route‑to‑Market Optimizer", elem_id="route-tab"):
-                tao_tab_route_optimizer()
-            
-            with gr.TabItem("📦 Material Predict", elem_id="material-tab"):
-                tao_tab_material_predict()
-        
-        # Footer
-        gr.HTML(f"""
-        <div class='info-card' style="margin-top: 30px; text-align: center;">
-            <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 25px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI" style="height: 40px; margin-right: 15px;"/>
-                <h3 style="color: #1A5F91; margin: 0;">💡 Hệ Thống FoxAI</h3>
-            </div>
-            
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 25px 0;">
-                <div style="text-align: center; padding: 15px; background: rgba(26, 95, 145, 0.05); border-radius: 10px;">
-                    <div style="color: #334155; line-height: 1.8; font-weight: 500;">
-                        🎯 Độ chính xác 95.8%<br/>
-                        📅 Dự báo 3 tháng - 1 năm<br/>
-                        🔄 Market intelligence<br/>
-                        💼 Enterprise ready
-                    </div>
-                </div>
-            </div>
-            
-            <div style="text-align: center; margin: 25px 0; padding: 20px; background: linear-gradient(135deg, rgba(26, 95, 145, 0.1), rgba(139, 139, 139, 0.1)); border-radius: 15px; border: 2px solid #1A5F91;">
-                <p style="color: #1A5F91; font-weight: 700; margin: 0; font-size: 1.1em;">
-                    🦊 <strong>Powered by FoxAI</strong> • 🇻🇳 Made in Vietnam • 🤖 Advanced AI
-                </p>
-                <p style="color: #334155; margin: 8px 0 0 0; font-size: 0.9em; font-weight: 500;">
-                    YOUR TRUSTED AI PARTNER
-                </p>
-            </div>
-        </div>
-        """)
-    
-    return demo
-
-if __name__ == "__main__":
-    demo = tao_ung_dung_voi_tabs()
-    demo.launch(
-        share=True,
-        server_name="0.0.0.0",
-        server_port=7860,
-        show_error=True
-    )

app_with_tabs.py

@@ -1,336 +0,0 @@
-import gradio as gr
-import pandas as pd
-import plotly.graph_objects as go
-import plotly.express as px
-import numpy as np
-import random
-import time
-
-# Import tất cả từ app.py gốc trừ phần Gradio interface
-from app import *
-
-def tao_tab_compliance():
-    """Tạo tab Compliance & Age-Gate Radar"""
-    gr.HTML("""
-    <div class='info-card' style="text-align: center; padding: 40px;">
-        <div style="font-size: 4em; margin-bottom: 20px;">🧾</div>
-        <h2 style="color: #1A5F91; margin-bottom: 20px;">Compliance & Age‑Gate Radar</h2>
-        <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-            <h3 style="color: #475569; margin-bottom: 25px;">📋 Mô Tả Tính Năng</h3>
-            <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                    <strong>Radar & Gauge tuân thủ chuẩn trưng bày/nhãn cảnh báo/age‑gate (18+)</strong>
-                </p>
-                <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                    <li>🎯 <strong>Radar Compliance:</strong> Theo dõi mức độ tuân thủ quy định trưng bày sản phẩm</li>
-                    <li>⚠️ <strong>Age-Gate Monitor:</strong> Kiểm soát nhãn cảnh báo độ tuổi (18+) cho sản phẩm nhạy cảm</li>
-                    <li>📊 <strong>Dashboard Quản Trị:</strong> Hệ thống gauge theo dõi rủi ro tuân thủ real-time</li>
-                    <li>🔍 <strong>Risk Assessment:</strong> Đánh giá và cảnh báo vi phạm quy định trưng bày</li>
-                    <li>📈 <strong>Compliance Score:</strong> Tính điểm tuân thủ tổng thể theo từng danh mục sản phẩm</li>
-                </ul>
-            </div>
-            
-            <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                    ⏳ <strong>Tính năng đang được phát triển</strong> - UI demo để minh họa câu chuyện quản trị rủi ro
-                </p>
-                <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                    Dự kiến hoàn thành: Q4 2024 • Beta testing: Q1 2025
-                </p>
-            </div>
-        </div>
-    </div>
-    """)
-
-def tao_tab_route_optimizer():
-    """Tạo tab Route-to-Market Optimizer"""
-    gr.HTML("""
-    <div class='info-card' style="text-align: center; padding: 40px;">
-        <div style="font-size: 4em; margin-bottom: 20px;">🚚</div>
-        <h2 style="color: #1A5F91; margin-bottom: 20px;">Route‑to‑Market Optimizer</h2>
-        <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-            <h3 style="color: #475569; margin-bottom: 25px;">🎯 Mô Tả Tính Năng</h3>
-            <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                    <strong>Scatter Pareto "số điểm ghé/tuyến" vs "doanh thu/km" – chọn tuyến "ngon – gọn – rẻ"</strong>
-                </p>
-                <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                    <li>📍 <strong>Route Analytics:</strong> Phân tích hiệu quả từng tuyến phân phối theo Pareto</li>
-                    <li>💰 <strong>Revenue per KM:</strong> Tính toán doanh thu/km để tối ưu lợi nhuận</li>
-                    <li>🎯 <strong>Stop Optimization:</strong> Tối ưu số điểm ghé/tuyến để giảm chi phí</li>
-                    <li>📊 <strong>Scatter Plot Analysis:</strong> Visualization ma trận "ngon-gọn-rẻ"</li>
-                    <li>🚚 <strong>Smart Routing:</strong> AI đề xuất tuyến đường tối ưu theo múi giờ</li>
-                    <li>⚡ <strong>Real-time Tracking:</strong> Theo dõi hiệu suất tuyến trực tiếp</li>
-                </ul>
-            </div>
-            
-            <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                    ⏳ <strong>Tính năng đang được phát triển</strong> - Mô hình giả lập cho demo
-                </p>
-                <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                    Đang thu thập dữ liệu GPS • Tích hợp API Maps • Alpha phase
-                </p>
-            </div>
-        </div>
-    </div>
-    """)
-
-def tao_tab_material_predict():
-    """Tạo tab Material Predict"""
-    gr.HTML("""
-    <div class='info-card' style="text-align: center; padding: 40px;">
-        <div style="font-size: 4em; margin-bottom: 20px;">📦</div>
-        <h2 style="color: #1A5F91; margin-bottom: 20px;">Material Predict</h2>
-        <div style="max-width: 800px; margin: 0 auto; text-align: left;">
-            <h3 style="color: #475569; margin-bottom: 25px;">📋 Mô Tả Tính Năng</h3>
-            <div style="background: rgba(26, 95, 145, 0.05); padding: 25px; border-radius: 15px; margin-bottom: 30px;">
-                <p style="font-size: 1.1em; line-height: 1.7; margin-bottom: 20px; color: #334155;">
-                    <strong>Dự báo vật tư thông minh với AI-powered supply chain optimization</strong>
-                </p>
-                <ul style="font-size: 1.05em; line-height: 1.8; color: #475569; padding-left: 25px;">
-                    <li>📈 <strong>Demand Forecasting:</strong> Dự báo nhu cầu vật tư theo mùa vụ và xu hướng</li>
-                    <li>🏭 <strong>Inventory Optimization:</strong> Tối ưu mức tồn kho để giảm chi phí lưu trữ</li>
-                    <li>⚡ <strong>Auto-Reorder Points:</strong> Tự động đặt hàng khi đạt ngưỡng tối thiểu</li>
-                    <li>🔄 <strong>Supply Chain AI:</strong> Tích hợp với nhà cung cấp để dự báo leadtime</li>
-                    <li>💡 <strong>Cost Intelligence:</strong> Phân tích biến động giá nguyên liệu theo thời gian</li>
-                    <li>📊 <strong>Material Matrix:</strong> Ma trận ABC analysis cho ưu tiên vật tư quan trọng</li>
-                    <li>🎯 <strong>Waste Reduction:</strong> Giảm thiểu lãng phí bằng dự báo chính xác</li>
-                </ul>
-            </div>
-            
-            <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); padding: 25px; border-radius: 15px; border-left: 5px solid #F59E0B;">
-                <h4 style="color: #92400E; margin-bottom: 15px;">🚧 Trạng Thái Phát Triển</h4>
-                <p style="color: #78350F; font-size: 1.05em; font-weight: 600; margin: 0;">
-                    ⏳ <strong>Tính năng đang được phát triển</strong> - Module dự báo vật tư tiên tiến
-                </p>
-                <p style="color: #78350F; font-size: 0.95em; margin: 10px 0 0 0; font-style: italic;">
-                    Đang training ML models • Kết nối ERP systems • Pilot program
-                </p>
-            </div>
-        </div>
-    </div>
-    """)
-
-def tao_tab_du_bao_chinh():
-    """Tạo tab chính cho dự báo bán hàng"""
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>⚙️ Cài Đặt</h3></div>")
-            
-            lua_chon_dropdown = gr.Dropdown(
-                choices=list(TRUONG_HOP_DEMO.keys()),
-                value=list(TRUONG_HOP_DEMO.keys())[0],
-                label="🛍️ Chọn Sản Phẩm",
-                info="Mỗi sản phẩm có insight riêng",
-                elem_classes=["tech-border"]
-            )
-            
-            chu_ky_dropdown = gr.Dropdown(
-                choices=["3 tháng", "6 tháng", "1 năm"],
-                value="6 tháng",
-                label="📅 Chu Kỳ Dự Báo",
-                info="Thời gian dự báo tương lai",
-                elem_classes=["tech-border"]
-            )
-            
-            nut_du_bao = gr.Button(
-                "🚀 Tạo Dự Báo AI",
-                variant="primary",
-                size="lg",
-                elem_classes=["btn-modern", "pulse-animation"]
-            )
-            
-            hien_thi_thong_tin = gr.HTML(
-                value=cap_nhat_thong_tin_case(list(TRUONG_HOP_DEMO.keys())[0]),
-                elem_classes=["floating", "glass-card"]
-            )
-
-    with gr.Row():
-        with gr.Column():
-            gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>📈 Kết Quả Dự Báo</h3></div>")
-            
-            che_do_xem = gr.Radio(
-                choices=[("📅 Theo Ngày", "ngày"), ("📆 Theo Tuần", "tháng"), ("🗓️ Theo Tháng", "năm")],
-                value="ngày",
-                label="📊 Chế Độ Hiển Thị",
-                info="Thay đổi cách hiển thị biểu đồ",
-                elem_classes=["tech-border"]
-            )
-            
-            bieu_do_du_bao = gr.Plot(
-                label="Biểu Đồ Dự Báo Bán Hàng",
-                elem_classes=["plot-container", "glass-card", "neon-border"],
-                elem_id="chart-target"
-            )
-            
-            loading_panel = gr.HTML(value="", elem_id="loading-panel")
-
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>📊 Thống Kê</h3></div>")
-            hien_thi_tom_tat = gr.HTML()
-        
-        with gr.Column(scale=1):
-            gr.HTML("<div class='feature-box floating' style='text-align: center;'><h3>🎯 Chiến Lược AI</h3></div>")
-            
-            nut_streaming = gr.Button(
-                "🤖 Tạo Chiến Lược AI (Streaming)",
-                variant="secondary", 
-                size="sm",
-                elem_classes=["btn-modern"],
-                visible=False
-            )
-            
-            hien_thi_bao_cao = gr.Markdown()
-
-    # Event handlers
-    def xu_ly_streaming(lua_chon_case):
-        if lua_chon_case is None:
-            return "# 🎯 CHIẾN LƯỢC ĐỀ XUẤT\n\n📊 **Chọn mặt hàng để tạo chiến lược**"
-        try:
-            for partial_text in tao_streaming_text(lua_chon_case):
-                yield partial_text
-        except Exception as e:
-            yield f"# ❌ Lỗi\n\n{str(e)}"
-
-    lua_chon_dropdown.change(
-        fn=lambda case: [cap_nhat_thong_tin_case(case), gr.update(visible=case is not None)],
-        inputs=[lua_chon_dropdown],
-        outputs=[hien_thi_thong_tin, nut_streaming]
-    )
-
-    evt0 = nut_du_bao.click(
-        fn=lambda: "",
-        outputs=[loading_panel]
-    )
-
-    evt1 = evt0.then(
-        fn=hien_loading_tung_buoc,
-        outputs=[loading_panel],
-        show_progress=False,
-    )
-
-    evt1.then(
-        fn=tinh_toan_ket_qua,
-        inputs=[lua_chon_dropdown, chu_ky_dropdown, che_do_xem],
-        outputs=[bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, loading_panel],
-        show_progress=False,
-    )
-    
-    nut_streaming.click(
-        fn=xu_ly_streaming,
-        inputs=[lua_chon_dropdown],
-        outputs=[hien_thi_bao_cao],
-        show_progress=False
-    )
-    
-    che_do_xem.change(
-        fn=lambda case, chu_ky, mode: [
-            tao_bieu_do_du_doan(case, chu_ky, mode) if case else tao_bieu_do_mac_dinh(), 
-            tao_thong_tin_tom_tat(case, chu_ky, mode) if case else tao_tom_tat_mac_dinh()
-        ],
-        inputs=[lua_chon_dropdown, chu_ky_dropdown, che_do_xem],
-        outputs=[bieu_do_du_bao, hien_thi_tom_tat]
-    )
-    
-    return (lua_chon_dropdown, bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, hien_thi_thong_tin)
-
-def tao_ung_dung_voi_tabs():
-    """Tạo ứng dụng Gradio với tabs"""
-    
-    with gr.Blocks(
-        title="🚀 Hệ Thống Dự Báo Bán Hàng AI - FoxAI",
-        theme=gr.themes.Soft(),
-        css=custom_css
-    ) as demo:
-        
-        # Header
-        gr.HTML(f"""
-        <div class="header-container">
-            <div style="text-align: center; margin-bottom: 20px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI Logo" class="foxai-logo"/>
-            </div>
-            <div class="header-title">
-                🚀 HỆ THỐNG DỰ BÁO AI
-            </div>
-            <p style="font-size: 1.1em; color: rgba(255,255,255,0.95) !important; margin: 15px auto; font-weight: 500; line-height: 1.5; max-width: 600px; text-align: center;">
-                Phân tích thông minh với công nghệ <strong style="color: white !important;">FoxAI</strong>
-            </p>
-            <div class="system-status">
-                🟢 Hoạt động • 95.8% độ chính xác • Powered by FoxAI
-            </div>
-        </div>
-        """)
-        
-        # Tabs
-        with gr.Tabs() as tabs:
-            with gr.TabItem("📈 Dự Báo Bán Hàng", elem_id="main-tab"):
-                components = tao_tab_du_bao_chinh()
-                lua_chon_dropdown, bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao, hien_thi_thong_tin = components
-            
-            with gr.TabItem("🧾 Compliance & Age‑Gate Radar", elem_id="compliance-tab"):
-                tao_tab_compliance()
-            
-            with gr.TabItem("🚚 Route‑to‑Market Optimizer", elem_id="route-tab"):
-                tao_tab_route_optimizer()
-            
-            with gr.TabItem("📦 Material Predict", elem_id="material-tab"):
-                tao_tab_material_predict()
-
-        # Auto load cho tab chính
-        demo.load(
-            fn=lambda: [
-                cap_nhat_thong_tin_case(list(TRUONG_HOP_DEMO.keys())[0]),
-                tao_bieu_do_mac_dinh(),
-                tao_tom_tat_mac_dinh(),
-                """# 🎯 CHIẾN LƯỢC ĐỀ XUẤT
-
-## 📊 **Sẵn Sàng Phân Tích**
-
-**Nhấn 'Tạo Dự Báo AI' để xem phân tích chi tiết**
-
-Hệ thống AI sẽ tạo chiến lược đề xuất với:
-
-• **Phân tích xu hướng** thị trường  
-• **Insights chi tiết** từ dữ liệu  
-• **Khuyến nghị cụ thể** để tối ưa doanh thu  
-• **Roadmap hành động** rõ ràng  
-
-*🤖 Powered by FoxAI Intelligence*"""
-            ],
-            outputs=[hien_thi_thong_tin, bieu_do_du_bao, hien_thi_tom_tat, hien_thi_bao_cao]
-        )
-        
-        # Footer
-        gr.HTML(f"""
-        <div class='info-card' style="margin-top: 30px; text-align: center;">
-            <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 25px;">
-                <img src="{FOXAI_LOGO_URL}" alt="FoxAI" style="height: 40px; margin-right: 15px;"/>
-                <h3 style="color: #1A5F91; margin: 0;">💡 Hệ Thống FoxAI</h3>
-            </div>
-            
-            <div style="text-align: center; margin: 25px 0; padding: 20px; background: linear-gradient(135deg, rgba(26, 95, 145, 0.1), rgba(139, 139, 139, 0.1)); border-radius: 15px; border: 2px solid #1A5F91;">
-                <p style="color: #1A5F91; font-weight: 700; margin: 0; font-size: 1.1em;">
-                    🦊 <strong>Powered by FoxAI</strong> • 🇻🇳 Made in Vietnam • 🤖 Advanced AI
-                </p>
-                <p style="color: #334155; margin: 8px 0 0 0; font-size: 0.9em; font-weight: 500;">
-                    YOUR TRUSTED AI PARTNER
-                </p>
-            </div>
-        </div>
-        """)
-    
-    return demo
-
-if __name__ == "__main__":
-    demo = tao_ung_dung_voi_tabs()
-    demo.launch(
-        share=True,
-        server_name="0.0.0.0",
-        server_port=7860,
-        show_error=True
-    )