/*
 * Khung trang: thanh trên cùng, header, mega menu, panel menu di động,
 * drawer giỏ hàng, chân trang.
 *
 * Bố cục header bám theo theluxurywatchcompany.com. Số đo lấy trực tiếp
 * từ site đó bằng DevTools chứ không ước lượng:
 *   - thanh trên cùng cao 41px desktop / 40px mobile, nền #051B2B
 *   - logo căn GIỮA trang, không phải căn trái
 *   - link menu 14px, letter-spacing 0.56px, viết hoa, weight 400, cao 44px
 *   - mục menu nhóm phụ tô vàng #AD8C4E
 *   - tổng chiều cao header desktop ~236px
 *   - mobile: hamburger trái, logo giữa, tìm kiếm + giỏ hàng phải
 *
 * Phụ thuộc: tokens.css, base.css, components.css.
 */

/* ---------------------------------------------------------------
 * WRAPPER DÍNH ĐẦU TRANG
 *
 * Thanh trên cùng và header dính cùng nhau như LWC. Chiều cao thật được
 * main.js đo và ghi vào biến --head-h, để panel menu di động biết bắt
 * đầu từ đâu mà không phải đoán.
 * --------------------------------------------------------------- */

/*
 * Header cao 225px là hợp lý ở đầu trang nhưng dính nguyên khối lúc cuộn
 * thì ăn mất 1/4 màn hình. LWC xử lý bằng cách cho header cuộn mất hẳn —
 * đã kiểm chứng: cuộn 1200px thì logo nằm ở y = -1123, không còn gì dính.
 *
 * Ở đây làm tốt hơn một bậc mà vẫn giữ đúng cảm giác đó:
 *
 *   đầu trang        header đầy đủ, không dính
 *   cuộn xuống       trượt hẳn lên trên, khuất khỏi màn hình
 *   cuộn ngược lên   hiện lại dạng RÚT GỌN cao 64px: logo nhỏ bên trái,
 *                    menu giữa, icon phải
 *
 * Người dùng lấy lại menu bằng một cú vuốt lên, không phải cuộn về đầu
 * trang — quan trọng với trang danh mục 1.013 sản phẩm.
 *
 * Muốn bỏ hẳn kiểu này để giống LWC tuyệt đối: xoá `position: sticky`.
 */
/*
 * `fixed` chứ không phải `sticky`.
 *
 * Với `sticky`, header vẫn chiếm chỗ trong luồng; rút gọn từ ~249px xuống
 * 64px làm cả trang nhảy lên 185px, và quanh mốc ngưỡng thì việc giãn lại
 * đẩy trang vượt ngưỡng lần nữa — vòng lặp phản hồi, nhìn ra là giật liên
 * tục. `fixed` tách header khỏi bố cục; `.site-head-spacer` giữ chỗ thay nó.
 */
.site-head {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--z-header);
	background: var(--c-white);
	line-height: var(--lh-16);
	transition: transform var(--dur-slow) var(--ease-panel);
}

/*
 * Chiều cao do JavaScript đo và ghi vào `--head-full-h`.
 *
 * Không dùng `--head-h`: biến đó mang nghĩa "chiều cao header ĐANG hiện" và
 * tụt xuống 65px khi header rút gọn, kéo theo phần đệm co lại — đúng cái xê
 * dịch mà phần đệm sinh ra để ngăn.
 *
 * Giá trị dự phòng phải KHÁC NHAU theo breakpoint. Trước đây dùng chung
 * 240px cho mọi kích thước, trong khi header trên di động chỉ cao 102px —
 * lệch 138px ở khung hình đầu tiên, trước khi JS kịp đo. Người dùng thấy
 * nội dung nhảy lên một đoạn ngay sau khi trang tải xong.
 *
 * Con số dự phòng chỉ sống được vài mili-giây nên không cần chính xác tuyệt
 * đối; nó chỉ cần đủ gần để không ai kịp nhìn thấy cú nhảy.
 */
.site-head-spacer {
	height: var(--head-full-h, 250px);
}

@media (max-width: 960px) {
	.site-head-spacer {
		height: var(--head-full-h, 104px);
	}
}

/* Đã cuộn xuống: giấu hẳn header. */
.site-head.is-hidden {
	transform: translateY(-100%);
}

.site-head.is-scrolled {
	box-shadow: var(--sh-md);
}

/* ---------------------------------------------------------------
 * HEADER RÚT GỌN
 * --------------------------------------------------------------- */

.site-head.is-compact .topbar,
.site-head.is-compact .site-header__utility,
.site-head.is-compact .site-header__search,
.site-head.is-compact .site-header__logo-sub {
	display: none;
}

@media (min-width: 961px) {
	.site-head.is-compact .site-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: 'logo nav actions';
		padding-block: var(--sp-2);
		min-height: 64px;
	}

	.site-head.is-compact .site-header__logo {
		justify-self: start;
	}

	.site-head.is-compact .site-header__logo-mark {
		font-size: 1.375rem;
	}

	/*
	 * Rút gọn thì menu phải nằm gọn một hàng, nếu không header lại cao
	 * như cũ. Bảy mục ở cỡ này chiếm khoảng 780px, thừa chỗ trong 1320px.
	 */
	.site-head.is-compact .site-nav__list {
		flex-wrap: nowrap;
		gap: 0 var(--sp-5);
	}

	.site-head.is-compact .icon-btn--mobile {
		display: inline-flex;
	}
}

/* ---------------------------------------------------------------
 * THANH TRÊN CÙNG
 * --------------------------------------------------------------- */

.topbar {
	background: #051b2b;
	color: var(--c-white);
	line-height: var(--lh-14);
}

.topbar__list {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 41px;
	list-style: none;
}

