/* ══════════════════════════════════════════════════════════════════
   TRÍ LỮ · HỆ THIẾT KẾ LỘ TRÌNH HỌC
   ⚠ Component dựng bằng <button> + <span> con → MỌI span khối phải có
     display:block/flex, không thì aspect-ratio và margin bị bỏ qua (đã vấp 03/08).
   Bản 2.0 — 03/08/2026  (thêm BẢN KHẮC CHỮ .tl-pl cho bài chưa có tranh,
     dải chặng .tl-nav, thanh tiến độ .tl-bar — xem trilu-lo-trinh.js)
   Dùng cho: màn chọn bài của mọi cấp N5–N1, mọi phần (ngữ pháp, từ vựng, hán tự)

   ⚠ SÀN CỠ CHỮ — CẤM HẠ THẤP HƠN (xem hien-phap-thiet-ke trong bộ nhớ dự án)
     nội dung ≥ 15px · phụ ≥ 13px · nhãn HOA ≥ 11px · chữ Nhật ≥ 16px
     Khung chiếm chỗ thì bỏ NÚT/VIỀN/ĐỆM, tuyệt đối không hạ cỡ chữ.
   ══════════════════════════════════════════════════════════════════ */

.tl-lt{
  --paper:#f1ebe1; --card:#fffdf9;
  --ink:#1c1813; --ink2:#463d31; --muted:#82755f; --muted2:#a4977f;
  --hair:rgba(140,112,58,.30); --hair2:rgba(140,112,58,.15);
  --son:#b03f28; --gold:#8a6822; --gold2:#c0a05c;
  --disp:"Playfair Display",Georgia,serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --jp:"Noto Serif JP",serif;
  --s1:0 1px 2px rgba(60,42,20,.05),0 4px 12px rgba(60,42,20,.06);
  --s2:0 2px 5px rgba(60,42,20,.07),0 14px 34px rgba(60,42,20,.11);
  --spring:cubic-bezier(.34,1.5,.64,1);
  /* KHÔNG tự sơn nền. Site có script selfdark ép `--bg`, `body`, `.hd` bằng
     !important trong chế độ tối; tự sơn là sinh vệt cắt ngang dưới đầu trang
     (đã vấp 03/08). Nền trong suốt → luôn liền mạch với trang chủ quản. */
  background:transparent;color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;position:relative
}
html[data-mode="dark"] .tl-lt{
  /* Tông tối lấy theo bảng màu tối của site (xanh mực), để trang không bị
     hai mảng màu chỏi nhau. Vàng kim và son vẫn giữ để nhận ra Trí Lữ. */
  --paper:#0f1a2e; --card:#16213a;
  --ink:#f0e8d8; --ink2:#d8d0c0; --muted:#9aa2b4; --muted2:#7d8496;
  --hair:rgba(199,171,112,.26); --hair2:rgba(199,171,112,.13);
  --son:#e08a6c; --gold:#c7ab70; --gold2:#dcc48e;
  --s1:0 1px 3px rgba(0,0,0,.4); --s2:0 3px 8px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.4)
}
.tl-lt *{box-sizing:border-box}

/* vân giấy */
.tl-lt__grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.1'/></svg>")}
html[data-mode="dark"] .tl-lt__grain{mix-blend-mode:screen;opacity:.2}
.tl-lt__in{position:relative;z-index:1}

/* ── măng-sét ── */
.tl-mast{display:flex;align-items:center;gap:9px;padding:0 20px}
.tl-mast__seal{width:26px;height:26px;border-radius:3px;background:var(--son);color:#fdf6ea;
  display:grid;place-items:center;font:500 12px var(--jp);letter-spacing:-.06em;flex:0 0 auto}
.tl-mast__bn{display:block;font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.tl-mast__ln{flex:1;height:1px;background:var(--hair2)}
.tl-mast__fo{font-family:var(--jp);font-size:13px;color:var(--muted2);letter-spacing:.06em}
.tl-rule2{margin:11px 20px 0;height:3px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair2)}

