/*
 * Uranium: header, footer và nút dùng chung theo bản thiết kế.
 *
 * Nạp trên mọi trang. Màu lấy từ token của theme (theme.json, uranium.css),
 * nên bảng màu trong Customizer và chế độ sáng/tối tự áp dụng.
 *
 * 1. Token
 * 2. Nút, link, icon
 * 3. Header: thanh tiện ích, logo, menu, tìm kiếm, giỏ hàng, danh mục
 * 4. Footer
 * 5. Màn hình nhỏ
 */

/* 1. Token --------------------------------------------------------------- */

body {
	--u-accent: var(--wp--preset--color--signal);
	--u-on-accent: var(--wp--preset--color--on-signal);
	--u-accent-ink: var(--wp--custom--color--signal-text);
	--u-c-rule: color-mix(in srgb, var(--wp--preset--color--ink) 15%, var(--wp--preset--color--paper));
	--u-c-media: color-mix(in srgb, var(--wp--preset--color--ink) 6%, var(--wp--preset--color--surface));
	--u-c-text-2: color-mix(in srgb, var(--wp--preset--color--ink) 82%, var(--wp--preset--color--paper));
	--u-c-band-rule: color-mix(in srgb, var(--wp--preset--color--on-band) 16%, var(--wp--preset--color--band));
	--u-c-band-raise: color-mix(in srgb, var(--wp--preset--color--on-band) 6%, var(--wp--preset--color--band));
}

/* 2. Nút, link, icon ----------------------------------------------------- */

.u-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1.5px solid transparent;
	border-radius: 0;
	font: 600 1rem/1.3 var(--wp--preset--font-family--sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--u-ease), border-color var(--u-ease), color var(--u-ease);
}

.u-btn--ink {
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--on-band);
}

.u-btn--ink:hover {
	background: color-mix(in srgb, var(--wp--preset--color--band) 80%, var(--wp--preset--color--on-band));
	color: var(--wp--preset--color--on-band);
}

.u-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.u-btn--outline:hover {
	background: color-mix(in srgb, currentColor 9%, transparent);
	color: inherit;
}

.u-btn--accent {
	background: var(--u-accent);
	color: var(--u-on-accent);
}

.u-btn--accent:hover {
	background: var(--wp--custom--color--signal-hover);
	color: var(--u-on-accent);
}

.u-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-block: 10px 2px;
	border-bottom: 1.5px solid currentColor;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.u-link:hover {
	color: var(--u-muted);
}

.u-arrow {
	display: inline-block;
	transition: translate var(--u-ease);
}

:is(.u-btn, .u-link):hover .u-arrow {
	translate: calc(var(--u-dir) * 4px) 0;
}

.u-icon {
	flex: none;
	width: 18px;
	height: 18px;
}

.u-dot {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--u-accent);
}

.u-iconbtn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--u-c-rule);
	color: inherit;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--u-ease), border-color var(--u-ease);
}

.u-iconbtn::-webkit-details-marker {
	display: none;
}

.u-iconbtn:hover {
	background: var(--u-hover);
	border-color: currentColor;
}

/* 3. Header -------------------------------------------------------------- */

.u-sh a {
	color: inherit;
	text-decoration: none;
}

.u-sh-utility {
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--on-band);
	font: 400 0.78125rem/1.5 var(--u-mono);
	letter-spacing: 0.02em;
	--u-focus: var(--wp--custom--color--focus-on-band);
}

.u-sh-utility__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 24px;
	min-height: 36px;
}

.u-sh-utility__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 20px;
}

.u-sh-utility__company {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
}

.u-sh-utility a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.u-sh-utility a:hover {
	color: var(--wp--custom--color--on-band-muted);
}

.u-sh-utility .u-sh-utility__accent {
	color: var(--u-accent-ink);
}

.u-sh-main {
	position: relative;
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--u-c-rule);
}

.u-sh-main__bar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-block: 16px;
}

/* Logo */
.u-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.u-brand__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--u-accent);
	color: var(--u-on-accent);
	font: 700 1.375rem/1 var(--u-condensed);
}