.topbar__item {
	display: flex;
	align-items: center;
}

/* Đường phân cách mảnh giữa các mục, đúng như site mẫu. */
.topbar__item + .topbar__item {
	border-left: 1px solid var(--c-line-invert);
}

.topbar__link {
	display: inline-flex;
	align-items: center;
	/*
	 * Cao trọn thanh chứ không chỉ cao bằng chữ: vùng bấm rộng hơn, và
	 * người dùng bấm vào khoảng trống quanh chữ vẫn trúng.
	 */
	min-height: 41px;
	gap: var(--sp-3);
	padding-inline: var(--sp-5);
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	transition: color var(--dur) var(--ease);
}

.topbar__link:hover {
	color: var(--c-gold-bright);
}

.topbar__link svg {
	flex: 0 0 auto;
}

/*
 * Dưới 960px chỉ còn icon, giống LWC. Nhãn chữ ẩn khỏi mắt nhưng vẫn nằm
 * trong DOM cho trình đọc màn hình — không dùng display:none.
 */
@media (max-width: 960px) {
	.topbar__list {
		justify-content: flex-start;
		min-height: 40px;
	}

	.topbar__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------
 * HEADER
 * --------------------------------------------------------------- */

.site-header {
	background: var(--c-white);
	border-bottom: 1px solid var(--c-line-soft);
}

/*
 * Desktop: lưới ba cột `1fr auto 1fr` nên cột giữa luôn nằm chính giữa
 * trang bất kể hai bên rộng bao nhiêu — đó là cách LWC căn logo, và nó
 * đúng ngay cả khi cụm mạng xã hội bên phải dài hơn khoảng trống bên trái.
 *
 *   hàng 1:  [ trống ]     [ LOGO ]  [ mạng xã hội + ngôn ngữ ]
 *   hàng 2:  [ tìm kiếm ]  [ MENU ]  [ tài khoản + giỏ hàng ]
 */
.site-header__inner {
	display: grid;
	/*
	 * `minmax(0, 1fr)` chứ không phải `1fr`.
	 *
	 * `1fr` viết tắt cho `minmax(auto, 1fr)` — có sàn bằng min-content. Khi
	 * menu rộng (926px ở màn 1280), phần dư chỉ còn 314px và hai cột biên
	 * lấy theo nội dung của chúng (69px và 142px) thay vì chia đôi, làm cột
	 * giữa lệch 36px khỏi tâm. Đặt sàn về 0 thì hai biên luôn bằng nhau.
	 *
	 * Ở màn 1440 lỗi không lộ vì còn thừa chỗ để chia đều.
	 */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas:
		'spacer logo utility'
		'search nav actions';
	align-items: center;
	gap: var(--sp-4) var(--sp-5);
	/* Với menu hai hàng, đệm này cho tổng chiều cao ~245px, sát mức 236px của LWC. */
	padding-block: var(--sp-6) var(--sp-3);
}

.site-header__logo {
	grid-area: logo;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
	text-decoration: none;
}

/*
 * text-indent bù lại phần letter-spacing thừa ra sau ký tự cuối, nếu
 * không chữ sẽ lệch trái so với tâm.
 */
.site-header__logo-mark {
	font-family: var(--f-head);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	color: var(--c-navy);
}

.site-header__logo-sub {
	font-family: var(--f-ui);
	font-size: var(--fs-3xs);
	line-height: var(--lh-10);
	font-weight: var(--fw-medium);
	letter-spacing: 0.38em;
	text-indent: 0.38em;
	text-transform: uppercase;
	color: var(--c-gold-ink);
}

.site-header__utility {
	grid-area: utility;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

.site-header__socials {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--sp-4);
}

/*
 * `flex: 0 0 auto` để cụm icon không bị ép co khi cột utility hẹp. Kèm với
 * `svg[width][height]` ở base.css, đây là lớp phòng thủ thứ hai cho đúng
 * lỗi icon co về 0px.
 */
/*
 * Đệm để đích bấm đạt 24×24 theo WCAG 2.5.8, trong khi icon vẫn 20px. Lề
 * âm bù lại để cụm icon không rộng thêm về mặt thị giác — vùng bấm lớn hơn
 * cái nhìn thấy là chuyện bình thường và đúng mong muốn.
 */
.site-header__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: -2px;
	color: var(--c-navy);
	transition: color var(--dur) var(--ease);
}

.site-header__socials a:hover {
	color: var(--c-gold-ink);
}

/*
 * Ở LWC chỗ này là bộ chọn quốc gia/tiền tệ. Kronos chỉ bán trong nước
 * nên dùng đúng vị trí đó cho chuyển ngôn ngữ — sẵn sàng cho Polylang ở
 * giai đoạn sau, xem docs/PLAN.md §1.
 */
.lang-switch {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	line-height: var(--lh-12);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

/*
 * Vùng chạm thật, không chỉ là chữ.
 *
 * Chữ "VI" chỉ rộng 13,6px và cao 19,2px — quá nhỏ để bấm chính xác, kể cả
 * bằng chuột. Đệm mở rộng vùng bấm lên 44px chiều cao mà không đổi vị trí
 * hiển thị của chữ, nhờ margin âm bù lại đúng phần đệm dọc.
 */
.lang-switch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 44px;
	margin-block: -12px;
	padding-inline: var(--sp-half);
	line-height: var(--lh-12);
	text-decoration: none;
	color: var(--c-muted);
	transition: color var(--dur) var(--ease);
}

.lang-switch__item[aria-current='true'] {
	color: var(--c-navy);
	font-weight: var(--fw-semibold);
}

.lang-switch__item:hover {
	color: var(--c-gold-ink);
}

