@charset "utf-8";
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,
small, strike,  var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, 
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}
a{text-decoration:none;}
.clear{clear:both;}
* { padding:0; margin:0;}
ul, li{ list-style:none;}
img{ border:none;}

body {font-family: sans-serif; font-weight:normal; overflow-x:hidden; font-size: 14px; background: #eeeeee;}

@font-face {
    font-family: 'myAvo';
    src: url('../fonts/utm-avo-webfont.eot');
    src: url('../fonts/utm-avo-webfont.eot?#iefix'), /* IE4+ */
         url('../fonts/UTMAvo.woff') format('woff'),
         url('../fonts/UTM-Avo.ttf') format('truetype'), /* font chuan */
         url('../fonts/UTMAvo.svg#vni-courinormal') format('svg'); /* iphone, ipad*/
}
@font-face {
    font-family: 'myBanqueR';
    src: url('../fonts/UTM-BanqueR.ttf') format('truetype'); /* iphone, ipad*/
}

header.wrap-header {width: 100%; background: rgba(0, 0, 0, 0.6); height: 60px; margin: auto; padding: 5px 0px; position: fixed; top: 0; z-index: 9999;}
.conten {width: 80%; margin: auto; clear:both;}
footer {width: 100%; height: auto; margin: auto;}
.header {-webkit-box-shadow: 0 0.063em 0.25em rgba( 37, 50, 55, .25 ); /* 1 4 */ box-shadow: 0 0.063em 0.25em rgba( 37, 50, 55, .25 ); /* 1 4 */ -webkit-transition-duration: .5s; transition-duration: .5s;
 -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); -webkit-transition-property: -webkit-transform;
 transition-property: transform; } 
