/* ============================================================
   A47 SCAFFOLD - layout nền thay Flatsome (grid/header/tabs/footer)
   Các biến màu giống site cũ, class component giữ nguyên tên.
   ============================================================ */
:root {
	--primary-color: #e53630;
	--primary-color-rgb: 229, 54, 48;
	--fs-color-primary: #e53630;
	--fs-color-secondary: #C05530;
	--fs-color-success: #627D47;
	--success-color: #627D47;
	--fs-color-alert: #ffffff;
	--border-radius: 6px;
	--a47-primary: #e53630;
}

*, *::before, *::after { box-sizing: border-box; }
html { background-color: #000; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: "Bai Jamjuree", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #e9edf1;
	background-color: #000;
}
#main { background-color: #1a1a1a; padding-bottom: 30px; }
img { max-width: 100%; height: auto; }
a { color: var(--primary-color); text-decoration: none; transition: color .2s; }
a:hover { color: #ff6a3d; }
h1, h2, h3, h4, h5, h6 { font-family: "Bai Jamjuree", sans-serif; font-weight: 700; color: #e53630; line-height: 1.3; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }

/* ---------- Container / Grid ---------- */
.container { max-width: 1410px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.col { padding: 0 12px 24px; width: 100%; }
@media (min-width: 850px) {
	.large-9 { width: 75%; }
	.large-3 { width: 25%; }
	.large-6 { width: 50%; }
}
@media (max-width: 849px) {
	.small-6 { width: 50%; }
	.small-12 { width: 100%; }
}
.section { padding: 20px 0; }

/* ---------- Header ---------- */
.a47-header { position: sticky; top: 0; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.a47-header .header-main { background-color: #000; }
.a47-header .header-inner { display: flex; align-items: center; gap: 16px; height: 100px; }
.a47-header #logo { flex: 0 0 auto; max-width: 200px; }
.a47-header #logo img { max-height: 80px; width: auto; display: block; }
.a47-header .header-search { flex: 1 1 auto; max-width: 60%; margin-left: auto; position: relative; }
.a47-header .searchform { display: flex; position: relative; }
.a47-header .search-field {
	flex: 1; background: #141618; border: 1px solid #2a2d34; color: #e9edf1;
	border-radius: 6px 0 0 6px; padding: 10px 14px; font-size: 15px; outline: none; min-width: 0;
}
.a47-header .search-field:focus { border-color: var(--primary-color); }
.a47-header .search-submit {
	background: var(--primary-color); color: #fff; border: none; padding: 0 16px;
	border-radius: 0 6px 6px 0; cursor: pointer; display: flex; align-items: center;
}
.a47-header .search-submit:hover { filter: brightness(1.15); }

/* Live search dropdown */
.live-search-results {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
	background: #141618; border: 1px solid #2a2d34; border-radius: 0 0 8px 8px;
	max-height: 70vh; overflow-y: auto; display: none;
}
.live-search-results.open { display: block; }
.ls-item { display: flex; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #202329; align-items: center; }
.ls-item:hover { background: #1d2026; }
.ls-item img { width: 42px; height: 60px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.ls-item .ls-title { color: #fff; font-weight: 600; font-size: 14px; display: block; }
.ls-item .ls-sub { color: #9aa1a9; font-size: 12px; }

/* Nav bottom */
.header-bottom { background-color: #232323; min-height: 55px; }
.header-bottom .nav { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.header-bottom .nav > li { position: relative; }
.header-bottom .nav > li > a {
	display: block; padding: 16px 18px; color: #fff; font-weight: 700; font-size: 14px;
	text-transform: uppercase; letter-spacing: .3px; line-height: 16px;
}
.header-bottom .nav > li > a:hover,
.header-bottom .nav > li.current-menu-item > a { color: var(--primary-color); }
/* Dropdown */
.header-bottom .nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 240px; z-index: 1001;
	background: rgba(0,0,0,.92); border: 2px solid var(--primary-color); border-radius: 5px;
	list-style: none; margin: 0; padding: 8px 0;
	display: none; grid-template-columns: 1fr 1fr;
}
.header-bottom .nav > li:hover > .sub-menu { display: grid; }
.header-bottom .nav .sub-menu li a {
	display: block; padding: 8px 16px; color: #eee; font-size: 13px; text-transform: uppercase; font-weight: 600;
}
.header-bottom .nav .sub-menu li a:hover { color: var(--a47-primary); }
.header-bottom .menu-item-has-children > a::after { content: " ▾"; font-size: 10px; }

/* Burger + mobile menu */
.a47-burger { display: none; background: var(--primary-color); border: none; border-radius: 50%; width: 42px; height: 42px; cursor: pointer; padding: 10px; flex-direction: column; justify-content: space-between; }
.a47-burger span { display: block; height: 3px; background: #fff; border-radius: 2px; }
.a47-mobile-menu { position: fixed; inset: 0; z-index: 99999; display: none; }
.a47-mobile-menu.open { display: block; }
.a47-mobile-menu__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.a47-mobile-menu__panel {
	position: absolute; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85%;
	background: #000; z-index: 2; overflow-y: auto; padding: 50px 0 20px;
}
.a47-mobile-menu__close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; z-index: 3; }
.a47-mobile-nav { list-style: none; margin: 0; padding: 0; }
.a47-mobile-nav li a { display: block; padding: 12px 20px; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 14px; border-bottom: 1px solid #1c1c1c; }
.a47-mobile-nav .sub-menu { list-style: none; padding: 0; margin: 0; background: #101010; }
.a47-mobile-nav .sub-menu li a { padding-left: 36px; font-weight: 500; font-size: 13px; }

@media (max-width: 849px) {
	.a47-header .header-inner { height: 70px; gap: 10px; }
	.a47-header #logo { max-width: 140px; margin: 0 auto; }
	.a47-header #logo img { max-height: 55px; }
	.a47-burger { display: flex; flex: 0 0 auto; }
	.a47-header .header-search { max-width: none; flex: 1; }
	.header-bottom { display: none; }
}

/* ---------- Tabs (thay Flatsome tabgroup) ---------- */
.a47-tab-nav { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.a47-tab-nav li.tab { flex: 1 1 0; text-align: center; }
.a47-tab-nav li.tab a {
	display: block; width: 100%; padding: 8px 14px; border-radius: 5px; color: #ddd;
	background: #232323; font-weight: 700; text-transform: uppercase; font-size: 13px; text-align: center;
}
.a47-tab-nav li.tab.active a, .a47-tab-nav li.tab a:hover { background: var(--primary-color); color: #fff; }
.a47-tabs .tab-panels .panel { display: none; }
.a47-tabs .tab-panels .panel.active { display: block; }

/* ---------- Movies grid (giữ tên class cũ) ---------- */
.grid, .movies-grid { display: grid; grid-gap: 14px; }
/* hệ cột: xem overrides.css (desktop-first, khớp site cũ) */

/* ---------- Random button sidebar ---------- */
.btn-random-movie {
	display: block; width: 100%; text-align: center; padding: 12px 0;
	background: linear-gradient(90deg, #e53630, #ff6a3d); color: #fff !important;
	font-weight: 700; border-radius: 6px; text-transform: uppercase; font-size: 14px;
	box-shadow: 0 1px 8px rgba(229,54,48,.4);
}
.btn-random-movie:hover { filter: brightness(1.1); }

/* ---------- Footer ---------- */
.a47-footer { background: #000; color: #e9edf1; font-size: 15px; }
.footer-widgets { padding: 40px 0 10px; }
.a47-footer .footer-logo { max-width: 180px; display: block; margin-bottom: 12px; }
.a47-footer .section-title { color: #e53630; font-size: 17px; margin-bottom: 14px; }
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li a { display: block; padding: 4px 0; color: #cfd3d8; }
.footer-menu li a:hover { color: var(--primary-color); }
.a47-footer a { color: #cfd3d8; }
.a47-footer a:hover { color: var(--primary-color); }
.footer-bottom-row { align-items: center; border-top: 1px solid #171717; padding-top: 16px; }
.social-icons { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.soc {
	width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: #1b1d21; color: #fff !important; font-weight: 700; font-size: 15px;
}
.soc:hover { background: var(--primary-color); }
.absolute-footer { background: #000; padding: 14px 0; border-top: 1px solid #131313; }

/* ---------- Breadcrumb ---------- */
.rank-math-breadcrumb { font-size: 13px; color: #9aa1a9; }
.rank-math-breadcrumb a { color: #cfd3d8; }
.rank-math-breadcrumb a:hover { color: var(--primary-color); }
.rank-math-breadcrumb .separator { margin: 0 6px; }

/* ---------- Page/archive titles ---------- */
.archive-title, .page-title, .watch-title { font-size: 24px; margin: 10px 0 16px; }
.home-h1 { font-size: 15px; color: #6b6f76; font-weight: 500; margin: 6px 0 14px; }
.a47-page .page-content { color: #d7dbe0; }

/* ---------- Comments (wpdiscuz nền tối) ---------- */
#myRating { margin-top: 24px; }

/* ---------- Load-more spacing ---------- */
.movies-section { margin-bottom: 8px; }