fix: sửa lại hiển thị của các nút trên bản đồ

frontend/src/pages/TourDetailPage.tsx

@@ -362,6 +362,7 @@ export const TourDetailPage = ({
   const [searchResults, setSearchResults] = useState<any[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const [locateTrigger, setLocateTrigger] = useState(0);
+  const [isMapControlsOpen, setIsMapControlsOpen] = useState(false);
   const [isHeadingMode, setIsHeadingMode] = useState(false);
   const [mapRotation, setMapRotation] = useState(0);
   const [isRoutingLoading, setIsRoutingLoading] = useState(false);
@@ -1437,7 +1438,21 @@ export const TourDetailPage = ({
                   
                   {/* Overlay điều khiển trên bản đồ */}
                   <div className="absolute top-4 left-4 z-[1001] flex flex-col gap-2">
-                    <div className="bg-white/90 backdrop-blur-md p-1.5 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-left-2 duration-300">
+                    <button
+                      onClick={() => setIsMapControlsOpen(!isMapControlsOpen)}
+                      className="bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-white text-blue-600 hover:bg-blue-50 transition-all active:scale-95 flex items-center justify-center"
+                    >
+                      {isMapControlsOpen ? (
+                        <X className="w-5 h-5 text-gray-400" />
+                      ) : (
+                        travelMode === 'driving' ? <Car className="w-5 h-5" /> : 
+                        travelMode === 'bike' ? <Bike className="w-5 h-5" /> : 
+                        <Footprints className="w-5 h-5" />
+                      )}
+                    </button>
+
+                    {isMapControlsOpen && (
+                      <div className="bg-white/90 backdrop-blur-md p-1.5 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-top-2 duration-300">
                         <button 
                           onClick={() => setTravelMode('driving')}
                           className={`p-2.5 rounded-xl transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
@@ -1485,7 +1500,30 @@ export const TourDetailPage = ({
                         >
                           <LocateFixed className="w-4 h-4" />
                         </button>
+
+                        {/* Danh sách lộ trình rút gọn */}
+                        {routes.length > 0 && (
+                          <div className="pt-2 border-t border-gray-100 flex flex-col gap-1 min-w-[120px]">
+                            <div className="text-[9px] font-black text-gray-400 uppercase tracking-tighter px-1 mb-1">Lộ trình</div>
+                            <div className="flex flex-col gap-1 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar">
+                              {routes.map((route, idx) => (
+                                <button
+                                  key={idx}
+                                  onClick={() => setSelectedRouteIndex(idx)}
+                                  className={`p-2 rounded-xl text-left transition-all border ${
+                                    selectedRouteIndex === idx 
+                                      ? 'bg-blue-600 text-white border-blue-600 shadow-sm' 
+                                      : 'bg-gray-50 text-gray-600 border-gray-100'
+                                  }`}
+                                >
+                                  <div className="text-[10px] font-bold">#{idx + 1} - {(route.distance / 1000).toFixed(1)} km</div>
+                                </button>
+                              ))}
                             </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
                     
                     {/* Chỉ báo đang tìm đường */}
                     {isRoutingLoading && (
@@ -1495,37 +1533,6 @@ export const TourDetailPage = ({
                       </div>
                     )}
                     
-                    {/* Danh sách lựa chọn lộ trình đề xuất */}
-                    {routes.length > 0 && (
-                      <div className="bg-white/90 backdrop-blur-md p-2 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-left-2 duration-300 min-w-[150px] max-w-[180px]">
-                        <div className="text-[10px] font-black text-gray-400 uppercase tracking-tighter px-1 mb-1">Lộ trình đề xuất</div>
-                        {routes.length === 1 && allLocations.length > 2 && (
-                          <div className="px-2 py-1 text-[9px] text-amber-600 bg-amber-50 rounded-lg font-medium leading-tight mb-1 border border-amber-100">
-                            Lưu ý: Dịch vụ bản đồ chỉ gợi ý đường đi khác khi lộ trình có đúng 2 điểm (Điểm đầu & Điểm cuối).
-                          </div>
-                        )}
-                        <div className="flex flex-col gap-1.5 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar">
-                          {routes.map((route, idx) => (
-                            <button
-                              key={idx}
-                              onClick={() => setSelectedRouteIndex(idx)}
-                              className={`p-2 rounded-xl text-left transition-all border ${
-                                selectedRouteIndex === idx 
-                                  ? 'bg-blue-600 text-white border-blue-600 shadow-md' 
-                                  : 'bg-gray-50 text-gray-600 border-gray-100 hover:bg-gray-100'
-                              }`}
-                            >
-                              <div className="text-[10px] font-bold">Lựa chọn {idx + 1}</div>
-                              <div className={`text-[9px] font-medium leading-tight ${selectedRouteIndex === idx ? 'text-blue-100' : 'text-gray-400'}`}>
-                                {(route.distance / 1000).toFixed(1)} km • {Math.round(route.duration / 60)}p
-                              </div>
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    
-                    
                   </div>
                 </div>
               )}