/**
 * Cafe Menu Order — chế độ quầy của trang Menu: cửa PIN, Phiếu quầy, màn "đã gửi".
 *
 * Nền SÁNG, dùng đúng biến màu của menu (--cmo-primary, --cmo-ink…): trang quầy
 * CHÍNH LÀ trang Menu, chủ quán muốn nó nhìn y như vậy.
 *
 * BỐ CỤC PHIẾU: đầu và chân `flex: none`, đúng MỘT vùng giữa `flex: 1;
 * min-height: 0` được co và cuộn. Bản 1.56.0 để khung món là một vùng cuộn
 * riêng nằm chung cột với ô nhập, nên khi ô địa chỉ hiện ra trình duyệt ép khung
 * món về 0px — phiếu ghi "1 món" mà trống trơn (bẫy trong AI_GUIDE).
 *
 * Thứ tự lớp: thanh giỏ 99990 < nền phiếu 99994 < phiếu 99995 < lớp phủ popup
 * món 99998 < popup món 99999 < thông báo nhỏ 100001 < màn "đã gửi" 100200 <
 * cửa PIN 100500. Popup món mở ra từ phiếu thì phiếu đóng trước (cmo-counter.js).
 *
 * Tên lớp bằng tiếng Anh từ 1.58.0 (trước là cmo-quay.css, `.cmo-quay-*`).
 */

/*
 * Nút và ô nhập KHÔNG tự thừa hưởng phông chữ của trang — trình duyệt dùng phông
 * riêng của nó, nên "Gửi bếp" từng hiện ra chữ có chân giữa một trang chữ không
 * chân (thấy khi mở ra nhìn, 23/09/2026).
 */
.cmo-ui [class^="cmo-counter"] button,
.cmo-ui button[class^="cmo-counter"],
.cmo-ui input[class^="cmo-counter"] {
	font-family: inherit;
}

/* ---------- Nút chính: như nút "Thêm vào giỏ" của menu ---------- */

.cmo-ui .cmo-counter-button {
	display: block;
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	background: var(--cmo-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	padding: 0 18px;
	cursor: pointer;
}

/* Không transition cho opacity — cùng lý do với .cmo-submit (#5). */
.cmo-ui .cmo-counter-button:disabled {
	opacity: .55;
	cursor: default;
}

.cmo-ui .cmo-counter-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-counter-input {
	display: block;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #d6d6d6;
	border-radius: 10px;
	background: #fff;
	color: var(--cmo-ink);
	/* 16px: nhỏ hơn là iPhone tự phóng to cả trang khi chạm vào ô. */
	font-size: 16px;
}

.cmo-ui .cmo-counter-input:focus {
	outline: none;
	border-color: var(--cmo-primary);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

/* ---------- Cửa PIN ---------- */

.cmo-ui .cmo-counter-gate {
	position: fixed;
	inset: 0;
	z-index: 100500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: #fff;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-counter-gate[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-gate-box {
	width: 100%;
	max-width: 340px;
	margin: 0;
}

.cmo-ui .cmo-counter-gate-shop {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--cmo-muted);
	text-align: center;
}

.cmo-ui .cmo-counter-gate-title {
	margin: 0 0 24px;
	font-size: 24px;
	line-height: 1.25;
	text-align: center;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-counter-gate .cmo-counter-input {
	height: 54px;
	margin-bottom: 14px;
	font-size: 22px;
	letter-spacing: .2em;
	text-align: center;
}

.cmo-ui .cmo-counter-gate-error {
	min-height: 20px;
	margin: 12px 0 0;
	font-size: 14px;
	color: #c0392b;
	text-align: center;
}

/* ---------- Phiếu quầy ---------- */

.cmo-ui .cmo-counter-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99994;
	background: rgba(0, 0, 0, .5);
}

.cmo-ui .cmo-counter-backdrop[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-ticket {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99995;
	width: 100%;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--cmo-ink);
	font-size: 15px;
	line-height: 1.45;
	box-shadow: 0 0 40px rgba(0, 0, 0, .22);
}

/* display:flex ở trên đè mất thuộc tính hidden — phải viết rõ. */
.cmo-ui .cmo-counter-ticket[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
	border-bottom: 1px solid var(--cmo-line);
}

/* Nút đóng: góc trên bên TRÁI, như popup món (#4). */
.cmo-ui .cmo-counter-close {
	flex: none;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #f2f2f2;
	color: var(--cmo-ink);
	font-size: 15px;
	cursor: pointer;
	padding: 0;
}

.cmo-ui .cmo-counter-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-counter-lock {
	flex: none;
	min-height: 36px;
	border: 1px solid var(--cmo-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-muted);
	font-size: 13px;
	padding: 0 12px;
	cursor: pointer;
}

/* Vùng DUY NHẤT được co và cuộn. */
.cmo-ui .cmo-counter-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 16px 16px;
}

