/**
 * Mobile bottom navigation + quick action sheet + search overlay (mục X
 * chỉ thị Phase 5). Ẩn hoàn toàn từ 1024px (thay bằng header desktop).
 */
:root {
	/* 56px control row + 1px top border; safe-area belongs to the nav itself. */
	--alo-mobile-bottom-nav-height: calc(57px + env(safe-area-inset-bottom, 0px));
}

.alo-mobile-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--alo-z-header);
	display: flex;
	background: var(--alo-color-surface);
	border-top: 1px solid var(--alo-color-border);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/**
 * HỞ ĐÁY KHI CUỘN TRÊN MOBILE — 11/09/2026.
 *
 * Triệu chứng: cuộn trên Chrome mobile, thanh URL tự ẩn, thanh nav dưới cùng
 * đứng nguyên và để lộ một dải nội dung trang bên dưới nó.
 *
 * ĐÃ LOẠI TRỪ nguyên nhân trong code trước khi kết luận. Đo ở 390px:
 * `offsetParent` = null (fixed đang chạy đúng), cha trực tiếp là BODY, KHÔNG
 * tổ tiên nào có transform/filter/perspective/backdrop-filter/will-change/
 * contain — tức không ai biến thành containing block; `bottom` resolve đúng
 * 0px và mép dưới nav = 844 = innerHeight. CSS của theme KHÔNG sai.
 *
 * Nguyên nhân thật là hành vi của Chrome Android: `position: fixed` neo vào
 * LAYOUT viewport, mà Chrome cố tình giữ layout viewport ở cỡ "còn thanh URL"
 * để không phải reflow lại trang mỗi lần thanh công cụ trượt. Khi thanh URL
 * ẩn đi, VISUAL viewport cao lên nhưng layout viewport thì không — nên đáy
 * của nav nằm cao hơn đáy màn hình đúng bằng chiều cao thanh URL.
 *
 * Không sửa được bằng cách dời nav (JS theo visualViewport sẽ giật khi cuộn,
 * và `dvh` không áp dụng cho phần tử neo `bottom: 0`). Cách chắc chắn là
 * KÉO DÀI CHÍNH NỀN CỦA NAV xuống dưới: khoảng hở vẫn xuất hiện, nhưng nó
 * được lấp bằng nền trắng của nav nên mắt thấy thanh nav chạm đáy màn hình.
 *
 * Dải này nằm trong cây `position: fixed` nên KHÔNG cộng vào chiều cao cuộn
 * của tài liệu (đã đo lại sau khi thêm: scrollHeight không đổi).
 * 140px phủ dư thanh công cụ của mọi trình duyệt mobile hiện hành.
 */
.alo-mobile-bottom-nav::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 140px;
	background: var(--alo-color-surface);
	pointer-events: none;
}

.alo-mobile-bottom-nav__item {
	flex: 1;
	min-width: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	border: none;
	background: transparent;
	color: var(--alo-color-text-muted);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}
.alo-mobile-bottom-nav__item:active,
.alo-mobile-bottom-nav__item.is-active { color: var(--alo-color-primary); }

.alo-mobile-bottom-nav__item--center { position: relative; top: -10px; }
.alo-mobile-bottom-nav__center-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--alo-color-primary);
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	/* Bóng đổ vẫn nhuộm theo màu xanh BASELINE CŨ (#13733A) đã bị bỏ từ
	   Phase 10 — đổi về sắc của primary hiện hành, cùng cường độ với hai bóng
	   xanh còn lại của site (UI Consistency 2027). */
	box-shadow: 0 4px 10px rgba(22, 131, 75, .3);
}

/**
 * "RING RING" — Owner chốt 08/09/2026.
 *
 * Owner giữ nguyên độ nổi của nút ALÔ (đây là chỗ khách hiểu là bấm để liên
 * hệ ngay) và muốn nó chủ động mời gọi hơn. Làm dạng RUNG NHẸ như chuông
 * điện thoại: một nhịp rung ngắn rồi im khá lâu, chứ không nhấp nháy liên tục
 * — mục tiêu là được để ý, không phải gây phiền.
 *
 * Giới hạn 4 lượt (~24 giây kể từ khi vào trang) rồi dừng hẳn. Khách ở lại
 * lâu sẽ không bị một thứ động đậy mãi ở góc màn hình.
 *
 * Chỉ xoay và nhích, KHÔNG đổi kích thước hay màu — nút không được "nhảy" làm
 * lệch lưới bottom nav.
 */
@keyframes alo-ring {
	0%    { transform: rotate(0); }
	2%    { transform: rotate(-11deg); }
	4%    { transform: rotate(10deg); }
	6%    { transform: rotate(-8deg); }
	8%    { transform: rotate(7deg); }
	10%   { transform: rotate(-5deg); }
	12%   { transform: rotate(3deg); }
	14%   { transform: rotate(0); }
	100%  { transform: rotate(0); }
}

.alo-mobile-bottom-nav__center-badge {
	animation: alo-ring 6s ease-in-out 2.5s 4;
	transform-origin: 50% 55%;
	will-change: transform;
}

