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/LandingPage.tsx

@@ -195,7 +195,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
 
 
   return (
-    <div className="h-screen w-full overflow-hidden font-sans bg-gray-900 relative">
+    <div className="h-dvh w-full overflow-hidden font-sans bg-gray-900 relative">
       {/* Background Image - Hiển thị trên mọi thiết bị với hiệu ứng Crossfade & Panning */}
       <div className="absolute inset-0 z-0 bg-gray-950 overflow-hidden">
         {/* Slot 1 */}
@@ -242,7 +242,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
       `}</style>
 
       {/* Top Bar - Thanh điều hướng trên cùng */}
-      <div className="absolute top-0 left-0 right-0 z-20 p-4 flex justify-between items-center">
+      <div className="absolute top-0 left-0 right-0 z-20 p-4 pt-[calc(1rem+env(safe-area-inset-top,0px))] flex justify-between items-center">
         <div className="flex items-center gap-2 text-white drop-shadow-lg">
           <Compass className="w-8 h-8" />
           <span className="text-xl font-black tracking-tighter uppercase hidden sm:block">Travel Planner</span>
@@ -274,7 +274,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
 
       {/* Community Gallery Previews */}
       {publicPhotos.length > 0 && (
-        <div className="absolute bottom-28 left-0 right-0 z-20 px-4 flex flex-col items-center gap-2">
+        <div className="absolute bottom-[calc(7rem+env(safe-area-inset-bottom,0px))] left-0 right-0 z-20 px-4 flex flex-col items-center gap-2">
           <span className="text-xs font-bold uppercase tracking-wider text-white/70 drop-shadow-md">
             Khoảnh khắc từ cộng đồng ({publicPhotos.length})
           </span>
@@ -305,7 +305,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
       )}
 
       {/* Bottom Bar - Nút hành động chính */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 w-full px-4">
+      <div className="absolute bottom-[calc(2rem+env(safe-area-inset-bottom,0px))] left-1/2 -translate-x-1/2 z-20 w-full px-4">
         <button 
           onClick={onGoToMap}
           className="w-full max-w-md mx-auto flex items-center justify-center gap-3 bg-white/20 backdrop-blur-lg text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-2xl border border-white/30 hover:bg-white/30 active:scale-95"