/* ============================================================
   KQT — CHUYÊN MỤC BÀI VIẾT (category.php) — scope body.kqt-blog
   Theo design "KQT - Cam nang (standalone).html" 2026-09-29.

   File nạp CÓ ĐIỀU KIỆN (chỉ is_category — xem functions.php),
   đúng lệ per-page CSS của theme (kqt-service/about/lien-he…).
   KHÔNG đụng kqt-inline.css: trang chuyên mục không bao giờ là
   front page nên luật 2-file không áp ở đây — chrome (header/
   footer) vẫn do kqt-chrome.css lo, file này chỉ lo RUỘT trang.

   Token màu/chữ đọc từ :root của kqt-chrome.css + kqt-typography
   (nạp mọi trang): --fs-h1-page/--fs-h2/--fs-eyebrow là thang chữ
   toàn site — KHÔNG chế clamp riêng để trang blog lệch thang.
   ============================================================ */

/* ---------- breadcrumb (mỗi per-page CSS tự khai .crumb — lệ sẵn của theme,
   xem kqt-category.css/kqt-product.css; chrome không có .crumb chung) ---------- */
body.kqt-blog .crumb{ padding-block:18px 4px; }
body.kqt-blog .crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; font-size:13px; color:var(--taupe); }
body.kqt-blog .crumb li{ display:flex; align-items:center; gap:8px; }
body.kqt-blog .crumb li::after{ content:"›"; color:var(--gold); font-size:14px; }
body.kqt-blog .crumb li:last-child::after{ display:none; }
body.kqt-blog .crumb li[aria-current]{ color:var(--ink-2); font-weight:600; }
body.kqt-blog .crumb a{ color:var(--taupe); transition:color .2s; }
body.kqt-blog .crumb a:hover{ color:var(--gold-dark); }

/* ---------- eyebrow: bản "chỉ chữ" theo chuẩn M1 đã chốt toàn site
   (kqt-service.css đợt bỏ gạch 26px — trang mới không rước lại gạch cũ) ---------- */
body.kqt-blog .eyebrow{ font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); }

/* ---------- đầu trang ---------- */
body.kqt-blog .bl-head{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:40px; align-items:end; padding-block:clamp(28px,4vw,48px) clamp(24px,3vw,36px);
  border-bottom:1px solid var(--taupe-15); }
body.kqt-blog .bl-head .eyebrow{ display:block; margin-bottom:14px; }
/* H1 dùng thang trang nội dung toàn site (trần 44px) thay clamp 48px của mockup —
   thang chữ H đã chốt một lần cho cả site, trang blog không phá lệ. */
body.kqt-blog .bl-head h1{ font-size:var(--fs-h1-page); font-weight:800; line-height:1.12;
  letter-spacing:-.015em; color:var(--navy); text-wrap:balance; overflow-wrap:anywhere; min-width:0; }
body.kqt-blog .bl-head h1 + p, body.kqt-blog .bl-head .eyebrow ~ p:last-child,
body.kqt-blog .bl-head > div > p:last-of-type{ margin-top:14px; font-size:16px;
  line-height:1.7; color:var(--ink-2); max-width:56ch; }

/* ô tìm kiếm khoanh vùng chuyên mục */
body.kqt-blog .bl-search{ display:flex; align-items:center; gap:10px; height:52px;
  padding:0 8px 0 20px; border:1px solid var(--taupe-20); border-radius:999px;
  background:var(--white); transition:border-color .2s; }
body.kqt-blog .bl-search:focus-within{ border-color:var(--gold); }
body.kqt-blog .bl-search svg{ width:18px; height:18px; stroke:var(--taupe); fill:none;
  stroke-width:1.7; flex:none; }
body.kqt-blog .bl-search input{ flex:1; min-width:0; border:0; outline:0; background:none;
  font:inherit; font-size:15px; color:var(--ink); }
/* nút trong form: Flatsome đặt button{text-transform:uppercase} toàn cục —
   phải hạ tường minh, cùng bẫy đã ăn ở mobile menu (nhánh #42d). */
body.kqt-blog .bl-search button{ height:38px; padding:0 18px; border-radius:999px;
  background:var(--navy); color:#fff; font:inherit; font-size:13.5px; font-weight:600;
  border:0; cursor:pointer; text-transform:none; letter-spacing:0; transition:background .2s; }
