/* Watch / episode */
.ui-v4 .km-watch {
	position: relative;
}

.ui-v4 .km-watch::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 85% 55% at 50% -10%, var(--v4-vi-22), transparent 58%),
		radial-gradient(ellipse 70% 50% at 50% 0%, var(--v4-pk-12), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.ui-v4 .km-watch__player-block,
.ui-v4 .km-watch__breadcrumb {
	position: relative;
	z-index: 1;
}

.ui-v4 .km-player-shell {
	border-radius: var(--v4-radius-lg);
	border: 1px solid var(--v4-edge);
	background: var(--v4-surface-1);
	box-shadow: var(--v4-shadow-elevated);
	overflow: hidden;
	position: relative;
}

.ui-v4 .km-player-shell::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	z-index: 2;
}

.ui-v4 .km-player__jw,
.ui-v4 .km-player__frame {
	border-radius: calc(var(--v4-radius-lg) - 4px);
}

.ui-v4 [data-km-player-switch] {
	border-color: var(--v4-edge);
	color: var(--v4-text-soft);
}

.ui-v4 [data-km-player-switch].is-active {
	background: var(--v4-surface-3);
	color: var(--v4-gold);
	border-color: var(--v4-gold);
}

.ui-v4 .km-ep-sidebar,
.ui-v4 .km-episodes-panel {
	background: var(--v4-surface-2);
	border: 1px solid var(--v4-edge);
	border-radius: var(--v4-radius-lg);
}

.ui-v4 .km-ep404 {
	border: 1px solid var(--v4-edge);
	border-radius: var(--v4-radius-lg);
	background: var(--v4-surface-2);
}

.ui-v4 .km-ep404__ep-btn {
	border: 1px solid var(--v4-edge);
	border-radius: var(--v4-radius-md);
	background: var(--v4-surface-3);
	color: var(--v4-text-main);
}

.ui-v4 .km-ep404__ep-btn:hover {
	border-color: var(--v4-gold);
	color: var(--v4-gold);
}

/* Ghi đè theme streaming (cam) — trang xem tập */
body.ui-v4.km-streaming-ui .km-watch {
	background: transparent;
}

body.ui-v4.km-streaming-ui .km-watch__below,
body.ui-v4.km-streaming-ui .km-watch__ep-sections {
	position: relative;
	z-index: 1;
}

body.ui-v4.km-streaming-ui a.km-watch-nav-btn.km-watch-nav-btn--next:not(.km-watch-nav-btn--disabled) {
	background: rgba(28, 14, 48, 0.9);
	border: 1px solid var(--v4-border);
	color: var(--v4-text-soft);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition:
		border-color 0.2s ease,
		color 0.2s ease,
		background 0.2s ease,
		transform 0.2s ease;
}

body.ui-v4.km-streaming-ui a.km-watch-nav-btn.km-watch-nav-btn--next:not(.km-watch-nav-btn--disabled):hover {
	border-color: var(--v4-hl-45);
	color: var(--v4-text-main);
	background: rgba(40, 22, 68, 0.95);
	transform: translateY(-1px);
	text-decoration: none;
}

body.ui-v4.km-streaming-ui .km-watch-nav-btn--disabled {
	background: rgba(18, 10, 34, 0.94);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.36);
	box-shadow: none;
}

body.ui-v4.km-streaming-ui a.km-watch-nav-btn:not(.km-watch-nav-btn--next):hover:not(.km-watch-nav-btn--disabled) {
	filter: brightness(1.07);
	border-color: rgba(255, 255, 255, 0.24);
	text-decoration: none;
}

body.ui-v4.km-streaming-ui a.km-watch-nav-btn:not(.km-watch-nav-btn--next) {
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.48),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	text-shadow: var(--v4-on-gradient-shadow);
}

body.ui-v4.km-streaming-ui .km-watch__title-suffix {
	color: var(--v4-gold);
	font-weight: 700;
}

body.ui-v4.km-streaming-ui .km-watch__ep-heading {
	color: var(--v4-gold);
}

body.ui-v4.km-streaming-ui .km-watch__ep-heading::after {
	background: linear-gradient(90deg, rgba(192, 132, 252, 0.55), transparent);
}

body.ui-v4.km-streaming-ui .km-watch .km-ep-pill {
	background: rgba(22, 12, 44, 0.92);
	border-color: var(--v4-border);
	color: var(--v4-text-soft);
}

body.ui-v4.km-streaming-ui .km-watch .km-ep-pill:hover {
	background: rgba(34, 18, 58, 0.95);
	border-color: var(--v4-hl-28);
	color: var(--v4-text-main);
}

body.ui-v4.km-streaming-ui .km-watch .km-ep-pill.is-watch-current,
body.ui-v4.km-streaming-ui .km-watch .km-ep-pill.is-current {
	background: var(--v4-grad-cta);
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--v4-on-gradient);
	text-shadow: var(--v4-on-gradient-shadow);
	box-shadow:
		0 4px 22px var(--v4-vi-35),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.ui-v4.km-streaming-ui .km-server-btn:not(.is-active) {
	background: rgba(28, 14, 48, 0.85);
	border-color: var(--v4-border);
	color: var(--v4-text-soft);
}

body.ui-v4.km-streaming-ui .km-server-btn:not(.is-active):hover:not(:disabled) {
	background: rgba(40, 22, 68, 0.94);
	border-color: var(--v4-hl-38);
	color: var(--v4-text-main);
}

body.ui-v4.km-streaming-ui .km-watch__stars-inline .km-stars__full {
	color: var(--v4-gold);
}
