/* =====================================================================================================
   03/10/2026 – RỒNG VÀNG & "ZEUS TOẢ SÁNG" + khu HỒN VIỆT (trống đồng · Con Rồng · tự hào dân tộc)
   Anh Long: "hiệu ứng rồng … ấn tượng mạnh … làm Zeus toả sáng"; "câu ấn tượng … tự tôn, tự hào dân tộc Việt".
   ===================================================================================================== */
/* nằm DƯỚI thanh menu (top 72px): menu có làm mờ nền, nếu canvas chồng bên dưới thì mỗi khung hình trình duyệt phải tính lại lớp mờ → giật.
   Kích thước đặt bằng JS (dragon.js) cho khớp toạ độ vẽ. */
.dragon-cv { position: fixed; left: 0; top: 72px; z-index: 58; pointer-events: none; contain: strict; }
.hbtn-dragon { border-color: rgba(232, 176, 79, .45) !important; box-shadow: 0 0 16px -6px var(--dong); }
.hbtn-dragon img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(232, 176, 79, .75)); transition: filter .3s, opacity .3s, transform .3s var(--ease); }
.hbtn-dragon:hover img { transform: scale(1.14) rotate(-8deg); }
.hbtn-dragon.off { border-color: var(--line) !important; box-shadow: none; }
.hbtn-dragon.off img { filter: grayscale(1); opacity: .45; }

/* logo đầu trang + chân trang: vệt sáng lướt + mắt rồng loé */
.logo-wrap { position: relative; display: block; }
.logo-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(/assets/brand/logo-480.webp) center / 100% 100% no-repeat; mask: url(/assets/brand/logo-480.webp) center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 246, 216, .9) 50%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: lgShine 7s ease-in-out 2s infinite; }
.logo-eye { position: absolute; left: 13.3%; top: 37.3%; width: 0; height: 0; pointer-events: none; }
.logo-eye::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 60, 40, .95) 35%, rgba(255, 40, 20, 0) 70%); animation: eyeGlow 6s ease-in-out 1s infinite; }

/* logo lớn đầu trang chủ: "thức dậy" khi vào trang, hào quang 14 tia (mặt trời trống đồng), mắt rồng loé */
.hero-aura { position: absolute; left: 50%; top: 50%; z-index: 2; width: 116%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.hero-aura i { position: absolute; inset: 0; border-radius: 50%; }
.hero-aura i:first-child { background: repeating-conic-gradient(from 0deg, rgba(255, 217, 138, 0) 0deg 8deg, rgba(255, 217, 138, .26) 10.5deg 15deg, rgba(255, 217, 138, 0) 17.5deg 25.714deg);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 44%, transparent 74%); mask: radial-gradient(closest-side, transparent 30%, #000 44%, transparent 74%);
  animation: spin 90s linear infinite, auraPulse 5s ease-in-out infinite; }
.hero-aura i:last-child { background: radial-gradient(closest-side, rgba(255, 217, 138, .3), rgba(232, 176, 79, .1) 46%, transparent 70%); animation: auraBreath 4.6s ease-in-out infinite; }
@keyframes auraPulse { 50% { opacity: .5; } }
@keyframes auraBreath { 50% { transform: scale(1.1); opacity: .65; } }
.hero-logo img { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .7)) drop-shadow(0 0 34px rgba(232, 176, 79, .38)); animation: zeusWake 1.8s var(--ease) backwards; }
@keyframes zeusWake {   /* chỉ chạy 1 lần lúc vào trang, xong tự gỡ (không giữ bộ lọc nặng) */
  0% { opacity: 0; transform: scale(.86); filter: brightness(2.6) drop-shadow(0 0 60px rgba(255, 217, 138, .9)); }
  55% { opacity: 1; transform: scale(1.03); filter: brightness(1.5) drop-shadow(0 0 70px rgba(255, 217, 138, .8)); }
}
.hero-eye { position: absolute; left: 13.3%; top: 37.3%; z-index: 2; width: 0; height: 0; }
.hero-eye::before { content: ''; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 70, 40, .9) 30%, rgba(255, 40, 20, 0) 70%); animation: eyeGlow 5s ease-in-out 2s infinite; }
.hero-eye::after { content: ''; position: absolute; left: -46px; top: -1px; width: 92px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 210, 190, .95), transparent);
  box-shadow: 0 0 10px rgba(255, 80, 50, .95); animation: eyeFlare 5s ease-in-out 2s infinite; }
