/*
Theme Name: Dhamma Consult
Description: ธีมเบา เร็ว สะอาด โทนขาว-เทา สไตล์ Claude สำหรับเว็บตอบปัญหาชีวิต แนวพุทธศาสตร์ งานวิจัย จิตวิทยา — แถบข้างซ้ายพับเก็บได้ ช่องค้นหาขอบมนเรียว รองรับคอมและมือถือ
Author: Anuchit
Version: 1.0.14
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dhamma-consult
Tags: light, fast, clean, custom-menu, custom-logo, two-columns
*/

/* ---------- Design tokens ---------- */
:root {
  --dc-bg: #fdfdfc;
  --dc-card: #ffffff;
  --dc-accent: #ffb600;
  /* ไล่เกรเดียนแนวตั้ง (บนลงล่าง) ใช้แทนสีส้มทึบล้วนๆ เฉพาะตอนโฮเวอร์/แอคทีฟ ทั้งเว็บ (ปุ่ม, ชิป, แถวรายการ,
     กรอบเมนูที่เลื่อนตามเมาส์ ฯลฯ) — บนสุดเป็นสีส้มเดิมของธีม (--dc-accent) ไล่ลงไปเป็นสีเหลืองส้มอ่อนกว่านิดหน่อยด้านล่าง */
  --dc-accent-gradient: linear-gradient(180deg, #ffb600 0%, #ffcc00 100%);
  --dc-heading: #000000;
  --dc-text: #2b2b2b;
  --dc-muted: #8a8a85;
  --dc-border: #ebebe6;
  --dc-chip: #8a8a85;
  --dc-radius: 18px;
  --dc-radius-sm: 15px;
  --dc-radius-full: 999px;
  --dc-sidebar-w: 280px;
  --dc-sidebar-rail: 64px;
  --dc-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.05);
}

