fix: Sửa lỗi bản đồ mobile chỉ hiển thị kích thước mặc định và không zoom

- Xóa state viewportHeight phụ thuộc documentElement.clientHeight (không ổn định trên mobile)
- Xóa style dvh/-webkit-fill-available gây lỗi trên iOS Safari
- Đổi layout sang flex-1 thuần túy, không tính chiều cao bằng JS
- Xóa CSS transform khi rotation = 0 để tránh lỗi render trên mobile
- Tăng delay invalidateSize lên 100ms để Leaflet đo đúng kích thước container sau layout

frontend/src/pages/TourNavigationPage.tsx

@@ -39,7 +39,7 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => {
     if (rotation === 0) {
       cumulativeRotationRef.current = 0;
       prevRotationRef.current = 0;
-      container.style.transform = 'rotate(0deg) scale(1)';
+      container.style.transform = '';
       return;
     }
 
@@ -69,20 +69,12 @@ const CompassInteractionDetector = ({
   return null;
 };
 
-const MapRefSetter = ({ mapRef }: { mapRef: React.MutableRefObject<L.Map | null> }) => {
-  const map = useMap();
-  useEffect(() => {
-    mapRef.current = map;
-  }, [map, mapRef]);
-  return null;
-};
-
 const MapSizeHandler = () => {
   const map = useMap();
   useEffect(() => {
     const timer = setTimeout(() => {
       map.invalidateSize();
-    }, 0);
+    }, 100);
     return () => clearTimeout(timer);
   }, [map]);
   return null;
@@ -93,26 +85,12 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
   const [currentHeading, setCurrentHeading] = useState(0);
   const [routeGeometry, setRouteGeometry] = useState<[number, number][] | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [viewportHeight, setViewportHeight] = useState(() => {
+  const [mapReady, setMapReady] = useState(false);
-    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-  });
 
   const mapRef = useRef<L.Map | null>(null);
   const watchIdRef = useRef<number | null>(null);
   const fetchLockRef = useRef(false);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setViewportHeight(Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
-    };
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('orientationchange', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('orientationchange', handleResize);
-    };
-  }, []);
-
   const originLat = routeData?.origin?.lat;
   const originLng = routeData?.origin?.lng;
   const destLat = routeData?.destination?.lat;
@@ -226,7 +204,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
     : [0, 0];
 
   return (
-    <div className="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased" style={{ height: '100dvh', height: '-webkit-fill-available' }}>
+    <div className="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased">
       <div className="w-full bg-[#1e293b]/95 backdrop-blur-md border-b border-slate-800 px-4 py-3.5 flex items-center gap-3 z-50 shrink-0">
         <button
           onClick={onBack}
@@ -240,7 +218,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
         </h2>
       </div>
 
-      <div className="flex-1 relative min-h-0" style={{ height: viewportHeight - 56 }}>
+      <div className="flex-1 relative min-h-0">
         <MapContainer
           center={center}
           zoom={14}