.cmo-ui .cmo-counter-warning {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fff4e5;
	color: #8a4b00;
	font-size: 14px;
}

.cmo-ui .cmo-counter-warning[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-empty {
	margin: 16px 0;
	color: var(--cmo-muted);
	font-size: 14px;
}

/*
 * Một dòng món: ảnh nhỏ bên trái, mọi thứ còn lại bên phải — như thẻ đơn hàng
 * ở trang thanh toán (ảnh 40–48px bo góc 8px, tên nhóm đậm, lựa chọn nhạt).
 */
.cmo-ui .cmo-counter-line {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cmo-line);
}

.cmo-ui .cmo-counter-line-thumb {
	flex: none;
	width: 48px;
	height: 48px;
	max-width: none;
	margin: 2px 0 0;
	border-radius: 8px;
	object-fit: cover;
	background: #f2f2f2;
	display: block;
}

.cmo-ui .cmo-counter-line-main {
	flex: 1 1 auto;
	min-width: 0;
}

.cmo-ui .cmo-counter-line-top {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.cmo-ui .cmo-counter-line-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	overflow-wrap: break-word;
}

.cmo-ui .cmo-counter-line-price {
	flex: none;
	font-weight: 700;
	white-space: nowrap;
}

.cmo-ui .cmo-counter-line-meta {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cmo-muted);
	overflow-wrap: break-word;
}

/* Tên nhóm ("Chọn Size:") đậm và sẫm như trang thanh toán. */
.cmo-ui .cmo-counter-line-meta strong {
	font-weight: 700;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-counter-line-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

.cmo-ui .cmo-counter-qty {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--cmo-line);
	border-radius: 999px;
	padding: 2px;
}

.cmo-ui .cmo-counter-qty button {
	min-width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: #f2f2f2;
	color: var(--cmo-ink);
	font-size: 18px;
	line-height: 1;
	padding: 0 8px;
	cursor: pointer;
}

.cmo-ui .cmo-counter-qty button.is-remove {
	font-size: 13px;
	font-weight: 700;
	color: #c0392b;
}

.cmo-ui .cmo-counter-qty-value {
	min-width: 26px;
	text-align: center;
	font-weight: 700;
}

.cmo-ui .cmo-counter-edit {
	min-height: 36px;
	border: 1px solid var(--cmo-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-primary);
	font-size: 14px;
	font-weight: 700;
	padding: 0 14px;
	cursor: pointer;
}

.cmo-ui .cmo-counter-summary {
	padding: 8px 0 4px;
}

.cmo-ui .cmo-counter-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 14px;
	color: var(--cmo-muted);
}

.cmo-ui .cmo-counter-row-amount {
	flex: none;
	white-space: nowrap;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-counter-row.is-discount .cmo-counter-row-amount {
	color: var(--cmo-primary);
	font-weight: 700;
}

.cmo-ui .cmo-counter-field {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cmo-ui .cmo-counter-field[hidden] {
	display: none;
}

/* Ô địa chỉ rồi tới nhãn "Phí giao": chừa khoảng giữa hai cặp nhãn–ô. */
.cmo-ui .cmo-counter-field .cmo-counter-input + .cmo-counter-label {
	margin-top: 12px;
}

.cmo-ui .cmo-counter-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
}

.cmo-ui .cmo-counter-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--cmo-muted);
}

.cmo-ui .cmo-counter-hint[hidden] {
	display: none;
}

/* Hàng chọn: như chip danh mục của menu. Trang thanh toán dùng đúng kiểu này
   cho "Phương thức nhận món" (cmo-checkout.css). */
