/**
 * Global header (mục B/C/G chỉ thị Phase 5) — 1 markup dùng chung
 * desktop/mobile (header.php), ẩn/hiện theo viewport ở đây. Mobile-first:
 * mặc định là layout mobile (gọn, hamburger+logo+search icon+cart), desktop
 * mở rộng từ 1024px (mục Z breakpoint chính).
 */
/* Sticky header (Homepage Polish 2027) — header toàn cục dính khi cuộn.
   `position: sticky` giữ header trong luồng nên KHÔNG nhảy layout và không
   cần bù padding cho body. z-index dưới overlay/drawer (110+) để search,
   mobile menu và cart drawer vẫn phủ lên header. Admin bar của WordPress
   là `position: fixed` ở desktop nên phải bù `top` bằng đúng chiều cao
   admin bar, nếu không header sẽ chui xuống dưới nó. */
/**
 * Chiều cao header dính — NGUỒN DUY NHẤT cho mọi nơi cần né header:
 * offset sticky của sidebar, `scroll-margin-top` của heading… Trước đây mỗi
 * chỗ tự đoán một con số (TOC dùng 20px, heading dùng 96px) trong khi header
 * thật cao 129px, nên cả hai đều chui xuống dưới header.
 *
 * Giá trị đo lại 05/09/2026 bằng `getBoundingClientRect()` trên trang thật:
 * 139px desktop (hàng logo 68px + hàng tìm kiếm 70px + viền, theo Approved
 * Header mockup) và 102px từ 1023px trở xuống (hàng trên 64px + hàng vị trí
 * 38px). Con số mobile cũ (118px) là ước lượng cũ, đo thật ở 320/390/430/768
 * đều ra 102px.
 */
:root { --alo-header-sticky-height: 139px; }
@media (max-width: 1023px) {
	:root { --alo-header-sticky-height: 102px; }
}
/* Admin bar desktop là `position: fixed` nên cộng thêm chiều cao của nó. */
.admin-bar { --alo-header-sticky-height: 171px; }
@media (max-width: 782px) {
	/* Admin bar mobile cuộn đi cùng trang nên không cộng. */
	.admin-bar { --alo-header-sticky-height: 102px; }
}

.alo-header {
	position: sticky;
	top: 0;
	z-index: var(--alo-z-header);
	background: var(--alo-color-surface);
	border-bottom: 1px solid var(--alo-color-border);
	transition: box-shadow .18s ease;
}

.admin-bar .alo-header { top: 32px; }
@media (max-width: 782px) {
	/* Admin bar mobile cao 46px và KHÔNG fixed — nó cuộn đi, nên header
	   dính về đúng mép trên. */
	.admin-bar .alo-header { top: 0; }
}

/* Bóng nhẹ chỉ khi đã cuộn — tránh viền nặng khi đang ở đầu trang. */
.alo-header.is-stuck { box-shadow: 0 6px 20px rgba(20, 45, 28, .06); }

/* Người dùng bật "giảm chuyển động" thì bỏ transition. */
@media (prefers-reduced-motion: reduce) {
	.alo-header { transition: none; }
}

.alo-header__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

/**
 * P0 chỉl thị Phase 7 — logo bị crop/oversize: `.alo-header__logo-img` (1
 * class, specificity 0,1,0) thua `.woocommerce img, .woocommerce-page img`
 * (class+element, specificity 0,1,1) — rule đó áp `height:auto` (không giới
 * hạn), logo hiện ở kích thước GỐC 762×400px thay vì 36/44px. `!important`
 * để đảm bảo thắng bất kể selector nào khác từ WooCommerce/plugin core sau
 * này còn add thêm — đã verify qua browser thật (768px: logo tràn ra ngoài
 * viewport, chữ "SUỐI" và domain trong ảnh bị cắt mất, xác nhận bằng
 * getBoundingClientRect trước/sau fix).
 */
img.alo-header__logo-img { height: 36px !important; width: auto !important; }