/*
 * --c-line là màu VIỀN, không phải màu CHỮ.
 *
 * Dấu gạch giữa VI và EN đặt màu đó cho ra tỉ tương phản 1,28:1 trên nền
 * trắng — dưới cả ngưỡng 3:1 của đồ hoạ trang trí, tức gần như vô hình với
 * mọi người chứ không riêng người kém thị lực. Viền mảnh thì mờ được vì nó
 * liền mạch; một ký tự 12px thì không.
 */
.lang-switch__sep {
	color: var(--c-muted);
}

/* Ô tìm kiếm bên trái, có nhãn chữ như site mẫu chứ không chỉ icon. */
.site-header__search {
	grid-area: search;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 44px;
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
	letter-spacing: var(--ls-wide);
	text-decoration: none;
	color: var(--c-navy);
	transition: color var(--dur) var(--ease);
}

.site-header__search:hover {
	color: var(--c-gold-ink);
}

.site-header__actions {
	grid-area: actions;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--c-navy);
	transition: color var(--dur) var(--ease);
}

.icon-btn:hover {
	color: var(--c-gold-ink);
}

/* Chỉ hiện ở màn hình hẹp. */
.icon-btn--mobile {
	display: none;
}

/*
 * Phải đặt SAU .icon-btn: hai class cùng độ ưu tiên (0,1,0) nên cái đứng
 * sau thắng. Nút này mang cả hai class `icon-btn nav-toggle`, để trước thì
 * `display: inline-flex` của .icon-btn ghi đè và hamburger hiện trên desktop.
 *
 * Nó cũng phải là `display: none` chứ không phải `visibility: hidden`:
 * grid-area `burger` không tồn tại trong lưới desktop nên phần tử sẽ bị
 * tự động xếp chỗ, sinh thêm một hàng và đẩy logo lệch khỏi tâm 54px.
 */
.nav-toggle {
	grid-area: burger;
	justify-self: start;
	display: none;
}

.icon-btn__count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: var(--r-pill);
	background: var(--c-gold);
	color: var(--c-navy);
	font-size: 10px;
	font-weight: var(--fw-bold);
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/*
 * Giỏ trống thì giấu con số, KHÔNG bỏ thẻ khỏi markup.
 *
 * WooCommerce cập nhật số lượng bằng cách thay thế một phần tử đã có sẵn trong
 * trang. Không in thẻ khi giỏ trống thì lúc khách thêm món đầu tiên chẳng có gì
 * để thay, và con số không xuất hiện cho tới lần tải trang kế tiếp — đúng tình
 * huống xảy ra khi có page cache, vì lần tải kế tiếp cũng là bản đã lưu.
 */
.icon-btn__count.is-empty {
	display: none;
}

/* ---------------------------------------------------------------
 * ĐIỀU HƯỚNG CHÍNH
 * --------------------------------------------------------------- */

.site-nav {
	grid-area: nav;
	justify-self: center;
	/* Khung neo cho mega menu — xem ghi chú ở .site-nav__item:has(.mega). */
	position: relative;
}

/*
 * `flex-wrap` chứ không phải một hàng cứng: LWC có 10 mục nên menu tự
 * xuống hai hàng. Kronos đang có 6 mục nên vừa một hàng; thêm mục thì tự
 * xuống hàng và vẫn căn giữa, không phải sửa CSS.
 */
.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 var(--sp-6);
	list-style: none;
}

.site-nav__item {
	position: relative;
}

/*
 * Mục có mega menu KHÔNG được là khung neo của chính nó.
 *
 * Menu chia hai hàng: mua sắm ở trên, dịch vụ ở dưới. Neo panel vào thẻ <li>
 * thì `top: 100%` tính từ đáy của mục đó — tức là ngay giữa hai hàng — và
 * panel đè lên toàn bộ hàng menu thứ hai. Rê chuột vào "Đồng hồ" là mất luôn
 * Dịch vụ, Bảo dưỡng, Tin tức, Liên hệ.
 *
 * `position: static` đẩy khung neo lên `.site-nav`, nên panel rơi xuống dưới
 * CẢ HAI hàng. Menu con thường (`.site-nav__sub`) vẫn neo vào từng mục vì nó
 * hẹp và cần căn giữa đúng mục đang rê.
 */
.site-nav__item:has(.mega) {
	position: static;
}

/*
 * Ngắt hàng menu.
 *
 * LWC chia menu thành hai hàng: hàng trên là mua sắm, hàng dưới tô vàng là
 * dịch vụ và nội dung. Một phần tử rỗng chiếm trọn bề rộng sẽ ép flex xuống
 * hàng, giữ được đúng hai nhóm mà không phải viết hai thẻ <ul> riêng —
 * quan trọng vì trong WordPress cả menu là một wp_nav_menu().
 *
 * Rút gọn hoặc màn hình hẹp thì bỏ ngắt, menu về một hàng.
 */
.site-nav__break {
	flex-basis: 100%;
	height: 0;
	margin: 0;
}

.site-head.is-compact .site-nav__break {
	display: none;
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	height: 44px;
	font-size: 14px;
	line-height: var(--lh-14);
	font-weight: var(--fw-normal);
	letter-spacing: 0.56px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--c-navy);
	transition: color var(--dur) var(--ease);
}

.site-nav__link:hover,
.site-nav__item--current > .site-nav__link {
	color: var(--c-gold-ink);
}

/* Nhóm mục phụ tô vàng, đúng cách LWC phân biệt hàng menu thứ hai. */
.site-nav__item--secondary > .site-nav__link {
	color: var(--c-gold-ink);
}

.site-nav__item--secondary > .site-nav__link:hover {
	color: var(--c-navy);
}

/* ---------------------------------------------------------------
 * MEGA MENU
 * --------------------------------------------------------------- */

.mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	z-index: var(--z-dropdown);
	width: min(var(--container), calc(100vw - var(--gutter) * 2));
	padding: var(--sp-7);
	background: var(--c-white);
	border: 1px solid var(--c-line-soft);
	box-shadow: var(--sh-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
		visibility var(--dur);
}

/*
 * Mở bằng hover VÀ focus-within — chỉ hover thì người dùng bàn phím
 * không bao giờ vào được menu con.
 */
.site-nav__item:hover > .mega,
.site-nav__item:focus-within > .mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.mega__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr) 1.2fr;
	gap: var(--sp-6);
}

.mega__col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.mega__heading {
	font-family: var(--f-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-gold-ink);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--c-line-soft);
	margin: 0;
}

.mega__links {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.mega__link {
	font-size: var(--fs-sm);
	text-decoration: none;
	color: var(--c-text-muted);
	transition: color var(--dur) var(--ease);
}

.mega__link:hover {
	color: var(--c-text);
}

.mega__feature {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	text-decoration: none;
}

.mega__feature-title {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
}

/*
 * Dưới 1320px: hai cột liên kết xếp thành lưới 2×2, khối ảnh chiếm trọn cột
 * thứ ba của cả hai hàng.
 *
 * Cách làm cũ — bớt một track thành `repeat(3, 1fr) 1.2fr` — sai vì lưới vẫn
 * phải chứa 5 phần tử: bốn cột liên kết chiếm hết bốn track, khối ảnh bị đẩy
 * xuống hàng hai đứng một mình, và panel cao thêm gần 200px. Phải chỉ định
 * đích danh vị trí của khối ảnh, không trông vào thứ tự tự động.
 */
@media (max-width: 1320px) {
	.mega__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) 1.2fr;
	}

	.mega__feature {
		grid-column: 3;
		grid-row: 1 / -1;
	}
}

/* Hẹp hơn nữa thì bỏ khối ảnh xuống dưới, hai cột liên kết vẫn cạnh nhau. */
@media (max-width: 900px) {
	.mega__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mega__feature {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* ---------------------------------------------------------------
 * HEADER Ở MÀN HÌNH HẸP
 *
 *   [hamburger]   [ LOGO ]   [tìm kiếm] [giỏ hàng]
 * --------------------------------------------------------------- */

@media (max-width: 960px) {
	/*
	 * Vẫn là `1fr auto 1fr` chứ không phải `auto 1fr auto`.
	 *
	 * Với `auto 1fr auto`, cột giữa chỉ căn giữa phần còn lại sau khi trừ
	 * hamburger và cụm icon — mà hai bên rộng khác nhau (44px so với 88px)
	 * nên logo lệch 26px khỏi tâm màn hình. `1fr auto 1fr` cho hai cột biên
	 * bằng nhau, cột giữa luôn nằm đúng tâm.
	 */
	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: 'burger logo actions';
		gap: var(--sp-3);
		padding-block: var(--sp-2);
		min-height: 60px;
	}

	.site-header__utility,
	.site-header__search,
	.site-nav {
		display: none;
	}

	.nav-toggle,
	.icon-btn--mobile {
		display: inline-flex;
	}

	/* LWC đưa mục tài khoản vào trong menu ở màn hình hẹp. */
	.icon-btn--account {
		display: none;
	}

	.site-header__logo-mark {
		font-size: 1.5rem;
	}

	.site-header__logo-sub {
		font-size: 8px;
	}
}

/* ---------------------------------------------------------------
 * PANEL MENU DI ĐỘNG
 *
 * Không phải drawer trượt cạnh: LWC phủ kín phần còn lại của màn hình
 * ngay dưới header, hamburger đổi thành dấu X và header giữ nguyên chỗ.
 * `--head-h` do main.js đo được và ghi vào :root.
 * --------------------------------------------------------------- */

.nav-panel {
	position: fixed;
	top: var(--head-h, 101px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: calc(var(--z-header) - 1);
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	padding: var(--sp-5) var(--gutter) var(--sp-8);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--c-white);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
}

.nav-panel.is-open {
	transform: translateX(0);
	visibility: visible;
}

@media (min-width: 961px) {
	.nav-panel {
		display: none;
	}
}

.nav-panel__list {
	display: flex;
	flex-direction: column;
	list-style: none;
}

.nav-panel__item {
	border-bottom: 1px solid var(--c-line-soft);
}

.nav-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-4) 0;
	font-size: 16px;
	font-weight: var(--fw-normal);
	letter-spacing: 0.64px;
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
	color: var(--c-navy);
}

.nav-panel__link svg {
	flex: 0 0 auto;
	transition: transform var(--dur) var(--ease);
}

.nav-panel__item.is-open > .nav-panel__link svg {
	transform: rotate(90deg);
}

.nav-panel__sub {
	display: none;
	flex-direction: column;
	gap: var(--sp-3);
	padding: 0 0 var(--sp-4) var(--sp-4);
}

.nav-panel__item.is-open .nav-panel__sub {
	display: flex;
}

.nav-panel__sub a {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-decoration: none;
}

.nav-panel__account {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: 16px;
	text-decoration: none;
	color: var(--c-navy);
}

.nav-panel__socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
}

.nav-panel__socials a {
	display: inline-flex;
	color: var(--c-navy);
}

.nav-panel__foot {
	margin-top: auto;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line-soft);
}

/* ---------------------------------------------------------------
 * DRAWER GIỎ HÀNG
 *
 * Giỏ hàng vẫn là panel trượt từ phải, giống `quick-cart` của LWC.
 * --------------------------------------------------------------- */

.drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	width: min(420px, 88vw);
	background: var(--c-white);
	box-shadow: var(--sh-lg);
	/* Đóng nhanh hơn mở — xem ghi chú ở tokens.css. */
	transition: transform var(--dur-panel-out) var(--ease-panel);
	will-change: transform;
}

.drawer.is-open {
	transition-duration: var(--dur-panel-in);
}

/* Giỏ hàng trượt vào từ phải. */
.drawer--right {
	right: 0;
	transform: translateX(100%);
}

/* Tìm kiếm trượt vào từ trái. */
.drawer--left {
	left: 0;
	transform: translateX(-100%);
}

.drawer.is-open {
	transform: translateX(0);
}

/* ---------------------------------------------------------------
 * NỘI DUNG PANEL TÌM KIẾM
 * --------------------------------------------------------------- */

.search-panel__form {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--c-navy);
}

.search-panel__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-lg);
	line-height: var(--lh-22);
	font-family: var(--f-head);
	padding: var(--sp-2) 0;
}

.search-panel__input::placeholder {
	color: var(--c-muted);
}

.search-panel__hint {
	font-size: var(--fs-xs);
	line-height: var(--lh-12);
	color: var(--c-text-muted);
}

.search-panel__group-title {
	font-family: var(--f-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-gold-ink);
	margin: 0;
}

.search-panel__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.search-panel__term {
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--c-border);
	font-size: var(--fs-xs);
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.search-panel__term:hover {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}

.search-panel__result {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	text-decoration: none;
}

.search-panel__result-media {
	flex: 0 0 auto;
	width: 64px;
}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-5);
	border-bottom: 1px solid var(--c-line-soft);
	line-height: var(--lh-16);
	flex: 0 0 auto;
}

.drawer__title {
	font-family: var(--f-ui);
	font-size: var(--fs-xs);
	line-height: var(--lh-12);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	margin: 0;
}

.drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--sp-5);
}

.drawer__foot {
	flex: 0 0 auto;
	padding: var(--sp-5);
	border-top: 1px solid var(--c-line-soft);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-drawer) - 1);
	background: rgba(5, 28, 43, 0.45);
	opacity: 0;
	visibility: hidden;
	/* Cùng nhịp với panel, nếu lệch thì mắt bắt được ngay và thấy rời rạc. */
	transition: opacity var(--dur-panel-out) var(--ease-panel),
		visibility var(--dur-panel-out);
}

.drawer-overlay.is-open {
	transition-duration: var(--dur-panel-in);
}

.drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* ---------------------------------------------------------------
 * CHÂN TRANG
 *
 * Bám theo footer của theluxurywatchcompany.com, số đo lấy bằng DevTools:
 *   - nền rgb(5, 28, 44), tổng cao ~671px
 *   - bốn cột ở x = 60 / 550 / 858 / 1166 trên khung 1320px
 *     tức tỉ lệ xấp xỉ 1.6fr / 1fr / 1fr / 1fr
 *   - tiêu đề cột 13.2px, letter-spacing 0.66px, viết hoa, màu trắng
 *   - cột 1: logo rồi tên pháp nhân; cột 4: mạng xã hội rồi huy hiệu
 *   - bộ chọn ngôn ngữ/tiền tệ nằm dưới cùng bên trái
 * --------------------------------------------------------------- */

.site-footer {
	background: #051c2c;
	color: var(--c-white);
	padding-block: var(--sp-9) var(--sp-6);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.site-footer a:hover {
	color: var(--c-gold-bright);
}

/*
 * Cột 1 rộng gấp đôi ba cột còn lại.
 *
 * Nó chứa tên công ty, địa chỉ, giờ mở cửa và bốn dòng liên hệ — toàn văn bản
 * dài, trong khi ba cột kia chỉ là danh sách liên kết ngắn. Chia đều thì địa
 * chỉ ngắt dòng ba lần còn ba cột kia thừa chỗ.
 *
 * `minmax(0, …)` chứ không phải `2fr 1fr 1fr 1fr` trần: kích thước tối thiểu
 * mặc định của một track `fr` là min-content, nên một chuỗi không ngắt được —
 * ở đây là địa chỉ email — buộc cột phồng ra và đẩy cả lưới rộng hơn khung
 * chứa. Kết quả là trang cuộn ngang.
 */
.site-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--sp-8) var(--sp-6);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}


/*
 * KHÔNG thêm lề giữa hai widget cùng cột.
 *
 * `gap: var(--sp-4)` của cột đã là khoảng cách đúng — nó là khoảng cách giữa
 * logo, địa chỉ và danh sách liên hệ ở bản dựng tĩnh. Khi ba khối đó chuyển
 * thành widget riêng, thêm lề nữa đẩy khoảng cách lên 48px và cột 1 rời rạc
 * thành ba mảnh thay vì đọc như một khối thông tin doanh nghiệp.
 */

/*
 * Tiêu đề cột. Cỡ 13px với letter-spacing 0.66px là con số thật của LWC,
 * không phải làm tròn cho đẹp.
 */
.site-footer .widget__title,
.site-footer__heading {
	font-family: var(--f-ui);
	font-size: 13px;
	line-height: var(--lh-13);
	font-weight: var(--fw-medium);
	letter-spacing: 0.66px;
	text-transform: uppercase;
	color: var(--c-white);
	margin: 0;
}

/*
 * Chỉ tiêu đề WIDGET mới cần lề dưới.
 *
 * `.site-footer__heading` do theme in ra là con trực tiếp của
 * `.site-footer__col`, nên `gap` của cột đã tách nó khỏi danh sách bên dưới.
 * Widget thì gói tiêu đề và danh sách vào CÙNG một phần tử con, `gap` không
 * chen vào giữa được, và tiêu đề dính sát danh sách — đo được đúng 0px.
 *
 * Cho cả hai cùng lề sẽ làm cột của theme giãn gấp đôi, nên phải tách riêng.
 */