body.kqt-blog .bl-search button:hover{ background:var(--gold-dark); }

/* ---------- khối nổi bật (chỉ trang 1, sort mặc định) ---------- */
body.kqt-blog .bl-feat{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:28px; padding-block:clamp(28px,3.6vw,44px); }
/* chuyên mục mới chỉ có 1 bài → không có cột phải, bài lớn đứng một mình
   nhưng ghìm bề ngang lại cho ảnh khỏi phình full 1320px. */
body.kqt-blog .bl-feat--don{ grid-template-columns:minmax(0,1.55fr); max-width:900px; }
body.kqt-blog .bl-big{ display:flex; flex-direction:column; color:var(--navy); }
body.kqt-blog .bl-big__m{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-lg);
  overflow:hidden; background:var(--cream); }
body.kqt-blog .bl-big__m img, body.kqt-blog .bl-side__m img, body.kqt-blog .bl-card__m img{
  width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
body.kqt-blog .bl-big:hover img, body.kqt-blog .bl-side a:hover img,
body.kqt-blog .bl-card:hover img{ transform:scale(1.04); }
body.kqt-blog .bl-big__b{ padding-top:22px; }
body.kqt-blog .bl-big h2{ font-size:clamp(22px,2.4vw,32px); font-weight:700; line-height:1.25;
  letter-spacing:-.01em; margin:10px 0 12px; text-wrap:balance; transition:color .2s; }
body.kqt-blog .bl-big p{ font-size:15px; line-height:1.7; color:var(--ink-2); max-width:62ch; }
body.kqt-blog .bl-big:hover h2, body.kqt-blog .bl-side a:hover h3,
body.kqt-blog .bl-card:hover h3{ color:var(--gold-dark); }
body.kqt-blog .bl-big__meta{ display:block; margin-top:14px; }
body.kqt-blog .bl-side{ display:flex; flex-direction:column; gap:0; }
body.kqt-blog .bl-side__k{ font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:14px;
  border-bottom:1px solid var(--taupe-15); }
body.kqt-blog .bl-side a{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px;
  align-items:center; padding:18px 0; border-bottom:1px solid var(--taupe-10); color:var(--navy); }
body.kqt-blog .bl-side__m{ aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--cream); }
body.kqt-blog .bl-side h3{ font-size:15.5px; font-weight:700; line-height:1.38; margin:6px 0;
  transition:color .2s; }

/* placeholder khi bài chưa có ảnh đại diện: icon ảnh mờ giữa ô kem,
   KHÔNG bịa ảnh — ô vẫn giữ đúng tỉ lệ để lưới không xô lệch. */
body.kqt-blog .bl-ph{ position:absolute; inset:0; margin:auto; width:34px; height:34px;
  stroke:var(--taupe-30); fill:none; stroke-width:1.5; }
body.kqt-blog .bl-big__m, body.kqt-blog .bl-side__m, body.kqt-blog .bl-card__m{ position:relative; }

/* ---------- chip + meta ---------- */
body.kqt-blog .bl-cat{ display:inline-flex; align-self:flex-start; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dark); }
body.kqt-blog .bl-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--ink-3); font-variant-numeric:tabular-nums; }
body.kqt-blog .bl-meta i{ width:3px; height:3px; border-radius:50%; background:var(--taupe-30); }

/* ---------- danh sách ---------- */
body.kqt-blog .bl-list{ padding-block:clamp(36px,4.6vw,64px); background:var(--paper); }
body.kqt-blog .bl-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:26px; }
body.kqt-blog .bl-bar h2{ font-size:var(--fs-h2); font-weight:700; color:var(--navy); }
body.kqt-blog .bl-tabs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding-bottom:2px; margin-bottom:24px; }
body.kqt-blog .bl-tabs::-webkit-scrollbar{ display:none; }
/* tab là LINK thật sang chuyên mục con (không phải button lọc client) —
   white-space:nowrap để pill không bao giờ gãy 2 dòng (gate chữ bấm được). */
