/* NhacVibe - mobile-first, giao diện trình nghe nhạc hiện đại (tối mặc định, có chế độ sáng) */
:root {
  --bg: #0b0b12; --bg2: #11111b; --surface: #171724; --surface2: #202033; --line: rgba(255,255,255,.08);
  --text: #f4f4f8; --muted: #9b9bb2; --accent: #a78bfa; --accent2: #ec4899; --accent3: #f59e0b;
  --grad: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b);
  --art: 139, 92, 246;            /* màu chủ đạo của ảnh bìa (JS cập nhật), dùng cho vầng sáng */
  --r: 14px; --top: 56px; --tab: 58px; --mini: 66px; --side: 0px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
[data-theme="light"] .topbar { background: rgba(247,247,252,.9); }
[data-theme="light"] .tabbar { background: rgba(255,255,255,.95); }
[data-theme="light"] .mini { background-color: #eeeef8; }
[data-theme="light"] {
  --bg: #f7f7fc; --bg2: #ffffff; --surface: #ffffff; --surface2: #eeeef8; --line: rgba(20,20,45,.1);
  --text: #15151f; --muted: #63637b; --accent: #7c3aed; color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: calc(var(--top) + var(--sat)) 0 calc(var(--tab) + var(--sab) + 12px); min-height: 100vh; min-height: 100dvh;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
body.has-mini { padding-bottom: calc(var(--tab) + var(--mini) + var(--sab) + 12px); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--surface2); padding: 8px 12px; border-radius: 8px; }
.ic { width: 24px; height: 24px; flex: none; fill: currentColor; }
.ic.big { width: 56px; height: 56px; opacity: .5; }
.ic.accent { color: var(--accent3); }
.muted { color: var(--muted); }

/* ---------- thanh trên ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(var(--top) + var(--sat)); padding: var(--sat) 12px 0 calc(12px + var(--side));
  display: flex; align-items: center; gap: 10px; background: rgba(11,11,18,.88); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.3px; flex: none; }
.brand .logo { width: 32px; height: 32px; }
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.search { position: relative; flex: 1; max-width: 640px; margin: 0 auto; display: flex; align-items: center; }
.search input {
  width: 100%; height: 40px; padding: 0 44px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; appearance: none; -webkit-appearance: none;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(167,139,250,.25); }
.search .icon-btn { position: absolute; right: 2px; top: 2px; width: 36px; height: 36px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; flex: none; transition: background .15s, transform .1s; }
.icon-btn:hover { background: var(--surface2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.on { color: var(--accent); }

/* ---------- điều hướng đáy (mobile) / thanh bên (desktop) ---------- */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 40; height: calc(var(--tab) + var(--sab)); padding-bottom: var(--sab); display: flex; background: rgba(17,17,27,.95); background: color-mix(in srgb, var(--bg2) 90%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); transition: color .15s; }
.tabbar a.active { color: var(--text); }
.tabbar a.active .ic { color: var(--accent); }

#app { padding: 14px 14px 0; max-width: 1280px; margin: 0 auto; outline: none; }
.page-progress { position: fixed; top: calc(var(--top) + var(--sat)); left: 0; height: 2px; width: 0; background: var(--grad); z-index: 60; transition: width .3s ease, opacity .3s; }

/* ---------- tiêu đề, chip, nút ---------- */
.h { font-size: 19px; margin: 22px 0 12px; font-weight: 750; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.h .ic { width: 22px; height: 22px; }
.lead { color: var(--muted); font-size: 16px; margin: 8px 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; scroll-snap-type: x proximity; scroll-padding-inline: 14px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; white-space: nowrap; scroll-snap-align: start; transition: background .15s, transform .1s; }
.chip:hover { background: var(--surface2); }
.chip:active { transform: scale(.96); }
.chip.hue { background: linear-gradient(135deg, hsla(var(--h), 80%, 55%, .28), hsla(calc(var(--h) + 40), 80%, 55%, .12)); border-color: hsla(var(--h), 80%, 60%, .35); }
.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; border: 1px solid var(--line); background: var(--surface2); color: var(--text); padding: 10px 18px; border-radius: 999px; font-weight: 600; }
.btn.primary { background: var(--grad); border: 0; color: #fff; box-shadow: 0 6px 20px rgba(236,72,153,.3); }
.btn.ghost { background: transparent; }
.btn.big { padding: 14px 26px; font-size: 16px; }
.btn .ic { width: 20px; height: 20px; }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); display: grid; gap: 12px; justify-items: center; }
.note { color: var(--muted); font-size: 13px; margin-top: 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coll-head { padding: 22px 18px; border-radius: var(--r); background: linear-gradient(135deg, hsla(var(--h), 80%, 55%, .45), hsla(calc(var(--h) + 50), 85%, 55%, .15)); margin-bottom: 14px; }
.coll-head h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.5px; }
.coll-head p { margin: 0; color: var(--text); opacity: .85; }

/* ---------- trang chủ ---------- */
.hero { padding: 28px 18px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,.35), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(245,158,11,.25), transparent 55%), var(--surface); border: 1px solid var(--line); }
.hero h1 { margin: 0; font-size: clamp(26px, 6vw, 40px); line-height: 1.1; letter-spacing: -1px; }
.perks { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 0; margin: 0; font-size: 13.5px; color: var(--muted); }
.perks li { display: flex; align-items: center; gap: 6px; }
.perks .ic { width: 18px; height: 18px; color: var(--accent); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--muted); margin: 8px 0 0; }

