/* ระบบบทความ (/blog) — ขนาดอ่านง่ายบนมือถือและเดสก์ท็อป; ใช้ร่วมกับ Bootstrap 5 ของ layouts/share (7 ต.ค. 2569) */
.blog-wrap { max-width: 800px; }

.blog-card { transition: box-shadow .15s ease; }
.blog-card:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }

.blog-body { font-size: 1.05rem; line-height: 1.85; overflow-wrap: anywhere; }
.blog-body h2 { font-size: 1.45rem; font-weight: 700; margin: 2.2rem 0 .8rem; line-height: 1.4; }
.blog-body h3 { font-size: 1.2rem; font-weight: 700; margin: 1.8rem 0 .6rem; line-height: 1.4; }
.blog-body h4, .blog-body h5, .blog-body h6 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.blog-body p, .blog-body ul, .blog-body ol, .blog-body blockquote, .blog-body pre, .blog-body table { margin-bottom: 1.1rem; }
.blog-body ul, .blog-body ol { padding-left: 1.6rem; }
.blog-body li + li { margin-top: .25rem; }
.blog-body blockquote { border-left: 4px solid #cbd5e1; padding: .25rem 0 .25rem 1rem; color: #475569; }
.blog-body hr { margin: 2rem 0; }
.blog-body img { max-width: 100%; height: auto; border-radius: .5rem; }
.blog-body pre { background: #f1f5f9; border-radius: .5rem; padding: .85rem 1rem; overflow-x: auto; font-size: .92rem; line-height: 1.6; }
.blog-body code { font-size: .92em; }
.blog-body :not(pre) > code { background: #f1f5f9; border-radius: .25rem; padding: .1em .35em; }

/* ตาราง: เลื่อนแนวนอนในจอแคบแทนที่จะดันทั้งหน้าให้กว้างเกิน (display:block + overflow ทำให้ตารางเลื่อนได้โดยไม่ต้องห่อ div) */
.blog-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.blog-body th, .blog-body td { border: 1px solid #dee2e6; padding: .5rem .75rem; vertical-align: top; }
/* .blog-body ตั้ง overflow-wrap:anywhere ซึ่งทำให้เซลล์หดได้ไม่จำกัด ตารางจึงไม่เคยล้น = ไม่เลื่อน — ปิดในตาราง + กำหนดความกว้างขั้นต่ำของเซลล์ ตารางกว้างจึงเลื่อนแนวนอนในกรอบแทนที่จะบีบตัวอักษรเป็นแถบแคบ */
.blog-body table { overflow-wrap: break-word; }   /* ตัดคำเฉพาะตอนจำเป็น (ไม่ใช่ anywhere/break-all ที่ตัดตัวเลขอย่าง "10" กลางคำได้ และทำให้เซลล์หดจนตารางไม่เลื่อน) */
.blog-body td { min-width: 5.5rem; }
.blog-body td:first-child, .blog-body th:first-child { white-space: nowrap; }   /* คอลัมน์แรก (ลำดับ/ตัวเลข) ไม่ตกบรรทัด */
.blog-body th { background: #f8fafc; font-weight: 600; white-space: nowrap; } /* หัวตารางสั้นๆ (เช่น "ลำดับ") ไม่ตกบรรทัด */

@media (max-width: 575.98px) {
    .blog-body { font-size: 1rem; line-height: 1.8; }
    .blog-body h2 { font-size: 1.3rem; }
}