.cmo-ui .cmo-counter-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cmo-ui .cmo-counter-choice {
	min-height: 42px;
	border: 1px solid #d6d6d6;
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-ink);
	font-size: 15px;
	padding: 0 16px;
	cursor: pointer;
}

.cmo-ui .cmo-counter-choice[aria-pressed="true"] {
	border-color: var(--cmo-primary);
	background: var(--cmo-primary);
	color: #fff;
	font-weight: 700;
}

/* Chân phiếu: tổng cộng + Gửi bếp, không bao giờ bị co. */
.cmo-ui .cmo-counter-foot {
	flex: none;
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--cmo-line);
	background: #fff;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cmo-ui .cmo-counter-error {
	flex: 1 1 100%;
	margin: 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: #d0342c;
	color: #fff;
	font-size: 14px;
}

.cmo-ui .cmo-counter-error[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-total {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.cmo-ui .cmo-counter-total span {
	font-size: 13px;
	color: var(--cmo-muted);
}

.cmo-ui .cmo-counter-total strong {
	font-size: 20px;
	white-space: nowrap;
}

.cmo-ui .cmo-counter-foot .cmo-counter-button {
	flex: none;
	width: auto;
	min-width: 150px;
}

/* ---------- Màn "Đã gửi bếp" ---------- */

.cmo-ui .cmo-counter-done {
	position: fixed;
	inset: 0;
	z-index: 100200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(0, 0, 0, .5);
}

.cmo-ui .cmo-counter-done[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-done-box {
	width: 100%;
	max-width: 360px;
	padding: 24px 20px 20px;
	border-radius: 16px;
	background: #fff;
	color: var(--cmo-ink);
	text-align: center;
}

.cmo-ui .cmo-counter-done-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--cmo-primary);
}

.cmo-ui .cmo-counter-done-number {
	margin: 6px 0 4px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
}

.cmo-ui .cmo-counter-done-detail {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--cmo-muted);
}

/* ---------- Nút "Cài đặt ứng dụng" của máy nhân viên (cmo-pwa.js) ----------
 *
 * Nút đó nằm góc dưới bên trái — trên màn hình bếp thì vừa, còn trên trang quầy
 * đó đúng là chỗ của thanh Phiếu quầy và của chân phiếu: ở khổ 360px nó che
 * "Tổng cộng" và nửa nút Gửi bếp (thấy khi mở ra nhìn, 23/09/2026; nay
 * tools/check-layout.js phép 7 bắt được). Trang quầy nhấc nó lên trên thanh
 * giỏ, và ẩn hẳn khi đang mở phiếu, popup món hay cửa PIN. Cài xong là nó tự mất.
 */
