/* คู่มือ MemoBill (/guide/) — คลาสขึ้นต้นด้วย mbg- กันชนกับ Blocksy */
.mbg {
	--mbg-bg: #f5f8ff; --mbg-surface: #fff; --mbg-line: #e1e8f7;
	--mbg-ink: #18213f; --mbg-ink2: #3c4766; --mbg-mu: #6b7591;
	--mbg-blue: #2f5bd6; --mbg-blue-soft: #e4ecff; --mbg-green: #0a8a3e; --mbg-green-soft: #e3f5ea;
	--mbg-amber: #b86e08; --mbg-amber-soft: #fdf3e3; --mbg-navy: #18213f;
	--mbg-display: 'Noto Sans Thai Looped', Sarabun, 'Leelawadee UI', Tahoma, sans-serif;
	--mbg-body: Sarabun, 'Leelawadee UI', Tahoma, sans-serif;
	background: var(--mbg-bg); color: var(--mbg-ink);
	font-family: var(--mbg-body); font-size: 17px; line-height: 1.7;
	padding-bottom: 8px;
}
.mbg *, .mbg *::before, .mbg *::after { box-sizing: border-box; }
.mbg h1, .mbg h2, .mbg h3 { font-family: var(--mbg-display); line-height: 1.3; margin: 0; color: var(--mbg-ink); text-wrap: balance; letter-spacing: 0; text-transform: none; }
.mbg p { margin: 0; }
.mbg a { color: var(--mbg-blue); }
.mbg figure { margin: 0; }
.mbg ol { margin: 0; padding: 0; list-style: none; }
.mbg kbd { font-family: var(--mbg-body); font-weight: 700; font-size: .92em; background: var(--mbg-green-soft); color: var(--mbg-green); border-radius: 6px; padding: 0 7px; box-shadow: none; border: 0; }
.mbg :focus-visible { outline: 3px solid var(--mbg-blue); outline-offset: 2px; border-radius: 6px; }
.mbg .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mbg [hidden] { display: none !important; }
.mbg-wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- ศูนย์คู่มือ ---------- */
.mbg-hero { padding: 48px 0 28px; }
.mbg-hero-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.mbg-eyebrow { display: inline-block; font-size: 14px; font-weight: 700; color: var(--mbg-blue); background: var(--mbg-blue-soft); padding: 4px 12px; border-radius: 999px; }
.mbg-hero h1 { font-size: clamp(30px, 4.4vw, 44px); margin: 14px 0 10px; }
.mbg-hero p { color: var(--mbg-ink2); max-width: 34em; }
.mbg-search { margin-top: 20px; display: flex; align-items: center; gap: 10px; background: var(--mbg-surface); border: 1px solid var(--mbg-line); border-radius: 999px; padding: 4px 8px 4px 18px; max-width: 460px; cursor: text; }
.mbg-search:focus-within { border-color: var(--mbg-blue); box-shadow: 0 0 0 3px var(--mbg-blue-soft); }
.mbg-search svg { flex: none; color: var(--mbg-mu); }
.mbg .mbg-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: 16px; color: var(--mbg-ink); padding: 8px 0; height: auto; min-height: 0; margin: 0; }
.mbg-search input::placeholder { color: var(--mbg-mu); }
.mbg-quick { background: var(--mbg-surface); border: 1px solid var(--mbg-line); border-radius: 20px; padding: 20px 22px; }
.mbg-quick h2 { font-size: 18px; margin-bottom: 12px; }
.mbg-quick ol { display: grid; gap: 10px; }
.mbg-quick li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15.5px; line-height: 1.55; margin: 0; }
.mbg-quick li i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--mbg-blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.mbg-quick li span { color: var(--mbg-mu); }
.mbg-quick li b { display: block; color: var(--mbg-ink); }

.mbg-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.mbg-sec-h h2 { font-size: 24px; }
.mbg-sec-h span { color: var(--mbg-mu); }
.mbg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mbg .mbg-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; background: var(--mbg-surface); border: 1px solid var(--mbg-line); border-radius: 14px; padding: 18px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.mbg .mbg-card:hover { transform: translateY(-2px); border-color: var(--mbg-blue); box-shadow: 0 10px 24px rgba(47, 91, 214, .12); color: inherit; }
.mbg-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.mbg-card h3 { font-size: 17px; }
.mbg-d { font-size: 15px; color: var(--mbg-mu); line-height: 1.55; flex: 1; }
.mbg-meta { font-size: 13.5px; font-weight: 600; color: var(--mbg-blue); }
.mbg-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mbg-blue-soft); color: var(--mbg-blue); flex: none; }
.mbg-ico svg { width: 24px; height: 24px; }
.mbg-empty { padding: 24px; text-align: center; color: var(--mbg-mu); background: var(--mbg-surface); border: 1px dashed var(--mbg-line); border-radius: 14px; }

