Update 35

pages/multiagent_system.py

@@ -29,71 +29,184 @@ def display_system_architecture():
     Hiển thị kiến trúc hệ thống
     """
     st.markdown("""
-    <div style='background: #667eea; 
+    <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                 padding: 2rem; 
-                border-radius: 10px; 
+                border-radius: 15px; 
                 margin-bottom: 2rem;
-                text-align: center;
-                color: white;'>
-        <h1 style='margin-bottom: 1rem; font-size: 2.5rem;'>
+                text-align: center;'>
+        <h1 style='color: white; margin-bottom: 1rem; font-size: 2.5rem;'>
             🤖 An Adaptive Multi-Agent Tutoring System
         </h1>
-        <p style='font-size: 1.2rem; margin-bottom: 0; opacity: 0.9;'>
+        <p style='color: #f0f0f0; font-size: 1.2rem; margin-bottom: 0;'>
             Hệ thống gia sư thông minh với kiến trúc đa tác nhân thích ứng
         </p>
     </div>
     """, unsafe_allow_html=True)
     
+    # Placeholder cho hình ảnh system architecture
     st.markdown("### 📊 Kiến trúc Hệ thống")
     
-    # Container cho hình ảnh đơn giản
-    col1, col2, col3 = st.columns([1, 3, 1])
-    with col2:
-        try:
+    # Container cho hình ảnh với styling đẹp
+    with st.container():
+        col1, col2, col3 = st.columns([1, 3, 1])
+        with col2:
             st.image("images/system.jpg", use_container_width=True)
-        except:
-            st.info("📊 Hình ảnh kiến trúc hệ thống: images/system.jpg")
 
 def display_agents():
     """
-    Hiển thị chi tiết từng Agent với giao diện đơn giản
+    Hiển thị chi tiết từng Agent với giao diện được tối ưu hóa
     """
-    st.markdown("## 🤖 Chi tiết các AI Agents")
-    st.markdown("Khám phá hệ sinh thái AI agents thông minh và chuyên biệt")
+    # Header section
+    st.markdown("""
+    <div style="margin: 3rem 0 2rem 0;">
+        <h2 style="text-align: center; color: #333; margin-bottom: 0.5rem; font-size: 2.5rem;">
+            🤖 Chi tiết các AI Agents
+        </h2>
+        <p style="text-align: center; color: #666; font-size: 1.1rem; margin-bottom: 2rem;">
+            Khám phá hệ sinh thái AI agents thông minh và chuyên biệt
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
     
-    # CSS đơn giản
+    # CSS được tối ưu hóa - loại bỏ các effect phức tạp
     st.markdown("""
     <style>
-    .agent-card {
+    .agent-container {
         background: white;
-        border-radius: 10px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        margin-bottom: 1.5rem;
-        border: 1px solid #e0e0e0;
+        border-radius: 15px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        margin-bottom: 2rem;
+        overflow: hidden;
+        border: 1px solid rgba(0,0,0,0.05);
     }
+    
     .agent-header {
-        padding: 1.5rem;
+        padding: 2rem;
         color: white;
-        border-radius: 10px 10px 0 0;
     }
+    
+    .agent-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1rem;
+        font-size: 1.8rem;
+        font-weight: 600;
+    }
+    
+    .agent-title-icon {
+        font-size: 2.5rem;
+        margin-right: 1rem;
+    }
+    
+    .agent-role {
+        background: rgba(255,255,255,0.2);
+        padding: 1rem;
+        border-radius: 10px;
+        font-size: 1.1rem;
+        border: 1px solid rgba(255,255,255,0.2);
+    }
+    
     .agent-body {
+        padding: 2rem;
+        background: #fafafa;
+    }
+    
+    .agent-features {
+        background: white;
+        border-radius: 12px;
         padding: 1.5rem;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        border: 1px solid rgba(0,0,0,0.05);
+    }
+    
+    .features-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1.5rem;
+        font-size: 1.3rem;
+        font-weight: 600;
+        color: #333;
     }
+    
+    .features-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    
     .feature-item {
-        padding: 0.5rem 0;
-        border-bottom: 1px solid #f0f0f0;
+        padding: 0.8rem 0;
+        border-bottom: 1px solid rgba(0,0,0,0.05);
+        display: flex;
+        align-items: flex-start;
     }
+    
     .feature-item:last-child {
         border-bottom: none;
     }
+    
+    .feature-bullet {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 1rem;
+        margin-top: 0.5rem;
+        flex-shrink: 0;
+    }
+    
+    .feature-text {
+        flex: 1;
+        line-height: 1.6;
+    }
+    
+    .feature-name {
+        font-weight: 600;
+        margin-right: 0.5rem;
+    }
+    
+    .image-placeholder {
+        background: rgba(255,255,255,0.9);
+        border: 2px dashed #ddd;
+        border-radius: 12px;
+        padding: 2rem;
+        text-align: center;
+        height: 250px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .placeholder-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        opacity: 0.7;
+    }
+    
+    .placeholder-text {
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: #333;
+    }
+    
+    .placeholder-path {
+        font-size: 0.9rem;
+        color: #666;
+        font-family: monospace;
+        background: rgba(0,0,0,0.05);
+        padding: 0.3rem 0.8rem;
+        border-radius: 15px;
+    }
     </style>
     """, unsafe_allow_html=True)
     