body .cmo-pwa-pin {
	bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

body.cmo-locked .cmo-pwa-pin {
	display: none;
}

/* ---------- Bàn phím ---------- */

.cmo-ui .cmo-counter-button:focus-visible,
.cmo-ui .cmo-counter-close:focus-visible,
.cmo-ui .cmo-counter-lock:focus-visible,
.cmo-ui .cmo-counter-choice:focus-visible,
.cmo-ui .cmo-counter-edit:focus-visible,
.cmo-ui .cmo-counter-qty button:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* ---------- Chuyển khoản: mã VietQR trong Phiếu quầy (1.62.0) ---------- */

.cmo-ui .cmo-counter-qr {
	margin: 4px 0 14px;
	padding: 14px;
	border: 1px solid var(--cmo-line);
	border-radius: 12px;
	text-align: center;
	background: #fff;
}

.cmo-ui .cmo-counter-qr[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-qr-code {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 8px;
}

.cmo-ui .cmo-counter-qr-info {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cmo-muted);
	overflow-wrap: anywhere;
}

/* ---------- Khách tự đặt (1.62.0, Đợt 2) ---------- */

.cmo-ui .cmo-counter-kiosk-pay {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fff4e5;
	color: #8a4b00;
	font-size: 14px;
	font-weight: 600;
}

.cmo-ui .cmo-counter-kiosk-pay[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-gate-cancel {
	display: block;
	width: 100%;
	margin-top: 10px;
	min-height: 44px;
	border: 1px solid var(--cmo-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-muted);
	font-size: 14px;
	cursor: pointer;
}

.cmo-ui .cmo-counter-gate-cancel[hidden] {
	display: none;
}

/* Nút về chế độ nhân viên: nhỏ, góc trên phải, khách không để ý tới. */
.cmo-ui .cmo-kiosk-staff {
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 99990;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--cmo-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--cmo-muted);
	font-size: 12px;
	cursor: pointer;
}

.cmo-ui .cmo-kiosk-staff[hidden] {
	display: none;
}

/* Màn hẹp: cột menu chạm mép, chừa chỗ cho nút "Nhân viên" để nó không đè ô tìm món. */
@media (max-width: 720px) {
	body.cmo-kiosk .cmo-menu .cmo-topbar {
		padding-right: 84px;
	}
}

/*
 * Máy tự đặt là máy của quán: không mời khách "cài ứng dụng" lên nó. Trừ trang "Tự đặt"
 * riêng (1.66.0) mở trong trình duyệt: đó là lúc nhân viên cần cài nó thành ứng dụng
 * "Tự đặt" — cài xong thì mở từ icon, lời mời tự mất (cmo-pwa.js: installed()).
 */
body.cmo-kiosk:not(.cmo-kiosk-page) .cmo-pwa-pin,
body.cmo-kiosk:not(.cmo-kiosk-page) .cmo-pwa-modal {
	display: none;
}

.cmo-ui .cmo-kiosk-idle {
	position: fixed;
	inset: 0;
	z-index: 100300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(0, 0, 0, .45);
}

.cmo-ui .cmo-kiosk-idle[hidden] {
	display: none;
}

.cmo-ui .cmo-kiosk-idle-box {
	width: 100%;
	max-width: 360px;
	padding: 22px 20px 20px;
	border-radius: 16px;
	background: #fff;
	text-align: center;
}

.cmo-ui .cmo-kiosk-idle-text {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.45;
	color: var(--cmo-ink);
}

/* ---------- Thẻ tích ly (1.64.0) ---------- */

.cmo-ui .cmo-counter-stamps {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cmo-muted);
}

.cmo-ui .cmo-counter-stamps[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-stamps.is-ready {
	padding: 8px 10px;
	border-radius: 10px;
	background: #e8f7ee;
	color: #0b6b34;
	font-weight: 600;
}

.cmo-ui .cmo-counter-gift {
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--cmo-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-primary);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.cmo-ui .cmo-counter-gift.is-chosen {
	border-color: #e7a3a3;
	color: #b42318;
}

/* ---------- Mất mạng (1.63.0) ---------- */

/*
 * Dải báo mất mạng: viên thuốc cam ngay trên thanh Phiếu quầy (đầu màn hình là
 * chỗ của ô tìm món và hàng danh mục đang dính). Lời mời cài ứng dụng cũng nằm
 * đúng chỗ này — có dải báo thì giấu lời mời (cmo-offline-note), kẻo nó đè lên
 * nút "Xem" (check-layout.js phép 7).
 */
.cmo-ui .cmo-offline-bar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	z-index: 99991;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
	padding: 8px 8px 8px 14px;
	border-radius: 14px;
	background: #fff4e5;
	border: 1px solid #f3c98b;
	color: #8a4b00;
	font-size: 14px;
	line-height: 1.35;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.cmo-ui .cmo-offline-bar[hidden] {
	display: none;
}

.cmo-ui .cmo-offline-text {
	flex: 1 1 auto;
	min-width: 0;
}

.cmo-ui .cmo-offline-open {
	flex: none;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid #f3c98b;
	border-radius: 999px;
	background: #fff;
	color: #8a4b00;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

body.cmo-offline-note .cmo-pwa-pin,
body.cmo-locked .cmo-offline-bar {
	display: none;
}

.cmo-ui .cmo-outbox {
	position: fixed;
	inset: 0;
	z-index: 100250;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .5);
}

.cmo-ui .cmo-outbox[hidden] {
	display: none;
}

.cmo-ui .cmo-outbox-box {
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px 16px 18px;
	border-radius: 16px;
	background: #fff;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-outbox-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cmo-ui .cmo-outbox-title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 18px;
}

.cmo-ui .cmo-outbox-help {
	margin: 8px 0 12px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cmo-muted);
}

