/* Header — “cổng tiên giới” (ưu tiên thắng .km-streaming-ui trong main.css) */
body.ui-v4 .km-header {
	/* Giữ sticky như main.css — không dùng relative (sẽ hủy sticky, cả khối top + subnav) */
	position: sticky;
	top: var(--km-wpadminbar);
	z-index: 99950;
	flex-shrink: 0;
	align-self: stretch;
	width: 100%;
	background:
		var(--v4-grad-header-shine),
		var(--v4-grad-header),
		radial-gradient(ellipse 90% 120% at 50% -40%, var(--v4-vi-28), transparent 55%);
	border-bottom: 1px solid var(--v4-divider);
	box-shadow:
		0 1px 0 var(--v4-hl-10),
		0 14px 44px rgba(0, 0, 0, 0.52);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Họa tiết nhẹ — chỉ V4, không ảnh hưởng bản khác */
body.ui-v4 .km-header::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.4;
	background-image:
		radial-gradient(ellipse 55% 70% at 8% 15%, rgba(192, 132, 252, 0.2), transparent 52%),
		radial-gradient(ellipse 50% 65% at 92% 25%, rgba(244, 114, 182, 0.16), transparent 50%),
		repeating-linear-gradient(
			118deg,
			transparent 0 14px,
			rgba(253, 244, 255, 0.025) 14px 15px
		);
}

body.ui-v4 .km-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--v4-grad-line-strong);
	opacity: 1;
	pointer-events: none;
}

body.ui-v4 .km-header__top {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 65%);
}

/* Không cộng thêm khoảng trên khi WP Admin Bar đã chừa margin html */
body.admin-bar.ui-v4 .km-header__top {
	padding-top: 0;
}

body.admin-bar.ui-v4 .km-header {
	margin-top: 0;
}

body.ui-v4 .km-header--ui-x4 .km-logo,
body.ui-v4 .km-header--ui-x4 .custom-logo-link {
	filter: none;
}

body.ui-v4.km-streaming-ui .km-logo {
	font-family: var(--v4-font-display);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: transparent;
	background: var(--v4-grad-text-accent);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 0;
	text-shadow: none;
	filter: none;
}

body.ui-v4.km-streaming-ui .km-header__brand .custom-logo-link img {
	filter: none;
}

