/**
 * Footer Revision 2027 — brand-led three-tier footer.
 * Mobile first: brand -> support CTA -> navigation -> company meta -> subfooter.
 */
.alo-footer {
	margin-top: 48px;
	background: var(--alo-color-footer);
	border-top: 1px solid var(--alo-color-footer-border);
}

.alo-footer__main {
	padding: 34px 0 24px;
}

.alo-footer__brand {
	min-width: 0;
}

.alo-footer .alo-header__logo {
	display: inline-flex;
	align-items: center;
	margin: 0 0 16px;
}

/**
 * LOGO CHÂN TRANG — hết phần bù (13/09/2026, file logo chính thức).
 *
 * File mới cắt sát vùng mực (xem khối giải thích dài trong header.css),
 * nên margin âm phải bỏ. Chiều cao mới được chọn để GIỮ NGUYÊN hộp cũ,
 * tức chân trang không đổi một pixel nào:
 *
 *   trước:  ảnh 52 · mực 52×0,615 = 32 · hộp 52−6−14 = 32
 *   nay:    ảnh 32 · mực 32 (đệm 0)    · hộp 32          → y hệt
 *   desktop trước: ảnh 58 · mực 35,7 · hộp 58−7−15 = 36
 *   desktop nay:   ảnh 36 · mực 36   · hộp 36            → y hệt
 *
 * Bề rộng theo file chính thức 600×184: 104px và 117px.
 *
 * Nếu KHÔNG sửa, file mới vẽ 58px mực trong hộp 36px: 22px mực tràn ra
 * ngoài hộp và khe xuống dòng mô tả tụt từ 16px còn 6,5px (đo trên trang
 * thật trước khi sửa).
 */
img.alo-footer__logo-img {
	width: auto !important;
	height: 32px !important;
	margin-block: 0;
}

.alo-footer__brand-copy {
	max-width: 360px;
	margin: 0 0 18px;
	color: var(--alo-color-text-muted);
	font-size: 14px;
	line-height: 1.65;
}

.alo-footer__contacts {
	display: grid;
	gap: 9px;
}

.alo-footer__contact {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--alo-color-footer-border);
	border-radius: 13px;
	background: color-mix(in srgb, var(--alo-color-surface) 58%, transparent);
	color: var(--alo-color-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.alo-footer__contact:hover {
	border-color: color-mix(in srgb, var(--alo-color-primary) 32%, var(--alo-color-footer-border));
	background: var(--alo-color-surface);
	color: var(--alo-color-primary);
}

/**
 * Ô THÔNG TIN TĨNH — địa chỉ và giờ làm việc (13/09/2026).
 *
 * Chúng dùng chung hình thức với ô số điện thoại cho đều hàng, nhưng KHÔNG
 * phải nút: bỏ hover, bỏ vùng chạm 44px, chữ nhạt hơn một bậc để mắt phân
 * biệt được cái nào bấm được. Thẻ `<p>` nên trình đọc màn hình cũng không
 * thông báo nhầm là liên kết.
 */
.alo-footer__contact--static {
	min-height: 0;
	margin: 0;
	color: var(--alo-color-text-secondary);
	font-weight: 600;
	cursor: default;
}

.alo-footer__contact--static .alo-footer__contact-icon {
	background: var(--alo-color-border-subtle);
	color: var(--alo-color-text-secondary);
}

/**
 * NÚT ZALO lấy lại đúng màu Zalo (12/09/2026) — trước đây nó mang xanh ALÔ,
 * tức là thêm một mảng xanh lá ở chân trang cho một thứ vốn không phải màu
 * của ALÔ. #0068FF trên nền #F7F8F5 = 4,45:1.
 */
.alo-footer__contact[href*="zalo.me"] .alo-footer__contact-icon {
	background: var(--alo-color-zalo-soft);
	color: var(--alo-color-zalo);
}

.alo-footer__contact[href*="zalo.me"]:hover {
	border-color: color-mix(in srgb, var(--alo-color-zalo) 32%, var(--alo-color-footer-border));
	color: var(--alo-color-zalo);
}

.alo-footer__contact-icon,
.alo-footer__help-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-primary);
}

.alo-footer__contact-icon svg,
.alo-footer__help-icon svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

.alo-footer__nav {
	min-width: 0;
	border-top: 1px solid var(--alo-color-footer-border);
}

