Update app.py

app.py

@@ -21,116 +21,114 @@ st.set_page_config(
     layout="wide"
 )
 
-# --- START OF NEW THEME SECTION ---
-
+# --- START OF NEW THEME SECTION (ĐÃ CẬP NHẬT) ---
 def load_css():
-    """Tải CSS tùy chỉnh để tạo giao diện 'thời tiết'."""
+    """Tải CSS tùy chỉnh để tạo giao diện 'thời tiết' với ĐỘ TƯƠNG PHẢN CAO."""
     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-image: linear-gradient(to bottom, #B0E0E6, #F0F8FF); 
             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 */
+        /* ===== 1. THANH CHỌN TAB (st.tabs) ===== */
+        /* Tab không được chọn */
+        button[data-baseweb="tab"][aria-selected="false"] {
+            background-color: rgba(255, 255, 255, 0.7) !important; /* Nền mờ */
+            color: #0E2A47 !important; /* Chữ đậm */
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
         }
         
-        /* 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 */
+        /* Tab ĐANG ĐƯỢC CHỌN */
+        button[data-baseweb="tab"][aria-selected="true"] {
+            background-color: #FFFFFF !important; /* Nền TRẮNG ĐỤC */
+            color: #004080 !important; /* Chữ MÀU XANH ĐẬM */
+            font-weight: 700 !important;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+            border-bottom: 3px solid #004080 !important; /* Viền xanh đậm */
         }
 
-        /* ===== THẺ DỰ BÁO (METRIC CARDS) ===== */
-        /* Đây là phần quan trọng nhất */
+        /* ===== 2. THẺ DỰ BÁO (METRIC CARDS) ===== */
         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 */
+            background-color: rgba(255, 255, 255, 0.95) !important; /* Nền trắng (đục hơn) */
+            border: 1px solid #B0C4DE; /* Thêm viền (xanh nhạt) */
+            border-radius: 12px;
             padding: 20px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ */
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Đổ bóng đậm hơn */
             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);
+             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
         }
-
-        /* Tiêu đề của thẻ (Forecast for...) */
+        
+        /* Tiêu đề thẻ (Forecast for...) - đã có tương phản tốt */
         div[data-testid="stMetricLabel"] p {
             font-size: 1.1rem !important;
             font-weight: 600 !important;
-            color: #333333; /* Màu xám đậm */
+            color: #333333; /* Xám đậm */
         }
-
-        /* Giá trị nhiệt độ dự báo */
+        /* Giá trị nhiệt độ - đã có tương phản tốt */
         div[data-testid="stMetricValue"] {
             font-size: 2.8rem !important;
             font-weight: 700 !important;
-            color: #004080; /* Màu xanh navy đậm */
+            color: #004080; /* Xanh navy đậm */
         }
-        
-        /* Giá trị "Actual" (delta) */
+        /* Giá trị "Actual" (delta) - đã có tương phản tốt */
         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);
+            color: #555555; /* Xám vừa */
         }
-        h2, h3 {
-            color: #005aa7; /* Xanh đậm */
+
+        /* ===== 3. TIÊU ĐỀ (HEADINGS) ===== */
+        h1, h2, h3 {
+            color: #004080 !important; /* Dùng chung màu XANH ĐẬM NHẤT */
+            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15) !important; /* Thêm đổ bóng ĐEN (thay vì trắng) */
         }
 
-        /* ===== 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;
+        /* ===== 4. BẢNG (DATAFRAME) ===== */
+        .stDataFrame {
+             background-color: #FFFFFF; /* Nền TRẮNG ĐỤC */
+             border: 1px solid #CCCCCC !important; /* Viền xám nhạt */
+             border-radius: 8px;
+             overflow: hidden;
         }
-        
-        /* ===== BIỂU ĐỒ (PLOTLY) ===== */
-        /* Làm nền biểu đồ trong suốt để hòa vào nền gradient */
+        /* Tiêu đề của bảng */
+        [data-testid="stDataGridHeader"] {
+             background-color: #F0F8FF; /* Nền header (Alice Blue) */
+             color: #004080; /* Chữ xanh đậm */
+        }
+
+        /* ===== 5. BIỂU ĐỒ (PLOTLY) ===== */
         .plotly-graph-div {
+            background-color: #FFFFFF; /* Nền TRẮNG ĐỤC */
+            border: 1px solid #E0E0E0; /* Viền xám rất nhạt */
             border-radius: 8px;
         }
         
-        /* Làm nền bảng (dataframe) đẹp hơn */
-        .stDataFrame {
-             border-radius: 8px;
-             overflow: hidden;
+        /* ===== EXPANDERS (vẫn giữ như cũ) ===== */
+        div[data-testid="stExpander"] {
+             background-color: rgba(255, 255, 255, 0.9) !important; 
+             border-radius: 10px !important;
+             border: 1px solid rgba(0, 0, 0, 0.1) !important;
         }
-
+        
         </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) ---