perf: dynamic import viewer three.js (tách khỏi bundle chính)

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

src/app/co-vat/AntiquityShowcaseClient.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { Antiquity } from "@/app/content";
+
+const AntiquityShowcase = dynamic(
+  () => import("@/app/components/antiquity/AntiquityShowcase").then((m) => m.AntiquityShowcase),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center text-sm text-[var(--muted-foreground)] sm:px-6">
+        Đang tải phòng trưng bày 3D…
+      </div>
+    ),
+  },
+);
+
+export default function AntiquityShowcaseClient({ items }: { items: Antiquity[] }) {
+  return <AntiquityShowcase items={items} />;
+}

src/app/co-vat/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 import { Boxes, ScanLine, Sparkles } from "lucide-react";
-import { AntiquityShowcase } from "@/app/components/antiquity/AntiquityShowcase";
+import AntiquityShowcaseClient from "./AntiquityShowcaseClient";
 import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
 import { SiteFooter } from "@/app/components/landing/SiteFooter";
 import { SiteHeader } from "@/app/components/landing/SiteHeader";
@@ -40,7 +40,7 @@ export default function AntiquityPage() {
         </div>
       </section>
 
-      <AntiquityShowcase items={antiquities} />
+      <AntiquityShowcaseClient items={antiquities} />
 
       <section className="border-t border-[var(--surface-border)] bg-[var(--surface-band)]">
         <div className="mx-auto grid max-w-7xl gap-4 px-4 py-14 sm:px-6 md:grid-cols-3 lg:py-18">