@charset "utf-8";
/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:auto;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}


*{margin:auto; padding:0;}
body{font-size: 15px; font-family: "Tahoma", Helvetica, Arial, sans-serif; position: relative; background: #ffffff;}
ul li{list-style:none;}
.none{display: none;}
.fix{padding: 0 20px; position: relative; z-index: 5; width: 100%; box-sizing: border-box;}
.fix-small{max-width: 1152px; position: relative; z-index: 5; width: 100%; box-sizing: border-box; height: 100%;}
.relative{position: relative;}
.f-l{float: left;}
.f-r{float: right;}
.clr{clear:both;}
.clr5{clear:both; height: 5px;}
.clr10{clear:both; height: 10px;}
.clr15{clear:both; height: 15px;}
.clr20{clear:both; height: 20px;}
.clr25{clear:both; height: 25px;}
.clr30{clear:both; height: 30px;}
.center{text-align: center;}
.hidden{visibility: hidden; height: 0!important;}
a{color: #fff; cursor: pointer; text-decoration: none;}
a:hover{color: #d32f4e; text-decoration: none;}
input,button,textarea,select:focus{outline:0}
::-webkit-input-placeholder {font-family: "Tahoma", Helvetica, Arial, sans-serif; color: #999; font-size: 12px;}
:-moz-placeholder {font-family: "Tahoma", Helvetica, Arial, sans-serif; color: #999; font-size: 12px;}
::-moz-placeholder {font-family: "Tahoma", Helvetica, Arial, sans-serif; color: #999; font-size: 12px;}
:-ms-input-placeholder {font-family: "Tahoma", Helvetica, Arial, sans-serif; color: #999; font-size: 12px;}
input,button,textarea,select{font-family: "Tahoma", Helvetica, Arial, sans-serif; color: #454545; cursor: pointer; font-size: 14px;}
button {text-transform: uppercase;}
.mCSB_inside > .mCSB_container{margin-right: 15px!important;}
.mCSB_scrollTools .mCSB_draggerContainer{right: -18px!important;}
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background: #d32f4e!important;}
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background: #d32f4e!important; border-radius: 0!important;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background: #d32f4e!important;}
.owl-wrapper{float: left!important;}
.owl-carousel .owl-stage{float: left;}
.alertify-buttons{position: inherit!important; width: auto!important; height: auto!important; background: none!important;}
.alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus{background: #d32f4e!important; border: none!important; color: #fff!important;}
.alertify-button{border-radius:0px!important;}
.alertify-buttons{margin-top: 20px!important;}
.alertify-message{text-transform: uppercase!important; font-size: 14px!important;}
.alertify{border: 10px solid #d32f4e!important; top: 40%!important; margin: 0; padding: 0;}
.alertify-cover{background: rgba(0,0,0,0.5)!important; opacity: 1!important;}

.ckeditor * {font-family: "Tahoma", Helvetica, Arial, sans-serif !important;}
.ckeditor ul li {margin-left: 12px !important; opacity: 1!important; height: auto!important; list-style: disc!important;}
.ckeditor img {max-width: 100%; margin: 12px auto; height: auto;}
.ckeditor p {margin-top: 12px !important}
.ckeditor b {font-weight: bold !important;}
.ckeditor strong {font-weight: bold !important;}
.ckeditor i {font-style: italic !important;}
.ckeditor ul {padding-left: 12px !important;}
.ckeditor table {margin: 4px !important;}
.ckeditor table tbody {display: table; width: 100%}
.ckeditor th,td,tr {padding: 4px !important; border: 1px solid #dbdbdb !important;}

.response-text {text-align: center; font-size: 18px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

.phantrang ul{text-align: center;}
.phantrang ul li{height: 30px; background: #fff; text-align: center; margin: auto 5px; position: relative; line-height: 30px; overflow: hidden; display: inline-block; border: 1px solid #d32f4e; padding: 0 10px; border-radius: 5px;}
.phantrang ul li a{color: #d32f4e; display: block;}
.phantrang ul li.active{background: #d32f4e;}
.phantrang ul li.active a{color: #fff;}
.phantrang ul li:hover{background: #d32f4e;}
.phantrang ul li:hover a{color: #fff;}

header {height: 80px; position: relative; z-index: 2; box-sizing: border-box; padding: 10px 0;}
header.dark-header {background: url('../img/icon/bg-menu.jpeg'); margin-bottom: 12px; background-size: cover; background-position: center center; background-repeat: no-repeat;}
header .logo {float: left;}
header .logo img {display: block; height: 60px;}
header .menu {float: left; margin-left: 20px}
header .menu ul li {float: left; height: 30px; line-height: 30px; margin: 15px 16px; text-shadow: 1px 1px 0 rgba(0,0,0,.5); transition: border ease-in-out 0.2s;}
header .menu ul li a {display: block;}
header .menu ul li:hover {border-bottom: 2px solid #d32f4e;}
header .menu ul li.active {border-bottom: 2px solid #d32f4e;}
header .menu ul li.active a {color: #d32f4e;}
header .menu ul li:last-child {margin-right: auto;}
.slider {height: 100vh; position: relative; z-index: 1; margin-top: -80px;}
.slider .ls-layer .layer-text-box {top: 400px !important; left: 150px !important; color: #fff; width: 600px;}
.slider .ls-layer .layer-text-box .ls-title {font-weight: bold; text-transform: uppercase; font-size: 26px; text-shadow: 1px 1px 0 rgba(0,0,0,.5);}
.slider .ls-layer .layer-text-box .ls-description {margin-top: 20px; line-height: 18px;}
.slider .ls-layer .layer-text-box .ls-button {display: inline-block; margin-top: 20px; padding: 8px 16px; background: #d32f4e; border-radius: 8px; text-transform: uppercase;}
.slider .ls-layer .layer-text-box .ls-button:hover {background: #f18da0;}
.slider .ls-layer .layer-text-box .ls-button a {color: #fff; display: block;}

.show-above {position: relative; z-index: 2; margin-top: -60px;}
.title-block {height: 60px; background: #122135; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 20px; line-height: 60px; color: #fff; position: relative;}
.title-block .fa-angle-down {position: absolute; bottom: 2px; width: 13px; display: inline-block; left: 0; right: 0;}
.list-services ul {display: flex; flex-wrap: wrap; align-content: space-between;}
.list-services ul li {width: 33.33333%; margin-top: 0; position: relative; height: calc(50vh); position: relative; margin: 0;}
.list-services ul li .service-avatar {height: 100%; width: 100%;}
.list-services ul li .service-avatar img {width: 100%; height: 100%; object-fit: cover; display: block;}
.list-services ul li .service-cover {position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%;}
.list-services ul li .service-info {position: absolute; color: #fff; top: 40px; left: 12px; z-index: 2; width: 100%;}
.list-services ul li .service-info .service-title {text-transform: uppercase; font-size: 18px; margin-bottom: 28px; font-weight: bold;}
.list-services ul li .service-info .service-description {line-height: 18px; max-width: 80%; text-align: left; float: left;}
.list-services ul li .service-info .service-description b {font-weight: bold; text-decoration: underline;}

.contact-box .contact-branch {display: flex; align-content: space-between; margin-top: 20px; flex-wrap: wrap;}
.contact-box .contact-branch .contact-branch-item:first-child {margin-left: 0;}
.contact-box .contact-branch .contact-branch-item:last-child {margin-right: 0;}
.contact-box .contact-branch .contact-branch-item .title-contact-branch-item {font-weight: bold; text-transform: uppercase; height: 20px; line-height: 20px; font-size: 18px; margin-bottom: 8px;}
.contact-box .contact-branch .contact-branch-item .info-contact-branch-item {line-height: 20px;}
.contact-box .contact-form-box {margin-top: 32px;}
.contact-box .contact-form-box .contact-map {width: calc(50% - 10px); float: left; height: 400px;}
.contact-box .contact-form-box .contact-form {width: calc(50% - 10px); float: right;}
.contact-box .contact-form-box .contact-form .contact-form-item {margin-bottom: 12px;}
.contact-box .contact-form-box .contact-form .contact-form-item input {height: 32px; line-height: 32px; width: 100%; box-sizing: border-box; padding: 0 12px; border: 1px solid #dbdbdb;}
.contact-box .contact-form-box .contact-form .contact-form-item textarea {height: 210px; line-height: 32px; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #dbdbdb;}
.contact-box .contact-form-box .contact-form .contact-form-item button {display: inline-block; margin-top: 20px; padding: 8px 16px; background: #d32f4e; border-radius: 4px; color: #fff; border: none; float: right;}
.title-contact-form {font-weight: bold; text-transform: uppercase; height: 30px; line-height: 30px; font-size: 18px; margin-bottom: 8px;}

.about-us {height: calc(100vh - 60px); background: url('../img/icon/aboutus.jpeg'); background-size: cover; background-repeat: no-repeat; position: relative;}
.about-us .our-mission {position: absolute; z-index: 1; top: 0; height: 100%; width: 400px; color: #fff; right: 0px;}
.about-us .our-vision {position: absolute; z-index: 1; bottom: 0; height: 260px; width: calc(100% - 400px); color: #fff; left: 0px;}
.about-us .title-about-us {text-transform: uppercase; font-size: 24px; font-weight: bold; height: 32px; line-height: 32px; margin-bottom: 12px;}
.about-us .content-about-us {line-height: 16px; text-align: justify; margin-bottom: 8px;}
.about-us .our-mission .our-mission-inner {position: absolute; top: 0; bottom: 0; height: 100px; padding: 0 24px; box-sizing: border-box; width: 100%;}
.about-us .our-vision .our-vision-inner {position: absolute; top: 0; bottom: 0; height: 148px; padding: 24px; box-sizing: border-box;}

.our-partners {display: flex; align-content: center; margin: 20px auto; flex-wrap: wrap;}
section .our-partners {min-height: 80vh;}
section .page-content .our-partners {min-height: 50vh;}
.our-partners .our-partner-item {width: 300px; height: 100px; margin: 12px auto;}
.our-partners .our-partner-item img {width: 80%; height: 80%; object-fit: contain; margin: auto; display: block;}

.breadcrumb ul li {float: left; margin-right: 24px; color: #333333; position: relative; height: 32px; line-height: 32px;}
.breadcrumb ul li:before {content: '/'; position: absolute; right: -12px;}
.breadcrumb ul li:last-child:before {display: none;}
.breadcrumb ul li a {display: block; color: #d32f4e;}

.list-our-services ul {display: flex; align-content: space-between; margin: 20px auto; flex-wrap: wrap;}
.list-our-services ul li {display: block; width: 100%; overflow: hidden; box-sizing: border-box; margin: auto 12px; padding: 12px; margin-bottom: 12px;  border-bottom: 1px solid #dbdbdb;}
.list-our-services ul li .service-avatar {float: left; width: 150px; height: 150px; overflow: hidden;}
.list-our-services ul li .service-avatar img {display: block; width: 100%; height: 100%; object-fit: cover;}
.list-our-services ul li .service-info {width: calc(100% - 200px); float: left; color: #000; margin-left: 12px;}
.list-our-services ul li .service-info .service-title {font-weight: bold; line-height: 32px; height: 32px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.list-our-services ul li .service-info .service-description {max-height: 112px; overflow: hidden; text-align: justify;}
.list-our-services ul li .service-angle {height: 150px; line-height: 150px; font-size: 48px; color: #000; float: right; font-weight: 100;}

.title-blog-detail {font-size: 24px; font-weight: bold; margin-bottom: 20px; text-align: center;}
.avatar-blog-detail {text-align: center;}
.avatar-blog-detail img {max-width: 100%; width: 500px;}

footer {height: 250px; background: url('../img/icon/footer.jpeg'); background-size: cover; background-repeat: no-repeat; position: relative; background-position: center center; padding: 40px 0; box-sizing: border-box;}
footer .cover {width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; top: 0; left: 0; position: absolute;}
footer .fix-small {z-index: 2;}
footer .menu-footer {display: flex; align-content: space-between; flex-wrap: wrap; width: 600px;}
footer .copyright {position: absolute; bottom: 0; text-align: center; width: 100%; color: #fff; font-size: 12px;}

.contact-box {display: flex; min-height: 80vh;}

.header-mobile {display: none;}
.alertify {border: none !important; border-radius: 0 !important}
.alertify-button {text-shadow: none !important; box-shadow: none !important; font-weight: normal !important; margin-left: 0 !important;}
.padding-content-mobile {margin-bottom: 40px;}

@media only screen and (max-device-width: 1024px) {
    .fix{ padding:0 10px }
}

@media only screen and (max-device-width: 768px) {
    .fix {padding: 0 10px;}
    header {height: 90px; z-index: 2;}
    header .logo {float: none; text-align: center;}
    header .logo img {height: 40px;}
    header .menu {margin: auto; width: 100%;}
    header .menu ul {display: flex; align-content: space-between; flex-wrap: wrap; font-size: 11px;}
    header .menu ul li {padding: 4px 0; margin: auto;}
    header .menu ul li:hover {border: none;}
    header .menu ul li.active {border: none;}
    section {position: relative; z-index: 1;}
    body {font-size: 14px; width: 100vw; overflow-x: hidden;}
    body.disable-scroll {height: 100vh; overflow: hidden;}
    .header-mobile {display: block; position: absolute; top: 0px; left: 12px; color: #fff; font-size: 32px;}
    .menu-box-mobile {position: absolute; width: 100vw; height: calc(100vh - 50px); top: 42px; left: -12px; background: #fff; font-size: 12px; display: none;}
    .menu-box-mobile ul li {height: 40px; line-height: 40px; border-bottom: 1px solid #dbdbdb; padding: 0 12px; box-sizing: border-box;}
    .menu-box-mobile ul li a {color: #454545; text-transform: uppercase; display: block;}
    .show-above {margin-top: -112px;}
    .slider {margin-top: -90px; height: calc(100vh + 60px);}
    .slider .ls-layer .layer-text-box {top: calc(100vh - 350px) !important; left: 12px !important; width: calc(100% - 20px);}
    .slider .ls-layer .layer-text-box .ls-title {font-size: 20px;}
    .slider .ls-layer .layer-text-box .ls-description {margin-top: 12px; line-height: 18px; font-size: 12px;}
    .slider .ls-layer .layer-text-box .ls-button {display: inline-block; margin-top: 20px; padding: 8px 16px; background: #d32f4e; border-radius: 8px;}
    .title-block {height: 52px; line-height: 52px; font-size: 16px;}
    .list-services ul li {width: 50%; height: 50vh; min-height: 400px;}
    .list-services ul li .service-info .service-description {font-size: 12px; text-align: left;}
    .contact-box .contact-branch .contact-branch-item {width: 100%; padding: 12px; box-sizing: border-box;}
    .index-page-block .contact-box .contact-form-box {display: none;}
    .contact-box .contact-form-box .contact-map {float: none; width: 100%; padding: 0 12px; box-sizing: border-box;}
    .contact-box .contact-form-box .contact-form {float: none; width: 100%; padding: 0 12px; box-sizing: border-box;}
    .our-partners .our-partner-item {width: 50%;}
    .our-partners .our-partner-item img {width: 80%; height: 80%;}
    .about-us {height: auto;}
    .about-us .our-mission {width: 100%; top: auto; left: auto; right: auto; height: auto; position: relative;}
    .about-us .our-mission .our-mission-inner {position: relative; height: auto; padding: 12px;}
    .about-us .our-vision {width: 100%; top: auto; left: auto; right: auto; height: auto; position: relative;}
    .about-us .our-vision .our-vision-inner {position: relative; height: auto; padding: 12px;}
    .about-us .title-about-us {font-size: 16px; line-height: 24px; height: 24px;}
    .about-us .content-about-us {font-size: 12px;}
	footer {height: 200px;}
    footer .menu-footer {width: 100%; font-size: 10px;}
    .list-our-services ul li {width: 100%; margin: auto; margin-bottom: 12px; border: none; border-bottom: 1px solid #dbdbdb; height: 112px; padding: 0; padding-bottom: 12px;}
    .list-our-services ul li .service-avatar {width: 100px; height: 100px;}
    .list-our-services ul li .service-angle {height: 100px; line-height: 100px; font-size: 36px;}
    .list-our-services ul li .service-info {width: calc(100% - 132px);}
    .list-our-services ul li .service-info .service-title {height: 24px; line-height: 24px; font-size: 12px;}
    .list-our-services ul li .service-info .service-description {font-size: 12px; max-height: 56px;}
    .breadcrumb ul li {font-size: 12px; line-height: 24px; height: 24px;}
    .title-blog-detail {margin-bottom: 0;}
    .page-content .fix-small {padding: 0 8px;}
    .hideItem {display: none !important;}
    .padding-content-mobile {padding: 0 12px;}
    .contact-box .contact-branch .contact-branch-item:last-child {padding-top: 0; margin-top: -10px;}
    .contact-box .contact-branch .contact-branch-item:last-child .title-contact-branch-item {font-weight: normal; font-size: 14px; margin-bottom: 0;}
    .contact-box .contact-form-box {margin-top: 12px;}
}

@media only screen and (max-device-width: 320px) {
  header .menu ul {font-size: 10px;}
}