:root{
  --bg:#0b0c0f;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.09);
  --fg:#f4f5f7;
  --muted:#8e949e;
  --accent:#ff6a45;
  --accent-2:#ffab4a;
  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  --r:18px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
body.full-open{overflow:hidden}
.hidden{display:none !important}
svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; display:block}

/* ---------- nền mờ theo ảnh bìa đang phát ---------- */
.backdrop{
  position:fixed; inset:-20% -20% auto -20%; height:70vh; z-index:-1;
  background-size:cover; background-position:center;
  filter:blur(80px) saturate(1.6); opacity:0; transform:scale(1.1);
  transition:opacity .8s ease, background-image .4s;
}
.backdrop.on{opacity:.34}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,15,.25) 0%,var(--bg) 62%);
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:6px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  background:linear-gradient(180deg,rgba(11,12,15,.92),rgba(11,12,15,.6));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.topbar h1{
  flex:1; margin:0; font-size:21px; font-weight:700; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  background:var(--surface); color:var(--fg); border:1px solid var(--line);
  border-radius:12px; cursor:pointer; transition:.15s;
}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.spin svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.view{padding:8px 16px 24px; max-width:900px; margin:0 auto}

/* ---------- thẻ "tiếp tục nghe" ---------- */
.resume{
  display:flex; gap:14px; align-items:center; margin:6px 0 26px;
  padding:14px; border-radius:var(--r); cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow); transition:.15s;
}
.resume:hover{background:var(--surface-2)}
.resume:active{transform:scale(.99)}
.resume .art{width:64px; height:64px; border-radius:12px; flex:none}
.resume-txt{flex:1; min-width:0}
.resume-kicker{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.resume-title{font-size:15.5px; font-weight:650; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.resume-sub{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.resume .round{flex:none}

.section-h{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px 2px}

/* ---------- lưới thư viện ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:20px 16px}
.book{cursor:pointer; transition:.18s}
.book:active{transform:scale(.97)}
.art{
  position:relative; width:100%; aspect-ratio:1/1; max-width:100%;
  border-radius:14px; overflow:hidden; background:var(--surface);
  box-shadow:var(--shadow); display:grid; place-items:center;
}
.art img{width:100%; height:100%; object-fit:cover; display:block}
.art .letter{font-size:2.6em; font-weight:800; color:rgba(255,255,255,.9); text-shadow:0 2px 12px rgba(0,0,0,.3)}
.book .art{transition:.18s}
.book:hover .art{transform:translateY(-3px); box-shadow:0 24px 46px -18px rgba(0,0,0,1)}
.book-name{margin-top:11px; font-size:14.5px; font-weight:620; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.book-sub{font-size:12.5px; color:var(--muted); margin-top:3px}

/* ---------- danh sách chương ---------- */
.book-head{display:flex; gap:16px; align-items:flex-end; margin:4px 0 26px}
.book-head .art{width:118px; height:118px; flex:none}
.book-head-txt h2{margin:0 0 6px; font-size:24px; font-weight:750; letter-spacing:-.02em; line-height:1.2}
.book-head-txt p{margin:0; color:var(--muted); font-size:13.5px}
.play-all{margin-top:12px; display:inline-flex; align-items:center; gap:8px;
  background:var(--grad); color:#fff; border:0; border-radius:999px;
  padding:10px 20px; font-size:14px; font-weight:650; cursor:pointer}
.play-all:active{transform:scale(.96)}

.chapters{list-style:none; margin:0; padding:0}
.chapters li{
  display:flex; align-items:center; gap:14px; padding:13px 12px;
  border-radius:12px; cursor:pointer; transition:.13s; position:relative;
}
.chapters li:hover{background:var(--surface)}
.chapters li:active{transform:scale(.995)}
.chapters li + li{margin-top:2px}
.chapters li.on{background:var(--surface)}
.chapters li.on .ch-name{color:var(--accent); font-weight:650}
.idx{width:26px; flex:none; text-align:center; color:var(--muted);
  font-size:13px; font-variant-numeric:tabular-nums}
.ch-body{flex:1; min-width:0}
.ch-name{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-prog{height:3px; border-radius:2px; background:var(--surface-2); margin-top:7px; overflow:hidden}
.ch-prog i{display:block; height:100%; background:var(--grad); border-radius:2px}
.ch-time{font-size:11.5px; color:var(--muted); margin-top:5px}
.done{color:var(--muted); flex:none}

/* thanh sóng nhạc khi đang phát */
.eq{display:flex; align-items:flex-end; gap:2.5px; height:15px; width:26px; justify-content:center; flex:none}
.eq i{width:3px; background:var(--accent); border-radius:2px; animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.25s} .eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.paused .eq i{animation-play-state:paused}

/* ---------- mini player ---------- */
.round{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border:0; border-radius:50%; background:var(--grad); color:#fff; cursor:pointer;
  box-shadow:0 6px 18px -6px var(--accent);
}
.round:active{transform:scale(.9)}
.round svg{width:17px; height:17px}
.mini{
  position:fixed; left:12px; right:12px; z-index:30;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:16px; border:1px solid var(--line); overflow:hidden;
  background:rgba(24,26,31,.82); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  box-shadow:var(--shadow);
  animation:rise .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise{from{transform:translateY(120%)}}
.mini-main{display:flex; align-items:center; gap:12px; flex:1; min-width:0; cursor:pointer;
  background:none; border:0; color:inherit; text-align:left; padding:0}
.mini-art{width:42px; height:42px; border-radius:10px; flex:none; background-size:cover;
  background-position:center; background-color:var(--surface-2); display:grid; place-items:center;
  font-weight:800; font-size:17px}
.mini-meta{flex:1; min-width:0}
.mini-title{font-size:14px; font-weight:620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-book{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-bar{position:absolute; left:0; right:0; bottom:0; height:2.5px; background:rgba(255,255,255,.08)}
.mini-bar-fill{height:100%; width:0; background:var(--grad); transition:width .25s linear}

/* ---------- màn hình phát toàn màn hình ---------- */
.full{
  position:fixed; inset:0; z-index:40;
  background:rgba(14,15,19,.86); backdrop-filter:blur(34px); -webkit-backdrop-filter:blur(34px);
  transform:translateY(100%); transition:transform .38s cubic-bezier(.3,.9,.3,1);
  display:flex; flex-direction:column; overflow-y:auto;
  padding:calc(10px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
}
.full.open{transform:translateY(0)}
.grabber{
  width:44px; height:5px; border-radius:3px; border:0; padding:0; flex:none;
  background:rgba(255,255,255,.28); margin:6px auto 0; cursor:pointer;
}
.full-inner{flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:22px; max-width:460px; width:100%; margin:0 auto; padding:18px 0}
.full-art{
  width:100%; aspect-ratio:1/1; max-width:100%; border-radius:22px;
  background-size:cover; background-position:center; background-color:var(--surface);
  box-shadow:0 40px 70px -30px rgba(0,0,0,1); display:grid; place-items:center;
  font-size:76px; font-weight:800; color:rgba(255,255,255,.9);
}
.full-meta h2{margin:0; font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.3}
.full-meta p{margin:6px 0 0; color:var(--muted); font-size:14.5px}

.seek-wrap{margin-top:-4px}
.seek{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px;
  background:linear-gradient(90deg,var(--accent) var(--p,0%),rgba(255,255,255,.14) var(--p,0%));
  outline:none; cursor:pointer;
}
.seek::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.6); cursor:grab}
.seek::-moz-range-thumb{width:16px; height:16px; border:0; border-radius:50%; background:#fff}
.times{display:flex; justify-content:space-between; margin-top:9px;
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

.controls{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ctl{
  display:grid; place-items:center; background:none; border:0; color:var(--fg);
  cursor:pointer; border-radius:14px; width:52px; height:52px; transition:.15s; position:relative;
}
.ctl:hover{background:var(--surface)}
.ctl:active{transform:scale(.9)}
.ctl svg{width:26px; height:26px}
.ctl.skip b{position:absolute; font-size:8.5px; font-weight:700; letter-spacing:.02em;
  top:50%; left:50%; transform:translate(-50%,-38%)}
.ctl.play{
  width:74px; height:74px; border-radius:26px; background:var(--grad); color:#fff;
  box-shadow:0 14px 32px -10px var(--accent);
}
.ctl.play svg{width:30px; height:30px}
.ctl.play:hover{background:var(--grad); filter:brightness(1.07)}

.extras{display:flex; justify-content:center; gap:10px}
.chip{
  background:var(--surface); color:var(--fg); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.chip:hover{background:var(--surface-2)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--grad); border-color:transparent; color:#fff}

/* ---------- cài đặt / form ---------- */
.form{display:flex; flex-direction:column; gap:18px; max-width:520px}
label{font-size:12.5px; color:var(--muted); display:block; margin-bottom:7px; font-weight:600}
input[type=text],input[type=password]{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--fg);
  border-radius:12px; padding:13px 14px; font-size:15px; outline:none; transition:.15s;
}
input:focus{border-color:var(--accent); background:var(--surface-2)}
.btn{border:0; border-radius:12px; padding:14px 18px; font-size:15px; font-weight:650;
  cursor:pointer; background:var(--surface-2); color:var(--fg); transition:.15s}
.btn.primary{background:var(--grad); color:#fff; box-shadow:0 12px 28px -12px var(--accent)}
.btn:active{transform:scale(.98)}
.tabs{display:flex; gap:6px; background:var(--surface); padding:5px; border-radius:14px}
.tab{flex:1; background:transparent; color:var(--muted); border:0; border-radius:10px;
  padding:11px 8px; font-size:12.5px; font-weight:650; cursor:pointer; line-height:1.35; transition:.15s}
.tab.on{background:var(--surface-2); color:var(--fg)}
.help{font-size:13px; color:var(--muted); line-height:1.65; margin-top:14px}
.help ol{padding-left:19px; margin:9px 0}
.help li{margin-bottom:5px}
code{background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.err{color:var(--accent); font-size:13px; min-height:18px; margin:0}

/* ---------- trang quản trị ---------- */
body.admin{padding-bottom:40px}
body.admin .view{max-width:760px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; margin-bottom:22px}
.panel-h{font-size:15px; font-weight:700; margin:0 0 16px; letter-spacing:-.01em}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.row.between{justify-content:space-between; margin-bottom:14px}

.drop{
  margin-top:16px; padding:34px 20px; border-radius:14px; cursor:pointer; text-align:center;
  border:2px dashed var(--line); background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; align-items:center; gap:5px; transition:.15s;
}
.drop:hover{border-color:var(--muted); background:var(--surface)}
.drop.over{border-color:var(--accent); background:rgba(255,106,69,.1)}
.drop-icon{width:42px; height:42px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-size:20px; font-weight:700; margin-bottom:6px}
.drop b{font-size:14.5px}
.drop span{font-size:12.5px; color:var(--muted)}

.queue{list-style:none; margin:18px 0 0; padding:0}
.qi{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line)}
.qi.bad .qi-sub{color:var(--accent)}
.qi-idx{width:28px; flex:none; text-align:center; font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums}
.qi-body{flex:1; min-width:0}
.qi-name{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qi-input{padding:8px 10px; font-size:14px; border-radius:9px}
.qi-sub{font-size:11.5px; color:var(--muted); margin-top:5px}
.qi-x{background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer;
  padding:6px 8px; border-radius:8px; flex:none}
.qi-x:hover{background:var(--surface-2); color:var(--fg)}
.qi-x:disabled{opacity:.4}

.acc{border-top:1px solid var(--line)}
.acc summary{display:flex; align-items:baseline; gap:10px; padding:14px 2px; cursor:pointer;
  list-style:none; flex-wrap:wrap}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:'▸'; color:var(--muted); font-size:11px; transition:.15s}
.acc[open] summary::before{transform:rotate(90deg)}
.acc-name{font-size:15px; font-weight:620; flex:1; min-width:0}
.acc-sub{font-size:12px; color:var(--muted)}
.acc .chapters{padding:0 0 12px 18px}
.acc .chapters li{cursor:default; padding:9px 10px}
.acc .chapters li:hover{background:transparent}

/* ---------- trạng thái rỗng / loading ---------- */
.empty{text-align:center; color:var(--muted); padding:70px 16px; font-size:14.5px; line-height:1.7}
.empty .big{font-size:40px; margin-bottom:14px; opacity:.5}
.skel{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:20px 16px}
.skel .s{border-radius:14px; aspect-ratio:1/1;
  background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%; animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-120% 0}}

/* ---------- gate ---------- */
.gate{position:fixed; inset:0; z-index:60; background:var(--bg);
  display:grid; place-items:center; padding:24px}
.gate-box{width:100%; max-width:320px; display:flex; flex-direction:column; gap:14px; text-align:center}
.gate-mark{width:64px; height:64px; margin:0 auto 4px; border-radius:20px; background:var(--grad);
  display:grid; place-items:center; font-size:28px; color:#fff;
  box-shadow:0 18px 38px -14px var(--accent)}
.gate-box h1{margin:0 0 6px; font-size:23px; font-weight:750; letter-spacing:-.02em}

@media (min-width:640px){
  .full-inner{gap:26px}
  .grid{gap:24px 20px}
}

/* ============================================================
   Màn hình ngang, thấp — đầu Android trên xe (Teyes, Atoto…),
   thường 1024×600. Bố cục dọc sẽ tràn nên chuyển sang 2 cột.
   ============================================================ */
@media (orientation:landscape) and (max-height:620px){
  .view{max-width:none; padding:6px 20px 20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}

  .full{padding:12px 24px}
  .full-inner{
    flex-direction:row; align-items:center; gap:28px;
    max-width:none; padding:0;
  }
  .full-art{width:min(38vh,230px); aspect-ratio:1/1; height:auto; flex:none; border-radius:16px; font-size:54px}
  .full-side{flex:1; min-width:0; display:flex; flex-direction:column; gap:16px}
  .full-meta h2{font-size:19px}
  .grabber{margin:0 auto}

  /* Nút to hơn cho ngón tay khi ngồi trên xe */
  .ctl{width:58px; height:58px}
  .ctl svg{width:28px; height:28px}
  .ctl.play{width:68px; height:68px; border-radius:24px}
  .controls{justify-content:flex-start; gap:14px}
  .extras{justify-content:flex-start}

  .book-head .art{width:96px; height:96px}
  .book-head-txt h2{font-size:20px}
}

/* ============================================================
   Tương thích Chrome/WebView đời cũ trên đầu Android
   (nhiều máy còn Android 8–10, Chrome < 88).
   ============================================================ */
.backdrop{top:-20%; left:-20%; right:-20%}
body::after{top:0; right:0; bottom:0; left:0}
.gate{top:0; right:0; bottom:0; left:0}
.full{top:0; right:0; bottom:0; left:0}
.mini-bar{left:0; right:0; bottom:0}

/* aspect-ratio có từ Chrome 88 — máy cũ hơn dùng padding-top giữ ô vuông */
@supports not (aspect-ratio: 1 / 1){
  .art, .full-art{height:0; padding-top:100%; position:relative}
  .art img{position:absolute; top:0; left:0}
  .art .letter{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
  .skel .s{height:0; padding-top:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}