.site-footer .widget__title {
	margin-bottom: var(--sp-4);
}

.site-footer__col ul {
	display: flex;
	flex-direction: column;
	/* Đệm 2px mỗi link nên gap giảm tương ứng, khoảng cách nhìn thấy giữ nguyên. */
	gap: var(--sp-2);
	list-style: none;
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
	color: #b9c6cf;
}

.site-footer__col ul a {
	display: inline-block;
	padding-block: var(--sp-half);
}

/* --------------------------------------------------------------
 * NÚT GẬP CỘT MENU
 *
 * Nút do main.js dựng ra và chỉ tồn tại ở màn hình hẹp, xem
 * initFooterAccordion(). Ở đây chỉ tạo dáng — không có quy tắc nào ẩn
 * danh sách đi, vì cái ẩn là thuộc tính `hidden` do JS gắn. Không JS thì
 * không nút, không ẩn.
 * -------------------------------------------------------------- */

.site-footer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	width: 100%;
	/*
	 * Vùng chạm 44px. Tiêu đề chỉ cao 13px — bằng đúng chiều cao chữ thì
	 * ngón tay cái bấm trượt, mà đây lại là thứ duy nhất mở được cột.
	 */
	min-height: 44px;
	/* `font: inherit` của base.css chỉ chép font, không chép giãn chữ. */
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
}

.site-footer__toggle svg {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.6);
	transition: transform var(--dur) var(--ease);
}

.site-footer .widget.is-open .site-footer__toggle svg {
	transform: rotate(180deg);
}

/*
 * Nội dung trượt xuống nhẹ khi mở.
 *
 * Dùng animation chứ không transition: panel đi ra đi vào bằng `hidden`,
 * tức `display: none`, mà `display` thì không nội suy được. Lúc đóng
 * không có gì để chạy — nó biến mất ngay, đúng như mọi accordion khác
 * trong theme (xem `.filter-group__body`).
 */
.site-footer .widget.is-open .site-footer__panel {
	animation: footer-panel-in var(--dur) var(--ease);
}

@keyframes footer-panel-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* --------------------------------------------------------------
 * CỘT THƯƠNG HIỆU
 * -------------------------------------------------------------- */

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-decoration: none;
	margin-bottom: var(--sp-2);
}

.site-footer__brand-mark {
	font-family: var(--f-head);
	font-size: 2rem;
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: 0.16em;
	color: var(--c-gold-bright);
}

/*
 * 10px, bằng đúng .site-header__logo-sub. Trước đây chân trang dùng 9px:
 * cùng một khoá thương hiệu, hai cỡ chữ khác nhau ở hai đầu trang.
 */
.site-footer__brand-sub {
	font-family: var(--f-ui);
	font-size: var(--fs-3xs);
	line-height: var(--lh-10);
	font-weight: var(--fw-medium);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

/*
 * Khối chữ soạn tự do trong widget, nên không còn là một thẻ <p> duy nhất mà
 * là nhiều đoạn do `wpautop` sinh ra. Khoảng cách đặt trên các đoạn con thay
 * vì trông vào cấu trúc cố định như trước.
 */
.site-footer__legal {
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
	color: #b9c6cf;
	max-width: 100%;
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal p + p {
	margin-top: var(--sp-3);
}

.site-footer__legal strong {
	color: var(--c-white);
	font-weight: var(--fw-medium);
}

.site-footer__legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__legal a:hover {
	color: var(--c-white);
}

/* --------------------------------------------------------------
 * CỘT MẠNG XÃ HỘI + HUY HIỆU
 * -------------------------------------------------------------- */

.site-footer__socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
}

.site-footer__socials a {
	display: inline-flex;
	color: var(--c-white);
}

.site-footer__socials a:hover {
	color: var(--c-gold-bright);
}

/*
 * Ở LWC đây là ảnh huy hiệu giải thưởng 200x101. Kronos chưa có nên dựng
 * bằng chữ — đúng vị trí, đúng khối lượng thị giác, và không mượn hình
 * của bên khác.
 */
.site-footer__badge {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	max-width: 100%;
	padding: var(--sp-4);
	border: 1px solid var(--c-gold);
	text-align: center;
}

.site-footer__badge-top {
	font-family: var(--f-ui);
	font-size: var(--fs-3xs);
	line-height: var(--lh-9);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--c-gold-bright);
}

.site-footer__badge-main {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	line-height: var(--lh-22);
	color: var(--c-white);
}

.site-footer__badge-sub {
	font-size: 11px;
	line-height: var(--lh-11);
	color: #b9c6cf;
}

/* --------------------------------------------------------------
 * HÀNG DƯỚI CÙNG
 * -------------------------------------------------------------- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-top: var(--sp-9);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line-invert);
	font-size: var(--fs-xs);
	line-height: var(--lh-12);
	color: #8fa3b1;
}

.site-footer__copyright {
	margin: 0;
}

/* Bộ chọn ngôn ngữ ở chân trang — LWC để bộ chọn tiền tệ đúng chỗ này. */
.site-footer .lang-switch__item {
	color: #8fa3b1;
}

.site-footer .lang-switch__item[aria-current='true'] {
	color: var(--c-white);
}

.site-footer .lang-switch__sep {
	color: rgba(255, 255, 255, 0.3);
}

.site-footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

/*
 * Nhãn phương thức thanh toán: icon LOẠI phương thức + chữ.
 *
 * Không nhúng logo Visa hay Mastercard. Các nhãn đó là thương hiệu đã đăng
 * ký; dùng đúng cách thì phải lấy bộ nhận diện chính thức của từng đơn vị
 * phát hành và tải lên ở Kronos → Chân trang. Icon ở đây vẽ cái thẻ, cái ví,
 * mã QR — thứ mô tả phương thức chứ không mượn hình của ai.
 */
