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/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>