feat: enhance hotspot configuration with scale and initial pitch adjustments

src/app/components/VirtualTour.tsx

@@ -37,6 +37,7 @@ type Hotspot = {
   pitch: number;
   rotation?: number;
   nextYaw?: number;
+  scale?: number;
 };
 
 type InfoMarker = {
@@ -57,6 +58,7 @@ type TourScene = {
   location: string;
   image: string;
   initialYaw: number;
+  initialPitch?: number;
   mapPosition: {
     x: number;
     y: number;
@@ -1145,7 +1147,9 @@ function TourExperience({
       return;
     }
 
-    const direction = directionFromYawPitch(yaw, 0).normalize();
+    // Góc nhìn dọc mặc định của cảnh (ngẩng/cúi khi vừa vào cảnh); mặc định 0 = ngang tầm mắt.
+    const pitch = scene.initialPitch ?? 0;
+    const direction = directionFromYawPitch(yaw, pitch).normalize();
     camera.position.copy(direction.multiplyScalar(-distance));
     controls.target.set(0, 0, 0);
     controls.update();
@@ -1201,11 +1205,13 @@ function TourExperience({
         y > -80 &&
         y < clientHeight + 80;
 
+      // `scale` (xa/gần) đặt trong dữ liệu cảnh: >1 = mũi tên to/gần hơn, <1 = nhỏ/xa hơn.
+      const arrowScale = (hotspot.scale ?? 1) * (isOnScreen ? 1 : 0.88);
       element.style.opacity = isOnScreen ? "1" : "0";
       element.style.pointerEvents = isOnScreen ? "auto" : "none";
       element.style.left = `${x}px`;
       element.style.top = `${y}px`;
-      element.style.transform = `translate(-50%, -50%) scale(${isOnScreen ? 1 : 0.88})`;
+      element.style.transform = `translate(-50%, -50%) scale(${arrowScale})`;
     });
 
     scene.infoMarkers?.forEach((marker) => {