-    # Định nghĩa thông tin các agents (đơn giản hóa)
+    # Định nghĩa thông tin các agents
     agents = [
         {
-            "name": "Agent 1: Informer Agent",
+            "number": "1",
+            "name": "Informer Agent",
             "icon": "🧠",
+            "gradient": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
             "color": "#667eea",
             "role": "Chuyên gia giải toán với khả năng truy xuất thông tin thông minh",
             "image": "images/informer_agent.png",
@@ -105,8 +218,10 @@ def display_agents():
             ]
         },
         {
-            "name": "Agent 2: Practice Agent",
+            "number": "2",
+            "name": "Practice Agent",
             "icon": "📝",
+            "gradient": "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
             "color": "#f093fb",
             "role": "Chuyên gia tạo bài tập và đề xuất tài liệu học tập",
             "image": "images/practice_agent.png",
@@ -118,8 +233,10 @@ def display_agents():
             ]
         },
         {
-            "name": "Agent 3: Insight Agent",
+            "number": "3",
+            "name": "Insight Agent",
             "icon": "🔍",
+            "gradient": "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
             "color": "#4facfe",
             "role": "Chuyên gia phân tích tâm lý và học tập của học sinh",
             "image": "images/insight_agent.png",
@@ -131,8 +248,10 @@ def display_agents():
             ]
         },
         {
-            "name": "Agent 4: Verifier Agent",
+            "number": "4",
+            "name": "Verifier Agent",
             "icon": "✅",
+            "gradient": "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
             "color": "#a8edea",
             "role": "Chuyên gia kiểm tra chất lượng và tính chính xác",
             "image": "images/verifier_agent.png",
@@ -144,8 +263,10 @@ def display_agents():
             ]
         },
         {
-            "name": "Agent 5: Tutor Agent (Orchestrator)",
+            "number": "5",
+            "name": "Tutor Agent (Orchestrator)",
             "icon": "🎯",
+            "gradient": "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
             "color": "#fcb69f",
             "role": "Trung tâm điều phối và quản lý toàn bộ hệ thống",
             "image": "images/tutor_agent.png",
@@ -160,17 +281,18 @@ def display_agents():
     ]
     
     # Hiển thị từng agent