/**
 * ==================================================================
 * LOGO — HẾT PHẦN BÙ KHOẢNG TRỐNG (13/09/2026, file chính thức)
 * ==================================================================
 *
 * Ba bản logo trước đều có viền trong suốt dày và không đối xứng, nên
 * CSS phải dùng margin âm hút lại — mỗi lần Owner xuất file mới là một
 * lần phải quét alpha rồi tính lại hai con số. Bản CHÍNH THỨC hôm nay
 * đã cắt sát vùng mực, nên toàn bộ phần bù đó được GỠ BỎ.
 *
 * Quét kênh alpha file đang chạy (logo-alonuocsuoi-2027-final-3.png,
 * canvas 600×184, tỉ lệ 3,261):
 *
 *   đệm trên 1 · dưới 1 · trái 1 · phải 0   → mực chiếm 98,9% ảnh
 *
 * Hệ quả: `height` giờ CHÍNH LÀ chiều cao mực, và hộp layout bằng đúng
 * ảnh. Không còn con số bù nào để tính sai nữa. Ba bản final-1/2/3 Owner
 * xuất ra đều giữ đúng tính chất này, nên CSS bên dưới không còn hằng số
 * nào phụ thuộc file — chỉ còn CHIỀU CAO.
 *
 * Bố cục file (toạ độ canvas, đo theo alpha):
 *
 *   dấu hiệu          x 0..139    y 1..182    tâm y 91,5
 *   chữ               x 186..599  y 1..173
 *     dòng 1 "ALÔ"        cap y 22  · chân y 91   → cao 70 (38,0% ảnh)
 *     dòng 2 "NƯỚC SUỐI"  cap y 121 · chân y 173  → cao 53 (28,8% ảnh)
 *
 * VÌ SAO KHÔNG BÙ LỆCH QUANG HỌC như bản trước: tâm dấu hiệu (91,5)
 * trùng đúng tâm canvas (91,5), còn dải cap→chân của CHỮ có tâm ở 97,5,
 * thấp hơn tâm hộp 6/184 = 3,3%. Ở cỡ 52px chỉ là 1,6px — dưới ngưỡng
 * nhìn ra, mà kéo lên thì DẤU HIỆU lại lệch đúng chừng ấy, đổi một cái
 * lệch không thấy lấy một cái lệch khác. Bản logo cũ buộc phải bù vì cái
 * đồng hồ đẩy lệch tới 16%, gấp 5 lần mức này.
 *
 * NẾU ĐỔI FILE LOGO: file mới mà có viền trong suốt trở lại thì logo sẽ
 * tự co nhỏ trong hộp. Cách chữa KHÔNG phải thêm margin âm — hãy yêu cầu
 * xuất lại bản cắt sát mực.
 *
 * 40px ở đây là cỡ cho màn hẹp khi Owner BỎ logo mobile riêng (rộng
 * 131px); trùng đúng 40px của khối `--dual` bên dưới nên hai đường đi cho
 * cùng một kết quả.
 */
img.alo-header__logo-img {
	height: 40px !important;
	margin-block: 0;
}

/**
 * DẤU HIỆU THAY CHO CHỮ DÀI TRÊN MÀN HẸP (13/09/2026).
 *
 * Chỉ chạy khi Owner có đặt logo mobile riêng (lớp `--dual` do
 * `alo_get_logo_html()` gắn). Ngưỡng 1023px trùng đúng `media` của
 * `<source>` nên CSS và việc chọn file luôn nói cùng một chuyện.
 *
 * Chiều cao 40px: bản dấu hiệu gần vuông nên cỡ lớn hơn sẽ chiếm gần trọn
 * hàng 64px của header, mà nó chỉ tốn ~40px bề ngang thay vì 127px như bản
 * chữ dài — đó là lý do dùng nó cho màn hẹp.
 *
 * Quét alpha file favicon: đệm 0/512 ở cả bốn cạnh — không có gì để bù,
 * giống hệt file logo chữ. Margin đã là 0 ở quy tắc nền nên ở đây chỉ cần
 * khai lại CHIỀU CAO.
 */
