feat: tạo ứng dụng android

fix: Thay đổi giao diện hiển thị trên điện thoại và đổi đường dẫn lưu ảnh upload ở docker-compose.prod.yml
fix: cách các pages hiển thị trên browser điện thoại
2026-06-26 20:33:14 +07:00 · 2026-06-26 20:03:30 +07:00 · 2026-06-26 10:21:01 +07:00 · 2026-06-26 09:13:24 +07:00
101 changed files with 2568 additions and 642 deletions
@@ -1,104 +0,0 @@
-# To AI Agent: Fix Infinite Re-render Loop and Flickering "ĐANG TÌM ĐƯỜNG TỐI ƯU..." Label
-
-## 1. Context & Layout Bug Analysis
-We are resolving a critical performance and UI bug inside the Map routing engine interface (`image.png`):
- **The Issue:** The floating loading indicator badge reading `"ĐANG TÌM ĐƯỜNG TỐI ƯU..."` keeps flashing, flickering, or appearing and disappearing in an infinite execution loop.
- **Root Cause:** This is caused by a broken React lifecycle loop. Every time the map triggers a directions route query, it toggles a loading state variable (`isSearching: true`). Once the route loads, the state updates (`isSearching: false`), forcing a component re-render. If the coordinates object (`origin`, `destination`) or the map instance ref inside the `useEffect` dependency array changes its reference pointer on every render, the hook fires *again*, creating an endless loop of API fetching and component flashing.
-
---
-
-## 2. Technical Execution Strategy
-To terminate this flickering cycle, we must enforce a strict guard rail on the network/calculation trigger pipeline:
-1. **Coordinate Reference Stability:** Deconstruct the input latitude/longitude objects into raw primitive string values (e.g., `origin.lat`, `origin.lng`) inside the hook dependency array to avoid object reference mutations triggering re-renders.
-2. **Locking Ref Mechanism:** Implement a mutable React tracking reference (`const queryInProgress = useRef(false)`) to lock the execution window. If a fetch operation is active, block subsequent duplicate queries from firing.
-3. **Clean Loading State Termination:** Turn off the search state flag explicitly only *after* the route geometry polyline has completely finished rendering onto the map viewport layout.
-
---
-
-## 3. Code Refactoring Blueprint
-
-Locate your map navigation layer or modal component (e.g., `LocationNavigationModal.tsx`) and refactor the execution lifecycle loop as defined below:
-
-```typescript
-import React, { useEffect, useState, useRef } from 'react';
-
-// Inside your Map Navigation Modal / Layer component wrapper:
-export const LocationNavigationModal = ({ isOpen, routeData }) => {
-  const [isSearchingRoute, setIsSearchingRoute] = useState(false);
-  const mapInstanceRef = useRef<any>(null);
-  
-  // CRITICAL FIX 2: Guard mechanism to block concurrent duplicated queries
-  const fetchLockRef = useRef(false);
-
-  // Deconstruct coordinate primitives to secure a stable dependency array
-  const originLat = routeData?.origin?.lat;
-  const originLng = routeData?.origin?.lng;
-  const destLat = routeData?.destination?.lat;
-  const destLng = routeData?.destination?.lng;
-
-  useEffect(() => {
-    if (!isOpen || !originLat || !originLng || !destLat || !destLng) return;
-    
-    // If an operation is already locked and active, bail out immediately to prevent loops
-    if (fetchLockRef.current) return;
-
-    const calculateOptimalRoute = async () => {
-      try {
-        // 1. Activate loading feedback banner
-        setIsSearchingRoute(true);
-        fetchLockRef.current = true; // Engage execution lock
-
-        console.log("Fetching route coordinates exactly once...");
-        
-        // --- YOUR MAP COMPONENT ROUTING LOGIC START ---
-        // Example: const response = await directionsService.route({...});
-        // await mapInstanceRef.current.drawPolyline(response);
-        // --- YOUR MAP COMPONENT ROUTING LOGIC END ---
-
-      } catch (error) {
-        console.error("Failed to compile route optimization maps:", error);
-      } finally {
-        // 2. Safe, definitive termination of the tracking states
-        setIsSearchingRoute(false);
-        fetchLockRef.current = false; // Disengage execution lock
-      }
-    };
-
-    calculateOptimalRoute();
-
-    // Cleanup phase: Reset execution parameters when inputs dismantle or modal closes
-    return () => {
-      fetchLockRef.current = false;
-      setIsSearchingRoute(false);
-    };
-    
-    /* CRITICAL FIX 1: Explicitly tracking primitives only. 
-       Do NOT pass full 'routeData', 'mapInstanceRef' or object literals here!
-    */
-  }, [isOpen, originLat, originLng, destLat, destLng]);
-
-  return (
-    <div className="relative w-full h-full">
-      {/* Map Content Target Canvas */}
-      <div id="navigation-viewport-map-canvas" className="w-full h-full" />
-
-      {/* RENDER CONTROLLER: Only mount the label if routing calculations are actively processing */}
-      {isSearchingRoute && (
-        <div className="absolute top-16 left-4 z-30 bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-800 px-3 py-1.5 rounded-full shadow-lg flex items-center gap-2 animate-pulse">
-          {/* Circular Loading Spinner Element */}
-          <div className="w-3.5 h-3.5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
-          <span className="text-[11px] font-bold text-slate-700 dark:text-slate-200 uppercase tracking-wider">
-            ĐANG TÌM ĐƯỜNG TỐI ƯU...
-          </span>
-        </div>
-      )}
-    </div>
-  );
-};
-
-## 4. Verification & Quality Acceptance Criteria
-[ ] Single Instance Trigger: Check console telemetry outputs. When the map modal mounts, the route compilation routine must print its trace log exactly once.
-
-[ ] Flicker Nullification: The "ĐANG TÌM ĐƯỜNG TỐI ƯU..." badge must display smoothly with an animation pulse. It must not shake, blink, flash, or rapid-cycle on and off.
-
-[ ] Deterministic Hiding: As soon as the blue route line draws completely across the map terrain grid layout, the loading badge must cleanly unmount and disappear from view without reappearing unless a new destination node button is clicked.
@@ -0,0 +1,83 @@
+# To AI Agent: Global Mobile Viewport Optimization Plan for `frontend/src/pages`
+
+## 1. Context & Architectural Objective
+We are launching a comprehensive mobile responsive refactoring across all core application pages inside `frontend/src/pages/`. Currently, several layouts suffer from desktop-first design assumptions, leading to sideways horizontal scrolling, squished sidebars, text wrapping collisions, and clipped viewports on mobile browsers.
+
+**Objective:** Inspect and refactor all page-level layout components to guarantee an impeccable, fluid mobile UX (screen widths under 640px) while preserving the current widescreen layout using Tailwind CSS responsive breakpoints (`sm:`, `md:`, `lg:`).
+
+---
+
+## 2. Core Mobile-Responsive Design Rules for Pages
+
+When auditing and refactoring page containers, strictly enforce these implementation guardrails:
+
+1. **Fluid Heights over Sticky Viewports:** Avoid hardcoding page heights to `h-screen`. On mobile browsers, the address bar dynamically expands and collapses, causing layout jumps. Use **`h-auto`** or the new dynamic viewport utilities **`h-dvh`** / **`min-h-dvh`** instead.
+2. **Horizontal Overflow Elimination:** Ensure the root wrapper of every page enforces `w-full overflow-x-hidden`. Any element causing a horizontal scrollbar must be converted to a flex-wrap, horizontal scroll grid, or dynamic stack.
+3. **Flex/Grid Stacking:** Multi-column dashboard layouts must stack vertically on mobile and separate into side-by-side structures on desktop:
+   - Use `flex flex-col md:flex-row`
+   - Use `grid grid-cols-1 md:grid-cols-3`
+4. **Touch Target & Spacing Downscaling:** Mobile views require higher breathing margins but smaller typography. Reduce text sizes (`text-base` ➔ `text-xs/sm`) and scale down paddings (`p-6` ➔ `p-3/4`) on mobile screens.
+
+---
+
+## 3. Targeted Page-by-Page Refactoring Guide
+
+### 3.1. `MemberDashboard.tsx` (Trang chính / Danh sách Tour)
+- **The Issue:** The grid grid-cols-2 or grid-cols-3 arrangement squishes Tour Card components on small viewports.
+- **Refactor Spec:** - Change main wrapper grid to `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4`.
+  - Force individual Tour Cards to occupy 100% width on mobile, stacking all actions ("Trò chuyện", "Chi tiết hành trình") into standard full-width rows or equal flex pairs (`flex-1`).
+
+### 3.2. `ItineraryTimeline.tsx` (Trang quản lý Lộ trình Chi tiết)
+- **The Issue:** The sub-navigation tabs ribbon ("Lộ trình, Chi phí, Ảnh...") gets compressed, causing word overlapping. Timeline lines and node circles clip when left padding is too wide.
+- **Refactor Spec:**
+  - Convert the sub-navigation menu container into a smooth horizontally scrollable ribbon on mobile:
+    ```jsx
+    className="flex items-center gap-2 overflow-x-auto whitespace-nowrap scrollbar-none pb-2 md:overflow-x-visible md:whitespace-normal"
+    ```
+  - Reduce the absolute left offset tracking of the timeline vertical axis indicator from `left-[32px]` down to a safe margin fitting tight spaces.
+
+### 3.3. `PhotoGallery.tsx` / `GalleryPage.tsx` (Thư viện ảnh Tour)
+- **The Issue:** Widescreen image matrices cause layout bleeding or weird masonry columns.
+- **Refactor Spec:**
+  - Force image grid wrappers to adopt `grid-cols-2` or `grid-cols-3` on mobile browsers instead of desktop 4-5 structures.
+  - Ensure the modal lightboxes or floating overlays use full-width settings (`w-screen h-screen`) with zero perimeter radius limits.
+
+---
+
+## 4. Code Refactoring Reference Standard
+
+### Layout Component Conversion Pattern:
+Apply this fluid adaptation standard on your root page return templates:
+
+```jsx
+{/* ❌ BEFORE: RIGID DESKTOP-FIRST PAGE WRAPPER */}
+<div className="w-screen h-screen bg-slate-950 flex p-6 gap-6">
+  <aside className="w-64 bg-slate-900">Sidebar</aside>
+  <main className="flex-1 overflow-y-auto">Main Dashboard Content</main>
+</div>
+
+{/* ✅ AFTER: MOBILE-FIRST FULLY RESPONSIVE LAYOUT SHEET */}
+<div className="w-full min-h-dvh bg-slate-950 flex flex-col md:flex-row p-3 sm:p-6 gap-4 sm:gap-6 overflow-x-hidden">
+  
+  {/* Sticky Navigation or Drawer Menu on Mobile, Fixed Sidebar on Desktop */}
+  <aside className="w-full md:w-64 shrink-0 bg-slate-900 rounded-xl p-4 md:sticky md:top-6 md:h-[calc(100vh-3rem)]">
+    Sidebar/Menu Content
+  </aside>
+
+  {/* Main Scrollable Core Content Space */}
+  <main className="w-full flex-1 overflow-y-visible md:overflow-y-auto">
+    <div className="space-y-4 max-w-7xl mx-auto">
+      {/* Grid elements stack on mobile (1 col) and expand on desktop */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* Card components populate here */}
+      </div>
+    </div>
+  </main>
+
+</div>
+
+## 5. Automated Verification Checklist for AI Agent
+
+  [ ] Zero Pixel Width Hardcodes: Scan all code blocks in frontend/src/pages/. Ensure no outer boundaries utilize structural fixed layouts like w-[1200px] or w-[800px] without a breakpoint utility prefix (e.g., lg:w-[1200px]).
+  [ ] Viewport Axis Lock: Simulate viewport checks at 360px, 390px, and 412px widths. Verify that horizontal browser layout shifting is fully neutralized (window.scrollX === 0).
+  [ ] Dynamic Viewport Heights Verification: Confirm that full-page dashboards replace static h-screen classes with h-auto or dynamic min-h-dvh settings to avoid layout bugs when the mobile address bar shifts.
@@ -0,0 +1,518 @@
+# Plan: Build ứng dụng Android 11+ từ Codebase hiện tại
+
+## Tổng quan
+
+Codebase hiện tại là một **web app React + Vite** (frontend) và **NestJS** (backend) theo mô hình monorepo. Chiến lược được đề xuất là dùng **Capacitor.js** để đóng gói web app thành native Android APK/AAB mà **không cần viết lại code**, đồng thời bổ sung các tính năng native (camera, GPS, notifications...) qua Capacitor plugins.
+
+---
+
+## So sánh các lựa chọn
+
+| Phương pháp | Ưu điểm | Nhược điểm | Phù hợp? |
+|---|---|---|---|
+| **Capacitor.js** | Tái sử dụng 100% React code, hỗ trợ Vite, ít học thêm | Cần build native mỗi lần release | ✅ **Phù hợp nhất** |
+| React Native | Performance tốt hơn, native feel | Phải viết lại toàn bộ UI/components | ❌ Tốn quá nhiều công |
+| PWA (Add to Home Screen) | Không cần build APK | Bị giới hạn API trình duyệt, không lên Google Play | ❌ Không phù hợp |
+| Cordova/PhoneGap | Tương tự Capacitor | Cũ hơn, ít được duy trì | ❌ Không nên dùng |
+
+**→ Quyết định: Sử dụng [Capacitor.js](https://capacitorjs.com/)** (do Ionic team phát triển), hỗ trợ Android API 30+ (Android 11).
+
+---
+
+## Kiến trúc triển khai
+
+```
+┌─────────────────────────────────────────────────────┐
+│              Android APK / AAB                      │
+│  ┌─────────────────────────────────────────────┐   │
+│  │         Capacitor WebView                   │   │
+│  │   (Chứa toàn bộ frontend React/Vite)        │   │
+│  └──────────────────┬──────────────────────────┘   │
+│                     │ HTTPS API calls               │
+└─────────────────────┼───────────────────────────────┘
+                      ▼
+         ┌────────────────────────┐
+         │   NestJS Backend       │
+         │   (Deployed server /   │
+         │    localhost dev)      │
+         └────────────────────────┘
+```
+
+---
+
+## Thông tin đã xác nhận
+
+| Hạng mục | Quyết định |
+|---|---|
+| **Tên app** | YoTrip |
+| **App ID** | `com.yotrip.app` |
+| **Phát hành** | Google Play Store |
+| **Camera** | Native (chụp ảnh trực tiếp từ app) |
+| **Backend** | Docker trên Debian Homelab, proxy qua Nginx |
+| **Domain** | `yotrip.labz.io.vn` |
+| **DNS động** | Cloudflare DDNS |
+
+---
+
+## Điều kiện tiên quyết
+
+> [!IMPORTANT]
+> Trước khi thực hiện, cần chuẩn bị:
+> 1. **Java JDK 17+** — Android build tool yêu cầu
+> 2. **Android Studio** — để build APK, quản lý Android SDK và tạo/chạy Emulator
+> 3. **Android SDK** với API Level 30+ (Android 11 / API 30)
+> 4. **Android Virtual Device (AVD)** — tạo trong Android Studio AVD Manager
+> 5. **Domain + HTTPS cho Homelab** — bắt buộc cho Google Play (xem Phần Bên dưới)
+
+> [!WARNING]
+> **Google Play bắt buộc HTTPS** — Android 9+ chặn HTTP rõ ràng mặc định. Homelab phải có SSL certificate hợp lệ (Let's Encrypt qua Nginx) và domain name trỏ vào homelab server.
+
+> [!NOTE]
+> Trên emulator, `localhost` của **emulator** khác với `localhost` của máy tính. Phải dùng địa chỉ đặc biệt `10.0.2.2` thay thế khi test emulator (xem Phase 5b).
+
+---
+
+## Proposed Changes
+
+### Phase 1a: Cấu hình Backend Homelab (Docker + Nginx)
+
+---
+
+> [!IMPORTANT]
+> Đây là điều kiện tiên quyết của toàn bộ kế hoạch. App không thể gửi lên Google Play nếu API chưa có HTTPS.
+
+Homelab của bạn chạy Docker + Nginx là **đủ điều kiện kết nối**, nhưng cần đảm bảo:
+
+#### Checklist Homelab/Nginx
+
+| Yêu cầu | Mô tả |
+|---|---|
+| **Domain name** | `yotrip.labz.io.vn` — đã xác nhận |
+| **Port forwarding** | Router cài đặt forward port 80 và 443 vào Nginx server |
+| **SSL Certificate** | Let's Encrypt (miễn phí) qua Certbot: `certbot --nginx -d yotrip.labz.io.vn` |
+| **Nginx reverse proxy** | Forward HTTPS → NestJS container port 3001 |
+| **Docker Compose** | Backend container luôn restart khi Debian reboot |
+| **CORS** | Backend phải cho phép origin từ app Capacitor (có thể mở rộng `*` ban đầu) |
+| **IP động** | Dùng **Cloudflare DDNS** để giữ domain `yotrip.labz.io.vn` luôn trỏ đúng IP |
+
+#### Mẫu cấu hình Nginx reverse proxy
+
+```nginx
+# /etc/nginx/sites-available/yotrip-api
+server {
+    listen 443 ssl;
+    server_name yotrip.labz.io.vn;
+
+    ssl_certificate /etc/letsencrypt/live/yotrip.labz.io.vn/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/yotrip.labz.io.vn/privkey.pem;
+
+    location / {
+        proxy_pass http://localhost:3001;
+        proxy_http_version 1.1;
+        # Cần thiết cho WebSocket (Socket.IO)
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+
+# Redirect HTTP sang HTTPS
+server {
+    listen 80;
+    server_name yotrip.labz.io.vn;
+    return 301 https://$host$request_uri;
+}
+```
+
+#### File cấu hình môi trường sẽ dùng
+
+```env
+# frontend/.env.production
+VITE_API_BASE_URL=https://yotrip.labz.io.vn
+
+# frontend/.env.emulator (test local)
+VITE_API_BASE_URL=http://10.0.2.2:3001
+```
+
+---
+
+### Phase 1b: Tập trung API URL trong Frontend
+
+#### [MODIFY] [vite.config.ts](file:///home/locpham/travelplanning/frontend/vite.config.ts)
+- Dev proxy hiện tại trỏ về `http://localhost:3001` — chỉ hoạt động khi chạy trên browser máy tính.
+- Tạo biến môi trường `VITE_API_BASE_URL` để frontend biết trỏ đến đâu.
+
+#### [NEW] `.env.production` trong `frontend/`
+```env
+VITE_API_BASE_URL=https://your-backend-server.com
+```
+
+#### [NEW] `.env.development` trong `frontend/`
+```env
+# Dùng ngrok hoặc IP máy tính cho mobile dev
+VITE_API_BASE_URL=http://192.168.x.x:3001
+```
+
+#### [MODIFY] Toàn bộ các file gọi `/api/v1/...`
+- Thay `fetch('/api/v1/...')` bằng `fetch(\`${import.meta.env.VITE_API_BASE_URL}/api/v1/...\`)`
+- **Ưu tiên**: Tạo một file `src/lib/api.ts` (helper) để tập trung URL, tránh sửa từng file.
+
+```typescript
+// src/lib/api.ts
+export const API_BASE = import.meta.env.VITE_API_BASE_URL || '';
+
+export const apiFetch = (path: string, options?: RequestInit) =>
+  fetch(`${API_BASE}${path}`, options);
+```
+
+---
+
+### Phase 2: Tích hợp Capacitor
+
+---
+
+#### Cài đặt Capacitor vào frontend
+
+```bash
+# Trong thư mục frontend/
+npm install @capacitor/core @capacitor/cli
+npx cap init "YoTrip" "com.yotrip.app" --web-dir dist
+npm install @capacitor/android
+npx cap add android
+```
+
+#### [NEW] `frontend/capacitor.config.ts`
+```typescript
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.yotrip.app',      // ✅ App ID chính thức
+  appName: 'YoTrip',            // ✅ Tên app
+  webDir: 'dist',
+  server: {
+    // Production: không cần cấu hình, dùng VITE_API_BASE_URL trong build
+    // Dev/Emulator: uncomment dòng dưới
+    // url: 'http://10.0.2.2:3002',
+    // cleartext: true,
+  },
+  android: {
+    minSdkVersion: 30,          // Android 11 (API 30)
+    targetSdkVersion: 34,       // Android 14
+    buildOptions: {
+      keystorePath: 'release-key.keystore',
+      keystoreAlias: 'yotrip',
+    }
+  },
+  plugins: {
+    SplashScreen: {
+      launchAutoHide: false,
+      backgroundColor: '#0f172a',
+      androidSplashResourceName: 'splash',
+    },
+    // Camera plugin config (bắt buộc vì app cần chụp ảnh)
+    Camera: {
+      presentationStyle: 'fullscreen',
+    }
+  }
+};
+
+export default config;
+```
+
+---
+
+### Phase 3: Android Project Setup
+
+---
+
+#### Build flow
+
+```bash
+# Bước 1: Build React app thành static files
+npm run build -w frontend
+
+# Bước 2: Copy static files vào Android project
+npx cap copy android
+
+# Bước 3: Sync plugins và dependencies
+npx cap sync android
+
+# Bước 4: Mở Android Studio để build APK/AAB
+npx cap open android
+```
+
+#### [MODIFY] `android/app/src/main/AndroidManifest.xml` (tự sinh bởi Capacitor)
+Thêm các permissions cần thiết:
+```xml
+<uses-permission android:name="android.permission.INTERNET" />
+<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+<uses-permission android:name="android.permission.CAMERA" />
+<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
+<!-- Android 11+ scoped storage -->
+<uses-permission android:name="android.permission.MANAGE_MEDIA" />
+```
+
+---
+
+### Phase 4: Native Plugins (**Bắt buộc**)
+
+| Plugin | Mức độ | Mục đích | Package |
+|---|---|---|---|
+| `@capacitor/camera` | ✅ **Bắt buộc** | Chụp ảnh trực tiếp từ camera + gallery | `@capacitor/camera` |
+| `@capacitor/geolocation` | ✅ **Bắt buộc** | GPS thiết bị cho bản đồ | `@capacitor/geolocation` |
+| `@capacitor/splash-screen` | ✅ **Bắt buộc** | Màn hình khởi động | `@capacitor/splash-screen` |
+| `@capacitor/status-bar` | ✅ **Bắt buộc** | Màu status bar đồng bộ UI | `@capacitor/status-bar` |
+| `@capacitor/push-notifications` | 🔲 Tùy chọn | Thông báo bình luận, tour | `@capacitor/push-notifications` |
+| `@capacitor/network` | 🔲 Tùy chọn | Kiểm tra kết nối mạng | `@capacitor/network` |
+
+#### Cách dùng Camera plugin trong code (thay thế input file)
+
+```typescript
+// Thay thế <input type="file"> bằng Capacitor Camera API
+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
+
+const takePhoto = async () => {
+  const photo = await Camera.getPhoto({
+    resultType: CameraResultType.DataUrl, // Hoặc Uri cho hiệu năng tốt hơn
+    source: CameraSource.Prompt,          // Hỏi: Camera hay Gallery?
+    quality: 85,
+  });
+  // photo.dataUrl → upload lên backend
+};
+```
+
+---
+
+### Phase 5: Điều chỉnh UI cho Mobile
+
+Một số thành phần hiện tại đã có responsive CSS, nhưng cần kiểm tra thêm:
+
+- **`PublicPhotoModal.tsx`**: Đã có kế hoạch fix mobile layout (từ plan cũ), cần implement trước khi build.
+- **`ExploreMap.tsx`**: Leaflet map cần đảm bảo touch events hoạt động (thường OK trên mobile).
+- **`TourDetailPage.tsx`**: Kiểm tra scroll behavior, fixed headers.
+- **Safe Area Insets**: Dùng `env(safe-area-inset-*)` cho các thiết bị có notch/dynamic island.
+
+```css
+/* Thêm vào index.css */
+:root {
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+}
+```
+
+---
+
+### Phase 5b: Test trên Android Emulator (AVD)
+
+> [!IMPORTANT]
+> Đây là bước bắt buộc trước khi test trên thiết bị thật. Emulator giúp phát hiện lỗi layout, API call, và native permissions mà không cần thiết bị vật lý.
+
+#### Tạo Android Virtual Device (AVD)
+1. Mở **Android Studio → Tools → Device Manager → Create Device**
+2. Chọn **Pixel 6** (hoặc tương đương) → chọn hệ thống **Android 11.0 (API 30)**
+3. Cấp RAM 2GB+, Storage 4GB+ cho emulator
+4. Khởi động emulator, đảm bảo hiện **"Emulator is running"**
+
+#### Địa chỉ đặc biệt trong Emulator
+
+```
+10.0.2.2  →  Trỏ đến localhost (127.0.0.1) của máy tính host
+```
+
+Khi chạy trong emulator, backend ở `localhost:3001` của máy tính phải được gọi bằng `10.0.2.2:3001`.
+
+#### Cấu hình `capacitor.config.ts` cho Emulator Dev
+```typescript
+// Tạm thời uncomment khi test trên emulator
+server: {
+  url: 'http://10.0.2.2:3002', // Trỏ đến Vite dev server trên máy host
+  cleartext: true,             // Cho phép HTTP (không dùng trong production)
+},
+```
+
+Hoặc dùng biến môi trường `.env.emulator`:
+```env
+VITE_API_BASE_URL=http://10.0.2.2:3001
+```
+
+#### Chạy app trên Emulator
+```bash
+# Bước 1: Đảm bảo emulator đang chạy
+adb devices
+# Phải thấy: emulator-5554  device
+
+# Bước 2: Build & sync
+npm run build -w frontend
+npx cap copy android && npx cap sync android
+
+# Bước 3: Chạy trực tiếp trên emulator
+npx cap run android
+# hoặc trong Android Studio: Run ▶ chọn emulator
+```
+
+#### Checklist kiểm tra trên Emulator
+
+| Chức năng | Test case | Kết quả mong đợi |
+|---|---|---|
+| Khởi động | Mở app | Splash screen → Landing page |
+| Đăng nhập | Nhập email/password | Vào ExploreMap |
+| Bản đồ | Zoom/pan trên emulator | Leaflet map hoạt động |
+| Upload ảnh | Chọn ảnh từ gallery giả lập | Ảnh được upload thành công |
+| Bình luận | Nhập & gửi bình luận | Hiện real-time qua WebSocket |
+| Safe area | Xoay màn hình | Layout không bị che |
+| Responsive | Portrait/Landscape | UI không bị vỡ |
+
+---
+
+### Phase 6: Test trên thiết bị Android thật
+
+> [!NOTE]
+> Chỉ tiến hành Phase này sau khi toàn bộ Phase 5b đã pass. Thiết bị thật giúp phát hiện lỗi về hiệu năng, cảm biến thực tế, và hành vi network.
+
+#### Kết nối thiết bị
+```bash
+# Bật Developer Mode + USB Debugging trên điện thoại
+# Cắm cáp USB → xác nhận "Allow USB Debugging"
+adb devices
+# Phải thấy: <serial_number>  device
+```
+
+#### Cấu hình backend cho thiết bị thật
+Thiết bị thật phải dùng IP LAN hoặc ngrok (không thể dùng `10.0.2.2`):
+```bash
+# Tùy chọn A: Dùng IP LAN (điện thoại và máy tính cùng WiFi)
+VITE_API_BASE_URL=http://192.168.x.x:3001
+
+# Tùy chọn B: Dùng ngrok (tiện hơn, không cần cùng mạng)
+ngrok http 3001
+# → VITE_API_BASE_URL=https://xxxx.ngrok-free.app
+```
+
+#### Cài debug APK lên thiết bị thật
+```bash
+# Build debug APK
+cd frontend/android && ./gradlew assembleDebug
+
+# Cài APK lên thiết bị
+adb install app/build/outputs/apk/debug/app-debug.apk
+```
+
+---
+
+### Phase 7: Ký APK và phát hành
+
+#### Debug build (dev testing)
+```bash
+cd android && ./gradlew assembleDebug
+# Output: android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+#### Release build (production)
+```bash
+# Tạo keystore lần đầu
+keytool -genkey -v -keystore release-key.keystore -alias yotrip \
+  -keyalg RSA -keysize 2048 -validity 10000
+
+# Build release
+cd android && ./gradlew bundleRelease
+# Output: .aab file để upload Google Play
+```
+
+---
+
+## Checklist thực hiện
+
+```
+Phase 1 - Backend URL
+[ ] Tạo file src/lib/api.ts (centralised fetch helper)
+[ ] Refactor tất cả fetch('/api/v1/...) sang apiFetch()
+[ ] Tạo .env.production với VITE_API_BASE_URL
+[ ] Tạo .env.emulator với VITE_API_BASE_URL=http://10.0.2.2:3001
+
+Phase 2 - Capacitor Setup
+[ ] npm install @capacitor/core @capacitor/cli @capacitor/android
+[ ] npx cap init với App ID và tên app
+[ ] Tạo capacitor.config.ts
+[ ] npx cap add android
+
+Phase 3 - Build & Sync
+[ ] npm run build -w frontend (kiểm tra không có lỗi TypeScript)
+[ ] npx cap copy android && npx cap sync android
+[ ] Cấu hình AndroidManifest.xml với permissions
+
+Phase 4 - Native Plugins
+[ ] Cài @capacitor/geolocation (thay navigator.geolocation)
+[ ] Cài @capacitor/camera (upload ảnh từ điện thoại)
+[ ] Cài @capacitor/splash-screen, @capacitor/status-bar
+
+Phase 5 - Mobile UI Polish
+[ ] Implement mobile layout fixes cho PublicPhotoModal.tsx
+[ ] Kiểm tra safe-area-inset cho Android
+
+Phase 5b - Test trên Android Emulator (AVD)
+[ ] Tạo AVD Android 11 (API 30) trong Android Studio
+[ ] Cấu hình capacitor.config.ts server.url = http://10.0.2.2:3002
+[ ] Khởi động emulator → adb devices xác nhận kết nối
+[ ] npx cap run android → kiểm tra app khởi động
+[ ] Kiểm tra toàn bộ checklist: Login, Map, Upload, Comment, SafeArea
+[ ] Sửa tất cả lỗi phát sinh trên emulator
+
+Phase 6 - Test trên thiết bị Android 11 thật
+[ ] Bật Developer Mode + USB Debugging trên điện thoại
+[ ] adb devices xác nhận thiết bị kết nối
+[ ] Cấu hình VITE_API_BASE_URL = IP LAN hoặc ngrok
+[ ] Build debug APK → adb install
+[ ] Kiểm tra lại toàn bộ checklist trên thiết bị thật
+[ ] Kiểm tra performance, pin, cảm biến GPS thực tế
+
+Phase 7 - Build Release
+[ ] Build debug APK để test
+[ ] Tạo keystore và build release AAB
+[ ] Chuẩn bị lên Google Play (nếu cần)
+```
+
+---
+
+## Verification Plan
+
+### Automated
+- `npm run build -w frontend` — không có lỗi TypeScript/build
+- `adb devices` — xác nhận emulator/thiết bị thật đang kết nối
+
+### Stage 1: Test trên Android Emulator
+1. App khởi động không crash, hiện Landing page đúng.
+2. Đăng nhập / Đăng ký hoạt động (kết nối `10.0.2.2:3001`).
+3. Bản đồ Leaflet zoom/pan bằng cảm ứng mô phỏng.
+4. Upload ảnh từ gallery giả lập của emulator.
+5. Bình luận real-time qua WebSocket hoạt động.
+6. Layout không bị vỡ khi xoay màn hình (portrait/landscape).
+7. Safe-area-inset không bị che bởi status bar.
+
+### Stage 2: Test trên thiết bị Android 11 thật
+1. Lặp lại toàn bộ Stage 1 trên thiết bị thật.
+2. GPS thực tế hoạt động và hiện đúng vị trí trên bản đồ.
+3. Camera native chụp và upload ảnh thành công.
+4. Performance mượt mà (scroll, animation không giật).
+5. WebSocket giữ kết nối ổn định trên mobile network (4G/WiFi).
+6. Kiểm tra pin consumption không bất thường.
+
+---
+
+## Các quyết định đã xác nhận
+
+| Câu hỏi | Trả lời |
+|---|---|
+| Backend deploy ở đâu? | Docker trên Debian homelab, proxy qua Nginx |
+| Tên app và App ID? | `YoTrip` — `com.yotrip.app` |
+| Domain? | `yotrip.labz.io.vn` (Cloudflare DDNS) |
+| Phát hành? | Đưa lên **Google Play Store** |
+| Camera? | **Native camera** — chụp ảnh trực tiếp từ app |
+
+> [!NOTE]
+> **Lưu ý quan trọng về Homelab + Google Play:**
+> - Homelab + Docker + Nginx là **đủ điều kiện kết nối** cho app Android.
+> - Domain `yotrip.labz.io.vn` dùng **Cloudflare DDNS** — IP homelab thay đổi sẽ được cập nhật tự động.
+> - **WebSocket (Socket.IO)** cần Nginx được cấu hình `proxy_set_header Upgrade` (xem Phase 1a).
+> - Certbot cấp SSL cho `yotrip.labz.io.vn`: `certbot --nginx -d yotrip.labz.io.vn`
@@ -31,7 +31,7 @@ services:
    ports:
      - "3001:3001"
    volumes:
-      - ./backend/uploads:/usr/src/app/uploads
+      - /mnt/storage/yotrip/uploads:/usr/src/app/uploads
    environment:
      DATABASE_URL: "postgresql://postgres:password@postgres:5432/travel_db?schema=public"
      REDIS_URL: "redis://redis:6379"
@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml
@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep
@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace "com.yotrip.app"
+    compileSdk rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.yotrip.app"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}
@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_21
+      targetCompatibility JavaVersion.VERSION_21
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+    implementation project(':capacitor-geolocation')
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
+            android:name=".MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+</manifest>
@@ -0,0 +1,5 @@
+package com.yotrip.app;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}
@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">YoTrip</string>
+    <string name="title_activity_main">YoTrip</string>
+    <string name="package_name">com.yotrip.app</string>
+    <string name="custom_url_scheme">com.yotrip.app</string>
+</resources>
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>
@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}
@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.7.2'
+        classpath 'com.google.gms:google-services:4.4.2'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
@@ -0,0 +1,6 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-geolocation'
+project(':capacitor-geolocation').projectDir = new File('../../node_modules/@capacitor/geolocation/android')
@@ -0,0 +1,22 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
@@ -0,0 +1,252 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'
@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 23
+    compileSdkVersion = 35
+    targetSdkVersion = 35
+    androidxActivityVersion = '1.9.2'
+    androidxAppCompatVersion = '1.7.0'
+    androidxCoordinatorLayoutVersion = '1.2.0'
+    androidxCoreVersion = '1.15.0'
+    androidxFragmentVersion = '1.8.4'
+    coreSplashScreenVersion = '1.0.1'
+    androidxWebkitVersion = '1.12.1'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.2.1'
+    androidxEspressoCoreVersion = '3.6.1'
+    cordovaAndroidVersion = '10.1.1'
+}
@@ -0,0 +1,9 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.yotrip.app',
+  appName: 'YoTrip',
+  webDir: 'dist'
+};
+
+export default config;
@@ -21,8 +21,8 @@
    <meta name="twitter:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
    <meta name="twitter:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
    <meta name="twitter:image" content="https://yotrip.labz.io.vn/background.avif" />
-    <script type="module" crossorigin src="/assets/index-D6jMbgMg.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-nLng8wU9.css">
+    <script type="module" crossorigin src="/assets/index-D0YTcNWm.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cnj-xh6m.css">
  </head>
 <body>
    <div id="root"></div>
@@ -10,6 +10,10 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@capacitor/android": "^8.4.1",
+    "@capacitor/cli": "^7.6.7",
+    "@capacitor/core": "^8.4.1",
+    "@capacitor/geolocation": "^8.2.0",
    "date-fns": "^4.4.0",
    "jspdf": "^4.2.1",
    "jspdf-autotable": "^5.0.8",
@@ -385,10 +385,10 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
  };

  return (
-    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[2000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative w-full max-w-lg bg-[var(--surface)] rounded-3xl shadow-2xl overflow-hidden p-8 max-h-[90vh] overflow-y-auto">
-        <div className="flex justify-between items-center mb-6">
+      <div className="relative w-full h-full sm:max-w-lg bg-[var(--surface)] rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col sm:max-h-[85vh] animate-in zoom-in-95 duration-200">
+        <div className="flex justify-between items-center mb-6 p-5 sm:p-8 pb-0 sm:pb-0 shrink-0">
          <h2 className="text-2xl font-bold text-[var(--text-primary)] flex items-center gap-2">
            <MapIcon className="w-6 h-6 text-blue-600" /> {titleText}
          </h2>
@@ -473,7 +473,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
          </button>
        )}

-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4 overflow-y-auto flex-1 text-left">
          <div>
            <label className="block text-sm font-bold text-[var(--text-secondary)] mb-1">Tên địa điểm</label>
            <input 
@@ -214,10 +214,10 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
  if (!isOpen || isPublicView) return null; // Do not render if public view

  return (
-    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[2000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
-        <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+      <div className="relative w-full sm:max-w-md bg-white rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col h-full sm:h-auto sm:max-h-[85vh] animate-in zoom-in-95 duration-200">
+        <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 shrink-0">
          <div>
            <h2 className="text-lg font-bold text-gray-900 flex items-center gap-2">
              <UserPlus className="w-5 h-5 text-blue-600" /> {canCreateDirectly ? 'Thành viên hành trình' : 'Mời tham gia tour'}
@@ -392,10 +392,10 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({ isOpen, onClose,
                    {submitError}
                  </div>
                )}
-                {loading ? (
-                  <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-600" /></div>
-                ) : (
-                  <div className="space-y-2 max-h-[30vh] overflow-y-auto pr-1">
+{loading ? (
+                   <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-600" /></div>
+                 ) : (
+                   <div className="space-y-2 max-h-[30vh] sm:max-h-[25vh] overflow-y-auto pr-1">
                    {query.trim() && canCreateDirectly && (
                      <button
                        type="button"
@@ -172,10 +172,10 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t


  return (
-    <div className="fixed inset-0 z-[2500] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[2500] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative w-full max-w-lg bg-[var(--surface)] rounded-3xl shadow-2xl overflow-hidden p-8 max-h-[90vh] flex flex-col animate-in zoom-in-95 duration-200">
-        <div className="flex justify-between items-center mb-6">
+      <div className="relative w-full h-full sm:max-w-lg bg-[var(--surface)] rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col sm:max-h-[85vh] animate-in zoom-in-95 duration-200">
+        <div className="flex justify-between items-center mb-6 p-5 sm:p-8 pb-0 sm:pb-0 shrink-0">
          <h2 className="text-2xl font-bold text-[var(--text-primary)] flex items-center gap-2">
            <ImageIcon className="w-6 h-6 text-blue-600" /> Tải ảnh lên
          </h2>
@@ -184,7 +184,7 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
          </button>
        </div>

-        <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0">
+        <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0 p-5 sm:p-8 pt-0 sm:pt-0">
          <div 
            onClick={() => fileInputRef.current?.click()}
            className="border-2 border-dashed border-[var(--border)] rounded-[32px] p-10 flex flex-col items-center justify-center cursor-pointer hover:bg-[var(--background)]/50 hover:border-blue-200 transition-all mb-6 group"
@@ -132,11 +132,11 @@ export const CommentModal: React.FC<CommentModalProps> = ({ isOpen, onClose, loc
  if (!isOpen) return null;

  return (
-    <div className="fixed inset-0 z-[5000] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[5000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={onClose} />
-      <div className="relative w-full max-w-md bg-[var(--surface)] rounded-[32px] shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-in zoom-in-95 duration-200">
+      <div className="relative w-full h-full sm:max-w-md bg-[var(--surface)] rounded-t-2xl sm:rounded-[32px] shadow-2xl overflow-hidden flex flex-col sm:max-h-[85vh] animate-in zoom-in-95 duration-200">
        {/* Header */}
-        <div className="p-6 border-b border-[var(--border)] flex justify-between items-center bg-[var(--surface)] sticky top-0 z-10">
+        <div className="p-6 border-b border-[var(--border)] flex justify-between items-center bg-[var(--surface)] sticky top-0 z-10 shrink-0">
          <div>
            <h3 className="text-xl font-black text-[var(--text-primary)] flex items-center gap-2">
              <MessageSquare className="w-5 h-5 text-blue-600" />
@@ -186,7 +186,7 @@ export const CommentModal: React.FC<CommentModalProps> = ({ isOpen, onClose, loc
        </div>

        {/* Input Area */}
-        <div className="p-4 bg-[var(--surface)] border-t border-[var(--border)]">
+        <div className="p-4 bg-[var(--surface)] border-t border-[var(--border)] shrink-0">
          <div className="relative flex items-center gap-2">
            <input
              type="text"
@@ -13,13 +13,10 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, messa
  if (!isOpen) return null;

  return (
-    <div className="fixed inset-0 z-[6000] flex items-center justify-center p-4">
-      {/* Backdrop */}
+    <div className="fixed inset-0 z-[6000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={onCancel} />
-      
-      {/* Modal Content */}
-      <div className="relative w-full max-w-sm bg-[var(--surface)] rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
-        <div className="flex justify-between items-center mb-4">
+      <div className="relative w-full sm:max-w-sm h-full sm:h-auto max-h-screen sm:max-h-[85vh] bg-[var(--surface)] rounded-t-2xl sm:rounded-2xl shadow-2xl p-6 sm:p-8 animate-in zoom-in-95 duration-200 flex flex-col">
+        <div className="flex justify-between items-center mb-4 shrink-0">
          <div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-500 shadow-inner">
            <AlertTriangle className="w-6 h-6" />
          </div>
@@ -33,7 +30,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, messa
          {message || 'Bạn có chắc chắn muốn thực hiện hành động này không?'}
        </p>

-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-2 gap-3 pt-2 mt-auto">
          <button
            onClick={onCancel}
            className="py-4 bg-[var(--background)] hover:bg-[var(--background)] text-[var(--text-secondary)] font-bold rounded-2xl transition-all active:scale-95"
@@ -118,7 +118,7 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
  };

  return (
-    <div className="fixed inset-0 z-[6000] flex items-center justify-center p-4 animate-in fade-in duration-200">
+    <div className="fixed inset-0 z-[6000] flex items-end sm:items-center justify-center p-0 sm:p-4 animate-in fade-in duration-200">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
@@ -126,7 +126,7 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
      />

      {/* Content */}
-      <div className="relative w-full max-w-2xl h-[550px] bg-white dark:bg-slate-900 rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-gray-100 dark:border-slate-800 animate-in zoom-in-95 duration-200">
+      <div className="relative w-full h-full sm:w-auto sm:max-w-2xl sm:h-[85vh] bg-white dark:bg-slate-900 rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-gray-100 dark:border-slate-800 animate-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="p-4 border-b border-gray-100 dark:border-slate-800/80 flex items-center justify-between bg-white dark:bg-slate-900 shrink-0">
          <div className="flex items-center gap-2">
@@ -145,7 +145,7 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
        </div>

        {/* Map Body */}
-        <div className="flex-1 bg-gray-50 dark:bg-slate-950 relative min-h-[300px]" style={{ zIndex: 10 }}>
+        <div className="flex-1 bg-gray-50 dark:bg-slate-950 relative min-h-[300px] sm:min-h-0" style={{ zIndex: 10 }}>
          
          {/* Floating Search Panel */}
          <div className="absolute top-4 left-4 right-4 sm:right-auto z-[1000] sm:w-80 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl border border-slate-150 dark:border-slate-800 shadow-xl p-2 flex flex-col gap-1.5">
@@ -101,10 +101,10 @@ export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolea
  };

  return (
-    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[2000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative w-full max-w-md bg-[var(--surface)] rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
-        <div className="p-5 border-b border-[var(--border)] flex justify-between items-center bg-[var(--background)]/50">
+      <div className="relative w-full sm:max-w-md bg-[var(--surface)] rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col h-full sm:h-auto sm:max-h-[85vh] animate-in zoom-in-95 duration-200">
+        <div className="p-5 border-b border-[var(--border)] flex justify-between items-center bg-[var(--background)]/50 shrink-0">
          <h2 className="text-xl font-bold text-[var(--text-primary)]">Tạo Tour mới</h2>
          <button onClick={onClose} className="p-2 hover:bg-[var(--background)] rounded-full transition-colors">✕</button>
        </div>
@@ -259,11 +259,11 @@ export const ItineraryTimeline = ({
  }, [legs, expandedStageId]);

  return (
-    <div id="itinerary-timeline-print-zone" className="timeline-scroll-container itinerary-timeline-container">
+    <div id="itinerary-timeline-print-zone" className="timeline-scroll-container itinerary-timeline-container overflow-x-hidden">
        {legs.length === 0 ? (
-          <div className="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
-             <List className="w-12 h-12 text-gray-300 mx-auto mb-4" />
-             <p className="text-gray-500 font-medium">Chưa có chặng nào trong lộ trình.</p>
+          <div className="text-center py-16 sm:py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200">
+             <List className="w-10 h-10 sm:w-12 sm:h-12 text-gray-300 mx-auto mb-3 sm:mb-4" />
+             <p className="text-gray-500 font-medium text-xs sm:text-sm">Chưa có chặng nào trong lộ trình.</p>
          </div>
        ) : (
          legs.map((leg, legIdx) => {
@@ -278,15 +278,15 @@ export const ItineraryTimeline = ({
              const prevLegLastLoc = legIdx > 0 ? legs[legIdx - 1]?.locations.slice(-1)[0] : null;

              return (
-                <section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
+                <section key={leg.id} id={`leg-anchor-node-${leg.id}`} className={`folder-node-wrapper scroll-mt-[60px] sm:scroll-mt-[70px] ${expandedStageId === leg.id ? 'expanded' : 'collapsed'}`}>
                  {/* Folder header row - clickable to toggle exclusive expansion */}
                  <div 
                    onClick={() => toggleStageExpanded(leg.id)}
                    className="folder-header-row animate-in fade-in slide-in-from-bottom-4 duration-300 hover:bg-gray-50/50 transition-colors"
                  >
-                    <div className="font-black text-blue-600 text-xl truncate flex-1 flex flex-col gap-1">
+                    <div className="font-black text-blue-600 text-lg sm:text-xl truncate flex-1 flex flex-col gap-1">
                      <div className="flex items-center gap-2">
-                        <span className="bg-blue-600 text-white w-8 h-8 rounded-lg flex items-center justify-center text-sm shrink-0">
+                        <span className="bg-blue-600 text-white w-7 h-7 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center text-xs sm:text-sm shrink-0">
                          {leg.sequence}
                        </span>
                        <div className="flex flex-col overflow-hidden">
@@ -466,29 +466,29 @@ export const ItineraryTimeline = ({
                                  {isStartPoint && (
                                    <span className="inline-block px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm bắt đầu</span>
                                  )}
-                                  {isEndPoint && (
-                                    <span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
-                                  )}
-                                  <h3 
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      onNavigate?.(location);
-                                    }}
-                                    className={`font-semibold text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
-                                  >
-                                    {location.name}
-                                  </h3>
-                                  <div className="flex items-center text-sm text-gray-500 mt-1">
+{isEndPoint && (
+                                     <span className="inline-block px-2 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
+                                   )}
+                                   <h3 
+                                     onClick={(e) => {
+                                       e.stopPropagation();
+                                       onNavigate?.(location);
+                                     }}
+                                     className={`font-semibold text-base sm:text-lg cursor-pointer hover:text-blue-600 transition-colors select-none ${location.status === 'COMPLETED' ? 'text-gray-500 line-through' : 'text-gray-800'}`}
+                                   >
+                                     {location.name}
+                                   </h3>
+                                  <div className="flex items-center text-xs sm:text-sm text-gray-500 mt-1">
                                    <MapPin className="w-3 h-3 mr-1" />
-                                    <span className="truncate max-w-[200px] sm:max-w-md">{location.address}</span>
+                                    <span className="truncate max-w-[120px] xs:max-w-[180px] sm:max-w-md">{location.address}</span>
                                  </div>
                                  {location.note && (
-                                    <div className="mt-2 text-xs text-gray-600 bg-gray-50 p-2 rounded-lg border border-gray-100 italic">
+                                    <div className="mt-1.5 sm:mt-2 text-[10px] sm:text-xs text-gray-600 bg-gray-50 p-1.5 sm:p-2 rounded-lg border border-gray-100 italic">
                                      {location.note}
                                    </div>
                                  )}
                                  {dwellMinutes !== null && (
-                                    <div className="flex items-center text-xs text-amber-600 font-medium mt-1">
+                                    <div className="flex items-center text-[10px] sm:text-xs text-amber-600 font-medium mt-1">
                                      <Clock className="w-3 h-3 mr-1" />
                                      <span>Thời gian dừng: {formatTravelTime(dwellMinutes)}</span>
                                    </div>
@@ -631,124 +631,124 @@ export const ItineraryTimeline = ({
        )}

      {/* Modal Khai báo số chặng (Popover) */}
-      {isLegCountModalOpen && (
-            <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
-              <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} />
-              <div className="relative w-full max-w-sm bg-white dark:bg-slate-900 rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
-                <div className="flex justify-between items-center mb-6">
-                  <h3 className="text-xl font-black text-gray-900 dark:text-white">Số chặng lộ trình</h3>
-                  <button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
-                    <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
-                  </button>
-                </div>
-                
-                <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed">
-                  Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng)
-                </p>
+{isLegCountModalOpen && (
+             <div className="fixed inset-0 z-[4000] flex items-end sm:items-center justify-center p-0 sm:p-4">
+               <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} />
+               <div className="relative w-full sm:max-w-sm bg-white dark:bg-slate-900 rounded-t-2xl sm:rounded-[32px] shadow-2xl p-8 sm:p-8 h-full sm:h-auto sm:max-h-[85vh] animate-in zoom-in-95 duration-200 flex flex-col">
+                 <div className="flex justify-between items-center mb-6 shrink-0">
+                   <h3 className="text-xl font-black text-gray-900 dark:text-white">Số chặng lộ trình</h3>
+                   <button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
+                     <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
+                   </button>
+                 </div>
+                 
+                 <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed">
+                   Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng)
+                 </p>

-                <div className="flex items-center justify-center gap-6 mb-8">
-                  <button 
-                    onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))}
-                    className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
-                  >
-                    -
-                  </button>
-                  <span className="text-4xl font-black text-blue-600 dark:text-blue-400 w-12 text-center">{tempLegCount}</span>
-                  <button 
-                    onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))}
-                    className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
-                  >
-                    +
-                  </button>
-                </div>
+                 <div className="flex items-center justify-center gap-6 mb-8">
+                   <button 
+                     onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))}
+                     className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
+                   >
+                     -
+                   </button>
+                   <span className="text-4xl font-black text-blue-600 dark:text-blue-400 w-12 text-center">{tempLegCount}</span>
+                   <button 
+                     onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))}
+                     className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
+                   >
+                     +
+                   </button>
+                 </div>