.u-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.u-brand__name {
	font: 700 1.5rem/1.05 var(--u-condensed);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.u-brand__tag {
	margin-top: 3px;
	color: var(--u-muted);
	font: 400 0.65625rem/1.2 var(--u-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.u-brand-logo img {
	display: block;
	width: auto;
	max-height: 48px;
}

/* Menu chính */
.u-sh-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.u-sh-menu li {
	position: relative;
}

.u-sh-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 10px;
	border-bottom: 2px solid transparent;
}

.u-sh-menu > li > a:hover {
	color: var(--u-muted);
}

.u-sh-menu > :is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a {
	border-bottom-color: var(--wp--preset--color--ink);
}

.u-sh-menu .menu-item-has-children > a::after {
	content: "▾";
	font-size: 0.75em;
}

.u-sh-menu .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: -16px;
	z-index: 40;
	display: none;
	min-width: 240px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--u-c-rule);
	box-shadow: 0 16px 32px rgb(0 0 0 / 0.08);
}

.u-sh-menu li:hover > .sub-menu,
.u-sh-menu li:focus-within > .sub-menu {
	display: block;
}

.u-sh-menu .sub-menu a {
	display: block;
	padding: 10px 16px;
}

.u-sh-menu .sub-menu a:hover {
	background: var(--wp--preset--color--surface);
}

/* Tìm kiếm, giỏ hàng, hotline */
.u-sh-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

.u-sh-search > summary {
	cursor: pointer;
}

.u-sh-search[open] > summary {
	background: var(--u-hover);
	border-color: currentColor;
}

/* Khung tìm kiếm canh theo mép phải nội dung header, kể cả trên điện thoại. */
.u-sh-search__panel {
	position: absolute;
	top: calc(100% - 8px);
	inset-inline-end: var(--u-gutter);
	z-index: 40;
	width: min(440px, calc(100% - 2 * var(--u-gutter)));
	padding: 16px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--u-c-rule);
	box-shadow: 0 16px 32px rgb(0 0 0 / 0.1);
}

.u-sh-search__panel form {
	display: flex;
	gap: 8px;
}

.u-sh-search__panel input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	border-radius: 0;
}

.u-sh-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--u-c-rule);
	font: 400 0.8125rem/1 var(--u-mono);
	transition: background-color var(--u-ease), border-color var(--u-ease);
}

.u-sh-cart:hover {
	background: var(--u-hover);
	border-color: currentColor;
}

.u-sh-hotline {
	min-height: 44px;
	padding-inline: 20px;
	gap: 8px;
	font-size: 0.9375rem;
}

.u-sh-toggle {
	display: none;
}

.u-sh-toggle .u-icon + .u-icon,
.u-sh-toggle[aria-expanded="true"] .u-icon:first-child {
	display: none;
}

.u-sh-toggle[aria-expanded="true"] .u-icon + .u-icon {
	display: block;
}

/* Thanh danh mục */
.u-sh-cats {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--u-c-rule);
}

.u-sh-cats__bar {
	display: flex;
	align-items: center;
	gap: 0 28px;
	font-size: 0.875rem;
}

.u-sh-cats .u-sh-cats__label {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--on-band);
	font: 400 0.78125rem/1.5 var(--u-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.u-sh-cats__label .u-icon {
	width: 14px;
	height: 14px;
}

.u-sh-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.u-sh-cats__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
}

.u-sh-cats__list a:hover,
.u-sh-cats__list .current-menu-item > a {
	color: var(--u-muted);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* 4. Footer -------------------------------------------------------------- */

.u-sf a {
	color: inherit;
	text-decoration: none;
}

.u-sf a:hover {
	color: var(--wp--custom--color--on-band-muted);
}

.u-sf__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	padding-block: 72px 32px;
}

.u-sf__about {
	display: flex;
	flex: 2 1 380px;
	flex-direction: column;
	gap: 14px;
}

.u-sf .u-brand {
	color: inherit;
}

.u-sf .u-brand__mark {
	width: 36px;
	height: 36px;
	font-size: 1.25rem;
}

.u-sf .u-brand__name {
	font-size: 1.375rem;
}

.u-sf p {
	margin: 0;
}

.u-sf__company {
	font-size: 1.0625rem;
	font-weight: 600;
}

.u-sf__line {
	color: var(--u-muted);
	font-size: 0.90625rem;
}