@media (max-width: 1023px) {
	.alo-header__logo--dual img.alo-header__logo-img {
		height: 40px !important;
	}
}

/* `<picture>` là inline mặc định, sẽ tạo khoảng trắng dòng dưới ảnh và làm
   lệch căn giữa dọc trong hàng header. */
.alo-header__logo picture { display: block; line-height: 0; }

.alo-header__hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--alo-color-text);
	cursor: pointer;
}

.alo-header__row--top .alo-header__logo { flex-shrink: 0; margin-right: auto; }

.alo-header__nav { display: none; }
/* `> ul` (không phải `ul` trơn): từ khi có Mega Menu, bên trong nav còn các
   <ul> lồng của panel (.alo-mega__columns/__list/__sublist). Rule cũ
   `.alo-header__nav ul` (0,1,1) áp `display:flex; gap:24px` cho MỌI ul lồng,
   đè cả `display:grid` của lưới cột mega (0,1,0) — đo thật: columns ra
   `flex` thay vì `grid`. Giới hạn về đúng danh sách nav cấp 1. */
.alo-header__nav > ul { display: flex; gap: 24px; }
.alo-header__nav > ul > li > a { font-weight: 600; }
.alo-header__nav > ul > li > a:hover { color: var(--alo-color-primary); }

.alo-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	color: var(--alo-color-text);
}
.alo-header__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	/**
	 * Badge số lượng dùng MÀU ƯU ĐÃI, không dùng màu thương hiệu.
	 *
	 * Owner chốt 08/09/2026: nút ALÔ giữ nguyên độ nổi (khách quen bấm vào đó
	 * để gọi), nên badge giỏ phải khác màu mới tách ra được — nếu cùng xanh,
	 * con số nhỏ này chìm hẳn vào khối xanh của nút ALÔ ngay cạnh. Đây cũng
	 * là màu duy nhất trong hệ dành cho "con số cần chú ý".
	 */
	background: var(--alo-color-sale);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.alo-header__cart-count:empty,
.alo-header__cart-count[data-cart-count="0"] { display: none; }

/* Nhãn "Giỏ" chỉ thuộc pill desktop — mobile header giữ nguyên nút icon 44×44. */
.alo-header__cart-label { display: none; }

/**
 * ==================================================================
 * HEADER MÀN HẸP — HAI DÒNG TRONG MỘT HÀNG (13/09/2026)
 * ==================================================================
 *
 * Owner chốt bố cục:
 *   dòng 1   logo · "Giao trong ngày tại TP.HCM" · giỏ hàng
 *   dòng 2   nút menu · ô tìm kiếm dài (không còn là icon kính lúp)
 *
 * Mục đích chính là **logo nằm sát mép trái**. Trước đó nút menu đứng
 * trước logo nên logo bị đẩy vào giữa, trông như một nút nữa chứ không
 * như dấu hiệu của trang chủ.
 *
 * VÌ SAO KHÔNG TÁCH THÀNH HAI PHẦN TỬ HÀNG: desktop cần logo, nav, ô tìm,
 * khu vực, giỏ nằm CÙNG một lưới; CSS không di chuyển phần tử qua lại giữa
 * hai thẻ cha. Nên giữ đúng một hàng và cho nó xuống dòng bằng `flex-wrap`,
 * thứ tự do `order` quyết định. `::after` là mẹo ngắt dòng chuẩn của
 * flexbox — một ô rộng 100%, cao 0, đặt giữa order 3 và 5.
 *
 * Hàng khu vực riêng (`--mobile-location`) đã bỏ: nó render lần thứ hai
 * cùng một template-part chỉ để hiện ở màn hẹp.
 */
