feat: redesign landing pages — bố cục giàu hơn, mượt & cao cấp hơn

- Trang chủ: thêm thẻ trải nghiệm Cổ vật 3D, khu "sắp ra mắt" dạng thẻ gọn
  (bỏ ảnh lặp), bo góc mềm, badge vuông có chấm trạng thái
- Giới thiệu: bố cục editorial bất đối xứng, dải thống kê, 4 trụ giá trị di sản,
  hành trình số hóa 4 bước, thẻ CTA tour nổi bật
- Liên hệ: 2 cột (hướng dẫn đóng góp + thẻ liên hệ), nhúng bản đồ
- CTA: sửa màu chữ tương phản trên nền xanh/nền sáng

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

src/app/lien-he/page.tsx

@@ -1,18 +1,25 @@
 import type { Metadata } from "next";
-import { MapPin, Mail, Phone } from "lucide-react";
+import { Clock, ImagePlus, Landmark, Mail, MapPin, MessageSquareText, Phone, Send } from "lucide-react";
 import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
 import { SiteFooter } from "@/app/components/landing/SiteFooter";
 import { SiteHeader } from "@/app/components/landing/SiteHeader";
 
 export const metadata: Metadata = {
   title: "Liên hệ | VR360 Như Quỳnh",
-  description: "Thông tin liên hệ và đầu mối cung cấp tư liệu cho dự án số hóa di sản Xã Như Quỳnh.",
+  description: "Thông tin liên hệ và đầu mối cung cấp tư liệu cho dự án số hóa di sản Xã Như Quỳnh, tỉnh Hưng Yên.",
 };
 
 const contacts = [
   { icon: MapPin, label: "Địa chỉ", value: "Xã Như Quỳnh, tỉnh Hưng Yên" },
   { icon: Phone, label: "Điện thoại", value: "Đang cập nhật" },
   { icon: Mail, label: "Email", value: "Đang cập nhật" },
+  { icon: Clock, label: "Thời gian tiếp nhận", value: "Trong giờ hành chính các ngày làm việc" },
+];
+
+const steps = [
+  { icon: MessageSquareText, title: "Gửi thông tin", detail: "Mô tả ngắn về di tích, cổ vật hoặc câu chuyện bạn muốn đóng góp." },
+  { icon: ImagePlus, title: "Kèm hình ảnh, tư liệu", detail: "Hình ảnh, tài liệu hoặc nguồn tham khảo giúp xác minh và biên tập nội dung." },
+  { icon: Landmark, title: "Cùng hoàn thiện", detail: "Ban quản lý sẽ rà soát, đối chiếu và đưa nội dung phù hợp lên nền tảng số." },
 ];
 
 export default function ContactPage() {
@@ -20,31 +27,86 @@ export default function ContactPage() {
     <main className="public-page min-h-[100dvh] bg-[var(--background)] text-[var(--foreground)]">
       <SiteHeader />
 
-      <section className="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:py-24">
-        <p className="public-kicker">Liên hệ</p>
-        <h1 className="public-gradient-text public-heading-safe mt-3 text-[clamp(2.2rem,5vw,3.6rem)] font-extrabold">
-          Liên hệ & đóng góp tư liệu
-        </h1>
-        <p className="mt-5 text-base leading-8 text-[var(--foreground)]/82">
-          Người dân, tổ chức có tư liệu, hình ảnh hoặc câu chuyện về các di tích của Xã Như Quỳnh
-          vui lòng liên hệ để cùng hoàn thiện kho dữ liệu số di sản.
-        </p>
+      <section className="mx-auto max-w-7xl px-4 pt-16 sm:px-6 lg:pt-24">
+        <div className="public-rise max-w-3xl">
+          <p className="public-kicker">Liên hệ</p>
+          <h1 className="public-gradient-text public-heading-safe mt-3 text-[clamp(2.2rem,5vw,3.8rem)] font-extrabold">
+            Liên hệ & đóng góp tư liệu
+          </h1>
+          <p className="mt-5 text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
+            Người dân, tổ chức có tư liệu, hình ảnh hoặc câu chuyện về các di tích của Xã Như Quỳnh
+            vui lòng liên hệ để cùng hoàn thiện kho dữ liệu số di sản.
+          </p>
+        </div>
+      </section>
 
-        <div className="mt-10 grid gap-4">
-          {contacts.map((c) => {
-            const Icon = c.icon;
-            return (
-              <div key={c.label} className="public-panel flex items-center gap-4 rounded-[8px] p-5">
-                <span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[rgb(200_164_106_/_0.18)]">
-                  <Icon className="h-5 w-5 text-[var(--primary)]" strokeWidth={1.8} />
-                </span>
-                <span>
-                  <span className="block text-sm font-bold text-[var(--muted-foreground)]">{c.label}</span>
-                  <span className="block text-base font-bold text-[var(--tour-ink)]">{c.value}</span>
-                </span>
-              </div>
-            );
-          })}
+      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:grid lg:grid-cols-[0.56fr_0.44fr] lg:gap-8 lg:py-16">
+        {/* Contribution guidance */}
+        <div>
+          <h2 className="public-display public-heading-safe text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
+            Cách đóng góp tư liệu
+          </h2>
+          <ol className="mt-6 grid gap-4">
+            {steps.map((step, index) => {
+              const Icon = step.icon;
+              return (
+                <li key={step.title} className="public-panel public-stagger-item flex items-start gap-4 rounded-[14px] p-5">
+                  <span className="grid h-11 w-11 shrink-0 place-items-center rounded-[10px] bg-[rgb(200_164_106_/_0.14)]">
+                    <Icon className="h-5 w-5 text-[var(--primary)]" strokeWidth={1.8} />
+                  </span>
+                  <span>
+                    <span className="flex items-center gap-2">
+                      <span className="font-display-vn text-xs font-extrabold tracking-[0.18em] text-[var(--primary)]">
+                        {String(index + 1).padStart(2, "0")}
+                      </span>
+                      <span className="text-base font-bold text-[var(--tour-ink)]">{step.title}</span>
+                    </span>
+                    <span className="mt-1 block text-sm leading-6 text-[var(--muted-foreground)]">{step.detail}</span>
+                  </span>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+
+        {/* Contact cards */}
+        <div className="mt-8 lg:mt-0">
+          <h2 className="public-display public-heading-safe text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
+            Thông tin liên hệ
+          </h2>
+          <div className="mt-6 grid gap-3">
+            {contacts.map((c) => {
+              const Icon = c.icon;
+              return (
+                <div key={c.label} className="public-panel flex items-center gap-4 rounded-[14px] p-5">
+                  <span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[rgb(200_164_106_/_0.18)]">
+                    <Icon className="h-5 w-5 text-[var(--primary)]" strokeWidth={1.8} />
+                  </span>
+                  <span>
+                    <span className="block text-xs font-bold uppercase tracking-[0.1em] text-[var(--muted-foreground)]">{c.label}</span>
+                    <span className="block text-base font-semibold text-[var(--tour-ink)]">{c.value}</span>
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+          <p className="mt-4 inline-flex items-center gap-2 text-xs leading-5 text-[var(--muted-foreground)]">
+            <Send className="h-3.5 w-3.5 text-[var(--primary)]" strokeWidth={1.8} />
+            Thông tin số điện thoại và email chính thức sẽ được cập nhật khi sẵn sàng.
+          </p>
+        </div>
+      </section>
+
+      {/* Map */}
+      <section className="mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:pb-24">
+        <div className="public-map-frame overflow-hidden rounded-[16px] border border-[var(--surface-border)]">
+          <iframe
+            title="Bản đồ Xã Như Quỳnh, tỉnh Hưng Yên"
+            src="https://www.google.com/maps?q=Nh%C6%B0%20Qu%E1%BB%B3nh%2C%20H%C6%B0ng%20Y%C3%AAn&output=embed"
+            loading="lazy"
+            referrerPolicy="no-referrer-when-downgrade"
+            className="h-[360px] w-full sm:h-[440px]"
+          />
         </div>
       </section>