/* Chuyển động JAMO: hằng ngày nhẹ và nhanh (dưới 0,35 giây); vài khoảnh khắc nổi bật (mở app, tạo bill xong, đơn đã xong).
   Máy đã bật "giảm chuyển động" thì tắt hết ở cuối file. */
:root {
  --m-out: cubic-bezier(.22, 1, .36, 1);
  --m-spring: cubic-bezier(.34, 1.56, .64, 1);
  --m-gold: #E2B26E;
  --m-gold-2: #C98A4B;
}

/* ---------- Vào trang: nội dung trượt lên lần lượt ---------- */
@keyframes m-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
.m-enter .hero-in { animation: m-fade .28s var(--m-out) both; }
.m-enter .m-st { animation: m-up .36s var(--m-out) backwards; animation-delay: calc(var(--i, 0) * 38ms + 40ms); }

/* ---------- Thanh dưới: tab đang chọn nảy nhẹ, chấm vàng đồng bên dưới ---------- */
.tab { position: relative; transition: color .2s, transform .12s; }
.tab::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--m-gold-2); transform: scale(0); transition: transform .3s var(--m-spring); }
.tab.on::after { transform: scale(1); }
@keyframes m-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22) translateY(-2px); } 100% { transform: scale(1); } }
.m-enter .tab.on svg.i { animation: m-pop .42s var(--m-spring); }

/* ---------- Bấm: lún nhẹ ---------- */
.btn, .chip, .ord-head, .ct, .seg button, .ac-dl { transition: transform .12s var(--m-out), background .15s, box-shadow .15s, color .15s; }
.btn:active, .ac-dl:active { transform: scale(.97); }
.chip:active, .seg button:active, .ct:active { transform: scale(.95); }
.tab:active { transform: scale(.92); }
.ord-head:active { transform: scale(.985); }
.fab { transition: transform .25s var(--m-spring), background .15s, box-shadow .2s; }
.fabw:active .fab { transform: scale(.9) rotate(90deg); }
.chip.on { animation: m-chip .3s var(--m-spring); }
@keyframes m-chip { from { transform: scale(.94); } to { transform: none; } }

/* ---------- Thông báo: trượt lên mềm, việc xong có dấu ✓ vẽ ra ---------- */
.toast { transition: opacity .2s, transform .38s var(--m-spring) !important; }
.toast .m-ok { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--m-gold); color: #3B1F0B; }
.toast .m-ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.toast.show .m-ok { animation: m-pop .45s var(--m-spring) .05s backwards; }
.toast.show .m-ok svg { animation: m-draw .35s var(--m-out) .18s forwards; }
@keyframes m-draw { to { stroke-dashoffset: 0; } }

/* Ô nhập sai: rung nhẹ */
@keyframes m-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.m-shake { animation: m-shake .36s ease; }

/* ---------- Các bước của đơn: bước đang làm sáng lên nhẹ ---------- */
@keyframes m-glow { 0%, 100% { box-shadow: 0 0 0 4px var(--peach); } 50% { box-shadow: 0 0 0 8px rgba(251, 235, 216, .55); } }
.steps .now i { animation: m-glow 2.2s ease-in-out infinite; }

