fix: sửa lỗi các nút bị che dưới thanh địa chỉ của chrome, hỗ trợ iphone upload ảnh heic

frontend/src/pages/TourDetailPage.tsx

@@ -2221,7 +2221,7 @@ export const TourDetailPage = ({
           {/* Nút X để quay lại */}
           <button 
             onClick={() => setIsMapFullscreen(false)}
-            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"
+            className="absolute top-[calc(1rem+env(safe-area-inset-top,0px))] 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="Đóng bản đồ"
           >
             <X className="w-6 h-6 text-gray-800 group-hover:rotate-90 transition-transform duration-300" />
@@ -2229,7 +2229,7 @@ export const TourDetailPage = ({
 
           {/* Transparent Top Bar Label - Glassmorphism style */}
           {selectedRouteInfo && drivingRoute.length > 0 && (
-            <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="absolute top-[calc(1rem+env(safe-area-inset-top,0px))] 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>
@@ -2286,7 +2286,7 @@ export const TourDetailPage = ({
           </MapContainer>
 
           {/* Overlay điều khiển trên bản đồ toàn màn hình */}
-          <div className="absolute top-4 right-4 z-[1001] flex flex-col gap-2">
+          <div className="absolute top-[calc(1rem+env(safe-area-inset-top,0px))] right-4 z-[1001] flex flex-col gap-2">
              <button
                 onClick={() => setIsMapControlsOpen(!isMapControlsOpen)}
                 className="w-11 h-11 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-white text-blue-600 flex items-center justify-center transition-all active:scale-95"