.cmo-ui .cmo-outbox-sub {
	margin: 18px 0 6px;
	font-size: 15px;
}

.cmo-ui .cmo-outbox-item {
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid var(--cmo-line);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
}

.cmo-ui .cmo-outbox-item.is-error {
	border-color: #e7a3a3;
	background: #fff5f5;
}

.cmo-ui .cmo-outbox-item p {
	margin: 0;
	overflow-wrap: anywhere;
}

.cmo-ui .cmo-outbox-item-head {
	font-weight: 700;
}

.cmo-ui .cmo-outbox-status {
	color: #8a4b00;
}

.cmo-ui .cmo-outbox-item.is-error .cmo-outbox-status {
	color: #b42318;
}

.cmo-ui .cmo-outbox-drop {
	margin-top: 8px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid #e7a3a3;
	border-radius: 999px;
	background: #fff;
	color: #b42318;
	font-size: 14px;
	cursor: pointer;
}

.cmo-ui .cmo-outbox-empty {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--cmo-muted);
}

/* Máy tự đặt mất mạng: che menu, nhưng nút "Nhân viên" vẫn bấm được. */
.cmo-ui .cmo-kiosk-offline {
	position: fixed;
	inset: 0;
	z-index: 100100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(0, 0, 0, .55);
}

.cmo-ui .cmo-kiosk-offline[hidden] {
	display: none;
}

body.cmo-kiosk-offline .cmo-ui .cmo-kiosk-staff,
body.cmo-kiosk-offline .cmo-kiosk-staff {
	z-index: 100150;
}

.cmo-ui .cmo-counter-row.is-note {
	font-size: 13px;
	color: #8a4b00;
}

/* ---------- Khách tự đặt một chạm, vân tay, "Đặt món thành công" (1.65.0) ---------- */

/*
 * Nút "Khách tự đặt" nằm TRONG hàng tìm món (góc trên phải, chủ quán chốt 27/09/2026),
 * không cố định theo cửa sổ: dải "Ngoài giờ mở cửa…" của quầy nằm trên hàng này, nút
 * cố định ở mép trên sẽ đè lên chữ của dải đó.
 */
.cmo-menu .cmo-counter-top {
	display: flex;
	align-items: flex-start;
}

.cmo-menu .cmo-counter-top .cmo-search {
	flex: 1;
	min-width: 0;
}

.cmo-menu .cmo-counter-to-kiosk {
	flex: none;
	height: 40px;
	margin: 0 12px 10px auto;
	padding: 0 14px;
	border: 1.5px solid var(--cmo-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-primary);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.cmo-menu .cmo-counter-to-kiosk[hidden] {
	display: none;
}

.cmo-menu .cmo-counter-to-kiosk:disabled {
	opacity: .55;
	cursor: default;
}

.cmo-menu .cmo-counter-to-kiosk:focus-visible {
	outline: 3px solid #1a73e8;
	outline-offset: 2px;
}

/* Cửa PIN: nút "Mở bằng vân tay" đứng trên ô PIN, chỉ khi máy này đã bật. */
.cmo-ui .cmo-counter-passkey {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	border: 1.5px solid var(--cmo-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-primary);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.cmo-ui .cmo-counter-passkey svg {
	flex: none;
	width: 26px;
	height: 26px;
}

.cmo-ui .cmo-counter-passkey[hidden],
.cmo-ui .cmo-counter-gate-or[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-passkey:disabled {
	opacity: .55;
	cursor: default;
}

.cmo-ui .cmo-counter-gate-or {
	margin: 14px 0 10px;
	font-size: 13px;
	color: var(--cmo-muted);
	text-align: center;
}

.cmo-ui .cmo-passkey-offer-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--cmo-ink);
}

/* Popup của máy tự đặt có thể cao (mã QR): hộp tự cuộn thay vì tràn khỏi màn hình thấp. */
.cmo-ui .cmo-counter-done-box {
	max-height: 100%;
	overflow-y: auto;
}

.cmo-ui .cmo-counter-done.is-success .cmo-counter-done-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--cmo-ink);
}

