fix: xoay màn hình theo hướng người nhìn trong màn hình bản đồ đã mượt

frontend/src/pages/TourDetailPage.tsx

@@ -170,10 +170,31 @@ const RecenterUser = ({ position, trigger }: { position: [number, number] | null
 // Component Helper để xử lý xoay bản đồ theo hướng di chuyển
 const MapRotationHandler = ({ rotation }: { rotation: number }) => {
   const map = useMap();
+  // Sử dụng Ref để lưu trữ giá trị xoay cộng dồn, giúp bản đồ luôn xoay theo hướng ngắn nhất
+  // Thay vì nhảy giá trị từ -359 về 0 (làm CSS xoay ngược 1 vòng), ta tính toán delta.
+  const cumulativeRotationRef = useRef(0);
+  const prevRotationRef = useRef(0);
+
   useEffect(() => {
     const container = map.getContainer();
-    // Tăng scale lên 2.5 để bao phủ hoàn toàn các màn hình siêu dài (như 21:9)
-    container.style.transform = `rotate(${rotation}deg) scale(${rotation === 0 ? 1 : 2.5})`;
+
+    if (rotation === 0) {
+      cumulativeRotationRef.current = 0;
+      prevRotationRef.current = 0;
+      container.style.transform = `rotate(0deg) scale(1)`;
+      return;
+    }
+
+    let delta = rotation - prevRotationRef.current;
+    // Chuẩn hóa delta trong khoảng [-180, 180] để tìm hướng xoay gần nhất
+    if (delta > 180) delta -= 360;
+    else if (delta < -180) delta += 360;
+
+    cumulativeRotationRef.current += delta;
+    prevRotationRef.current = rotation;
+
+    // Áp dụng transform với giá trị cộng dồn liên tục
+    container.style.transform = `rotate(${cumulativeRotationRef.current}deg) scale(2.5)`;
     container.style.transition = 'transform 0.1s linear';
   }, [rotation, map]);
   return null;