:root{
	--xs:clamp(6px,calc(0.6vw + 0.2vh),12px);
	--sm:calc(var(--xs) * 2);
	--md:calc(var(--xs) * 3);
	--lg:calc(var(--xs) * 4);
	--xl:calc(var(--xs) * 6);
	--xxl:calc(var(--xs) * 8);
	--red:#f91209;
	--red-rgb:249,18,9;
	--yellow:#fffe1a;
	--yellow-rgb:255,254,26;
	--bs-link-color-rgb:var(--red-rgb);
	--bs-link-color:var(--red);
	
}
header.sticky-top{
	z-index: 1100;
}

.pagination{
	--bs-pagination-active-bg:var(--red);
	--bs-pagination-active-border-color:var(--red);
}

.container{
	max-width:1536px;
}

.nav-link:hover,a:hover{
	color:var(--red);
}

.navbar{
	transition:all 0.4s ease-in-out;
	margin-bottom: -75px;
}
.navbar button{border:0;}
.navbar .nav-item{padding-right:.3vw;padding-left:.3vw;}
.button {
  font-weight: 700;
  transition: all 0.2s;
  padding: 10px 20px;
  border-radius: 100px;
  background: rgba(255,255,255,0.8);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1;
  color: #000;
}

.button:hover {
  background: rgba(255,255,255,1);
}

.button-dark{
	background: rgba(0,0,0,0.8);
	color:#fff;
}
.button-dark:hover{
	background: rgba(var(--red-rgb),1);
}

.button > svg {
  width: 34px;
  margin-left: 10px;
  transition: transform 0.3s ease-in-out;
}

.button:hover svg {
  transform: translateX(5px);
}

.button:active {
  transform: scale(0.95);
}

.title{
	font-size:var(--lg);line-height: 1.6;font-weight: 700;
}

.thumb{
	overflow: hidden;
}
.thumb img{
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}
.thumb::after{
	content:'';
	position:absolute;
	left:0;
	bottom: 0;
	width:100%;
	height:120px;
	background: linear-gradient(transparent 0%, rgba(25, 27, 38, .88) 100%);
	z-index: 0;
}
.thumb a{
	color:#fff;
	text-decoration: none;
}
.thumb:hover a{
	color:var(--red);
}

.thumb:hover img{
	transform: scale(1.1);
}

.badge{
	text-decoration: none;
}

article h1{
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.desc{
	display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.banner{
	position: relative;
	height: clamp(300px,35vh,500px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: -1;
}
.banner::after{
	content:'';
	position:absolute;
	left:0;
	top: 0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.64);
	
}