/*
Theme Name: Az9s.Com
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* banner */
.st_banner h2{
	color: #858585;
	font-size: 28px;
	font-weight: normal;
	line-height: 1;
}
.st_banner h2 span{
	font-weight: bold;
	color: #4c4c4c;
	font-size: 46px;
	display: block;
}
.st_banner p{
	color: #2c2c2c;
	font-size: 15px;
	width: 80%;
	margin: auto;
}
.box-km{
	width: 65%;
	margin: 30px auto 5px;
	background: url(/wp-content/uploads/2021/06/adw-20201001033540.png);
	background-size: cover;
	background-position: top left;
	width: 355px;
	height: 137px;
	position: relative;
	animation: pulse 1s infinite;
}
.box-km h4{
	color: #05b6b6;
	font-size: 39px;
	margin: 0;
	line-height: 1;
	position: absolute;
	top: -7px;
	left: 33%;
	text-shadow: 3px 0 0 #239fa6;
	width: auto;
	display: inline-block;
}
.box-km h3{
	color: #05b6b6;
	font-size: 70px;
	text-align: left;
	margin: 0;
	position: absolute;
	top: 12px;
	left: 35px;
	width: auto;
	text-shadow: 3px 0 0 #239fa6;
}
.box-km h5{
	font-size: 136px;
	background: linear-gradient(201deg, #ffbbcb, #e73988);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: absolute;
	line-height: 1;
	right: 25px;
	top: -30px;
	width: auto;
	margin: 0;
}
@keyframes pulse{
	0%,100%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.1);
	}
}
.box-free h4{
	width: 70%;
	margin: auto;
	background-color: #9c9c9c;
	border-radius: 1000px;
	padding: 5px 0;
	color: #fff;
	font-size: 20px;
	margin-bottom: 10px;
}
.st_banner a.button{
	margin-top: 40px;
}
a.button{
	background: linear-gradient(180deg, #ffbbcb, #e73988);
	border: none;
	box-shadow: none;
	padding: 5px 30px;
	animation: pulse 2s infinite;
}
/* about */
.st_about{
	background: linear-gradient(180deg, #ffffff, #edfafa);
}
.st_about h3{
	color: #00a0a3;
	font-size: 33px;
	text-transform: uppercase;
}
.st_about p{
	font-size: 14px;
	text-align: justify;
	color: #000;
}
.st_about .row{
	border:1px solid #9fc5c4;
	border-radius: 8px;
	margin-bottom: 30px;
}
.st_about .col-txt{
	padding-top: 30px;
	padding-bottom: 30px;
}
.st_about .col-img .col-inner{
	height: 100%;
}
.st_about .col-img .img{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translatey(-50%);
}
/* Vấn để của KH */
.st_problem{
	background: linear-gradient(180deg, #edfafa, #ffffff);
}
.title{
	text-align: center;
	position: relative;
	padding-bottom: 10px;
}
.title:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translatex(-50%);
	height: 2px;
	width: 150px;
	background: #eee;
}
.title h3{
	color: #00a0a5;
	font-size: 33px;
	margin-bottom: 0;
}
.title p{
	color: #383838;
	font-size: 20px;
	margin: 0;
}
.st_problem .box{
	box-shadow: 0px 0px 30px -10px rgb(0 0 0 / 20%);
	background-color: #ffffff;
	border-radius: 8px;
	padding: 20px;
}
.st_problem .box h4{
	color: #525252;
	font-size: 16px;
	margin-bottom: 10px;
}
.st_problem .box p{
	color: #404040;
	font-size: 14px;
	text-align: justify;
}
/* Chi tiết sản phẩm */
.st_prod{
	background: linear-gradient(180deg, #ffffff, #edfafa);
}
.st_prod .slider-wrapper{
	margin-top: 30px;
}
.st_prod .slider-wrapper .slider{
	padding: 50px;
	background: url(/wp-content/uploads/2021/06/t2.png);
	background-color: #91edd9;
	border-radius: 12px;
}
.st_prod .slider-wrapper .box{
	border-radius: 10px;
	overflow: hidden;
}
.st_prod .box .box-text{
	background: #fff;
}
.st_prod .box .box-text h4{
	color: #ed5487;
	font-size: 16px;
}
/* Thành phần */
.st_thanhphan{
	background: linear-gradient(180deg, #edfafa, #ffffff);
}
.st_thanhphan .title{
	margin-bottom: 100px;
}
.st_thanhphan .icon-box {
	position: relative;
}
.st_thanhphan .icon-box:first-child{
	margin-bottom: 100px;
}
.st_thanhphan .icon-box img{
	height: 100px;
	object-fit: cover;
	border-radius: 50px;
}
.st_thanhphan .icon-box .icon-box-img{
	position: absolute;
	margin: 0;
	left: 50%;
	top: 0;
	transform: translate(-50%,-50%);
}
.st_thanhphan .icon-box .icon-box-text{
	padding: 70px 20px 30px;
	background: #fff;
	box-shadow: 0px 0px 30px -15px #2e1b0b;
	background-color: rgb(255, 255, 255);
	border-radius: 6px;
}
.st_thanhphan .icon-box .icon-box-text h3{
	color: #ed5488;
	font-size: 17px;
}
.st_thanhphan .icon-box .icon-box-text p{
	color: #3c3636;
	font-size: 14px;
}
/* Chi tiết sản phẩm */
.st_prodtl{
	background: linear-gradient(180deg, #ffffff, #edfafa);
}
.st_prodtl .title{
	margin-bottom: 50px;
}
.st_prodtl .slider-wrapper .slider{
	padding: 40px;
	box-shadow: 0px 0px 30px -10px rgb(0 0 0 / 20%);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.st_prodtl .slider-wrapper h3{
	color: #06b6b6;
	font-size: 24px;
}
.st_prodtl .slider-wrapper h4{
	color: #0d2f13;
	font-size: 18px;
	border-bottom: 1px solid #bcbcbc;
	line-height: 1.2;
	display: inline-block;
	width: auto;
}
.st_prodtl .slider-wrapper h4 span{
	color: #ed5489;
	font-size: 24px;
	margin-left: 10px;
}
.st_prodtl .slider-wrapper ul li::marker{
	color: #9e9e9e;
	font-size: 25px;
}
.st_prodtl .slider-wrapper ul li{
	font-size: 14px;
	color: #000;
	margin-bottom: 0;
}
.st_prodtl .col-txt{
	padding-left: 40px !important;
}
/* Chất lượng */
.st_chatluong{
	background: linear-gradient(180deg, #edfafa, #ffffff);
}
.st_chatluong p.ladi{
	text-align: center;
	font-size: 14px;
	font-style: italic;
	width: 50%;
	margin:15px auto 0;
}
.st_chatluong .r-icon .col-inner{
	padding: 40px 30px;
	box-shadow: 0px 0px 30px -10px rgb(0 0 0 / 20%);
	background-color: #fff;
	border-radius: 8px;
	height: 100%;
}
.st_chatluong .r-icon .col-inner h3{
	color: #404040;
	font-size: 17px;
	text-transform: uppercase;
}
.st_chatluong .r-icon .col-inner p{
	font-size: 14px;
	font-style: italic;
	padding: 0 15px;
}
/* contact */
.st_contact .col-frm .col-inner{
	background: linear-gradient(3deg, #0c8c8f, #20c2c2);
	box-shadow: 0px 0px 30px -10px rgb(0 0 0 / 20%);
	border-radius: 8px;
	padding: 35px;
	text-align: center;
	color: #fff;
}
.st_contact .col-frm h3{
	color: #fff;
	font-size: 29px;
	margin: 0;
}
.st_contact .box-bn{
	background: #fff;
	border: 1px solid #b6b6b6;
	border-radius: 5px;
	display: flex;
	position: relative;
	padding: 30px 0 20px;
	margin-top: 30px;
}
.st_contact .box-bn:before{
	content: "";
	background: url(/wp-content/uploads/2021/06/no-20201002015954.png);
	position: absolute;
	left: -3px;
	top: 0;
	width: 50px;
	height: 36px;
	z-index: 10;
	background-size: cover;
	background-position: bottom left;
}
.st_contact .box-bn h4{
	position: absolute;
	width: auto;
	display: inline-block;
	left: 50%;
	top: 0;
	transform: translate(-50%,-50%);
	padding: 5px 30px;
	background: #ed5488;
	border-radius: 50px;
	color: #fff;
}
.st_contact .box-bn div{
	text-align: center;
	flex-basis: 33%;
	padding: 5px 15px;
	border-right: 1px solid #c0c0c0;
	font-size: 14px;
}
.st_contact .box-bn div:last-child{
	border: 0;
}
.st_contact .box-km{
	animation: tada infinite 1s;
}
@keyframes tada{
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	10%, 20% {
		-webkit-transform: scale(.9) rotate(-3deg);
		-ms-transform: scale(.9) rotate(-3deg);
		transform: scale(.9) rotate(-3deg);
	}
	30%, 50%, 70%, 90% {
		-webkit-transform: scale(1.1) rotate(3deg);
		-ms-transform: scale(1.1) rotate(3deg);
		transform: scale(1.1) rotate(3deg);
	}
	40%, 60%, 80% {
		-webkit-transform: scale(1.1) rotate(-3deg);
		-ms-transform: scale(1.1) rotate(-3deg);
		transform: scale(1.1) rotate(
			-3deg
		);
	}
	100% {
		-webkit-transform: scale(1) rotate(0);
		-ms-transform: scale(1) rotate(0);
		transform: scale(1) rotate(0);
	}
}
.st_contact .wpcf7-form{
	margin: 0;
}
.st_contact .col-frm input.wpcf7-submit{
	margin: 15px 0 0;
	padding: 5px 30px;
	border-radius: 30px;
	border: 0;
	box-shadow: none;
	background: linear-gradient(180deg, #ffbbcb, #e73989);
}
/* footer */
.st_footer{
	padding-bottom: 0 !important;
}
.st_footer h4{
	font-size: 18px;
	margin-bottom: 20px;
}
.st_footer ul li{
	list-style-type: none;
	margin-left: 0;
	font-size: 14px;
}
.st_footer ul li i{
	margin-right: 10px;
	font-size: 18px;
	padding: 2px;
	color: #ffbbcb;
}
.st_footer ul.li-2c li{
	display: inline-block;
	width: 49%;
	vertical-align: top;
}
.st_footer .r-bottom p{
	padding-top: 20px;
	border-top: 1px solid  rgba(255,255,255,0.3);
}


@media only screen and (max-width: 48em) {
	.st_banner{padding-top: 30px !important;padding-bottom: 0 !important;}
	.st_banner h2 span{
		font-size: 28px;
		display: inline-block;
		margin-right: 10px;
	}
	.st_banner p {
		font-size: 14px;
		width: 100%;
	}
	.box-free h4{width: 85%;font-size: 18px;}
	.st_about .col-img .img {
		position: relative;
		left: 0;
		top: 0;
		transform: translatey(0);
	}
	.st_about .row{border: 0;}
	.st_about h3,.title h3{font-size: 26px;}
	.title p{font-size: 17px;}
	.st_prod .slider-wrapper .slider{padding: 15px;}
	.st_thanhphan .icon-box .icon-box-img {
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
	.st_thanhphan .icon-box .icon-box-text {
		padding: 20px 20px 20px 65px;
		margin-left: 50px;
	}
	.st_thanhphan .icon-box {
		margin-bottom: 40px !important;
	}
	.st_prodtl .title {
		margin-bottom: 20px;
	}
	.st_prodtl .slider-wrapper .slider {padding: 15px;}
	.st_prodtl .col-txt {
		padding-left: 5px !important;
		padding-top: 20px !important;
	}
	.st_chatluong p.ladi{width: 100%;}
	.st_chatluong .r-icon .col-inner {padding: 15px;}
	.st_contact .col-frm .col-inner{padding: 20px;}
}