/* lotuz.vn design system — blog.css: trang /blog/ và danh mục bài viết dạng lưới 3×3 + bộ lọc chủ đề (.lz-bl, blog.js).
   Bộ lọc dùng lại .lz-pf của trang dự án (wp.css). Chữ theo thang trang con (pages.css): Chữ 14.5 · Chữ đậm 14.5/600 · Nhãn 12 in hoa. */

body.lz-blog .lz-bl{width:var(--wcol);margin:var(--sp-top) auto var(--sp-7);font:400 14.5px/1.6 var(--sans);color:var(--t2)}
body.lz-blog .lz-bl *{box-sizing:border-box}
/* H1 chỉ cho SEO, như trang dự án */
body.lz-blog .lz-bl .lz-archive-title{position:absolute!important;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Bộ lọc 1 hàng (Minh 31/10) trong khối kẻ ô chung của wp.css: tab chủ đề | ô tìm bài (nhãn trong ô như ô chọn) | đếm */
/* wp.css chừa lề 15px (10px ở m-mode) cho khe item lưới dự án; lưới blog không có khe đó nên bộ lọc bám đúng mép lưới */
body.lz-blog .lz-bl .lz-pf{display:flex;flex-wrap:wrap;align-items:stretch;margin:0 0 var(--sp-5)}
body.lz-blog .lz-bl .lz-pf-cats{flex:0 0 auto;border-bottom:0;border-right:1px solid var(--line)}
/* Cơ sở 280px (không phải auto = độ rộng tự nhiên) để ô tìm ở cùng hàng với tab, chỉ xuống hàng khi thật sự thiếu chỗ */
body.lz-blog .lz-bl .lz-pf-bar{flex:1 1 280px;min-width:0}
body.lz-blog .lz-bl .lz-pf-empty{flex-basis:100%}
body.lz-blog .lz-bl [hidden]{display:none!important}

/* Ô tìm bài: chữ nhập nằm trong ô như select của bộ lọc */
body.lz-blog .lz-bl-q input{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:26px;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;color:var(--paper);font:400 14.5px/1.2 var(--sans)}
body.lz-blog .lz-bl-q input::placeholder{color:var(--t4)}

/* Lưới có khe (Minh 31/10), mỗi thẻ viền riêng */
body.lz-blog .lz-bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.lz-blog .lz-bl-card{margin:0;border:1px solid var(--line-soft);background:var(--stone)}
body.lz-blog .lz-bl-card:hover{border-color:var(--line-strong)}
body.lz-blog .lz-bl-card > a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;transition:background-color .25s}
body.lz-blog .lz-bl-card > a:hover{background:var(--slate)}
body.lz-blog .lz-bl-img{aspect-ratio:16/10;overflow:hidden;background:var(--slate)}
body.lz-blog .lz-bl-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);transition:transform 1.2s var(--ease),filter .5s}
body.lz-blog .lz-bl-card > a:hover img{transform:scale(1.04);filter:none}
/* Thân thẻ: tiêu đề · trích 2 dòng · chân thẻ (chủ đề + ngày bên trái, Đọc bài bên phải) */
body.lz-blog .lz-bl-b{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "ex ex" "eb go";grid-template-rows:auto auto 1fr;align-items:end;gap:6px 12px;flex:1;padding:14px 16px 14px}
body.lz-blog .lz-bl-t{grid-area:t}
body.lz-blog .lz-bl-ex{grid-area:ex}
body.lz-blog .lz-bl-eb{grid-area:eb;padding-top:10px}
body.lz-blog .lz-bl-go{grid-area:go;padding-top:10px}
body.lz-blog .lz-bl-eb{margin:0;font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
body.lz-blog .lz-bl-t{margin:0;font:600 14.5px/1.4 var(--sans);letter-spacing:0;color:var(--paper);text-wrap:balance}
body.lz-blog .lz-bl-ex{margin:0;color:var(--t3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.lz-blog .lz-bl-go{margin:0;font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
body.lz-blog .lz-bl-card > a:hover .lz-bl-go{color:var(--gold)}
body.lz-blog .lz-bl-card:focus-within{outline:2px solid var(--gold);outline-offset:-2px}

body.lz-blog .lz-bl-more{display:flex;justify-content:center;margin-top:var(--sp-5)}
body.lz-blog .lz-bl-more button{min-height:44px;padding:0 24px;border:1px solid var(--gold-line);border-radius:0;background:linear-gradient(var(--gold-tint),var(--gold-tint)),var(--glass);box-shadow:inset 0 -2px 0 var(--gold);color:var(--paper);font:600 12.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
body.lz-blog .lz-bl-more button:hover{background:linear-gradient(var(--gold-tint-2),var(--gold-tint-2)),var(--glass);border-color:var(--gold)}

/* Dải tab chủ đề rộng ~740px: dưới 1180px không đủ chỗ cho ô tìm cùng hàng → tab một hàng riêng, tìm + đếm hàng dưới */
@media (max-width:1180px){
  body.lz-blog .lz-bl .lz-pf{display:grid}
  body.lz-blog .lz-bl .lz-pf-cats{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:1100px){
  body.lz-blog .lz-bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Cùng mốc 767 với wp.css (ở đó tab bị ẩn cho trang dự án) */
@media (max-width:767px){
  body.lz-blog .lz-bl{width:auto;margin:var(--sp-top) var(--gx) var(--sp-6)}
  /* wp.css cho tab dự án trượt ngang trên điện thoại; blog thì xuống dòng (Minh: hạn chế trượt ngang) */
  body.lz-blog .lz-bl .lz-pf{display:grid}
  /* wp.css ẩn dải tab trên điện thoại (trang dự án dùng ô chọn); blog giữ tab 2 cột */
  body.lz-blog .lz-bl .lz-pf-cats{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.lz-blog .lz-bl .lz-pf-cats>:last-child:nth-child(odd){grid-column:1/-1}
  body.lz-blog .lz-bl .lz-pf-cats{border-right:0;border-bottom:1px solid var(--line)}
  body.lz-blog .lz-bl .lz-pf-bar{grid-template-columns:minmax(0,1fr) auto}
  body.lz-blog .lz-bl .lz-pf-n{grid-column:auto;border-top:0;border-left:1px solid var(--line-soft)}
  body.lz-blog .lz-bl-grid{gap:10px}
  body.lz-blog .lz-bl-b{padding:10px 12px 12px;grid-template-areas:"t t" "eb eb"}
  body.lz-blog .lz-bl-go{display:none}
  body.lz-blog .lz-bl-ex{display:none}
}