body {
    margin: 0;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #222;
	min-width:1008px;
}

input,
button,
select,
textarea {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    border: 0;
    max-width: 100%;
    vertical-align: middle;
}

a {
    text-decoration: none;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.clear {
    clear: both;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #888;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

a:focus {
    outline: 0;
    outline: 0;
    outline-offset: 0;
}

a:hover,
a:active {
    outline: 0;
}

button,
input,
select,
textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}

button,
input {
    *overflow: visible;
    line-height: normal;
}

button:-moz-focus-inner,
input:-moz-focus-inner {
    padding: 0;
    border: 0;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 0;
}

button {
    line-height: normal !important;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
    border-padding: 0px;
}

.no-margin {
    margin: 0!important;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.hiden {
    display: none !important;
}

.bg-gray {
    background-color: #F0F0F0!important;
}

.text-transform {
    text-transform: uppercase !important;
}

.text-transform-none {
    text-transform: none !important;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

.col-3,
.col-6,
.col-12,
.col-4,
.col,
.col-2,
.col-8 {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

.col-2 {
    width: 16.66666667%;
}

.col-8 {
    width: 66.66666667%;
}

.col {
    width: 20%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.3333%;
}

.col-6 {
    width: 50%;
}

.col-12 {
    width: 100%;
}

.red {
    color: #E23838!important;
}

.text-center {
    text-align: center !important;
}

.font-700 {
    font-weight: 700 !important;
}

.color-green {
    color: #4DB848;
}

.color-blue {
    color: #135EAC !important;
}

.bg-green {
    background: #4DB848 !important;
}

.bg-turquoise {
    background: #13B0B0 !important;
}

.bg-red {
    background: #E23838!important;
}

.bg-light-black {
    background: #888888 !important;
}

.font-12 {
    font-size: 12px !important;
}

.bg-blue {
    background: #135EAC;
}

.mt-20 {
    margin-top: 20px !important;
}

.modal-backdrop-s.show {
    z-index: 9;
    display: block;
}
.mb-0 { margin-bottom:0 !important;}
.modal-backdrop-s {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: transparent;
    display: none;
    opacity: .7;
}

.container {
    max-width: 1170px;
    margin: auto;
    padding: 0 15px;
    width: 100%;
}

.full-width {
    width: 100% !important;
    display: inline-block;
}

.icon-back-top {
    width: 45px;
    height: 45px;
    position: fixed;
    bottom: 20px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    z-index: 999;
    display: none;
    font-size: 28px;
    color: #FECC0A;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}



.content {
    width: 100%;
    display: inline-block;
    min-height: 450px;
}

/*header*/
.header {
    width: 100%;
    display: inline-block;
}
.header {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
}
.header .header-top {
    background: #135EAC;
    width: 100%;
    height: 50px;
    padding-top: 8px;
    color: #fff;
    line-height: 34px;
    font-weight: normal;
    font-size: 14px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
	
}
.header .header-top a {
    color: #fff;
}
.header .header-top .left-head {
    float: left;
    font-weight: bold;
	font-size:15px;
}
.header .header-top .head-right {
    float: right;
}

.header.fixed {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
}

.header-fix {
    height: 130px;
	margin-bottom:40px;
}

.header.fixed .header-top {
    height: 0;
    line-height: 0px;
    background-color: transparent;
    padding: 0;
}

.header.fixed .left-head,
.header.fixed .number,
.header.fixed .noti,
.header.fixed .head-right .box-login-acc {
    display: none;
}

.header.fixed .header-top .container {
    position: relative;
}

.header.fixed .navi {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.ml-10 {
    margin-left: 10px !important;
}
.icon-call-h {
	width:30px;
	height:30px;
	background: linear-gradient(180deg, #57D163 0%, #23B33A 100%);
	float:left;
	line-height:30px;
	cursor:pointer;
	border:0;
	padding:0;
	font-weight: normal;
	font-size: 20px;
	text-align: center;
	color:#fff;
	margin-right:10px;
	border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
	}
.icon-zalo-h {
	width:30px;
	height:30px;
	background:  url(../images/salon/icon-zalo-30-30.png) no-repeat 0 0;
	float:left;
	cursor:pointer;
	border:0;	
	margin-right:10px;
	}
.mail-h {
	font-weight: normal;
	font-size: 14px;
	line-height: 30px;
	color: #FFFFFF;
	}
.mail-h:before {
	font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	content: '\e80a';
	vertical-align: middle;
	margin-right:5px;
	}		
.logo-salon {
    float: left;
    max-width: 270px;
    margin-top: 10px;
	height:60px;
	margin-right:30px;
	overflow:hidden;
	vertical-align:middle;
	display:table;
}
.logo-salon img { max-height:100%;}
/*menu top*/

.navi {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.navi {
    width: 100%;
    display: inline-block;
    background-color: #fff;
    height: 80px;
}

.navi .logo {
    float: left;
    background: url(../images/logo-oto.svg) no-repeat left top;
    width: 160px;
    height: 60px;
    margin-top: 12px;
}

.navi .logo h1 {
    text-indent: -999px;
}

.navi .logo .slogan {
    margin: 0;
    color: #646464;
    font-weight: normal;
    font-size: 11px;
    text-align: right;
    padding-top: 46px;
    letter-spacing: -0.02em;
}

.navi .menu-top {
    margin: 0;
    padding: 0;
    float: right;
}

.navi .menu-top li {
    list-style: none;
    float: left;
    position: relative;
    padding: 20px 10px;
    line-height: 40px;
}

.navi .menu-top li a {
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: #222222;
    display: block;
}

.navi .menu-top li h2,
.navi .menu-top li h3 {
    font-size: 15px;
    margin: 0;
}

.navi .menu-top li:hover a {
    color: #135EAC;
}

.navi .menu-top li:last-child {
    padding-right: 0;
}

.navi .menu-top li.search-fix {
    display: none;
    text-align: center;
}

.header.fixed .navi .menu-top li.search-fix {
    display: block;
}


.nav-drp-sub {
    display: none;
}

.mgt_30 {
    margin-top: 30px !important;
}

.navi .menu-top .active {
    color: #135EAC ;
}

.header.fixed .mail-h  { display:none;}
.header-fix.header-salon {
    height: 80px;
}
.header-fix h1 { margin:0;}
.navi.nav-salon .menu-top {
    float: left;
}
.navi.nav-salon .menu-top li:first-child { padding-left:0;} 
.navi.nav-salon .logo {
    float: right;
	margin-top:25px;
	width:104px;
	height:28px;
	background: url(../images/logo-oto.svg) no-repeat 0 0;
	background-size: contain;
	text-indent: -9999px;
}
.navi.nav-salon .logo .slogan {
	font-size: 9px;
	line-height: 8px;
	letter-spacing: -0.013em;
	padding-top:38px;
	}
.navi.nav-salon .logo h1 {
    text-indent: -99999px;
}
/*end menu top*/
.mt-40 { margin-top:40px !important;}
.b-column, .c-column {
    float: left;
    min-height: 300px;
}
.c-column {
    width: 32.88889%;
    padding-left: 15px;
}
.b-column {
    width: 67.1111%;
    padding-right: 15px;
}
.heading {
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    color: #222222;
    margin: 0;
    margin-bottom: 24px;
}

.heading a {
    color: #222222;
}

.heading .alink {
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    color: #135EAC;
    margin-left: 8px;
}

.heading i {
    color: #135EAC;
}
.head-breadcrumb {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    color: #135EAC;
    line-height: 24px;
}

.head-breadcrumb a {
    color: #135EAC;
}

.head-breadcrumb i {
    color: #888888;
}

.text-small-heading {
    line-height: 23px;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #222222;
    text-transform: none;
    float: right;
}

.btn-blue,
.btn-green,
.btn-bt-green, .btn-bt-blue {
    width: 100%;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    border: 0;
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}
.btn-blue {
    background: #135EAC;
}

.btn-green {
    background: #4DB848;
}
.btn-bt-green {
    background: #FFFFFF;
    border: 1px solid #4DB848;
    color: #4DB848;
    line-height: 28px;
}
.btn-bt-blue {
    background: #FFFFFF;
    border: 1px solid #135EAC;
    color: #135EAC;
    line-height: 28px;
}


.mt-15 {
    margin-top: 15px !important;
}
/*popup*/
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    display: none;
}

.fade.in {
    opacity: 1;
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
    display: block;
}

.modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    /*overflow: hidden;*/
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal-dialog {
    width: 100%;
    max-width: 620px;
	margin:auto;
}
.modal-dialog.popup-salon {
    max-width: 440px;
}

.modal.in .modal-dialog {
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate3d(0, -25%, 0);
    -o-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}
.modal-dialog .close {
    float: right;
    width: 40px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 2px;
    z-index: 1;
    background-color: transparent;
	opacity: 0.6;
}

.modal-dialog .close i:before {
    margin: 0;
    line-height: normal;
}

.modal-dialog button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    border: 0;
}

.modal-dialog .content-popup-salon {
    width: 100%;
    display: inline-block;
    background: linear-gradient(180deg, #0094E7 0%, #0054AC 100%);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	border-radius: 4px;
	min-height:120px;
	padding:30px 20px;
}

.modal-dialog .content-popup-salon .title {
    font-weight: bold;
    font-size: 24px;
	line-height: 30px;
    text-align: center;
    color: #fff;
	text-transform: uppercase;
    margin: 0;
	padding-bottom:15px;
	border-bottom: 1px solid #56A1EE;
}
.modal-dialog .content-popup-salon .des {
	margin:0;
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #FFFFFF;
	margin-top:16px;
	}
.modal-dialog .content-popup-salon .list-form {
	margin:0;
	padding:0;
	}
.content-popup-salon .list-form .radio {
  position: relative;
  display: inline-block;
  color:#fff;
  font-size:14px;
  margin-left:20px;
  line-height:22px;
}
.content-popup-salon .list-form .radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.content-popup-salon .list-form  .radio input[type="radio"] + .radio-label:before {
  content: "";
  background: #fff;
  border-radius: 100%;
 border: 1px solid #ACACAC;
  display: inline-block;
  width:20px;
  height: 20px;
  position: relative;
  top: 0;
  margin-right: 10px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
      vertical-align: middle;

}
.content-popup-salon .list-form .radio input[type="radio"]:checked + .radio-label:before {
  background-color: #4DB848;
  box-shadow: inset 0 0 0 4px #fff;
  border:1px solid #4DB848;
}
.content-popup-salon .list-form .radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
}
.content-popup-salon .list-form .radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #dcdcdc;
  background: #b4b4b4;
}
.content-popup-salon .list-form .radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}		
.content-popup-salon .list-form li {
	width:100%;
	float:left;
	list-style:none;
	margin-top:18px;
	color:#fff;
	}
.content-popup-salon .list-form li:last-child { text-align:center;}	
.content-popup-salon .list-form .input {
	}	
.content-popup-salon .list-form .input {
	width:100%;
	display:inline-block;
	border:0;
	height:40px;
	background: #FFFFFF;
	border-radius: 4px;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	color: #222;
	padding:10px;
	}
.content-popup-salon .list-form .btn-submit {
    width: 180px;
    display: inline-block;
    background: #4DB848;
    border-radius: 50px;
    padding: 6px 0;
    height: 32px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    cursor: pointer;
    border: 0;
}
.content-popup-salon .list-form .custom-select-2 {
   position: relative;
    background: #fff;
	border: 0;
	width:100%;
	display:inline-block;
	border-radius: 4px;
	height: 40px;   
    width: 100%;
	cursor:pointer;
}
.content-popup-salon .list-form .custom-select-2:before {
	 content: '\e804';
	position:absolute;
	right:0;
	top:0;
	height:40px;
	line-height:40px;
	width:30px;
	font-size:16px;
	color:#222;
	font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;   
    text-align: center;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
	}	 
.content-popup-salon .list-form .custom-select-2 > select {
    background: none;
    padding-left: 9px;
    padding-right: 35px;
    position: relative;
    z-index: 1;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.content-popup-salon .list-form .custom-select-2 .select-box {
    height: 40px;
    font-size: 16px;
    width: 100%;
    padding:10px;
    line-height: 20px;
    border: 0;
    color: #888;
    margin: 0;
	background-color:transparent;
	display:block;
}
.content-popup-salon .list-form .custom-select-2 .select-box.active {color: #222;}			
/*footer*/
.box-bg-ft {
    width: 100%;
    margin: 40px 0 0;
   background: #15579B;
   padding:40px 0;
   color:#fff;
   float:left;
}
.box-bg-ft:after {
	content:"";
	height:0;
	display:table;
	}
.box-bg-ft .content-ft {
	width:100%;
	display: -webkit-flex;
    display: -ms-flexbox;   
    display: -webkit-box;
	 display: flex;
	}	
.box-bg-ft .map {
	width:390px;
	margin-right:30px;
	height:240px;
	}
.box-bg-ft .info {
	width: 100%;
	}
.box-bg-ft .title {
	margin:0;
	font-weight: bold;
	font-size: 18px;
	line-height: 21px;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-bottom:15px;
	}
.box-bg-ft .location, .box-bg-ft .mobile{
	margin: 0;
    font-weight: normal;
    font-size: 16px;
	line-height: 24px;
    color: #fff;
   margin-bottom:15px;
    position: relative;
    padding-left: 23px;
	}	
.box-bg-ft .location:before, .box-bg-ft .mobile:before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;	    
}	
.box-bg-ft .mobile a {color: #fff;}
.box-bg-ft .mobile span {
	padding:0 15px;
	}
.box-bg-ft .location:before {
	content: '\e809';
	}
.box-bg-ft .mobile:before {
	content: '\e805';
	}
.box-bg-ft .box-logo {
	display:inline-block;
	width:100%;
	margin-top:28px;
	padding-top:43px;
	border-top:1px solid rgba(255,255,255,0.2);
	}
	/*tool*/
	.box-tool-support {
	position:fixed;
	top:50%;
	right:0;
	z-index:99;
	height:142px;
	width:46px;
	margin-top:-71px;
	}
.box-tool-support .icon {
	width:46px;
	height:46px;
	float:right;
	}	
.box-tool-support .item {
	width:46px;
	float:left;
	background: #135EAC;
	height:46px;
	position:absolute;
	right:0;
	cursor:pointer;
	}
.box-tool-support .item:nth-child(1){ top:0;}	
.box-tool-support .item:nth-child(2){ top:48px;}
.box-tool-support .item:nth-child(3){ top:96px;}	
.box-tool-support .item:first-child {border-radius: 8px 0px 0px 0px;}	
.box-tool-support .item:last-child { margin-bottom:0;border-radius: 0px 0px 0px 8px;}
.box-tool-support .item:hover {
		background-color:#4DB848;
	border-radius: 8px 0px 0px 8px;
	}	
.box-tool-support .item:hover:nth-child(1){ width:150px;}	
.box-tool-support .item:hover:nth-child(2){ width:160px;}
.box-tool-support .item:hover:nth-child(3){ width:153px;}
.box-tool-support .item .monney { background:url(../images/salon/icon-money.png) no-repeat center center ;}
.box-tool-support .item .steering-wheel { background:url(../images/salon/icon-steering-wheel-white.png) no-repeat  center center  ;}
.box-tool-support .item .call { background:url(../images/salon/icon-call.png) no-repeat center center ;}

.box-tool-support .text {
		font-weight: normal;
		font-size: 14px;
		line-height: 16px;
		text-align: right;
		color: #FFFFFF;
		float:left;
		padding:15px 10px;
		display:none;	
		}
.box-tool-support .item:hover .text{
		display:block;
		background:#222;
		border-radius: 8px 0px 0px 8px;
		
	}		
@media only screen and (min-width: 960px) and (max-width: 1150px) {
	.logo-salon { width:235px; margin-right:15px;}
    .navi .menu-top li {
        padding: 20px 7px;
    }   
   
}