/* @media screen and (min-width:1920px) {
    .banner-project-detail {
        background-size: 100% 100% !important;
        height: 500px;
    }

    .banner-project {
        background-size: 100% 100% !important;
        height: 500px;
    }
} */

@media screen and (max-width: 1280px) {
  .col-navigation ul li a {
    font-size: 0.8em;
  }

  .view-all-pro a {
    margin-left: calc(50% - 135px);
  }

  .col-hotline {
    width: 40%;
  }
}

@media screen and (max-width: 1024px) {
  .col-navigation {
    display: none;
  }

  .list-menu {
    display: inherit;
    top: 15px;
    right: 30px;
    font-size: 30px;
    color: #fff;
  }

  .slide-a-detail {
    margin-left: calc((100% - 122px) / 2);
  }

  .a-top-logo img {
    height: 40px;
    width: auto;
  }

  .text-slide {
    top: calc(50% - 95px);
  }

  .info-slide h1 {
    font-size: 3.5em;
    margin: 0 0 10px;
  }

  .info-slide h3 {
    font-size: 1.75em;
  }

  .info-slide p a {
    font-size: 1.25em;
    line-height: 22px;
    padding: 10px 30px;
    border-radius: 23px;
  }

  .col-intro p {
    min-height: 100px;
  }

  .col-intro h3 {
    font-size: 1.1em;
  }

  .col-intro a {
    font-size: 1.15em;
    margin-left: calc((100% - 110px) / 2);
  }

  .col-service h3 {
    font-size: 1.2em;
  }

  .col-footer h3 {
    font-size: 1.4em;
  }

  /* LOGO.HTML */
  .box-logo {
    min-height: 560px;
  }

  .box-logo h3 {
    font-size: 1.75em;
  }

  .box-logo ul li a {
    font-size: 0.95em;
  }

  .logo-info-banner h1 {
    font-size: 3.5em;
  }

  .view-all-pro a {
    margin-left: calc(50% - 135px);
  }

  .a-box-contact {
    left: calc(50% - 80px);
  }

  .a-contact {
    margin-left: calc(50% - 100px);
  }

  .a-view-more {
    margin-left: calc(50% - 90px);
  }

  .project-bx-pager {
    padding: 0 15px;
  }

  .p-btn {
    bottom: 0.5em;
  }
}

@media screen and (max-width: 980px) {
  .item-info {
    padding-bottom: 20px;
  }

  .zoom {
    left: 0;
    top: 30px;
  }

  .col-hotline {
    width: 45%;
  }
}