/* ---------- Base ----------
   ทุกกฎด้านล่างที่ใช้ var(--dc-xxx, ค่าเริ่มต้น) คือจุดที่ปรับแต่ง > ธีม (Customizer) ปรับได้
   ถ้ายังไม่เคยตั้งค่าอะไรเลย จะแสดงผลเหมือนเดิมทุกประการ (ใช้ค่าเริ่มต้น = อาร์กิวเมนต์ตัวที่ 2 ของ var())
   ดู inc/customizer.php สำหรับ control ทั้งหมด และ dc_output_head_code() สำหรับตัวพิมพ์ --dc-xxx จริง */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dc-bg);
  color: var(--dc-body-color, var(--dc-text));
  font-family: var(--dc-body-font, 'Sarabun', sans-serif);
  font-size: var(--dc-body-size, 17px);
  line-height: 1.75;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dc-heading-font, 'SF Thonburi', 'Sarabun', sans-serif);
  color: var(--dc-heading);
  line-height: 1.35;
  margin: 0 0 .6em;
}
h1 { font-family: var(--dc-h1-font, var(--dc-heading-font, 'SF Thonburi', 'Sarabun', sans-serif)); color: var(--dc-h1-color, var(--dc-heading)); font-size: var(--dc-h1-size, 1.9rem); }
h2 { font-family: var(--dc-h2-font, var(--dc-heading-font, 'SF Thonburi', 'Sarabun', sans-serif)); color: var(--dc-h2-color, var(--dc-heading)); font-size: var(--dc-h2-size, 1.5rem); }
h3 { font-family: var(--dc-h3-font, var(--dc-heading-font, 'SF Thonburi', 'Sarabun', sans-serif)); color: var(--dc-h3-color, var(--dc-heading)); font-size: var(--dc-h3-size, 1.25rem); }
h4 { font-family: var(--dc-h4-font, var(--dc-heading-font, 'SF Thonburi', 'Sarabun', sans-serif)); color: var(--dc-h4-color, var(--dc-heading)); font-size: var(--dc-h4-size, 1.1rem); }
h5 { font-family: var(--dc-h5-font, var(--dc-heading-font, 'SF Thonburi', 'Sarabun', sans-serif)); color: var(--dc-h5-color, var(--dc-heading)); font-size: var(--dc-h5-size, 1rem); }
p { margin: 0 0 1.1em; }
a {
  color: var(--dc-link-color, var(--dc-text));
  font-size: var(--dc-link-size, inherit);
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
a:hover, a:focus, a.active { color: var(--dc-accent); }
img { max-width: 100%; height: auto; border-radius: var(--dc-radius-sm); }
blockquote {
  margin: 1.2em 0; padding: 1em 1.4em;
  background: var(--dc-card);
  border: 1px solid var(--dc-border);
  border-left: 4px solid var(--dc-accent);
  border-radius: var(--dc-radius-sm);
}
code, pre { background: #f4f4f0; border-radius: 8px; }
pre { padding: 1em; overflow: auto; }
code { padding: .15em .4em; }
::selection { background: var(--dc-accent); color: #000; }

/* ---------- Layout: sidebar + content ---------- */
.dc-app { display: flex; min-height: 100vh; }

/* .dc-sidebar เป็น flex column เปล่าๆ (ไม่ padding/ไม่สกรอลเอง) — แบ่งเป็น 2 ส่วนแนวตั้ง:
   .dc-sidebar-scroll (เนื้อหาหลัก สกรอลได้ ยืดเต็มพื้นที่ที่เหลือ) + ปุ่ม "หมวดปัญหาชีวิต" (คงที่ ติดขอบล่างเสมอ)
   แยกกันแบบนี้เพื่อให้ปุ่มหมวดปัญหาอยู่ตำแหน่งเดิมตลอด ไม่ว่าเนื้อหาด้านบนจะสั้น/ยาว/สกรอลแค่ไหน */
.dc-sidebar {
  width: var(--dc-sidebar-w);
  flex: 0 0 auto;
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  background: var(--dc-sidebar-bg, #f7f7f4);
  border-right: 1px solid var(--dc-border);
  transition: width .2s ease, transform .25s ease;
}
.dc-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 18px 14px 0;
}
.dc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dc-content { width: 100%; max-width: 880px; margin: 0 auto; padding: 6px 22px 15px; flex: 1; }

/* Collapsed (desktop): shrink to icon rail */
body.dc-collapsed .dc-sidebar { width: var(--dc-sidebar-rail); }
body.dc-collapsed .dc-sidebar-scroll { padding: 18px 10px 0; }
body.dc-collapsed .dc-sidebar .dc-hide-on-rail { display: none; }

/* ---------- Sidebar pieces ---------- */
.dc-sidebar-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; justify-content: space-between; }
.dc-sidebar-top .dc-brand { order: 0; }            /* โลโก้ชิดซ้ายสุด */
.dc-sidebar-top .dc-toggle { order: 1; margin-left: auto; }  /* ปุ่มพับชิดขวาสุด */
body.dc-collapsed .dc-sidebar-top { flex-direction: column; align-items: center; justify-content: center; gap: 0; }  /* ตอนยุบ: จัดแบบเดียวกับไอคอนรางล่าง = กลางเป๊ะ */
body.dc-collapsed .dc-sidebar-top .dc-toggle { margin: 0; order: 0; }
/* ตอนหุบเป็นราง: ซ่อนโลโก้ใหญ่ (dc-brand) ให้แน่นอน เหลือแต่โลโก้เล็กในราง — กันซ้ำ
   ยกเว้นตอนเปิดเป็นลิ้นชักบนมือถือ (dc-drawer-open) ที่ยังโชว์โลโก้ใหญ่ได้ */
body.dc-collapsed:not(.dc-drawer-open) .dc-sidebar .dc-brand,
body.dc-collapsed:not(.dc-drawer-open) .dc-sidebar .dc-brand .custom-logo,
body.dc-collapsed:not(.dc-drawer-open) .dc-sidebar-top .custom-logo { display: none !important; }
.dc-toggle {
  border: 1px solid var(--dc-border);
  background: var(--dc-btn2-bg, var(--dc-card));
  color: var(--dc-text);
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
/* ปุ่มไอคอนล้วนๆ (ไม่มีตัวหนังสือ) — ไม่ใส่พื้นหลังเลยตอนโฮเวอร์/แอคทีฟ (ไม่ว่าจางหรือทึบ) มีแค่เส้นขอบ+สีไอคอน
   เปลี่ยนเป็นส้ม เพราะปุ่มนี้มีโลโก้/ไอคอนวางทับอยู่ พื้นสีจะบังไอคอน (หรือกลืนกับโลโก้ที่เป็นสีส้มอยู่แล้ว) จนมองไม่เห็น */
.dc-toggle:hover { border-color: var(--dc-accent); color: var(--dc-accent); }
.dc-toggle:active { border-color: #e6a400; color: #e6a400; }
.dc-brand { font-family: 'SF Thonburi','Sarabun',sans-serif; font-weight: 700; color: var(--dc-heading); font-size: 1.02rem; line-height: 1.25; }
.dc-brand:hover { color: var(--dc-accent); }
/* ขนาดโลโก้ในแถบข้าง — ค่าเริ่มต้น 40px ปรับได้ที่ ปรับแต่ง > ข้อมูลเว็บไซต์ (ตั้งตัวแปร --dc-logo-h)
   บังคับ !important ทับ attribute width/height ของรูป และกฎ img{height:auto} */
.dc-brand img, .dc-brand .custom-logo {
  height: var(--dc-logo-h, 40px) !important;
  width: auto !important;
  max-height: none !important;
}

.dc-new-search {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 4px 0 18px;
  padding: 10px 16px;
  background: var(--dc-btn2-bg, var(--dc-card));
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-full);
  font-weight: 600; color: var(--dc-heading);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.dc-new-search:hover { border-color: var(--dc-accent); color: #2e2828; background: var(--dc-btn2-hover-bg, var(--dc-accent-gradient)); }
.dc-new-search:active { background: var(--dc-btn2-active-bg, var(--dc-accent-gradient)); }

/* ข้อความใต้โลโก้ */
.dc-brand-caption {
  font-size: .8rem;
  color: var(--dc-muted);
  line-height: 1.5;
  margin: -6px 8px 14px;
}

/* ช่องค้นหาเรื่องเก่าในแถบข้าง (มีช่องพิมพ์ + ปุ่มแว่นขยาย) */
.dc-side-search {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 18px;
  background: var(--dc-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-full);
  padding: 4px 4px 4px 14px;
  transition: border-color .15s, box-shadow .15s;
}
/* เอาเมาส์ชี้ (hover) = เล่นแอนิเมชันแสงกระจาย เฉพาะอุปกรณ์ที่มีเมาส์จริง (@media hover:hover) — กันจอสัมผัส
   โดน sticky hover ค้างชนกับตอนพิมพ์ วางเคอร์เซอร์โฟกัส (คลิก/แตะพิมพ์ ทั้งคอมและมือถือ) = เล่นแอนิเมชันแสงกระจาย
   เดียวกันกับตอน hover ทุกอุปกรณ์ ไม่มีเงื่อนไขจำกัด (บนมือถือมีแค่กฎนี้ทำงานจริง เพราะ :hover ถูกตัดออกไปแล้ว
   จึงไม่มีทางชนกันเองจนเคอร์เซอร์ดูลอย) — ดู @keyframes dc-glow ใกล้ .dc-search-form */
@media (hover: hover) and (pointer: fine) {
  .dc-side-search:hover { border-color: var(--dc-accent); animation: dc-glow 1.6s ease-out infinite; }
}
.dc-side-search:focus-within { border-color: var(--dc-accent); animation: dc-glow 1.6s ease-out infinite; }
/* เจาะจง selector ให้ชนะกฎ input กลางของธีม — ไม่งั้นช่องพิมพ์จะมีเส้นกรอบซ้อนข้างใน */
.dc-side-search input[type="search"],
.dc-side-search input[type="search"]:focus {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  box-shadow: none;
  font: inherit; font-size: .92rem; color: var(--dc-text);
  padding: 6px 0;
  border-radius: 0;
}
.dc-side-search button {
  flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--dc-btn-bg, var(--dc-accent)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.dc-side-search button:hover { background: var(--dc-btn-hover-bg, var(--dc-accent-gradient)); color: #2e2828; }
.dc-side-search button:active { background: var(--dc-btn-active-bg, var(--dc-accent-gradient)); }

/* แถวไอคอนแนวตั้งตอนแถบข้างหุบเป็นราง — โลโก้เล็ก / ค้นหา / หัวข้อที่เผยแพร่ (เพิ่มไอคอนหมวดในอนาคตได้) */
.dc-rail-icons { display: none; }
body.dc-collapsed .dc-sidebar .dc-rail-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.dc-rail-btn {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--dc-border);
  background: var(--dc-btn2-bg, var(--dc-card));
  color: var(--dc-text);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
/* เช่นเดียวกับ .dc-toggle ด้านบน — ไอคอนราง (โลโก้/ค้นหา/หัวข้อที่เผยแพร่) ไม่ใส่พื้นหลังเลยตอนโฮเวอร์/แอคทีฟ
   มีแค่เส้นขอบ+สีไอคอนเปลี่ยนเป็นส้ม กันโลโก้ (ปุ่ม .dc-rail-logo) ที่มักเป็นสีส้มอยู่แล้วกลืนหายไปกับพื้นสี */
.dc-rail-btn:hover { border-color: var(--dc-accent); color: var(--dc-accent); }
.dc-rail-btn:active { border-color: #e6a400; color: #e6a400; }
.dc-rail-logo img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }

.dc-side-section { margin-bottom: 22px; }
.dc-side-title {
  font-family: 'SF Thonburi','Sarabun',sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--dc-muted);
  text-transform: uppercase;
  margin: 0 8px 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.dc-side-list { list-style: none; margin: 0; padding: 0; }
.dc-side-list li { margin: 2px 0; }
.dc-side-list a, .dc-side-list button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .92rem; color: var(--dc-text);
  border-radius: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-side-list a:hover, .dc-side-list button:hover,
.dc-side-list a:focus, .dc-side-list button:focus {
  background: var(--dc-accent-gradient); color: #2e2828;
}
.dc-side-list .current-menu-item > a { background: var(--dc-accent-gradient); color: #2e2828; }

/* ---------- ปุ่ม "หมวดปัญหาชีวิต" ปักหมุดมุมล่างซ้ายแถบข้าง ----------
   เป็น flex item ตัวสุดท้ายของ .dc-sidebar (นอก .dc-sidebar-scroll) จึงติดขอบล่างสุดของแถบข้างเสมอ
   ไม่ว่าเนื้อหาด้านบนจะสั้นหรือยาวแค่ไหน — กรอบสูงพอดีตัวปุ่มเอง (ไม่มีพื้นหลัง/ไล่สีเกินความจำเป็นแล้ว
   เพราะไม่ได้สกรอลทับเนื้อหาอื่นอีกต่อไป) เว้นระยะจากขอบล่างสุดจริงๆ ประมาณ 30px ให้ดูสวยงาม */
.dc-cat-trigger-wrap {
  flex: 0 0 auto;
  padding: 10px 14px 30px;
}
.dc-cat-trigger {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--dc-accent);
  background: var(--dc-card);
  color: var(--dc-accent);
  border-radius: var(--dc-radius-full);
  font: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.dc-cat-trigger-label { color: var(--dc-heading); }
.dc-cat-trigger:hover, .dc-cat-trigger[aria-expanded="true"] { background: var(--dc-accent-gradient); color: #2e2828; }
/* ตอนแถบข้างหุบเป็นราง: เหลือแค่ไอคอนวงกลม/เหลี่ยมเท่าปุ่มรางอื่นๆ (ป้ายข้อความถูกซ่อนเองด้วยคลาส .dc-hide-on-rail อยู่แล้ว) */
body.dc-collapsed .dc-cat-trigger-wrap { padding-left: 0; padding-right: 0; }
body.dc-collapsed .dc-cat-trigger { width: 40px; height: 40px; padding: 0; border-radius: 12px; margin: 0 auto; }

/* ---------- แผงป๊อปอัพหมวดปัญหาชีวิต 2 ชั้น ----------
   ทั้งคู่ position:fixed, สูงพอดีเนื้อหา (max-height เป็นแค่เพดานกันล้นจอ แล้วค่อยเลื่อนข้างในถ้าเนื้อหาเกิน)
   แผงที่ 1 (รายชื่อหมวด) ยึด "ขอบล่าง" เป็นหลัก (bottom:16px แทน top) เพราะปุ่มเปิด #dc-cat-trigger ปักหมุดอยู่
   มุมล่างซ้ายแถบข้างเสมอ — ยึดล่างแล้วโตขึ้นด้านบนตามจำนวนหมวด ตำแหน่งกรอบจะอยู่ติดกับปุ่มที่กดเปิดพอดีทุกครั้ง
   ไม่ต้องเลื่อนเมาส์ไล่หาแผงที่อาจลอยสูงเกินไป และไม่มีที่ว่างเปล่าด้านล่างเวลามีหมวดน้อยกว่าที่จอรับได้
   แผงที่ 2 (ตัวอย่างคำถามของหมวดที่ชี้/กด) ยึด top:16px เป็นค่าเริ่มต้นไว้ก่อน — main.js จะคำนวณ top ใหม่ทุกครั้งที่
   ชี้หมวด (showCategoryB) ให้เสมอกับหัวข้อที่ชี้ (หมวดบนๆ) แล้วเลื่อนขึ้นยึดขอบล่างจอแทนโดยอัตโนมัติถ้าหัวข้อนั้นอยู่
   ใกล้ขอบล่างจนแผงจะล้น (หมวดท้ายๆ เช่น การเงิน/เจ็บป่วย/เป้าหมายชีวิต) กันตกขอบจอทั้งบน-ล่าง ไม่ต้องสกรอลเมาส์ลง
   ทั้งคู่กว้าง 300px โผล่ต่อกันไปทางขวา ไม่แทนที่แผงแรก */
.dc-cat-flyout-a, .dc-cat-flyout-b {
  position: fixed;
  width: 300px;
  max-height: calc(100vh - 32px);
  /* พื้นหลังโปร่งแสง + เบลอด้านหลังเบาๆ (frosted glass) แบบเดียวกับแถบบน (.dc-topbar) แทนพื้นขาวทึบเดิม */
  background: var(--dc-cat-flyout-bg, rgba(255,255,255,.88));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  padding: 14px;
  z-index: 70;
  display: flex; flex-direction: column;
}
.dc-cat-flyout-a[hidden], .dc-cat-flyout-b[hidden] { display: none; }
.dc-cat-flyout-a { left: calc(var(--dc-sidebar-w) + 14px); bottom: 16px; }
body.dc-collapsed .dc-cat-flyout-a { left: calc(var(--dc-sidebar-rail) + 14px); }
.dc-cat-flyout-b { left: calc(var(--dc-sidebar-w) + 14px + 300px + 12px); top: 16px; }
body.dc-collapsed .dc-cat-flyout-b { left: calc(var(--dc-sidebar-rail) + 14px + 300px + 12px); }

/* หัวแผง — เหลือใช้เฉพาะแผงที่ 2 แล้ว (ชื่อหมวดที่ชี้/กด เช่น "นอนไม่หลับ") แผงที่ 1 เอาหัวข้อ "หมวดปัญหาชีวิต"
   ออกแล้ว (ซ้ำกับ aria-label ของแผง + กินพื้นที่เกินจำเป็น — ดู header.php) */
.dc-cat-flyout-head {
  flex: 0 0 auto;
  font-family: 'SF Thonburi','Sarabun',sans-serif;
  font-size: .92rem; font-weight: 700; color: var(--dc-heading);
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--dc-border);
}
/* ปกติไม่มีสกรอลให้เห็นเลย (เนื้อหาสั้นพออยู่แล้ว) ใส่ overflow-y: auto ไว้เผื่อจอเตี้ย หรือจำนวนหมวด/คำถามเพิ่มขึ้น
   ในอนาคตจนเกินความสูงจอ กันรายการท้ายๆ หายไปกดไม่ได้ — ไม่ได้ตั้งใจให้ต้องเลื่อนปกติ */
.dc-cat-flyout-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dc-cat-a-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  padding: 10px 10px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--dc-text);
  border-radius: 10px;
}
.dc-cat-a-btn:hover, .dc-cat-a-btn:focus, .dc-cat-a-btn.is-active {
  background: var(--dc-accent-gradient); color: #2e2828;
}
.dc-cat-caret { color: var(--dc-muted); transition: color .15s ease; }
/* พื้นหลังทึบส้มแล้ว ลูกศรต้องเป็นสีเข้ม ไม่ใช่สีส้ม (เดิมส้มบนส้มมองไม่เห็นตอนพื้นทึบ) */
.dc-cat-a-btn:hover .dc-cat-caret, .dc-cat-a-btn.is-active .dc-cat-caret { color: #2e2828; }

.dc-cat-b-panel[hidden] { display: none; }
.dc-cat-b-panel { min-height: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.dc-cat-b-rows { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dc-cat-row {
  display: block;
  padding: 6px 8px;
  font-size: .85rem; line-height: 1.4; color: var(--dc-text);
  border-radius: 10px;
}
.dc-cat-row:hover, .dc-cat-row:focus { background: var(--dc-accent-gradient); color: #2e2828; }
.dc-cat-b-rows .dc-empty-note { margin: 4px 8px; }

/* รายการแบบ "ตาราง" แถวติดกัน — โทนขาว/เทา สลับ โฮเวอร์ส้ม
   ใช้กับ ประวัติการค้นหา + หัวข้อที่เผยแพร่แล้ว ในแถบข้าง */
.dc-table-list {
  border: 0;
  border-radius: 0; /* ตารางเหลี่ยม แถวติดกัน — สไตล์เดียวกับรายการคำถามหน้าแรก/มือถือ */
  background: transparent;
}
.dc-table-list li { margin: 0 !important; } /* !important ทับกฎ .dc-side-list li { margin:2px 0 } — ตัดช่องขาวระหว่างแถว */
.dc-table-list a {
  display: block;
  padding: 3px 12px; /* ลดความสูงบน/ล่างลง 5px จากเดิม 8px */
  border-radius: 0;
  border: 0;
  background: transparent;
  font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .14s ease, color .14s ease, border-radius .14s ease;
}
.dc-table-list a:hover, .dc-table-list a:focus {
  background: var(--dc-accent-gradient) !important; color: #2e2828 !important;
  border-radius: 20px !important;
}
.dc-empty-note { font-size: .85rem; color: var(--dc-muted); margin: 0 12px; }

/* Mobile drawer */
.dc-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 40; }
@media (max-width: 900px) {
  .dc-sidebar {
    position: fixed; left: 0; top: 0; z-index: 50;
    transform: translateX(-100%);
    width: min(82vw, 320px) !important;
    box-shadow: var(--dc-shadow);
  }
  body.dc-drawer-open .dc-sidebar { transform: translateX(0); }
  body.dc-drawer-open .dc-overlay { display: block; }
  body.dc-collapsed .dc-sidebar .dc-hide-on-rail { display: revert; }

  /* ช่องค้นหาเรื่องเก่า (แถบข้าง + ลิ้นชักหมวดปัญหาที่ใช้คลาสเดียวกัน) — ฟอนต์ต้อง 16px ขึ้นไป
     กัน iOS Safari ซูมหน้าอัตโนมัติตอนแตะเข้าไปพิมพ์ (เดิม .92rem ~14.7px จึงโดนซูม) */
  .dc-side-search input[type="search"] { font-size: 16px !important; }

  /* เมนูหลัก: จอเล็กย้ายไปอยู่ในแถบข้างแทน (.dc-nav-sidebar-mobile ด้านล่าง) ซ่อนตัวบนแถบบนเดิม กันแสดงซ้ำ 2 ที่ */
  .dc-nav-desktop-only { display: none; }

  /* หมวดปัญหาชีวิต (ปุ่มปักหมุด + แผงป๊อปอัพ 2 ชั้น) ไว้เฉพาะจอใหญ่เท่านั้น — มือถือมีลิ้นชักหมวดปัญหาของปลั๊กอิน
     (FAB ส้มลอยมุมจอ) อยู่แล้ว ไม่ต้องซ้ำ */
  .dc-cat-trigger-wrap, .dc-cat-flyout-a, .dc-cat-flyout-b { display: none !important; }
}
/* เมนูหลักฉบับแถบข้าง (มือถือ) — ซ่อนบนจอใหญ่ไว้ก่อน โผล่เฉพาะจอเล็กในกฎ media ด้านบน */
.dc-nav-sidebar-mobile { display: none; }
@media (max-width: 900px) {
  .dc-nav-sidebar-mobile {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--dc-border);
  }
}

/* ---------- Top bar ----------
   พื้นหลังโปร่งแสง + เบลอด้านหลังเบาๆ (frosted glass) ลดจาก 8px เหลือ 4px กันเบลอแรงจนอ่านเนื้อหาด้านหลังไม่ออก
   เงาใต้แถบ (box-shadow) ไม่ใส่ค้างตลอด — โผล่เฉพาะตอนเลื่อนหน้าจอลงมา (คลาส .dc-topbar-scrolled จาก main.js)
   เพื่อให้เห็นว่ามี "หัว" ลอยอยู่เหนือเนื้อหา แต่ตอนอยู่บนสุดของหน้า (ยังไม่เลื่อน) จะไม่มีเงาลอยเหนือความว่างเปล่า */
.dc-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  position: sticky; top: 0; z-index: 30;
  background: rgba(253,253,252,.88);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0,0,0,0);
  transition: box-shadow .2s ease;
}
.dc-topbar.dc-topbar-scrolled { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
/* แถบบน 3 โซน: ซ้าย(เมนู) — กลาง(วิดเจ็ต) — ขวา(เว้นสมดุล) ให้โซนกลางอยู่กึ่งกลางจริง */
.dc-topbar-side { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dc-topbar-end { justify-content: flex-end; }

/* วิดเจ็ตส่วนหัว (แถบบน) — อยู่ตรงกลาง จัดวางแนวนอน รองรับโลโก้/เมนู/ลิงก์กลับหน้าแรก */
.dc-topbar-widgets { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.dc-topbar-widgets .dc-header-widget { margin: 0; }
.dc-topbar-widgets img { max-height: 40px; width: auto; height: auto; display: block; border-radius: 8px; }
.dc-topbar-widgets a { display: inline-flex; align-items: center; }
.dc-topbar-widgets ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.dc-topbar-widgets a:not(:has(img)) { padding: 7px 16px; border-radius: var(--dc-radius-full); font-weight: 600; }
.dc-topbar-widgets a:not(:has(img)):hover { color: var(--dc-accent); }

.dc-topbar .dc-toggle-mobile { display: none; }
@media (max-width: 900px) { .dc-topbar .dc-toggle-mobile { display: inline-flex; } }

/* ---------- เมนูแบบมีกรอบส้มเลื่อน (.dc-slide-nav) ----------
   ใช้ร่วมกันทั้งเมนูหลัก (แถบบน .dc-nav) และเมนูใหม่ใต้เนื้อหา (.dc-nav-bottom ท้าย footer.php)
   main.js เป็นคนสร้าง <span class="dc-nav-indicator"> แล้วเลื่อนไปตามไอเทมที่เอาเมาส์ชี้/โฟกัส
   (ตอนโหลดหน้าจะตั้งตำแหน่งเริ่มต้นที่ไอเทมของหน้าปัจจุบันทันทีโดยไม่มี animation) */
.dc-nav ul, .dc-nav-bottom, .dc-nav-footer { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; position: relative; }
.dc-nav a, .dc-nav-bottom a, .dc-nav-footer a {
  position: relative; z-index: 1; /* อยู่เหนือกรอบเลื่อน (.dc-nav-indicator) เสมอ อ่านตัวหนังสือออกชัด */
  padding: 7px 16px; border-radius: var(--dc-radius-full);
  font-size: .95rem; font-weight: 500;
}
/* ตัวกรอบส้มที่เลื่อนไปมา — ไม่มีพื้นหลัง/กรอบเป็นค่าเริ่มต้น (opacity:0) จนกว่า main.js จะเจอไอเทมหน้าปัจจุบันหรือมีคนเอาเมาส์ชี้
   พื้นทึบสีส้มเต็ม (ไม่ใช่สีจางแบบเดิม) ให้เหมือนโฮเวอร์ทึบทุกจุดอื่นของเว็บ */
.dc-nav-indicator {
  position: absolute; top: 0; left: 0;
  background: var(--dc-accent-gradient);
  border: 1.5px solid var(--dc-accent);
  border-radius: var(--dc-radius-full);
  pointer-events: none;
  opacity: 0;
  transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1),
              top .25s cubic-bezier(.4,0,.2,1), height .25s cubic-bezier(.4,0,.2,1), opacity .15s ease;
}
/* สีตัวหนังสือตอนไอเทมถูกชี้/เป็นหน้าปัจจุบัน — พื้นหลังทึบส้มจาก .dc-nav-indicator ต้องคู่กับตัวหนังสือเข้ม อ่านออกชัด */
.dc-nav a:hover, .dc-nav .current-menu-item > a,
.dc-nav-bottom a:hover, .dc-nav-bottom .current-menu-item > a,
.dc-nav-footer a:hover, .dc-nav-footer .current-menu-item > a { color: #2e2828; }
.dc-topbar-spacer { flex: 1; }

/* ---------- เมนูล่าง (ใต้เนื้อหา ก่อน footer) ---------- */
.dc-bottom-nav {
  display: block;
  max-width: 880px; margin: 40px auto 0; padding: 22px 22px 4px;
  border-top: 1px solid var(--dc-border);
}
.dc-nav-bottom { justify-content: center; }

/* ---------- เมนูส่วนท้าย (footer) — สไตล์เดียวกับเมนูแถบบน/เมนูล่าง (ปุ่ม + กรอบส้มเลื่อน) ---------- */
.dc-footer-nav { display: block; margin: 0 0 30px; }
.dc-nav-footer { justify-content: center; }
/* ต้อง specificity สูงกว่า ".dc-footer a:hover" (ตัวอักษรสีส้มทั่วไปตอนโฮเวอร์ลิงก์ใน footer ด้านล่าง) ไม่งั้น
   ตัวหนังสือจะกลายเป็นสีส้มซ้อนบนพื้นส้มของกรอบเลื่อน มองไม่เห็นตัวอักษร (บั๊กที่เจอในภาพตัวอย่าง) —
   ที่นี่บังคับให้เข้ม #2e2828 เหมือนเมนูตำแหน่งอื่นเสมอ ไม่ว่ากฎ .dc-footer a:hover จะมาก่อนหรือหลังในไฟล์นี้ */
.dc-footer .dc-nav-footer a:hover,
.dc-footer .dc-nav-footer .current-menu-item > a { color: #2e2828; }

/* ---------- Footer ----------
   (รวมกฎ .dc-footer ที่เดิมมีอยู่แล้วอีกจุดท้ายไฟล์เข้าด้วยกันเป็นที่เดียว กันประกาศซ้ำ/ชนกันเงียบๆ — ของเดิมมี
   พื้นเทาอ่อน #f7f7f4 + เส้นคั่นบน + ตัวอักษร .9rem สีเทาม่วง ไม่ใช่ "โปร่งใสไม่มีสไตล์" อย่างที่เข้าใจผิดตอนแรก) */
.dc-footer { border-top: 1px solid var(--dc-border); background: var(--dc-footer-bg, #f7f7f4); margin-top: auto; }
.dc-footer-inner { max-width: 880px; margin: 0 auto; padding: 28px 22px 15px; font-size: .9rem; color: var(--dc-muted); text-align: center; }
/* จอเล็ก (≤900px): ปลั๊กอิน LCBP Dhamma Consult ลอยแถบ "ค้นหาคำตอบ" (.lcbp-dc-float-bar) ค้าง bottom:20px
   สูงถึง ~74px จากขอบล่างจอ และปุ่มหมวดปัญหา (.lcbp-dc-fab) ลอยสูงกว่านั้นอีก ถึง ~142px จากขอบล่างจอ
   เว้น padding-bottom ของ footer เพิ่มให้พ้นทั้งคู่ (142px + เผื่อหายใจ) กัน copyright ถูกบังเวลาเลื่อนสุดหน้า */
@media (max-width: 900px) {
  .dc-footer-inner { padding-bottom: 160px; }
}
.dc-footer a:hover { color: var(--dc-accent); }
.dc-footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: left; margin-bottom: 12px; }
/* ข้อความ copyright โดยเฉพาะ — override สี/ขนาดของตัวเองได้อิสระจากเนื้อหาอื่นใน footer (เมนู/วิดเจ็ต ยังใช้สไตล์ด้านบนตามเดิม) */
.dc-footer-copy {
  color: var(--dc-footer-text-color, var(--dc-muted));
  font-size: var(--dc-footer-text-size, inherit);
  margin: 0;
}

/* ---------- Hero (front page) ---------- */
.dc-hero { text-align: center; padding: 8vh 0 24px; }
/* หน้าแรกแบบวางชอร์ตโค้ดเอง — จัดกลางเหมือน hero เดิม (แผงคำตอบ/รายการยังชิดซ้ายตามกฎของมันเอง) */
.dc-front { text-align: center; padding: 4px 0 4px; }
/* ใส่ var(--dc-h1-size, ...) ตรงนี้ด้วย ไม่งั้น h1 หน้าแรก/hero (เด่นสุดในเว็บ) จะไม่รับค่าที่ตั้งใน
   ปรับแต่ง > ธีม > หัวข้อ (H1-H5) เลย เพราะ selector 2 คลาสนี้ specificity สูงกว่ากฎ h1{} ตัวฐาน */
.dc-front h1 { font-size: var(--dc-h1-size, clamp(1.5rem, 3.4vw, 2.2rem)); margin-bottom: 1.2em; }
.dc-hero h1 { font-size: var(--dc-h1-size, clamp(1.5rem, 3.4vw, 2.2rem)); margin-bottom: 1.4em; }
.dc-hero .dc-tagline { color: var(--dc-muted); margin-top: -1em; }

/* ---------- Search form (pill) ---------- */
/* แสงส้มกระจายตัวออกเป็นระยะ (pulse) ตอนเอาเมาส์ชี้ — ใช้ร่วมกันทุกช่องค้นหาในธีม (ของเดิมมีแค่ที่ปลั๊กอิน
   .lcbp-dc-search-box ของหน้าแรก) ให้ .dc-search-form (หน้าผลการค้นหา/404) กับ .dc-side-search (แถบข้าง) เหมือนกัน */
@keyframes dc-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 150, 0, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 150, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 150, 0, 0); }
}
.dc-search-form {
  display: flex; align-items: center;
  max-width: 640px; margin: 0 auto;
  background: var(--dc-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-full);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--dc-shadow);
  transition: border-color .15s, box-shadow .15s;
}
/* เอาเมาส์ชี้ (hover) = เล่นแอนิเมชันแสงกระจาย เฉพาะอุปกรณ์ที่มีเมาส์จริง (@media hover:hover) — กันจอสัมผัสโดน
   เบราว์เซอร์ "จำลอง" :hover ค้างไว้ตอนแตะ (sticky hover) ซึ่งจะไปชนกับตอนพิมพ์ (:focus-within) เป็น 2 สถานะซ้อน
   กันไม่ตรงจังหวะ เห็นเป็นเคอร์เซอร์พิมพ์ลอย — ตัด :hover ออกจากมือถือทั้งหมด เหลือ :focus-within ตัวเดียวคุมแสง */
@media (hover: hover) and (pointer: fine) {
  .dc-search-form:hover {
    border-color: var(--dc-accent);
    animation: dc-glow 1.6s ease-out infinite;
  }
}
/* วางเคอร์เซอร์โฟกัสในช่อง (คลิก/แตะเข้าไปพิมพ์ — คอมและมือถือ) = เล่นแอนิเมชันแสงกระจายเดียวกันกับตอน hover
   ทุกอุปกรณ์ ไม่มีเงื่อนไขจำกัด (บนมือถือมีแค่กฎนี้ทำงานจริง เพราะ :hover ถูกตัดออกไปแล้วด้านบน
   จึงไม่มีทางชนกันเองจนเคอร์เซอร์ดูลอย) */
.dc-search-form:focus-within {
  border-color: var(--dc-accent);
  animation: dc-glow 1.6s ease-out infinite;
}
/* เจาะจง selector ให้ชนะกฎ input กลางของธีม (บรรทัด ~484-495) — ไม่งั้นตอนโฟกัส input เองจะขึ้น
   box-shadow วงแหวนซ้อนอีกชั้นข้างในกรอบ .dc-search-form (เห็นเป็นเส้นซ้อนกัน 2 เส้น เฉพาะรอบช่องพิมพ์)
   ต้องเซ็ต box-shadow:none ตรงนี้ด้วย ไม่ใช่แค่ที่ .dc-search-form:focus-within (แก้แบบเดียวกับ .dc-side-search) */
.dc-search-form input[type="search"],
.dc-search-form input[type="search"]:focus {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  box-shadow: none;
  font: inherit; color: var(--dc-text);
  padding: 10px 8px;
  border-radius: 0;
}
.dc-search-form input[type="search"]::placeholder { color: var(--dc-muted); }
/* ปุ่มค้นหา — เปลี่ยนเป็นส้มตลอด (var(--dc-accent)) ให้เหมือนปุ่มค้นหาหลักของหน้าแรก (.lcbp-dc-search-btn)
   เดิมพื้นเข้ม/ดำ แล้วเพิ่งเปลี่ยนเป็นส้มตอนโฮเวอร์เท่านั้น ไม่ตรงกับธีมหลัก */
.dc-search-form button {
  flex: 0 0 auto;
  border: 0; cursor: pointer;
  background: var(--dc-btn-bg, var(--dc-accent)); color: #000;
  font: inherit; font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--dc-radius-full);
  transition: background .15s, color .15s;
}
.dc-search-form button:hover, .dc-search-form button:focus { background: var(--dc-btn-hover-bg, var(--dc-accent-gradient)); color: #000; }
.dc-search-form button:active { background: var(--dc-btn-active-bg, var(--dc-accent-gradient)); }

/* ช่องค้นหาเรื่องเก่าด้านบนสุดของหน้าเดี่ยว (single.php: คำถาม-คำตอบ/บทความที่เผยแพร่แล้ว) — เฉพาะคอม (>900px)
   มือถือมีแถบ "ค้นหาคำตอบ" ลอยตัวติดขอบล่างจอของปลั๊กอินอยู่แล้วทุกหน้า (.lcbp-dc-float-bar) ไม่ต้องซ้ำ */
.dc-single-search { margin: 4px 0 30px; }
@media (max-width: 900px) {
  .dc-single-search { display: none; }
}

/* Suggestion chips */
.dc-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px auto 0; max-width: 760px; }
.dc-chip {
  display: inline-block;
  padding: 8px 18px;
  background: var(--dc-chip); color: #fff;
  border: 0; cursor: pointer; font: inherit; font-size: .9rem;
  border-radius: var(--dc-radius-full);
  transition: background .15s, color .15s;
}
.dc-chip:hover, .dc-chip:focus, .dc-chip.active { background: var(--dc-accent-gradient); color: #000; }

/* แฮชแท็ก/ป้ายกำกับหัวข้อ — ติดอัตโนมัติให้ทุกคำถาม-คำตอบ (lcbp_topic) และบทความปกติ (tag)
   ไม่มีพื้นสี มีแค่เส้นขอบเทา ขอบมนเรียว (ทรงแคปซูล) ไม่มี # นำหน้า — โฮเวอร์เป็นพื้นส้ม ตัวเทาเข้ม
   ใช้ selector ".dc-hashtags .dc-hashtag" (ไม่ใช่ ".dc-hashtag" เดี่ยวๆ) เจตนาเพิ่ม specificity ให้ชนะ
   ".entry-content a{border-bottom:2px solid var(--dc-accent)}" และ ".entry-content a:hover{color:var(--dc-accent)}"
   ที่จะมาทับเมื่อแฮชแท็กอยู่ใน .entry-content (หน้าคำถาม-คำตอบ) ไม่งั้นจะมีเส้นใต้ส้มโผล่ + ตัวหนังสือส้มบนพื้นส้มตอนโฮเวอร์ อ่านไม่ออก */
.dc-hashtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dc-hashtags .dc-hashtag {
  display: inline-block;
  background: transparent;
  border: 1px solid #bbbbbb;
  color: #333333;
  font-size: .78rem;
  line-height: 1.6;
  padding: 1px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dc-hashtags .dc-hashtag:hover, .dc-hashtags .dc-hashtag:focus {
  background: var(--dc-accent-gradient);
  border-color: var(--dc-accent);
  color: #202020;
}

/* ---------- หน้าคำถาม-คำตอบเดี่ยว (lcbp_qa) ----------
   ต่างจากบทความปกติ (.dc-card ห่อทั้งบทความ): กรอบขาวห่อเฉพาะคำตอบ (.lcbp-qa-answer)
   ส่วนแฮชแท็ก/อ้างอิง/หมายเหตุ อยู่นอกกรอบบนพื้นหลังหน้าปกติ — จัดลำดับด้วย flex+order
   (ใช้ order แทนการสลับตำแหน่งจริงใน HTML เพื่อไม่ต้องยุ่งกับเนื้อหาที่บันทึกไว้แล้วของคำตอบเก่าทั้ง 60 หน้า)
   ลำดับที่แสดง: คำตอบ (กรอบขาว) → อ้างอิง (ชิดซ้าย) → แฮชแท็ก (กึ่งกลาง) → หมายเหตุ */
.dc-qa-article { margin: 26px 0; }
.dc-qa-content { display: flex; flex-direction: column; }
.dc-qa-content .lcbp-qa-answer {
  order: 1;
  background: var(--dc-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  padding: 28px 30px;
}
@media (min-width: 901px) {
  .dc-qa-content .lcbp-qa-answer { padding-left: 38px; padding-right: 38px; }
}
.dc-qa-content .lcbp-refs-block { order: 2; }
.dc-qa-content .dc-hashtags {
  order: 3;
  justify-content: center;
  margin: 28px 0;
}
/* margin-top ปกติของกล่องหมายเหตุ (18px) ตัดออกตรงนี้ กัน margin ซ้อนกับ margin-bottom ของแฮชแท็กด้านบน (28px)
   เพื่อให้ระยะห่างจริงระหว่างแฮชแท็กกับกล่องหมายเหตุเท่ากับ 28px ตามที่ตั้งใจเป๊ะๆ (flexbox ไม่ยุบ margin ซ้อนกันเองแบบ block) */
.dc-qa-content .lcbp-dc-disclaimer-static { order: 4; margin-top: 0; }

/* ---------- Cards ---------- */
.dc-card {
  background: var(--dc-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 28px 30px;
  box-shadow: var(--dc-shadow);
  margin: 26px 0;
}
.dc-card > :last-child { margin-bottom: 0; }
.dc-answer-card { min-height: 200px; }
/* คอม (≥901px): เว้นขอบในกรอบคำตอบ ~1 ซม. ให้ข้อความหายใจ — มือถือคงเดิม */
@media (min-width: 901px) {
  .dc-answer-card { padding-left: 38px; padding-right: 38px; }
}
.dc-card .entry-title a:hover { color: var(--dc-accent); }
.dc-meta { font-size: .85rem; color: var(--dc-muted); margin-bottom: .8em; }
.dc-meta a { color: var(--dc-muted); } .dc-meta a:hover { color: var(--dc-accent); }
.dc-readmore {
  display: inline-block; margin-top: .4em;
  padding: 7px 20px;
  background: var(--dc-btn2-bg, transparent);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-full);
  font-size: .9rem; font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
}
.dc-readmore:hover { border-color: var(--dc-accent); background: var(--dc-btn2-hover-bg, var(--dc-accent-gradient)); color: #2e2828; }
.dc-readmore:active { background: var(--dc-btn2-active-bg, var(--dc-accent-gradient)); }

/* Post content */
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content a { color: var(--dc-heading); text-decoration: none; }
.entry-content a:hover { color: var(--dc-accent); }
.wp-block-table table, table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--dc-border); padding: .55em .8em; text-align: left; }
th { background: #f7f7f4; font-family: 'SF Thonburi','Sarabun',sans-serif; }

/* ---------- Pagination / navigation ---------- */
/* .dc-pagination ต้องห่อ .page-numbers ที่ the_posts_pagination() พิมพ์ออกมาจริงๆ — ทำผ่าน arg 'class' => 'dc-pagination'
   ที่ index.php/search.php/archive.php (ไม่งั้นกฎ CSS ชุดนี้จะไม่มีผลเลย เห็นเป็นตัวเลขเปล่าๆ ไม่มีปุ่ม เคยเป็นแบบนั้นมาก่อน) */
.dc-pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 32px 0; }
.dc-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4em;
  padding: 8px 16px;
  border: 1px solid #bbbbbb; /* เส้นขอบสีเทาชัดเจน (var(--dc-border) เดิมจางเกือบขาว มองไม่ค่อยเห็นเป็นปุ่ม) */
  border-radius: var(--dc-radius-full); /* ทรงรีมนสุด (pill/oval) */
  background: var(--dc-card);
  color: var(--dc-text);
  font-size: .92rem;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.dc-pagination .page-numbers.current,
.dc-pagination a.page-numbers:hover,
.dc-pagination a.page-numbers:focus {
  background: var(--dc-accent-gradient); border-color: var(--dc-accent); color: #000; font-weight: 700;
}

/* นำทางเรื่องก่อนหน้า/ถัดไป (ท้ายบทความ) — แยกคลาสจาก .dc-pagination (เลขหน้า) ข้างบน เพื่อจัดวางคนละแบบ
   ซ้าย-ขวาห่างกันชัดเจนว่าเรื่องไหนก่อนหน้า/ถัดไป ลูกศรสีส้มเด่น (วาดด้วย ::before/::after ไม่ต้องพึ่งตัวอักษรในเนื้อหา)
   โฮเวอร์ชื่อเรื่อง = แคปซูลพื้นส้ม ตัวเทาเข้ม */
.dc-adjacent-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 32px 0;
}
.dc-adjacent-nav a {
  display: inline-block;
  max-width: 46%;
  padding: 8px 18px;
  border-radius: var(--dc-radius-full);
  color: var(--dc-text);
  text-decoration: none;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
.dc-adjacent-nav a[rel="prev"]::before { content: "‹ "; color: var(--dc-accent); font-size: 1.2em; font-weight: 700; }
.dc-adjacent-nav a[rel="next"]::after  { content: " ›"; color: var(--dc-accent); font-size: 1.2em; font-weight: 700; }
.dc-adjacent-nav a:hover, .dc-adjacent-nav a:focus { background: var(--dc-accent-gradient); color: #2e2828; }
.dc-adjacent-nav a:hover::before, .dc-adjacent-nav a:focus::before,
.dc-adjacent-nav a:hover::after,  .dc-adjacent-nav a:focus::after { color: #2e2828; }

/* ---------- Forms & buttons (global) ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
  font: inherit; color: var(--dc-text);
  background: var(--dc-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-full);
  padding: 10px 20px;
  outline: none;
  max-width: 100%;
}
textarea { border-radius: var(--dc-radius); }
input:focus, textarea:focus, select:focus { border-color: var(--dc-accent); box-shadow: 0 0 0 3px rgba(255,182,0,.18); }
button, .wp-block-button__link, input[type="submit"] {
  font: inherit; font-weight: 600;
  border-radius: var(--dc-radius-full);
}

/* ---------- Widgets ---------- */
.widget { margin-bottom: 22px; }
.widget-title { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--dc-muted); text-transform: uppercase; margin: 0 8px 8px; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li a { display: block; padding: 8px 12px; border-radius: 12px; font-size: .92rem; }
.widget ul li a:hover { background: var(--dc-accent-gradient); color: #2e2828; }

/* ---------- ปลั๊กอิน LCBP Dhamma Consult — ให้กลืนกับธีม ---------- */
.lcbp-dc-wrap { max-width: 760px; margin: 0 auto; }
.lcbp-dc-search-box {
  display: flex; align-items: center;
  background: var(--dc-card);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-full);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--dc-shadow);
}
.lcbp-dc-search-box.is-multiline { border-radius: 18px; } /* ข้อความหลายบรรทัด: สี่เหลี่ยมขอบโค้งมนแทนทรงแคปซูล */
/* หมายเหตุ: บล็อกนี้เป็นสำเนาที่ธีมประกาศทับปลั๊กอินอีกที (ธีมโหลดทีหลัง specificity เท่ากันจึงชนะเสมอ)
   ต้องแก้ที่นี่ "คู่กับ" assets/css/style.css ของปลั๊กอินทุกครั้งที่แก้ .lcbp-dc-search-box ไม่งั้นแก้แต่ปลั๊กอินจะไม่มีผลจริงบนเว็บ */
/* แสงกระจายแบบ pulse วนไม่รู้จบ — @keyframes ต้องอยู่นอก @media เสมอ (ไม่มีเงื่อนไข) ไม่งั้นบนมือถือ (hover:hover
   เป็นเท็จ) เบราว์เซอร์จะไม่รู้จัก animation ชื่อนี้เลย ทำให้ :focus-within ด้านล่างซึ่งอยากเล่นแอนิเมชันเดียวกัน
   บนมือถือด้วย ไม่ขึ้นแสงอะไรเลย */
@keyframes dc-search-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255,150,0,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(255,150,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,150,0,0); }
}
/* เอาเมาส์ชี้ (hover) = เล่นแอนิเมชันแสงกระจาย เฉพาะอุปกรณ์ที่มีเมาส์จริง (@media hover:hover) — กันจอสัมผัสโดน
   เบราว์เซอร์ "จำลอง" :hover ค้างไว้ตอนแตะ (sticky hover) ซึ่งจะไปชนกับตอนพิมพ์ (:focus-within) เป็น 2 สถานะซ้อน
   กันไม่ตรงจังหวะ เห็นเป็นเคอร์เซอร์พิมพ์ลอย — ตัด :hover ออกจากมือถือทั้งหมด เหลือ :focus-within ตัวเดียวคุมแสง */
@media (hover: hover) and (pointer: fine) {
  .lcbp-dc-search-box:hover { border-color: var(--dc-accent); animation: dc-search-glow 1.6s ease-out infinite; }
}
/* วางเคอร์เซอร์โฟกัสในช่อง (คลิก/แตะพิมพ์ ทั้งคอมและมือถือ — รวมแถบ "ค้นหาคำตอบ" ลอยตัวมือถือที่ใช้คลาสนี้ร่วมด้วย)
   = เล่นแอนิเมชันแสงกระจายเดียวกันกับตอน hover ทุกอุปกรณ์ ไม่มีเงื่อนไขจำกัด (บนมือถือมีแค่กฎนี้ทำงานจริง เพราะ
   :hover ถูกตัดออกไปแล้วด้านบน จึงไม่มีทางชนกันเองจนเคอร์เซอร์ดูลอย) */
.lcbp-dc-search-box:focus-within { border-color: var(--dc-accent); animation: dc-search-glow 1.6s ease-out infinite; }
/* ข้อยกเว้นเฉพาะแถบ "ค้นหาคำตอบ" ลอยตัวมือถือ (.lcbp-dc-float-bar) — ต่างจาก .lcbp-dc-search-box ทั่วไปตรงที่แถบนี้
   position:fixed ติดขอบล่างจอโดยตรง (bottom:20px) พอแป้นพิมพ์บนจอมือถือโผล่ตอนแตะพิมพ์ เบราว์เซอร์มือถือบางตัว
   (โดยเฉพาะ iOS Safari) จะคำนวณตำแหน่ง fixed ใหม่ระหว่างคีย์บอร์ดเลื่อนขึ้น ทำให้ทั้งกล่อง (พร้อมเคอร์เซอร์พิมพ์
   ข้างใน) ขยับ/เด้งจริงๆ ชั่วขณะ — ถ้ายังมีแอนิเมชันพัลส์วนไม่รู้จบซ้อนอยู่ด้วยจะยิ่งเห็นชัดเป็น "เคอร์เซอร์ลอยตามแสง"
   ตัดเฉพาะแอนิเมชันของแถบนี้ออกตอนโฟกัส เหลือแค่แสงฟุ้งค้างนิ่งๆ แทน (ช่องอื่นที่ไม่ใช่ fixed ไม่เจอปัญหานี้
   ยังกระพริบต่อได้ตามปกติ) ใส่ !important กันแน่นอนไม่ว่าไฟล์ไหนโหลดทีหลัง — คู่กับกฎเดียวกันใน assets/css/style.css
   ของปลั๊กอิน (ต้องแก้พร้อมกันทั้งคู่ ดู comment มาตรฐานด้านบนของไฟล์นี้) */
.lcbp-dc-float-bar:focus-within {
  animation: none !important;
  box-shadow: var(--dc-shadow), 0 0 0 6px rgba(255,150,0,.28) !important;
}
.lcbp-dc-search-input, textarea.lcbp-dc-search-input {
  flex: 1; min-width: 0; border: 0 !important; outline: 0; background: none;
  font: inherit; color: var(--dc-text); padding: 10px 8px; resize: none; box-shadow: none;
}
/* ปุ่มค้นหา — วงกลมสีส้ม ไอคอนแว่นขยายสีขาวมองเห็นชัด */
.lcbp-dc-search-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  background: var(--dc-accent); color: #fff;
  border-radius: 50%;
  transition: background .15s ease;
}
.lcbp-dc-search-btn:hover { background: var(--dc-accent-gradient); color: #2e2828; }
.lcbp-dc-search-btn svg { width: 20px; height: 20px; display: block; }
.lcbp-dc-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 16px; }
/* ชิปหมวด — ทรงเรียวผืนผ้า เตี้ยลง ไม่กินพื้นที่จอ (เดิมทรงแคปซูลสูงจนบนมือถือบังทั้งหน้า) */
.lcbp-dc-chip {
  border: 0; cursor: pointer; font: inherit; font-size: .85rem; line-height: 1.5;
  background: var(--dc-chip); color: #fff;
  padding: 3px 12px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.lcbp-dc-chip:hover, .lcbp-dc-chip.active, .lcbp-dc-chip.is-selected { background: var(--dc-accent-gradient); color: #2e2828; }
/* รายการคำถามของปลั๊กอิน LCBP Dhamma Consult (.lcbp-dc-rows .lcbp-dc-row)
   ธีมเป็นผู้กำหนดหน้าตา/ระยะห่าง/โฮเวอร์ทั้งหมดที่นี่ที่เดียว — ปลั๊กอินคุมแค่โครงสร้าง
   ต้องการแก้สไตล์ของแถวคำถาม (ทั้งหน้าแรกและ drawer มือถือ) ให้แก้ตรงนี้ ไม่ต้องไปแก้ในปลั๊กอินอีก */
.lcbp-dc-rows .lcbp-dc-row {
  padding: 4px 14px; /* ลดความสูงบน/ล่างลง 5px จากเดิม 9px */
  color: #3a3a3a;
  transition: background .14s ease, color .14s ease, border-radius .14s ease;
}
.lcbp-dc-rows .lcbp-dc-row:hover,
.lcbp-dc-rows .lcbp-dc-row:focus {
  background: var(--dc-accent-gradient) !important;
  color: #2e2828 !important;
  border-radius: 20px !important;
  outline: none;
}
.lcbp-dc-row-empty { padding: 10px 14px; color: var(--dc-muted); font-size: .9em; }

/* มือถือ: ซ่อนชิปหมวด+แผงหมวดของปลั๊กอิน (ใช้ปุ่มส้มลอย + แถบข้างขวาแทน)
   เหลือช่องค้นหาโล่งๆ เด่นๆ — และฟอนต์ช่องพิมพ์ 16px กัน iOS ซูมจนปุ่มค้นหาล้นจอ */
@media (max-width: 900px) {
  .lcbp-dc-chips, .lcbp-dc-cat-panels { display: none !important; }
  .lcbp-dc-search-input, textarea.lcbp-dc-search-input { font-size: 16px !important; }
}
.lcbp-dc-cat-panel, .lcbp-dc-faq {
  background: var(--dc-card);
  border: 1px solid #dcdcdc;
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow); /* เงาบางๆ ให้กรอบลอยขึ้นนิดเดียว */
  padding: 24px 26px;
  margin-top: 22px;
  text-align: left;
}
/* ผลลัพธ์ — ไม่ใส่กรอบซ้อน ให้กรอบอยู่ที่ช่องคำตอบ (.lcbp-dc-answer) ชั้นเดียว */
.lcbp-dc-result { background: transparent; border: 0; padding: 0; margin-top: 22px; text-align: left; }
.lcbp-dc-result:empty { display: none; }
.lcbp-dc-result .lcbp-dc-answer {
  background: var(--dc-card);
  border: 1px solid #dcdcdc;
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow); /* เงาบางๆ ให้กรอบลอยขึ้นนิดเดียว */
  padding: 24px 26px;
}
.lcbp-dc-qa-list, .lcbp-dc-seed-list { list-style: none; margin: 0; padding: 0; }
.lcbp-dc-qa-list a:hover { color: var(--dc-accent); }
.lcbp-dc-recent { margin-top: 14px; font-size: .9rem; color: var(--dc-muted); }

/* ---------- Utilities / a11y ---------- */
.screen-reader-text {
  position: absolute !important; clip-path: inset(50%);
  width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important;
}
.alignwide { max-width: 1080px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .dc-content { padding: 20px 14px 48px; }
  .dc-card { padding: 20px 18px; }
  .dc-hero { padding-top: 5vh; }
  .dc-search-form button { padding: 10px 16px; }
}