/* /tin-tuc — listing theo chuyên mục. Token: home-pne.css */
body.tin-tuc-page { background: var(--bg); }

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

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

/* TABS chuyên mục */
.tt-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:6px 0 26px; }
.tt-tabs a { font:700 13px var(--ff); color:var(--text-2); background:var(--bg-soft); border:1px solid var(--border-s); padding:8px 16px; border-radius:99px; transition:.15s; display:inline-flex; align-items:center; gap:6px; }
.tt-tabs a:hover { border-color:var(--red-border); color:var(--red); }
.tt-tabs a.on { background:var(--red); color:#fff; border-color:var(--red); }
.tt-tabs a .n { font-size:11px; opacity:.7; }

/* FEATURED — bài mới nhất */
.tt-feat { display:grid; grid-template-columns:1.25fr 1fr; background:#fff; border:1px solid var(--border-s); border-radius:var(--r-l); box-shadow:var(--sh-s); overflow:hidden; transition:.18s; margin-bottom:24px; }
.tt-feat:hover { box-shadow:var(--sh-m); }
.tt-feat-img { position:relative; min-height:260px; background:var(--bg-soft); }
.tt-feat-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tt-feat-img-empty { position:absolute; inset:0; display:grid; place-items:center; color:rgba(0,0,0,.15); font-size:48px; }
.tt-feat-bd { padding:30px 32px; display:flex; flex-direction:column; }
.tt-cat-chip { display:inline-flex; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--red); background:var(--red-light); border-radius:99px; padding:5px 12px; }
.tt-feat-bd h2 { font-size:clamp(20px,2.5vw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.3; margin-top:14px; }
.tt-feat-bd p { font-size:14px; color:var(--text-2); line-height:1.65; margin-top:10px; }
.tt-meta { display:flex; align-items:center; gap:14px; font-size:12px; color:var(--text-3); margin-top:auto; padding-top:16px; }
.tt-meta i { font-size:14px; }
.tt-read { color:var(--red); font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:5px; }

/* GRID — thumbnail CỐ ĐỊNH 150px */
.tt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
.tt-card { background:#fff; border:1px solid var(--border-s); border-radius:var(--r-m); box-shadow:var(--sh-xs); overflow:hidden; display:flex; flex-direction:column; transition:.18s; }
.tt-card:hover { transform:translateY(-3px); box-shadow:var(--sh-m); border-color:var(--red-border); }
.tt-card-img { height:150px; background:var(--bg-soft); position:relative; overflow:hidden; }
.tt-card-img img { width:100%; height:150px; object-fit:cover; display:block; }
.tt-card-img-empty { width:100%; height:100%; display:grid; place-items:center; color:rgba(0,0,0,.15); font-size:36px; }
.tt-card-img .tt-cat-chip { position:absolute; left:10px; top:10px; background:rgba(255,255,255,.95); font-size:10px; padding:4px 10px; }
.tt-card-bd { padding:13px 15px 15px; display:flex; flex-direction:column; flex:1; }
.tt-card-bd h3 { font-size:14px; font-weight:800; line-height:1.4; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tt-card-bd p { font-size:12px; color:var(--text-2); line-height:1.5; margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tt-card-bd .tt-meta { padding-top:10px; }

/* PAGINATION */
.tt-pager { margin:34px 0 0; }
.tt-pager nav { display:flex; justify-content:center; }
.tt-pager .pagination { display:inline-flex; gap:7px; margin:0; }
.tt-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; }
.tt-pager .page-item.active .page-link { background:var(--red); color:#fff; border-color:var(--red); }
.tt-pager .page-item.disabled .page-link { color:var(--text-3); background:#fafafa; }

/* END CTA */
.tt-end-cta { margin:44px 0 70px; background:#F7F7F8; border:1px solid var(--border-s); border-left:4px solid var(--red); border-radius:var(--r-m); padding:18px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tt-end-cta i.lead { font-size:26px; color:var(--red); }
.tt-end-cta .tx { flex:1; min-width:240px; font-size:13.5px; }
.tt-end-cta .tx b { color:var(--red); }
.tt-end-cta .btn-go { font-size:13.5px; font-weight:700; color:#fff; background:var(--red); display:inline-flex; align-items:center; gap:7px; padding:12px 18px; border-radius:10px; box-shadow:var(--sh-red); }

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

@media (max-width:900px){
  .tt-feat { grid-template-columns:1fr; }
  .tt-feat-img { height:200px; min-height:0; }
  .tt-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .tt-wrap { padding:0 16px; }
  .tt-grid { grid-template-columns:1fr; }
  /* #60 — Mobile: pill lọc chuyên mục (kèm số đếm) 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. */
  .tt-tabs {
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tt-tabs::-webkit-scrollbar { display:none; }
  .tt-tabs a { flex:0 0 auto; white-space:nowrap; }
}

/* #126: vùng chạm ≥44px cho bộ lọc + phân trang + link đọc bài trên mobile. */
@media (max-width: 900px) {
  .tt-tabs a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tt-pager .page-item .page-link { width: 44px; height: 44px; }
  .tt-read { min-height: 44px; }
}