feat(web): add industrial compare page, listing search, and Mapbox park map

- Add interactive Mapbox map to /khu-cong-nghiep landing page with park markers and popups
- Build compare page at /khu-cong-nghiep/so-sanh with recharts RadarChart and detailed comparison table
- Build listing search page at /khu-cong-nghiep/cho-thue with filters for property type, lease type, area, and price
- Add IndustrialListing types, API client functions, and React Query hooks

Co-Authored-By: Paperclip <noreply@paperclip.ing>

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

@@ -0,0 +1,11 @@
+import type { Metadata } from 'next';
+import { ListingSearchClient } from '@/components/khu-cong-nghiep/listing-search-client';
+
+export const metadata: Metadata = {
+  title: 'Cho Thuê Bất Động Sản Công Nghiệp — GoodGo',
+  description: 'Tìm kiếm nhà xưởng, kho bãi, đất công nghiệp cho thuê tại các khu công nghiệp Việt Nam.',
+};
+
+export default function IndustrialListingsPage() {
+  return <ListingSearchClient />;
+}

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

@@ -1,9 +1,10 @@
 'use client';
 
-import { Factory } from 'lucide-react';
+import { Factory, Map } 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';
+import { ParkMap } from '@/components/khu-cong-nghiep/park-map';
 import { Button } from '@/components/ui/button';
 import { useIndustrialParksSearch } from '@/lib/hooks/use-khu-cong-nghiep';
 import type { SearchIndustrialParksParams } from '@/lib/khu-cong-nghiep-api';
@@ -15,6 +16,7 @@ export default function KhuCongNghiepPage() {
     page: 1,
     limit: PAGE_SIZE,
   });
+  const [showMap, setShowMap] = React.useState(false);
 
   const { data, isLoading, isError } = useIndustrialParksSearch(filters);
 
