/* ส่วน "แม่นทุกบรรทัด" บนหน้าแรก — คลาสขึ้นต้นด้วย mba- */
.mba {
	--ink: #18213f; --mut: #4a5675; --soft: #6b7590; --line: #e3e9f7;
	--blue: #2f5bd6; --purple: #7a5cf0; --green: #1f9d63; --red: #d6455d;
	--f-d: 'Noto Sans Thai Looped', 'Sarabun', system-ui, sans-serif; --f-b: 'Sarabun', system-ui, sans-serif;
	font-family: var(--f-b); color: var(--ink); font-size: 16px; line-height: 1.6;
	background: #fff; padding-block: 72px;
	padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.mba *, .mba *::before, .mba *::after { box-sizing: border-box; }
.mba-in { max-width: 1000px; margin: 0 auto; }
.mba-copy { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.mba-eyebrow { display: inline-flex; font-weight: 700; font-size: 14px; color: var(--blue); background: #e7edff; border-radius: 999px; padding: 4px 12px; }
.mba h2 { font-family: var(--f-d); font-weight: 800; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.25; margin: 14px 0 12px; color: var(--ink); text-wrap: balance; }
.mba h2 em { font-style: normal; color: var(--blue); }
.mba-copy p { color: var(--mut); margin: 0; }

.mba-stage { margin: 0; background: linear-gradient(160deg, #eef3ff, #f4f0ff); border: 1px solid var(--line); border-radius: 28px; padding: 26px; }
.mba-stage figcaption { text-align: center; font-size: 13.5px; color: var(--soft); margin-top: 14px; }

/* ข้อความที่พิมพ์ */
.mba-msg { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-bottom: 18px; }
.mba-msg-lb { font-size: 12px; color: var(--soft); font-weight: 600; }
.mba-bubble { background: #7be38f; color: #10331b; border-radius: 18px 18px 4px 18px; padding: 10px 16px; font-size: 16px; font-weight: 600; line-height: 1.45; display: flex; flex-direction: column; min-width: 150px; min-height: 94px; box-shadow: 0 8px 20px rgba(31, 157, 99, .2); }
.mba-step { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.mba-step.on { opacity: 1; transform: none; }
.mba-pics { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-height: 94px; justify-content: flex-start; }
.mba-pic { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px; font-weight: 700; font-size: 14.5px; box-shadow: 0 6px 16px rgba(40, 60, 140, .1); }
.mba-pic-bill svg { color: var(--blue); } .mba-pic-slip svg { color: var(--green); }

/* แท็บเลือกฉาก — ปุ่มใหญ่ชัด มีเลขลำดับ และแถบเวลาบอกว่ากำลังจะเปลี่ยนฉาก */
.mba-tabs-lb { text-align: center; font-size: 13px; font-weight: 700; color: var(--soft); margin: 0 0 8px; }
.mba-tabs { display: flex; justify-content: center; gap: 10px; margin: 0 auto 16px; flex-wrap: wrap; }
.mba .mba-tabs button { all: unset; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-d); font-weight: 700; font-size: 16px; color: var(--ink); background: #fff; border: 2px solid #cfd9f3; padding: 11px 20px 13px 12px; border-radius: 14px; white-space: nowrap; box-shadow: 0 6px 16px rgba(40, 60, 140, .08); transition: background .2s, color .2s, border-color .2s, transform .15s; }
.mba .mba-tabs button:hover { border-color: var(--blue); transform: translateY(-1px); }
.mba .mba-tabs button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 10px 22px rgba(47, 91, 214, .3); }
.mba .mba-tabs button:focus-visible { outline: 3px solid #9fb4f0; outline-offset: 2px; }
.mba-tn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: #e7edff; color: var(--blue); flex: none; }
.mba-tabs button[aria-selected="true"] .mba-tn { background: #fff; }
.mba-prog { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: rgba(255, 255, 255, .85); }
.mba-tabs button.mba-run .mba-prog { width: 100%; transition: width var(--mba-dur, 10s) linear; }
.mba-scene[hidden] { display: none; }

.mba-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mba-card { background: #fff; border-radius: 18px; padding: 14px; border: 1px solid #fff; box-shadow: 0 16px 36px rgba(40, 60, 140, .12); min-width: 0; opacity: .35; transition: opacity .4s; }
.mba-flow.mba-show-bad .mba-bad, .mba-flow.mba-show-good .mba-good { opacity: 1; }
.mba-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.mba-tag-bad { background: #eef0f4; color: #5b6379; }
.mba-tag-good { background: #e7edff; color: var(--blue); }
.mba-mb { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; font: 800 9px/20px var(--f-d); text-align: center; }

/* ฝั่งที่แยกไม่ออก (ออกแบบกลาง ๆ ไม่อ้างอิงแอปใด) */
.mba-bad-body { background: #f5f6f9; border-radius: 12px; padding: 12px 14px; }
.mba-bad-body small { font-size: 12px; color: var(--soft); }
.mba-bad-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; }
.mba-bad-row + .mba-bad-row { border-top: 1px dashed #dde1ea; }
.mba-bad-row b { display: block; font-size: 14px; color: #3f475e; }
.mba-bad-row small { display: block; font-size: 12px; color: var(--soft); }
.mba-bad-row em { font-style: normal; font-family: var(--f-d); font-size: 19px; font-weight: 800; color: #3f475e; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mba-warn { margin-top: 10px; background: #fdecee; color: var(--red); border-radius: 12px; padding: 10px 12px 10px 38px; position: relative; font-size: 13.5px; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.mba-warn::before { content: "!"; position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; font: 800 12px/18px var(--f-d); text-align: center; }
.mba-warn b, .mba-warn span { display: block; }
.mba-warn span { font-weight: 700; }
.mba-flow.mba-show-warn .mba-warn { opacity: 1; transform: none; }

/* ฝั่ง MemoBill */
.mba-good-h { font-family: var(--f-d); font-weight: 800; color: var(--blue); font-size: 16px; margin-bottom: 4px; }
.mba-rows { list-style: none; margin: 0; padding: 0; }
.mba-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eef1f8; margin: 0; }
.mba-atts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.mba-att { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--green); background: #e3f6ec; border-radius: 999px; padding: 3px 11px; }
.mba-rows li span { min-width: 0; }
.mba-rows li b { display: block; font-size: 15px; }
.mba-rows li small { display: block; font-size: 12px; color: var(--soft); }
.mba-rows li em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--f-d); white-space: nowrap; }
.mba-rows li.mba-r-in em { color: var(--green); }
.mba-tot { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding-top: 8px; font-size: 13.5px; color: var(--mut); opacity: 0; transition: opacity .4s; }
.mba-tot b { font-variant-numeric: tabular-nums; }
.mba-tot-in { color: var(--green); font-weight: 700; }
.mba-flow.mba-show-tot .mba-tot { opacity: 1; }

@media (max-width: 760px) {
	.mba { padding-block: 48px; }
	.mba-stage { padding: 14px; border-radius: 20px; }
	.mba-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.mba-msg, .mba-pics { align-items: center; }
}
@media (max-width: 420px) { .mba-tabs { gap: 8px; } .mba .mba-tabs button { padding: 9px 12px 11px 9px; font-size: 14.5px; gap: 7px; } .mba-tn { width: 22px; height: 22px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) {
	.mba *, .mba *::before { transition: none !important; }
}
.mba-nw { white-space: nowrap; }