.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0.85), transparent);
}

/* WP admin bar (khi đăng nhập) đè lên fixed header — đẩy header xuống tương ứng */
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-lg);
	padding-block: var(--space-md) var(--space-sm);
}

.nav-toggle {
	margin-left: auto;
}

/* ---------- Nút chuyển ngôn ngữ VI / EN ---------- */

.lang-switch {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.lang-switch--header {
	margin-left: auto; /* đẩy cả cụm (ngôn ngữ + Client Login) sang mép phải */
}

.lang-switch__item {
	padding: 2px var(--space-xs);
	border: 1px solid transparent;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	transition: color var(--transition-base), border-color var(--transition-base);
}

.lang-switch__item:hover,
.lang-switch__item:focus-visible {
	color: var(--color-cream);
}

.lang-switch__item.is-active {
	color: var(--color-gold);
	border-color: var(--color-gold);
}

/* Vạch ngăn giữa VI và EN */
.lang-switch__item + .lang-switch__item {
	position: relative;
	margin-left: var(--space-xs);
}

.lang-switch__item + .lang-switch__item::before {
	content: '';
	position: absolute;
	left: calc(-1 * var(--space-xs));
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: var(--color-border);
}

.lang-switch--mobile {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.lang-switch--mobile .lang-switch__item {
	font-size: var(--fs-body);
	padding: var(--space-xs) var(--space-sm);
}

/* ---------- Nút Client Login (cổng duyệt phim cho khách) ---------- */

/* Hộp VÀNG ĐẶC (giống nút "Đăng nhập" trong app review) — tách hẳn khỏi menu,
   đứng ngoài cùng bên phải header. Dùng !important cho background/color để không bị
   luật `a { color: inherit }` hay style plugin đè mất. */
.client-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: 12px var(--space-md);
	border: 1px solid var(--color-gold);
	border-radius: var(--radius);
	background-color: var(--color-gold) !important;
	color: var(--color-black) !important;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.client-login:hover,
.client-login:focus-visible {
	background-color: var(--color-gold-bright, #ffe25c) !important;
	color: var(--color-black) !important;
}

/* Cụm bên phải: nút ngôn ngữ đẩy sang phải, hộp Client Login bám ngay sau nó. */
.client-login--header {
	margin-left: var(--space-sm);
}

/* Trong mobile menu: nút full-width cho dễ chạm */
.client-login--mobile {
	display: flex;
	justify-content: center;
	margin: var(--space-md) 0 var(--space-sm);
}

/* Trên mobile nút ngôn ngữ + Client Login ở header nhường chỗ cho hamburger
   (Client Login vẫn có trong mobile menu) */
@media (max-width: 900px) {
	.lang-switch--header,
	.client-login--header {
		display: none;
	}
}

.site-nav__list {
	display: flex;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list li {
	position: relative;
}

.site-nav__list a {
	display: block;
	padding-block: var(--space-xs);
	color: var(--color-cream); /* trắng theo design system */
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: color var(--transition-base);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: var(--color-gold);
}

/* trang hiện tại: gạch chân vàng mảnh */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--color-gold);
	box-shadow: inset 0 -1px 0 var(--color-gold);
}

/* ---------- Dropdown Services ---------- */

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 260px;
	list-style: none;
	margin: 0;
	padding: var(--space-xs) 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__list .sub-menu a {
	padding: var(--space-xs) var(--space-sm);
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible {
	color: var(--color-gold);
	background: var(--color-bg-alt);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
}

.nav-toggle__bar {
	width: 22px;
	height: 2px;
	background: var(--color-text);
}

.mobile-menu {
	position: fixed;
	inset: 0;
	background: var(--color-bg);
	z-index: 99;
	padding: var(--space-xl) var(--space-md);
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu__list a {
	display: block;
	color: var(--color-cream);
	font-family: var(--font-display);
	font-stretch: var(--font-stretch-display);
	font-size: var(--fs-h3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: color var(--transition-base);
}

.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible {
	color: var(--color-gold);
}

.mobile-menu__list .sub-menu {
	list-style: none;
	margin: var(--space-xs) 0 0 var(--space-sm);
	padding: 0 0 0 var(--space-sm);
	border-left: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.mobile-menu__list .sub-menu a {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
}

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

	.nav-toggle {
		display: flex;
	}
}