diff --git a/frontend/src/pages/TourNavigationPage.tsx b/frontend/src/pages/TourNavigationPage.tsx
index 3682d2c..5d47710 100644
--- a/frontend/src/pages/TourNavigationPage.tsx
+++ b/frontend/src/pages/TourNavigationPage.tsx
@@ -364,12 +364,13 @@ 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="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">
-        <button
-          onClick={onBack}
-          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"
-        >
+<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
+            onClick={onBack}
+            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" />
         </button>
         <h2 className="text-sm font-bold truncate tracking-wide text-slate-100">
@@ -377,7 +378,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
         </h2>
       </div>
 
-      <div className="flex-1 relative min-h-0">
+      <div className="flex-1 relative min-h-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
         <MapContainer
           center={center}
           zoom={14}
@@ -412,6 +413,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
               ? 'bg-blue-600 border-blue-400 text-white animate-pulse'
               : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-blue-400'
           }`}
+          style={{ bottom: 'calc(2rem + env(safe-area-inset-bottom, 0px))' }}
           title="Định vị vị trí hiện tại của bạn"
         >
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -428,6 +430,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
               ? 'bg-green-600 border-green-400 text-white animate-pulse' 
               : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-green-500'
           }`}
+          style={{ bottom: 'calc(6rem + env(safe-area-inset-bottom, 0px))' }}
           title={isTrackingLocation ? "Tắt tự động định tâm vị trí" : "Bật tự động định tâm theo vị trí của bạn"}
         >
           <svg xmlns="http://www.w3.org/2000/svg" className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
@@ -443,6 +446,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
               ? 'bg-blue-600 border-blue-400 text-white animate-pulse'
               : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-blue-400'
           }`}
+          style={{ bottom: 'calc(2rem + env(safe-area-inset-bottom, 0px))' }}
         >
           <Compass className="w-7 h-7" />
         </button>