@keyframes eyeGlow { 0%, 68%, 100% { opacity: .35; transform: scale(.7); } 77% { opacity: 1; transform: scale(1.6); } 86% { opacity: .6; transform: scale(1); } }
@keyframes eyeFlare { 0%, 70%, 100% { opacity: 0; transform: scaleX(.2); } 77% { opacity: 1; transform: scaleX(1.5); } 88% { opacity: 0; transform: scaleX(.6); } }

/* ---------- HỒN VIỆT ---------- */
.hv { position: relative; overflow: hidden; padding: 120px 0 0; isolation: isolate; }
.hv-lac { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 45% at 22% 42%, rgba(179, 32, 42, .42), transparent 70%), radial-gradient(45% 45% at 86% 58%, rgba(232, 176, 79, .16), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #12060a 16%, #1a080b 55%, #0d0507 86%, var(--bg) 100%); }
.hv-lac::before { content: ''; position: absolute; left: 24%; top: 42%; width: 1200px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(232, 176, 79, .08) 0 1px, transparent 1px 36px);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent); }
.hv-lac::after { content: ''; position: absolute; left: 0; right: 0; top: 70px; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 176, 79, .55), transparent); }
.hv-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.hv-art { position: relative; display: grid; place-items: center; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; isolation: isolate; }
.hv-art > svg, .hv-art > i, .hv-art > div { grid-area: 1 / 1; }
.hv-drum { width: 100%; height: 100%; filter: drop-shadow(0 0 44px rgba(232, 176, 79, .5)); animation: hvGlow 4.8s ease-in-out infinite; }
/* mặt trống Đông Sơn (brand.dongson_svg): vành chim Lạc và đoàn người hoá trang xoay rất chậm ngược chiều kim đồng hồ */
.hv-drum .ds-birds { transform-box: view-box; transform-origin: 50% 50%; animation: spin 140s linear infinite reverse; }
.hv-drum .ds-people { transform-box: view-box; transform-origin: 50% 50%; animation: spin 220s linear infinite reverse; }
@keyframes hvGlow { 50% { filter: drop-shadow(0 0 70px rgba(255, 200, 110, .7)); } }
/* luồng sáng quét vòng quanh mặt trống */
.hv-sweep { position: absolute; inset: 2%; z-index: 2; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(255, 236, 190, .55) 88%, transparent 96%);
  -webkit-mask: radial-gradient(closest-side, transparent 34%, #000 46%, #000 98%, transparent); mask: radial-gradient(closest-side, transparent 34%, #000 46%, #000 98%, transparent);
  animation: spin 7s linear infinite; }
/* rồng trồi lên từ lõi trống: cổ chui vào tâm, mép dưới mờ dần; lõi + tia sét (hv-core) vẽ đè lên cổ */
.hv-dragon { position: absolute; z-index: 3; left: 10.4%; top: -14.7%; width: 66%; aspect-ratio: 1; transform-origin: 60% 98%; animation: hvRise 7s ease-in-out infinite; }
.hv-dragon img { display: block; width: 100%; height: 100%;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 7%, #000 60%, rgba(0, 0, 0, .5) 82%, transparent 97%), linear-gradient(90deg, #000 74%, transparent 97%);
  -webkit-mask-composite: source-in; mask: linear-gradient(180deg, transparent 0, #000 7%, #000 60%, rgba(0, 0, 0, .5) 82%, transparent 97%), linear-gradient(90deg, #000 74%, transparent 97%); mask-composite: intersect;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(255, 200, 110, .45)); }
@keyframes hvRise { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-12px); } }
.hv-eye { position: absolute; left: 36.7%; top: 38.2%; width: 0; height: 0; }
.hv-eye::before { content: ''; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 70, 40, .9) 30%, rgba(255, 40, 20, 0) 70%); animation: eyeGlow 4.2s ease-in-out infinite; }
.hv-eye::after { content: ''; position: absolute; left: -40px; top: -1px; width: 80px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 210, 190, .95), transparent);
  box-shadow: 0 0 10px rgba(255, 80, 50, .95); animation: eyeFlare 4.2s ease-in-out infinite; }
