feat(web): integrate map into /khu-cong-nghiep listing + detail pages

- Listing page: replace the 'Xem bản đồ / Ẩn bản đồ' toggle with a
  three-mode view switch (Danh sách / Bản đồ / Chia đôi). Default to
  Chia đôi on lg+, putting cards on the left and a sticky ParkMap on
  the right so users see geography and details at a glance.
- Detail page: add a 'Vị trí trên bản đồ' card showing the park's
  marker on a Mapbox map (height 360-420px) with the full address
  underneath. Reuse the existing ParkMap by adapting the
  IndustrialParkDetail to the IndustrialParkListItem shape it expects
  via a small parkAsListItem() helper.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/[locale]/(public)/khu-cong-nghiep/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Factory, Map } from 'lucide-react';
+import { Factory, Map as MapIcon, List, Columns } from 'lucide-react';
 import * as React from 'react';
 import { ParkCard } from '@/components/khu-cong-nghiep/park-card';
 import { ParkFilterBar } from '@/components/khu-cong-nghiep/park-filter-bar';
@@ -11,12 +11,14 @@ import type { SearchIndustrialParksParams } from '@/lib/khu-cong-nghiep-api';
 
 const PAGE_SIZE = 12;
 
+type ViewMode = 'list' | 'map' | 'split';
+
 export default function KhuCongNghiepPage() {
   const [filters, setFilters] = React.useState<SearchIndustrialParksParams>({
     page: 1,
     limit: PAGE_SIZE,
   });
-  const [showMap, setShowMap] = React.useState(false);
+  const [viewMode, setViewMode] = React.useState<ViewMode>('split');
 
   const { data, isLoading, isError } = useIndustrialParksSearch(filters);
 
@@ -43,28 +45,44 @@ export default function KhuCongNghiepPage() {
       {/* Filters */}
       <ParkFilterBar params={filters} onChange={handleFilterChange} />
 
-      {/* Map toggle */}
+      {/* View mode toggle */}
       <div className="mt-4 flex justify-end">
-        <Button
+        <div className="inline-flex gap-1 rounded-lg border p-1">
-          variant={showMap ? 'default' : 'outline'}
+          <Button
-          size="sm"
+            variant={viewMode === 'list' ? 'default' : 'ghost'}
-          className="gap-2"
+            size="sm"
-          onClick={() => setShowMap(!showMap)}
+            className="gap-1.5"
-        >
+            onClick={() => setViewMode('list')}
-          <Map className="h-4 w-4" />
+            aria-pressed={viewMode === 'list'}
-          {showMap ? 'Ẩn bản đồ' : 'Xem bản đồ'}
+          >
-        </Button>
+            <List className="h-4 w-4" />
+            Danh sách
+          </Button>
+          <Button
+            variant={viewMode === 'map' ? 'default' : 'ghost'}
+            size="sm"
+            className="gap-1.5"
+            onClick={() => setViewMode('map')}
+            aria-pressed={viewMode === 'map'}
+          >
+            <MapIcon className="h-4 w-4" />
+            Bản đồ
+          </Button>
+          <Button
+            variant={viewMode === 'split' ? 'default' : 'ghost'}
+            size="sm"
+            className="hidden gap-1.5 lg:inline-flex"
+            onClick={() => setViewMode('split')}
+            aria-pressed={viewMode === 'split'}
+          >
+            <Columns className="h-4 w-4" />
+            Chia đôi
+          </Button>
+        </div>
       </div>
 
-      {/* Park Map */}
-      {showMap && data && data.data.length > 0 && (
-        <div className="mt-4">
-          <ParkMap parks={data.data} />
-        </div>
-      )}
-
       {/* Results */}
-      <div className="mt-6">
+      <div className="mt-4">
         {isLoading ? (
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 6 }).map((_, i) => (
@@ -93,14 +111,41 @@ export default function KhuCongNghiepPage() {
               {data.total} khu công nghiệp được tìm thấy
             </p>
 
-            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {/* Map-only view */}
-              {data.data.map((park) => (
+            {viewMode === 'map' && (
-                <ParkCard key={park.id} park={park} />
+              <ParkMap parks={data.data} className="h-[calc(100vh-260px)]" />
-              ))}
+            )}
-            </div>
 
-            {/* Pagination */}
+            {/* Split view: list left, sticky map right (lg+ only) */}
-            {data.totalPages > 1 && (
+            {viewMode === 'split' && (
+              <div className="grid gap-4 lg:grid-cols-2">
+                <div className="overflow-auto" style={{ maxHeight: 'calc(100vh - 220px)' }}>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    {data.data.map((park) => (
+                      <ParkCard key={park.id} park={park} />
+                    ))}
+                  </div>
+                </div>
+                <div className="hidden lg:block">
+                  <ParkMap
+                    parks={data.data}
+                    className="sticky top-20 h-[calc(100vh-220px)]"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* List-only view */}
+            {viewMode === 'list' && (
+              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                {data.data.map((park) => (
+                  <ParkCard key={park.id} park={park} />
+                ))}
+              </div>
+            )}
+
+            {/* Pagination — show in list/split mode only */}
+            {viewMode !== 'map' && data.totalPages > 1 && (
               <div className="mt-8 flex items-center justify-center gap-2">
                 <Button
                   variant="outline"

apps/web/components/khu-cong-nghiep/khu-cong-nghiep-detail-client.tsx

@@ -13,12 +13,16 @@ import {
   Zap,
 } from 'lucide-react';
 import * as React from 'react';
+import { ParkMap } from '@/components/khu-cong-nghiep/park-map';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { type IndustrialParkDetail,
+import {
+  type IndustrialParkDetail,
+  type IndustrialParkListItem,
   PARK_STATUS_COLORS,
   PARK_STATUS_LABELS,
-  REGION_LABELS } from '@/lib/khu-cong-nghiep-api';
+  REGION_LABELS,
+} from '@/lib/khu-cong-nghiep-api';
 import { cn } from '@/lib/utils';
 
 type Tab = 'infrastructure' | 'connectivity' | 'incentives' | 'tenants' | 'documents';
@@ -35,6 +39,34 @@ interface KhuCongNghiepDetailClientProps {
   park: IndustrialParkDetail;
 }
 
+/**
+ * The list-page ParkMap takes `IndustrialParkListItem[]`. Detail has the
+ * same fields plus a few extras — pick the subset the map actually uses
+ * so we can render a single-park view from the detail data.
+ */
+function parkAsListItem(p: IndustrialParkDetail): IndustrialParkListItem {
+  return {
+    id: p.id,
+    name: p.name,
+    nameEn: p.nameEn,
+    slug: p.slug,
+    developer: p.developer,
+    status: p.status,
+    province: p.province,
+    region: p.region,
+    totalAreaHa: p.totalAreaHa,
+    occupancyRate: p.occupancyRate,
+    remainingAreaHa: p.remainingAreaHa,
+    tenantCount: p.tenantCount,
+    landRentUsdM2Year: p.landRentUsdM2Year,
+    rbfRentUsdM2Month: p.rbfRentUsdM2Month,
+    rbwRentUsdM2Month: p.rbwRentUsdM2Month,
+    targetIndustries: p.targetIndustries,
+    latitude: p.latitude,
+    longitude: p.longitude,
+  };
+}
+
 export function KhuCongNghiepDetailClient({ park }: KhuCongNghiepDetailClientProps) {
   const [activeTab, setActiveTab] = React.useState<Tab>('infrastructure');
 
@@ -131,6 +163,25 @@ export function KhuCongNghiepDetailClient({ park }: KhuCongNghiepDetailClientPro
             </Card>
           )}
 
+          {/* Vị trí trên bản đồ */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MapPin className="h-5 w-5" />
+                Vị trí trên bản đồ
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ParkMap
+                parks={[parkAsListItem(park)]}
+                className="h-[360px] md:h-[420px]"
+              />
+              <p className="mt-2 text-xs text-muted-foreground">
+                {park.address}, {park.district}, {park.province}
+              </p>
+            </CardContent>
+          </Card>
+
           {/* Target industries */}
           {park.targetIndustries.length > 0 && (
             <Card>