.payment-mark {
	/*
	 * `inline-flex` chứ không để mặc định.
	 *
	 * Đây là thẻ <span>, tức display: inline — chiều cao của nó lấy theo
	 * font metrics chứ KHÔNG theo line-height, nên khai báo line-height
	 * nguyên px vẫn cho ra 25,6px. Chuyển sang inline-flex thì hộp mới
	 * thật sự cao đúng 26px.
	 */
	display: inline-flex;
	align-items: center;
	/*
	 * 6px chứ không phải --sp-2.
	 *
	 * Chữ ở đây có letter-spacing 0.12em, tức đã có sẵn khoảng hở bên trái
	 * ký tự đầu; thêm 8px nữa thì icon trông rời khỏi nhãn của chính nó
	 * trong khi hai chip cạnh nhau chỉ cách 12px.
	 */
	gap: 6px;
	padding: 4px var(--sp-3);
	border: 1px solid var(--c-line-invert);
	border-radius: 2px;
	font-size: 10px;
	line-height: var(--lh-10);
	font-weight: var(--fw-medium);
	letter-spacing: 0.12em;
	color: #b9c6cf;
}

.payment-mark svg {
	flex: 0 0 auto;
	/* Sáng hơn chữ một bậc: hình 16px mảnh nét, cùng màu chữ thì chìm hẳn. */
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 960px) {
	.site-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.site-footer__cols {
		grid-template-columns: 1fr;
	}

	/*
	 * Hai cột menu đã gập thành hai dòng tiêu đề, nên khoảng cách 48px
	 * giữa chúng phải bỏ đi — để nguyên thì hai dòng bấm được nằm cách
	 * nhau gần nửa màn hình và không còn đọc ra là một cụm.
	 *
	 * `--sp-8` chính là row-gap của `.site-footer__cols` ở trên; đổi chỗ
	 * đó thì phải đổi cả ở đây.
	 */
	.site-footer__col--collapsible + .site-footer__col--collapsible {
		margin-top: calc(var(--sp-8) * -1);
	}

	/* Gạch dưới mỗi dòng gập, cho thấy đây là một hàng bấm được. */
	.site-footer .widget.is-collapsible {
		border-bottom: 1px solid var(--c-line-invert);
	}

	/*
	 * Lề dưới của tiêu đề chuyển xuống panel.
	 *
	 * Giữ nguyên `margin-bottom: 16px` thì lúc gập, dòng tiêu đề đội thêm
	 * 16px trống trước khi tới vạch kẻ — nhìn ra ngay là lệch.
	 */
	.site-footer .widget.is-collapsible .widget__title {
		margin-bottom: 0;
	}

	.site-footer .widget.is-collapsible .site-footer__panel {
		padding-bottom: var(--sp-4);
	}

	.site-footer__bottom {
		justify-content: flex-start;
		margin-top: 0;
	}

	/* Huy hiệu cam kết chiếm trọn bề ngang, không còn cột để canh theo. */
	.site-footer__badge {
		width: 100%;
		max-width: 100%;
	}

	/*
	 * KHÔNG đặt `margin-bottom: 0` cho MỌI tiêu đề widget ở đây.
	 *
	 * Bản cũ làm vậy rồi trả lại 15px riêng cho cột mạng xã hội — vá chồng
	 * lên vá, và chỉ đúng chừng nào không ai thêm widget có tiêu đề vào chân
	 * trang. Tiêu đề của cột gập đã có `.is-collapsible` lo; những cột còn
	 * lại giữ nguyên lề mặc định.
	 */
	.widget-social {
		margin-bottom: var(--sp-3);
	}

	.newsletter {
		padding-bottom: var(--sp-4);
	}
}

/* ---------------------------------------------------------------
 * NỘI DUNG PANEL HIỆN RA SO LE
 *
 * Đây mới là thứ làm panel hết cảm giác thô, không phải bản thân cú
 * trượt. Site mẫu làm đúng như vậy: nội dung bắt đầu ở
 * `opacity: 0; translateY(20px)` rồi nổi lên theo độ trễ tăng dần.
 *
 * Panel trượt vào trước, chữ và ảnh nổi lên sau — mắt có thời gian bắt
 * kịp thay vì bị đập vào một khối đặc chuyển động.
 *
 * Lúc đóng: xoá hết độ trễ để mọi thứ biến mất cùng lúc với panel,
 * nếu không sẽ thấy nội dung lững lờ đuổi theo.
 * --------------------------------------------------------------- */

.drawer__head,
.drawer__body > *,
.mini-cart__item,
.drawer__foot,
.nav-panel > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--dur-panel-content) var(--ease-panel),
		transform var(--dur-panel-content) var(--ease-panel);
}

.drawer.is-open .drawer__head,
.drawer.is-open .drawer__body > *,
.drawer.is-open .mini-cart__item,
.drawer.is-open .drawer__foot,
.nav-panel.is-open > * {
	opacity: 1;
	transform: none;
}

/* Bậc thang độ trễ. Bước 60ms đủ để cảm nhận mà không thành lê thê. */
.drawer.is-open .drawer__head {
	transition-delay: 100ms;
}

.drawer.is-open .drawer__body > *:nth-child(1) { transition-delay: 160ms; }
.drawer.is-open .drawer__body > *:nth-child(2) { transition-delay: 220ms; }
.drawer.is-open .drawer__body > *:nth-child(3) { transition-delay: 280ms; }
.drawer.is-open .drawer__body > *:nth-child(4) { transition-delay: 340ms; }
.drawer.is-open .drawer__body > *:nth-child(n + 5) { transition-delay: 400ms; }