@media (max-width: 1023px) {
	.alo-header__row--top {
		flex-wrap: wrap;
		row-gap: 8px;
		padding-bottom: 12px;
	}

	.alo-header__row--top .alo-header__logo { order: 1; margin-right: 0; }

	.alo-header__row--top .alo-location {
		order: 2;
		display: inline-flex;
		min-width: 0;
		/* Đẩy giỏ hàng về sát mép phải mà không cần phần tử đệm. */
		margin-right: auto;
	}

	.alo-header__cart { order: 3; }

	.alo-header__row--top::after {
		content: "";
		order: 4;
		flex-basis: 100%;
		height: 0;
	}

	.alo-header__hamburger { order: 5; margin-left: -10px; }

	/**
	 * `flex: 1 1 0` — KHÔNG phải `1 1 auto` (sửa 13/09/2026).
	 *
	 * Với `auto`, kích thước cơ sở của ô tìm kiếm lấy theo NỘI DUNG. Đo
	 * thật ở 390px: ô trống thì nội dung rộng 252px (vừa chỗ trống 302px,
	 * nằm cùng dòng với nút menu), nhưng vừa gõ một chữ là nút xoá hiện ra
	 * và nội dung vọt lên 314px — vượt chỗ trống nên cả ô rơi xuống dòng
	 * thứ ba, header cao từ 127px lên 179px. Đúng lỗi Owner chụp lại.
	 *
	 * `flex-basis: 0` thì ô không tự đo theo nội dung nữa, chỉ giãn ra lấp
	 * chỗ còn lại. Gõ bao nhiêu chữ cũng không đổi dòng.
	 *
	 * `min-width: 0` vẫn cần: mặc định `min-width: auto` của flex item sẽ
	 * chặn co lại dưới kích thước nội dung tối thiểu.
	 */
	.alo-header__search {
		order: 6;
		display: block;
		flex: 1 1 0;
		min-width: 0;
	}

	/* Form và ô nhập bên trong cũng phải co được, nếu không chúng chặn ô
	   cha lại đúng ở ngưỡng nội dung. */
	.alo-header__search .alo-search-form,
	.alo-header__search .alo-search-form__input {
		min-width: 0;
	}
}

/* Từ 1024px trở lên hàng là LƯỚI 5 cột — ô ngắt dòng sẽ thành ô thứ 6. */
@media (min-width: 1024px) {
	.alo-header__row--top::after { display: none; }
}

/**
 * DESKTOP — Approved Header (`mockups/alo-header-refine-mockup.html`).
 *
 * Giữ ĐÚNG 2 hàng như hướng đã duyệt, không gộp một hàng. Đo trước khi sửa ở
 * 1440px cho thấy vấn đề thật không phải chiều cao mà là hai khoảng trống:
 *
 * - hàng 1: logo cao 44px, rộng 84px nằm lẻ bên trái; nav + giỏ dồn hết sang
 *   phải; ở giữa không có gì;
 * - hàng 2: ô tìm kiếm bị kẹp `max-width: 520px`, còn "Giao hàng tại TP.HCM"
 *   trôi sang mép phải ⇒ **khe trống 531px** giữa hai cụm.
 *
 * Mockup xử lý bằng grid có cột co giãn: hàng 1 `auto 1fr auto`, hàng 2
 * `minmax(420px, 650px) 1fr auto` với dòng gợi ý lấp khoảng giữa và cụm giao
 * hàng thành utility có tile icon. Các con số min-height/gap/kích thước lấy
 * đúng từ mockup; màu và bo góc dùng token của theme (mockup có #f2f4f2 và
 * radius 14/10 — không đưa giá trị mới vào hệ thống chỉ vì mockup).
 */