@media screen and (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .col-navigation {
    display: none;
  }

  .fb-login a {
    padding: 13px 0;
  }

  .list-menu {
    top: 15px;
  }

  .home-slide .text-slide {
    top: calc(50% - 82.5px);
  }

  .info-slide h1 {
    font-size: 3em;
    margin: 0 0 10px;
  }

  .info-slide h3 {
    font-size: 1.5em;
  }

  .info-slide p a {
    font-size: 1.25em;
    line-height: 22px;
    padding: 10px 30px;
    border-radius: 23px;
  }

  .a-top-logo img {
    width: auto;
    height: 40px;
  }

  .row-intro,
  .row-pro,
  .row-service,
  .bot-row-service {
    padding: 35px 0;
  }

  .col-intro img {
    width: 50%;
  }

  .col-intro h3 {
    height: 40px !important;
    font-size: 1.2em;
  }

  .col-intro-h3 {
    margin-bottom: 5px !important;
  }

  .col-intro a {
    font-size: 1.15em;
    margin-left: calc((100% - 120px) / 2);
  }

  .col-intro p {
    min-height: 150px;
  }

  .view-all-pro a {
    padding: 10px 40px;
    margin-left: calc((100% - 245px) / 2);
  }

  .col-service img {
    width: 50%;
  }

  .col-service h3 {
    height: 40px !important;
    font-size: 1.2em;
  }

  .col-service-h3 {
    margin-bottom: 5px !important;
  }

  .col-service h2 {
    margin: 0 0 30px;
  }

  .info-banner {
    padding: 70px 0;
  }

  .info-banner a {
    margin-left: calc((100% - 600px) / 2);
  }

  .row-footer {
    padding: 35px 0 15px;
  }

  .col-footer h3 {
    font-size: 1.4em;
    margin: 0;
    height: 50px;
    margin-top: 20px;
  }

  .icon-border {
    position: relative;
    float: left;
    width: 105px;
    height: 105px;
    margin-left: calc((100% - 105px) / 2);
    border-radius: 53px;
    text-align: center;
  }

  .icon-border i {
    font-size: 4.6em;
    margin-top: calc(50% - 32px);
    color: #fff;
  }

  .show-detail i {
    padding-top: 30%;
    font-size: 20px;
  }

  /* LOGO.HTML*/
  .wrapper-slide-logo .bx-wrapper .bx-viewport {
    min-height: 300px;
  }

  .wrapper-slide-logo .bx-wrapper .bx-viewport img {
    height: 300px;
  }

  .logo-slide .text-slide {
    top: calc(50% - 82.5px);
  }

  .logo-content-info {
    font-size: 1.25em;
  }

  .box-logo {
    position: relative;
    float: left;
    width: 100%;
    min-height: inherit;
    border: solid 1px #fff;
    color: #fff;
    padding: 0;
    margin: 15px 0;
  }

  .border-img {
    width: 100px;
    height: 100px;
    margin-left: calc(50% - 50px);
  }

  .border-img i {
    font-size: 3.5em;
  }

  .box-logo-text {
    padding: 10px 0;
  }

  .first-box {
    margin-left: 0;
  }

  .box-logo h3 {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 2em;
    margin: 10px 0;
  }

  .box-logo ul li {
    font-size: 1.25em;
  }

  .a-box-contact {
    position: relative;
    float: left;
    padding: 7px 30px;
    margin: 20px 0 0;
    border-radius: 5px;
  }

  /* PROJECT-LIST.HTML*/
  .project-slide .text-slide {
    top: calc(50% - 23px);
  }

  .row-project-content-detail .col-navigation-content {
    display: none;
  }

  .row-project-content-detail .col-navigation-content-xs {
    display: block;
  }

  .item-info {
    padding-bottom: 20px;
  }

  .zoom {
    left: 0;
    top: 30px;
  }

  .project-bx-pager a {
    width: 90px;
  }

  /*.project-bx-pager{padding-left:calc( 50% - 237.5px);padding-left:-webkit-calc( 50% - 237.5px);padding-left:-moz-calc( 50% - 237.5px);padding-left:-o-calc( 50% - 237.5px)}*/
  .fancybox-opened {
    width: 500px !important;
  }

  .banner-project-detail {
    background-size: 200% 100% !important;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    padding: 0 10px;
  }

  .col-navigation {
    display: none;
  }

  .fb-login a {
    padding: 13px 0;
  }

  .list-menu {
    top: 15px;
  }

  .home-slide .text-slide {
    top: calc(50% - 75px);
  }

  .home-slide .text-slide h1 {
    font-size: 3em;
    margin: 0 0 10px;
  }

  .home-slide .text-slide h3 {
    font-size: 1.75em;
    margin: 0 0 40px;
  }

  .home-slide .text-slide a {
    padding: 10px 30px;
    font-size: 1.25em;
    line-height: 20px;
    border-radius: 23px;
  }

  .home-slide .slide-a-detail {
    margin-left: calc((100% - 123px) / 2);
  }

  .row-intro,
  .row-pro,
  .row-service,
  .bot-row-service {
    padding: 35px 0;
  }

  .col-intro img {
    width: 50%;
  }

  .col-intro h3 {
    height: 40px !important;
    font-size: 1.2em;
  }

  .col-intro-h3 {
    margin-bottom: 5px !important;
  }

  .col-intro a {
    font-size: 1.15em;
    margin-left: calc((100% - 120px) / 2);
  }

  .view-all-pro a {
    padding: 10px 40px;
    margin-left: calc((100% - 245px) / 2);
  }

  .col-service img {
    width: 50%;
  }

  .col-service h3 {
    height: 40px !important;
    font-size: 1.2em;
  }

  .col-service-h3 {
    margin-bottom: 5px !important;
  }

  .col-service h2 {
    margin: 0 0 30px;
  }

  .info-banner {
    padding: 70px 0;
  }

  .info-banner a {
    margin-left: calc(50% - 300px);
  }

  .row-footer {
    padding: 35px 0 15px;
  }

  .col-footer h3 {
    font-size: 1.4em;
    margin: 0;
    height: 50px;
    margin-top: 20px;
  }

  .row-project-content-detail .col-navigation-content {
    display: none;
  }

  .row-project-content-detail .col-navigation-content-xs {
    display: block;
  }

  .col-navigation-content>ul>li>ul {
    width: 230px;
  }

  .box-project-list .show-detail i {
    padding-top: 55%;
  }

  .col-navigation-content ul li a {
    font-size: 0.95em;
  }

  .item-info {
    padding-bottom: 0;
    margin-bottom: 10px;
  }

  .zoom {
    left: inherit;
    right: 0;
    top: 0;
  }

  .project-bx-pager a {
    width: 88px;
  }

  .project-bx-pager {
    padding: 0 15px;
  }

  .section-service-3.section-text-animation-slide h2 {
    font-size: 50px;
  }

  .package.paralax-image {
    min-height: 500px;
    margin-bottom: 50px;
    margin-top: 50px;
    margin-left: -15px;
  }

  .package .package_type h3 svg {
    height: 60px;
    width: 60px;
  }

  .section-clients-masonry__filter__right ul li:before {
    opacity: 0;
  }

  .section-clients-masonry .see-all.skin-text-color {
    padding-right: 0;
    padding-left: 0;
    margin: 15px auto;
  }

  .wrapper-slide-news {
    margin: 35px 0;
  }

  .wraper .section-project-masonry {
    padding: 0;
  }

  .wraper .section-project-masonry .see-all {
    text-align: center;
    margin: 20px auto;
  }

  .project-items {
    width: 100%;
    height: 100%;
  }

  .section-project-masonry .see-all a {
    font-size: 16px;
    border: 1px solid;
  }

  .section-project-masonry .see-all__icon {
    margin-left: 5px;
    margin-bottom: 5px;
  }

  .section-project-masonry .see-all {
    padding: 0;
  }

  .section-project-masonry .see-all__icon img {
    height: 13px;
    width: auto;
    display: block;
  }

  .section-project-masonry .skin-image-container__item {
    left: -5px;
    top: 0;
  }

  .section-project-masonry .a-view-more {
    margin: 20px auto;
  }

  .project_menu .filter-project-service .search-bar ul li.linhvuc {
    margin-top: 20px;
  }

  .section-project-masonry .category-dropdown {
    padding: 0px 0 20px 0;
    min-width: 100%;
    width: 100%;
  }

  .section-service-4 h2>span {
    font-size: 39px;
  }

  .section-service .recr-content.active {
    padding: 10% 3% 10% 3%;
    min-height: 621px;
  }

  .section-project .slider-arrow-icon.home {
    width: 30px;
  }

  .section-project .p-project.black {
    font-size: 18px;
  }

  .project__detail .info-project,
  .project__detail-content {
    margin: 0 auto;
    max-width: 100%;
  }

  .project__detail-content h2 {
    margin: 40px auto;
    text-align: center;
    color: var(--primary-color);
  }

  .project__detail-content p.text-left {
    line-height: 1.9;
  }

  .emerald.is-visible .package-popup-container,
  .ruby.is-visible .package-popup-container,
  .diamond.is-visible .package-popup-container {
    margin: 4em auto;
  }
}

