*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fbf8f3; --panel:#f3ede2; --ink:#2b2521; --muted:#7b6f63;
  --line:#e0d6c6; --accent:#8c2f24; --accent-soft:#f0e2de; --shadow:0 1px 3px rgba(60,40,20,.10);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16130f; --panel:#1e1a15; --ink:#e9e1d5; --muted:#9d9285;
        --line:#2f2820; --accent:#e0866f; --accent-soft:#2c211d; --shadow:0 1px 3px rgba(0,0,0,.4)}
}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
#app{display:flex; height:100dvh; overflow:hidden}

/* ---------- Sidebar ---------- */
#side{
  width:330px; flex:0 0 330px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
#side header{padding:18px 18px 12px; border-bottom:1px solid var(--line)}
#side h1{margin:0 0 2px; font-size:17px; letter-spacing:.02em}
#side .sub{color:var(--muted); font-size:12.5px}
#q{
  width:100%; margin-top:12px; padding:9px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg); color:inherit; font-size:14px;
}
#q:focus{outline:2px solid var(--accent); outline-offset:1px}
#toc{overflow-y:auto; flex:1; padding:8px 0 24px; overscroll-behavior:contain}
#cr{
  border-top:1px solid var(--line); padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  font-size:11.5px; line-height:1.5; color:var(--muted); background:var(--panel);
}
#cr p{margin:0 0 7px}
#cr p:last-child{margin:0}
#cr b{color:var(--ink); font-weight:600}
#cr a{color:var(--accent); text-decoration:none; font-weight:600}
#cr a:hover{text-decoration:underline}
.grp{
  padding:14px 18px 6px; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.it{
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  padding:8px 18px; color:inherit; font:inherit; font-size:14.5px; line-height:1.35;
  border-left:3px solid transparent;
}
/* display:block ở trên đè mất [hidden] của trình duyệt — không có dòng này thì
   ô tìm kiếm lọc xong danh sách vẫn trơ ra đủ 114 bài */
.it[hidden]{display:none}
.it:hover{background:var(--accent-soft)}
.it.on{background:var(--accent-soft); border-left-color:var(--accent); font-weight:600}
.it .d{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.it .num{color:var(--muted); font-variant-numeric:tabular-nums; margin-right:6px}

/* ---------- Main ---------- */
#main{flex:1; display:flex; flex-direction:column; min-width:0; min-height:0}
#bar{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid var(--line); background:var(--panel);
}
#menu{display:none}
button.ico{
  border:1px solid var(--line); background:var(--bg); color:inherit; cursor:pointer;
  border-radius:8px; padding:7px 11px; font-size:14px; line-height:1;
}
button.ico:hover{border-color:var(--accent); color:var(--accent)}
#bar .sp{flex:1}
#read{overflow-y:auto; flex:1; padding:34px 0 28px; overscroll-behavior:contain}
article{max-width:44rem; margin:0 auto; padding:0 24px}
article h2{margin:0 0 6px; font-size:clamp(21px,3.4vw,27px); line-height:1.25; letter-spacing:.01em}
article .meta{color:var(--muted); font-size:13.5px; margin-bottom:26px}
/* Font chữ sách: xếp theo mức phủ tiếng Việt, KHÔNG để Georgia đứng đầu.
   Georgia trên Windows thiếu các chữ hai dấu (ầ ố ế ắ ề — khối Latin Extended
   Additional), trình duyệt phải tự chắp chữ gốc với dấu rời nên hiện ra thành
   "Thâ`y", "trô´n". Cambria/Constantia/Palatino Linotype (Windows), Iowan Old
   Style/Charter (macOS), Noto/Liberation/DejaVu Serif (Linux) đều phủ đủ. */
article p{
  font-family:Cambria,Constantia,"Palatino Linotype","Book Antiqua",
              "Iowan Old Style",Charter,"Noto Serif","Liberation Serif",
              "DejaVu Serif","Times New Roman",Georgia,serif;
  line-height:1.78;
  font-size:var(--fs,17.5px); margin:0 0 1.15em; text-align:justify;
  hyphens:auto; word-break:break-word;
}
article p:first-of-type::first-letter{
  float:left; font-size:3.05em; line-height:.84; padding:.05em .09em 0 0;
  color:var(--accent); font-weight:600;
}
article p.short{text-align:left}
#follow{
  display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:13px; color:var(--muted); padding:5px 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); white-space:nowrap;
}
#follow:hover{border-color:var(--accent); color:var(--accent)}
#follow input{accent-color:var(--accent); margin:0; cursor:pointer}
body.fw article p{cursor:pointer; transition:background .3s, color .3s; border-radius:4px}
body.fw article p.hl{
  background:var(--accent-soft); color:var(--ink);
  box-shadow:-10px 0 0 var(--accent-soft), 10px 0 0 var(--accent-soft);
}
body.fw article p:not(.hl){opacity:.62}
article p.short::first-letter{float:none; font-size:inherit; color:inherit; padding:0}

/* ---------- Player ---------- */
#play{
  border-bottom:1px solid var(--line); background:var(--panel);
  padding:9px 16px 11px; box-shadow:var(--shadow); position:relative; z-index:2;
}
#play .row{display:flex; align-items:center; gap:12px; max-width:56rem; margin:0 auto}
#now{
  flex:1; min-width:0; font-size:13.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:var(--muted);
}
audio{flex:2; min-width:180px; height:36px}
#rate{
  flex:0 0 auto; border:1px solid var(--line); background:var(--bg); color:inherit;
  border-radius:8px; padding:7px 8px; font-size:13px; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
#rate:hover{border-color:var(--accent); color:var(--accent)}
#err{
  max-width:56rem; margin:8px auto 0; padding:8px 11px; border-radius:8px;
  background:var(--accent-soft); color:var(--accent); font-size:13px; line-height:1.45;
}
@media (max-width:860px){
  #side{
    position:fixed; inset:0 auto 0 0; z-index:20; transform:translateX(-102%);
    transition:transform .22s ease; box-shadow:0 0 30px rgba(0,0,0,.28); width:86vw; max-width:340px;
  }
  #side.open{transform:none}
  #menu{display:block}
  #veil{
    position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:15;
    opacity:0; pointer-events:none; transition:opacity .22s;
  }
  #veil.on{opacity:1; pointer-events:auto}
  article{padding:0 18px}
  #read{padding-top:24px}
  #play .row{flex-wrap:wrap; gap:8px}
  #now{flex:1 0 100%; order:-1}
  audio{flex:1; min-width:0}
}