body.ui-v4 .km-header__tagline {
	color: var(--v4-text-dim);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Ô tìm — streaming: vuông vức hơn (khác pill 999px của streaming gốc) */
body.ui-v4 .km-search--streaming {
	border-radius: 10px;
	background: linear-gradient(165deg, rgba(42, 24, 68, 0.96) 0%, rgba(22, 12, 40, 0.94) 48%, rgba(14, 8, 26, 0.96) 100%);
	border: 1px solid var(--v4-hl-22);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 4px 26px rgba(0, 0, 0, 0.48),
		0 0 0 1px var(--v4-vi-18);
	transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

body.ui-v4 .km-search--streaming:focus-within {
	border-color: var(--v4-hl-52);
	box-shadow:
		0 0 0 2px var(--v4-hl-16),
		0 0 32px var(--v4-vi-35),
		0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

body.ui-v4 .km-search--streaming .km-search__submit--lead {
	border-radius: 8px;
	color: rgba(244, 236, 255, 0.48);
	background: transparent;
}

body.ui-v4 .km-search--streaming .km-search__submit--lead:hover {
	color: var(--v4-gold);
	background: var(--v4-hl-10);
}

body.ui-v4 .km-search--streaming:focus-within .km-search__submit--lead {
	color: var(--v4-gold);
}

body.ui-v4 .km-search--streaming .km-search__input {
	color: var(--v4-text-main);
}

body.ui-v4 .km-search--streaming .km-search__input::placeholder {
	color: var(--v4-text-dim);
	opacity: 0.85;
}

/* Ô tìm — layout cổ điển */
body.ui-v4 .km-search:not(.km-search--streaming) {
	background: rgba(28, 14, 48, 0.75);
	border: 1px solid var(--v4-hl-18);
}

body.ui-v4 .km-search:not(.km-search--streaming):focus-within {
	border-color: var(--v4-hl-45);
	box-shadow: 0 0 0 2px var(--v4-pk-12);
}

body.ui-v4 .km-search__input {
	background: transparent;
	border: none;
	color: var(--v4-text-main);
	border-radius: var(--v4-radius-md);
}

body.ui-v4 .km-search--streaming .km-search__input {
	border-radius: 6px;
}

body.ui-v4 .km-search__input:focus {
	outline: none;
}

body.ui-v4 .km-search__input::placeholder {
	color: var(--v4-text-dim);
}

body.ui-v4 .km-search__submit,
body.ui-v4 .km-search__submit--lead {
	color: var(--v4-gold);
}

body.ui-v4 .km-search:focus-within .km-search__submit {
	background: var(--v4-hl-20);
	color: var(--v4-gold);
}

/* Gợi ý tìm kiếm */
body.ui-v4 .km-search__suggest {
	background: linear-gradient(165deg, rgba(28, 14, 48, 0.98) 0%, rgba(12, 8, 24, 0.98) 100%);
	border: 1px solid var(--v4-hl-20);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.55),
		0 0 0 1px var(--v4-vi-15);
}

body.ui-v4 .km-suggest__item {
	border-bottom-color: var(--v4-divider);
}

body.ui-v4 .km-suggest__item:hover,
body.ui-v4 .km-suggest__item.is-active {
	background: var(--v4-hl-08);
}

body.ui-v4 .km-suggest__sub {
	color: var(--v4-gold);
}

body.ui-v4 .km-suggest__footer {
	color: var(--v4-gold);
	background: var(--v4-hl-06);
	border-top-color: var(--v4-divider);
}

body.ui-v4 .km-suggest__footer:hover {
	background: var(--v4-hl-12);
}

/* Nút công cụ header — khối vuông, viền gradient nhẹ (khác ô vuông cam V2) */
body.ui-v4 .km-tool-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: linear-gradient(168deg, rgba(62, 28, 92, 0.75) 0%, rgba(18, 8, 34, 0.92) 100%);
	border: 1px solid var(--v4-border);
	color: var(--v4-text-soft);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 4px 18px rgba(0, 0, 0, 0.4);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease,
		color 0.2s ease,
		background 0.2s ease;
}

body.ui-v4 .km-tool-btn:hover {
	border-color: var(--v4-hl-45);
	box-shadow:
		0 0 0 1px var(--v4-pk-22),
		0 8px 26px rgba(0, 0, 0, 0.48),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	color: var(--v4-text-main);
	transform: translateY(-2px);
	text-decoration: none;
}

body.ui-v4 .km-tool-btn:active {
	transform: translateY(0);
}

/* Menu phụ — cả streaming và mặc định */
body.ui-v4 .km-header__subnav-wrap {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, rgba(18, 10, 34, 0.96) 0%, rgba(10, 6, 22, 0.94) 100%);
	border-bottom: 1px solid var(--v4-divider);
	box-shadow: 0 1px 0 var(--v4-hl-06);
}