.mbg-cmds { margin-top: 40px; background: var(--mbg-surface); border: 1px solid var(--mbg-line); border-radius: 20px; padding: 22px; }
.mbg-cmds h2 { font-size: 22px; }
.mbg-lead { margin: 4px 0 14px !important; color: var(--mbg-mu); font-size: 15px; }
.mbg-cmd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.mbg-cmd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--mbg-line); }
.mbg-cmd kbd { font-size: 14.5px; padding: 2px 10px; border-radius: 8px; white-space: nowrap; }
.mbg-cmd span { font-size: 14.5px; color: var(--mbg-ink2); line-height: 1.45; }

.mbg-contact { margin: 40px 0 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; background: var(--mbg-navy); color: #c9d1ea; border-radius: 20px; padding: 24px 28px; }
.mbg-contact img { width: 132px; height: 132px; max-width: none; background: #fff; border-radius: 14px; padding: 8px; display: block; }
.mbg-contact h2 { color: #fff; font-size: 22px; }
.mbg-contact p { margin: 6px 0 14px; }
.mbg .mbg-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: #06c755; color: #fff; text-decoration: none; font-weight: 700; }
.mbg .mbg-btn:hover { background: #05b34c; color: #fff; }
.mbg .mbg-mail { display: block; margin-top: 10px; font-size: 14.5px; color: #c9d1ea; }

/* ---------- หน้าหัวข้อ ---------- */
.mbg-crumb { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--mbg-mu); padding-top: 28px; flex-wrap: wrap; }
.mbg-crumb a { text-decoration: none; font-weight: 600; }
.mbg-art { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.mbg-art-head { display: flex; gap: 14px; align-items: center; margin: 14px 0 6px; }
.mbg-art-head h1 { font-size: clamp(26px, 3.4vw, 34px); }
.mbg-intro { color: var(--mbg-ink2); margin: 6px 0 24px !important; max-width: 36em; }
.mbg-steps { counter-reset: mbgs; }
.mbg-steps li { counter-increment: mbgs; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; position: relative; padding-bottom: 22px; margin: 0; }
.mbg-steps li::before { content: counter(mbgs); width: 36px; height: 36px; border-radius: 50%; background: var(--mbg-surface); border: 2px solid var(--mbg-blue); color: var(--mbg-blue); display: grid; place-items: center; font-weight: 700; font-size: 15px; position: relative; z-index: 1; }
.mbg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px; background: var(--mbg-line); }
.mbg-steps b { display: block; font-size: 17.5px; color: var(--mbg-ink); line-height: 1.4; padding-top: 5px; }
.mbg-steps p { margin: 4px 0 0; color: var(--mbg-ink2); font-size: 16px; }
.mbg-tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; background: var(--mbg-amber-soft); border-radius: 12px; padding: 12px 16px; margin-top: 4px; font-size: 15.5px; color: var(--mbg-ink2); }
.mbg-tip strong { color: var(--mbg-amber); }
.mbg-pager { display: flex; gap: 12px; margin: 28px 0 0; flex-wrap: wrap; }
.mbg .mbg-pager a { flex: 1 1 220px; text-decoration: none; border: 1px solid var(--mbg-line); background: var(--mbg-surface); border-radius: 12px; padding: 12px 16px; color: var(--mbg-ink); }
.mbg .mbg-pager a:hover { border-color: var(--mbg-blue); }
.mbg-pager small { display: block; color: var(--mbg-mu); font-size: 13px; }
.mbg-pager .mbg-next { text-align: right; }
.mbg-others { margin-top: 40px; }
.mbg-others b { display: block; font-family: var(--mbg-display); font-size: 16px; margin-bottom: 10px; }
.mbg-others div { display: flex; flex-wrap: wrap; gap: 8px; }
.mbg .mbg-others a { text-decoration: none; color: var(--mbg-ink2); background: var(--mbg-surface); border: 1px solid var(--mbg-line); border-radius: 999px; padding: 6px 14px; font-size: 14.5px; }
.mbg .mbg-others a:hover { border-color: var(--mbg-blue); color: var(--mbg-blue); }
.mbg .mbg-others a[aria-current] { background: var(--mbg-blue-soft); border-color: var(--mbg-blue); color: var(--mbg-blue); font-weight: 700; }

/* แชตจำลอง */
.mbg-phone { position: sticky; top: 100px; background: #8ca6d6; border-radius: 22px; padding: 14px 12px 16px; border: 6px solid var(--mbg-navy); box-shadow: 0 16px 40px rgba(24, 33, 63, .18); }
body.admin-bar .mbg-phone { top: 132px; }
.mbg-phone-top { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; margin: 0 2px 10px; }
.mbg-phone-top img { width: 26px; height: 26px; border-radius: 8px; }
.mbg-msgs { display: flex; flex-direction: column; gap: 8px; }
.mbg-m { max-width: 86%; font-size: 13.5px; line-height: 1.45; padding: 7px 11px; border-radius: 16px; word-break: break-word; }
.mbg-u { align-self: flex-end; background: #06c755; color: #fff; border-bottom-right-radius: 4px; }
.mbg-b { align-self: flex-start; background: #fff; color: #18213f; border-bottom-left-radius: 4px; }
.mbg-photo { padding: 4px; background: #fff; align-self: flex-end; }
.mbg-bill { width: 118px; background: #fbfaf5; border-radius: 10px; padding: 8px 9px; font-size: 10px; line-height: 1.35; color: #333; font-family: ui-monospace, Menlo, Consolas, monospace; }
.mbg-bill hr { border: 0; border-top: 1px dashed #aaa; margin: 4px 0; height: 0; background: none; }
.mbg-r { display: flex; justify-content: space-between; gap: 8px; }
.mbg-fcard { align-self: flex-start; width: 88%; background: #fff; border-radius: 14px; overflow: hidden; color: #18213f; font-size: 12.5px; line-height: 1.45; }
.mbg-fh { background: #16206b; color: #fff; padding: 8px 11px; font-weight: 700; font-size: 13px; }
.mbg-fh small { display: block; font-weight: 400; color: #c9d2ff; font-size: 11px; }
.mbg-fb { padding: 8px 11px; display: grid; gap: 3px; }
.mbg-fb .mbg-r span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.mbg-r-h { color: #8a94a0; font-size: 11px; }
.mbg-ok { color: #1f9d63; font-weight: 700; font-style: normal; }
.mbg-no { color: #d64545; font-weight: 700; font-style: normal; }
.mbg-ft { border-top: 1px solid #e8ebf2; padding: 7px 11px; display: flex; gap: 6px; }
.mbg-ft span { flex: 1; text-align: center; background: #eef2ff; color: #2f5bd6; border-radius: 8px; padding: 3px 0; font-weight: 600; font-size: 11.5px; }
.mbg-phone figcaption { margin: 10px 2px 0; color: #fff; font-size: 12px; opacity: .9; text-align: center; }

@media (max-width: 1000px) {
	.mbg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mbg-cmd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.mbg-hero-in, .mbg-art { grid-template-columns: minmax(0, 1fr); }
	.mbg-art { gap: 28px; }
	.mbg-phone { position: static; max-width: 360px; width: 100%; margin: 0 auto; }
	.mbg-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.mbg { font-size: 16px; }
	.mbg-wrap { padding-left: 16px; padding-right: 16px; }
	.mbg-hero { padding: 28px 0 20px; }
	.mbg-cards, .mbg-cmd-grid { grid-template-columns: minmax(0, 1fr); }
	.mbg .mbg-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px; }
	.mbg-contact { padding: 20px; }
	.mbg-contact img { width: 112px; height: 112px; }
	.mbg-pager .mbg-next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .mbg .mbg-card { transition: none; } }

/* แชตจำลองแบบเคลื่อนไหว: ข้อความทยอยขึ้นเหมือนแชตจริง (JS ใส่คลาส is-anim; ไม่มี JS = เห็นครบทุกข้อความ) */
.mbg-phone.is-anim .mbg-msgs > * { display: none; }
.mbg-phone.is-anim .mbg-msgs > .is-in { display: block; animation: mbg-in .38s cubic-bezier(.2, .8, .3, 1.2) both; }
.mbg-phone.is-anim .mbg-msgs > .mbg-photo.is-in, .mbg-phone.is-anim .mbg-msgs > .mbg-fcard.is-in { display: block; }
.mbg-phone.is-anim .mbg-msgs > .mbg-u.is-in, .mbg-phone.is-anim .mbg-msgs > .mbg-photo.is-in { transform-origin: 100% 100%; }
.mbg-phone.is-anim .mbg-msgs > .mbg-b.is-in, .mbg-phone.is-anim .mbg-msgs > .mbg-fcard.is-in { transform-origin: 0 100%; }
.mbg-phone.is-out .mbg-msgs > * { animation: mbg-out .4s ease both; }
@keyframes mbg-in { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mbg-out { to { opacity: 0; transform: translateY(-6px); } }
.mbg-msgs > .mbg-typing { align-self: flex-start; display: none; gap: 4px; background: #fff; border-radius: 16px; border-bottom-left-radius: 4px; padding: 10px 12px; }
.mbg-phone.is-anim .mbg-msgs > .mbg-typing.is-in { display: inline-flex; }
.mbg-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa6c4; animation: mbg-dot 1s infinite ease-in-out; }
.mbg-typing i:nth-child(2) { animation-delay: .15s; }
.mbg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mbg-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.mbg .mbg-replay { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(24, 33, 63, .35); padding: 4px 12px; border-radius: 999px; }
.mbg .mbg-replay:hover { background: rgba(24, 33, 63, .55); }
.mbg .mbg-replay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ขั้นตอนที่ตรงกับแชตตอนนี้ */
.mbg-steps li { transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) {
	.mbg-phone.is-anim .mbg-msgs > .is-in, .mbg-phone.is-out .mbg-msgs > *, .mbg-typing i { animation: none; }
}

/* หัวข้อที่ยังไม่เปิด */
.mbg .mbg-soon { border-style: dashed; background: transparent; cursor: default; }
.mbg .mbg-soon:hover { transform: none; box-shadow: none; border-color: var(--mbg-line); }
.mbg-soon .mbg-ico { background: #eef0f5; color: var(--mbg-mu); }
.mbg-badge { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--mbg-amber); background: var(--mbg-amber-soft); border-radius: 999px; padding: 2px 10px; }