body.kqt-blog .bl-tab{ flex:none; display:inline-flex; align-items:center; height:40px;
  padding:0 18px; border-radius:999px; border:1px solid var(--taupe-20); background:var(--white);
  font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  transition:border-color .22s, color .22s, background .22s; }
body.kqt-blog .bl-tab span{ margin-left:6px; font-size:12px; color:var(--ink-3); }
body.kqt-blog .bl-tab:hover{ border-color:var(--navy); color:var(--navy); }
body.kqt-blog .bl-tab.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }
body.kqt-blog .bl-tab.is-on span{ color:var(--gold-light); }
body.kqt-blog .bl-sort{ height:40px; padding:0 14px; border:1px solid var(--taupe-20);
  border-radius:999px; background:var(--white); font:inherit; font-size:13.5px;
  color:var(--ink-2); cursor:pointer; }
body.kqt-blog .bl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; }
body.kqt-blog .bl-card{ display:flex; flex-direction:column; color:var(--navy); }
body.kqt-blog .bl-card__m{ aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--cream); margin-bottom:16px; }
body.kqt-blog .bl-card h3{ font-size:17px; font-weight:700; line-height:1.38; margin:8px 0;
  transition:color .2s; text-wrap:pretty; }
body.kqt-blog .bl-card p{ font-size:14px; line-height:1.65; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-bottom:12px; }
body.kqt-blog .bl-card .bl-meta{ margin-top:auto; }
body.kqt-blog .bl-empty{ padding:40px 0; text-align:center; color:var(--ink-3); }
body.kqt-blog .bl-empty a{ color:var(--gold-dark); font-weight:600; }

/* phân trang — markup của paginate_links (.page-numbers/.current/.dots),
   không phải <a> tự chế như mockup. */
body.kqt-blog .bl-pag{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:40px; }
body.kqt-blog .bl-pag .page-numbers{ min-width:42px; height:42px; padding:0 12px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--taupe-20);
  background:var(--white); font-size:14px; font-weight:600; color:var(--ink-2);
  font-variant-numeric:tabular-nums; transition:border-color .2s, color .2s; }
body.kqt-blog .bl-pag .page-numbers.current{ background:var(--navy); border-color:var(--navy); color:#fff; }
body.kqt-blog .bl-pag .page-numbers.dots{ border:0; background:none; }
body.kqt-blog .bl-pag a.page-numbers:hover{ border-color:var(--gold); color:var(--navy); }

/* ---------- CTA cuối trang ---------- */
body.kqt-blog .bl-cta{ background:var(--gold-tint); border-top:1px solid rgba(154,116,42,.2); }
body.kqt-blog .bl-cta__in{ display:grid; grid-template-columns:1fr auto; gap:32px;
  align-items:center; padding-block:clamp(36px,4.2vw,54px); }
body.kqt-blog .bl-cta h2{ font-size:var(--fs-h2); font-weight:700; color:var(--navy); line-height:1.2; }
body.kqt-blog .bl-cta p{ margin-top:10px; font-size:15px; color:var(--ink-2); }
body.kqt-blog .bl-cta__btns{ display:flex; gap:12px; flex-wrap:wrap; }
/* .btn--ghost: chrome không có sẵn (chỉ .btn/.btn--gold) — per-page CSS tự khai,
   đúng lệ kqt-service.css, bản nền sáng viền navy. */
body.kqt-blog .btn--ghost{ background:var(--white); border:1px solid var(--navy); color:var(--navy); }
body.kqt-blog .btn--ghost:hover{ background:var(--navy); color:var(--on-navy); }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  body.kqt-blog .bl-head, body.kqt-blog .bl-feat{ grid-template-columns:1fr; }
  body.kqt-blog .bl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.kqt-blog .bl-cta__in{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  body.kqt-blog .bl-grid{ grid-template-columns:1fr; }
  body.kqt-blog .bl-side a{ grid-template-columns:96px minmax(0,1fr); }
  /* mockup giấu nút "Tìm" ở khổ hẹp — GIỮ nút vì đây là form thật (mockup là
     ô trang trí): mất nút là mất đường submit thấy được, Enter không phải ai
     cũng biết. Hạ đệm cho vừa. */
  body.kqt-blog .bl-search{ height:48px; padding-left:16px; }
  body.kqt-blog .bl-search button{ height:36px; padding:0 14px; }
}