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 {