/* หน้ารวมบทความและหน้าบทความ */
.mbb-hero { background: linear-gradient(180deg, #eaf0ff, #f5f8ff); border-bottom: 1px solid #e3e9f7; font-family: Sarabun, sans-serif; }
/* ใช้ ct-container ของ Blocksy → ขอบซ้ายตรงกับการ์ดบทความเสมอ (ตั้งความกว้างที่ Customize ได้ที่เดียว) */
body .mbb-hero .mbb-in { display: block !important; padding-top: 44px !important; padding-bottom: 36px !important; box-sizing: border-box; }
body .mbb-hero .mbb-in:not(.ct-container) { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
body .mbb-hero h1.mbb-title { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; clip: auto !important; width: auto !important; height: auto !important; overflow: visible !important; font-family: 'Noto Sans Thai Looped', Sarabun, sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 42px); line-height: 1.25; color: #18213f; margin: 0; }
.mbb-hero p { margin: 10px 0 0; font-size: 17px; line-height: 1.7; color: #3c4766; max-width: 40em; }
.mbb-hero .mbb-crumb { margin: 0 0 6px; font-size: 14.5px; color: #6b7591; }
.mbb-hero .mbb-crumb a { color: #2f5bd6; font-weight: 600; text-decoration: none; }
@media (max-width: 600px) { body .mbb-hero .mbb-in { padding-top: 28px !important; padding-bottom: 24px !important; } .mbb-hero p { font-size: 16px; } }

/* การ์ดบทความของ Blocksy */
body.blog .entry-card, body.archive .entry-card {
	border-radius: 18px; overflow: hidden; border: 1px solid #e3e9f7;
	box-shadow: 0 6px 18px rgba(24, 33, 63, .05); transition: transform .15s, box-shadow .15s, border-color .15s;
}
body.blog .entry-card:hover, body.archive .entry-card:hover { transform: translateY(-3px); border-color: #2f5bd6; box-shadow: 0 14px 30px rgba(47, 91, 214, .12); }
body.blog .entry-card .entry-title, body.archive .entry-card .entry-title { font-family: 'Noto Sans Thai Looped', Sarabun, sans-serif; line-height: 1.35; }
body.blog .entry-card .entry-title a:hover, body.archive .entry-card .entry-title a:hover { color: #2f5bd6; }
body.blog .entry-card .entry-excerpt, body.archive .entry-card .entry-excerpt { color: #4a5470; line-height: 1.7; }
body.blog .entry-card .entry-meta, body.archive .entry-card .entry-meta { text-transform: none; letter-spacing: 0; }
body.blog .entry-card .ct-media-container img, body.archive .entry-card .ct-media-container img { transition: transform .4s; }
body.blog .entry-card:hover .ct-media-container img, body.archive .entry-card:hover .ct-media-container img { transform: scale(1.02); }
/* ภาพหน้าปกในการ์ด: สัดส่วนภาพแชร์ 1200×630 ไม่ให้ถูกครอป */
body.blog .entry-card .ct-media-container, body.archive .entry-card .ct-media-container { aspect-ratio: 40 / 21 !important; height: auto !important; overflow: hidden; }
body.blog .entry-card .ct-media-container img, body.archive .entry-card .ct-media-container img { aspect-ratio: 40 / 21 !important; object-fit: cover; object-position: center; width: 100% !important; height: 100% !important; }
@media (prefers-reduced-motion: reduce) { body.blog .entry-card, body.archive .entry-card, .entry-card img { transition: none !important; transform: none !important; } }

/* ================= หน้าบทความ ================= */
body.single-post .entry-content { --mbb-blue: #2f5bd6; --mbb-ink: #18213f; --mbb-line: #e3e9f7; --mbb-soft: #eef3ff; --mbb-green: #0a8a3e; }
body.single-post .entry-content > h2 { position: relative; padding-top: 18px; }
body.single-post .entry-content > h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #2f5bd6, #06c755); }

/* แถบความคืบหน้าการอ่าน */
.mbb-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 99999; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #2f5bd6, #06c755); pointer-events: none; }
body.admin-bar .mbb-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mbb-progress { top: 46px; } }

/* ค่อย ๆ ปรากฏ (เฉพาะเมื่อ JS ทำงาน) */
.mbb-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.mbb-reveal.mbb-in-view { opacity: 1; transform: none; }

/* ตาราง */
body.single-post .entry-content .wp-block-table { overflow-x: auto; border-radius: 14px; border: 1px solid var(--mbb-line); box-shadow: 0 6px 18px rgba(24, 33, 63, .05); }
body.single-post .entry-content .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 0; border: 0; }
body.single-post .entry-content .wp-block-table thead { border: 0; }
body.single-post .entry-content .wp-block-table table th { background: var(--mbb-ink) !important; color: #fff !important; text-align: left; font-weight: 700; border: 0 !important; }
body.single-post .entry-content .wp-block-table table th, body.single-post .entry-content .wp-block-table table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--mbb-line); }
body.single-post .entry-content .wp-block-table tbody tr:nth-child(even) td { background: #f7f9ff; }
body.single-post .entry-content .wp-block-table tbody tr:hover td { background: var(--mbb-soft); }
body.single-post .entry-content .wp-block-table tbody td:first-child { font-weight: 600; color: var(--mbb-ink); }
body.single-post .entry-content .wp-block-table figcaption { padding: 8px 16px 12px; margin: 0; font-size: 14.5px; color: #6b7591; text-align: left; }

/* ปุ่ม */
body.single-post .entry-content .wp-block-button__link { background: #06c755; color: #fff; border-radius: 999px; padding: 14px 28px; font-weight: 700; }
body.single-post .entry-content .wp-block-button__link:hover { background: #05b34c; }

/* รายการติ๊กถูก */
body.single-post .entry-content ul.mb-checks { list-style: none; padding: 0; display: grid; gap: 12px; }
body.single-post .entry-content ul.mb-checks li { position: relative; padding: 14px 16px 14px 52px; background: #fff; border: 1px solid var(--mbb-line); border-radius: 14px; margin: 0; }
body.single-post .entry-content ul.mb-checks li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border-radius: 50%; background: #06c755 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 16px no-repeat; }
body.single-post .entry-content ul.mb-checks.mb-pain li::before { background: #fdecec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ขั้นตอนเลขวงกลม */
body.single-post .entry-content ol.mb-steps { list-style: none; padding: 0; counter-reset: mbbs; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.single-post .entry-content ol.mb-steps li { counter-increment: mbbs; position: relative; margin: 0; padding: 56px 16px 16px; background: #fff; border: 1px solid var(--mbb-line); border-radius: 16px; line-height: 1.5; font-size: 15.5px; }
body.single-post .entry-content ol.mb-steps li::before { content: counter(mbbs); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--mbb-blue); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
body.single-post .entry-content ol.mb-steps li strong { display: block; color: var(--mbb-ink); }
@media (max-width: 900px) { body.single-post .entry-content ol.mb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { body.single-post .entry-content ol.mb-steps { grid-template-columns: minmax(0, 1fr); } }

/* ฟีเจอร์: ข้อความ + แชตจำลอง */
body.single-post .entry-content .wp-block-columns.mb-feature { align-items: center !important; gap: 36px; margin-block: 40px; padding: 28px; background: #fff; border: 1px solid var(--mbb-line); border-radius: 22px; }
body.single-post .entry-content .wp-block-columns.mb-feature.mb-flip { flex-direction: row-reverse; }
body.single-post .entry-content .mb-feature h3 { margin-top: 0; }
body.single-post .entry-content .mb-feature .mbg-inline { max-width: 300px; margin: 0 auto; }
@media (max-width: 781px) {
	body.single-post .entry-content .wp-block-columns.mb-feature, body.single-post .entry-content .wp-block-columns.mb-feature.mb-flip { flex-direction: column; padding: 20px; gap: 18px; }
}

/* การ์ดสามใบ */
body.single-post .entry-content .wp-block-columns.mb-cards { gap: 16px; margin-block: 32px; }
body.single-post .entry-content .mb-cards > .wp-block-column { background: #fff; border: 1px solid var(--mbb-line); border-radius: 18px; padding: 22px; transition: transform .2s, box-shadow .2s, border-color .2s; }
body.single-post .entry-content .mb-cards > .wp-block-column:hover { transform: translateY(-4px); border-color: var(--mbb-blue); box-shadow: 0 14px 30px rgba(47, 91, 214, .12); }
body.single-post .entry-content .mb-cards h3 { margin-top: 0; font-size: 19px; }
body.single-post .entry-content .mb-cards p { margin-bottom: 0; font-size: 15.5px; }
body.single-post .entry-content .mb-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--mbb-soft); color: var(--mbb-blue); display: inline-grid; place-items: center; margin: 0 0 12px; }
body.single-post .entry-content .mb-ico svg { width: 24px; height: 24px; }
body.single-post .entry-content .mb-cards .mb-ico + br { display: none; }

/* คำถามพับได้ */
body.single-post .entry-content .mb-faq details, body.single-post .entry-content details.wp-block-details { background: #fff; border: 1px solid var(--mbb-line); border-radius: 14px; padding: 0; margin: 0 0 10px; }
body.single-post .entry-content details.wp-block-details summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 18px; font-weight: 700; color: var(--mbb-ink); position: relative; }
body.single-post .entry-content details.wp-block-details summary::-webkit-details-marker { display: none; }
body.single-post .entry-content details.wp-block-details summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--mbb-soft); color: var(--mbb-blue); display: grid; place-items: center; font-size: 18px; transition: transform .2s; }
body.single-post .entry-content details.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
body.single-post .entry-content details.wp-block-details > :not(summary) { padding: 0 18px 16px; margin: 0; }

/* แชตจำลอง + กล่องติดต่อในบทความ (ใช้สไตล์จากคู่มือ) */
.mbg.mbg-inline { background: transparent; padding: 0; font-size: 16px; }
.mbg.mbg-inline .mbg-phone { position: static; }
.mbg.mbg-inline-cta .mbg-contact { margin: 40px 0 0; }

@media (prefers-reduced-motion: reduce) { .mbb-reveal { opacity: 1; transform: none; transition: none; } body.single-post .entry-content .mb-cards > .wp-block-column { transition: none; } }

/* บล็อกตกแต่งต้องอยู่กลางคอลัมน์เนื้อหาเหมือนย่อหน้าอื่น (Blocksy ตั้ง margin ของ ul/ol ทับการจัดกลาง) */
body.single-post .entry-content > .mb-checks,
body.single-post .entry-content > .mb-steps,
body.single-post .entry-content > .mb-feature,
body.single-post .entry-content > .mb-cards,
body.single-post .entry-content > .wp-block-details,
body.single-post .entry-content > .mbg-inline {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--theme-block-max-width, var(--wp--style--global--content-size, 760px));
	margin-left: auto !important;
	margin-right: auto !important;
}
body.single-post .entry-content > .mb-checks, body.single-post .entry-content > .mb-steps { margin-top: 1.2em !important; margin-bottom: 1.6em !important; }
body.single-post .entry-content > .mb-checks + p, body.single-post .entry-content > .mb-steps + p { margin-top: 1.6em !important; }

/* กล่องตัวอย่างคำสั่ง (prompt) ในบทความ */
body.single-post .entry-content > p.mb-prompt { position: relative; background: #f4f7fd; border: 1px dashed #b9c8f3; border-radius: 14px; padding: 14px 16px 14px 48px; color: #18213f; font-size: .96em; }
body.single-post .entry-content > p.mb-prompt::before { content: ""; position: absolute; left: 14px; top: 15px; width: 22px; height: 22px; border-radius: 7px; background: #2f5bd6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center / 14px no-repeat; }