/* Vòng tiến độ của khách: máy giặt quay khi đang giặt */
.m-drum { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; color: var(--cream); }
.m-drum svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.m-drum .m-spin { transform-origin: 12px 13px; animation: m-spin 1.6s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ---------- Màn mở app ---------- */
.m-splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 38%, #7A4719 0%, #4A2810 55%, #2E180A 100%); transition: opacity .42s ease, visibility .42s; }
.m-splash.out { opacity: 0; visibility: hidden; }
.m-splash-in { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: transform .42s var(--m-out); }
.m-splash.out .m-splash-in { transform: scale(1.06); }
.m-splash img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(237, 196, 145, .25); animation: m-logo .7s var(--m-spring) both; }
.m-splash b { color: #FFE9D2; font-size: 26px; font-weight: 900; letter-spacing: .32em; padding-left: .32em; animation: m-up .5s var(--m-out) .22s both; }
.m-splash small { color: var(--m-gold); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; animation: m-fade .5s ease .4s both; }
.m-splash .m-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 178, 110, .28), transparent 65%); animation: m-breathe 1.6s ease-in-out infinite; }
.m-splash.quick img, .m-splash.quick b, .m-splash.quick small { animation-duration: .01s; animation-delay: 0s; }
@keyframes m-logo { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes m-breathe { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---------- Tạo bill xong: dấu ✓ vàng đồng lan ra ---------- */
.m-done { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; padding-bottom: calc(var(--tabs-h) + 70px + env(safe-area-inset-bottom)); pointer-events: none; }
.m-done-in { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 34px 22px; border-radius: 28px; background: rgba(46, 24, 10, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(46, 24, 10, .4); animation: m-card 1.2s var(--m-out) both; }
.m-done .m-ring { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.m-done .m-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--m-gold); animation: m-wave 1s var(--m-out) .15s both; }
.m-done .m-ring span { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #F0C98F, var(--m-gold-2)); animation: m-logo .5s var(--m-spring) both; }
.m-done .m-ring svg { width: 42px; height: 42px; fill: none; stroke: #3B1F0B; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: m-draw .4s var(--m-out) .3s forwards; }
.m-done b { color: #FFE9D2; font-size: 17px; font-weight: 900; animation: m-up .4s var(--m-out) .25s both; }
@keyframes m-wave { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes m-card { 0% { opacity: 0; transform: scale(.92); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.97); } }

/* ---------- Đơn đã xong (trang khách): hạt vàng đồng rơi ---------- */
.m-confetti { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.m-confetti i { position: absolute; top: -16px; width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: m-fall var(--d, 2.2s) cubic-bezier(.2, .6, .4, 1) var(--w, 0s) forwards; }
@keyframes m-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0), 105vh) rotate(var(--r, 540deg)); }
}

/* Máy đã bật giảm chuyển động: tắt hết */
@media (prefers-reduced-motion: reduce) {
  .m-enter .hero-in, .m-enter .m-st, .m-enter .tab.on svg.i, .chip.on, .steps .now i, .m-drum .m-spin, .toast.show .m-ok { animation: none !important; }
  .toast .m-ok svg { stroke-dashoffset: 0; animation: none !important; }
  .m-splash, .m-done, .m-confetti { display: none !important; }
  .btn:active, .ac-dl:active, .chip:active, .seg button:active, .ct:active, .tab:active, .ord-head:active, .fabw:active .fab { transform: none; }
}

/* ===================== Đợt 2 ===================== */

/* Chuyển trang có hướng: mở sâu vào thì trượt từ phải, quay lại thì trượt từ trái (đầu trang và nội dung, không đụng thanh dưới). */
@keyframes m-in-r { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes m-in-l { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.m-fwd .hero-in, .m-fwd main.wrap { animation: m-in-r .32s var(--m-out) backwards; }
.m-back .hero-in, .m-back main.wrap { animation: m-in-l .32s var(--m-out) backwards; }
.m-fwd main.wrap { animation-delay: .03s; }

/* Ô Nhận/Giặt/Sấy... vừa đổi số: nháy vàng đồng */
@keyframes m-flash { 0% { box-shadow: 0 0 0 0 rgba(226, 178, 110, .9); background: rgba(226, 178, 110, .55); } 100% { box-shadow: 0 0 0 10px rgba(226, 178, 110, 0); } }
.seg button.m-flash { animation: m-flash .9s var(--m-out); }

/* Ảnh đồ: mờ sang rõ; bấm ảnh phóng to */
img.m-wait { opacity: .35; filter: blur(10px); }
img.m-got { transition: opacity .45s ease, filter .55s var(--m-out); }
.phs .ph img { cursor: zoom-in; }
.m-zoom { position: fixed; inset: 0; z-index: 95; background: rgba(30, 16, 7, 0); transition: background .3s ease; cursor: zoom-out; }
.m-zoom.on { background: rgba(30, 16, 7, .88); }
.m-zoom img { position: fixed; object-fit: cover; border-radius: 16px; transition: all .34s var(--m-out); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }

/* Quét QR: vệt sáng chạy lên xuống; quét trúng có viền vàng ôm lại */
.scan::before { content: ""; position: absolute; left: 16%; right: 16%; top: 16%; z-index: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--m-gold), #FFF3E0, var(--m-gold), transparent); box-shadow: 0 0 18px 4px rgba(226, 178, 110, .55); animation: m-scanline 2.2s ease-in-out infinite alternate; }
@keyframes m-scanline { from { top: 16%; } to { top: calc(84% - 3px); } }
.scan::after { transition: border-color .2s, inset .35s var(--m-spring); }
.scan.m-hit::after { inset: 10%; border-color: var(--m-gold); box-shadow: 0 0 0 9999px rgba(46, 24, 10, .35), 0 0 30px rgba(226, 178, 110, .8); }
.scan.m-hit::before { display: none; }

/* Đơn mới từ khách đặt online: trượt vào, sáng viền vàng */
@keyframes m-new { 0% { opacity: 0; transform: translateX(-24px) scale(.98); } 40% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes m-newglow { 0%, 100% { box-shadow: inset 0 0 0 2px var(--m-gold), var(--shadow); } 50% { box-shadow: inset 0 0 0 2px var(--m-gold), 0 0 0 6px rgba(226, 178, 110, .3), var(--shadow); } }
.ord.m-new { animation: m-new .6s var(--m-out) backwards, m-newglow 1.4s ease-in-out .6s 3; }

/* Đầu trang nâu: vệt sáng lướt qua rất nhẹ */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 236, 210, .16) 45%, rgba(255, 255, 255, .22) 50%, rgba(255, 236, 210, .16) 55%, transparent 70%) no-repeat; background-size: 250% 100%; background-position: 150% 0; animation: m-sheen 8s ease-in-out 1.2s infinite; }
@keyframes m-sheen { 0% { background-position: 150% 0; } 22%, 100% { background-position: -60% 0; } }

/* Đơn trễ: viền đỏ sáng lên tắt xuống chậm */
@keyframes m-late { 0%, 100% { box-shadow: inset 0 0 0 2px var(--red), var(--shadow); } 50% { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 5px rgba(153, 27, 27, .14), var(--shadow); } }
.ord.late:not(.m-new) { animation: m-late 2.6s ease-in-out infinite; }

/* In phiếu: tờ giấy chạy ra khỏi máy in trong thông báo */
.toast .m-print { flex: none; position: relative; width: 26px; height: 26px; color: var(--m-gold); }
.toast .m-print svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast .m-print i { position: absolute; left: 8px; top: 12px; width: 10px; height: 0; border-radius: 1px; background: #FFF3E0; animation: m-paper 1s ease-in-out infinite; }
@keyframes m-paper { 0% { height: 0; } 70%, 100% { height: 12px; } }

/* Biểu đồ doanh thu tự vẽ */
@keyframes m-grow { from { transform: scaleX(0); } to { transform: none; } }
.m-bars .qbar u { transform-origin: left center; animation: m-grow .7s var(--m-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }

/* Vuốt thẻ đơn sang phải để làm bước tiếp theo */
.ord.m-swipe-ok { touch-action: pan-y; }
.ord.m-drag { position: relative; transition: none; background: linear-gradient(90deg, rgba(226, 178, 110, .42) var(--p, 0%), var(--card) var(--p, 0%)); transform: translateX(var(--dx, 0)); }
.ord.m-drag::before { content: ""; position: absolute; z-index: 2; left: -48px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFE9D2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .25s var(--m-spring); }
.ord.m-drag.m-ready::before { opacity: 1; transform: none; }
.ord.m-release { transition: transform .3s var(--m-spring), background .3s; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .m-fwd .hero-in, .m-fwd main.wrap, .m-back .hero-in, .m-back main.wrap, .seg button.m-flash, .ord.m-new, .ord.late, .m-bars .qbar u, .toast .m-print i { animation: none !important; }
  .hero::before, .scan::before { display: none; }
  img.m-wait { opacity: 1; filter: none; }
}