fix: xoay màn hình theo hướng người nhìn trong màn hình bản đồ vẫn còn xoay tròn

frontend/src/pages/TourDetailPage.tsx

@@ -172,9 +172,9 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => {
   const map = useMap();
   useEffect(() => {
     const container = map.getContainer();
-    // Tăng scale lên 1.8 để đảm bảo bao phủ toàn bộ màn hình điện thoại (vốn có tỉ lệ dài) khi xoay ở mọi góc độ
-    container.style.transform = `rotate(${rotation}deg) scale(${rotation === 0 ? 1 : 1.8})`;
-    container.style.transition = 'transform 0.3s ease-out';
+    // 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})`;
+    container.style.transition = 'transform 0.1s linear';
   }, [rotation, map]);
   return null;
 };
@@ -384,7 +384,6 @@ export const TourDetailPage = ({
 
   // State mới cho hướng thiết bị (la bàn)
   const [deviceOrientationHeading, setDeviceOrientationHeading] = useState<number | null>(null);
-  const rotationUpdateTimer = useRef<NodeJS.Timeout | null>(null);
 
   // Theo dõi hướng thiết bị (la bàn)
   useEffect(() => {
@@ -408,10 +407,6 @@ export const TourDetailPage = ({
 
   // Logic kết hợp để xác định hướng xoay bản đồ
   useEffect(() => {
-    if (rotationUpdateTimer.current) {
-      clearTimeout(rotationUpdateTimer.current);
-    }
-
     if (!isHeadingMode) {
       setMapRotation(0); // Đặt lại hướng Bắc nếu chế độ xoay tắt
       return;
@@ -427,17 +422,9 @@ export const TourDetailPage = ({
     }
 
     if (newRotation !== null) {
-      // Debounce cập nhật xoay để làm mượt chuyển động
-      rotationUpdateTimer.current = setTimeout(() => {
-        setMapRotation(newRotation!);
-      }, 100); // Trì hoãn 100ms
+      // Cập nhật ngay lập tức để tăng độ nhạy, CSS transition sẽ lo phần mượt mà
+      setMapRotation(newRotation);
     }
-
-    return () => {
-      if (rotationUpdateTimer.current) {
-        clearTimeout(rotationUpdateTimer.current);
-      }
-    };
   }, [isHeadingMode, gpsHeading, userSpeed, deviceOrientationHeading]);
 
   const [isStartPointAction, setIsStartPointAction] = useState(false);