merge: giải quyết xung đột env và dashboard giữa 2 máy

backend/.env

@@ -0,0 +1 @@
+../.env

frontend/src/App.tsx

@@ -11,7 +11,116 @@ import { AdminDashboard } from './pages/AdminDashboard';
 import { ShareJourneyPage } from './pages/ShareJourneyPage';
 import { TourNavigationPage } from './pages/TourNavigationPage';
 import { ConfirmProvider } from './hooks/useConfirm';
-import { NotificationProvider } from './hooks/useNotification';
+import { NotificationProvider, useNotification } from './hooks/useNotification';
+import { io } from 'socket.io-client';
+
+interface GlobalNotificationListenerProps {
+  user: any;
+  currentPage: string;
+  currentTourId: string | null;
+}
+
+const GlobalNotificationListener: React.FC<GlobalNotificationListenerProps> = ({ user, currentPage, currentTourId }) => {
+  const notify = useNotification();
+
+  // Request browser Notification permission once on mount
+  useEffect(() => {
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!user?.id) return;
+
+    const socketInstance = io();
+
+    socketInstance.on('connect', () => {
+      console.log('[WS] Global notification socket connected:', socketInstance.id);
+      socketInstance.emit('joinUser', user.id);
+    });
+
+    socketInstance.on('tourMessageNotification', (data: any) => {
+      // Dispatch custom window event
+      window.dispatchEvent(new CustomEvent('app:tourMessageNotification', { detail: data }));
+
+      // Check if user is actively viewing this specific tour chat
+      const isViewingThisTourChat = currentPage === 'tourDetail' && currentTourId === data.tourId && (window as any).activeTourChatTab;
+
+      if (!isViewingThisTourChat) {
+        notify({
+          title: `Tin nhắn mới trong tour "${data.tourTitle}"`,
+          message: `${data.senderName}: "${data.content.substring(0, 30)}${data.content.length > 30 ? '...' : ''}"`,
+          type: 'success'
+        });
+
+        // Show push notification on desktop browser
+        if ('Notification' in window && Notification.permission === 'granted') {
+          try {
+            new Notification(`Tin nhắn mới trong tour "${data.tourTitle}"`, {
+              body: `${data.senderName}: ${data.content}`,
+              icon: '/favicon.ico'
+            });
+          } catch (e) {
+            console.error('System Notification error:', e);
+          }
+        }
+      }
+    });
+
+    socketInstance.on('messageReceived', (message: any) => {
+      // Dispatch custom window event
+      window.dispatchEvent(new CustomEvent('app:messageReceived', { detail: message }));
+
+      // Check if user is actively chatting with the sender
+      const isChattingWithSender = currentPage === 'dashboard' && (window as any).activeChatUserId === message.senderId;
+
+      if (!isChattingWithSender) {
+        notify({
+          title: 'Tin nhắn mới',
+          message: `${message.sender?.name || 'Ai đó'} gửi: "${message.content.substring(0, 30)}${message.content.length > 30 ? '...' : ''}"`,
+          type: 'success'
+        });
+
+        // Show push notification on desktop browser
+        if ('Notification' in window && Notification.permission === 'granted') {
+          try {
+            new Notification(`Tin nhắn mới từ ${message.sender?.name || 'Thành viên'}`, {
+              body: message.content,
+              icon: '/favicon.ico'
+            });
+          } catch (e) {
+            console.error('System Notification error:', e);
+          }
+        }
+      }
+    });
+
+    socketInstance.on('connectionAccepted', (data: any) => {
+      window.dispatchEvent(new CustomEvent('app:connectionAccepted', { detail: data }));
+      notify({
+        title: 'Kết nối mới',
+        message: `${data.acceptedByName} đã chấp nhận yêu cầu kết nối của bạn.`,
+        type: 'success'
+      });
+    });
+
+    socketInstance.on('joinRequestAccepted', (data: any) => {
+      window.dispatchEvent(new CustomEvent('app:joinRequestAccepted', { detail: data }));
+      notify({
+        title: 'Yêu cầu tham gia được duyệt',
+        message: `Yêu cầu tham gia hành trình "${data.tourTitle}" của bạn đã được chấp nhận!`,
+        type: 'success'
+      });
+    });
+
+    return () => {
+      socketInstance.disconnect();
+    };
+  }, [user?.id, currentPage, currentTourId]);
+
+  return null;
+};
 
 function App() {
   const params = new URLSearchParams(window.location.search);
@@ -223,6 +332,13 @@ function App() {
   return (
     <ConfirmProvider>
       <NotificationProvider>
+        {user && (
+          <GlobalNotificationListener
+            user={user}
+            currentPage={currentPage}
+            currentTourId={currentTourId}
+          />
+        )}
         {(() => {
         if (currentPage === 'admin') {
           return (

frontend/src/components/TourChat.tsx

@@ -601,7 +601,7 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
       )}
 
       {/* Locked Chat Input Footer */}
-      <div className="locked-chat-input-footer !flex-shrink-0 !w-full !border-t border-gray-200 bg-white !z-40" style={{ paddingBottom: 'env(safe-area-inset-bottom, 12px)' }}>
+      <div className="locked-chat-input-footer relative !flex-shrink-0 !w-full !border-t border-gray-200 bg-white !z-40" style={{ paddingBottom: 'env(safe-area-inset-bottom, 12px)' }}>
         {/* Mention list dropdown */}
         {showMentionList && filteredParticipants.length > 0 && (
           <div 
@@ -612,7 +612,14 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
               <button
                 key={member.id}
                 type="button"
-                onClick={() => insertMention(member)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  insertMention(member);
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  insertMention(member);
+                }}
                 className={`px-3 py-2 text-left text-xs font-semibold flex items-center gap-2 transition-colors ${
                   index === mentionIndex 
                     ? 'bg-blue-50 text-blue-700' 

frontend/src/pages/MemberDashboard.tsx

@@ -91,7 +91,14 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
   const [chatMessages, setChatMessages] = useState<any[]>([]);
   const [newMessage, setNewMessage] = useState('');
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const socketRef = useRef<Socket | null>(null);
+
+
+  useEffect(() => {
+    (window as any).activeChatUserId = activeChatUser?.id;
+    return () => {
+      (window as any).activeChatUserId = undefined;
+    };
+  }, [activeChatUser]);
 
   const [unreadChatSenders, setUnreadChatSenders] = useState<string[]>([]);
   const [unreadTourSenders, setUnreadTourSenders] = useState<string[]>([]);
@@ -334,26 +341,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // Request browser Notification permission
-  useEffect(() => {
-    if ('Notification' in window && Notification.permission === 'default') {
-      Notification.requestPermission();
-    }
-  }, []);
 
-  const showSystemNotification = (title: string, body: string) => {
-    if (muteNotificationsRef.current) return;
-    if ('Notification' in window && Notification.permission === 'granted') {
-      try {
-        new Notification(title, {
-          body,
-          icon: '/favicon.ico'
-        });
-      } catch (e) {
-        console.error('System Notification error:', e);
-      }
-    }
-  };
 
   const isMemberOfMyTours = (senderId: string) => {
     if (!publicTours) return false;
@@ -536,7 +524,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
     muteNotificationsRef.current = muteNotifications;
   });
 
-  // Socket connection for realtime messaging
+  // Socket connection for realtime messaging - changed to listen to global socket events
   useEffect(() => {
     if (!user?.id) return;
 
@@ -556,68 +544,37 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
       if (activeChatUser && (message.senderId === activeChatUser.id || message.receiverId === activeChatUser.id)) {
         setChatMessages(prev => [...prev, message]);
       } else {
-        if (!muteNotificationsRef.current) {
-          // Show notification toast for new message
-          notify({
-            title: 'Tin nhắn mới',
-            message: `${message.sender?.name || 'Ai đó'} gửi: "${message.content.substring(0, 30)}${message.content.length > 30 ? '...' : ''}"`,
-            type: 'success'
-          });
-          // Show push notification
-          showSystemNotification(
-            `Tin nhắn mới từ ${message.sender?.name || 'Thành viên'}`,
-            message.content
-          );
-        }
         // Add to unread states
         setUnreadChatSenders(prev => prev.includes(message.senderId) ? prev : [...prev, message.senderId]);
         if (isMemberOfMyToursRef.current(message.senderId)) {
           setUnreadTourSenders(prev => prev.includes(message.senderId) ? prev : [...prev, message.senderId]);
         }
       }
-    });
+    };
 
-    socket.on('connectionAccepted', (data: any) => {
-      if (!muteNotificationsRef.current) {
-        notify({
-          title: 'Kết nối mới',
-          message: `${data.acceptedByName} đã chấp nhận yêu cầu kết nối của bạn.`,
-          type: 'success'
-        });
-      }
+    const handleConnectionAccepted = () => {
       fetchConnectionsRef.current();
-    });
-
-    socket.on('tourMessageNotification', (data: any) => {
-      if (!muteNotificationsRef.current) {
-        notify({
-          title: `Tin nhắn mới trong tour "${data.tourTitle}"`,
-          message: `${data.senderName}: "${data.content.substring(0, 30)}${data.content.length > 30 ? '...' : ''}"`,
-          type: 'success'
-        });
-
-        showSystemNotification(
-          `Tin nhắn mới trong tour "${data.tourTitle}"`,
-          `${data.senderName}: ${data.content}`
-        );
-      }
+    };
 
+    const handleTourMessageNotification = (e: Event) => {
+      const data = (e as CustomEvent).detail;
       setUnreadTourChats(prev => prev.includes(data.tourId) ? prev : [...prev, data.tourId]);
-    });
+    };
 
-    socket.on('joinRequestAccepted', (data: any) => {
-      if (!muteNotificationsRef.current) {
-        notify({
-          title: 'Yêu cầu tham gia được duyệt',
-          message: `Yêu cầu tham gia hành trình "${data.tourTitle}" của bạn đã được chấp nhận!`,
-          type: 'success'
-        });
-      }
+    const handleJoinRequestAccepted = () => {
       fetchPublicToursRef.current();
-    });
+    };
+
+    window.addEventListener('app:messageReceived', handleMessageReceived);
+    window.addEventListener('app:connectionAccepted', handleConnectionAccepted);
+    window.addEventListener('app:tourMessageNotification', handleTourMessageNotification);
+    window.addEventListener('app:joinRequestAccepted', handleJoinRequestAccepted);
 
     return () => {
-      socket.disconnect();
+      window.removeEventListener('app:messageReceived', handleMessageReceived);
+      window.removeEventListener('app:connectionAccepted', handleConnectionAccepted);
+      window.removeEventListener('app:tourMessageNotification', handleTourMessageNotification);
+      window.removeEventListener('app:joinRequestAccepted', handleJoinRequestAccepted);
     };
   }, [user?.id, activeChatUser]);
 
@@ -881,7 +838,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
   };
 
   // Helper function to render a user's initials avatar
-const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
+  const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
     const initials = name
       ? name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase()
       : 'U';
@@ -930,8 +887,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
                   type: 'info'
                 });
               }}
-              className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${
-                muteNotifications 
+              className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${muteNotifications
                   ? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
                   : 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
                 }`}
@@ -998,8 +954,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
         <div className="flex-1 p-4 flex flex-col gap-3">
           <button
             onClick={() => handleSelectTab('tours')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
-              activeTab === 'tours' 
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'tours'
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-850/80 border-slate-700/80'
               }`}
@@ -1026,8 +981,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
 
           <button
             onClick={() => handleSelectTab('photos')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
-              activeTab === 'photos' 
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'photos'
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-850/80 border-slate-700/80'
               }`}
@@ -1052,8 +1006,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
         <div className="p-4 flex flex-col gap-3">
           <button
             onClick={() => handleSelectTab('connections')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
-              activeTab === 'connections' 
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'connections'
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-900/60 border-slate-800/60'
               }`}
@@ -1080,8 +1033,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
 
           <button
             onClick={() => handleSelectTab('chats')}
-            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
-              activeTab === 'chats' 
+            className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'chats'
                 ? 'bg-indigo-900/40 border-indigo-500/40'
                 : 'bg-slate-900/60 border-slate-800/60'
               }`}
@@ -1123,15 +1075,14 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
     );
   }
 
-return (
+  return (
     <div className="h-auto min-h-dvh w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white flex flex-col md:flex-row p-3 sm:p-6 gap-4 sm:gap-6 overflow-x-hidden">
 
       {/* Background Glow */}
       <div className="hidden md:block absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
       <div className="hidden md:block absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
 
-      <div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${
-        isMobile 
+      <div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${isMobile
           ? 'flex-col h-full bg-slate-950'
           : 'max-w-7xl h-[90vh] bg-slate-900/30 border border-slate-800/80 shadow-2xl rounded-3xl backdrop-blur-md'
         }`}>
@@ -1187,8 +1138,7 @@ return (
                       type: 'info'
                     });
                   }}
-                  className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${
-                    muteNotifications 
+                  className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${muteNotifications
                       ? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
                       : 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
                     }`}
@@ -1253,8 +1203,7 @@ return (
             <nav className="flex-1 px-3 py-6 flex flex-col gap-1.5 overflow-y-auto">
               <button
                 onClick={() => handleSelectTab('tours')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
-                  activeTab === 'tours' 
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'tours'
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
                   }`}
@@ -1273,8 +1222,7 @@ return (
 
               <button
                 onClick={() => handleSelectTab('photos')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
-                  activeTab === 'photos' 
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'photos'
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
                   }`}
@@ -1293,8 +1241,7 @@ return (
 
               <button
                 onClick={() => handleSelectTab('chats')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
-                  activeTab === 'chats' 
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'chats'
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
                   }`}
@@ -1312,8 +1259,7 @@ return (
 
               <button
                 onClick={() => handleSelectTab('connections')}
-                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
-                  activeTab === 'connections' 
+                className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'connections'
                     ? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
                     : 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
                   }`}
@@ -1360,8 +1306,7 @@ return (
           )}
 
           {/* Tab content renders here */}
-          <div className={`flex-1 relative z-10 flex flex-col ${
-            activeTab === 'chats' || activeTab === 'photos' 
+          <div className={`flex-1 relative z-10 flex flex-col ${activeTab === 'chats' || activeTab === 'photos'
               ? 'overflow-hidden p-0'
               : 'p-4 md:p-8 overflow-y-auto'
             }`}>
@@ -1556,8 +1501,7 @@ return (
                 <div className="flex gap-2 border-b border-slate-800/60 pb-3 mb-6">
                   <button
                     onClick={() => setConnectionSubTab('list')}
-                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${
-                      connectionSubTab === 'list' 
+                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${connectionSubTab === 'list'
                         ? 'bg-indigo-600 text-white shadow-md'
                         : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
                       }`}
@@ -1566,8 +1510,7 @@ return (
                   </button>
                   <button
                     onClick={() => setConnectionSubTab('search')}
-                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
-                      connectionSubTab === 'search' 
+                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${connectionSubTab === 'search'
                         ? 'bg-indigo-600 text-white shadow-md'
                         : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
                       }`}
@@ -1576,8 +1519,7 @@ return (
                   </button>
                   <button
                     onClick={() => setConnectionSubTab('pending')}
-                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${
-                      connectionSubTab === 'pending' 
+                    className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${connectionSubTab === 'pending'
                         ? 'bg-indigo-600 text-white shadow-md'
                         : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
                       }`}
@@ -1629,8 +1571,7 @@ return (
                                   <h4 className="text-sm font-bold text-white truncate">{connUser.name}</h4>
                                   <p className="text-[10px] text-slate-400 truncate">{connUser.email}</p>
                                   <div className="mt-1.5 flex items-center gap-1.5">
-                                    <span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${
-                                      conn.type === 'FAMILY' 
+                                    <span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${conn.type === 'FAMILY'
                                         ? 'bg-rose-950/40 text-rose-300 border-rose-900/50'
                                         : 'bg-indigo-950/40 text-indigo-300 border-indigo-900/50'
                                       }`}>
@@ -1737,8 +1678,7 @@ return (
 
                                 <div>
                                   {statusText ? (
-                                    <span className={`px-3 py-1 rounded-lg text-xs font-bold border ${
-                                      statusText === t('friends') || statusText === t('familyGroup')
+                                    <span className={`px-3 py-1 rounded-lg text-xs font-bold border ${statusText === t('friends') || statusText === t('familyGroup')
                                         ? 'bg-emerald-950/30 border-emerald-900/50 text-emerald-300'
                                         : 'bg-slate-800/80 border-slate-700 text-slate-400'
                                       }`}>
@@ -1876,7 +1816,7 @@ return (
               </div>
             )}
 
-{/* TAB 4: REALTIME CHAT */}
+            {/* TAB 4: REALTIME CHAT */}
             {activeTab === 'chats' && (
               <div className="flex flex-col h-[100dvh] md:h-auto w-full bg-slate-900/40 border-0 md:border border-slate-800/80 md:rounded-3xl overflow-hidden flex animate-in fade-in slide-in-from-bottom-2 duration-300">
 
@@ -1901,8 +1841,7 @@ return (
                             <button
                               key={conn.id}
                               onClick={() => handleSelectChatUser(connUser)}
-                              className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${
-                                isActive 
+                              className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${isActive
                                   ? 'bg-indigo-650 text-white shadow-md'
                                   : 'text-slate-350 hover:bg-slate-850/40 hover:text-slate-100'
                                 }`}
@@ -1989,8 +1928,7 @@ return (
                                   key={msg.id}
                                   className={`flex flex-col max-w-[70%] ${isMe ? 'self-end items-end' : 'self-start items-start'}`}
                                 >
-                                  <div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${
-                                    isMe 
+                                  <div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${isMe
                                       ? 'bg-indigo-650 text-white rounded-br-none shadow-md shadow-indigo-950/20'
                                       : 'bg-slate-800 text-slate-200 rounded-bl-none border border-slate-700/60'
                                     }`}>
@@ -2017,8 +1955,7 @@ return (
                                         href={`https://www.google.com/maps/search/?api=1&query=${msg.latitude},${msg.longitude}`}
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${
-                                          isMe 
+                                        className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${isMe
                                             ? 'bg-indigo-750 border-indigo-750/30 text-indigo-100 hover:bg-indigo-800'
                                             : 'bg-slate-900/60 border-slate-800/80 text-slate-200 hover:bg-slate-900'
                                           }`}
@@ -2109,8 +2046,7 @@ return (
                             type="button"
                             onClick={handleGetLocation}
                             disabled={isLocating}
-                            className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${
-                              isLocating ? 'animate-pulse' : ''
+                            className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${isLocating ? 'animate-pulse' : ''
                               }`}
                             title="Chia sẻ vị trí GPS hiện tại"
                           >

frontend/src/pages/TourDetailPage.tsx

@@ -399,6 +399,13 @@ export const TourDetailPage = ({
   const [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
   const [isAddPhotoOpen, setIsAddPhotoOpen] = useState(false);
 
+  useEffect(() => {
+    (window as any).activeTourChatTab = activeTab === 'chat';
+    return () => {
+      (window as any).activeTourChatTab = false;
+    };
+  }, [activeTab]);
+
   const [isRatingModalOpen, setIsRatingModalOpen] = useState(false);
   const [ratingTargetUser, setRatingTargetUser] = useState<any>(null);
   const [ratingScores, setRatingScores] = useState({