/* Dấu tích xanh ở đầu dòng "Đặt món thành công". */
.cmo-ui .cmo-counter-done.is-success .cmo-counter-done-title::before {
	content: "\2713";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.cmo-ui .cmo-counter-done-thanks {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--cmo-muted);
}

.cmo-ui .cmo-counter-done-thanks[hidden],
.cmo-ui .cmo-counter-done-pay[hidden],
.cmo-ui .cmo-counter-done-qr[hidden] {
	display: none;
}

.cmo-ui .cmo-counter-done.is-success .cmo-counter-done-number {
	margin-top: 14px;
}

.cmo-ui .cmo-counter-done-pay {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 4px 0 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #f3f6f4;
	font-size: 14px;
	color: var(--cmo-muted);
}

.cmo-ui .cmo-counter-done-amount {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-counter-done-qr {
	margin: 0 0 12px;
}

.cmo-ui .cmo-counter-done-qr-code {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 8px;
	background: #fff;
}

.cmo-ui .cmo-counter-done-qr-info {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cmo-ink);
	overflow-wrap: break-word;
}

/* Cửa PIN của trang "Tự đặt" riêng (1.66.0): một dòng nói rõ việc nhân viên làm một lần. */
.cmo-ui .cmo-counter-gate-hint {
	margin: -12px 0 20px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--cmo-muted);
	text-align: center;
}

/*
 * Dải "Ngoài giờ mở cửa… Quầy vẫn bán bình thường" là lời cho NHÂN VIÊN. Máy quầy vừa
 * chuyển sang khách tự đặt tại chỗ (không tải lại trang) thì dải đó vẫn nằm trong trang
 * — che đi; trang "Tự đặt" riêng thì máy chủ không in nó ra (1.66.0).
 */
body.cmo-kiosk .cmo-menu[data-counter] > .cmo-closed {
	display: none;
}

/* ---------- Thu tiền trước rồi mới làm (1.67.0, #57) ---------- */

/* Dải "Chờ thu tiền" ở máy quầy: cùng chỗ với dải mất mạng (hai cái không hiện cùng lúc). */
.cmo-ui .cmo-awaiting-bar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	z-index: 99991;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	min-height: 48px;
	margin: 0 auto;
	padding: 8px 14px;
	border: 0;
	border-radius: 14px;
	background: #b54708;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	cursor: pointer;
}

.cmo-ui .cmo-awaiting-bar[hidden],
body.cmo-offline .cmo-ui .cmo-awaiting-bar,
body.cmo-locked .cmo-ui .cmo-awaiting-bar {
	display: none;
}

.cmo-ui .cmo-awaiting-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
}

/* Dải đang hiện thì nút "Cài đặt ứng dụng" (cùng góc dưới) lui đi. */
body.cmo-awaiting .cmo-pwa-pin {
	display: none;
}

.cmo-ui .cmo-awaiting-number {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 800;
	color: var(--cmo-ink);
}

.cmo-ui .cmo-awaiting-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.cmo-ui .cmo-awaiting-actions .cmo-counter-button {
	flex: 1 1 100%;
}

.cmo-ui .cmo-awaiting-actions .cmo-outbox-drop {
	margin-top: 0;
}

.cmo-ui .cmo-awaiting-alt {
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--cmo-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cmo-ink);
	font-size: 14px;
	cursor: pointer;
}

.cmo-ui .cmo-awaiting-actions button:disabled {
	opacity: .55;
	cursor: default;
}

/* Máy tự đặt: quầy đã thu tiền — hộp đổi sang "Đã nhận tiền". */
.cmo-ui .cmo-counter-done.is-paid .cmo-counter-done-pay {
	background: #e7f6ec;
}

/* Nhân viên: đơn chờ tiền chuyển khoản qua payOS (1.68.0) — nút phụ "Khách trả tiền mặt".
 * Chỉ đặt display khi KHÔNG có [hidden]: đặt thẳng là đè mất hidden (bẫy "display đè hidden"). */
.cmo-ui .cmo-counter-done-cash:not([hidden]) {
	display: block;
	margin: -8px auto 14px;
}

.cmo-ui .cmo-counter-done-cash:disabled {
	opacity: .55;
	cursor: default;
}