/* Single post (อ่านบทความ) — magazine reader. Loads on top of insights.css. */

/* Reading progress bar */
.kbx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--kb-primary),#8b5cf6);transition:width .1s linear}

/* Article shell + two-column layout (article + sticky sidebar) */
.kbx-post-shell{max-width:1140px;margin:0 auto;padding:0 22px}
.kbx-crumb-top{padding-top:26px}
.kbx-post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.kbx-post-main{min-width:0}
.kbx-post-aside{position:sticky;top:76px;display:flex;flex-direction:column;gap:22px}
.kbx-article h2,.kbx-article h3{scroll-margin-top:74px}

/* Table of contents */
.kbx-toc{border:1px solid var(--kb-line);border-radius:16px;padding:18px 20px}
.kbx-toc h4{margin:0 0 12px;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--kb-ink)}
.kbx-toc h4 i{color:var(--kb-primary)}
.kbx-toc nav{display:flex;flex-direction:column;max-height:60vh;overflow:auto}
.kbx-toc a{color:var(--kb-muted);font-size:.88rem;line-height:1.4;padding:7px 0 7px 14px;
  border-left:2px solid var(--kb-line);transition:all .18s}
.kbx-toc a.lvl3{padding-left:26px;font-size:.83rem}
.kbx-toc a:hover{color:var(--kb-ink)}
.kbx-toc a.active{color:var(--kb-primary);border-left-color:var(--kb-primary);font-weight:600}

/* Sidebar popular */
.kbx-aside-pop{border:1px solid var(--kb-line);border-radius:16px;padding:18px 20px}
.kbx-aside-pop h4{margin:0 0 6px;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px}
.kbx-aside-pop h4 i{color:#f97316}
.kbx-aside-item{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--kb-line)}
.kbx-aside-item img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.kbx-aside-item .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:600;font-size:.86rem;line-height:1.35}
.kbx-aside-item:hover .t{color:var(--kb-primary)}
.kbx-aside-item .m{color:var(--kb-faint);font-size:.76rem;margin-top:3px;display:block}

/* Sidebar course promo (Blognone-style rail → our courses) */
.kbx-aside-courses{border:1px solid var(--kb-line);border-radius:16px;padding:18px 20px}
.kbx-aside-courses h4{margin:0 0 6px;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px}
.kbx-aside-courses h4 i{color:var(--kb-primary)}
.kbx-course-mini{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--kb-line)}
.kbx-course-mini img{width:64px;height:48px;border-radius:9px;object-fit:cover}
.kbx-course-mini .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:700;font-size:.86rem;line-height:1.35}
.kbx-course-mini:hover .t{color:var(--kb-primary)}
.kbx-course-mini .p{color:var(--kb-primary);font-weight:800;font-size:.85rem;margin-top:3px;display:block}
.kbx-course-all{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;
  font-size:.86rem;color:var(--kb-primary)}

