feat(listings): phase D — persona fit & "Vì sao nên ở đây" narrative

New module lib/listing-personas.ts derives persona tags and a short
"why live here" narrative from data the UI already has — the listing,
the neighborhood score, and the nearby POI list returned by Phase C.

Persona detection (emoji + short Vietnamese label):
- Gia đình có con nhỏ — educationScore ≥ 7 AND bedrooms ≥ 2
- Gia đình trẻ — exactly 2 PN AND healthcareScore ≥ 7
- Người đi làm xa — metroDistanceM ≤ 1 km OR transportScore ≥ 7 OR ≥ 2 transit POIs
- Người trẻ / độc thân — ≤ 1 PN OR (apartment + shopping ≥ 7 + ≥ 2 restaurants)
- Yêu thiên nhiên — greeneryScore ≥ 7 OR ≥ 1 park POI
- Ưu tiên an ninh — safetyScore ≥ 8
- Người lớn tuổi — healthcareScore ≥ 8 AND ≥ 2 hospital POIs
- Nhà đầu tư — SALE + totalScore ≥ 75 + transportScore ≥ 7

Each persona carries a concrete reason string (uses POI counts and
metro distance when available). The narrative highlights the top 3
categories scoring ≥ 7 with a matching POI detail.

UI: PersonaFitCard sits between the quick-specs bar and the main grid
with primary/5 background so it reads as a feature. Renders:
1) chips for each matching persona, 2) a tight bullet list of reasons,
3) the "Vì sao nên ở đây" narrative block. Silently collapses when no
personas match AND no narrative can be composed.

No schema change, no backend change. Phase D of 4 (next: Phase B schema
columns for admin-authored overrides + Phase E AI advisor with Opus).

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

apps/web/components/listings/listing-detail-client.tsx

@@ -15,6 +15,7 @@ import { AiEstimateButton } from '@/components/valuation/ai-estimate-button';
 import { analyticsApi } from '@/lib/analytics-api';
 import type { NearbyPOI } from '@/lib/analytics-api';
 import { formatPrice, formatPricePerM2 } from '@/lib/currency';
+import { composeWhyThisLocation, derivePersonas } from '@/lib/listing-personas';
 import type { ListingDetail, NeighborhoodScoreResult, PriceHistoryItem } from '@/lib/listings-api';
 import { listingsApi } from '@/lib/listings-api';
 import { PROPERTY_TYPES, DIRECTIONS, TRANSACTION_TYPES } from '@/lib/validations/listings';
@@ -186,6 +187,9 @@ export function ListingDetailClient({ listing }: ListingDetailClientProps) {
         )}
       </div>
 
+      {/* Persona fit — "Phù hợp với ai & Vì sao nên ở đây" */}
+      <PersonaFitCard listing={listing} score={neighborhoodScore} pois={nearbyPois} />
+
       <div className="grid gap-6 lg:grid-cols-3">
         {/* Main content */}
         <div className="space-y-6 lg:col-span-2">
@@ -438,6 +442,72 @@ export function ListingDetailClient({ listing }: ListingDetailClientProps) {
   );
 }
 
+function PersonaFitCard({
+  listing,
+  score,
+  pois,
+}: {
+  listing: ListingDetail;
+  score: NeighborhoodScoreResult | null;
+  pois: POIItem[];
+}) {
+  const personas = React.useMemo(
+    () => derivePersonas(listing, score, pois),
+    [listing, score, pois],
+  );
+  const narrative = React.useMemo(
+    () => composeWhyThisLocation(listing, score, pois),
+    [listing, score, pois],
+  );
+
+  // Only render when we have something meaningful to say.
+  if (personas.length === 0 && !narrative) return null;
+
+  return (
+    <Card className="my-6 border-primary/30 bg-primary/5">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">Phù hợp với ai?</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {personas.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {personas.map((p) => (
+              <div
+                key={p.key}
+                className="group relative inline-flex items-center gap-1.5 rounded-full border bg-card px-3 py-1.5 text-sm shadow-sm"
+                title={p.reason}
+              >
+                <span aria-hidden="true">{p.emoji}</span>
+                <span className="font-medium">{p.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        {personas.length > 0 && (
+          <ul className="space-y-1.5 text-sm text-muted-foreground">
+            {personas.map((p) => (
+              <li key={`reason-${p.key}`} className="flex gap-2">
+                <span className="shrink-0 text-primary" aria-hidden="true">→</span>
+                <span>
+                  <span className="font-medium text-foreground">{p.label}:</span> {p.reason}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+        {narrative && (
+          <div className="rounded-md border bg-card p-3">
+            <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Vì sao nên ở đây
+            </p>
+            <p className="text-sm leading-relaxed">{narrative}</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
 function QuickStat({ icon, label, value }: { icon: string; label: string; value: string }) {
   const icons: Record<string, React.ReactNode> = {
     area: (