.hv-core { position: absolute; z-index: 4; width: 100%; height: 100%; pointer-events: none; clip-path: circle(19.4% at 50% 50%);
  filter: drop-shadow(0 0 18px rgba(255, 200, 110, .6)); }
.hv-core .ds-sun { transform-box: fill-box; transform-origin: center; animation: sunPulse 3.4s ease-in-out infinite; }
@keyframes sunPulse { 50% { transform: scale(1.12); filter: brightness(1.25); } }
.js-trong.hit .hv-core .ds-sun { animation: sunHit .5s ease-out; }
@keyframes sunHit { 25% { transform: scale(1.3); filter: brightness(1.7); } }
/* tàn lửa vàng bay lên */
.hv-embers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hv-embers i { position: absolute; left: var(--x); bottom: 12%; width: 5px; height: 5px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 10px 2px rgba(255, 170, 70, .85); opacity: 0;
  animation: ember var(--t) ease-out var(--d) infinite; }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--x) - 50%) * .4), -340px) scale(.3); } }
/* sóng âm lan liên tục + nhịp mạnh mỗi lần đổi câu */
.hv-wave { position: absolute; inset: 9%; z-index: 1; border-radius: 50%; border: 2px solid rgba(255, 217, 138, .6); opacity: 0; pointer-events: none; animation: hvWave 3.6s cubic-bezier(.2, .7, .3, 1) infinite; }
.hv-wave.w2 { animation-delay: 1.2s; } .hv-wave.w3 { animation-delay: 2.4s; }
@keyframes hvWave { 0% { opacity: .75; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.5); } }
.hv-art.beat .hv-drum { animation: hvBeat .6s ease-out; }
.hv-art.beat .hv-dragon { animation: hvRoar .7s ease-out; }
@keyframes hvBeat { 30% { transform: scale(1.05); filter: drop-shadow(0 0 90px rgba(255, 217, 138, .95)); } }
@keyframes hvRoar { 35% { transform: rotate(-7deg) translateY(-18px) scale(1.04); } }
.hv-h { margin-bottom: 20px; font-size: clamp(40px, 5vw, 76px); font-weight: 900; line-height: 1.04; letter-spacing: -.035em; }
.hv-q { position: relative; margin: 26px 0; padding: 22px 26px 18px 66px; border-radius: 20px; border: 1px solid rgba(232, 176, 79, .4);
  background: linear-gradient(120deg, rgba(179, 32, 42, .24), rgba(232, 176, 79, .06)); box-shadow: 0 30px 60px -36px rgba(179, 32, 42, .9); }
