/* ส่วน "หน้าสรุปบนเว็บ" บนหน้าแรก — คลาสขึ้นต้นด้วย mbd- */
.mbd {
	--ink: #18213f; --mut: #4a5675; --soft: #6b7590; --line: #e3e9f7;
	--blue: #2f5bd6; --purple: #7a5cf0; --green: #1f9d63; --red: #d6455d; --amber: #d9922b;
	--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));
}
.mbd *, .mbd *::before, .mbd *::after { box-sizing: border-box; }
.mbd-in { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 48px; align-items: center; }
.mbd-eyebrow { display: inline-flex; font-weight: 700; font-size: 14px; color: var(--purple); background: #efeaff; border-radius: 999px; padding: 4px 12px; }
.mbd 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; }
.mbd h2 em { font-style: normal; color: var(--blue); }
.mbd-copy p { color: var(--mut); margin: 0 0 18px; max-width: 32em; }
.mbd-pts { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mbd-pts li { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--mut); }
.mbd-pts li b { color: var(--ink); }
.mbd-pts li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--green) 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.mbd .mbd-more { font-weight: 700; color: var(--blue); text-decoration: none; }
.mbd .mbd-more:hover { text-decoration: underline; }

.mbd-stage { margin: 0; background: linear-gradient(160deg, #eef3ff, #f6f0ff); border: 1px solid var(--line); border-radius: 28px; padding: 26px; }
.mbd-stage figcaption { text-align: center; font-size: 13px; color: var(--soft); margin-top: 12px; }
.mbd-win { background: #f5f8ff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 44px rgba(40, 60, 140, .16); border: 1px solid #fff; }
.mbd-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.mbd-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e3e7f1; }
.mbd-bar span { margin-left: 8px; flex: 1; min-width: 0; font-size: 11.5px; color: var(--soft); background: #f3f5fb; border-radius: 999px; padding: 2px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbd-app { padding: 14px; display: grid; gap: 12px; }
.mbd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mbd-top > b { font-family: var(--f-d); font-size: 15px; }
.mbd-months { display: flex; gap: 6px; }
.mbd .mbd-months button { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; color: var(--soft); background: #fff; border: 1px solid var(--line); transition: .2s; }
.mbd .mbd-months button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.mbd .mbd-months button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mbd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mbd-kpi, .mbd-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.mbd-kpi small { display: block; font-size: 11.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbd-kpi strong { font-family: var(--f-d); font-size: 19px; font-variant-numeric: tabular-nums; }
.mbd-g { color: var(--green); } .mbd-r { color: var(--red); }
.mbd-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.mbd-ct { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.mbd-ct span { color: var(--soft); font-size: 11px; white-space: nowrap; }
.mbd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 6px; vertical-align: 0; }
.mbd-dg { background: var(--green); } .mbd-dr { background: var(--red); } .mbd-da { background: var(--amber); }
.mbd-trend svg { width: 100%; height: auto; display: block; overflow: visible; }
.mbd-gridl line { stroke: #eef1f8; stroke-width: 1; }
.mbd-bars rect { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .3s; }
.mbd-bars rect.mbd-dim { opacity: .35; }
.mbd-lbl text { font-size: 9px; fill: var(--soft); text-anchor: middle; font-family: var(--f-b); }
.mbd-lbl text.mbd-on { fill: var(--ink); font-weight: 700; }
.mbd-donut-w { display: flex; align-items: center; gap: 10px; }
.mbd-donut { width: 84px; height: 84px; flex: none; transform: rotate(-90deg); }
.mbd-segs circle { fill: none; stroke-width: 6; transition: stroke-dasharray .7s ease, stroke-dashoffset .7s ease; }
.mbd-legend { list-style: none; margin: 0; padding: 0; font-size: 11.5px; display: grid; gap: 2px; min-width: 0; flex: 1; }
.mbd-legend li { display: flex; align-items: center; gap: 5px; margin: 0; white-space: nowrap; }
.mbd-legend li i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mbd-legend li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.mbd-docs .mbd-pct { color: var(--green); font-weight: 700; font-size: 12px; }
.mbd-prog { height: 8px; border-radius: 99px; background: #fdecee; overflow: hidden; margin: 6px 0 8px; }
.mbd-prog i { display: block; height: 100%; width: 90%; border-radius: 99px; background: linear-gradient(90deg, #1f9d63, #3fc983); transition: width .7s ease; }
.mbd-dl { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--mut); }
.mbd-dl .mbd-dot { margin-left: 0; }
.mbd-send { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; background: linear-gradient(135deg, #18213f, #2b3a7a); border: 0; color: #fff; }
.mbd-send b { font-size: 13px; display: block; }
.mbd-send small { font-size: 11px; color: #c9d1ea; }
.mbd-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mbd-btns span { font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .14); border-radius: 8px; padding: 4px 9px; }

@media (max-width: 960px) {
	.mbd-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mbd { padding-block: 48px; }
}
@media (max-width: 560px) {
	.mbd-stage { padding: 12px; border-radius: 20px; }
	.mbd-app { padding: 10px; gap: 10px; }
	.mbd-grid { grid-template-columns: minmax(0, 1fr); }
	.mbd-kpi { padding: 8px; }
	.mbd-kpi strong { font-size: 15px; }
	.mbd-kpi small { font-size: 10.5px; }
	.mbd-top > b { display: none; }
	.mbd-months { width: 100%; justify-content: space-between; }
	.mbd .mbd-months button { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .mbd-bars rect, .mbd-segs circle, .mbd-prog i { transition: none; } }