/* /tai-lieu — listing theo level + kind. Token: home-pne.css */
body.tai-lieu-page { background: var(--bg); }

.tl-wrap { max-width:1060px; margin:0 auto; padding:0 40px; }

.tl-head { text-align:center; padding:44px 0 18px; }
.tl-head .eyebrow { font:700 12px var(--ff); text-transform:uppercase; letter-spacing:.14em; color:var(--red); }
.tl-head h1 { font-size:clamp(28px,3.6vw,40px); font-weight:800; letter-spacing:-.028em; margin-top:10px; }
.tl-head p { font-size:14.5px; color:var(--text-2); margin-top:10px; max-width:640px; margin-inline:auto; }

/* LEVEL TABS (đỏ, primary) */
.tl-lv-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:8px 0 12px; }
.tl-lv-tabs a { font:800 14px var(--ff); color:var(--red); background:var(--red-light); border:1px solid var(--red-border); padding:9px 18px; border-radius:99px; transition:.15s; min-width:54px; text-align:center; }
.tl-lv-tabs a:hover { background:#fff; }
.tl-lv-tabs a.on { background:var(--red); color:#fff; border-color:var(--red); }
.tl-lv-tabs a.alt { font-weight:700; color:var(--text-2); background:var(--bg-soft); border-color:var(--border-s); }
.tl-lv-tabs a.alt:hover { color:var(--red); border-color:var(--red-border); }
.tl-lv-tabs a.alt.on { background:#1A1A1B; color:#fff; border-color:#1A1A1B; }

/* KIND CHIPS (phụ, dạng icon + text) */
.tl-kind { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; padding:6px 0 30px; }
.tl-kind a { font:700 12.5px var(--ff); color:var(--text-2); background:#fff; border:1px solid var(--border-s); padding:7px 14px; border-radius:99px; transition:.15s; display:inline-flex; align-items:center; gap:6px; }
.tl-kind a i { font-size:14px; }
.tl-kind a:hover { color:var(--red); border-color:var(--red-border); }
.tl-kind a.on { color:var(--red); border-color:var(--red); background:var(--red-light); }

/* DOC GRID — text-first card */
.tl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:10px; }
.tl-doc { background:#fff; border:1px solid var(--border-s); border-radius:var(--r-m); box-shadow:var(--sh-xs); padding:18px 18px 16px; display:flex; flex-direction:column; min-height:160px; transition:.18s; }
.tl-doc:hover { transform:translateY(-3px); box-shadow:var(--sh-m); border-color:var(--red-border); }
.tl-doc-top { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.tl-doc-top .lv { font-size:11.5px; font-weight:800; color:var(--red); background:var(--red-light); border-radius:8px; padding:4px 10px; }
.tl-doc-top .kd { font-size:11.5px; font-weight:700; color:var(--text-2); background:var(--bg-soft); border:1px solid var(--border-s); border-radius:99px; padding:4px 12px; display:inline-flex; align-items:center; gap:5px; }
.tl-doc-top .kd i { font-size:13px; }
.tl-doc h3 { font-size:15px; font-weight:800; line-height:1.35; letter-spacing:-.015em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tl-doc h3 a { color: var(--text); text-decoration: none; transition: color .15s; }
.tl-doc h3 a:hover { color: var(--red); }
.tl-doc p { font-size:12.5px; color:var(--text-2); line-height:1.55; margin-top:7px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tl-doc-foot {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border-s);
  flex-wrap: wrap;
}
.tl-doc .read { color:var(--red); font-weight:700; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; padding-top: 12px; }
.tl-doc-foot .read { padding-top: 0; }
/* (1) .tl-ask ("Nhắn PNE") đã bỏ — CSS dọn theo. */

/* PAGINATION (reuse tt) */
.tl-pager { margin:34px 0 0; }
.tl-pager nav { display:flex; justify-content:center; }
.tl-pager .pagination { display:inline-flex; gap:7px; margin:0; }
.tl-pager .page-item .page-link { width:38px; height:38px; padding:0; border-radius:10px; border:1px solid var(--border-s); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700; color:var(--text-2); background:#fff; }
.tl-pager .page-item.active .page-link { background:var(--red); color:#fff; border-color:var(--red); }
.tl-pager .page-item.disabled .page-link { color:var(--text-3); background:#fafafa; }

/* CONV CTA (gold wash) */
.tl-conv { margin:44px 0 70px; background:linear-gradient(100deg,#FFEB99,#FFFFFF 70%); border:1px solid #FFDF55; border-radius:var(--r-m); padding:18px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tl-conv i.lead { font-size:26px; color:#7C6500; }
.tl-conv .tx { flex:1; min-width:240px; font-size:13.5px; line-height:1.55; }
.tl-conv .tx b { color:#931518; display:block; margin-bottom:2px; }
.tl-conv .btn-go { font-size:13px; font-weight:700; color:#fff; background:var(--red); display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:9px; box-shadow:var(--sh-red); }
.tl-conv .btn-line { font-size:13px; font-weight:700; color:#7C6500; background:transparent; border:1px solid #FFDF55; display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:9px; }

.tl-empty { text-align:center; padding:80px 20px; color:var(--text-2); }
.tl-empty i { font-size:56px; color:var(--border-s); display:block; margin-bottom:14px; }

@media (max-width:900px){ .tl-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .tl-wrap { padding:0 16px; }
  .tl-grid { grid-template-columns:1fr; }
  /* #59b — Mobile: 2 nhóm pill lọc (cấp + loại) thành 1 HÀNG CUỘN NGANG thay vì wrap nhiều
     hàng rối. Giữ nguyên chức năng lọc + trạng thái .on; pill không co; ẩn thanh cuộn. */
  .tl-lv-tabs, .tl-kind {
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tl-lv-tabs::-webkit-scrollbar, .tl-kind::-webkit-scrollbar { display:none; }
  .tl-lv-tabs a, .tl-kind a { flex:0 0 auto; white-space:nowrap; }
  /* Bỏ "Phương pháp học" TRÙNG khỏi nhóm CẤP (vẫn giữ ở nhóm LOẠI) — chỉ mobile. */
  .tl-lv-tabs a.alt { display:none; }
}

/* #126: vùng chạm ≥44px cho bộ lọc + phân trang + link đọc trên mobile (tăng min-size/padding, không đổi chữ). */
@media (max-width: 900px) {
  .tl-lv-tabs a, .tl-kind a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tl-pager .page-item .page-link { width: 44px; height: 44px; }
  .tl-doc .read { min-height: 44px; }
}