-    for agent in agents:
+    for i, agent in enumerate(agents):
+        # Container chính
         st.markdown(f"""
-        <div class="agent-card">
-            <div class="agent-header" style="background: {agent['color']};">
-                <h3 style="margin: 0; display: flex; align-items: center;">
-                    <span style="font-size: 2rem; margin-right: 1rem;">{agent['icon']}</span>
-                    {agent['name']}
-                </h3>
-                <p style="margin: 0.5rem 0 0 0; opacity: 0.9;">
+        <div class="agent-container">
+            <div class="agent-header" style="background: {agent['gradient']};">
+                <div class="agent-title">
+                    <span class="agent-title-icon">{agent['icon']}</span>
+                    <span>Agent {agent['number']}: {agent['name']}</span>
+                </div>
+                <div class="agent-role">
                     <strong>Vai trò:</strong> {agent['role']}
-                </p>
+                </div>
             </div>
         """, unsafe_allow_html=True)
         
@@ -180,36 +302,60 @@ def display_agents():
         with col1:
             st.markdown(f"""
             <div class="agent-body">
-                <h4>🔧 Chức năng chính</h4>
+                <div class="agent-features">
+                    <div class="features-title">
+                        <span style="margin-right: 0.5rem;">🔧</span>
+                        <span>Chức năng chính</span>
+                    </div>
+                    <ul class="features-list">
             """, unsafe_allow_html=True)
             
             for feature in agent['features']:
                 parts = feature.split(': ', 1)
                 if len(parts) == 2:
                     st.markdown(f"""
-                    <div class="feature-item">
-                        <strong style="color: {agent['color']};">{parts[0]}:</strong> {parts[1]}
-                    </div>
+                    <li class="feature-item">
+                        <div class="feature-bullet" style="background: {agent['color']};"></div>
+                        <div class="feature-text">
+                            <span class="feature-name" style="color: {agent['color']};">{parts[0]}:</span>
+                            <span>{parts[1]}</span>
+                        </div>
+                    </li>
                     """, unsafe_allow_html=True)
                 else:
                     st.markdown(f"""
-                    <div class="feature-item">{feature}</div>
+                    <li class="feature-item">
+                        <div class="feature-bullet" style="background: {agent['color']};"></div>
+                        <div class="feature-text">{feature}</div>
+                    </li>
                     """, unsafe_allow_html=True)
             
-            st.markdown("</div>", unsafe_allow_html=True)
+            st.markdown("""
+                    </ul>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
         
         with col2:
             try:
-                st.image(agent['image'], use_container_width=True, caption=agent['name'])
+                st.image(agent['image'], use_container_width=True, caption=f"Agent {agent['number']}: {agent['name']}")
             except:
                 st.markdown(f"""
-                <div style="padding: 1rem; text-align: center; background: #f8f9fa; border-radius: 8px; margin: 1rem;">
-                    <div style="font-size: 3rem; color: {agent['color']}; margin-bottom: 0.5rem;">{agent['icon']}</div>
-                    <small>Image: {agent['image']}</small>
+                <div class="agent-body">
+                    <div class="image-placeholder">
+                        <div class="placeholder-icon" style="color: {agent['color']};">{agent['icon']}</div>
+                        <div class="placeholder-text">Agent {agent['number']} Image</div>
+                        <div class="placeholder-path">{agent['image']}</div>
+                    </div>
                 </div>
                 """, unsafe_allow_html=True)
         
+        # Đóng container
         st.markdown("</div>", unsafe_allow_html=True)
+        
+        # Spacing giữa các agents
+        if i < len(agents) - 1:
+            st.markdown("<div style='margin: 2rem 0;'></div>", unsafe_allow_html=True)
 
 def display_system_components():
     """
@@ -218,33 +364,36 @@ def display_system_components():
     st.markdown("## 🏗️ Các Thành phần Hệ thống")
     
     # Orchestration Hub
-    st.markdown("""
-    <div style='background: #56ab2f; 
-                padding: 1.5rem; 
-                border-radius: 8px; 
-                margin-bottom: 1rem;
-                color: white;'>
-        <h3 style='margin-bottom: 0.5rem;'>🎯 Orchestration Hub</h3>
-        <p style='margin: 0; opacity: 0.9;'>
-            Trung tâm điều phối và quản lý tất cả các tác nhân trong hệ thống
-        </p>
-    </div>
-    """, unsafe_allow_html=True)
+    with st.container():
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%); 
+                    padding: 1.5rem; 
+                    border-radius: 10px; 
+                    margin-bottom: 1rem;'>
+            <h3 style='color: white; margin-bottom: 0.5rem;'>
+                🎯 Orchestration Hub
+            </h3>
+            <p style='color: #f0f0f0; margin-bottom: 0;'>
+                Trung tâm điều phối và quản lý tất cả các tác nhân trong hệ thống
+            </p>
+        </div>
+        """, unsafe_allow_html=True)
     
     # Hai flows chính
     col1, col2 = st.columns(2)
     
     with col1:
         st.markdown("""
