Update app.py

app.py

@@ -389,6 +389,21 @@ st.markdown("""
         box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         transition: all 0.3s ease;
     }
+
+    /* Theme button styling */
+    .stButton button {
+        border-radius: 8px 8px 0 0 !important;
+        border-bottom: none !important;
+        margin-bottom: 0 !important;
+    }
+    
+    .theme-card-description {
+        transition: all 0.3s ease;
+    }
+    
+    .stButton button:hover + .theme-card-description {
+        transform: translateY(2px);
+    }
     
     .stButton > button {
         width: 100%;
@@ -534,6 +549,8 @@ st.markdown("""
 
 # Initialize session state variables
 def init_session_state():
+    if 'theme_selection_id' not in st.session_state:
+        st.session_state.theme_selection_id = datetime.now().strftime('%Y%m%d%H%M%S')
     if 'current_theme' not in st.session_state:
         st.session_state.current_theme = None
     if 'theme_story_starter' not in st.session_state:
@@ -1203,6 +1220,10 @@ def init_theme_state():
 
 # Theme Selection UI
 def show_theme_selection():
+    # สร้าง session key ถ้ายังไม่มี
+    if 'theme_selection_id' not in st.session_state:
+        st.session_state.theme_selection_id = datetime.now().strftime('%Y%m%d%H%M%S')
+
     st.markdown("""
         <div class="theme-header">
             <h3>🎨 เลือกธีมเรื่องราว | Choose Story Theme</h3>
@@ -1216,8 +1237,8 @@ def show_theme_selection():
     # แสดงธีมในแต่ละ column
     for col, theme in zip(cols, available_themes):
         with col:
-            # ใช้ ID ของธีมเป็น key
-            button_key = f"select_theme_{theme['id']}"
+            # ใช้ session ID และ theme ID สร้าง unique key
+            button_key = f"theme_{theme['id']}_{st.session_state.theme_selection_id}"
             
             if st.button(
                 f"{theme['icon']} {theme['name_th']}", 
@@ -1236,7 +1257,15 @@ def show_theme_selection():
             
             # คำอธิบายใต้ปุ่ม
             st.markdown(f"""
-                <div style="font-size: 0.85em; color: #666; padding: 5px;">
+                <div class="theme-card-description" 
+                     style="font-size: 0.85em; 
+                            color: #666; 
+                            padding: 5px;
+                            background-color: {theme['background_color']};
+                            border-radius: 0 0 8px 8px;
+                            border: 1px solid {theme['accent_color']};
+                            border-top: none;
+                            margin-top: -5px;">
                     {theme['description_th']}
                 </div>
             """, unsafe_allow_html=True)