From 40b1c4f2ab4466e1ee5169a439c452a72708acc8 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 17 Jun 2026 21:41:43 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20nh=E1=BA=A5n=20n=C3=BAt=20toggle=20stat?=
 =?UTF-8?q?us=20b=E1=BA=A3n=20=C4=91=E1=BB=93=20s=E1=BA=BD=20hi=E1=BB=83n?=
 =?UTF-8?q?=20th=E1=BB=8B=20to=C3=A0n=20m=C3=A0n=20h=C3=ACnh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TourDetailPage.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

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>