diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index bb1afd9..6b6506d 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -1393,10 +1393,19 @@ export const TourDetailPage = ({
                 onNavigate={handleNavigateToLocation}
               />
               ) : (
-                <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">
+                <div className="fixed inset-0 z-[2000] bg-white animate-in fade-in duration-500">
+                  {/* Nút X để quay lại từ chế độ bản đồ toàn màn hình */}
+                  <button 
+                    onClick={() => setViewMode('timeline')}
+                    className="absolute top-4 left-4 z-[1002] w-11 h-11 bg-white/90 backdrop-blur-md rounded-full shadow-2xl flex items-center justify-center border border-white/20 hover:bg-white transition-all active:scale-95 group"
+                    title="Quay lại danh sách"
+                  >
+                    <X className="w-6 h-6 text-gray-800 group-hover:rotate-90 transition-transform duration-300" />
+                  </button>
+
                   {/* 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-4 right-4 z-[1001] w-48 md:w-64">
                       <div className="relative group">
                         <input 
                           type="text"
@@ -1444,14 +1453,14 @@ export const TourDetailPage = ({
 
                   {/* Overlay thông tin lộ trình đề xuất (Lộ trình thông dụng nhất) */}
                   {selectedRouteInfo && drivingRoute.length > 0 && (
-                    <div className="absolute top-3 left-1/2 -translate-x-1/2 z-[1001] bg-white/80 backdrop-blur-md px-4 py-2 rounded-2xl shadow-xl border border-white flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-500">
-                      <div className="flex items-center gap-1.5">
-                        <Navigation className="w-3.5 h-3.5 text-blue-600 rotate-45" />
-                        <span className="text-[10px] font-black text-gray-400 uppercase tracking-tighter">{selectedRouteInfo.label}</span>
+                    <div className="absolute top-4 left-1/2 -translate-x-1/2 z-[1001] bg-white/20 backdrop-blur-lg px-6 py-2.5 rounded-full border border-white/30 flex items-center gap-4 animate-in fade-in slide-in-from-top-2 duration-500 shadow-xl">
+                      <div className="flex items-center gap-2">
+                        <Navigation className="w-4 h-4 text-blue-600 rotate-45 fill-blue-600" />
+                        <span className="text-[11px] font-black text-gray-700 uppercase tracking-widest">{selectedRouteInfo.label}</span>
                       </div>
-                      <div className="flex items-center gap-2 text-xs font-bold text-blue-700 whitespace-nowrap">
+                      <div className="flex items-center gap-3 text-sm font-black text-blue-700 whitespace-nowrap">
                         <span>{selectedRouteInfo.distance} km</span>
-                        <span className="text-gray-300">•</span>
+                        <span className="text-gray-400 opacity-40">•</span>
                         <span>{selectedRouteInfo.duration}</span>
                       </div>
                     </div>