@font-face {
  font-family: Poppins;
  src: url(assets/fonts/Poppins/Poppins-Regular.woff2);
}

:root{
	--color-primary:#002B4D;
	--color-secondary : #041726;
	--color-grey: #adb4ba;
	--color-drak-grey:#908E99;
	--color-red:#E12A21;
	--color-white:#FFF;
	--color-black:#020105;
	--color-font:#3A444D;
}
body{
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
	padding-top:50px;
	font-size: 1rem;
	color:var(--color-font);
}
h1, h2, h3, h4, h5{
	font-weight: bold;
}
a{
	text-decoration: none;
}
#navbar{
	background-color: var(--color-primary);
}
#navbar > .container{
	height:50px;
}
#offcanvasNavbar{
	background-color: var(--color-secondary) !important;
}
#logo{
	width: 32px;
	height: 32px;
}

.navbar-nav > .nav-item{
	padding:0;
	border-bottom:1px solid #182835;
}
.navbar-nav > .nav-item > .nav-link{
	color: var(--color-white);
	font-size: 0.875rem;
	height: 100%;
	display: flex;
	align-items: center;
	text-transform: capitalize;
	font-weight: 600;
	letter-spacing: 1px;
	padding:12px 0;
	height:45px;
}
.navbar-nav .dropdown-menu li a{
	font-size: 0.75rem;
	letter-spacing: 1px;
}
.navbar-nav > .nav-item > .nav-link.active, .navbar-nav > .nav-item > .nav-link:hover, .dropdown .dropdown-menu li a:hover{
	color:var(--color-red);
}
.dropdown .dropdown-menu{
	background-color:var(--color-secondary);
	border:none;
	font-size:0.875rem;
}
.dropdown .dropdown-menu li a{
	color:var(--color-grey);
	background-color:var(--color-secondary);
	font-size:0.875rem;
	height:45px;
	border-top:1px solid #182835;
	align-items: center;
	display: flex;
}
#btn-search{
	background:none;
	border:none;
}
#social-top{
	gap:0 12px;
}
#search-top > form{
	width: 100%;
}
#search-top > form > input{
	border-radius: 10px 0 0 10px;
	height: 40px;
	font-size: 0.75rem;
}
#search-top > form > input:focus{
	box-shadow: unset;
}
.search-submit{
	border:none;
	background: linear-gradient(to right, #FB4A64 0%, #F8875F 100%);
	width: 40px;
	height: 40px;
	border-radius: 0 10px 10px 0;
}
.dropdown-custom{
	position: absolute;
	right: 0;
	top:0;
	width: 45px;
	height: 45px;
	background-image: url(assets/images/icons/dropdown.svg);
	background-size: 1rem;
	background-repeat: no-repeat;
	background-position: center;
}
.dropdown-custom.show{
	rotate: -180deg;
}
#mainBanner{
	/* height:62vh; */
	height: 320px;
	width: 100%;
	overflow: hidden;
	display: block;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: end;
}

#heroBanner{
	position: absolute;
	width: 100%;
	height: 100%;
}
#heroBanner .swiper-slide{
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: end;
	padding-bottom:112px;
}
#heroBanner .swiper-slide .group-tags a{
	font-size:9px;
	pointer-events: auto;
	user-select: none;
}
#heroBanner .swiper-slide:after{
	z-index: 0;
	pointer-events: none;
	content: '';
	display: block;
	top:0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(0,0,0,1) 100%);
	background: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
}
#heroBanner .swiper-slide > div{
	z-index: 1;
}
#heroBanner .swiper-slide > div .banner-title{
	color:var(--color-white);
	font-size:1rem;
	max-width: 404px;
	font-weight: bold;
}
#heroThumbs .swiper-slide{
	color: var(--color-white);
	cursor: pointer;
	border-top: 1px solid rgba(255, 255, 255, .15);
}
#heroThumbs .swiper-slide.swiper-slide-thumb-active{
	border-top-color: #E12A21;
	background-color: rgba(255, 255, 255, .1);
}
#heroThumbs .swiper-slide > img{
	width: 77px;
	height: 62px;
}

#bannerSwiper{
	aspect-ratio: 4 / 0.62;
}
#bannerSwiper .swiper-slide{
	position: relative;
	& > a{
		position: absolute;
		width: 100%;
		height: 100%;
	}
}

#bannerSide{
	aspect-ratio: 1 / 2;
}
#bannerSide .swiper-slide{
	position: relative;
	& > a{
		position: absolute;
		width: 100%;
		height: 100%;
	}
}

