/*
Theme Name: VinaWebsite.VN
Description: Templates develop by vinahost.vn
Author: VINAHOST.VN
Template: flatsome
Support: website@vinahost.vn
Version: 1.0
*/


/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	#scrollspy-project{
		display: none;
	}

}

body, h1, h2, h3, h4, h5, h6, p {
	 font-family: Arial !important;
}
 b, strong {
	 font-weight: bold;
}
 #masthead .nav >li >a {
	 line-height: 16px;
	 text-transform: uppercase;
	 font-size: 17px;
	 font-weight: normal;
	 font-style: normal;
	 display: block;
}
 #masthead .nav >li.current-menu-item a {
	 color: #4d9907;
}
 #masthead .nav-dropdown {
	 padding: 0;
	 border: none;
}
 #masthead .nav-dropdown li a {
	 color: #1d2bea;
	 text-transform: none;
	 font-size: 16px;
	 border-bottom: 1px dashed #ccc;
}
 #masthead .nav-dropdown li a:hover {
	 color: #639a11;
}
 #footer {
	 z-index: 1;
}
 .title-box-pro-home {
	 overflow: hidden;
	 margin-bottom: 5px;
	 border-bottom: solid 2px #333;
	 height: 36px;
}
 .title-box-pro-home .h-title {
	 float: left;
	 background: #fe8f23;
	 color: #fff;
	 font-size: 1.2em;
	 line-height: 34px;
	 padding: 0 15px;
	 position: relative;
	 padding-right: 8px;
}
 .title-box-pro-home .h-title:after {
	 content: '';
	 display: block;
	 position: absolute;
	 border: solid 34px transparent;
	 border-left-color: #fe8f23;
	 right: -68px;
	 top: 0;
}
 .row-duan .slider-nav-reveal .flickity-prev-next-button:hover, .row-duan .slider-nav-reveal .flickity-prev-next-button {
	 background-color: transparent !important;
	 box-shadow: none !important;
}
 .row-duan .attr-area {
	 position: absolute;
	 top: 0;
	 right: 0;
	 padding: 2px 10px;
	 background: rgba(234,169,39,0.8);
	 line-height: 24px;
	 color: #fff;
	 font-size: 14px;
	 font-weight: 700;
	 text-transform: uppercase;
	 z-index: 2;
	 display: block;
}
 .row-duan .icon_web {
	 background-image: url(assets/images/icon_web.png);
	 background-repeat: no-repeat;
	 position: relative;
}
 .row-duan .icon_date {
	 display: inline-block;
	 width: 12px;
	 height: 12px;
	 background-position: 0 -104px;
	 margin-right: 5px;
	 top: 1px;
}
 .row-duan .icon_vt {
	 display: inline-block;
	 width: 12px;
	 height: 12px;
	 background-position: 0 -128px;
	 margin-right: 5px;
	 top: 1px;
}
 .row-duan .icon_dt {
	 display: inline-block;
	 width: 12px;
	 height: 12px;
	 background-position: 0 -116px;
	 margin-right: 5px;
	 top: 1px;
}
 .row-duan .icon_ncvcoin2 {
	 width: 16px;
	 height: 16px;
	 display: inline-block;
	 background-position: -2px -324px;
	 margin-right: 5px;
	 top: 3px;
}
 .row-duan .box-meta {
	 background: url(assets/images/bg-home.jpg);
	 color: #fff;
	 font-size: 13px;
	 padding: 4px 8px;
}
 .row-duan .box-meta .vi_tri {
	 overflow: hidden;
	 text-overflow: ellipsis;
	 white-space: nowrap;
}
 .row-duan .box-shade .box-text {
	 position: relative;
	 padding: 2px;
	 font-size: 0.8em;
	 height: 46px;
	 text-align: center;
}
 .row-duan .box-image .image-zoom:after {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 border-top: 2px solid #fff;
	 border-bottom: 2px solid #fff;
	 content: '';
	 opacity: 0;
	 -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	 transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	 -webkit-transform-origin: 50% 50%;
	 transform-origin: 50% 50%;
	 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	 transition: opacity 0.35s, transform 0.35s;
	 z-index: 3;
}
 .row-duan .box.box-shade:hover .box-image .image-zoom:after {
	 opacity: 1;
	 -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	 transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}
 .row-duan .box.box-shade .box-image .image-zoom .ie-view-more {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 font-size: 24px;
	 transform: translateY(-50%) translateX(-50%);
	 -webkit-transform: translateY(-50%) translateX(-50%) translate3d(0,10px,0);
	 -moz-transform: translateY(-50%) translateX(-50%) translate3d(0,10px,0);
	 -o-transform: translateY(-50%) translateX(-50%) translate3d(0,10px,0);
	 color: white;
	 z-index: 4;
	 max-width: 0;
	 overflow: hidden;
	 text-overflow: hidden;
	 white-space: nowrap;
	 transition: max-width 0.3s;
	 text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
 .row-duan .box.box-shade:hover .box-image .image-zoom .ie-view-more {
	 max-width: 150px;
}
 #block_widget-3 .box-meta, #block_widget-3 .shade, #block_widget-3 .ie-view-more, #block_widget-4 .box-meta, #block_widget-4 .shade, #block_widget-4 .ie-view-more {
	 display: none;
}
 #block_widget-3 .image-zoom:after, #block_widget-4 .image-zoom:after {
	 position: relative;
}
 #block_widget-3 .price, #block_widget-4 .price {
	 display: none;
}
 #block_widget-3 .box-text, #block_widget-4 .box-text {
	 padding-top: 0;
	 padding-left: 15px;
	 vertical-align: top;
	 text-align: left;
}
 #block_widget-3 .box-text h5, #block_widget-4 .box-text h5 {
	 font-size: 1em;
	 font-weight: 100;
	 color: #000;
}
 .nav-project {
	 position: fixed;
	 z-index: 99;
	 top: 313px;
	 left: 1rem;
	 margin-top: -12rem;
	 background: #ccc;
	 width: 80px;
}
 .widget-title strong {
	 font-size: 0.9em;
}
 .active-fixed2 {
	 display: none;
}
 #footer {
	 z-index: 999999999999999999;
}
 .nav-project .nav-item {
	 margin-top: 1px !important;
	 margin-left: 0px;
	 width: 100%;
}
 .nav-project .nav-link {
	 background: #ccc;
	 color: #000;
	 display: block;
	 padding: 0.5rem 0.375rem;
	 font-size: 0.65em;
	 font-weight: bold;
	 text-align: center;
	 text-transform: uppercase;
	 -webkit-border-radius: 0;
	 -moz-border-radius: 0;
	 border-radius: 0;
}
 .nav-project .nav-link:hover, .nav-project .nav-link:focus {
	 background: #e99b07;
	 color: #fff;
}
 .nav-project li.active .nav-link, .nav-project li.active:hover .nav-link, .nav-project li.active:focus .nav-link {
	 background: #e99b07;
	 color: #fff;
}
 .nav-project .icon, .nav-project .name {
	 display: block;
}
 .nav-project .icon .fa {
	 font-size: 1.25rem;
}
 p.title-content {
	 background: #e99b07;
	 text-align: center;
	 padding: 6px;
	 border-radius: 4px;
	 width: 40%;
	 margin-top: 10px;
	 margin-bottom: 10px;
	 color: #fff;
	 font-size: 1.2em;
}
 #footer .footer-2 .widget .widget-title {
	 display: block;
	 color: #fff;
	 background: #fe8f23;
	 margin: 0;
	 height: 48px;
	 line-height: 48px;
	 font-size: 14px;
	 margin-bottom: 16px;
}
 #footer .footer-2 .widget .widget-title:before {
	 font: normal normal normal 14px/1 FontAwesome;
	 display: inline-block;
	 color: #083044;
	 background: #ffe992;
	 width: 48px;
	 height: 48px;
	 float: left;
	 text-align: center;
	 line-height: 48px;
	 font-size: 24px;
	 margin-right: 8px;
}
 #footer .footer-2 .widget:nth-child(1) .widget-title:before {
	 content: "\f007";
}
 #footer .footer-2 .widget:nth-child(2) .widget-title:before {
	 content: "\f044";
}
 #footer .footer-2 .widget:nth-child(4) .widget-title:before {
	 content: "\f09a";
}
 #footer .footer-2 .widget:nth-child(3) .widget-title:before {
	 content: "\f200";
}
 #footer .footer-2 .widget .textwidget {
	 font-size: 14px;
}
 #footer .footer-2 .is-divider {
	 display: none;
}
 #footer .footer-2 .fa-ul {
	 margin-left: 2.14286em !important;
	 font-size: 13px;
}
 .absolute-footer .copyright-footer {
	 color: #fff;
}
 .fix_tel {
	 position: fixed;
	 bottom: 15px;
	 right: 150px;
	 z-index: 999999999999;
}
 .fix_tel a {
	 text-decoration: none;
}
 .tel {
	 background: #eee;
	 width: 205px;
	 height: 40px;
	 position: relative;
	 overflow: hidden;
	 background-size: 40px;
	 border-radius: 28px;
	 border: solid 1px #ccc;
}
 .bor-left, .bor-top, .bor-right, .bor-bottom {
	 position: absolute;
	 background-color: #EDCB67;
	 -webkit-transition: all 5s ease-in-out;
	 -moz-transition: all 5s ease-in-out;
	 transition: all 5s ease-in-out;
}
 .bor-left {
	 height: 50%;
	 width: 3px;
	 left: 0;
	 bottom: -100%;
	 animation: transtop 5s ease-in-out infinite;
}
 .bor-right {
	 height: 50%;
	 right: 0;
	 top: -100%;
	 width: 3px;
	 animation: transbot 5s ease-in-out infinite;
}
 .bor-top {
	 width: 50%;
	 left: -100%;
	 top: 0;
	 height: 3px;
	 animation: transleft 5s ease-in-out infinite;
}
 .bor-bottom {
	 width: 50%;
	 height: 3px;
	 right: -100%;
	 bottom: 0;
	 animation: transright 5s ease-in-out infinite;
}
 .fone {
	 font-size: 22px;
	 color: #f00;
	 line-height: 42px;
	 font-weight: bold;
	 padding-left: 45px;
}
 .fone a {
	 color: #f00;
}
 .ring-alo-phone {
	 background-color: transparent;
	 cursor: pointer;
	 height: 80px;
	 position: absolute;
	 transition: visibility 0.5s ease 0s;
	 visibility: hidden;
	 width: 80px;
	 z-index: 200000 !important;
	 right: 150px;
	 top: -26px;
}
 .ring-alo-phone.ring-alo-show {
	 visibility: visible;
}
 .ring-alo-phone.ring-alo-hover, .ring-alo-phone:hover {
	 opacity: 1;
}
 .ring-alo-ph-circle {
	 animation: 1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;
	 background-color: transparent;
	 border: 2px solid rgba(30,30,30,0.4);
	 border-radius: 100%;
	 height: 70px;
	 left: 10px;
	 opacity: 0.1;
	 position: absolute;
	 top: 10px;
	 transform-origin: 50% 50% 0;
	 transition: all 0.5s ease 0s;
	 width: 70px;
}
 .ring-alo-phone.ring-alo-active .ring-alo-ph-circle {
	 animation: 1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}
 .ring-alo-phone.ring-alo-static .ring-alo-ph-circle {
	 animation: 2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}
 .ring-alo-phone.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone:hover .ring-alo-ph-circle {
	 border-color: #f00;
	 opacity: 0.5;
}
 .ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle {
	 border-color: #baf5a7;
	 opacity: 0.5;
}
 .ring-alo-phone.ring-alo-green .ring-alo-ph-circle {
	 border-color: #f00;
	 opacity: 0.5;
}
 .ring-alo-ph-circle-fill {
	 animation: 2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;
	 background-color: #000;
	 border: 2px solid transparent;
	 border-radius: 100%;
	 height: 30px;
	 left: 30px;
	 opacity: 0.1;
	 position: absolute;
	 top: 30px;
	 transform-origin: 50% 50% 0;
	 transition: all 0.5s ease 0s;
	 width: 30px;
}
 .ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone:hover .ring-alo-ph-circle-fill {
	 background-color: rgba(0,175,242,0.5);
	 opacity: 0.75 !important;
}
 .ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill {
	 background-color: rgba(117,235,80,0.5);
	 opacity: 0.75 !important;
}
 .ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill {
	 background-color: rgba(0,175,242,0.5);
	 opacity: 0.75 !important;
}
 .ring-alo-ph-img-circle {
	 animation: 1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;
	 border: 2px solid transparent;
	 border-radius: 100%;
	 height: 30px;
	 left: 30px;
	 opacity: 1;
	 position: absolute;
	 top: 30px;
	 transform-origin: 50% 50% 0;
	 width: 30px;
}
 .ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone:hover .ring-alo-ph-img-circle {
	 background-color: #f00;
}
 .ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle {
	 background-color: #75eb50;
}
 .ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle {
	 background-color: #f00;
}
 @keyframes ring-alo-circle-anim {
	 0% {
		 opacity: 0.1;
		 transform: rotate(0deg) scale(0.5) skew(1deg);
	}
	 30% {
		 opacity: 0.5;
		 transform: rotate(0deg) scale(0.7) skew(1deg);
	}
	 100% {
		 opacity: 0.6;
		 transform: rotate(0deg) scale(1) skew(1deg);
	}
}
 @keyframes ring-alo-circle-img-anim {
	 0% {
		 transform: rotate(0deg) scale(1) skew(1deg);
	}
	 10% {
		 transform: rotate(-25deg) scale(1) skew(1deg);
	}
	 20% {
		 transform: rotate(25deg) scale(1) skew(1deg);
	}
	 30% {
		 transform: rotate(-25deg) scale(1) skew(1deg);
	}
	 40% {
		 transform: rotate(25deg) scale(1) skew(1deg);
	}
	 50% {
		 transform: rotate(0deg) scale(1) skew(1deg);
	}
	 100% {
		 transform: rotate(0deg) scale(1) skew(1deg);
	}
}
 @keyframes ring-alo-circle-fill-anim {
	 0% {
		 opacity: 0.2;
		 transform: rotate(0deg) scale(0.7) skew(1deg);
	}
	 50% {
		 opacity: 0.2;
		 transform: rotate(0deg) scale(1) skew(1deg);
	}
	 100% {
		 opacity: 0.2;
		 transform: rotate(0deg) scale(0.7) skew(1deg);
	}
}
 .ring-alo-ph-img-circle a img {
	 padding: 1px 0 0 1px;
	 width: 25px;
}
 #footer {
	 z-index: 1 !important;
}