/**
 * DẢI ĐIỀU HƯỚNG — dưới 1024px là một danh sách dọc các hàng gập; từ 1024px
 * là lưới 5 cột (4 cột danh mục + 1 cột "Khu vực & dịch vụ" / "Về ALÔ" xếp
 * chồng). Xem media query ở cuối file.
 */
.alo-footer__links-grid,
.alo-footer__links-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Các hàng gập nối liền nhau, vạch ngăn của mỗi nhóm đã đủ tách bạch. */
	gap: 0;
}

.alo-footer__summary h2,
.alo-footer__summary h3,
.alo-footer__catalog-title,
.alo-footer__help h2 {
	margin: 0;
	color: var(--alo-color-text);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0;
}

.alo-footer__nav ul {
	display: grid;
	gap: 2px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.alo-footer__nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--alo-color-text-muted);
	font-size: 13px;
	line-height: 1.4;
	transition: color .18s ease, transform .18s ease;
}

.alo-footer__nav a:hover {
	color: var(--alo-color-primary);
	transform: translateX(2px);
}

.alo-footer__help {
	grid-area: help;
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--alo-color-footer-border);
	border-radius: 18px;
	background: color-mix(in srgb, var(--alo-color-surface) 52%, transparent);
}

.alo-footer__help-icon {
	margin-bottom: 12px;
}

.alo-footer__help p {
	margin: 0 0 14px;
	color: var(--alo-color-text-muted);
	font-size: 13px;
	line-height: 1.55;
}

.alo-footer__help-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 12px;
	background: var(--alo-color-primary);
	color: var(--alo-color-surface);
	font-size: 13px;
	font-weight: 800;
	transition: background-color .18s ease;
}

.alo-footer__help-button:hover {
	background: var(--alo-color-primary-2);
}

.alo-footer__help-button svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
}

.alo-footer__meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--alo-color-footer-border);
	color: var(--alo-color-text-muted);
	font-size: 12px;
	line-height: 1.55;
}

.alo-footer__company-meta {
	display: grid;
	gap: 5px;
}

.alo-footer__company-meta strong,
.alo-footer__hours strong {
	color: var(--alo-color-text);
	font-size: 12px;
}

.alo-footer__hours {
	display: grid;
	gap: 2px;
}

.alo-footer__subfooter {
	background: var(--alo-color-footer-sub);
	border-top: 1px solid var(--alo-color-footer-border);
}

.alo-footer__subfooter-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding-block: 15px;
	color: var(--alo-color-text-muted);
	font-size: 12px;
	line-height: 1.55;
}

.alo-footer__subfooter p {
	margin: 0;
}

/**
 * HUY HIỆU TIN CẬY — mobile: nằm dưới dòng copyright, canh trái theo lề
 * container; từ 768px: dồn về mép phải cùng hàng với copyright (xem media
 * query bên dưới).
 *
 * Chiều cao chuẩn hoá 24px cho cả hai ảnh (DMCA gốc 121×24, Bộ Công Thương
 * gốc 600×227) — `width: auto` giữ đúng tỉ lệ từng ảnh. Thuộc tính
 * width/height trong markup vẫn là kích thước THẬT để trình duyệt giữ chỗ,
 * không giật layout khi ảnh DMCA (tải từ domain của họ) về chậm.
 */
