/* ==========================================================================
  Nguyen Thuan Tech
  Phone: 0906 306 135;
  Email: nguyenthuantech@gmail.com;
   ========================================================================== */
body{font-size: 13.5px;line-height: 1.5;margin: 0;padding: 0;color: #545454;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
*{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;font-family:Arial,'Open Sans',sans-serif;}
img{border: 0;}
a,a:hover{text-decoration: none;border: 0;cursor: pointer;}
a:not([href]){cursor: auto!important}
a:not([href]):hover{text-decoration: none!important} 
.mp{margin: 0;padding: 0}
*:focus,*:active{outline: none}
.off-none {display: none !important;}
.off-block {visibility: hidden !important}
.clip-xy{position: absolute;clip: rect(48px, 126px, 80px, 5px);}
.clear-b,.clear-a,.clear-ab {*zoom: 1;}
.clear-ab:before,.clear-ab:after {clear: both;content: "";display: block;}
.clear-b:before {clear: both;content: "";display: block;}
.clear-a:after {clear: both;content: "";display: block;}
.show {display: block;}
/*----- Loader -----*/
#loader {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%vh;background-color: #ffffffc2;z-index: 10000;text-align: center;vertical-align: middle;}
.fa-3x{vertical-align: middle;height: 100%; display: inline-flex;align-items: center;font-size: 2.5em}
.fa-3x  > div{padding: 30px 50px;border:1px solid gray;background-color: #fff;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.05);}
.fa-3x  > div i{color: #0672b3}
.fa-3x  > div p{display: block;font-size: 16px;padding: 0 30px}
/*----- Close Loader -----*/
/*----- Pagination -----*/
.phantrang{width: 100%;margin-bottom: 20px;margin-top:20px;float: left;}
ul.pagination {display: block;padding: 0;margin: 0;}
ul.pagination li {display: inline;}
ul.pagination li.disabled{display: none;}
.pagination a{margin-right: 5px;color: #545454;float: left;text-decoration: none;border: 1px solid #545454;width: 35px;height: 35px;font-size: 14px;text-align: center;line-height: 35px}
.pagination .active span {float: left;background-color: #F27E20;color: white;border: 1px solid #F27E20;margin-right: 5px;width: 35px;height: 35px;font-size: 14px;text-align: center;line-height: 35px}
.pagination a:hover:not(.active) {background-color:#F27E20;border: 1px solid #F27E20;color: #fff;width: 35px;height: 35px;font-size: 14px;text-align: center;line-height: 35px}
/*.pagination a:first-child {border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
.pagination a:last-child {border-top-right-radius: 5px;border-bottom-right-radius: 5px;}*/
/*----- Close Pagination -----*/
/*----- Jumlink -----*/
.box-jumlink{margin-bottom: 20px;}
.jumlink{display: block;list-style: none;border-bottom: 1px solid #eae9e9}
.jumlink li{display: inline-block;float: left;}
.jumlink li a{padding: 6px 1px 6px 5px;display: inline-block;color: #929290;font-weight: normal;}
.jumlink li a:hover{color: #636361;}
.jumlink li a i{display: inline-block;font-size: 11px}
.jumlink li:last-child a{color: #545454}
.jumlink li:first-child a i{margin-right: 3px}
/*----- Close Jumlink -----*/
/*----- Print error -----*/
.print-error {float: left;}
.print-error ul{margin-bottom: 0;float: left;margin-top: 0;padding-left: 20px}
.print-error ul li{color: #e40606;font-size: 12px;font-style: italic;font-weight: bold;}
.print-error-msg{width: 100%}
.print-error-msg ul{padding: 0 10px 5px 20px;}
.print-error-msg ul li{color: #F27E20}
.print-error-msg1 ul li{color: #F27E20}
/*----- Close Print error -----*/
/*----- Box Fix Right -----*/
.boxfixright{position: fixed;right: 5px;bottom: 50px;z-index:999999}
.boxfixright ul{display: block;list-style: none;}
.boxfixright ul li{display: block;}
.boxfixright ul li + li{margin-top: 5px}
.boxfixright ul li a{display: block;}
.boxfixright ul li a img{width: 100%}
.boxfixright ul li a .heartbitt{
    position: absolute;
    top: -10px;
    left: -10px;
    height: 60px;
    width: 60px;
    z-index: -1;
    border: 10px solid #3c821dd1;
    border-radius: 50%;
    -moz-animation: heartbitt 1s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-animation: heartbitt 1s ease-out;
    -o-animation-iteration-count: infinite;
    -webkit-animation: heartbitt 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.boxfixright ul li a:hover .heartbitt{border: 10px solid #3c821d;}
@-moz-keyframes heartbitt {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0; }
  25% {
    -moz-transform: scale(0.1);
    opacity: 0.1; }
  50% {
    -moz-transform: scale(0.5);
    opacity: 0.3; }
  75% {
    -moz-transform: scale(0.8);
    opacity: 0.9; }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0; } }

@-webkit-keyframes heartbitt {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0; }
  25% {
    -webkit-transform: scale(0.1);
    opacity: 0.1; }
  50% {
    -webkit-transform: scale(0.5);
    opacity: 0.3; }
  75% {
    -webkit-transform: scale(0.8);
    opacity: 0.9; }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0; } 
}
/*----- Close Box Fix Right -----*/
/*----- Arrow Border Down (Add with Span Class) -----*/
.arrow{position: absolute;right: 15px;top:16px;}
.arrow::before,.arrow::after{position: relative;content: '';display: block;width: 6px;height: 1px;background: #0000008c;}
.arrow::before{transform: rotate(45deg);}
.arrow::after{left: 4px;top:-1px;transform: rotate(-45deg);}
/*----- Close Arrow Border Down -----*/
/*----- Arrow Fill (Add with Span Class) -----*/
.arrowfill{display: block;position: relative;height: 0}
.arrowfill::before {border-style: solid;border-width: 0.05em 0.05em 0 0;left: calc(100% - 10px);top:-12px;content: '';display: inline-block;height: 5px;position: relative;margin: 0;transform: rotate(-45deg);width: 5px;border-color: #c0bdbd85;background-color: #fff;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
.arrowfill.bottom:before{top: 0;transform: rotate(135deg);}
.arrowfill.right:before{left: 0;transform: rotate(45deg);}
.arrowfill.left:before{left: 0.25em;transform: rotate(-135deg);}
/*----- Close Arrow Fill -----*/
/*----- Dropdown-----*/
/* In HTML Add <a id="butdropdowcht" onclick="dropdowncht()">Button Click Dropdown</a>  in Header*/
#butdropdowcht{display: block;position: relative;}
.dropdown-content-cht{display: none;position: absolute;top:calc(100% + 5px);background-color: #fff;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);right: 0;z-index: 9999;border: 1px solid #c0bdbd85;height: auto;}
.dropdown-content-cht a{font-weight: 500;color: #545454;padding: 12px 16px;text-decoration: none;display: block;}
.dropdown-content-cht a:hover{text-decoration: underline;background-color: #d0cfcf12}
.dropdown-content-cht a + a{border-top: 1px solid #f5f5f5}
/*----- Close Dropdown-----*/
/*----- Colum1 -----*/
.colum1{-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;}
/*----- Close Colum1 -----*/
/*----- Bach to top -----*/
#back-to-top{display: none;z-index: 99999999}
/*----- Close Bach to top */
/*----- Others -----*/
.change .bar3{-webkit-transform: rotate(45deg) translate(-8px, -8px);transform: rotate(45deg) translate(-8px, -8px);}
.shake:hover{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}
.shake2:hover{animation: shake2 0.5s cubic-bezier(.75,.05,.50,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}
@keyframes shake{10%, 90% {transform: translate3d(-1px, 0, 0);} 40%, 60% {transform: translate3d(4px, 0, 0);} }
@-webkit-keyframes waggle{ 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-0.5deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(-1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(0.5deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-0.5deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(0deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0.5deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(0deg); } }
.waggle:hover,.waggle:focus{-webkit-animation-name: waggle;-webkit-animation-duration: 2s;-webkit-transform-origin:50% 50%;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;}
@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, -8px, 0); }
}
.ball {
  animation: bounce 0.3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
/*----- Close Others -----*/
/*----- Vote -----*/
a.votepro{text-align: left;display: block;position: relative;color: #211f1f94;font-size: 12px;}
a.votepro i.star{display: inline-block;width: 75px;height: 14px;background: url(/resources/views/client/asset/image/ico/icon/star_min.png) repeat-x 0 -87px;vertical-align: middle;}
a.votepro i.star i {display: block;width: 75px;height: 14px;background: url(/resources/views/client/asset/image/ico/icon/star_min.png) repeat-x 0 0;}
/*----- Close Vote -----*/
/*----- BxSlider -----*/
.bx-wrapper{box-shadow: none!important;border: 0!important;margin-top: 0;margin-bottom: 0!important;}
.bx-wrapper img{width: 100%}
.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:50px;height:50px;text-indent:-9999px;z-index:9999}
.bx-wrapper .bx-prev{left:10px;background:url(images/controls2.png) 0 0px no-repeat}
.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 -50px}
.bx-wrapper .bx-next{right:10px;background:url(images/controls2.png) -50px 0 no-repeat}
.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-50px -50px}
/*----- Close BxSlider -----*/
/*----- Owl -----*/
.owl-theme .owl-nav{height: 1px;margin-top: 0}
.owl-carousel .nav-btn{position: absolute;cursor: pointer;}
.owl-carousel .owl-prev.disabled,.owl-carousel .owl-next.disabled{pointer-events: none;opacity: 0.05;}
.owl-carousel .prev-slide{
  font-size: 0;
  left: 0px;width: 50px;height: 50px;opacity: 0.2;bottom:calc(50% - 25px);
  cursor: pointer;
  background: url(images/controls2.png) no-repeat;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-position:0 -50px
}
.owl-carousel .next-slide{font-size: 0;
  right: 0px;width: 50px;height: 50px;opacity: 0.2;bottom:calc(50% - 25px);
  cursor: pointer;
  background: url(images/controls2.png) no-repeat;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-position: -50px -50px;
}
.owl-carousel .prev-slide:hover{
  opacity: 1;
}
.owl-carousel .next-slide:hover{
  opacity: 1;
}
.owl-carousel.owl-drag .owl-item:hover{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
/*----- Close Owl -----*/
/*----- Modal Search -----*/
/*
In HTML Add <a id="showtk0"><i class="fas fa-search"></i></a> in Header 
Open HTML Modal Search in Index
Open Script Modal Search in Index
*/
.modaltk {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0 0 0 / 87%);
}
.modaltk-content {
  background-color: transparent;
  margin: auto;
  padding: 0;
  width: 85%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  position: relative;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
.modaltk-content .closetk {
  position: absolute;right: 5px;top: -40px;
  font-size: 30px;
  font-weight: bold;color: #fff;cursor: pointer;
}
.modaltk-content .box-search{width: 100%;margin: 0;padding: 0;display: none;}
.modaltk-content .box-search input{width: calc(100% - 50px);float: left;font-size: 24px;border: 0;background:transparent;color: #fff;padding: 10px 15px;border-bottom: 1px solid #ffffff2e}
.modaltk-content .box-search button{display: block;float: left;border: 0;background: transparent;text-align: center;width: 50px;line-height: 50px;height: 50px;cursor: pointer;}
.modaltk-content .box-search button i{font-size: 26px;color: #fff;line-height: 50px}
.modaltk-content .box-search button:hover i{color: #D56E83}
/*----- Close Modal Search -----*/
/*----- Check -----*/
.check-cht {display: inline-block!important;position: relative;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;padding-left: 20px;margin-bottom: 8px;font-size: 12px;margin-right: 20px}
.check-cht input {position: absolute;opacity: 0;cursor: pointer;}
.checkmark {position: absolute;top: 0;left: 0;height: 16px;width: 16px;background-color: #eee;border-radius: 50%;}
.check-cht:hover input ~ .checkmark {background-color: #ccc;}
.check-cht input:checked ~ .checkmark {background-color: #2196F3;}
.checkmark:after {content: "";position: absolute;display: none;}
.check-cht input:checked ~ .checkmark:after {display: block;}
.check-cht .checkmark:after {top: 4px;left: 4px;width: 8px;height: 8px;border-radius: 50%;background: white;}
/*----- Close Check -----*/
/*----- Search suggestions -----*/
.show{display: block!important}
.search-results {display: block;z-index: 99999;padding: 0;background:transparent;position: absolute;top:40px;width: 100%}
.outdiv{background-color: #ffffffeb;-webkit-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.7);-moz-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.7);box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.7);padding: 10px 5px 10px 5px;}
.listsearch{padding-left: 10px;padding-bottom: 10px;max-height: 200px;overflow-y: auto;margin:0;}
.search-result-items{padding-bottom: 10px}
.goiy{font-size: 14px;font-weight: normal;margin:0;}
.listsearch li a{color: #545454;font-size: 12px}
.listsearch li a:hover{color: #DF1F1F}
.listsearch li a:hover b{color: #DF1F1F!important}
/*----- Close Search suggestions -----*/

/*----- Cam #EBB28F  - Xám #617A74 - Xanh rêu -----*/
#wrapper{width: 100%;position: relative;margin: 0;padding: 0;}
.full-cht{width: 100%;position: relative;max-width: 1600px}

header,footer,.content{width: 100%;position: relative;}
#wrapper{width: 100%;position: relative;margin: 0;padding: 0;}
.full-cht{width: 100%;position: relative;}
.maxw-cht{max-width: 1200px;margin: 0 auto;}
header,footer,.content{width: 100%;position: relative;}

header{background-image: url("/resources/views/client/asset/images/hearder-bg.png");background-repeat: no-repeat;background-size: 100%;margin-bottom: 0}
.logo{width: 150px;display: block;float: left;margin-top: 20px;margin-bottom: 10px}
.logo img{width: 100%}
header h1{display: block;float: left;width: 400px;margin-top: 15px;font-size: 22px;text-transform: uppercase;line-height: 1.4;text-align: center;color: #014E94}
header h1 span{display: block;}
header h1 b{color: #F27E20}
header .inline-1 .boxright{float: right;}
header .inline-1 .boxright p.hotline{display: block;width: 100%;font-size: 18px;font-weight: bold;margin-top: 10px;margin-bottom: 5px}
header .inline-1 .boxright p.hotline i{margin-right: 5px;color: #F27E20}
header .inline-1 .boxright p.hotline a{color:  #F27E20;font-size: 20px;font-weight: normal;}
header .inline-1 .boxright p.hotline a + a:before{content: '-';display: inline-block;margin: 0 5px;font-weight: normal;}
header .inline-1 .boxright .boxsearch{width: 100%;border:1px solid #CACAD9;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;overflow: hidden;background-color: #fff}
header .inline-1 .boxright .boxsearch .key{display: inline-block;width: calc(100% - 40px);font-size: 13px;padding: 7px 10px;border: 0;float: left;color: #808086}
header .inline-1 .boxright .boxsearch button{width: 40px;display: inline-block;border: 0;padding: 7px 10px;float: left;cursor: pointer;}
header .inline-1 .boxright .boxsearch button:hover,header .inline .boxright .boxsearch button.active{background-color: #014E94;color: #fff}

.slogan{position:relative;height:30px;overflow:hidden}
.slogan p{position: absolute;white-space: nowrap;animation: floatText 10s infinite  ease-in-out;font-size:16px;font-weight:bold;padding:0;margin:0;text-transform:uppercase;color:#014E94;}
@-webkit-keyframes floatText{
  from {
    left: 00%;
  }
  to {
    /* left: auto; */
    left: 100%;
  }
}

.inline-2{display: block;background-color: #024F95;}
.boxothers{display: block;float: right;list-style: none;}
.boxothers li{display: block;float: left;}
.boxothers li a{display: block;padding: 5px 10px;color:#fff;font-size: 12px;cursor: pointer!important}
.boxothers li a i{margin-right: 5px;padding: 10px 0}
.boxothers li a:hover{text-decoration: underline;}
.boxothers li a img{display: inline-block;width: 25px;height: 25px;vertical-align: middle;margin-right: 5px;-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;}
.inline-2 nav{position: relative;}
.boxmenupc{display: block;list-style: none;float: left;}
.boxmenupc > li{display: block;float: left;padding: 5px 0;position: relative;}
.boxmenupc > li + li::before{content:"";width:1px;float: left;height: 15px;margin-top: 10px;background-color: #ffffff3b;display: block;}
.boxmenupc > li > a{display: block;color: #fff;text-transform: uppercase;padding: 7px 18px;font-size: 14px}
.boxmenupc > li > a > i{margin-left: 5px; font-size: 11px}
.boxmenupc > li:hover > a,.boxmenupc > li.active > a{-webkit-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;background-color: #F27E20}
.boxmenupc > li:hover + li::before{background-color: transparent;}
.boxmenupc > li:hover::before{background-color: transparent;}
.boxmenupc > li.active + li::before{background-color: transparent;}

.sub-boxmenupc-1{display: none;list-style: none;position: absolute;top:100%;left:calc(50% - 100%);width: 200%;background-color: #fff;z-index: 9999999;padding: 5px 0 5px 0;-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35);border-bottom: 3px solid #F27E20}
.boxmenupc > li:hover .sub-boxmenupc-1{display: block;}
.sub-boxmenupc-1 li{display: block;}
.sub-boxmenupc-1 li a{display: block;padding: 8px 10px;color:#333;font-size: 14px;line-height: 1.4;vertical-align: middle;}
.sub-boxmenupc-1 li + li{border-top: 1px solid #f3eded;}

.bx-wrapper{border-bottom: 5px solid #ECECFB!important;position: relative;}
.arrow-up{width: 74px;display: block;position: absolute;bottom: -5px;margin-left: calc(50% - 37px)}
.arrow-up img{width: 100%;}

.box-partner{margin-top: 60px;background-color: #F8F8F8;padding: 30px 0}
.logoft{display: block;padding:10px 20%!important;opacity: .6;}
.logoft:hover{display: block;padding:10px 20%!important;opacity: 1;}


/*-------------------*/
.box-album{margin-top: 20px;margin-bottom: 20px}
.box-album ul{display: block;list-style: none;}
.box-album ul li{display: block;width: calc(25% - 10px); margin: 5px;border: 3px solid #80808012;float: left;}
.box-album ul li img{width: 100%}
.row-img-cht > .column-img-cht {
  padding: 0 0;
}

.row-img-cht:after {
  content: "";
  display: table;
  clear: both;
}

.column-img-cht {
  float: left;
  width: calc(25% - 10px);overflow: hidden;border: 5px solid #eeeeee2e;margin:5px;cursor: pointer;
}

/* The Modal (background) */
.modal-img-cht {
  display: none;
  position: fixed;
  z-index: 9999999999999999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content-img-cht {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close-img-cht {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;position: fixed;
}

.close-img-cht:hover,
.close-img-cht:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides-img-cht {
  display: none;
}

.cursor-img-cht {
  cursor: pointer;
}

/* Next & previous buttons */
.prev-img-cht,
.next-img-cht {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next-img-cht {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-img-cht:hover,
.next-img-cht:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext-img-cht {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.album img {
  margin-bottom: -4px;
}

.caption-container-img-cht {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo-img-cht {
  opacity: 0.6;
}

.active-img-cht,
.demo-img-cht:hover {
  opacity: 1;
}

.album img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow-img-cht:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*----------------*/

footer{background-color: #024F95;background-image: url(/resources/views/client/asset/images/footer-bg.png);background-size:cover;background-repeat: no-repeat;background-position: right bottom;}
footer .inline{padding: 50px 0}
.box-1{float: left;width: 32%;padding: 0 }
.box-2{float: left;width: 30%;margin-left: 4%}
.box-1 h2{display: block;font-size: 15px;text-transform: uppercase;color: #fff;margin-bottom: 10px;}
.box-1 > div{display: block;font-size: 14px;line-height: 1.4;color: #fff;text-align: justify;}
.box-2 h2{display: block;font-size: 15px;text-transform: uppercase;color: #fff;margin-bottom: 10px;}
.box-2 .list{list-style: none;}
.box-2 .list li{display: block;}
.box-2 .list li a{display: block;color: #fff;text-transform: uppercase;padding: 3px 17px;font-size: 14px;background-image: url("/resources/views/client/asset/images/icon-menu2.png");
background-repeat: no-repeat;background-position: 0 4px;border-bottom: 1px solid #f3eded08}
.box-2 .list li a:hover{text-decoration: underline;}

.box-2 .listinfo{list-style: none;}
.box-2 .listinfo li{display: block;color: #fff;font-size: 14px;padding: 3px 8px;}
.box-2 .listinfo li i{margin-right: 5px}
.box-2 .listinfo li > a{color: #fff}
.box-2 .listinfo li a + a:before{display: block;content: "-";color: #fff;display: inline-block;margin:0 5px;}
.box-2 .listinfo li a:hover{text-decoration: underline;}

.box-listpost{margin-top: 60px}
.nohome .box-listpost{margin-top: 30px!important}
.posts{display: block;list-style: none;float: left;}
.posts li{width: 100%;position: relative;}
.posts li + li{margin-top: 20px}
.posts li > a{display: block;float: left;width: 35%;margin-right: 20px}
.posts li > a img{width: 100%}
.posts li > h3{display: block;float: left;width: calc(63% - 20px)}
.posts li > h3 a{font-size: 16px;color: #333;line-height: 1.4}
.posts li > h3 a:hover{color: #F27E20}
.posts li > div{display: block;float: left;width: calc(63% - 20px);margin-top: 10px;font-size: 14.5px;line-height: 1.4}
.posts li .detaillink{display: block;float: left;width: auto;background-color: #F27E20;color: #fff;font-size: 14.5px;padding: 5px 15px;-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;margin-top: 7px}
.posts li .detaillink:hover{background-color: #dc6708}

.box-contact{margin-top: 60px}

.infocontact{float: left;width: 370px;padding: 40px 30px;background-color: #024F95;background-image: url(/resources/views/client/asset/images/footer-bg.png);background-size: cover;background-position: right bottom;overflow: hidden;-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;margin-bottom: 20px}
.infocontact iframe{width: 100%}
.infocontact h3{color: #fff;font-size: 18px;display: block;}
.infocontact ul{list-style: none;display: block;padding: 10px 0;margin-bottom: 10px}
.infocontact ul li{display: block;color: #fff;font-size: 15px;padding: 3px 0}
.infocontact ul li i{margin-right: 5px}
.infocontact a{color: #fff}
.infocontact a + a:before{content: '-';display: inline-block;margin:0 5px;}
.formcontact{float: left;margin-bottom: 20px;width: calc(100% - 30px - 370px);margin-right: 30px}
.formcontact h3{color: #F27E20;font-size: 18px;display: block;margin-bottom: 15px}
.formcontact .name{width: 100%}
.formcontact label{font-size: 14px}
.formcontact input{width: 100%;margin-bottom: 7px;padding: 10px 10px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;border: 1px solid #eae9e9}
.formcontact textarea{width: 100%;margin-bottom: 7px;padding: 10px 10px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;border: 1px solid #eae9e9}
.formcontact .capt i{font-weight: bold;font-size: 18px}
.formcontact button{border: 0;cursor: pointer;display: block;float: left;width: auto;background-color: #F27E20;color: #fff;font-size: 14px;padding: 7px 20px;-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;margin-top: 7px}
.formcontact button:hover{background-color: #dc6708}


.content{min-height: 500px}
.title-home{display: block;text-align: center;float: left;color: #024F95;text-transform: uppercase;font-size: 26px;text-align: center;background-image: url("/resources/views/client/asset/images/icon_heading.png");
background-repeat: no-repeat;background-size: 130px;background-position: center bottom;padding-bottom: 30px}
.title-home span{color: #F27E20}

.home-1{margin-top: 30px}

.home-1 .services-col4{
    list-style: none;display: flex;width: 100%;margin-top: 30px!important;float: left;margin-bottom: 60px
}
.home-1 .services-col4 li{display: block;width: 23%;padding: 10px 20px;text-align: center;margin: 0 1%;border:1px solid #e6e4e4;}
.home-1 .services-col4 li > a{display: block;}
.home-1 .services-col4 li > a img{width: 100%;transition: all 0.3s;}
.home-1 .services-col4 li:hover > a img {transform: scale(1.1);}
.home-1 .services-col4 li > h3{display: block;font-size: 15px;text-transform: uppercase;margin-top: 10px}
.home-1 .services-col4 li > h3 a{display: block;color: #333;line-height: 1.4;padding: 5px }
.home-1 .services-col4 li > h3 a:hover{color: #024F95}

.home-1 .services-col3{
    list-style: none;display: flex;width: 100%;margin-top: 30px!important;float: left;
}
.home-1 .services-col3 li{display: block;width: 30.3%;padding: 10px 30px;text-align: center;margin: 0 1.5%;border:1px solid #e6e4e4;}
.home-1 .services-col3 li > a{display: block;}
.home-1 .services-col3 li > a img{width: 100%;transition: all 0.3s;}
.home-1 .services-col3 li:hover > a img {transform: scale(1.1);}
.home-1 .services-col3 li > h3{display: block;font-size: 15px;text-transform: uppercase;margin-top: 10px}
.home-1 .services-col3 li > h3 a{display: block;color: #333;line-height: 1.4;padding: 5px }
.home-1 .services-col3 li > h3 a:hover{color: #024F95}

.nohomeservices-col4{
    list-style: none;display: block;width: 100%;margin-top: 0;float: left;margin-bottom: 60px
}
.nohomeservices-col4 li{display: block;width: 45%;padding: 10px 20px;float: left;text-align: center;margin: 0 2.5%;border:1px solid #e6e4e4;overflow: hidden;margin-bottom: 30px}
.nohomeservices-col4 li > a{display: block;}
.nohomeservices-col4 li > a img{width: 100%;transition: all 0.3s;}
.nohomeservices-col4 li:hover > a img {transform: scale(1.1);}
.nohomeservices-col4 li > h3{display: block;font-size: 15px;text-transform: uppercase;margin-top: 10px}
.nohomeservices-col4 li > h3 a{display: block;color: #333;line-height: 1.4;padding: 5px;height: 52px;overflow: hidden;}
.nohomeservices-col4 li > h3 a:hover{color: #024F95}

.boxinfohome{position: relative;float: left;padding: 50px}
.boxinfohome .boxinfohome-left{position: relative;width: 50%;background-color:#fff;border:10px solid #ECECFB;padding: 50px }
.boxinfohome .boxinfohome-left h3{display: block;font-size: 24px;color: #333;line-height: 1.4;margin-bottom: 15px}
.boxinfohome .boxinfohome-left h3 span{color: #F27E20;margin-right: 5px}
.boxinfohome .boxinfohome-left > div *{font-size: 16px!important;line-height: 1.5}

.home-2{margin-top: 60px}
.nohome .home-2{margin-top: 30px!important}
.home-2 .projects{list-style: none;display: block;margin-top: 30px;float: left;}
.home-2 .projects li{display: block;float: left;width: 33.33%;position: relative;overflow: hidden;}
.home-2 .projects li > a{display: block;}
.home-2 .projects li > a img{width: 100%;transition: all 0.3s;margin-bottom: -5px}
.home-2 .projects li:hover > a img {transform: scale(1.1);}
.home-2 .projects li h3{display: block;position: absolute;bottom: 0;width: 100%}
.home-2 .projects li h3 a{display: block;padding: 10px 15px;background-color: #275095a8;color: #fff;font-weight: normal;line-height: 1.4}
.home-2 .projects li h3 a:hover{background-color: #275095ed}

.nohomeprojects{list-style: none;display: block;margin-top: 0;float: left;}
.nohomeprojects li{display: block;float: left;width: 33.33%;position: relative;overflow: hidden;}
.nohomeprojects li > a{display: block;}
.nohomeprojects li > a img{width: 100%;transition: all 0.3s;margin-bottom: -5px}
.nohomeprojects li:hover > a img {transform: scale(1.1);}
.nohomeprojects li h3{display: block;position: absolute;bottom: 0;width: 100%}
.nohomeprojects li h3 a{display: block;padding: 10px 15px;background-color: #275095a8;color: #fff;font-weight: normal;line-height: 1.4}
.nohomeprojects li h3 a:hover{background-color: #275095ed}

.box-partner{margin-top: 60px;background-color: #F8F8F8;padding: 30px 0}
.logoft{display: block;padding:10px 20%!important;opacity: .6;}
.logoft:hover{display: block;padding:10px 20%!important;opacity: 1;}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 70%; /* Could be more or less, depending on screen size */
  -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;overflow: hidden;
}
.modal-conten .close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}
.modal-conten .close:hover,
.modal-conten .close:focus {
  color: black;
  cursor: pointer;
}
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

input.nameinput, input.passinput {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;font-size: 14px
}
button.loginbut {
  background-color: #024F95;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%
}
button.loginbut:hover {
  opacity: 0.8;
}
.cancelbtn {
  border: 0;
  width: auto;
  padding: 10px 18px;
  background-color: #979594;color: #fff;cursor: pointer;
}
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 15%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}
span.psw a{color: #024F95}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}



.box-infouser{position: relative;}
.box-infouser .infouser-1{float: left;width: 100%;border-bottom: 1px solid #80808026;padding-bottom: 20px;}
.box-infouser .infouser-1 .avatar-user{display: block;width: 160px;float: left;margin-right: 15px}
.box-infouser .infouser-1 .avatar-user img{width: 100%}
.box-infouser .infouser-1 > div{float: left;width:calc(100% - 175px) }
.box-infouser .infouser-1 > div > h3{display: block;float: left;width: 100%;padding:0 0 5px 0;font-size: 16px;font-weight: bold;text-transform: uppercase;}
.box-infouser .infouser-1 .votepro{display: block;float: left;width: 100%;margin-bottom: 5px}
.box-infouser .infouser-1 .votepro span{margin-right: 5px;font-weight: bold}
.box-infouser .infouser-1 .job-user{display: block;float: left;width: 100%;padding: 2px 0;font-size: 14px}
.box-infouser .infouser-1 .job-user span{margin-right: 5px;font-weight: bold}
.box-infouser .infouser-1 .birthday-user{display: block;float: left;width: 100%;padding: 2px 0;font-size: 14px}
.box-infouser .infouser-1 .birthday-user span{margin-right: 5px;font-weight: bold}
.box-infouser .infouser-1 .phone-user{display: block;float: left;padding:  2px 0;font-size: 14px;margin-right: 50px}
.box-infouser .infouser-1 .phone-user span{margin-right: 5px;font-weight: bold}
.box-infouser .infouser-1 .email-user{display: block;float: left;padding:  2px 0;font-size: 14px}
.box-infouser .infouser-1 .email-user span{margin-right: 5px;font-weight: bold}
.box-infouser .infouser-1 .address-user{display: block;float: left;padding:  2px 0;font-size: 14px;width: 100%;}
.box-infouser .infouser-1 .address-user span{margin-right: 5px;font-weight: bold}

.link-user{display: block;float: left;list-style: none;width: 100%;padding: 15px 0}
.link-user li{display: block;float: left;width: 22%;margin:0 1.5%;text-align: center;}
.link-user li span{display: block;width: 100%;}
.link-user li .landung{font-size: 30px;color: #024F95}
.link-user li .diemtich{font-size: 30px;color: #F27E20}
.link-user li .dangxuat{display: inline-block;border: 0;background-color: #969494;color: #fff;padding: 5px 10px;cursor: pointer!important;margin-top: 8px;margin-bottom: 10px}
.link-user li .dangxuat:hover{background-color: #F27E20}

.detail-user{display: block;float: left;list-style: none;width: 100%;padding: 15px 0}

/*.form-lang{position: absolute;top: -5px;right: 0;background-color: #C05F28;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;overflow: hidden;padding: 5px 5px 2px 5px}
.form-lang select{border: 0;background:transparent;color: #fff}
.form-lang select option{color: #636361}
.form-lang select option:hover{background-color: #C05F28!important;}
.form-lang select option:checked{color:#929290;display: none;}
*/

.boxtablink {
  overflow: hidden;
  border: 1px solid #80808026;
  border-top: 0;border-right: 0;border-left: 0
}
.boxtablink button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;margin-right: 5px;background-color: #f2f2f2
}
.boxtablink button:hover {
  background-color: #024F95;color: #fff
}
.boxtablink button.tab-active {
  background-color: #024F95;color: #fff
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;min-height: 100px
}

.contenttab-left{float: left;width: 165px;padding: 10px 0;border-right: 1px solid #80808026;}
.contenttab-left > ul{display: block;list-style: none;padding-bottom: 10px!important}
.contenttab-left > ul li{display: block;}
.contenttab-left > ul li a{display: block;padding:5px 10px 5px 5px;color: #024F95;font-size: 13px;border-bottom: 1px solid #80808026}
.contenttab-left > ul li a span{display: block;font-size: 13.5px;font-weight: normal;color: #545454}
.contenttab-right{float: left;width: calc(100% - 165px);padding: 10px 0 10px 15px}
.contenttab-left > ul li:hover, .contenttab-left > ul li.active{background-color: #024F95}
.contenttab-left > ul li:hover a span, .contenttab-left > ul li.active a span{color: #fff}
.contenttab-right{float: left;width:calc(100% - 165px);padding: 10px 0;}
.file-user{display: block;list-style: none;padding: 5px 0;border-bottom: 1px solid #80808017}
.file-user li{display: block;}
.file-user li a{display: inline-block;padding-left: 20px;color: #545454;font-size: 14px;font-weight: bold;padding: 5px 15px;background-image: url(/resources/views/client/asset/images/icon-menu.png);
    background-repeat: no-repeat;
    background-position: 0 center;}
.file-user li a span{display: inline-block;margin-left: 10px;color: #024F95;font-weight: normal;}
.file-user li a span:hover{text-decoration:underline;}
.file-user li a:hover span{}

.colleft{width: 250px; float: left;}
.boxcate{width: 100%}
.boxcate > h2{display: block;width: 100%;font-size: 18px;font-weight: normal;text-transform: uppercase;color: #fff;background-color: #024F95;padding: 7px 5px;text-align: center;}
.boxcate .cate{display: block;width: 100%; list-style: none;margin-top: 5px}
.boxcate .cate > li{display: block;width: 100%;background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 6%, rgba(242,239,242,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(6%, rgba(255,255,255,1)), color-stop(100%, rgba(242,239,242,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 6%, rgba(242,239,242,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 6%, rgba(242,239,242,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 6%, rgba(242,239,242,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 6%, rgba(242,239,242,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2eff2', GradientType=0 );}
.boxcate .cate > li + li{border-top: 1px solid #80808014}
.boxcate .cate > li a{display: block;font-size: 15px;color: #545454;padding: 7px 8px 7px 8px;border-left: 3px solid transparent}
.boxcate .cate > li a:hover,.boxcate .cate > li a.active{border-left: 3px solid #024F95}
.boxcate .cate > li .subcate{margin-left: 10px;display: block;list-style: none;}
.boxcate .cate > li a .arrow-cht{margin-right: 7px}

.boxcate + .boxcate{margin-top: 20px}

.adsleft{display: block;width: 100%;margin: 20px 0}
.adsleft img{width: 100%}

.colright{width: calc(100% - 280px); float: left;margin-left: 30px}
.topcate{display: block;position: relative;margin-bottom: 15px}
.topcate a{display: block;width: 100%;font-size: 24px;color: #545454;margin:0;padding: 0;font-weight: normal;text-transform: uppercase;}

.box-resultsearch > p{font-size: 15px}
.box-resultsearch > p span{font-size: 18px;font-weight: normal;color: #F27E20}
.boxsearchlist li{font-size: 15px;margin-bottom: 10px}
.boxsearchlist li a{display: block;color: #545454}
.boxsearchlist li a:hover{text-decoration: underline;}

.box-post > h2{display:block;font-size: 26px;font-weight: normal;padding-bottom: 5px;line-height: 1.3;width: 100%}
.box-post .box-share{margin-bottom: 15px}
.box-post .box-sapo{width: 100%;font-size: 16px;font-weight: bold;line-height: 1.4}
.box-post .source-post{margin-top: 15px;width: 100%;text-align: right;font-weight: bold; font-style: italic;font-size: 14.5px}
.box-other{margin-top: 40px}
.box-other .othertop{display: block;font-size: 18px;font-weight: normal;text-transform: uppercase;padding: 7px 10px;background-color: #f4f1f4;margin-bottom: 20px}

.listfaq{display: block;width: 100%;list-style: none;}
.listfaq .boxask{display: block;width: 100%;padding-bottom: 15px}
.listfaq .boxask .ask{display: block;width: 100%;font-size: 14px;font-weight: bold;float: left;}
.listfaq .boxask .ask .name{font-weight: normal;display: block;}
.listfaq .boxask .ask .name span{font-weight: bold;font-style: italic;}
.listfaq .boxask .ask .showanswer{display: inline-block;padding: 5px 10px;font-size: 12px;color: #fff;background-color: #024F95;font-weight: normal;cursor: pointer!important;}
.listfaq .boxask .ask .showanswer:after{display: inline-block;content: 'Hiện trả lời \00BB';font-size: 13px}
.listfaq .boxask .ask .showanswer:hover{background-color: #F27E20}
.listfaq .boxask .ask .showanswer.active{background-color: #969494}
.listfaq .boxask .ask .showanswer.active:after{display: inline-block;content: 'Ẩn trả lời \00AB';font-size: 13px}
.listfaq .boxask .ask .showanswer.active:hover{background-color: #F27E20}
.listfaq .boxask .answer{display: none;width: 100%;font-size: 14px;background-color: #f1eeeeb3;float: left;padding: 0 10px!important}

@media screen and (max-width: 1300px){
  .ads-left, .ads-right{display: none;}
}
@media screen and (max-width: 1200px) {
  .plr{padding-left: 5px!important;padding-right: 5px!important}
}
@media screen and (max-width: 1024px) {
    .boxinfohome .boxinfohome-left{padding: 30px}
    .boxinfohome .boxinfohome-left h3{display: block;font-size: 20px;color: #333;line-height: 1.4;margin-bottom: 15px}
    .boxinfohome .boxinfohome-left h3 span{color: #F27E20;margin-right: 5px}
    .boxinfohome .boxinfohome-left > div *{font-size: 15px!important;line-height: 1.5}

    .nohomeprojects li h3 a{font-size: 13px}
  .nohomeprojects li{width: 50%}

  .infocontact{float: left;width: 100%;padding: 40px 30px;background-color: #024F95;background-image: url(/resources/views/client/asset/images/footer-bg.png);background-size: cover;background-position: right bottom;overflow: hidden;-webkit-border-radius: 20px;
-moz-border-radius: 20px;border-radius: 20px;margin-bottom: 20px;margin-top: 30px}
.formcontact{float: left;margin-bottom: 20px;width: 100%;margin-right: 0}
}

@media screen and (max-width: 980px) {
    .home-1 .services-col4 li{padding: 5px!important}
    .home-1 .services-col4 li > h3 a{font-size: 14px}
    .boxinfohome .boxinfohome-left{padding: 30px}
    .boxinfohome .boxinfohome-left h3{display: block;font-size: 18px;color: #333;line-height: 1.4;margin-bottom: 15px}
    .boxinfohome .boxinfohome-left h3 span{color: #F27E20;margin-right: 5px}
    .boxinfohome .boxinfohome-left > div *{font-size: 14px!important;line-height: 1.5}
}
@media screen and (max-width: 900px) {
  
}
@media screen and (max-width: 860px) {
  .buttonmenumobile{float: left;color: #fff;margin-top: 5px}
  .bar{width: 17px;height: 3px;background-color:#fff;display: block;}
  .bar + .bar{margin-top: 3px}
  .boxmenupc{display: none;}
  
  .content .detail img{width: 100%!important;height: auto!important;margin-left: 0!important;margin-right: 0!important;padding-left: 0!important;padding-right: 0!important;}
  .content .detail iframe{width: 100%!important;height: auto!important;margin-left: 0!important;margin-right: 0!important;padding-left: 0!important;padding-right: 0!important;margin-bottom: 5px!important}
  .logo {width: 110px;margin-top: 15px;margin-bottom: 10px;}
  header .inline-1 .boxright p.hotline{font-size: 14px}
  header .inline-1 .boxright p.hotline a{font-size: 15px;font-weight: bold;}
  header h1{font-size: 16px;width: 360px}
  .arrow-up{width: 50px;display: block;position: absolute;bottom: -5px;margin-left: calc(50% - 25px)}

  .boxinfohome .boxinfohome-left{padding: 20px;width: 80%}
  .boxinfohome .boxinfohome-left h3{display: block;font-size: 18px;color: #333;line-height: 1.4;margin-bottom: 15px}
  .boxinfohome .boxinfohome-left h3 span{color: #F27E20;margin-right: 5px}
  .boxinfohome .boxinfohome-left > div *{font-size: 14px!important;line-height: 1.5}

  .formcontact{width: 100%}
    .infocontact{width: 100%}

    .colleft{display: none;}
    .colright{width: 100%;margin-left: 0}

    .nohomeprojects li{display: block;float: left;width: 33.33%;position: relative;overflow: hidden;}
.nohomeprojects li h3 a{display: block;padding: 10px 15px;background-color: #275095a8;color: #fff;font-weight: normal;line-height: 1.4}

}
@media screen and (max-width: 820px){
  
}
@media screen and (max-width: 768px) {
  header h1{width: calc(100% - 110px)}
  header .inline-1 .boxright{width: 100%}
  header .inline-1 .boxright p.hotline{float: left;width: 55%;margin-top: 5px;font-size: 18px}
  header .inline-1 .boxright p.hotline a{font-size: 18px}
  header .inline-1 .boxright .boxsearch{width: 45%;}

  .box-1{float: left;width: 100%;padding: 0 }
  .box-2{float: left;width: 48%;margin-left: 0;margin-top: 20px}
  .box-2 + .box-2{margin-left: 4%}

  .boxinfohome{padding: 10px}
    .boxinfohome .boxinfohome-left{padding: 30px;width: 95%;margin-left: 2.5%;}
    .boxinfohome .boxinfohome-left h3{display: block;font-size: 18px;color: #333;line-height: 1.4;margin-bottom: 15px}
    .boxinfohome .boxinfohome-left h3 span{color: #F27E20;margin-right: 5px}
    .boxinfohome .boxinfohome-left > div *{font-size: 14px!important;line-height: 1.5}
    .boxinfohome .boxinfohome-right{width: 100%}

    .home-1 .services-col4{list-style: none;display: block;width: 100%;margin-top: 30px!important;float: left;margin-bottom: 30px}
  .home-1 .services-col4 li{display: block;width: 46%;float:left;padding: 10px 20px;text-align: center;margin: 02%;border:1px solid #e6e4e4;}
  .home-1 .services-col4 li > h3 a{height: 48px}

.posts li > h3 a{font-size: 15px;line-height: 1.3!important;display: block;}
  .posts li > div{font-size: 13.5px}
  .posts li .detaillink{display: block;float: left;width: auto;background-color: #F27E20;color: #fff;font-size: 13.5px;padding: 5px 15px;-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;margin-top: 7px}
}
@media screen and (max-width: 760px) {
  .box-1{float: left;width: 100%;padding: 0 }
  .box-2{float: left;width: 100%;margin-left: 0;margin-top: 20px}
  .box-2 + .box-2{margin-left: 0}

  .title-home{font-size: 20px}

  .home-2 .projects li h3 a{font-size: 13px}
  .home-2 .projects li{width: 50%}

  .nohomeprojects li h3 a{font-size: 13px}
  .nohomeprojects li{width: 50%}
}
@media screen and (max-width: 610px) {
  header{background-image: none;}
  header h1{font-size: 15px;margin-top: 5px}
  header h1 b{font-size: 17px}

  .posts{display: block;list-style: none;float: left;}
.posts li{width: 45%;margin: 0 2.5% 25px 2.5%;position: relative;float: left;}
.posts li + li{margin-top: 0}
.posts li > a{display: block;float: left;width: 100%;margin-left: 0;margin-right: 0}
.posts li > a img{width: 100%}
.posts li > h3{display: block;float: left;width: 100%}
.posts li > h3 a{font-size: 16px;color: #333;line-height: 1.4;height: 40px;overflow: hidden;display: block;}
.posts li > h3 a:hover{color: #F27E20}
.posts li > div{display: block;float: left;width: 100%;margin-top: 10px;font-size: 14.5px;line-height: 1.4;height: 80px;overflow: hidden;}
.posts li .detaillink{display: block;float: left;width: auto;background-color: #F27E20;color: #fff;font-size: 13.5px;padding: 5px 15px;-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;margin-top: 7px}
.posts li .detaillink:hover{background-color: #dc6708}

    .boxtablink button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 10px 14px;
      transition: 0.3s;
      font-size: 14px;margin-right: 5px;background-color: #f2f2f2
    }

    .contenttab-left{float: left;width: 110px;padding: 10px 0;border-right: 1px solid #80808026;}
    .contenttab-left > ul{display: block;list-style: none;}
    .contenttab-left > ul li{display: block;}
    .contenttab-left > ul li a{display: block;padding:5px 10px 5px 5px;color: #024F95;font-size: 12.5px;border-bottom: 1px solid #80808026}
    .contenttab-left > ul li a span{display: block;font-size: 13.5px;font-weight: bold;font-style: italic;}
    .contenttab-right{float: left;width: calc(100% - 110px);padding: 10px 0 10px 15px;font-size: 12.5px}
    .contenttab-left > ul li:hover, .contenttab-left > ul li.active{background-color: #024F95}
    .contenttab-left > ul li:hover a, .contenttab-left > ul li.active a{color: #fff}
    .file-user{display: block;list-style: none;padding: 10px 0}
    .file-user li{display: block;}
    .file-user li a{display: inline-block;padding-left: 20px;color: #333;font-size: 13px;font-weight: bold;padding: 5px 15px;background-image: url(/resources/views/client/asset/images/icon-menu.png);
        background-repeat: no-repeat;
        background-position: 0 center;}
    .file-user li a span{display: inline-block;margin-left: 10px;color: #024F95;font-weight: normal;}
    .file-user li a:hover, .file-user li a span:hover,.file-user li a:hover span{color: #F27E20}

    .link-user li .landung{font-size: 24px;}
.link-user li .diemtich{font-size: 24px;}
.link-user li .dangxuat{padding: 5px 7px;font-size: 12px;margin-bottom: 5px;margin-top: 5px}
.link-user li span{font-size: 12px}
}
@media screen and (max-width: 560px) {
  header h1{font-size: 14px}
  
  .box-infouser .infouser-1 .avatar-user{display: block;width: 30%;float: left;margin-left: 35%;margin-top: 20px}
.box-infouser .infouser-1 > div{float: left;width:100% }
.box-infouser .infouser-1 > h3{display: block;float: left;width: 100%;padding: 5px 0;font-size: 14px;font-weight: bold;text-transform: uppercase;}
.box-infouser .infouser-1 .votepro{display: block;float: left;width: 100%;margin-bottom: 5px}
.box-infouser .infouser-1 .job-user{display: block;float: left;width: 100%;padding: 2px 0;font-size: 13px}
.box-infouser .infouser-1 .birthday-user{display: block;float: left;width: 100%;padding: 2px 0;font-size: 13px}
.box-infouser .infouser-1 .phone-user{display: block;float: left;padding:  2px 0;font-size: 13px;margin-right: 0;width: 100%;}
.box-infouser .infouser-1 .email-user{display: block;float: left;padding:  2px 0;font-size: 13px;width: 100%;}
.box-infouser .infouser-1 .address-user{display: block;float: left;padding:  2px 0;font-size: 13px;width: 100%;}


}