feat(listings+projects): wire listing PATCH + project rich content parity

Two CRUD/parity gaps closed:

Listings edit — PATCH was dead-ended at the frontend
----------------------------------------------------
Backend PATCH /listings/:id existed and accepted Phase B fields but
the dashboard edit page was read-only with a disclaimer stub. Now:
- listings-api.ts exports UpdateListingPayload (Partial<CreatePayload>)
  and listingsApi.update(id, data).
- /listings/[id]/edit/page.tsx wires handleSubmit → maps the form to
  UpdateListingPayload (coerces numerics, splits CSV amenities/view/
  suitableFor, normalises petFriendly 3-way select), calls update,
  shows green success banner or red error banner. Removed the
  disclaimer text.
- Form footer now has Huỷ + Lưu thay đổi buttons.

Projects rich content — parity with Phase B listings
---------------------------------------------------
Same "Phù hợp với ai / Vì sao nên chọn dự án này" pattern now on
project detail.

Schema
- ProjectDevelopment: suitableFor String[] @default([]) +
  whyThisLocation String? @db.Text. Migration 20260419100000 applied
  via db:push.

Backend
- CreateProjectDto / UpdateProjectDto pick up optional suitableFor +
  whyThisLocation (MaxLength 2000).
- CreateProjectCommand / UpdateProjectCommand append the two trailing
  args; handlers forward them.
- ProjectDevelopment entity carries the props + updateDetails
  branches.
- ProjectListItem (inherited by ProjectDetailData) exposes both.
- Prisma repo writes them on raw INSERT/UPDATE and reads them in
  toDomain + toListItem. Controller passes dto → commands.

Frontend
- du-an-api.ts: ProjectDetail / CreateProjectPayload /
  UpdateProjectPayload gain suitableFor + whyThisLocation. duAnApi
  exports create / update / delete (already landed earlier, now in
  sync with the new fields).
- du-an-server.ts normalizer pulls the two fields safely (filter
  strings, default empty array / null).
- Dashboard /projects/new + /projects/[id]/edit: new "Phù hợp & lý
  do khu vực" form section (CSV split + 2000-char textarea). Submit
  handlers forward to create/update payloads.
- Public /du-an/[slug] detail (du-an-detail-client.tsx): two new
  cards just below the quick-stats grid —
  * ProjectPersonaFitCard: chips for each suitableFor label with a
    "Chủ đầu tư chọn" badge (bg-primary/10), plus a disabled
    <Button><Sparkles /> AI nhận định dự án (sắp ra mắt)</Button>
    teaser with a TODO pointing to a future project-AI advisor
    endpoint.
  * ProjectWhyLocationCard: renders whyThisLocation in
    whitespace-pre-wrap; skipped when the field is empty.

Verification
- API typecheck clean; 1975/1975 tests pass.
- Web typecheck clean in touched files; 624/624 tests pass.
- Lucide-only icons; Vietnamese labels; no new npm packages;
  runtime imports preserved for NestJS-DI classes.

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

apps/web/components/du-an/du-an-detail-client.tsx

@@ -10,6 +10,7 @@ import {
   Home,
   MapPin,
   Phone,
+  Sparkles,
   X,
 } from 'lucide-react';
 import dynamic from 'next/dynamic';
@@ -154,6 +155,12 @@ export function DuAnDetailClient({ project }: DuAnDetailClientProps) {
         />
       </div>
 
+      {/* Persona fit — "Phù hợp với ai" (CĐT chọn) + AI placeholder */}
+      <ProjectPersonaFitCard project={project} />
+
+      {/* "Vì sao nên chọn dự án này" narrative — admin authored */}
+      <ProjectWhyLocationCard project={project} />
+
       <div className="grid gap-6 lg:grid-cols-3">
         {/* Main content */}
         <div className="space-y-6 lg:col-span-2">
@@ -617,6 +624,73 @@ function ListingsTab({ project }: { project: ProjectDetail }) {
   );
 }
 
+function ProjectPersonaFitCard({ project }: { project: ProjectDetail }) {
+  const suitableFor = project.suitableFor ?? [];
+
+  // Always render the card so the "AI nhận định" CTA is visible even without
+  // admin-authored chips. If we eventually have nothing to show at all (no
+  // chips and we drop the placeholder), bail out early.
+  if (suitableFor.length === 0) {
+    // Still render with the AI placeholder so users see the intent.
+  }
+
+  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">
+        {suitableFor.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {suitableFor.map((label) => (
+              <div
+                key={`admin-${label}`}
+                className="inline-flex items-center gap-1.5 rounded-full border border-primary/50 bg-primary/10 px-3 py-1.5 text-sm shadow-sm"
+              >
+                <span className="font-medium">{label}</span>
+                <span className="rounded bg-primary/20 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-primary">
+                  Chủ đầu tư chọn
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Chủ đầu tư chưa chỉ định nhóm khách phù hợp.
+          </p>
+        )}
+
+        {/* TODO: replace with a real project-AI advisor endpoint (see the
+            listings flow: apps/api/src/modules/analytics/application/queries/
+            get-listing-ai-advice/). For now this is a disabled placeholder to
+            signal intent without shipping a half-built integration. */}
+        <div className="pt-1">
+          <Button type="button" variant="outline" disabled className="gap-2">
+            <Sparkles className="h-4 w-4" />
+            AI nhận định dự án (sắp ra mắt)
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ProjectWhyLocationCard({ project }: { project: ProjectDetail }) {
+  const narrative = project.whyThisLocation?.trim();
+  if (!narrative) return null;
+
+  return (
+    <Card className="my-6">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">Vì sao nên chọn dự án này?</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="whitespace-pre-wrap text-sm leading-relaxed">{narrative}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
 function DocumentsTab({ project }: { project: ProjectDetail }) {
   if (project.documents.length === 0) {
     return <p className="text-sm text-muted-foreground">Chưa có tài liệu nào.</p>;