/**
 * Mobile menu drawer (mục H/AA chỉ thị Phase 5) — vanilla JS toggle
 * (assets/js/mobile-nav.js), ẩn hoàn toàn desktop (thay bằng nav ngang
 * trong header.css).
 */
.alo-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--alo-z-overlay);
	visibility: hidden;
	pointer-events: none;
	/* Mục AC Phase 6: panel translateX(-100%) khi đóng nằm ngoài viewport bên
	   trái — cần overflow:hidden để không cộng vào document.scrollWidth (xem
	   cart-drawer.css cùng lý do, phát hiện qua test horizontal-scroll). */
	overflow: hidden;
}
.alo-mobile-menu.is-open { visibility: visible; pointer-events: auto; }

.alo-mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background: var(--alo-overlay-backdrop);
	opacity: 0;
	transition: opacity .2s ease;
}
.alo-mobile-menu.is-open .alo-mobile-menu__backdrop { opacity: 1; }

.alo-mobile-menu__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--alo-color-surface);
	transform: translateX(-100%);
	transition: transform .25s ease;
	display: flex;
	flex-direction: column;
	padding: 16px;
	overflow-y: auto;
}
.alo-mobile-menu.is-open .alo-mobile-menu__panel { transform: translateX(0); }

.alo-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.alo-mobile-menu__title { font-weight: 800; font-size: 18px; }
/* Hình dạng do `.alo-icon-btn` lo (UI Consistency 2027). */
.alo-mobile-menu__close { margin-right: -2px; }

.alo-mobile-menu__list li a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-weight: 600;
	border-bottom: 1px solid var(--alo-color-border);
}

.alo-mobile-menu__contact { margin-top: 16px; }
.alo-mobile-menu__contact .alo-btn { width: 100%; gap: 8px; }

@media (min-width: 1024px) {
	.alo-mobile-menu { display: none; }
}

/* ============================================================
   MENU DI ĐỘNG DẠNG APP — Đợt C mockup hợp nhất (09/09/2026)

   Panel trước đây tự cuộn cả khối (`padding:16px; overflow-y:auto`) nên
   phần đầu và chân trôi theo nội dung. Nay chia ba tầng: đầu đứng yên,
   giữa cuộn, chân ghim đáy — giống bề mặt của cart drawer và sheet lọc.

   Các rule `.alo-mobile-menu__list*`, `__group`, `__sublist`, `__contact`
   phía trên KHÔNG còn markup dùng tới (cây accordion đã bỏ) — giữ lại để
   không phá bề mặt nào khác đang mượn class chung.
   ============================================================ */
.alo-mobile-menu__panel {
	width: min(360px, 86vw);
	padding: 0;
	overflow: hidden;
}

.alo-mobile-menu__header {
	flex: 0 0 auto;
	margin-bottom: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--alo-color-border);
}

.alo-mobile-menu__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 14px 16px 20px;
}

.alo-mobile-menu__foot {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--alo-color-border);
	font-size: var(--alo-label);
	color: var(--alo-color-text-muted);
}
.alo-mobile-menu__foot a:hover { color: var(--alo-color-primary); }

/* Khu vực phục vụ — không phải nút bấm được, đúng quyết định "không hứa
   chức năng chưa có" (chưa có dữ liệu khu vực để khách chọn). */
.alo-mobile-menu__loc {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 12px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-primary-soft);
	font-size: var(--alo-label);
	line-height: 1.4;
}
.alo-mobile-menu__loc .alo-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--alo-color-icon); }

/* Ô tìm kiếm ngay trong menu — dùng lại đúng form GET thật của header, nên
   vẫn chạy khi tắt JS và vẫn có gợi ý khi bật. */
.alo-mobile-menu__search { margin-top: 12px; }

.alo-mobile-menu__label {
	margin: 20px 0 9px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--alo-color-text-muted);
}

.alo-mobile-menu__quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.alo-menu-tile {
	display: block;
	padding: 13px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-lg);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
}
.alo-menu-tile:hover { border-color: var(--alo-color-primary); }
/**
 * KHÔNG viền, KHÔNG nền — 10/09/2026. Cùng lý do với ô icon ở hero:
 * `.alo-menu-tile` đã có viền + bo góc + nền, ô icon lặp lại y hệt nên thành
 * thẻ lồng thẻ. Giữ 44px làm khung định vị để chiều cao tile không đổi.
 */
.alo-menu-tile__icon {
	display: grid;
	place-items: center;
	/* 38 → 44px (10/09/2026): ô cũ chỉ chiếm 33% chiều cao tile 114px. */
	width: 44px;
	height: 44px;
	margin-bottom: 9px;
	color: var(--alo-color-icon);
}
.alo-menu-tile__label { display: block; font-size: 14px; font-weight: 600; }
.alo-menu-tile__desc { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--alo-color-text-muted); }

.alo-mobile-menu__links { margin: 0; padding: 0; list-style: none; }
.alo-mobile-menu__links a {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 48px;
	padding: 4px 2px;
	border-bottom: 1px solid var(--alo-color-border);
	font-size: 14px;
	font-weight: 600;
	color: var(--alo-color-text);
}
.alo-mobile-menu__links a:hover { color: var(--alo-color-primary); }
.alo-mobile-menu__links .alo-icon { flex: 0 0 auto; width: 19px; height: 19px; color: var(--alo-color-icon); }
.alo-mobile-menu__links span { flex: 1 1 auto; min-width: 0; }
.alo-mobile-menu__chevron { width: 16px; height: 16px; }

.alo-mobile-menu__brands {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.alo-mobile-menu__brands a {
	display: grid;
	place-items: center;
	min-height: var(--alo-btn-height);
	padding: 0 6px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	font-size: 11px;
	font-weight: 800;
	color: var(--alo-color-text-muted);
	text-align: center;
	line-height: 1.2;
}
.alo-mobile-menu__brands a:hover { border-color: var(--alo-color-primary); color: var(--alo-color-primary); }

.alo-mobile-menu__help {
	margin-top: 20px;
	padding: 14px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-lg);
	background: var(--alo-color-surface-2);
}
.alo-mobile-menu__help b { font-size: 14px; }
.alo-mobile-menu__help p { margin: 4px 0 0; font-size: var(--alo-label); color: var(--alo-color-text-muted); }
.alo-mobile-menu__help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.alo-mobile-menu__help-actions .alo-btn { padding: 0 10px; font-size: var(--alo-small); }
.alo-mobile-menu__help-actions .alo-icon { width: 16px; height: 16px; }

/* Cùng lý do với hàng "Mua nhanh" ở trang chủ. */
.alo-menu-tile__icon .alo-icon { width: 23px; height: 23px; }
/**
 * Menu là NGỮ CẢNH ĐIỀU HƯỚNG nên tile "Mua nhanh" dùng bậc `lg` như hero.
 * Đo ở 390px: tile 147×114 nhưng ô icon chỉ 38px — còn thừa chỗ thật, nới ô
 * lên 44px vẫn không làm tile phình quá mức (xem ghi chú ở wrapper).
 * Link "Mua cho văn phòng" là dòng danh sách, giữ bậc tiện ích để icon không
 * cạnh tranh với chữ.
 */
.alo-menu-tile__icon img.alo-domain-icon { --alo-icon-size: var(--alo-icon-lg); }
.alo-mobile-menu__links img.alo-domain-icon { --alo-icon-size: var(--alo-icon-sm); }