:root {
    --primary: #00639e;
    --accent: #15ad9b;
    --bg: #11283d;
    --card: #0a1e30;
    --text:#fff
}

html,
body {
	height: 100%
}

body {
	font-family: system-ui, -apple-system, sans-serif;
	background: var(--bg);
	color: var(--text);
	display: flex;
	flex-direction: column
}

main {
	flex: 1
}

.fw-300 {
	font-weight: 300
}

.fw-700 {
	font-weight: 700
}

.h1,
h1 {
	font-size: 1.5rem !important
}

.h2,
h2 {
	font-size: 1.4rem !important
}

.h3,
h3 {
	font-size: 1.3rem !important
}

.h4,
h4 {
	font-size: 1.2rem !important
}

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

a{
	color:#fff;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px
}

header {
	background: var(--primary);
	color: #fff
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 64px;
	width: 100%
}

.logo {
	font-size: 20px;
	font-weight: 600
}

.logo img {
	height: 40px;
	width: auto;
}

.nav {
	display: flex;
	gap: 20px
}

.nav a {
	color: #fff;
	text-decoration: none
}

.header-search {display: block;width:100%;background: #003859;color: #000;z-index: 9999;}
.header-search-form{position: relative;}
.header-search-input{width:100%;height: 100%;color:#fff;outline: 0;padding: .8rem 0;font-size: 1.1rem;font-weight: 400;line-height: 1.5;background-color: transparent;border:0;margin:0;}
.header-search-button{position:absolute;top:0;right:0;height: 100%;padding: 0 1rem;cursor: pointer;font-size: .875rem;font-weight: 400;line-height: 1.5;background-color: var(--bg);border:0;margin: 0;}

.menu-btn {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 26px;
	cursor: pointer
}

.offcanvas {
	position: fixed;
	top: 0;
	right: -260px;
	width: 260px;
	height: 100%;
	background: #003859;
	color: #fff;
	padding: 20px;
	transition: 0.3s;
	z-index: 1000
}

.offcanvas.open {
	right: 0
}

.offcanvas-header {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.offcanvas .nav {
	display: block
}

.offcanvas .nav a {
	display: block;
	margin: 14px 0
}

.close-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 24px;
	cursor: pointer
}

.offcanvas a {
	display: block;
	margin: 16px 0;
	color: #fff;
	text-decoration: none
}

.cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 24px 0
}

.card {
	background: var(--card);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgb(0 0 0 / .05)
}

.card a {
	text-decoration: none
}

.card h3 {
	color: #fff;
	font-size: 17px !important;
	line-height: 1.2;
	font-weight: 600;
	width: 100%;
	padding: 10px 15px;
	margin: 0;
	display: block;
	text-decoration: none
}

.card h3:hover {
	text-decoration: underline
}

.card-img {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1.91 / 1;
	background-color: #f5f5f5;
	overflow: hidden
}

.card-img img {
	object-fit: contain;
	object-position: center;
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	z-index: 1;
	background-color: #cbcbcb
}

.content-box {
	background: #0a1e30;
	padding: 20px;
	border-radius: 8px;
	margin: 30px 0
}

.content-box h2 {
	margin-top: 0;
}

.content-box h1 {
	margin-top: 0;
	text-align: center;
	width: 100%;
	display: block;
}

.content-box p {
	line-height: 1.4;
}

.content-box .btn{
	color:#fff;
	background: var(--primary);
	border:0;
	margin:15px auto;
	padding: 10px 15px;
	font-weight: 500;
	cursor: pointer;
	display: table;
}


.content-box img {
	margin: 0 auto;
	display:table;
}

.pagination {
	display: flex;
	list-style: none;
	padding: 0;
	justify-content: center;
	gap: 6px;
	margin: 30px 0
}

.page-link {
	display: block;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid #ddd;
	color: #333;
	text-decoration: none;
	border-radius: 4px
}

.page-item.active .page-link {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff
}

.footer {
	background: var(--primary);
	color: #fff;
	padding: 20px 0
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.footer-links {
	display: flex;
	gap: 16px
}

.footer a {
	color: #fff;
	text-decoration: none;
	font-size: 14px
}

@media (max-width:900px) {
	.cards {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (max-width:640px) {
	.cards {
		grid-template-columns: 1fr
	}

	.nav {
		display: none
	}

	.menu-btn {
		display: block
	}

	.footer-inner {
		flex-direction: column;
		gap: 12px;
		text-align: center
	}

	.footer-links {
		flex-direction: column;
		gap: 8px
	}
}

.match-box {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #d9dde0;
	margin: 20px auto;
	max-width: 1100px
}

.match-header {
	background: #2f4a5a;
	color: #fff;
	text-align: center;
	padding: 16px 0;
	margin: 0;
	font-size: 20px;
	font-weight: 600
}

.match-body {
	padding: 25px 20px 35px;
	text-align: center
}

.league {
	color: #666;
	font-weight: 600;
	margin-bottom: 10px
}

.score-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	align-items: center;
	gap: 0;
	margin: 15px 0
}

.team {
	font-weight: 600
}

.score-number {
	font-size: 56px;
	font-weight: 700;
	line-height: 1
}

.status {
	background: #2f4a5a;
	color: #fff;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 13px;
	margin-top: 6px
}

.match-info {
	color: #666;
	margin: 14px 0 25px;
	font-size: 14px
}

.match-text {
	max-width: 750px;
	margin: 0 auto;
	color: #444;
	line-height: 1.6;
	font-size: 15px
}

.match-text p {
	margin: 10px 0
}

@media (max-width:640px) {
	.score-row {
		flex-direction: column;
		gap: 10px
	}

	.score-number {
		font-size: 42px
	}

	.img-content h2 {
		font-size: 26px
	}

	.img-result {
		font-size: 28px
	}

	.img-date {
		font-size: 20px
	}
}