/*
 * KiraMovies — dark anime-inspired UI
 */

:root {
	--km-bg: #0a0b0f;
	--km-surface: #111218;
	--km-surface2: #181a22;
	--km-elevated: #1e212b;
	--km-text: #eef0f5;
	--km-muted: #8b93a8;
	--km-accent: #4f8cff;
	--km-accent-hover: #6ba3ff;
	--km-accent2: #c9a227;
	--km-line: rgba(255, 255, 255, 0.06);
	--km-line-accent: rgba(79, 140, 255, 0.16);
	--km-radius: 14px;
	--km-radius-sm: 10px;
	--km-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
	--km-max: 1240px;
	--km-header-top: 64px;
	/* Khoảng cách ngang tiêu chuẩn — dùng nhất quán cho container và breakout */
	--km-gutter: 1rem;
	/* Chiều cao #wpadminbar khi đăng nhập — tránh sticky header chui dưới thanh đen */
	--km-wpadminbar: 0px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Chặn horizontal scroll toàn trang (clip: không tạo scroll container, sticky vẫn OK) */
	overflow-x: clip;
	/* Tránh text dài (URL, từ dài) làm vỡ layout trên mobile */
	overflow-wrap: break-word;
	word-break: break-word;
}

body {
	margin: 0;
	font-family: var(--km-font);
	background: var(--km-bg);
	color: var(--km-text);
	line-height: 1.55;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	/* Anchor không lọt dưới sticky header — --km-header-h được JS cập nhật thực tế */
	scroll-padding-top: calc(var(--km-wpadminbar) + var(--km-header-h, 120px) + 1rem);
	/* iOS Safari: html overflow-x:clip đơn lẻ không đủ — cần body cũng clip */
	overflow-x: clip;
}

body.admin-bar {
	--km-wpadminbar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--km-wpadminbar: 46px;
	}
}

/* Header mobile = 2 hàng top-inner (brand+tools / search) — không còn subnav */
@media (max-width: 900px) {
	:root {
		--km-header-top: 114px;
	}
}
@media (max-width: 480px) {
	:root {
		--km-header-top: 104px;
	}
}

a {
	color: var(--km-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.km-container {
	width: 100%;
	max-width: var(--km-max);
	margin-inline: auto;
	padding-inline:
		max(var(--km-gutter), env(safe-area-inset-left, 0px))
		max(var(--km-gutter), env(safe-area-inset-right, 0px));
}

@media (max-width: 900px) {
	.km-container {
		padding-inline: max(1.25rem, env(safe-area-inset-left, 0px))
		                max(1.25rem, env(safe-area-inset-right, 0px));
	}
}

@media (max-width: 360px) {
	.km-container {
		padding-inline: max(0.85rem, env(safe-area-inset-left, 0px))
		                max(0.85rem, env(safe-area-inset-right, 0px));
	}
}

@media (min-width: 1272px) {
	.km-container {
		padding-inline: 0;
	}
}

/* Nội dung + footer: tách khỏi header flex để sticky header ổn định trên WebKit/mobile */
.km-body-flow {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	min-height: 0;
}

.km-body-flow .km-main {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	/* Chặn overflow ngang trên toàn nội dung trang
	   Không đặt trên km-body-flow vì km-bnav (position:fixed) nằm trong km-body-flow */
	overflow-x: clip;
}

/* Header — portal bar + subnav (sticky; hàng menu dưới là phần cuối của block này) */
.km-header {
	position: sticky;
	top: var(--km-wpadminbar);
	z-index: 99950;
	flex-shrink: 0;
	align-self: stretch;
	width: 100%;
	background-color: var(--km-bg);
	background: linear-gradient(180deg, rgba(10, 11, 15, 0.97), rgba(10, 11, 15, 0.93));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--km-line);
}

.km-header__top {
	padding-top: env(safe-area-inset-top, 0px);
	border-bottom: 1px solid var(--km-line);
}

.km-header__top-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 1.25rem;
	min-height: var(--km-header-top);
	padding-block: 0.5rem;
}

.km-logo {
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--km-text);
	letter-spacing: -0.02em;
	background: linear-gradient(110deg, var(--km-accent), #8ec5ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.km-logo:hover {
	text-decoration: none;
	opacity: 0.92;
}

.km-header__brand .custom-logo-link img {
	max-height: 40px;
	width: auto;
}

/* Search */
.km-search {
	display: flex;
	align-items: center;
	max-width: 420px;
	width: 100%;
	margin-inline: auto;
	background: var(--km-surface2);
	border: 1.5px solid rgba(255,255,255,0.07);
	border-radius: 999px;
	padding: 0 0.3rem 0 1.1rem;
	gap: 0.25rem;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.km-search:focus-within {
	border-color: var(--km-accent);
	background: var(--km-surface);
	box-shadow:
		0 0 0 3px rgba(79, 140, 255, 0.18),
		0 0 16px rgba(79, 140, 255, 0.10);
}

.km-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--km-text);
	font: inherit;
	font-size: 0.9rem;
	padding: 0.35rem 0;
	outline: none;
}

.km-search__input::placeholder {
	color: var(--km-muted);
	opacity: 0.7;
}

/* Ẩn native browser clear button — dùng button custom nếu cần */
.km-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.km-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: var(--km-elevated);
	color: var(--km-accent-hover);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, transform 0.1s;
}

.km-search:focus-within .km-search__submit {
	background: var(--km-accent);
	color: #fff;
}

.km-search__submit:hover {
	background: var(--km-accent);
	color: #fff;
	transform: scale(1.06);
}

/* ── Search suggest dropdown ──────────────────────────────────── */
.km-search {
	position: relative;
}

.km-search__suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 99960;
	background: var(--km-surface, #12141e);
	border: 1.5px solid rgba(79, 140, 255, 0.2);
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.6),
		0 2px 8px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(79, 140, 255, 0.06);
	max-height: 480px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.km-suggest__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem 1rem;
	color: var(--km-text);
	text-decoration: none;
	border-bottom: 1px solid var(--km-line);
	transition: background 0.12s;
	cursor: pointer;
}

.km-suggest__item:last-of-type {
	border-bottom: none;
}

.km-suggest__item:hover,
.km-suggest__item.is-active {
	background: var(--km-surface2, #1a1d2b);
	text-decoration: none;
	color: var(--km-text);
}

.km-suggest__poster {
	flex-shrink: 0;
	width: 44px;
	height: 66px;
	border-radius: 6px;
	object-fit: cover;
	background: var(--km-elevated);
	display: block;
}

.km-suggest__poster--empty {
	background: linear-gradient(145deg, var(--km-elevated), var(--km-surface2));
}

.km-suggest__info {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	min-width: 0;
}

.km-suggest__title {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--km-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.km-suggest__sub {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--km-accent-hover, #6fa3ff);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.km-suggest__meta {
	font-size: 0.75rem;
	color: var(--km-muted);
}

.km-suggest__empty {
	margin: 0;
	padding: 1.1rem 1.25rem;
	font-size: 0.9rem;
	color: var(--km-muted);
	text-align: center;
}

.km-suggest__footer {
	display: block;
	padding: 0.75rem 1rem;
	text-align: center;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--km-accent-hover);
	background: rgba(79, 140, 255, 0.05);
	border-top: 1px solid var(--km-line);
	text-decoration: none;
	transition: background 0.12s;
}

.km-suggest__footer:hover {
	background: rgba(79, 140, 255, 0.12);
	text-decoration: none;
}

/* Header tools */
.km-header__tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
}

.km-tool-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--km-radius-sm);
	color: var(--km-muted);
	transition: color 0.15s, background 0.15s;
}

.km-tool-btn:hover {
	color: var(--km-text);
	background: var(--km-surface2);
	text-decoration: none;
}

/* Subnav desktop */
.km-header__subnav-wrap {
	background: var(--km-surface);
	border-bottom: 1px solid var(--km-line);
}

.km-subnav__list {
	list-style: none;
	margin: 0;
	padding: 0.4rem 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.15rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.km-subnav__list::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.km-subnav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.75rem;
	border-radius: var(--km-radius-sm);
	color: var(--km-muted);
	font-size: 0.88rem;
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.15s, background 0.15s;
}

.km-subnav__link:hover {
	color: var(--km-text);
	background: rgba(255, 255, 255, 0.04);
	text-decoration: none;
}

.km-subnav__ico {
	display: flex;
	opacity: 0.85;
}

.km-subnav__link:hover .km-subnav__ico {
	color: var(--km-accent);
}

/* ── Genre dropdown (desktop subnav) ─────────────────────────────────────── */

.km-genre-nav {
	position: relative;
}

.km-genre-nav__trigger {
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--km-font);
}

.km-genre-nav__arrow {
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: 0.1rem;
}

.km-genre-nav[aria-expanded="true"] .km-genre-nav__arrow,
.km-genre-nav__trigger[aria-expanded="true"] .km-genre-nav__arrow {
	transform: rotate(180deg);
}

.km-genre-nav__panel {
	position: fixed;
	z-index: 99999;
	/* min-width không được vượt quá max-width (tránh panel rộng hơn viewport trên mobile) */
	min-width: min(400px, calc(100vw - 2 * max(var(--km-gutter), env(safe-area-inset-left, 0px))));
	max-width: calc(100vw - 2 * max(var(--km-gutter), env(safe-area-inset-left, 0px)));
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
	padding: 0.75rem;
	animation: km-genre-panel-in 0.18s ease;
}

@keyframes km-genre-panel-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.km-genre-nav__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.1rem 0.5rem;
}

.km-genre-nav__item {
	display: block;
	padding: 0.4rem 0.6rem;
	border-radius: var(--km-radius-sm);
	color: var(--km-muted);
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.12s, background 0.12s;
}

.km-genre-nav__item:hover {
	color: var(--km-text);
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
}

.km-genre-nav__footer {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--km-line);
	text-align: center;
}

.km-genre-nav__all {
	font-size: 0.8rem;
	color: var(--km-accent);
	font-weight: 600;
}

.km-genre-nav__all:hover {
	text-decoration: underline;
}

/* ── Genre accordion (mobile drawer) ─────────────────────────────────────── */


.km-drawer__genre-toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--km-font);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--km-text);
	padding: 0.85rem 0;
	text-align: left;
}

.km-drawer__genre-toggle > svg:first-child {
	flex-shrink: 0;
	opacity: 0.7;
}

.km-drawer__genre-arrow {
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: auto;
	opacity: 0.5;
}

.km-drawer__genre-toggle[aria-expanded="true"] .km-drawer__genre-arrow {
	transform: rotate(180deg);
}

.km-drawer__genre-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.km-drawer__genre-list[hidden] {
	display: none;
}

.km-drawer__genre-list li a {
	display: block;
	padding: 0.45rem 1rem;
	font-size: 0.88rem;
	color: var(--km-muted);
	transition: color 0.12s;
}

.km-drawer__genre-list li a:hover {
	color: var(--km-accent);
	text-decoration: none;
}

.km-drawer__genre-all a {
	grid-column: 1 / -1;
	color: var(--km-accent) !important;
	font-weight: 600;
	padding-top: 0.6rem !important;
}

/* Mobile drawer + toggle */
.km-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-sm);
	background: var(--km-surface2);
	cursor: pointer;
	color: var(--km-text);
}

.km-nav-toggle__ico {
	display: block;
}

.km-nav-toggle__ico--close {
	display: none;
}

.km-nav-toggle[aria-expanded="true"] .km-nav-toggle__ico--open {
	display: none;
}

.km-nav-toggle[aria-expanded="true"] .km-nav-toggle__ico--close {
	display: block;
}

.km-drawer[hidden] {
	display: none !important;
}

/* Drawer overlay — phủ full màn hình từ dưới header xuống đáy màn hình.
   Đã tách ra ngoài <header> để tránh lỗi Safari: backdrop-filter tạo containing block
   mới cho position:fixed, khiến drawer bị giới hạn chiều cao theo header. */
.km-drawer:not([hidden]) {
	display: block;
	position: fixed;
	inset: 0;
	top: calc(var(--km-wpadminbar) + var(--km-header-h, var(--km-header-top)));
	z-index: 99945;
	background: rgba(5, 6, 10, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: kmFade 0.22s ease;
}

@keyframes kmFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Panel trượt từ trái sang */
.km-drawer__inner {
	position: absolute;
	left: 0;           /* ← trái */
	right: auto;
	top: 0;
	bottom: 0;
	width: min(82%, 300px);
	background: var(--km-surface);
	border-right: 1px solid var(--km-line);  /* viền bên phải panel */
	border-left: none;
	padding: 1.25rem 1.25rem max(1.25rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
	overflow-y: auto;
	box-shadow: 12px 0 40px rgba(0, 0, 0, 0.4);  /* bóng đổ sang phải */
	animation: kmSlideInLeft 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes kmSlideInLeft {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

.km-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-drawer__list li {
	border-bottom: 1px solid var(--km-line);
}

.km-drawer__list a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 0;
	color: var(--km-text);
	font-weight: 500;
	font-size: 0.95rem;
}

.km-drawer__list a svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.km-drawer__list a:hover {
	color: var(--km-accent-hover);
	text-decoration: none;
}

.km-drawer__wp {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--km-line);
}

/* Search box ở đầu drawer sidebar */
.km-drawer__search {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--km-line);
}

.km-drawer__search .km-search {
	max-width: none;
	margin: 0;
	display: flex;
}

@media (max-width: 900px) {
	/* 3 cột: toggle trái | brand giữa | tools phải — search chuyển vào drawer */
	.km-header__top-inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "toggle brand tools";
	}

	.km-header__brand {
		grid-area: brand;
		justify-self: start;
	}

	/* Ẩn search ở header — hiển thị trong drawer sidebar */
	.km-header__top-inner .km-search {
		display: none;
	}

	.km-header__tools {
		grid-area: tools;
		justify-self: end;
		margin-left: 0;
	}

	/* Hamburger ở góc trái — đúng vị trí với left-side drawer */
	.km-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		grid-area: toggle;
		justify-self: start;
	}

	/* Subnav ẩn trên mobile — menu nằm trong drawer trái */
	.km-header__subnav-wrap--desktop {
		display: none;
	}
}

/* Drawer chỉ ẩn trên desktop */
@media (min-width: 901px) {
	.km-drawer {
		display: none !important;
	}
}

/* Legacy primary menu (fallback pages) */
.km-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	align-items: center;
}

.km-nav__list a {
	color: var(--km-muted);
	font-weight: 500;
}

.km-nav__list a:hover {
	color: var(--km-text);
	text-decoration: none;
}

/* Home portal */
.km-home {
	padding-bottom: 0;
}

.km-front-page-static {
	padding: 2rem 0 2.5rem;
	border-top: 1px solid var(--km-line);
	margin-top: -1px;
}

.km-home-section {
	padding: 2rem 0 2.75rem;
}

.km-home-section--trending {
	padding-top: 2.25rem;
	padding-bottom: 2.5rem;
	position: relative;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79, 140, 255, 0.08) 0%, transparent 65%),
		radial-gradient(ellipse 55% 45% at 15% 100%, rgba(124, 92, 255, 0.07) 0%, transparent 60%),
		radial-gradient(ellipse 55% 45% at 85% 100%, rgba(50, 190, 230, 0.07) 0%, transparent 60%);
	border-top: 1px solid rgba(79, 140, 255, 0.14);
	border-bottom: 1px solid rgba(124, 92, 255, 0.12);
}

.km-home-section--schedule {
	padding-bottom: 0;
	padding-top: 0;
}

.km-home-section--grid {
	padding-top: 0.75rem;
	padding-bottom: 1.5rem;
}

/* ── Day-of-week filter tab bar ─────────────────────────────── */
/* ── Day filter animations ───────────────────────────────────────── */
@keyframes km-tab-shimmer {
	0%   { background-position: 200% center; }
	100% { background-position: -200% center; }
}

@keyframes km-tab-glow-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(80, 150, 255, 0.3),
			0 4px 16px rgba(13, 86, 184, 0.55),
			inset 0 1px 0 rgba(255, 255, 255, 0.18);
	}
	50% {
		box-shadow:
			0 0 0 2px rgba(100, 180, 255, 0.5),
			0 6px 28px rgba(13, 86, 184, 0.85),
			0 0 16px rgba(60, 140, 255, 0.4),
			inset 0 1px 0 rgba(255, 255, 255, 0.25);
	}
}

@keyframes km-today-pulse {
	0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
	50%       { opacity: 1;   transform: translateX(-50%) scale(1.5); box-shadow: 0 0 8px rgba(255,255,255,0.9); }
}

.km-day-filter {
	margin-bottom: 1.35rem;
}

.km-day-filter__track {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.4rem;
	padding-bottom: 2px;
}

