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
-          variant={showMap ? 'default' : 'outline'}
-          size="sm"
-          className="gap-2"
-          onClick={() => setShowMap(!showMap)}
-        >
-          <Map className="h-4 w-4" />
-          {showMap ? 'Ẩn bản đồ' : 'Xem bản đồ'}
-        </Button>
+        <div className="inline-flex gap-1 rounded-lg border p-1">
+          <Button
+            variant={viewMode === 'list' ? 'default' : 'ghost'}
+            size="sm"
+            className="gap-1.5"
+            onClick={() => setViewMode('list')}
+            aria-pressed={viewMode === 'list'}
+          >
+            <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">
-              {data.data.map((park) => (
-                <ParkCard key={park.id} park={park} />
-              ))}
-            </div>
+            {/* Map-only view */}
+            {viewMode === 'map' && (
+              <ParkMap parks={data.data} className="h-[calc(100vh-260px)]" />
+            )}
 
-            {/* Pagination */}
-            {data.totalPages > 1 && (
+            {/* Split view: list left, sticky map right (lg+ only) */}
+            {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"