-                <button
-                  onClick={confirmDeclareLegs}
-                  className="w-full py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95"
-                >
-                  Xác nhận
-                </button>
-              </div>
-            </div>
-          )}
+                 <button
+                   onClick={confirmDeclareLegs}
+                   className="w-full py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95 mt-auto"
+                 >
+                   Xác nhận
+                 </button>
+               </div>
+             </div>
+           )}

          {/* Modal Chỉnh sửa Chặng (Popover) */}
-          {isEditModalOpen && (
-            <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
-              <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsEditModalOpen(false)} />
-              <div className="relative w-full max-w-md bg-white dark:bg-slate-900 rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
-                <div className="flex justify-between items-center mb-6">
-                  <h3 className="text-xl font-black text-gray-900 dark:text-white">Chỉnh sửa Chặng</h3>
-                  <button onClick={() => setIsEditModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
-                    <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
-                  </button>
-                </div>
-                
-                <div className="space-y-5">
-                  <div>
-                    <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Tên chặng</label>
-                    <input
-                      type="text"
-                      value={editingLegData.note}
-                      onChange={(e) => setEditingLegData({ ...editingLegData, note: e.target.value })}
-                      placeholder="VD: Ngày 1: Khởi hành"
-                      className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
-                    />
-                  </div>
+{isEditModalOpen && (
+             <div className="fixed inset-0 z-[4000] flex items-end sm:items-center justify-center p-0 sm:p-4">
+               <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsEditModalOpen(false)} />
+               <div className="relative w-full sm:max-w-md bg-white dark:bg-slate-900 rounded-t-2xl sm:rounded-[32px] shadow-2xl p-8 sm:p-8 h-full sm:h-auto sm:max-h-[85vh] animate-in zoom-in-95 duration-200 flex flex-col">
+                 <div className="flex justify-between items-center mb-6 shrink-0">
+                   <h3 className="text-xl font-black text-gray-900 dark:text-white">Chỉnh sửa Chặng</h3>
+                   <button onClick={() => setIsEditModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
+                     <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
+                   </button>
+                 </div>
+                 
+                 <div className="space-y-5 overflow-y-auto flex-1">
+                   <div>
+                     <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Tên chặng</label>
+                     <input
+                       type="text"
+                       value={editingLegData.note}
+                       onChange={(e) => setEditingLegData({ ...editingLegData, note: e.target.value })}
+                       placeholder="VD: Ngày 1: Khởi hành"
+                       className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
+                     />
+                   </div>

-                  <div>
-                    <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
-                      <AlignLeft className="w-3 h-3" /> Mô tả chi tiết
-                    </label>
-                    <textarea
-                      value={editingLegData.description}
-                      onChange={(e) => setEditingLegData({ ...editingLegData, description: e.target.value })}
-                      placeholder="Mô tả các hoạt động chính trong chặng này..."
-                      className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm min-h-[120px] resize-none text-gray-800 dark:text-white"
-                    />
-                  </div>
+                   <div>
+                     <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
+                       <AlignLeft className="w-3 h-3" /> Mô tả chi tiết
+                     </label>
+                     <textarea
+                       value={editingLegData.description}
+                       onChange={(e) => setEditingLegData({ ...editingLegData, description: e.target.value })}
+                       placeholder="Mô tả các hoạt động chính trong chặng này..."
+                       className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm min-h-[120px] resize-none text-gray-800 dark:text-white"
+                     />
+                   </div>

-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
-                        <CalendarIcon className="w-3 h-3" /> Bắt đầu
-                      </label>
-                      <input
-                        type="date"
-                        value={editingLegData.startDate}
-                        onChange={(e) => setEditingLegData({ ...editingLegData, startDate: e.target.value })}
-                        className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
-                      />
-                    </div>
-                    <div>
-                      <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Kết thúc</label>
-                      <input
-                        type="date"
-                        value={editingLegData.endDate}
-                        onChange={(e) => setEditingLegData({ ...editingLegData, endDate: e.target.value })}
-                        className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
-                      />
-                    </div>
-                  </div>
-                </div>
+                   <div className="grid grid-cols-2 gap-4">
+                     <div>
+                       <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
+                         <CalendarIcon className="w-3 h-3" /> Bắt đầu
+                       </label>
+                       <input
+                         type="date"
+                         value={editingLegData.startDate}
+                         onChange={(e) => setEditingLegData({ ...editingLegData, startDate: e.target.value })}
+                         className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
+                       />
+                     </div>
+                     <div>
+                       <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Kết thúc</label>
+                       <input
+                         type="date"
+                         value={editingLegData.endDate}
+                         onChange={(e) => setEditingLegData({ ...editingLegData, endDate: e.target.value })}
+                         className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
+                       />
+                     </div>
+                   </div>
+                 </div>

-                <div className="grid grid-cols-2 gap-3 mt-8">
-                  <button
-                    onClick={() => setIsEditModalOpen(false)}
-                    className="py-4 bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 font-bold rounded-2xl transition-all active:scale-95"
-                  >
-                    Hủy
-                  </button>
-                  <button
-                    onClick={saveLegEdit}
-                    className="py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95"
-                  >
-                    Lưu thay đổi
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
+                 <div className="grid grid-cols-2 gap-3 mt-8 shrink-0">
+                   <button
+                     onClick={() => setIsEditModalOpen(false)}
+                     className="py-4 bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 font-bold rounded-2xl transition-all active:scale-95"
+                   >
+                     Hủy
+                   </button>
+                   <button
+                     onClick={saveLegEdit}
+                     className="py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95"
+                   >
+                     Lưu thay đổi
+                   </button>
+                 </div>
+               </div>
+             </div>
+           )}
          <CommentModal
            isOpen={isCommentModalOpen}
            onClose={() => setIsCommentModalOpen(false)}
@@ -208,10 +208,10 @@ export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({
  if (!isOpen) return null;

  return (
-    <div className="fixed inset-0 z-[3000] flex items-center justify-center p-4 bg-black/50">
-      <div className="w-full max-w-md bg-[var(--surface)] rounded-[32px] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+    <div className="fixed inset-0 z-[3000] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50">
+      <div className="w-full h-full sm:w-auto sm:max-w-md sm:h-auto sm:max-h-[85vh] bg-[var(--surface)] rounded-t-2xl sm:rounded-[32px] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 flex flex-col">
        {/* Header */}
-        <div className="relative h-32 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 overflow-hidden">
+        <div className="relative h-32 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 overflow-hidden shrink-0">
          <div className="absolute inset-0 opacity-10">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_50%,rgba(255,255,255,.3)_0%,transparent_50%)]" />
          </div>
@@ -227,11 +227,11 @@ export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({
        </div>

        {/* Content */}
-        <div className="p-8">
-          <h2 className="text-3xl font-bold text-[var(--text-primary)] mb-2 text-center">
+        <div className="flex-1 overflow-y-auto p-5 sm:p-8">
+          <h2 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] mb-2 text-center">
            Gia nhập tour
          </h2>
-          <p className="text-center text-[var(--text-secondary)] mb-6">
+          <p className="text-center text-[var(--text-secondary)] mb-4 sm:mb-6">
            Đăng nhập để tham gia chuyến du lịch này
          </p>

@@ -242,11 +242,11 @@ export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({
          )}

          {/* Google OAuth Button */}
-          <div className="mb-6 flex justify-center">
+          <div className="mb-4 sm:mb-6 flex justify-center">
            <div id="google-signin-btn-join-tour" className="w-full" />
          </div>

-          <div className="relative mb-6">
+          <div className="relative mb-4 sm:mb-6">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-[var(--border)]" />
            </div>
@@ -311,7 +311,7 @@ export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({
          </form>

          {/* Signup Link */}
-          <div className="mt-6 text-center text-sm text-[var(--text-secondary)]">
+          <div className="mt-4 sm:mt-6 text-center text-sm text-[var(--text-secondary)]">
            Chưa có tài khoản?{' '}
            <button
              onClick={() => {
@@ -114,12 +114,12 @@ export const LocationNavigationModal: React.FC<NavModalProps> = ({ isOpen, onClo
    : [0, 0];

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-      <div className="bg-slate-900 border border-slate-700 w-full max-w-4xl h-[80vh] rounded-2xl overflow-hidden flex flex-col shadow-2xl">
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm p-0 sm:p-4">
+      <div className="bg-slate-900 border border-slate-700 w-full h-full sm:w-auto sm:max-w-4xl sm:h-[85vh] rounded-t-2xl sm:rounded-2xl overflow-hidden flex flex-col shadow-2xl animate-in zoom-in-95 duration-200">
        {/* Modal Header */}
-        <div className="p-4 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
+        <div className="p-4 bg-slate-800 border-b border-slate-700 flex items-center justify-between shrink-0">
          <div>
-            <h3 className="text-md font-bold text-white flex items-center gap-2">
+            <h3 className="text-md sm:text-lg font-bold text-white flex items-center gap-2">
              📍 Chỉ đường đến: <span className="text-blue-400">{routeData.destination?.name}</span>
            </h3>
            <p className="text-xs text-gray-400 mt-0.5">Tuyến đường ngắn nhất từ vị trí hiện tại của bạn</p>
@@ -164,7 +164,7 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
  };

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-300"
@@ -172,8 +172,8 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
      />
      
      {/* Modal Content */}
-      <div className="relative w-full max-w-md bg-[var(--surface)] rounded-3xl shadow-2xl overflow-hidden max-h-[90vh] overflow-y-auto animate-in zoom-in-95 duration-300">
-        <div className="p-8 sm:p-10">
+      <div className="relative w-full sm:max-w-md bg-[var(--surface)] rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden sm:max-h-[85vh] flex flex-col h-full animate-in zoom-in-95 duration-300">
+        <div className="p-8 sm:p-10 flex-1 overflow-y-auto">
          <div className="flex justify-between items-start mb-8">
            <div>
              <h2 className="text-3xl font-bold text-[var(--text-primary)]">Đăng nhập</h2>
@@ -439,16 +439,16 @@ export const MembersTab: React.FC<MembersTabProps> = ({

      {/* Manual Merge Modal Selector */}
      {assigningManualMember && (
-        <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
+        <div className="fixed inset-0 z-[2000] flex items-end sm:items-center justify-center p-0 sm:p-4">
          <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={() => setAssigningManualMember(null)} />
-          <div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-in zoom-in-95 duration-200">
-            <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+          <div className="relative w-full sm:max-w-md bg-white rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col h-full sm:h-auto sm:max-h-[85vh] animate-in zoom-in-95 duration-200">
+            <div className="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 shrink-0">
              <div>
                <h3 className="text-md font-bold text-gray-900 flex items-center gap-2">
                  <GitMerge className="w-5 h-5 text-indigo-600" /> Gán tài khoản hệ thống
                </h3>
                <p className="text-xs text-gray-500 mt-1">
-                  Chọn một tài khoản hệ thống để gán cho thành viên thủ công <strong>"{assigningManualMember.displayName}"</strong>.
+                  Chọn một tài khoản hệ thống để gán cho thành viên thủ cộ<strong>"{assigningManualMember.displayName}"</strong>.
                </p>
              </div>
              <button 
@@ -34,24 +34,24 @@ export const NotificationModal: React.FC<NotificationModalProps> = ({
  };

  return (
-    <div className="fixed inset-0 z-[3000] flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[3000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={onConfirm} />
      
      {/* Modal Content */}
-      <div className="relative w-full max-w-sm bg-[var(--surface)] rounded-[32px] shadow-2xl overflow-hidden p-8 text-center animate-in zoom-in-95 duration-200">
-        <div className="flex justify-center mb-5">
+      <div className="relative w-full sm:max-w-sm bg-[var(--surface)] rounded-t-2xl sm:rounded-[32px] shadow-2xl overflow-hidden p-8 sm:p-8 h-full sm:h-auto sm:max-h-[85vh] flex flex-col animate-in zoom-in-95 duration-200">
+        <div className="flex justify-center mb-5 shrink-0">
          {icons[type]}
        </div>
        
        <h2 className="text-xl font-black text-[var(--text-primary)] mb-2">{title}</h2>
-        <p className="text-[var(--text-muted)] text-sm leading-relaxed mb-8">
+        <p className="text-[var(--text-muted)] text-sm leading-relaxed mb-8 flex-1">
          {message || "Bạn không được phép gỡ bỏ thành viên này!"}
        </p>
        
        <button
          onClick={onConfirm}
-          className={`w-full py-4 text-white font-bold rounded-2xl transition-all shadow-lg active:scale-95 ${colors[type]}`}
+          className={`w-full py-4 text-white font-bold rounded-2xl transition-all shadow-lg active:scale-95 mt-auto ${colors[type]}`}
        >
          Đã hiểu
        </button>
@@ -819,7 +819,7 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({

      {isFullscreen && (
        <div
-          className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center cursor-zoom-out animate-in fade-in duration-200"
+          className="fixed inset-0 z-[9999] bg-black/95 flex items-end sm:items-center justify-center cursor-zoom-out animate-in fade-in duration-200"
          onClick={() => setIsFullscreen(false)}
        >
          <button
@@ -833,7 +833,7 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
            alt="Fullscreen photo"
            onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
            onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
-            className={`max-w-full max-h-full object-contain select-none animate-in zoom-in-95 duration-200 ${
+            className={`max-w-full max-h-full sm:max-w-screen-md object-contain select-none animate-in zoom-in-95 duration-200 ${
              !isLoggedIn ? 'pointer-events-none' : ''
            }`}
          />
@@ -100,19 +100,14 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
    }
  };

-  return (
-    <div className="fixed inset-0 z-[3000] flex items-center justify-center p-4">
-      {/* Backdrop */}
-      <div 
-        className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-300"
-        onClick={onClose}
-      />
+return (
+    <div className="fixed inset-0 z-[3000] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50">

      {/* Content Container */}
-      <div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 flex flex-col max-h-[90vh]">
-        
+<div className="relative w-full h-full sm:max-w-lg bg-white rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300 flex flex-col sm:max-h-[85vh]">
+         
        {/* Header */}
-        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-red-50 text-red-500 rounded-xl">
              <ShieldAlert className="w-6 h-6" />
@@ -131,7 +126,7 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
        </div>

        {success ? (
-          <div className="p-10 flex flex-col items-center justify-center text-center space-y-4">
+          <div className="p-10 flex flex-col items-center justify-center text-center space-y-4 flex-1">
            <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center shadow-lg animate-bounce">
              <ShieldAlert className="w-8 h-8" />
            </div>
@@ -147,7 +142,6 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
              </div>
            )}

-            {/* Loại hình */}
            <div className="space-y-1.5">
              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('businessType')} *</label>
              <select
@@ -162,7 +156,6 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
              </select>
            </div>

-            {/* Tên */}
            <div className="space-y-1.5">
              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('businessName')} *</label>
              <input
@@ -176,7 +169,6 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              {/* Số điện thoại */}
              <div className="space-y-1.5">
                <label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
                  <Phone className="w-3.5 h-3.5 text-gray-400" /> {t('businessPhone')}
@@ -190,7 +182,6 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
                />
              </div>

-              {/* Email */}
              <div className="space-y-1.5">
                <label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
                  <Mail className="w-3.5 h-3.5 text-gray-400" /> {t('businessEmail')}
@@ -205,7 +196,6 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
              </div>
            </div>

-            {/* Địa chỉ */}
            <div className="space-y-1.5">
              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
                <MapPin className="w-3.5 h-3.5 text-gray-400" /> {t('businessAddress')}
@@ -214,12 +204,11 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
                type="text"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
-                placeholder="VD: 123 Đường Trần Phú, Đà Lạt..."
+                placeholder="VD: 123 Đường Trần Phú, Đà Nẵng..."
                className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all text-sm text-gray-800"
              />
            </div>

-            {/* Tọa độ địa lý */}
            <div className="space-y-1.5 bg-blue-50/50 p-4 rounded-2xl border border-blue-100">
              <div className="flex justify-between items-center mb-2">
                <span className="text-xs font-bold text-blue-700 uppercase tracking-wider flex items-center gap-1.5">
@@ -259,7 +248,6 @@ export const ReportBusinessModal: React.FC<ReportBusinessModalProps> = ({
              </div>
            </div>

-            {/* Lý do */}
            <div className="space-y-1.5">
              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{t('reportReason')} *</label>
              <textarea
@@ -66,16 +66,16 @@ export const TagSelectModal: React.FC<TagSelectModalProps> = ({ isOpen, onClose,

  if (!isOpen) return null;

-  return (
-    <div className="fixed inset-0 z-[6000] flex items-center justify-center p-4">
+return (
+    <div className="fixed inset-0 z-[6000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div 
        className="absolute inset-0 bg-slate-950/80 backdrop-blur-md"
        onClick={handleClose}
      />
      
-      <div className="relative bg-white dark:bg-slate-900 rounded-3xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto animate-in zoom-in-95 duration-300">
+      <div className="relative bg-white dark:bg-slate-900 w-full h-full sm:w-auto sm:max-w-md sm:h-auto sm:max-h-[85vh] rounded-t-2xl sm:rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-300">
        {/* Header */}
-        <div className="sticky top-0 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-700 px-6 py-5 flex justify-between items-center">
+        <div className="sticky top-0 bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-700 px-6 py-5 flex justify-between items-center shrink-0">
          <h2 className="text-xl font-bold text-gray-900 dark:text-white">
            🏷️ Lựa chọn thẻ
          </h2>
@@ -87,8 +87,8 @@ export const TagSelectModal: React.FC<TagSelectModalProps> = ({ isOpen, onClose,
          </button>
        </div>

-        {/* Content */}
-        <div className="p-6 space-y-6">
+{/* Content */}
+        <div className="p-6 space-y-6 overflow-y-auto flex-1">
          {/* Image Preview */}
          {photoUrl && (
            <div className="flex justify-center">
@@ -201,7 +201,7 @@ export const TagSelectModal: React.FC<TagSelectModalProps> = ({ isOpen, onClose,
        </div>

        {/* Footer */}
-        <div className="sticky bottom-0 bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-slate-700 px-6 py-4 flex gap-3">
+        <div className="sticky bottom-0 bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-slate-700 px-6 py-4 flex gap-3 shrink-0">
          <button
            onClick={handleClose}
            className="flex-1 px-4 py-3 rounded-xl border-2 border-gray-200 dark:border-slate-700 text-gray-900 dark:text-white font-bold hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors"
@@ -797,13 +797,13 @@ export const UserManagementModal: React.FC<UserManagementModalProps> = ({ isOpen
    }
  };

-  return (
-    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
+return (
+    <div className="fixed inset-0 z-[2000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative w-full max-w-5xl bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col h-[85vh]">
-        
+      <div className="relative w-full sm:max-w-5xl bg-white rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col h-full sm:h-auto sm:max-h-[85vh] animate-in zoom-in-95 duration-200">
+         
        {/* Header */}
-        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+        <div className="p-6 sm:p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 shrink-0">
          <div>
            <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
              <Shield className="w-6 h-6 text-blue-600" /> Hệ thống quản trị
@@ -1120,8 +1120,8 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
    );
  }

-  return (
-    <div className="h-screen w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white flex items-center justify-center font-sans overflow-hidden p-0 md:p-6">
+return (
+    <div className="h-auto min-h-dvh w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white flex flex-col md:flex-row p-3 sm:p-6 gap-4 sm:gap-6 overflow-x-hidden">
      
      {/* Background Glow */}
      <div className="hidden md:block absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
@@ -1129,7 +1129,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>

      <div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${
        isMobile 
-          ? 'h-full bg-slate-950 flex-col' 
+          ? 'flex-col h-full bg-slate-950' 
          : 'max-w-7xl h-[90vh] bg-slate-900/30 border border-slate-800/80 shadow-2xl rounded-3xl backdrop-blur-md'
      }`}>
        
@@ -230,27 +230,27 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
  };

  return (
-    <div className="w-full flex flex-col text-slate-100 bg-transparent font-sans">
+    <div className="w-full flex flex-col text-slate-100 bg-transparent font-sans min-h-dvh overflow-x-hidden">
      {/* Header */}
-      <div className="bg-slate-900/60 backdrop-blur-md border-b border-slate-800/80 px-6 py-4 flex items-center gap-4 rounded-t-3xl">
+      <div className="bg-slate-900/60 backdrop-blur-md border-b border-slate-800/80 px-4 py-3 flex items-center gap-3 rounded-t-3xl">
        <button onClick={onBack} className="p-2 hover:bg-slate-800 rounded-full transition-colors">
-          <ChevronLeft className="w-6 h-6 text-slate-400 hover:text-white" />
+          <ChevronLeft className="w-5 h-5 text-slate-400 hover:text-white" />
        </button>
        <div>
-          <h1 className="text-xl font-black text-white">Ảnh của tôi</h1>
+          <h1 className="text-lg font-black text-white">Ảnh của tôi</h1>
          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kho lưu trữ ảnh gốc cá nhân</p>
        </div>
      </div>

      {/* Filter Bar */}
-      <div className="bg-slate-900/40 border-b border-slate-800/60 px-6 py-4 flex flex-wrap items-center gap-4 shadow-sm">
+      <div className="bg-slate-900/40 border-b border-slate-800/60 px-4 py-3 flex flex-wrap items-center gap-3 shadow-sm">
        <div className="flex items-center gap-2 text-slate-400">
          <Filter className="w-4 h-4" />
          <span className="text-xs font-bold uppercase tracking-wider">Bộ lọc:</span>
        </div>
        
-        <div className="relative min-w-[150px]">
-          <div className="px-3 py-2 bg-slate-800 text-indigo-300 rounded-xl text-xs font-bold border border-slate-700/60 truncate max-w-[200px]">
+        <div className="relative min-w-[120px] sm:min-w-[150px]">
+          <div className="px-3 py-2 bg-slate-800 text-indigo-300 rounded-xl text-xs font-bold border border-slate-700/60 truncate max-w-[180px] sm:max-w-[200px]">
            {selectedTourIdForPhoto === 'all' ? 'Tất cả hành trình' : toursWithPhotos.find(t => t.id === selectedTourIdForPhoto)?.title || 'Tour đã chọn'}
          </div>
        </div>
@@ -295,28 +295,28 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
        </div>
      </div>

-      <div className="flex-1 p-6 w-full max-w-7xl mx-auto">
+      <div className="flex-1 p-4 sm:p-6 w-full max-w-7xl mx-auto">
        {isLoading ? (
-          <div className="flex flex-col items-center justify-center py-20 text-slate-400">
-            <Loader2 className="w-10 h-10 animate-spin mb-4 text-indigo-500" />
-            <p className="font-bold text-sm">Đang tải kho ảnh...</p>
+          <div className="flex flex-col items-center justify-center py-16 sm:py-20 text-slate-400">
+            <Loader2 className="w-8 h-8 sm:w-10 sm:h-10 animate-spin mb-3 sm:mb-4 text-indigo-500" />
+            <p className="font-bold text-xs sm:text-sm">Đang tải kho ảnh...</p>
          </div>
        ) : photos.length === 0 ? (
-          <div className="py-24 text-center bg-slate-900/30 rounded-[40px] border-2 border-dashed border-slate-800/80">
-            <ImageIcon className="w-16 h-16 text-slate-700 mx-auto mb-4" />
-            <h3 className="text-xl font-bold text-slate-400">Chưa có ảnh nào</h3>
-            <p className="text-sm text-slate-500">Hãy tham gia các chuyến đi và lưu lại khoảnh khắc nhé!</p>
+          <div className="py-16 sm:py-24 text-center bg-slate-900/30 rounded-[32px] sm:rounded-[40px] border-2 border-dashed border-slate-800/80">
+            <ImageIcon className="w-12 h-12 sm:w-16 sm:h-16 text-slate-700 mx-auto mb-3 sm:mb-4" />
+            <h3 className="text-lg sm:text-xl font-bold text-slate-400">Chưa có ảnh nào</h3>
+            <p className="text-xs sm:text-sm text-slate-500">Hãy tham gia các chuyến đi và lưu lại khoảnh khắc nhé!</p>
          </div>
        ) : ( 
          <div className="animate-in fade-in">
-            <div className="flex flex-col md:flex-row gap-6">
+            <div className="flex flex-col md:flex-row gap-4 sm:gap-6">
              {/* Left Column: Tour List */}
-              <div className="md:w-1/4 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-4 flex-shrink-0">
-                <h3 className="text-xs font-black uppercase text-slate-400 tracking-wider mb-3">Hành trình của bạn</h3>
-                <div className="space-y-2">
+              <div className="w-full md:w-1/4 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-3 sm:p-4 flex-shrink-0">
+                <h3 className="text-[10px] sm:text-xs font-black uppercase text-slate-400 tracking-wider mb-2 sm:mb-3">Hành trình của bạn</h3>
+                <div className="space-y-1.5 sm:space-y-2">
                  <button
                    onClick={() => { setSelectedTourIdForPhoto('all'); setSelectedPhotoForDisplay(null); }}
-                    className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all ${
+                    className={`w-full text-left px-3 py-2 sm:px-3.5 sm:py-2.5 rounded-xl text-[10px] sm:text-xs font-bold transition-all ${
                      selectedTourIdForPhoto === 'all' ? 'bg-indigo-650 text-white shadow-md' : 'bg-slate-800/60 text-slate-300 hover:bg-slate-800'
                    }`}
                  >
@@ -326,7 +326,7 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
                    <button
                      key={tour.id}
                      onClick={() => { setSelectedTourIdForPhoto(tour.id); setSelectedPhotoForDisplay(null); }}
-                      className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all truncate ${
+                      className={`w-full text-left px-3 py-2 sm:px-3.5 sm:py-2.5 rounded-xl text-[10px] sm:text-xs font-bold transition-all truncate ${
                        selectedTourIdForPhoto === tour.id ? 'bg-indigo-650 text-white shadow-md' : 'bg-slate-800/60 text-slate-300 hover:bg-slate-800'
                      }`}
                      title={tour.title}
@@ -338,14 +338,14 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
              </div>

              {/* Right Column: Large Photo Display */}
-              <div className="md:flex-1 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-4 flex flex-col items-center justify-center min-h-[350px]">
+              <div className="w-full md:flex-1 bg-slate-900/50 rounded-2xl border border-slate-800/60 p-3 sm:p-4 flex flex-col items-center justify-center min-h-[250px] sm:min-h-[350px]">
                {selectedPhotoForDisplay ? (
                  <div className="relative w-full h-full flex flex-col items-center justify-center">
-                    <div className="relative overflow-hidden rounded-xl shadow-lg max-w-full max-h-[calc(100vh-380px)] group">
+                    <div className="relative overflow-hidden rounded-xl shadow-lg max-w-full max-h-[calc(100vh-280px)] sm:max-h-[calc(100vh-320px)] group">
                      <img
                        src={selectedPhotoForDisplay.imageUrl || selectedPhotoForDisplay.originalUrl}
                        alt="Selected"
-                        className="max-w-full max-h-[calc(100vh-380px)] object-contain cursor-zoom-in"
+                        className="max-w-full max-h-[calc(100vh-280px)] sm:max-h-[calc(100vh-320px)] object-contain cursor-zoom-in"
                        onClick={() => setIsFullscreen(true)}
                      />
                      
@@ -542,13 +542,13 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
              <div className="flex items-center justify-between mb-4 px-1">
                <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest">Kho ảnh ({filteredPhotos.length})</h3>
              </div>
-              <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-h-[250px] overflow-y-auto pr-2 custom-scrollbar">
+              <div className="grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-10 gap-2 sm:gap-3 max-h-[200px] sm:max-h-[250px] overflow-y-auto pr-1 sm:pr-2 custom-scrollbar">
                {filteredPhotos.map((photo: any) => (
                  <div
                    key={photo.id}
                    onClick={() => setSelectedPhotoForDisplay(photo)}
                    className={`aspect-square bg-slate-950 rounded-xl overflow-hidden relative group border-2 transition-all cursor-pointer ${
-                      selectedPhotoForDisplay?.id === photo.id ? 'border-indigo-505 border-indigo-500 scale-[0.98]' : 'border-transparent hover:border-slate-700'
+                      selectedPhotoForDisplay?.id === photo.id ? 'border-indigo-500 scale-[0.98]' : 'border-transparent hover:border-slate-700'
                    }`}
                  >
                    <img
@@ -1900,13 +1900,13 @@ export const TourDetailPage = ({
  };

  return (
-    <div className="min-h-screen bg-[var(--background)] pb-20">
+    <div className="min-h-dvh bg-[var(--background)] pb-20 overflow-x-hidden">
      {/* Top Navigation Bar */}
      <div className="sticky top-0 z-30 bg-[var(--surface)]/80 backdrop-blur-md border-b border-[var(--border)] px-4 py-3 flex items-center justify-between">
        <button onClick={onBack} className="p-2 hover:bg-[var(--background)] rounded-full transition-colors">
-          <ChevronLeft className="w-6 h-6 text-[var(--text-secondary)]" />
+          <ChevronLeft className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--text-secondary)]" />
        </button>
-        <h1 className="text-lg font-bold text-[var(--text-primary)] truncate px-4 flex-1 text-center">
+        <h1 className="text-base sm:text-lg font-bold text-[var(--text-primary)] truncate px-4 flex-1 text-center">
          {tourInfo.title}
        </h1>
        <div className="flex items-center gap-1">
@@ -1932,10 +1932,10 @@ export const TourDetailPage = ({
          )}
        </div>
      </div>
-      {!(activeTab === 'plan' && viewMode === 'map') && (
+{!(activeTab === 'plan' && viewMode === 'map') && (
        <>
          {/* Tour Header Info */}
-      <div className="relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end">
+      <div className="relative min-h-[300px] sm:min-h-[400px] md:min-h-[480px] w-full bg-blue-900 flex flex-col justify-end">
        <img 
          src={tourInfo.coverImage} 
          className="absolute inset-0 w-full h-full object-cover opacity-60" 
@@ -1943,9 +1943,9 @@ export const TourDetailPage = ({
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
        
-        <div className="relative z-10 p-6 text-white pt-28 pb-20">
-          <div className="max-w-2xl mx-auto space-y-4">
-            <h2 className="text-3xl font-black tracking-tight drop-shadow-md">{tourInfo.title}</h2>
+        <div className="relative z-10 p-4 sm:p-6 pt-16 sm:pt-28 pb-8 sm:pb-20">
+          <div className="max-w-2xl mx-auto space-y-3 sm:space-y-4">
+            <h2 className="text-xl sm:text-2xl md:text-3xl font-black tracking-tight drop-shadow-md">{tourInfo.title}</h2>
            
            {/* Nhãn hiển thị ngay dưới Tiêu đề */}
            {currentTour?.tags && currentTour.tags.length > 0 && (
@@ -2296,10 +2296,10 @@ export const TourDetailPage = ({
                onOpenNavigationPage={onOpenNavigationPage}
              />
              ) : (
-                <div className="h-[calc(100vh-53px)] w-full md:rounded-3xl overflow-hidden md:shadow-xl md:border-4 md:border-white relative animate-in fade-in duration-500">
+                <div className="h-auto min-h-[calc(100vh-100px)] sm:min-h-[calc(100vh-140px)] md:h-[calc(100vh-53px)] w-full md:rounded-3xl overflow-hidden md:shadow-xl md:border-4 md:border-white relative animate-in fade-in duration-500">
                  {/* 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-2 sm:top-3 right-2 sm:right-3 z-[1001] w-40 sm:w-48 md:w-64">
                      <div className="relative group">
                        <input 
                          type="text"
@@ -363,7 +363,7 @@ 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="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased overflow-x-hidden">
 <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
@@ -371,7 +371,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
            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" />
+          <ChevronLeft className="w-5 h-5" />
        </button>
        <h2 className="text-sm font-bold truncate tracking-wide text-slate-100">
          {routeData.tourTitle || "Bản đồ chỉ đường"}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
3dtours	d8bbb22dbd	feat: tạo ứng dụng android	2026-06-26 20:33:14 +07:00
3dtours	4da00b222f	fix: Thay đổi giao diện hiển thị trên điện thoại và đổi đường dẫn lưu ảnh upload ở docker-compose.prod.yml	2026-06-26 20:03:30 +07:00
3dtours	cfb97d976f	fix: cách các pages hiển thị trên browser điện thoại	2026-06-26 10:21:01 +07:00
3dtours	6d90a47c24	fix: cách các modals hiển thị trên browser điện thoại	2026-06-26 09:13:24 +07:00