/* =====================================================================
   category.css — Trang danh sách bài viết của 1 chuyên mục.
   Nạp sau home.css (dùng lại .hm-container, .hm-thumb, token màu).
   ===================================================================== */

/* ---------- HERO ---------- */
.ct-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:300px;display:flex;align-items:center;padding:34px 0 44px;
  background:
    radial-gradient(50% 90% at 85% 40%, color-mix(in srgb,var(--c) 18%,transparent), transparent 70%),
    linear-gradient(115deg, color-mix(in srgb,var(--c) 5%,#f4f8ff) 0%, color-mix(in srgb,var(--c) 14%,#eef4ff) 100%);
}
:root[data-theme="dark"] .ct-hero{
  background:
    radial-gradient(50% 90% at 85% 40%, color-mix(in srgb,var(--c) 22%,transparent), transparent 70%),
    var(--surface);
}
/* ảnh neo bên phải theo chiều cao hero, mép trái mờ dần vào nền */
.ct-hero-bg{position:absolute;top:0;right:0;z-index:-2;height:100%;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%);}
/* làm nhạt nửa trái để chữ luôn dễ đọc */
.ct-hero.has-banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(244,248,255,.85) 0%, rgba(244,248,255,.4) 40%, rgba(244,248,255,0) 60%);
}
:root[data-theme="dark"] .ct-hero.has-banner::before{
  background:linear-gradient(90deg, rgba(13,17,23,.95) 0%, rgba(13,17,23,.75) 45%, rgba(13,17,23,.15) 75%);
}
/* chuyên mục chưa có ảnh: icon lớn mờ bên phải */
.ct-hero-icon{
  position:absolute;right:max(24px, calc((100% - 1180px) / 2 + 40px));top:50%;transform:translateY(-50%);z-index:-1;
  width:220px;height:220px;border-radius:48px;display:grid;place-items:center;font-size:96px;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 20%,transparent);
}
.ct-hero-inner{position:relative;}
.ct-crumb{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:14.5px;color:var(--ink-2);}
.ct-crumb a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none;}
.ct-crumb a:hover{color:var(--c);}
.ct-crumb span{color:var(--ink-3);}
.ct-hero h1{margin:0 0 14px;max-width:640px;font-size:clamp(30px,3.4vw,50px);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.ct-hero h1 .grad{background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#22b8f0));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.ct-desc{margin:0;max-width:52ch;font-size:17px;line-height:1.55;color:var(--ink-2);}
.ct-count{
  display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:8px 16px;border-radius:999px;
  font-size:14.5px;color:var(--ink-2);background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line-soft);
}
.ct-count i{color:var(--c);}

/* ---------- THANH LỌC ---------- */
.ct-main{padding-top:24px;padding-bottom:70px;}
.ct-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.ct-search{position:relative;flex:1 1 320px;max-width:470px;}
.ct-search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-2);}
.ct-search input{
  width:100%;height:44px;padding:0 16px 0 46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-family:var(--sans);font-size:14.5px;
}
.ct-search input:focus{outline:none;border-color:var(--hm-primary);}
.ct-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.ct-tabs a{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;
  font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;
  background:color-mix(in srgb,var(--ink) 5%,var(--surface));transition:background .15s,color .15s;
}
.ct-tabs a:hover{background:color-mix(in srgb,var(--hm-primary) 10%,var(--surface));color:var(--hm-primary);}
.ct-tabs a.on{background:var(--hm-primary);color:#fff;font-weight:600;}
.ct-sort{position:relative;margin-left:auto;}
.ct-sort i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-2);pointer-events:none;}
.ct-sort select{
  height:44px;padding:0 40px 0 40px;border-radius:12px;border:1px solid var(--line);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:14.5px;appearance:none;
  background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346536b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
}

/* ---------- THẺ BÀI VIẾT ---------- */
.ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.ct-card{
  display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:10px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
}
:root:not([data-theme="dark"]) .ct-card{background:#fff;}
.ct-thumb{display:block;align-self:start;aspect-ratio:16/10;border-radius:12px;}
.ct-thumb img{transition:transform .5s ease;}
.ct-card:hover .ct-thumb img{transform:scale(1.06);}
.ct-no{
  position:absolute;left:10px;top:10px;z-index:1;padding:3px 9px;border-radius:8px;
  font-family:var(--sans);font-size:13px;font-weight:700;color:#fff;
  background:rgba(8,14,40,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.ct-body{display:flex;flex-direction:column;min-width:0;padding:4px 8px 4px 0;}
.ct-body h2{margin:0 0 6px;font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.01em;}
.ct-body h2 a{color:var(--ink);text-decoration:none;}
.ct-body h2 a:hover{color:var(--hm-primary);}
.ct-ex{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ct-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.ct-tags a{
  padding:3px 10px;border-radius:7px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);text-decoration:none;
  background:color-mix(in srgb,var(--ink) 5%,var(--surface));
}
.ct-tags a:hover{color:var(--hm-primary);background:color-mix(in srgb,var(--hm-primary) 10%,var(--surface));}
.ct-meta{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin-top:auto;padding-top:14px;font-size:13px;color:var(--ink-3);}
.ct-meta span{display:inline-flex;align-items:center;gap:7px;}
.ct-read{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--hm-primary);text-decoration:none;}
.ct-read i{transition:transform .2s;}
.ct-read:hover i{transform:translateX(3px);}

/* ---------- PHÂN TRANG ---------- */
.ct-pages{display:flex;justify-content:center;gap:8px;margin-top:30px;}
.ct-pages a,.ct-pages span{min-width:42px;height:42px;padding:0 10px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;}
.ct-pages a:hover{border-color:var(--hm-primary);color:var(--hm-primary);}
.ct-pages .on{background:var(--hm-primary);border-color:var(--hm-primary);color:#fff;}
.ct-pages .off{opacity:.45;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .ct-grid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .ct-hero{min-height:0;}
  .ct-hero-bg{opacity:.35;}
  .ct-hero.has-banner::before{background:linear-gradient(90deg, rgba(244,248,255,.9), rgba(244,248,255,.55));}
  .ct-hero-icon{width:130px;height:130px;font-size:56px;border-radius:32px;opacity:.6;}
  .ct-sort{margin-left:0;}
}
@media (max-width:600px){
  .ct-card{grid-template-columns:1fr;}
  .ct-thumb{aspect-ratio:16/9;}
  .ct-body{padding:0 6px 6px;}
  .ct-search{max-width:none;}
}