Update app.py

app.py

@@ -1240,7 +1240,7 @@ def show_level_selection():
 def show_theme_selection():
     """Display theme selection interface"""
     st.markdown("""
-        <div class="theme-header" style="text-align: center; margin-bottom: 30px;">
+        <div class="theme-header text-center">
             <h2 style="color: #1e88e5; font-family: 'Sarabun', sans-serif;">
                 🎨 เลือกธีมเรื่องราว | Choose Story Theme
             </h2>
@@ -1263,43 +1263,21 @@ def show_theme_selection():
         
         for col, theme in zip(cols, row_themes):
             with col:
-                show_theme_card(theme)
+                show_theme_card(theme)  # เปลี่ยนจาก display_theme_card เป็น show_theme_card
 
-    # Help text
-    st.markdown("""
-        <div style="text-align: center; margin-top: 30px; padding: 20px; 
-                    background: #f5f5f5; border-radius: 10px;">
-            <p style="color: #666; margin-bottom: 10px;">
-                💡 <strong>เคล็ดลับ:</strong> เลือกธีมที่คุณสนใจและอยากเขียนถึงที่สุด
-            </p>
-            <p style="color: #666; font-size: 0.9em;">
-                แต่ละธีมมีคำศัพท์และแนวเรื่องที่แตกต่างกัน เหมาะสำหรับการฝึกเขียนในบริบทต่างๆ
-            </p>
-        </div>
-    """, unsafe_allow_html=True)
-
-def show_theme_card(theme: Dict):
-    """Display individual theme card"""
-    # Theme Card Container
-    st.markdown(f"""
-        <div class="theme-card" style="
+def show_theme_card(theme: Dict):  # เปลี่ยนจาก display_theme_card เป็น show_theme_card
+    """Display a single theme card with proper styling"""
+    card_html = f"""
+        <div style="
             background-color: {theme['background_color']};
             border-radius: 15px;
             padding: 1.5rem;
+            margin-bottom: 1rem;
             height: 100%;
             position: relative;
             transition: all 0.3s ease;
         ">
-            <div class="level-badge" style="
-                position: absolute;
-                top: 1rem;
-                right: 1rem;
-                padding: 0.25rem 0.75rem;
-                border-radius: 999px;
-                font-size: 0.8rem;
-                background: #E3F2FD;
-                color: #1E88E5;
-            ">
+            <div style="position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8rem; background: #E3F2FD; color: #1E88E5;">
                 {st.session_state.level}
             </div>
             
@@ -1307,27 +1285,20 @@ def show_theme_card(theme: Dict):
                 {theme['icon']}
             </div>
             
-            <div style="
-                font-size: 1.2rem;
-                font-weight: 600;
-                margin-bottom: 0.5rem;
-                color: {theme['accent_color']};
-            ">
+            <div style="font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: {theme['accent_color']};">
                 {theme['name_th']}
             </div>
             
-            <div style="
-                font-size: 0.9rem;
-                color: #666;
-                line-height: 1.4;
-                margin-bottom: 1rem;
-            ">
+            <div style="font-size: 0.9rem; color: #666; line-height: 1.4; margin-bottom: 1rem;">
                 {theme['description_th']}
             </div>
         </div>
-    """, unsafe_allow_html=True)
+    """
+    
+    # แสดงการ์ดธีม
+    st.markdown(card_html, unsafe_allow_html=True)
     
-    # Theme Selection Button
+    # แสดงปุ่มเลือกธีม
     if st.button(
         f"เลือกธีม {theme['name_th']}", 
         key=f"theme_{theme['id']}",