.header--hidden { -webkit-transform: translateY( -100% ); -ms-transform: translateY( -100% ); transform: translateY( -100% ); }
.cd-main-content .cd-btn { padding: 10px; font-size: 16px; position: absolute; top: 5px; left: 10px; background-color:none; margin-top:10px;}
.logo {font-size: 28px; height: 40px; color: #FFF; text-align: center; font-family: 'myBanqueR';} .logo img {margin-bottom: -20px; margin-right: 10px;}.logo a {color: #FFF;}
.link-login {float: right; font-size: 14px; color: #FFF; padding: 10px; border-radius: 10px; position: absolute; top: 15px; right: 10px; display:none;}

.title-page {font-family:'myAvo'; font-size: 22px; color: #666666; text-transform: uppercase; margin: 20px auto;}
.title-box {font-family:'myAvo'; font-size: 18px; color: #666666; border-bottom: 3px #dd6e00 solid; margin-bottom: 10px; padding-bottom: 3px;}
.page-home .title-page {text-align: center;}
.page-home-2col .title-page {margin: 5px auto;}
.wrap-service-shome {width: 100%; margin: auto; overflow: hidden;}

.service-shome {margin-top: 0px; overflow: hidden; margin-bottom: 40px;}
.service-shome span.img-service {width: 100%; overflow: hidden; float: left; text-align: center; position: relative; margin-bottom: -20px; }
.service-shome span.img-service img {width: 100%; position: relative; transition:All 0.3s ease; -webkit-transition:All 0.3s ease; -moz-transition:All 0.3s ease; -o-transition:All 0.3s ease; transform: scale(1) ; -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -o-transform: scale(1) ; -ms-transform: scale(1) ;}
.service-shome .name-service {background: #ffbf00; float: left; width: 94%; margin:0px 3%; height: auto; position: relative; z-index: 1; transform: skew(-25deg) rotateX(0deg);-webkit-transform: skew(-25deg) rotateX(0deg);-moz-transform: skew(-25deg) rotateX(0deg);-o-transform: skew(-25deg) rotateX(0deg);-ms-transform: skew(-25deg) rotateX(0deg); transform-style: preserve-3d;transition: all 1.6s ease;}
.service-shome .name-service a {padding:10px 10px 10px 20px; float: left; color: #000; height: 18px; font-size: 16px; transform: skew(25deg);-webkit-transform: skew(25deg);-moz-transform: skew(25deg);-o-transform: skew(25deg);-ms-transform: skew(25deg);}
.service-shome .description-service {text-align: left; height: 30px; overflow: hidden; color: #333; font-size: 14px; line-height: 20px; display: block; padding: 10px; padding-right: 25%; float: left;}
.service-shome .btn-more-icon {background: #000; padding: 15px; margin: -10px 10px -100% 0px; float: right; text-align:center; color: #FFF; transform: skew(-25deg) rotateY(0deg);-webkit-transform: skew(-25deg) rotateY(0deg);-moz-transform: skew(-25deg) rotateY(0deg);-o-transform: skew(-25deg) rotateY(0deg);-ms-transform: skew(-25deg) rotateY(0deg); transform-style: preserve-3d;transition: all 1.6s ease;}
.service-shome .info-service {float: left;position: absolute; top:-100%; height:100%; background: rgba(0,0,0,0.8); width: 100%; opacity: 0; transition:All 2s ease; -webkit-transition:All 2s ease; -moz-transition:All 2s ease; }
.service-shome .info-service p {padding: 15px; color: #FFF; font-size: 14px;}


.slide-service {width: 100%; position: relative; overflow: hidden; margin-top: 10px;}
.slide-service .customNavigation {position: absolute; top: 0px; right: 10px;}
.slide-service .customNavigation .btn {color: #FFF; float: left; margin-right: 2px; cursor: pointer; line-height: 20px; padding:5px 10px; background: #dd6e00; transform: skew(-25deg);-webkit-transform: skew(-25deg);-moz-transform: skew(-25deg);-o-transform: skew(-25deg);-ms-transform: skew(-25deg);}
.slide-service .service-shome {margin-bottom: 10px;}

.wrap-details {width: 100%; line-height: 25px; margin-top: 20px;}

.wrap-list-project li {margin: 10px 0px; padding-left: 10px;}
.wrap-list-project li .fa {margin-right: 10px; color: #dd6e00; margin-left: 5px; font-size: 10px}
.wrap-list-project li a {color: #333;}



.box-project {width: 100%; height: auto;}
ul.menu-project {padding-left: 5%; width: 95%; float: left; height: auto; border-bottom: 5px #dd6e00 solid; }
ul.menu-project li {overflow: hidden; float: left; margin-left: 1px; margin-top: 10px; background: #000; font-weight:bold; transform: skew(25deg);-webkit-transform: skew(25deg);-moz-transform: skew(25deg);-o-transform: skew(25deg);-ms-transform: skew(25deg); }
ul.menu-project li a {float:left; padding: 10px 20px; color: #FFF; transform: skew(-25deg);-webkit-transform: skew(-25deg);-moz-transform: skew(-25deg);-o-transform: skew(-25deg);-ms-transform: skew(-25deg); }
ul.menu-project li:hover {background: #dd6e00; padding-top: 5px; margin-top: 5px; box-shadow: -2px -3px 3px #555;}
.list-album-img {width: 100%; float: left; margin-bottom: 20px;}
.list-album-img a {width: 29.33%; background: #FFF; padding: 2%; float: left; text-align: center; color: #dd6e00; position: relative; font-weight: bold;}
.list-album-img a span.img-action {width: 100%; float: left; text-align: center; margin-bottom: 10px; overflow: hidden; position: relative; transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; }
.list-album-img a span.img-action img {width: 100%; position: relative; transition:All 0.3s ease; -webkit-transition:All 0.3s ease; -moz-transition:All 0.3s ease; -o-transition:All 0.3s ease; transform: scale(1) ; -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -o-transform: scale(1) ; -ms-transform: scale(1) ;}
.list-album-img a p {height: 32px; overflow: hidden; float: left; font-size: 14px; width: 100%; text-align: center; }

.box-contact {width: 100%; height: auto;}
.form-contact {width: 100%; float: left;}
#contactform {
  margin: 0;
}
#contactform ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
#contactform li {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  display: block;
}
#contactform label {
  margin: 0;
  width: 100%;
  display: block;
  padding: 5px 0;
  color: #646464;
  font: 16px Arial, Helvetica, sans-serif;
  text-transform: capitalize;
  float: left;
}
#contactform label span {
  color: #F00;
}
#contactform input.text {
  width: 98%;
  border: 1px solid #dfdfdf;
  margin: 5px 0;
  padding: 10px 5px;
  color: #000;
  text-align: left;
  background: #FFF;
}
#contactform textarea {
  width: 98%;
  border: 1px solid #dfdfdf;
  margin: 10px 0;
  padding: 5px;
  background: #FFF;
}


.sub-footer {width: 100%; background: #FFF; margin: auto; display:inline-block;}
.col-list-footer { float: left; width: 23%; margin:0px 1%; }
.bg-xam-trang {
background: rgba(238,238,238,1);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(238,238,238,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0 );}
.list-with-title { font-size: 12px; float: left;color: #333333; ing-left: 15px; padding: 20px 0px; }
.bg-xam-trang .list-with-title {padding-left: 10px; }
.list-with-title li {line-height: 2;}
.list-with-title li a {color: #333333;}
.list-with-title li a:hover {color: #3b579d;}
.list-with-title li a.twitter {color: #00aced;}
.list-with-title li a.facebook {color: #3b579d;}
.list-with-title li a.google-plus {color: #dd4a3a;}
.list-with-title li a.pinterest {color: #cb2026;}
.list-with-title li a.linkedin {color: #007bb6;}

.bottom-bar {background: #ffbf00; padding: 8px; font-weight: bold; color: #000;}
/* Phan trang */
.pagination {
  text-align: center;
  margin: auto;
    padding-left: 0px;
    margin: 20px 0px;
    border-radius: 4px;
    display: inline-block;
}
.pagination > span {
    display: inline;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 2;
    color: #FFF;
    cursor: default;
    background-color: #0096db;
    border-color: #428BCA;
}
.pagination span a {
    margin-right: 5px;
}
.pagination > span > a, .pagination > span > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    border-radius: 5px;
    margin-left: -1px;
    line-height: 1.42857;
    color: #000;
    text-decoration: none;
    background-color: #FFF;
    border: 1px solid #DDD;
}

.pagination > span:hover a {background-color: #0096db; opacity: 0.8;}
/* END phan trang */

/*=====================*/
.social-nav {
  padding: 0;
  list-style: none;
  display: inline-block;
  margin: 5px auto; }
  .social-nav li {
    display: inline-block; }
  .social-nav a {
    display: inline-block;
    float: right;
    width: 38px;
    height: 38px;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: 38px;
    background: #000;
    position: relative;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }

.model-0 {
  position: absolute;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  right: 0;
  z-index: 9;
  top: 220px; }
  .model-0 li {
    float: none;
    display: block; }
  .model-0 a:hover {
    padding-left: 20px;
    width: 65px; }
  .model-0 .twitter {
    background: #00aced; }
  .model-0 .facebook {
    background: #3b579d; }
  .model-0 .google-plus {
    background: #dd4a3a; }
  .model-0 .linkedin {
    background: #007bb6; }
  .model-0 .pinterest {
    background: #cb2026; }

.model-3d-0 a {
  background: #333;
  float: left;
  margin: 0 10px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  .model-3d-0 a:hover {
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg); }
    .model-3d-0 a:hover .fornt {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden; }
    .model-3d-0 a:hover .back {
      -webkit-backface-visibility: visible;
      -moz-backface-visibility: visible;
      -ms-backface-visibility: visible;
      -o-backface-visibility: visible;
      backface-visibility: visible; }
.model-3d-0 .front, .model-3d-0 .back {
  width: 38px;
  height: 38px;
  background: #333;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateZ(18px);
  -moz-transform: translateZ(18px);
  -ms-transform: translateZ(18px);
  -o-transform: translateZ(18px);
  transform: translateZ(18px);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -ms-backface-visibility: visible;
  -o-backface-visibility: visible;
  backface-visibility: visible; }
.model-3d-0 .back {
  font-size: 18px;
  -webkit-transform: rotateX(90deg) translateZ(18px);
  -moz-transform: rotateX(90deg) translateZ(18px);
  -ms-transform: rotateX(90deg) translateZ(18px);
  -o-transform: rotateX(90deg) translateZ(18px);
  transform: rotateX(90deg) translateZ(18px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; }
.model-3d-0 .twitter .back {
  background: #00aced; }
.model-3d-0 .facebook .back {
  background: #3b579d; }
.model-3d-0 .google-plus .back {
  background: #dd4a3a; }
.model-3d-0 .linkedin .back {
  background: #007bb6; }
.model-3d-0 .pinterest .back {
  background: #cb2026; }

/*=====================*/


#bannerBg{padding-top: 20px; background:url(../images/background-showcase.jpg) center top no-repeat; background-size: 100% 100% !important; width: 100%; overflow: hidden;}
#bannerBg .title-page {color: #FFF; text-align: center; font-size: 26px; text-shadow:3px 3px 2px #000;}
#containingDiv { width:960px;margin:0 auto; padding:20px 0 20px 0; }

.breadcrumbs {
  font-size: 13px;
    padding: 10px;margin-top: 8px;
    margin-bottom: 10px;
  font-weight: bold;
  color: #007BB6;
}
.breadcrumbs a { text-decoration: none; color: #333; font-weight: normal;}

nav.menu ul.sm-blue li a.active {color:#dd6e00;}

@media screen and (min-width: 1200px){
  .conten {width: 1180px;}
}

@media screen and (max-width:1200px) and (min-width:1024px){
  .title-slogan {font-size: 20px;}
}

@media screen and (max-width: 1023px){
  .box-album-image .list-album-img a {width: 44%; border: 12px #FFF solid; }
}

@media screen and (max-width: 980px){
  .title-slogan {font-size: 20px; line-height: 18px;}
  .search-dt {margin-top: 5px;}
  .box-album-image .list-album-img a {width: 44%; border: 10px #FFF solid; }
}



@media screen and (max-width: 850px) {

}

@media screen and (min-width:769px){
    .service-shome:hover .name-service {transform: skew(-25deg) rotateX(360deg);-webkit-transform: skew(-25deg) rotateX(360deg);-moz-transform: skew(-25deg) rotateX(360deg);-o-transform: skew(-25deg) rotateX(360deg);-ms-transform: skew(-25deg) rotateX(360deg); }
    /*.service-shome:hover span.img-service {background-size:auto 150% !important; }*/
    .service-shome:hover .info-service {top: 0; opacity: 1;}
    .service-shome:hover span.img-service img {transform: scale(1.3) ; -webkit-transform: scale(1.3) ; -moz-transform: scale(1.3) ; -o-transform: scale(1.3) ; -ms-transform: scale(1.3) ;}
    .service-shome:hover .btn-more-icon {transform: skew(-25deg) rotateY(360deg);-webkit-transform: skew(-25deg) rotateY(360deg);-moz-transform: skew(-25deg) rotateY(360deg);-o-transform: skew(-25deg) rotateY(360deg);-ms-transform: skew(-25deg) rotateY(360deg); }
    .wrap-list-project li:hover a {color: #dd6e00;  text-decoration: underline;}
    .wrap-list-project li:hover .fa {color: #ffbf00;}

    .list-album-img a:hover {box-shadow: 0px 0px 10px #888; z-index: 2;}
    .list-album-img a:hover span.img-action img {transform: scale(1.3) ; -webkit-transform: scale(1.3) ; -moz-transform: scale(1.3) ; -o-transform: scale(1.3) ; -ms-transform: scale(1.3) ;}

    #cssmenu > ul {padding-left: 5%; width: 100%; background: none; float: left; height: auto; border-bottom: 5px #dd6e00 solid; }
    #cssmenu > ul > li { margin-left: 1px; margin-top: 10px; background: #000; font-weight:bold; transform: skew(25deg);-webkit-transform: skew(25deg);-moz-transform: skew(25deg);-o-transform: skew(25deg);-ms-transform: skew(25deg); }
    #cssmenu ul li a { color: #FFF; transform: skew(-25deg);-webkit-transform: skew(-25deg);-moz-transform: skew(-25deg);-o-transform: skew(-25deg);-ms-transform: skew(-25deg); }
    #cssmenu > ul > li:hover,#cssmenu > ul > li.active {background: #dd6e00; padding-top: 5px; margin-top: 5px; box-shadow: -2px -3px 3px #555;}
	#cssmenu ul ul li a {background: #dd6e00; }
}

@media screen and (max-width:768px){
  
  #cssmenu { background: #333333;}
  .list-album-img a {width: 44%; padding: 3%;}
  .col-list-footer {width: 48%; height: 220px;}
}

@media screen and (min-width:641px){
  .search-mb {display: none;}
}

@media screen and (max-width:640px){
  .search-dt {display: none;}
  .search-mb {text-align: center; width: 100%; float: left; height: 50px;}
  .in-search {padding: 16px; float: none; width: 90%;}
  .nut-tim {float: none; margin-bottom: -10px;}
  .li-seach {width: 100%; overflow: hidden; float: left;}
  .news-more ul.news-more-list1 li { width: 48%; margin-right: 2%; float: left; }
}

@media screen and (max-width:480px){
  .conten {width: 90%;}
  .logo {margin-left: 5px; }
  .link-login {display: none;}
  .list-album-img a {width: 90%; padding: 5%; box-shadow: 0px 0px 1px #666;}
  .col-list-footer {width: 98%; height: 180px;}
}





.cd-btn {
-webkit-animation: csscd-btn 5s 169999 ease;
-moz-animation: csscd-btn 5s 169999 ease;
-o-animation: csscd-btn 5s 169999 ease;
}
@-webkit-keyframes csscd-btn {
0% { transform: rotateY(0deg); }
90% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg);transform: rotateY(360deg); }
}
@-moz-keyframes csscd-btn {
0% { transform: rotateY(0deg); }
90% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg);transform: rotateY(360deg); }
}
@-o-keyframes csscd-btn {
0% { transform: rotateY(0deg); }
90% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg);transform: rotateY(360deg); }
}

.sm-nowrap {left:auto !important; right:0 !important;}