Update app.py

app.py

@@ -21,6 +21,118 @@ st.set_page_config(
     layout="wide"
 )
 
+# --- START OF NEW THEME SECTION ---
+
+def load_css():
+    """Tải CSS tùy chỉnh để tạo giao diện 'thời tiết'."""
+    st.markdown("""
+        <style>
+        /* ===== FONT CHUNG ===== */
+        /* Sử dụng font hệ thống mượt mà hơn */
+        .stApp, .stSidebar {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        }
+
+        /* ===== NỀN CHÍNH (MAIN BACKGROUND) ===== */
+        /* Tạo hiệu ứng gradient "bầu trời" */
+        [data-testid="stAppViewContainer"] {
+            background-image: linear-gradient(to bottom, #B0E0E6, #F0F8FF); /* Từ xanh nhạt (Powder Blue) đến trắng xanh (Alice Blue) */
+            background-attachment: fixed;
+            background-size: cover;
+        }
+
+        /* ===== THANH SIDEBAR ===== */
+        /* Làm sidebar có nền mờ (frosty glass) */
+        [data-testid="stSidebar"] {
+            background-color: rgba(255, 255, 255, 0.7) !important;
+            backdrop-filter: blur(10px);
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        /* Chữ trong sidebar */
+        [data-testid="stSidebar"] .st-emotion-cache-16txtl3 { 
+             color: #0E2A47; /* Xanh đậm */
+        }
+        
+        /* Nút radio được chọn trong sidebar */
+        .stRadio label[data-baseweb="radio"] div[data-checked="true"] {
+            background-color: #005aa7 !important; /* Xanh đậm khi được chọn */
+        }
+
+        /* ===== THẺ DỰ BÁO (METRIC CARDS) ===== */
+        /* Đây là phần quan trọng nhất */
+        div[data-testid="stMetric"] {
+            background-color: rgba(255, 255, 255, 0.85); /* Nền trắng mờ */
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 12px; /* Bo góc */
+            padding: 20px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ */
+            backdrop-filter: blur(5px);
+            transition: transform 0.2s ease;
+        }
+        /* Hiệu ứng khi di chuột vào thẻ */
+        div[data-testid="stMetric"]:hover {
+             transform: translateY(-3px);
+             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Tiêu đề của thẻ (Forecast for...) */
+        div[data-testid="stMetricLabel"] p {
+            font-size: 1.1rem !important;
+            font-weight: 600 !important;
+            color: #333333; /* Màu xám đậm */
+        }
+
+        /* Giá trị nhiệt độ dự báo */
+        div[data-testid="stMetricValue"] {
+            font-size: 2.8rem !important;
+            font-weight: 700 !important;
+            color: #004080; /* Màu xanh navy đậm */
+        }
+        
+        /* Giá trị "Actual" (delta) */
+        div[data-testid="stMetricDelta"] {
+            font-size: 1rem !important;
+            font-weight: 600 !important;
+            color: #555555; /* Màu xám vừa */
+        }
+        
+        /* ===== Tiêu đề (H1, H2, H3) ===== */
+        h1 {
+            color: #004080; /* Xanh navy đậm */
+            text-shadow: 1px 1px 3px rgba(255,255,255,0.5);
+        }
+        h2, h3 {
+            color: #005aa7; /* Xanh đậm */
+        }
+
+        /* ===== EXPANDERS (Training Set Overview) ===== */
+        div[data-testid="stExpander"] {
+             background-color: rgba(255, 255, 255, 0.😎 !important;
+             border-radius: 10px !important;
+             border: 1px solid rgba(0, 0, 0, 0.1) !important;
+        }
+        
+        /* ===== BIỂU ĐỒ (PLOTLY) ===== */
+        /* Làm nền biểu đồ trong suốt để hòa vào nền gradient */
+        .plotly-graph-div {
+            border-radius: 8px;
+        }
+        
+        /* Làm nền bảng (dataframe) đẹp hơn */
+        .stDataFrame {
+             border-radius: 8px;
+             overflow: hidden;
+        }
+
+        </style>
+    """, unsafe_allow_html=True)
+
+# Gọi hàm CSS ngay lập tức
+load_css()
+
+# --- END OF NEW THEME SECTION ---
+
 # --- 3. DATA & MODEL LOADING FUNCTIONS (WITH CACHING) ---
 # Checklist Items 1 & 2: Cache all heavy operations
 
@@ -131,7 +243,7 @@ with tab1:
     
     # --- NÂNG CẤP: Thêm hình ảnh ---
     st.image("https://image.vietnam.travel/sites/default/files/2023-03/shutterstock_626352947_0.jpg?v=1762135399",
-             caption="Ho Chi Minh City. Credit: Vietnam Tourism", use_column_width=True)
+             caption="Ho Chi Minh City. Credit: Vietnam Tourism", use_container_width=True)
     # Bạn có thể thay thế URL trên bằng URL của riêng bạn, hoặc 
     
     st.subheader("Project Summary")