/* Thư viện hiệu ứng Mẫu — bật bằng data-hu="tên tên" trên khối. Dùng chung cho mọi template, mỗi mẫu chép một bản.
   Anh 30/10/2026: «mỗi trang ít nhất 2,3 hiệu ứng.ko nhau giống cho cả hơn 200-300template làm sau này». */

/* ---- Nhóm BANNER ---- */
[data-hu~="ken-burns"] { animation: hu-ken 16s ease-in-out infinite alternate; transform-origin: 60% 45%; }
@keyframes hu-ken { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
[data-hu~="mo-man"] { animation: hu-mo 1.3s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes hu-mo { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-hu~="mo-tron"] { animation: hu-tron 1.4s cubic-bezier(.65, 0, .2, 1) both; }
@keyframes hu-tron { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(120% at 50% 50%); } }
[data-hu~="chu-len"] .hu-tu { display: inline-block; opacity: 0; transform: translateY(.7em) rotate(3deg); animation: hu-len .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms + .15s + var(--hu-tre, 0s)); }
@keyframes hu-len { to { opacity: 1; transform: none; } }
[data-hu~="chu-mo"] .hu-tu { display: inline-block; opacity: 0; filter: blur(10px); animation: hu-mo-chu .8s ease forwards; animation-delay: calc(var(--i) * 80ms + var(--hu-tre, 0s)); }
@keyframes hu-mo-chu { to { opacity: 1; filter: blur(0); } }
[data-hu~="chu-so"] .hu-tu { display: inline-block; opacity: 0; transform: scale(.4); animation: hu-so .55s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--i) * 60ms + var(--hu-tre, 0s)); }
@keyframes hu-so { to { opacity: 1; transform: none; } }
[data-hu~="go-chu"].hu-dang-go::after { content: "|"; margin-left: 2px; animation: hu-nhay 1s steps(2) infinite; }
@keyframes hu-nhay { 50% { opacity: 0; } }
[data-hu~="anh-chu"] { background-image: linear-gradient(100deg, currentColor 40%, #fff6c9 50%, currentColor 60%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hu-anh 4.5s linear infinite; }
@keyframes hu-anh { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.hu-hat { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hu-hat i { position: absolute; bottom: -12px; border-radius: 50%; background: var(--hu-hat, rgba(255,255,255,.75)); animation: hu-bay linear infinite; }
@keyframes hu-bay { to { transform: translateY(-110vh) translateX(var(--x, 20px)); opacity: 0; } }
.hu-sao i { background: none; color: var(--hu-hat, #f6bd4c); font-style: normal; font-size: 14px; }
.hu-sao i::before { content: "✦"; }
[data-hu~="song-chay"] path { animation: hu-song 7s ease-in-out infinite alternate; }
@keyframes hu-song { to { transform: translateX(-3%) scaleY(1.2); } }
[data-hu~="xoay-cham"] { animation: hu-xoay 24s linear infinite; }
@keyframes hu-xoay { to { transform: rotate(360deg); } }
[data-hu~="lo-lung"] { animation: hu-lung 5s ease-in-out infinite alternate; }
@keyframes hu-lung { to { transform: translateY(-12px) rotate(-1.2deg); } }

/* Tab banner tự chuyển: thanh chạy dưới nút đang chọn */
[data-hu~="tab-tu-chuyen"] [role="tab"], [data-hu~="tab-tu-chuyen"] > button { position: relative; overflow: hidden; }
[data-hu~="tab-tu-chuyen"] .dang-chon::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--vang, #f6bd4c); transform-origin: left; animation: hu-chay var(--hu-nhip, 5s) linear both; }
@keyframes hu-chay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hu-doi-anh { animation: hu-doi .8s ease both; }
@keyframes hu-doi { from { opacity: .15; transform: scale(1.05); } to { opacity: 1; transform: none; } }

/* ---- Nhóm NỘI DUNG: chạy khi cuộn tới (.hu-vao do JS gắn) ---- */
[data-hu~="lan-luot"] > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
[data-hu~="lan-luot"].hu-vao > * { opacity: 1; transform: none; }
[data-hu~="tu-trai"] { opacity: 0; transform: translateX(-60px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
[data-hu~="tu-phai"] { opacity: 0; transform: translateX(60px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
[data-hu~="thu-nho"] { opacity: 0; transform: scale(.88); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
[data-hu~="tu-trai"].hu-vao, [data-hu~="tu-phai"].hu-vao, [data-hu~="thu-nho"].hu-vao { opacity: 1; transform: none; }
[data-hu~="man-len"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1); }
[data-hu~="man-len"].hu-vao { clip-path: inset(0 0 0 0); }
[data-hu~="lat-vao"] > * { opacity: 0; transform: perspective(800px) rotateX(-55deg); transform-origin: top; transition: opacity .6s ease, transform .7s ease; transition-delay: calc(var(--i, 0) * 90ms); }
[data-hu~="lat-vao"].hu-vao > * { opacity: 1; transform: none; }
[data-hu~="ve-duong"] { position: relative; }
[data-hu~="ve-duong"]::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s ease; }
[data-hu~="ve-duong"].hu-vao::before { transform: scaleX(1); }
[data-hu~="thanh-vao"] u, [data-hu~="thanh-vao"] i { transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
[data-hu~="thanh-vao"].hu-vao u, [data-hu~="thanh-vao"].hu-vao i { transform: none; }

/* ---- Nhóm TƯƠNG TÁC ---- */
[data-hu~="nghieng-3d"] > * { transition: transform .18s ease-out, box-shadow .2s; transform-style: preserve-3d; will-change: transform; }
[data-hu~="phong-anh"] img { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
[data-hu~="phong-anh"] > *:hover img, [data-hu~="phong-anh"]:hover > img { transform: scale(1.07); }
[data-hu~="noi-the"] > * { transition: transform .25s ease, box-shadow .25s ease; }
[data-hu~="noi-the"] > *:hover { transform: translateY(-7px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
[data-hu~="den-soi"] { position: relative; overflow: hidden; }
[data-hu~="den-soi"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 70%); }
[data-hu~="nhip"] { animation: hu-nhip 2.2s ease-out infinite; }
@keyframes hu-nhip { 0% { box-shadow: 0 0 0 0 rgba(246,189,76,.6); } 100% { box-shadow: 0 0 0 16px rgba(246,189,76,0); } }

/* Dải chữ chạy */
.hu-dai { overflow: hidden; white-space: nowrap; background: var(--hu-dai-nen, var(--xanh, #0d2c20)); color: var(--hu-dai-chu, var(--vang, #f6bd4c)); padding: 12px 0; font-weight: 600; font-size: 15px; }
.hu-dai > div { display: inline-flex; gap: 44px; padding-right: 44px; animation: hu-dai 28s linear infinite; will-change: transform; }
.hu-dai:hover > div { animation-play-state: paused; }
@keyframes hu-dai { to { transform: translateX(-50%); } }

/* Điện thoại: không có chuột nên nhóm rê chuột chạy khi cuộn tới; banner chạy nhanh và mở chậm một nhịp để khách kịp thấy */
@media (hover: none) {
  [data-hu~="nghieng-3d"] > *, [data-hu~="noi-the"] > *, [data-hu~="phong-anh"] > * { opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  [data-hu~="nghieng-3d"].hu-vao > *, [data-hu~="noi-the"].hu-vao > *, [data-hu~="phong-anh"].hu-vao > * { opacity: 1; transform: none; }
  [data-hu~="phong-anh"] img { transform: scale(1.18); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
  [data-hu~="phong-anh"].hu-vao img { transform: none; }
  [data-hu~="noi-the"] > *:active, [data-hu~="nghieng-3d"] > *:active { transform: scale(.98); transition-delay: 0s; }
  [data-hu~="ken-burns"] { animation-duration: 8s; }
  [data-hu~="mo-man"], [data-hu~="mo-tron"] { animation-delay: .7s; }
  :root { --hu-tre: .7s; }
}

/* Thanh tiến độ đọc */
.hu-tien-do { position: fixed; left: 0; top: 0; height: 4px; width: 100%; background: var(--vang, #f6bd4c); transform: scaleX(0); transform-origin: left; z-index: 90; }

@media (prefers-reduced-motion: reduce) {
  [data-hu], [data-hu] *, .hu-hat i, .hu-dai > div { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .hu-hat { display: none; }
}

html, body { overflow-x: clip; }