.post .post-title, .row-post .post-title{
	font-size: 1.125rem;
	color:var(--color-font);
}
.post .post-title:hover, .row-post .post-title:hover{
	color:var(--color-red);
}
.post .post-head, .row-post .post-head{
	color:var(--color-drak-grey);
	font-size: .75rem;
	display: flex;
}
.post .post-head span, .row-post .post-head span{
	padding:0 .5rem;
	border-left:1px solid var(--color-grey);
}
.post .post-desc{
	font-size: 0.875rem;
}
.post .post-head span:first-child, .row-post .post-head span:first-child{
	padding-left:0;
	border:none;
}
.post-small .img-cover{
	width: 125px;   /* Set the desired width */
    aspect-ratio: 4 / 3;
    object-fit: cover; /* Ensures the image scales and fills the container */
}
#breadcrumbNav a{
	color: var(--color-font);
}
#breadcrumbNav a:hover{
	color: var(--color-red);
}
#last-post .post{
	display: flex;
	flex-direction: column;
	justify-content: end;
	height: 230px;
	background-image: url(https://www.yod.net/wp-content/uploads/2024/10/2-3.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#last-post .post .post-title{
	display: flex;
	height: 100%;
	align-items: end;
	color:var(--color-white);
	transition: ease .2s;
	padding:1rem;
	margin-bottom: 0;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5998774509803921) 99%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5998774509803921) 99%);
	background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5998774509803921) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
}
#last-post .post:hover .post-title{
	color:var(--color-red);
}
.btn-last-post{
	background:none;
	border:none;
	font-size: 0.75rem;
	letter-spacing: 1px;
}
.btn-last-post:hover, .btn-last-post.active{
	color:var(--color-red);
}
.img-cover {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.img-trend{
	height:250px;
}
.group-tags{
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;

}
.group-tags a{
	color:var(--color-red);
	text-transform: uppercase;
	font-size:11px;
	letter-spacing: 1px;
	font-weight: bold;
	&:hover {
        color:var(--color-font);
    }
}
/* .group-tags a:hover{
	color:var(--color-font);
} */

.text-grey{
	color:var(--color-drak-grey);
}
.link-grey{
	color:var(--color-drak-grey);
}
.link-black{
	color:var(--color-font);
}
.link-red{
	color: var(--color-red);
	&:hover {
        color: var(--color-font);
    }
}
.link-grey:hover, .link-black:hover{
	color:var(--color-red);
}
.fs-7{
	font-size:0.875rem;
}
.fs-8{
	font-size: 0.75rem;
}
.btn-primary{
	border: none;
	background: linear-gradient(to right, #FB4A64 0%, #F8875F 100%);
	width: 150px;
	height: 40px;
	border-radius: .5rem;
	color:var(--color-white);
	font-weight: bold;
	font-size: .875rem;
}
.btn-primary:hover{
	filter: brightness(1.1);
}

/* Start Loading Load More */
.load-more-loading,
.load-more-loading:after {
  box-sizing: border-box;
}
.load-more-loading {
  display: none;
  justify-content: center;
  align-items: center;
}
.load-more-loading:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 6px;
  border-radius: 50%;
  border: 4.5px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: load-more-loading 1.2s linear infinite;
}
@keyframes load-more-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* End Loading Load More */

.btn-loadmore{
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn-loadmore.loading .load-more-loading{
	display: flex;
}
.btn-loadmore.loading span{
	display: none;
}

.row-post .img-row-post{
	width: 100%;
	flex:none;
	height:auto;
}

/* Youtube */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#list-youtube > div{
    flex: 1; /* Distributes equal height among all children */
    border: 1px solid #f4f6f6; /* Optional for visibility */
	cursor: pointer;
}
#list-youtube > div.active{
	background-color: #f4f6f6;
}
.poster-youtube{
	width:100px;
	height: 72px;
}
.flex-none{
	flex:none;
}
#swiper-recommended{
	margin-top:-2rem;
}
#swiper-recommended .swiper-slide, .last-post{
	position: relative;
	height:290px;
	display: flex;
	background-size: cover;
	background-position: center;
	
}
#swiper-recommended .swiper-slide .post, .last-post .post{
	width: 100%;
	padding:1rem;
	color:var(--color-white);
	display: flex;
	flex-direction: column;
	justify-content: end;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 80%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 80%);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
}

#swiper-recommended .swiper-slide .post:hover, .last-post .post:hover{
	color:var(--color-red);
}
#swiper-recommended .swiper-slide .group-tags, .last-post .group-tags{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	padding:1rem;
	pointer-events: none;
	gap:.375rem .5rem;
}
#swiper-recommended .swiper-slide .group-tags a, #heroBanner .swiper-slide .group-tags a, .last-post .group-tags a{
	pointer-events: fill;
	background-color: var(--color-red);
	color:var(--color-white);
	padding: .25rem;
	border-radius: .25rem;
}
#swiper-recommended .swiper-slide .group-tags a:hover, .last-post .group-tags a:hover{
	filter: brightness(120%);
	opacity: .9;
}
#swiper-navigator-rec{
	position: absolute;
	width: 100%;
	top:2rem;
	display: flex;
	justify-content: end;
	align-items: center;
	gap:.875rem;
}
#swiper-navigator-rec > div{
	position: relative;
	left:0;
	right:0;
	height: 20px;
	width: 20px;
}
#swiper-navigator-rec > div > img{
	object-fit: contain;
}
#swiper-navigator-rec > div::after{
	display: none;
}