/* ── tiêu đề chặng ── */
.tl-head{padding:20px 20px 0}
.tl-head__no{font-family:var(--disp);font-weight:400;font-size:12.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.tl-head h2{font-family:var(--disp);font-weight:400;font-size:30px;line-height:1.06;margin:7px 0 0;
  letter-spacing:-.012em}
.tl-head h2 i{font-style:italic;color:var(--son)}
.tl-head__sub{margin:9px 0 0;font:400 14px/1.6 var(--sans);color:var(--muted)}
.tl-head__sub b{font-weight:600;color:var(--ink2)}

/* ── thẻ tiêu điểm ── */
.tl-feat{margin:16px 20px 0;position:relative}
.tl-feat__art{position:relative;border-radius:4px;overflow:hidden;box-shadow:var(--s2);aspect-ratio:16/10;
  background:var(--card)}
.tl-feat__art img{width:100%;height:100%;object-fit:cover;display:block}
.tl-tate{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(20,15,10,.46);backdrop-filter:blur(5px);color:#fdf6ea;font-family:var(--jp);font-size:13px;
  padding:9px 6px;border-radius:2px;line-height:1}
.tl-tate i{font-style:normal;display:block}
.tl-feat__blk{position:relative;margin:-26px 0 0;background:var(--card);border:1px solid var(--hair2);
  border-left:2.5px solid var(--son);padding:11px 14px 12px;width:86%;box-shadow:var(--s1);
  cursor:pointer;transition:transform .16s var(--spring);text-align:left;display:block;font:inherit;color:inherit}
.tl-feat__blk:active{transform:scale(.985)}
.tl-feat__tag{display:block;font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--son)}
.tl-feat__row{display:flex;align-items:center;gap:10px;margin-top:4px}
.tl-feat__fig{display:block;font-family:var(--disp);font-weight:400;font-size:34px;line-height:.86;color:var(--ink);
  letter-spacing:-.03em;flex:0 0 auto}
.tl-feat__tx{display:block;flex:1;min-width:0}
.tl-feat__gl{font-family:var(--jp);font-weight:500;font-size:16px;color:var(--son);line-height:1;display:block}
.tl-feat__ti{display:block;font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.22;margin:3px 0 0;color:var(--ink)}
.tl-feat__arw{display:block;flex:0 0 auto;font:400 20px var(--sans);color:var(--son);line-height:1}

/* ── nhãn mục ── */
.tl-sec{display:flex;align-items:center;gap:11px;padding:0 20px;margin:26px 0 12px}
.tl-sec span{font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);
  white-space:nowrap}
.tl-sec i{flex:1;height:1px;background:var(--hair2)}
.tl-sec b{font-family:var(--jp);font-size:13px;color:var(--muted2);font-weight:400}

/* ── lưới bài đã qua ── */
.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 13px;padding:0 20px}
.tl-g{cursor:pointer;transition:transform .16s var(--spring);border:0;background:none;padding:0;
  text-align:left;font:inherit;color:inherit;display:block}
.tl-g:active{transform:scale(.97)}
.tl-g__im{display:block;position:relative;aspect-ratio:1/1;border-radius:3px;overflow:hidden;box-shadow:var(--s1);background:var(--card)}
.tl-g__im img{width:100%;height:100%;object-fit:cover;display:block}
.tl-g__cap{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.tl-g__n{display:inline-block;white-space:nowrap;flex:0 0 auto;font-family:var(--disp);font-weight:400;font-size:22px;line-height:.9;color:var(--muted2);
  letter-spacing:-.02em}
.tl-g__j{display:inline-block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--jp);font-weight:500;font-size:16px;color:var(--son);line-height:1}
.tl-g__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:500 15px/1.38 var(--sans);color:var(--ink);margin-top:5px}

/* ── danh sách bài chưa mở ── */
.tl-lock{padding:0 20px}
.tl-l{display:grid;grid-template-columns:auto minmax(56px,102px) 1fr auto;align-items:center;gap:11px;padding:14px 0;
  position:relative;opacity:.62;border:0;background:none;width:100%;text-align:left;font:inherit;color:inherit}
.tl-l::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair2)}
.tl-l__n{display:block;min-width:34px;font-family:var(--disp);font-weight:400;font-size:20px;color:var(--muted2);line-height:1;white-space:nowrap}
.tl-l__j{display:block;font-family:var(--jp);font-size:16px;color:var(--muted);line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-l__t{display:block;font:400 14.5px/1.35 var(--sans);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-l__k{display:block;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted2)}

/* ── cửa ải ── */
.tl-gate{margin:24px 20px 22px;position:relative;border-radius:3px;overflow:hidden;box-shadow:var(--s1);
  display:block;border:0;padding:0;width:calc(100% - 40px);cursor:pointer}
.tl-gate img{width:100%;height:104px;object-fit:cover;object-position:center 56%;display:block;
  filter:grayscale(.8) opacity(.6)}
.tl-gate.is-mo img{filter:none}
.tl-gate__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 16px;
  background:linear-gradient(92deg,rgba(24,18,12,.56),rgba(24,18,12,.1));text-align:left}
.tl-gate__ov em{display:block;font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#e6cda6;
  font-style:normal}