/* Danh sách giỏ hàng nằm trong một <ul>, nên bậc thang tính trên từng món. */
.drawer.is-open .mini-cart__item:nth-child(1) { transition-delay: 160ms; }
.drawer.is-open .mini-cart__item:nth-child(2) { transition-delay: 220ms; }
.drawer.is-open .mini-cart__item:nth-child(3) { transition-delay: 280ms; }
.drawer.is-open .mini-cart__item:nth-child(n + 4) { transition-delay: 340ms; }

.drawer.is-open .drawer__foot {
	transition-delay: 440ms;
}

.nav-panel.is-open > *:nth-child(1) { transition-delay: 120ms; }
.nav-panel.is-open > *:nth-child(2) { transition-delay: 200ms; }
.nav-panel.is-open > *:nth-child(3) { transition-delay: 260ms; }
.nav-panel.is-open > *:nth-child(n + 4) { transition-delay: 320ms; }

/* Đóng thì không trễ gì cả. */
.drawer:not(.is-open) .drawer__head,
.drawer:not(.is-open) .drawer__body > *,
.drawer:not(.is-open) .drawer__foot,
.nav-panel:not(.is-open) > * {
	transition-delay: 0ms;
	transition-duration: var(--dur-panel-out);
}

/* ---------------------------------------------------------------
 * GẠCH CHÂN MENU KHI HOVER
 *
 * Sao chép đúng kỹ thuật của site mẫu: một đường 1px dùng
 * `background: currentColor` nên tự đổi màu theo link, mặc định
 * `scaleX(0)`.
 *
 * Mấu chốt là ĐỔI `transform-origin` giữa hai trạng thái:
 *   nghỉ   origin phải  → khi rút, đường co về bên phải
 *   hover  origin trái  → khi mọc, đường chạy từ trái sang
 *
 * Nhờ vậy đường luôn đi cùng một chiều trái-sang-phải cả lúc vào lẫn
 * lúc ra, thay vì co giãn đối xứng ở giữa. Chi tiết nhỏ nhưng đó là
 * khác biệt giữa "có gạch chân" và "gạch chân đẹp".
 * --------------------------------------------------------------- */

.nav-link-text {
	position: relative;
	display: inline-block;
}

.nav-link-text::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 1px;
	background: currentColor;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--dur-underline) var(--ease-panel);
}

.site-nav__link:hover .nav-link-text::after,
.site-nav__link:focus-visible .nav-link-text::after,
.site-nav__item--current > .site-nav__link .nav-link-text::after,
.site-nav__item:focus-within > .site-nav__link .nav-link-text::after {
	transform: scaleX(1);
	transform-origin: 0% 50%;
}

/* Dùng lại cho link trong mega menu và ô tìm kiếm ở header. */
.mega__link,
.site-header__search span {
	position: relative;
	display: inline-block;
}

.mega__link::after,
.site-header__search span::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 1px;
	background: currentColor;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--dur-underline) var(--ease-panel);
}

.mega__link:hover::after,
.mega__link:focus-visible::after,
.site-header__search:hover span::after,
.site-header__search:focus-visible span::after {
	transform: scaleX(1);
	transform-origin: 0% 50%;
}

/* ---------------------------------------------------------------
 * MENU CON TRÊN DESKTOP
 *
 * Mega menu ở bản dựng tĩnh là bố cục bốn cột kèm ảnh nổi bật, không suy
 * ra được từ một menu phẳng của WordPress. Ở đây menu con render thành
 * panel thả xuống nhiều cột — dùng chung khung, viền và bóng đổ với
 * `.mega` nên nhìn cùng một hệ. Bản mega đầy đủ sẽ là component riêng
 * lấy dữ liệu từ ACF, xem docs/PLAN.md §5.5.
 * --------------------------------------------------------------- */

.site-nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	z-index: var(--z-dropdown);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sp-3) var(--sp-6);
	min-width: 260px;
	max-width: min(760px, calc(100vw - var(--gutter) * 2));
	padding: var(--sp-6);
	margin: 0;
	list-style: none;
	background: var(--c-white);
	border: 1px solid var(--c-line-soft);
	box-shadow: var(--sh-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
		visibility var(--dur);
}

/*
 * Số cột tăng theo số mục: dưới 4 mục thì một cột cho gọn, từ 4 mục trở
 * lên mới chia hai cột. `:has()` cho phép đếm mục con mà không cần JS.
 */
.site-nav__sub:not(:has(> :nth-child(4))) {
	grid-template-columns: 1fr;
	min-width: 220px;
}

.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/*
 * Vùng đệm vô hình nối link cha với panel. Không có nó, chuột đi qua khe
 * hở giữa hai phần tử là panel đóng ngay giữa chừng.
 */
.site-nav__item--has-children > .site-nav__link::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
}

/* Mũi tên xổ xuống vẽ bằng CSS, không cần thêm thẻ trong markup. */
.site-nav__item--has-children > .site-nav__link::after {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-left: var(--sp-1);
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dur) var(--ease);
}

.site-nav__item--has-children:hover > .site-nav__link::after,
.site-nav__item--has-children:focus-within > .site-nav__link::after {
	transform: translateY(1px) rotate(-135deg);
}

.site-nav__sub .mega__link {
	display: inline-block;
	position: relative;
	/* 22px dòng + 2px đệm trên dưới = 26px, vượt mức tối thiểu 24px của WCAG 2.2. */
	padding-block: var(--sp-half);
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.site-nav__sub .mega__link:hover {
	color: var(--c-text);
}

@media (max-width: 960px) {
	.site-nav__sub {
		display: none;
	}
}