/* ---------- thẻ bài hát ---------- */
ul.list, ul.grid, ul.rail { list-style: none; margin: 0; padding: 0; }
ul.list { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }   /* cột co được: nội dung nowrap không đẩy rộng quá màn hình */
ul.grid { display: grid; gap: 14px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { position: relative; min-width: 0; border-radius: 12px; display: flex; align-items: center; content-visibility: auto; contain-intrinsic-size: auto 84px; }
.card-main { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; padding: 6px; border-radius: 12px; transition: background .15s; }
.card-main:hover { background: var(--surface); }
.thumb { position: relative; flex: none; width: 124px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dur { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.78); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 5px; }
.playglyph { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .15s; color: #fff; }
.playglyph .ic { width: 34px; height: 34px; }
.card-main:hover .playglyph { opacity: 1; }
.prog { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: var(--grad); }
.meta { display: grid; gap: 2px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reason { font-size: 11px; font-weight: 600; color: var(--accent); }
.reason.r-co { color: var(--accent3); } .reason.r-taste { color: var(--accent2); }
:is(.grid, .rail) .card { flex-direction: column; align-items: stretch; }
:is(.grid, .rail) .card-main { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; }
:is(.grid, .rail) .card-main:hover { background: transparent; }
:is(.grid, .rail) .thumb { width: 100%; }
:is(.grid, .rail) .card-act { position: absolute; right: 2px; bottom: 28px; background: rgba(0,0,0,.45); color: #fff; width: 32px; height: 32px; }
.card-act { color: var(--muted); }
.card.is-current .title { color: var(--accent); }
.card.is-current .thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.eq { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: none; gap: 2px; align-items: flex-end; height: 14px; }
.card.is-current .eq { display: flex; }
.eq i { width: 3px; background: #fff; border-radius: 2px; height: 100%; transform-origin: bottom; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
body:not(.is-playing) .eq i { animation-play-state: paused; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------- trang phát ---------- */
.watch { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.watch-main, .watch-side { min-width: 0; }
.player-mount {
  position: relative; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  background-image: radial-gradient(90% 70% at 50% 0%, rgba(var(--art), .38), transparent 70%);
}
.stage { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; display: grid; place-items: center; }
.stage .art { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.stage .badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .4px; }
.stage .buffering { position: absolute; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.25); }
.is-loading .stage .buffering { display: grid; }
.unmute { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 16px; font-size: 14px; white-space: nowrap; background: var(--grad); color: #fff; font-weight: 700; box-shadow: 0 8px 26px rgba(0,0,0,.5); animation: pulse 1.6s ease-in-out infinite; }
.unmute[hidden] { display: none; }
.unmute .ic { width: 20px; height: 20px; }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.pm-fallback { display: none; }
.no-js .pm-fallback { display: grid; }
.controls { padding: 12px 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pm-title { display: none; }
.seek { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seek span:last-child { text-align: right; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 0; touch-action: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--accent2) var(--p, 0%), rgba(150,150,170,.35) var(--p, 0%)); background: linear-gradient(90deg, var(--accent2) var(--p, 0%), color-mix(in srgb, var(--text) 24%, transparent) var(--p, 0%)); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(150,150,170,.35); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--accent2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -4.5px; box-shadow: 0 1px 6px rgba(0,0,0,.5); transition: transform .12s; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.35); }
.transport { display: flex; align-items: center; justify-content: space-between; gap: 4px; max-width: 460px; margin: 0 auto; width: 100%; }
.transport .icon-btn { width: 44px; height: 44px; }
.transport .play { width: 64px; height: 64px; background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(236,72,153,.4); }
.transport .play .ic { width: 32px; height: 32px; }
.transport .play:hover { background: var(--grad); filter: brightness(1.08); }
.ios .vol { display: none; }
.info { padding: 0 2px; }
.watch-title { font-size: 19px; line-height: 1.3; margin: 4px 0 6px; letter-spacing: -.2px; }
.info .sub { white-space: normal; }
.info .sub a { color: var(--text); font-weight: 600; }
.desc { margin-top: 10px; background: var(--surface); border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); }
.desc summary { cursor: pointer; font-weight: 600; }
.desc p { color: var(--muted); overflow-wrap: anywhere; }
.tabs { display: flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: 999px; border: 1px solid var(--line); margin-bottom: 10px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 8px 12px; border-radius: 999px; font-weight: 600; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--surface2); color: var(--text); }
.tabpane[hidden] { display: none; }

/* trình phát toàn màn hình (video) */
.player-mount:fullscreen, .player-mount.pseudo-fs { background: #000; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
.player-mount.pseudo-fs { position: fixed; inset: 0; z-index: 80; }
.player-mount:fullscreen .stage, .player-mount.pseudo-fs .stage { aspect-ratio: auto; flex: 1; }
.player-mount:fullscreen .controls, .player-mount.pseudo-fs .controls { background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; padding-bottom: calc(14px + var(--sab)); transition: opacity .3s; }
.player-mount.hide-ui .controls { opacity: 0; pointer-events: none; }

/* ---------- mini player: xem khối 'Mini player' ở cuối file ---------- */

/* ---------- menu / sheet ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet { width: 100%; max-width: 520px; max-height: 82vh; overflow: auto; background: var(--surface); border-radius: 22px 22px 0 0; padding: 8px 8px calc(12px + var(--sab)); animation: up .2s ease-out; border: 1px solid var(--line); }
.sheet h3 { margin: 10px 12px 6px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; }
.sheet .grp { margin: 8px 12px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.sheet button.opt { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; padding: 12px; border-radius: 12px; font-size: 15px; }
.sheet button.opt:hover { background: var(--surface2); }
.sheet button.opt .ic { width: 20px; height: 20px; opacity: .8; }
.sheet button.opt .tick { margin-left: auto; color: var(--accent); }
.sheet button.opt small { color: var(--muted); margin-left: auto; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
#toast { position: fixed; left: 50%; bottom: calc(var(--tab) + var(--mini) + var(--sab) + 22px); transform: translateX(-50%) translateY(20px); z-index: 95; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- màn hình rộng ---------- */
@media (min-width: 700px) {
  ul.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .thumb { width: 168px; }
  #app { padding: 20px 24px 0; }
  .chips.scroll { margin: 0; padding: 2px 0; }
}
@media (min-width: 960px) {
  :root { --side: 220px; }
  body { padding-left: var(--side); padding-bottom: 12px; }
  body.has-mini { padding-bottom: calc(var(--mini) + 28px); }
  .topbar { left: 0; padding-left: 16px; }
  .tabbar { inset: calc(var(--top) + var(--sat)) auto 0 0; width: var(--side); height: auto; flex-direction: column; padding: 16px 12px; gap: 4px; border-top: 0; border-right: 1px solid var(--line); justify-content: flex-start; }
  .tabbar a { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 11px 14px; font-size: 15px; font-weight: 600; border-radius: 12px; }
  .tabbar a:hover { background: var(--surface); }
  .tabbar a.active { background: var(--surface2); }
  #toast { bottom: calc(var(--mini) + 36px); }
  .watch { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
  .watch-side { position: sticky; top: calc(var(--top) + 16px); }
  .lyrics { max-height: calc(100vh - 290px); }
  .sheet-back { align-items: center; }
  .sheet { border-radius: 22px; }
}
@media (min-width: 1280px) { .watch { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 480px) { .brand span { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }


/* =====================================================================
   Mobile polish, tương thích, loader, hiệu ứng vào trang
   ===================================================================== */
/* loader logo động (thay spinner) */
.loader { display: grid; place-items: center; margin: 18px auto; }
.loader img { display: block; }
.mini .loader { margin: 0; }
.buffering .loader { filter: drop-shadow(0 4px 18px rgba(0,0,0,.5)); }

/* cảm giác app: không giật khi chạm, không bôi đen/menu giữ lâu trên điều khiển, không kéo-để-tải-lại làm đứt nhạc */
html { overscroll-behavior-y: contain; }
a, button, .card-main, .chip, .tabs button, input[type="range"] { touch-action: manipulation; }
.controls, .tabbar, .mini, .actions, .transport, .seek, .chip, .tabs, .sheet { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card-main:active, .chip:active, .btn:active { background: var(--surface2); }
.tabbar a { position: relative; }
.tabbar a.active::before { content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 0 0 3px 3px; background: var(--grad); }
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 2px; }
.sheet { max-height: 82vh; max-height: 82dvh; overscroll-behavior: contain; }
@media (max-width: 699px) { body.typing .tabbar, body.typing .mini { display: none; } }   /* bàn phím ảo mở: không để thanh điều hướng nhảy lên che nội dung */

/* vùng an toàn ngang (tai thỏ khi xoay ngang) */
#app { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.topbar { padding-right: max(12px, env(safe-area-inset-right)); }
.tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* thanh điều khiển: nút co giãn vừa mọi bề rộng (320-430px) */
.transport .icon-btn { width: auto; flex: 1 1 0; max-width: 48px; height: 44px; }
.transport .play { flex: none; width: 64px; height: 64px; max-width: none; }

/* màn hình cảm ứng: vùng chạm >= 44px, thanh tua dễ kéo */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  input[type="range"] { height: 32px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 6px; }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; }
  input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
  .chip { padding: 10px 16px; }
  .card-main { padding: 8px 6px; }
}

/* trang phát trên điện thoại: khung hình tràn mép (cảm giác app), điều khiển rộng rãi */
@media (max-width: 699px) {
  .player-mount { margin: 0 calc(-1 * max(14px, env(safe-area-inset-left))); border-radius: 0 0 22px 22px; border-width: 0 0 1px; }
  .controls { padding: 12px 16px 16px; }
  .watch-title { font-size: 18px; }
  .hero { padding: 22px 16px; border-radius: 18px; }
}
/* điện thoại xoay ngang: hai cột như desktop, khung hình không chiếm hết chiều cao */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  :root { --top: 48px; --tab: 46px; }
  .watch { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .player-mount { margin: 0; border-radius: 16px; border-width: 1px; }
  .stage { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .tabbar a { flex-direction: row; gap: 6px; font-size: 12px; }
  .lyrics { max-height: 50vh; }
}

/* trình duyệt cũ chưa có aspect-ratio (iOS < 15) */
@supports not (aspect-ratio: 1) {
  .thumb { height: 0; padding-top: 56.25%; }
  .thumb img { position: absolute; inset: 0; }
  .stage { height: 0; padding-top: 56.25%; }
  .stage > * { position: absolute; inset: 0; }
}

/* hiệu ứng vào trang: sau màn hình chào (html.booting -> html.ready) và mỗi lần chuyển trang (#app.enter) */
.topbar, .tabbar, .mini { transition: opacity .55s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
#app { transition: opacity .55s ease; }
html.booting .topbar { opacity: 0; transform: translateY(-14px); }
html.booting .tabbar { opacity: 0; transform: translateY(18px); }
html.booting .mini { opacity: 0; }
html.booting #app { opacity: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
#app.enter :is(.home, .page, .watch) > * { animation: rise .55s cubic-bezier(.2,.7,.2,1) backwards; }
#app.enter :is(.home, .page, .watch) > :nth-child(2) { animation-delay: .06s; }
#app.enter :is(.home, .page, .watch) > :nth-child(3) { animation-delay: .12s; }
#app.enter :is(.home, .page, .watch) > :nth-child(4) { animation-delay: .18s; }
#app.enter :is(.home, .page, .watch) > :nth-child(n+5) { animation-delay: .24s; }
#app.enter :is(.home, .page) :is(.grid, .list, .rail) .card:nth-child(-n+8) { animation: rise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.1s + var(--i, 0) * 45ms); }
#app.enter .card:nth-child(1) { --i: 0; } #app.enter .card:nth-child(2) { --i: 1; } #app.enter .card:nth-child(3) { --i: 2; } #app.enter .card:nth-child(4) { --i: 3; }
#app.enter .card:nth-child(5) { --i: 4; } #app.enter .card:nth-child(6) { --i: 5; } #app.enter .card:nth-child(7) { --i: 6; } #app.enter .card:nth-child(8) { --i: 7; }


/* =====================================================================
   Mini player: điện thoại = thanh gọn; tablet = thẻ có tua; desktop = thanh đáy 3 cột (thông tin | điều khiển+tua | âm lượng)
   ===================================================================== */
.mini {
  position: fixed; z-index: 39; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--tab) + var(--sab) + 8px);
  height: var(--mini); display: flex; align-items: center; gap: 2px; padding: 0 6px 0 8px; border-radius: 16px; overflow: hidden;
  background-color: #202033; background-color: var(--surface2);
  background-image: linear-gradient(100deg, rgba(var(--art), .32), rgba(var(--art), 0) 70%);   /* ánh màu từ ảnh bìa bài đang phát */
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.4); cursor: pointer;
}
.mini[hidden] { display: none; }
.mini-info { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.mini-info img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.mini .mt { min-width: 0; display: grid; gap: 1px; }
.mini .mt b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .mt small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-center { display: flex; align-items: center; flex: none; }
.mini-btns { display: flex; align-items: center; gap: 2px; }
.mini .icon-btn { width: 40px; height: 40px; }
.m-play { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); transition: transform .12s; }
.m-play:active { transform: scale(.92); }
.m-play .ic { width: 26px; height: 26px; }
.m-prev, .mini-seek, .mini-right { display: none; }
.mini .bar { position: absolute; left: 0; top: 0; height: 2px; width: var(--p, 0%); background: var(--grad); pointer-events: none; }
.mini-seek { align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-seek span:first-child { min-width: 34px; text-align: right; }
.mini-seek span:last-child { min-width: 34px; }
.mini-seek input[type="range"], .mini-vol { height: 20px; }
.mini-seek input[type="range"]::-webkit-slider-thumb { opacity: 0; transition: opacity .15s; }
.mini-seek:hover input[type="range"]::-webkit-slider-thumb, .mini-seek input[type="range"]:active::-webkit-slider-thumb { opacity: 1; }
.mini-right { align-items: center; gap: 4px; justify-content: flex-end; }
.mini-vol { width: 80px; }
.ios .mini [data-m="mute"], .ios .mini-vol { display: none; }

@media (min-width: 700px) {   /* tablet: thẻ nổi có tua */
  :root { --mini: 68px; }
  .mini { left: 12px; right: 12px; max-width: 780px; margin: 0 auto; padding: 0 8px 0 10px; gap: 10px; }
  .m-prev, .mini-seek { display: flex; }
  .mini-right { display: flex; }
  .mini-vol, .mini [data-m="mute"] { display: none; }
  .mini .bar { display: none; }
  .mini-center { gap: 10px; }
  .mini-seek { width: clamp(150px, 26vw, 240px); }
}
@media (min-width: 960px) {   /* desktop: thẻ nổi căn giữa vùng nội dung, giới hạn chiều rộng cho gọn mắt */
  :root { --mini: 72px; }
  .mini { left: calc(var(--side) + 24px); right: 24px; bottom: 16px; width: auto; max-width: 880px; margin: 0 auto; height: var(--mini); border-radius: 18px; border-width: 1px; box-shadow: 0 14px 40px rgba(0,0,0,.45);
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 380px) minmax(176px, .7fr); gap: 16px; padding: 0 16px 0 12px; }
  .mini-info img { width: 52px; height: 52px; }
  .mini-center { flex-direction: column; gap: 0; width: 100%; }
  .mini-btns { gap: 6px; }
  .mini-seek { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .mini-vol { display: block; width: 72px; }
  .mini [data-m="mute"] { display: grid; }
}
@media (min-width: 1500px) { .mini { max-width: 960px; } }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) { :root { --mini: 56px; } .mini-info img { width: 40px; height: 40px; } }


/* tooltip mô tả nút biểu tượng */
.tooltip { position: fixed; z-index: 120; left: 0; top: 0; padding: 7px 11px; border-radius: 9px; background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 600; line-height: 1.35; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.tooltip[hidden] { display: none; }
.tooltip.show { opacity: 1; transform: none; }
.tooltip::after { content: ""; position: absolute; left: var(--ax, 50%); width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); }
.tooltip[data-pos="top"]::after { bottom: -3px; }
.tooltip[data-pos="bottom"]::after { top: -3px; }


/* chia sẻ */
.share-sheet { max-width: 480px; }
.share-preview { display: flex; gap: 12px; align-items: center; margin: 6px 12px 12px; padding: 10px; border-radius: 14px; background: var(--surface2); }
.share-preview img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }
.share-preview div { min-width: 0; display: grid; gap: 2px; }
.share-preview b { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.share-preview small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-link { display: flex; gap: 8px; margin: 0 12px; }
.share-link input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 14px; }
.share-link .btn { padding: 0 16px; height: 42px; white-space: nowrap; }
.share-time { display: flex; align-items: center; gap: 8px; margin: 12px 14px 0; font-size: 14px; color: var(--muted); cursor: pointer; }
.share-time input { width: 18px; height: 18px; accent-color: var(--accent2); }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 8px 6px; }
.share-grid button { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border: 0; background: none; border-radius: 12px; font-size: 12px; color: var(--text); }
.share-grid button:hover { background: var(--surface2); }
.share-grid i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 20px/1 system-ui, sans-serif; font-style: normal; }
.share-grid i .ic { width: 22px; height: 22px; }





/* thịnh hành */
.h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.more-link { color: var(--accent); font-weight: 600; font-size: 14px; white-space: nowrap; }
.trend-head h1 { margin: 6px 0 4px; font-size: 26px; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px; }
.trend-head h1 .ic { width: 28px; height: 28px; }
.trend-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 6px; }
.segs { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.seg { padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg.on { background: var(--surface2); color: var(--text); }
.small { font-size: 13px; margin: 6px 0 12px; }
.how { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.how summary { cursor: pointer; font-weight: 600; }
.how p { color: var(--muted); margin: 8px 0 0; }
.how b { color: var(--text); }
/* số hạng: hàng danh sách = cột số bên trái; ô lưới = nhãn trên ảnh */
.rank { flex: none; width: 34px; text-align: center; font-weight: 800; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank.top1 { color: #f59e0b; } .rank.top2 { color: #cbd5e1; } .rank.top3 { color: #d97706; }
.rank.top1, .rank.top2, .rank.top3 { font-size: 22px; }
:is(.grid, .rail) .rank { position: absolute; left: 6px; top: 6px; z-index: 2; width: auto; min-width: 26px; padding: 2px 8px; font-size: 13px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; }
:is(.grid, .rail) .rank.top1 { background: linear-gradient(135deg, #f59e0b, #ec4899); color: #fff; }
:is(.grid, .rail) .rank.top2, :is(.grid, .rail) .rank.top3 { font-size: 13px; color: #fff; }
.badges { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; min-width: 0; }
.badge-t { font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bt-up { color: #22c55e; background: rgba(34,197,94,.14); } .bt-down { color: #ef4444; background: rgba(239,68,68,.12); }
.bt-pos { color: var(--accent2); background: rgba(236,72,153,.13); } .bt-like { color: var(--accent3); background: rgba(245,158,11,.14); }
.bt-plays, .bt-top { color: var(--accent); background: rgba(139,92,246,.14); }


/* cài đặt ứng dụng: banner 2 hàng (nội dung / hành động), nút trên thanh trên, hướng dẫn, mũi tên chỉ nút Chia sẻ */
.install { position: fixed; z-index: 41; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: calc(var(--tab) + var(--sab) + 10px);
  max-width: 560px; margin: 0 auto; display: grid; gap: 10px; padding: 12px 10px 12px 14px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.5); transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.install.show { transform: none; opacity: 1; pointer-events: auto; }
body.has-mini .install { bottom: calc(var(--tab) + var(--mini) + var(--sab) + 18px); }
body.typing .install { display: none; }
.install-top { display: flex; align-items: center; gap: 12px; }
.install img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.install .txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.install .txt b { font-size: 14.5px; line-height: 1.25; }
.install .txt small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.install-top .icon-btn { width: 36px; height: 36px; color: var(--muted); align-self: flex-start; }
.install-acts { display: flex; gap: 8px; padding-right: 4px; }
.install-acts .btn { flex: 1; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
.install-acts .btn.primary { flex: 1.4; }
@media (min-width: 960px) { .install, .install-btn { display: none; } }
.install-btn { color: var(--accent); position: relative; }
.install-btn[hidden] { display: none; }
.install-btn::before, .install-btn::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); }
.install-btn::before { opacity: 0; animation: ping 1.8s ease-out 4; }   /* chỉ transform/opacity và hữu hạn: không đánh thức luồng chính mãi mãi */
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

.guide-sheet { max-width: 480px; }
.guide-hero { display: flex; align-items: center; gap: 12px; margin: 6px 12px 12px; padding: 12px; border-radius: 16px; background: var(--surface2); }
.guide-hero img { width: 52px; height: 52px; border-radius: 13px; flex: none; }
.guide-hero div { flex: 1; min-width: 0; display: grid; }
.guide-hero small { color: var(--muted); }
.guide-hero .btn { padding: 9px 16px; white-space: nowrap; }
.guide-warn { margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: rgba(245,158,11,.14); color: var(--text); font-size: 13.5px; display: grid; gap: 8px; justify-items: start; }
.guide-tabs { display: flex; margin: 0 12px 6px; }
.guide-tabs .seg { flex: 1; border: 0; background: none; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; }
.guide-tabs .seg.on { background: var(--surface2); color: var(--text); }
.steps { list-style: none; margin: 10px 12px 4px; padding: 0; display: grid; gap: 12px; }
.steps[hidden] { display: none; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 13px; margin-top: 1px; }
.steps div { font-size: 14.5px; line-height: 1.45; }
.steps small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.kbd { display: inline-grid; place-items: center; vertical-align: middle; width: 28px; height: 28px; margin: 0 2px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--line); }
.kbd .ic { width: 18px; height: 18px; }
.guide-perks { list-style: none; margin: 14px 12px 6px; padding: 12px; border-radius: 14px; background: var(--surface2); display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.guide-perks li { display: flex; align-items: center; gap: 10px; }
.guide-perks .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }

.share-hint { position: fixed; z-index: 95; left: 50%; display: grid; justify-items: center; gap: 0; pointer-events: none; color: #fff; font-weight: 700; font-size: 13px; }
.share-hint span { background: var(--grad); padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: nowrap; }
.share-hint .ic { width: 34px; height: 34px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); color: #ec4899; }
.share-hint.bottom { bottom: 6px; transform: translateX(-50%); animation: hintDown 1s ease-in-out infinite; }
.share-hint.top { top: 6px; left: auto; right: 10px; flex-direction: column-reverse; animation: hintUp 1s ease-in-out infinite; }
.share-hint.top .ic { transform: rotate(180deg); }
@keyframes hintDown { 50% { transform: translateX(-50%) translateY(8px); } }
@keyframes hintUp { 50% { transform: translateY(-8px); } }

.with-hint .guide-sheet { padding-bottom: 84px; }


/* ===== chế độ lái xe ===== */
.drive-promo { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.drive-promo > .ic { width: 30px; height: 30px; color: var(--accent); flex: none; }
.drive-promo div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.drive-promo small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.drive-promo .btn { padding: 8px 16px; white-space: nowrap; }
@media (max-width: 520px) { .drive-promo { flex-wrap: wrap; } .drive-promo .more-link { margin-left: auto; } }
.m-drive { color: var(--accent); }

.drive { position: fixed; inset: 0; z-index: 150; display: none; flex-direction: column; color: #fff; padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
  background: radial-gradient(130% 60% at 50% 0%, rgba(var(--art), .45), transparent 70%), #05050a; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.drive.show { display: flex; }
body.drive-on { overflow: hidden; }
.drive-top { display: flex; align-items: center; gap: 12px; }
.drive-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; }
.drive-badge .ic { width: 24px; height: 24px; color: #ec4899; }
.drive-help { margin-left: auto; color: rgba(255,255,255,.75); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px; }
.drive-x { width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.drive-x .ic { width: 30px; height: 30px; }
.drive-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 14px; text-align: center; }
.drive-now { display: grid; justify-items: center; gap: 16px; min-height: 0; }
.drive-art img { width: min(52vw, 30vh); height: min(52vw, 30vh); object-fit: cover; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #111; }
.drive-title { margin: 0; font-size: clamp(24px, 6.4vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.drive-artist { margin: 6px 0 0; font-size: clamp(17px, 4.4vw, 24px); color: rgba(255,255,255,.72); }
.drive-prog { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 16px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); }
.d-bar { height: 10px; border-radius: 5px; background: rgba(255,255,255,.2); overflow: hidden; }
.d-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b); }
.drive-ctl { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 6vw, 40px); margin: 14px 0 8px; }
.drive-ctl button { width: 96px; height: 96px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; transition: transform .1s; }
.drive-ctl button:active { transform: scale(.93); background: rgba(255,255,255,.26); }
.drive-ctl button .ic { width: 52px; height: 52px; }
.drive-ctl button.big { width: 140px; height: 140px; background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b); box-shadow: 0 14px 40px rgba(236,72,153,.45); }
.drive-ctl button.big .ic { width: 76px; height: 76px; }
.drive-swipe { margin: 0; font-size: 13px; color: rgba(255,255,255,.5); }
.drive-empty { display: grid; gap: 16px; justify-items: center; padding: 20px 8px; }
.drive-empty p { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.drive-cta-btn, .drive-empty .drive-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: min(100%, 420px); min-height: 84px; border: 0; border-radius: 22px; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b); }
.drive-empty .drive-cta.alt { background: rgba(255,255,255,.16); }
.drive-empty .drive-cta .ic { width: 32px; height: 32px; }
.drive-empty .drive-cta[hidden] { display: none; }
.drive-foot { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 13px; color: rgba(255,255,255,.55); }
.drive-foot p { margin: 0; }
.drive-awake { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; color: rgba(255,255,255,.8); }
.drive-awake input { width: 20px; height: 20px; accent-color: #ec4899; }
/* điện thoại gắn ngang trên xe: ảnh và tên bên trái, điều khiển bên phải */
@media (orientation: landscape) and (max-height: 520px) {
  .drive-body { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; text-align: left; }
  .drive-now { flex: 1; grid-template-columns: auto 1fr; align-items: center; gap: 20px; }
  .drive-art img { width: min(30vw, 56vh); height: min(30vw, 56vh); }
  .drive-title { font-size: clamp(20px, 3.4vw, 30px); -webkit-line-clamp: 4; }
  .drive-main { flex: 1; }
  .drive-ctl button { width: 84px; height: 84px; } .drive-ctl button.big { width: 112px; height: 112px; }
  .drive-foot p { display: none; }
}

/* trang hướng dẫn */
.guide-head { display: flex; align-items: center; gap: 12px; } .guide-head h1 { margin: 6px 0; font-size: 26px; letter-spacing: -.5px; } .guide-head .ic { width: 32px; height: 32px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.note-warn { margin: 6px 0 4px; padding: 12px 14px; border-radius: 14px; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.35); line-height: 1.5; }
.big-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.big-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.big-steps .n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; }
.big-steps p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.plain { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); line-height: 1.5; } .plain b, .plain li b { color: var(--text); }
.guide-page .how { margin-top: 10px; } .guide-page .how p { margin: 8px 0 0; }

.drive [hidden] { display: none !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .drive-now { flex: 1.2; }
  .drive-art img { width: min(24vw, 50vh); height: min(24vw, 50vh); }
  .drive-meta { min-width: 0; }
  .drive-title { font-size: clamp(20px, 3vw, 28px); }
  .drive-main { flex: 1; min-width: 0; }
  .drive-ctl { gap: 16px; }
}


/* kênh */
.segs { max-width: 100%; }
.ch-list { gap: 2px; }
.ch-card { list-style: none; }
.ch-main { display: flex; gap: 14px; align-items: center; padding: 8px 6px; border-radius: 14px; transition: background .15s; }
.ch-main:hover { background: var(--surface); }
.ch-main:active { background: var(--surface2); }
.ch-av { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--surface2); display: block; }
.ch-av.big { width: 88px; height: 88px; }
.ch-av.ph { display: grid; place-items: center; font-weight: 800; font-size: 24px; color: #fff; background: var(--grad); }
.ch-card .meta { min-width: 0; }
.ch-desc { color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-ok { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--muted); color: var(--bg); vertical-align: -2px; }
.ch-ok .ic { width: 11px; height: 11px; }
.ch-strip { margin-bottom: 4px; }
.page > .segs { margin: 4px 0 10px; }
.ch-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.ch-info { min-width: 0; flex: 1; }
.ch-info h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.4px; line-height: 1.2; overflow-wrap: anywhere; }
.ch-info .sub { white-space: normal; }
.ch-about { margin-top: 8px; }
.ch-about summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); }
.ch-about p { color: var(--muted); margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.ch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.ch-sort { margin-bottom: 10px; }
@media (max-width: 480px) { .ch-av.big { width: 72px; height: 72px; } .ch-info h1 { font-size: 20px; } .ch-av { width: 56px; height: 56px; } }


/* ===== chiếu lên TV ===== */
.cast-sheet { max-width: 480px; }
.cast-opt { width: calc(100% - 24px); margin: 6px 12px; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); }
.cast-opt:hover:not(:disabled) { border-color: var(--accent); }
.cast-opt:disabled { opacity: .5; }
.cast-opt i { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.cast-opt i .ic { width: 24px; height: 24px; }
.cast-opt span { display: grid; gap: 3px; min-width: 0; }
.cast-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cast-opt small b { color: var(--text); }
.cast-help { display: block; margin: 8px 14px 6px; padding: 10px 0; text-align: center; color: var(--accent); font-weight: 600; }

.tv { position: fixed; inset: 0; z-index: 160; display: none; color: #fff; background: radial-gradient(120% 70% at 30% 0%, rgba(var(--art), .42), transparent 70%), #04040a; cursor: default; user-select: none; -webkit-user-select: none; }
.tv.show { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: clamp(14px, 2.6vw, 44px); padding: clamp(16px, 3vw, 48px); }
body.tv-on { overflow: hidden; }
.tv-stage { display: grid; place-items: center; min-height: 0; min-width: 0; }
.tv-media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100%; border-radius: clamp(12px, 1.6vw, 24px); overflow: hidden; background: #000; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.tv-media .tv-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tv-side { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 36px); min-width: 0; min-height: 0; overflow: hidden; }
.tv-title { margin: 0; font-size: clamp(24px, 3.1vw, 54px); font-weight: 800; line-height: 1.15; letter-spacing: -.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv-artist { margin: 8px 0 0; font-size: clamp(16px, 1.8vw, 30px); color: rgba(255,255,255,.72); }
.tv-lyrics { display: grid; gap: clamp(8px, 1.6vh, 18px); font-size: clamp(18px, 2.2vw, 38px); font-weight: 700; line-height: 1.3; min-height: 0; overflow: hidden; }
.tv-lyrics .l { margin: 0; color: rgba(255,255,255,.38); overflow-wrap: anywhere; transition: color .25s; }
.tv-lyrics .l.cur { color: #fff; font-size: 1.22em; }
.tv-lyrics button.l { display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; padding: .2em .45em; border-radius: 14px; cursor: pointer; }
.tv-lyrics button.l:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.tv-lyrics button.l:focus { background: rgba(255,255,255,.95); color: #111; box-shadow: 0 0 0 4px #ec4899; outline: 0; }
.tv-lyrics .l.head { font-size: .62em; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.55); }
.tv-bottom { grid-column: 1 / -1; display: grid; gap: clamp(10px, 1.6vh, 18px); }
.tv-prog { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: clamp(6px, 1vh, 12px) clamp(10px, 1.2vw, 18px); border-radius: 16px; font-size: clamp(14px, 1.4vw, 22px); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); outline: 0; }
.t-bar { position: relative; height: clamp(8px, 1vh, 14px); border-radius: 8px; background: rgba(255,255,255,.22); }
.t-bar i { position: relative; display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b); }
.t-bar i::after { content: ""; position: absolute; right: calc(clamp(14px, 1.6vh, 22px) / -2); top: 50%; width: clamp(14px, 1.6vh, 22px); height: clamp(14px, 1.6vh, 22px); margin-top: calc(clamp(14px, 1.6vh, 22px) / -2); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
/* các nút điều khiển luôn hiện: icon + nhãn chữ, ô đang chọn (remote/phím mũi tên) có viền sáng và phóng to */
.tv-ctl { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 2vw, 28px); }
.tv-ctl button { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: clamp(56px, 7vw, 120px); padding: clamp(8px, 1.2vh, 14px) clamp(8px, 1vw, 16px); border: 0; border-radius: 22px;
  background: rgba(255,255,255,.12); color: #fff; font: 700 clamp(12px, 1.2vw, 20px)/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transition: transform .12s, background .12s; }
.tv-ctl button i { display: grid; place-items: center; font-style: normal; }
.tv-ctl button .ic { width: clamp(28px, 3.6vw, 56px); height: clamp(28px, 3.6vw, 56px); }
.tv-ctl button span { white-space: nowrap; }
.tv-ctl button.big { min-width: clamp(84px, 10vw, 150px); background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b); }
.tv-ctl button.big .ic { width: clamp(40px, 5vw, 76px); height: clamp(40px, 5vw, 76px); }
.tv-ctl button.exit { margin-left: clamp(8px, 3vw, 48px); background: rgba(255,255,255,.07); }
.tv-ctl button:hover { background: rgba(255,255,255,.24); }
.tv-ctl button.big:hover { background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b); filter: brightness(1.1); }
.tv button, .tv-prog { outline: 0; }
.tv-ctl button:focus, .tv-empty button:focus { background: #fff; color: #111; transform: scale(1.1); box-shadow: 0 0 0 4px #ec4899, 0 10px 30px rgba(236,72,153,.5); }
.tv-ctl button.big:focus { background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 5px #fff, 0 10px 34px rgba(236,72,153,.6); }
.tv-prog:focus { background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px #ec4899; }
.tv-hint { margin: 0; text-align: center; font-size: clamp(11px, 1vw, 16px); color: rgba(255,255,255,.6); }
@media (max-width: 640px) {   /* điện thoại chiếu màn hình: chỉ icon để đủ 6 nút trên một hàng */
  .tv-ctl { gap: 4px; }
  .tv-ctl button { min-width: 0; padding: 6px; border-radius: 50%; }
  .tv-ctl button span { display: none; }
  .tv-ctl button .ic { width: 24px; height: 24px; }
  .tv-ctl button.big { min-width: 0; padding: 10px; } .tv-ctl button.big .ic { width: 32px; height: 32px; }
  .tv-ctl button.exit { margin-left: 4px; }
}
@media (max-aspect-ratio: 1 / 1) { .tv.show { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .tv-media { max-height: 36vh; } }

.tv [hidden] { display: none !important; }
.tv.empty.show { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; }
.tv.empty .tv-stage, .tv.empty .tv-bottom, .tv.empty .tv-meta, .tv.empty .tv-lyrics { display: none; }
.tv-empty { display: grid; gap: 16px; justify-items: center; text-align: center; }
.tv-empty p { margin: 0 0 8px; font-size: clamp(22px, 3vw, 44px); font-weight: 800; }
.tv-empty button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: min(80vw, 420px); min-height: clamp(60px, 8vh, 84px); border: 0; border-radius: 20px; font-size: clamp(18px, 2vw, 28px); font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b); }
.tv-empty button.alt { background: rgba(255,255,255,.16); }
.tv-empty button:focus-visible { outline: 4px solid #fff; }
.tv-empty button .ic { width: 1.3em; height: 1.3em; }

/* =====================================================================
   v2: tiêu đề mục, băng chuyền, thịnh hành, Dành cho bạn.
   Hiệu ứng chỉ dùng transform/opacity (GPU, không kích hoạt layout); không blur động, không animate đổ bóng -> nhẹ máy.
   ===================================================================== */
:root { --gut: 14px; }
/* --gut phải bằng lề thật của #app (14px; quy tắc safe-area ở dưới ghi đè 24px của tablet): đặt 24px làm băng chuyền tràn 10px ra ngoài màn hình */

/* tiêu đề mục */
.sec { margin-top: 26px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; }
.sec-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 200px; }
.sec-title > div { min-width: 0; }
.sec-title h2 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.3px; }
.sec-title small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.sec-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 6px 16px rgba(236,72,153,.25); }
.sec-ic .ic { width: 21px; height: 21px; color: inherit; }
.sec-ic.fire { background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 6px 16px rgba(239,68,68,.28); }
.sec-ic.you { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.sec-ic.recent { background: linear-gradient(135deg, #06b6d4, #6366f1); box-shadow: 0 6px 16px rgba(99,102,241,.28); }
.sec-ic.big { width: 52px; height: 52px; border-radius: 16px; }
.sec-ic.big .ic { width: 28px; height: 28px; }
.sec-acts { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.pill-play { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 9px 16px 9px 12px; font-weight: 700; font-size: 14px; color: #fff; background: var(--grad); box-shadow: 0 6px 18px rgba(236,72,153,.28); white-space: nowrap; transition: transform .15s, filter .15s; }
.pill-play .ic { width: 20px; height: 20px; }
.pill-play:hover { filter: brightness(1.08); }
.pill-play:active { transform: scale(.95); }
@media (max-width: 520px) {
  .sec-acts { flex: 1 1 100%; justify-content: space-between; margin-left: 0; }
}

/* băng chuyền ngang: cuộn chạm + snap; trên máy có chuột có thêm mũi tên */
.rail-wrap { position: relative; margin: 0 calc(-1 * var(--gut)); }
:is(ul, div).rail { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px var(--gut) 14px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut);
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; }
.rail .card { flex: none; width: clamp(148px, 42vw, 208px); padding-top: 4px; scroll-snap-align: start; contain-intrinsic-size: auto 210px; }
.rail .card-main { padding: 0; }
/* nút ⋮ ở góc trên bên phải ảnh bìa (không đè lên dòng tên kênh) */
.rail .card-act { top: 12px; right: 8px; bottom: auto; width: 30px; height: 30px; background: rgba(0,0,0,.5); color: #fff; z-index: 3; }
.rail .card-act .ic { width: 20px; height: 20px; }
.rail .card-main:focus-visible { outline-offset: -2px; }
.rail .thumb { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.rail-go { display: none; position: absolute; top: 62px; z-index: 4; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface2); color: var(--text);
  place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.4); opacity: 0; transition: opacity .2s, transform .15s; }
.rail-go .ic { width: 22px; height: 22px; }
.rail-go.prev { left: calc(var(--gut) - 6px); } .rail-go.prev .ic { transform: rotate(90deg); }
.rail-go.next { right: calc(var(--gut) - 6px); } .rail-go.next .ic { transform: rotate(-90deg); }
.rail-go:active { transform: scale(.9); }
@media (hover: hover) and (min-width: 700px) {
  .rail-go { display: grid; }
  .rail-wrap:hover .rail-go, .rail-go:focus-visible { opacity: 1; }
}

/* ảnh bìa: lớp tối ở đáy cho dễ đọc thời lượng, nút phát tròn gradient hiện khi rê chuột/chạm */
.rail .thumb::before, .trend .thumb::before { content: ""; position: absolute; inset: auto 0 0 0; height: 48%; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; z-index: 1; }
.rail .dur, .trend .dur, .rail .prog, .trend .prog, .rail .eq, .trend .eq { z-index: 2; }
.thumb img { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.rail .playglyph, .trend .playglyph { inset: auto 8px 8px auto; width: 40px; height: 40px; border-radius: 50%; background: var(--grad); box-shadow: 0 4px 14px rgba(236,72,153,.45);
  opacity: 0; transform: translateY(6px) scale(.85); transition: opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1); z-index: 3; }
.rail .playglyph .ic, .trend .playglyph .ic { width: 22px; height: 22px; }
@media (hover: hover) {
  .rail .card-main:hover .thumb { transform: translateY(-3px); }
  .rail .card-main:hover .thumb img, .trend .card-main:hover .thumb img { transform: scale(1.06); }
  .rail .card-main:hover .playglyph, .rail .card-main:focus-visible .playglyph, .trend .card-main:hover .playglyph, .trend .card-main:focus-visible .playglyph { opacity: 1; transform: none; }
}
@media (hover: none) {   /* cảm ứng: nút phát nhỏ luôn hiện để biết bấm được */
  .rail .playglyph { opacity: .95; transform: none; width: 34px; height: 34px; }
  .rail .playglyph .ic { width: 19px; height: 19px; }
  .trend .playglyph { display: none; }
}
[data-theme="light"] .rail .thumb { box-shadow: inset 0 0 0 1px rgba(20,20,45,.08); }

/* nhãn lý do gợi ý dạng viên thuốc */
.reason { display: inline-block; width: fit-content; max-width: 100%; margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(167,139,250,.14); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reason.r-co { background: rgba(245,158,11,.14); } .reason.r-taste { background: rgba(236,72,153,.14); }

/* đầu trang (Thịnh hành, Dành cho bạn) */
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 160% at 0% 0%, rgba(var(--hc), .30), transparent 60%), radial-gradient(90% 140% at 100% 100%, rgba(var(--hc2), .18), transparent 60%); }
.page-hero.fire { --hc: 245,158,11; --hc2: 239,68,68; }
.page-hero.you { --hc: 139,92,246; --hc2: 236,72,153; }
.page-hero > div { min-width: 0; }
.page-hero h1 { margin: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.1; letter-spacing: -.6px; }
.page-hero .lead { margin: 6px 0 0; font-size: 14.5px; line-height: 1.4; }
.trend-bar, .list-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; }
.trend-bar .segs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.trend-bar .segs::-webkit-scrollbar { display: none; }
.seg { white-space: nowrap; }
.trend-bar .seg.on { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(236,72,153,.28); }
.count-chip { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) {
  .trend-bar { flex-direction: column; align-items: stretch; }
  .trend-bar .segs { display: flex; }
  .trend-bar .seg { flex: 1; text-align: center; padding: 8px 6px; }
  .trend-bar .pill-play, .list-bar .pill-play { justify-content: center; padding: 12px; }
}

/* bảng xếp hạng dạng hàng: thẻ bo tròn, top 3 có viền/ánh màu huy chương */
.trend { gap: 8px; margin-top: 8px; }
.trend .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s, transform .2s cubic-bezier(.2,.7,.2,1); }
.trend .card-main { gap: 10px; padding: 8px 4px 8px 6px; }
.trend .card-main:hover { background: transparent; }
.trend .thumb { width: 104px; border-radius: 12px; }
.trend .rank { width: 30px; font-size: 20px; }
.trend .rank.top1 { background: linear-gradient(135deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trend .rank.top2 { background: linear-gradient(135deg, #f1f5f9, #94a3b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trend .rank.top3 { background: linear-gradient(135deg, #fbbf24, #b45309); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .trend .rank.top1 { background-image: linear-gradient(135deg, #f59e0b, #c2410c); }
[data-theme="light"] .trend .rank.top2 { background-image: linear-gradient(135deg, #94a3b8, #475569); }
[data-theme="light"] .trend .rank.top3 { background-image: linear-gradient(135deg, #d97706, #92400e); }
.trend .card-act { width: 36px; height: 36px; margin-right: 2px; }
.trend .card:nth-child(1) { --rk: 245,158,11; } .trend .card:nth-child(2) { --rk: 148,163,184; } .trend .card:nth-child(3) { --rk: 217,119,6; }
.trend .card:nth-child(-n+3) { background: linear-gradient(100deg, rgba(var(--rk), .16), transparent 62%), var(--surface); border-color: rgba(var(--rk), .4); }
.trend.rows .card:nth-child(-n+3) { background: var(--surface); border-color: var(--line); }
@media (hover: hover) { .trend .card:hover { border-color: rgba(167,139,250,.55); transform: translateY(-2px); } }
@media (min-width: 700px) {
  .trend .card-main { gap: 16px; padding: 10px 6px 10px 12px; }
  .trend .thumb { width: 168px; }
  .trend .rank { width: 44px; font-size: 26px; }
  .trend .title { font-size: 16px; }
}
@media (max-width: 480px) {
  .trend .card-main { gap: 8px; padding: 8px 2px 8px 6px; }
  .trend .thumb { width: 92px; }
  .trend .rank { width: 24px; font-size: 18px; }
  .trend .rank.top1, .trend .rank.top2, .trend .rank.top3 { font-size: 20px; }
  .trend .badge-t:nth-child(n+3) { display: none; }
  .trend .title { font-size: 14.5px; }
}

/* khung chờ khi tải mục cá nhân hoá (giữ chỗ để trang không giật) */
.skel-head, .skel-card i, .skel-card b { position: relative; overflow: hidden; display: block; background: var(--surface); }
.skel-head { width: 190px; height: 24px; border-radius: 8px; margin: 0 0 14px; }
.skel-card { flex: none; width: clamp(148px, 42vw, 208px); display: grid; gap: 8px; padding-top: 4px; }
.skel-card i { aspect-ratio: 16 / 9; border-radius: 14px; }
.skel-card b { height: 12px; border-radius: 6px; } .skel-card b.s { width: 60%; }
.skel-head::after, .skel-card i::after, .skel-card b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.3s linear infinite; }
.skel-sec .rail { margin: 0 calc(-1 * var(--gut)); overflow: hidden; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* =====================================================================
   Trang phát: thanh hành động có nhãn (thay hai hàng biểu tượng không chú thích), nút toàn màn hình trên khung hình,
   khối "Phát tiếp theo" dưới tên bài. Chỉ dùng transform/opacity cho hiệu ứng.
   ===================================================================== */
.actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.actions .vol { display: flex; align-items: center; gap: 4px; width: 130px; flex: none; }
.acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; flex: 1; min-width: 0; }
.act { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 2px 5px; border: 0; border-radius: 14px; background: transparent; color: var(--muted);
  font-size: 11.5px; font-weight: 650; line-height: 1.2; transition: color .15s, transform .1s; }
.act i { display: grid; place-items: center; width: 46px; height: 32px; border-radius: 999px; font-style: normal; transition: background .15s; }
.act .ic { width: 22px; height: 22px; }
.act span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act:hover { color: var(--text); }
.act:hover i { background: var(--surface2); }
.act:active { transform: scale(.94); }
.act.on { color: var(--accent2); }
.act.on i { background: rgba(236,72,153,.16); }
@media (min-width: 700px) { .acts { flex: none; width: min(100%, 400px); margin-left: auto; } }
@media (max-width: 600px) { .actions .vol { display: none; } }
@media (max-width: 350px) { .act { padding-inline: 0; font-size: 10.5px; } .acts { gap: 2px; } }

/* nút toàn màn hình nằm trên khung hình (chỉ khi đang xem video): viên thuốc kính mờ góc trên phải (không đè phụ đề ở giữa-dưới), biểu tượng + nhãn, đổi sang "Thu nhỏ" khi đang toàn màn hình */
.stage-fs { position: absolute; right: 12px; top: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  color: #fff; background: rgba(12,12,22,.58); background: color-mix(in srgb, #0c0c16 58%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  font-size: 13px; font-weight: 650; letter-spacing: .1px; opacity: .9; transition: opacity .2s, transform .18s, background .18s, border-color .18s; animation: fsIn .4s cubic-bezier(.2,.7,.2,1) backwards; }
.stage-fs[hidden] { display: none; }
.stage-fs .fs-ic { display: grid; place-items: center; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.stage-fs .ic { width: 20px; height: 20px; }
.stage-fs .fs-label { white-space: nowrap; }
.stage-fs:hover, .stage-fs:focus-visible { opacity: 1; background: rgba(24,24,40,.82); border-color: rgba(255,255,255,.45); }
.stage-fs:hover .fs-ic { transform: scale(1.16); }
.stage-fs.on:hover .fs-ic { transform: scale(.86); }
.stage-fs:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.stage-fs:active { transform: scale(.94); }
@keyframes fsIn { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 699px) { .stage-fs { width: 44px; height: 44px; padding: 0; justify-content: center; } .stage-fs .fs-label { display: none; } }
.player-mount:fullscreen .stage-fs, .player-mount.pseudo-fs .stage-fs { right: max(18px, env(safe-area-inset-right)); top: calc(18px + var(--sat)); height: 46px; font-size: 14px; }
@media (max-width: 699px) { .player-mount:fullscreen .stage-fs, .player-mount.pseudo-fs .stage-fs { width: 48px; height: 48px; } }
.player-mount.hide-ui .stage-fs { opacity: 0; pointer-events: none; }
html.tv-ui .stage-fs { height: 48px; font-size: 14px; }

/* "Phát tiếp theo" dưới tên bài (danh sách đầy đủ nằm ở cột bên phải trên máy tính) */
.peek[hidden] { display: none; }
.peek-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; color: inherit; transition: border-color .15s, transform .1s; }
.peek-btn:hover { border-color: rgba(167,139,250,.5); }
.peek-btn:active { transform: scale(.985); }
.peek-btn img { flex: none; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--surface2); }
.peek-btn .pk { min-width: 0; flex: 1; display: grid; gap: 2px; }
.peek-btn small { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.peek-btn b { font-size: 14px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.peek-btn .sub { font-size: 12.5px; }
.peek-btn .go { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 4px 14px rgba(236,72,153,.35); }
.peek-btn .go .ic { width: 20px; height: 20px; }
@media (min-width: 960px) { .peek { display: none !important; } }

/* hiệu năng: trên thiết bị cảm ứng bỏ làm mờ nền ở các thanh cố định (nền gần như đặc nên hình ảnh gần như không đổi, nhưng GPU máy yếu
   phải tính lại blur mỗi khung hình khi cuộn) */
@media (hover: none) {
  [data-theme] .topbar, [data-theme] .tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  [data-theme] .topbar { background: color-mix(in srgb, var(--bg) 96%, transparent); }
  [data-theme] .tabbar { background: color-mix(in srgb, var(--bg2) 97%, transparent); }
}

/* =====================================================================
   Nghe theo tâm trạng / bối cảnh: ô màu theo tâm trạng (emoji lớn), lưới trang tổng hợp, banner trang tâm trạng, chip chuyển nhanh.
   Chỉ dùng transform/opacity cho hiệu ứng.
   ===================================================================== */
.mood-tile { position: relative; display: grid; align-content: space-between; gap: 2px; min-height: 104px; padding: 12px 12px 10px; border-radius: 18px; overflow: hidden;
  border: 1px solid hsla(var(--h), 80%, 62%, .35);
  background: linear-gradient(145deg, hsla(var(--h), 85%, 55%, .42), hsla(calc(var(--h) + 40), 85%, 45%, .12) 70%), var(--surface);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s; }
.mood-tile .mood-emoji { font-size: 30px; line-height: 1; }
.mood-tile b { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; }
.mood-tile small { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.mood-tile:active { transform: scale(.97); }
@media (hover: hover) { .mood-tile:hover { transform: translateY(-3px); border-color: hsla(var(--h), 85%, 68%, .65); } }


/* trang tổng hợp */
.mood-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mood-hub .mood-tile { min-height: 118px; }
@media (min-width: 600px) { .mood-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } }

/* trang một tâm trạng */
.page-hero.mood::before { background: radial-gradient(110% 160% at 0% 0%, hsla(var(--h), 85%, 55%, .42), transparent 62%), radial-gradient(90% 140% at 100% 100%, hsla(calc(var(--h) + 50), 85%, 55%, .22), transparent 60%); }
.page-hero.mood { border-color: hsla(var(--h), 80%, 62%, .35); }
.mood-emoji.big { flex: none; display: grid; place-items: center; width: 64px; height: 64px; font-size: 40px; line-height: 1; border-radius: 18px; background: hsla(var(--h), 80%, 55%, .22); }
.mood-chips { margin-top: 14px; margin-bottom: 2px; }
.chip.hue.on { background: linear-gradient(135deg, hsla(var(--h), 85%, 55%, .6), hsla(calc(var(--h) + 40), 85%, 50%, .3)); border-color: hsla(var(--h), 85%, 65%, .85); font-weight: 700; }

/* =====================================================================
   Phụ đề / lời: chữ trên khung hình (mờ dần, cỡ theo khung và theo tuỳ chọn), tab Lời có phân cấp rõ, trạng thái trống/đang tải/lỗi,
   nút "Về dòng đang hát" và bảng cài đặt "Phụ đề & lời". Chỉ dùng transform/opacity cho hiệu ứng.
   Kiểu chữ do player đặt lên <html>: data-sub-size (sm|md|lg|xl) / data-sub-bg (none|soft|dark) / data-sub-pos (low|high).
   ===================================================================== */
html { --sub-scale: 1; --cue-bottom: 7%; }
html[data-sub-size="sm"] { --sub-scale: .85; }
html[data-sub-size="lg"] { --sub-scale: 1.3; }
html[data-sub-size="xl"] { --sub-scale: 1.7; }
html[data-sub-pos="high"] { --cue-bottom: 24%; }

.stage, .ss-preview { container-type: inline-size; }
.cues { position: absolute; left: 0; right: 0; bottom: var(--cue-bottom); z-index: 2; padding: 0 5%; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.cues.on { opacity: 1; transform: none; }
.cues span { display: inline; color: #fff; font-weight: 650; line-height: 1.55; font-size: calc(var(--sub-scale) * clamp(13px, 3.9cqi, 34px));
  padding: .08em .5em; border-radius: .4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-wrap: balance;
  background: rgba(0,0,0,.55); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.55); }
html[data-sub-bg="dark"] .cues span { background: rgba(0,0,0,.86); }
html[data-sub-bg="none"] .cues span { background: transparent; text-shadow: 0 0 3px #000, 0 1px 3px #000, 0 0 12px rgba(0,0,0,.85); }

/* tab Lời */
.lyrics-wrap { position: relative; }
.lyrics-head { margin: 0 0 8px; }
.ly-lang { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-align: left; transition: border-color .15s, transform .1s; }
.ly-lang > .ic { width: 20px; height: 20px; color: var(--accent); }
.ly-lang span { flex: 1; display: grid; min-width: 0; }
.ly-lang b { font-size: 14px; }
.ly-lang small { color: var(--muted); font-size: 11.5px; }
.ly-lang i { display: grid; place-items: center; color: var(--muted); }
.ly-lang i .ic { width: 20px; height: 20px; }
.ly-lang:hover { border-color: rgba(167,139,250,.5); }
.ly-lang:active { transform: scale(.985); }
.lyrics { position: relative; max-height: 60vh; overflow-x: hidden; overflow-y: auto; padding: 22vh 6px 8px 4px; scroll-behavior: auto; overscroll-behavior: contain;
  mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.lyrics[data-state]:not([data-state="ready"]) { padding-top: 6px; mask-image: none; -webkit-mask-image: none; }
.lyrics .line { margin: 0; padding: 8px 12px 8px 10px; font-size: calc(var(--sub-scale) * 19px); font-weight: 700; line-height: 1.35; color: var(--text); opacity: .32; border-radius: 12px; cursor: pointer;
  overflow-wrap: anywhere; transform-origin: left center; transition: opacity .3s ease, transform .3s ease, background-color .15s; }
.lyrics .line[data-d="1"] { opacity: .62; } .lyrics .line[data-d="2"] { opacity: .5; } .lyrics .line[data-d="3"] { opacity: .42; } .lyrics .line[data-d="4"] { opacity: .36; }
.lyrics .line.active { opacity: 1; transform: scale(1.04); background: rgba(167,139,250,.1); }
@media (hover: hover) { .lyrics .line:hover { opacity: .85; background: var(--surface); } .lyrics .line.active:hover { opacity: 1; background: rgba(167,139,250,.14); } }
.lyrics .line:active { background: var(--surface2); }
.ly-end { height: 22vh; }
.lyrics .muted { font-weight: 400; font-size: 15px; padding: 8px; }
.ly-empty { display: grid; justify-items: center; gap: 8px; padding: 30px 12px; text-align: center; color: var(--muted); }
.ly-empty b { color: var(--text); font-size: 16px; }
.ly-empty p { margin: 0; max-width: 32ch; font-size: 13.5px; line-height: 1.45; }
.ly-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--surface2); color: var(--accent); }
.ly-ic .ic { width: 28px; height: 28px; }
.ly-skel { display: grid; gap: 18px; padding: 26px 10px; }
.ly-skel i { position: relative; display: block; height: 18px; border-radius: 9px; background: var(--surface); overflow: hidden; }
.ly-skel i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.3s linear infinite; }
.lyrics-jump { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.lyrics-jump[hidden] { display: none; }
.lyrics-jump::before { content: "↓"; font-weight: 800; }
.lyrics-jump[data-dir="up"]::before { content: "↑"; }

/* bảng cài đặt phụ đề */
.subs-sheet { max-width: 520px; padding-bottom: calc(14px + var(--sab)); }
.ss-preview { position: relative; display: grid; align-items: end; margin: 6px 12px 10px; aspect-ratio: 16 / 6; overflow: hidden; border-radius: 14px;
  background: var(--art-img, none) center / cover, linear-gradient(135deg, #312e81, #831843); }
.ss-preview .cues { position: static; opacity: 1; transform: none; padding-bottom: 5%; }
.ss-langs { display: grid; gap: 4px; margin: 0 8px; }
.ss-langs button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font-size: 15px; text-align: left; }
.ss-langs button::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); transition: border-color .15s, box-shadow .15s; }
.ss-langs button small { margin-left: auto; color: var(--muted); font-size: 12px; }
.ss-langs button:hover { background: var(--surface2); }
.ss-langs button[aria-checked="true"] { background: var(--surface2); border-color: rgba(167,139,250,.55); }
.ss-langs button[aria-checked="true"]::before { border-color: var(--accent2); box-shadow: inset 0 0 0 3px var(--surface2), inset 0 0 0 9px var(--accent2); }
.ss-switch { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 8px 4px; cursor: pointer; }
.ss-switch > span { flex: 1; display: grid; gap: 1px; }
.ss-switch b { font-size: 15px; }
.ss-switch small { color: var(--muted); font-size: 12.5px; }
.ss-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ss-switch i { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: rgba(150,150,170,.4); transition: background .2s; }
.ss-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: transform .2s; }
.ss-switch input:checked + i { background: var(--accent2); }
.ss-switch input:checked + i::after { transform: translateX(18px); }
.ss-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 12px; }
.ss-row > span { flex: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.seg-group { display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg2); }
.seg-group button { padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 650; white-space: nowrap; }
.seg-group button[aria-checked="true"] { background: var(--grad); color: #fff; }
.subs-off .ss-row, .subs-off .ss-switch, .subs-off .ss-preview { opacity: .45; }
.ss-sync { display: grid; gap: 8px; margin: 4px 12px 0; }
.ss-sync-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.ss-sync-row button { min-width: 48px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-sync-row button:active { transform: scale(.94); }
.ss-delay { padding: 0 4px; text-align: center; font-size: 14px; font-weight: 750; }
.ss-delay.off { color: var(--muted); font-weight: 600; }
.ss-sync-hint { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11.5px; }
.ss-reset { padding: 4px 10px; border: 0; background: none; color: var(--accent); font-size: 12.5px; font-weight: 700; }
.ss-reset:disabled { opacity: .4; }
.ss-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 400px) {   /* màn hình hẹp: nhãn nằm trên, nhóm nút chiếm cả hàng và chia đều (không tràn) */
  .ss-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .seg-group { display: flex; }
  .seg-group button { flex: 1; padding-inline: 6px; }
}

/* =====================================================================
   Khu vực tâm trạng ở trang chủ: tab Tâm trạng/Bối cảnh, hàng chip chọn, khung nghe thử (băng chuyền các bài đầu danh sách).
   Chỉ dùng transform/opacity cho hiệu ứng.
   ===================================================================== */
/* 4 tab: vừa hàng ở màn hình rộng, hẹp thì cuộn ngang trong chính thanh tab */
.mh-tabs { display: flex; width: max-content; max-width: 100%; gap: 2px; margin: 0 0 10px; padding: 3px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.mh-tabs::-webkit-scrollbar { display: none; }
.mh-tabs button { flex: none; white-space: nowrap; padding: 6px 13px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.mh-tabs button[aria-selected="true"] { background: var(--grad); color: #fff; }
.mood-home .rail-wrap[hidden] { display: none; }
/* điện thoại: 2 hàng chip cuộn ngang (gọn, thấy nhiều mục); màn hình rộng: 1 hàng có mũi tên. Tên lớp riêng vì `.chips` của trang cho phép xuống dòng */
.rail.mh-chips { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content; gap: 8px; padding-top: 2px; padding-bottom: 8px; }
.rail.mh-chips li { min-width: 0; }
@media (min-width: 700px) { .rail.mh-chips { display: flex; } .rail.mh-chips li { flex: none; } }
.rail.mh-chips ~ .rail-go { top: 20px; }
.mood-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid hsla(var(--h), 80%, 62%, .35);
  background: linear-gradient(135deg, hsla(var(--h), 85%, 55%, .32), hsla(calc(var(--h) + 40), 85%, 50%, .1)), var(--surface);
  font-size: 14.5px; font-weight: 700; white-space: nowrap; scroll-snap-align: start; transition: transform .15s, border-color .15s; }
.mood-chip .mood-emoji { font-size: 20px; line-height: 1; }
.mood-chip.on { border-color: hsla(var(--h), 90%, 70%, .95); background: linear-gradient(135deg, hsla(var(--h), 85%, 55%, .7), hsla(calc(var(--h) + 40), 85%, 50%, .4)), var(--surface); box-shadow: 0 0 0 2px hsla(var(--h), 90%, 65%, .35); }
.mood-chip.hint::after { content: ""; position: absolute; top: 5px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent3); }
.mood-chip:active { transform: scale(.96); }
@media (hover: hover) { .mood-chip:hover { transform: translateY(-2px); border-color: hsla(var(--h), 85%, 68%, .7); } }

.mh-panel { margin-top: 8px; }
.mh-hint { margin: 6px 2px; color: var(--muted); font-size: 13.5px; }
.mh-card { padding: 14px 14px 4px; border-radius: 20px; border: 1px solid hsla(var(--h, 260), 80%, 62%, .3);
  background: radial-gradient(120% 140% at 0% 0%, hsla(var(--h, 260), 85%, 55%, .26), transparent 60%), var(--surface);
  animation: rise .35s cubic-bezier(.2,.7,.2,1) backwards; }
.mh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 10px; }
.mh-head .mood-emoji.big { width: 48px; height: 48px; font-size: 28px; border-radius: 14px; }
.mh-title { display: grid; flex: 1 1 150px; min-width: 0; }
.mh-title b { font-size: 17px; letter-spacing: -.3px; }
.mh-title small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.mh-acts { display: flex; align-items: center; gap: 14px; margin-left: auto; }
@media (max-width: 520px) { .mh-acts { flex: 1 1 100%; justify-content: space-between; margin-left: 0; } }
.mh-card .rail-wrap { margin: 0 -14px; }
.mh-card .rail { padding-inline: 14px; scroll-padding-inline: 14px; }
.mh-card .rail-go.prev { left: 8px; } .mh-card .rail-go.next { right: 8px; }
.mh-skel .skel-head { margin-bottom: 12px; }
.mh-skel-row { display: flex; gap: 12px; margin: 0 -14px; padding: 4px 14px 14px; overflow: hidden; }
.sec-head > .h { margin: 0; flex: 1 1 auto; }
.sub-h { margin: 16px 0 8px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.hub-jump { margin: 0 0 6px; }
.rail.mh-chips .chip { display: block; }   /* <a> inline không tính padding vào chiều cao dòng: hai hàng chồng lên nhau */

/* ---------- giao diện TV (html.tv-ui, bật bởi src/tvdetect.js hoặc ?ui=tv) ----------
   TV 1080p/4K báo devicePixelRatio cao nên khung nhìn CSS chỉ ~600-960px: bố cục điện thoại/máy tính bảng làm player co nhỏ và đẩy nút điều khiển
   xuống ngoài màn hình. Ở đây mọi kích thước tính theo CHIỀU CAO khung nhìn: player lớn nhất có thể mà khung hình + thanh điều khiển vẫn nằm
   trọn trong một màn hình; điều hướng thành thanh icon bên trái (không chiếm chiều cao); danh sách "Tiếp theo" tự cuộn bên phải. */
html.tv-ui { --top: 52px; --side: 84px; --tab: 0px; --mini: 64px; --ctl: 162px; --pad: 14px; scroll-behavior: auto; }
html.tv-ui body { padding: calc(var(--top) + var(--sat)) 0 16px var(--side); }
html.tv-ui body.has-mini { padding-bottom: calc(var(--mini) + 28px); }
html.tv-ui .topbar { left: 0; padding-left: 16px; }
html.tv-ui .tabbar { inset: calc(var(--top) + var(--sat)) auto 0 0; width: var(--side); height: auto; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 6px; border-top: 0; border-right: 1px solid var(--line); }
html.tv-ui .tabbar a { flex: none; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 2px; font-size: 11.5px; font-weight: 600; border-radius: 12px; }
html.tv-ui .tabbar a.active { background: var(--surface2); }
html.tv-ui .tabbar a.active::before { top: 50%; left: 0; width: 3px; height: 26px; margin: -13px 0 0; border-radius: 0 3px 3px 0; }
html.tv-ui #app { max-width: none; padding: var(--pad) 24px 0 20px; }
html.tv-ui .mini { left: calc(var(--side) + 16px); right: 16px; bottom: 12px; max-width: 760px; }
html.tv-ui #toast { bottom: calc(var(--mini) + 28px); }
/* điều khiển bằng remote: vòng focus lớn, rõ trên nền tối */
html.tv-ui :focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(167,139,250,.6); border-radius: 14px; }

/* trang phát: cột trái = khung hình + điều khiển (rộng tối đa theo chiều cao còn lại), cột phải = Tiếp theo / Lời */
html.tv-ui .watch { --pw: min(calc((100vh - var(--top) - var(--sat) - var(--pad) - 18px - var(--ctl)) * 1.7778), calc((100vw - var(--side) - 68px) * .62));
  grid-template-columns: var(--pw) minmax(0, 1fr); gap: 20px; align-items: start; }
html.tv-ui .player-mount { margin: 0; border-radius: 18px; border-width: 1px; }
html.tv-ui .stage { max-height: none; }
html.tv-ui .controls { padding: 8px 14px 10px; gap: 4px; }
html.tv-ui .transport .icon-btn { width: 46px; height: 46px; }
html.tv-ui .transport .play { width: 58px; height: 58px; }
html.tv-ui .transport .play .ic { width: 28px; height: 28px; }
html.tv-ui .actions { gap: 6px; margin-top: 0; }
html.tv-ui .actions .vol { display: none; }   /* âm lượng chỉnh bằng remote của TV */
html.tv-ui .acts { width: 100%; margin-left: 0; gap: 4px; }
html.tv-ui .act { padding: 4px 2px 3px; gap: 2px; font-size: 12.5px; }
html.tv-ui .act i { width: 52px; height: 28px; }
html.tv-ui .peek { display: none !important; }   /* hàng đợi đã hiện sẵn bên phải */
html.tv-ui .watch-side { position: sticky; top: calc(var(--top) + var(--sat) + var(--pad)); max-height: calc(100vh - var(--top) - var(--sat) - var(--pad) - 14px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html.tv-ui .lyrics { max-height: calc(100vh - var(--top) - var(--sat) - 170px); }
html.tv-ui .watch-title { font-size: 20px; }
@media (max-height: 420px) {   /* TV 720p ở tỉ lệ pixel 3: khung nhìn ~600x338 */
  html.tv-ui { --top: 44px; --side: 72px; --ctl: 142px; --pad: 8px; }
  html.tv-ui .transport .icon-btn { width: 40px; height: 40px; }
  html.tv-ui .transport .play { width: 48px; height: 48px; }
  html.tv-ui .transport .play .ic { width: 24px; height: 24px; }
  html.tv-ui .act i { height: 24px; }
  html.tv-ui .act { font-size: 11.5px; }
  html.tv-ui .tabbar a { padding: 6px 2px; font-size: 10.5px; }
  html.tv-ui .tabbar { gap: 2px; padding: 6px 4px; }
}
@media (min-height: 760px) {   /* TV 1080p ở tỉ lệ 1-1,5: khung nhìn lớn, thoải mái hơn */
  html.tv-ui { --top: 60px; --side: 92px; --ctl: 206px; --pad: 20px; }
  html.tv-ui .controls { padding: 12px 18px 14px; gap: 8px; }
  html.tv-ui .transport .icon-btn { width: 54px; height: 54px; }
  html.tv-ui .transport .play { width: 70px; height: 70px; }
  html.tv-ui .transport .play .ic { width: 34px; height: 34px; }
  html.tv-ui .act { font-size: 13.5px; padding: 6px 2px 4px; }
  html.tv-ui .act i { height: 34px; }
}
html.tv-ui .watch-side .thumb { width: 118px; }
@media (min-height: 760px) { html.tv-ui .watch-side .thumb { width: 168px; } }

/* ---------- chế độ TV v3: video + phụ đề toàn màn hình, điều khiển là lớp phủ ẩn/hiện ----------
   Chỉ dùng opacity/transform (chạy trên GPU, không kích hoạt layout) nên mượt cả trên TV yếu. Lớp phủ ẩn dùng visibility để nút không nhận focus/bấm. */
.tv-top, .tv-cap, .tv-note { display: none; }
.tv.vid .tv-top, .tv.vid .tv-cap, .tv.vid .tv-note { display: block; }
.tv-top, .tv-bottom, .tv-tip, .tv-note { transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
.tv:not(.ui) .tv-bottom, .tv.vid:not(.ui) .tv-top { opacity: 0; visibility: hidden; pointer-events: none; }
.tv:not(.ui) .tv-bottom { transform: translateY(16px); }
.tv.vid:not(.ui) .tv-top { transform: translateY(-16px); }
.tv.ui .tv-bottom, .tv.ui .tv-top { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tv.show.vid { display: block; padding: 0; background: #000; }
.tv.vid .tv-stage { position: absolute; inset: 0; display: block; }
.tv.vid .tv-media { position: absolute; inset: 0; width: auto; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.tv.vid .tv-media .tv-art { object-fit: contain; }
.tv.vid .tv-side { display: none; }
.tv.vid .tv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: clamp(18px, 3.2vw, 56px) clamp(260px, 30vw, 560px) clamp(40px, 7vh, 96px) clamp(24px, 4vw, 72px);   /* chừa chỗ bên phải cho chip trạng thái phụ đề */
  background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.42) 55%, transparent); }
.tv.vid .tv-top .tv-title { font-size: clamp(22px, 2.6vw, 46px); -webkit-line-clamp: 2; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.tv.vid .tv-top .tv-artist { font-size: clamp(15px, 1.6vw, 28px); color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
/* vùng dưới cùng của video dành riêng cho phụ đề (giữa-dưới, cố định, không nhảy khi điều khiển hiện); thanh điều khiển nổi đè lên video ngay phía trên vùng đó */
.tv.vid { --sub-zone: clamp(96px, 23vh, 280px); }
.tv.vid .tv-bottom { position: absolute; left: 0; right: 0; bottom: var(--sub-zone); z-index: 3; padding: clamp(40px, 7vh, 90px) clamp(24px, 4vw, 72px) clamp(28px, 5vh, 64px); background: linear-gradient(transparent, rgba(0,0,0,.72) 32%, rgba(0,0,0,.72) 68%, transparent); }
/* phụ đề: giữa-dưới, full chiều rộng màn hình, luôn đúng một chỗ (bỏ qua tuỳ chọn vị trí của trang thường) */
.tv-cap { position: absolute; left: 0; right: 0; bottom: 4.5%; z-index: 2; padding: 0 8%; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .3s cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; }
.tv-cap.on { opacity: 1; transform: none; }
.tv-cap span { display: inline; color: #fff; font-weight: 700; line-height: 1.5; font-size: calc(var(--sub-scale, 1) * clamp(24px, 3.1vw, 62px)); padding: .06em .5em; border-radius: .4em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; text-wrap: balance; background: rgba(0,0,0,.6); text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.55); }
html[data-sub-bg="dark"] .tv-cap span { background: rgba(0,0,0,.88); }
html[data-sub-bg="none"] .tv-cap span { background: transparent; text-shadow: 0 0 4px #000, 0 2px 4px #000, 0 0 16px rgba(0,0,0,.9); }
/* thông báo phụ đề (đang tải / không có / tắt / lỗi): chip nhỏ góc phải trên, chỉ hiện khi cần */
.tv-note { position: absolute; z-index: 4; top: clamp(16px, 3vw, 44px); right: clamp(20px, 3.4vw, 64px); margin: 0; padding: .55em 1.1em; border-radius: 999px; background: rgba(20,20,34,.82); color: #fff; font-size: clamp(14px, 1.45vw, 24px); font-weight: 650;
  border: 1px solid rgba(255,255,255,.18); opacity: 0; transform: translateY(-8px); pointer-events: none; }
.tv-note.show { opacity: 1; transform: none; }
.tv-note::before { content: "CC"; display: inline-block; margin-right: .6em; padding: 0 .35em; border-radius: .3em; border: 1.5px solid currentColor; font-size: .78em; font-weight: 800; opacity: .8; }
.tv-tip { position: absolute; z-index: 4; left: 50%; top: clamp(16px, 3.4vh, 48px); margin: 0; padding: .6em 1.3em; border-radius: 999px; background: rgba(20,20,34,.78); color: rgba(255,255,255,.92); font-size: clamp(14px, 1.4vw, 22px); font-weight: 600; transform: translateX(-50%); pointer-events: none; animation: tvTip 4.5s ease both; }
@keyframes tvTip { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.tv-lyrics .l.note { font-size: .62em; font-weight: 600; color: rgba(255,255,255,.6); padding: .5em .8em; border-radius: 14px; background: rgba(255,255,255,.08); }
@media (max-aspect-ratio: 1 / 1) { .tv.show.vid { display: block; } .tv.vid .tv-media { max-height: none; } }
.bt-hot { color: #f97316; background: rgba(249,115,22,.15); } .bt-new { color: #06b6d4; background: rgba(6,182,212,.14); } .bt-big { color: var(--muted); background: rgba(148,163,184,.14); }
.bt-vibe { color: var(--accent); background: rgba(139,92,246,.14); }

/* ---------- giao diện TV: ô đang chọn bằng phím mũi tên (spatial.js) ----------
   Viền trắng + quầng tím rõ nét từ xa; scroll-margin chừa chỗ cho thanh trên, thanh icon trái và mini player khi tự cuộn tới ô được chọn. */
.sp-focus { scroll-margin: 84px 32px 110px 96px; }
.sp-focus { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(167,139,250,.7); border-radius: 14px; position: relative; z-index: 2; }
.sp-focus.chip, .sp-focus.mood-chip, .sp-focus.pill-play { border-radius: 999px; }
.tabbar a.sp-focus { background: var(--surface2); }
input.sp-focus { box-shadow: 0 0 0 4px rgba(167,139,250,.7); outline-offset: 0; }

/* ---------- hàng đợi "Phát tiếp theo" (tab bên phải và khối peek) ---------- */
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 8px; }
.q-title { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.q-count { font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(167,139,250,.14); padding: 2px 9px; border-radius: 999px; }
.q-count:empty { display: none; }
.watch-side .list { gap: 2px; }
.watch-side .list .card { contain-intrinsic-size: auto 88px; transition: background .18s, opacity .2s ease, transform .2s ease; }
.watch-side .list .card-main { padding: 6px 8px 6px 6px; gap: 12px; }
.watch-side .list .thumb { width: 132px; }
.watch-side .list .meta { gap: 1px; }
.watch-side .list .title { font-size: 14px; }
.watch-side .list .sub.ch { font-size: 12.5px; }
.watch-side .list .sub.vw { font-size: 12px; color: var(--muted); opacity: .85; font-variant-numeric: tabular-nums; }
.watch-side .list .card.is-current { background: linear-gradient(90deg, rgba(167,139,250,.16), rgba(167,139,250,0) 85%); box-shadow: inset 3px 0 0 var(--accent); }
.watch-side .list .card.is-current .card-main:hover { background: transparent; }
.now { display: none; width: fit-content; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
.watch-side .list .is-current .now { display: block; }
.watch-side .list .is-current .reason { display: none; }
.watch-side .list .card-act { flex: none; width: 36px; height: 36px; margin-right: 2px; opacity: .55; transition: opacity .15s, background .15s; }
@media (hover: hover) { .watch-side .list .card-act { opacity: 0; } .watch-side .list .card:hover .card-act, .watch-side .list .card-act:focus-visible { opacity: .9; } }
.watch-side .list .card-act:hover { opacity: 1; background: var(--surface2); }
.card.q-new { animation: qIn .3s cubic-bezier(.2,.8,.2,1) both; }
.card.leaving { opacity: 0; transform: translateX(14px); pointer-events: none; }
@keyframes qIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* khung chờ khi đang tìm gợi ý: chỉ animate opacity (không làm layout lại) */
.q-skel { pointer-events: none; }
.q-skel .thumb { background: var(--surface2); }
.q-skel .meta { gap: 8px; }
.q-skel .meta i { display: block; height: 11px; border-radius: 6px; background: var(--surface2); }
.q-skel .thumb, .q-skel .meta i { animation: qPulse 1.3s ease-in-out infinite; }
@keyframes qPulse { 50% { opacity: .45; } }
.q-empty { display: flex; align-items: center; gap: 10px; padding: 14px 12px; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: 14px; margin-top: 6px; }
.q-empty .ic { flex: none; width: 20px; height: 20px; color: var(--accent); }
.peek-btn .sub { display: flex; gap: 6px; min-width: 0; }
.peek-btn .sub .ch { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.peek-btn .sub .vw { flex: none; }
.peek-btn .sub .vw::before { content: "·"; margin-right: 6px; }
@media (max-width: 959px) { .watch-side .list .thumb { width: 124px; } }
@media (prefers-reduced-motion: reduce) { .card.q-new { animation: none; } .q-skel .thumb, .q-skel .meta i { animation: none; } .watch-side .list .card { transition: none; } }

/* ---------- ô tìm kiếm thông minh (searchbox.js) ----------
   Bảng gợi ý là phần tử con của <body> (không nằm trong thanh trên vì thanh có backdrop-filter làm lệch vị trí fixed), đặt theo --sx/--sy/--sw do JS tính.
   Hiệu ứng chỉ opacity/transform; màn hình hẹp (<700px) mở rộng toàn màn hình có nút quay lại. */
.search input { transition: border-color .15s, box-shadow .15s, background .15s; }
.search.has-q input { padding-right: 82px; }
.search .sbx-clear { right: 40px; color: var(--muted); }
.search .sbx-clear:hover { color: var(--text); }
.search .sbx-clear[hidden], .search .sbx-back[hidden] { display: none; }
.search .sbx-back { position: static; display: none; margin-right: 4px; width: 40px; height: 40px; }
.search.sbx-open input { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167,139,250,.25); }

.sbx { position: fixed; left: var(--sx, 8px); top: var(--sy, 64px); width: var(--sw, 640px); z-index: 70; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); overflow: hidden; animation: sbxIn .17s cubic-bezier(.2,.7,.2,1); transform-origin: top center; }
.sbx[hidden] { display: none; }
@keyframes sbxIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.sbx-scrim { position: fixed; inset: calc(var(--top) + var(--sat)) 0 0 0; z-index: 65; background: rgba(4,4,10,.5); animation: fade .16s; }
.sbx-list { max-height: min(620px, calc(100vh - var(--sy, 64px) - 16px)); max-height: min(620px, calc(100dvh - var(--sy, 64px) - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 10px; scrollbar-width: thin; }

.sbx-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.sbx-link { border: 0; background: none; padding: 4px 8px; margin: -4px -4px -4px 0; border-radius: 8px; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.sbx-link:hover { background: var(--surface2); }

.sbx-i { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px; border-radius: 13px; cursor: pointer; position: relative; color: inherit; text-decoration: none; transition: background .12s; }
.sbx-i:hover, .sbx-i[aria-selected="true"] { background: var(--surface2); }
.sbx-i[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.sbx-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--muted); }
.sbx-ic .ic { width: 18px; height: 18px; }
.sbx-ic.sbx-hot { color: var(--accent); border-radius: 50%; background: rgba(167,139,250,.14); }
.sbx-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.3; }
.sbx-t b { font-weight: 750; }
.sbx-ty { font-weight: 500; opacity: .78; }
.sbx-t mark, .sbx-tt mark { background: none; color: var(--accent); font-weight: 800; }
.sbx-q { background: linear-gradient(90deg, rgba(167,139,250,.10), transparent); }
.sbx-q kbd { flex: none; padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); font: 600 11px/1.5 system-ui, sans-serif; }

.sbx-fill, .sbx-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-right: -4px; border: 0; border-radius: 50%; background: none; color: var(--muted); transition: opacity .12s, background .12s, color .12s; }
.sbx-fill:hover, .sbx-x:hover { background: var(--bg2); color: var(--text); }
.sbx-fill .ic, .sbx-x .ic { width: 17px; height: 17px; }
@media (hover: hover) { .sbx-fill, .sbx-x { opacity: 0; } .sbx-i:hover .sbx-fill, .sbx-i:hover .sbx-x, .sbx-i[aria-selected="true"] .sbx-fill, .sbx-i[aria-selected="true"] .sbx-x { opacity: 1; } }

/* chủ đề / thể loại khớp: ô emoji màu theo hue, tên (tô sáng phần khớp), mô tả ngắn và nhãn nhóm */
.sbx-em { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; font-style: normal;
  background: linear-gradient(135deg, hsla(var(--h), 80%, 55%, .34), hsla(calc(var(--h) + 40), 80%, 55%, .14)); border: 1px solid hsla(var(--h), 80%, 62%, .38); }
.sbx-topic .sbx-t { display: grid; gap: 1px; }
.sbx-tt { overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.sbx-t small { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12.5px; }
.sbx-badge { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--bg2); color: var(--muted); font-size: 11px; font-weight: 700; }

/* chưa gõ: chip chủ đề/thể loại, lưới thịnh hành */
.sbx-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 8px 8px; }
.sbx-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px 0 12px; border-radius: 999px; font-size: 14px; font-weight: 650; color: inherit; text-decoration: none; white-space: nowrap;
  border: 1px solid hsla(var(--h, 260), 80%, 62%, .38); background: linear-gradient(135deg, hsla(var(--h, 260), 80%, 55%, .26), hsla(calc(var(--h, 260) + 40), 80%, 55%, .10)); transition: transform .12s, border-color .12s; }
.sbx-chip:hover { border-color: hsla(var(--h, 260), 85%, 70%, .8); transform: translateY(-1px); }
.sbx-chip[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; background: linear-gradient(135deg, hsla(var(--h, 260), 80%, 55%, .4), hsla(calc(var(--h, 260) + 40), 80%, 55%, .2)); }
.sbx-chip.sbx-i { min-height: 40px; padding: 0 15px 0 12px; }
.sbx-sk-chip { width: 96px; border-color: transparent; background: var(--surface2); }
.sbx-trend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.sbx-rank { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.sbx-rank.top { color: #fff; background: linear-gradient(135deg, #f59e0b, #ef4444); }
.sbx-skel { padding: 2px 0; }
.sbx-sk { height: 44px; display: flex; align-items: center; padding: 0 12px 0 52px; }
.sbx-sk i { display: block; height: 12px; width: 62%; border-radius: 6px; background: var(--surface2); }
.sbx-sk:nth-child(2) i { width: 48%; } .sbx-sk:nth-child(3) i { width: 70%; } .sbx-sk:nth-child(4) i { width: 38%; }

@media (max-width: 699px) {
  body.sbx-on { overflow: hidden; }
  body.sbx-on .brand, body.sbx-on #install-btn, body.sbx-on #theme-btn { display: none; }
  body.sbx-on .search { max-width: none; margin: 0; }
  .search.sbx-open .sbx-back:not([hidden]) { display: inline-grid; }
  .sbx { top: calc(var(--top) + var(--sat)); left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; border-width: 1px 0 0; box-shadow: none; background: var(--bg); animation-name: sbxInM; }
  @keyframes sbxInM { from { opacity: 0; transform: translateY(10px); } }
  .sbx-list { max-height: none; height: 100%; padding: 4px 8px calc(28px + var(--sab)); }
  .sbx-trend { grid-template-columns: minmax(0, 1fr); }
  .sbx-i { min-height: 52px; }
  .sbx-q kbd { display: none; }
  .sbx-chip { height: 42px; }
}
@media (hover: none) { .sbx-q kbd { display: none; } }
html.tv-ui .sbx-i { min-height: 54px; font-size: 17px; }
html.tv-ui .sbx-t { font-size: 17px; }
html.tv-ui .sbx-chip { height: 46px; font-size: 16px; }

.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { display: none; -webkit-appearance: none; appearance: none; }


/* =====================================================================
   Vibe Party (nghe nhạc nhóm): trang /party + thanh nổi ở các trang khác. Tiền tố .vp-
   ===================================================================== */
.vp { max-width: 860px; margin: 0 auto; }
.vp-boot { display: grid; justify-items: center; gap: 6px; padding: 40px 0; text-align: center; color: var(--muted); }
.vp-hero { display: flex; align-items: center; gap: 14px; padding: 22px 18px; border-radius: 20px; border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,.35), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(236,72,153,.25), transparent 55%), var(--surface); }
.vp-hero .ic.big { width: 44px; height: 44px; flex: none; color: var(--accent); }
.vp-hero h1 { margin: 0; font-size: 26px; letter-spacing: -.4px; }
.vp-hero .lead { margin: 4px 0 0; }
.vp-lab { display: block; margin: 18px 0 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.vp-lab small { font-weight: 400; }
.vp-input { width: 100%; height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; appearance: none; -webkit-appearance: none; }
.vp-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-cards { display: grid; gap: 12px; margin-top: 14px; }
.vp-card { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.vp-card h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.vp-card h2 .ic { width: 20px; height: 20px; color: var(--accent); }
.vp-card p { margin: 0; color: var(--muted); font-size: 14px; }
.vp-card .vp-err, .vp-err { color: #f87171; font-size: 13.5px; }
.vp-err:empty { display: none; }
.vp-code-in { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; height: 58px; font-variant-numeric: tabular-nums; }
.vp-code-in::placeholder { letter-spacing: 4px; font-weight: 600; opacity: .45; }
.vp-how { margin: 20px 0 0; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; font-size: 14px; }
.vp-how b { color: var(--text); }
@media (min-width: 700px) { .vp-cards { grid-template-columns: 1fr 1fr; } }

.vp-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-bottom: 10px; border-radius: 12px; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.4); font-size: 14px; }
.vp-banner[hidden] { display: none; }
.vp-banner .btn { padding: 6px 14px; }
.vp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.vp-top h1 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 8px; letter-spacing: -.3px; }
.vp-top h1 .ic { width: 26px; height: 26px; color: var(--accent); }
.vp-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.vp-status .ic { width: 14px; height: 14px; }
.vp-topbtns { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 4px; }
.vp-leave { padding: 7px 16px; font-size: 14px; }
.vp-top h1 { grid-row: 1; grid-column: 1; }
.vp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6b7280; flex: none; }
.vp-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }

.vp-hostbox { margin-top: 12px; display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vp-hostbox[hidden] { display: none; }
.vp-code { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.vp-code-l { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); font-weight: 650; }
.vp-code-v { font-size: 28px; letter-spacing: 6px; font-variant-numeric: tabular-nums; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vp-code-b { display: flex; gap: 2px; }
.vp-hbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.vp-hbtns .chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13.5px; }
.vp-hbtns .chip .ic { width: 16px; height: 16px; }
.vp-hbtns .chip.on { background: rgba(139,92,246,.22); border-color: var(--accent); }
.vp-hbtns .chip.danger { color: #f87171; }

.vp-now { margin-top: 12px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 20px; border: 1px solid var(--line); position: relative; overflow: hidden;
  background: radial-gradient(130% 160% at 0% 0%, rgba(var(--art), .28), transparent 60%), var(--surface); }
.vp-art { position: relative; width: 112px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface2); align-self: start; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.vp-art img { width: 100%; height: 100%; object-fit: cover; }
.vp-art-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); }
.vp-art-empty .ic { width: 40px; height: 40px; }
.vp-eq { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 2px; align-items: flex-end; height: 16px; padding: 3px 4px; border-radius: 6px; background: rgba(0,0,0,.55); }
.vp-eq i { width: 3px; height: 12px; border-radius: 2px; background: #fff; transform-origin: bottom; transform: scaleY(.33); }
.vp-eq.on i { animation: vp-eq .9s ease-in-out infinite; }
.vp-eq.on i:nth-child(2) { animation-delay: .2s; }
.vp-eq.on i:nth-child(3) { animation-delay: .4s; }
@keyframes vp-eq { 0%, 100% { transform: scaleY(.33); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .vp-eq.on i { animation: none; transform: scaleY(.8); } }
.vp-np { min-width: 0; display: grid; gap: 4px; align-content: start; }
.vp-np .vp-lab { margin: 0; }
.vp-title { margin: 0; font-size: 18px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-title.muted { color: var(--muted); font-weight: 600; }
.vp-ch { margin: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-who { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vp-prog { margin-top: 6px; }
.vp-bar { height: 5px; border-radius: 3px; background: rgba(150,150,170,.3); overflow: hidden; }
.vp-bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.vp-seek { height: 20px; }
.vp-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.vp-line { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.vp-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.vp-enable { margin-top: 8px; width: 100%; }
.vp-ctl { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.vp-ctl .icon-btn { width: 44px; height: 44px; }
.vp-ctl .vp-big { width: 56px; height: 56px; background: var(--grad); color: #fff; box-shadow: 0 6px 20px rgba(236,72,153,.35); }
.vp-ctl .vp-big .ic { width: 28px; height: 28px; }
.vp-vol { margin-left: auto; display: flex; align-items: center; gap: 6px; width: 130px; color: var(--muted); }
.ios .vp-vol { display: none; }
.vp-loading { grid-column: 1 / -1; display: grid; justify-items: center; gap: 4px; color: var(--muted); padding: 10px; }
@media (max-width: 420px) { .vp-now { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; } .vp-art { width: 84px; } .vp-title { font-size: 16px; } }
.vp-ticker { margin: 8px 2px 0; min-height: 20px; font-size: 13px; color: var(--accent); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.vp-ticker.show { opacity: 1; transform: none; }

.vp-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: hsl(var(--h) 70% 55% / .18); border: 1px solid hsl(var(--h) 70% 60% / .4); color: var(--text); }
.vp-chip i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: hsl(var(--h) 65% 48%); flex: none; }
.vp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(245,158,11,.18); color: #f59e0b; }
.vp-badge .ic { width: 12px; height: 12px; }
.vp-badge.next { background: rgba(34,197,94,.16); color: #22c55e; }

.vp-tabs { display: flex; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); position: sticky; top: calc(var(--top) + var(--sat) + 6px); z-index: 5; }
.vp-tabs button { flex: 1; padding: 9px 6px; border: 0; border-radius: 10px; background: transparent; font-weight: 650; font-size: 14px; color: var(--muted); }
.vp-tabs button[aria-selected="true"] { background: var(--surface2); color: var(--text); }
.vp-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11.5px; line-height: 18px; }
.vp-count:empty { display: none; }
[role="tabpanel"][hidden] { display: none; }
.vp-qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.vp-qcount { font-weight: 700; display: grid; }
.vp-qcount small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.vp-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.vp-seg button { padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 650; color: var(--muted); }
.vp-seg button[aria-pressed="true"] { background: var(--grad); color: #fff; }
.vp-modeinfo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.vp-modeinfo .ic { width: 16px; height: 16px; }
.vp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vp-row { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vp-row.add { grid-template-columns: 96px minmax(0, 1fr) auto; }
.vp-row.prio { border-color: rgba(245,158,11,.5); background: linear-gradient(90deg, rgba(245,158,11,.1), transparent 60%), var(--surface); }
.vp-pos { width: 20px; text-align: center; font-weight: 700; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.vp-th { width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: var(--surface2); }
.vp-meta { min-width: 0; display: grid; gap: 1px; }
.vp-meta b { font-size: 14px; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-meta small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-by { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.vp-acts { display: flex; align-items: center; gap: 0; }
.vp-acts .icon-btn { width: 38px; height: 38px; color: var(--muted); }
.vp-acts .icon-btn.on { color: #f59e0b; }
.vp-addbtn { padding: 7px 14px; font-size: 13.5px; white-space: nowrap; }
.vp-addbtn .ic { width: 16px; height: 16px; }
.vp-addbtn.done { color: #22c55e; }
.vp-addbtn:disabled { opacity: .85; }
.vp-more { margin: 12px auto 0; display: flex; }
.vp-search { display: flex; gap: 8px; margin: 14px 0 12px; }
.vp-search .btn { padding: 0 20px; }
.vp-sub { margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.vp-note { margin-top: 14px; }
@media (max-width: 480px) {
  .vp-row { grid-template-columns: auto 72px minmax(0, 1fr) auto; gap: 8px; padding-left: 8px; }
  .vp-row.add { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .vp-th { width: 72px; }
  .vp-pos { width: 14px; }
  .vp-acts .icon-btn { width: 34px; height: 34px; }
}
.vp-members { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.vp-mrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vp-mrow:not(.on) { opacity: .7; }
.vp-av { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 800; color: #fff; background: hsl(var(--h) 65% 46%); }
.vp-av .vp-dot { position: absolute; right: -1px; bottom: -1px; border: 2px solid var(--surface); box-sizing: content-box; width: 8px; height: 8px; }
.vp-mm { min-width: 0; display: grid; }
.vp-mm b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-mm small { color: var(--muted); font-size: 12.5px; }
.vp-tag { font-style: normal; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface2); color: var(--muted); vertical-align: 1px; }
.vp-tag.host { background: rgba(245,158,11,.18); color: #f59e0b; }
.vp-tag .ic { width: 11px; height: 11px; }
.vp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); }
.vp-feed li { padding: 6px 10px; border-radius: 8px; background: var(--surface); }
.vp-nickform { display: grid; gap: 12px; padding: 14px 16px calc(16px + var(--sab)); }
.vp-nickform h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; }
.vp-nickform p { margin: 0; }

/* thanh nổi Vibe Party (hiện ở mọi trang khi đang ở trong nhóm, trừ /party), xếp ngay trên mini player */
.vp-pill { position: fixed; z-index: 38; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--tab) + var(--sab) + 8px); max-width: 520px; margin: 0 auto;
  height: 46px; display: flex; align-items: center; gap: 2px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--surface2); border: 1px solid rgba(139,92,246,.55); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body.has-mini .vp-pill { bottom: calc(var(--tab) + var(--mini) + var(--sab) + 16px); }
body.has-party { padding-bottom: calc(var(--tab) + var(--sab) + 66px); }
body.has-party.has-mini { padding-bottom: calc(var(--tab) + var(--mini) + var(--sab) + 74px); }
.vp-pill-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; }
.vp-pill-main > .ic { width: 22px; height: 22px; color: var(--accent); flex: none; }
.vp-pill-t { min-width: 0; display: grid; line-height: 1.2; }
.vp-pill-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-pill-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-pill .icon-btn { width: 38px; height: 38px; }
@media (max-width: 699px) { body.typing .vp-pill { display: none; } }
@media (min-width: 960px) {
  .vp-pill { left: calc(var(--side) + 24px); right: 24px; bottom: 16px; max-width: 360px; margin: 0 0 0 auto; }
  body.has-mini .vp-pill { bottom: calc(var(--mini) + 28px); }
  body.has-party { padding-bottom: 72px; }
  body.has-party.has-mini { padding-bottom: calc(var(--mini) + 84px); }
}
html.tv-ui .vp-pill { left: calc(var(--side) + 16px); right: 16px; bottom: 12px; max-width: 420px; margin: 0 0 0 auto; }
html.tv-ui body.has-mini .vp-pill { bottom: calc(var(--mini) + 24px); }
/* 6 mục điều hướng: màn hình rất hẹp (320px) thu nhỏ chữ để nhãn không xuống dòng */
.tabbar a span { white-space: nowrap; }
@media (max-width: 340px) { .tabbar a { font-size: 10px; } }

/* Vibe Party: hướng dẫn, mời bằng QR/link, quét QR, "Bắt đầu nhanh" */
.vp-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.vp-steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vp-stepi { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--grad); box-shadow: 0 6px 16px rgba(236,72,153,.28); }
.vp-stepi .ic { width: 22px; height: 22px; }
.vp-stepn { position: absolute; top: 8px; right: 12px; font-size: 22px; font-weight: 800; color: var(--muted); opacity: .35; }
.vp-steps b { font-size: 15px; }
.vp-steps p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
@media (min-width: 700px) { .vp-steps { grid-template-columns: repeat(3, 1fr); } .vp-steps li { flex-direction: column; } }
.vp-invitebar { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(139,92,246,.16); border: 1px solid var(--accent); }
.vp-invitebar[hidden] { display: none; }
.vp-invitebar .ic { width: 24px; height: 24px; color: var(--accent); flex: none; }
.vp-invitebar div { display: grid; }
.vp-invitebar small { color: var(--muted); }
.vp-card.invited { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.vp-scan { width: 100%; }
.vp-scan .ic { width: 18px; height: 18px; }
.vp-guide { margin-top: 22px; }
.vp-guide .h .ic { color: var(--accent); }
.vp-acc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; }
.vp-acc summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; font-weight: 650; list-style: none; }
.vp-acc summary::-webkit-details-marker { display: none; }
.vp-acc summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex: none; }
.vp-acc[open] summary::after { transform: rotate(-135deg); }
.vp-acc summary .ic { width: 20px; height: 20px; color: var(--accent); flex: none; }
.vp-acc > :not(summary) { margin: 0; padding: 0 14px 14px 44px; color: var(--muted); font-size: 14px; }
.vp-ol, .vp-ul { padding-left: 62px !important; display: grid; gap: 8px; }
.vp-ol li::marker { font-weight: 800; color: var(--accent); }
.vp-acc b, .vp-faq dt { color: var(--text); }
.vp-faq dt { font-weight: 650; margin-top: 10px; }
.vp-faq dd { margin: 2px 0 0; }
.vp-faq { padding-top: 0 !important; }
.vp-tips { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(236,72,153,.1)), var(--surface); border: 1px solid rgba(139,92,246,.45); }
.vp-tips[hidden] { display: none; }
.vp-tips-h { display: flex; align-items: center; justify-content: space-between; }
.vp-tips-h b { display: flex; align-items: center; gap: 6px; }
.vp-tips-h b .ic { width: 18px; height: 18px; color: var(--accent); }
.vp-tips-h small { color: var(--muted); font-weight: 600; }
.vp-tips-h .icon-btn { width: 34px; height: 34px; color: var(--muted); }
.vp-tips ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.vp-tips li { display: flex; align-items: center; gap: 10px; }
.vp-tips li div { flex: 1; min-width: 0; display: grid; }
.vp-tips li small { color: var(--muted); font-size: 12.5px; }
.vp-tips li.ok b { color: var(--muted); text-decoration: line-through; }
.vp-tips li.ok small { display: none; }
.vp-tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--muted); }
.vp-tips li.ok .vp-tick { background: #22c55e; border-color: #22c55e; color: #fff; }
.vp-tick .ic { width: 14px; height: 14px; }
.vp-tips .chip { padding: 6px 12px; font-size: 13px; background: var(--grad); color: #fff; border: 0; font-weight: 650; }
.vp-invite { width: 100%; }
.vp-invite .ic { width: 20px; height: 20px; }
.vp-invitesheet, .vp-scansheet, .vp-guidesheet { display: grid; gap: 12px; padding: 8px 16px calc(16px + var(--sab)); }
.vp-invitesheet h3, .vp-scansheet h3, .vp-guidesheet h3 { margin: 6px 0 0; display: flex; align-items: center; justify-content: space-between; }
.vp-qrbox { justify-self: center; width: min(280px, 72vw); padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.vp-qrbox svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.vp-qrhint { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.vp-codebig { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 7px; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vp-linkrow { display: flex; gap: 8px; }
.vp-linkrow input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); font-size: 13.5px; }
.vp-linkrow .btn { padding: 0 14px; white-space: nowrap; }
.vp-invitesheet .vp-hbtns .btn { flex: 1; padding: 10px 12px; }
.vp-invitesheet .ic, .vp-linkrow .ic { width: 16px; height: 16px; }
.vp-cam { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 1; max-height: 55vh; justify-self: center; width: min(360px, 100%); }
.vp-cam video { width: 100%; height: 100%; object-fit: cover; }
.vp-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
.vp-guidesheet { max-height: 82vh; overflow: auto; }
.vp-guidesheet .vp-acc:first-of-type { margin-top: 0; }
.vp-lobby.has-invite .vp-steps { display: none; }
/* Vibe Party: tên nhóm + nghe cùng */
.vp-top h1 { min-width: 0; }
.vp-top h1 #vp-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vp-top h1 .vp-rename { width: 34px; height: 34px; color: var(--muted); flex: none; }
.vp-top h1 .vp-rename[hidden] { display: none; }
.vp-top h1 .vp-rename .ic { width: 18px; height: 18px; }
.vp-status .ic { vertical-align: -2px; }
.vp-tag.ls { background: rgba(34,197,94,.16); color: #22c55e; }
.vp-stoplisten { padding: 10px 18px; }
.vp-stoplisten .ic { width: 18px; height: 18px; }
.vp-stoplisten { white-space: nowrap; flex: none; }
/* Vibe Party: hiệu ứng khi bài được ưu tiên (chỉ transform/opacity, chạy một lần, tắt khi giảm chuyển động) */
.vp-row { position: relative; }
.vp-row.prio-in::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px #f59e0b, 0 8px 28px rgba(245,158,11,.45); animation: vp-glow 1.1s ease-out forwards; }
.vp-row.prio-in .vp-badge { animation: vp-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.vp-row.prio-in [data-vp=prio] .ic { animation: vp-spin .6s cubic-bezier(.3,1.4,.5,1) both; }
.vp-acts [data-vp=prio]:active .ic { transform: scale(.7); }
.vp-acts [data-vp=prio] .ic { transition: transform .15s; }
@keyframes vp-glow { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vp-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes vp-spin { 0% { transform: scale(.5) rotate(-90deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .vp-row.prio-in::after, .vp-row.prio-in .vp-badge, .vp-row.prio-in [data-vp=prio] .ic { animation: none; } }

/* ---- Vibe Party: bố cục theo cỡ màn hình (điện thoại -> máy tính bảng -> desktop 2 cột -> TV) ---- */
.vp-lobby { max-width: 860px; margin: 0 auto; }
.vp-now { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art np" "prog prog" "line line" "ctl ctl"; gap: 0 14px; align-items: start; }
.vp-art { grid-area: art; width: 96px; }
.vp-np { grid-area: np; }
.vp-prog { grid-area: prog; margin-top: 14px; }
.vp-line { grid-area: line; margin: 10px 0 0; }
.vp-ctlbox { grid-area: ctl; margin-top: 12px; min-width: 0; }
.vp-ctlbox .vp-enable { margin-top: 0; }
.vp-ctl { flex-wrap: wrap; row-gap: 8px; }
.vp-vol { flex: 1 1 120px; width: auto; min-width: 0; max-width: 220px; margin-left: auto; }
.vp-title { font-size: 17px; }
.vp-tabs button { white-space: nowrap; }
.vp-side { display: block; }
@media (max-width: 380px) {
  .vp-top h1 { font-size: 19px; gap: 6px; }
  .vp-top h1 #vp-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .vp-leave { padding: 6px 12px; font-size: 13px; }
  .vp-now { padding: 12px; grid-template-columns: 80px minmax(0, 1fr); gap: 0 12px; }
  .vp-art { width: 80px; }
  .vp-title { font-size: 15.5px; }
  .vp-tabs button { font-size: 13px; padding: 9px 2px; }
  .vp-count { min-width: 16px; line-height: 16px; font-size: 11px; padding: 0 4px; }
  .vp-row, .vp-row.add { grid-template-columns: 64px minmax(0, 1fr); row-gap: 2px; }
  .vp-row .vp-pos { display: none; }
  .vp-row .vp-th { width: 64px; }
  .vp-row .vp-acts { grid-column: 1 / -1; justify-content: flex-end; margin-top: -2px; }
  .vp-row.add .vp-acts { grid-column: 3; }
  .vp-row.add { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .vp-hbtns .chip { padding: 7px 11px; font-size: 13px; }
  .vp-code-v { font-size: 24px; letter-spacing: 5px; }
}
@media (min-width: 700px) {
  .vp-now { grid-template-columns: 168px minmax(0, 1fr); grid-template-areas: "art np" "art prog" "art line" "art ctl"; gap: 0 20px; padding: 18px; align-content: start; }
  .vp-art { width: 168px; }
  .vp-title { font-size: 22px; }
  .vp-prog { margin-top: 14px; }
  .vp-row { padding: 10px 12px; }
}
@media (min-width: 1180px) {   /* tính cả thanh bên 220px: vùng nội dung >= 900px mới đủ chỗ cho 2 cột */
  .vp { max-width: 1180px; }
  .vp-cols { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 14px; }
  .vp-side { position: sticky; top: calc(var(--top) + var(--sat) + 12px); max-height: calc(100vh - var(--top) - var(--sat) - 24px); overflow: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
  .vp-side::-webkit-scrollbar { display: none; }
  .vp-side > :first-child { margin-top: 0; }
  .vp-side .vp-now { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "np" "prog" "line" "ctl"; justify-items: stretch; }
  .vp-side .vp-art { width: min(100%, 260px); justify-self: center; }
  .vp-side .vp-np { margin-top: 16px; }
  .vp-side .vp-prog { margin-top: 12px; }
  .vp-main .vp-tabs { top: calc(var(--top) + var(--sat) + 12px); margin-top: 0; }
}
@media (min-width: 1400px) { .vp { max-width: 1320px; } .vp-cols { grid-template-columns: 440px minmax(0, 1fr); } .vp-side .vp-art { width: min(100%, 300px); } }
/* TV: hai cột từ 800px (khung nhìn TV thường chỉ 600-960px CSS), mục tiêu bấm to, ảnh bìa theo chiều cao màn hình */
@media (min-width: 800px) {
  html.tv-ui .vp { max-width: none; }
  html.tv-ui .vp-cols { display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 14px; }
  html.tv-ui .vp-side { position: sticky; top: calc(var(--top) + var(--sat) + 12px); max-height: calc(100vh - var(--top) - var(--sat) - 24px); overflow: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
  html.tv-ui .vp-side::-webkit-scrollbar { display: none; }
  html.tv-ui .vp-side > :first-child { margin-top: 0; }
  html.tv-ui .vp-side .vp-now { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "np" "prog" "line" "ctl"; justify-items: stretch; }
  html.tv-ui .vp-side .vp-art { width: min(100%, min(32vh, 280px)); justify-self: center; }
  html.tv-ui .vp-side .vp-np { margin-top: 16px; }
  html.tv-ui .vp-side .vp-prog { margin-top: 12px; }
  html.tv-ui .vp-main .vp-tabs { top: calc(var(--top) + var(--sat) + 12px); margin-top: 0; }

  html.tv-ui .vp-acts .icon-btn, html.tv-ui .vp-top .icon-btn { width: 48px; height: 48px; }
  html.tv-ui .vp-ctl .icon-btn { width: 52px; height: 52px; }
  html.tv-ui .vp-ctl .vp-big { width: 64px; height: 64px; }
  html.tv-ui .vp-tabs button, html.tv-ui .vp-seg button, html.tv-ui .vp-hbtns .chip { font-size: 15px; padding-top: 11px; padding-bottom: 11px; }
}
html.tv-ui .vp :is(button, a, input, summary):focus-visible, html.tv-ui .vp .sp-focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.vp-mm b { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
/* khung nhìn thấp (TV 960x540, điện thoại nằm ngang): cột trái cuộn cùng trang thay vì dính + cuộn riêng (điều khiển bằng remote/cuộn tay đều tới được mọi nút) */
@media (min-width: 800px) and (max-height: 780px) {
  .vp-side, html.tv-ui .vp-side { position: static; max-height: none; overflow: visible; }
  .vp-main .vp-tabs, html.tv-ui .vp-main .vp-tabs { position: static; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 999px) { .vp-now { grid-template-columns: 96px minmax(0, 1fr); } }
@media (max-width: 380px) { .vp-tips li { flex-wrap: wrap; } .vp-tips li .chip { margin-left: 34px; } }
/* Vibe Party: ai đang nghe bài nào */
.vp-ears { display: inline-flex; align-items: center; margin-left: 2px; }
.vp-ears .ic { width: 14px; height: 14px; color: #22c55e; margin-right: 5px; }
.vp-ear { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 800; color: #fff; background: hsl(var(--h) 65% 46%); border: 2px solid var(--surface); margin-left: -6px; box-sizing: content-box; }
.vp-ears .ic + .vp-ear { margin-left: 0; }
.vp-ear.me { outline: 2px solid #22c55e; outline-offset: 0; }
.vp-ears b { font-size: 11px; margin-left: 4px; color: var(--muted); }
.vp-listening { display: inline-flex; align-items: center; gap: 5px; color: #22c55e; max-width: 100%; }
.vp-listening .ic { width: 13px; height: 13px; flex: none; }
.vp-mm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-histbtn { display: flex; align-items: center; gap: 8px; width: 100%; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 650; font-size: 14px; color: var(--muted); text-align: left; flex-wrap: wrap; }
.vp-histbtn .ic { width: 18px; height: 18px; }
.vp-histbtn .vp-badge .ic { width: 12px; height: 12px; }
.vp-chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.vp-histbtn[aria-expanded="true"] .vp-chev { transform: rotate(-135deg); }
.vp-hist { margin-top: 8px; }
.vp-row.past { opacity: .8; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.vp-row.past .vp-pos .ic { width: 16px; height: 16px; color: var(--muted); }
/* Vibe Party: playlist dùng chung */
.vp-row.is-cur { border-color: rgba(34,197,94,.6); background: linear-gradient(90deg, rgba(34,197,94,.12), transparent 65%), var(--surface); }
.vp-row.is-cur .vp-pos { color: #22c55e; }
.vp-playbtn { color: var(--text); }
.vp-row .vp-badge .ic { width: 12px; height: 12px; }

/* ===== Vibe Party: trình phát đầy đủ (dùng lại .player-mount/.stage/.controls của trang phát) + mini player của nhóm ===== */
#vp-now { display: block; padding: 0; border: 0; background: none; border-radius: 0; overflow: visible; margin-top: 12px; }
.vp-pm .stage { cursor: default; }
.vp-pm .vp-art-empty { color: rgba(255,255,255,.45); display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(90% 90% at 50% 40%, rgba(var(--art), .35), #0b0b12); }
.vp-pm .vp-art-empty .ic { width: 56px; height: 56px; }
.vp-pm .vp-art-empty[hidden], .vp-pm .art[hidden] { display: none; }
.vp-pm .vp-eq { position: absolute; left: 10px; bottom: 10px; right: auto; z-index: 2; }
.vp-bigplay { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border: 0; border-radius: 999px; color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap;
  background: var(--grad); box-shadow: 0 10px 34px rgba(236,72,153,.5); }
.vp-bigplay[hidden] { display: none; }
.vp-bigplay .ic { width: 22px; height: 22px; }
.vp-bigplay:active { transform: translate(-50%, -50%) scale(.96); }
.vp-pm .stage-fs[hidden] { display: none; }
.vp-pm .controls[hidden] { display: none; }
.vp-np { padding: 14px 4px 0; display: grid; gap: 3px; min-width: 0; }
.vp-np .vp-lab { margin: 0; }
.vp-np .vp-title { font-size: 20px; }
.vp-line { margin: 8px 4px 0; }
.vp-line[hidden], .vp-joinbox[hidden], .vp-stopbox[hidden] { display: none; }
.vp-joinbox { margin: 8px 4px 0; }
.vp-joinbox .vp-hint { margin: 0; }
.vp-stopbox { margin: 10px 4px 0; }
.vp-stoplisten { padding: 9px 18px; white-space: nowrap; }
.vp-stoplisten .ic { width: 18px; height: 18px; }
.vp-pm .acts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vp-pm .actions .vol { width: 130px; }
@media (max-width: 440px) { .vp-pm .actions { flex-wrap: wrap; } .vp-pm .actions .vol { width: 100%; } .vp-pm .acts { flex-basis: 100%; } }
.vp-pm:fullscreen .vp-np, .vp-pm.pseudo-fs .vp-np { display: none; }

/* mini player của nhóm: dùng cấu trúc/CSS của mini gốc, xếp ngay trên nó (mini gốc giữ nguyên) */
.vp-mini { z-index: 38; border-color: rgba(139,92,246,.55); background-image: linear-gradient(100deg, rgba(139,92,246,.28), rgba(236,72,153,0) 70%); }
body.has-mini .vp-mini { bottom: calc(var(--tab) + var(--mini) + var(--sab) + 16px); }
.vp-mini .mini-info { text-decoration: none; color: inherit; }
.vp-mini .mini-right.vp-always { display: flex; }
.vp-mini-listen { padding: 8px 14px; white-space: nowrap; font-size: 14px; }
.vp-mini-listen .ic { width: 18px; height: 18px; }
.vp-mini-stop { color: var(--muted); }
@media (min-width: 700px) { .vp-mini-stop { display: none; } }
body.has-party { padding-bottom: calc(var(--tab) + var(--mini) + var(--sab) + 20px); }
body.has-party.has-mini { padding-bottom: calc(var(--tab) + var(--mini) * 2 + var(--sab) + 32px); }
@media (min-width: 960px) {
  body.has-mini .vp-mini { bottom: calc(16px + var(--mini) + 10px); }
  body.has-party { padding-bottom: calc(var(--mini) + 40px); }
  body.has-party.has-mini { padding-bottom: calc(var(--mini) * 2 + 56px); }
}
html.tv-ui body.has-mini .vp-mini { bottom: calc(var(--mini) + 24px); }
@media (max-width: 699px) { body.typing .vp-mini { display: none; } }
/* trình phát nhóm trong cột hẹp (cột trái 400-440px, tablet): hàng âm lượng và hàng nút chức năng xuống dòng riêng, không bị cắt */
.vp-pm .actions { flex-wrap: wrap; row-gap: 6px; }
.vp-pm .actions .vol { flex: 1 1 100%; width: 100%; }
.vp-pm .actions .acts { flex: 1 1 100%; }