fix: Ngăn bản đồ tự động reset về trung tâm khi người dùng đã tương tác

- TourDetailPage: MapTourBounds chỉ fitBounds 1 lần cho mỗi lần dữ liệu lộ trình thay đổi thực sự (theo locKey). Nếu người dùng đã pan/zoom rồi thì không refit khi data reload.
- TourNavigationPage: FitBounds chỉ chạy khi người dùng CHƯA tương tác (hasInteractedRef). Sau khi người dùng pan/zoom/drag, bản đồ giữ nguyên vị trí.
- Cả hai bản đồ đều tôn trọng vị trí người dùng đã chọn, không reset về mặc định khi có thay đổi dữ liệu phụ.

frontend/src/pages/TourNavigationPage.tsx

@@ -16,14 +16,13 @@ interface TourNavigationPageProps {
   onBack: () => void;
 }
 
-const FitBounds = ({ coords, canFitRef }: { coords: [number, number][], canFitRef: React.MutableRefObject<boolean> }) => {
+const FitBounds = ({ coords, destination, hasInteractedRef }: { coords: [number, number][], destination: { lat: number; lng: number; name: string } | null, hasInteractedRef: React.MutableRefObject<boolean> }) => {
   const map = useMap();
   useEffect(() => {
-    if (coords.length > 0 && canFitRef.current) {
-      canFitRef.current = false;
+    if (coords.length > 0 && !hasInteractedRef.current && destination) {
       map.fitBounds(coords, { padding: [60, 60], maxZoom: 15 });
     }
-  }, [map, coords, canFitRef]);
+  }, [map, coords, destination, hasInteractedRef]);
   return null;
 };
 
@@ -58,14 +57,16 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => {
 };
 
 const CompassInteractionDetector = ({
-  onUserInteraction
+  onUserInteraction,
+  hasInteractedRef
 }: {
   onUserInteraction: () => void;
+  hasInteractedRef: React.MutableRefObject<boolean>;
 }) => {
   useMapEvents({
-    movestart: onUserInteraction,
-    zoomstart: onUserInteraction,
-    dragstart: onUserInteraction,
+    movestart: () => { hasInteractedRef.current = true; },
+    zoomstart: () => { hasInteractedRef.current = true; },
+    dragstart: () => { hasInteractedRef.current = true; },
   });
   return null;
 };
@@ -78,14 +79,16 @@ const MapRefSetter = ({ mapRef }: { mapRef: React.MutableRefObject<L.Map | null>
   return null;
 };
 
-const MapInteractionWatcher = () => {
+const MapInteractionWatcher = ({ hasInteractedRef }: { hasInteractedRef: React.MutableRefObject<boolean> }) => {
   const map = useMap();
   useEffect(() => {
     const onZoomEnd = () => {
       map._userZoomLevel = map.getZoom();
+      hasInteractedRef.current = true;
     };
     const onMoveEnd = () => {
       map._userCenter = map.getCenter();
+      hasInteractedRef.current = true;
     };
     map.on('zoomend', onZoomEnd);
     map.on('moveend', onMoveEnd);
@@ -93,7 +96,7 @@ const MapInteractionWatcher = () => {
       map.off('zoomend', onZoomEnd);
       map.off('moveend', onMoveEnd);
     };
-  }, [map]);
+  }, [map, hasInteractedRef]);
   return null;
 };
 
@@ -141,7 +144,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
   const mapRef = useRef<L.Map | null>(null);
   const watchIdRef = useRef<number | null>(null);
   const fetchLockRef = useRef(false);
-  const canFitRef = useRef(true);
+  const hasInteractedRef = useRef(false);
 
   const originLat = routeData?.origin?.lat;
   const originLng = routeData?.origin?.lng;
@@ -226,6 +229,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
   }, [routeData, originLat, originLng, destLat, destLng]);
 
   const handleUserInteraction = useCallback(() => {
+    hasInteractedRef.current = true;
     if (isCompassActive) {
       setIsCompassActive(false);
     }
@@ -346,14 +350,14 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
         >
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" />
           <MapRefSetter mapRef={mapRef} />
-          <MapInteractionWatcher />
-          {/* <FitBounds coords={routeGeometry || []} canFitRef={canFitRef} /> */}
+          <MapInteractionWatcher hasInteractedRef={hasInteractedRef} />
+          <FitBounds coords={routeGeometry || []} destination={routeData?.destination || null} hasInteractedRef={hasInteractedRef} />
           {routeGeometry && (
             <Polyline positions={routeGeometry} color="#2563eb" weight={6} opacity={0.9} smoothFactor={1} />
           )}
           <MapSizeHandler mapRef={mapRef} />
           <MapRotationHandler rotation={currentHeading} />
-          <CompassInteractionDetector onUserInteraction={handleUserInteraction} />
+          <CompassInteractionDetector onUserInteraction={handleUserInteraction} hasInteractedRef={hasInteractedRef} />
         </MapContainer>
 
         {/* Locate User Button */}