-        <div style='background: #ff9a9e; 
+        <div style='background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); 
                     padding: 1.5rem; 
-                    border-radius: 8px; 
-                    margin-bottom: 1rem;
-                    color: white;'>
-            <h3 style='margin-bottom: 1rem;'>📝 Flow A: Problem-Solving</h3>
-            <div style='background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 5px;'>
-                <h4 style='margin-bottom: 0.5rem;'>RAG & Verification</h4>
-                <ul style='margin: 0; padding-left: 1.2rem;'>
+                    border-radius: 10px; 
+                    margin-bottom: 1rem;'>
+            <h3 style='color: #8B0000; margin-bottom: 1rem;'>
+                📝 Flow A: Problem-Solving
+            </h3>
+            <div style='background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 8px;'>
+                <h4 style='color: #8B0000; margin-bottom: 0.5rem;'>RAG & Verification</h4>
+                <ul style='color: #2F4F4F; margin-bottom: 0;'>
                     <li>Xử lý truy vấn RAG</li>
                     <li>Giải quyết yêu cầu</li>
                     <li>Xác thực và soạn thảo</li>
@@ -256,15 +405,16 @@ def display_system_components():
     
     with col2:
         st.markdown("""
-        <div style='background: #a8edea; 
+        <div style='background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); 
                     padding: 1.5rem; 
-                    border-radius: 8px; 
-                    margin-bottom: 1rem;
-                    color: #2F4F4F;'>
-            <h3 style='margin-bottom: 1rem;'>🎯 Flow B: Personalization</h3>
-            <div style='background: rgba(255,255,255,0.5); padding: 1rem; border-radius: 5px;'>
-                <h4 style='margin-bottom: 0.5rem;'>Learning Engine</h4>
-                <ul style='margin: 0; padding-left: 1.2rem;'>
+                    border-radius: 10px; 
+                    margin-bottom: 1rem;'>
+            <h3 style='color: #2F4F4F; margin-bottom: 1rem;'>
+                🎯 Flow B: Personalization
+            </h3>
+            <div style='background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 8px;'>
+                <h4 style='color: #2F4F4F; margin-bottom: 0.5rem;'>Learning Engine</h4>
+                <ul style='color: #2F4F4F; margin-bottom: 0;'>
                     <li>Phân tích thông tin người dùng</li>
                     <li>Gửi chủ đề phù hợp</li>
                     <li>Truy vấn dữ liệu</li>
@@ -276,38 +426,43 @@ def display_system_components():
 
 def display_workflow_details():
     """
-    Hiển thị chi tiết quy trình làm việc
+    Hiển thị chi tiết quy trình làm việc - được tối ưu hóa
     """
     st.markdown("## 🔄 Quy trình Hoạt động")
     
     # Workflow steps
     workflow_steps = [
         {
-            "title": "1. Nhận câu hỏi từ học sinh",
+            "step": "1",
+            "title": "Nhận câu hỏi từ học sinh",
             "description": "Hệ thống nhận và phân tích câu hỏi từ người dùng",
             "icon": "❓",
             "color": "#FF6B6B"
         },
         {
-            "title": "2. Orchestration Hub phân tích", 
+            "step": "2", 
+            "title": "Orchestration Hub phân tích",
             "description": "Trung tâm điều phối quyết định luồng xử lý phù hợp",
             "icon": "🎯",
             "color": "#4ECDC4"
         },
         {
-            "title": "3. Xử lý song song",
+            "step": "3",
+            "title": "Xử lý song song",
             "description": "Flow A giải quyết vấn đề, Flow B cá nhân hóa trải nghiệm",
             "icon": "⚡",
             "color": "#45B7D1"
         },
         {
-            "title": "4. Cập nhật hồ sơ học sinh",
+            "step": "4",
+            "title": "Cập nhật hồ sơ học sinh",
             "description": "Hệ thống cập nhật thông tin học tập và điểm yếu",
             "icon": "📊",
             "color": "#96CEB4"
         },
         {
-            "title": "5. Trả lời cuối cùng",
+            "step": "5",
+            "title": "Trả lời cuối cùng",
             "description": "Cung cấp câu trả lời được xác thực và cá nhân hóa",
             "icon": "✅",
             "color": "#FECA57"
@@ -315,33 +470,36 @@ def display_workflow_details():
     ]
     
     for i, step in enumerate(workflow_steps):
+        # Tạo layout cho từng bước
         col1, col2 = st.columns([1, 4])
         
         with col1:
             st.markdown(f"""
-            <div style='width: 60px; 
-                        height: 60px; 
+            <div style='width: 70px; 
+                        height: 70px; 
                         background: {step['color']}; 
                         border-radius: 50%; 
                         display: flex; 
                         align-items: center; 
                         justify-content: center; 
-                        margin: 0 auto;
-                        color: white;
-                        font-size: 1.5rem;'>
-                {step['icon']}
+                        margin: 0 auto;'>
+                <span style='font-size: 1.8rem;'>{step['icon']}</span>
             </div>
             """, unsafe_allow_html=True)
         
         with col2:
             st.markdown(f"""
-            <div style='background: #f8f9fa; 
+            <div style='background: {step['color']}20; 
                         padding: 1rem; 
-                        border-radius: 8px; 
+                        border-radius: 10px; 
                         margin-bottom: 1rem;
                         border-left: 4px solid {step['color']};'>
-                <h4 style='color: #333; margin-bottom: 0.5rem;'>{step['title']}</h4>
-                <p style='color: #666; margin: 0;'>{step['description']}</p>
+                <h4 style='color: #333; margin-bottom: 0.5rem;'>
+                    Bước {step['step']}: {step['title']}
+                </h4>
+                <p style='color: #666; margin-bottom: 0;'>
+                    {step['description']}
+                </p>
             </div>
             """, unsafe_allow_html=True)
         
@@ -363,37 +521,77 @@ def display_technical_features():
     
     with col1:
         st.markdown("""
-        **🔍 RAG (Retrieval-Augmented Generation)**
-        - Truy xuất thông tin từ cơ sở dữ liệu
-        - Tăng cường khả năng sinh text
-        - Đảm bảo tính chính xác cao
-        - Xác thực câu trả lời
+        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                    padding: 1.5rem; 
+                    border-radius: 10px; 
+                    margin-bottom: 1rem;'>
+            <h4 style='color: white; margin-bottom: 1rem;'>
+                🔍 RAG (Retrieval-Augmented Generation)
+            </h4>
+            <ul style='color: #f0f0f0; margin-bottom: 0;'>
+                <li>Truy xuất thông tin từ cơ sở dữ liệu</li>
+                <li>Tăng cường khả năng sinh text</li>
+                <li>Đảm bảo tính chính xác cao</li>
+                <li>Xác thực câu trả lời</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
         
-        **🎯 Personalization Engine**
-        - Phân tích điểm yếu học sinh
-        - Tạo bài tập cá nhân hóa
-        - Theo dõi tiến độ học tập
-        - Đề xuất nội dung phù hợp
-        """)
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
+                    padding: 1.5rem; 
+                    border-radius: 10px; 
+                    margin-bottom: 1rem;'>
+            <h4 style='color: white; margin-bottom: 1rem;'>
+                🎯 Personalization Engine
+            </h4>
+            <ul style='color: #f0f0f0; margin-bottom: 0;'>
+                <li>Phân tích điểm yếu học sinh</li>
+                <li>Tạo bài tập cá nhân hóa</li>
+                <li>Theo dõi tiến độ học tập</li>
+                <li>Đề xuất nội dung phù hợp</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
     
     with col2:
         st.markdown("""
-        **🧠 Adaptive Learning**
-        - Học thích ứng theo năng lực
-        - Điều chỉnh độ khó tự động
-        - Phản hồi thời gian thực
-        - Tối ưu hóa trải nghiệm
+        <div style='background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
+                    padding: 1.5rem; 
+                    border-radius: 10px; 
+                    margin-bottom: 1rem;'>
+            <h4 style='color: white; margin-bottom: 1rem;'>
+                🧠 Adaptive Learning
+            </h4>
+            <ul style='color: #f0f0f0; margin-bottom: 0;'>
+                <li>Học thích ứng theo năng lực</li>
+                <li>Điều chỉnh độ khó tự động</li>
+                <li>Phản hồi thời gian thực</li>
+                <li>Tối ưu hóa trải nghiệm</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
         
-        **📊 User Profile Management**
-        - Lưu trữ lịch sử học tập
-        - Phân tích pattern học tập
-        - Cập nhật thông tin real-time
-        - Báo cáo tiến độ chi tiết
-        """)
+        st.markdown("""
+        <div style='background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); 
+                    padding: 1.5rem; 
+                    border-radius: 10px; 
+                    margin-bottom: 1rem;'>
+            <h4 style='color: white; margin-bottom: 1rem;'>
+                📊 User Profile Management
+            </h4>
+            <ul style='color: #f0f0f0; margin-bottom: 0;'>
+                <li>Lưu trữ lịch sử học tập</li>
+                <li>Phân tích pattern học tập</li>
+                <li>Cập nhật thông tin real-time</li>
+                <li>Báo cáo tiến độ chi tiết</li>
+            </ul>
+        </div>
+        """, unsafe_allow_html=True)
 
 def display_benefits():
     """
-    Hiển thị lợi ích của hệ thống
+    Hiển thị lợi ích của hệ thống - được tối ưu hóa
     """
     st.markdown("## 🌟 Lợi ích của Hệ thống")
     
@@ -401,48 +599,84 @@ def display_benefits():
         {
             "icon": "🎯",
             "title": "Học tập cá nhân hóa",
-            "description": "Mỗi học sinh nhận được trải nghiệm học tập được tùy chỉnh theo nhu cầu riêng"
+            "description": "Mỗi học sinh nhận được trải nghiệm học tập được tùy chỉnh theo nhu cầu riêng",
+            "color": "#FF6B6B"
         },
         {
             "icon": "⚡",
             "title": "Phản hồi tức thì",
-            "description": "Hệ thống đa tác nhân cho phép xử lý song song, đưa ra phản hồi nhanh chóng"
+            "description": "Hệ thống đa tác nhân cho phép xử lý song song, đưa ra phản hồi nhanh chóng",
+            "color": "#4ECDC4"
         },
         {
             "icon": "🧠",
             "title": "Học thích ứng thông minh",
-            "description": "AI phân tích và điều chỉnh phương pháp dạy theo tiến bộ của từng học sinh"
+            "description": "AI phân tích và điều chỉnh phương pháp dạy theo tiến bộ của từng học sinh",
+            "color": "#45B7D1"
         },
         {
             "icon": "📊",
             "title": "Theo dõi tiến độ chi tiết",
-            "description": "Báo cáo và phân tích tiến độ học tập giúp tối ưu hóa quá trình học"
+            "description": "Báo cáo và phân tích tiến độ học tập giúp tối ưu hóa quá trình học",
+            "color": "#96CEB4"
         },
         {
             "icon": "🔍",
             "title": "Độ chính xác cao",
-            "description": "Hệ thống RAG và xác thực đảm bảo thông tin chính xác và đáng tin cậy"
+            "description": "Hệ thống RAG và xác thực đảm bảo thông tin chính xác và đáng tin cậy",
+            "color": "#FECA57"
         },
         {
             "icon": "🌐",
             "title": "Mở rộng dễ dàng",
-            "description": "Kiến trúc đa tác nhân cho phép mở rộng và thêm tính năng mới linh hoạt"
+            "description": "Kiến trúc đa tác nhân cho phép mở rộng và thêm tính năng mới linh hoạt",
+            "color": "#FF9FF3"
         }
     ]
     
-    # Hiển thị benefits trong lưới đơn giản
-    col1, col2 = st.columns(2)
-    
-    for i, benefit in enumerate(benefits):
-        column = col1 if i % 2 == 0 else col2
-        with column:
-            st.markdown(f"""
-            **{benefit['icon']} {benefit['title']}**
-            
-            {benefit['description']}
-            
-            ---
-            """)
+    # Hiển thị benefits trong lưới 2x3
+    for i in range(0, len(benefits), 2):
+        col1, col2 = st.columns(2)
+        
+        with col1:
+            if i < len(benefits):
+                benefit = benefits[i]
+                st.markdown(f"""
+                <div style='background: {benefit['color']}20; 
+                            padding: 1.5rem; 
+                            border-radius: 10px; 
+                            margin-bottom: 1rem;
+                            border-left: 4px solid {benefit['color']};
+                            height: 130px;'>
+                    <div style='display: flex; align-items: center; margin-bottom: 0.5rem;'>
+                        <span style='font-size: 1.8rem; margin-right: 0.5rem;'>{benefit['icon']}</span>
+                        <h4 style='color: #333; margin: 0;'>{benefit['title']}</h4>
+                    </div>
+                    <p style='color: #666; margin: 0; font-size: 0.9rem;'>
+                        {benefit['description']}
+                    </p>
+                </div>
+                """, unsafe_allow_html=True)
+        
+        with col2:
+            if i + 1 < len(benefits):
+                benefit = benefits[i + 1]
+                st.markdown(f"""
+                <div style='background: {benefit['color']}20; 
+                            padding: 1.5rem; 
+                            border-radius: 10px; 
+                            margin-bottom: 1rem;
+                            border-left: 4px solid {benefit['color']};
+                            height: 130px;'>
+                    <div style='display: flex; align-items: center; margin-bottom: 0.5rem;'>
+                        <span style='font-size: 1.8rem; margin-right: 0.5rem;'>{benefit['icon']}</span>
+                        <h4 style='color: #333; margin: 0;'>{benefit['title']}</h4>
+                    </div>
+                    <p style='color: #666; margin: 0; font-size: 0.9rem;'>
+                        {benefit['description']}
+                    </p>
+                </div>
+                """, unsafe_allow_html=True)
 
 def main():
     """
@@ -466,19 +700,18 @@ def main():
     # Hiển thị lợi ích
     display_benefits()
     
-    # Footer đơn giản
+    # Footer
     st.markdown("---")
     st.markdown("""
     <div style='text-align: center; 
-                background: #667eea; 
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                 padding: 2rem; 
-                border-radius: 10px; 
-                margin-top: 2rem;
-                color: white;'>
-        <h3 style='margin-bottom: 1rem;'>
+                border-radius: 15px; 
+                margin-top: 2rem;'>
+        <h3 style='color: white; margin-bottom: 1rem;'>
             🚀 Trải nghiệm Hệ thống Multi-Agent ngay hôm nay!
         </h3>
-        <p style='font-size: 1.1rem; margin: 0; opacity: 0.9;'>
+        <p style='color: #f0f0f0; font-size: 1.1rem; margin-bottom: 0;'>
             Hệ thống gia sư AI thông minh với kiến trúc đa tác nhân tiên tiến, 
             mang đến trải nghiệm học tập cá nhân hóa và hiệu quả nhất.
         </p>