.u-sf__line-label {
	color: var(--wp--preset--color--on-band);
}

.u-sf__contact {
	font: 400 0.875rem/1.6 var(--u-mono);
}

.u-sf .u-sf__phone {
	color: var(--u-accent-ink);
}

.u-sf__col {
	display: flex;
	flex: 1 1 180px;
	flex-direction: column;
	gap: 10px;
}

.u-sf__title {
	margin: 0 0 6px;
	color: var(--u-accent-ink);
	font: 400 0.75rem/1.5 var(--u-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.u-sf__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.u-sf__links a {
	display: inline-flex;
	min-height: 32px;
	align-items: center;
}

.u-sf__hint {
	color: var(--u-muted);
	font-size: 0.8125rem;
}

.u-sf__map {
	display: flex;
	flex: 1 1 260px;
	min-height: 200px;
	background: var(--u-c-band-raise);
}

.u-sf__map iframe {
	width: 100%;
	min-height: 200px;
	border: 0;
}

.u-sf .u-sf__map--link {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	color: var(--u-muted);
	font: 400 0.75rem/1.5 var(--u-mono);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.u-sf__map--link .u-icon {
	width: 28px;
	height: 28px;
	color: var(--u-accent-ink);
}

p.u-sf__map {
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.u-sf__bottom {
	border-top: 1px solid var(--u-c-band-rule);
}

.u-sf__bottom-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 18px;
	color: var(--u-muted);
	font: 400 0.78125rem/1.5 var(--u-mono);
}

/* 5. Màn hình nhỏ -------------------------------------------------------- */

@media (max-width: 960px) {
	.u-sh-main__bar {
		gap: 12px 16px;
	}

	.u-sh-nav {
		order: 3;
		flex-basis: 100%;
	}

	html.u-js .u-sh-toggle {
		display: grid;
	}

	html.u-js .u-sh-nav {
		display: none;
	}

	html.u-js .u-sh.is-nav-open .u-sh-nav {
		display: block;
	}

	html.u-js .u-sh-menu {
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--u-c-rule);
	}

	html.u-js .u-sh-menu a {
		display: flex;
		padding: 14px 0;
		border-bottom: 1px solid var(--u-c-rule);
	}

	html.u-js .u-sh-menu > :is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a {
		border-bottom-color: var(--u-c-rule);
		font-weight: 700;
	}

	.u-sh-menu .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 0 16px;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.u-sh-menu .menu-item-has-children > a::after {
		content: none;
	}

	/* Thanh danh mục cuộn ngang thay vì xuống nhiều dòng. */
	.u-sh-cats__bar,
	.u-sh-cats__list {
		flex-wrap: nowrap;
	}

	.u-sh-cats__bar {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.u-sh-cats__bar::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 720px) {
	.u-sh-utility__group:first-child {
		display: none;
	}

	.u-sf__grid {
		gap: 36px;
		padding-top: 56px;
	}
}

/*
 * Điện thoại: logo và bốn nút nằm trên một hàng từ màn hình 360px. Thanh
 * tiện ích ẩn đi vì email và mạng xã hội đã có ở footer.
 */
@media (max-width: 560px) {
	.u-sh-utility {
		display: none;
	}

	.u-sh-main__bar {
		column-gap: 8px;
		padding-block: 12px;
	}

	.u-sh-actions {
		gap: 4px;
	}

	.u-sh .u-brand {
		gap: 8px;
	}

	.u-sh .u-brand__mark {
		width: 34px;
		height: 34px;
		font-size: 1.1875rem;
	}

	.u-sh .u-brand__name {
		font-size: 1.125rem;
	}

	.u-sh .u-brand__tag,
	.u-sh-cart__total {
		display: none;
	}

	.u-sh .u-iconbtn,
	.u-sh-cart,
	.u-sh-hotline {
		width: 40px;
		height: 40px;
		min-height: 40px;
		padding: 0;
		justify-content: center;
	}

	/* Số hotline vẫn được đọc cho trình đọc màn hình. */
	.u-sh-hotline__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.u-arrow {
		transition: none;
	}

	:is(.u-btn, .u-link):hover .u-arrow {
		translate: none;
	}
}