@media (min-width: 1024px) {
	.alo-header__hamburger { display: none; }

	/**
	 * CỠ LOGO DESKTOP — 42px (13/09/2026, theo bộ ảnh "Đặt vào thực tế"
	 * Owner duyệt).
	 *
	 * Trước hết vì sao KHÔNG giữ được con số cũ: đây là lockup HAI DÒNG
	 * kèm dấu hiệu, không còn là chữ một dòng, và file mới cắt sát mực.
	 * Cùng một `height`, nó vẽ ra nhiều mực hơn 63% (đệm 0% so với 38,5%)
	 * — giữ 60px thì mực nhảy từ 36,9 lên 60px, logo chật cứng trong hàng.
	 *
	 * Đo các cụm trong hàng ở 1440px (container 1220, hàng cao 72):
	 *   nav 22,5 (chữ 15px) · khu vực 34 · giỏ 42 · ô tìm kiếm 48
	 *
	 * ĐỐI CHIẾU BỐN CỠ (cap height so với chữ nav 10,8px):
	 *
	 *   60px  cap ALÔ 22,8 = 2,11×   NƯỚC SUỐI 17,3   rộng 196
	 *   52px  cap ALÔ 19,8 = 1,83×   NƯỚC SUỐI 15,0   rộng 170
	 *   42px  cap ALÔ 16,0 = 1,48×   NƯỚC SUỐI 12,1   rộng 137  ← chốt
	 *   38px  cap ALÔ 14,5 = 1,34×   NƯỚC SUỐI 10,9   rộng 124
	 *
	 * 42px là điểm dừng, KHÔNG phải 38px: ở 38 thì "NƯỚC SUỐI" rơi xuống
	 * 10,9px — bằng đúng chữ nav — nên dòng phụ mất vai trò và cả lockup
	 * đọc như một dòng chú thích. Ở 42 nó còn 12,1px, vẫn nhỉnh hơn nav.
	 *
	 * ĐÁNH ĐỔI ĐÃ BIẾT VÀ CHẤP NHẬN: logo thôi là phần tử cao nhất hàng
	 * (42 < 48 của ô tìm kiếm). Đó chính là thứ tạo cảm giác "gọn" trong
	 * ảnh Owner gửi — thương hiệu đọc như một dấu hiệu ngăn nắp chứ không
	 * như vật thể lớn nhất màn hình. Nếu sau này muốn logo dẫn trở lại thì
	 * quay về 52px, đừng vượt quá.
	 *
	 * Khoảng thở: mực 42 trong hàng 72 chừa 15px mỗi đầu — rộng hơn cả
	 * 12px của ô tìm kiếm.
	 *
	 * Bề rộng 42 × 600/184 = 137px (trước 196px), trả lại 59px cho ô tìm
	 * kiếm — cột `1fr` duy nhất trong grid nên toàn bộ phần dư về đó.
	 *
	 * HÀNG KHÔNG ĐỔI CHIỀU CAO: hộp logo 42 < `min-height: 72` nên
	 * `--alo-header-sticky-height: 139px` vẫn đúng, không phải tính lại.
	 *
	 * KHE logo→nav vẫn giữ 40px của nhịp khe theo nhóm bên dưới. Logo nhỏ
	 * đi làm khe đó thành 0,95× chiều cao logo (trước là 0,67×); nếu sau
	 * này thấy rời rạc thì hạ khe xuống ~32px, ĐỪNG bù bằng cách phóng
	 * logo to lại.
	 */
	img.alo-header__logo-img {
		height: 42px !important;
		margin-block: 0;
	}



	/**
	 * MỘT HÀNG: logo · nav · ô tìm kiếm (co giãn) · khu vực · giỏ.
	 *
	 * Chỉ ô tìm kiếm được co giãn (`minmax(0, 1fr)`); bốn cột còn lại `auto`
	 * nên không cột nào tự ý nở ra tạo khoảng trống — đó chính là lỗi của bản
	 * hai hàng cũ, phải chèn một dòng chữ gợi ý vào để lấp.
	 */
	/**
	 * NHỊP KHE THEO NHÓM (13/09/2026) — không còn đều 28px.
	 *
	 * Năm cụm với năm khe bằng nhau thì mắt đọc thành một danh sách phẳng,
	 * không thành "thương hiệu · điều hướng · công cụ". Khe không đều là
	 * cách rẻ nhất để khai báo nhóm:
	 *
	 *   logo  —40—  nav  —40—  [ô tìm kiếm]  —28—  khu vực —14— giỏ
	 *          tách hẳn              co giãn        một cụm công cụ
	 *
	 * Dùng `column-gap: 0` + margin trái từng ô thay vì `gap` chung, vì
	 * `gap` chỉ nhận MỘT giá trị cho mọi khe.
	 */
	.alo-header__row--top {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr) auto auto;
		align-items: center;
		column-gap: 0;
		min-height: 72px;
		padding: 0;
	}

	.alo-header__row--top .alo-header__nav { margin-left: 40px; }
	.alo-header__row--top .alo-header__search { margin-left: 40px; }
	.alo-header__row--top .alo-location { margin-left: 28px; }
	.alo-header__row--top .alo-header__cart { margin-left: 14px; }
	.alo-header__row--top .alo-header__logo { margin-right: 0; }

	.alo-header__nav { display: block; }
	.alo-header__nav > ul { gap: 22px; }
	.alo-header__nav > ul > li > a { font-size: 15px; font-weight: 650; }

	/* Giỏ hàng: pill có viền (icon + nhãn + badge) thay cho nút icon trơn. */
	.alo-header__cart {
		width: auto;
		height: auto;
		min-height: 42px;
		gap: 8px;
		padding: 0 12px;
		border: 1px solid var(--alo-color-border);
		border-radius: var(--alo-radius-md);
		background: var(--alo-color-surface);
		font-size: 14px;
		font-weight: 650;
	}
	.alo-header__cart:hover,
	.alo-header__cart:focus-visible {
		border-color: var(--alo-color-primary);
		color: var(--alo-color-primary);
	}
	.alo-header__cart-label { display: inline; }
	/* Badge nằm TRONG pill nên bỏ neo tuyệt đối; badge bottom-nav vẫn dùng
	   rule gốc ở trên (mobile-nav.css chỉ chỉnh top/right của bản tuyệt đối). */
	.alo-header__cart .alo-header__cart-count {
		position: static;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		font-size: 11px;
		font-weight: 800;
		line-height: 20px;
	}

	.alo-header__search { display: block; min-width: 0; }
	.alo-header__search .alo-search-form { max-width: none; }

	/* Bật lại cụm khu vực — rule ẩn ở trên áp cho mọi bề rộng vì mobile có
	   hàng khu vực riêng bên dưới. */
	.alo-header__row--top .alo-location { display: inline-flex; }

	/* Ô tìm kiếm là utility chính của hàng này: cao hơn, nền soft, nút "Tìm"
	   rõ ràng. Chỉ áp trong header — overlay tìm kiếm mobile không đổi. */
	/**
	 * Padding phải 108 → 74px (13/09/2026).
	 *
	 * Nút "Tìm" rộng 61px, đặt cách mép phải 5px → nó chiếm 66px. Để 108px
	 * tức là chừa thừa 47px không ai dùng, mà chỗ gõ chữ thì chỉ còn 158px
	 * trong khi placeholder cần 224px — placeholder bị cắt giữa chữ, Owner
	 * phát hiện qua ảnh chụp màn hình. 74px cho nút 8px thở và trả lại 34px
	 * cho chữ.
	 */
	.alo-header__search .alo-search-form__input {
		min-height: 48px;
		padding: 0 74px 0 46px;
		border-radius: var(--alo-radius-md);
		background: var(--alo-color-bg);
		font-size: 15px;
	}
	.alo-header__search .alo-search-form__icon { left: 16px; }
	.alo-header__search .alo-search-form__submit {
		top: 5px;
		right: 5px;
		bottom: 5px;
		padding: 0 18px;
		font-size: 14px;
	}

	/* "Giao hàng tại TP.HCM" trình bày như utility có chủ đích: tile icon +
	   nhãn, không còn là dòng chữ nhỏ trôi lẻ ở mép phải. */
	/**
	 * MỨC 3A — chỉ giữ tên khu vực trên desktop.
	 *
	 * Đo được: cả cụm chiếm 238px, gần bằng 3/4 ô tìm kiếm, cho một dòng
	 * chữ tĩnh không bấm được. Rút còn biểu tượng + "TP.HCM" (~90px) thì ô
	 * tìm kiếm từ 312 lên ~446px.
	 *
	 * Câu đầy đủ KHÔNG mất: nó vẫn ở hero ngay bên dưới, ở chân trang, và
	 * ở header điện thoại (rule này chỉ áp từ 1024px).
	 */
	.alo-header__row--top .alo-location__lead { display: none; }

	.alo-header__row--top .alo-location {
		justify-self: end;
		gap: 10px;
		font-size: 14px;
	}
	.alo-header__row--top .alo-location__icon {
		box-sizing: border-box;
		width: 34px;
		height: 34px;
		padding: 7px;
		border-radius: var(--alo-radius-md);
		background: var(--alo-color-primary-soft);
	}
}