/* Đang mở sheet thì thôi rung — khách đã chú ý rồi. */
.alo-quick-actions.is-open ~ * .alo-mobile-bottom-nav__center-badge,
.alo-mobile-bottom-nav__item--center[aria-expanded="true"] .alo-mobile-bottom-nav__center-badge {
	animation: none;
}

/**
 * Tôn trọng thiết lập giảm chuyển động của máy: người bị say chuyển động
 * hoặc rối loạn tiền đình có thể tắt hiệu ứng ở cấp hệ điều hành, và một nút
 * rung ở góc màn hình đúng là loại chuyển động gây khó chịu nhất.
 */
@media (prefers-reduced-motion: reduce) {
	.alo-mobile-bottom-nav__center-badge { animation: none; }
}

.alo-mobile-bottom-nav__cart-wrap { position: relative; }
.alo-mobile-bottom-nav__cart-wrap .alo-header__cart-count { top: -4px; right: -6px; }

/* Đẩy nội dung page (đặc biệt footer) tránh bị bottom-nav che (mục X "không che content"). */
body { padding-bottom: calc(var(--alo-mobile-bottom-nav-height) + 7px); }

/* Quick action sheet. */
.alo-quick-actions {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: var(--alo-mobile-bottom-nav-height);
	z-index: var(--alo-z-overlay);
	visibility: hidden;
	pointer-events: none;
	overflow: hidden; /* mục AC Phase 6 — xem ghi chú cart-drawer.css */
}
.alo-quick-actions.is-open { visibility: visible; pointer-events: auto; }
.alo-quick-actions__backdrop {
	position: absolute; inset: 0;
	background: var(--alo-overlay-backdrop);
	opacity: 0;
	transition: opacity .2s ease;
}
.alo-quick-actions.is-open .alo-quick-actions__backdrop { opacity: 1; }

.alo-quick-actions__sheet {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: var(--alo-color-surface);
	border-radius: 18px 18px 0 0;
	padding: 16px;
	transform: translateY(100%);
	transition: transform .25s ease;
}
.alo-quick-actions.is-open .alo-quick-actions__sheet { transform: translateY(0); }

.alo-quick-actions__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	font-weight: 600;
	border-bottom: 1px solid var(--alo-color-border);
}
.alo-quick-actions__title {
	margin: 0 0 4px;
	padding: 2px 4px 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--alo-color-text);
}

.alo-quick-actions__cancel {
	width: 100%;
	min-height: 44px;
	margin-top: 12px;
	border: none;
	background: var(--alo-color-bg);
	border-radius: var(--alo-radius-sm);
	font-weight: 700;
	cursor: pointer;
}

/**
 * UX review 08/09/2026 — nút "Đóng" đang là phần tử NẶNG NHẤT trong một sheet
 * mà mục đích là mời liên hệ. Hạ xuống dạng chữ: thứ nổi nhất phải là hai lối
 * liên hệ, không phải lối thoát.
 */
.alo-quick-actions__cancel {
	background: transparent;
	border-color: transparent;
	color: var(--alo-color-text-muted);
	font-weight: 600;
}

/* Search overlay. */
.alo-mobile-search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--alo-z-overlay);
	visibility: hidden;
	pointer-events: none;
	overflow: hidden; /* mục AC Phase 6 — xem ghi chú cart-drawer.css */
	background: var(--alo-color-surface);
}
.alo-mobile-search-overlay.is-open { visibility: visible; pointer-events: auto; }
.alo-mobile-search-overlay__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px;
	padding-top: max(16px, env(safe-area-inset-top, 0));
}
.alo-mobile-search-overlay__inner .alo-search-form { flex: 1; }

/* X trên cùng: giữ cho bàn phím/screen reader và thao tác hai tay, nhưng
   KHÔNG còn là điểm chạm chính (quá cao để với bằng ngón cái) — nhẹ hơn về
   thị giác so với hành động đóng ở dưới. */
.alo-mobile-search-overlay__close { margin-left: 2px; }

/* Hành động đóng CHÍNH — nằm ở đáy overlay, trong tầm ngón cái, nổi trên
   mobile bottom nav (overlay z-index 110 > bottom nav). */
.alo-mobile-search-overlay__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--alo-color-surface);
	border-top: 1px solid var(--alo-color-border);
}
.alo-mobile-search-overlay__dismiss {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-sm);
	background: var(--alo-color-bg);
	color: var(--alo-color-text);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.alo-mobile-search-overlay__dismiss:hover { border-color: var(--alo-color-primary); color: var(--alo-color-primary); }
.alo-mobile-search-overlay__dismiss svg { width: 16px; height: 16px; }

@media (min-width: 1024px) {
	.alo-mobile-bottom-nav,
	.alo-quick-actions,
	.alo-mobile-search-overlay {
		display: none;
	}
	body { padding-bottom: 0; }
}

/**
 * Lối vào thẳng ở đầu menu mobile — nhấn hơn nhóm accordion bên dưới, vì đây
 * là hai việc khách hay làm nhất khi mở menu.
 */
.alo-mobile-menu__list--primary {
	margin: 0 0 6px;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--alo-color-border);
	list-style: none;
}
.alo-mobile-menu__list--primary a {
	display: block;
	padding: 12px 4px;
	color: var(--alo-color-text);
	font-weight: 700;
	text-decoration: none;
}