diff --git a/frontend/src/components/ItineraryTimeline.tsx b/frontend/src/components/ItineraryTimeline.tsx
index 4f8e6ae..044f43e 100644
--- a/frontend/src/components/ItineraryTimeline.tsx
+++ b/frontend/src/components/ItineraryTimeline.tsx
@@ -259,11 +259,11 @@ export const ItineraryTimeline = ({
   }, [legs, expandedStageId]);
 
   return (
-    <div id="itinerary-timeline-print-zone" className="timeline-scroll-container itinerary-timeline-container">
+    <div id="itinerary-timeline-print-zone" className="timeline-scroll-container itinerary-timeline-container overflow-x-hidden">
         {legs.length === 0 ? (
-          <div className="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
-             <List className="w-12 h-12 text-gray-300 mx-auto mb-4" />
-             <p className="text-gray-500 font-medium">Chưa có chặng nào trong lộ trình.</p>
+          <div className="text-center py-16 sm:py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
+             <List className="w-10 h-10 sm:w-12 sm:h-12 text-gray-300 mx-auto mb-3 sm:mb-4" />
+             <p className="text-gray-500 font-medium text-xs sm:text-sm">Chưa có chặng nào trong lộ trình.</p>
           </div>
         ) : (
           legs.map((leg, legIdx) => {
@@ -278,15 +278,15 @@ export const ItineraryTimeline = ({
               const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;
 
               return (
-                <section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
+                <section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[60px] sm:scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
                   {/* Folder header row - clickable to toggle exclusive expansion */}
                   <div 
                     onClick={() => toggleStageExpanded(leg.id)}
                     className="folder-header-row animate-in fade-in slide-in-from-bottom-4 duration-300 hover:bg-gray-50/50 transition-colors"
                   >
-                    <div className="font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1">
+                    <div className="font-black text-blue-600 text-lg sm:text-xl truncate flex-1 flex flex-col gap-1">
                       <div className="flex items-center gap-2">
-                        <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm shrink-0">
+                        <span className="bg-blue-600 text-white w-7 h-7 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center text-xs sm:text-sm shrink-0">
                           {leg.sequence}
                         </span>
                         <div className="flex flex-col overflow-hidden">
@@ -466,29 +466,29 @@ export const ItineraryTimeline = ({
                                   {isStartPoint && (
                                     <span className="inline-block px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm bắt đầu</span>
                                   )}
-                                  {isEndPoint && (
-                                    <span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
-                                  )}
-                                  <h3 
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      onNavigate?.(location);
-                                    }}
-                                    className={`font-semibold text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
-                                  >
-                                    {location.name}
-                                  </h3>
-                                  <div className="flex items-center text-sm text-gray-500 mt-1">
+{isEndPoint && (
+                                     <span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
+                                   )}
+                                   <h3 
+                                     onClick={(e) => {
+                                       e.stopPropagation();
+                                       onNavigate?.(location);
+                                     }}
+                                     className={`font-semibold text-base sm:text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
+                                   >
+                                     {location.name}
+                                   </h3>
+                                  <div className="flex items-center text-xs sm:text-sm text-gray-500 mt-1">
                                     <MapPin className="w-3 h-3 mr-1" />
-                                    <span className="truncate max-w-[200px] sm:max-w-md">{location.address}</span>
+                                    <span className="truncate max-w-[120px] xs:max-w-[180px] sm:max-w-md">{location.address}</span>
                                   </div>
                                   {location.note && (
-                                    <div className="mt-2 text-xs text-gray-600 bg-gray-50 p-2 rounded-lg border border-gray-100 italic">
+                                    <div className="mt-1.5 sm:mt-2 text-[10px] sm:text-xs text-gray-600 bg-gray-50 p-1.5 sm:p-2 rounded-lg border border-gray-100 italic">
                                       {location.note}
                                     </div>
                                   )}
                                   {dwellMinutes !== null && (
-                                    <div className="flex items-center text-xs text-amber-600 font-medium mt-1">
+                                    <div className="flex items-center text-[10px] sm:text-xs text-amber-600 font-medium mt-1">
                                       <Clock className="w-3 h-3 mr-1" />
                                       <span>Thời gian dừng: {formatTravelTime(dwellMinutes)}</span>
                                     </div>
diff --git a/frontend/src/pages/MemberDashboard.tsx b/frontend/src/pages/MemberDashboard.tsx
index 2d38784..a37b5d0 100644
--- a/frontend/src/pages/MemberDashboard.tsx
+++ b/frontend/src/pages/MemberDashboard.tsx
@@ -1120,8 +1120,8 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
     );
   }
 
-  return (
-    <div className="h-screen w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white flex items-center justify-center font-sans overflow-hidden p-0 md:p-6">
+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>
@@ -1129,7 +1129,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
 
       <div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${
         isMobile 
-          ? 'h-full bg-slate-950 flex-col' 
+          ? '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'
       }`}>
         
diff --git a/frontend/src/pages/MyPhotosPage.tsx b/frontend/src/pages/MyPhotosPage.tsx
index 9df1034..fa00c54 100644
--- a/frontend/src/pages/MyPhotosPage.tsx
+++ b/frontend/src/pages/MyPhotosPage.tsx
@@ -230,27 +230,27 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
   };
 
   return (
-    <div className="w-full flex flex-col text-slate-100 bg-transparent font-sans">
+    <div className="w-full flex flex-col text-slate-100 bg-transparent font-sans min-h-dvh overflow-x-hidden">
       {/* Header */}
-      <div className="bg-slate-900/60 backdrop-blur-md border-b border-slate-800/80 px-6 py-4 flex items-center gap-4 rounded-t-3xl">
+      <div className="bg-slate-900/60 backdrop-blur-md border-b border-slate-800/80 px-4 py-3 flex items-center gap-3 rounded-t-3xl">
         <button onClick={onBack} className="p-2 hover:bg-slate-800 rounded-full transition-colors">
-          <ChevronLeft className="w-6 h-6 text-slate-400 hover:text-white" />
+          <ChevronLeft className="w-5 h-5 text-slate-400 hover:text-white" />
         </button>
         <div>
-          <h1 className="text-xl font-black text-white">Ảnh của tôi</h1>
+          <h1 className="text-lg font-black text-white">Ảnh của tôi</h1>
           <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kho lưu trữ ảnh gốc cá nhân</p>
         </div>
       </div>
 
       {/* Filter Bar */}
-      <div className="bg-slate-900/40 border-b border-slate-800/60 px-6 py-4 flex flex-wrap items-center gap-4 shadow-sm">
+      <div className="bg-slate-900/40 border-b border-slate-800/60 px-4 py-3 flex flex-wrap items-center gap-3 shadow-sm">
         <div className="flex items-center gap-2 text-slate-400">
           <Filter className="w-4 h-4" />
           <span className="text-xs font-bold uppercase tracking-wider">Bộ lọc:</span>
         </div>
         
-        <div className="relative min-w-[150px]">
-          <div className="px-3 py-2 bg-slate-800 text-indigo-300 rounded-xl text-xs font-bold border border-slate-700/60 truncate max-w-[200px]">
+        <div className="relative min-w-[120px] sm:min-w-[150px]">
+          <div className="px-3 py-2 bg-slate-800 text-indigo-300 rounded-xl text-xs font-bold border border-slate-700/60 truncate max-w-[180px] sm:max-w-[200px]">
             {selectedTourIdForPhoto === 'all' ? 'Tất cả hành trình' : toursWithPhotos.find(t => t.id === selectedTourIdForPhoto)?.title || 'Tour đã chọn'}
           </div>
         </div>
@@ -295,28 +295,28 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
         </div>
       </div>
 
-      <div className="flex-1 p-6 w-full max-w-7xl mx-auto">
+      <div className="flex-1 p-4 sm:p-6 w-full max-w-7xl mx-auto">
         {isLoading ? (
-          <div className="flex flex-col items-center justify-center py-20 text-slate-400">
-            <Loader2 className="w-10 h-10 animate-spin mb-4 text-indigo-500" />
-            <p className="font-bold text-sm">Đang tải kho ảnh...</p>
+          <div className="flex flex-col items-center justify-center py-16 sm:py-20 text-slate-400">
+            <Loader2 className="w-8 h-8 sm:w-10 sm:h-10 animate-spin mb-3 sm:mb-4 text-indigo-500" />
+            <p className="font-bold text-xs sm:text-sm">Đang tải kho ảnh...</p>
           </div>
         ) : photos.length === 0 ? (
-          <div className="py-24 text-center bg-slate-900/30 rounded-[40px] border-2 border-dashed border-slate-800/80">
-            <ImageIcon className="w-16 h-16 text-slate-700 mx-auto mb-4" />
-            <h3 className="text-xl font-bold text-slate-400">Chưa có ảnh nào</h3>
-            <p className="text-sm text-slate-500">Hãy tham gia các chuyến đi và lưu lại khoảnh khắc nhé!</p>
+          <div className="py-16 sm:py-24 text-center bg-slate-900/30 rounded-[32px] sm:rounded-[40px] border-2 border-dashed border-slate-800/80">
+            <ImageIcon className="w-12 h-12 sm:w-16 sm:h-16 text-slate-700 mx-auto mb-3 sm:mb-4" />
+            <h3 className="text-lg sm:text-xl font-bold text-slate-400">Chưa có ảnh nào</h3>
+            <p className="text-xs sm:text-sm text-slate-500">Hãy tham gia các chuyến đi và lưu lại khoảnh khắc nhé!</p>
           </div>
         ) : ( 
           <div className="animate-in fade-in">
-            <div className="flex flex-col md:flex-row gap-6">
+            <div className="flex flex-col md:flex-row gap-4 sm:gap-6">
               {/* Left Column: Tour List */}
-              <div className="md:w-1/4 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-4 flex-shrink-0">
-                <h3 className="text-xs font-black uppercase text-slate-400 tracking-wider mb-3">Hành trình của bạn</h3>
-                <div className="space-y-2">
+              <div className="w-full md:w-1/4 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-3 sm:p-4 flex-shrink-0">
+                <h3 className="text-[10px] sm:text-xs font-black uppercase text-slate-400 tracking-wider mb-2 sm:mb-3">Hành trình của bạn</h3>
+                <div className="space-y-1.5 sm:space-y-2">
                   <button
                     onClick={() => { setSelectedTourIdForPhoto('all'); setSelectedPhotoForDisplay(null); }}
-                    className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all ${
+                    className={`w-full text-left px-3 py-2 sm:px-3.5 sm:py-2.5 rounded-xl text-[10px] sm:text-xs font-bold transition-all ${
                       selectedTourIdForPhoto === 'all' ? 'bg-indigo-650 text-white shadow-md' : 'bg-slate-800/60 text-slate-300 hover:bg-slate-800'
                     }`}
                   >
@@ -326,7 +326,7 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                     <button
                       key={tour.id}
                       onClick={() => { setSelectedTourIdForPhoto(tour.id); setSelectedPhotoForDisplay(null); }}
-                      className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all truncate ${
+                      className={`w-full text-left px-3 py-2 sm:px-3.5 sm:py-2.5 rounded-xl text-[10px] sm:text-xs font-bold transition-all truncate ${
                         selectedTourIdForPhoto === tour.id ? 'bg-indigo-650 text-white shadow-md' : 'bg-slate-800/60 text-slate-300 hover:bg-slate-800'
                       }`}
                       title={tour.title}
@@ -338,14 +338,14 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
               </div>
 
               {/* Right Column: Large Photo Display */}
-              <div className="md:flex-1 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-4 flex flex-col items-center justify-center min-h-[350px]">
+              <div className="w-full md:flex-1 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-3 sm:p-4 flex flex-col items-center justify-center min-h-[250px] sm:min-h-[350px]">
                 {selectedPhotoForDisplay ? (
                   <div className="relative w-full h-full flex flex-col items-center justify-center">
-                    <div className="relative overflow-hidden rounded-xl shadow-lg max-w-full max-h-[calc(100vh-380px)] group">
+                    <div className="relative overflow-hidden rounded-xl shadow-lg max-w-full max-h-[calc(100vh-280px)] sm:max-h-[calc(100vh-320px)] group">
                       <img
                         src={selectedPhotoForDisplay.imageUrl || selectedPhotoForDisplay.originalUrl}
                         alt="Selected"
-                        className="max-w-full max-h-[calc(100vh-380px)] object-contain cursor-zoom-in"
+                        className="max-w-full max-h-[calc(100vh-280px)] sm:max-h-[calc(100vh-320px)] object-contain cursor-zoom-in"
                         onClick={() => setIsFullscreen(true)}
                       />
                       
@@ -542,13 +542,13 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
               <div className="flex items-center justify-between mb-4 px-1">
                 <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest">Kho ảnh ({filteredPhotos.length})</h3>
               </div>
-              <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-h-[250px] overflow-y-auto pr-2 custom-scrollbar">
+              <div className="grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-10 gap-2 sm:gap-3 max-h-[200px] sm:max-h-[250px] overflow-y-auto pr-1 sm:pr-2 custom-scrollbar">
                 {filteredPhotos.map((photo: any) => (
                   <div
                     key={photo.id}
                     onClick={() => setSelectedPhotoForDisplay(photo)}
                     className={`aspect-square bg-slate-950 rounded-xl overflow-hidden relative group border-2 transition-all cursor-pointer ${
-                      selectedPhotoForDisplay?.id === photo.id ? 'border-indigo-505 border-indigo-500 scale-[0.98]' : 'border-transparent hover:border-slate-700'
+                      selectedPhotoForDisplay?.id === photo.id ? 'border-indigo-500 scale-[0.98]' : 'border-transparent hover:border-slate-700'
                     }`}
                   >
                     <img
diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index fd27cf8..c7f3b25 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -1900,13 +1900,13 @@ export const TourDetailPage = ({
   };
 
   return (
-    <div className="min-h-screen bg-[var(--background)] pb-20">
+    <div className="min-h-dvh bg-[var(--background)] pb-20 overflow-x-hidden">
       {/* Top Navigation Bar */}
       <div className="sticky top-0 z-30 bg-[var(--surface)]/80 backdrop-blur-md border-b border-[var(--border)] px-4 py-3 flex items-center justify-between">
         <button onClick={onBack} className="p-2 hover:bg-[var(--background)] rounded-full transition-colors">
-          <ChevronLeft className="w-6 h-6 text-[var(--text-secondary)]" />
+          <ChevronLeft className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--text-secondary)]" />
         </button>
-        <h1 className="text-lg font-bold text-[var(--text-primary)] truncate px-4 flex-1 text-center">
+        <h1 className="text-base sm:text-lg font-bold text-[var(--text-primary)] truncate px-4 flex-1 text-center">
           {tourInfo.title}
         </h1>
         <div className="flex items-center gap-1">
@@ -1932,10 +1932,10 @@ export const TourDetailPage = ({
           )}
         </div>
       </div>
-      {!(activeTab === 'plan' && viewMode === 'map') && (
+{!(activeTab === 'plan' && viewMode === 'map') && (
         <>
           {/* Tour Header Info */}
-      <div className="relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end">
+      <div className="relative min-h-[300px] sm:min-h-[400px] md:min-h-[480px] w-full bg-blue-900 flex flex-col justify-end">
         <img 
           src={tourInfo.coverImage} 
           className="absolute inset-0 w-full h-full object-cover opacity-60" 
@@ -1943,9 +1943,9 @@ export const TourDetailPage = ({
         />
         <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
         
-        <div className="relative z-10 p-6 text-white pt-28 pb-20">
-          <div className="max-w-2xl mx-auto space-y-4">
-            <h2 className="text-3xl font-black tracking-tight drop-shadow-md">{tourInfo.title}</h2>
+        <div className="relative z-10 p-4 sm:p-6 pt-16 sm:pt-28 pb-8 sm:pb-20">
+          <div className="max-w-2xl mx-auto space-y-3 sm:space-y-4">
+            <h2 className="text-xl sm:text-2xl md:text-3xl font-black tracking-tight drop-shadow-md">{tourInfo.title}</h2>
             
             {/* Nhãn hiển thị ngay dưới Tiêu đề */}
             {currentTour?.tags && currentTour.tags.length > 0 && (
@@ -2296,10 +2296,10 @@ export const TourDetailPage = ({
                 onOpenNavigationPage={onOpenNavigationPage}
               />
               ) : (
-                <div className="h-[calc(100vh-53px)] w-full md:rounded-3xl overflow-hidden md:shadow-xl md:border-4 md:border-white relative animate-in fade-in duration-500">
+                <div className="h-auto min-h-[calc(100vh-100px)] sm:min-h-[calc(100vh-140px)] md:h-[calc(100vh-53px)] w-full md:rounded-3xl overflow-hidden md:shadow-xl md:border-4 md:border-white relative animate-in fade-in duration-500">
                   {/* Search Bar Overlay - Thanh tìm kiếm địa điểm trên bản đồ lộ trình */}
                   {!isPublicView && (
-                    <div className="absolute top-3 right-3 z-[1001] w-48 md:w-64">
+                    <div className="absolute top-2 sm:top-3 right-2 sm:right-3 z-[1001] w-40 sm:w-48 md:w-64">
                       <div className="relative group">
                         <input 
                           type="text"
diff --git a/frontend/src/pages/TourNavigationPage.tsx b/frontend/src/pages/TourNavigationPage.tsx
index 5d47710..e736c7b 100644
--- a/frontend/src/pages/TourNavigationPage.tsx
+++ b/frontend/src/pages/TourNavigationPage.tsx
@@ -363,7 +363,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
   };
 
   return (
-    <div className="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased">
+    <div className="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased overflow-x-hidden">
 <div className="w-full bg-[#1e293b]/95 backdrop-blur-md border-b border-slate-800 px-4 py-3.5 flex items-center gap-3 z-50 shrink-0"
          style={{ paddingTop: 'calc(0.75rem + env(safe-area-inset-top, 0px))' }}>
           <button
@@ -371,7 +371,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
             className="text-slate-300 hover:text-white p-1 rounded-lg hover:bg-slate-800 transition-colors"
             title="Quay lại danh sách lộ trình"
           >
-          <ChevronLeft className="w-6 h-6" />
+          <ChevronLeft className="w-5 h-5" />
         </button>
         <h2 className="text-sm font-bold truncate tracking-wide text-slate-100">
           {routeData.tourTitle || "Bản đồ chỉ đường"}