body.ui-v4 .km-header__subnav-wrap--streaming {
	background:
		radial-gradient(ellipse 80% 120% at 50% 120%, rgba(219, 39, 119, 0.08), transparent 45%),
		linear-gradient(180deg, rgba(16, 10, 32, 0.98) 0%, rgba(10, 6, 22, 0.96) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 1px 0 var(--v4-hl-08);
}

/* Hàng menu dưới: căn giữa (V4), khoảng cách rõ hơn streaming mặc định */
body.ui-v4 .km-subnav__list {
	justify-content: center;
	width: 100%;
}

body.ui-v4 .km-subnav__list--streaming {
	gap: 0.15rem 0.5rem;
	padding: 0.42rem 0;
}

body.ui-v4 .km-subnav__list--streaming > li + li {
	border-left: 1px solid var(--v4-hl-12);
}

body.ui-v4 .km-subnav__link {
	border-radius: var(--v4-radius-md);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.ui-v4 .km-subnav__link:hover {
	background: var(--v4-hl-08);
	color: var(--v4-text-main);
	box-shadow: inset 0 0 0 1px var(--v4-hl-18);
	text-decoration: none;
}

body.ui-v4 .km-subnav__link:hover .km-subnav__ico {
	color: var(--v4-gold);
}

body.ui-v4 .km-subnav__list--streaming .km-subnav__link {
	color: var(--v4-text-soft);
}

body.ui-v4 .km-subnav__list--streaming .km-subnav__link:hover {
	color: var(--v4-text-main);
	background: var(--v4-hl-09);
	box-shadow: inset 0 0 0 1px var(--v4-hl-24);
}

body.ui-v4 .km-subnav__list--streaming .km-subnav__link:hover .km-subnav__ico {
	color: var(--v4-gold);
}

body.ui-v4 .km-genre-nav__trigger[aria-expanded="true"] {
	color: var(--v4-gold);
	background: var(--v4-hl-12);
	box-shadow: inset 0 0 0 1px var(--v4-hl-32);
}

/* Dropdown thể loại */
body.ui-v4 .km-genre-nav__panel {
	background: linear-gradient(165deg, rgba(32, 16, 52, 0.98) 0%, rgba(12, 8, 26, 0.98) 100%);
	border: 1px solid var(--v4-hl-22);
	border-radius: var(--v4-radius-lg);
	box-shadow:
		0 24px 56px rgba(0, 0, 0, 0.55),
		0 0 0 1px var(--v4-vi-22),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.ui-v4 .km-genre-nav__item {
	color: var(--v4-text-soft);
}

body.ui-v4 .km-genre-nav__item:hover {
	background: var(--v4-hl-12);
	color: var(--v4-gold);
	text-decoration: none;
}

body.ui-v4 .km-genre-nav__footer {
	border-top-color: var(--v4-divider);
}

body.ui-v4 .km-genre-nav__all {
	color: var(--v4-gold);
	font-weight: 700;
	text-decoration: none;
}

body.ui-v4 .km-genre-nav__all:hover {
	color: #fce7f3;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* User menu */
body.ui-v4 .km-user-menu__panel {
	background: linear-gradient(165deg, rgba(32, 16, 52, 0.98) 0%, rgba(14, 8, 28, 0.98) 100%);
	border: 1px solid var(--v4-hl-20);
	border-radius: var(--v4-radius-lg);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.55),
		0 0 0 1px var(--v4-vi-15);
}

body.ui-v4 .km-user-menu__panel::before {
	content: "";
	display: block;
	height: 3px;
	margin: -1px -1px 0;
	border-radius: var(--v4-radius-lg) var(--v4-radius-lg) 0 0;
	background: var(--v4-grad-line);
}

body.ui-v4 .km-user-menu__info {
	border-bottom-color: var(--v4-divider);
}

body.ui-v4 .km-user-menu__name {
	color: var(--v4-text-main);
}

body.ui-v4 .km-user-menu__role {
	color: var(--v4-text-dim);
}

body.ui-v4 .km-user-menu__link {
	color: var(--v4-text-soft);
}

body.ui-v4 .km-user-menu__link:hover {
	color: var(--v4-gold);
	background: var(--v4-hl-10);
	text-decoration: none;
}

body.ui-v4 .km-user-menu__link--danger {
	color: rgba(255, 150, 160, 0.95);
}

body.ui-v4 .km-user-menu__link--danger:hover {
	color: var(--v4-danger);
	background: var(--v4-deep-12);
}

/* Mobile: nút menu + drawer (cùng header) */
body.ui-v4 .km-nav-toggle {
	background: linear-gradient(160deg, rgba(48, 28, 78, 0.92) 0%, rgba(20, 10, 36, 0.96) 100%);
	border: 1px solid var(--v4-hl-16);
	color: var(--v4-text-main);
	border-radius: var(--v4-radius-md);
}

body.ui-v4 .km-nav-toggle:hover {
	border-color: var(--v4-hl-38);
	color: var(--v4-gold);
}

body.ui-v4 .km-drawer__list a:hover {
	color: var(--v4-gold);
}

body.ui-v4 .km-drawer__genre-all a {
	color: var(--v4-gold) !important;
}