/* ========= Theme (v1.6) ========= */
*{box-sizing:border-box}
html,body{height:100%}
:root{
  --accent:#9b5cff;
  --page-width:1440px;
  --panel-alpha:.82;
  --panel-blur:18px;
  --bg-dim:.72;
  --font-color:#f7f3ff;
  --font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --radius:18px;
}

body{
  margin:0;
  font-family: var(--font-family);
  color: var(--font-color);
  background:#070610;
  overflow-x:hidden;
  letter-spacing:.1px;
}
a{color:inherit; text-decoration:none}
code{background:rgba(255,255,255,.08); padding:2px 6px; border-radius:10px}

/* ========= Background ========= */
.site-bg{
  position:fixed;
  inset:0;
  background-image: var(--site-bg);
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  filter: blur(var(--home-bg-blur)) saturate(1.08) contrast(1.05);
  will-change: transform, filter;
  z-index:-3;
}
.site-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 18% 18%, rgba(155,92,255,.22), transparent 60%),
    radial-gradient(900px 520px at 80% 22%, rgba(255,0,140,.16), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,var(--bg-dim)), rgba(0,0,0,var(--bg-dim)));
  backdrop-filter: blur(2px);
}

/* ========= Layout (A–F) ========= */
.wrap{
  width: min(var(--page-width), calc(100% - 64px));
  margin: 24px auto 28px;
  display:flex;
  flex-direction:column;
}
.content-grid{
  display:grid;
  grid-template-columns: 204px 1fr 216px;
  column-gap: 110px;
  align-items:stretch;
  margin-bottom: 76px;
}

/* ========= Glass Frames ========= */
.frame{
  position:relative;
  background: rgba(14, 11, 26, var(--panel-alpha));
  border:1px solid rgba(155,92,255,.22);
  border-radius: var(--radius);
  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(var(--panel-blur));
  overflow:hidden;
}
.frame::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 220px at 18% 10%, rgba(155,92,255,.18), transparent 60%);
  pointer-events:none;
}
.frame-title{
  padding:14px 16px 10px;
  font-weight:900;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.frame-title::after{
  content:"";
  height:1px;
  flex:1;
  background: linear-gradient(90deg, rgba(155,92,255,.45), rgba(255,255,255,0));
  opacity:.9;
}

/* ========= Frame A ========= */
.frame-a{
  height: 92px;
  margin-bottom: 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
}
.brand{display:flex; flex-direction:column; gap:5px}
.logo{font-size:22px; font-weight:1000; letter-spacing:.4px}
.slogan{font-size:12.5px; opacity:.78; font-weight:700}
.topnav{display:flex; gap:14px; font-weight:900; opacity:.92}
.topnav a{opacity:.78}
.topnav a:hover{opacity:1}
.topnav a.active{color:var(--accent); opacity:1}
.auth{display:flex; align-items:center; gap:10px}
.me{font-weight:900; opacity:.92}

/* ========= Buttons / inputs ========= */
.btn{
  border:0;
  padding:10px 14px;
  border-radius: 14px;
  font-weight:1000;
  cursor:pointer;
  background: linear-gradient(180deg, rgba(155,92,255,1), rgba(127,63,255,1));
  color:white;
  box-shadow: 0 16px 42px rgba(155,92,255,.28);
}
.btn.ghost{
  background: rgba(255,255,255,.07);
  color: var(--font-color);
  box-shadow:none;
  border:1px solid rgba(155,92,255,.22);
}
.btn:hover{filter:brightness(1.05)}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(155,92,255,.22);
  background: rgba(255,255,255,.06);
  color: var(--font-color);
  outline:none;
}

/* Fix: dropdown options should match dark theme (v3.12) */
select{ color-scheme: dark; }
select option, select optgroup{
  background: rgba(14, 11, 26, .98);
  color: var(--font-color);
}
/* Range sliders: dùng màu tím (hoặc màu tuỳ chỉnh từ Admin) */
input[type="range"]{
  accent-color: var(--slider-color, var(--accent));
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 999px;
  background: var(--slider-color, var(--accent));
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--slider-color, var(--accent));
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
input::placeholder{color: rgba(255,255,255,.55)}
label{font-size:12px; font-weight:900; opacity:.85; margin-top:10px}
.err{margin:10px 0; padding:10px 12px; border-radius:14px; background:rgba(255,0,140,.14); border:1px solid rgba(255,0,140,.18); font-weight:900}
.msg{margin:10px 0; padding:10px 12px; border-radius:14px; background:rgba(155,92,255,.14); border:1px solid rgba(155,92,255,.18); font-weight:900}
.small{font-size:12px; opacity:.75}