.tl-gate__ov b{display:block;font-family:var(--disp);font-weight:400;font-size:19px;color:#fdf6ea;margin-top:3px}

/* màn rộng: hai cột, không kéo dài mãi */
@media (min-width:720px){
  .tl-lt__in{max-width:680px;margin:0 auto}
  .tl-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){.tl-lt *{transition:none!important;animation:none!important}}

/* ══ BẢN 2.0 ══════════════════════════════════════════════════════
   Bài chưa có tranh KHÔNG để trống: dựng bản khắc chữ từ chính chữ
   của bài đó. Sáu tông giấy luân phiên → 566 bài không bị lặp mặt.
   Chữ Nhật ≥ 16px, nhãn ≥ 11px — sàn cỡ chữ vẫn giữ nguyên.
   ════════════════════════════════════════════════════════════════ */
.tl-pl{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--pl1)}
.tl-pl[data-t="0"]{--pl1:#f7f0e2;--pl2:#e8d9bd}
.tl-pl[data-t="1"]{--pl1:#f3ede6;--pl2:#dcd2c3}
.tl-pl[data-t="2"]{--pl1:#f8ece8;--pl2:#ecd5cd}
.tl-pl[data-t="3"]{--pl1:#eff2ea;--pl2:#d7dfcc}
.tl-pl[data-t="4"]{--pl1:#f1eef4;--pl2:#d6d2e0}
.tl-pl[data-t="5"]{--pl1:#f6efe0;--pl2:#e3d0b0}
html[data-mode="dark"] .tl-pl[data-t="0"]{--pl1:#1c2942;--pl2:#0f1a2f}
html[data-mode="dark"] .tl-pl[data-t="1"]{--pl1:#23283a;--pl2:#141827}
html[data-mode="dark"] .tl-pl[data-t="2"]{--pl1:#2a2338;--pl2:#180f22}
html[data-mode="dark"] .tl-pl[data-t="3"]{--pl1:#172c33;--pl2:#0d1a20}
html[data-mode="dark"] .tl-pl[data-t="4"]{--pl1:#202541;--pl2:#12152b}
html[data-mode="dark"] .tl-pl[data-t="5"]{--pl1:#2b2a33;--pl2:#191820}
.tl-pl__bg{position:absolute;inset:0;display:block;
  background:radial-gradient(115% 85% at 24% 12%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),
             linear-gradient(158deg,var(--pl1),var(--pl2))}
html[data-mode="dark"] .tl-pl__bg{
  background:radial-gradient(115% 85% at 24% 12%,rgba(255,240,214,.10),rgba(255,255,255,0) 60%),
             linear-gradient(158deg,var(--pl1),var(--pl2))}
.tl-pl::after{content:"";position:absolute;inset:7px;border:1px solid var(--hair);pointer-events:none}
.tl-pl::before{content:"";position:absolute;inset:11px;border:1px solid var(--hair2);pointer-events:none}
.tl-pl__ch{position:absolute;inset:0;display:grid;place-items:center;padding:0 12px;font-style:normal;
  font-family:var(--jp);font-weight:700;font-size:var(--plsz,44px);line-height:1.05;color:var(--ink);
  text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.42)}
html[data-mode="dark"] .tl-pl__ch{text-shadow:0 1px 0 rgba(0,0,0,.5)}
.tl-pl__no{position:absolute;left:13px;bottom:11px;font-style:normal;font-family:var(--disp);
  font-size:11px;letter-spacing:.14em;color:var(--gold);opacity:.85}

/* dải chặng — mục lục ngang, cuộn được */
.tl-nav{display:flex;gap:9px;padding:16px 20px 2px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tl-nav::-webkit-scrollbar{display:none}
.tl-nav__c{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:5px;
  min-width:104px;max-width:152px;padding:9px 11px 10px;background:var(--card);cursor:pointer;
  border:1px solid var(--hair2);border-bottom:2px solid transparent;text-align:left;font:inherit;color:inherit;
  transition:border-color .16s,transform .16s var(--spring)}
.tl-nav__c:active{transform:scale(.97)}
.tl-nav__c b{display:block;font-family:var(--jp);font-weight:500;font-size:16px;line-height:1;color:var(--muted2)}
.tl-nav__c span{display:block;font:500 13px/1.3 var(--sans);color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-nav__c i{display:block;height:2px;background:var(--hair2)}
.tl-nav__c i em{display:block;height:100%;background:var(--gold2)}
.tl-nav__c.is-nay{border-bottom-color:var(--son);background:transparent}
.tl-nav__c.is-nay b{color:var(--son)}
.tl-nav__c.is-nay span{color:var(--ink);font-weight:600}

/* thanh tiến độ */
.tl-bar{display:block;height:3px;background:var(--hair2);margin:12px 0 0;overflow:hidden}
.tl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--son))}
.tl-bar--s{margin:9px 0 0;height:2px}

/* dấu đã xong trên ảnh */
.tl-g__ok{position:absolute;right:6px;top:6px;width:19px;height:19px;border-radius:50%;
  background:var(--son);color:#fdf6ea;display:grid;place-items:center;font-style:normal;
  font-size:11px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* bài chưa xong: mờ nhưng BẤM ĐƯỢC (không disabled) */
.tl-l{cursor:pointer;transition:opacity .16s}
.tl-l:active{opacity:1}
.tl-l.is-do{opacity:.86}
.tl-l.is-do .tl-l__k{color:var(--son)}