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

/*************** ADD CUSTOM CSS HERE.   ***************/
/*
 * 033f78
 * 028bb8
 * 18bdd7
 */
.br10 {
	border-radius: 10px;
	overflow: hidden;
}

.text h2, .dich-vu h3 {
	color: var(--fs-color-primary);
	text-transform: uppercase;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #033f78, #6bdedb);
	position:relative;
	padding-bottom: 8px;
	margin-bottom: 16px;
	font-size: 168%;
}
.text h2:before {
	content: '';
	width: 250px;
	height: 7px;
	background: url(../../uploads/Line-star.png) no-repeat center;
	background-size: contain;
	display: block;
	position: absolute; 
	top: 100%;
	left: 50%;
	transform: translatex(-50%);
}
.sec-phone-call {
	padding: 4% 4% 0 !important;
    border-radius: 10px;
	background-image: linear-gradient(to bottom right, #033f78, #6bdedb);
	text-align: left;
}
.sec-phone-call .col {
	padding-bottom: 4% !important;
}
.dich-vu {
	background: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 10px;
	padding: 10px;
}
.dich-vu .box-image {
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    display: block;
}
.dich-vu .box-text {
	padding: 0;
}
.dich-vu h3 {
	font-size: 146%;
}
.btn1 i{
	margin: 0 20px;
    font-size: 24px;
	-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.btn2 i{
	overflow: hidden;
	text-indent: 110%;
	background: url(../../uploads/Icon_of_Zalo.svg.webp) center no-repeat;
	background-size: contain;
}
@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}

#wrapper .btn1 {
	position: fixed;
	left: 10px;
	z-index: 999;
	bottom: 80px;
}
#wrapper .btn2 {
	bottom: 30px;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.text h2 {
		font-size: 140%;
	}
	.dich-vu h3 {
		font-size: 120%;
	}
	#wrapper {
		padding-bottom: 37px;
	}
	#wrapper .btn1 {
		bottom: 0;
        left: 0;
        margin: 0;
        width: 50vw;
        border-radius: 0 !important;
	}
	#wrapper .btn2 {
		left: 50vw;
	}

}