/* ========= Range row (Admin) ========= */
.range-row{display:flex; gap:10px; align-items:center}
.range-row input[type="range"]{flex:1}
.range-row input[type="text"], .range-row input:not([type]){width:110px}

/* ========= Frame B ========= */
.frame-b{
  min-height: 92px;
  margin-bottom: 28px;
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.b-bar{
  display:flex;
  align-items:stretch;
  gap: 12px;
  flex-wrap:wrap;
}

.b-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.b-btn{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(155,92,255,.22);
  background: rgba(255,255,255,.06);
  color: var(--font-color);
  font-weight: 950;
  cursor:pointer;
  user-select:none;
  opacity:.95;
}
.b-btn:hover{ background: rgba(155,92,255,.12); border-color: rgba(155,92,255,.35); }
.b-btn.active{ background: rgba(155,92,255,.16); border-color: rgba(155,92,255,.42); }

.b-btn i{ width:18px; height:18px; opacity:.95; }

.b-search{ flex:1; min-width: 260px; display:flex; flex-direction:column; gap:8px; }
.b-search input{ width:100%; margin:0; }

.b-drawer{
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.drawer-head{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.drawer-title{
  font-weight: 950;
  letter-spacing:.2px;
}

.drawer-filter{
  flex:1;
  min-width: 200px;
  padding: 9px 12px;
  border-radius: 14px;
  border:1px solid rgba(155,92,255,.2);
  background: rgba(255,255,255,.06);
  color: inherit;
  outline: none;
}
.drawer-filter:focus{ border-color: rgba(155,92,255,.45); background: rgba(155,92,255,.08); }

.chips-wrap{
  flex-wrap: wrap;
  overflow:auto;
  max-height: 240px;
  padding-bottom: 4px;
}

.chip{ color: inherit; text-decoration:none; }

.b-group{display:flex; flex-direction:column; gap:8px}
.b-title{font-weight:900; opacity:.9}
.chips{
  display:flex; gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width: thin;
}
.chip{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(155,92,255,.18);
  font-weight:900;
  cursor:pointer;
  user-select:none;
}

.chip{ color: inherit; text-decoration: none; }
.chip:hover{ border-color: rgba(155,92,255,.35); background: rgba(155,92,255,.12); }

.browse-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; }
.browse-title{ display:flex; flex-direction:column; gap:6px; }
.browse-title .h1{ font-size:20px; font-weight:950; letter-spacing:.2px; }
.browse-img{ width:72px; height:72px; object-fit:cover; border-radius:16px; border:1px solid rgba(255,255,255,.12); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.chip:hover{background: rgba(155,92,255,.14)}
.b-search input{margin-bottom:8px}
.tabs{display:flex; gap:8px}
.tab{
  flex:1;
  border:1px solid rgba(155,92,255,.2);
  background: rgba(255,255,255,.06);
  color: var(--font-color);
  border-radius: 14px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  opacity:.92;
}
.tab.active{
  background: rgba(155,92,255,.16);
  border-color: rgba(155,92,255,.35);
}

/* ========= Frame C/D lists ========= */
.list{
  margin:0;
  padding: 0 16px 16px 34px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.list li{
  cursor:pointer;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(155,92,255,.14);
  font-weight:900;
}
.list li:hover{background: rgba(155,92,255,.12)}
.list li .small{opacity:.7}

/* ========= Frame E (Player) ========= */
.frame-e{
  min-height: 520px;
  padding: 0;
}
.player-bg{
  position:absolute;
  inset:-40px;
  background-size:cover;
  background-position:center;
  transform: scale(1.08);
  filter: saturate(1.2) contrast(1.08);
  opacity: .96;
  animation: kenburns 18s ease-in-out infinite;
}
@keyframes kenburns{
  0%{transform:scale(1.08) translate3d(0,0,0)}
  50%{transform:scale(1.18) translate3d(-18px, 10px,0)}
  100%{transform:scale(1.08) translate3d(0,0,0)}
}
.player-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(740px 320px at 20% 15%, rgba(155,92,255,.42), transparent 60%),
    radial-gradient(760px 340px at 75% 35%, rgba(255,0,140,.22), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.62));
}
.player{
  position:relative;
  z-index:2;
  padding: 18px;
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  height: 520px;
}
.cover{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cover img{
  width: 240px;
  height: 240px;
  border-radius: 24px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 65px rgba(0,0,0,.55);
}
.cover .glow{
  position:absolute;
  width: 270px;
  height: 270px;
  border-radius: 30px;
  background: radial-gradient(circle at 30% 30%, rgba(155,92,255,.6), transparent 56%);
  filter: blur(18px);
  opacity:.9;
  z-index:-1;
}
.info{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.song-title{
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: .2px;
  text-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.song-meta{opacity:.85; font-weight:700}

.progress{
  display:grid;
  grid-template-columns: 52px 1fr 52px;
  gap:10px;
  align-items:center;
  font-weight:900;
}
.progress input[type="range"]{width:100%}

.controls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.icon-btn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:1000;
  user-select:none;
}
.icon-btn.disabled{opacity:.45; cursor:not-allowed; pointer-events:none}
.icon-btn:hover{background: rgba(155,92,255,.18); border-color: rgba(155,92,255,.30)}
.play-btn{
  border:0;
  padding: 12px 18px;
  border-radius: 16px;
  cursor:pointer;
  color:white;
  font-weight:1000;
  background: linear-gradient(180deg, rgba(155,92,255,1), rgba(127,63,255,1));
  box-shadow: 0 18px 50px rgba(155,92,255,.32);
}
.icon-btn.active{background: rgba(155,92,255,.26); border-color: rgba(155,92,255,.55)}
.vol{display:flex; align-items:center; gap:8px; margin-left:auto}
.vol input{width:140px}

.queue-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-weight:1000;
  opacity:.95;
  margin-top: 4px;
}
.songlist{
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 10px;
  overflow:auto;
  flex: 1;
}
.songitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  cursor:pointer;
  border:1px solid transparent;
}
.songitem:hover{background: rgba(255,255,255,.06); border-color: rgba(155,92,255,.18)}
.songitem.active{background: rgba(155,92,255,.18); border-color: rgba(155,92,255,.32)}
.songitem .t{font-weight:1000}
.songitem .m{font-size:12px; opacity:.82; font-weight:700}

/* ========= Frame F ========= */
.frame-f{
  height: 96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
  font-weight:900;
  opacity:.92;
}

/* ========= Cards / profile ========= */
.auth-card{ padding:18px; max-width: 640px; margin: 0 auto; }
.form{display:flex; flex-direction:column; gap:10px}
.hr{border:0; height:1px; background:rgba(155,92,255,.18); margin:14px 0}

.profile-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.row{display:flex; gap:10px; align-items:center}
.row input{flex:1}
.pl-list{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.pl-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(155,92,255,.14)}
.pl-name{font-weight:1000}
.table{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.row2{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(155,92,255,.14)}
.cards{display:flex; gap:14px; margin-top:14px}
.card{flex:0 0 auto; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(155,92,255,.14); font-weight:1000}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.span2{grid-column: 1 / -1}
.grid3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px}
.admin-grid{display:grid; grid-template-columns: 1fr 1.2fr; gap:20px}

/* Admin song table (v1.9) */
.tbl{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.tbl-head,.tbl-row{display:grid;grid-template-columns: 2fr 1fr 190px;gap:12px;align-items:start}
.tbl-head{font-weight:1000;opacity:.92;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.tbl-row{padding:10px 10px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12)}
.tbl-actions{display:flex;gap:10px;justify-content:flex-end;align-items:flex-start;flex-wrap:wrap}
details.edit summary{list-style:none}
details.edit summary::-webkit-details-marker{display:none}
.edit-panel{margin-top:10px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(155,92,255,.18)}
.hide-sm{display:block}
@media (max-width: 900px){
  .hide-sm{display:none}
  .tbl-head,.tbl-row{grid-template-columns: 1fr 190px}
}

/* Admin filters + pagination (v2.0) */
.admin-filters{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-filters input,.admin-filters select{min-width: 180px}
.admin-filters input{flex:1}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.pager-pages{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.dots{opacity:.7; padding:0 4px}
.btn.disabled,[aria-disabled="true"]{pointer-events:none; opacity:.45; filter:saturate(.7)}

/* ========= Responsive ========= */
@media (max-width: 1100px){
  .content-grid{ grid-template-columns: 1fr; column-gap: 0; }
  .frame-c,.frame-d{display:none}
  .frame-b{ }
  .player{grid-template-columns: 1fr; height:auto}
  .frame-e{min-height: auto}
  .profile-grid{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr}
  .wrap{width: calc(100% - 28px)}
}

/* ========= Icon system (Lucide) v1.7 ========= */
svg.lucide{width:18px;height:18px;stroke-width:2.2;opacity:.96}
.btn svg.lucide{width:18px;height:18px}
.play-btn svg.lucide{width:22px;height:22px}
.navlink svg.lucide{width:17px;height:17px;opacity:.95}
.icon-btn svg.lucide{width:18px;height:18px}
.vol svg.lucide{width:18px;height:18px;opacity:.85}

/* Frame A nav links (icon + text) */
.topnav .navlink{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px}
.topnav .navlink:hover{background:rgba(255,255,255,.06)}
.topnav .navlink span{white-space:nowrap}

/* Buttons with icon+text */
.btn{display:inline-flex;align-items:center;gap:8px;line-height:1}
.btn.tiny{padding:8px 12px;border-radius:12px;font-size:12.5px}

/* Player controls separators */
.controls .sep{width:1px;height:28px;background:rgba(255,255,255,.10);margin:0 6px;border-radius:1px}

/* Lyrics panel */
.lyrics-wrap{
  margin-top:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(155,92,255,.22);
  border-radius:16px;
  padding:12px 12px 10px;
}

/* Lyrics modal (v1.9) */
.modal[hidden]{display:none !important}
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modal-card{
  position:relative;
  width:min(860px, calc(100% - 26px));
  margin: 60px auto 24px;
  padding:16px;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.modal-head .title{display:flex;align-items:center;gap:10px;font-weight:1000}
.modal-body pre{
  margin:0;
  padding:12px 12px;
  max-height:min(62vh, 560px);
  overflow:auto;
  white-space:pre-wrap;
  line-height:1.65;
  font-size:14px;
  background:rgba(255,255,255,.04);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}
.lyrics-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.lyrics-title{display:flex;align-items:center;gap:10px;font-weight:1000}
.lyrics{
  margin:0;
  padding:10px 10px;
  max-height:220px;
  overflow:auto;
  white-space:pre-wrap;
  line-height:1.55;
  font-size:13.5px;
  background:rgba(255,255,255,.04);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
}

/* Admin cards and file pick */
.admin-grid .frame h3{display:flex;align-items:center;gap:10px}
.filepick{display:flex;gap:10px;align-items:flex-start}
.filepick input[type="file"]{width:100%}
.filepick .thumb{width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);object-fit:cover;display:none}
.pickrow{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.grid2x{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width: 980px){.grid2x{grid-template-columns:1fr}}

/* Toggle switch (Admin UI) */
.switch{position:relative;display:inline-block;width:56px;height:32px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.18);transition:.18s;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.slider:before{position:absolute;content:"";height:26px;width:26px;left:3px;top:2.5px;background:#fff;border-radius:999px;transition:.18s;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.switch input:checked + .slider{background:rgba(155,92,255,.55);border-color:rgba(155,92,255,.65)}
.switch input:checked + .slider:before{transform:translateX(24px)}

/* Subtle smoothing */
.frame{transition:transform .18s ease, box-shadow .18s ease}
.frame:hover{box-shadow:0 22px 62px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.10)}
.songitem{transition:background .12s ease, transform .12s ease}
.songitem:hover{transform:translateY(-1px)}



/* ===== Home layout v2.6 (map2) ===== */
.home-slider .frame-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.home-slider .slider-ctrl{display:flex;gap:8px}
.slider-wrap{position:relative}
.slides-track{
  display:flex;
  gap:14px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding: 8px 2px 10px;
}
.slide-card{
  flex: 0 0 auto;
  width: 320px;
  height: 180px;
  border-radius: 18px;
  overflow:hidden;
  position:relative;
  scroll-snap-align:start;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  background: rgba(255,255,255,.06);
}
.slide-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.02);
}
.slide-card .cap{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  font-weight: 900;
  text-shadow: 0 10px 24px rgba(0,0,0,.55);
}
.slide-card:hover{transform: translateY(-2px); transition: .18s; border-color: rgba(155,92,255,.35)}
.slide-card:active{transform: translateY(0px) scale(.99)}

.home-main{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:16px;
  margin-top: 16px;
}
@media (max-width: 1100px){
  .home-main{grid-template-columns: 1fr; }
  .slide-card{width: 78vw; max-width: 360px}
}

/* Khung D tabs */
.top-tabs{display:flex; gap:8px; align-items:center}
.top-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  transition:.18s;
}
.top-tab:hover{border-color: rgba(155,92,255,.35); background: rgba(155,92,255,.12)}
.top-tab.active{
  background: rgba(155,92,255,.22);
  border-color: rgba(155,92,255,.55);
  box-shadow: 0 16px 40px rgba(155,92,255,.15);
}
.top-panels .list{margin-top:10px}
.top-panels .list[hidden]{display:none}

/* Lyrics modal zoom */
.modal-head .zoom{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.modal-head .zoom .zlbl{font-size:12px; font-weight:900; opacity:.8}
.modal-head .zoom .zval{font-size:12px; font-weight:900; opacity:.85; min-width:44px; text-align:right}
.modal-head .zoom input[type=range]{width:120px}
@media (max-width: 560px){
  .modal-head{flex-wrap:wrap; gap:10px}
  .modal-head .zoom{order: 3; width:100%; justify-content:space-between}
  .modal-head .zoom input[type=range]{flex:1; width:auto}
}


/* v3.0: clickable meta links in player */
.meta-link{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.35)}
.meta-link:hover{border-bottom-color:rgba(255,255,255,.75)}