/*
Theme Name: Sport Themes
Theme URI: https://bongdanet66.com/
Version: 1.7
Description: Theme bóng đá chuẩn – dùng CSS/JS từ assets (bongdanet66), layout 3 cột .contain > .contain-row.
Author: Bongdako dev
Author URI:
Tags: custom-menu, featured-images, post-formats
*/

/* ========== Biến CSS (đồng bộ với assets) ========== */
:root {
	--0: #FFF;
	--200: #F9F9FB;
	--600: #E3E3E8;
	--1400: #7B7C80;
	--1500: #67676B;
	--1900: #0C0C0D;
	--Bongdanet-Primary: #08737E;
	--Bongdanet-Button-Orange: #F95B00;
	--Bongdanet-Secondary-Green-Green-7: #DEEAEB;
	--Accent-Green-2: #EDF8FD;
	--Monotone-0: #FFF;
	--Monotone-1900: #0C0C0D;
}

/* ========== Font & body ========== */
body {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #070F03;
	font-size: 14px;
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 700;
	color: #212121;
}

.root.body-bongdanet { min-height: 100vh; display: flex; flex-direction: column; }
#content { flex: 1; }

/* ========== Container ========== */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

/* ========== Header (đúng DOM bongdanet66) ========== */
.header-bongdanet { position: relative; }

/* Tầng 1: header-top – nền trắng */
.sport_theme_header-top {
	background-color: #ffffff;
	background-image: none;
}
.sport_theme_header-main {
	background-color: #ffffff;
	background-image: none;
}
/* Tầng 2: header-bottom – thanh menu màu teal */
.sport_theme_header-bottom {
	background-color: #00737e;
	background-image: none;
}

.header_flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sport_theme_header-main .header_flex { min-height: 80px; }
.sport_theme_header-bottom .header_flex { min-height: 48px; }
.sport_theme_header-bottom .header_flex > div { flex: 1; min-width: 0; }
.sport_theme_header-bottom .header_flex > div:empty { flex: 0; }

.sport_theme_header-main-left { flex-shrink: 0; }
.sport_theme_header-main-center { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.sport_theme_header-main-right { flex-shrink: 0; }
.sport_theme_header-bottom-center { flex: 1 1 auto; display: flex; justify-content: center; }

/* Logo */
.header-logo {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}
.sport_theme_logo,
.sport_theme_logo_dark {
	display: block;
	max-height: 80px;
	width: auto;
	height: auto;
}
.sport_theme_logo_dark { display: none; }
.sport_theme_logo_text {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 700;
	color: #212121;
}

/* Dark/Light mode toggle (icon đơn giản) */
.header-mode {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}
.header-mode-sun,
.header-mode-moon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-block;
}
.header-mode-sun { background: #f59e0b; }
.header-mode-moon { background: #1e293b; opacity: 0.7; }
.header-mode-sun.active ~ .header-mode-moon { opacity: 0.5; }

/* Menu chính – trong vùng header-bottom (nền #00737e) */
#menu-main-menu.sport-theme-main-menu,
.navbar-nav.sport-theme-main-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
}
.sport-theme-main-menu .menu-item { margin: 0; }
.sport-theme-main-menu .menu-item a {
	display: block;
	padding: 10px 14px;
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
}
.sport-theme-main-menu .menu-item a:hover,
.sport-theme-main-menu .current-menu-item a {
	background: rgba(255,255,255,0.15);
	color: #fff;
}
.sport-theme-main-menu .menu-title-wrapper { display: inline; }
.d-none.d-lg-flex { display: flex !important; }

/* Mobile: ẩn menu PC, hiện nút hamburger + dropdown (giống bongdanet66) */
@media (max-width: 991px) {
	.d-none.d-lg-flex { flex-wrap: wrap; justify-content: center; }
	.sport_theme_header-main .header_flex { min-height: 60px; }
	.sport_theme_header-main-center { display: none; }
	.header-bongdawap .sport_theme_header-bottom { display: none; }
	.header-bongdawap .menu_mobile { display: flex !important; align-items: center; justify-content: center; border: none; background: transparent; padding: 0; }
	.header-bongdawap .sport_theme_header-main .container { position: relative; }
	.header-bongdawap .header-logo-banner { justify-content: space-between; flex-wrap: nowrap; }
	.header-bongdawap .header-mode { flex-shrink: 0; }
}
@media (min-width: 992px) {
	.header-bongdawap .menu_mobile { display: none !important; }
	.header-bongdawap .menu_mobile_wrap { display: none !important; }
}

/* ========== Main / content ========== */
.site-main { padding: 0; }
/* Override assets: .contain phải xếp dọc (banner trên, row 3 cột dưới), không dùng flex row */
.contain {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap;
}
/* Chỉ banner + announcement; không chứa Vue app để tránh layout phình cao */
.container.has_banner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 15px 24px;
	box-sizing: border-box;
}
.sport_theme_banner_before_content { margin-bottom: 12px; }
#app-vue { min-height: 50vh; width: 100%; box-sizing: border-box; }
.main-content { overflow-x: hidden; }
#tips-container:empty { display: none; }
.announcement-bar { display: none; }
.announcement-bar:not(:empty) { display: block; }

/* ========== Layout 3 cột chuẩn assets: .contain > .contain-row > left | main-content | right ========== */
.row.contain-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin: 0 -8px;
}
.contain .left-sidebar-content {
	width: 188px;
	flex-shrink: 0;
}
.contain .right-sidebar-content {
	width: 290px;
	flex-shrink: 0;
}
.contain .main-content {
	flex: 1 1 auto;
	min-width: 0;
}
/* Fallback khi không dùng .left/right-sidebar-content */
.sidebar-left {
	width: 100%;
}
.sidebar-right {
	width: 100%;
}
@media (max-width: 991px) {
	.contain .left-sidebar-content,
	.contain .right-sidebar-content {
		width: 100%;
	}
}

