$main-color: {{ settings.main_color }};
$hover:  {{ settings.hover_color }};
$bacground: {{ settings.background_color }};
.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}
.section_slider{
	margin-bottom: 0 !important;
	.home-slider{
		margin-bottom: 0px;
		.swiper-slide{
			text-align: center;
			img {
				display: block;
				margin: 0 auto;
			}
		}
		.swiper-button-next:after, .swiper-button-prev:after{
			font-size: 20px;
			color: #000;
		}
		.swiper-wrapper{ 
			padding-bottom: 0; 
		}
	}


}
section{
	margin-bottom: 50px;
	@media(max-width: 991px){
		margin-bottom: 20px;
	}
}

.section_flashsale {
	margin-top: 50px;
	@media(max-width: 991px){
		margin-top:30px;}
	.thumb-flasale{
		background: $bacground;
		padding: 10px;
		border-radius: 20px;
		.group_title_index{
			@media(min-width: 991px){
				align-items: center;
			}
			.title{ 
				@media(min-width: 991px){
					display: flex;
					align-items: center;
				}
				.title-name{color: #1d693a}
				.title-content{color: #1d693a}
			}
		}
		.see-more{
			a{
				border: 2px solid #fff;
				border-radius: 5px;
				color: #fff;
			}
		}
	}
	.product-flash-swiper{
		margin-bottom: 20px;
	}
	.count-down{
		display: inline-block;
		font-size: 14px;
		padding: 0;
		text-align: right;
		background: transparent;
		margin-left: 10px;
		.timer-view{
			display: inline;
			width: 100%;
			text-align: center;
			margin-bottom: 20px;

			.block-timer {
				width: 50px;
				height: 50px;
				display: inline-flex;
				color: #main-color;
				justify-content: center;
				align-items: center;
				background: #fff;
				margin: 5px;
				border-radius: 5px;		
				margin-bottom: 0;
				@media(max-width: 400px){
					width: 35px;
					height: 35px;
					margin: 2px;
					margin-bottom: 0;
				}
				p{
					margin-bottom: 0;
					font-size: 16px;
					color: #000000;
					@media(max-width: 400px){
						font-size: 11px;
					}
					b{
						display: block;
						font-size: 20px;
						line-height: 20px;
						color: #000000;
						@media(max-width: 400px){
							font-size: 14px;
							line-height: 13px;
							
						}
					}
				}
				&:first-child{
					margin-left: 0;
				}
			}
			>span{
				font-size: 30px;
				font-weight: 600;
				line-height: 30px;
				position: relative;
				top: 11px;
				color: #fff;

			}
		}
	}
	.elio-productcount{
		.countdown{
			.line{
				height: 8px;
				background: #dfdfdf;
				border-radius: 5px;
				span{
					width: 62%;
					display: block;
					height: 8px;
					border-radius: 5px;
					background-color:$main-color;
					-webkit-animation: progress_bar_fill 2s linear infinite;
					animation: progress_bar_fill 2s linear infinite;
					background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
					background-size: 40px 40px;
				}
			}
			.title{
				font-weight: 700;
				margin-top: 2px;
				display: block;
			}
		}
	}
	@keyframes progress_bar_fill{
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 40px 0;
		}
	}
}



.swiper-wrapper{
	padding-bottom: 1px;
}

.section_dichvu{margin-bottom:50px;margin-bottom:30px;
	@media(max-width: 991px){
		margin-top:30px;
		.row{
			justify-content: flex-start;
			width: 100%;
			overflow-x: scroll;
			flex-wrap: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			display: flex;

		}
	}
	.item{
		text-align: center;
		border: 1px solid #ddd;
		padding: 20px;
		border-radius: 10px;
		height: 100%;
		position: relative;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
			border: 1px solid #ddd;
			z-index: -1;
			transition: .3s cubic-bezier(.24,.74,.58,1);
		}
		h3{
			font-size: 20px;
			font-weight: 700;
			color: $main-color;
			position: relative;
			padding-bottom: 15px;
			margin-bottom: 15px;
			&:before {
				content: '';
				width: 9px;
				height: 3px;
				background-color: $main-color;
				position: absolute;
				left: 0;
				right: 0;
				margin: 0 auto;
				bottom: 0;
				transition: .3s cubic-bezier(.24,.74,.58,1);
			}
		}
		.content{
			font-size: 14px;
			margin-bottom: 15px;
		}
		a{
			display: inline-block;
			padding: 5px 15px;
			font-size: 16px;
			border: 2px solid $main-color;
			border-radius: 5px;
			color: $main-color;
			&:hover{
				background: $hover;
				color: #fff;
				border: 2px solid $hover;
			}
		}
		&:hover{

			&:before {
				border-width: 3px;
				border-color: $hover;
			}
			h3:before {
				width: 40px;
			}
		}
	}
}

.image-effect{
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 5px;
	&:before {
		content: '';
		height: 85%;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-image: -webkit-linear-gradient(bottom,rgba(118,167,19,.9),rgba(118,167,19,0));
		z-index: 9;
		opacity: 0;
		transition: .3s cubic-bezier(.24,.74,.58,1);
	}
	img{
		height: 0;
		&.loaded{
			height: auto;
		}
	}
	&:hover{
		&:before {
			opacity: 1;
		}
	}
}
.section_product{


	.product-swiper{
		margin-bottom: 20px;
	}

}


.section_blog{
	.blog-swiper{
		margin-bottom: 20px;
	}
}
.section_3_col_pro{
	.swiper-slide{
		margin-top: 0 !important;
		margin-bottom: 20px;
	}
	@media(max-width: 991px){
		.col-12{
			margin-bottom: 50px;
		}
	}

}
.section_tiktok{
	.tiktok{
		padding: 50px 10px;
		background: url({{'bg_tiktok.jpg' | asset_url}});
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		@media(max-width: 991px){
			padding: 10px;
		}
	}
}
.section_marquee {
  background-color: {{ settings.marquee_bg | default: '#b30000' }};
  color: {{ settings.marquee_color | default: '#ffffff' }};
  font-weight: 700;
  padding: 10px 0;
}

.section_marquee .container {
  overflow: hidden;
}

.marquee-wrapper { 
  white-space: nowrap; 
  overflow: hidden; 
}

.marquee {
  display: inline-block;
  will-change: transform;
  animation: marquee linear infinite;
  animation-duration: {{ settings.marquee_speed | default: '15' }}s;
}

.marquee__item {
  display: inline-block;
  padding-right: 10rem; /* khoảng cách giữa 2 lần lặp */
  font-size: 18px;
}

/* Seamless loop: dịch chuyển toàn bộ khối marquee sang trái */
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); } /* vì ta lặp 2 span giống nhau */
}

/* Responsive tinh chỉnh nhỏ */
@media (max-width: 768px){
  .marquee__item { font-size: 16px; }
}