From e7b8c672e0bb7dd8384fb609bf4d645a222fe651 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 17 Jun 2026 22:36:05 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20xoay=20m=C3=A0n=20h=C3=ACnh=20theo=20h?=
 =?UTF-8?q?=C6=B0=E1=BB=9Bng=20ng=C6=B0=E1=BB=9Di=20nh=C3=ACn=20trong=20m?=
 =?UTF-8?q?=C3=A0n=20h=C3=ACnh=20b=E1=BA=A3n=20=C4=91=E1=BB=93=20=C4=91?=
 =?UTF-8?q?=C3=A3=20m=C6=B0=E1=BB=A3t=20nh=C6=B0ng=20=C4=91=E1=BA=BFn=20g?=
 =?UTF-8?q?=C3=B3c=20l=C3=A0=20xoay=20tr=C3=B2n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TourDetailPage.tsx | 47 ++++++++++++++++++---------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 8600979..ee5ffa6 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/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(() => {