.alo-footer__badges {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.alo-footer__badge a {
	display: inline-flex;
	align-items: center;
}

.alo-footer__badge img {
	width: auto;
	height: 24px;
}

/* Ảnh Bộ Công Thương nhiều khoảng trắng nền hơn nên để cao hơn một chút thì
   hai huy hiệu mới cân thị giác. */
.alo-footer__badge--gov img {
	height: 30px;
}

@media (min-width: 768px) {
	.alo-footer__main {
		padding: 42px 0 30px;
	}


	.alo-footer__contact {
		width: max-content;
		max-width: 100%;
	}

	.alo-footer__meta {
		grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
		align-items: start;
		gap: 20px;
		margin-top: 28px;
		padding-top: 24px;
	}

	.alo-footer__hours {
		justify-self: end;
		text-align: right;
	}

	.alo-footer__subfooter-inner {
		/* Chữ pháp lý trái, huy hiệu phải. `auto` để cụm huy hiệu chỉ chiếm
		   đúng bề rộng của nó, không kéo dãn hàng. */
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px;
		min-height: 60px;
		padding-block: 10px;
	}

	.alo-footer__badges {
		justify-content: flex-end;
	}
}

@media (min-width: 1024px) {
	.alo-footer__main {
		padding: 48px 0 34px;
	}

	.alo-footer__nav {
		padding-top: 0;
		border-top: 0;
	}

	.alo-footer__nav a {
		min-height: 34px;
	}


	img.alo-footer__logo-img {
		height: 36px !important;
	}
}


/* --- Chân trang gọn lại (09/09/2026) ---
   Bỏ thẻ CTA "Chưa biết chọn loại nào?" (242px, trùng vai với cụm liên hệ ở
   cột thương hiệu) và gộp dải thông tin pháp lý (91px) vào subfooter. Nội
   dung pháp lý KHÔNG bị bỏ, chỉ đổi chỗ trình bày. */
.alo-footer__legal { display: grid; gap: 4px; min-width: 0; }
.alo-footer__copy { margin: 0; }
.alo-footer__company {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin: 0;
	font-size: 11.5px;
	line-height: 1.5;
}
.alo-footer__company strong { font-weight: 700; color: var(--alo-color-text); }
.alo-footer__company span { position: relative; }
/* Dấu chấm phân cách giữa các mẩu thông tin — chỉ ở màn đủ rộng để không
   tạo dấu lạc đầu dòng khi các mẩu xuống hàng trên điện thoại. */
@media (min-width: 768px) {
	.alo-footer__company span + span::before {
		content: "·";
		margin-right: 10px;
		color: var(--alo-color-border);
	}
}


/* =====================================================================
   CHÂN TRANG 12/09/2026 — nhóm gập được, mạng xã hội, dải danh mục SEO.
   ===================================================================== */

/**
 * NHÓM GẬP ĐƯỢC — mỗi cột điều hướng là một <details>.
 *
 * Server luôn render `open`, JS gỡ `open` khi màn < 1024px
 * (assets/js/footer-nav.js). Từ 1024px trở lên <details> luôn mở và
 * <summary> chỉ còn là cái tiêu đề: bỏ mũi tên, bỏ con trỏ tay, và JS chặn
 * luôn thao tác bấm để không ai đóng nhầm một cột đang phải mở.
 */
.alo-footer__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

/* Safari/Chrome cũ vẽ tam giác riêng, không theo `list-style`. */
.alo-footer__summary::-webkit-details-marker { display: none; }

.alo-footer__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 3px;
	border-right: 2px solid var(--alo-color-text-muted);
	border-bottom: 2px solid var(--alo-color-text-muted);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.alo-footer__details[open] > .alo-footer__summary::after {
	transform: rotate(-135deg);
}

.alo-footer__summary:focus-visible {
	outline: 2px solid var(--alo-color-primary);
	outline-offset: 2px;
	border-radius: 8px;
}

/**
 * MẠNG XÃ HỘI — ô vuông 44px đúng ngưỡng vùng chạm tối thiểu. Logo mang màu
 * chữ (fill="currentColor") nên không cần biến thể màu cho từng thương hiệu;
 * chỉ khi rê chuột mới chuyển sang xanh thương hiệu ALÔ.
 */
.alo-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 18px;
	padding: 0;
	list-style: none;
}

/**
 * MÀU THẬT CỦA TỪNG NỀN TẢNG (12/09/2026).
 *
 * Người ta nhận ra Facebook / YouTube / TikTok BẰNG MÀU trước khi nhận ra
 * bằng hình. Trước đây cả ba cùng một màu xám nên mất hết lợi thế đó.
 *
 * Mỗi logo chỉ 18×18px nên ba màu rực này không át chân trang. Tương phản
 * trên nền #F7F8F5: Facebook 3,97 · YouTube 3,75 · TikTok đen 19,70 —
 * đều qua ngưỡng đồ hoạ 3:1. KHÔNG dùng cyan #25F4EE của TikTok: chỉ 1,29.
 */
.alo-footer__social {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--alo-color-footer-border);
	border-radius: 13px;
	background: color-mix(in srgb, var(--alo-color-surface) 58%, transparent);
	color: var(--alo-color-text-secondary);
	transition: border-color .18s ease, background-color .18s ease;
}