.km-day-filter__tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	padding: 0.55rem 0.4rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: var(--km-elevated, #1a1d2b);
	color: var(--km-muted, #8892a8);
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.16s, box-shadow 0.22s;
}

.km-day-filter__tab:hover {
	background: var(--km-surface2, #222638);
	border-color: rgba(100, 160, 255, 0.3);
	color: var(--km-text, #e8eaf0);
	text-decoration: none;
	transform: translateY(-1px);
}

/* Shimmer sweep overlay on active tab */
.km-day-filter__tab--active::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 30%,
		rgba(255, 255, 255, 0.14) 50%,
		transparent 70%
	);
	background-size: 200% 100%;
	animation: km-tab-shimmer 2.4s linear infinite;
	pointer-events: none;
	border-radius: inherit;
}

.km-day-filter__tab--active {
	background: linear-gradient(135deg, #1e7aec 0%, #0d56b8 55%, #0944a6 100%);
	border-color: rgba(130, 190, 255, 0.55);
	color: #ffffff;
	animation: km-tab-glow-pulse 2.6s ease-in-out infinite;
	transform: translateY(-1px);
}

.km-day-filter__tab--active:hover {
	background: linear-gradient(135deg, #2585f5 0%, #1367d4 55%, #0d52bf 100%);
	color: #ffffff;
	transform: translateY(-2px);
}

.km-day-filter__en {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1;
}

.km-day-filter__vi {
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1;
	opacity: 0.82;
}

.km-day-filter__tab--active .km-day-filter__vi {
	opacity: 0.9;
}

/* Today dot — pulsing when active */
.km-day-filter__today-dot {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

.km-day-filter__tab--active .km-day-filter__today-dot {
	background: rgba(255, 255, 255, 0.95);
	opacity: 1;
	animation: km-today-pulse 1.8s ease-in-out infinite;
}

/* Today tab (non-active) — cyan tint */
.km-day-filter__tab--today:not(.km-day-filter__tab--active) {
	border-color: rgba(56, 189, 248, 0.45);
	color: #7dd3fc;
}

.km-day-filter__tab--today:not(.km-day-filter__tab--active):hover {
	background: rgba(56, 189, 248, 0.1);
	border-color: rgba(56, 189, 248, 0.6);
}

/* Mobile: allow horizontal scroll instead of cramping 8 cols */
@media (max-width: 640px) {
	.km-day-filter__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.km-day-filter__track::-webkit-scrollbar { display: none; }
	.km-day-filter__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
		padding: 0.45rem 0.8rem;
		white-space: nowrap;
	}
}

.km-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.35rem;
}

.km-section-head--compact {
	justify-content: flex-start;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}

.km-section-head__title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.km-section-head__title--accent {
	color: var(--km-accent2, #d4a524);
}

.km-section-head__mark {
	display: flex;
	color: #f0a030;
	filter: drop-shadow(0 0 6px rgba(240, 160, 48, 0.7));
	animation: km-flame-pulse 2.4s ease-in-out infinite;
}

@keyframes km-flame-pulse {
	0%, 100% { filter: drop-shadow(0 0 5px rgba(240, 160, 48, 0.65)); }
	50%       { filter: drop-shadow(0 0 12px rgba(255, 110, 20, 0.9)) drop-shadow(0 0 22px rgba(255, 60, 0, 0.45)); }
}

.km-section-head__desc {
	margin: 0;
	width: 100%;
	font-size: 0.88rem;
	color: var(--km-muted);
	max-width: 36rem;
}

.km-section-head__link {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--km-accent-hover);
}

.km-section-head__link:hover {
	text-decoration: none;
	opacity: 0.9;
}

.km-muted-text {
	color: var(--km-muted);
	margin: 0;
}

.km-home-grid-meta {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
}

/* Home grid pagination (paginate_links) */
.km-pagination {
	margin: 1.35rem 0 0;
}

.km-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-pagination .page-numbers li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-pagination a.page-numbers,
.km-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	min-height: 2.35rem;
	padding: 0 0.45rem;
	font-size: 0.88rem;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid var(--km-line);
	background: var(--km-elevated);
	color: var(--km-text);
	text-decoration: none;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.km-pagination a.page-numbers:hover {
	border-color: color-mix(in srgb, var(--km-accent) 45%, var(--km-line));
	color: var(--km-accent-hover);
}

.km-pagination span.page-numbers.current {
	background: linear-gradient(145deg, color-mix(in srgb, var(--km-accent) 88%, #1a3a8a), var(--km-accent));
	border-color: color-mix(in srgb, var(--km-accent) 65%, transparent);
	color: #fff;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--km-accent) 28%, transparent);
}

.km-pagination span.page-numbers.dots {
	min-width: auto;
	border: none;
	background: transparent;
	color: var(--km-muted);
}

/* Trending carousel */
.km-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 -0.25rem;
}

.km-carousel__track {
	display: flex;
	gap: 1.1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.75rem 0.5rem 1.25rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1;
}

.km-carousel__track--marquee {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.km-carousel__track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.km-carousel__btn {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(100, 160, 255, 0.35);
	background: rgba(20, 28, 52, 0.72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #a8ceff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
	box-shadow:
		0 0 0 1px rgba(60, 110, 255, 0.15),
		0 4px 18px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(180, 220, 255, 0.1);
}

.km-carousel__btn:hover {
	border-color: rgba(160, 210, 255, 0.7);
	background: rgba(30, 50, 100, 0.85);
	color: #dff0ff;
	transform: scale(1.1);
	box-shadow:
		0 0 0 1px rgba(100, 170, 255, 0.3),
		0 0 18px rgba(60, 130, 255, 0.4),
		0 6px 24px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(180, 220, 255, 0.18);
}

@media (max-width: 640px) {
	.km-carousel__btn {
		display: none;
	}
}

.km-trend-card {
	flex: 0 0 clamp(150px, 44vw, 215px);
	scroll-snap-align: start;
}

.km-trend-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.km-trend-card__link:hover {
	text-decoration: none;
	color: inherit;
}

.km-trend-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	--km-trend-chamfer: clamp(10px, 2.5vw, 16px);
	--km-trend-neon: rgba(120, 200, 255, 0.95);
	border-radius: 0;
	overflow: hidden;
	background: var(--km-surface2);
	border: 1.5px solid var(--km-trend-neon);
	-webkit-clip-path: polygon(
		var(--km-trend-chamfer) 0%,
		calc(100% - var(--km-trend-chamfer)) 0%,
		100% var(--km-trend-chamfer),
		100% calc(100% - var(--km-trend-chamfer)),
		calc(100% - var(--km-trend-chamfer)) 100%,
		var(--km-trend-chamfer) 100%,
		0% calc(100% - var(--km-trend-chamfer)),
		0% var(--km-trend-chamfer)
	);
	clip-path: polygon(
		var(--km-trend-chamfer) 0%,
		calc(100% - var(--km-trend-chamfer)) 0%,
		100% var(--km-trend-chamfer),
		100% calc(100% - var(--km-trend-chamfer)),
		calc(100% - var(--km-trend-chamfer)) 100%,
		var(--km-trend-chamfer) 100%,
		0% calc(100% - var(--km-trend-chamfer)),
		0% var(--km-trend-chamfer)
	);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, filter 0.25s ease;
	filter:
		drop-shadow(0 0 4px rgba(120, 210, 255, 0.9))
		drop-shadow(0 0 14px rgba(79, 140, 255, 0.6))
		drop-shadow(0 0 28px rgba(124, 92, 255, 0.38));
}

.km-trend-card__media::after {
	display: none;
}

/* Shimmer sweep on hover */
.km-trend-card__media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255, 255, 255, 0.12) 50%,
		transparent 70%
	);
	background-size: 250% 100%;
	background-position: 200% 0;
	pointer-events: none;
	transition: background-position 0.55s ease;
}

.km-trend-card__link:hover .km-trend-card__media::before {
	background-position: -50% 0;
}

.km-trend-card__link:hover .km-trend-card__media {
	transform: translateY(-8px) scale(1.03);
	border-color: rgba(220, 250, 255, 1);
	filter:
		drop-shadow(0 0 8px rgba(180, 240, 255, 1))
		drop-shadow(0 0 20px rgba(79, 140, 255, 0.75))
		drop-shadow(0 0 38px rgba(150, 110, 255, 0.55))
		drop-shadow(0 18px 32px rgba(0, 0, 0, 0.55));
}

.km-trend-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.km-trend-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--km-elevated), var(--km-bg));
}

.km-trend-card__score {
	position: absolute;
	bottom: 0.55rem;
	right: 0.55rem;
	z-index: 3;
	font-size: 0.75rem;
	font-weight: 800;
	padding: 0.22rem 0.5rem;
	border-radius: 7px;
	background:
		radial-gradient(ellipse 80% 55% at 30% 20%, rgba(255, 255, 200, 0.55) 0%, transparent 55%),
		linear-gradient(135deg, #f0c020 0%, #d4890a 60%, #a86005 100%);
	color: #1a1000;
	border: 1px solid rgba(255, 230, 100, 0.5);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.45),
		0 0 10px rgba(240, 170, 20, 0.4);
	text-shadow: 0 1px 0 rgba(255, 240, 150, 0.4);
	letter-spacing: 0.01em;
}

/* Rank badge on poster (top leaderboard) */
.km-rank-badge {
	position: absolute;
	top: 0.35rem;
	left: 0.35rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #0c0e14;
	border-radius: 14px;
	box-sizing: border-box;
}

/* Bục 1–3: to, nổi bật — vàng / bạc / đồng */
.km-rank-badge--gold {
	min-width: 3.4rem;
	height: 3.4rem;
	padding: 0 0.35rem;
	font-size: 1.55rem;
	border-radius: 16px;
	border: 2px solid rgba(255, 248, 210, 0.95);
	background:
		radial-gradient(ellipse 80% 55% at 35% 22%, rgba(255, 255, 255, 0.95) 0%, transparent 55%),
		linear-gradient(155deg, #fff6a8 0%, #ffd028 22%, #f0a000 52%, #c97808 78%, #8a4d06 100%);
	color: #2a1a05;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.55),
		0 -1px 0 rgba(180, 90, 0, 0.35);
	box-shadow:
		0 0 0 1px rgba(255, 220, 120, 0.5),
		0 6px 22px rgba(0, 0, 0, 0.45),
		0 0 32px rgba(255, 185, 40, 0.55),
		inset 0 2px 0 rgba(255, 255, 255, 0.45),
		inset 0 -3px 8px rgba(160, 80, 0, 0.35);
}

.km-rank-badge--silver {
	min-width: 3.05rem;
	height: 3.05rem;
	padding: 0 0.3rem;
	font-size: 1.38rem;
	border-radius: 15px;
	border: 2px solid rgba(255, 255, 255, 0.75);
	background:
		radial-gradient(ellipse 75% 50% at 32% 20%, rgba(255, 255, 255, 0.98) 0%, transparent 50%),
		linear-gradient(155deg, #ffffff 0%, #e2eaf2 28%, #a8b4c4 55%, #6a7788 82%, #4a5568 100%);
	color: #151b24;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.65),
		0 -1px 0 rgba(60, 80, 100, 0.25);
	box-shadow:
		0 0 0 1px rgba(200, 220, 255, 0.35),
		0 6px 20px rgba(0, 0, 0, 0.42),
		0 0 26px rgba(180, 210, 255, 0.4),
		inset 0 2px 0 rgba(255, 255, 255, 0.55),
		inset 0 -3px 10px rgba(80, 100, 130, 0.25);
}

.km-rank-badge--bronze {
	min-width: 2.85rem;
	height: 2.85rem;
	padding: 0 0.28rem;
	font-size: 1.25rem;
	border-radius: 14px;
	border: 2px solid rgba(255, 200, 150, 0.65);
	background:
		radial-gradient(ellipse 72% 48% at 34% 22%, rgba(255, 220, 190, 0.9) 0%, transparent 48%),
		linear-gradient(155deg, #ffd4b0 0%, #e09050 32%, #b86528 58%, #7a4218 88%, #4a280e 100%);
	color: #1f0f06;
	text-shadow:
		0 1px 0 rgba(255, 220, 190, 0.45),
		0 -1px 0 rgba(100, 45, 15, 0.35);
	box-shadow:
		0 0 0 1px rgba(255, 160, 80, 0.35),
		0 5px 18px rgba(0, 0, 0, 0.42),
		0 0 24px rgba(230, 120, 50, 0.45),
		inset 0 2px 0 rgba(255, 200, 160, 0.35),
		inset 0 -3px 8px rgba(90, 40, 15, 0.35);
}

.km-rank-badge--rest {
	min-width: 2.2rem;
	height: 2.2rem;
	top: 0.45rem;
	left: 0.45rem;
	padding: 0 0.45rem;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	border-radius: 10px;
	background:
		radial-gradient(ellipse 70% 50% at 35% 25%, rgba(180, 220, 255, 0.22) 0%, transparent 55%),
		linear-gradient(145deg, #2a3a5c 0%, #1a2240 55%, #161c34 100%);
	color: #c8e0ff;
	border: 1px solid rgba(100, 160, 255, 0.45);
	box-shadow:
		0 0 0 1px rgba(60, 120, 255, 0.18),
		0 4px 14px rgba(0, 0, 0, 0.4),
		0 0 14px rgba(60, 120, 255, 0.28),
		inset 0 1px 0 rgba(180, 220, 255, 0.15);
	text-shadow: 0 0 8px rgba(120, 180, 255, 0.6);
}

.km-trend-card__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: 2rem 0.65rem 0.65rem;
	background: linear-gradient(
		to top,
		rgba(5, 6, 14, 0.92) 0%,
		rgba(5, 6, 14, 0.6) 55%,
		transparent 100%
	);
	pointer-events: none;
}

.km-trend-card__title {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.km-trend-card__link:hover .km-trend-card__title {
	color: #c8e8ff;
}

/* Home main + sidebar */
.km-home-layout {
	display: grid;
	gap: 2rem 2.25rem;
	align-items: start;
}

/* Grid child không có CSS riêng — phải có min-width:0 để không overflow track */
.km-home-layout__main {
	min-width: 0;
	width: 100%;
}

@media (min-width: 1080px) {
	.km-home-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) min(320px, 32%);
	}
}

@media (max-width: 1079px) {
	.km-home-aside {
		order: 10;
		min-width: 0;
	}
}

/* Schedule week — panel */
.km-schedule-panel {
	background: linear-gradient(180deg, var(--km-surface2) 0%, rgba(24, 26, 34, 0.65) 100%);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	padding: 1.1rem 1rem 1rem;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.km-schedule-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--km-accent) 20%, var(--km-accent2, #d4a524) 50%, var(--km-accent) 80%, transparent);
	opacity: 0.85;
	pointer-events: none;
}

.km-schedule-panel__head {
	margin-bottom: 0.85rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--km-line);
	position: relative;
}

.km-schedule-panel__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--km-text);
}

.km-schedule-panel__hint {
	margin: 0;
	font-size: 0.78rem;
	color: var(--km-muted);
	letter-spacing: 0.01em;
}

.km-schedule-panel__rail {
	position: relative;
	padding: 0.5rem 0.45rem 0.55rem;
	margin: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 42%),
		rgba(0, 0, 0, 0.22);
	border-radius: var(--km-radius-sm);
	border: 1px solid var(--km-line);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.km-schedule-panel__rail::after {
	content: "";
	position: absolute;
	left: 0.65rem;
	right: 0.65rem;
	bottom: 0.45rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--km-line-accent), transparent);
	opacity: 0.55;
	pointer-events: none;
}

/* 8 nút dàn đều full khối: 4×2 mobile, 1×8 từ tablet */
.km-day-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.4rem 0.45rem;
	padding: 0.15rem 0.05rem 0.5rem;
	align-items: stretch;
}

@media (min-width: 640px) {
	.km-day-tabs {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 0.35rem 0.5rem;
		padding: 0.2rem 0.05rem 0.45rem;
	}
}

