/*
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.   ***************/
@font-face {
	font-family: vnt-header;
	src: url('fonts/UTM-Bebas.ttf');
}

#button-contact-vr {
	position: fixed;
	bottom: 100px;
	z-index: 999;
	right: 0;
}

	/*phone*/
	#button-contact-vr .button-contact {
		position: relative;
		margin-top: -5px;
	}

		#button-contact-vr .button-contact .phone-vr {
			position: relative;
			visibility: visible;
			background-color: transparent;
			width: 90px;
			height: 90px;
			cursor: pointer;
			z-index: 11;
			-webkit-backface-visibility: hidden;
			-webkit-transform: translateZ(0);
			transition: visibility .5s;
			left: 0;
			bottom: 0;
			display: block;
		}

.phone-vr-circle-fill {
	width: 65px;
	height: 65px;
	top: 12px;
	left: 12px;
	position: absolute;
	box-shadow: 0 0 0 0 #c31d1d;
	background-color: #cf203170;
	border-radius: 50%;
	border: 2px solid transparent;
	-webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
	animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
	transition: all .5s;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-animuiion: zoom 1.3s infinite;
	animation: zoom 1.3s infinite;
}

.phone-vr-img-circle {
	background-color: #CF2031;
	width: 40px;
	height: 40px;
	line-height: 40px;
	top: 25px;
	left: 25px;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
	animation: phone-vr-circle-fill 1s infinite ease-in-out;
}

	.phone-vr-img-circle a {
		display: block;
		line-height: 37px;
	}

	.phone-vr-img-circle img {
		max-height: 25px;
		max-width: 27px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
	}

@-webkit-keyframes phone-vr-circle-fill {
	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);
	}
}

@-webkit-keyframes zoom {
	0% {
		transform: scale(.9)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 15px transparent
	}

	100% {
		transform: scale(.9);
		box-shadow: 0 0 0 0 transparent
	}
}

@keyframes zoom {
	0% {
		transform: scale(.9)
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 15px transparent
	}

	100% {
		transform: scale(.9);
		box-shadow: 0 0 0 0 transparent
	}
}

.phone-bar a {
	position: fixed;
	bottom: 25px;
	left: 30px;
	z-index: -1;
	color: #fff;
	font-size: 16px;
	padding: 8px 15px 7px 50px;
	border-radius: 100px;
	white-space: nowrap;
}

	.phone-bar a:hover {
		opacity: 0.8;
		color: #fff;
	}

#zalo-vr .phone-vr-img-circle {
	background-color: #1F5E9D;
}

#zalo-vr .phone-vr-circle-fill {
	box-shadow: 0 0 0 0 #1f5e9da3;
	background-color: #1f5e9d7a;
}

#masthead {
	background: -webkit-radial-gradient(top left, circle farthest-side, #f4f4f4 0%, #cecece 100%);
}

.header-nav-main {
}

	.header-nav-main > li.menu-item {
	}

		.header-nav-main > li.menu-item > a {
			display: block;
			/* padding: 0 24px; */
			color: #555;
			text-decoration: none;
			font-size: 22px;
			font-family: vnt-header !important;
			font-weight: 400;
			padding-left: 24px;
			padding-right: 24px;
		}

.banner-gt {
}

	.banner-gt:hover .text-box {
		height: 100%;
	}

	.banner-gt .text-box {
		/* bottom: 0; */
		width: 100%;
		height: 55px;
		background: rgba(0, 0, 0, 0.3);
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
		overflow: hidden;
	}

		.banner-gt .text-box h3 {
			font-family: vnt-header !important;
			font-size: 24px;
			color: #fff;
			font-weight: normal;
		}

		.banner-gt .text-box p {
			color: #fff;
			font-weight: normal;
			margin-top: 15px;
			font-size: 13px;
			line-height: 1.8em;
		}

		.banner-gt .text-box .text-box-content {
			padding: 10px;
		}

.showView-itemMenu {
	background: url(images/showView.png) right no-repeat;
	line-height: 2em;
	padding-right: 30px !important;
	color: #fff !important;
	font-size: 14px;
	display: block;
	text-align: right;
	font-weight: 400;
}

@media screen and (min-width: 850px) {
	.wap-x30 {
		flex-basis: 30%;
		max-width: 30%;
	}

	.wap-x40 {
		flex-basis: 40%;
		max-width: 40%;
	}
}

h3.projectx {
	display: block;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	word-spacing: 2px;
	letter-spacing: 1px;
	color: #009f9f;
	padding: 5px 0;
	font-family: vnt-header !important;
}

.box-blog-post {
	background: #e5e5e5;
	padding: 10px;
}

	.box-blog-post:hover {
		background: #ccc;
	}

	.box-blog-post h5.post-title {
	}

		.box-blog-post h5.post-title a {
			color: #000;
			font-size: 16px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /* số dòng muốn cắt */
			overflow: hidden;
			height: 45px;
			line-height: 22px;
		}

			.box-blog-post h5.post-title a:hover {
				color: #e7bf3f;
			}

		.box-blog-post h5.post-title p {
			color: #000;
			font-size: 14px;
		}

.news {
	background: #e5e5e5;
	padding: 10px;
}

	.news:hover {
		background: #ccc;
	}

	.news .img {
		position: relative;
	}

		.news .img img {
		}

.mar-mid {
	margin: 10px 0;
}

.news h3 a {
	color: #000;
	font-size: 16px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 45px;
}

	.news h3 a:hover {
		color: #e7bf3f;
	}

