:root{
  /* โหมดสว่าง: เพิ่มคอนทราสต์ตัวอักษร */
  --bg:#ffffff; --fg:#0e141b; --muted:#475569;
  --card:#f8fafc; --accent:#1d4ed8; --accent-weak:#e0e7ff;
  --border:#e2e8f0; --shadow:0 4px 24px rgba(0,0,0,.08);
}
/* โหมดมืด: background สว่างขึ้นเล็กน้อย + ขอบ/ตัวอักษรสว่างขึ้น */
html[data-theme="dark"]{
  --bg:#0f172a;           /* เดิมค่อนข้างมืด (#0b0f14) */
  --fg:#e2e8f0;           /* สว่างขึ้นให้อ่านง่าย */
  --muted:#94a3b8;
  --card:#131c31;         /* ใกล้พื้นหลังแต่ยกนิดหน่อย */
  --accent:#7aa2ff;       /* น้ำเงินอ่อนอ่านสบายตา */
  --accent-weak:#1f2a44;  /* แถบเน้นอ่อน */
  --border:#243049;       /* ขอบชัดขึ้น */
  --shadow:0 6px 28px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Bai Jamjuree","Noto Sans Thai",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.85; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px; margin-inline:auto; padding:1rem}

.kb-header,.kb-footer{background:var(--card); border-bottom:1px solid var(--border)}
.kb-footer{border-top:1px solid var(--border); border-bottom:none}
.kb-header .container,.kb-footer .container{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.logo{font-weight:700; text-decoration:none; color:var(--fg)}
.nav .menu{display:inline-flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav a{color:var(--fg); text-decoration:none}
.nav button{background:transparent; border:1px solid var(--border); padding:.45rem .7rem; border-radius:.6rem; cursor:pointer; color:var(--fg)}

.hero{padding:4rem 0; text-align:center; background:linear-gradient(180deg, var(--card), transparent)}
.hero h1{margin:0 0 1rem}
.search-form{display:flex; gap:.5rem; justify-content:center}
.search-form input[type=search], .search-inline input[type=search]{
  width:min(680px, 100%); padding:.95rem 1rem; border:1px solid var(--border); border-radius:.8rem; background:var(--bg); color:var(--fg)
}
.btn{background:var(--accent); color:#0b1220; border:none; padding:.75rem 1.05rem; border-radius:.7rem; cursor:pointer; box-shadow:var(--shadow); font-weight:600}
.btn.secondary{background:transparent; color:var(--fg); border:1px solid var(--border)}
.btn-group{display:flex; gap:.5rem}

.section{padding:2rem 0}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem}
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; box-shadow:var(--shadow)}
.card h3{margin-top:0}
.list .item{padding:1rem; border-bottom:1px solid var(--border)}
.list .item:last-child{border-bottom:none}
.item a{color:var(--fg); text-decoration:none}
.item .meta{color:var(--muted); font-size:.95rem}
.cta{background:var(--accent-weak); padding:1.5rem 0}

.page-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0}
.filters select{padding:.6rem; border:1px solid var(--border); border-radius:.6rem; background:var(--bg); color:var(--fg)}

.breadcrumb{border-bottom:1px solid var(--border); background:var(--card)}
.breadcrumb ol{list-style:none; margin:0; padding:.5rem 1rem; display:flex; gap:.5rem; flex-wrap:wrap}
.breadcrumb a{color:var(--fg); text-decoration:none}
.breadcrumb li::after{content:"/"; margin:0 .25rem; color:var(--muted)}
.breadcrumb li:last-child::after{content:""}

.article-layout{display:grid; grid-template-columns:280px 1fr; gap:2rem; padding:1rem 0}
.toc{position:sticky; top:1rem; align-self:start; background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; max-height:75vh; overflow:auto}
.toc a{display:block; color:var(--fg); text-decoration:none; padding:.2rem 0}
.toc a.depth-3{padding-left:1rem; font-size:.98rem; color:var(--muted)}
.content h2{margin-top:2rem}
.content pre{background:#0b1020; color:#d1e7ff; padding:1rem; border-radius:.8rem; overflow:auto}

/* Typeahead/Lists */
.typeahead{max-width:680px; margin:.5rem auto 0; text-align:left}
.typeahead .suggest{padding:.5rem .75rem; border:1px solid var(--border); border-top:none; background:var(--card)}
.typeahead .suggest a{text-decoration:none; color:var(--fg); display:block}

.helpful{margin-top:2rem; background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem}
.feedback-area{margin-top:.5rem; display:grid; gap:.5rem}
.related .list{margin-top:1rem}

.pagination{display:flex; gap:.5rem; justify-content:center; margin:1.5rem 0}
.pagination a, .pagination span{border:1px solid var(--border); background:transparent; color:var(--fg); padding:.6rem .9rem; border-radius:.6rem; text-decoration:none}

/* ===== Editor Page (Front) ===== */
.editor-wrap{min-height:60vh}
.editor-toolbar{
  position:sticky; top:0; z-index:5;
  display:flex; gap:.6rem; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0));
  backdrop-filter:saturate(120%) blur(6px);
}
.editor-toolbar .left,.editor-toolbar .right{display:flex; gap:.6rem; align-items:center}

