/*-------------------Begin mobile--------------------*/
.taskbar-m .lang-vina {float: right;padding: 12px 0;margin-left: 10px;}

.taskbar-m {background: #ff0307; position: absolute; top: 0; left: 0; width: 100%; z-index: 999;}
.padding-m {padding-top: 45px;}
.taskbar-m>span {float: left; background: rgb(37 116 57); display: block; margin: 5px; position: relative;}
.taskbar-m>span:hover {background: rgb(37 116 57);}
.taskbar-m>span i {color: white; position: absolute; top: 0; left: 0; width: 35px; line-height: 35px; text-align: center; font-size: 24px; z-index: 1;}
.taskbar-m>span:hover i {color: #fff;}
.taskbar-m>span .fa-times {display:none;}
.taskbar-m .btn-m {padding: 35px 35px 0 0; background: transparent; position: relative; z-index: 2; outline: none;}
.taskbar-m form {float: right; padding: 8px;}
.taskbar-m form button {display: inline-block; width: 28px; background: #aaa; float: left; background: transparent; color: #777; outline: none;}
.taskbar-m form button i {line-height: 29px;color: #fff;}
.taskbar-m form input[type="text"] {height: 29px; float: left; text-indent: 5px; font-size: 13px; width: 0; background: #fff; color: #000; outline: none;
	transition: all .2s;
	-webkit-transition: all .2s;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.taskbar-m form input::placeholder {color: #000;}

.taskbar-m .phone {line-height: 40px;padding: 4px 0; width: 175px; overflow: hidden;float: right;margin: 0;}
.taskbar-m .phone>a {font-size: 20px;text-decoration: none;color: #fff;position: absolute;line-height: 40px;}
.taskbar-m .phone>span .fa-stack-2x {color: #fff;}
.taskbar-m .phone>span .fa-stack-1x {color: #ff0307;}

.wrapper-m {transform: translate3d(260px,0,0); -webkit-transform: translate3d(260px,0,0);}
.animate {transition: all .5s; -webkit-transition: all .5s;}
.menu-m {background: rgba(255,3,7,.4);; color: #5e2c2b; width: 260px; position: absolute; top: 0; left: 0; height: 100%; border-right: 1px solid #444;
	transform: translate3d(-100%,0,0);
	-webkit-transform: translate3d(-100%,0,0);
	-ms-transform: translate3d(-100%,0,0);
}
.menu-m a {color: #5e2c2b; text-decoration: none;}
.menu-m li:hover > a {color: #fff;}
.menu-m > ul > li {border-bottom: 1px solid #efebeb; position: relative;}
.menu-m ul li a {display: block; padding: 0 15px;}
.menu-m > ul > li > a {line-height: 40px;}
.menu-m > ul > li > span::before {content: "+"; font-size: 16px; width: 40px; text-align: center; position: absolute; top: 0; right: 0; line-height: 40px; color: #fff; cursor: pointer;}
.menu-m ul li ul {display: none;}
.menu-m ul li ul li {border-top: 1px solid #444;}
.menu-m ul li ul li a {line-height: 32px; position: relative; padding-left: 35px; color: #fff;}
.menu-m ul li ul li a i {font-size: 12px; position: absolute; top: 0; left: 20px; line-height: 32px;}

/*-------------------End mobile--------------------*/

/*-------------------New CSS--------------------*/
/*Trên menu*/
.top_page {color: #000;}
.top_page .welcome {line-height: 40px;}
.top_page .right>div , .top_page .phone {float: right;}
.top_page .right>div>a {color: #000;}
.top_page .right>div>a i{border-left: 1px solid #e1e8ec;font-size: 18px;
    width: 40px;text-align: center;top: 10px; line-height: 40px;}
.top_page .right>div>a i:hover {color:#ff0307;}

.top_page .phone {line-height: 40px; background: #ff0307; padding: 0 10px;}
.top_page .phone a {font-size: 18px; text-decoration: none; color: #fff; font-weight: bold;}

/*header*/
.header {background: #f2f2f2; /*height: 100px;*/}
.header .logo>a {float:left;padding: 12px 0;}
.header .logo>a>img {width: 140px;margin-right: 10px;}
.header .logo h1 {font-size: 21px; font-family: "UTM HelvetIns",sans-serif; text-transform: uppercase;
	margin: 25px 0 5px 0;}
.header .logo h2 {font-size: 14px;}

.header .right>ul {width: 200px; float: right;margin-top: 25px;}
.header .right>ul>span {width: 50px; height: 50px; float:left;}
.header .right>ul>span .fa-stack-2x {font-size: 50px;}
.header .right>ul>span .fa-stack-1x {line-height: 50px;}
.header .right>ul>span i {color: #5e2c2b;}
.header .right>ul>span i:hover {color: #ff0307;}
.header .right>ul>li {margin-top: 5px;}
.header .right>ul>li a {color: #000; text-decoration: none;}
.header .right>ul>li a:hover {color: #ff0307;}

/*menu_top*/
.menu_top {background: #ff0307;}
.menu_top .search {
    padding-right: 0;
    float: right;
    padding-top: 8px;
}
.menu_top .menu {padding: 0;}
.menu>ul>li>a {padding: 0 18px;}

.menu_top.menu_fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;}


/*dịch vụ*/
.dichvu {padding: 50px 0;text-align: center;color: #000;}
.dichvu h2 {font-size :29px;margin-bottom: 20px;}

/*Box link - box1*/
.box1 {background: #f2f2f2; padding: 30px 0;}
.box1 .container-vina>.title {font-size: 28px; font-family: Arial,sans-serif; text-align: center; margin-bottom: 30px;}
.box1 .container-vina>.brief {font-family: OpenSans Regular,sans-serif; text-align: center; margin: 10px 0 40px 0;}

.box1 .row>.link {margin-bottom: 20px;}
.box1 .row>.link:nth-child(4n+1) {padding-right:12px;}
.box1 .row>.link:nth-child(4n+2) {padding: 0 8px 0 4px;}
.box1 .row>.link:nth-child(4n+3) {padding: 0 4px 0 8px;}
.box1 .row>.link:nth-child(4n+4) {padding-left:12px;}

.box1 .row .anh {margin-bottom: 25px;}
.box1 .row .anh img{width: 100%;}
.box1 .row .anh figure {position: relative;margin: 0;}
.box1 .row .anh figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;}
.box1 .row .anh figure:hover::before {-webkit-animation: circle .75s;animation: circle .75s;}
@-webkit-keyframes circle {	0% {opacity: 1;	}	40% {opacity: 1;}	100% {width: 200%;height: 200%;	opacity: 0;	}}
@keyframes circle {	0% {opacity: 1;	}	40% {opacity: 1;}  100% {width: 200%;height: 200%;opacity: 0;}}

.box1 .row .content .ten {font-size: 18px;font-family: Arial,sans-serif; text-decoration: none;
color: #000; padding: 20px 0;0}
.box1 .row .content .ten:hover {color: #ff0307;}
.box1 .row .content .desc {margin: 20px 0;height: 60px;overflow: hidden;}
.box1 .row .content .them {text-decoration: none; color: #fff; background: #eb3a03; padding: 8px 22px; border-radius: 3px;}
/*.box1 .row .content .them:hover {background: #ff0307;}*/

.box1 .row .content .them {
	z-index: 1;
	position: relative;
	overflow: hidden;
	letter-spacing: .08em;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;}
.box1 .row .content .them:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	-moz-transition: all 0.75s ease 0s;
	-o-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;}
.box1 .row .content .them:hover {
	color: #FFF;
	text-shadow: none;}
.box1 .row .content .them:hover:after {
	height: 450%;}

.box1 .row .content .them.ex4:after {
	background: #ff0307;
	opacity: .5;
	-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	transform: translateY(-50%) translateX(-50%) rotate(90deg);}
.box1 .row .content .them.ex4:hover:after {
	opacity: 1;
	height: 600% !important;}

/*Box album - box2*/
.box2 {padding: 40px 0; background: #ff0307;}
.box2 .trai>h2 {color: #fff; font-size: 26px;}
.box2 .trai>p {font-size: 16px;color: #fff; padding-top: 10px;}

.box2 .phai>div {float: right;background: #fff;padding: 10px;border-radius: 3px;}
.box2 .phai>div img {margin-right: 10px;}
.box2 .phai>div a {font-size: 18px; font-weight: bold; color: #000; text-decoration: none;}
.box2 .phai>div a:hover {font-size: 20px;}

/*Box icon - box3*/
.box3 {padding: 50px 0;}
.box3 .home_news .big-item {margin-bottom: 50px;}
.box3 .home_news .big-item , .box3 .home_news .item {padding-right: 20px;}
.box3 .home_news .big-item dl dt {width:45%; margin-right: 5%; float: left;}
.box3 .home_news .big-item dl dd {width: 50%; float: left;}
.box3 .home_news .big-item dl dt img {width: 100%;}
.box3 .cot h3.title {font-size: 20px; margin-bottom: 30px; font-weight: bold;}

.box3 .home_news .big-item dl dd h3 , .box3 .home_news .item dl dd h3 {margin-bottom: 15px;}
.box3 .home_news .big-item dl dd h3 a , .box3 .home_news .item dl dd h3 a {font-size: 14px; font-weight: bold; text-decoration: none; color: #000;line-height: 20px;}
.box3 .home_news .big-item dl dd h3 a:hover , .box3 .home_news .item dl dd h3 a:hover {color: #ff0307;}

.box3 .home_news .big-item dl dt figure {background: rgba(255,3,7,.3);margin: 0;}
.box3 .home_news .big-item dl dt figure img {opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;}
.box3 .home_news .big-item dl dt figure:hover img {opacity: .5;}

.box3 .home_news .item dl dt {width: 40px; float: left; text-align: center; background: #f2f2f2;}
.box3 .home_news .item dl dt .day {font-weight: bold;}
.box3 .home_news .item dl dt .month {text-transform: uppercase;}
.box3 .home_news .item dl dt span {line-height:40px; }
.box3 .home_news .item dl dd {width: calc(100% - 60px);float: left;padding-left: 20px;}

.box3 .cot2 {padding-right: 20px;}
.box3 .cot2 div a {display: block;float: left;width: 48%;margin-right: 4%;margin-bottom: 10px;position: relative;}
.box3 .cot2 div a:nth-child(2n+2) {margin-right: 0;}
.box3 .cot2 div a img {width: 100%; height: 90px;}

.box3 .cot2 div a::before {position: absolute;top: 0;	left: -50%;z-index: 2;	display: block;	content: '';width: 50%;	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);}
.box3 .cot2 div a:hover::before {	-webkit-animation: shine .75s;	animation: shine .75s;}
@-webkit-keyframes shine {	100% {left: 125%;}}
@keyframes shine {	100% {	left: 125%;	}}

.box3 .cot3 .company {font-size: 14px; font-weight: bold; color: #000;line-height: 20px;margin-bottom: 20px;}
.box3 .cot3 > p{line-height: 20px; margin-bottom: 20px; transition: all .3s; -webkit-transition: all .3s;}













/*footer*/
.footer {color: #fff;}
.footer .item h3 {margin-bottom: 40px; font-size: 20px; font-family: UTMNeoSansIntel Bold,sans-serif;}
.footer .contact_footer {padding-right: 10px;}
.footer .menu_footer {padding: 0 10px;}
.footer .lienket_footer {padding-left: 10px;}

.footer .contact_footer>p {font-family: 'OpenSans Regular', sans-serif; font-size: 14px;}
.footer .contact_footer>p i {width: 16px; margin-right: 5px;}
.footer .contact_footer>p.phone i {margin-left: -5px;}

.footer .menu_footer ul li>a {font-family: OpenSans Regular,sans-serif; color: #fff;}
.footer .menu_footer ul li {border-bottom: 1px solid #b6444d; margin-bottom: 10px; padding-bottom: 10px;}
.footer .menu_footer ul li:last-child {border: none;}

.footer .lienket_footer .network_box {padding-bottom: 10px; border-bottom: 1px solid #b6444d; margin-bottom: 20px;}
.network_box a{margin-right: 10px;}
.network_box a i {font-size: 16px; width: 32px; line-height: 32px; text-align: center; color: #fff;}
.network_box a:nth-child(1) i {background: #4d6fa9;}
.network_box a:nth-child(2) i {background: #dc472e;}
.network_box a:nth-child(3) i {background: #50abf1;}
.network_box a:hover i {color: #000;}

/*Các trang bên trong*/

.support_box dt span {font-size: 18px; font-weight: bold;}
.support_box dl a {color: #ff0307; text-decoration: none; font-size: 16px;}
.support_box dl a:hover {color: #5e2c2b;}

/* Các kích thước màn hình */
@media screen and (max-width: 1200px) and (min-width: 992px) {
	.flexslider .slides>li .more_div {top: 0px !important;}
}

@media screen and (max-width: 991px) {
	.flexslider .slides>li .more_div {display:none;}
	.box1 .container-vina>.title {margin-bottom: 15px;}
}

@media screen and (max-width: 767px) {
	.header .logo>a {float: none;}
	.header .logo {text-align: center;}
	.header .logo h1 {margin-top:15px;}
	.header .logo h2 {margin-bottom:10px;}

	.dichvu p {padding: 0 10px;}
	
	.box1 , .box2 , .footer {padding: 10px;}
	.box1 .row>.link {padding: 0 !important;}
	.box1 .row>.link .content {margin-bottom: 10px;}

	.box2 {text-align: center; padding: 30px 10px;}
	.box2 .phai>div {float: none; margin-top: 30px;}

	.box3 {padding: 40px 10px 40px 10px;}
	.box3 .home_news .big-item {padding: 0; margin-bottom: 20px;}
	.box3 .cot1 , .box3 .cot2 {margin-bottom: 20px;}
	.box3 .cot2 {padding: 0}

	.footer .row .item {padding: 0 !important; margin-bottom: 20px;}
	.footer .item h3 {margin-bottom: 20px;}	

	.navbar-vina strong {font-size: 16px !important;}
	.navbar-vina p a {font-size: 14px !important;}

	.bottom_page .item {text-align: center;}
	.bottom_page .item2 p {float: none !important;}

	.menuleft_box , .news_box , .gallery_box{display:none;}
	.support_box>div {display: block !important;}

	.navbar-vina {position: relative !important;}
}

@media screen and (max-width: 991px) and (min-width: 768px) {
	.menu_top form input {width: 130px !important;}
	.header .logo {text-align: center;}
	.slider_box .more_div {top: 0 !important;left: 700px !important;}

	.box1 , .box2 , .box3 , .box4 , .box5 , .footer {padding: 15px;}

	.box1 .row>.link:nth-child(2n+1) {padding: 0 10px 0 0;}
	.box1 .row>.link:nth-child(2n) {padding: 0 0 0 10px;}
	.box1 .row>.link .content {margin-bottom: 10px;}

	.footer .row .item:nth-child(2n+1) {padding: 0 10px 0 0;}
	.footer .row .item:nth-child(2n) {padding: 0 0 0 10px;}

	.bottom_page .item p {padding-left: 15px !important;}
	.bottom_page .item2 p {padding-right: 15px !important;}
}

@media screen and (max-width: 767px) and (min-width: 400px) {
	.box1 .row>.link {width: 50%;}
	.box1 .row>.link:nth-child(2n+1) {padding: 0 5px 0 0 !important;}
	.box1 .row>.link:nth-child(2n) {padding: 0 0 0 5px !important;}

	.box3 .cot2 , .box3 .cot3 {width: 50%;}
	.box3 .cot2 {padding-right: 5px;}
	.box3 .cot3 {padding-left: 5px;}
 
	.list_news .big-item dl dt {width: 50%;float: left; padding-right: 5px;}
	.list_news .big-item dl dd {width: 50%;float: left; padding-left: 5px;}

	.list_news .item dl dt {width: 50%;float: left; padding-right: 5px;}
	.list_news .item dl dd {width: 50%;float: left; padding-left: 5px;}

	.list_news dl dt a {height: 180px !important;}

	.list_news dl dd h3 {padding-top: 0;}
}

@media screen and (max-width: 560px) {
	.contact_page .item {width: 100%; padding:0 !important;}
	.contact_page .detail_contact {padding-top: 30px !important;}
}

/*-------------------End new CSS--------------------*/

body {font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; overflow-x: hidden;}
.container-vina {max-width: 960px; margin: 0 auto;}
.container-fluid {padding: 0;}
.row {margin: 0;}
.row>div {padding: 0;}
a {transition: all .3s; -webkit-transition: all .3s;}

@media screen and (max-width: 767px) {
	.top_page {text-align: center;}
}
.top_page div span {display: inline-block;}
@media screen and (max-width: 767px) {
	.top_page div span {margin: 7px 5px;}
}
.top_page div span a {/* color: #fff; */ text-decoration: none;}
.top_page div span i {line-height: 26px; width: 28px; border: 1px solid #fff; text-align: center;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}
.lang-vina {padding: 10px 0; position: relative;}
.lang-vina a {display: inline-block; margin: 0 2px; line-height: 20px; color: #fff; text-decoration: none;}
@media screen and (max-width: 767px) {
	.lang-vina {text-align: center;}
}
@media screen and (min-width: 768px) {
	.lang-vina {float: right;}
	.lang-vina a {float: left;}
}


.header {position: relative; z-index: 10;}
.header>a img {max-width: 100%;}

.menu_top div {
    margin-top: 3px;
    margin-bottom:3px;
    position: relative;
}
.menu_top div input {
    width: 160px;
    line-height: 32px;
    text-indent: 10px;
    outline: none;
    position: absolute;
    top: 0;
    right: 32px;
    border: 1px solid #ddd;
    border-right: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.menu_top div:hover input {width: 200px; border-color: #ddd;}
.menu_top div button {
	float: left;
	width: 32px;
	text-align: center;
	background: transparent;
	outline: none;
	border: 1px solid #ddd;
	border-left: 0;
	transition: all .3s;
	-webkit-transition: all .3s;
}
.menu_top div:hover button {border-color: #ddd;}
.menu_top div button i {color: #545454; line-height: 32px; font-size: 16px;}

.menu {position: relative;}
.menu>ul {/*float: right;*/
	font-family: 'Arial', sans-serif;
	display: inline-flex;
	display: -webkit-inline-box;
	justify-content: center;
}
.menu>ul>li {position: relative;
	-webkit-flex-grow: 1;
    flex-grow: 1;
}
.menu>ul>li:first-child {margin-left: 0;}
.menu>ul>li ul {
	background: rgba(0,114,187,.9);
	width: 300px;
	position: absolute;
	top: 115px;
	left: 0;
	display: none;
	font-size: 15px;
	z-index: 9999999;
}
.menu>ul>li:hover ul {display: block;}
.menu>ul>li ul li a {
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
	color: #fff;
	border-top: 1px solid rgba(255,255,255,.3);
}
.menu>ul>li ul li:first-child a {border-top: 1px solid rgba(255,255,255,.3);}
.menu>ul>li ul li:hover a {background: rgba(0,0,0,.2);}
.menu>ul>li>a>i.fa-home {line-height: 95px; padding: 0 13px;}
.menu>ul>li>a {
	display: block;
	line-height: 38px;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	/*border-bottom: 4px solid transparent;*/
	text-align: center;
}
.menu>ul>li:hover>a,
.menu ul>li.active>a {}
.menu>ul>li:hover>a {}

@media screen and (max-width: 1199px) and (min-width: 768px;) {
	.about_home {margin-bottom: 20px;}
	.box1 {padding: 20px;}
}

.title_home {
	color: #db0000;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 32px;
	font-weight: bold;
	position: relative;
	padding-left: 50px;
	line-height: 45px;
	text-transform: uppercase;
}
.title_home a {position: relative; display: inline-block; color: #fff; text-decoration: none; padding-left: 50px;}
.three_line {
	position: absolute;
	top: 8px; left: 0;
}
.three_line em {display: block; border-bottom: 2px solid #222; width: 30px; margin: 5px 0;}
.three_line em:nth-child(3n+2) {border-color: #e72f27; width: 35px}
.three_line.white em {border-color: #fff;}

@media screen and (min-width: 992px) {
	.row .about_home {padding-right: 20px;}
}
.about_home > div {line-height: 24px; margin: 20px 0;}
.about_home > div ul {margin: 10px 0 0;}
.about_home > div li {margin: 5px 0; padding-left: 20px; position: relative;}
.about_home > div li:before {
	content: "\f046";
	position: absolute; top: 0; left: 0;
	font-family: Fontawesome;
	color: #f33e43;
	margin-right: 5px;
	font-size: 16px;
}

@media screen and (min-width: 992px) {
	.row .about_img {padding-left: 20px;}
}
.about_img a {overflow: hidden; display: block;}
.about_img a img {max-width: 100%;
	transition: all .4s ease-in;
	-webkit-transition: all .4s ease-in;
	-moz-transition: all .4s ease-in;
}
.about_img a img:hover {
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
}

.cat_home .title_home {color: #fff;}
.cat_home>div {padding: 40px 0; /*background: rgba(0,0,0,.7);*/}
.cat_home>div .item {/*margin-top: 40px;*/}

.cat_home>div .item>a {display: block; position: relative; overflow: hidden;}
.cat_home>div .item>a img {width: 100%;
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
}
.cat_home>div .item>a:hover img {
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
}
.cat_home>div .item a>div {
	position: absolute;
	top: calc(100% - 80px);
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 14px;
	transition: all .4s ease-in;
	-webkit-transition: all .4s ease-in;
}
.cat_home>div .item a:hover>div {top: 0; background: rgba(0, 114, 187, .9);}
.cat_home>div .item a>div span {
	line-height: 80px;
	padding: 0 20px;
	display: block;
	font-size: 20px;

	background: -moz-linear-gradient(transparent, rgba(22,22,22,.8), rgba(22,22,22,.9));
	background: -webkit-gradient(transparent, rgba(22,22,22,.8), rgba(22,22,22,.9));
	background: -webkit-linear-gradient(transparent, rgba(22,22,22,.8), rgba(22,22,22,.9));
	background: -o-linear-gradient(transparent, rgba(22,22,22,.8), rgba(22,22,22,.9));
	background: -ms-linear-gradient(transparent, rgba(22,22,22,.8), rgba(22,22,22,.9));
	background: linear-gradient(transparent, rgba(22,22,22,.8), rgba(22,22,22,.9));

	transition: all .4s ease-out;
	-webkit-transition: all .4s ease-out;
}
.cat_home>div .item a:hover>div span {background: transparent;}
.cat_home>div .item a>div p {line-height: 22px; padding: 0 20px;}
.cat_home>div .item a>div i {position: absolute; bottom: 30px; right: 30px; color: #fff; font-size: 24px;}
.cat_home>div .item h2 {margin: 15px 0;}
.cat_home>div .item h2 a {font-size: 20px; color: #000; text-decoration: none;}
.cat_home>div .item h2 a:hover {color: #0072bb;}
.cat_home>div .item div {line-height: 22px; height: 220px; overflow: hidden; margin-bottom: 10px; color: #555;}

@media screen and (max-width: 1199px) {
	.news_home .container-vina {padding: 20px;}
	.project_home .container-vina {padding: 20px;}
	.cat_home .container-vina {padding: 20px;}
}
@media screen and (min-width: 1200px) {
	.news_home .container-vina {padding: 50px 0;}
}

.news_home .title_home {margin-bottom: 25px;}
@media screen and (max-width: 992px) {
	.news_home .item {margin-bottom: 20px;}
}
@media screen and (min-width: 992px) {
	.news_home .item {width: 32%; margin-left: 2%;}
}
.news_home .item:first-child {margin-left: 0;}
.news_home .item dl dt a {display: block; overflow: hidden;}
.news_home .item dl dt a img {width: 100%; height: 200px;
	transition: all .4s ease-in;
	-webkit-transition: all .4s ease-in;
}
.news_home .item dl dt a:hover img {
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
}
.news_home .item dl dd h3 {margin: 10px 0;}
.news_home .item dl dd h3 a {display: inline-block; line-height: 20px; font-size: 15px; font-weight: bold; color: #222; text-decoration: none;}
.news_home .item dl dd h3 a:hover {color: #0072bb;}
.news_home .item dl dd div {margin-bottom: 10px;}

.top_footer {margin-bottom: 20px;}
.top_footer .right_t {text-align: right;}

@media screen and (max-width: 1199px) and (min-width: 767px;) {
	.footer {padding: 20px;}
	.footer .item {margin-bottom: 20px;}
}
@media screen and (min-width: 1200px) {
	.footer {padding: 40px 0;}
}

.contact_footer p {line-height: 25px; margin-bottom: 10px;}
@media screen and (min-width: 992px) {
	/* .row>div.contact_footer {padding-right: 20px;} */
}

.menu_footer ul {float: left; width: 100%;}

.network_box a {
	display: inline-block;
	/* margin-right: 5px; */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.product_home .container-vina {border-bottom: 1px solid #e5e5e5; padding-bottom: 15px;}
.product_home li a {display: block; margin: 0 15px; height: 200px;}
.product_home li a img {width: 100%; height: 100%;}

/*------------_box---------------*/
._box > p {font-size: 16px; /*text-transform: uppercase;*/ padding: 2px 15px 0 15px; line-height: 36px; background: #ff0307 url(../images/bgft.png) -30px -20px no-repeat; color: #fff; text-shadow: 1px 1px rgba(0,0,0,.1); position: relative; z-index: 1; border-left: 10px solid #5e2c2b;}
._box > p i {margin-right: 5px;}
._box > div {padding: 10px; background: #fff; border: 1px solid #ddd; border-top: 0;}
._box {margin-bottom: 15px;}
@media screen and (max-width: 767px) {
	._box {margin-top: 5px;}
	._box > div {display: none;}
	._box:hover > div {display: block;}
}

.news_box dl dt a {display: block;}
.news_box dl dt a img {max-width: 100%;}
.news_box dl dd {background: #eee; padding: 5px;}
.news_box dl dd a {color: #444; font-size: 13px; display: inline-block; line-height: 20px;}

.menuleft_box>div>ul>li {border-top: 1px dashed #ddd; padding: 7px 0;}
.menuleft_box>div>ul>li:first-child {border-top: 0;}
.menuleft_box>div li a {line-height: 24px; display: block; color: #444; font-size: 15px; text-decoration: none;}
.menuleft_box>div li li a {font-size: 13px; color: #777; text-transform: none;}
.menuleft_box>div li a i {color: #fff;}
.menuleft_box>div li a:hover, .menuleft_box>div ul>li.active>a {color: #ff0307;}
.menuleft_box>div li a:hover i, .menuleft_box>div ul>li.active>a i {color: #ff0307;}

.subpage {padding-bottom: 15px; position: relative; margin-top: 30px;}
@media screen and (max-width: 767px) {
	.subpage {padding-left: 10px; padding-right: 10px;}
	.subbox {/* padding: 15px; */}
}
@media screen and (min-width: 768px) {
	.subpage .right {width: 75%;}
	.subpage .left {width: 25%;}
	.subbox {padding: 0 0px 0 0;}

	.subpage.product .right {width: 100%;}
	.subpage.product .subbox {padding: 0;}
}

/*--------------navbar-vina---------------*/
.slider_sub {position: relative; z-index: 9;}
.navbar-vina {
	z-index: 99;
	font-size: 15px;
	font-family: 'Roboto Condensed', sans-serif;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.navbar-vina strong {
	color: #ff0307;
	text-transform: uppercase;
	font-size: 24px;
	/*text-shadow: 3px 3px 3px rgba(0,0,0,.5);*/
}
.navbar-vina a {
	display: inline-block;
	color: #ff0307;
	margin-right: 10px;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 20px;
	/*text-shadow: 1px 1px 2px rgba(0,0,0,.5);*/
}
.navbar-vina a:hover, .navbar-vina a:last-child {color: #5e2c2b;}
.navbar-vina a+a:before {content: "|"; padding-right: 10px; color: #ff0307; font-weight: normal;}

.about_page p {line-height: 18px; margin: 10px 0;}
.about_page p img {max-width: 100% !important; height: auto !important;}

.customer_home {padding: 10px 0; background: #f3f6fb;}
.customer_home li p {padding: 0 10px;}
.customer_home li a {
	display: flex;
	display: -webkit-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 100px;
}
.customer_home li a img {max-width: 100%; max-height: 100%;}

.listproduct .item {margin-bottom: 20px; font-size: 14px;}
@media screen and (max-width: 767px) {
	.listproduct .item {width: 48%; margin-right: 4%;}
	.listproduct .item:nth-child(2n+2) {margin-right: 0;}
}
@media screen and (min-width: 768px) {
	.listproduct .item {width: 32%; margin-right: 2%;}
	.listproduct .item:nth-child(3n+3) {margin-right: 0;}
}
@media screen and (min-width: 992px) {
	.listproduct .item {width: 32%; margin-right: 2%;}
	.listproduct .item:nth-child(3n+3) {margin-right: 0;}
	.listproduct .item:nth-child(4n+4) {margin-right: 0;}

	.catpage.listproduct .item {width: 32%; margin-right: 2%;}
	.catpage.listproduct .item:nth-child(3n+3) {margin-right: 0;}
    .catpage.listproduct .item:nth-child(3n+3) {margin-right: 0;}


}

.listproduct .item dl {border: 1px solid #ddd;}
.listproduct .item dl dt {padding: 15px;}
.listproduct .item dl dt a {
	display: flex;
	display: -webkit-flex;
	
	align-items: center;
	justify-content: center;
	background: #fff;
	overflow: hidden;
}
.listproduct .item dl:hover dt a {border-color: #70b92c;}
.listproduct .item dl dt a img {max-width: 100%; max-height: 100%;
	transition: all .4s ease-in;
	-webkit-transition: all .4s ease-in;
}
.listproduct .item dl:hover dt a img {
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
}
.listproduct .item dl dd {padding-bottom: 15px;}
.listproduct .item dl dd a {
	color: #111;
	display: block;
	line-height: 20px;
	text-indent: 10px;
	height: 20px;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
        font-weight: bold;
        font-family:'UTM Swiss Condensed Bold', sans-serif;
        font-size:18PX;
}
.listproduct .item dl dd span {font-family: 'UTM Swiss Condensed Bold', sans-serif;
	}
.listproduct .item dl:hover dd a {color: #F46A8B;}

.gallery_box a {display: block; float: left; width: 31%; margin-right: 3.5%; height: 60px; margin-bottom: 10px;}
.gallery_box a:nth-child(3n+3) {margin-right: 0;}
.gallery_box a img {width: 100%; height: 100%;}

/*----------gallery----------*/
.gallery_page .i_album {position: relative; margin-bottom: 20px;}
@media screen and (min-width: 768px) {
	.gallery_page .i_album {width: 48%; margin-right: 4%;}
	.gallery_page .i_album:nth-child(2n+2) {margin-right: 0;}
}
.gallery_page .i_album a {display: block; height: 240px;}
.gallery_page .i_album a img {width: 100%; height: 100%;}
.list_album .i_album span {display: block; line-height: 18px; height: 36px; overflow: hidden; margin-top: 5px;}

.list_picture .i_album {position: relative; overflow: hidden;}
.list_picture .i_album span {
	position: absolute;
	bottom: -30px;
	line-height: 30px;
	height: 30px;
	overflow: hidden;
	text-indent: 5px;
	background: rgba(0, 0, 0, 0.6);
	width: 100%;
	color: #fff;
	transition: bottom .4s ease-in;
	-webkit-transition: bottom .4s ease-in;
}
.list_picture .i_album:hover span {	bottom: 0;}

.bottom_page {background: #323232; color: #fff; }
.bottom_page .item {padding: 0;}
.bottom_page .item p {line-height: 25px; padding: 25px 0;}
.bottom_page .item2 p {float: right;}

.project_home {padding-bottom: 40px;}
.project_home .title_home {margin-bottom: 30px;}
@media screen and (min-width: 992px) {
	.project_home .left_p {padding-right: 30px;}
}
@media screen and (max-width: 991px) {
	.project_home .left_p {margin-bottom: 20px;}
}
.project_home .left_p .slides li a {display: block; position: relative; overflow: hidden;}
.project_home .left_p .slides li a img {
	width: 100%;
	transition: all .4s ease-in;
	-webkit-transition: all .4s ease-in;
}
.project_home .left_p .slides li a:hover img {
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
}
.project_home .left_p .slides li a strong {
	display: block;
	font-weight: normal;
	padding: 20px;
	background: rgba(0,0,0,.6);
	color: #fff;
	position: absolute; bottom: 0; left: 0;
	width: 100%;
	text-transform: uppercase;
	font-size: 17px;
}

.project_home .right_p a {display: block; position: relative; overflow:hidden;}
.project_home .right_p a+a {margin-top: 20px;}
.project_home .right_p a img {width: 100%;
	transition: all .4s ease-in;
	-webkit-transition: all .4s ease-in;
}
.project_home .right_p a:hover img {
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
}
.project_home .right_p a span {position: absolute; top: 0; left: 0;
	display: flex;
	display: -webkit-flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
}

.support_box img {max-width: 100%; margin: auto;}
.support_box dl {text-align: center; margin: 10px 0;}
.support_box dl dt strong {font-size: 18px;}

.scroll_news {background: #0072bb; color: #fff; padding: 10px 0;}
.scroll_news a {color: #fff; display: inline-block; text-decoration: none;}
.scroll_news a:hover {color: #fec908;}
.scroll_news span {display: inline-block; margin: 0 10px;}

/*------------------- call button ---------------------*/
.phone-call-now{
	position: fixed;
	left: -15px;
    bottom: 125px;
    z-index: 88888;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);}

.call-now {
	position: relative;
    cursor: pointer;
    z-index: 5000;}

.call-now .circle {
    width: 100px;
    height: 100px;
    top: 20px;
    left: 20px;
    position: absolute;
    background-color: transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(30, 30, 30, 0.4);
    opacity: 0.4;
    -webkit-animation: dr-widget-circle-anim 1.2s infinite ease-in-out;
    -moz-animation: dr-widget-circle-anim 1.2s infinite ease-in-out;
    -ms-animation: dr-widget-circle-anim 1.2s infinite ease-in-out;
    -o-animation: dr-widget-circle-anim 1.2s infinite ease-in-out;
    animation: dr-widget-circle-anim 1.2s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;}

.call-now .circle-fill {
    width: 80px;
    height: 80px;
    top: 30px;
    left: 30px;
    position: absolute;
    background-color: #000;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    opacity: .2;
    -webkit-animation: dr-widget-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation: dr-widget-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation: dr-widget-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation: dr-widget-circle-fill-anim 2.3s infinite ease-in-out;
    animation: dr-widget-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;}

.call-now .img-circle {
    width: 40px;
    height: 40px;
    top: 50px;
    left: 50px;
    position: absolute;
    background: rgba(30, 30, 30, 0.1) url(../images/widget/phone/phone.png) no-repeat center center;
    background-size: 80% 80%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    opacity: .4;
    box-sizing: initial;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;}

.call-now .circle-shake {
    -webkit-animation: dr-widget-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: dr-widget-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: dr-widget-circle-img-anim 1s infinite ease-in-out;
    -o-animation: dr-widget-circle-img-anim 1s infinite ease-in-out;
    animation: dr-widget-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%}
        
@-moz-keyframes dr-widget-circle-anim {
    0% {
        -moz-transform: rotate(0) scale(.5) skew(1deg);
            transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1;
        -moz-opacity: .1;
        -webkit-opacity: .1;
        -o-opacity: .1;
    }
    30% {
        -moz-transform: rotate(0) scale(.7) skew(1deg);
          transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5;
        -moz-opacity: .5;
        -webkit-opacity: .5;
        -o-opacity: .5;
    }
    100% {
        -moz-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1;
        -moz-opacity: .1;
        -webkit-opacity: .1;
        -o-opacity: .1;
    }
}
@-webkit-keyframes dr-widget-circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg);
        -webkit-opacity: .1;
          opacity: .1;
        transform: rotate(0) scale(.5) skew(1deg);
    }
    30% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        -webkit-opacity: .5;
            transform: rotate(0) scale(.7) skew(1deg);
            opacity: .5;
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -webkit-opacity: .1;
            transform: rotate(0) scale(1) skew(1deg);
            opacity: .1;
    }
}
@-o-keyframes dr-widget-circle-anim {
    0% {
        -o-transform: rotate(0) kscale(.5) skew(1deg);
        -o-opacity: .1;
            transform: rotate(0) kscale(.5) skew(1deg);
            opacity: .1;
    }
    30% {
        -o-transform: rotate(0) scale(.7) skew(1deg);
        -o-opacity: .5;
            transform: rotate(0) scale(.7) skew(1deg);
            opacity: .5;
    }
    100% {
        -o-transform: rotate(0) scale(1) skew(1deg);
        -o-opacity: .1;
            transform: rotate(0) scale(1) skew(1deg);
            opacity: .1;
    }
}
@keyframes dr-widget-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }
    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-moz-keyframes dr-widget-circle-fill-anim {
    0% {
        -moz-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
    }
    50% {
        -moz-transform: rotate(0) -moz-scale(1) skew(1deg);
        transform: rotate(0) -moz-scale(1) skew(1deg);
    }
    100% {
        -moz-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
    }
}
@-webkit-keyframes dr-widget-circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
          transform: rotate(0) scale(.7) skew(1deg);
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
          transform: rotate(0) scale(.7) skew(1deg);
    }
}
@-o-keyframes dr-widget-circle-fill-anim {
    0% {
        -o-transform: rotate(0) scale(.7) skew(1deg);
          transform: rotate(0) scale(.7) skew(1deg);
    }
    50% {
        -o-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -o-transform: rotate(0) scale(.7) skew(1deg);
          transform: rotate(0) scale(.7) skew(1deg);
    }
}
@keyframes dr-widget-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        transform: rotate(0) scale(.7) skew(1deg);
    }
}

@-moz-keyframes dr-widget-circle-img-anim {
    0% {
        -moz-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg);
          transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg);
          transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -moz-transform: rotate(-25deg) scale(1) skew(1deg);
       transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -moz-transform: rotate(25deg) scale(1) skew(1deg);
          transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -moz-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -moz-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg);
    }
}
@-webkit-keyframes dr-widget-circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
          transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
          transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
          transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
          transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg)
    }
}
@-o-keyframes dr-widget-circle-img-anim {
    0% {
        -o-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg);
          transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -o-transform: rotate(25deg) scale(1) skew(1deg);
          transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -o-transform: rotate(-25deg) scale(1) skew(1deg);
          transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -o-transform: rotate(25deg) scale(1) skew(1deg);
          transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -o-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        -o-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg)
    }
}
@keyframes dr-widget-circle-img-anim {
    0% {
        transform: rotate(0) 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(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}