@charset "utf-8";
body
{
	margin: 0;
	padding: 0;
	font-family:'UTM Essendine Caps';
	font-size: 17px;
	display: inline-block;
	width: 100% !important;
	color: #333333;
	overflow-x: hidden;
	font-weight:400;
}
a, p, strong, ul, h1, h2, h3, h4, h5, h6, li{margin: 0;padding: 0}
h1{font-size: 24px}
h3{font-size: 28px}
h4{font-size: 22px}
li{list-style: none}

body{position: relative;}
.header{padding-top: 0px; padding-right:0px; padding-bottom:12px; padding-left:0px; display: inline-block; width: 100%; transition: all .35s; background: #fff;   z-index: 99999; border-bottom: 2px solid #ec1d23;}
.header .logo{margin-left: 38px; display: inline-block; float: left;}
.header .menu-top{margin-top: 12px;}
.header .navbar-inverse{background: none; border:0; border-radius: 0; min-height: 10px; margin: 0; width: auto;}
.header .container-fluid{display: inline-block; width: auto;}
.header .container-fluid > div {display: inline-block; float: left}
.navbar-inverse .navbar-brand{padding: 0; height: auto;}
.navbar-inverse .navbar-brand i{color: #d49f0b; font-size: 25px;}
.navbar-inverse .navbar-nav > li{
	border-left: 1px solid #333;
}
.navbar-inverse .navbar-nav > li:first-child {
	border-left: none;
}
.navbar-inverse .navbar-nav > li > a{color: #333; padding: 5px 24px; margin-left: 28px; font-size: 14px;font-weight:bold; line-height: 18px; text-transform: uppercase; font-family: 'Arial';}
.navbar-inverse .navbar-nav > li:last-child > a{padding-right: 0;}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{ color: #333;  }
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{ color: #5d4501; background: none; text-decoration: underline; }
.bg-top{background:#ec1d23;width: 100%; height: 80px;}

.main-content{display: inline-block; width: 100%; margin-top: 15px;}
/* banner */
	.bx-wrapper{border:0; padding: 0; box-shadow: 0 0 0; margin: 0;}
	.bx-wrapper .bxslider li{position: relative;}
	.bx-wrapper .bxslider li img{width: 100%}
	.bx-wrapper .bxslider li .text-banner{position: absolute; left:7.1%; top:41%; z-index: 1; padding: 10px 40px 10px 100px;}
	.bx-wrapper .bxslider li .text-banner:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0.35; z-index: 2 }
	.bx-wrapper .bxslider li .text-banner h3{position: relative; z-index: 4; font-family: 'Arial'; font-size: 36px; line-height: 42px; color: #fff; }
	.bx-wrapper .bxslider li .text-banner h3 span{text-transform: uppercase; font-family: 'Minion Pro'; font-size: 48px; line-height: 56px; color: #f4ba2f; display: block;}
	.bx-wrapper .bx-controls-direction a{ width: 57px; height: 57px; top:48%;}
	.bx-wrapper .bx-controls-direction a.bx-prev{background:url(../image/vincityhome/vc-icon-prev-banner.png) no-repeat 0 0; left:7.1%;}
	.bx-wrapper .bx-controls-direction a.bx-next{background:url(../image/vincityhome/vc-icon-next-banner.png) no-repeat 0 0; right:7.1%;}
	.bx-wrapper .bx-pager{display: none !important}
/* giới thiệu */
	.container-fluid{position: relative; display: inline-block; width: 100%; float: left; }
	.container-fluid > img{max-width: 100%; width: 100%}
	.content-page{padding:100px 0 0; }
	.title-block{text-align: center;}
	.title-block h3{color: #d49f0b; text-transform: uppercase;font-size: 30px; line-height: 38px; font-family: 'Arial'; margin: 40px 0 0}
	.content-text {font-size: 16px; margin-top: 40px; line-height: 20px; font-family: 'Arial';  text-align: center; padding: 0 15px}


	#gioi-thieu{display: inline-block; width: 100%; }
	#gioi-thieu .content-page{ position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 4}
	#gioi-thieu .content-text { color: #fff}
	#gioi-thieu .gioi-thieu-text { max-width: 660px; margin: 0 auto 77px }
	#gioi-thieu .row p{font-family: 'Arial'; font-size: 20px; line-height: 26px; color: #d49f0b}
	#gioi-thieu .row p:nth-child(2){ font-size: 30px; line-height: 36px; color: #fff; font-weight: bold; margin: 12px 0 0}
/* vị trí */
	#vi-tri .container{padding: 0}
	.box-container{display: inline-block; width: 100%; line-height: 0; float: left;}
	.box-container .content-box{width: 50%; float: left;}
	.content-box.content-text{padding-left: 15px; padding-right: 15px;}
	.content-box.content-img img{max-width: 100%; width: 100%}
	.content-text .title-block{margin-top: 30px;}
/* căn hộ */
	#can-ho .container{padding: 0}
	#can-ho .box-container:last-child .content-page{padding-top: 13.5%}

/* tiện ich*/
	#tien-ich{margin-top: 50px;}
	#tien-ich h3{ background: #d49f0b; font-size: 36px; padding-bottom: 3px; text-transform: uppercase; color: #fff; font-family: 'Arial'; text-align: center; line-height: 70px; display: inline-block; width:100%;}
	#tien-ich ul{display: inline-block; width: 100%}
	#tien-ich ul li{display: inline-block; float: left; width: 33.334%; position: relative;}
	#tien-ich ul li img{max-width: 100%; width: 100%}
	#tien-ich ul li a.name-tien-ich{display: none; color: #fff; font-size: 16px; line-height: 22px; font-family: 'Arial'; text-align: center; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1}
	#tien-ich ul li a.name-tien-ich:before{ content: ""; background:#000; opacity: 0.5; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: -1}
	#tien-ich ul li a.name-tien-ich:hover{text-decoration: none}
	#tien-ich ul li a div{ display: table; height: 100%; width: 100%}
	#tien-ich ul li a p{display: table-cell; vertical-align: middle;}
	#tien-ich ul li a p span{margin: 0 auto; max-width: 250px; padding: 0 10px }
	#tien-ich ul li a p span:first-child{ font-size: 25px; line-height: 25px; text-transform: uppercase; max-width: 185px; padding: 0 0 15px; margin-bottom: 20px; border-bottom: 1px solid #fff; display: inline-block;}
	#tien-ich ul li a p span:last-child{display: block;}

	#tien-ich ul li:hover a.name-tien-ich{display: inline-block;}

/* đăng ký */
	#dang-ky .title-block{max-width: 920px; margin:0 auto;}
	#dang-ky .title-block h3{margin-bottom: 22px}
	#dang-ky .title-block p{font-size: 16px; line-height: 20px; font-family: 'Arial'; color: #121212; margin: 0}
	#dang-ky  form{max-width: 730px; margin: 45px auto 0; text-align: center;}
	#dang-ky  form .form-group{margin-bottom: 32px;}
	#dang-ky  form input, #dang-ky  form button{font-size: 16px; line-height: 22px; text-align: left; color: #121212; font-family: 'Arial'; width: 100%; height: 48px; border:1px solid #d49f0b; box-shadow: 0 0 0; border-radius: 26px; padding: 11px 20px  11px 65px;}
	#dang-ky input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #121212; height: 40px;
}
	#dang-ky input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   color:    #121212;
	   opacity:  1;
	}
	#dang-ky input::-moz-placeholder { /* Mozilla Firefox 19+ */
	   color:    #121212;
	   opacity:  1;
	}
	#dang-ky input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	   color:    #121212
	}
	#dang-ky  form button{ width: 172px; margin: 5px auto 0; height: 43px; background:#fff !important; padding: 0; text-align: center; text-transform: uppercase;color: #d49f0b; line-height: 44px;}
/* footer */
.footer{display: inline-block; width: 100%; margin-top: 1px; background:#7d7d7d; text-align: center;}
.footer-content{padding: 25px 0  30px}
.footer-content img{width: 225px;}
.footer h4{ color: #d49f0b; font-size: 14px; line-height: 20px; font-family: 'Arial'; text-transform: uppercase; font-weight: bold; margin: 20px 0 22px;}
.footer p{ color: #121212; font-size: 16px; line-height: 22px; font-family: 'Arial'; }
.footer p i{ color: #d49f0b; margin-right: 19px }
.footer .footer-copy{background: #d49f0b; padding: 18px 0; text-align: left;}
.footer .footer-copy p{ color: #fff; text-transform: uppercase; font-size: 14px; line-height: 16px; padding-left: 14px;}

@media(max-width: 1199px)
{
	.header .logo{margin-left: 0}
	.bx-wrapper .bxslider li .text-banner, .bx-wrapper .bx-controls-direction a.bx-prev{left: 9.8%;}
	.bx-wrapper .bx-controls-direction a.bx-next{right: 9.8%}

	.content-page{padding-top: 80px}
	#gioi-thieu .gioi-thieu-text{margin-bottom: 40px}
}
@media(max-width: 1140px)
{
	.bx-wrapper .bxslider li .text-banner, .bx-wrapper .bx-controls-direction a.bx-prev{left: 8%;}
	.bx-wrapper .bx-controls-direction a.bx-next{right: 8%}
	.bx-wrapper .bxslider li .text-banner{top:40%;}

	#gioi-thieu .content-page{padding-top: 80px}
	#gioi-thieu .row p:nth-child(2){font-size: 29px;}
	.content-page{padding-top: 60px;}
}
@media(max-width: 1024px)
{
	.bx-wrapper .bxslider li .text-banner, .bx-wrapper .bx-controls-direction a.bx-prev{left: 3.3%;}
	.bx-wrapper .bx-controls-direction a.bx-next{right: 3.3%}
	.bx-wrapper .bxslider li .text-banner{top:39%;}
	#gioi-thieu .content-page{padding-top: 60px}

	.box-container .content-page{ padding-top: 60px }
	.content-page .icon img{width: 60px}
	.content-page .title-block h3{font-size: 25px; margin-top: 20px}
	.box-container .content-text{margin-top: 20px}
}
@media(max-width: 992px)
{

	.bx-wrapper .bxslider li .text-banner, .bx-wrapper .bx-controls-direction a.bx-prev{left: 1.7%;}
	.bx-wrapper .bx-controls-direction a.bx-next{right: 1.7%}
	.bx-wrapper .bxslider li .text-banner{top:38%;}
}
@media(max-width: 768px)
{
	.header .logo img{width: 160px}
	.navbar-inverse .navbar-nav > li > a{font-size: 12px; margin-left: 7px}
	.bx-wrapper .bxslider li .text-banner h3{font-size: 28px; line-height: 36px;}
	.bx-wrapper .bxslider li .text-banner h3 span{font-size: 32px; line-height: 40px;}
	.bx-wrapper .bxslider li .text-banner{padding: 10px 20px 10px 60px}
	.bx-wrapper .bx-controls-direction a{width: 45px; height: 45px; background-size: 45px !important;}


	.box-container .content-page{ padding-top: 30px }
	.content-page .title-block h3{font-size: 20px; line-height: 25px;}
	.content-text{margin-top: 20px;}
	#gioi-thieu .gioi-thieu-text{margin-bottom: 20px;}
	#gioi-thieu .row p{font-size: 18px; line-height: 22px;}
	#gioi-thieu .row p:nth-child(2){font-size: 22px; line-height: 26px; margin-top: 8px}
	.content-text{font-size: 14px; line-height: 18px}
	#tien-ich h3{font-size: 28px; line-height: 55px}
	#tien-ich ul li a p span:first-child{padding: 0 0 5px; margin-bottom: 10px; font-size: 20px; line-height: 25px;}
}
@media(max-width:767px)
{
	.header{ line-height: 0}
	.header .menu-top{margin:0; width: 100%}
	.navbar-inverse .navbar-brand{display: none;}
	.navbar-inverse .navbar-toggle{ margin: 0; position: absolute; right: 0px; top:-41px;}
	.navbar-inverse .navbar-toggle .icon-bar{background-color: #000;}
	.navbar-fixed-top, .navbar-fixed-bottom{position: inherit;}
	.header .navbar-inverse{min-height: 0;}
	.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{background-color: #000}
	.navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar{background-color: #fff}
	.header .container-fluid > div, .header .container-fluid{width: 100%; display: inline-block;}
	.navbar-inverse .navbar-form{border: 0}
	.navbar-inverse .navbar-nav{margin: 10px 0 0}
	.navbar-inverse .navbar-nav > li{border-bottom: 1px dotted #ccc; }
	.navbar-inverse .navbar-nav > li a{ margin: 0;}
	.navbar-inverse .navbar-nav > li:last-child{border-bottom:0}
	.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{border:0;}

	.main-content{margin-top: -5px;}
	.bx-wrapper .bxslider li .text-banner h3{font-size: 22px; line-height: 30px;}
	.bx-wrapper .bxslider li .text-banner h3 span{font-size: 26px; line-height: 32px;}
	.bx-wrapper .bxslider li .text-banner{padding: 10px 20px 10px 60px}
	.bx-wrapper .bxslider li .text-banner, .bx-wrapper .bx-controls-direction a.bx-prev{left:10px}
	.bx-wrapper .bx-controls-direction a.bx-next{right:10px}

	#gioi-thieu .content-page{padding-top: 30px;}
	.content-text{padding: 0 10px;}
	#gioi-thieu .row p:nth-child(2){font-size: 18px; line-height: 22px; margin: 0 0 8px}
}
@media(max-width: 736px)
{
	.content-page .icon img{width: 50px}
	.content-page .title-block h3{font-size: 17px; line-height: 22px; margin-top: 13px}
	#gioi-thieu .content-text, .box-container .content-text{margin-top: 13px}
}
@media(max-width: 667px)
{
	.content-text{ font-size: 13px; line-height: 17px}
	#tien-ich ul li a p span:first-child{font-size: 17px; line-height: 22px;}
	#tien-ich ul li a.name-tien-ich{font-size: 14px; line-height: 18px;}
}
@media(max-width: 640px)
{
	#gioi-thieu .row p{font-size: 16px; line-height: 20px;}
	#gioi-thieu .row p:nth-child(2){font-size: 17px; line-height: 22px;}
	.box-container .content-page{padding-top: 15px}
	#can-ho .box-container:last-child .content-page{padding-top: 11%;}

	#tien-ich{margin-top: 30px}
	.footer{margin-top: 30px;}
}
@media(max-width: 639px)
{
	.box-container .content-box, .box-container .content-page{width: 100%}
	.box-container .content-page{padding: 30px 0}
	 #can-ho .box-container:last-child .content-page{padding-top: 0}
	#tien-ich h3{font-size: 22px; line-height: 45px; padding:0 }
	#tien-ich ul li{width: 50%; }
	#tien-ich ul li img{width: 100%}
	.footer .footer-copy p{padding-left: 0; text-align: center;}
	.footer p i{margin-right: 12px;}
	.content-page{padding-top: 30px;}
}
@media(max-width: 568px)
{
	.container-fluid > img{max-width: 400%; width: 120%; margin-left: -10%}
}
@media(max-width: 480px)
{
	.container-fluid > img{ width: 140%; margin-left: -20%}
}
@media(max-width: 414px)
{
	.bx-wrapper .bxslider li .text-banner{display: none}
	.bx-wrapper .bx-controls-direction a { width: 35px; height: 35px; background-size: 35px !important}
	.container-fluid > img{ width: 170%; margin-left: -35%}
	#tien-ich ul li{width: 100%; margin-bottom: 5px}
	#dang-ky form input{padding: 11px 20px}
}
@media(max-width: 360px)
{
	.container-fluid > img{ width: 220%; margin-left: -6%}
}
/* breadcrumb */
.breadcrumb {
	margin: 13px 0 4px 0;
	padding: 6px 0;
	background-color:#fff;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	
	transform: rotate(-45deg);
}
.toph3
{
	font-size: 16px;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
.content-main{ padding: 80px 14px 8px 14px;}
.title-tienich{ text-align: center; font-size: 20px;padding-top: 25px; padding-bottom: 15px;}
.description-tienich{ text-align: center; }
.section-footer{overflow:visible!important; }
.contact{padding-top:0;background: #7d7d7d;}
.contact h2{font-size:50px;margin-bottom:26px;color:#fff;font-family:'UTM Essendine Caps'}
.contact h3{font-family:'UTM Essendine Caps';font-size:24px;color:#fff;margin-top:30px;margin-bottom:15px;margin-left:10px}
.contact p,.contact p strong{color:#fff;font-size:14px}
.contact .contact-info p{margin-bottom:12px;font-family:'UTM Essendine Caps';letter-spacing:1px;font-size:16px}
.contact .contact-info h4{font-family:'UTM Essendine Caps';font-size:16px;color:#FFF;margin-bottom:20px}
.contact .form-contact p{margin-bottom:20px;margin-left:13px;letter-spacing:1px}
.contact .form-contact input,.contact .form-contact textarea{width:100%;margin-bottom:18px;background:rgba(255,255,255,.4);border:none;border-radius:24px;color:#fff;font-size:15px;padding:10px 18px 8px 18px;outline:none}
.form-contact::-webkit-input-placeholder{color:#fff}
.form-contact::-moz-placeholder{color:#fff}
.form-contact:-ms-input-placeholder{color:#fff}
.form-contact:-moz-placeholder{color:#fff}
.contact *{font-family:'UTM Essendine Caps'}
.form-contact .bt-submit{font-family:'UTM Essendine Caps';font-size:18px;border:none;padding:11px 18px 11px 18px!important;border-radius:25px;outline:none;background:#c59842!important;color:#fff;transition:all ease .4s;-webkit-transition:all ease .4s;display:inline-block;text-decoration:none;width:auto;max-width:125px;text-transform:uppercase}
.contact .form-contact .bt-submit:hover,.contact .form-contact .bt-submit:focus{background:#00948c!important}
.contact .hotline{position:relative;border:2px solid #fff;width:238px;padding:15px 0 5px 28px;margin-top:35px}
.contact .hotline a{color:#fff;font-family:'UTM Essendine Caps';font-size:27px;text-decoration:none;display:block;line-height:1.3}
.contact .hotline .title{color:#03958d;font-size:20px;font-family:'UTM Essendine Caps';background:#fff;padding:2px 18px;margin:0;position:absolute;top:-17px;left:18px}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fff;
}
.hotline{
	margin-top:20px;
}