.kbtn{background:transparent; color:var(--fg); border:1px solid var(--border); padding:.5rem .8rem; border-radius:.6rem; cursor:pointer}
.kbtn.primary{background:var(--accent); color:#0b1220; border:none}
.krange{accent-color:var(--accent)}

.kinput{
  background:var(--bg); color:var(--fg);
  border:1px solid var(--border); border-radius:.6rem;
  padding:.55rem .7rem; min-width: 20ch;
}
.kinput::placeholder{color:var(--muted)}

.editor{display:flex; justify-content:center; padding:1rem}
.paper{
  width:var(--editor-width,72ch); max-width:100%;
  background:transparent; color:var(--fg);
  border:none; outline:none; resize:none;
  font-size:var(--editor-size,18px); line-height:var(--editor-line,1.95);
  caret-color:var(--accent); padding:1.2rem 0 5rem 0; tab-size:2;
}

.muted{color:var(--muted)}
.focus .editor-toolbar, .focus .kb-footer{opacity:.25}
.focus .editor-toolbar:hover, .focus .kb-footer:hover{opacity:1}

/* Responsive */
@media (max-width: 900px){
  .article-layout{grid-template-columns:1fr}
  .toc{order:-1}
}

/* Print styles */
@media print{
  header, .nav, .toc, .helpful .btn-group, .article-actions, .kb-footer, .cta { display:none !important; }
  .content{font-size:12pt}
}

/* Utility */
.visually-hidden{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* ===== Theme Toggle (header) ===== */
.theme-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:999px;
  padding:.35rem .6rem; cursor:pointer; box-shadow:var(--shadow);
  font-weight:600;
}
.theme-toggle:hover{ filter:brightness(1.02); }
.theme-toggle__icon{ font-size:1rem; line-height:1; }
.theme-toggle__text{ font-size:.95rem; }

/* Skip link for keyboard users */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--card);color:var(--fg);padding:.5rem .8rem;border-radius:.5rem;border:1px solid var(--border);z-index:9999}

/* Back to top */
.back-to-top{position:fixed;right:1rem;bottom:1rem;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:.6rem .8rem;cursor:pointer;box-shadow:var(--shadow);display:none}
.back-to-top.show{display:block}
html{scroll-behavior:smooth}

/* === Article: กว้างไม่ล้น + องค์ประกอบในเนื้อหาให้ Responsive === */
.content { max-width: 860px; margin-inline: auto; }
.content .entry > * { max-width: 100%; }

/* รูป/วิดีโอ */
.content img, .content video, .content svg { max-width: 100%; height: auto; display: block; margin: 1rem auto; }
.content iframe { width: 100%; max-width: 100%; border: 0; }

/* ฝังวิดีโอแบบสัดส่วนคงที่ */
.embed-wrap{ position:relative; width:100%; max-width:100%; padding-top:56.25%; margin:1rem 0; }
.embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* ตารางยาวให้เลื่อนด้านข้างได้ ไม่ดันจอ */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:.6rem; }
.table-wrap table{ width:100%; border-collapse:collapse; }
.table-wrap th, .table-wrap td{ border:1px solid var(--border); padding:.6rem .8rem; }