@@ -41,6 +43,26 @@ export default function KhuCongNghiepPage() {
       {/* Filters */}
       <ParkFilterBar params={filters} onChange={handleFilterChange} />
 
+      {/* Map 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>
+
+      {/* Park Map */}
+      {showMap && data && data.data.length > 0 && (
+        <div className="mt-4">
+          <ParkMap parks={data.data} />
+        </div>
+      )}
+
       {/* Results */}
       <div className="mt-6">
         {isLoading ? (

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

@@ -0,0 +1,11 @@
+import type { Metadata } from 'next';
+import { ParkCompareClient } from '@/components/khu-cong-nghiep/park-compare-client';
+
+export const metadata: Metadata = {
+  title: 'So Sánh Khu Công Nghiệp — GoodGo',
+  description: 'So sánh chi tiết giữa các khu công nghiệp tại Việt Nam: diện tích, giá thuê, tỷ lệ lấp đầy, hạ tầng và kết nối.',
+};
+
+export default function ParkComparePage() {
+  return <ParkCompareClient />;
+}

apps/web/components/khu-cong-nghiep/listing-card.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { Calendar, Eye, MapPin, Ruler } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  type IndustrialListingItem,
+  LEASE_TYPE_LABELS,
+  PROPERTY_TYPE_LABELS,
+} from '@/lib/khu-cong-nghiep-api';
+
+interface ListingCardProps {
+  listing: IndustrialListingItem;
+}
+
+export function IndustrialListingCard({ listing }: ListingCardProps) {
+  const priceText = listing.priceUsdM2
+    ? `$${listing.priceUsdM2}/${listing.pricingUnit ?? 'm²/tháng'}`
+    : listing.totalLeasePrice
+      ? `$${listing.totalLeasePrice.toLocaleString()}`
+      : 'Liên hệ';
+
+  const leaseTermText =
+    listing.minLeaseYears && listing.maxLeaseYears
+      ? `${listing.minLeaseYears}–${listing.maxLeaseYears} năm`
+      : listing.minLeaseYears
+        ? `Từ ${listing.minLeaseYears} năm`
+        : null;
+
+  return (
+    <Card className="group h-full transition-shadow hover:shadow-lg">
+      <CardContent className="p-5">
+        {/* Header badges */}
+        <div className="mb-3 flex flex-wrap items-center gap-2">
+          <Badge variant="secondary" className="bg-blue-100 text-blue-800">
+            {PROPERTY_TYPE_LABELS[listing.propertyType]}
+          </Badge>
+          <Badge variant="outline">
+            {LEASE_TYPE_LABELS[listing.leaseType]}
+          </Badge>
+        </div>
+
+        {/* Title */}
+        <h3 className="mb-2 line-clamp-2 font-semibold text-foreground group-hover:text-primary">
+          {listing.title}
+        </h3>
+
+        {/* Park location */}
+        <div className="mb-3 flex items-center gap-1 text-sm text-muted-foreground">
+          <MapPin className="h-3.5 w-3.5 shrink-0" />
+          <a
+            href={`/khu-cong-nghiep/${listing.parkSlug}`}
+            className="line-clamp-1 hover:text-primary hover:underline"
+          >
+            {listing.parkName}
+          </a>
+        </div>
+
+        {/* Stats grid */}
+        <div className="mb-3 grid grid-cols-2 gap-3">
+          <div className="rounded-md bg-muted p-2">
+            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Ruler className="h-3 w-3" />
+              Diện tích
+            </div>
+            <div className="font-semibold">{listing.areaM2.toLocaleString()} m²</div>
+          </div>
+          <div className="rounded-md bg-muted p-2">
+            <div className="text-xs text-muted-foreground">Giá thuê</div>
+            <div className="font-semibold text-primary">{priceText}</div>
+          </div>
+        </div>
+
+        {/* Additional info */}
+        <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+          {listing.ceilingHeightM && (
+            <span>Cao trần: {listing.ceilingHeightM}m</span>
+          )}
+          {leaseTermText && (
+            <span className="flex items-center gap-1">
+              <Calendar className="h-3 w-3" />
+              {leaseTermText}
+            </span>
+          )}
+          {listing.viewCount > 0 && (
+            <span className="flex items-center gap-1">
+              <Eye className="h-3 w-3" />
+              {listing.viewCount}
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

apps/web/components/khu-cong-nghiep/listing-search-client.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { ArrowLeft, Factory, Search, X } from 'lucide-react';
+import * as React from 'react';
+import { IndustrialListingCard } from '@/components/khu-cong-nghiep/listing-card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Link } from '@/i18n/navigation';
+import { useIndustrialListingsSearch } from '@/lib/hooks/use-khu-cong-nghiep';
+import {
+  type IndustrialLeaseType,
+  type IndustrialPropertyType,
+  type SearchIndustrialListingsParams,
+  LEASE_TYPE_LABELS,
+  PROPERTY_TYPE_LABELS,
+} from '@/lib/khu-cong-nghiep-api';
+
+const PAGE_SIZE = 12;
+
+export function ListingSearchClient() {
+  const [filters, setFilters] = React.useState<SearchIndustrialListingsParams>({
+    page: 1,
+    limit: PAGE_SIZE,
+  });
+  const [searchInput, setSearchInput] = React.useState('');
+
+  const { data, isLoading, isError } = useIndustrialListingsSearch(filters);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setFilters((prev) => ({ ...prev, q: searchInput.trim() || undefined, page: 1 }));
+  };
+
+  const updateFilter = (key: keyof SearchIndustrialListingsParams, value: string) => {
+    setFilters((prev) => ({ ...prev, [key]: value || undefined, page: 1 }));
+  };
+
+  const updateNumericFilter = (key: keyof SearchIndustrialListingsParams, value: string) => {
+    const num = value ? Number(value) : undefined;
+    setFilters((prev) => ({ ...prev, [key]: num, page: 1 }));
+  };
+
+  const handlePageChange = (page: number) => {
+    setFilters((prev) => ({ ...prev, page }));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleClear = () => {
+    setSearchInput('');
+    setFilters({ page: 1, limit: PAGE_SIZE });
+  };
+
+  const hasFilters = filters.q || filters.propertyType || filters.leaseType ||
+    filters.minAreaM2 || filters.maxAreaM2 || filters.minPriceUsdM2 || filters.maxPriceUsdM2;
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-6">
+      {/* Header */}
+      <div className="mb-6 flex items-center gap-3">
+        <Link href="/khu-cong-nghiep">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+        </Link>
+        <div>
+          <h1 className="text-2xl font-bold md:text-3xl">Cho Thuê Bất Động Sản Công Nghiệp</h1>
+          <p className="mt-1 text-muted-foreground">
+            Tìm nhà xưởng, kho bãi, đất công nghiệp cho thuê tại các KCN
+          </p>
+        </div>
+      </div>
+
+      {/* Search bar */}
+      <form onSubmit={handleSearch} className="flex gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Tìm kiếm theo tên, KCN, vị trí..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <Button type="submit" size="sm">Tìm</Button>
+      </form>
+
+      {/* Filters */}
+      <div className="mt-3 flex flex-wrap gap-2">
+        <select
+          value={filters.propertyType ?? ''}
+          onChange={(e) => updateFilter('propertyType', e.target.value)}
+          className="rounded-md border bg-background px-3 py-1.5 text-sm"
+          aria-label="Loại BĐS"
+        >
+          <option value="">Loại BĐS</option>
+          {(Object.entries(PROPERTY_TYPE_LABELS) as [IndustrialPropertyType, string][]).map(
+            ([value, label]) => (
+              <option key={value} value={value}>{label}</option>
+            ),
+          )}
+        </select>
+
+        <select
+          value={filters.leaseType ?? ''}
+          onChange={(e) => updateFilter('leaseType', e.target.value)}
+          className="rounded-md border bg-background px-3 py-1.5 text-sm"
+          aria-label="Hình thức"
+        >
+          <option value="">Hình thức thuê</option>
+          {(Object.entries(LEASE_TYPE_LABELS) as [IndustrialLeaseType, string][]).map(
+            ([value, label]) => (
+              <option key={value} value={value}>{label}</option>
+            ),
+          )}
+        </select>
+
+        <Input
+          type="number"
+          placeholder="Diện tích từ (m²)"
+          value={filters.minAreaM2 ?? ''}
+          onChange={(e) => updateNumericFilter('minAreaM2', e.target.value)}
+          className="w-36 text-sm"
+          aria-label="Diện tích tối thiểu"
+        />
+
+        <Input
+          type="number"
+          placeholder="Diện tích đến (m²)"
+          value={filters.maxAreaM2 ?? ''}
+          onChange={(e) => updateNumericFilter('maxAreaM2', e.target.value)}
+          className="w-36 text-sm"
+          aria-label="Diện tích tối đa"
+        />
+
+        <Input
+          type="number"
+          placeholder="Giá từ (USD/m²)"
+          value={filters.minPriceUsdM2 ?? ''}
+          onChange={(e) => updateNumericFilter('minPriceUsdM2', e.target.value)}
+          className="w-36 text-sm"
+          aria-label="Giá tối thiểu"
+        />
+
+        <Input
+          type="number"
+          placeholder="Giá đến (USD/m²)"
+          value={filters.maxPriceUsdM2 ?? ''}
+          onChange={(e) => updateNumericFilter('maxPriceUsdM2', e.target.value)}
+          className="w-36 text-sm"
+          aria-label="Giá tối đa"
+        />
+
+        {hasFilters && (
+          <Button variant="ghost" size="sm" onClick={handleClear} className="gap-1">
+            <X className="h-3.5 w-3.5" />
+            Xóa bộ lọc
+          </Button>
+        )}
+      </div>
+
+      {/* Results */}
+      <div className="mt-6">
+        {isLoading ? (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="h-64 animate-pulse rounded-lg bg-muted" />
+            ))}
+          </div>
+        ) : isError ? (
+          <div className="py-12 text-center">
+            <p className="text-muted-foreground">
+              Không thể tải danh sách tin cho thuê. Vui lòng thử lại.
+            </p>
+            <Button
+              variant="outline"
+              className="mt-4"
+              onClick={() => setFilters({ ...filters })}
+            >
+              Thử lại
+            </Button>
+          </div>
+        ) : data && data.data.length > 0 ? (
+          <>
+            <p className="mb-4 text-sm text-muted-foreground">
+              {data.total} tin cho thuê được tìm thấy
+            </p>
+
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {data.data.map((listing) => (
+                <IndustrialListingCard key={listing.id} listing={listing} />
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {data.totalPages > 1 && (
+              <div className="mt-8 flex items-center justify-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={filters.page === 1}
+                  onClick={() => handlePageChange((filters.page || 1) - 1)}
+                >
+                  Trước
+                </Button>
+                <span className="text-sm text-muted-foreground">
+                  Trang {data.page} / {data.totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={data.page >= data.totalPages}
+                  onClick={() => handlePageChange((filters.page || 1) + 1)}
+                >
+                  Sau
+                </Button>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="py-12 text-center">
+            <Factory className="mx-auto h-12 w-12 text-muted-foreground/30" />
+            <p className="mt-4 text-lg font-medium">Không tìm thấy tin cho thuê</p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Thử thay đổi bộ lọc để tìm kiếm nhiều hơn
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/components/khu-cong-nghiep/park-compare-client.tsx

@@ -0,0 +1,339 @@
+'use client';
+
+import { ArrowLeft, Factory, Plus, X } from 'lucide-react';
+import * as React from 'react';
+import {
+  Radar,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+} from 'recharts';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Link } from '@/i18n/navigation';
+import {
+  useIndustrialCompare,
+  useIndustrialParksSearch,
+} from '@/lib/hooks/use-khu-cong-nghiep';
+import {
+  type IndustrialParkDetail,
+  type IndustrialParkListItem,
+  PARK_STATUS_COLORS,
+  PARK_STATUS_LABELS,
+  REGION_LABELS,
+} from '@/lib/khu-cong-nghiep-api';
+
+const CHART_COLORS = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b'];
+
+const RADAR_METRICS = [
+  { key: 'occupancy', label: 'Lấp đầy' },
+  { key: 'area', label: 'Diện tích' },
+  { key: 'rent', label: 'Giá thuê' },
+  { key: 'infrastructure', label: 'Hạ tầng' },
+  { key: 'connectivity', label: 'Kết nối' },
+] as const;
+
+function normalizeScore(park: IndustrialParkDetail, metric: string): number {
+  switch (metric) {
+    case 'occupancy':
+      return park.occupancyRate;
+    case 'area':
+      return Math.min((park.totalAreaHa / 1000) * 100, 100);
+    case 'rent': {
+      const rent = park.landRentUsdM2Year ?? 0;
+      return rent > 0 ? Math.min((rent / 150) * 100, 100) : 0;
+    }
+    case 'infrastructure': {
+      const count = park.infrastructure ? Object.keys(park.infrastructure).length : 0;
+      return Math.min((count / 10) * 100, 100);
+    }
+    case 'connectivity': {
+      const conns = park.connectivity ? Object.keys(park.connectivity).length : 0;
+      return Math.min((conns / 8) * 100, 100);
+    }
+    default:
+      return 0;
+  }
+}
+
+function buildRadarData(parks: IndustrialParkDetail[]) {
+  return RADAR_METRICS.map((metric) => {
+    const entry: Record<string, string | number> = { metric: metric.label };
+    parks.forEach((park, i) => {
+      entry[`park${i}`] = Math.round(normalizeScore(park, metric.key));
+    });
+    return entry;
+  });
+}
+
+export function ParkCompareClient() {
+  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [showPicker, setShowPicker] = React.useState(false);
+
+  const { data: searchResults } = useIndustrialParksSearch({
+    q: searchQuery || undefined,
+    limit: 20,
+  });
+  const { data: compareData, isLoading } = useIndustrialCompare(selectedIds);
+
+  const addPark = (park: IndustrialParkListItem) => {
+    if (selectedIds.length >= 4) return;
+    if (selectedIds.includes(park.id)) return;
+    setSelectedIds((prev) => [...prev, park.id]);
+    setShowPicker(false);
+    setSearchQuery('');
+  };
+
+  const removePark = (id: string) => {
+    setSelectedIds((prev) => prev.filter((pid) => pid !== id));
+  };
+
+  const radarData = compareData ? buildRadarData(compareData) : [];
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-6">
+      {/* Header */}
+      <div className="mb-6 flex items-center gap-3">
+        <Link href="/khu-cong-nghiep">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+        </Link>
+        <div>
+          <h1 className="text-2xl font-bold md:text-3xl">So Sánh Khu Công Nghiệp</h1>
+          <p className="mt-1 text-muted-foreground">
+            Chọn 2–4 KCN để so sánh chi tiết
+          </p>
+        </div>
+      </div>
+
+      {/* Park selection */}
+      <Card className="mb-6">
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-3">
+            {selectedIds.map((id, i) => {
+              const park = compareData?.find((p) => p.id === id);
+              return (
+                <Badge
+                  key={id}
+                  variant="secondary"
+                  className="gap-1.5 py-1.5 pl-3 pr-2 text-sm"
+                  style={{ borderLeft: `3px solid ${CHART_COLORS[i]}` }}
+                >
+                  {park?.name ?? 'Đang tải...'}
+                  <button
+                    onClick={() => removePark(id)}
+                    className="ml-1 rounded-full p-0.5 hover:bg-muted"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </Badge>
+              );
+            })}
+
+            {selectedIds.length < 4 && (
+              <div className="relative">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-1"
+                  onClick={() => setShowPicker(!showPicker)}
+                >
+                  <Plus className="h-4 w-4" />
+                  Thêm KCN
+                </Button>
+
+                {showPicker && (
+                  <div className="absolute left-0 top-full z-50 mt-2 w-80 rounded-lg border bg-background shadow-lg">
+                    <div className="p-2">
+                      <input
+                        type="text"
+                        placeholder="Tìm kiếm KCN..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+                        autoFocus
+                      />
+                    </div>
+                    <div className="max-h-60 overflow-y-auto p-1">
+                      {searchResults?.data
+                        .filter((p) => !selectedIds.includes(p.id))
+                        .map((park) => (
+                          <button
+                            key={park.id}
+                            onClick={() => addPark(park)}
+                            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted"
+                          >
+                            <Factory className="h-4 w-4 shrink-0 text-muted-foreground" />
+                            <div className="min-w-0 flex-1">
+                              <div className="truncate font-medium">{park.name}</div>
+                              <div className="truncate text-xs text-muted-foreground">
+                                {park.province} &middot; {park.totalAreaHa} ha
+                              </div>
+                            </div>
+                          </button>
+                        ))}
+                      {searchResults?.data.length === 0 && (
+                        <p className="px-3 py-4 text-center text-sm text-muted-foreground">
+                          Không tìm thấy KCN
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Content */}
+      {selectedIds.length < 2 ? (
+        <div className="py-16 text-center">
+          <Factory className="mx-auto h-12 w-12 text-muted-foreground/30" />
+          <p className="mt-4 text-lg font-medium">Chọn ít nhất 2 KCN để so sánh</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Sử dụng nút &ldquo;Thêm KCN&rdquo; ở trên để bắt đầu
+          </p>
+        </div>
+      ) : isLoading ? (
+        <div className="grid gap-6 md:grid-cols-2">
+          {Array.from({ length: 2 }).map((_, i) => (
+            <div key={i} className="h-96 animate-pulse rounded-lg bg-muted" />
+          ))}
+        </div>
+      ) : compareData ? (
+        <div className="space-y-6">
+          {/* Radar Chart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Biểu đồ radar so sánh</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={400}>
+                <RadarChart data={radarData} cx="50%" cy="50%" outerRadius="80%">
+                  <PolarGrid stroke="hsl(var(--border))" />
+                  <PolarAngleAxis
+                    dataKey="metric"
+                    tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+                  />
+                  <PolarRadiusAxis
+                    angle={90}
+                    domain={[0, 100]}
+                    tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 10 }}
+                  />
+                  {compareData.map((park, i) => (
+                    <Radar
+                      key={park.id}
+                      name={park.name}
+                      dataKey={`park${i}`}
+                      stroke={CHART_COLORS[i]}
+                      fill={CHART_COLORS[i]}
+                      fillOpacity={0.15}
+                    />
+                  ))}
+                  <Legend />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: 'hsl(var(--card))',
+                      border: '1px solid hsl(var(--border))',
+                      borderRadius: '8px',
+                    }}
+                  />
+                </RadarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          {/* Comparison Table */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Chi tiết so sánh</CardTitle>
+            </CardHeader>
+            <CardContent className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b">
+                    <th className="pb-3 pr-4 text-left font-medium text-muted-foreground">
+                      Tiêu chí
+                    </th>
+                    {compareData.map((park, i) => (
+                      <th
+                        key={park.id}
+                        className="pb-3 px-4 text-left font-medium"
+                        style={{ borderBottom: `2px solid ${CHART_COLORS[i]}` }}
+                      >
+                        {park.name}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y">
+                  <CompareRow label="Trạng thái" parks={compareData} render={(p) => (
+                    <Badge className={PARK_STATUS_COLORS[p.status]} variant="secondary">
+                      {PARK_STATUS_LABELS[p.status]}
+                    </Badge>
+                  )} />
+                  <CompareRow label="Vùng miền" parks={compareData} render={(p) => REGION_LABELS[p.region]} />
+                  <CompareRow label="Tỉnh/TP" parks={compareData} render={(p) => p.province} />
+                  <CompareRow label="Tổng diện tích" parks={compareData} render={(p) => `${p.totalAreaHa.toLocaleString()} ha`} />
+                  <CompareRow label="Diện tích cho thuê" parks={compareData} render={(p) => `${p.leasableAreaHa.toLocaleString()} ha`} />
+                  <CompareRow label="Tỷ lệ lấp đầy" parks={compareData} render={(p) => `${p.occupancyRate}%`} />
+                  <CompareRow label="Còn trống" parks={compareData} render={(p) => `${p.remainingAreaHa.toLocaleString()} ha`} />
+                  <CompareRow label="Số DN" parks={compareData} render={(p) => String(p.tenantCount)} />
+                  <CompareRow label="Năm thành lập" parks={compareData} render={(p) => p.establishedYear ? String(p.establishedYear) : '—'} />
+                  <CompareRow label="Thuê đất (USD/m²/năm)" parks={compareData} render={(p) => p.landRentUsdM2Year ? `$${p.landRentUsdM2Year}` : '—'} />
+                  <CompareRow label="Nhà xưởng (USD/m²/th)" parks={compareData} render={(p) => p.rbfRentUsdM2Month ? `$${p.rbfRentUsdM2Month}` : '—'} />
+                  <CompareRow label="Phí quản lý" parks={compareData} render={(p) => p.managementFeeUsd ? `$${p.managementFeeUsd}` : '—'} />
+                  <CompareRow label="Chủ đầu tư" parks={compareData} render={(p) => p.developer} />
+                  <CompareRow label="Ngành mục tiêu" parks={compareData} render={(p) => (
+                    <div className="flex flex-wrap gap-1">
+                      {p.targetIndustries.slice(0, 4).map((ind) => (
+                        <Badge key={ind} variant="outline" className="text-xs">{ind}</Badge>
+                      ))}
+                      {p.targetIndustries.length > 4 && (
+                        <Badge variant="outline" className="text-xs">+{p.targetIndustries.length - 4}</Badge>
+                      )}
+                    </div>
+                  )} />
+                  <CompareRow label="Chứng chỉ" parks={compareData} render={(p) => (
+                    <div className="flex flex-wrap gap-1">
+                      {p.certifications?.map((cert) => (
+                        <Badge key={cert} variant="outline" className="text-xs">{cert}</Badge>
+                      )) ?? '—'}
+                    </div>
+                  )} />
+                </tbody>
+              </table>
+            </CardContent>
+          </Card>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function CompareRow({
+  label,
+  parks,
+  render,
+}: {
+  label: string;
+  parks: IndustrialParkDetail[];
+  render: (park: IndustrialParkDetail) => React.ReactNode;
+}) {
+  return (
+    <tr>
+      <td className="py-3 pr-4 font-medium text-muted-foreground whitespace-nowrap">{label}</td>
+      {parks.map((park) => (
+        <td key={park.id} className="px-4 py-3">{render(park)}</td>
+      ))}
+    </tr>
+  );
+}

apps/web/components/khu-cong-nghiep/park-map.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+/* eslint-disable import-x/no-named-as-default-member */
+import mapboxgl from 'mapbox-gl';
+import * as React from 'react';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import {
+  type IndustrialParkListItem,
+  PARK_STATUS_LABELS,
+  PARK_STATUS_COLORS,
+} from '@/lib/khu-cong-nghiep-api';
+
+interface ParkMapProps {
+  parks: IndustrialParkListItem[];
+  className?: string;
+}
+
+const DEFAULT_CENTER: [number, number] = [106.6297, 10.8231]; // HCMC
+const DEFAULT_ZOOM = 6;
+
+export function ParkMap({ parks, className }: ParkMapProps) {
+  const mapContainerRef = React.useRef<HTMLDivElement>(null);
+  const mapRef = React.useRef<mapboxgl.Map | null>(null);
+  const markersRef = React.useRef<mapboxgl.Marker[]>([]);
+
+  const geoParks = React.useMemo(
+    () => parks.filter((p) => p.latitude != null && p.longitude != null),
+    [parks],
+  );
+
+  React.useEffect(() => {
+    if (!mapContainerRef.current) return;
+
+    const token = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
+    if (!token) return;
+
+    mapboxgl.accessToken = token;
+
+    const map = new mapboxgl.Map({
+      container: mapContainerRef.current,
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: DEFAULT_CENTER,
+      zoom: DEFAULT_ZOOM,
+      attributionControl: false,
+    });
+
+    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+    map.addControl(new mapboxgl.AttributionControl({ compact: true }), 'bottom-right');
+
+    mapRef.current = map;
+
+    return () => {
+      map.remove();
+      mapRef.current = null;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    markersRef.current.forEach((m) => m.remove());
+    markersRef.current = [];
+
+    if (geoParks.length === 0) return;
+
+    const bounds = new mapboxgl.LngLatBounds();
+
+    geoParks.forEach((park) => {
+      const el = document.createElement('div');
+      el.className = 'park-map-marker';
+      el.style.cssText = `
+        background: white;
+        border-radius: 8px;
+        padding: 4px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+        white-space: nowrap;
+        cursor: pointer;
+        border-left: 3px solid hsl(221.2, 83.2%, 53.3%);
+        transition: transform 0.15s;
+        max-width: 160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `;
+      el.textContent = park.name;
+      el.addEventListener('mouseenter', () => {
+        el.style.transform = 'scale(1.05)';
+      });
+      el.addEventListener('mouseleave', () => {
+        el.style.transform = 'scale(1)';
+      });
+
+      const statusLabel = PARK_STATUS_LABELS[park.status];
+      const statusColorClass = PARK_STATUS_COLORS[park.status];
+      const bgColor = statusColorClass.includes('green') ? '#dcfce7' :
+                      statusColorClass.includes('amber') ? '#fef3c7' :
+                      statusColorClass.includes('red') ? '#fee2e2' :
+                      '#dbeafe';
+      const textColor = statusColorClass.includes('green') ? '#166534' :
+                        statusColorClass.includes('amber') ? '#92400e' :
+                        statusColorClass.includes('red') ? '#991b1b' :
+                        '#1e40af';
+
+      const rentText = park.landRentUsdM2Year
+        ? `$${park.landRentUsdM2Year}/m²/năm`
+        : 'Liên hệ';
+
+      const popup = new mapboxgl.Popup({ offset: 15, maxWidth: '260px', closeButton: false })
+        .setHTML(
+          `<div style="font-family:system-ui,sans-serif;padding:4px 0;">
+            <p style="font-weight:600;font-size:13px;margin:0 0 4px;">${park.name}</p>
+            <p style="font-size:12px;color:#666;margin:0 0 4px;">${park.province} &middot; ${park.totalAreaHa.toLocaleString()} ha</p>
+            <p style="font-size:12px;margin:0 0 4px;">
+              <span style="background:${bgColor};color:${textColor};padding:2px 6px;border-radius:4px;">${statusLabel}</span>
+              <span style="margin-left:4px;font-weight:600;color:hsl(221.2,83.2%,53.3%);">${rentText}</span>
+            </p>
+            <p style="font-size:12px;color:#666;margin:0 0 4px;">Lấp đầy: ${park.occupancyRate}% &middot; ${park.tenantCount} DN</p>
+            <a href="/khu-cong-nghiep/${park.slug}" style="font-size:12px;color:hsl(221.2,83.2%,53.3%);text-decoration:none;">Xem chi tiết →</a>
+          </div>`,
+        );
+
+      const marker = new mapboxgl.Marker({ element: el, anchor: 'left' })
+        .setLngLat([park.longitude, park.latitude])
+        .setPopup(popup)
+        .addTo(map);
+
+      markersRef.current.push(marker);
+      bounds.extend([park.longitude, park.latitude]);
+    });
+
+    if (geoParks.length > 1) {
+      map.fitBounds(bounds, { padding: 60, maxZoom: 13 });
+    } else {
+      map.flyTo({ center: [geoParks[0]!.longitude, geoParks[0]!.latitude], zoom: 14 });
+    }
+  }, [geoParks]);
+
+  const hasToken = typeof process !== 'undefined' && process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
+
+  return (
+    <div className={`relative overflow-hidden rounded-lg border ${className || 'h-[400px] md:h-[500px]'}`}>
+      <div ref={mapContainerRef} className="h-full w-full" />
+
+      {!hasToken && (
+        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-b from-blue-50 to-green-50">
+          <p className="text-sm text-muted-foreground">
+            Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ
+          </p>
+        </div>
+      )}
+
+      <div className="absolute bottom-3 left-3 rounded bg-white/90 px-2 py-1 text-xs text-muted-foreground shadow">
+        {geoParks.length} KCN trên bản đồ
+      </div>
+    </div>
+  );
+}

apps/web/lib/hooks/use-khu-cong-nghiep.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import {
   industrialApi,
+  type SearchIndustrialListingsParams,
   type SearchIndustrialParksParams,
 } from '@/lib/khu-cong-nghiep-api';
 
@@ -11,6 +12,7 @@ export const industrialKeys = {
   stats: () => ['industrial', 'stats'] as const,
   market: () => ['industrial', 'market'] as const,
   compare: (ids: string[]) => ['industrial', 'compare', ids] as const,
+  listings: (params: SearchIndustrialListingsParams) => ['industrial', 'listings', params] as const,
 };
 
 export function useIndustrialParksSearch(params: SearchIndustrialParksParams = {}) {
@@ -51,3 +53,10 @@ export function useIndustrialCompare(ids: string[]) {
     enabled: ids.length >= 2,
   });
 }
+
+export function useIndustrialListingsSearch(params: SearchIndustrialListingsParams = {}) {
+  return useQuery({
+    queryKey: industrialKeys.listings(params),
+    queryFn: () => industrialApi.searchListings(params),
+  });
+}

apps/web/lib/khu-cong-nghiep-api.ts

@@ -90,6 +90,65 @@ export interface IndustrialMarketData {
   rentByProvince: { province: string; avgLandRent: number | null; avgRbfRent: number | null; parkCount: number }[];
 }
 
+// ─── Industrial Listing Types ───────────────────────────
+
+export type IndustrialPropertyType =
+  | 'INDUSTRIAL_LAND'
+  | 'READY_BUILT_FACTORY'
+  | 'READY_BUILT_WAREHOUSE'
+  | 'LOGISTICS_CENTER'
+  | 'OFFICE_IN_PARK'
+  | 'DATA_CENTER';
+
+export type IndustrialLeaseType =
+  | 'LAND_LEASE'
+  | 'FACTORY_LEASE'
+  | 'WAREHOUSE_LEASE'
+  | 'SUBLEASE';
+
+export type IndustrialListingStatus =
+  | 'DRAFT'
+  | 'ACTIVE'
+  | 'RESERVED'
+  | 'LEASED'
+  | 'EXPIRED';
+
+export interface IndustrialListingItem {
+  id: string;
+  parkId: string;
+  parkName: string;
+  parkSlug: string;
+  propertyType: IndustrialPropertyType;
+  leaseType: IndustrialLeaseType;
+  status: IndustrialListingStatus;
+  title: string;
+  description: string | null;
+  areaM2: number;
+  ceilingHeightM: number | null;
+  priceUsdM2: number | null;
+  pricingUnit: string | null;
+  totalLeasePrice: number | null;
+  minLeaseYears: number | null;
+  maxLeaseYears: number | null;
+  availableFrom: string | null;
+  media: { url: string; type: string; caption?: string }[] | null;
+  viewCount: number;
+  publishedAt: string | null;
+}
+
+export interface SearchIndustrialListingsParams {
+  parkId?: string;
+  propertyType?: IndustrialPropertyType;
+  leaseType?: IndustrialLeaseType;
+  minAreaM2?: number;
+  maxAreaM2?: number;
+  minPriceUsdM2?: number;
+  maxPriceUsdM2?: number;
+  q?: string;
+  page?: number;
+  limit?: number;
+}
+
 export interface PaginatedResult<T> {
   data: T[];
   total: number;
@@ -132,6 +191,22 @@ export const REGION_LABELS: Record<VietnamRegion, string> = {
   SOUTH: 'Miền Nam',
 };
 
+export const PROPERTY_TYPE_LABELS: Record<IndustrialPropertyType, string> = {
+  INDUSTRIAL_LAND: 'Đất công nghiệp',
+  READY_BUILT_FACTORY: 'Nhà xưởng xây sẵn',
+  READY_BUILT_WAREHOUSE: 'Kho bãi xây sẵn',
+  LOGISTICS_CENTER: 'Trung tâm logistics',
+  OFFICE_IN_PARK: 'Văn phòng trong KCN',
+  DATA_CENTER: 'Trung tâm dữ liệu',
+};
+
+export const LEASE_TYPE_LABELS: Record<IndustrialLeaseType, string> = {
+  LAND_LEASE: 'Thuê đất',
+  FACTORY_LEASE: 'Thuê nhà xưởng',
+  WAREHOUSE_LEASE: 'Thuê kho bãi',
+  SUBLEASE: 'Cho thuê lại',
+};
+
 // ─── API Functions ──────────────────────────────────────
 
 export const industrialApi = {
@@ -157,4 +232,15 @@ export const industrialApi = {
 
   getMarket: () =>
     apiClient.get<IndustrialMarketData>('/industrial/market'),
+
+  searchListings: (params: SearchIndustrialListingsParams = {}) => {
+    const query = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== '') query.append(key, String(value));
+    });
+    const qs = query.toString();
+    return apiClient.get<PaginatedResult<IndustrialListingItem>>(
+      `/industrial/listings${qs ? `?${qs}` : ''}`,
+    );
+  },
 };