a.km-day-tab {
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

.km-day-tab {
	position: relative;
	width: 100%;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, transparent 55%), var(--km-elevated);
	color: var(--km-muted);
	font: inherit;
	font-weight: 600;
	padding: 0.48rem 0.35rem;
	min-height: 2.55rem;
	border-radius: 11px;
	cursor: pointer;
	transition:
		color 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.km-day-tab:focus-visible {
	outline: 2px solid var(--km-accent-hover);
	outline-offset: 2px;
}

.km-day-tab__short {
	font-size: 0.8rem;
	line-height: 1.2;
}

.km-day-tab__full {
	font-size: 0.72rem;
	font-weight: 500;
	opacity: 0.75;
	line-height: 1.2;
}

.km-day-tab__label {
	font-size: 0.8rem;
	line-height: 1.2;
}

@media (min-width: 640px) {
	.km-day-tab[data-km-day="new"] .km-day-tab__short {
		display: none;
	}

	.km-day-tab[data-km-day="new"] .km-day-tab__full {
		font-size: 0.82rem;
		font-weight: 600;
		opacity: 1;
	}
}

@media (max-width: 639px) {
	.km-day-tab[data-km-day="new"] .km-day-tab__full {
		display: none;
	}
}

.km-day-tab:hover {
	color: var(--km-text);
	border-color: color-mix(in srgb, var(--km-accent) 45%, var(--km-line));
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.28),
		0 0 0 1px color-mix(in srgb, var(--km-accent) 22%, transparent);
	transform: translateY(-1px);
}

.km-day-tab:active {
	transform: translateY(0);
}

.km-day-tab.is-active {
	color: #fff;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--km-accent) 92%, #1a3a8a) 0%,
		var(--km-accent) 48%,
		color-mix(in srgb, var(--km-accent) 75%, #0d1f4a) 100%
	);
	border-color: color-mix(in srgb, var(--km-accent) 70%, transparent);
	box-shadow:
		0 6px 22px color-mix(in srgb, var(--km-accent) 38%, transparent),
		0 0 0 1px rgba(255, 255, 255, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@supports not (color: color-mix(in srgb, white, black)) {
	.km-day-tab:hover {
		border-color: var(--km-line-accent);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	}

	.km-day-tab.is-active {
		background: linear-gradient(145deg, #5a8fff, var(--km-accent) 50%, #3568d4);
		border-color: var(--km-accent-hover);
		box-shadow: 0 6px 22px var(--km-line-accent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	}
}

/* Sidebar cards */
.km-home-aside {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-top: 0.75rem;
	padding-bottom: 0.35rem;
}

@media (max-width: 1079px) {
	.km-home-aside {
		padding-bottom: 1rem;
	}
}

.km-side-card {
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	padding: 1.1rem 1rem 1rem;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.km-side-card__head {
	margin-bottom: 0.85rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--km-line);
}

.km-side-card__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--km-accent2, #d4a524);
	letter-spacing: -0.02em;
}

.km-side-card__sub {
	margin: 0;
	font-size: 0.78rem;
	color: var(--km-muted);
	line-height: 1.4;
}

.km-hot-card-list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.km-hot-card {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.5rem 0.35rem;
	padding: 0.55rem 0.65rem;
	border-radius: var(--km-radius-sm);
	background: var(--km-elevated);
	border: 1px solid var(--km-line);
	color: var(--km-text);
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.km-hot-card:hover {
	border-color: var(--km-line-accent);
	background: color-mix(in srgb, var(--km-accent) 8%, var(--km-elevated));
	transform: translateX(2px);
	text-decoration: none;
	color: var(--km-text);
}

.km-hot-card__name {
	font-weight: 600;
	font-size: 0.88rem;
}

.km-hot-card__count {
	font-size: 0.72rem;
	color: var(--km-muted);
	white-space: nowrap;
}

.km-hot-card__arrow {
	color: var(--km-accent);
	font-size: 0.85rem;
	opacity: 0.7;
}

.km-mini-movie-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.km-mini-movie {
	display: grid;
	grid-template-columns: minmax(2.4rem, 2.75rem) 58px 1fr;
	align-items: center;
	gap: 0.5rem 0.45rem;
	padding: 0.4rem 0.35rem;
	border-radius: var(--km-radius-sm);
	text-decoration: none;
	color: inherit;
	transition: background 0.15s;
}

.km-mini-movie:hover {
	background: rgba(255, 255, 255, 0.04);
	text-decoration: none;
	color: inherit;
}

.km-mini-movie__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	min-width: 2.125rem;
	height: 2.125rem;
	padding: 0 0.3rem;
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	text-align: center;
	border-radius: 10px;
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.km-mini-movie__rank--gold {
	min-width: 2.65rem;
	height: 2.65rem;
	font-size: 1.12rem;
	font-weight: 900;
	border-radius: 12px;
	border-width: 2px;
	color: #2a1a05;
	background:
		radial-gradient(ellipse 80% 55% at 35% 22%, rgba(255, 255, 255, 0.92) 0%, transparent 52%),
		linear-gradient(155deg, #fff6a8 0%, #ffd028 22%, #f0a000 55%, #c97808 100%);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.5),
		0 -1px 0 rgba(180, 90, 0, 0.3);
	border-color: rgba(255, 236, 160, 0.75);
	box-shadow:
		0 0 0 1px rgba(255, 200, 80, 0.35),
		0 4px 14px rgba(0, 0, 0, 0.38),
		0 0 18px rgba(255, 170, 30, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.km-mini-movie__rank--silver {
	min-width: 2.45rem;
	height: 2.45rem;
	font-size: 1.02rem;
	font-weight: 900;
	border-radius: 11px;
	border-width: 2px;
	color: #151b24;
	background:
		radial-gradient(ellipse 75% 50% at 32% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 48%),
		linear-gradient(155deg, #ffffff 0%, #e2eaf2 30%, #a8b4c4 58%, #6a7788 100%);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6),
		0 -1px 0 rgba(60, 80, 100, 0.2);
	border-color: rgba(230, 240, 255, 0.55);
	box-shadow:
		0 0 0 1px rgba(180, 200, 230, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.35),
		0 0 16px rgba(170, 200, 255, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.km-mini-movie__rank--bronze {
	min-width: 2.35rem;
	height: 2.35rem;
	font-size: 0.95rem;
	font-weight: 900;
	border-radius: 11px;
	border-width: 2px;
	color: #1f0f06;
	background:
		radial-gradient(ellipse 72% 48% at 34% 22%, rgba(255, 220, 190, 0.85) 0%, transparent 46%),
		linear-gradient(155deg, #ffd4b0 0%, #e09050 35%, #b86528 62%, #7a4218 100%);
	text-shadow:
		0 1px 0 rgba(255, 220, 190, 0.4),
		0 -1px 0 rgba(100, 45, 15, 0.3);
	border-color: rgba(255, 190, 130, 0.5);
	box-shadow:
		0 0 0 1px rgba(230, 120, 60, 0.28),
		0 4px 12px rgba(0, 0, 0, 0.36),
		0 0 14px rgba(220, 100, 40, 0.35),
		inset 0 1px 0 rgba(255, 200, 160, 0.3);
}

.km-mini-movie__rank--rest {
	font-size: 0.84rem;
	color: var(--km-text);
	background: linear-gradient(160deg, #2f3340, #1e212b 55%, #151820);
	border-color: rgba(79, 140, 255, 0.22);
	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 0 1px rgba(0, 0, 0, 0.2);
}

.km-mini-movie__thumb {
	width: 58px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	flex-shrink: 0;
}

.km-mini-movie__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.km-mini-movie__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.km-mini-movie__title {
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.km-mini-movie__views {
	font-size: 0.7rem;
	color: var(--km-muted);
}

.km-sidebar-widget__title,
.km-side-widgets .km-sidebar-widget__title {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.65rem;
	color: var(--km-text);
}

.km-side-widgets .km-sidebar-widget {
	margin-bottom: 1rem;
}

.km-side-widgets .km-sidebar-widget:last-child {
	margin-bottom: 0;
}

/* Poster grid (5 cols desktop) */
.km-poster-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem 0.85rem;
}

@media (max-width: 1100px) {
	.km-poster-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.km-poster-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.km-poster-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.km-poster-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.km-poster-card__link:hover {
	text-decoration: none;
	color: inherit;
}

.km-poster-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: var(--km-radius-sm);
	overflow: hidden;
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	transition: transform 0.22s ease, border-color 0.22s, box-shadow 0.22s;
}

.km-poster-card__link:hover .km-poster-card__media {
	transform: translateY(-4px) scale(1.02);
	border-color: var(--km-line-accent);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.km-poster-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.km-poster-card__link:hover .km-poster-card__media img {
	transform: scale(1.07);
}

.km-poster-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, var(--km-elevated), var(--km-bg));
}

/* Gradient overlay — title + subtitle inside poster */
.km-poster-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 3.5rem 0.6rem 0.6rem;
	background: linear-gradient(
		to top,
		rgba(4, 5, 9, 0.97) 0%,
		rgba(4, 5, 9, 0.82) 35%,
		rgba(4, 5, 9, 0.4) 65%,
		transparent 100%
	);
	pointer-events: none;
}

.km-poster-card__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	max-width: calc(100% - 0.5rem);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1.25;
	padding: 0.35rem 0.5rem 0.35rem 0.4rem;
	background: linear-gradient(120deg, #c45c1a, #e8942a);
	color: #fff;
	border-radius: 0 0 var(--km-radius-sm) 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Title + sub bên dưới ảnh */
.km-poster-card__info {
	padding: 0.5rem 0.25rem 0.3rem;
}

.km-poster-card__title {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--km-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.km-poster-card__sub {
	margin: 0.2rem 0 0;
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Badge stack: views + rating chồng dọc góc phải */
.km-poster-card__badge-stack {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.28rem;
}

.km-poster-card__views {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.18rem 0.4rem;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.02em;
	pointer-events: none;
	line-height: 1;
}

.km-poster-card__rating-float {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.18rem 0.42rem;
	background: rgba(20, 12, 0, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 700;
	color: #f5c842;
	letter-spacing: 0.02em;
	pointer-events: none;
	line-height: 1;
	border: 1px solid rgba(245, 200, 66, 0.3);
}

.km-poster-card__rating-float svg {
	color: #f5c842;
	flex-shrink: 0;
}

/* Hero */
.km-hero {
	position: relative;
	padding: clamp(2.5rem, 8vw, 5rem) 0;
	overflow: hidden;
}

.km-hero__glow {
	position: absolute;
	inset: -40% -20%;
	background: radial-gradient(ellipse at 30% 20%, rgba(124, 92, 255, 0.35), transparent 55%),
		radial-gradient(ellipse at 70% 60%, rgba(255, 92, 138, 0.2), transparent 50%);
	pointer-events: none;
}

.km-hero__inner {
	position: relative;
}

.km-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	color: var(--km-muted);
	margin: 0 0 0.5rem;
}

.km-hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 0.75rem;
	line-height: 1.15;
}

.km-hero__desc {
	color: var(--km-muted);
	max-width: 36rem;
	margin: 0 0 1.5rem;
}

.km-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Buttons */
.km-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.km-btn--primary {
	background: linear-gradient(125deg, #3d7eef, var(--km-accent));
	color: #fff;
}

.km-btn--primary:hover {
	filter: brightness(1.08);
	text-decoration: none;
	color: #fff;
}

.km-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--km-text);
}

.km-btn--ghost:hover {
	border-color: var(--km-accent);
	color: var(--km-accent-hover);
	text-decoration: none;
}

.km-btn--disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Auth (đăng nhập / đăng ký) */
.km-auth {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 50vh;
	padding-top: 1rem;
	padding-bottom: 3rem;
}

.km-auth__card {
	width: 100%;
	max-width: 26rem;
	padding: 2rem 1.75rem;
	background: var(--km-surface2);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--km-radius);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.km-auth__title {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.km-auth__lead {
	color: var(--km-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0 0 1.5rem;
}

.km-auth__notice {
	padding: 0.75rem 1rem;
	border-radius: calc(var(--km-radius) * 0.65);
	font-size: 0.9rem;
	margin-bottom: 1.25rem;
}

.km-auth__notice--error {
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.35);
	color: #fecaca;
}

.km-auth__form .km-field {
	margin-bottom: 1rem;
}

.km-auth__input {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border-radius: calc(var(--km-radius) * 0.65);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.25);
	color: var(--km-text);
	font-size: 1rem;
	box-sizing: border-box;
}

.km-auth__input:focus {
	outline: none;
	border-color: rgba(124, 92, 255, 0.55);
	box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.2);
}

.km-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.85rem;
	margin: 0 0 1rem;
}

.km-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	color: var(--km-muted);
}

.km-auth__link {
	color: var(--km-accent);
	text-decoration: none;
}

.km-auth__link:hover {
	text-decoration: underline;
}

.km-auth__submit-wrap {
	margin: 1.25rem 0 0;
}

.km-auth__submit {
	width: 100%;
}

.km-auth__switch {
	text-align: center;
	font-size: 0.9rem;
	color: var(--km-muted);
	margin: 1.5rem 0 0;
}

.km-auth__switch a {
	color: var(--km-accent);
	font-weight: 600;
	text-decoration: none;
}

.km-auth__switch a:hover {
	text-decoration: underline;
}

.km-auth-flash {
	margin: 0;
	padding-block: 0.75rem;
	padding-inline:
		max(var(--km-gutter), env(safe-area-inset-left, 0px))
		max(var(--km-gutter), env(safe-area-inset-right, 0px));
	text-align: center;
	font-size: 0.9rem;
	background: rgba(34, 197, 94, 0.15);
	border-bottom: 1px solid rgba(34, 197, 94, 0.35);
	color: #bbf7d0;
}

/* Sections */
.km-section {
	padding-block: 2.5rem;
}

.km-section--muted {
	background: var(--km-surface);
	border-block: 1px solid rgba(255, 255, 255, 0.04);
}

.km-section__title {
	font-size: 1.35rem;
	margin: 0 0 1.25rem;
}

/* Grid cards (lọc phim, archive — 6 cột desktop) */
.km-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.25rem;
}

@media (max-width: 1100px) {
	.km-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.km-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

.km-grid--hero {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.km-card {
	border-radius: var(--km-radius);
	overflow: hidden;
	position: relative;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.km-card:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1.5px var(--km-accent);
	z-index: 2;
}

.km-card__link {
	color: inherit;
	text-decoration: none;
	display: block;
}

.km-card__link:hover {
	text-decoration: none;
	color: inherit;
}

.km-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--km-surface);
	border-radius: var(--km-radius);
	overflow: hidden;
}

.km-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.km-card:hover .km-card__media img {
	transform: scale(1.06);
}

.km-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, var(--km-elevated), var(--km-surface));
}

/* Badge: top-left */
.km-card__badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 4;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.22rem 0.55rem;
	border-radius: 6px;
	background: var(--km-accent);
	color: #fff;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Hover play overlay */
.km-card__hover {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0);
	transition: background 0.22s ease;
	pointer-events: none;
}

.km-card:hover .km-card__hover {
	background: rgba(0, 0, 0, 0.3);
}

.km-card__play {
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.22s ease, transform 0.22s ease;
	filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6));
}

.km-card:hover .km-card__play {
	opacity: 1;
	transform: scale(1);
}

/* Title overlay at bottom */
.km-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	padding: 2.5rem 0.65rem 0.65rem;
	background: linear-gradient(to top, rgba(4, 5, 9, 0.97) 0%, rgba(4, 5, 9, 0.7) 55%, transparent 100%);
	pointer-events: none;
}

.km-card__title {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.35;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.km-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0.25rem 0 0;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.55);
	text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.km-card__meta-sep {
	opacity: 0.5;
}

.km-card__views {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	color: rgba(255, 255, 255, 0.75);
}

/* Chips */
.km-chip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.km-chip-list--large .km-chip {
	font-size: 0.95rem;
	padding: 0.45rem 0.9rem;
}

.km-chip {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: var(--km-surface2);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--km-text);
	font-size: 0.85rem;
}

.km-chip:hover {
	border-color: var(--km-accent);
	text-decoration: none;
	color: var(--km-accent);
}

/* Breadcrumb */
.km-breadcrumb {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 0.82rem;
	color: var(--km-muted);
}

.km-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.km-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 0.35rem;
	opacity: 0.5;
}

