/* ส่วน "สำรองไฟล์ไว้ที่ Google Drive" บนหน้าแรก — คลาสขึ้นต้นด้วย mbv- */
.mbv {
	--ink: #18213f; --mut: #4a5675; --soft: #6b7590; --line: #e3e9f7;
	--blue: #2f5bd6; --purple: #7a5cf0; --green: #1f9d63; --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: linear-gradient(180deg, #f6f8ff, #fff); padding-block: 72px;
	padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.mbv *, .mbv *::before, .mbv *::after { box-sizing: border-box; }
.mbv-in { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.mbv-eyebrow { display: inline-flex; font-weight: 700; font-size: 14px; color: var(--green); background: #e3f6ec; border-radius: 999px; padding: 4px 12px; }
.mbv 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; }
.mbv h2 em { font-style: normal; color: var(--blue); }
.mbv-copy p { color: var(--mut); margin: 0 0 18px; max-width: 32em; }
.mbv-pts { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mbv-pts li { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--mut); }
.mbv-pts li b { color: var(--ink); }
.mbv-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; }
.mbv .mbv-more { font-weight: 700; color: var(--blue); text-decoration: none; }
.mbv .mbv-more:hover { text-decoration: underline; }
.mbv .mbv-note { font-size: 13.5px; color: var(--soft); margin: 14px 0 0; }
.mbv .mbv-note a { color: inherit; }

/* เวที */
.mbv-stage { margin: 0; background: linear-gradient(160deg, #eef7f1, #eef3ff); border: 1px solid var(--line); border-radius: 28px; padding: 26px; }
.mbv-stage figcaption { text-align: center; font-size: 13px; color: var(--soft); margin-top: 12px; }
.mbv-flow { display: grid; grid-template-columns: minmax(0, .8fr) 92px minmax(0, 1.5fr); align-items: center; gap: 0; }

.mbv-src, .mbv-drive { background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(40, 60, 140, .14); border: 1px solid #fff; min-width: 0; }
.mbv-src { padding: 12px; }
.mbv-src-h { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; margin-bottom: 10px; }
.mbv-src-h b { font-family: var(--f-d); font-size: 14px; line-height: 1.2; }
.mbv-src-h small { grid-column: 2; font-size: 11px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbv-logo { grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; font: 800 12px/32px var(--f-d); text-align: center; }
.mbv-src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mbv-src-list li { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--mut); background: #f5f7fd; border-radius: 10px; padding: 6px 8px; transition: opacity .35s, transform .35s; }
.mbv-src-list li.mbv-sent { opacity: .35; transform: translateX(4px); }

/* ไอคอนไฟล์ */
.mbv-ic { flex: none; width: 22px; height: 26px; border-radius: 4px; position: relative; background: #e9eefb; }
.mbv-ic::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; opacity: .55; border-radius: 2px; }
.mbv-bill { background: #e7edff; color: var(--blue); }
.mbv-slip { background: #e3f6ec; color: var(--green); }
.mbv-xlsx { background: #1f9d63; color: #fff; }
.mbv-xlsx::after { opacity: .9; }

/* ท่อส่ง */
.mbv-pipe { position: relative; height: 120px; display: grid; place-items: center; }
.mbv-track { position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, #b9c8f3 0 8px, transparent 8px 14px); border-radius: 2px; animation: mbv-dash 1s linear infinite; }
.mbv-cloud { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(40, 60, 140, .16); z-index: 1; }
.mbv-chip { position: absolute; left: 0; top: 50%; margin-top: -13px; z-index: 2; opacity: 0; }
.mbv-chip .mbv-ic { display: block; box-shadow: 0 6px 14px rgba(40, 60, 140, .25); }
.mbv-flow.mbv-fly .mbv-chip { animation: mbv-fly .9s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes mbv-fly {
	0% { opacity: 0; transform: translateX(0) scale(.7); }
	15% { opacity: 1; transform: translateX(8px) scale(1); }
	50% { opacity: 1; transform: translateX(34px) translateY(-26px) scale(1.05); }
	85% { opacity: 1; transform: translateX(64px) scale(1); }
	100% { opacity: 0; transform: translateX(76px) scale(.7); }
}
@keyframes mbv-dash { to { background-position: 14px 0; } }

/* Drive */
.mbv-drive { padding: 12px 14px; }
.mbv-drive-h { display: flex; align-items: center; gap: 8px; font-family: var(--f-d); font-size: 14px; }
.mbv-gd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff7e0; }
.mbv-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--soft); margin: 8px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mbv-path b { color: var(--ink); }
.mbv-path span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mbv-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 152px; align-content: start; }
.mbv-files li { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--ink); padding: 5px 6px; border-radius: 8px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s, background-color .8s; }
.mbv-files li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbv-files li em { font-style: normal; font-weight: 800; color: var(--green); font-size: 13px; opacity: 0; transition: opacity .3s .25s; }
.mbv-files li.mbv-in-drive { opacity: 1; transform: none; background: #f0fbf5; }
.mbv-files li.mbv-in-drive em { opacity: 1; }
.mbv-files li.mbv-settled { background: transparent; }
.mbv-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--soft); font-weight: 600; }
.mbv-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d5def5; border-top-color: var(--blue); animation: mbv-rot .8s linear infinite; flex: none; }
.mbv-st-ok { display: none; color: var(--green); }
.mbv-flow.mbv-done .mbv-st-run { display: none; }
.mbv-flow.mbv-done .mbv-st-ok { display: inline; }
.mbv-flow.mbv-done .mbv-spin { animation: none; border-color: var(--green); 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 9px no-repeat; }
@keyframes mbv-rot { to { transform: rotate(360deg); } }

/* ชั้นที่ 2: สำรองนอกเซิร์ฟเวอร์ */
.mbv-bk { display: flex; align-items: center; gap: 12px; margin-top: 14px; background: #18213f; color: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 30px rgba(24, 33, 63, .22); }
.mbv-bk-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: #9fe3bf; }
.mbv-bk-t { flex: 1; min-width: 0; }
.mbv-bk-t b { display: block; font-family: var(--f-d); font-size: 13.5px; }
.mbv-bk-t small { display: block; font-size: 11.5px; color: #c9d1ea; }
.mbv-bk-bar { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .14); margin-top: 7px; overflow: hidden; }
.mbv-bk-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #3fc983, #9fe3bf); }
.mbv-bk-st { flex: none; font-size: 12px; font-weight: 700; color: #c9d1ea; }
.mbv-bk-ok { display: none; color: #9fe3bf; }
.mbv-flow-wrap.mbv-bk-go .mbv-bk-bar i { width: 100%; transition: width 1.6s ease; }
.mbv-flow-wrap.mbv-bk-done .mbv-bk-run { display: none; }
.mbv-flow-wrap.mbv-bk-done .mbv-bk-ok { display: inline; }
.mbv .mbv-more2 { margin-left: 14px; }

/* หยุดเมื่อไม่อยู่บนจอ */
.mbv-flow.mbv-paused .mbv-track, .mbv-flow.mbv-paused .mbv-spin { animation-play-state: paused; }

@media (max-width: 960px) {
	.mbv-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mbv-copy { order: -1; }
	.mbv { padding-block: 48px; }
}
@media (max-width: 620px) {
	.mbv-stage { padding: 12px; border-radius: 20px; }
	.mbv-flow { grid-template-columns: minmax(0, 1fr); }
	.mbv-src-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
	.mbv-src-list li { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 11px; text-align: center; }
	.mbv-src-list li.mbv-sent { transform: translateY(3px); }
	.mbv-pipe { height: 74px; }
	.mbv-track { left: 50%; right: auto; top: 4px; bottom: 4px; width: 3px; height: auto; transform: translateX(-50%); background: repeating-linear-gradient(180deg, #b9c8f3 0 8px, transparent 8px 14px); animation-name: mbv-dash-v; }
	.mbv-chip { left: 50%; top: 0; margin: 0 0 0 -11px; }
	.mbv-flow.mbv-fly .mbv-chip { animation-name: mbv-fly-v; }
	.mbv-files { min-height: 0; }
	.mbv-bk { gap: 10px; padding: 10px 12px; }
	.mbv-bk-ic { width: 32px; height: 32px; }
}
@keyframes mbv-fly-v {
	0% { opacity: 0; transform: translateY(0) scale(.7); }
	20% { opacity: 1; transform: translateY(6px) scale(1); }
	80% { opacity: 1; transform: translateY(42px) scale(1); }
	100% { opacity: 0; transform: translateY(52px) scale(.7); }
}
@keyframes mbv-dash-v { to { background-position: 0 14px; } }
@media (prefers-reduced-motion: reduce) {
	.mbv-track, .mbv-spin { animation: none; }
	.mbv-chip { display: none; }
	.mbv-files li, .mbv-src-list li { transition: none; }
	.mbv-flow-wrap .mbv-bk-bar i { width: 100%; transition: none; }
}