fix: login với Google Oauth lỗi token invite

frontend/src/pages/LandingPage.tsx

@@ -34,38 +34,36 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onGoToSignup, onGoToMa
   const [fade2, setFade2] = useState(false);
   const [activeSlot, setActiveSlot] = useState<1 | 2>(1);
 
-  const [touchOffsetX, setTouchOffsetX] = useState(0);
-  const touchStartXRef = useRef(0);
-  const isSwipingRef = useRef(false);
+const [touchOffsetX, setTouchOffsetX] = useState(0);
+   const touchStartXRef = useRef(0);
+   const isSwipingRef = useRef(false);
+   const panScale = 1.25;
+   const maxPanX = typeof window !== 'undefined' ? -(window.innerWidth * (panScale - 1)) : -250;
 
-  const isLoggedIn = !!localStorage.getItem('token') && !localStorage.getItem('guest_token');
+   const isLoggedIn = !!localStorage.getItem('token') && !localStorage.getItem('guest_token');
 
-  const handleTouchStart = (e: React.TouchEvent) => {
-    touchStartXRef.current = e.touches[0].clientX;
-    isSwipingRef.current = true;
-  };
+   const handleTouchStart = (e: React.TouchEvent) => {
+     touchStartXRef.current = e.touches[0].clientX;
+     isSwipingRef.current = true;
+   };
 
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (!isSwipingRef.current) return;
-    const currentX = e.touches[0].clientX;
-    const diffX = currentX - touchStartXRef.current;
-    
-    // Clamp the translation to [-70, 70] to ensure the background never shows white/black gaps
-    const clampedX = Math.max(-70, Math.min(70, diffX));
-    setTouchOffsetX(clampedX);
-  };
+   const handleTouchMove = (e: React.TouchEvent) => {
+     if (!isSwipingRef.current) return;
+     const currentX = e.touches[0].clientX;
+     const diffX = currentX - touchStartXRef.current;
+     
+     // Allow panning within bounds (for panorama viewing)
+     const clampedX = Math.max(maxPanX, Math.min(0, diffX));
+     setTouchOffsetX(clampedX);
+   };
 
-  const handleTouchEnd = () => {
-    if (!isSwipingRef.current) return;
-    isSwipingRef.current = false;
-    // Threshold lowered to 50px for better swipe responsiveness on mobile screens
-    if (touchOffsetX > 50 && publicPhotos.length > 0) {
-      setCurrentBgIndex((prev) => (prev - 1 + publicPhotos.length) % publicPhotos.length);
-    } else if (touchOffsetX < -50 && publicPhotos.length > 0) {
-      setCurrentBgIndex((prev) => (prev + 1) % publicPhotos.length);
-    }
-    setTouchOffsetX(0);
-  };
+   const handleTouchEnd = () => {
+     if (!isSwipingRef.current) return;
+     isSwipingRef.current = false;
+     
+     // Reset panning position when touch ends
+     setTouchOffsetX(0);
+   };
 
   useEffect(() => {
     const nextUrl = publicPhotos.length > 0 ? publicPhotos[currentBgIndex]?.imageUrl : '/background.avif';
@@ -264,50 +262,52 @@ notify({ title: 'Thành công!', message: 'Ảnh của bạn đã được tải
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
-        <div
-          className="absolute inset-y-0 left-[-15%] right-[-15%] cursor-grab active:cursor-grabbing"
-          style={{
-            transform: `translateX(${touchOffsetX}px)`,
-            transition: touchOffsetX === 0 ? 'transform 0.3s ease-out' : 'none',
-            touchAction: 'none'
-          }}
-        >
-          {/* Slot 1 */}
-          {bg1 && (
-            <img 
-              key={bg1}
-              src={bg1} 
-              draggable="false"
-              onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-              onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-              className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-[1200ms] ease-in-out animate-panning ${
-                !isLoggedIn ? 'select-none pointer-events-none' : ''
-              }`}
-              style={{ 
-                opacity: fade1 ? 0.8 : 0,
-              }}
-              alt="Travel Background 1" 
-            />
-          )}
-          
-          {/* Slot 2 */}
-          {bg2 && (
-            <img 
-              key={bg2}
-              src={bg2} 
-              draggable="false"
-              onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-              onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-              className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-[1200ms] ease-in-out animate-panning ${
-                !isLoggedIn ? 'select-none pointer-events-none' : ''
-              }`}
-              style={{ 
-                opacity: fade2 ? 0.8 : 0,
-              }}
-              alt="Travel Background 2" 
-            />
-          )}
-        </div>
+<div
+           className="absolute inset-y-0 left-0 right-0 cursor-grab active:cursor-grabbing"
+           style={{
+             transform: `translateX(${touchOffsetX}px)`,
+             transition: touchOffsetX === 0 ? 'transform 0.3s ease-out' : 'none',
+             touchAction: 'none'
+           }}
+         >
+           {/* Slot 1 */}
+{bg1 && (
+              <img 
+                key={bg1}
+                src={bg1} 
+                draggable="false"
+                onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-[1200ms] ease-in-out ${
+                  !isLoggedIn ? 'select-none pointer-events-none' : ''
+                }`}
+                style={{ 
+                  opacity: fade1 ? 0.8 : 0,
+                  transform: `scale(${panScale}) translateX(-${(panScale - 1) * 50}%)`,
+                }}
+                alt="Travel Background 1" 
+              />
+            )}
+            
+            {/* Slot 2 */}
+            {bg2 && (
+              <img 
+                key={bg2}
+                src={bg2} 
+                draggable="false"
+                onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
+                className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-[1200ms] ease-in-out ${
+                  !isLoggedIn ? 'select-none pointer-events-none' : ''
+                }`}
+                style={{ 
+                  opacity: fade2 ? 0.8 : 0,
+                  transform: `scale(${panScale}) translateX(-${(panScale - 1) * 50}%)`,
+                }}
+                alt="Travel Background 2" 
+              />
+            )}
+         </div>
       </div>
 
       {/* Keyframes cho hiệu ứng panning từ trái sang phải */}