.km-page-head {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.km-page-title {
	font-size: clamp(1.45rem, 3.8vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0 0 0.4rem;
}

.km-page-meta {
	margin: 0;
	color: var(--km-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

.km-page--center {
	text-align: center;
	max-width: 32rem;
	margin-inline: auto;
}

/* Movie detail (single) */
.km-detail {
	position: relative;
	padding-bottom: 2.5rem;
}

.km-detail__bg {
	position: absolute;
	inset: 0 0 auto 0;
	height: min(52vh, 420px);
	background-image: var(--km-detail-backdrop, none);
	background-size: cover;
	background-position: center top;
	opacity: 0.22;
	filter: blur(2px) saturate(1.05);
	transform: scale(1.03);
	pointer-events: none;
}

.km-detail__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--km-bg) 92%);
}

.km-detail__top {
	position: relative;
	padding-top: 2.5rem;
	padding-bottom: 2rem;
}

/* grid-template-areas: poster (side) + title/facts (main) + CTA buttons (actions) */
.km-detail__grid {
	display: grid;
	grid-template-columns: min(220px, 36%) 1fr;
	grid-template-areas:
		"side main"
		"actions main";
	column-gap: 2rem;
	row-gap: 0;
	align-items: start;
}

.km-detail__side    { grid-area: side; }
.km-detail__main    { grid-area: main; }
.km-detail__actions { grid-area: actions; }

/* Tablet (641-900px): poster nhỏ lại nhưng vẫn giữ 2 cột */
@media (max-width: 900px) and (min-width: 641px) {
	.km-detail__grid {
		grid-template-columns: min(180px, 30%) 1fr;
		column-gap: 1.5rem;
	}
}

/* Mobile (≤640px): poster lên đầu căn giữa, thông tin + actions xuống dưới */
@media (max-width: 640px) {
	.km-detail__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"side"
			"main"
			"actions";
		column-gap: 0;
		row-gap: 1rem;
	}

	.km-detail__top {
		padding-top: 1rem;
		padding-bottom: 0.5rem;
	}

	.km-detail__title {
		font-size: clamp(1rem, 4.5vw, 1.25rem);
		margin-bottom: 0.4rem;
	}

	.km-detail__side {
		max-width: 160px;
		margin: 0 auto;
	}
}

.km-detail__poster {
	position: relative;
	border-radius: var(--km-radius);
	overflow: hidden;
	border: 1px solid var(--km-line);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
	background: var(--km-surface2);
}

.km-detail__poster img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.km-detail__poster-placeholder {
	aspect-ratio: 2 / 3;
	background: linear-gradient(160deg, var(--km-elevated), var(--km-bg));
}

.km-detail__follow {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 0;
	font: inherit;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	color: #fff;
	background: rgba(16, 18, 28, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	text-decoration: none;
	box-sizing: border-box;
	transition: background 0.2s ease, color 0.2s ease;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.km-detail__follow:hover {
	background: rgba(16, 18, 28, 0.8);
	color: #fff;
	opacity: 1;
	transform: none;
}

.km-detail__follow:disabled {
	cursor: wait;
	opacity: 0.75;
}

.km-detail__follow.is-bookmarked {
	background: rgba(5, 115, 70, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #d1fae5;
	border-top-color: rgba(52, 211, 153, 0.25);
}

.km-detail__follow.is-bookmarked:hover {
	background: rgba(5, 115, 70, 0.88);
	color: #d1fae5;
}

a.km-detail__follow--guest {
	color: #fff;
}

.km-detail__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.45rem, 3.5vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--km-accent2, #e8b020);
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.km-detail__facts {
	margin: 0;
	display: grid;
	gap: 0.65rem 0;
}

.km-detail__fact {
	display: grid;
	grid-template-columns: minmax(0, 7.5rem) 1fr;
	gap: 0.35rem 1rem;
	align-items: start;
	font-size: 0.88rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--km-line);
}

/* fact responsive columns — see mobile UX pass section below */

.km-detail__fact dt {
	margin: 0;
	color: var(--km-muted);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.km-detail__fact dd {
	margin: 0;
	color: var(--km-text);
	line-height: 1.45;
}

.km-detail__tags-inline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.km-detail__tags-inline a {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--km-accent-hover);
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
}

.km-detail__tags-inline a:hover {
	background: var(--km-line-accent);
	color: #fff;
	text-decoration: none;
}

.km-detail__ep-highlight {
	color: var(--km-accent-hover);
	font-weight: 700;
}

.km-detail__views-val {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--km-text);
}

.km-detail__views-ico {
	color: var(--km-accent);
	flex-shrink: 0;
}

.km-detail__views-unit {
	font-weight: 400;
	font-size: 0.82rem;
	color: var(--km-muted);
}

.km-detail__dot {
	margin: 0 0.35rem;
	color: var(--km-muted);
}

.km-detail__status {
	text-transform: capitalize;
	color: var(--km-accent2, #e8b020);
	font-weight: 600;
}

.km-detail__fact--desc {
	border-bottom: 0;
}

.km-detail__fact--desc dd {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.km-detail__desc-text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--km-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.km-detail__desc-text.is-expanded {
	-webkit-line-clamp: unset;
	overflow: visible;
}
.km-detail__desc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.3rem;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--km-accent-hover);
	cursor: pointer;
	transition: opacity 0.15s;
}
.km-detail__desc-toggle:hover { opacity: 0.8; }
.km-detail__desc-toggle svg {
	transition: transform 0.2s;
	flex-shrink: 0;
}

/* Actions: cột nút xem — nằm dưới poster trên desktop, full-width trên mobile */
.km-detail__actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.85rem;
	align-self: start;
}

/* Mobile: actions span full width, không còn constrained trong cột poster */
@media (max-width: 640px) {
	.km-detail__actions {
		padding-top: 0;
		gap: 0.55rem;
	}
}

.km-detail__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.72rem 1rem;
	border-radius: var(--km-radius-sm);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	color: #1a0f06;
	background: linear-gradient(120deg, #f59e0b, #ea580c);
	box-shadow: 0 6px 22px rgba(234, 88, 12, 0.28);
	transition: filter 0.15s, transform 0.15s;
	min-height: 46px;
}

.km-detail__cta:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #1a0f06;
	text-decoration: none;
}

/* Stars */
.km-stars-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.km-stars {
	position: relative;
	display: inline-block;
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: 0.08em;
}

.km-stars__empty {
	color: rgba(255, 255, 255, 0.18);
}

.km-stars__full {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	width: var(--km-stars-fill, 80%);
	white-space: nowrap;
	color: #e8b020;
	pointer-events: none;
}

.km-stars__meta {
	font-size: 0.85rem;
	color: var(--km-muted);
}

.km-stars__meta strong {
	color: var(--km-text);
}

.km-stars__votes {
	margin-left: 0.25rem;
}

/* Episode grids — padding ngang do km-container cung cấp, không override ở đây */
.km-detail__episodes-wrap {
	position: relative;
	padding-top: 0.5rem;
	padding-bottom: 1.5rem;
}

.km-detail__ep-block + .km-detail__ep-block {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--km-line);
}

.km-detail__ep-heading {
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--km-accent2, #e8b020);
}

.km-ep-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.1rem, 1fr));
	gap: 0.45rem;
}

.km-ep-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.1rem;
	padding: 0.45rem 0.65rem;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	color: var(--km-text);
	background: var(--km-elevated);
	border: 1px solid var(--km-line);
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.km-ep-pill:hover {
	border-color: var(--km-line-accent);
	color: var(--km-accent-hover);
	text-decoration: none;
}

.km-ep-pill.is-current {
	background: color-mix(in srgb, var(--km-accent) 22%, var(--km-elevated));
	border-color: var(--km-accent);
	color: #fff;
}

@supports not (background: color-mix(in srgb, white, black)) {
	.km-ep-pill.is-current {
		background: rgba(79, 140, 255, 0.2);
	}
}

.km-detail__schedule-note {
	margin: 0 0 1.5rem;
	padding: 0.65rem 1rem;
	font-size: 0.82rem;
	color: var(--km-muted);
	background: rgba(0, 0, 0, 0.25);
	border-left: 3px solid var(--km-accent2, #e8b020);
	border-radius: 0 var(--km-radius-sm) var(--km-radius-sm) 0;
}

.km-detail__plot {
	padding: 1.5rem 0 1rem;
	border-top: 1px solid var(--km-line);
}

/* Excerpt inline trong detail sidebar */
.km-detail__excerpt-inline {
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--km-line);
}
.km-detail__excerpt-inline__text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--km-muted);
}
.km-detail__excerpt-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.4rem;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--km-accent-hover);
	cursor: pointer;
	transition: opacity 0.15s;
}
.km-detail__excerpt-toggle:hover { opacity: 0.8; }
.km-detail__excerpt-toggle svg {
	transition: transform 0.2s;
	flex-shrink: 0;
}

.km-detail__plot-title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--km-accent2, #e8b020);
	letter-spacing: 0.02em;
}

/* ── Best-movies page header ──────────────────────────────────────────────── */

.km-best-head__title-wrap {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.km-best-head__ico {
	color: var(--km-accent2);
	flex-shrink: 0;
}

.km-detail__section-head {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--km-muted);
	margin: 0 0 1rem;
}

.km-detail__plot-body {
	color: var(--km-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

.km-detail__plot-body p {
	margin: 0 0 0.75rem;
}

.km-detail__footer-tags {
	padding: 1rem 0;
}

.km-detail__tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.km-detail__tag-pill {
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 500;
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	color: var(--km-muted);
	text-decoration: none;
}

.km-detail__tag-pill:hover {
	border-color: var(--km-accent);
	color: var(--km-accent-hover);
	text-decoration: none;
}

.km-detail__discuss {
	padding: 2rem 0 0;
	border-top: 1px solid var(--km-line);
}

.km-detail__discuss-hint {
	margin: 0;
	font-size: 0.88rem;
	color: var(--km-muted);
	line-height: 1.55;
}

.km-detail__discuss-hint a {
	color: var(--km-accent-hover);
	font-weight: 600;
}

.km-ep-track-label {
	margin: -0.35rem 0 0.5rem;
	font-size: 0.82rem;
	color: var(--km-accent2, #e8b020);
	font-weight: 700;
}

/* Shared pill (archive etc.) */
.km-pill {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--km-accent) 18%, transparent);
	color: var(--km-text);
	font-size: 0.8rem;
	text-transform: lowercase;
}

/* Episode list */
.km-ep-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	max-width: 36rem;
}

.km-ep-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.65rem 1rem;
	background: var(--km-surface2);
	border-radius: var(--km-radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--km-text);
	text-decoration: none;
}

.km-ep-link:hover {
	border-color: var(--km-accent);
	text-decoration: none;
	color: var(--km-text);
}

.km-ep-link__num {
	font-weight: 700;
	color: var(--km-accent);
	min-width: 2rem;
}

/* Player */
.km-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--km-radius);
	overflow: hidden;
	margin: 1rem 0 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.km-player__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Native HLS / JW Player container */
.km-player__jw {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

.km-player__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: fill;
	background: #000;
}

/* JW Player overrides */
#km-player-jw .jw-wrapper,
#km-player-jw .jwplayer {
	border-radius: 0 !important;
}

/* Skip 10s buttons */
.km-skip-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 15;
	background: rgba(0, 0, 0, 0.45);
	border: none;
	border-radius: 50%;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.18s ease, background 0.15s ease, transform 0.12s ease;
	pointer-events: none;
}

.km-skip-btn--back { left: 14%; }
.km-skip-btn--fwd  { right: 14%; }

/* Play / pause (giữa player) */
.km-pp-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 15;
	background: rgba(0, 0, 0, 0.45);
	border: none;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.18s ease, background 0.15s ease, transform 0.12s ease;
	pointer-events: none;
}

.km-pp-btn__icon--pause {
	display: none;
}

.km-pp-btn.is-playing .km-pp-btn__icon--play {
	display: none;
}

.km-pp-btn.is-playing .km-pp-btn__icon--pause {
	display: block;
}

.km-player__jw:hover .km-skip-btn,
.km-player__jw:focus-within .km-skip-btn,
.km-player__jw:hover .km-pp-btn,
.km-player__jw:focus-within .km-pp-btn {
	opacity: 1;
	pointer-events: auto;
}

.km-skip-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.km-skip-btn:active {
	transform: translateY(-50%) scale(0.88);
}

.km-pp-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.km-pp-btn:active {
	transform: translate(-50%, -50%) scale(0.88);
}

/* Ripple flash khi click */
@keyframes km-skip-flash {
	from { background: rgba(255, 255, 255, 0.35); }
	to   { background: rgba(0, 0, 0, 0.45); }
}

.km-skip-btn.is-active {
	animation: km-skip-flash 0.3s ease forwards;
}

.km-pp-btn.is-active {
	animation: km-skip-flash 0.3s ease forwards;
}

/* Player error overlay */
.km-player-error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.82);
	color: #fff;
	padding: 1.5rem;
	z-index: 20;
	text-align: center;
}

.km-player-error span {
	display: block;
	font-size: 0.85rem;
	line-height: 1.6;
	white-space: pre-line;
	max-width: 32ch;
}

.km-player__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 2rem;
	text-align: center;
	color: var(--km-muted);
}

.km-ep-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	align-items: center;
}

.km-ep-sub {
	color: var(--km-muted);
	margin: 0 0 1rem;
}

/* Watch page (episode) */
.km-watch {
	padding-bottom: 2rem;
}

/* ── Watch page: player block đã có padding-inline:0 → player tự full-bleed ──
 * KHÔNG dùng margin âm (gây overflow bị clip). Player, nav, servers, notice
 * đều tự căn theo --km-gutter thông qua padding-inline riêng của từng element.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Breadcrumb watch: nhỏ hơn trên mobile */
@media (max-width: 640px) {
	.km-watch__breadcrumb .km-breadcrumb {
		font-size: 0.72rem;
	}
	.km-watch__title {
		font-size: 1rem;
		margin-bottom: 0.4rem;
	}
	.km-watch__ep-sections {
		margin-top: 0.85rem;
	}
}

.km-watch__breadcrumb {
	padding-top: 0.5rem;
	padding-bottom: 0.25rem;
}

.km-watch__breadcrumb .km-breadcrumb {
	margin-bottom: 0;
}

.km-watch__player-block {
	padding-inline: 0;
	padding-bottom: 0.5rem;
	/* clip: ngăn bất kỳ element con nào vô tình tràn ra ngoài player block */
	overflow-x: clip;
}

.km-player-shell__bar {
	display: flex;
	align-items: center;
	min-height: 2.35rem;
	padding-block: 0;
	padding-inline:
		max(var(--km-gutter), env(safe-area-inset-left, 0px))
		max(var(--km-gutter), env(safe-area-inset-right, 0px));
	background: var(--km-surface2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.8rem;
	color: var(--km-muted);
	font-weight: 600;
}

.km-player-shell__bar-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.km-player-shell .km-player {
	margin: 0;
	border-radius: 0;
	border: 0;
}

.km-player-shell__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding-top: 0.65rem;
	padding-inline:
		max(var(--km-gutter), env(safe-area-inset-left, 0px))
		max(var(--km-gutter), env(safe-area-inset-right, 0px));
	flex-wrap: wrap;
}

.km-watch-nav-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.38rem 0.9rem;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--km-line);
	color: var(--km-muted);
	background: var(--km-elevated);
	transition: border-color 0.15s, color 0.15s;
}

.km-watch-nav-btn:hover:not(.km-watch-nav-btn--disabled) {
	border-color: var(--km-accent);
	color: var(--km-accent-hover);
	text-decoration: none;
}

.km-watch-nav-btn--next {
	border-color: color-mix(in srgb, var(--km-accent) 40%, var(--km-line));
	color: var(--km-text);
}

.km-watch-nav-btn--disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.km-watch__servers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.85rem;
	/* Canh theo gutter chuẩn: player-block có padding:0, servers cần padding riêng */
	padding-inline:
		max(var(--km-gutter), env(safe-area-inset-left, 0px))
		max(var(--km-gutter), env(safe-area-inset-right, 0px));
}

