/* ===== Tokens / Themes ===== */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569;
  --panel:#f1f5f9; --card:#f8fafc; --border:#e2e8f0;
  --pri:#2563eb; --sec:#334155;
  --ff:"Bai Jamjuree","Noto Sans Thai",system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0b1220; --fg:#e7eefb; --muted:#92a3b8;
  --panel:#0f172a; --card:#0f1a2b; --border:#203047;
  --pri:#3b82f6; --sec:#1f2937;
}

body{ background:var(--bg); color:var(--fg); font-family:var(--ff); }

/* ===== Layout ===== */
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.kb-home{ display:block; }

.kb-hero{ padding:40px 0 16px; text-align:center; }
.kb-hero__title{ font-size:clamp(28px,3.2vw,44px); margin:0 0 16px; }

.kb-search{ display:flex; gap:10px; justify-content:center; }
.kb-search input{
  width:min(760px, 80vw); height:44px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--card); color:var(--fg); padding:0 16px;
}
.kb-search input::placeholder{ color:var(--muted); }

.kb-btn{ height:44px; padding:0 16px; border-radius:12px; border:1px solid var(--border); cursor:pointer; }
.kb-btn--pri{ background:var(--pri); color:#fff; border:none; }
.kb-btn--sec{ background:var(--card); color:var(--fg); }
.kb-btn--ghost{ background:transparent; color:var(--fg); }

.kb-quickchips{ margin:14px auto 0; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.kb-chip{ display:inline-flex; align-items:center; padding:.4rem .7rem; border-radius:999px;
  background:var(--panel); border:1px solid var(--border); color:var(--fg); text-decoration:none; font-weight:700; }
.kb-chip:hover{ border-color:var(--kb-cat, var(--pri)); }

.kb-section{ padding:28px 0; }
.kb-sec__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kb-sec__title{ font-size:20px; margin:0; }

/* ===== Categories ===== */
.kb-catgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.kb-catcard{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px; border-radius:16px; background:var(--panel); border:1px solid var(--border); text-decoration:none; }
.kb-catcard__pill{
  background:color-mix(in oklab, var(--kb-cat, var(--pri)) 18%, transparent);
  border:1px solid color-mix(in oklab, var(--kb-cat, var(--pri)) 40%, var(--border));
  padding:.35rem .6rem; border-radius:999px; font-weight:800; color:var(--fg);
}
.kb-catcard__count{ color:var(--muted); font-size:.95rem; }
.kb-catcard:hover{ border-color:var(--kb-cat, var(--pri)); }

/* ===== Latest Posts ===== */
.kb-postgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.kb-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px; }
.kb-card__title{ color:var(--fg); text-decoration:none; font-weight:900; line-height:1.3; display:block; }
.kb-card__title:hover{ color:var(--kb-cat, var(--pri)); }
.kb-card__meta{ display:flex; align-items:center; gap:10px; color:var(--muted); margin:6px 0 8px; font-size:.95rem; }
.kb-pill{ padding:.25rem .55rem; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--fg); text-decoration:none; }
.kb-card__excerpt{ margin:0; color:var(--muted); }
.kb-loadmore{ text-align:center; margin-top:14px; }