/* 1024–1279px: một hàng vẫn đủ chỗ nếu bóp lại — nav sát hơn, khoảng cách
   nhỏ hơn, nhãn khu vực rút còn tên khu vực. Đo ở 1024: logo 110 + nav ~240
   + khu vực ~120 + giỏ ~110 + 4 khe 14 = 636, chừa ~356px cho ô tìm kiếm. */
@media (min-width: 1024px) and (max-width: 1279px) {
	/* Nhịp khe của Mức 2 bóp lại cho container hẹp (977px ở 1024). Đo:
	   logo 215 + nav ~238 + khu vực ~92 + giỏ 46 + khe 74 = 665, chừa
	   ~312px cho ô tìm kiếm — trước đây chỉ còn 201px. */
	.alo-header__row--top .alo-header__nav { margin-left: 24px; }
	.alo-header__row--top .alo-header__search { margin-left: 24px; }
	.alo-header__row--top .alo-location { margin-left: 16px; }
	.alo-header__row--top .alo-header__cart { margin-left: 10px; }
	.alo-header__nav > ul { gap: 16px; }
	.alo-header__nav > ul > li > a { font-size: 14px; }
	.alo-header__row--top .alo-location { font-size: 13px; }
	.alo-header__row--top .alo-location__icon { width: 30px; height: 30px; padding: 6px; }
	.alo-header__cart-label { display: none; }
}

