/* Ma trận nói — cùng tông noir với en-chunks, không đổi theo sáng/tối của máy.
   Năm cuốn, năm màu: lớp .b-zero … .b-3m đặt --k (màu) và --kb (nền tối của màu đó). */
:root{
  --bg:#050608; --panel:#0C0E11; --panel2:#161B20; --ink:#EDEBE6; --muted:#8B9098;
  --line:#1E242A; --dim:#5A6069;
  --k:#3ED9C9; --kb:#0A2C2B;
}
.b-zero{--k:#D6E05A; --kb:#282B0B}
.b-30s{--k:#F07CB4; --kb:#2F1123}
.b-1m{--k:#3ED9C9; --kb:#0A2C2B}
.b-2m{--k:#F2B646; --kb:#31250B}
.b-3m{--k:#B99CF6; --kb:#231A3D}

*{box-sizing:border-box; border-radius:0}
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--ink); margin:0;
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
#field{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none}
.wrap{position:relative; z-index:1; max-width:1460px; margin:0 auto; padding:28px 16px 48px}
button{font:inherit; color:inherit}

/* ---- đầu trang ---- */
header{margin-bottom:22px}
.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.eyebrow a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line)}
.eyebrow a:hover{color:var(--ink)}
h1{
  font-family:"Newsreader", Georgia, serif; font-weight:600;
  font-size:clamp(30px, 5vw, 50px); line-height:1.08; letter-spacing:-.015em; margin:0 0 14px;
}
h1 em{font-style:normal; color:var(--k)}
.lede{margin:0; color:var(--muted); font-size:16px; max-width:980px}
.lede b{color:var(--ink); font-weight:600}
.howto{margin-top:16px; max-width:980px; border:1px solid var(--line); background:var(--panel)}
.howto summary{
  cursor:pointer; padding:9px 13px; color:var(--muted); list-style:none;
  font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.howto summary::before{content:"+ "} .howto[open] summary::before{content:"\2212 "}
.howto summary:hover{color:var(--ink)}
.howto ul{margin:0; padding:0 16px 12px 34px; color:var(--muted); font-size:14px}
.howto strong{color:var(--ink)}

/* ---- năm cuốn ---- */
.books{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-bottom:22px;
}
.books button{
  display:block; text-align:left; cursor:pointer; border:0; background:var(--panel);
  padding:14px 16px 15px; transition:background .12s, box-shadow .12s;
}
.books button:hover{background:var(--panel2)}
.books button.on{background:var(--kb); box-shadow:inset 0 -3px 0 var(--k)}
.books button:focus-visible{outline:2px solid var(--k); outline-offset:-2px}
.books .n{display:block; margin-bottom:6px; color:var(--muted); font:500 10.5px "IBM Plex Mono", monospace; letter-spacing:.14em; text-transform:uppercase}
.books h2{margin:0 0 4px; font:600 20px/1.2 "Newsreader", Georgia, serif; color:var(--k)}
.books p{margin:0; color:var(--muted); font-size:12.5px; line-height:1.45}

/* ---- bố cục: danh sách bài | bài ---- */
.layout{display:grid; grid-template-columns:280px minmax(0, 1fr); gap:22px; align-items:start}
.days{position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; border:1px solid var(--line); background:var(--panel)}
.days h3{
  position:sticky; top:0; margin:0; padding:9px 12px; background:var(--panel2); color:var(--muted);
  font:500 10.5px "IBM Plex Mono", monospace; letter-spacing:.14em; text-transform:uppercase;
}
.days a{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:6px; align-items:baseline;
  padding:7px 12px; color:var(--muted); text-decoration:none; font-size:13.5px; line-height:1.35;
  border-top:1px solid var(--line);
}
.days a:hover{background:var(--panel2); color:var(--ink)}
.days a[aria-current="page"]{background:var(--kb); color:var(--ink); box-shadow:inset 3px 0 0 var(--k)}
.days a .no{color:var(--k); font:11px "IBM Plex Mono", monospace}
.days a.review .t, .days a.test .t{font-style:italic}

/* ---- bài ---- */
main:focus{outline:none}
.dayh{margin:0 0 4px; font:600 clamp(24px, 3.2vw, 34px)/1.15 "Newsreader", Georgia, serif; color:var(--k)}
.dayh .no{display:block; margin-bottom:6px; color:var(--muted); font:500 11px "IBM Plex Mono", monospace; letter-spacing:.14em; text-transform:uppercase}
.sub{margin:0 0 4px; color:var(--muted); font-size:14px}
.sub .en{color:var(--ink); font-family:"Newsreader", Georgia, serif; font-style:italic; font-size:16px}
.ko{color:#9AA0A8; font-size:13px}
.ko[hidden]{display:none}
.bar2{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 18px}
.btn{
  cursor:pointer; background:var(--panel); color:var(--ink); border:1px solid var(--line);
  padding:7px 12px; font:10.5px "IBM Plex Mono", monospace; letter-spacing:.11em; text-transform:uppercase;
}
.btn:hover{background:var(--panel2)}
.btn.on{background:var(--kb); color:var(--k); border-color:var(--k)}
.nav{display:flex; justify-content:space-between; gap:8px; margin-top:26px}
.nav a{flex:1; max-width:48%; padding:12px 14px; border:1px solid var(--line); background:var(--panel); color:var(--muted); text-decoration:none; font-size:13.5px}
.nav a:hover{background:var(--panel2); color:var(--ink)}
.nav a b{display:block; color:var(--k); font:500 10.5px "IBM Plex Mono", monospace; letter-spacing:.12em; text-transform:uppercase; margin-bottom:3px}
.nav a.next{text-align:right; margin-left:auto}

.blk{margin-top:26px}
.blkh{margin:0 0 10px; font:600 19px/1.3 "Newsreader", Georgia, serif; color:var(--ink)}
.blkh .i{color:var(--k); font:500 12px "IBM Plex Mono", monospace; margin-right:8px}
.items{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.item{background:var(--panel); padding:13px 15px 12px; min-width:0}
.item.flash{box-shadow:inset 3px 0 0 var(--k); background:#0F1216}
.item .top{display:flex; gap:10px; align-items:baseline}
.item .n{flex:0 0 auto; color:var(--k); font:500 11px "IBM Plex Mono", monospace; min-width:22px}
.item .tag{color:var(--muted); font:10px "IBM Plex Mono", monospace; letter-spacing:.08em; border:1px solid var(--line); padding:0 5px}
.item h4{margin:0 0 6px; font:600 16px/1.3 "Newsreader", Georgia, serif; color:var(--ink)}

/* Khối: tiếng Anh trên, nghĩa dưới. */
.chunks{display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 8px}
.ck{
  display:flex; flex-direction:column; text-align:left; padding:4px 8px 5px;
  border:1px solid var(--k); background:var(--kb); min-width:0; max-width:100%;
  transition:box-shadow .15s, background .15s;
}
.ck .e{color:var(--k); font-size:15.5px; line-height:1.35; font-weight:500}
.ck .g{color:#C4C7CC; font-size:12.5px; line-height:1.3; margin-top:2px}
.ck .g.kg{color:#9AA0A8}
.chunks.words .ck{border-style:dashed}

.en-s{margin:2px 0 0; font:400 19px/1.4 "Newsreader", Georgia, serif; color:var(--ink)}
.vi-s{margin:3px 0 0; color:#C4C7CC; font-size:14.5px}
.ko-s{margin:2px 0 0}
.notes{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; font-size:13px; color:var(--muted)}
.notes b{color:var(--k); font-weight:500}


/* 30 giây: thẻ cụm từ trọng tâm */
.pics{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.pic{background:var(--panel); padding:12px 14px; display:flex; flex-direction:column; gap:4px}
.pic .e{color:var(--k); font-size:15px; font-weight:500}
.pic .g{color:#C4C7CC; font-size:13px}

/* Cả đoạn (OUTPUT) */
.script{margin-top:26px; border:1px solid var(--k); background:var(--panel); padding:16px 18px}
.script h3{margin:0 0 4px; font:500 10.5px "IBM Plex Mono", monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--k)}
.script .en-p{margin:8px 0 0; font:400 18px/1.6 "Newsreader", Georgia, serif}
.script .vi-p{margin:10px 0 0; color:#C4C7CC; font-size:14.5px}

.empty{color:var(--muted); font:13px "IBM Plex Mono", monospace; padding:16px 0}

footer{margin-top:34px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
footer b{color:var(--ink)}

@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .days{position:static; max-height:260px}
}
@media (max-width:640px){
  .books{grid-template-columns:repeat(2, minmax(0,1fr))}
  .books p{display:none}
  .en-s{font-size:17px}
  .nav a{max-width:none}
}
.item, .ck, .pic, .script, .blk{scroll-margin-top:16px; scroll-margin-bottom:24px}
footer a{color:var(--k)}