.hv-qm { position: absolute; left: 18px; top: -4px; font: 900 86px/1 Georgia, 'Times New Roman', serif; color: var(--dong); }
.hv-qt { min-height: 2.5em; margin: 0 0 14px; font-size: clamp(21px, 2.3vw, 32px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #ffe9b8; text-shadow: 0 0 24px rgba(232, 176, 79, .35); }
.hv-qt.in { animation: hvIn .75s var(--ease); }
@keyframes hvIn { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.hv-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.hv-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: rgba(232, 176, 79, .3); transition: width .3s, background .3s; }
.hv-dots button.on { width: 28px; border-radius: 99px; background: var(--grad); }
.hv-pils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 72px; }
.hv-pil { padding: 26px; border-radius: 22px; border: 1px solid rgba(232, 176, 79, .3); background: linear-gradient(180deg, rgba(179, 32, 42, .18), rgba(10, 6, 8, .45)); transition: transform .4s var(--ease), border-color .3s; }
.hv-pil:hover { transform: translateY(-4px); border-color: var(--dong); }
.hv-pic { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 16px; padding: 8px; border-radius: 18px; color: var(--dong2); background: rgba(232, 176, 79, .1); border: 1px solid rgba(232, 176, 79, .38); }
.hv-pic svg, .hv-pic img { width: 100%; height: 100%; object-fit: contain; }
.hv-pil p { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dong); }
.hv-pil h3 { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; }
/* lục bát: mỗi câu một dòng, cỡ chữ theo bề ngang CHÍNH ô (cqi) nên không bao giờ tràn khung; ô quá hẹp thì cho xuống dòng */
.hv-pil { container-type: inline-size; }
.hv-tho { font-size: clamp(14px, 4.5cqi, 19.5px) !important; font-style: italic; font-weight: 700; line-height: 1.55 !important; letter-spacing: -.005em; overflow-wrap: anywhere; }
.hv-tho span { display: block; text-wrap: balance; }
.hv-tho span:first-child { color: #ffe9b8; }
.hv-tho span:last-child { padding-left: .8em; }             /* câu 8 thụt vào như trình bày thơ */
.hv-rib { margin-top: 74px; padding: 17px 0; overflow: hidden; background: linear-gradient(90deg, #7d1218, #b3202a 50%, #7d1218); border-block: 1px solid rgba(255, 217, 138, .55);
  box-shadow: 0 0 46px -10px rgba(179, 32, 42, .85); transform: rotate(-1.2deg) scale(1.03); }
.hv-rib-t { display: flex; align-items: center; gap: 26px; width: max-content; animation: marquee 90s linear infinite; }
.hv-rib span { font-size: 18px; font-weight: 700; white-space: nowrap; color: #ffe9b8; }
.hv-rib i { display: grid; width: 26px; height: 26px; }
.hv-rib svg { width: 100%; height: 100%; }
.hv-o { padding-top: 100px; }
.hv-o .hv-rib { margin-top: 64px; }
.ftr-pride { margin: 16px 0 8px !important; font-size: 17px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 960px) {
  .hv-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hv-art { width: min(100%, 360px); }
  .hv-pils { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
}
@media (max-width: 600px) {
  .hv { padding-top: 80px; }
  .hv-q { padding: 18px 18px 14px 50px; }
  .hv-qm { left: 12px; font-size: 64px; }
  .hv-rib { margin-top: 50px; padding: 13px 0; }
  .hv-rib span { font-size: 15px; }
  .hero-eye::after { width: 60px; left: -30px; }
  .hv-embers i { width: 4px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) { .dragon-cv { display: none; } }

/* 03/10 tối – tiêu đề Hồn Việt: mỗi câu MỘT dòng, cỡ chữ theo bề ngang cột chữ (cqi) → 3 dòng luôn cân, không dòng nào rớt chữ */
.hv-txt { container-type: inline-size; min-width: 0; }
.hv-h { font-size: clamp(30px, 4.4vw, 70px); font-size: clamp(28px, 10.6cqi, 78px); }
.hv-h .hv-l { display: block; width: fit-content; white-space: nowrap; }

/* TRỐNG ĐỒNG GÕ ĐƯỢC (anh Long: "thiết kế sao để còn tương tác được") – nghiêng 3D theo con trỏ, nảy khi gõ, sóng lan từ chỗ gõ */
.js-trong { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease); }
.js-trong:focus-visible .hv-drum { outline: 3px solid rgba(255, 217, 138, .75); outline-offset: 6px; border-radius: 50%; }
.hv-tap { position: absolute; z-index: 8; left: 50%; bottom: -1%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; pointer-events: none;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #ffe3a0; background: rgba(20, 8, 6, .76); border: 1px solid rgba(232, 176, 79, .5);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .8); transform: translateX(-50%); transition: transform .3s var(--ease), border-color .3s; }
.hv-tap i { width: 8px; height: 8px; border-radius: 50%; background: #ffd98a; animation: tapPing 1.6s ease-out infinite; }
@keyframes tapPing { 0% { box-shadow: 0 0 0 0 rgba(255, 217, 138, .75); } 100% { box-shadow: 0 0 0 11px rgba(255, 217, 138, 0); } }
.js-trong:hover .hv-tap { transform: translateX(-50%) translateY(-4px); border-color: #ffd98a; }
.js-trong.hit .hv-drum { animation: hvHit .55s cubic-bezier(.2, .9, .3, 1); }
@keyframes hvHit { 15% { transform: scale(.94); filter: drop-shadow(0 0 110px rgba(255, 232, 170, 1)); } 50% { transform: scale(1.035); } }
.js-trong.hit .hv-dragon { animation: hvRoar .7s ease-out; }
.js-trong.hit .hv-eye::before { animation: eyeHit .8s ease-out; }
@keyframes eyeHit { 20% { transform: scale(2.6); opacity: 1; } }
.hv-hit { position: absolute; z-index: 6; width: 34%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 3px solid rgba(255, 228, 160, .95); box-shadow: 0 0 26px rgba(255, 190, 90, .85), inset 0 0 18px rgba(255, 190, 90, .5);
  transform: translate(-50%, -50%) scale(.1); animation: hvHitRing .95s cubic-bezier(.15, .7, .3, 1) forwards; }
.hv-hit.h2 { animation-delay: .14s; border-width: 2px; }
@keyframes hvHitRing { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); } }
.hv-spark { position: absolute; z-index: 7; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none;
  background: #fff3d0; box-shadow: 0 0 10px 3px rgba(255, 180, 80, .9); animation: hvSpark .95s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes hvSpark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
@media (prefers-reduced-motion: reduce) { .js-trong { transform: none; } }

/* 03/10 tối – DÙI TRỐNG: vung lên rồi đập đúng chỗ gõ (xoay quanh cán), nảy lại, nhấc đi */
.hv-mallet { position: absolute; z-index: 9; width: 30%; aspect-ratio: 1; pointer-events: none; opacity: 0; transform-origin: 92% 8%; transform: translate(-24%, -76%) rotate(-40deg); }
.hv-mallet svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.hv-mallet.go { animation: malletHit .7s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes malletHit {
  0% { opacity: 0; transform: translate(-24%, -76%) rotate(-42deg); }
  10% { opacity: 1; }
  28% { transform: translate(-24%, -76%) rotate(3deg); }
  40% { transform: translate(-24%, -76%) rotate(-4deg); }
  72% { opacity: 1; transform: translate(-24%, -76%) rotate(-26deg); }
  100% { opacity: 0; transform: translate(-24%, -76%) rotate(-40deg); }
}
/* tính năng ZeusVN Office nổi lên mỗi nhát trống */
.hv-feat { position: absolute; z-index: 10; left: 50%; top: 30%; width: max-content; max-width: 88%; padding: 9px 16px 10px; border-radius: 14px; pointer-events: none; text-align: center;
  background: linear-gradient(120deg, rgba(40, 12, 6, .92), rgba(70, 30, 8, .9)); border: 1px solid rgba(255, 217, 138, .7); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8), 0 0 26px rgba(232, 176, 79, .35);
  opacity: 0; transform: translate(-50%, calc(-100% + 12px)) scale(.92); }
.hv-feat small { display: block; margin-bottom: 2px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #ffd98a; }
.hv-feat b { display: block; font-size: clamp(14px, 1.25vw, 17px); font-weight: 700; line-height: 1.3; color: #fff4dc; text-wrap: balance; }
.hv-feat.on { animation: featIn 2.8s var(--ease) forwards; }
@keyframes featIn { 0% { opacity: 0; transform: translate(-50%, calc(-100% + 14px)) scale(.9); } 10% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) scale(1); } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 26px)) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .hv-mallet.go, .hv-feat.on { animation: none; opacity: 1; } }