/* ====== Base tokens ====== */
:root{
  --bg:#05080f; --text:#e5e7eb; --muted:#9ca3af;
  --panel:rgba(15,23,42,.6); --glass:rgba(17,24,39,.55);
  --border:rgba(255,255,255,.08);
  --primary:#60a5fa; --accent:#22d3ee; --glow:rgba(96,165,250,.35);
  --avatar-ring: rgba(255,255,255,.16);
}

/* ====== Themes ====== */
body[data-theme="dark"]{
  --bg:#05080f;
  --primary:#60a5fa; --accent:#22d3ee; --glow:rgba(96,165,250,.35);
  --avatar-ring: rgba(96,165,250,.45);
  background: radial-gradient(1200px 800px at 10% 10%, #0b1530 0%, #05080f 50%) fixed;
}
body[data-theme="neon"]{
  --bg:#03060f;
  --primary:#a78bfa; --accent:#22d3ee; --glow:rgba(167,139,250,.35);
  --avatar-ring: rgba(167,139,250,.55);
  background: radial-gradient(1200px 800px at 15% 15%, #0c0a2a 0%, #03060f 55%) fixed;
}
body[data-theme="pastel"]{
  --bg:#0a0d14;
  --primary:#93c5fd; --accent:#a7f3d0; --glow:rgba(147,197,253,.30);
  --avatar-ring: rgba(147,197,253,.50);
  background: radial-gradient(1200px 800px at 20% 20%, #10223f 0%, #0a0d14 55%) fixed;
}
body[data-theme="cyberpunk"]{
  --bg:#0a0012;
  --primary:#ff3df5; --accent:#ffe600; --glow:rgba(255,61,245,.35);
  --avatar-ring: rgba(255,61,245,.6);
  background: radial-gradient(1200px 800px at 18% 12%, #1b0030 0%, #0a0012 55%) fixed;
}
body[data-theme="retro"]{
  --bg:#0b110f;
  --primary:#ffb86c; --accent:#50fa7b; --glow:rgba(255,184,108,.30);
  --avatar-ring: rgba(255,184,108,.55);
  background: radial-gradient(1200px 800px at 12% 18%, #1c2a24 0%, #0b110f 55%) fixed;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color:var(--text);
  overflow:hidden;
  cursor:auto; /* chỉ ẩn khi hiệu ứng chuột sẵn sàng */
  transition: background .4s ease, color .25s ease;
}
body.cursorfx-on{ cursor:none; }

/* Video BG */
.bgvid{ position:fixed; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-3; filter:saturate(1.1) contrast(1.05) brightness(.9); }
.overlay{
  position:fixed; inset:0; z-index:-2;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none;
}
.noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="n"><feTurbulence baseFrequency="0.7" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.03"/></svg>');
  opacity:.2; mix-blend-mode:overlay;
}

/* Card */
.wrap{position:relative; height:100%; display:grid; place-items:center; padding:16px}
.card{
  width:min(92vw,520px); /* fallback for older browsers */
  inline-size:min(92vw,520px);
  padding:28px 22px; border-radius:20px;
  background:var(--glass); border:1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: pop .5s ease-out;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease,
              transform .25s ease;
}
@keyframes pop{from{transform:translateY(6px) scale(.98); opacity:0} to{transform:none; opacity:1}}

.name{margin:0; text-align:center; font-size:28px; letter-spacing:.3px; display:flex; gap:8px; align-items:center; justify-content:center}
.bio{margin:6px 0 8px; text-align:center; color:var(--muted)}
.quote{margin:0 0 8px; text-align:center; color:var(--text); opacity:.9; font-style:italic; transition: opacity .3s ease}

/* Role badge row under name */
.role-badge{ display:flex; justify-content:center; margin-top:6px; }
.role-badge .badge{ font-size:12px; }

/* ===== Badge ===== */
.badge{
  display:inline-block; padding:3px 8px; font-size:11px; border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color:#0b1020; font-weight:600; box-shadow:0 6px 18px -8px var(--glow);
}
.badge.small{ font-size:10px; padding:2px 6px; background: rgba(255,255,255,.85); color:#111 }

/* ===== Avatar ===== */
.avatar-wrap{
  position: relative;
  width: 140px; height: 140px; margin: 0 auto 12px;
  border-radius: 50%;
  padding: 3px;
  background: radial-gradient(closest-side, var(--avatar-ring), rgba(255,255,255,.02));
  box-shadow: 0 16px 48px -20px var(--avatar-ring), 0 0 0 1px rgba(255,255,255,.06) inset;
  overflow: visible;
  transform-origin: 50% 40%;
  transition: transform .25s ease, box-shadow .35s ease, background .35s ease, filter .35s ease;
}
.hover-anim:hover{ transform: translateY(-2px) scale(1.03) rotate(-1deg); filter: saturate(1.05) }
.avatar{
  position: absolute; top: 3px; left: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  border-radius: 50%; object-fit: cover;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
}
.avatar-deco{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:50%; pointer-events:none; user-select:none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}
/* Ripple avatar */
.avatar-ripple{
  position:absolute; inset:-10px; border-radius:50%;
  pointer-events:none; opacity:0;
  box-shadow: 0 0 0 0 rgba(255,255,255,.20), 0 0 0 0 var(--avatar-ring);
  animation: none;
}
.avatar-wrap:hover .avatar-ripple{ animation: ripple 1.8s ease-out infinite; }
@keyframes ripple{
  0%{ opacity:.6; box-shadow: 0 0 0 0 rgba(255,255,255,.20), 0 0 0 0 var(--avatar-ring) }
  70%{ opacity:0; box-shadow: 0 0 0 20px rgba(255,255,255,0), 0 0 0 40px rgba(255,255,255,0) }
  100%{ opacity:0 }
}

/* ===== Links ===== */
.links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:12px; }
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; height:36px; line-height:1;
  border-radius:999px; font-size:13px; text-decoration:none; color:#fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, filter .25s ease;
  will-change: transform;
}
.btn .ico{width:18px; height:18px; display:grid; place-items:center}
.btn .ico svg{width:18px; height:18px; fill:#fff; opacity:.9}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 12px 30px -16px var(--glow);
  filter: saturate(1.05);
}
.btn-discord { border-color: rgba(88,101,242,.35); }
.btn-tiktok  { border-color: rgba(0,242,234,.30); }
.btn-youtube { border-color: rgba(255,0,0,.30); }
.btn-gallery { border-color: rgba(255,255,255,.20); }

/* Tooltip */
.btn[data-tip]::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  background: rgba(15,23,42,.9);
  color:#e5e7eb; font-size:12px; padding:6px 8px; border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn[data-tip]:hover::after{ opacity:1; transform: translateX(-50%) translateY(0); }

.foot{ margin-top:12px; text-align:center; font-size:12px; color:var(--muted); }

/* ===== Canvas layers ===== */
.fx{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.fx-snow{ z-index:-1; }
.fx-cursor{ z-index:20; }

/* ===== Hiệu ứng tên đang cháy ===== */
.name.fire{
  position:relative;
  text-shadow:
    0 0 6px rgba(255,130,40,.55),
    0 0 12px rgba(255,90,10,.45),
    0 2px 4px rgba(0,0,0,.55);
  animation: flameFlicker 1.3s ease-in-out infinite;
}
.name.fire::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;
  width:160px; height:30px;
  background:
    radial-gradient(60% 90% at 50% 100%, rgba(255,180,0,.35), rgba(255,80,0,0) 70%),
    radial-gradient(40% 70% at 30% 100%, rgba(255,120,0,.25), rgba(255,80,0,0) 72%),
    radial-gradient(40% 70% at 70% 100%, rgba(255,120,0,.25), rgba(255,80,0,0) 72%);
  filter: blur(6px) saturate(1.15);
  animation: firePulse 1.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flameFlicker{
  0%,100%{ filter:brightness(1) }
  45%{ filter:brightness(1.15) }
  65%{ filter:brightness(1.05) }
}
@keyframes firePulse{
  0%,100%{ opacity:.45; transform:translateX(-50%) translateY(0) }
  50%{ opacity:.9; transform:translateX(-50%) translateY(-2px) }
}

/* ===== Trình phát nhạc (giữ size nút, gộp 4 nút mượt) ===== */
.audio-player{
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  padding:6px; border-radius:999px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.audio-player .btns{ display:flex; align-items:center; gap:10px; }
.audio-btn,
.audio-toggle{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    transform .28s cubic-bezier(.22,.7,.23,1),
    margin .28s cubic-bezier(.22,.7,.23,1),
    opacity .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.audio-btn:hover, .audio-toggle:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 12px 30px -18px var(--glow);
}

/* Mặc định: chỉ nút tròn nhỏ */
.audio-player.compact .btns .audio-btn:not(.audio-toggle),
.audio-player.compact .nowplaying {
  display: none;
}
.audio-player.compact {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  transition: all .45s cubic-bezier(0.65, 0, 0.076, 1);
}

/* Hover/Open: bung ra + neon glow */
.audio-player.compact:hover,
.audio-player.compact.open {
  width: auto;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(96,165,250,0.6), 0 0 24px rgba(34,211,238,0.4);
}

/* Nội dung bung ra với soft fade */
.audio-player.compact:hover .btns .audio-btn:not(.audio-toggle),
.audio-player.compact.open .btns .audio-btn:not(.audio-toggle),
.audio-player.compact:hover .nowplaying,
.audio-player.compact.open .nowplaying {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  animation: softFadeIn .35s ease forwards;
}

@keyframes softFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* Now playing luôn hiển thị, không bị thu gọn */
.nowplaying{
  max-width: 40vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:12px; color:#e5e7eb; padding:8px 10px; border-radius:999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}

/* Icon EQ / Loading trong nút Play/Pause */
.audio-toggle .pp{ font-size:14px; line-height:1; display:none; }
.audio-toggle .eq{ display:grid; grid-auto-flow:column; gap:2px; align-items:end; height:14px; }
.audio-toggle .eq i{
  width:3px; background:#fff; opacity:.9; height:6px; border-radius:2px;
  animation: eq 1s ease-in-out infinite;
}
.audio-toggle .eq i:nth-child(2){ animation-delay:.15s }
.audio-toggle .eq i:nth-child(3){ animation-delay:.30s }
@keyframes eq{ 0%,100%{ height:6px; opacity:.6 } 50%{ height:14px; opacity:1 } }
.audio-toggle .loading{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; display:none;
  animation: spin 1s linear infinite;
}
.audio-toggle.loading .loading{ display:block }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* ===== Nút + Panel Cài đặt ===== */
.settings-toggle{
  position: fixed;
  right: 16px;   /* chuyển sang bên phải */
  top: 16px;     /* đưa lên trên */
  z-index: 70;   /* ngang tầm home-btn */
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06); color:#fff;
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  display:grid; place-items:center; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.settings-toggle:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 12px 30px -18px var(--glow);
}

.settings-panel{
  position: fixed;
  right: 16px;
  top: 70px;
  z-index: 70;
  min-width: 280px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(17,24,39,.82);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform: translateY(-8px);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.settings-panel.open{ opacity:1; transform: translateY(0); pointer-events:auto; }

.settings-panel.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
.settings-panel .group{ display:grid; gap:6px; margin:8px 4px; }
.settings-panel label{ font-size:12px; color:#cbd5e1; }
.settings-panel select{
  appearance:none; width:100%;
  padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,0.06); color:#fff; outline:none;
}
.settings-panel .share .share-row{ display:flex; gap:8px; flex-wrap:wrap }
.mini-btn{
  height:32px; padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color:#fff; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mini-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 12px 30px -18px var(--glow);
}
.qr-wrap{ margin-top:8px; display:grid; place-items:center; }
.qr-wrap img{ width:160px; height:160px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:#fff; }

/* Tắt hiệu ứng nặng khi user chọn reduce motion, nhưng KHÔNG tắt video */
@media (prefers-reduced-motion: reduce){
  .fx { display:none }
}

/* ---- KHÔNG CẮT DECO ---- */
:root{ --deco-grow: 8px; }
.avatar{ position: relative; z-index: 1; }
.avatar-deco{
  position: absolute; z-index: 2;
  top: calc(-1 * var(--deco-grow));
  left: calc(-1 * var(--deco-grow));
  width: calc(100% + (var(--deco-grow) * 2));
  height: calc(100% + (var(--deco-grow) * 2));
  border-radius: 50%;
  pointer-events: none;
}

/* ===== Click-to-View Gate ===== */
.gate{
  position: fixed; inset: 0; z-index: 99;
  display: grid; place-items: center;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(15,23,42,.85), rgba(5,8,15,.92));
  backdrop-filter: blur(6px);
  cursor: pointer;
  animation: gateIn .35s ease-out;
}
.gate .panel{
  max-width: 560px; text-align: center; padding: 28px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.gate h2{ margin:0 0 8px; font-size: 28px; }
.gate p{ margin:0 0 10px; color: var(--muted); }
.gate .hint{ font-size: 12px; color: #cbd5e1; opacity:.9 }
.gate.hide{ animation: gateOut .35s ease forwards; }
@keyframes gateIn{ from{ opacity:0; transform: translateY(6px) scale(.98) } to{ opacity:1; transform:none } }
@keyframes gateOut{ to{ opacity:0; visibility:hidden } }

/* Avatar "pop" khi vừa vào */
body.entered .avatar-wrap{ animation: avatarPop .6s cubic-bezier(.2,.7,.2,1) .1s both; }
@keyframes avatarPop{
  from{ transform: scale(.92); filter: blur(2px); opacity:.7 }
  to  { transform: scale(1);   filter: blur(0);   opacity:1 }
}

/* ===== Select rõ hơn + dropdown tối ===== */
.settings-panel{ z-index: 50; }
.settings-panel select{
  appearance: none;
  background-color: rgba(17,24,39,.92); color:#e5e7eb;
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6) inset;
  outline: none; padding-right: 34px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23e5e7eb" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat; background-position: right 10px center;
}
.settings-panel select:focus{
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(96,165,250,.30);
}
.settings-panel label{ color:#e2e8f0; }
.settings-panel, .settings-panel select{ color-scheme: dark; }

/* Hint lướt ngang: ẩn trên desktop */
.links-hint{ display:none; }

/* Mobile: scroll ngang links + mask fade + hint */
@media (max-width: 520px){
  .links{ 
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; 
    padding-bottom: 6px; position:relative;
    /* mask fade hai bên: mượt, không bị “lộ” */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
  }
  .links::-webkit-scrollbar{ display:none; }

  .links-hint{
    display:block;
    text-align:center; margin-top:4px; font-size:11px; color:var(--muted);
    animation: hintBounce 1.5s infinite;
  }
  @keyframes hintBounce{
    0%,100%{ transform:translateY(0); opacity:.85 }
    50%{ transform:translateY(-3px); opacity:1 }
  }

  /* Player: bố cục thân thiện mobile, luôn thấy Now Playing */
  .audio-player{
    left: 8px; right: 8px;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    justify-content:center; gap:10px; flex-wrap: wrap;
  }
  .audio-btn, .audio-toggle{ width: 42px; height: 42px; }
  .nowplaying{
    order: 3; width:100%; text-align:center; max-width:100%;
    font-size:11px; padding:6px 10px; margin-top:2px;
  }
  .settings-toggle{ bottom: calc(env(safe-area-inset-bottom) + 70px); }
  .settings-panel{ bottom: calc(env(safe-area-inset-bottom) + 120px); }

  /* Lightbox full màn hình */
  .lightbox{
    position: fixed; inset:0; z-index: 80;
    padding: 0;
  }
  .modal-close{ z-index: 90; }
  .lightbox img{
    width: min(92vw, 720px);
    height: auto;
    max-height: 82vh;
  }
}

/* ===== Modal (Gallery & Game) ===== */
.modal{
  position: fixed; inset:0; z-index: 60; display:none;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  align-items:center; justify-content:center; padding:16px;
}
.modal.open{ display:flex; }
.modal-content{
  position: relative;
  width:min(92vw, 720px); max-height: 86vh; overflow:auto;
  background: rgba(17,24,39,.92); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.modal-content h3{ margin:6px 0 12px }
.modal-close{
  position:absolute; right:22px; top:20px; border:none;
  background: rgba(255,255,255,.08); color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  z-index: 3;
}
.gallery-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px;
}
.gallery-grid img{
  width:100%; height:120px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  cursor:pointer; transition: transform .15s ease, box-shadow .2s ease;
}
.gallery-grid img:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -16px var(--glow); }

/* Lightbox */
.lightbox{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(0,0,0,.6);
  z-index: 2;
}
.lightbox[hidden]{ display: none !important; }
.lightbox img{ max-width:90vw; max-height:80vh; border-radius:12px; border:1px solid rgba(255,255,255,.2); }

/* Mini game */
.modal-content.game{ display:grid; gap:10px; place-items:center; text-align:center }
.game-btn{ font-size:16px; height:40px; }

/* Utility */
.hidden{ display:none !important }

/* ===================== BỔ SUNG (Home Btn, Name FX mới, Marquee, Tilt) ===================== */

/* Nút Trang chủ trong suốt (trái trên) */
.home-btn{
  position: fixed;
  left: calc(env(safe-area-inset-left) + 12px);
  top:  calc(env(safe-area-inset-top) + 12px);
  z-index: 70;
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center; text-decoration: none;
  color: #fff; font-size: 18px; line-height: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.home-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 12px 30px -18px var(--glow);
}
.home-btn:active{ transform: translateY(0); opacity: .9; }

/* Tăng chiều sâu để tilt mượt */
.wrap{ perspective: 1200px; }

/* Hiệu ứng tên: Neon & Điện chạy quanh */
.name{ position:relative; display:block; text-align:center; }
.name.neon{
  text-shadow:
    0 0 4px var(--primary),
    0 0 10px var(--primary),
    0 0 22px var(--accent),
    0 2px 4px rgba(0,0,0,.55);
  animation: neonPulse 1.6s ease-in-out infinite;
}
@keyframes neonPulse{
  0%,100%{ filter:brightness(1) saturate(1) }
  50%{ filter:brightness(1.15) saturate(1.1) }
}

.name.electric{
  color: transparent;
  -webkit-text-fill-color: transparent; /* fix WebKit text rendering */
  background-image: linear-gradient(90deg, #fff, var(--accent), #fff, var(--primary), #fff);
  background-size: 400% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  filter:
    drop-shadow(0 0 6px rgba(34,211,238,.55))
    drop-shadow(0 0 14px rgba(96,165,250,.30));
  will-change: background-position;
  animation: electricMove 2.2s linear infinite; /* remove flicker for stability */
  /* ensure stable rendering and correct pseudo-element anchoring */
  position: relative;
  display: block; /* keep as block to preserve centering via text-align */
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: paint;
}
@keyframes electricMove{
  0%{ background-position: 0% 50% }
  100%{ background-position: 200% 50% }
}
@keyframes electricFlicker{
  0%,19%,22%,100%{ opacity: 1 }
  20%,21%{ opacity: .92 } /* subtle, avoid harsh blink */
}
.name.electric::after{
  display: none; /* hide running underline */
}
@keyframes elecDash{
  0%{ background-position: 0 0 }
  100%{ background-position: 200px 0 }
}

/* Respect reduced motion: stop animations */
@media (prefers-reduced-motion: reduce){
  .name.electric{
    animation: none;
    background-position: 50% 50%;
  }
  .name.electric::after{
    animation: none;
  }
}

/* “Đang phát” marquee mượt khi dài */
.nowplaying{ position: relative; }
.nowplaying.marquee{ 
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
          mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}
.nowplaying .np-inner{
  display: inline-flex;
  gap: 22px;
  will-change: transform;
  animation: np-marquee 14s linear infinite;
}
@keyframes np-marquee{
  from{ transform: translateX(0) }
  to  { transform: translateX(-50%) }
}

/* Tôn trọng reduce-motion */
@media (prefers-reduced-motion: reduce){
  .nowplaying .np-inner{ animation: none }
  .name.neon, .name.electric, .name.fire::after{ animation: none }
}

/* Lật/ghiêng thẻ nhẹ khi rê chuột */
.card.is-tilting{ transition: transform .06s linear }