/* โค้ด/พรียาวไม่แตกบรรทัดให้ห่อคำ */
.content pre{ white-space: pre-wrap; word-break: break-word; }

/* ปุ่มแอ็กชัน */
.article-actions{ display:flex; gap:.5rem; margin:1rem 0 1.5rem; flex-wrap:wrap }

/* ลิงก์ให้สวย + เข้าถึงได้ */
.content a{ color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.content a:hover{ text-decoration-thickness: .15em; }
.content a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius:.25rem }

/* กันหัวข้อโดน header ทับเวลาเลื่อนด้วย TOC */
:target{ scroll-margin-top: 90px; }

/* ปรับพิมพ์/ดาวน์โหลด PDF: แสดงเฉพาะเนื้อหา */
@media print{
  header, .nav, .breadcrumb, .toc, .article-actions, .helpful, .kb-footer, .cta { display:none !important; }
  .content{ max-width: 100% !important; }
}

/* ช่วยมองตำแหน่งแบ่งหน้าตอนดูบนจอ (ไม่บังคับในจอ) */
.pdf-pagebreak{ border-top:1px dashed var(--border); margin-top:1rem; padding-top:1rem; }
.avoid-break{ break-inside: avoid; }

/* ===== บทความก่อนหน้า/ถัดไป ===== */
.post-nav{display:flex;justify-content:space-between;gap:1rem;margin:2rem 0;flex-wrap:wrap}
.post-nav a{display:inline-block;padding:.6rem 1rem;border-radius:.5rem;background:var(--card);border:1px solid var(--border);color:var(--fg);transition:.2s}
.post-nav a:hover{background:var(--accent);color:#fff;text-decoration:none}

/* ===== บทความที่เกี่ยวข้อง ===== */
.related-posts{margin:3rem 0 1rem}
.related-posts h2{margin-bottom:1rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.related-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:.6rem;overflow:hidden;transition:transform .2s, box-shadow .2s}
.related-card:hover{transform:translateY(-3px);box-shadow:0 4px 16px rgba(0,0,0,.1);text-decoration:none}
.related-thumb img{width:100%;height:auto;display:block}
.related-content{padding:.8rem}
.related-content h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.related-content p{margin:0;color:var(--muted);font-size:.9rem}

/* ===== Sticky Prev/Next ===== */
.sticky-post-nav{
  position: fixed; left: 0; right: 0; bottom: .75rem; z-index: 999;
  display: grid; place-items: center; pointer-events: none;
}
.sticky-post-nav .spn-inner{
  width: min(1000px, 95vw); pointer-events: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  background: color-mix(in oklab, var(--bg) 86%, black 14%);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: .5rem;
  backdrop-filter: blur(6px);
}
.sticky-post-nav a{
  display: flex; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--border);
  padding: .6rem .8rem; border-radius: 10px; transition: .2s;
  min-height: 44px; text-decoration: none;
}
.sticky-post-nav a:hover{ background: var(--accent); color: #fff; border-color: transparent; }
.sticky-post-nav .lbl{ font-size: .85rem; opacity: .8 }
.sticky-post-nav .ttl{ font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ด้านซ้ายชิดซ้าย, ด้านขวาชิดขวา */
.sticky-post-nav .spn-left a{ justify-content: flex-start; }
.sticky-post-nav .spn-right a{ justify-content: flex-end; }

/* มือถือ: แสดงปุ่มเดียวต่อแถว */
@media (max-width: 640px){
  .sticky-post-nav .spn-inner{ grid-template-columns: 1fr; }
}

/* เว้นที่ให้ปุ่ม back-to-top (ถ้ามี) */
.back-to-top{ bottom: 4.5rem; }

/* ===== Sticky Prev/Next: ไอคอน + Tooltip ===== */
.sticky-post-nav .spn-left a::before{content:"←"; font-weight:700}
.sticky-post-nav .spn-right a::after{content:"→"; font-weight:700; margin-left:.4rem}

/* Tooltip เบา ๆ บน hover/โฟกัส */
.sticky-post-nav a[data-tip]{ position:relative; }
.sticky-post-nav a[data-tip]:hover::before,
.sticky-post-nav a[data-tip]:focus-visible::before{
  content: attr(data-tip);
  position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 8px);
  background: var(--card); color: var(--fg); border:1px solid var(--border);
  padding:.35rem .6rem; font-size:.85rem; white-space:nowrap; border-radius:.4rem;
  box-shadow: var(--shadow);
}
.sticky-post-nav a[data-tip]:hover::after,
.sticky-post-nav a[data-tip]:focus-visible::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + 2px); border:6px solid transparent; border-top-color:var(--border);
}
html[data-theme="dark"] .sticky-post-nav a[data-tip]:hover::after,
html[data-theme="dark"] .sticky-post-nav a[data-tip]:focus-visible::after{
  border-top-color:var(--border);
}

