From 224166f1d4945203112cba15c6c3eb61e756c5cb Mon Sep 17 00:00:00 2001
From: tuyenio <tt98tuyen@gmail.com>
Date: Tue, 23 Jun 2026 16:10:16 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20g=E1=BB=A1=20=C4=91=C6=B0=E1=BB=9Dng=20h?=
 =?UTF-8?q?airline=20=C4=91=C3=A8=20n=C3=BAt=20CTA=20hero=20+=20marquee=20?=
 =?UTF-8?q?di=20t=C3=ADch=20cu=E1=BB=99n=20li=C3=AAn=20t=E1=BB=A5c?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tắt đường trang trí .public-hero-inner (đè ngang nút "Khám phá ngay/Tìm hiểu dự án")
- Marquee tên di tích: vòng lặp khép kín phải→trái (track <ul> reset, dịch -50%),
  tên bấm được mở trang chi tiết, rê chuột để tạm dừng; tôn trọng prefers-reduced-motion

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/landing/HeritageMarquee.tsx    | 41 ++++++++++++-------
 src/app/globals.css                           |  8 +++-
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/app/components/landing/HeritageMarquee.tsx b/src/app/components/landing/HeritageMarquee.tsx
index f12a633..7ef677a 100644
--- a/src/app/components/landing/HeritageMarquee.tsx
+++ b/src/app/components/landing/HeritageMarquee.tsx
@@ -1,27 +1,38 @@
+import Link from "next/link";
 import { heritageSites } from "@/app/content";
 
-// Dải tên di tích chạy ngang liên tục, gợi bề dày của hệ thống di sản.
-// Lặp danh sách 2 lần để vòng lặp khép kín; dừng khi prefers-reduced-motion.
+// Dải tên di tích cuộn liên tục từ phải sang trái (vòng lặp khép kín).
+// Danh sách được lặp 2 lần và track dịch -50% -> điểm nối trùng khít, không giật.
+// Rê chuột để tạm dừng và bấm vào tên để mở trang chi tiết.
 export function HeritageMarquee() {
-  const names = heritageSites.map((site) => site.name);
-  const loop = [...names, ...names];
+  const loop = [...heritageSites, ...heritageSites];
 
   return (
     <section
-      className="border-y border-[var(--surface-border)] bg-[var(--surface-band)] py-6"
+      className="relative border-y border-[var(--surface-border)] bg-[var(--surface-band)] py-7"
       aria-label="Hệ thống di tích Xã Như Quỳnh"
     >
       <div className="heritage-marquee">
-        <div className="heritage-marquee-track">
-          {loop.map((name, index) => (
-            <span key={index} className="flex items-center" aria-hidden={index >= names.length}>
-              <span className="public-display text-lg font-semibold text-[var(--tour-ink)]/85 sm:text-xl">
-                {name}
-              </span>
-              <span className="mx-7 inline-block h-1.5 w-1.5 rotate-45 bg-[var(--primary)]/70" />
-            </span>
-          ))}
-        </div>
+        <ul className="heritage-marquee-track">
+          {loop.map((site, index) => {
+            const duplicate = index >= heritageSites.length;
+            return (
+              <li key={index} className="flex items-center" aria-hidden={duplicate}>
+                <Link
+                  href={site.detailUrl}
+                  tabIndex={duplicate ? -1 : 0}
+                  className="public-display text-lg font-semibold text-[var(--tour-ink)]/80 transition-colors duration-500 hover:text-[var(--primary)] sm:text-xl"
+                >
+                  {site.name}
+                </Link>
+                <span
+                  aria-hidden="true"
+                  className="mx-7 inline-block h-1.5 w-1.5 rotate-45 bg-[var(--primary)]/70"
+                />
+              </li>
+            );
+          })}
+        </ul>
       </div>
     </section>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index 32e4a00..5ef08ee 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -292,7 +292,7 @@ a {
 
 .public-hero-inner::before,
 .public-hero-inner::after {
-  content: "";
+  content: none; /* gỡ đường hairline trang trí (đè lên nút CTA) */
   position: absolute;
   pointer-events: none;
 }
@@ -1423,14 +1423,18 @@ a {
 .heritage-marquee-track {
   display: inline-flex;
   width: max-content;
+  margin: 0;
+  padding: 0;
+  list-style: none;
   align-items: center;
   white-space: nowrap;
   will-change: transform;
+  transform: translate3d(0, 0, 0);
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .heritage-marquee-track {
-    animation: heritage-marquee 46s linear infinite;
+    animation: heritage-marquee 42s linear infinite;
   }
 
   .heritage-marquee:hover .heritage-marquee-track {