:root{ --bg:#0d0f12; --fg:#e7e8ea; --muted:#9aa1a9; --brand:#7cc4ff; --card:#12161b; --border:#2a2f36; }
:root[data-theme="light"]{ --bg:#ffffff; --fg:#1c1f23; --muted:#6b737c; --brand:#2a7de1; --card:#f4f6f8; --border:#e1e5ea; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{width:min(1200px,92%);margin:20px auto}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.muted{color:var(--muted)} .btn,.icon-btn{background:#0000;border:1px solid var(--border);color:var(--fg);padding:8px 12px;border-radius:8px;cursor:pointer}
.icon-btn{padding:6px 8px} .split{display:inline-block;width:1px;height:22px;background:var(--border);margin:0 8px}

.site-header{border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10}
.header-inner{display:flex;align-items:center;gap:12px;min-height:58px}
.logo{font-weight:700}
.topnav{display:flex;align-items:center;gap:8px;margin-left:8px}
.topnav .search{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--fg);width:240px}
.header-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.userbox{position:relative} .userbox .menu{display:none;position:absolute;right:0;top:120%;background:var(--card);border:1px solid var(--border);border-radius:8px;min-width:180px}
.userbox:hover .menu{display:block} .userbox .menu a{display:block;padding:8px 10px;border-bottom:1px solid var(--border)} .userbox .menu a:last-child{border-bottom:0}

.home-grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.book-card .thumb{display:block;aspect-ratio:3/4;background:#0001;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.book-card img{width:100%;height:100%;object-fit:cover;display:block}
.book-card .title{display:block;margin-top:6px;font-weight:600}
.center{text-align:center}
.list .li{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border)}
.list .li.book{grid-template-columns:84px 1fr auto}
.cover{width:68px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.ph-cover,.ph-cover-lg{display:inline-grid;place-items:center;background:#0001;border:1px dashed var(--border);color:var(--muted)}
.ph-cover{width:68px;height:96px;border-radius:6px}
.ph-cover-lg{width:180px;height:254px;border-radius:10px}
.rank{width:42px;height:42px;display:grid;place-items:center;background:#0001;border:1px solid var(--border);border-radius:8px}
.tags a.tag{display:inline-block;margin:2px 4px 0 0;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}

.rk-head{display:flex;align-items:flex-end;justify-content:space-between}
.tabs{display:inline-flex;gap:6px}
.tab-btn{border:none;background:transparent;border-bottom:2px solid transparent;color:var(--muted);padding:6px 8px;cursor:pointer}
.tab-btn.active{color:var(--fg);border-color:var(--brand)}
.rk-item{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border)}
.rk-item img{width:54px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.chapter-title{margin:0 0 8px 0}

/* Song ngữ theo từng đoạn */
.reader.paired{display:grid;gap:12px}
.seg-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.seg-pair .seg{white-space:pre-wrap}
.seg-pair .vi::before{content:"VI"; display:block; color:var(--muted); font-weight:600; margin-bottom:6px}
.seg-pair .en::before{content:"EN"; display:block; color:var(--muted); font-weight:600; margin-bottom:6px}
body:not(.bilingual).lang-vi .seg-pair .en{display:none}
body:not(.bilingual).lang-en .seg-pair .vi{display:none}
body:not(.bilingual) .seg-pair{grid-template-columns:1fr}

/* Popup dịch đoạn */
#nb-pop{position:absolute;max-width:min(600px,92vw);z-index:50;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0006;padding:10px}
#nb-pop .pop-title{font-weight:700;margin-bottom:6px;color:var(--brand)}
#nb-pop .pop-body{max-height:40vh;overflow:auto}

/* Focus */
body.focus .site-header, body.focus .site-footer {display:none}
body.focus .container {width:min(900px,94%)}

/* Comments */
.comment-respond, .comments-area{margin-top:12px}

@media (max-width: 920px){
  .home-grid{grid-template-columns:1fr}
  .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg-pair{grid-template-columns:1fr}
}