/* ═══════════════════════════════════════════════════════
	   BICPHIM — Motchill-Inspired Theme
	   Dark cinema UI | Lexend + Be Vietnam Pro
	   ═══════════════════════════════════════════════════════ */
	:root {
		--bg-primary:   #020204;
		--bg-secondary: #0a0c10;
		--bg-card:      #0f1117;
		--bg-elevated:  #151820;
		--border:       rgba(255,255,255,.07);
		--text-primary: #f0f2f5;
		--text-secondary:#a0a8b8;
		--text-muted:   #5a6275;
		--accent:       #00c853;
		--accent-hover: #69f0ae;
		--accent-red:   #e63946;
		--accent-blue:  #4361ee;
		--accent-green: #2ec4b6;
		--header-h:     56px;
		--nav-h:        46px;
		--radius:       8px;
		--radius-sm:    5px;
		--shadow:        0 4px 24px rgba(0,0,0,.5);
	}

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

	html { scroll-behavior: smooth; }

	html { overflow-x: hidden; }
	body {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		background: var(--bg-primary);
		color: var(--text-primary);
		font-size: 14px;
		line-height: 1.6;
	}

	a { color: inherit; text-decoration: none; }
	a:hover { color: var(--accent); }
	img { max-width: 100%; display: block; }

	/* ── Scrollbar ── */
	::-webkit-scrollbar { width: 5px; height: 5px; }
	::-webkit-scrollbar-track { background: var(--bg-primary); }
	::-webkit-scrollbar-thumb { background: #2a2f3d; border-radius: 3px; }
	::-webkit-scrollbar-thumb:hover { background: #3a4055; }

	/* ══════════════════════════════
	   HEADER TOP — logo + search
	   ══════════════════════════════ */
	.site-header-top {
		position: fixed;
		top: 0; left: 0; right: 0;
		z-index: 1000;
		height: var(--header-h);
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-bottom: 1px solid transparent;
		display: flex;
		align-items: center;
		transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
	}
	/* Khi scroll xuống — header hiện nền */
	.site-header-top.header-scrolled {
		background: rgba(10,11,15,.97);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--border);
	}
	/* Mobile: header luôn có nền vì layout 2 hàng */
	@media (max-width: 768px) {
		.site-header-top,
		.site-header-top.header-scrolled {
			background: rgba(10,11,15,.97) !important;
			backdrop-filter: blur(12px) !important;
			-webkit-backdrop-filter: blur(12px) !important;
		}
	}
	.site-header-top .inner {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 20px;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	/* Logo */
	.site-logo {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: clamp(20px, 1.6vw, 26px);
		font-weight: 800;
		letter-spacing: -0.5px;
		color: var(--text-primary);
		white-space: nowrap;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.site-logo span.logo-accent { color: var(--accent); }
	.site-logo img { height: 36px; width: auto; }

	/* Search bar */
	.site-search {
		flex: 1;
		max-width: 480px;
		position: relative;
	}
	.site-search form {
		display: flex;
		align-items: center;
		background: var(--bg-elevated);
		border: 1px solid var(--border);
		border-radius: 24px;
		overflow: hidden;
		transition: border-color .2s;
	}
	.site-search form:focus-within {
		border-color: var(--accent);
	}
	.site-search input {
		flex: 1;
		background: transparent;
		border: none;
		outline: none;
		color: var(--text-primary);
		padding: 9px 16px;
		font-size: clamp(13px, 0.9vw, 15px);
		font-family: inherit;
	}
	.site-search input::placeholder { color: var(--text-muted); }
	.site-search button {
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 9px 16px;
		color: var(--text-secondary);
		transition: color .2s;
	}
	.site-search button:hover { color: var(--accent); }

	/* Header right actions */
	.header-actions {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-left: auto;
		flex-shrink: 0;
	}
	.header-actions a {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 7px 13px;
		border-radius: 6px;
		font-size: clamp(12.5px, 0.9vw, 14.5px);
		font-weight: 500;
		color: var(--text-secondary);
		transition: all .2s;
		white-space: nowrap;
	}
	.header-actions a:hover {
		color: var(--text-primary);
		background: var(--bg-elevated);
	}
	.header-actions .btn-login {
		background: var(--accent);
		color: #0a0b0f;
		font-weight: 700;
	}
	.header-actions .btn-login:hover {
		background: var(--accent-hover);
		color: #0a0b0f;
	}

	/* User dropdown */
	.user-dropdown-wrap {
		position: relative;
	}
	.user-dropdown-wrap > a {
		cursor: pointer;
		user-select: none;
	}
	.user-dropdown-menu {
		display: none;
		position: absolute;
		top: 100%;           /* sát ngay trigger, không gap */
		right: 0;
		min-width: 200px;
		background: #161b27;
		border: 1px solid rgba(255,255,255,.1);
		border-radius: 10px;
		box-shadow: 0 8px 32px rgba(0,0,0,.6);
		z-index: 2000;
		overflow: hidden;
		padding: 6px 0;
		/* padding-top tạo vùng hover buffer ở trên menu */
		padding-top: 14px;
		margin-top: 0;
	}
	/* Bridge vô hình lấp khoảng trống giữa trigger và menu */
	.user-dropdown-wrap::after {
		content: '';
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 14px;
		display: none;
	}
	.user-dropdown-wrap:hover::after,
	.user-dropdown-wrap.open::after {
		display: block;
	}
	.user-dropdown-wrap:hover .user-dropdown-menu,
	.user-dropdown-wrap.open .user-dropdown-menu {
		display: block;
	}
	.user-dropdown-menu a {
		display: flex !important;
		align-items: center;
		gap: 10px;
		padding: 10px 16px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		color: #c0c8d8 !important;
		border-radius: 0 !important;
		transition: background .15s, color .15s !important;
		background: transparent !important;
		white-space: nowrap;
	}
	.user-dropdown-menu a:hover {
		background: rgba(255,255,255,.06) !important;
		color: #fff !important;
	}
	.user-dropdown-menu a i {
		width: 16px;
		text-align: center;
		font-size: 13px;
	}
	.user-dropdown-menu .udrop-divider {
		height: 1px;
		background: rgba(255,255,255,.07);
		margin: 4px 0;
	}
	.user-dropdown-menu .udrop-logout {
		color: #fc8181 !important;
	}
	.user-dropdown-menu .udrop-logout:hover {
		background: rgba(252,129,129,.08) !important;
		color: #ff6b6b !important;
	}
	.user-dropdown-name {
		padding: 10px 16px 8px;
		font-size: 12px;
		color: #5a6275;
		border-bottom: 1px solid rgba(255,255,255,.07);
		margin-bottom: 4px;
		font-weight: 600;
		letter-spacing: .3px;
		text-transform: uppercase;
	}

	/* Mobile menu toggle */
	.menu-toggle {
		display: none;
		flex-direction: column;
		gap: 5px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 6px;
		margin-left: auto;
	}
	.menu-toggle span {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--text-primary);
		border-radius: 2px;
		transition: transform .3s, opacity .3s;
	}

	/* ══════════════════════════════
	   NAV BAR — menu categories
	   ══════════════════════════════ */
	.site-nav {
		position: fixed;
		top: var(--header-h);
		left: 0; right: 0;
		z-index: 999;
		height: var(--nav-h);
		background: var(--bg-secondary);
		border-bottom: 1px solid var(--border);
	}
	.site-nav .inner {
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 20px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2px;
	}
	.nav-list {
		display: flex;
		align-items: center;
		list-style: none;
		gap: 2px;
		height: 100%;
	}
	.nav-list > li {
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.nav-list > li > a {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 0 14px;
		height: 100%;
		font-size: 13.5px;
		font-weight: 600;
		color: var(--text-secondary);
		letter-spacing: .2px;
		transition: color .2s;
		white-space: nowrap;
		position: relative;
	}
	.nav-list > li > a::after {
		content: '';
		position: absolute;
		bottom: 0; left: 14px; right: 14px;
		height: 2px;
		background: var(--accent);
		transform: scaleX(0);
		transition: transform .2s;
		border-radius: 2px 2px 0 0;
	}
	.nav-list > li > a:hover,
	.nav-list > li > a.active {
		color: var(--text-primary);
	}
	.nav-list > li > a:hover::after,
	.nav-list > li > a.active::after {
		transform: scaleX(1);
	}
	.nav-list > li > a .nav-icon {
		font-size: 11px;
		color: var(--text-muted);
		transition: transform .2s;
	}
	.nav-list > li:hover > a .nav-icon { transform: rotate(180deg); color: var(--accent); }

	/* Dropdown */
	.nav-dropdown {
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		min-width: 200px;
		background: var(--bg-elevated);
		border: 1px solid var(--border);
		border-radius: 0 0 var(--radius) var(--radius);
		box-shadow: var(--shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .2s, transform .2s, visibility .2s;
		z-index: 100;
		list-style: none;
		padding: 6px 0;
	}
	.nav-dropdown.dropdown-wide {
		min-width: 520px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-content: start;
		gap: 0;
		padding: 10px;
		max-height: 70vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.nav-dropdown.dropdown-wide li { padding: 0; }
	.nav-list > li:hover .nav-dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.nav-dropdown li a {
		display: block;
		padding: 8px 16px;
		font-size: 15px;
		color: var(--text-secondary);
		transition: color .15s, background .15s;
		border-radius: var(--radius-sm);
	}
	.nav-dropdown.dropdown-wide li a { padding: 6px 10px; }
	.nav-dropdown li a:hover {
		color: var(--accent);
		background: rgba(0,200,83,.08);
	}

	/* Dropdown year — 2 cols */
	.nav-dropdown.dropdown-year {
		min-width: 220px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		padding: 10px;
	}
	.nav-dropdown.dropdown-year li a { padding: 7px 10px; text-align: center; }

	/* ══════════════════════════════
	   ADS BANNER AREA
	   ══════════════════════════════ */
	.ads-banner-wrap {
		margin-top: calc(var(--header-h) + var(--nav-h));
	}
	.ads-banner-wrap .xx-ads {
		width: 100%;
		text-align: center;
	}
	.ads-banner-wrap .xx-ads img.img-fluid {
		max-width: 100%;
		width: auto;
		max-height: 250px;
		margin: 0 auto;
		display: block;
		object-fit: contain;
	}
	.xx-ads { text-align: center; overflow: hidden; }
	.xx-ads.ads-mobile { display: none; }
	@media (max-width: 768px) { .xx-ads.ads-pc { display: none !important; height: 0 !important; overflow: hidden !important; min-height: 0 !important; position: absolute !important; visibility: hidden !important; } }
	/* Fix: xóa margin-bottom âm từ style.css cũ gây che content */
	.ads-header { margin-bottom: 0 !important; }
	@media (max-width:768px) {
		.xx-ads.ads-pc { display: none; }
		.xx-ads.ads-mobile { display: block; }
	}

	/* ══════════════════════════════
	   MAIN CONTENT WRAPPER
	   ══════════════════════════════ */
	main.site-main {
		max-width: 1400px;
		margin: 0 auto;
		padding: 20px 20px 40px;
		/* Đảm bảo content không bị header/ads che kể cả khi ads bị block */
		min-height: 100vh;
	}
	/* Khi ads bị block, ads-banner-wrap rỗng → thêm padding bù */
	.ads-banner-wrap:empty + main.site-main,
	.ads-banner-wrap:not(:has(.swiper-slide)) + main.site-main {
		padding-top: 20px;
	}

	/* ══════════════════════════════
	   SECTION HEADER
	   ══════════════════════════════ */
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
	}
	.section-title {
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: 17px;
		font-weight: 700;
		color: var(--text-primary);
	}
	.section-title .icon {
		color: var(--accent);
		font-size: 16px;
	}
	.section-title::before {
		content: '';
		display: block;
		width: 4px;
		height: 20px;
		background: var(--accent);
		border-radius: 2px;
	}
	.section-more {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 13px;
		font-weight: 600;
		color: var(--accent);
		transition: gap .2s;
	}
	.section-more:hover { color: var(--accent-hover); gap: 8px; }

	/* ══════════════════════════════
	   MOVIE GRID
	   ══════════════════════════════ */
	.movies-grid {
		display: grid;
		gap: 14px;
	}
	.movies-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
	.movies-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
	.movies-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
	.movies-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

	/* ── Movie Card ── */
	.movie-card {
		position: relative;
		border-radius: var(--radius);
		overflow: hidden;
		background: var(--bg-card);
		transition: transform .25s, box-shadow .25s;
		cursor: pointer;
		display: block;
	}
	.movie-card:hover {
		transform: translateY(-4px) scale(1.02);
		box-shadow: 0 12px 36px rgba(0,0,0,.6);
	}
	.movie-card .poster-wrap {
		position: relative;
		aspect-ratio: 2/3;
		overflow: hidden;
	}
	.movie-card .poster-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .4s;
	}
	.movie-card:hover .poster-wrap img { transform: scale(1.06); }

	/* Overlay on hover */
	.movie-card .poster-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 50%);
		opacity: .7;
		transition: opacity .3s;
	}
	.movie-card:hover .poster-overlay { opacity: 1; }

	/* Play button */
	.movie-card .play-btn {
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%) scale(0.7);
		width: 44px; height: 44px;
		background: rgba(0,200,83,.9);
		border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		opacity: 0;
		transition: opacity .25s, transform .25s;
	}
	.movie-card .play-btn i { color: #0a0b0f; font-size: 16px; margin-left: 2px; }
	.movie-card:hover .play-btn {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	/* Quality badge */
	.badge-quality {
		position: absolute;
		top: 7px; left: 7px;
		background: var(--accent);
		color: #0a0b0f;
		font-size: 10px;
		font-weight: 800;
		padding: 2px 7px;
		border-radius: 3px;
		letter-spacing: .5px;
	}

	/* Episode badge */
	.badge-ep {
		position: absolute;
		top: 7px; right: 7px;
		background: rgba(0,0,0,.75);
		backdrop-filter: blur(4px);
		color: var(--text-primary);
		font-size: 10px;
		font-weight: 600;
		padding: 2px 7px;
		border-radius: 3px;
		border: 1px solid rgba(255,255,255,.15);
	}

	/* Views badge */
	.badge-views {
		position: absolute;
		bottom: 7px; right: 7px;
		display: flex; align-items: center; gap: 4px;
		font-size: 11px;
		color: rgba(255,255,255,.8);
	}
	.badge-views i { font-size: 10px; }

	/* Card Info */
	.movie-card .card-info {
		padding: 10px 10px 12px;
	}
	.movie-card .card-title {
		font-size: clamp(13px, 0.85vw, 15px);
		font-weight: 600;
		color: var(--text-primary);
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 4px;
		transition: color .2s;
	}
	.movie-card:hover .card-title { color: var(--accent); }
	.movie-card .card-meta {
		font-size: 11.5px;
		color: var(--text-muted);
	}

	/* ══════════════════════════════
	   LAYOUT: MAIN + SIDEBAR
	   ══════════════════════════════ */
	.content-layout {
		display: grid;
		grid-template-columns: 1fr 280px;
		gap: 24px;
		align-items: start;
	}
	.content-sidebar { position: sticky; top: calc(var(--header-h) + var(--nav-h) + 20px); }

	/* ══════════════════════════════
	   SIDEBAR COMPONENTS
	   ══════════════════════════════ */
	.sidebar-box {
		background: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		overflow: hidden;
		margin-bottom: 20px;
	}
	.sidebar-box-title {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--border);
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: 14px;
		font-weight: 700;
		color: var(--text-primary);
	}
	.sidebar-box-title .icon { color: var(--accent); }

	/* Sidebar movie list */
	.sidebar-movie-list { padding: 8px 0; }
	.sidebar-movie-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 14px;
		transition: background .15s;
		text-decoration: none;
	}
	.sidebar-movie-item:hover { background: var(--bg-elevated); }
	.sidebar-movie-item .rank {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: 18px;
		font-weight: 800;
		color: var(--text-muted);
		width: 24px;
		flex-shrink: 0;
		line-height: 1;
	}
	.sidebar-movie-item:nth-child(1) .rank { color: var(--accent); }
	.sidebar-movie-item:nth-child(2) .rank { color: #c0c0c0; }
	.sidebar-movie-item:nth-child(3) .rank { color: #cd7f32; }
	.sidebar-movie-item .thumb {
		width: 44px;
		height: 62px;
		border-radius: 4px;
		object-fit: cover;
		flex-shrink: 0;
	}
	.sidebar-movie-item .info { flex: 1; min-width: 0; }
	.sidebar-movie-item .info .name {
		font-size: 12.5px;
		font-weight: 600;
		color: var(--text-primary);
		line-height: 1.3;
		margin-bottom: 3px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.sidebar-movie-item:hover .info .name { color: var(--accent); }
	.sidebar-movie-item .info .meta {
		font-size: 11px;
		color: var(--text-muted);
	}

	/* ══════════════════════════════
	   SECTION TABS (Phim mới / Hot)
	   ══════════════════════════════ */
	.section-tabs {
		display: flex;
		gap: 4px;
		padding: 10px 16px;
	}
	.section-tab-btn {
		padding: 5px 14px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 600;
		border: 1px solid var(--border);
		background: transparent;
		color: var(--text-muted);
		cursor: pointer;
		transition: all .2s;
	}
	.section-tab-btn.active {
		background: var(--accent);
		color: #0a0b0f;
		border-color: var(--accent);
	}

	/* ══════════════════════════════
	   CONTENT SECTIONS
	   ══════════════════════════════ */
	.content-section {
		margin-bottom: 32px;
	}

	/* ── Featured Top Banner ── */
	.featured-banner {
		position: relative;
		margin-bottom: 28px;
		border-radius: 12px;
		overflow: hidden;
		background: linear-gradient(135deg, #0f1218 0%, #1a2030 100%);
		border: 1px solid var(--border);
		min-height: 120px;
		display: flex;
		align-items: center;
		padding: 24px 32px;
	}
	.featured-banner-content { position: relative; z-index: 1; }
	.featured-banner h2 {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: 26px;
		font-weight: 800;
		margin-bottom: 4px;
		line-height: 1.2;
	}
	.featured-banner h2 em {
		font-style: normal;
		color: var(--accent);
	}
	.featured-banner p {
		color: var(--text-secondary);
		font-size: 13.5px;
	}
	.featured-banner-bg {
		position: absolute;
		right: 0; top: 0; bottom: 0;
		width: 60%;
		background: radial-gradient(ellipse at right, rgba(0,200,83,.12) 0%, transparent 70%);
	}

	/* ── Filter tabs for Phim Chiếu Rạp ── */
	.filter-tabs {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 14px;
		flex-wrap: wrap;
	}
	.filter-tab {
		padding: 5px 14px;
		border-radius: 4px;
		font-size: 12.5px;
		font-weight: 600;
		border: 1px solid var(--border);
		background: var(--bg-card);
		color: var(--text-secondary);
		cursor: pointer;
		transition: all .2s;
		text-decoration: none;
		display: inline-block;
	}
	.filter-tab:hover, .filter-tab.active {
		background: var(--accent);
		color: #0a0b0f;
		border-color: var(--accent);
	}

	/* ══════════════════════════════
	   FOOTER
	   ══════════════════════════════ */
	.site-footer {
		background: var(--bg-secondary);
		border-top: 1px solid var(--border);
		padding: 24px 20px;
		text-align: center;
		color: var(--text-muted);
		font-size: 13px;
	}
	.site-footer a {
		color: var(--text-muted);
		transition: color .2s;
	}
	.site-footer a:hover { color: var(--accent); }
	.site-footer .footer-inner {
		max-width: 1400px;
		margin: 0 auto;
	}
	.site-footer .footer-logo {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: 20px;
		font-weight: 800;
		color: var(--text-primary);
		margin-bottom: 10px;
	}
	.site-footer .footer-logo span { color: var(--accent); }
	.site-footer .footer-links {
		display: flex;
		justify-content: center;
		gap: 20px;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}
	.site-footer .ads-link {
		display: inline-block;
		padding: 6px 18px;
		background: rgba(0,200,83,.1);
		border: 1px solid rgba(0,200,83,.3);
		border-radius: 20px;
		color: var(--accent);
		font-weight: 600;
		font-size: 12.5px;
		margin-bottom: 14px;
		transition: background .2s;
	}
	.site-footer .ads-link:hover { background: rgba(0,200,83,.2); }

	/* ══════════════════════════════
	   RESPONSIVE
	   ══════════════════════════════ */
	@media (max-width:1100px) {
		.movies-grid.cols-6 { grid-template-columns: repeat(5, 1fr); }
		.content-layout { grid-template-columns: 1fr 240px; }
	}
	@media (max-width:900px) {
		.movies-grid.cols-6 { grid-template-columns: repeat(4, 1fr); }
		.movies-grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
		.content-layout { grid-template-columns: 1fr; }
		.content-sidebar { position: static; }
		.nav-dropdown.dropdown-wide { min-width: 340px; grid-template-columns: repeat(3,1fr); }
	}
	@media (max-width:768px) {
		:root { --header-h: 52px; --nav-h: 42px; }
		.movies-grid.cols-6,
		.movies-grid.cols-5,
		.movies-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
		.header-actions .btn-history,
		.header-actions .btn-fav { display: none; }
		.site-search { max-width: 200px; }
		main.site-main { padding: 14px 14px 30px; }
		.featured-banner { padding: 18px 20px; min-height: auto; }
		.featured-banner h2 { font-size: 20px; }
	}
	@media (max-width:540px) {
		.movies-grid.cols-6,
		.movies-grid.cols-5,
		.movies-grid.cols-4,
		.movies-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
		.menu-toggle { display: flex; }
		.site-nav .nav-list { display: none; flex-direction: column; height: auto; }
		.site-nav .nav-list.open { display: flex; }
		.site-nav .inner { flex-wrap: wrap; height: auto; padding: 8px 14px; }
		.site-nav {
			position: fixed;
			height: auto;
			overflow: visible;
		}
		.ads-banner-wrap { margin-top: 0; }
		.nav-list > li { height: auto; width: 100%; }
		.nav-list > li > a { padding: 10px 0; }
		.nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding-left: 12px; }
	}

	/* ══════════════════════════════════════════════
	   MOBILE — Motchill overlay menu style
	   ≤ 768px: ẩn nav bar, hiện hamburger
	   ══════════════════════════════════════════════ */
	@media (max-width: 768px) {
		:root { --header-h: 119px; --nav-h: 0px; }

		/* Header 2 hàng: hàng 1 = logo+actions+hamburger, hàng 2 = search */
		.site-header-top {
			position: static;
			height: auto;
			display: block;
		}
		.site-header-top .inner {
			flex-wrap: wrap;
			padding: 8px 14px;
			gap: 6px;
			align-content: center;
                        /* height auto theo padding */
		}
		.site-logo {
			order: 1;
			flex: 1;
		}
		.header-actions {
			order: 2;
			margin-left: 0;
		}
		.menu-toggle {
			order: 3 !important;
			margin-left: 0;
		}
		.site-search {
			order: 4;
			flex: 0 0 100%;
			max-width: 100% !important;
			width: 100%;
		}
		.site-search form {
			width: 100%;
		}
		.site-search input {
			padding: 8px 12px;
			font-size: 13px;
		}
		.header-actions .btn-fav,
		.header-actions .btn-history { display: none; }
		.header-actions a span { display: none; }
		.header-actions .btn-login {
			padding: 7px 12px;
			font-size: 12.5px;
			white-space: nowrap;
			flex-shrink: 0;
		}
		.header-actions .btn-login span { display: inline !important; }

		/* Ẩn hoàn toàn nav bar trên mobile */
		.site-nav { display: none !important; height: 0 !important; overflow: hidden !important; max-height: 0 !important; }

                .ads-banner-wrap { min-height: 0 !important; padding: 0 !important; width: 100% !important; }
		main.site-main { padding: 16px 12px 28px; margin-top: 0 !important; }
	}

	@media (max-width: 768px) {
		.site-header-top { z-index: 1001 !important; }
		.ads-banner-wrap { position: relative; z-index: 1 !important; }
	}

	@media (max-width: 420px) {
		.site-header-top .inner { padding: 0 10px; }
		.site-logo span { font-size: 18px !important; }
                /* max-width 120px removed - conflict voi mobile layout */
		.site-search input { padding: 7px 6px 7px 10px; font-size: 12px; }
		.header-actions .btn-login { padding: 6px 10px; font-size: 12px; }
	}

	/* ══════════════════════════════════════════════
	   MOTCHILL OVERLAY MENU
	   ══════════════════════════════════════════════ */
	.mc-menu-overlay {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: #0a0b0f;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.mc-menu-overlay.open { display: flex; }

	/* Top bar trong overlay */
	.mc-menu-top {
		display: flex;
		align-items: center;
		padding: 0 16px;
		height: 52px;
		flex-shrink: 0;
		border-bottom: 1px solid rgba(255,255,255,.07);
		gap: 12px;
	}
	.mc-menu-logo {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		font-size: 20px;
		font-weight: 800;
		color: #fff;
		flex: 1;
	}
	.mc-menu-logo span { color: #00c853; }

	/* Search bar trong overlay */
	.mc-menu-search {
		flex: 1;
		max-width: 260px;
	}
	.mc-menu-search form {
		display: flex;
		align-items: center;
		background: rgba(255,255,255,.07);
		border: 1px solid rgba(255,255,255,.1);
		border-radius: 20px;
		overflow: hidden;
	}
	.mc-menu-search input {
		flex: 1;
		background: transparent;
		border: none;
		outline: none;
		color: #f0f2f5;
		padding: 8px 14px;
		font-size: 13px;
		font-family: inherit;
	}
	.mc-menu-search input::placeholder { color: #5a6275; }
	.mc-menu-search button {
		background: transparent;
		border: none;
		padding: 8px 12px;
		color: #9ca3af;
		cursor: pointer;
	}

	/* Close button */
	.mc-menu-close {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9ca3af;
		font-size: 22px;
		cursor: pointer;
		flex-shrink: 0;
		border-radius: 50%;
		transition: background .15s, color .15s;
	}
	.mc-menu-close:hover { background: rgba(255,255,255,.08); color: #fff; }

	/* Login row */
	.mc-menu-login {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 20px;
		border-bottom: 1px solid rgba(255,255,255,.07);
		text-decoration: none;
		color: #f0f2f5;
		font-size: 15px;
		font-weight: 500;
		flex-shrink: 0;
		transition: color .15s;
	}
	.mc-menu-login i {
		font-size: 20px;
		color: #9ca3af;
	}
	.mc-menu-login:hover { color: #00c853; }
	.mc-menu-login:hover i { color: #00c853; }

	/* Menu items */
	.mc-menu-list {
		list-style: none;
		padding: 0;
		margin: 0;
		flex: 1;
	}
	.mc-menu-item {
		border-bottom: 1px solid rgba(255,255,255,.06);
	}
	.mc-menu-item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 17px 20px;
		font-size: 15px;
		font-weight: 500;
		color: #e0e3ea;
		text-decoration: none;
		transition: color .15s;
	}
	.mc-menu-item > a:hover { color: #00c853; }
	.mc-menu-item > a .mc-chevron {
		font-size: 13px;
		color: #5a6275;
		transition: transform .25s;
	}
	.mc-menu-item.open > a .mc-chevron { transform: rotate(180deg); color: #00c853; }
	.mc-menu-item > a.active-item { color: #00c853; }

	/* Sub-menu (dropdown) */
	.mc-submenu {
		display: none;
		list-style: none;
		padding: 6px 0 10px 20px;
		margin: 0;
		background: rgba(255,255,255,.02);
		border-top: 1px solid rgba(255,255,255,.05);
	}
	.mc-menu-item.open > .mc-submenu { display: block; }
	.mc-submenu li a {
		display: block;
		padding: 10px 16px;
		font-size: 13.5px;
		color: #9ca3af;
		text-decoration: none;
		border-radius: 6px;
		transition: color .15s, background .15s;
	}
	.mc-submenu li a:hover { color: #00c853; background: rgba(0,200,83,.07); }

	/* Grid submenu (Thể loại) */
	.mc-submenu-grid {
		display: none;
		padding: 10px 16px 14px;
		background: rgba(255,255,255,.02);
		border-top: 1px solid rgba(255,255,255,.05);
	}
	.mc-menu-item.open > .mc-submenu-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
	.mc-submenu-grid a {
		display: block;
		padding: 9px 8px;
		font-size: 13px;
		color: #9ca3af;
		text-decoration: none;
		border-radius: 6px;
		transition: color .15s, background .15s;
	}
	.mc-submenu-grid a:hover { color: #00c853; background: rgba(0,200,83,.07); }

	/* ── Tên tiếng Anh dưới card phim ── */

	/* ── Swiper banner override ── */
	.swiper-button-next::after,
	.swiper-button-prev::after { font-size: 18px !important; }
	.swiper-button-next,
	.swiper-button-prev {
		width: 36px !important;
		height: 36px !important;
		background: rgba(0,0,0,.6);
		border-radius: 50%;
	}
	




/* ═══ Khối CSS kế tiếp ═══ */

/* ══ GLOBAL CARD HOVER ══ */
/* CRITICAL: .image phải có position:relative để anchor play icon */
.item-movie .image,
.item-movie .image.tab-movies1 {
  position: relative !important;
  overflow: hidden !important;
}
.item-movie {
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.item-movie:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.6) !important;
}
.item-movie .image img,
.item-movie .image .movie-play img,
.item-movie .image .movie-thumbnail,
.item-movie .image .video-image {
  transition: transform .35s ease !important;
}
.item-movie:hover .image img,
.item-movie:hover .image .movie-play img,
.item-movie:hover .image .movie-thumbnail,
.item-movie:hover .image .video-image {
  transform: scale(1.06) !important;
}
.item-movie h2.title-movie,
.item-movie .title-movie,
.item-movie .name-movie {
  transition: background .2s ease !important;
}
.item-movie:hover h2.title-movie,
.item-movie:hover .title-movie,
.item-movie:hover .name-movie {
  background: rgba(0,200,83,.55) !important;
}
.bp-play-icon {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) scale(.6) !important;
  width: 46px !important; height: 46px !important;
  background: rgba(0,200,83,.92) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  opacity: 0 !important;
  transition: opacity .22s ease, transform .22s ease !important;
  z-index: 10 !important;
  pointer-events: none !important;
  color: #000 !important;
  font-size: 16px !important;
  padding-left: 2px !important;
}
.item-movie:hover .bp-play-icon {
  opacity: 1 !important;
  transform: translate(-50%,-50%) scale(1) !important;
}

/* ── Ripple: ẩn dark overlay để .cripple hiện được ── */
.item-movie .image .movie-play::after,
.item-movie .image .movie-play::before {
  display: none !important;
  opacity: 0 !important;
}
@keyframes ripple {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(1.25); opacity: 1; }
  90%  { transform: scale(1.5);  opacity: .4; }
  100% { transform: scale(1.75); opacity: 0; }
}


/* ═══ Khối CSS kế tiếp ═══ */

#hide_catfish{font-size:13px;display:inline-block;padding:3px 8px;color:#fff;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer}
.float-ck-center-lt{position:fixed;bottom:0;width:100%;text-align:center;z-index:99999}
.ads-catfish-mobile{display:none}
@media(max-width:1000px){.ads-catfish-pc{display:none}.ads-catfish-mobile{display:block}}

/* Banner ads center */
.xx-ads .swiper-wrapper { width:100% !important; }
.xx-ads .swiper-slide { width:100% !important; background:transparent; }
.xx-ads .swiper-slide a { display:flex; justify-content:center; }
.xx-ads .swiper-slide img { display:block; width:100%; height:auto; max-height:250px; object-fit:cover; object-position:center; }


/* ═══ Khối CSS kế tiếp ═══ */

.bic-search-wrap { position: relative; }
.bic-search-dropdown {
    display: none; position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    background: #12151e;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    z-index: 999999999; max-height: 70vh; overflow-y: auto; padding: 6px 0;
    min-width: 340px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
@media(max-width:768px) {
    .site-search { overflow: visible !important; }
    #bicSearchWrap { overflow: visible !important; }
    .bic-search-dropdown { position: fixed; top: var(--header-h, 119px); left: 0; right: 0; width: 100%; max-width: 100%; border-radius: 0; margin: 0; min-width: unset; }
}
.bic-search-dropdown.open { display: block; }
.bic-sd-header { font-size: 11px; color: #8899aa; padding: 6px 14px 4px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 4px; }
.bic-sd-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; text-decoration: none; transition: background .15s; border-radius: 8px; margin: 0 4px; }
.bic-sd-item:hover, .bic-sd-item:focus { background: rgba(255,255,255,.07); outline: none; }
.bic-sd-thumb { width: 42px; height: 58px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #1a2332; }
.bic-sd-info { flex: 1; min-width: 0; }
.bic-sd-title { font-size: 13px; font-weight: 600; color: #e8f0fe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bic-sd-sub { font-size: 11px; color: #8899aa; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bic-sd-badges { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.bic-sd-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; line-height: 1.5; }
.bic-sd-badge.quality { background: #1565c0; color: #90caf9; }
.bic-sd-badge.status  { background: #1b5e20; color: #a5d6a7; }
.bic-sd-badge.rating  { background: #4a3000; color: #ffd54f; }
.bic-sd-empty { text-align: center; padding: 20px; color: #8899aa; font-size: 13px; }
.bic-sd-loading { text-align: center; padding: 16px; color: #8899aa; font-size: 12px; }
@media(max-width:768px) { .bic-search-dropdown { left: 0; right: 0; min-width: unset; width: 100%; border-radius: 0 0 12px 12px; } }
.mc-menu-search { position: static; }
.mc-menu-search .bic-search-dropdown { position: fixed; top: 140px; left: 0; right: 0; width: 100%; z-index: 99999999; max-height: 60vh; border-radius: 0 0 12px 12px; }