/**
 * Khoá scroll khi có overlay mở (menu/quick-action/search/cart drawer) — mục AA.
 *
 * PHẢI đặt trên `html`, KHÔNG phải `body`. `overflow: hidden` biến phần tử
 * thành scroll container; nếu đặt lên `body` thì `body` trở thành tổ tiên cuộn
 * gần nhất của header, mà vị trí cuộn lại nằm trên `html` ⇒ header
 * `position: sticky` mất mốc và NHẢY ngược đúng bằng `scrollY` ngay khi mở
 * overlay (đo thật: `hdrTop 0 → -1200` ở scrollY = 1200).
 *
 * Đặt trên `html` — vốn đã là scroll container của viewport — thì sticky giữ
 * nguyên mốc, không nhảy, và vẫn chặn được cuộn (đo thật: `hdrDelta = 0`,
 * `overflowY: hidden`, `scrollY` giữ nguyên).
 *
 * Class `alo-scroll-locked` vẫn được gắn song song lên `body` cho các hook CSS
 * khác (`body.alo-overlay-*-open`) — chỉ khai báo `overflow` là chuyển lên html.
 */
html.alo-scroll-locked { overflow: hidden; }

/**
 * Bù bề rộng thanh cuộn vừa bị ẩn (desktop). Khoá `overflow` trên `html` làm
 * thanh cuộn biến mất ⇒ viewport rộng thêm ~15px và toàn bộ nội dung trong
 * luồng co giãn theo. Đặt padding trên `body` (KHÔNG phải `html`) vì phần tử
 * `position: fixed` như Cart Drawer bỏ qua padding của body — drawer vẫn phủ
 * hết viewport, còn nội dung trong luồng thì giữ nguyên bề rộng.
 *
 * Giá trị do overlay-manager.js đo và ghi vào biến; mobile dùng overlay
 * scrollbar nên luôn là 0px.
 */
body.alo-scroll-locked { padding-right: var(--alo-scrollbar-gutter, 0px); }