@media screen and (max-width: 640px) {
  body {
    font-size: 13px;
  }

  .container {
    padding: 0 10px;
  }

  .wrapper-slide .bx-wrapper .bx-viewport {
    height: 300px;
  }

  .wrapper-slide .bx-wrapper img {
    height: 300px;
  }

  .wrapper-slide .bx-wrapper .ul-slider li {
    overflow: hidden !important;
  }

  .wrapper-slide .bx-wrapper .ul-slider li a img {
    position: relative;
    float: left;
    width: inherit;
    margin-left: -120px;
  }

  .wrapper-slide>.bx-wrapper img {
    max-width: inherit;
  }

  .col-project-detail-slide>bx-wrapper img {
    max-width: 100%;
  }

  .wrapper-slide-logo .ul-slider li img {
    height: 200px;
  }

  .col-navigation {
    display: none;
  }

  .col-hotline {
    width: 48%;
  }

  .fb-row {
    width: 25%;
  }

  .top-contact {
    width: 75%;
  }

  .col-hotline {
    width: 55%;
  }

  .col-email {
    width: 45%;
  }

  .fb-login a {
    padding: 13.5px 0;
  }

  .list-menu {
    top: 15px;
  }

  .home-slide .text-slide {
    top: calc(50% - 65px);
  }

  .home-slide .text-slide h1 {
    font-size: 2.5em;
    margin: 0 0 5px;
  }

  .home-slide .text-slide h3 {
    font-size: 1.75em;
    margin: 0 0 50px;
  }

  .home-slide .text-slide a {
    padding: 10px 30px;
    font-size: 1.25em;
    line-height: 20px;
    border-radius: 23px;
  }

  .home-slide .slide-a-detail {
    margin-left: calc((100% - 126px) / 2);
  }

  .row-intro,
  .row-pro,
  .row-service,
  .bot-row-service {
    padding: 25px 0;
  }

  .col-intro {
    position: relative;
    float: left;
  }

  .col-intro img {
    width: 60%;
  }

  .col-intro h3 {
    height: 40px !important;
    font-size: 1.2em;
  }

  .col-intro-h3 {
    margin-bottom: 5px !important;
  }

  .col-intro a {
    font-size: 1.15em;
    margin-left: calc(50% - 54px);
  }

  .col-intro p {
    min-height: 180px;
  }

  .col-introduce h1 {
    font-size: 2.5em;
  }

  .img-introduce {
    display: none;
  }

  .screen-sm {
    margin-bottom: ;
  }

  .col-pro h2 {
    margin: 0;
  }

  .col-pro {
    margin: 0 0 30px;
  }

  .view-all-pro a {
    padding: 10px 40px;
    margin-left: calc((100% - 245px) / 2);
  }

  .col-service img {
    width: 60%;
  }

  .col-service h3 {
    height: 40px !important;
    font-size: 1.2em;
  }

  .col-service-h3 {
    margin-bottom: 5px !important;
  }

  .col-service h2 {
    margin: 0 0 30px;
  }

  .info-banner {
    padding: 35px 0;
  }

  .info-banner h1 {
    font-size: 3.25em;
    margin-bottom: 25px;
  }

  .info-banner a {
    width: 80%;
    font-size: 1.5em;
    padding: 10px 40px;
    margin-left: 10%;
  }

  .row-footer {
    padding: 35px 0 15px;
  }

  .col-footer h3 {
    font-size: 1.4em;
    margin: 0;
    height: 50px;
    margin-top: 20px;
  }

  .col-footer ul li {
    height: 50px;
  }

  .col-footer ul li a {
    padding: 5px 0;
  }

  .nav-show li span {
    position: relative;
    float: left;
    color: #fff;
    font-size: 0.9375em;
    line-height: 20px;
  }

  .nav-show ul li a {
    font-size: 1.1em;
  }

  /* LOGO.HTML*/
  .logo-slide .text-slide {
    top: calc(50% - 77px);
  }

  .a-contact {
    margin-left: calc((100% - 173px) / 2);
  }

  /* PROJECT-LIST.HTML*/
  .row-project-content {
    padding: 30px 0;
  }

  .info-slide h1 {
    font-size: 2.5em;
  }

  .project-slide .text-slide {
    top: calc(50% - 18px);
  }

  .col-text-info-project h4,
  p {
    font-size: 1.3em;
  }

  .info-box-project {
    padding: 20px 0 20px;
  }

  .row-project-content-detail .col-navigation-content {
    display: none;
  }

  .row-project-content-detail .col-navigation-content-xs {
    display: block;
  }

  .solution-block h3 {
    font-size: 1.25em;
  }

  .news-box {
    width: 100%;
  }

  .col-news-inner {
    width: 100%;
    margin: 10px 0;
  }

  .sidebar-box {
    margin: 0;
  }

  .banner-project {
    height: 150px;
  }

  .col-navigation-content>ul li {
    margin-right: 20px;
  }

  .box-project-list .show-detail i {
    padding-top: 65%;
  }

  .col-navigation-content>ul>li>ul {
    width: 210px;
  }

  .faq-inner h1 {
    font-size: 2.5em;
  }

  .col-contact h3 {
    font-size: 1.25em;
  }

  .col-contact p {
    font-size: 1em;
  }

  .top-col-contact {
    padding: 10px 0;
  }

  .project-bx-pager a {
    width: 90px;
  }

  .project-bx-pager {
    padding: 0 15px 0 25px;
  }

  .fancybox-opened {
    width: 450px !important;
  }

  .banner-project-detail {
    background-size: auto 100% !important;
  }

  .wrapper-slide .ul-slider li img {
    width: inherit;
    margin-left: -100px;
  }

  .menu-iconspan,
  .menu-icon span:before,
  .menu-icon span:after {
    background-color: #fff;
  }

  .menu-icon.hover span:after,
  .menu-icon.hover span:before {
    background-color: #fff;
  }

  .menu-icon span {
    background: #fff;
  }
    .menu-icon.active:hover span:before {
        background-color: #fff !important;
    }
        .menu-icon.active:hover span:after {
        background-color: #fff !important;
    }
  .menu-icon {
    right: 0px;
  }

  menu ul.linkss.slide-in {
    top: 120px;
  }

  menu ul.linkss.slide-in {
    width: 100%;
  }

  .linkss.slide-in {
    right: -20px;
  }

  menu ul.linkss #phone-contact a,
  menu ul.linkss #email-contact a {
    font-size: 16px;
  }

  .section-service-1 {
    margin-top: 100px !important;
  }

  .section-service-3.section-text-animation-slide {
    padding: 20px 0 20px 0;
  }

  .section-service-3.section-text-animation-slide h1 {
    font-size: 50px;
  }

  .section-service-3 .text-animation-slide span {
    font-size: 50px;
    font-weight: 400;
  }

  .section-service-3 .text-animation-slide .text-slide {
    top: calc(50% - 0px);
  }

  .section-contact {
    padding: 0px 0 50px 0;
  }

  .section-contact h2 {
    font-size: 41px;
    font-weight: 300;
  }

  #footer {
    padding: 50px 10px 20px 10px;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }

  .container {
    padding: 0 10px;
  }

  .wrapper-slide .bx-wrapper .bx-viewport {
    height: 240px;
  }

  .wrapper-slide .bx-wrapper img {
    height: 240px;
  }

  .top-col-contact {
    height: 28px;
  }

  .col-md-4.col-sm-5.col-xs-5.pull-right.border-right.top-col-contact {
    height: 28px;
  }

  .col-hotline {
    padding: 6px 0px 0px 0px;
    width: 100%;
    border: none;
  }

  .col-email {
    padding: 0px;
    width: 100%;
    border: none;
  }

  .top-col-contact p {
    font-size: 1em;
  }

  .top-col-contact p a {
    font-size: 1em;
  }

  .col-navigation {
    display: none;
  }

  .fb-row {
    width: 100%;
    height: 25px;
    border-bottom: solid 1px #fff;
    font-size: 1.15em;
  }

  .fb-login {
    width: 20%;
    height: 25px;
    border: none;
  }

  .fb-login a {
    padding: 4px 0;
  }

  .top-contact {
    width: 100%;
  }

  .list-menu {
    top: 12px;
    font-size: 25px;
  }

  .a-top-logo {
    padding: 10px 0;
  }

  .a-top-logo img {
    height: 50px;
    float: left;
  }

  .nav-show ul li a {
    font-size: 1.2em;
  }

  .home-slide .text-slide {
    top: calc(50% - 50px);
  }

  .home-slide .text-slide h1 {
    font-size: 2em;
    margin: 0 0 5px;
  }

  .home-slide .text-slide h3 {
    font-size: 1.5em;
    margin: 0 0 50px;
  }

  .home-slide .text-slide a {
    padding: 7px 30px;
    font-size: 1em;
    line-height: 15px;
    border-radius: 12px;
  }

  .home-slide .slide-a-detail {
    margin-left: calc((100% - 122px) / 2);
    margin-right: 20px;
    padding: 5px 30px;
  }

  .row-intro,
  .row-pro,
  .row-service,
  .bot-row-service {
    padding: 20px 0;
  }

  .col-intro {
    position: relative;
    float: left;
    text-align: left;
    width: 100%;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #d4d4d4;
  }

  .col-introduce h1 {
    font-size: 2em;
  }

  .screen-sm,
  .screen-sm h3,
  .screen-sm p {
    text-align: center;
  }

  .screen-sm-img {
    width: 40%;
    margin-left: 30%;
    margin-bottom: 10px !important;
  }

  .screen-sm {
    float: left;
    width: 100%;
    margin-bottom: 5px;
  }

  .screen-sm p {
    font-size: 1.25em;
  }

  .col-intro-h3 {
    height: 20px !important;
    margin-bottom: 5px !important;
    font-size: 1.2em;
  }

  .col-intro a {
    float: left;
    font-size: 1.15em;
    margin-left: calc((100% - 106px) / 2);
    padding: 3px 30px;
  }

  .col-intro p {
    min-height: inherit;
    margin-bottom: 5px;
  }

  .col-pro h2 {
    font-size: 2.5em;
    margin: 0 0 15px;
  }

  .col-pro {
    margin: 0 0 0;
  }

  .col-pro-img {
    width: 50%;
    padding: 0 15px 0 0;
    margin-bottom: 15px;
  }

  .view-all-pro a {
    padding: 5px 40px;
    margin-left: calc((100% - 225px) / 2);
  }

  .col-service {
    position: relative;
    float: left;
    text-align: left;
    width: 100%;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #d4d4d4;
  }

  .col-service h3 {
    margin-bottom: 5px !important;
    height: 20px !important;
    font-size: 1.2em;
  }

  .col-service p {
    margin-bottom: 5px;
  }

  .col-service-h3 {
    margin-bottom: 5px !important;
  }

  .col-service h2 {
    font-size: 2.5em;
    text-align: center;
    margin: 0 0 5px;
  }

  .list-service h2 {
    width: 10%;
    line-height: 30px;
    font-size: 2em;
    margin-right: 10px;
  }

  .list-service span {
    width: 100%;
    padding-top: 5px;
  }

  .info-banner {
    padding: 35px 0;
  }

  .info-banner h1 {
    font-size: 3em;
  }

  .info-banner a {
    font-size: 1.25em;
    padding: 5px 40px;
    border: solid 2px #fff;
  }

  .row-footer {
    padding: 35px 0 15px;
  }

  .col-footer h3 {
    font-size: 1.4em;
    margin: 0;
    height: 50px;
    margin-top: 20px;
  }

  .col-footer a {}

  .icon-footer {
    width: 20% !important;
    margin: 0;
  }

  .col-footer a img {
    width: 100%;
  }

  .col-footer .p-out {
    position: relative;
    float: left;
    width: 100%;
  }

  .col-footer .p-out a i {
    font-size: 1.5em;
  }

  .col-footer ul li {
    height: 60px;
  }

  .col-footer ul li a {
    width: 100%;
    padding: 5px 0;
  }

  .nav-show li span {
    position: relative;
    float: left;
    color: #fff;
    font-size: 0.9375em;
    line-height: 20px;
  }

  .icon-border {
    position: relative;
    float: left;
    width: 85px;
    height: 85px;
    margin-left: calc((100% - 85px) / 2);
    border-radius: 43px;
    text-align: center;
  }

  .icon-border i {
    font-size: 4.6em;
    margin-top: calc(50% - 28px);
    color: #fff;
  }

  .no-padder-left {
    padding-left: 18px;
  }

  .col-footer-min {
    width: 100%;
    float: left;
  }

  .col-footer-min h3 {
    height: inherit;
    margin: 10px 0;
  }

  .col-footer-min ul li {
    height: inherit;
  }

  .show-detail i {
    padding-top: 15%;
    font-size: 16px;
  }

  .row-bot-footer p {
    font-size: 1.2em;
    padding: 25px 0 40px;
  }

  /*LOGO.HTML*/
  .wrapper-slide-logo .bx-wrapper .bx-viewport {
    min-height: 250px;
  }

  .wrapper-slide-logo .bx-wrapper .bx-viewport img {
    height: 250px;
  }

  .logo-slide .text-slide {
    top: calc(50% - 75px);
  }

  .row-logo-content h2 {
    font-size: 2em;
  }

  .row-logo-content {
    padding: 20px 0;
  }

  .logo-content-info {
    line-height: 20px;
  }

  .logo-slide .text-slide h1 {
    font-size: 2.25em;
  }

  .logo-slide .text-slide a {
    margin-left: calc((100% - 195px) / 2);
  }

  .logo-info-banner h1 {
    font-size: 2.5em;
  }

  .logo-info-banner input[type="text"] {
    width: 90%;
    height: 45px;
  }

  .logo-info-banner button[type="button"] {
    padding: 5px 50px;
  }

  .box-logo {
    padding: 0;
  }

  .box-logo .a-box-contact {
    left: calc((100% - 140px) / 2);
  }

  /* PROJECT-LIST*/
  .row-project-content .col-navigation-content ul li {
    margin-right: 10px;
  }

  .box-project {
    width: 100%;
    margin: 0 0 10px 0;
  }

  .box-project-img {
    width: 40%;
  }

  .info-box-project {
    width: 60%;
  }

  .col-navigation-content {
    display: none;
  }

  .col-navigation-content-xs {
    display: block;
  }

  .a-view-more {
    margin-bottom: 0;
    margin-top: 20px;
  }

  .wrapper-project-slide .bx-wrapper .bx-viewport {
    height: 250px !important;
  }

  .wrapper-project-slide .bx-wrapper img {
    height: 250px;
  }

  .show-detail {
    padding: 0 15px 0 0;
  }

  .show-detail a {
    font-size: 1em;
    padding: 40px 40px 40px 40px;
    line-height: inherit;
  }

  .box-project:nth-of-type(4n) {
    margin: 0 0 10px;
  }

  .box-project {
    min-height: inherit;
  }

  /* PROJECT-DETAIL*/
  .row-project-content-detail {
    padding: 30px 0 0;
  }

  .col-project-slide {
    padding: 0 !important;
  }

  .col-project-same .box-project {
    width: 48%;
    margin: 0% 4% 4% 0%;
  }

  .col-project-same .box-project:nth-of-type(2n) {
    margin-right: 0;
  }

  .col-project-same .box-project a {
    width: 100%;
  }

  .row-project-content-detail .col-navigation-content {
    display: none;
  }

  .row-project-content-detail .col-navigation-content-xs {
    display: block;
  }

  /* Contact.html */
  .col-map iframe {
    height: 250px;
  }

  /* solution */
  .solution-block {
    width: 100%;
    margin: 0 0 10px;
  }

  .solution-block h3 {
    font-size: 1.5em;
  }

  .solution-block p {
    font-size: 1.25em;
  }

  .box-project-list .show-detail i {
    padding-top: 1%;
  }

  .banner-project .text-slide h1 {
    font-size: 3em;
  }

  .col-contact {
    width: 100%;
    margin: 10px 0 0;
  }

  .project-bx-pager a {
    width: 82px;
  }

  .project-bx-pager {
    padding: 0 5px 0 15px;
  }

  .fancybox-opened {
    width: 350px !important;
  }

  .icon-footer-contact {
    font-size: 1.75em;
    margin-right: 10px;
  }

  .wrapper-slide .ul-slider li img {
    width: inherit;
    margin-left: -200px;
  }
}

