fix: xoay màn hình theo hướng người nhìn trong màn hình bản đồ đã mượt nhưng đến góc là xoay tròn

frontend/src/pages/TourDetailPage.tsx

@@ -387,23 +387,38 @@ export const TourDetailPage = ({
 
   // Theo dõi hướng thiết bị (la bàn)
   useEffect(() => {
-    if (window.DeviceOrientationEvent) {
-      const handleDeviceOrientation = (event: DeviceOrientationEvent) => {
-        // Sử dụng webkitCompassHeading cho iOS nếu có, nếu không thì dùng alpha
-        const heading = (event as any).webkitCompassHeading || event.alpha;
-        if (heading !== null && heading !== undefined) {
-          setDeviceOrientationHeading(heading);
-        }
-      };
+    const handleOrientation = (event: any) => {
+      let heading: number | null = null;
 
-      window.addEventListener('deviceorientation', handleDeviceOrientation);
-      return () => {
-        window.removeEventListener('deviceorientation', handleDeviceOrientation);
-      };
-    } else {
-      setDeviceOrientationHeading(null);
-    }
-  }, []); // Chạy một lần khi component mount
+      // 1. Đối với iOS: Sử dụng webkitCompassHeading (đã chuẩn hóa hướng Bắc thực)
+      if (event.webkitCompassHeading !== undefined && event.webkitCompassHeading !== null) {
+        heading = event.webkitCompassHeading;
+      } 
+      // 2. Đối với Android (Chrome): Cần kiểm tra tính tuyệt đối của dữ liệu
+      else if (event.alpha !== null && event.alpha !== undefined) {
+        // Chrome trên Android chỉ cung cấp hướng la bàn chuẩn khi event.absolute là true
+        // hoặc khi nhận từ sự kiện 'deviceorientationabsolute'
+        if (event.absolute === true || event.type === 'deviceorientationabsolute') {
+          // Alpha trên Android tăng theo chiều ngược kim đồng hồ (0=North, 90=West)
+          // Cần chuyển đổi sang chiều kim đồng hồ để khớp với logic quay bản đồ
+          heading = (360 - event.alpha) % 360;
+        }
+      }
+
+      if (heading !== null) {
+        setDeviceOrientationHeading(heading);
+      }
+    };
+
+    // Đăng ký cả hai loại sự kiện để hỗ trợ tối đa các dòng điện thoại
+    window.addEventListener('deviceorientation', handleOrientation, true);
+    window.addEventListener('deviceorientationabsolute', handleOrientation, true);
+
+    return () => {
+      window.removeEventListener('deviceorientation', handleOrientation, true);
+      window.removeEventListener('deviceorientationabsolute', handleOrientation, true);
+    };
+  }, []);
 
   // Logic kết hợp để xác định hướng xoay bản đồ
   useEffect(() => {