/* Footer */
#footer{
	background-color: var(--color-primary);
	color:var(--color-white);
}
#footer ul li a{
	text-decoration: none;
	color: var(--color-white);
}
#copyright{
	background-color: var(--color-secondary);
	color:var(--color-grey);
}
#copyright a{
	color:var(--color-grey);
	text-decoration: none;
}
#footer ul li a:hover, #copyright a:hover{
	color: var(--color-red);
}
#sticky-end{
	position: sticky;
	top:0;
}

#form-search{
	box-shadow: none !important;
	max-width: 540px;
}
#form-search *{
	height: 40px;
}
#form-search input{
	border: 1px solid #e1e5e6;
	background-color: #f4f6f6;
	border-radius: 10px 0 0 10px;
	transition:ease .15s;
	&:focus{
		border-color: #E12A21;
		box-shadow: none;
	}
}
/* Page 404 */
#error-404{
	height: calc(100svh - 50px);
	min-height: 500px;
}
#n04{
	font-size: 8rem;
	letter-spacing: .03em;
	color: #e4e7e9;
	line-height: 1;
}
.show-3-line{
	    display: -webkit-box; 
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
nav > ul.pagination > li > a{
	border-color: var(--color-grey);
	color:var(--color-black);
	box-shadow:none;
}
nav > ul.pagination > li.active > a, nav > ul.pagination > li:hover > a{
	background: #fb4a64;
  background: linear-gradient(to right, #fb4a64 0, #f8875f 100%);
  border-color: var(--color-grey);
  color:var(--color-white);
}

nav > ul.pagination > li.disabled > a{
	background-color: #e9ecef ;
}
@media (min-width: 768px) {
	#heroBanner .swiper-slide > div .banner-title{
		font-size:1.5rem;
	}
	#heroBanner .swiper-slide{
		padding-bottom:150px;
	}
	#heroBanner .swiper-slide .group-tags a{
		font-size: 11px;
	}
	#mainBanner{
		height: 450px;
	}
	#n04{
		font-size: 12rem;
	}
	.show-3-line{
    -webkit-line-clamp: 3;
	}
}

@media (min-width: 1200px) {

	#offcanvasNavbar{
		background-color: var(--color-primary) !important;
	}
	.container-web{
		max-width: 1140px;
	}
	.container-page{
		max-width: 1200px;
		margin-right:auto;
		margin-left:auto;
	}
	.dropdown .dropdown-menu {
		margin-top:0;
		border-radius: 0;
		border:none;
	}
	.dropdown .dropdown-menu li a{
		height: 26px;
		font-size:.75rem;
		display: block;
		border:none;
	}
	.dropdown:hover .dropdown-menu {
		display: block;
		left:0;
	}
	.dropdown-menu.show{
		display: none;
	}
	.navbar-nav > .nav-item{
		min-height: 50px;
		position: relative;
		border-bottom: none;
	}
	.navbar-nav > .nav-item > .nav-link{
		font-size: 0.625rem;
		padding:0 1rem;
		text-transform: uppercase;
		height: 50px;
	}
	.navbar-nav > .nav-item::after{
		content: '';
		position: absolute;
		bottom:0;
		left:50%;
		height: 2px;
		width: 0;
		background-color: var(--color-red);
		transition:ease .3s;
	}
	.navbar-nav > .nav-item:hover::after{
		width: 100%;
		left:0;
	}
	#search-top > form{
		background-color: var(--color-white);
		padding:0 1rem;
		position: absolute;
		right:0;
		top:100%;
		transition: ease .3s;
		height: 0;
		overflow: hidden;
		pointer-events: none;
		width:auto;
	}
	#search-top.show > form{
		height: 56px;
		pointer-events: fill;
	}
	#search-top > form > input{
		margin:.5rem auto;
		width:220px;
		border-right:0;
		border-color: #E12A21;
	}
	#btn-search:hover #btn-icon-search, #swiper-navigator-rec > div:hover > img{
		filter: brightness(0) saturate(100%) invert(16%) sepia(97%) saturate(6345%) hue-rotate(357deg) brightness(99%) contrast(97%);
	}
	#heroBanner .swiper-slide > div .banner-title{
		font-size:2.25rem;
	}
	.row-post .img-row-post{
		width: 250px;
	}
	#error-404{
		height: calc(100svh - 250px);
	}
	#n04{
		font-size: 240px;
		letter-spacing: .03em;
		color: #e4e7e9;
		line-height: 1;
	}

}