@media screen and (max-width: 320px) {
  .info-banner h1 {
    font-size: 2.25em;
  }

  .info-banner a {
    width: 90%;
    font-size: 1em;
    margin: 5%;
    padding: 5px 20px;
  }

  .col-pro-img {
    width: 100%;
    height: 200px !important;
    padding: 0 15px 0 0;
    margin-bottom: 15px;
  }

  .home-slide .text-slide h1 {
    font-size: 1.5em;
    margin: 0 0 10px;
  }

  .home-slide .text-slide h3 {
    font-size: 1.25em;
    margin: 0 0 40px;
  }

  .home-slide .slide-a-detail {
    margin-right: 20px;
    margin-left: calc((100% - 122px) / 2);
    font-size: 1.25em;
    padding: 5px 30px;
  }

  .home-slide .text-slide {
    top: calc(50% - 70px);
  }

  .fb-row {
    width: 100%;
    height: 25px;
    border-bottom: solid 1px #fff;
  }

  .fb-login {
    width: 20%;
    height: 25px;
  }

  .fb-login a {
    padding: 5px 0;
  }

  .top-contact {
    width: 100%;
  }

  .top-col-contact {
    padding: 0;
    width: 100%;
    height: 20px;
  }

  .col-hotline {
    border-bottom: solid 1px #fff;
  }

  .top-col-contact p {
    font-size: 1.15em;
  }

  .top-col-contact p a {
    font-size: 0.9em;
  }

  .wrapper-slide .bx-wrapper .bx-viewport {
    height: 200px;
  }

  .wrapper-slide .bx-wrapper img {
    height: 200px;
  }

  .row-footer {
    padding: 15px 0;
  }

  .col-footer p {
    margin: 0 0 5px;
  }

  .col-footer-info {
    width: 100%;
  }

  .col-footer-info .logo-footer {
    width: 50%;
  }

  .col-footer-info .p-out {
    width: 100%;
  }

  .col-footer-min {
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
  }

  .col-footer-min h3 {
    font-size: 1.75em;
  }

  .icon-footer {
    width: 10% !important;
  }

  .show-detail i {
    padding-top: 30%;
    font-size: 17px;
  }

  .col-intro img {
    width: 100%;
  }

  /*LOGO.HTML*/
  .logo-slide .text-slide h1 {
    font-size: 1.5em;
  }

  .logo-slide .text-slide h3 {
    margin: 0 0 30px;
  }

  .logo-slide .text-slide p a {
    margin-left: calc((100% - 200px) / 2);
  }

  .logo-slide .text-slide {
    top: calc(50% - 70px);
  }

  .row-logo-content h2 {
    font-size: 1.75em;
  }

  .row-logo-content {
    padding: 20px 0;
  }

  .logo-content-info {
    line-height: 20px;
  }

  .logo-slide a {
    margin-left: calc((100% - 178px) / 2);
  }

  .logo-info-banner {
    padding: 30px 0;
  }

  .logo-info-banner h1 {
    font-size: 1.75em;
  }

  .logo-info-banner h3 {
    font-size: 1.25em;
  }

  .logo-info-banner input[type="text"] {
    width: 100%;
    height: 40px;
  }

  .logo-info-banner button[type="button"] {
    padding: 3px 30px;
  }

  .p-out p a {
    font-size: 0.9em;
  }

  .banner-project .text-slide h1 {
    font-size: 2.15em;
  }

  /* PROJECT-LIST.HTML*/
  .info-slide h1 {
    font-size: 2em;
  }

  .text-slide {
    top: calc(50% - 18px);
  }

  .row-project-content .col-navigation-content ul li {
    margin-right: 10px;
  }

  .box-project {
    width: 100%;
    margin: 0 0 10px 0;
  }

  .box-project-img {
    width: 40%;
  }

  .info-box-project {
    width: 60%;
    padding: 0;
  }

  .col-navigation-content {
    display: none;
  }

  .col-navigation-content-xs {
    display: block;
  }

  .a-view-more {
    padding: 10px 40px;
    margin-left: calc((100% - 154px) / 2);
    margin-top: 20px;
    margin-bottom: 0;
  }

  /* PROJECT-DETAIL.HTML*/
  .row-project-content-detail {
    padding: 30px 0 0;
  }

  .col-project-slide {
    padding: 0 !important;
  }

  .col-project-same .box-project a {
    width: 100%;
  }

  .row-project-content-detail .col-navigation-content {
    display: none;
  }

  .row-project-content-detail .col-navigation-content-xs {
    display: block;
  }

  .col-project-same .box-project {
    width: 100%;
    height: 150px;
    margin: 0% 0% 5% 0%;
  }

  .col-project-same .box-project a img {
    height: 150px;
  }

  .slider-next {
    right: 0;
  }

  .show-detail {
    padding: 0 15px 0 0;
  }

  .show-detail a {
    font-size: 1.5em;
    padding: 40px;
    line-height: inherit;
  }

  .news-inner-img {
    width: 100%;
  }

  .news-inner-img a img {
    width: 70%;
    height: 100px;
    border-radius: 5px;
  }

  .news-inner {
    width: 100%;
    padding: 0 10px 0 0;
  }

  .news-tittle {
    font-size: 1.75em;
  }

  .box-project-list .show-detail i {
    padding-top: 0;
  }

  .post-content h3 {
    font-size: 2em;
  }

  .faq-inner h1 {
    font-size: 2em;
  }

  .col-contact h3 {
    font-size: 1.1em;
  }

  .item-info {
    padding-bottom: 20px;
  }

  .zoom {
    left: 0;
    top: 30px;
  }

  .solution-block {
    padding: 0;
  }

  .project-bx-pager a {
    width: 82px;
  }

  .project-bx-pager {
    padding: 0 5px 0 20px;
  }

  .view-all-pro {
    margin-top: 15px;
  }

  .fancybox-opened {
    width: 250px !important;
  }

  .icon-footer-contact {
    font-size: 1.75em !important;
    margin-right: 10px;
  }

  .banner-project-detail {
    background-size: 190% 100% !important;
  }

  .wrapper-slide .ul-slider li img {
    width: inherit;
    margin-left: -310px;
  }
}