/* Nen toi vi phan lon nghe buoi toi / trong xe. Nut to de cham duoc khi dang lai. */
:root{
  --nen:#14161a; --the:#1c1f26; --vien:#2b303a;
  --chu:#e8eaed; --nhat:#9aa3b2; --nhan:#ffb454; --nguy:#ff6b6b;
  --cham-toi-thieu:48px;      /* kich thuoc cham toi thieu cho ngon tay */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--nen); color:var(--chu);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
main{max-width:720px; margin:0 auto; padding:20px 16px 40px}
main.hep{max-width:380px; padding-top:12vh}
h1{font-size:1.5rem; line-height:1.3; margin:.2em 0 .5em}
h2{font-size:1.15rem; margin:1.4em 0 .5em}
h3{font-size:1rem; margin:1.2em 0 .4em}
a{color:inherit}
.nhat{color:var(--nhat); font-size:.9rem}
.loi{background:#3a1e22; border:1px solid var(--nguy); color:#ffd7d7; padding:10px 14px; border-radius:10px}
.ok{background:#1e3a2a; border:1px solid #3ecf8e; color:#c9f5e1; padding:10px 14px; border-radius:10px}
.quay-lai{color:var(--nhat); text-decoration:none; font-size:.92rem}

/* --- form --- */
.the{background:var(--the); border:1px solid var(--vien); border-radius:14px; padding:18px; margin:18px 0}
label{display:block; margin:12px 0; color:var(--nhat); font-size:.88rem}
input[type=text],input[type=password],input:not([type]),input[type=file],select{
  display:block; width:100%; margin-top:6px; padding:12px;
  min-height:var(--cham-toi-thieu);
  background:var(--nen); color:var(--chu);
  border:1px solid var(--vien); border-radius:10px; font-size:16px; /* 16px de iOS khong tu zoom */
}
button{
  min-height:var(--cham-toi-thieu); padding:12px 18px; font-size:1rem; cursor:pointer;
  background:var(--vien); color:var(--chu); border:0; border-radius:10px;
}
button.chinh{background:var(--nhan); color:#231702; font-weight:600; width:100%; margin-top:8px}
button.nguy-hiem{background:#3a1e22; color:#ffb1b1}
button.lien-ket{background:none; color:var(--nhat); padding:6px; min-height:auto; text-decoration:underline}

/* --- ke sach --- */
.ke{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.the-sach{display:flex; gap:14px; align-items:center; text-decoration:none;
  background:var(--the); border:1px solid var(--vien); border-radius:14px; padding:12px}
.bia{width:64px; height:64px; flex:0 0 64px; border-radius:10px; overflow:hidden;
  background:linear-gradient(140deg,#2f3746,#434f63); display:grid; place-items:center; font-size:1.6rem; font-weight:700}
.bia img{width:100%; height:100%; object-fit:cover}
.tt{display:flex; flex-direction:column; gap:2px; min-width:0}
.tt strong{font-size:1.02rem}
.dang-nghe{color:var(--nhan); font-size:.85rem}
a.tiep-tuc{display:block; text-align:center; text-decoration:none; padding:14px;
  background:var(--nhan); color:#231702; font-weight:600; border-radius:10px; margin:14px 0}

/* --- danh sach chuong --- */
.chuong{list-style:none; padding:0; margin:16px 0; counter-reset:c}
.chuong li{border-bottom:1px solid var(--vien)}
.chuong a{display:flex; gap:12px; align-items:center; padding:14px 4px; text-decoration:none;
  min-height:var(--cham-toi-thieu)}
.chuong .stt{color:var(--nhat); min-width:2.2em; text-align:right; font-variant-numeric:tabular-nums}
.chuong .ten{flex:1; min-width:0}
.chuong .gio{color:var(--nhat); font-size:.85rem; white-space:nowrap}
.chuong li.hien-tai .ten{color:var(--nhan)}

/* --- trang nghe --- */
.thanh{margin:20px 0 6px}
#keo{width:100%; height:var(--cham-toi-thieu); accent-color:var(--nhan); background:none; border:0; padding:0}
.gio-hai-ben{display:flex; justify-content:space-between; color:var(--nhat);
  font-size:.85rem; font-variant-numeric:tabular-nums; margin-top:-6px}
.dieu-khien{display:flex; justify-content:center; align-items:center; gap:22px; margin:18px 0}
.tron{width:64px; height:64px; border-radius:50%; font-size:.95rem; font-weight:600;
  display:grid; place-items:center; padding:0}
.tron.to{width:88px; height:88px; font-size:2rem; background:var(--nhan); color:#231702}
button.danh-dau{width:100%; margin:10px 0; background:var(--the); border:1px solid var(--nhan); color:var(--nhan)}
button.danh-dau.vua-luu{background:var(--nhan); color:#231702}
.hang-cai-dat{display:flex; gap:14px; margin-top:14px}
.hang-cai-dat label{flex:1; margin:0}
.chuyen-chuong{display:flex; justify-content:space-between; margin:18px 0; gap:10px}
.chuyen-chuong a{color:var(--nhat); text-decoration:none; padding:12px 0}
.chuyen-chuong .phai{margin-left:auto}

details{background:var(--the); border:1px solid var(--vien); border-radius:14px;
  padding:12px 16px; margin:14px 0}
summary{cursor:pointer; color:var(--nhat); min-height:var(--cham-toi-thieu); display:flex; align-items:center}
.loi-doc{max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
.loi-doc p{margin:.45em 0; padding:6px 8px; border-radius:8px; cursor:pointer; color:var(--nhat)}
.loi-doc p.dang-doc{background:#2a2f3a; color:var(--chu)}
.ds-danh-dau{list-style:none; padding:0; margin:0}
.ds-danh-dau li{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--vien)}
.ds-danh-dau .noi-dung{flex:1; min-width:0; cursor:pointer}
.ds-danh-dau .xoa{background:none; color:var(--nguy); min-height:auto; padding:4px 8px}

/* --- quan tri --- */
.bang{width:100%; border-collapse:collapse; font-size:.92rem}
.bang th,.bang td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--vien); vertical-align:top}
.hang-quyen{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tich{display:inline-flex; align-items:center; gap:6px; margin:0; color:var(--chu); font-size:.88rem}
.tich input{width:auto; min-height:auto; margin:0}
.ds-user{list-style:none; padding:0}
.ds-user li{padding:8px 0; border-bottom:1px solid var(--vien); display:flex; gap:10px; align-items:baseline}
.nhan{background:var(--nhan); color:#231702; border-radius:6px; padding:1px 7px; font-size:.75rem}

.chan{max-width:720px; margin:0 auto; padding:20px 16px 30px; color:var(--nhat);
  font-size:.85rem; display:flex; gap:14px; align-items:center; border-top:1px solid var(--vien)}
.chan form{margin-left:auto}

@media (max-width:420px){
  .hang-cai-dat{flex-direction:column; gap:6px}
  .dieu-khien{gap:16px}
}