.km-server-btn {
	cursor: pointer;
	padding: 0.42rem 0.8rem;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: inherit;
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	color: var(--km-muted);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.km-server-btn:hover:not(:disabled):not(.is-active) {
	border-color: var(--km-line-accent);
	color: var(--km-text);
}

.km-server-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.km-server-btn.is-active:not(.km-server-btn--4k) {
	background: linear-gradient(135deg, #14532d, #16a34a);
	border-color: #4ade80;
	color: #fff;
}

.km-server-btn--4k.is-active {
	background: linear-gradient(135deg, #1e3a5f, #2563eb);
	border-color: #60a5fa;
	color: #fff;
}

.km-watch__notice {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	margin-top: 0.85rem;
	/* Inset card từ viền: player-block có padding:0 nên notice dùng margin-inline */
	margin-inline:
		max(var(--km-gutter), env(safe-area-inset-left, 0px))
		max(var(--km-gutter), env(safe-area-inset-right, 0px));
	padding: 0.65rem 1rem;
	background: linear-gradient(90deg, rgba(234, 140, 0, 0.2), rgba(234, 140, 0, 0.06));
	border: 1px solid rgba(234, 140, 0, 0.45);
	border-radius: var(--km-radius-sm);
	color: #fbbf77;
}

.km-watch__notice-text {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
}

.km-watch__notice-icon {
	flex-shrink: 0;
	line-height: 1.4;
}

.km-watch__ep-block + .km-watch__ep-block {
	margin-top: 1.25rem;
}

.km-watch__ep-heading {
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--km-accent2, #e8b020);
}

.km-ep-grid--watch {
	gap: 0.4rem;
}

/* km-watch__below: title nằm trên cùng, episodes bên dưới */
.km-watch__below {
	padding-top: 0.75rem;
}

.km-watch__ep-sections {
	margin-top: 0;
	padding-top: 1rem;
}

.km-ep-pill.is-watch-current {
	background: rgba(220, 38, 38, 0.32);
	border-color: #ef4444;
	color: #fff;
}

/* Title row giờ nằm ĐẦU km-watch__below (trước danh sách tập) */
.km-watch__title-row {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--km-line);
}

.km-watch__title {
	margin: 0 0 0.65rem;
	font-size: clamp(1.1rem, 2.4vw, 1.42rem);
	font-weight: 800;
	line-height: 1.3;
}

.km-watch__title-suffix {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.88em;
	font-weight: 700;
	color: var(--km-accent2, #e8b020);
}

.km-watch__stars-inline .km-stars-wrap {
	margin: 0;
}

.km-watch__schedule {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.25rem;
	font-size: 0.85rem;
	color: var(--km-muted);
}

.km-watch__discuss {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--km-line);
}

.km-watch__tags {
	margin-top: 1.25rem;
	padding-top: 1rem;
}

.km-watch__login-btn {
	display: inline-block;
	margin-right: 0.35rem;
	margin-bottom: 0.35rem;
	vertical-align: middle;
}

/* Filter form */
.km-filter {
	background: var(--km-surface2);
	padding: 1.25rem;
	border-radius: var(--km-radius);
	border: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 2rem;
}

.km-filter__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1rem;
}

.km-filter__fields {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
	align-items: flex-end;
	gap: 0.75rem 1rem;
	min-width: 0;
}

.km-filter .km-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 7.5rem;
	margin: 0;
}

.km-filter .km-field--grow {
	flex: 1.35 1 auto;
	min-width: 11rem;
}

.km-field__label {
	display: block;
	font-size: 0.8rem;
	color: var(--km-muted);
	margin-bottom: 0.35rem;
}

.km-field input,
.km-field select {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border-radius: var(--km-radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: var(--km-bg);
	color: var(--km-text);
	font: inherit;
}

.km-filter__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	margin: 0;
	padding-bottom: 0.05rem;
}

/* Footer */
.km-footer {
	position: relative;
	flex-shrink: 0;
	margin-top: auto;
	padding: 0 0 max(2rem, calc(1rem + env(safe-area-inset-bottom, 0px)));
	background: var(--km-surface);
	border-top: 1px solid var(--km-line);
	overflow: hidden;
}

.km-footer__accent {
	height: 3px;
	width: 100%;
	background: linear-gradient(
		90deg,
		var(--km-accent) 0%,
		#8ec5ff 35%,
		var(--km-accent2, #c9a227) 72%,
		color-mix(in srgb, var(--km-accent) 60%, var(--km-accent2)) 100%
	);
	opacity: 0.85;
}

.km-footer__wrap {
	padding-top: 2.5rem;
}

/* Một hàng: HTML tùy chỉnh + copyright */
.km-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding-bottom: 2.25rem;
	border-bottom: 1px solid var(--km-line);
}

.km-footer__bar .km-footer__custom {
	flex: 1 1 auto;
	min-width: min(100%, 12rem);
	max-width: 100%;
	padding-bottom: 0;
	border-bottom: none;
}

.km-footer__bar .km-footer__bottom {
	padding-top: 0;
	flex: 0 0 auto;
	text-align: right;
	margin: 0;
	align-self: center;
}

/* Nội dung HTML tùy chỉnh (Giao diện → KiraMovies — Chân trang) */
.km-footer__custom {
	padding-bottom: 2.25rem;
	border-bottom: 1px solid var(--km-line);
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--km-muted);
}

.km-footer__custom > *:first-child {
	margin-top: 0;
}

.km-footer__custom > *:last-child {
	margin-bottom: 0;
}

.km-footer__custom p {
	margin: 0 0 0.65rem;
}

.km-footer__custom a {
	color: var(--km-accent-hover);
	font-weight: 500;
	text-decoration: none;
}

.km-footer__custom a:hover {
	color: var(--km-text);
	text-decoration: underline;
}

.km-footer__custom img {
	max-width: 100%;
	height: auto;
	border-radius: var(--km-radius-sm);
}

.km-footer__custom h1,
.km-footer__custom h2,
.km-footer__custom h3 {
	color: var(--km-text);
	margin: 0.85rem 0 0.4rem;
	font-size: 1rem;
	font-weight: 700;
}

.km-footer__custom h1:first-child,
.km-footer__custom h2:first-child,
.km-footer__custom h3:first-child {
	margin-top: 0;
}

.km-footer__custom ul,
.km-footer__custom ol {
	margin: 0 0 0.65rem;
	padding-left: 1.25rem;
}

.km-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem 2.5rem;
	padding-bottom: 2.25rem;
	border-bottom: 1px solid var(--km-line);
}

@media (max-width: 900px) {
	.km-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 1.5rem;
	}

	.km-footer__col--brand {
		grid-column: 1 / -1;
		max-width: 32rem;
	}
}

@media (max-width: 520px) {
	.km-footer__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.km-footer__col--brand {
		grid-column: auto;
		align-items: center;
	}

	.km-footer__brand {
		display: block;
	}

	.km-footer__tagline {
		margin-inline: auto;
	}

	.km-footer__link-list {
		align-items: center;
	}

	.km-footer__heading {
		text-align: center;
	}
}

.km-footer__col--brand {
	min-width: 0;
}

.km-footer__brand {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 0.85rem;
}

.km-footer__brand:hover {
	text-decoration: none;
}

.km-footer__logo-text {
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
	background: linear-gradient(110deg, var(--km-accent), #8ec5ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.km-footer__logo-wrap {
	display: inline-block;
	line-height: 0;
}

.km-footer__logo-wrap .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.km-footer__logo-wrap img {
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.km-footer__tagline {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--km-muted);
	max-width: 22rem;
}

.km-footer__heading {
	margin: 0 0 1rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--km-accent2, #c9a227);
}

.km-footer__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.km-footer__link-list a {
	color: var(--km-muted);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

.km-footer__link-list a:hover {
	color: var(--km-accent-hover);
	text-decoration: none;
}

.km-footer__bottom {
	padding-top: 1.35rem;
	text-align: right;
}

.km-footer__copy {
	margin: 0;
	font-size: 0.82rem;
	color: var(--km-muted);
	line-height: 1.5;
}

.km-footer__copy a {
	color: var(--km-text);
	font-weight: 600;
	text-decoration: none;
}

.km-footer__copy a:hover {
	color: var(--km-accent-hover);
	text-decoration: none;
}

/* Legacy: footer menu class if assigned elsewhere */
.km-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.km-footer__nav a {
	color: var(--km-muted);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
}

.km-footer__nav a:hover {
	color: var(--km-accent-hover);
	text-decoration: none;
}

/* --- Responsive: điện thoại, vùng an toàn, touch --- */
@media (max-width: 640px) {
	.km-home-section {
		padding: 1.2rem 0 1.65rem;
	}

	.km-home-section--trending {
		padding-top: 0.85rem;
	}

	.km-home-section--schedule {
		padding-top: 0;
	}

	.km-section-head {
		margin-bottom: 1rem;
		gap: 0.5rem 1rem;
	}

	.km-section-head__title {
		font-size: 1.18rem;
	}

	.km-section-head__desc {
		font-size: 0.82rem;
	}

	.km-schedule-panel {
		padding: 1rem 0.9rem 0.9rem;
		border-radius: var(--km-radius-sm);
	}

	.km-schedule-panel__title {
		font-size: 0.95rem;
	}

	.km-day-tab {
		padding: 0.42rem 0.28rem;
		min-height: 2.45rem;
	}

	.km-poster-grid {
		gap: 0.72rem 0.52rem;
	}

	.km-poster-card__title {
		font-size: 0.8rem;
	}

	.km-breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.km-detail__top {
		padding-top: 1.5rem;
		padding-bottom: 1rem;
	}

	.km-detail__episodes-wrap {
		padding-bottom: 1rem;
	}

	.km-detail__plot {
		padding-top: 1.15rem;
	}

	.km-side-card {
		padding: 1rem 0.9rem 0.9rem;
	}
}

@media (max-width: 480px) {
	/* Tránh Safari iOS zoom khi focus input < 16px */
	.km-search__input,
	.km-field input,
	.km-field select {
		font-size: 1rem;
	}

	.km-header__top-inner {
		min-height: 56px;
		gap: 0.45rem 0.5rem;
	}

	.km-logo {
		font-size: 1.05rem;
	}

	.km-header__brand .custom-logo-link img {
		max-height: 34px;
	}

	.km-tool-btn {
		width: 44px;
		height: 44px;
	}

	.km-carousel {
		margin: 0 -0.35rem;
	}

	.km-carousel__track {
		padding-inline: 0.35rem 0.45rem;
	}

	.km-trend-card {
		flex: 0 0 clamp(128px, 36vw, 175px);
	}

	.km-watch__title {
		font-size: 1.05rem;
		line-height: 1.35;
	}

	.km-player-shell__nav {
		justify-content: stretch;
		gap: 0.45rem;
	}

	.km-watch-nav-btn {
		flex: 1;
		justify-content: center;
		min-height: 44px;
		padding: 0.5rem 0.6rem;
	}

	.km-watch__servers {
		gap: 0.4rem;
	}

	.km-server-btn {
		min-height: 44px;
		padding: 0.48rem 0.6rem;
		flex: 1 1 calc(50% - 0.25rem);
		min-width: 0;
	}

	.km-filter {
		padding: 1rem 0.85rem;
	}

	.km-filter__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.km-filter__fields {
		flex-direction: column;
		align-items: stretch;
	}

	.km-filter .km-field,
	.km-filter .km-field--grow {
		flex: 1 1 auto;
		min-width: 0;
	}

	.km-filter__actions {
		justify-content: stretch;
		padding-bottom: 0;
	}

	.km-filter__actions .km-btn {
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}

	.km-page-title {
		font-size: 1.28rem;
		letter-spacing: -0.02em;
	}

	.km-page-head {
		margin-bottom: 1.1rem;
	}

	.km-section {
		padding-block: 1.5rem;
	}

	.km-ep-pill {
		min-width: 3.45rem;
		padding: 0.4rem 0.5rem;
		font-size: 0.74rem;
	}

	.km-footer__wrap {
		padding-top: 2rem;
	}

	.km-footer__copy {
		font-size: 0.76rem;
		line-height: 1.5;
		word-break: break-word;
	}
}

@media (max-width: 380px) {
	.km-poster-grid {
		gap: 0.55rem 0.42rem;
	}

	.km-day-tab {
		padding: 0.34rem 0.18rem;
		min-height: 2.32rem;
	}

	.km-day-tab__label,
	.km-day-tab__short {
		font-size: 0.74rem;
	}
}

/* Blog fallback */
.km-post-list {
	display: grid;
	gap: 1.5rem;
}

.km-post__title {
	margin: 0 0 0.5rem;
}

.km-content {
	max-width: 65ch;
}

/* ─── Auth: success notice + input wrapper + eye toggle + field hint ─────── */

.km-auth__notice--success {
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #bbf7d0;
}

.km-auth__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.4rem;
}

.km-auth__header .km-auth__title {
	margin: 0;
}

.km-auth__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--km-line-accent);
	color: var(--km-accent);
	flex-shrink: 0;
}

.km-auth__input-wrap {
	position: relative;
	display: block;
}

.km-auth__input-wrap .km-auth__input {
	padding-right: 2.8rem;
}

.km-auth__eye {
	position: absolute;
	top: 50%;
	right: 0.65rem;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--km-muted);
	display: flex;
	align-items: center;
	transition: color 0.15s;
}

.km-auth__eye:hover {
	color: var(--km-text);
}

.km-auth__eye-ico[hidden] {
	display: none !important;
}

.km-field__hint {
	display: block;
	font-size: 0.78rem;
	color: var(--km-muted);
	margin-top: 0.3rem;
}

/* ─── User account dropdown ──────────────────────────────────────────────── */

.km-user-menu {
	position: relative;
}

.km-user-menu__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 200px;
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	z-index: 200;
	overflow: hidden;
	animation: km-dropdown-in 0.18s ease;
}

@keyframes km-dropdown-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.km-user-menu__info {
	padding: 0.85rem 1rem 0.75rem;
	border-bottom: 1px solid var(--km-line);
}

.km-user-menu__name {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--km-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.km-user-menu__role {
	display: block;
	font-size: 0.76rem;
	color: var(--km-muted);
	margin-top: 0.1rem;
}

.km-user-menu__links {
	padding: 0.35rem 0;
}

.km-user-menu__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1rem;
	font-size: 0.88rem;
	color: var(--km-text);
	text-decoration: none;
	transition: background 0.12s, color 0.12s;
}

.km-user-menu__link:hover {
	background: var(--km-elevated);
	color: var(--km-accent);
	text-decoration: none;
}

.km-user-menu__link--danger {
	color: #fca5a5;
}

.km-user-menu__link--danger:hover {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
}

/* ─── Watch history ──────────────────────────────────────────────────────── */

/* Resume toast (trang xem tập) */
.km-resume-toast {
	position: absolute;
	bottom: 3.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: rgba(10, 11, 15, 0.92);
	border: 1px solid var(--km-line-accent);
	border-radius: var(--km-radius);
	padding: 0.65rem 1rem;
	font-size: 0.88rem;
	color: var(--km-text);
	white-space: nowrap;
	z-index: 60;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: km-toast-in 0.25s ease;
}

