fix: sửa lỗi hiển thị thumbnail khi chia sẻ trên facebook

frontend/src/components/PublicPhotoModal.tsx

@@ -400,12 +400,20 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
               <span>{likeCount}</span>
             </button>
 
-            <img
-              src={photo.imageUrl}
-              alt="Public Map Upload"
-              className="w-full h-auto max-h-[85vh] object-contain cursor-zoom-in md:h-full md:max-h-none"
-              onClick={() => setIsFullscreen(true)}
-            />
+            <a
+              href={`${window.location.origin}/api/v1/public-photos/${photo.id}/share`}
+              className="w-full h-auto max-h-[85vh] object-contain cursor-zoom-in md:h-full md:max-h-none flex items-center justify-center"
+              onClick={(e) => {
+                e.preventDefault();
+                setIsFullscreen(true);
+              }}
+            >
+              <img
+                src={photo.imageUrl}
+                alt="Public Map Upload"
+                className="w-full h-auto max-h-[85vh] object-contain md:h-full md:max-h-none"
+              />
+            </a>
           </div>
 
           {/* Info & Timeline overlay inside photo panel */}

frontend/src/pages/ExploreMap.tsx

@@ -253,11 +253,41 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
         () => console.log("Không thể lấy vị trí người dùng")
       );
     } else {
-      // Cập nhật store để đồng bộ với vị trí khởi tạo từ cache
       setMapCenter(initialViewState.center);
     }
   }, []);
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const photoId = params.get('photoId');
+    if (photoId && publicPhotos.length > 0) {
+      const foundPhoto = publicPhotos.find((p) => p.id === photoId);
+      if (foundPhoto) {
+        const lat = foundPhoto.metadata?.lat;
+        const lng = foundPhoto.metadata?.lng;
+        if (typeof lat === 'number' && typeof lng === 'number') {
+          const group = publicPhotos.filter((p) => {
+            const pLat = p.metadata?.lat;
+            const pLng = p.metadata?.lng;
+            return typeof pLat === 'number' && typeof pLng === 'number' &&
+                   Math.abs(pLat - lat) < 0.00001 &&
+                   Math.abs(pLng - lng) < 0.00001;
+          });
+          group.sort((a, b) => {
+            const likesA = a.metadata?.likedUserIds?.length || 0;
+            const likesB = b.metadata?.likedUserIds?.length || 0;
+            return likesB - likesA;
+          });
+          setSelectedPhoto(foundPhoto);
+          setSelectedPhotoGroup(group);
+        } else {
+          setSelectedPhoto(foundPhoto);
+          setSelectedPhotoGroup([foundPhoto]);
+        }
+      }
+    }
+  }, [publicPhotos]);
+
   return (
     <div className="h-dvh w-full relative overflow-hidden">
       {/* Top Bar Container - Chứa tất cả các nút điều hướng phía trên */}
@@ -507,12 +537,15 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
                 click: () => {
                   setSelectedPhoto(latestPhoto);
                   setSelectedPhotoGroup(photoGroup);
+                  const params = new URLSearchParams(window.location.search);
+                  params.set('photoId', latestPhoto.id);
+                  window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
                 }
               }}
               icon={L.divIcon({
                 className: 'custom-photo-bubble',
                 html: `
-                  <div class="relative group">
+                  <a href="${window.location.origin}/api/v1/public-photos/${latestPhoto.id}/share" onclick="event.preventDefault();" class="relative group block">
                     <div class="w-12 h-12 rounded-full border-4 border-emerald-500 shadow-lg overflow-hidden transition-transform group-hover:scale-110">
                       <img src="${latestPhoto.imageUrl}" class="w-full h-full object-cover" />
                     </div>
@@ -524,7 +557,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
                         ${photoGroup.length}
                       </div>
                     ` : ''}
-                  </div>
+                  </a>
                 `,
                 iconSize: [48, 48],
                 iconAnchor: [24, 24]
@@ -588,10 +621,22 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos,
           onClose={() => {
             setSelectedPhoto(null);
             setSelectedPhotoGroup([]);
+            const params = new URLSearchParams(window.location.search);
+            if (params.has('photoId')) {
+              params.delete('photoId');
+              const newSearch = params.toString();
+              const newUrl = `${window.location.pathname}${newSearch ? `?${newSearch}` : ''}`;
+              window.history.replaceState({}, '', newUrl);
+            }
           }}
           photo={selectedPhoto}
           photoGroup={selectedPhotoGroup}
-          onSelectPhoto={(photo) => setSelectedPhoto(photo)}
+          onSelectPhoto={(photo) => {
+            setSelectedPhoto(photo);
+            const params = new URLSearchParams(window.location.search);
+            params.set('photoId', photo.id);
+            window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+          }}
           onLoginSuccess={onLoginSuccess}
           onUpdatePhoto={(updatedPhoto) => {
             setPublicPhotos((prev) =>