.news .mar-2btm {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	height: 65px;
	font-size: 14px;
	margin-bottom: 0;
}

.h3-project {
}

	.h3-project h3 {
		display: block;
		font-size: 20px;
		font-weight: 400;
		text-transform: uppercase;
		word-spacing: 2px;
		letter-spacing: 1px;
		color: #009f9f;
		background: #f2f2f2;
		padding: 5px 15px 5px 15px;
		font-family: vnt-header !important;
	}

.project-mar p {
	padding: 5px 0;
	font-weight: none;
	border-bottom: 1px dotted #e5e5e5;
	margin-bottom: 0;
	line-height: 1.5em;
}

.project-mar a {
	text-decoration: none;
	color: #000000;
	font-size: 15px;
	line-height: 16px;
	line-height: 1.5em;
}

.form-lienhe {
}

	.form-lienhe input {
		margin-bottom: 5px;
		box-shadow: unset;
		height: 35px;
	}

.box-blog-post p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	height: 65px;
	font-size: 14px;
	margin-bottom: 0;
}

.page-new .row {
	margin-left: -5px !important;
	margin-right: -5px !important;
}

.page-new .col {
	padding: 0 5px 30px;
}

.pageBreamBox {
	background-color: rgb(242, 242, 242);
	padding: 10px 0;
	margin-bottom: 15px;
}

.page-new h1 {
	display: block;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	word-spacing: 2px;
	letter-spacing: 1px;
	color: #009f9f;
	padding: 5px 0;
	font-family: vnt-header !important;
}

.entry-header-text h1 {
	font-size: 26px;
	/* line-height: 1.5em; */
	font-weight: 500;
	padding-bottom: 0;
	text-align: left;
}

.entry-header-text-top {
	padding-bottom: 0;
}

.relate-post {
	display: block;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	word-spacing: 2px;
	letter-spacing: 1px;
	color: #009f9f;
	background: #f2f2f2;
	padding: 5px 15px 5px 15px;
	font-family: vnt-header !important;
}

.item-relate {
	float: left;
	width: 100%;
	margin-bottom: 15px;
}

	.item-relate h3 a {
		font-size: 16px;
		color: #000000;
	}

	.item-relate .wap-x25 {
		width: 20% !important;
		float: left;
		margin-right: 10px;
	}

	.item-relate p {
		font-size: 14px;
		line-height: 1.5em;
		color: #000000;
	}

#comments {
	display: none;
}

.lt-image img {
	max-height: 150px
}

h3.title {
	font-size: 16px;
	margin-top: 5px;
}

.fah {
	float: left;
	width: 50px;
	height: 50px;
	color: #009f9f;
	margin-top: 6px;
	margin-right: 14px;
	text-align: center;
	font-size: 60px;
	line-height: 46px;
	background-size: 100% 100%;
}

.sharaholder-us-content {
	float: left;
	position: relative;
	width: calc(100% - 64px);
	padding-bottom: 10px;
	/* border-bottom: 1px solid #d8d8d8; */
	padding-right: 100px;
}

.sharaholder-us-title {
	font-size: 18px;
	color: #000000;
}

	.sharaholder-us-title a {
		font-size: 18px;
		color: #000000;
	}

.sharaholder-us-date {
	font-size: 13px;
	color: #bfbfbf;
}

.fls {
	list-style: none
}

.fls {
	line-height: 20px
}

	.fls li {
		margin: 10px 0px
	}

.sharaholder-us-down {
	position: absolute;
	height: 28px;
	top: 10px;
	right: 0;
}

	.sharaholder-us-down a {
		cursor: pointer;
		width: 95px;
		font-size: 14px;
		border: 1px solid #e7bf3f;
		line-height: 28px;
		text-align: center;
		color: #e7bf3f;
		border-radius: 6px;
		height: 28px;
		display: block;
	}

.sharaholder-us-items {
	border-bottom: 1px solid #09b89d;
	padding-bottom: 10px;
	float: left;
	margin-bottom: 10px;
	width: 100%;
}

.post-content1 h1 {
	font-size: 26px;
	line-height: 1.5em;
	font-weight: 500;
	padding-bottom: 0;
	text-align: left;
}

.sharaholder-us-down1 {
	margin-top: 15px;
}

	.sharaholder-us-down1 a {
		cursor: pointer;
		width: 140px;
		font-size: 24px;
		border: 1px solid #e7bf3f;
		line-height: 40px;
		text-align: center;
		color: #e7bf3f;
		border-radius: 6px;
		height: 40px;
		display: block;
	}

.project-file {
	display: block;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	word-spacing: 2px;
	letter-spacing: 1px;
	color: #009f9f;
	background: #f2f2f2;
	padding: 5px 15px 5px 15px;
	font-family: vnt-header !important;
}

.chkhac .item {
}

	.chkhac .item a {
		font-size: 16px;
		color: #000000;
	}

.nav-dropdown-has-border .nav-dropdown {
	padding: 5px;
}

.item-relate .wap-x25 .img {
}

	.item-relate .wap-x25 .img img {
	}

.pageBreamBox a {
	color: #000;
}

@media(max-width:549px) {
	.banner-gt .text-box h3 {
		font-size: 20px;
	}

	.item-relate .wap-x25 {
		width: 100% !important;
	}

		.item-relate .wap-x25 .img {
			margin-bottom: 10px;
		}

	.sharaholder-us-down {
		position: relative;
	}

	.sharaholder-us-content {
		padding-right: 0;
	}

	.chkhac {
		margin-bottom: 30px;
	}
}