@keyframes km-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(10px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.km-resume-toast__text strong {
	color: var(--km-accent);
}

.km-resume-toast__btn {
	padding: 0.32rem 0.75rem;
	border-radius: var(--km-radius-sm);
	border: none;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}

.km-resume-toast__btn:hover {
	opacity: 0.85;
}

.km-resume-toast__btn--yes {
	background: var(--km-accent);
	color: #fff;
}

.km-resume-toast__btn--no {
	background: var(--km-elevated);
	color: var(--km-muted);
}

/* Nút unmute khi autoplay bị browser block */
.km-unmute-btn {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(10, 11, 15, 0.88);
	border: 1px solid var(--km-line-accent);
	border-radius: var(--km-radius);
	color: var(--km-text);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
	z-index: 55;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: km-toast-in 0.25s ease;
	transition: background 0.15s;
}
.km-unmute-btn:hover {
	background: rgba(30, 32, 42, 0.96);
}
.km-unmute-btn svg {
	flex-shrink: 0;
}

/* Position shell relative agar toast punya acuan */
.km-player-shell {
	position: relative;
}

/* ── Continue watching button — redesigned ────────────────────────── */
.km-continue-btn {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.75rem 1rem 0.75rem 0.75rem;
	border-radius: 14px;
	text-decoration: none;
	background: linear-gradient(135deg, #064e3b 0%, #065f46 55%, #047857 100%);
	border: 1px solid rgba(52, 211, 153, 0.22);
	box-shadow:
		0 4px 20px rgba(5, 150, 105, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);
	transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
	min-width: 0;
}

.km-continue-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow:
		0 8px 32px rgba(5, 150, 105, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	text-decoration: none;
}

.km-continue-btn__icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(52, 211, 153, 0.14);
	border: 1.5px solid rgba(52, 211, 153, 0.38);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6ee7b7;
	box-shadow: 0 0 14px rgba(52, 211, 153, 0.28);
	transition: box-shadow 0.18s, background 0.18s;
}

.km-continue-btn:hover .km-continue-btn__icon {
	background: rgba(52, 211, 153, 0.24);
	box-shadow: 0 0 22px rgba(52, 211, 153, 0.48);
}

.km-continue-btn__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.km-continue-btn__top {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-wrap: wrap;
}

.km-continue-btn__label {
	font-size: 0.88rem;
	font-weight: 700;
	color: #d1fae5;
	line-height: 1;
	white-space: nowrap;
}

.km-continue-btn__track {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 600;
	color: #6ee7b7;
	background: rgba(52, 211, 153, 0.14);
	border: 1px solid rgba(52, 211, 153, 0.3);
	border-radius: 5px;
	padding: 0.12rem 0.4rem;
	white-space: nowrap;
	line-height: 1.5;
}

.km-continue-btn__ep {
	font-size: 0.72rem;
	color: rgba(167, 243, 208, 0.65);
	font-weight: 500;
	line-height: 1;
}

.km-continue-btn__bar {
	height: 3px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
	margin-top: 0.15rem;
}

.km-continue-btn__prog {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, #34d399, #6ee7b7);
	box-shadow: 0 0 6px rgba(52, 211, 153, 0.65);
	min-width: 4%;
}

.km-continue-btn__time {
	flex-shrink: 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: #a7f3d0;
	white-space: nowrap;
	line-height: 1;
}

@media (max-width: 480px) {
	.km-continue-btn {
		padding: 0.7rem 0.85rem 0.7rem 0.7rem;
		gap: 0.75rem;
	}
	.km-continue-btn__icon {
		width: 36px;
		height: 36px;
	}
	.km-continue-btn__time {
		display: none;
	}
}

/* Legacy — kept for JS guest inject compatibility */
.km-detail__cta--continue { display: none; }
.km-detail__cta-track { opacity: 0.7; font-size: 0.88em; }

/* History page */
.km-history__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.km-history__guest-meta {
	font-size: 0.88rem;
}

.km-history__clear-btn {
	flex-shrink: 0;
	font-size: 0.82rem;
}

.km-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.km-history-item {
	display: flex;
	gap: 1rem;
	background: var(--km-surface);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	padding: 0.85rem;
	align-items: flex-start;
	transition: border-color 0.15s;
}

.km-history-item:hover {
	border-color: var(--km-accent);
}

.km-history-item__thumb-link {
	flex-shrink: 0;
}

.km-history-item__thumb {
	width: 64px;
	height: 90px;
	object-fit: cover;
	border-radius: calc(var(--km-radius-sm) - 2px);
	display: block;
}

.km-history-item__thumb--placeholder {
	width: 64px;
	height: 90px;
	background: var(--km-elevated);
	border-radius: calc(var(--km-radius-sm) - 2px);
}

.km-history-item__body {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.km-history-item__title {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--km-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.km-history-item__title:hover {
	color: var(--km-accent);
	text-decoration: none;
}

.km-history-item__meta {
	margin: 0;
	font-size: 0.8rem;
	color: var(--km-muted);
	line-height: 1.4;
}

.km-history-item__track {
	background: var(--km-elevated);
	padding: 0.1em 0.45em;
	border-radius: 4px;
	font-size: 0.75em;
	color: var(--km-accent);
}

.km-history-item__pos {
	color: var(--km-text);
	opacity: 0.75;
}

.km-history-item__bar-wrap {
	height: 3px;
	background: var(--km-elevated);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 0.1rem;
}

.km-history-item__bar {
	height: 100%;
	background: var(--km-accent);
	border-radius: 2px;
	transition: width 0.3s;
}

.km-history-item__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.35rem;
}

/* Small button variant */
.km-btn--sm {
	padding: 0.3rem 0.75rem;
	font-size: 0.8rem;
	min-height: unset;
}

/* Ghost button */
.km-btn--ghost {
	background: transparent;
	border: 1px solid var(--km-line);
	color: var(--km-muted);
}

.km-btn--ghost:hover {
	border-color: var(--km-accent);
	color: var(--km-accent);
}

@media (max-width: 480px) {
	.km-resume-toast {
		flex-direction: column;
		align-items: flex-start;
		bottom: 2rem;
		white-space: normal;
		left: 1rem;
		right: 1rem;
		transform: none;
		width: auto;
	}

	.km-resume-toast__btn {
		width: 100%;
		text-align: center;
	}

	.km-history-item__thumb,
	.km-history-item__thumb--placeholder {
		width: 52px;
		height: 74px;
	}
}

/* ── Comments ─────────────────────────────────────────────────────────────── */

.km-comments {
	margin-top: 1rem;
}

.km-comments__login-prompt {
	color: var(--km-muted);
	font-size: 0.88rem;
	margin: 0 0 1.25rem;
}

/* Form */
.km-comments__form {
	margin-bottom: 1.5rem;
}

.km-comments__form-row {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
}

.km-comments__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--km-elevated);
	margin-top: 2px;
}

.km-comments__form-field {
	flex: 1;
	min-width: 0;
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius-sm);
	transition: border-color 0.15s;
}

.km-comments__form-field:focus-within {
	border-color: var(--km-accent);
}

.km-comments__textarea {
	width: 100%;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--km-text);
	font-family: var(--km-font);
	font-size: 0.88rem;
	line-height: 1.55;
	padding: 0.6rem 0.75rem 0.4rem;
	resize: none;
	min-height: 68px;
	display: block;
}

.km-comments__textarea::placeholder {
	color: var(--km-muted);
}

.km-comments__form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.3rem 0.6rem 0.4rem;
	border-top: 1px solid var(--km-line);
	gap: 0.5rem;
}

.km-comments__char-count {
	font-size: 0.7rem;
	color: var(--km-muted);
	opacity: 0.7;
}

.km-comments__char-count.is-near-limit {
	color: var(--km-accent2);
	opacity: 1;
}

.km-comments__form-error {
	font-size: 0.8rem;
	color: #e05c5c;
	margin: 0.35rem 0 0 3rem;
}

/* List */
.km-comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-comment-item {
	display: flex;
	gap: 0.65rem;
	padding: 0.85rem 0.75rem;
	border-radius: var(--km-radius-sm);
	transition: background 0.12s;
}

.km-comment-item:hover {
	background: rgba(255, 255, 255, 0.025);
}

.km-comment-item__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--km-elevated);
}

.km-comment-item__body {
	flex: 1;
	min-width: 0;
}

.km-comment-item__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.km-comment-item__name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--km-text);
}

.km-comment-item__time {
	font-size: 0.72rem;
	color: var(--km-muted);
	margin-left: auto;
}

.km-comment-item__content {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.6;
	word-break: break-word;
	margin: 0;
}

.km-comment-item__actions {
	margin-top: 0.3rem;
}

.km-comment-item__del {
	background: none;
	border: none;
	color: var(--km-muted);
	font-size: 0.72rem;
	cursor: pointer;
	padding: 0;
	opacity: 0.6;
	transition: opacity 0.12s, color 0.12s;
}

.km-comment-item__del:hover {
	color: #e05c5c;
	opacity: 1;
}

/* Empty / loading / more */
.km-comments__empty,
.km-comments__loading {
	color: var(--km-muted);
	font-size: 0.85rem;
	margin: 1.25rem 0;
	text-align: center;
	opacity: 0.7;
}

.km-comments__more-wrap {
	text-align: center;
	padding: 0.75rem 0 0;
}

@media (max-width: 480px) {
	.km-comments__form-row {
		gap: 0.5rem;
	}

	.km-comments__avatar,
	.km-comment-item__avatar {
		width: 30px;
		height: 30px;
	}
}

/* ── User Rating Widget ────────────────────────────────────────────────────── */
.km-detail__rating-section {
	padding-block: 1.25rem 2rem;
}

.km-user-rating {
	background: var(--km-surface2);
	border-radius: var(--km-radius);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
}

/* Title hidden visually — accessible via h2 */
.km-user-rating__title {
	display: none;
}

.km-user-rating__inner {
	display: flex;
	align-items: center;
	gap: 0.5rem 0.75rem;
	flex-wrap: wrap;
}

.km-user-rating__label {
	width: 100%;
	margin: 0;
	font-size: 0.72rem;
	color: var(--km-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.km-user-rating__label a {
	color: var(--km-accent);
	text-transform: none;
	letter-spacing: 0;
}

.km-user-rating__label--guest {
	font-size: 0.82rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* Half-star row */
.km-ustar-row {
	display: inline-flex;
	gap: 3px;
	line-height: 1;
	user-select: none;
}

.km-ustar {
	display: inline-flex;
	gap: 0;
}

.km-ustar__h {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	transition: transform 0.1s;
	border-radius: 2px;
	outline-offset: 2px;
}

.km-ustar__h:hover {
	transform: scale(1.1);
}

.km-ustar__h:focus-visible {
	outline: 2px solid var(--km-accent);
}

.km-ustar-row--readonly .km-ustar__h {
	cursor: default;
	pointer-events: none;
}

.km-ustar__svg {
	display: block;
	fill: rgba(255, 255, 255, 0.14);
	transition: fill 0.12s, filter 0.12s;
}

.km-ustar__h.is-hover .km-ustar__svg {
	fill: #f0c040;
	filter: drop-shadow(0 0 5px rgba(240, 192, 64, 0.55));
}

.km-ustar__h.is-selected .km-ustar__svg {
	fill: #e8b020;
}

.km-ustar__h.is-hover.is-selected .km-ustar__svg {
	fill: #f5c842;
}

.km-ustar-row:hover .km-ustar__h:not(.is-hover) .km-ustar__svg {
	fill: rgba(255, 255, 255, 0.14);
}

/* Feedback text inline with stars */
.km-user-rating__feedback {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--km-accent2);
	min-width: auto;
}

.km-user-rating__feedback.is-saved {
	color: #5dd589;
}

.km-user-rating__feedback.is-error {
	color: #f07070;
	font-weight: 400;
}

/* Community section — separated by left border */
.km-user-rating__community {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.6rem;
	padding-left: 2rem;
	border-left: 1px solid rgba(255, 255, 255, 0.07);
	margin-top: 0;
	padding-top: 0;
}

/* Hide "Cộng đồng:" label — redundant in compact layout */
.km-user-rating__community-label {
	display: none;
}

.km-user-rating__community-count {
	font-size: 0.78rem;
	color: var(--km-muted);
}

.km-user-rating__community-count::before {
	content: "·";
	margin-right: 0.4rem;
	opacity: 0.5;
}

/* Smaller stars for community row */
.km-stars-wrap--sm .km-stars {
	font-size: 0.88rem;
	letter-spacing: 0.05em;
}

.km-stars-wrap--sm .km-stars__meta {
	font-size: 0.8rem;
}

.km-stars-wrap--sm .km-stars__meta strong {
	color: var(--km-accent2);
}

@media (max-width: 640px) {
	.km-user-rating__community {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
		padding-top: 0.75rem;
		width: 100%;
	}
}

/* Utilities */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	left: 0.5rem;
	top: 0.5rem;
	z-index: 100000;
	padding: 0.5rem 1rem;
	background: var(--km-accent);
	color: #fff;
	border-radius: var(--km-radius-sm);
}

/* ── Rating inline trong overlay của km-card ─────────────────────── */
.km-card__rating-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	color: #f5c842;
	font-weight: 700;
	font-size: 0.7rem;
	line-height: 1;
}

.km-card__rating-inline svg {
	flex-shrink: 0;
	color: #f5c842;
}

/* ── Detail page: quickmeta bar — hidden (removed from template) ─── */
.km-detail__quickmeta {
	display: none !important;
}

.km-detail__rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	background: rgba(245, 200, 66, 0.15);
	border: 1px solid rgba(245, 200, 66, 0.4);
	color: #f5c842;
	font-weight: 700;
	font-size: 0.88rem;
	line-height: 1;
}

.km-detail__rating-badge svg {
	color: #f5c842;
}

.km-detail__quickmeta-item {
	color: var(--km-muted);
	font-weight: 500;
}

.km-detail__quickmeta-cat {
	color: var(--km-muted);
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--km-line);
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	font-size: 0.78rem;
	transition: border-color 0.15s, color 0.15s;
}