.alo-footer__social--facebook { color: var(--alo-color-facebook); }
.alo-footer__social--youtube { color: var(--alo-color-youtube); }
.alo-footer__social--tiktok { color: var(--alo-color-tiktok); }

.alo-footer__social:hover,
.alo-footer__social:focus-visible {
	border-color: color-mix(in srgb, currentColor 38%, var(--alo-color-footer-border));
	background: var(--alo-color-surface);
}

.alo-footer__social-icon {
	width: 18px;
	height: 18px;
}

/**
 * DẢI DANH MỤC — dải riêng giữa cụm thương hiệu và subfooter.
 *
 * Đây là 13 archive `/danh-muc-san-pham/…` + 8 trang `/thuong-hieu/…` đang
 * index thật, thay cho ba link filter `noindex` cũ. Trên điện thoại cả bốn
 * nhóm gập lại nên dải này chỉ cao bằng bốn hàng tiêu đề.
 */
.alo-footer__catalog {
	padding: 0 0 18px;
}

.alo-footer__catalog-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid var(--alo-color-footer-border);
}

.alo-footer__catalog-all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--alo-color-primary);
	font-size: 13px;
	font-weight: 700;
}

.alo-footer__catalog-all:hover {
	text-decoration: underline;
}

.alo-footer__catalog-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Vạch ngăn giữa các nhóm gập — cùng ngôn ngữ với cột điều hướng ở trên. */
.alo-footer__nav--cat,
.alo-footer__nav--brands {
	padding-top: 0;
	border-top: 1px solid var(--alo-color-footer-border);
}

/**
 * SỐ LƯỢNG SẢN PHẨM — chỉ ở danh mục, KHÔNG ở thương hiệu (8 mục, thêm số
 * chỉ làm rối). Số nằm ngay sau tên chứ không dồn sang mép phải: ở cột hẹp
 * trên desktop, dồn phải sẽ tách số khỏi tên nó thuộc về.
 *
 * Con số đọc bằng mắt là đủ hiểu, nhưng trình đọc màn hình nghe "Nước Tinh
 * Khiết 17" thì mơ hồ — nên trong markup có thêm chữ "sản phẩm" ẩn.
 */
.alo-footer__nav--cat a {
	justify-content: flex-start;
	gap: 8px;
}

.alo-footer__count {
	flex: 0 0 auto;
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--alo-color-border-subtle);
	color: var(--alo-color-text-secondary);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.alo-footer__nav a:hover .alo-footer__count {
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-primary);
}