/* ========== Fix layout 3 cột – tránh sidebar chồng lên main (override assets) ========== */
@media (min-width: 992px) {
	.contain .row.contain-row {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 8px;
	}
	.contain .left-sidebar-content {
		position: relative !important;
		width: 188px !important;
		flex: 0 0 188px !important;
		order: 1;
	}
	.contain .main-content {
		position: relative !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		order: 2;
	}
	.contain .right-sidebar-content {
		position: relative !important;
		width: 290px !important;
		flex: 0 0 290px !important;
		order: 3;
	}
}
/* Vue app trong main không được tràn hoặc absolute ra ngoài */
.contain .main-content #app-vue {
	width: 100%;
	max-width: 100%;
	position: relative;
}

/* ========== Sidebar widgets – header teal #08737E, đầy đủ cột & dữ liệu ========== */
.sidebar-left .widget,
.sidebar-right .widget,
.widget-area .widget {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: visible;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sidebar-left .widget .widget-title,
.sidebar-right .widget .widget-title,
.widget-area .widget .widget-title {
	border-radius: 8px 8px 0 0;
}
.widget-title {
	background: var(--Bongdanet-Primary, #08737E);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 10px;
	letter-spacing: 0.02em;
	border-radius: 4px 4px 0 0;
}
.widget-league-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget-league-list li {
	border-bottom: 1px solid #e5e7eb;
	margin: 0;
}
.widget-league-list li:last-child { border-bottom: none; }
.widget-league-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: #212121;
	text-decoration: none;
	font-size: 13px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}
.widget-league-list a span {
	min-width: 0;
	flex: 1;
}
.widget-league-list a:hover {
	background: #f8fafc;
	color: #00737e;
}
.league-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background: #e5e7eb;
	border-radius: 4px;
	display: inline-block;
}

/* Sidebar: tránh cắt chữ, cho phép xuống dòng và không cắt phần LTĐ */
.contain .left-sidebar-content .widget,
.contain .right-sidebar-content .widget,
.contain .sidebar_box,
.contain .widget_list {
	overflow: visible !important;
}
.contain .sidebar_box .flex-item,
.contain .widget_list .flex-item {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.contain .sidebar_box .flex-item span,
.contain .widget_list .flex-item span {
	min-width: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.contain .widget-schedule,
.contain .widget-standings {
	max-height: none;
	overflow: visible;
}

/* Widget LTĐ – lịch thi đấu (cột: Đội nhà | Giờ | Đội khách) */
.widget-schedule { padding: 0; }
.schedule-date {
	background: #f8f9fa;
	color: #00737e;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	padding: 8px 10px;
	border-bottom: 1px solid #e5e7eb;
}
.schedule-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 12px;
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row .team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-row .team.home { text-align: left; color: #212121; }
.schedule-row .team.away { text-align: right; color: #212121; }
.schedule-row .time { font-weight: 700; color: #374151; min-width: 40px; text-align: center; }

/* Widget Bảng xếp hạng (cột: Stt | Đội Bóng | Điểm) */
.widget-standings { padding: 0; overflow-x: auto; }
.standings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.standings-table th {
	background: #f8f9fa;
	color: #374151;
	font-weight: 700;
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #e5e7eb;
}
.standings-table td {
	padding: 8px 10px;
	border-bottom: 1px solid #e5e7eb;
	color: #212121;
}
.standings-table tbody tr:hover { background: #f8fafc; }
.standings-table .col-stt { width: 40px; text-align: center; }
.standings-table .col-team { font-weight: 500; }
.standings-table .col-points { width: 56px; text-align: right; font-weight: 700; }

/* ========== Footer (đúng bongdanet66 – nền #0F454A) ========== */
.footer-bongdanet { margin-top: auto; }
.footer-main {
	background: #0F454A;
	color: #ffffff;
	padding: 24px 0 24px;
	font-size: 14px;
}
.footer-main .container {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
.footer-main-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px 16px;
}
.footer-info {
	flex: 0 0 30%;
	min-width: 200px;
	text-align: left;
}
.footer-shortcode-des {
	margin: 12px 0 0;
	line-height: 150%;
	font-size: 12px;
	color: #F9F9FB;
}
.footer-main .col {
	flex: 0 0 20%;
	min-width: 140px;
}
.footer-main .footer_title {
	display: block;
	font-weight: 700;
	font-size: 12px;
	line-height: normal;
	text-transform: uppercase;
	color: #FFF;
	margin-bottom: 20px;
}
.footer-main ul.menu_footer,
.footer-main ul.icons-social {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-main ul.menu_footer li { margin-bottom: 4px; }
.footer-main ul.menu_footer li a,
.footer-main ul.icons-social li a {
	color: #ffffff;
	text-decoration: none;
	font-size: 12px;
	line-height: 150%;
}
.footer-main ul.menu_footer li a:hover,
.footer-main ul.icons-social li a:hover { text-decoration: underline; }
.footer-main ul.icons-social {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.footer-main .footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	margin-top: 24px;
	padding-top: 16px;
}
.footer-main .footer-bottom .col { flex: 0 0 100%; text-align: center; }
.footer-main .copyright {
	margin: 0 0 8px;
	font-size: 12px;
	color: #F9F9FB;
}
.footer-main .footer-legal {
	margin: 0;
	font-size: 12px;
}
.footer-main .footer-legal a { color: #F9F9FB; text-decoration: none; }
.footer-main .footer-legal a:hover { text-decoration: underline; }
.footer-main .footer-legal .sep { margin: 0 8px; opacity: 0.8; }