/* ===== Progress Bar บนสุดของหน้า ===== */
#read-progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent);
  z-index:10000; transition:width .1s linear;}
/* กันไม่ให้ progress บังคลิกบนขอบบน */
#read-progress{ pointer-events:none; }

/* ===== Link Contrast (ทั่วบทความ/คอนเทนต์) ===== */
:root{
  --link:#0a58ff;       /* โทนสดใน Light */
  --link-hover:#003cff;
}
html[data-theme="dark"]{
  --link:#8fb2ff;       /* โทนสว่างใน Dark */
  --link-hover:#bcd0ff;
}

/* บทความ + ส่วนคอนเทนต์หลัก */
.content a, .entry a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .12em;
  font-weight: 600;
}
.content a:hover, .entry a:hover{ color: var(--link-hover); text-decoration-thickness: .16em; }
.content a:focus-visible, .entry a:focus-visible{ outline: 2px solid var(--link); outline-offset: 2px; border-radius:.25rem }
.content a:visited, .entry a:visited{ color: var(--link); opacity: .95; }

/* ลิงก์ใน TOC ให้ชัดขึ้นด้วย */
.toc a{ color: var(--link); }
.toc a:hover{ color: var(--link-hover); }

/* ปรับ Read Progress ให้เห็นชัดขึ้นเล็กน้อย */
#read-progress{
  position:fixed; top:0; left:0; height:4px; width:0;
  background: var(--accent); z-index:10000; transition: width .1s linear;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.2);
  pointer-events:none;
}

/* ===== Link Contrast boost ===== */
:root{ --link:#0a58ff; --link-hover:#003cff; }
html[data-theme="dark"]{ --link:#8fb2ff; --link-hover:#bcd0ff; }

.content a, .entry a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .12em;
  font-weight: 600;
}
.content a:hover, .entry a:hover{ color: var(--link-hover); text-decoration-thickness: .16em; }
.content a:focus-visible, .entry a:focus-visible{ outline: 2px solid var(--link); outline-offset: 2px; border-radius:.25rem }

/* Progress bar (ให้เด่นขึ้น) */
#read-progress{
  position:fixed; top:0; left:0; height:4px; width:0;
  background: var(--accent);
  z-index:10000; transition: width .1s linear;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.2);
  pointer-events:none;
}

/* ปรับสีลิงก์ให้ชัดขึ้นใน Dark Mode */
html[data-theme="dark"] .content a,
html[data-theme="dark"] .entry a,
html[data-theme="dark"] .post-nav a,
html[data-theme="dark"] .sticky-post-nav a {
  color: #c3d9ff;   /* สว่างขึ้น */
  border-color: #5a6cae;
}
html[data-theme="dark"] .content a:hover,
html[data-theme="dark"] .entry a:hover,
html[data-theme="dark"] .post-nav a:hover,
html[data-theme="dark"] .sticky-post-nav a:hover {
  color: #ffffff;
  border-color: #c3d9ff;
  background: #334155;
}

/* Related posts card ใน Dark Mode */
html[data-theme="dark"] .related-card {
  background: #1e293b;
  border-color: #334155;
}
html[data-theme="dark"] .related-card:hover {
  background: #2d3a50;
  border-color: #64748b;
}

/* Progress Bar ปรับสีตามโหมด */
html[data-theme="dark"] #read-progress { background: #3b82f6; }  /* ฟ้าอ่อน */
html[data-theme="light"] #read-progress { background: #2563eb; } /* น้ำเงินเข้ม */

/* Progress bar ใช้สีตามหมวด (fallback = --accent) */
#read-progress{
  background: var(--progress-color, var(--accent));
}