.km-detail__quickmeta-cat:hover {
	border-color: var(--km-accent2, #e8b020);
	color: var(--km-accent2, #e8b020);
	text-decoration: none;
}

/* ── Top page ─────────────────────────────────────────────────────── */
.km-top-page {
	padding-top: 1.25rem;
	padding-bottom: 3rem;
}

.km-top-page__header {
	margin: 0.5rem 0 1.75rem;
}

.km-top-page__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: clamp(1.3rem, 3vw, 1.85rem);
	font-weight: 800;
	color: var(--km-accent2, #e8b020);
	margin: 0 0 0.4rem;
}

.km-top-page__title svg {
	color: #f5c842;
	flex-shrink: 0;
}

.km-top-page__desc {
	color: var(--km-muted);
	font-size: 0.88rem;
	margin: 0;
}

.km-top-page__empty {
	padding: 2.5rem;
	text-align: center;
	color: var(--km-muted);
	font-size: 0.95rem;
	background: var(--km-surface2);
	border-radius: var(--km-radius);
}

.km-top-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.km-top-item {
	display: grid;
	grid-template-columns: 3rem 80px 1fr auto;
	gap: 0 1rem;
	align-items: center;
	background: var(--km-surface2);
	border: 1px solid var(--km-line);
	border-radius: var(--km-radius);
	padding: 0.75rem 1rem;
	transition: border-color 0.15s, background 0.15s;
}

.km-top-item:hover {
	border-color: rgba(245, 200, 66, 0.35);
	background: var(--km-elevated);
}

.km-top-item__rank {
	justify-self: center;
	font-size: 1.05rem;
	font-weight: 800;
}

.km-top-item__poster-link {
	display: block;
	border-radius: var(--km-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.km-top-item__poster {
	width: 80px;
	aspect-ratio: 2 / 3;
	background: var(--km-surface2);
	overflow: hidden;
	border-radius: var(--km-radius-sm);
}

.km-top-item__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.km-top-item__poster-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, var(--km-elevated), var(--km-bg));
}

.km-top-item__body {
	min-width: 0;
}

.km-top-item__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.3rem;
	line-height: 1.3;
}

.km-top-item__title a {
	color: var(--km-text);
	text-decoration: none;
}

.km-top-item__title a:hover {
	color: var(--km-accent2, #e8b020);
}

.km-top-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	font-size: 0.78rem;
	color: var(--km-muted);
	margin-bottom: 0.35rem;
}

.km-top-item__year,
.km-top-item__status {
	font-weight: 500;
}

.km-top-item__cat {
	color: var(--km-muted);
	text-decoration: none;
	border: 1px solid var(--km-line);
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	font-size: 0.72rem;
	transition: border-color 0.15s, color 0.15s;
}

.km-top-item__cat:hover {
	border-color: var(--km-accent2, #e8b020);
	color: var(--km-accent2, #e8b020);
	text-decoration: none;
}

.km-top-item__rating {
	margin-bottom: 0.3rem;
}

.km-top-item__views {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--km-muted);
	margin: 0;
}

.km-top-item__cta {
	flex-shrink: 0;
	font-size: 0.8rem;
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.km-top-item {
		grid-template-columns: 2.5rem 64px 1fr;
		grid-template-rows: auto auto;
	}

	.km-top-item__cta {
		grid-column: 3;
		grid-row: 2;
		justify-self: start;
		margin-top: 0.5rem;
	}

	.km-top-item__poster {
		width: 64px;
	}
}

@media (max-width: 420px) {
	.km-top-item {
		grid-template-columns: 2rem 56px 1fr;
		gap: 0 0.65rem;
	}
}

/* ── Tablet responsive (641px – 900px) ────────────────────────────────── */
@media (max-width: 900px) and (min-width: 641px) {
	.km-home-section {
		padding: 1.6rem 0 2.1rem;
	}

	.km-home-section--trending {
		padding-top: 1.25rem;
		padding-bottom: 1.85rem;
	}

	.km-section {
		padding-block: 2rem;
	}

	.km-trend-card {
		flex: 0 0 clamp(145px, 26vw, 195px);
	}

	/* Poster grid gap thoáng hơn khi 4 cột ở tablet */
	.km-poster-grid {
		gap: 0.9rem 0.7rem;
	}

	.km-grid {
		gap: 1rem;
	}
}

/* ── Small tablet & large phone (481px – 768px) ─────────────────────────── */
@media (max-width: 768px) {
	/* Server buttons: 2 per row for easy tapping */
	.km-server-btn {
		flex: 1 1 calc(50% - 0.25rem);
		min-width: 0;
		min-height: 44px;
		padding: 0.5rem 0.7rem;
	}

	.km-watch__servers {
		gap: 0.4rem;
	}

	/* Tăng touch target cho tập phim */
	.km-ep-pill {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Watch nav buttons chiếm đều hàng */
	.km-player-shell__nav {
		justify-content: stretch;
	}

	.km-watch-nav-btn {
		flex: 1;
		justify-content: center;
		min-height: 44px;
	}

	.km-breadcrumb {
		font-size: 0.8rem;
		margin-bottom: 1rem;
	}

	/* Detail actions wrap tốt hơn */
	.km-detail__actions {
		gap: 0.5rem;
	}

	.km-detail__cta {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* Filter fields: wrap sớm hơn */
	.km-filter__bar {
		gap: 0.6rem;
	}
}

/* ── Hẹp hơn 641px nhưng vẫn là mobile ngang ────────────────────────────── */
@media (max-width: 640px) {
	/* Carousel card hẹp hơn để hiện nhiều thẻ hơn */
	.km-trend-card {
		flex: 0 0 clamp(135px, 38vw, 180px);
	}

	/* Search suggest dropdown không bị overflow */
	.km-search__suggest {
		max-height: 65vh;
	}

	/* Poster grid gap */
	.km-poster-grid {
		gap: 0.72rem 0.55rem;
	}

	.km-grid {
		gap: 0.75rem 0.55rem;
	}

	/* Auth card thu hẹp padding */
	.km-auth__card {
		padding: 1.5rem 1.25rem;
	}
}

/* ── Admin form: 3-col grid for meta fields ───────────────────────── */
.km-movie-form-grid--3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 1.25rem;
}

@media (max-width: 900px) {
	.km-movie-form-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.km-movie-form-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Comprehensive UX pass
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Episode grid: compact trên mobile ──────────────────────────────── */
@media (max-width: 767px) {
	.km-ep-grid {
		grid-template-columns: repeat(auto-fill, minmax(3.8rem, 1fr));
		gap: 0.4rem;
	}

	.km-ep-pill {
		min-height: 38px;
	}
}

/* ── 2. Episode pills: sizing màn hình rất nhỏ ──────────────────────────── */
@media (max-width: 380px) {
	.km-ep-grid {
		grid-template-columns: repeat(auto-fill, minmax(3.15rem, 1fr));
		gap: 0.32rem;
	}

	.km-ep-pill {
		font-size: 0.7rem;
		padding: 0.36rem 0.3rem;
		min-height: 34px;
	}
}

/* ── 3. Facts rows: giữ 2-col label|value đến 360px, stack dưới đó ─────── */
@media (max-width: 480px) {
	.km-detail__fact {
		grid-template-columns: minmax(0, 5.5rem) 1fr;
		gap: 0.25rem 0.65rem;
		font-size: 0.84rem;
	}
}

@media (max-width: 360px) {
	.km-detail__fact {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

/* ── 4. Subnav: fade edges gợi ý scroll ngang ──────────────────────────── */
@media (max-width: 900px) {
	.km-subnav {
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var(--km-gutter),
			#000 calc(100% - var(--km-gutter)),
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var(--km-gutter),
			#000 calc(100% - var(--km-gutter)),
			transparent 100%
		);
	}
}

/* ── 5. Breadcrumb: khoảng cách compact hơn trên mobile ────────────────── */
@media (max-width: 640px) {
	.km-breadcrumb {
		margin-top: 0.5rem;
		margin-bottom: 0.75rem;
	}
}

/* ── 6. Watch page: compact spacing dưới player ────────────────────────── */
@media (max-width: 640px) {
	.km-watch__below {
		padding-top: 0.5rem;
	}

	.km-watch__title-row {
		margin-top: 1rem;
		padding-top: 0.85rem;
	}

	.km-watch__title {
		font-size: clamp(1rem, 4.5vw, 1.2rem);
		margin-bottom: 0.45rem;
	}

	.km-watch__discuss {
		margin-top: 1rem;
		padding-top: 0.85rem;
	}

	.km-watch__notice {
		padding: 0.5rem 0.85rem;
		gap: 0.5rem;
		margin-top: 0.6rem;
		font-size: 0.8rem;
	}
}

/* ── 7. Player nav: compact hơn trên điện thoại ─────────────────────────── */
@media (max-width: 640px) {
	.km-player-shell__nav {
		/* padding-inline đã set trong base CSS (.km-player-shell__nav) — chỉ thu gọn vertical */
		padding-top: 0.5rem;
		gap: 0.4rem;
	}

	.km-watch-nav-btn {
		font-size: 0.82rem;
	}
}

/* ── 8. Comments: textarea touch-friendly, footer wrap ─────────────────── */
@media (max-width: 640px) {
	.km-comments__textarea {
		min-height: 70px;
		font-size: 1rem;
	}

	.km-comments__form-footer {
		flex-wrap: wrap;
		gap: 0.45rem;
	}

	.km-comments__submit {
		min-height: 40px;
		padding: 0.5rem 1rem;
	}

	.km-detail__section-head {
		font-size: 1rem;
		margin-bottom: 0.8rem;
	}
}

/* ── 9. Archive / listing: spacing gọn hơn trên mobile ─────────────────── */
@media (max-width: 640px) {
	.km-page-head {
		margin-bottom: 0.85rem;
	}

	.km-page-meta {
		font-size: 0.8rem;
	}
}

/* ── 10. Header: tighten inner gap trên điện thoại rất nhỏ ─────────────── */
@media (max-width: 380px) {
	.km-header__top-inner {
		gap: 0.35rem 0.4rem;
	}

	.km-tool-btn {
		width: 40px;
		height: 40px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR — Mobile only (≤900px)
   ═══════════════════════════════════════════════════════════════════════════ */

.km-bnav {
	display: none; /* ẩn mặc định — chỉ hiện trên mobile */
}

@media (max-width: 900px) {
	/* Ẩn các nút tool (filter, history, user) — chỉ giữ hamburger mở sidebar */
	.km-header__tools .km-tool-btn,
	.km-header__tools .km-user-menu {
		display: none;
	}

	.km-bnav {
		display: none; /* bottom nav tắt trên mobile — dùng hamburger sidebar */
	}

	.km-bnav__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 7px 4px;
		min-height: 56px;
		background: none;
		border: none;
		font: inherit;
		cursor: pointer;
		color: var(--km-muted);
		text-decoration: none;
		transition: color 0.15s;
		-webkit-tap-highlight-color: transparent;
		position: relative;
	}

	.km-bnav__item::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%) scaleX(0);
		width: 28px;
		height: 2px;
		border-radius: 0 0 2px 2px;
		background: var(--km-accent);
		transition: transform 0.2s;
	}

	.km-bnav__item.is-active,
	.km-bnav__item[aria-current="page"] {
		color: var(--km-accent-hover);
	}

	.km-bnav__item.is-active::before,
	.km-bnav__item[aria-current="page"]::before {
		transform: translateX(-50%) scaleX(1);
	}

	.km-bnav__item--more.is-open {
		color: var(--km-accent-hover);
	}

	.km-bnav__ico {
		width: 22px;
		height: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.km-bnav__ico svg {
		transition: transform 0.18s;
	}

	/* Bars icon và Close icon cho nút Menu */
	.km-bnav__more-close {
		display: none;
	}

	.km-bnav__item--more.is-open .km-bnav__more-bars {
		display: none;
	}

	.km-bnav__item--more.is-open .km-bnav__more-close {
		display: block;
	}

	.km-bnav__label {
		font-size: 0.65rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		line-height: 1;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.km-bnav__label {
		font-size: 0.6rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Comprehensive UX Enhancement
   Mọi thay đổi dưới đây đều nhằm: touch target ≥44px, không vỡ layout,
   không tràn ngang, giao diện dễ dùng trên điện thoại ≥320px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Touch targets: tất cả nút / input phải ≥44×44px ────────────────── */

.km-btn {
	min-height: 44px;
}

.km-btn--sm {
	min-height: 36px;
}

.km-field input,
.km-field select,
.km-auth__input {
	min-height: 44px;
}

/* Submit search: đảm bảo touch target 44px trên mobile */
.km-search__submit {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

/* Tool buttons trong header */
.km-tool-btn {
	min-height: 44px;
	min-width: 44px;
}

/* Nav toggle */
.km-nav-toggle {
	min-width: 44px;
	min-height: 44px;
}

/* Episode pills đủ cao */
.km-ep-pill {
	min-height: 40px;
}

/* ── 2. Ngăn tràn ngang — chỉ trên wrapper, KHÔNG dùng overflow-x: hidden trên layout chính
        vì sẽ clip carousel (negative margin), sticky header, và drop-shadow.
        html { overflow-x: clip } đã đủ cho toàn trang. ──────────────────── */

/* Chỉ ngăn overflow trên các text container nhỏ */
.km-poster-card__info,
.km-card__overlay {
	min-width: 0;
}

.km-mini-movie,
.km-hot-card {
	min-width: 0;
}

/* ── 3. Gutter mobile: tăng padding 2 bên cho dễ đọc ────────────────────── */

@media (max-width: 900px) {
	:root {
		--km-gutter: 1.25rem;
	}
}

/* ── 3b. Gutter nhỏ hơn trên màn hình rất hẹp (≤360px) ─────────────────── */

@media (max-width: 360px) {
	:root {
		--km-gutter: 0.85rem;
	}

	.km-section {
		padding-block: 1.1rem;
	}

	.km-page-title {
		font-size: 1.15rem;
	}

	.km-section-head__title {
		font-size: 1rem;
	}

	.km-detail__side {
		max-width: 140px;
	}

	.km-home-section {
		padding: 1rem 0 1.35rem;
	}
}

/* ── 4. Input font-size ≥16px — ngăn iOS Safari tự zoom khi focus ───────── */

@media (max-width: 767px) {
	.km-field input,
	.km-field select,
	.km-auth__input,
	.km-comments__textarea,
	.km-search__input {
		font-size: max(1rem, 16px);
	}
}

/* ── 5. Footer: căn giữa copyright trên mobile, không dùng right-align ──── */

@media (max-width: 640px) {
	.km-footer__bottom {
		text-align: center;
	}

	.km-footer__wrap {
		padding-top: 1.75rem;
	}
}

@media (max-width: 480px) {
	.km-footer__bar {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.km-footer__bar .km-footer__bottom {
		text-align: center;
	}
}

/* ── 6. Drawer: đủ khoảng padding-bottom để không bị bnav che ──────────── */

@media (max-width: 900px) {
	.km-drawer__inner {
		padding-bottom: calc(max(1.5rem, env(safe-area-inset-bottom, 0px)) + 64px);
	}
}

/* ── 7. Search suggest: z-index phải cao hơn bottom nav ─────────────────── */

@media (max-width: 900px) {
	.km-search__suggest {
		z-index: 99970;
	}
}

/* ── 8. Pagination: compact trên màn hình hẹp ───────────────────────────── */

@media (max-width: 480px) {
	.km-pagination a.page-numbers,
	.km-pagination span.page-numbers {
		min-width: 2rem;
		min-height: 2rem;
		padding: 0 0.35rem;
		font-size: 0.8rem;
	}

	.km-pagination .page-numbers {
		gap: 0.25rem 0.35rem;
	}
}

@media (max-width: 360px) {
	.km-pagination a.page-numbers,
	.km-pagination span.page-numbers {
		min-width: 1.75rem;
		min-height: 1.75rem;
		font-size: 0.75rem;
	}
}

/* ── 9. User dropdown: không tràn ra ngoài viewport ────────────────────── */

@media (max-width: 480px) {
	.km-user-menu__panel {
		right: -0.5rem;
		max-width: calc(100vw - 1rem);
	}
}

/* ── 10. Player: trạng thái landscape mobile ─────────────────────────────── */

@media (max-width: 900px) and (orientation: landscape) {
	/* Player không chiếm quá nhiều màn hình ngang */
	.km-player {
		aspect-ratio: 16 / 9;
		max-height: 56vw;
	}

	/* Ẩn bottom nav khi landscape để tận dụng màn hình */
	.km-bnav {
		display: none;
	}

	.km-body-flow {
		padding-bottom: 0;
	}
}

/* ── 11. Skip / play overlay: luôn hiển thị trên mobile (không cần hover) ── */

@media (hover: none) and (pointer: coarse) {
	/* Touch device: skip buttons và play button luôn visible */
	.km-skip-btn,
	.km-pp-btn {
		opacity: 0.85;
		pointer-events: auto;
	}

	.km-skip-btn {
		width: 48px;
		height: 48px;
	}

	.km-pp-btn {
		width: 52px;
		height: 52px;
	}
}

/* ── 12. Server buttons: đủ touch target ──────────────────────────────── */

@media (max-width: 640px) {
	.km-server-btn {
		min-height: 44px;
		padding: 0.5rem 0.75rem;
	}
}

/* ── 13. Watch nav buttons: đủ touch target ────────────────────────────── */

@media (max-width: 640px) {
	.km-watch-nav-btn {
		min-height: 44px;
	}
}

/* ── 14. Filter: full-width button trên 480-640px (giữa mobile/tablet) ──── */

@media (max-width: 640px) {
	.km-filter__actions {
		width: 100%;
	}

	.km-filter__actions .km-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ── 15. Detail CTA buttons: đủ cao, dễ bấm ──────────────────────────── */

@media (max-width: 640px) {
	.km-detail__cta {
		min-height: 50px;
		font-size: 0.95rem;
		border-radius: var(--km-radius);
	}

	.km-detail__actions {
		gap: 0.6rem;
	}
}

/* ── 16. History items: compact trên mobile nhỏ ────────────────────────── */

@media (max-width: 480px) {
	.km-history-item {
		gap: 0.6rem;
		padding: 0.75rem;
	}

	.km-history-item__title {
		font-size: 0.88rem;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.km-history-item__meta {
		font-size: 0.75rem;
	}
}

/* ── 17. Bookmark page: follow cùng grid rules đã có ──────────────────── */
/* km-grid đã responsive, không cần thêm */

/* ── 18. Tags/chip list: wrap tốt hơn trên mobile ─────────────────────── */

@media (max-width: 480px) {
	.km-chip-list--large .km-chip {
		font-size: 0.88rem;
		padding: 0.4rem 0.75rem;
	}
}

/* ── 19. Comments form: đủ accessible trên mobile ─────────────────────── */

@media (max-width: 640px) {
	.km-comments__submit {
		min-height: 40px;
		padding: 0.45rem 0.9rem;
	}

	.km-comments__form-error {
		margin-left: 0;
	}
}

/* ── 20. Auth card: không tràn ngang trên màn hình nhỏ ─────────────────── */

@media (max-width: 480px) {
	.km-auth {
		padding-inline: 0;
		align-items: stretch;
	}

	.km-auth__card {
		border-left: none;
		border-right: none;
		border-radius: 0;
		width: 100%;
		max-width: 100%;
	}
}

/* ── 21. Subnav desktop: ẩn hẳn trên mobile (failsafe) ─────────────────── */

@media (max-width: 900px) {
	.km-header__subnav-wrap--desktop {
		display: none !important;
	}
}

/* ── 22. Home layout: sidebar dưới content trên tablet nhỏ ─────────────── */

@media (max-width: 640px) {
	.km-home-aside {
		padding-top: 0;
		padding-bottom: 0.5rem;
		gap: 1rem;
	}

	.km-side-card {
		padding: 0.9rem 0.85rem;
	}
}

/* ── 23. Day filter 360px: không squeeze quá ───────────────────────────── */

@media (max-width: 360px) {
	.km-day-tabs {
		gap: 0.25rem;
	}

	.km-day-tab {
		padding: 0.3rem 0.1rem;
		min-height: 2.1rem;
		border-radius: 8px;
	}

	.km-day-tab__short,
	.km-day-tab__full,
	.km-day-tab__label {
		font-size: 0.65rem;
	}
}

/* ── 24. Resume toast: đủ khoảng trên mobile landscape ─────────────────── */

@media (max-width: 640px) {
	.km-resume-toast {
		max-width: calc(100vw - 2rem);
	}
}

/* ── 25. Episode pill text: không vỡ chữ ──────────────────────────────── */

.km-ep-pill {
	word-break: keep-all;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── 26. Breadcrumb: không tràn ngang ────────────────────────────────────── */

.km-breadcrumb ol {
	overflow-wrap: anywhere;
}

.km-breadcrumb li {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 12rem;
}

.km-breadcrumb li:last-child {
	max-width: 16rem;
}

/* ── 27. Section head: responsive gap nhỏ hơn ──────────────────────────── */

@media (max-width: 420px) {
	.km-section-head {
		gap: 0.4rem 0.75rem;
		margin-bottom: 0.85rem;
	}
}

/* ── 28. Poster card title: đủ dễ đọc ─────────────────────────────────── */

@media (max-width: 360px) {
	.km-poster-card__title {
		font-size: 0.72rem;
	}

	.km-poster-card__sub {
		font-size: 0.62rem;
	}

	.km-card__title {
		font-size: 0.78rem;
	}
}

/* ── 29. Header brand: không bị co lại ─────────────────────────────────── */

.km-header__brand {
	flex-shrink: 0;
	min-width: 0;
}

/* ── 30. Footer custom HTML: responsive ────────────────────────────────── */

@media (max-width: 480px) {
	.km-footer__custom {
		font-size: 0.85rem;
	}
}

/* ── 31. Watch breadcrumb: font nhỏ hơn, không wrap xấu ──────────────── */

@media (max-width: 480px) {
	.km-watch__breadcrumb .km-breadcrumb {
		font-size: 0.7rem;
	}
}

/* ── 32. Player error overlay text: đọc được trên mobile nhỏ ──────────── */

@media (max-width: 480px) {
	.km-player-error span {
		font-size: 0.8rem;
		max-width: 26ch;
	}
}

/* ── 33. Safe area: bottom bar luôn hưởng env() ────────────────────────── */

@media (max-width: 900px) {
	.km-bnav {
		padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
	}

	.km-footer {
		padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	}
}

/* ── 34. Poster grid: 2 cột tối thiểu trên mọi thiết bị ≤480px ─────────── */

@media (max-width: 360px) {
	.km-poster-grid,
	.km-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem 0.4rem;
	}
}

/* ── 35. km-continue-btn: text không cắt lạ trên rất nhỏ ──────────────── */

@media (max-width: 360px) {
	.km-continue-btn {
		padding: 0.6rem 0.75rem 0.6rem 0.6rem;
		gap: 0.6rem;
	}

	.km-continue-btn__icon {
		width: 32px;
		height: 32px;
	}

	.km-continue-btn__label {
		font-size: 0.82rem;
	}
}

/* ── 36. Rating widget: wrap đẹp hơn trên mobile nhỏ ──────────────────── */

@media (max-width: 480px) {
	.km-user-rating {
		padding: 0.85rem 1rem;
		gap: 0.6rem 1rem;
	}

	.km-user-rating__community {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
		padding-top: 0.6rem;
		width: 100%;
	}
}

/* ── 37. Carousel mobile: touch-scroll mượt, KHÔNG override snap trên marquee ─
        scroll-snap-type đã set trong base CSS, km-carousel__track--marquee
        override nó thành none. Không lặp lại ở đây để tránh xung đột.  ─── */

@media (max-width: 640px) {
	/* Chỉ áp cho non-marquee track (swipe thủ công) */
	.km-carousel__track:not(.km-carousel__track--marquee) {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
}

/* ── 38. Focus visible: đủ rõ ràng ─────────────────────────────────────── */

:focus-visible {
	outline: 2px solid var(--km-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.km-search__input:focus-visible {
	outline: none;

}
/* ── 39. Image loading skeleton: tránh layout shift ────────────────────── */

.km-poster-card__media img,
.km-card__media img,
.km-trend-card__media img {
	min-height: 1px;
}

/* ── 40. Detail poster mobile: không bị cắt ──────────────────────────── */

@media (max-width: 640px) {
	.km-detail__side {
		max-width: min(180px, 45vw);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE REFACTOR — Mobile UX Patch v2
   Tối ưu spacing, touch targets, layout cho mobile ≤768px.
   Không thay đổi logic, chức năng, AJAX, query, hay business flow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Section head link: touch target ≥44px trên mobile ─────────────── */

@media (max-width: 900px) {
	.km-section-head__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-block: 0.25rem;
	}
}

/* ── B. Front-page-static: padding compact hơn trên mobile ────────────── */

@media (max-width: 640px) {
	.km-front-page-static {
		padding: 1.25rem 0 1.75rem;
	}
}

@media (max-width: 480px) {
	.km-front-page-static {
		padding: 1rem 0 1.4rem;
	}
}

/* ── C. Detail discuss: padding-top gọn hơn trên mobile ───────────────── */

@media (max-width: 640px) {
	.km-detail__discuss {
		padding-top: 1.25rem;
	}
}

@media (max-width: 480px) {
	.km-detail__discuss {
		padding-top: 1rem;
	}
}

/* ── D. Detail plot: bottom gọn hơn trên mobile ───────────────────────── */

@media (max-width: 640px) {
	.km-detail__plot {
		padding-bottom: 0.75rem;
	}
}

/* ── E. Detail ep-block stacking: margin compact hơn trên mobile ──────── */

@media (max-width: 640px) {
	.km-detail__ep-block + .km-detail__ep-block {
		margin-top: 1.25rem;
		padding-top: 0.85rem;
	}
}

@media (max-width: 480px) {
	.km-detail__ep-block + .km-detail__ep-block {
		margin-top: 1rem;
		padding-top: 0.75rem;
	}
}

/* ── F. Top page header: margin compact hơn trên mobile ───────────────── */

@media (max-width: 640px) {
	.km-top-page__header {
		margin-bottom: 1.25rem;
	}

	.km-top-page {
		padding-top: 1rem;
		padding-bottom: 2rem;
	}
}

@media (max-width: 480px) {
	.km-top-page__header {
		margin-bottom: 1rem;
	}
}

/* ── G. Home section grid: bottom padding gọn hơn trên mobile ─────────── */

@media (max-width: 640px) {
	.km-home-section--grid {
		padding-bottom: 1rem;
	}
}

/* ── H. User menu links: touch target tối thiểu trên mobile ───────────── */

@media (max-width: 900px) {
	.km-user-menu__link {
		min-height: 44px;
	}
}

/* ── I. Watch tags: spacing gọn trên mobile ────────────────────────────── */

@media (max-width: 640px) {
	.km-watch__tags {
		margin-top: 0.85rem;
		padding-top: 0.75rem;
	}
}

/* ── J. Filter field: reset min-width khi stacked trên mobile nhỏ ──────── */

@media (max-width: 480px) {
	.km-filter .km-field,
	.km-filter .km-field--grow {
		min-width: 0;
	}
}

/* ── K. Section head: khoảng cách tốt hơn ở 481–640px ─────────────────── */

@media (max-width: 640px) and (min-width: 421px) {
	.km-section-head__title {
		font-size: 1.12rem;
	}
}

/* ── L. Best movies page: heading compact trên mobile ─────────────────── */

@media (max-width: 640px) {
	.km-best-head__title-wrap {
		gap: 0.45rem;
	}
}

/* ── M. Drawer genre list: touch target dễ bấm hơn ───────────────────── */

@media (max-width: 900px) {
	.km-drawer__genre-list li a {
		padding-block: 0.6rem;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* ── N. Footer grid wrap: bottom padding nhỏ hơn ở ≤480px ─────────────── */

@media (max-width: 480px) {
	.km-footer__grid {
		padding-bottom: 1.75rem;
		gap: 1.25rem;
	}
}

/* ── O. Page 404: hero compact trên mobile ─────────────────────────────── */

@media (max-width: 640px) {
	.km-hero {
		padding: clamp(1.5rem, 6vw, 2.5rem) 0;
	}

	.km-hero__desc {
		margin-bottom: 1rem;
	}
}

/* ── P. Chip list: gap hợp lý hơn trên mobile nhỏ ─────────────────────── */

@media (max-width: 480px) {
	.km-chip-list {
		gap: 0.4rem;
	}

	.km-chip {
		font-size: 0.82rem;
		padding: 0.3rem 0.65rem;
	}
}

/* ── Q. Tags inline trong detail: wrap tốt hơn trên mobile ─────────────── */

@media (max-width: 480px) {
	.km-detail__tags-inline {
		gap: 0.28rem;
	}

	.km-detail__tags-inline a {
		font-size: 0.78rem;
		padding: 0.18rem 0.45rem;
	}
}

/* ── R. Bottom nav label: hiển thị rõ hơn ──────────────────────────────── */

@media (max-width: 360px) {
	.km-bnav__label {
		font-size: 0.58rem;
		letter-spacing: 0;
	}

	.km-bnav__ico svg {
		width: 20px;
		height: 20px;
	}
}

/* ── S. Watch page: spacing tổng thể compact trên mobile ──────────────── */

@media (max-width: 480px) {
	.km-watch {
		padding-bottom: 1.5rem;
	}
}

/* ── T. Responsive iframe/embed trong content bài viết ─────────────────── */

.km-content iframe,
.km-content embed,
.km-content object,
.entry-content iframe,
.entry-content embed {
	max-width: 100%;
	height: auto;
}

.km-content .wp-block-embed__wrapper,
.entry-content .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.km-content .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ── U. Table trong content: horizontal scroll thay vì vỡ ─────────────── */

.km-content table,
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ── V. Poster card overlay padding compact hơn ở 360px ──────────────── */

@media (max-width: 360px) {
	.km-poster-card__overlay {
		padding: 2.5rem 0.45rem 0.45rem;
	}

	.km-card__overlay {
		padding: 2rem 0.5rem 0.5rem;
	}
}

/* ── W. Section head link: không xuống dòng xấu trên mobile hẹp ────────── */

.km-section-head__link {
	white-space: nowrap;
}

/* ── X. History item: layout compact khi màn hình rất nhỏ ─────────────── */

@media (max-width: 360px) {
	.km-history-item {
		gap: 0.55rem;
		padding: 0.65rem;
	}

	.km-history-item__thumb,
	.km-history-item__thumb--placeholder {
		width: 46px;
		height: 66px;
	}
}

/* ── Y. Drawer inner scroll: đủ khoảng khi có nhiều mục ─────────────────── */

@media (max-width: 900px) {
	.km-drawer__inner {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
}

/* ── Z. Auth card: padding thoáng hơn ở 481–640px ────────────────────── */

@media (max-width: 640px) and (min-width: 481px) {
	.km-auth__card {
		padding: 1.75rem 1.5rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERFLOW FIX — Root cause patch
   Ngăn tràn ngang toàn site: body clip (iOS Safari), grid/flex children
   min-width:0, media responsive, và containment cho các wrapper section.

   QUAN TRỌNG: KHÔNG đặt overflow-x:clip lên phần tử có absolute/fixed children
   (như km-container, km-header) vì browser tự set overflow-y:clip theo cặp,
   sẽ clip dropdown menu và search suggest.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Grid/flex children: thêm min-width:0 cho những nơi còn thiếu ───── */

/* Detail page grid children */
.km-detail__main,
.km-detail__side,
.km-detail__actions,
.km-detail__facts {
	min-width: 0;
}

/* Hot card & mini movie list items */
.km-hot-card__name,
.km-mini-movie__body,
.km-mini-movie__title {
	min-width: 0;
}

/* History / bookmark items */
.km-history-item__body,
.km-comment-item__body {
	min-width: 0;
}

/* Top item body */
.km-top-item__body {
	min-width: 0;
}

/* Watch page sections */
.km-watch__below,
.km-watch__ep-sections {
	min-width: 0;
}

/* ── 2. Max-width: 100% cho tất cả media content ───────────────────────── */

video,
embed,
object,
canvas {
	max-width: 100%;
}

/* Player iframe giữ nguyên (đã có aspect-ratio) */

/* ── 3. Word-break cho các text block chứa nội dung dài ────────────────── */

.km-detail__plot-body,
.km-watch__notice-text,
.km-comment-item__content,
.km-footer__custom,
.km-poster-card__title,
.km-card__title {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ── 4. Overflow containment: chỉ trên wrapper an toàn (không có
         absolute/fixed children trực tiếp), và dùng overflow: hidden
         thay vì clip để đảm bảo tương thích browser cũ. ────────────────── */

/* km-home chứa toàn bộ trang chủ — không có dropdown/fixed child trực tiếp */
.km-home {
	overflow-x: hidden;
}

/* km-front-page-static: section nội dung tĩnh */
.km-front-page-static {
	overflow-x: hidden;
}

/* ── 5. Carousel: reset negative margin — đây là nguyên nhân phổ biến nhất
         gây horizontal overflow khi html overflow-x:clip không được
         browser cũ support.
         Cards vẫn có padding qua track padding-inline. ────────────────── */

.km-carousel {
	margin-inline: 0;
}

/* Track padding để cards không dính lề */
@media (max-width: 900px) {
	.km-carousel__track {
		padding-inline: 0.5rem;
	}
}

/* ── 6. Filter fields: max-width để không overflow container ──────────── */

.km-filter .km-field,
.km-filter .km-field--grow {
	max-width: 100%;
	box-sizing: border-box;
}

.km-field select,
.km-field input[type="text"],
.km-field input[type="search"] {
	max-width: 100%;
	box-sizing: border-box;
}

/* ── 7. Table trong content: horizontal scroll thay vì vỡ layout ─────── */

.entry-content table,
.km-content table,
.km-detail__plot-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ── 8. Pre và code: scroll ngang thay vì vỡ ─────────────────────────── */

pre {
	overflow-x: auto;
	max-width: 100%;
	white-space: pre;
}

code {
	overflow-wrap: break-word;
	word-break: break-all;
}

/* ── 9. Footer đã có overflow:hidden — đảm bảo link list không tràn */

.km-footer__link-list a,
.km-footer__nav a {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERFLOW CONTAINMENT — Targeted fixes cho flex/grid body containers
   Thêm overflow:hidden để ngăn nowrap text tràn ra ngoài flex item.
   ═══════════════════════════════════════════════════════════════════════════ */

/* km-mini-movie__body: flex item chứa title và views */
.km-mini-movie__body {
	overflow: hidden;
}

/* km-suggest__info: flex item chứa title (white-space:nowrap) */
.km-suggest__info {
	overflow: hidden;
}

/* km-comment-item__body: flex item chứa comment text */
.km-comment-item__body {
	overflow: hidden;
}

/* km-watch__below và km-player-shell__bar-title: prevent text overflow */
.km-player-shell__bar-title {
	min-width: 0;
	flex: 1 1 auto;
}

/* km-continue-btn__body: flex item with ep info */
.km-continue-btn__body {
	overflow: hidden;
}

/* km-section: main content wrapper — safe to clip (no absolute dropdown children) */
.km-section {
	overflow-x: clip;
}

/* km-detail: single movie page */
.km-detail {
	overflow-x: clip;
}

/* km-watch: episode watch page */
.km-watch {
	overflow-x: clip;
}

/* km-top-page: top movies page */
.km-top-page {
	overflow-x: clip;
}

/* km-auth: login/register pages */
.km-auth {
	overflow-x: clip;
}

/* km-best-movies header section */
.km-top-page,
.km-best-page {
	overflow-x: clip;
}

/* ── Hot-card list: 2 cột trên mobile ──────────────────────────────────── */
@media (max-width: 900px) {
	.km-hot-card-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem;
	}

	.km-hot-card {
		padding: 0.5rem 0.55rem;
	}

	.km-hot-card__name {
		font-size: 0.82rem;
	}

	.km-hot-card__count {
		font-size: 0.68rem;
	}
}

/* ── 404 / Episode-not-found page ──────────────────────────────────────────── */
.km-ep404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 4rem 1rem 5rem;
	max-width: 52rem;
	margin-inline: auto;
}

.km-ep404__film,
.km-ep404__icon {
	color: var(--km-muted);
	margin-bottom: 1.5rem;
	opacity: .75;
}

.km-ep404__code {
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 0.25rem;
	background: linear-gradient(135deg, var(--km-accent) 0%, var(--km-accent-hover) 60%, var(--km-muted) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.km-ep404__title {
	font-size: clamp(1.3rem, 4vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	color: var(--km-text);
}

.km-ep404__desc {
	color: var(--km-muted);
	font-size: 0.95rem;
	line-height: 1.65;
	max-width: 36rem;
	margin: 0 0 2rem;
}

.km-ep404__desc strong {
	color: var(--km-text);
	font-weight: 600;
}

.km-ep404__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* Has-movie variant: poster + info side by side */
.km-ep404--has-movie {
	align-items: stretch;
	text-align: left;
	gap: 0;
}

.km-ep404--has-movie .km-ep404__code {
	font-size: clamp(2.5rem, 6vw, 3.5rem);
}

.km-ep404--has-movie .km-ep404__actions {
	justify-content: flex-start;
}

.km-ep404__movie-card {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--km-elevated);
	margin-bottom: 2rem;
	width: 100%;
}

.km-ep404__poster-link {
	flex-shrink: 0;
}

.km-ep404__poster {
	display: block;
	width: 120px;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

.km-ep404__movie-info {
	flex: 1;
	min-width: 0;
	padding-top: 0.25rem;
}

.km-ep404__eps-wrap {
	width: 100%;
	text-align: left;
}

.km-ep404__eps-label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--km-muted);
	margin: 0 0 0.75rem;
}

.km-ep404__eps-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.km-ep404__ep-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border-radius: 6px;
	background: var(--km-surface2);
	color: var(--km-text);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	border: 1px solid var(--km-elevated);
}

.km-ep404__ep-btn:hover {
	background: var(--km-accent);
	color: #fff;
	border-color: var(--km-accent);
}

@media (max-width: 600px) {
	.km-ep404__movie-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.25rem;
	}

	.km-ep404--has-movie .km-ep404__actions {
		justify-content: center;
	}

	.km-ep404__poster {
		width: 100px;
		height: 150px;
	}
}

/* ── Back to top ────────────────────────────────────────────────────────────── */
.km-back-top {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9000;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--km-elevated);
	color: var(--km-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.45);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s, transform 0.25s, background 0.15s, color 0.15s;
	pointer-events: none;
}

.km-back-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.km-back-top:hover {
	background: var(--km-accent);
	color: #fff;
}

/* Trên mobile: đẩy lên trên bottom nav */
@media (max-width: 900px) {
	.km-back-top {
		bottom: calc(var(--km-bnav-h, 60px) + 0.75rem);
		right: 1rem;
		width: 38px;
		height: 38px;
	}
}