/* Sidebar CTA (fallback when no courses) */
.kbx-aside-cta{display:flex;flex-direction:column;gap:5px;padding:22px;border-radius:16px;
  background:linear-gradient(135deg,#0f172a,#312e81);color:#fff}
.kbx-aside-cta strong{font-size:1.05rem}
.kbx-aside-cta span{color:#c7d0e0;font-size:.85rem}
.kbx-aside-cta .go{color:#fff;font-weight:700;margin-top:8px;display:inline-flex;align-items:center;gap:6px}

@media(max-width:960px){
  .kbx-post-layout{grid-template-columns:1fr;gap:0}
  .kbx-post-aside{position:static;margin-top:30px}
  .kbx-toc{display:none}
}

/* Hero */
.kbx-post-hero{padding:40px 0 8px}
.kbx-post-cat{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:800;
  font-size:.72rem;letter-spacing:.8px;text-transform:uppercase;padding:6px 14px;border-radius:8px;margin-bottom:20px}
.kbx-post-title{font-family:'Inter','Prompt',sans-serif;font-weight:900;
  font-size:clamp(2rem,4.6vw,3rem);line-height:1.22;letter-spacing:-1px;margin:0 0 18px;color:var(--kb-ink)}
.kbx-post-lead{font-size:1.18rem;color:var(--kb-muted);line-height:1.6;margin:0 0 26px}

.kbx-byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid var(--kb-line);border-bottom:1px solid var(--kb-line)}
.kbx-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--kb-ink),var(--kb-primary));
  color:#fff;font-weight:900;font-family:'Inter';display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.kbx-byline-who{font-weight:800;font-size:.95rem;color:var(--kb-ink)}
.kbx-byline-meta{color:var(--kb-faint);font-size:.82rem;display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.kbx-byline-meta i{margin-right:3px;opacity:.85}
.kbx-share{margin-left:auto;display:flex;gap:9px}
.kbx-share button,.kbx-share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--kb-line);
  background:#fff;color:var(--kb-ink2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;transition:all .2s;text-decoration:none}
.kbx-share button:hover,.kbx-share a:hover{transform:translateY(-2px);border-color:transparent;color:#fff;background:var(--kb-primary)}
.kbx-share .s-fb:hover{background:#1877f2}.kbx-share .s-ln:hover{background:#06c755}.kbx-share .s-x:hover{background:#0f172a}

/* Cover */
.kbx-cover{margin:30px 0 44px}
.kbx-cover img{width:100%;border-radius:18px;box-shadow:0 30px 60px rgba(15,23,42,.12);aspect-ratio:16/9;object-fit:cover}

/* Body typography */
.kbx-article{font-size:1.14rem;line-height:1.85;color:#26303f}
/* drop cap — owner prefers it (2026-09-28: tried a lead paragraph instead, went back) */
.kbx-article>p:first-of-type::first-letter{float:left;font-family:'Inter',serif;font-weight:900;
  font-size:3.6rem;line-height:.82;padding:6px 14px 0 0;color:var(--kb-primary)}
.kbx-article p{margin:0 0 26px}
/* จัดชิดสองข้างภาษาไทย (เจ้าของขอ 2026-09-28): เบราว์เซอร์ยืด "ช่องว่างระหว่างคำ" — ไทยแทบไม่มีช่องว่าง
   ทั้งบรรทัดจึงไปยืดที่ช่องว่างไม่กี่จุด (ข้าง ๆ คำอังกฤษ) จนเป็นรูโหว่ · inter-character = กระจายช่องไฟ
   ทีละตัวอักษรแทน ขอบเรียบไม่มีรู (Chrome 152 / Firefox รองรับ — Safari ยังไม่รองรับ) */
.kbx-article p,.kbx-article li{text-justify:inter-character}
@supports (text-justify: inter-character){
  @media(min-width:768px){ .kbx-article>p{text-align:justify} }   /* ชิดสองข้างเป็นค่าเริ่มต้นบนจอกว้าง ไม่ต้องกดทีละย่อหน้า */
}
/* เบราว์เซอร์ที่ยังกระจายทีละตัวอักษรไม่ได้ (Safari/iPhone) — ชิดซ้ายแทน แม้กดชิดสองข้างไว้ในตัวแก้ไข */
@supports not (text-justify: inter-character){
  .kbx-article [style*="justify"]{text-align:left !important}
}
.kbx-article h2{font-family:'Inter','Prompt',sans-serif;font-weight:900;font-size:1.7rem;
  line-height:1.3;margin:48px 0 20px;color:var(--kb-ink);letter-spacing:-.4px}
.kbx-article h3{font-weight:800;font-size:1.32rem;margin:36px 0 16px;color:var(--kb-ink)}
.kbx-article ul,.kbx-article ol{margin:0 0 26px;padding-left:26px}
.kbx-article li{margin-bottom:10px}
.kbx-article a{color:var(--kb-primary);text-decoration:underline;text-underline-offset:3px}
.kbx-article img{width:100%;border-radius:14px;margin:34px 0;box-shadow:0 16px 36px rgba(15,23,42,.1)}
.kbx-article blockquote{margin:40px 0;padding:26px 32px;background:var(--kb-soft);
  border-left:5px solid var(--kb-primary);border-radius:0 14px 14px 0;
  font-size:1.32rem;font-weight:700;font-style:italic;color:var(--kb-ink);line-height:1.5}
.kbx-article blockquote p{margin:0}
/* "ที่มา" box appended to AI news posts (admin/blog_ai_controller.php) */
.kbx-article .post-sources{margin:44px 0 0;padding:18px 22px;border-top:2px solid var(--kb-soft);background:#F8FAFC;border-radius:12px;font-size:.92rem;line-height:1.6;color:#475569}
.kbx-article .post-sources p{margin:0 0 8px}
.kbx-article .post-sources ul{margin:0;padding-left:20px}
.kbx-article .post-sources li{margin-bottom:6px;word-break:break-word}
.kbx-article .post-sources em{color:#94A3B8;font-style:normal}
/* inline figures placed by the AI writer (admin/blog_ai_controller.php blog_ai_figure) */
.kbx-article .post-figure,.kbx-article figure.image{margin:34px 0;display:block}
.kbx-article .post-figure img,.kbx-article figure.image img{margin:0}
.kbx-article .post-figure figcaption,.kbx-article figure.image figcaption{margin-top:10px;font-size:.85rem;line-height:1.5;color:#64748B;text-align:center}
/* "⚡ สรุปใน 30 วินาที" box at the top of AI posts */
.kbx-article .post-tldr{margin:0 0 34px;padding:20px 24px;background:linear-gradient(135deg,#EEF2FF,#F5F3FF);border:1px solid #C7D2FE;border-radius:14px;font-size:1.02rem;line-height:1.7}
.kbx-article .post-tldr p{margin:0 0 8px;color:#3730A3;font-size:.95rem}
.kbx-article .post-tldr ul{margin:0;padding-left:22px}
.kbx-article .post-tldr li{margin-bottom:6px;color:#1E293B}
.kbx-article .post-tldr li:last-child{margin-bottom:0}
.kbx-article code{background:var(--kb-soft);padding:2px 8px;border-radius:6px;font-size:.92em}
.kbx-article pre{background:var(--kb-navy);color:#e2e8f0;padding:22px;border-radius:14px;overflow:auto;margin:0 0 26px}
.kbx-article pre code{background:none;padding:0;color:inherit}
.kbx-article table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:.98rem}
.kbx-article th,.kbx-article td{border:1px solid var(--kb-line);padding:11px 14px;text-align:left}
.kbx-article th{background:var(--kb-soft);font-weight:700}
.kbx-article hr{border:0;border-top:1px solid var(--kb-line);margin:40px 0}

/* Category tag chip below the article */
.kbx-tagline{margin:44px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kbx-tagline .lbl{color:var(--kb-faint);font-size:.85rem;font-weight:600}
.kbx-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:99px;
  font-weight:700;font-size:.85rem;background:var(--kb-soft);color:var(--kb-ink2)}
.kbx-chip .d{width:9px;height:9px;border-radius:50%}
.kbx-chip-tag{background:#eef2ff;color:var(--kb-primary)}
.kbx-chip-tag:hover{background:var(--kb-primary);color:#fff}

/* Author box */
.kbx-author{display:flex;gap:20px;align-items:flex-start;margin:44px 0;padding:28px 30px;
  background:var(--kb-soft);border-radius:18px}
.kbx-author .kbx-avatar{width:62px;height:62px;font-size:1.6rem;flex-shrink:0}
.kbx-author h4{margin:0 0 6px;font-weight:800;font-size:1.1rem}
.kbx-author p{margin:0;color:var(--kb-muted);font-size:.95rem;line-height:1.6}

/* Related section wrapper on a soft band */
.kbx-related{background:var(--kb-soft);border-top:1px solid var(--kb-line);padding:64px 0 80px;margin-top:70px}

@media(max-width:640px){
  .kbx-share{margin-left:0;width:100%;margin-top:6px}
  .kbx-article>p:first-of-type::first-letter{font-size:3rem}
}