@media (min-width: 1024px) {
	/**
	 * DẢI THƯƠNG HIỆU thành một THANH NGANG: logo + câu mô tả bên trái, cụm
	 * liên hệ + mạng xã hội bên phải. Trước đây nó là một cột cao 376px nên
	 * hai cột link bên cạnh (168px và 96px) để hở 209px.
	 */
	.alo-footer__brand {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		flex-wrap: wrap;
	}

	.alo-footer__brand-intro {
		min-width: 0;
	}

	.alo-footer__brand-copy {
		margin-bottom: 0;
	}

	/**
	 * Cụm bên phải phải CO ĐƯỢC. Nếu để nó giữ bề rộng tự nhiên (956px với
	 * ba ô thông tin + mạng xã hội) thì nó vượt chỗ trống 828px và bị đẩy
	 * nguyên khối xuống dòng dưới — thanh thương hiệu cao vọt lên 200px.
	 * Cho co lại thì chỉ cụm mạng xã hội xuống dòng, thanh giữ ~112px.
	 */
	.alo-footer__brand-aside {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px 16px;
		flex-wrap: wrap;
		flex: 1 1 360px;
		min-width: 0;
	}

	/* Ba nút liên hệ rộng tổng cộng 619px, cụm mạng xã hội 148px — vừa đúng
	   phần bên phải khi câu mô tả bị giới hạn 360px. Vẫn để `wrap` phòng khi
	   số điện thoại hoặc email dài ra. */
	.alo-footer__contacts {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.alo-footer__socials {
		margin: 0;
	}

	.alo-footer__links {
		padding-top: 26px;
		border-top: 1px solid var(--alo-color-footer-border);
	}

	.alo-footer__catalog {
		padding: 0 0 30px;
	}

	.alo-footer__catalog-head {
		padding-top: 0;
		margin-bottom: 14px;
		border-top: 0;
	}

	/**
	 * LƯỚI 5 CỘT — 4 cột danh mục (gộp trong .alo-footer__catalog) + 1 cột
	 * chứa "Khu vực & dịch vụ" và "Về ALÔ" xếp chồng.
	 *
	 * Khe 24px là con số đo được chứ không chọn bừa: container rộng 1220px,
	 * 5 cột với khe 24px cho mỗi cột 224px, trong khi mục dài nhất của danh
	 * mục ("Phụ kiện uống nước" kèm huy hiệu số) cần 171px. Nếu để 6 cột thì
	 * mỗi cột chỉ còn 158px và mục đó sẽ xuống dòng.
	 *
	 * Lưới con của 4 cột danh mục dùng ĐÚNG khe 24px nên bốn cột đó thẳng
	 * hàng với cột thứ năm, không lệch nhịp.
	 */
	.alo-footer__links-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		/* 1024–1199px: container hẹp hơn nên khe phải nhỏ lại, nếu không cột
		   chỉ còn 176px — sát nút so với 171px của mục dài nhất. Khe 16px
		   cho 182px, đủ dư. Từ 1200px mới nới lại 24px (xem dưới). */
		gap: 16px;
		align-items: start;
	}

	/* Phải chỉ rõ `grid-row: 1` cho CẢ HAI. Thứ tự DOM là cột-link trước,
	   danh mục sau; nếu chỉ đặt cột thì sau khi xếp cột-link vào ô (1,5) con
	   trỏ lưới đã đi hết hàng 1, và khối danh mục bị đẩy xuống hàng 2 — đúng
	   lỗi đo được lần đầu: dải link cao 630px thay vì 318px. */
	/**
	 * CĂN HÀNG GIỮA BỐN CỘT DANH MỤC VÀ CỘT THỨ NĂM (13/09/2026).
	 *
	 * Trước đó cột thứ năm bắt đầu ở HÀNG 1, cùng hàng với tiêu đề "Danh mục
	 * sản phẩm", trong khi bốn cột danh mục có thêm một cấp tiêu đề nữa bên
	 * dưới. Kết quả: tiêu đề cột năm nằm lệch 13px so với "Danh mục sản
	 * phẩm", và các dòng link lệch 23px so với link danh mục — nhìn như bị
	 * chen ngang.
	 *
	 * Nay hàng 1 CHỈ có dải tiêu đề "Danh mục sản phẩm" (trải cột 1–4), và
	 * cả năm cột nội dung cùng bắt đầu ở hàng 2. Tiêu đề nhóm (h3) và tiêu
	 * đề cột năm (h2) dùng chung một cỡ chữ nên chúng thẳng hàng tuyệt đối.
	 */
	.alo-footer__catalog-head {
		grid-column: 1 / 5;
		grid-row: 1;
	}

	.alo-footer__catalog {
		grid-column: 1 / 5;
		grid-row: 2;
		min-width: 0;
	}

	.alo-footer__links-col {
		grid-column: 5;
		grid-row: 2;
		gap: 24px;
		align-content: start;
	}

	/* Vùng chạm 44px chỉ cần trên cảm ứng. Ở desktop nó kéo cao dải tiêu đề
	   và đẩy lệch đường chân chữ của "Danh mục sản phẩm". */
	.alo-footer__catalog-all {
		min-height: 0;
	}

	.alo-footer__catalog-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		align-items: start;
	}

	.alo-footer__nav--cat,
	.alo-footer__nav--brands {
		border-top: 0;
	}

	/* Mở cố định: <summary> trở lại vai trò tiêu đề thuần tuý. */
	.alo-footer__summary {
		min-height: 0;
		margin-bottom: 8px;
		cursor: default;
	}

	.alo-footer__summary::after {
		display: none;
	}

	/* Tám thương hiệu xếp hai cột cho cân chiều cao với ba nhóm bên cạnh. */
	.alo-footer__brand-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
	}
}

/* Từ 1200px container đã đủ rộng để nới khe lưới chân trang về 24px. Khe của
   lưới con PHẢI bằng khe lưới cha thì bốn cột danh mục mới thẳng hàng với
   cột thứ năm. */
@media (min-width: 1200px) {
	.alo-footer__links-grid,
	.alo-footer__catalog-grid {
		gap: 24px;
	}
}