/* ===================================================================
   [chung] NEN MONG - @font-face, bien mau trong :root, reset, nen loang,
       va khung 3 cot (shell / sidebar / rail).

   FILE DUNG CHUNG cua ca bon nguoi: doi mot bien trong :root la doi mau
   ca bon man hinh. Bao nhom truoc khi sua.
   Cac quy tac cua thanh ben (.side-*, .nav-item, .brand) thuoc mang [C].
   =================================================================== */

/* ===================================================================
   AURELIA MUSIC - giao dien nen sang (light mode)

   FILE DUNG CHUNG. Moi khoi ben duoi co mot chu so huu ghi ngay tren
   moc comment: [A] trinh phat · [B] kham pha · [C] tai khoan & thu vien
   · [D] quan tri · [chung] ca bon nguoi.

   Chi sua trong khoi cua minh. Muon doi khoi [chung] - bien mau o :root,
   "nen", "khung", "man hinh nho dan" - thi bao ca nhom truoc khi sua,
   vi cham vao do la ca bon man hinh doi theo.
   =================================================================== */

@font-face { font-family:"SpotifyMix"; src:url("/font/Spotify/SpotifyMixUI%20Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"SpotifyMix"; src:url("/font/Spotify/SpotifyMixUI%20Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"SpotifyTitle"; src:url("/font/Spotify/SpotifyMixUI%20Title%20Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"SpotifyTitle"; src:url("/font/Spotify/SpotifyMixUI%20Title%20Extrabold.ttf") format("truetype"); font-weight:800 900; font-display:swap; }

:root{
  /* chu */
  --ink:#14171a;
  --muted:rgba(20,23,26,0.68);
  --faint:rgba(20,23,26,0.46);
  /* nhan */
  --gold:#0b7d5e;
  --goldb:#0f9d76;          /* mau nhan chinh, du tuong phan tren nen sang */
  --goldb-hi:#0c8663;
  --warm:#b5730b;
  --acc-soft:rgba(15,157,118,0.10);
  --acc-soft2:rgba(15,157,118,0.18);
  --acc-row:rgba(15,157,118,0.09);
  --acc-line:rgba(15,157,118,0.45);
  /* be mat */
  --bg:#eeece7;             /* nen trang, hoi am */
  --chrome:#ffffff;         /* thanh ben, panel dia than, thanh phat */
  --panel:#ffffff;          /* the noi dung */
  --panel2:#f0eeea;         /* trang thai hover */
  --line:rgba(20,23,26,0.13);
  --shadow-sm:0 1px 2px rgba(20,23,26,.06);
  --shadow-md:0 4px 14px rgba(20,23,26,.08);
  --shadow-lg:0 18px 44px rgba(20,23,26,.14);
  /* chu & khoang cach */
  --font-body:'SpotifyMix','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display:'SpotifyTitle','SpotifyMix','Segoe UI',system-ui,sans-serif;
  --s1:4.6px; --s2:9.2px; --s3:13.8px; --s4:18.4px; --s6:27.6px; --s8:36.8px;
  --r-sm:2px; --r-md:4px; --r-lg:7px;
  --spin:4s;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; overflow:hidden; }
button,input,select{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--goldb); }
.hidden{ display:none !important; }
.tnum{ font-feature-settings:'tnum'; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.ellip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
::selection{ background:var(--acc-soft2); }
:focus-visible{ outline:2px solid var(--goldb); outline-offset:2px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(20,23,26,.18); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(20,23,26,.28); }
::-webkit-scrollbar-track{ background:transparent; }

@keyframes vinylspin{ to{ transform:rotate(360deg); } }
@keyframes floaty{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(4%,-3%); } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes glowpulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.6; } }

/* --------------- [chung] nen --------------- */
.ambient{ position:fixed; inset:-10%; z-index:0; filter:blur(90px); opacity:.34;
  animation:floaty 16s ease-in-out infinite; }
.scrim{ position:fixed; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(238,236,231,.86) 46%, rgba(238,236,231,.96) 100%); }

/* --------------- [chung] khung: shell, sidebar, topbar, rail --------------- */
.app{ position:relative; height:100vh; }
.shell{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; }
.row{ flex:1; display:flex; min-height:0; }

.sidebar{ width:250px; flex-shrink:0; display:flex; flex-direction:column; gap:var(--s6);
  padding:var(--s6) var(--s4); background:var(--chrome); border-right:1px solid var(--line); }
.brand{ font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:10px; padding:0 var(--s2);
  background:none; border:0; color:var(--ink); text-align:left; }
.brand-lg{ font-size:34px; justify-content:center; }
.brand-dot{ width:7px; height:7px; border-radius:50%; border:1.5px solid var(--goldb); }

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav-item{ display:flex; align-items:center; gap:13px; padding:11px var(--s3); background:none; border:0;
  border-left:2px solid transparent; color:var(--muted); text-align:left; font-size:16px;
  border-radius:0 var(--r-md) var(--r-md) 0; }
.nav-item:hover{ background:var(--panel2); color:var(--ink); }
.nav-item.is-on{ background:var(--acc-soft); border-left-color:var(--goldb); color:var(--goldb); }

.hr{ border:0; height:1px; background:var(--line); margin:0; }
.kicker{ text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--faint); }
.side-head{ display:flex; align-items:center; justify-content:space-between; padding:0 var(--s2); margin-bottom:calc(-1 * var(--s4)); }
.icon-btn{ background:none; border:0; color:var(--faint); padding:5px; display:grid; border-radius:var(--r-md); }
.icon-btn:hover{ color:var(--ink); background:var(--panel2); }
.side-list{ flex:1; display:flex; flex-direction:column; gap:2px; overflow-y:auto; overflow-x:hidden; min-width:0; }
.side-pl{ display:flex; align-items:center; gap:11px; padding:7px var(--s2); background:none; border:0;
  color:var(--muted); text-align:left; border-radius:var(--r-md); font-size:13.5px; min-width:0; }
.side-pl:hover{ color:var(--ink); background:var(--panel2); }
.side-pl.is-on{ color:var(--goldb); background:var(--acc-soft); }
.chip-sq{ display:inline-block; width:30px; height:30px; border-radius:var(--r-sm); flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(20,23,26,.08); }
.side-user{ margin-top:auto; display:flex; align-items:center; gap:11px; padding:var(--s2); border-top:1px solid var(--line); }
.avatar{ border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-family:var(--font-display);
  font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); }