.ma-ck-m {
  position: absolute;
  left: 330px;
  top: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #0873ba;
  z-index: 100;
}
#mainContent em {
  display: block;
  margin-bottom: 15px !important;
  margin-top: -15px !important;
}

.slide-slidebox {
  position: relative;
  -ms-touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
}

.slide-slidebox.slide-hidden {
  opacity: 0;
}
.description-value ul {
  margin-left: 15px;
}
.description-value ul li {
  margin: 7px;
  list-style: circle;
}
.slide-slidebox.slide-refresh .slide-item {
  visibility: hidden;
}

.slide-slidebox.slide-drag .slide-item {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.slide-slidebox.slide-rtl {
  direction: rtl;
}

.slide-slidebox.slide-rtl .slide-item {
  float: right;
}

.slide-wrapper {
  position: relative;
  margin: auto;
  transform: translateZ(0);
  height: auto;
  backface-visibility: hidden;
}

.slide-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.slide-wrapper-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.visible-true .slide-wrapper-outer {
  overflow: visible;
}

.slide-item {
  position: relative;
  float: left;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transform: translateZ(0);
}

.slide-loading {
  opacity: 0;
  display: block;
}

.animated-in {
  z-index: 0;
}

.animated-out {
  z-index: 1;
}

.autoheight {
  transition: height 0.5s ease-in-out;
}

.no-js .slide-slidebox {
  display: block;
}

.slide-slidebox .slide-item img.lazyload {
  opacity: 0;
  transition: opacity 0.4s ease;
  transform-style: preserve-3d;
}

.slide-video-wrapper {
  background-color: #000;
}

.slide-video-frame,
.slide-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-video-frame iframe {
  width: 100%;
  height: 100%;
}

.slide-video-play-icon {
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  z-index: 99999;
}

.slide-video-play-icon:before {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/play.svg)
    no-repeat 50%/80%;
  z-index: 1;
}

.slide-video-play-icon:after,
.slide-video-play-icon:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
}

.slide-video-play-icon:after {
  background: linear-gradient(45deg, #eb1c23, #000);
  transition: opacity 0.5s ease-in-out;
  opacity: 0.5;
  z-index: -1;
}

.slide-video-play-icon:hover:after {
  opacity: 1;
}

.slide-video-playing .slide-video-play-icon,
.slide-video-playing .slide-video-tn {
  display: none;
}

.slide-video-tn {
  opacity: 0;
  height: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.4s ease;
}

.grabbing {
  cursor: ew-resize;
  cursor: e-resize;
  cursor: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/grabbing.png)
      8 8,
    move;
}

.slide-buttons,
.slide-pagination {
  width: 100%;
  position: relative;
  height: auto;
  text-align: center;
}

.slide-buttons svg,
.slide-pagination svg {
  width: 100%;
  height: 100%;
}

.slide-pagination svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.slide-buttons.hide,
.slide-pagination.hide {
  opacity: 0;
  pointer-events: none;
}

.slide-page {
  display: inline-block;
  position: relative;
  margin: 0 5px;
  cursor: pointer;
}

.slide-page span:not(.dot-number) {
  display: block;
}

.slide-page.active span:not(.dot-number) {
  pointer-events: none;
}

.slide-buttons.disabled,
.slide-pagination.disabled {
  display: none;
}

.slide-next,
.slide-page span,
.slide-prev {
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: all 0.3s ease-in-out;
}

.slide-page span:not(.dot-number) {
  width: 18px;
  height: 6px;
  border-radius: 0;
  background-color: #ddd;
  opacity: 1;
}

.slide-page span:not(.dot-number):before {
  content: "";
  border: 1px solid #ddd;
  transition: all 0.3s ease-in-out;
  position: absolute;
  width: 24px;
  height: 12px;
  left: -3px;
  top: -3px;
}

.slide-page.active span:not(.dot-number):before,
.slide-page:hover span:not(.dot-number):before {
  border-color: #0873ba;
}

.slide-page.active span:not(.dot-number),
.slide-page:not(.active):hover span:not(.dot-number) {
  background-color: #0873ba;
}

.slide-next.disabled,
.slide-prev.disabled {
  pointer-events: none;
  opacity: 0.3 !important;
}

.slide-page .dot-number {
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.slide-page .dot-number:before {
  content: "";
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  position: absolute;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.slide-page:not(.active):hover .dot-number {
  color: #0873ba;
}

.slide-page:not(.active):hover .dot-number:before {
  border-color: #0873ba !important;
}

.slide-page.active .dot-number {
  pointer-events: none;
  color: #0873ba;
  background-color: #fff;
}

.slide-page.active .dot-number:before {
  border-color: #fff;
}

.circle-outer {
  stroke: hsla(0, 0%, 100%, 0.8);
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 534;
  transition: all 0.3s ease-in-out;
}

.slide-page.active .circle-outer {
  stroke: #0873ba;
  animation-name: Show100;
  animation-fill-mode: forwards;
}

.slide-next:hover {
  transform: scale(1.1) translateX(5px);
}

.slide-prev:hover {
  transform: scale(1.1) translateX(-5px);
}

.slide-prev {
  left: 0;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/previous.svg)
    no-repeat 50%/90%;
}

.slide-next,
.slide-prev {
  top: 0;
  position: absolute;
  width: 70px;
  height: 70px;
}

.slide-next {
  right: 0;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/next.svg)
    no-repeat 50%/90%;
}

.slide-page .dot-number {
  pointer-events: none;
  color: #fff;
  line-height: 30px;
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.slide-page .dot-number:before {
  display: none;
}

.slide-page:hover .circle-outer {
  stroke: #0873ba;
}

.thumbs-video {
  margin: auto;
  position: relative;
  display: block;
}

.thumbs,
.thumbs-video {
  width: 90%;
  max-width: 600px;
}

.thumbs {
  height: auto;
  left: 50%;
  bottom: 2.5vh;
  position: absolute;
  display: inline-block;
  margin: 0;
  transform: translate(-50%);
  z-index: 5;
}

.thumb-item {
  width: auto;
  height: auto;
  max-width: 90px;
  max-height: 50px;
  position: relative;
  border: 3px solid #fff;
  overflow: hidden;
  transition: border 0.3s ease-in-out;
}

.thumb-item,
.thumb-item a {
  display: block;
}

.slide-item.current .thumb-item {
  pointer-events: none;
  border-color: #0873ba;
}

.thumb-item:hover {
  border-color: #0873ba;
}

.thumb-item img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.center-slidebox .slide-wrapper {
  width: 100% !important;
  white-space: nowrap;
  text-align: center;
}

.center-slidebox .slide-item {
  float: none !important;
  display: inline-block !important;
  vertical-align: top;
}

.next-item {
  z-index: 1;
  cursor: pointer;
}

.prev-item {
  z-index: 2;
  cursor: pointer;
}

.slide-pic-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  max-width: inherit;
  margin: -40px 0 0;
  z-index: 10;
}

.next-pic {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/next.svg)
    no-repeat 50% / contain;
  right: 10px;
}

.next-pic,
.prev-pic {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.prev-pic {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/previous.svg)
    no-repeat 50% / contain;
  left: 10px;
}

.next-pic:not(.disabled):hover,
.prev-pic:not(.disabled):hover {
  transform: scale(1.2);
}

.next-pic.disabled,
.prev-pic.disabled {
  opacity: 0.2;
  pointer-events: none;
}

.album-center .slide-buttons {
  width: 100%;
  bottom: auto;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.album-center .slide-next {
  right: 20px;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/next.svg)
    no-repeat 50%/110%;
}

.album-center .slide-prev {
  left: 20px;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/previous.svg)
    no-repeat 50%/110%;
}

.slide-mask .slide-pagination {
  position: absolute;
  left: 0;
  bottom: 20px;
  text-align: center;
}

.slide-pics .slide-pagination {
  position: absolute;
  bottom: 50px;
}

.slide-certi .slide-pagination {
  margin: 20px 0 0;
}

.slide-project .slide-pagination {
  position: absolute;
  bottom: -5vw;
  left: 0;
}

.dot-grey .slide-page .dot-number {
  color: #aaa;
}

.dot-grey .slide-page.active .dot-number {
  color: #0873ba;
}

.dot-grey .circle-outer {
  stroke: #aaa;
}

.special-slide .slide-buttons {
  width: 200px;
  left: calc(50% - 100px);
  top: auto;
  bottom: -30px;
  margin: 0;
}

.special-slide .slide-buttons:before {
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -40px;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/hand.svg)
    no-repeat 50%/80%;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
  z-index: -1;
}

.grabbing .slide-buttons:before {
  opacity: 0;
}

.special-slide .slide-next {
  width: 50px;
  height: 50px;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/next2.svg)
    50% / contain;
}

.special-slide .slide-prev {
  width: 50px;
  height: 50px;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/prev2.svg)
    50% / contain;
}

@media screen and (max-width: 620px) {
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
  }

  .thumbs,
  .thumbs-video {
    max-width: 260px;
  }

  .slide-page {
    transform: scale(0.8);
  }

  .slide-pics .slide-pagination {
    bottom: 0;
    margin: 10px 0;
  }
}

@media screen and (min-width: 1100px) {
  .ani-item.on-show {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .box-nav,
  .close-video {
    opacity: 0;
  }

  .box-nav.show,
  .close-video.show {
    animation: toRight;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .container:before {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
  }

  .show .nav-click {
    animation: goLeft;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show .logo {
    animation: goRight;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .logo-menu {
    opacity: 0;
  }

  .overlay-menu.show .logo-menu {
    animation: scaleLarge;
    animation-duration: 0s;
    animation-delay: 0s;
    animation-fill-mode: none;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }

  .register-form .input-area,
  .register-form .input-but,
  .register-form .input-text,
  .register-form .require-col {
    opacity: 0;
  }

  .register-form.show .title-main {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 1.3s;
    animation-fill-mode: forwards;
  }

  .register-form.show .input-text {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 1.4s;
    animation-fill-mode: forwards;
  }

  .register-form.show .input-area {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
  }

  .register-form.show .input-but {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 1.6s;
    animation-fill-mode: forwards;
  }

  .register-form.show .require-col {
    animation: goWidth;
    animation-duration: 1s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
  }

  .register-form.show .close {
    animation: toRight;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    pointer-events: auto;
  }

  .bg-cover:after,
  .color-overlay,
  slide-mask:after {
    opacity: 0;
  }

  .show-text .bg-cover:after,
  .show-text .color-overlay,
  .show-text slide-mask:after {
    animation: fadeIn;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .bg-inner.show {
    animation: toHeight;
    animation-duration: 3s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .title-main h3,
  .title-main:not(.text-ani-item) h2 {
    opacity: 0;
  }

  .show-text .title-main:not(.text-ani-item) h2 {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show-text .title-main:not(.text-ani-item) h3 {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .underline:after {
    opacity: 0;
  }

  .show-text .underline:after {
    animation: goWidth;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .box-overlay,
  .box-overlay span {
    opacity: 0;
  }

  .show-text .box-overlay {
    animation: scaleLarge 2s 0s forwards;
  }

  .show-text .box-overlay span {
    animation: RotateNew1 25s 0s infinite alternate;
  }

  .view-all {
    opacity: 0;
  }

  .show-text .view-all {
    animation: fadeInUp 1s ease 0.3s forwards;
  }

  .text-banner,
  .text-banner .box-text,
  .text-banner .view-more,
  .text-banner h3 {
    opacity: 0;
  }

  .text-banner:before {
    transform: scaleX(0);
    transition: transform 0.6s ease-in-out;
  }

  .ani-text .text-banner:before {
    transform: scaleX(1);
  }

  .ani-text .text-banner .box-text {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .ani-text .text-banner h3 {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .ani-text .text-banner .view-more {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }

  .show-text .text-banner {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .text-project .title-main,
  .text-project .view-more,
  .text-project h3,
  .text-slide-pro {
    opacity: 0;
  }

  .active .text-project h3 {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .active .text-project .title-main {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
  }

  .active .text-slide-pro {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 0.7s;
    animation-fill-mode: forwards;
  }

  .active .text-project .view-more {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 0.9s;
    animation-fill-mode: forwards;
  }

  .slide-project,
  .text-project {
    opacity: 0;
  }

  .show-text .text-project {
    animation: fadeInUp;
    animation-duration: 0.6s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show-text .slide-project {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .home-project .bg-cover {
    opacity: 0;
  }

  .home-project.show-text .bg-cover {
    animation: fadeIn;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .text-box {
    opacity: 0;
  }

  .show-text .text-box {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
  }

  .business-home {
    opacity: 0;
  }

  .show-text .business-home:first-child {
    animation: goRight2;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
  }

  .show-text .business-home:nth-child(2) {
    animation: goLeft2;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-delay: 0.6s;
  }

  .box-news-home:after,
  .item-news-home,
  .item-video-home {
    opacity: 0;
  }

  .show-text .item-news-home:first-child {
    animation: goRight;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show-text .item-news-home:nth-child(2) {
    animation: goLeft;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show-text .item-news-home:nth-child(3) {
    animation: fadeInUp;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show-text .item-news-home:nth-child(4) {
    animation: goLeft;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show-text .item-video-home {
    animation: fadeInUp;
    animation-duration: 1.5s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
  }

  .show-text .box-news-home:after {
    animation: goRight;
    animation-duration: 1.2s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
  }

  .item-recruitment {
    opacity: 0;
  }

  .show-text .item-recruitment {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  .item-recruitment:first-child {
    animation-delay: 0.2s;
  }

  .item-recruitment:nth-child(2) {
    animation-delay: 0.4s;
  }

  .item-recruitment:nth-child(3) {
    animation-delay: 0.6s;
  }

  .map-box {
    opacity: 0;
  }

  .show-text .map-box {
    animation: goRight;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  #contact-page .company-info li,
  #home-page .company-info li {
    opacity: 0;
  }

  #contact-page .on-show .company-info li,
  .show-text .company-info li {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .company-info li:nth-child(2) {
    animation-delay: 0.2s;
  }

  .company-info li:nth-child(3) {
    animation-delay: 0.3s;
  }

  .company-info li:nth-child(4) {
    animation-delay: 0.4s;
  }

  .company-info li:nth-child(5) {
    animation-delay: 0.5s;
  }

  .company-info li:nth-child(6) {
    animation-delay: 0.6s;
  }

  .company-info li:nth-child(7) {
    animation-delay: 0.7s;
  }

  .pic-value,
  .text-about-value {
    opacity: 0;
  }

  .show-text .pic-value {
    animation: goRight;
    animation-duration: 1.2s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .pic-value.pic-value-hm-r5 {
    padding: 0 0 0 5vw;
  }

  .show-text .text-about-value {
    animation: goLeft2;
    animation-duration: 1.2s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .group-central .slide-buttons,
  .group-central .slide-pagination {
    opacity: 0;
  }

  .show-text .slide-buttons,
  .show-text .slide-pagination {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .copyright,
  .social {
    opacity: 0;
  }

  .show .copyright {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .show .social {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }

  .library-box,
  .slide-partner {
    opacity: 0;
  }

  .show-text .library-box,
  .show-text .slide-partner {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  #business-page .box-img {
    opacity: 0;
  }

  #business-page .show-text .box-img {
    animation: fadeIn;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .text-ani-item:after {
    opacity: 0;
  }

  .text-ani-item.showline:after {
    animation: goWidth;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .text-ani-item.showline h3 {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
  }

  .project-item {
    opacity: 0;
  }

  .project-item:after {
    content: "";
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    position: absolute;
    left: -1px;
    top: -1px;
    background-color: #fff;
    transform-origin: top left;
    z-index: 1;
  }

  .project-item:nth-child(2n):after {
    transform-origin: top right;
  }

  .on-show .project-item:after {
    animation-name: aniWidth;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .on-show .project-item {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .description-map,
  .map-project {
    opacity: 0;
  }

  .on-show .map-project {
    animation-name: goRight;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .on-show .description-map {
    animation-name: goLeft;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .line-other {
    opacity: 0;
  }

  .line-other.on-show {
    animation-name: goWidth;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .box-img {
    opacity: 0;
  }

  .show-text .box-img {
    animation-name: fadeIn2;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }

  .enviroment-work:nth-child(odd) .box-enviroment.on-show {
    animation: goRight2 1s ease forwards;
  }

  .enviroment-work:nth-child(odd) .pic-img.on-show {
    animation: goLeft2 1s ease 0.5s forwards;
  }

  .enviroment-work:nth-child(2n) .box-enviroment.on-show {
    animation: goLeft2 1s ease forwards;
  }

  .enviroment-work:nth-child(2n) .pic-img.on-show {
    animation: goRight2 1s ease 0.5s forwards;
  }

  .enviroment-policy:nth-child(2n) .pic-envi.on-show {
    animation: goRight2 1s ease forwards;
  }

  .enviroment-policy:nth-child(2n) .box-policy.on-show,
  .enviroment-policy:nth-child(odd) .pic-envi.on-show {
    animation: goLeft2 1s ease forwards;
  }

  .enviroment-policy:nth-child(odd) .box-policy.on-show {
    animation: goRight2 1s ease forwards;
  }

  .box-nav li,
  .copyright a,
  .footer,
  .link-home a,
  .logo,
  .nav li a,
  .sub-nav li a,
  .wheel {
    transition: all 0.3s ease-in-out;
  }

  .copyright a:hover,
  .google-map:hover {
    color: #0571b8;
  }

  .nav li a:hover {
    color: #009aff;
  }

  .box-nav li:hover {
    opacity: 1;
  }

  .sub-nav li a {
    transition: all 0.3s ease-in-out;
  }

  .outer-nav.second .sub-nav li:hover a,
  .sub-nav li:hover a {
    background-color: #0571b8;
    color: #fff;
  }

  .foreground,
  .social li a {
    transition: all 0.6s ease-in-out;
  }

  .social li:hover .foreground {
    stroke-dashoffset: 0;
  }

  .social li a:hover {
    color: #231f20;
  }

  .box-nav li a,
  .box-nav li a:before,
  .box-nav li span,
  .sub-news li a,
  .sub-news li a:before,
  .sub-news li span {
    transition: all 0.3s ease-in-out;
  }

  .box-nav li:hover a,
  .sub-news li:hover a {
    font-weight: 700;
    opacity: 1;
  }

  .box-nav li:hover span,
  .sub-news li:hover span {
    transform: translateX(0);
    opacity: 1;
  }

  .box-nav li:hover a:before {
    opacity: 1;
    box-shadow: 0 0 10px 5px hsla(0, 0%, 100%, 0.2);
  }

  .player,
  .view-video {
    transition: all 0.3s ease-in-out;
  }

  .player:hover,
  .view-video:hover {
    border: 5px solid #fff;
  }

  .language li a,
  .right-header,
  .right-header a,
  .search-but {
    transition: all 0.3s ease-in-out;
  }

  .right-header a:hover {
    color: #fff;
  }

  .active .right-header {
    display: none;
  }

  .language li a:hover,
  .search-but:hover {
    color: #fff;
  }

  .hotline,
  .mobile-phone a small,
  .mobile-phone a span {
    transition: all 0.3s ease-in-out;
  }

  .mobile-phone a:hover span {
    color: #0571b8;
  }

  .mobile-phone a:hover small {
    transform: scale(0.9);
    filter: hue-rotate(-10deg);
  }

  .active-nav:after,
  .active-nav:before,
  .close-nav span,
  .close-nav:after,
  .close-nav:before,
  .nav-click > div {
    transition: all 0.3s ease-in-out;
  }

  .active-nav:hover {
    padding: 10px;
    background-color: #0571b8;
    border: 2px solid #bfdfee;
  }

  .active-nav:hover,
  .close-nav:hover {
    color: #fff;
    left: -5px;
  }

  .close-nav:hover:after,
  .close-nav:hover:before {
    background-color: #fff;
  }

  .close-nav:hover span {
    width: 103px;
    background-color: #009aff;
  }

  .print-box > a,
  .share-item li a {
    transition: all 0.3s ease-in-out;
  }

  .share-but.active,
  .share-but:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .share-item li:hover {
    border-color: #231f20;
  }

  .share-item li a:hover {
    color: #231f20;
  }

  .share-item li {
    transition: all 0.3s cubic-bezier(0.44, 0.39, 0.34, 1.03);
  }

  .close,
  .close-album,
  .close-details,
  .close-map,
  .close-news,
  .close-pics,
  .close-popup,
  .close-top,
  .close-video,
  .file-mark,
  .zoom,
  .zoom:after,
  button {
    transition: all 0.3s ease-in-out;
  }

  .close-details:hover,
  .close-top:hover {
    transform: scale(0.9);
  }

  .zoom-large:hover {
    background-color: #a89c85;
  }

  .close-album:hover,
  .close-pics:hover,
  .close-popup:hover,
  .close-video:hover,
  .close:hover,
  .zoom-large:hover:after {
    transform: rotate(90deg);
  }

  .close-news:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .go-top {
    transition: all 0.3s ease-in-out;
  }

  .go-top:hover {
    background: #0571b8;
    box-shadow: 0 0 15px 5px hsla(0, 0%, 78%, 0.1);
    color: #fff;
  }

  .zoom-control a {
    transition: all 0.3s ease-in-out;
  }

  .zoom-control a:hover {
    background-color: #bfdfee;
  }

  .close-infobox:hover,
  .close-map:hover {
    background-color: #bfdfee !important;
  }

  .input-but button:hover {
    color: #fff;
    background-image: none;
    background-color: #231f20;
  }

  .input-but button:hover:after {
    border: 1px solid #231f20;
  }

  .file-mark:hover {
    background-color: #231f20;
  }

  .download-but a,
  .download-but a:before {
    transition: all 0.3s ease-in-out;
  }

  .details-content .close-popup:hover {
    border: 7px solid #bfdfee;
  }

  button:hover {
    background-color: #231f20;
  }

  .view-more,
  .view-more:after,
  .view-more:before {
    transition: all 0.3s ease-in-out;
  }

  .view-more:hover {
    color: #231f20;
  }

  .view-more:hover:before {
    width: 50px;
    right: -30px;
    background-color: #231f20;
  }

  .view-more:hover:after {
    right: -30px;
    border-left: 5px solid #231f20;
  }

  .banner-home .view-more:hover:before {
    background-color: #0073b5;
  }

  .banner-home .view-more:hover:after {
    border-left: 5px solid #0073b5;
  }

  .banner-home .view-more:hover {
    color: #0073b5;
  }

  .item-home-video {
    cursor: pointer;
  }

  .business-home-pic:hover .pic-img {
    border: 6px solid #fff;
  }

  .date-thumb,
  .date-thumb span,
  .item-news-home:after,
  .txt-news-home {
    transition: all 0.3s ease-in-out;
  }

  .item-news-home:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 5px solid #009aff;
    opacity: 0;
  }

  .item-news-home:hover .date-thumb,
  .item-news-home:hover .txt-news-home {
    background-color: #009aff;
  }

  .item-news-home:hover .pic-img {
    background-position: 100% 100%;
  }

  .item-news-home:hover:after {
    opacity: 1;
  }

  .content-recruitment h3,
  .expired,
  .expired:before {
    transition: all 0.3s ease-in-out;
  }

  .item-recruitment {
    cursor: pointer;
  }

  .item-recruitment:hover .content-recruitment h3,
  .item-recruitment:hover .expired {
    color: #009aff;
  }

  .item-recruitment:hover .expired:before {
    background-color: #009aff;
  }

  .number-recruit:after {
    transition: all 0.5s ease-in-out;
  }

  .item-recruitment:hover .number-recruit:after {
    transform: scaleY(0.9);
  }

  .partner-item:after,
  .pic-partner-it {
    transition: all 0.3s ease-in-out;
  }

  .partner-item:hover:after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 7px solid #004f83;
  }

  .partner-item:hover .pic-partner-it {
    transform: scale(0.9);
  }

  .library-item:hover .pic-library .pic-img:after {
    opacity: 1;
  }

  .pic-library {
    cursor: pointer;
  }

  .pic-library .pic-img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 5px solid hsla(0, 0%, 100%, 0.8);
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  .library-item:hover .view-video {
    border: 5px solid #fff;
    transform: rotate(238deg);
    background-color: #0571b8;
  }

  .go-pro,
  .go-pro:after,
  .project-item,
  .project-pic {
    transition: all 0.3s ease-in-out;
  }

  .project-item:hover .project-pic {
    box-shadow: none;
  }

  .project-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .slide-other .project-item:hover {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.04);
  }

  .project-item:hover .go-pro {
    color: #231f20;
    transform: translateX(10px);
  }

  .project-item:hover .go-pro:after {
    background-color: #231f20;
  }

  .project-item:hover .pic-img {
    transform: scale(1.05);
  }

  .more-project,
  .more-project:after {
    transition: all 0.3s ease-in-out;
  }

  .more-project:hover {
    color: #231f20;
    transform: scale(1.1);
  }

  .more-project:hover:after {
    border-top: 8px solid #231f20;
  }

  .link-google {
    cursor: pointer;
  }

  .link-google span {
    transition: all 0.3s ease-in-out;
  }

  .link-google:hover span {
    color: #0571b8;
  }

  .view-album {
    transition: all 0.3s ease-in-out;
    opacity: 0.8;
  }

  .zoom:hover {
    background-color: #0571b8;
    border: 5px solid #bfdfee;
  }

  .zoom:hover:after {
    background: url(/wp-content/uploads/2024/09/zoom-in.svg) no-repeat 50%/80%;
  }

  .item-project-pic:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    border: 5px solid #0571b8;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  .item-project-pic:hover:after {
    opacity: 1;
  }

  .item-project-pic:hover .view-album {
    transform: rotate(90deg);
    opacity: 1;
  }

  .description-value img {
    cursor: pointer;
  }

  .r-link,
  .r-text {
    transition: all 0.3s ease-in-out;
  }

  .list-outer:hover,
  .report-03 .list-outer:hover {
    background-color: #0571b8;
  }

  .list-outer:hover p {
    color: #fff;
  }

  .list-outer:hover .r-date,
  .list-outer:hover .r-num {
    background-color: #fff;
    color: #0571b8;
  }

  .box-news,
  .text-news h3 {
    transition: all 0.3s ease-in-out;
  }

  .box-news:hover {
    background-color: #0571b8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .box-news:hover .date-thumb,
  .box-news:hover .date-thumb span,
  .box-news:hover .text-news h3 {
    color: #fff;
  }

  .news-item:before,
  .news-pic,
  .news-pic:before,
  .news-txt > h3 {
    transition: all 0.3s ease-in-out;
  }

  .news-item:hover:before {
    background-color: #0571b8;
  }

  .news-item:hover .news-pic:before {
    border-right: 20px solid #0571b8;
  }

  .news-item:hover .news-txt > h3 {
    color: #fff;
  }

  .news-item:hover .date-thumb {
    color: #fff;
    background-color: #0571b8;
  }

  .news-item:hover .date-thumb span {
    color: #fff;
  }

  .news-item:hover .news-pic {
    background-position: 100% 100%;
  }

  .close-box-map:after,
  .full-map,
  .gm-fullscreen-control,
  .infobox a,
  .zoom-control a {
    transition: all 0.3s ease-in-out;
  }

  .zoom-control a:hover {
    background-color: #000;
  }

  .close-box-map:hover:after {
    background-color: #000 !important;
  }

  .full-map:hover {
    background-color: #000;
  }

  .infobox a:hover {
    color: #0571b8;
  }

  .gm-fullscreen-control:hover {
    background: #000
      url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/fullscreen.svg)
      no-repeat 50%/90% !important;
  }

  .pic-img {
    transition: all 0.6s ease-in-out;
  }

  .pic-img:after,
  .slide-pagi a {
    transition: all 0.3s ease-in-out;
  }

  .slide-pagi a:hover {
    background-color: #fff;
  }

  .table-recruitment td a,
  .table-recruitment td:nth-child(2),
  td {
    transition: all 0.3s ease-in-out;
  }

  .table-recruitment td:nth-child(2):hover {
    background-color: #0571b8;
    color: #fff;
  }

  .table-recruitment td:nth-child(2):hover a {
    color: #fff;
  }

  .table-recruitment tr:hover td,
  .table-recruitment tr:nth-child(2n):hover td {
    background-color: #0571b8;
    color: #fff;
  }

  .table-recruitment tr:hover td a {
    color: #fff;
  }

  .list-view li,
  .list-view li a {
    transition: all 0.3s ease-in-out;
  }

  .list-view li:hover {
    background-color: #0571b8;
    color: #fff;
  }

  .list-view li:hover a {
    color: #fff;
  }

  .company-info li a {
    transition: all 0.3s ease-in-out;
  }

  .company-info li a:hover {
    color: #231f20;
  }

  body.auto .hide .logo {
    top: 0;
    left: 40px;
    width: 170px;
    height: 70px;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  body.auto .hide .logo:after {
    background: url(/wp-content/uploads/2025/11/logo-khl-new.png) no-repeat 50%/70%;
  }

  body.auto .go-top {
    left: auto;
    right: 20px;
  }

  body.auto .language li a:hover,
  body.auto .search-but.active,
  body.auto .search-but:hover {
    color: #231f20;
  }

  body.auto .header:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    opacity: 0;
    z-index: 3;
  }

  body.auto .header.hide:before {
    animation: scaleSmallX;
    animation-duration: 1s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
  }

  body.auto .right-footer .social {
    display: none;
  }

  body.auto .wheel {
    right: 40px;
    bottom: 40px;
  }

  body.auto .footer {
    position: relative;
    display: block;
    width: 100%;
    bottom: auto;
    background-color: #27282d;
    padding: 0;
  }

  body.auto .right-footer {
    width: 100%;
    float: none;
    padding: 15px 0;
    background-color: #fff;
  }

  body.auto .copyright {
    text-align: center;
    color: #444;
  }

  .header.hide {
    height: 70px;
    background-color: #fff;
  }

  .header.hide:after {
    height: 60px;
    opacity: 1;
    background-color: #fff;
    transition: background-color 0.3s ease-in-out;
    z-index: 6;
  }

  .hide .search-but {
    top: 12px;
  }

  .hide .language {
    top: 5px;
  }

  .hide .nav-click {
    top: 12px;
  }

  .hide .nav-click.active {
    top: 3vw;
  }

  .hide .search-form {
    top: 60px;
  }

  .item-search a,
  .item-search:before {
    transition: all 0.3s ease-in-out;
  }

  .item-search:hover a,
  .item-search:hover:before {
    background-color: #0571b8 !important;
  }
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
svg {
  display: block;
}

* {
  -webkit-font-smoothing: antialiased;
}

*,
:after,
:before {
  box-sizing: border-box;
}

html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
}

body,
html {
  width: 100%;
  margin: 0;
  padding: 0;
  scrollbar-color: inherit;
  scrollbar-width: thin;
}

body {
  height: 100%;
  background: linear-gradient(0deg, #0073b5, #bfdfee);
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  line-height: 1;
  overflow: hidden;
}

body.auto {
  overflow-y: auto;
  overflow-x: hidden;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

:focus {
  outline: 0;
  border: none;
}

strong {
  font-weight: 700;
}

code,
dd,
dl dt,
ins,
pre,
strong {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

img[alt] {
  font-size: 0;
}

.clear {
  clear: both;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
  box-sizing: border-box;
}

.clearfix:after {
  clear: both;
}

svg:not(:root) {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}

a,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}

a {
  text-decoration: none;
}

p {
  text-decoration: none;
  -webkit-text-size-adjust: none;
  line-height: 1.6;
  font-weight: 400;
}

ol,
p,
ul {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
  font-family: Montserrat, sans-serif;
}

mark {
  text-decoration: none;
  vertical-align: baseline;
  background-color: transparent;
}

cite,
em,
i,
mark,
sup {
  font-weight: 500;
  font-family: Montserrat, sans-serif;
}

cite,
em,
i {
  text-decoration: none;
  line-height: 1.6;
  vertical-align: baseline;
}

button,
div,
input,
select,
span,
table,
textarea {
  font-family: Montserrat, sans-serif;
}

img[data-src].lazy {
  opacity: 0;
}

sup {
  text-decoration: none;
  bottom: 5px;
  font-size: 70%;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: baseline;
  font-weight: 300;
  position: relative;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #aaa;
}

.loadicon {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 22vw;
  height: 9.35vw;
  margin: -4.675vw 0 0 -11vw;
  z-index: 999999;
}

.loadicon-pic {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/loadicon-pic.svg)
    no-repeat 50% / contain;
  opacity: 0;
}

.load-present,
.loadicon-pic {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.stroke-right {
  transform: translateX(50px);
}

.stroke-left {
  transform: translateX(-50px);
}

.st0 {
  fill: #0873ba;
}

.st2 {
  fill: #fff;
}

.loadicon.show .stroke-left,
.loadicon.show .stroke-right {
  transform: none;
  transition: all 1s ease-in-out;
}

.loadicon.show .stroke-line {
  transition: all 0.5s ease-in-out;
  fill-opacity: 1;
  stroke-opacity: 0;
}

.loadicon.show .loadicon-pic {
  animation: fadeIn;
  animation-duration: 1.2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

.stroke-line {
  fill-opacity: 0;
  stroke: #fff;
  stroke-opacity: 1;
  stroke-miterlimit: 10;
  stroke-width: 0.4;
  stroke-dasharray: 660;
  stroke-dashoffset: 660;
}

.loader .stroke-line {
  animation-name: DrawStroke;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.loadx {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/cycle.png)
    no-repeat 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  margin: -41px 0 0 -41px;
  border-radius: 50%;
  animation: Rotate 1s linear infinite;
  display: none;
  z-index: 110000;
}

.blur {
  filter: blur(10px);
}

.header {
  position: fixed;
  height: auto;
  z-index: 100;
}

.header,
.header:after {
  width: 100%;
  top: 0;
  left: 0;
}

.header:after {
  content: "";
  position: absolute;
  height: 200px;
  pointer-events: none;
  background: transparent
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/head-white.png)
    repeat 50%;
  z-index: 2;
}

.logo {
  position: absolute;
  left: 40px;
  top: 20px;
  width: 15vw;
  height: 7.125vw;
  z-index: 10;
}

.logo:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 80%;
  background: url(/wp-content/uploads/2025/11/logo-khl-new.png) no-repeat 50% /
    contain;
}

.search-but {
  position: absolute;
  width: 40px;
  height: 40px;
  color: #0873ba;
  z-index: 11;
  right: 110px;
  top: 30px;
}

.search-but:before {
  content: "";
  position: absolute;
  height: 15px;
  background-color: #0873ba;
}

.search-but svg {
  width: 90%;
  height: 90%;
}

.search-form {
  position: absolute;
  right: 30px;
  top: 75px;
  display: block;
  width: 0;
  height: 50px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  z-index: 20;
}

.form-row-search {
  position: relative;
  width: 100%;
  height: 100%;
}

.form-row-search input[type="text"] {
  border: 0;
  font-size: 15px;
  font-weight: 400;
  color: #000 !important;
  background-color: transparent;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  line-height: 48px;
  box-shadow: none;
}

.form-row-search input[type="text"]:focus {
  color: #fff;
}

.search-form.active {
  width: 400px;
  pointer-events: auto;
  border-radius: 30px;
}

.search-but.active {
  color: #fff;
}

.language {
  position: absolute;
  top: 22px;
  right: 170px;
  z-index: 11;
}

.language,
.language ul {
  display: block;
  height: auto;
  width: auto;
}

.language li,
.language ul {
  position: relative;
}

.language li {
  width: auto;
  height: auto;
  display: inline-block;
  text-align: center;
  padding: 6px;
  margin: 0;
}

.language li a {
  position: relative;
  color: #0873ba;
  padding: 0 10px;
  font-size: 15px;
  line-height: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

.language li.active {
  display: none;
  pointer-events: none;
}

.hotline {
  display: none;
}

.navigation {
  height: 0;
  position: fixed;
  left: 0;
  text-align: center;
  overflow: hidden;
  transition: height 0.6s ease-in-out;
}

.nav,
.navigation {
  width: 100%;
  top: 0;
  z-index: 30;
}

.nav {
  max-width: 800px;
  height: 100%;
  position: absolute;
  right: 0;
  pointer-events: none;
}

.nav:after,
.nav:before {
  content: " ";
  height: 100%;
}

.nav ul,
.nav:after,
.nav:before {
  display: inline-block;
  vertical-align: middle;
}

.nav ul {
  margin: 0 -5px;
  counter-reset: section;
}

.nav li,
.nav ul {
  height: auto;
  width: 100%;
  position: relative;
}

.nav li {
  display: block;
  margin: 10px 0;
  transform: translateX(100%);
  text-align: right;
  padding: 1.4vh 4vw;
  transition: transform 0.4s ease-in-out;
}

.nav li:before {
  counter-increment: section;
  content: ".0" counter(section);
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 0 20px;
  display: none;
}

.nav li:after {
  counter-increment: section;
  content: ".0" counter(section);
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 0 20px;
}

.nav li a,
.nav li:before,
.nav li:after {
  display: inline-block;
  color: #fff;
}

.nav li a {
  font-weight: 500;
  font-size: 2.85714vh;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  font-style: italic;
}

.nav li.current a,
.navigation li.active a {
  color: #009aff;
}

.nav li.current {
  pointer-events: none;
}

.nav li.current.active {
  pointer-events: auto;
}

.nav li.show {
  transform: none;
}

.navigation.show {
  height: 100vh;
}

.navigation.show .nav {
  pointer-events: auto;
}

.nav.active li {
  animation-name: goLeft;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.nav.active li:first-child {
  animation-delay: 0.5s;
}

.nav.active li:nth-child(2) {
  animation-delay: 0.6s;
}

.nav.active li:nth-child(3) {
  animation-delay: 0.7s;
}

.nav.active li:nth-child(4) {
  animation-delay: 0.8s;
}

.nav.active li:nth-child(5) {
  animation-delay: 0.9s;
}

.nav.active li:nth-child(6) {
  animation-delay: 1s;
}

.nav.active li:nth-child(7) {
  animation-delay: 1.1s;
}

.nav.active li:nth-child(8) {
  animation-delay: 1.2s;
}

.nav.active li:nth-child(9) {
  animation-delay: 1.3s;
}

.overlay-menu {
  height: 100vh;
  width: 100vw;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 1s ease-in-out;
  background: url(/wp-content/uploads/2024/09/bg-menu.jpg) repeat 50% / cover;
  pointer-events: none;
  z-index: 12;
}

.overlay-menu.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay-menu:after {
  content: "";
  position: absolute;
  width: 50vw;
  height: 50vw;
  top: -26vw;
  left: -18vw;
  border-radius: 50%;
  background-image: radial-gradient(
    hsla(0, 0%, 100%, 0.8) 0,
    hsla(0, 0%, 100%, 0) 60%
  );
}

.logo-menu {
  position: absolute;
  width: 20vw;
  height: 8.5vw;
  left: 60px;
  top: 40px;
  z-index: 31;
}

.move-logo {
  position: absolute;
  width: 100%;
  height: 80%;
  top: 0;
  left: 0;
  background: url(/wp-content/uploads/2025/11/logo-khl-new.png) no-repeat 50% /
    contain;
}

.container,
main {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  display: block;
}

.container {
  min-height: 100vh;
  overflow: hidden;
}

.container.mapshow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

section {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

.wrap-small {
  max-width: 900px;
}

.wrap-content,
.wrap-small {
  position: relative;
  display: block;
  width: 90%;
  margin: auto;
  padding: 3vw 0;
  height: auto;
  text-align: center;
  z-index: 10;
}

.wrap-content {
  max-width: 1100px;
}

.wrap-large {
  width: 90%;
  max-width: 1400px;
}

.wrap-full,
.wrap-large {
  position: relative;
  display: block;
  margin: auto;
  padding: 0;
  height: auto;
  text-align: center;
  z-index: 10;
}

.wrap-full {
  width: 100%;
}

.nav-click {
  position: absolute;
  width: auto;
  height: auto;
  right: 40px;
  top: 30px;
  width: 52px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 100;
}

.nav-click > div {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  padding: 10px 6px;
  text-transform: uppercase;
  font-weight: 700;
}

.active-nav {
  color: #0873ba;
  pointer-events: auto;
  border-top: 1px solid #0873ba;
  border-bottom: 1px solid #0873ba;
}

.close-nav {
  display: block;
  opacity: 0;
  color: #fff;
  pointer-events: none;
}

.close-nav:after {
  transform: rotate(-45deg);
}

.close-nav:after,
.close-nav:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 1px;
  background-color: #fff;
  top: 16px;
  right: -14px;
}

.close-nav:before {
  transform: rotate(45deg);
}

.close-nav span {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -8px;
  left: -14px;
  z-index: -1;
}

.nav-click.active {
  right: 90px;
  top: 60px;
}

.nav-click.active .active-nav {
  opacity: 0;
  pointer-events: none;
}

.nav-click.active .close-nav {
  opacity: 1;
  pointer-events: auto;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 99999;
}

.mask.finish {
  pointer-events: none;
  z-index: -9999;
}

.mask:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: linear-gradient(0deg, #0073b5, #bfdfee);
  transition: all 1s ease-in-out;
}

.mask.show:after {
  height: 0;
}

.mask.show-page:after {
  height: 100vh;
  transition: all 0.6s ease-in-out;
}

.social {
  position: absolute;
  right: -60px;
  top: -13px;
  width: auto;
  height: auto;
  z-index: 1;
}

.social ul {
  width: 100%;
  height: auto;
  display: block;
  list-style: none;
  position: relative;
}

.social li {
  position: relative;
  display: inline-block;
  margin: 10px 0;
}

.social li a {
  width: 45px;
  height: 45px;
  display: block;
  text-indent: -9999999px;
  position: relative;
  color: #fff;
}

.social li svg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.foreground {
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  stroke: CurrentColor;
  stroke-width: 1.5;
  transform-origin: 50% 50%;
}

button {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 10px 13px;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  background-color: #0571b8;
  font-weight: 700;
  cursor: pointer;
}

.slide-pics {
  background-color: #a3a3a3;
}

.banner-home,
.banner-inner {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  overflow: hidden;
}

.bg-inner,
.bg-larger {
  position: relative;
  height: 100vh;
}

.bg-cover,
.bg-inner,
.bg-larger {
  width: 100%;
  display: block;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-cover {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

.box-txt {
  position: relative;
  display: block;
  margin: auto;
  padding: 30px 0;
  color: #fff;
  max-width: 600px;
  text-align: center;
  z-index: 5;
}

.box-txt h3 {
  position: relative;
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  color: #ffe5a4;
  text-transform: uppercase;
  margin: 30px 0 20px;
}

.box-txt p {
  font-style: italic;
  margin: 3px 0;
  text-align: left;
}

.box-txt strong {
  font-size: 120%;
}

.text-inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0 1.5vw;
}

.text-inner:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 40px;
  background-color: hsla(0, 0%, 100%, 0.8);
  top: 0;
  left: 0;
}

.pic-img {
  position: relative;
  overflow: hidden;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pic-img,
.pic-img img {
  display: block;
  width: 100%;
  height: auto;
}

.pic-img img {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.pic-img.first {
  opacity: 0;
  z-index: 1;
}

.slide-pics {
  height: auto;
}

.slide-mask,
.slide-pics {
  width: 100%;
  position: relative;
  display: block;
  margin: 0;
}

.slide-mask {
  height: 100%;
}

.slide-mask:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
  mix-blend-mode: multiply;
}

.bg-home {
  position: relative;
  width: 100%;
  height: 100vh;
  display: block;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: 50% 50%;
}

.slide-mask .slide-item:nth-child(2n) .bg-home.move {
  animation-name: Bg-ZoomOut;
}

.bg-home.move {
  animation-name: Bg-ZoomIn;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.pause-move {
  animation-play-state: paused !important;
}

.is-IE .slide-mask:after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
  mix-blend-mode: inherit;
}

.no-wheel .box-nav {
  pointer-events: none;
  z-index: 2;
}

.box-nav {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 0 30px 0 0;
  transition: all 0.3s ease-in-out;
  transform: translateY(-50%);
  z-index: 20;
}

.box-nav,
.box-nav ul {
  width: auto;
  height: auto;
}

.box-nav ul {
  position: relative;
  text-align: right;
  list-style: none;
}

.box-nav ul:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  right: 32px;
  background-color: hsla(0, 0%, 100%, 0.6);
}

.box-nav li {
  position: relative;
  display: block;
  height: auto;
  margin: 20px 0 0;
}

.box-nav li a {
  font-weight: 300;
  font-size: 16px;
  width: auto;
  height: 40px;
  line-height: 40px;
  margin: 0 0 0 30px;
  opacity: 0.7;
}

.box-nav li a,
.box-nav li span {
  font-style: italic;
  color: #fff;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.box-nav li span {
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 36px;
  transform: translateX(100%);
  opacity: 0;
}

.box-nav li span,
.box-nav li.current {
  pointer-events: none;
}

.box-nav li.current a {
  font-weight: 700;
  opacity: 1;
}

.box-nav li.current span {
  transform: translateX(0);
  opacity: 1;
}

.box-nav li.current a:before {
  opacity: 1;
  box-shadow: 0 0 10px 5px hsla(0, 0%, 100%, 0.2);
}

.box-slider {
  position: relative;
  display: block;
  float: left;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  z-index: 1;
}

.box-slider,
.group-central {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.group-central {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateY(100%);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.group-central.show-text {
  z-index: 1;
}

.group-central:first-child {
  transform: translateY(0);
}

.content-main {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  overflow: hidden;
  padding: 0;
  z-index: 5;
}

.content-main:after,
.content-main:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.content-main.mapshow:after,
.content-main.mapshow:before {
  display: none;
}

.content-center {
  display: inline-block;
  vertical-align: middle;
  width: 90%;
  max-width: 1200px;
  margin: 0 -5px;
  padding: 50px 0 0;
  height: auto;
  text-align: center;
  z-index: 3;
}

.all-pics {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4000;
  display: none;
}

.all-pics.show {
  display: block;
}

.all-pics .text-length {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 10px;
  text-align: center;
  opacity: 0;
  z-index: 9998;
}

.all-pics .text-length h3 {
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  line-height: 1.4;
  position: relative;
  text-align: center;
  padding: 10px 20px;
  text-transform: uppercase;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.2);
}

.full {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.full,
.full img {
  position: relative;
  display: block;
}

.full img {
  width: auto;
  min-width: 55%;
  max-width: 90%;
  height: auto;
  outline: 0;
  border: none;
  margin: 0 auto;
  opacity: 0;
  cursor: url(/wp-content/uploads/2024/09/openhand.png) 6 8, move;
  z-index: 5;
}

.full span {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.scrollA {
  width: 100%;
  height: auto;
  max-height: 50vh;
  position: relative;
  display: block;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #fff transparent;
  scrollbar-width: thin;
}

.scrollA::-webkit-scrollbar {
  width: 3px;
}

.scrollA::-webkit-scrollbar-track {
  background-color: transparent;
}

.scrollA::-webkit-scrollbar-thumb {
  background-color: #fff;
}

.title-page {
  position: absolute;
  display: none;
  bottom: 64px;
  left: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.title-page h1 {
  font-size: 2.5vw;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 6px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
}

.title-page h1,
.title-page h2 {
  text-transform: uppercase;
  color: #fff;
}

.title-page h2 {
  font-size: 17px;
  line-height: 2;
  font-weight: 500;
}

.title-page:after {
  content: "";
  position: relative;
  display: block;
  margin: 10px auto;
  width: 60px;
  height: 1px;
  background-color: #fff;
  opacity: 0;
}

.title-page h1 strong {
  display: block;
  font-size: 150%;
  font-weight: 700;
}

.title-page.on-show h1 {
  animation: fadeInUp;
  animation-duration: 0.8s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

.title-page.on-show:after {
  animation: scaleSmallX;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
}

.title-main {
  display: inline-block;
  width: 100%;
  text-align: center;
  height: auto;
  position: relative;
  margin: 0 -5px;
  padding: 0;
  z-index: 5;
}

.title-main h2 {
  font-weight: 700;
  font-size: 2.05vw;
  line-height: 1.4;
}

.title-main h2,
.title-main h3 {
  text-transform: uppercase;
  display: block;
  color: #fff;
}

.title-main h3 {
  font-weight: 300;
  font-size: 22px;
  line-height: 2;
  position: relative;
}

.underline:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 80px;
  height: 1px;
  background-color: #fff;
  margin: 15px 0;
}

.title-big {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  text-align: left;
}

.title-big h2 {
  font-size: 2.5vw;
  font-weight: 300;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}

.title-big h2 strong {
  display: block;
  font-weight: 500;
}

.text-ani-item h2 > span > span {
  opacity: 0;
}

.text-ani-item h2 > span > span.move {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.blue,
.blue h2 {
  color: #0571b8;
}

.blue:after {
  background-color: #0571b8;
}

.overlay-dark {
  background: linear-gradient(135deg, rgba(0, 72, 136, 0.85), #bfdfee);
  height: 0;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  transition: height 0.8s ease-in-out;
  z-index: 1500;
}

.overlay-dark.level-index-in,
.overlay-dark.show {
  height: 100%;
}

.view-album {
  background-image: radial-gradient(#0571b8, #014470);
  width: 60px;
  height: 60px;
  left: 50%;
  top: 50%;
  margin: -30px 0 0 -30px;
  z-index: 10;
}

.view-album,
.view-album:after {
  position: absolute;
  border-radius: 10px;
}

.view-album:after {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/album.svg)
    no-repeat 50%/80%;
}

.player,
.view-video {
  background: #f00;
  width: 70px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  z-index: 10;
}

.player:after,
.view-video:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(/wp-content/uploads/2024/09/player.svg) no-repeat 60%/60%;
  border-radius: 50%;
}

.control-svg {
  display: none;
}

.register-form {
  height: 0;
  overflow: hidden;
  width: 100%;
  left: 0;
  bottom: 0;
  margin: 0;
  position: fixed;
  text-align: center;
  transition: height 0.3s ease-in-out;
  z-index: 200;
}

.register-form.show {
  height: 100%;
}

.register-form:after,
.register-form:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.register-form form {
  display: inline-block;
  position: relative;
  width: 0;
  max-width: 800px;
  height: auto;
  margin: 0;
  vertical-align: middle;
  overflow: hidden;
  z-index: 20;
}

.register-form span {
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  position: fixed;
  background: radial-gradient(
    circle farthest-corner at center center,
    #ffde77 0,
    #0873ba 100%
  );
  opacity: 0.8;
  transition: height 0.6s ease-in-out;
}

.register-form.show form {
  width: 80%;
}

.register-form.show span {
  height: 100%;
}

.register-form .require-col {
  width: 100%;
  padding: 20px 50px;
  background-color: #0873ba;
  border-radius: 20px;
  opacity: 1;
  text-align: center;
}

.register-form .close {
  top: 0;
  right: 0;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.register-form .title-main {
  margin: 0 0 20px;
}

.register-form.show .close {
  animation: toRight;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  pointer-events: auto;
}

.require-col {
  width: 90%;
  text-align: left;
}

.input-text,
.require-col {
  height: auto;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.input-text {
  width: 100%;
  margin: 0 0 5px;
  border: 5px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 12px;
}

.input-text input[type="text"] {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  font-size: 15px;
  line-height: 48px;
  padding: 0 20px;
  border: none;
  width: 100%;
  height: 50px;
  font-weight: 400;
  background-color: #fff;
  box-shadow: none;
  opacity: 0.8;
  border-radius: 0;
  transition: all 0.3s ease-in-out;
}

.input-text input[type="text"]:focus {
  opacity: 1;
}

.input-area {
  width: 100%;
  height: auto;
  position: relative;
  margin: 0;
  border: 5px solid hsla(0, 0%, 100%, 0.2);
  display: inline-block;
  vertical-align: top;
  border-radius: 12px;
}

.input-area textarea {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  font-size: 15px;
  line-height: 24px;
  padding: 8px 20px;
  border: none;
  width: 100%;
  height: 120px;
  font-weight: 400;
  background-color: #fff;
  opacity: 0.8;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  resize: none;
  box-shadow: none;
}

.input-area textarea:focus {
  opacity: 1;
}

.input-but {
  width: 96%;
  margin: 12px 0;
}

.input-but,
.input-but button {
  height: auto;
  position: relative;
  display: inline-block;
  text-align: center;
}

.input-but button {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  padding: 15px 20px;
  color: #fff;
  width: auto;
  -webkit-appearance: none;
  cursor: pointer;
  margin: 0;
  text-transform: uppercase;
  border: none;
  background-color: #0571b8;
  padding: 10px 20px;
}

.sub-nav {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  text-align: center;
  overflow: hidden;
  z-index: 10;
}

.sub-nav:before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #bcbcbc;
  z-index: 20;
}

.sub-nav ul {
  display: block;
  width: 100%;
  white-space: nowrap;
  z-index: 2;
  background-color: #fff;
}

.sub-nav li,
.sub-nav ul {
  position: relative;
  height: auto;
}

.sub-nav li {
  display: inline-block;
  width: auto;
  margin: 0 -3px;
  vertical-align: top;
}

.sub-nav li a {
  display: block;
  padding: 14px 20px;
  text-transform: uppercase;
  vertical-align: top;
  margin: 0 1px;
  font-weight: 700;
  font-size: 12px;
  color: #444;
  background-color: #eee;
}

.outer-nav.second .sub-nav li.current a,
.sub-nav li.current a {
  background-color: #0571b8;
  color: #fff;
  pointer-events: none;
}

.outer-nav.second .sub-nav li.active a,
.sub-nav li.active a {
  background-color: #0571b8;
  color: #fff;
}

.outer-nav {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: -45px 0 0;
  text-align: center;
  z-index: 4;
}

.outer-nav:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.outer-nav:not(.second).hide {
  visibility: hidden;
}

.outer-nav.second {
  top: -100px;
  left: 0;
  position: fixed;
  opacity: 0;
  height: auto;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.outer-nav.second:after {
  background-color: rgba(0, 0, 0, 0.3);
}

.outer-nav.second .sub-nav {
  margin: 0;
}

.outer-nav.second .sub-nav:before {
  display: none;
}

.outer-nav.second .sub-nav li a {
  font-size: 10px;
  padding: 10px 15px;
  margin: 0;
  background-color: #fff;
}

.outer-nav.second.fixed {
  pointer-events: auto;
  opacity: 1;
  top: 59px;
  margin: 0;
}

.outer-nav:not(.second).fixed {
  pointer-events: none;
  opacity: 0;
}

.input-select {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 10px 6px;
  z-index: 1;
}

.input-select select {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 48px 0 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/select2.png)
    no-repeat 100%;
  font-family: Montserrat, sans-serif;
  overflow: hidden;
  outline: 0;
  cursor: pointer;
  border: 1px solid #0571b8;
}

.input-select:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.input-select select option {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  padding: 15px 20px;
  background-color: #62676e;
}

.input-select select [title] {
  font-size: 16px;
  color: #000;
  font-weight: 700;
}

.input-select:after {
  background: #fff;
  border-radius: 30px;
}

.map-box {
  height: 50vw;
  width: 50vw;
  max-width: 80vh;
  max-height: 80vh;
  position: relative;
  display: inline-block;
  margin: 0 0 0 10vw;
  vertical-align: middle;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: all 0.6s ease-in-out;
  transform-origin: center center;
  z-index: 10;
}

.content-map-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  transform: translateZ(0);
  transition: border-radius 0.6s ease-in-out;
}

.full-map {
  position: absolute;
  top: 20px;
  right: 20px;
  left: auto;
  background-color: #0571b8;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.full-map:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/fullscreen.svg)
    no-repeat 50%/80%;
}

.map-box.show,
.map-box.showroom.show {
  position: fixed;
  width: 100vw;
  height: 100vh;
  max-height: inherit;
  max-width: inherit;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  z-index: 100000;
}

.map-box.show .content-map-box,
.map-box.showroom.show .content-map-box {
  border-radius: 0;
}

.map-box.show .full-map,
.map-box.showroom.show .full-map {
  top: 95px;
  right: 10px;
}

.map-box.show .zoom-control,
.map-box.showroom.show .zoom-control {
  right: 10px;
}

.contact-showroom {
  z-index: 2;
}

.map-box.showroom {
  border-radius: 0;
  width: calc(100% - 500px);
  height: 80vh;
  max-width: inherit;
  max-height: inherit;
  margin: 0;
  position: relative;
  opacity: 1;
  z-index: 5;
}

.section-input .input-select {
  width: 22vw;
  display: inline-block;
  min-width: 280px;
  max-width: 300px;
}

.list-view:after {
  width: 1px;
  height: 100%;
}

.list-view:after,
.list-view:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0571b8;
}

.list-view:before {
  width: 100%;
  height: 1px;
  z-index: 1;
}

.list-view {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 500px;
  height: 80vh;
  overflow: hidden;
  background-color: #fff;
}

.list-result {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: inherit;
  scrollbar-width: none;
}

.list-view li {
  display: block;
  padding: 25px;
  border-bottom: 1px solid #0571b8;
  background-color: #fff;
  cursor: pointer;
  color: #444;
}

.list-view h3 {
  margin-bottom: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
}

.list-view p {
  font-size: 16px;
  line-height: 1.6;
}

.list-view li.active {
  background-color: #0571b8;
}

.list-view li a {
  display: inline-block;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.list-view li.active a,
.list-view li.active h3,
.list-view li.active p {
  color: #fff;
}

.list-view li.hide {
  display: none;
}

.googlemap {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  transition: top 1s ease-in-out;
  background-color: #ccc;
  z-index: 120;
}

.googlemap.show {
  top: 0;
}

#map-canvas {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: translateZ(0);
}

#map-canvas > div,
.gm-style .gm-style-iw {
  background-color: transparent !important;
}

.gm-style .gm-style-iw {
  width: 100% !important;
  height: auto !important;
  top: 50% !important;
}

.gm-style .gm-style-iw > div {
  max-width: inherit !important;
  max-height: inherit !important;
  overflow: hidden !important;
}

.gm-style .gm-style-iw > div > div {
  overflow: hidden !important;
  width: 100%;
  height: auto;
  text-align: center;
}

.gm-style div div div div {
  z-index: 200 !important;
}

.gm-style div div div div:nth-child(4) {
  z-index: 10 !important;
}

.gm-style div div div div div div div {
  background-color: transparent !important;
  box-shadow: none !important;
}

.gm-style .gmnoprint {
  z-index: 300 !important;
}

.gm-style .infobox {
  position: relative;
  display: inline-block;
  width: 300px;
  height: auto;
  z-index: 999 !important;
}

.gm-style .infobox-inner {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding-bottom: 15px;
  background-color: #000 !important;
}

.pic-map {
  height: 130px;
  position: relative;
  overflow: hidden !important;
}

.pic-map,
.pic-map img {
  width: 100%;
  display: block;
}

.pic-map img {
  height: auto;
}

.infobox {
  font-family: Montserrat, sans-serif;
  text-align: left;
  line-height: 1.4;
}

.infobox h3 {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 15px 20px 10px 15px;
}

.infobox h3,
.infobox p {
  color: #fff;
  position: relative;
  display: block;
}

.infobox p {
  font-size: 13px;
  padding: 0 15px;
  font-weight: 400;
}

.infobox strong {
  font-size: 150%;
  margin: 0 5px 0 0;
  color: #aaa;
}

.infobox a {
  color: #fff;
}

.infobox .close-box-map {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 99999 !important;
}

.infobox .close-box-map:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #0571b8 url(/wp-content/uploads/2024/09/close-1.svg) no-repeat 50%/80%;
}

.gm-style .gm-style-iw-t:after,
.gm-style-iw-t:before {
  display: none;
}

.gm-style .gm-style-iw-c {
  overflow: visible !important;
}

.gm-style button[title="Close"] {
  display: none !important;
}

.gm-style .gm-style-iw + div img,
.gm-style button img {
  display: none;
}

.gm-style .gm-style-iw ~ img {
  right: -10px !important;
  top: calc(50% - 20px) !important;
  width: 40px !important;
  height: 40px !important;
  opacity: 0;
}

.zoom-control {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 20;
}

.zoom-control a {
  display: block;
  width: 35px;
  height: 35px;
  margin: 0;
  border-radius: 5px;
  margin: 5px 0;
  box-shadow: 0 5px 24px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
}

.zoom-in {
  background: #0873ba url(/wp-content/uploads/2024/09/zoom-in.svg) no-repeat 50%/80%;
}

.zoom-out {
  background: #0873ba
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/zoom-out.svg)
    no-repeat 50%/80%;
}

.zoom-full {
  background: #0873ba
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/fullscreen.svg)
    no-repeat 50%/80%;
}

.zoom-full.active {
  background: #452600
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/cancel-fullscreen.svg)
    no-repeat 50%/80%;
}

.put-hide,
.put-show {
  display: none !important;
}

.gm-fullscreen-control {
  width: 40px !important;
  height: 40px !important;
  background: #0571b8
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/fullscreen.svg)
    no-repeat 50%/90% !important;
  margin: 20px !important;
  overflow: hidden;
}

.gm-fullscreen-control img {
  display: none !important;
}

.full-screen .gm-fullscreen-control {
  background: #0873ba
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/cancel-fullscreen.svg)
    no-repeat 50%/90% !important;
  display: block;
}

.gm-fullscreen-control:hover {
  background-color: #231f20;
}

.box-img {
  height: 100%;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: 5;
}

.box-img,
.box-img img {
  width: 100%;
  display: block;
}

.box-img img {
  height: auto;
}

.svgMask {
  position: relative;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
  z-index: 2;
}

.svgMask,
.svgMask clipPath,
.svgMask image {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bg-clip {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  color: #294d84;
  pointer-events: none;
  z-index: -1;
}

.white {
  color: #fff;
}

.yellow {
  color: #0873ba;
}

.color-overlay {
  mix-blend-mode: multiply;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(22, 0, 0, 0.4),
    rgba(22, 0, 0, 0.1) 20%,
    rgba(22, 0, 0, 0.1) 80%,
    rgba(22, 0, 0, 0.4)
  );
  z-index: 1;
}

.color-overlay,
.color-overlay:after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.color-overlay:after {
  content: "";
  background: linear-gradient(
    180deg,
    rgba(22, 0, 0, 0.4),
    rgba(22, 0, 0, 0) 20%,
    rgba(22, 0, 0, 0) 80%,
    rgba(22, 0, 0, 0.4)
  );
}

.box-overlay {
  position: absolute;
  z-index: 1;
}

.box-overlay span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.home-contact .box-overlay:first-child {
  width: 70vw;
  height: 70vw;
  bottom: 5vw;
  right: -10vw;
}

.home-contact .box-overlay:first-child span {
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(5, 113, 184, 0.1), #005ea7);
}

.home-contact .box-overlay:nth-child(2) {
  width: 40vw;
  height: 40vw;
  bottom: -25vw;
  left: 20vw;
}

.home-contact .box-overlay:nth-child(2) span {
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(5, 113, 184, 0), #035397);
}

.home-business .box-overlay:first-child {
  width: 70vw;
  height: 70vw;
  bottom: 5vw;
  left: 30vw;
}

.home-business .box-overlay:first-child span {
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(5, 113, 184, 0.1), #005ea7);
}

.home-business .box-overlay:nth-child(2) {
  width: 40vw;
  height: 40vw;
  bottom: -30vw;
  left: 20vw;
}

.home-business .box-overlay:nth-child(2) span {
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(5, 113, 184, 0), #035397);
}

.about-value .box-overlay:first-child {
  width: 70vw;
  height: 70vw;
  bottom: 5vw;
  left: 30vw;
}

.about-value .box-overlay:first-child span {
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(5, 113, 184, 0.1), #005ea7);
}

.about-value .box-overlay:nth-child(2) {
  width: 40vw;
  height: 40vw;
  bottom: -30vw;
  left: 20vw;
}

.about-value .box-overlay:nth-child(2) span {
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(5, 113, 184, 0), #035397);
}

.text-banner {
  position: absolute;
  top: calc(50% - 170px);
  left: 40px;
  text-align: left;
  padding: 25px;
  color: #fff;
  width: 400px;
  height: 340px;
  z-index: 10;
}

.text-banner:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0;
  background-color: rgba(0, 33, 54, 0.5);
}

.text-banner h3 {
  text-transform: uppercase;
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  margin: 0 0 10px;
}

.box-text,
.text-banner h3 {
  display: block;
  position: relative;
}

.box-text {
  width: 100%;
  height: auto;
  padding: 0;
}

.text-banner p {
  height: 72px;
  overflow: hidden;
}

.text-banner .box-text {
  margin: 0 0 20px;
}

.text-box {
  position: relative;
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  padding: 0;
  color: #fff;
  text-align: left;
  z-index: 1;
}

.text-box ul {
  list-style: inside;
  list-style-type: disc;
}

.text-box ul li {
  font-size: 16px;
  font-weight: 300;
  color: inherit;
  font-family: Montserrat, sans-serif;
  line-height: 1.6;
  position: relative;
}

.home-business {
  background: linear-gradient(135deg, #0097ea, #004e91);
}

.home-message .content-main {
  text-align: left;
}

.home-message .text-box {
  padding: 0 0 0 6vw;
}

.home-message .text-box:before {
  content: "“";
  position: absolute;
  top: -60px;
  left: 6vw;
  font-size: 120px;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-style: inherit;
}

.list-bus-home {
  display: block;
}

.business-home,
.list-bus-home {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
}

.business-home {
  display: flex;
  align-items: center;
}

.business-home-pic {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
}

.business-home-pic .pic-img {
  border-radius: 50%;
  overflow: hidden;
  width: 19vw;
  height: 19vw;
  border: 4px solid #219de5;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.business-home .text-box {
  width: calc(100% - 15vw);
  display: inline-block;
  padding: 0 0 0 3vw;
}

.business-home .title-main {
  margin: 0;
}

.business-home:first-child {
  justify-content: center;
}

.business-home:first-child .title-main {
  text-align: left;
}

.business-home:nth-child(2) {
  justify-content: flex-start;
  margin: 40px 0 0;
}

.business-home:nth-child(2) .business-home-pic {
  order: 2;
}

.business-home:nth-child(2) .text-box {
  order: 1;
  text-align: right;
  padding: 0 3vw 0 0;
}

.business-home:nth-child(2) .title-main {
  text-align: right;
}

.business-home:nth-child(2):after {
  content: "";
  position: relative;
  display: block;
  clear: both;
}

.control-button {
  display: none;
  pointer-events: none;
  z-index: -99999;
}

.home-project {
  background-color: #1777c2;
}

.content-project {
  position: relative;
  display: inline-block;
  margin: 50px -5px 0;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.slide-project {
  width: 100%;
}

.item-project,
.slide-project {
  position: relative;
  display: block;
  height: auto;
  margin: 0;
  padding: 0;
}

.item-project {
  width: 100vw;
  text-align: left;
}

.item-project .pic-img {
  padding-top: 60%;
}

.item-pic {
  width: 50%;
  height: auto;
  margin: 0 40px;
  padding: 0;
}

.item-pic,
.text-project {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.text-project {
  max-height: 50vh;
  max-width: 33%;
  margin: 0 -5px;
  text-align: left;
  color: #fff;
}

.text-project > h3 {
  position: relative;
  display: block;
  font-size: 18px;
  font-weight: 300;
  line-height: 2;
  text-transform: uppercase;
}

.text-project .title-main {
  text-align: left;
  margin: 0;
}

.text-project .text-inner-scroll p {
  margin: 0;
}

.text-inner-scroll {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0 20px 0 0;
  line-height: 1.6em;
}

.slide-project .slide-buttons {
  display: none;
}

.slide-modify {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
  z-index: 10;
}

.next-mod {
  background: #0571b8
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/next.svg)
    no-repeat 50%/90%;
}

.next-mod,
.prev-mod {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 70px;
}

.prev-mod {
  background: #0571b8
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/previous.svg)
    no-repeat 50%/90%;
  margin: 0 -2px;
}

.slide-modify > div {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.slide-modify > div:hover {
  background-color: #033756;
}

.view-all {
  position: absolute;
  width: auto;
  height: auto;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  border: 1px solid #fff;
  padding: 13px 30px 13px 20px;
  bottom: 0;
  left: calc(50% + 80px);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.view-all:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: calc(50% - 4px);
  right: 15px;
  border-top: 4px solid transparent;
  border-left: 4px solid #fff;
  border-bottom: 4px solid transparent;
}

.view-all:before {
  content: "";
  position: absolute;
  width: 130%;
  height: 100%;
  top: 0;
  left: -150%;
  background-color: #0571b8;
  transition: all 0.3s ease-in-out;
  transform: skew(30deg);
  z-index: -1;
}

.view-all:hover:before {
  left: -15%;
}

.wrap-view-news {
  position: relative;
  display: block;
  text-align: right;
  float: left;
  width: 100%;
  padding: 40px 2% 0;
}

.wrap-view-news .view-all {
  position: relative;
  display: inline-block;
  left: auto;
  bottom: auto;
}

.wrap-view-recruit {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  margin: 30px 0 0;
}

.wrap-view-recruit .view-all {
  position: relative;
  display: inline-block;
  left: auto;
  bottom: auto;
}

.home-news .title-main {
  padding: 0 12vw 30px 0;
}

.box-news-home,
.home-news .content-main {
  text-align: left;
}

.box-news-home {
  position: relative;
  display: inline-block;
  margin: 4vw 0 0 30px;
  vertical-align: middle;
  width: calc(100% - 250px);
  height: auto;
}

.box-news-home:after {
  content: "";
  position: absolute;
  width: 22vw;
  height: calc(100% + 3vw);
  top: -1.5vw;
  left: 15.6vw;
  border: 5px solid #0571b8;
  z-index: -1;
}

.box-news-home .date-thumb,
.box-news-home .date-thumb span {
  color: #fff;
}

.item-video-home {
  display: block;
  width: 33%;
  height: 22vw;
  max-height: 400px;
  position: relative;
  overflow: hidden;
  float: left;
  text-align: left;
  margin: 0 2px 0 0;
  cursor: pointer;
  z-index: 1;
}

.item-video-home .title-pic {
  padding: 20px 20px 20px 80px;
  min-height: 70px;
}

.item-video-home .pic-img,
.item-video-home .video-youtube-full {
  height: 100%;
}

.title-video {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  color: #fff;
  text-align: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 5;
}

.is-IE .title-video {
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: inherit;
}

.title-video h3 {
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
}

.pic-news-home {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  overflow: hidden;
}

.slider-news {
  width: 65%;
  height: auto;
}

.item-news-home,
.slider-news {
  position: relative;
  display: block;
  margin: 0;
  float: left;
}

.item-news-home {
  width: 50%;
  overflow: hidden;
  cursor: pointer;
}

.item-news-home .pic-news-home {
  float: left;
  width: 50%;
  height: 100%;
  position: relative;
  display: block;
}

.item-news-home .pic-img {
  height: 100%;
}

.txt-news-home {
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
  padding: 15px 20px;
  color: #fff;
  background-color: #0571b8;
  text-align: left;
  text-transform: uppercase;
}
.text-news-bottom h3 {
  text-transform: uppercase;
}
.load-details div > div {
  margin: 0 0 10px;
  color: #444;
  font-size: 16px;
  line-height: 1.4;
}
.load-details strong {
  line-height: 24px;
}
.load-details em {
  color: #656565;
  margin: -6px 0 4px 0;
  display: block;
}
.txt-news-home h3 {
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  font-weight: 400;
  max-height: 143px;
  overflow: hidden;
  display: block;
  text-transform: uppercase;
}

.date-thumb {
  padding: 5px 8px;
  display: inline-block;
  color: #fff;
  background-color: #0571b8;
  font-weight: 100;
  font-size: 25px;
  line-height: 1.4;
}

.date-thumb span {
  font-weight: 400;
  font-size: 10px;
  white-space: nowrap;
}

.item-news-home:first-child {
  height: 22vw;
  max-height: 400px;
}

.item-news-home:first-child .pic-news-home,
.item-news-home:first-child .txt-news-home {
  width: 100%;
}

.item-news-home:first-child .pic-news-home {
  height: calc(100% - 54px);
  margin-top: 54px;
}

.item-news-home:first-child .txt-news-home {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

.item-news-home:first-child .txt-news-home h3 {
  max-height: 24px;
  overflow: hidden;
}

.item-news-home:nth-child(2),
.item-news-home:nth-child(3) {
  height: 11vw;
  max-height: 200px;
}

.item-news-home:nth-child(2) .date-thumb {
  right: 0;
  left: auto;
}

.item-news-home:nth-child(3) .pic-news-home {
  float: right;
}

.item-news-home:nth-child(3) .date-thumb {
  left: 0;
}

.home-recruitment {
  background: linear-gradient(0deg, #004e91, #0097ea);
}

.home-recruitment .text-box:before {
  content: "“";
  position: absolute;
  top: -60px;
  left: 0;
  font-size: 120px;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-style: inherit;
}

.home-recruitment .content-main {
  text-align: left;
}

.home-recruitment .content-center {
  padding: 6vw 0 0 8vw;
  max-width: 1400px;
}

.list-recruitment {
  justify-content: center;
  width: 100%;
  margin: 4vw 0 0;
}

.item-recruitment,
.list-recruitment {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: auto;
}

.item-recruitment {
  align-items: center;
  width: 33%;
  padding: 20px 0;
}

.item-recruitment a {
  display: none;
}

.number-recruit {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  height: 100%;
}

.number-recruit span {
  position: relative;
  display: block;
  font-size: 45px;
  font-weight: 300;
  color: #009aff;
}

.number-recruit:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0;
  top: 0;
  background-color: #009aff;
}

.content-recruitment {
  display: block;
  position: relative;
  width: calc(100% - 120px);
  max-width: 270px;
  padding: 0 0 0 20px;
  text-align: left;
}

.content-recruitment h3 {
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  display: block;
  position: relative;
  color: #fff;
}

.expired:before {
  content: "";
  position: relative;
  display: inline-block;
  width: 60px;
  height: 1px;
  margin: 20px 0;
  background-color: #fff;
}

.expired {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  color: #fff;
}

.home-contact {
  background: linear-gradient(0deg, #004e91, #0096ea);
  overflow: hidden !important;
}

.home-contact .content-center {
  text-align: left;
  max-width: inherit;
  padding: 0 0 0 8vw;
}

.company-box,
.home-contact .title-main {
  text-align: left;
}

.company-box {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 4vw 0 0;
  width: 100%;
}

.company-box .title-main {
  margin: 0 0 10px;
}

.company-box .title-main h2 {
  font-weight: 700;
}

.company-box .title-main h2 br {
  display: none;
}

.company-info {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  margin: 0;
}

.company-info li {
  display: block;
  margin: 0 0 15px;
  width: 100%;
}

.company-info p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 60px);
  color: #fff;
}

.company-info p strong {
  font-size: 120%;
}

.company-info a {
  color: #fff;
  font-weight: 400;
}

.company-info span {
  width: 36px;
  height: 36px;
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: top;
}

.company-box .license {
  margin: 10px 0 0;
}

.ic-user {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/ic-user.png)
    no-repeat 50% / contain;
}

.ic-bag {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/ic-bag.png)
    no-repeat 50% / contain;
}

.info-address {
  background: url(/wp-content/uploads/2024/09/info-address.svg) no-repeat 50% /
    contain;
}

.address {
  background: url(/wp-content/uploads/2024/09/location.svg) no-repeat 50% /
    contain;
}

.call {
  background: url(/wp-content/uploads/2024/09/call.svg) no-repeat 50% / contain;
}

.fax {
  background: url(/wp-content/uploads/2024/09/fax.svg) no-repeat 50% / contain;
}

.email {
  background: url(/wp-content/uploads/2024/09/email.svg) no-repeat 50% / contain;
}

.alltime {
  background: url(/wp-content/uploads/2024/09/alltime.svg) no-repeat 50% /
    contain;
}

.about-us .content-main {
  text-align: left;
}

.about-us .text-box {
  padding: 0 0 0 8vw;
}

.about-us .title-main {
  text-align: left;
}

.about-value {
  background: linear-gradient(135deg, #0097ea, #004e91);
}

.about-value .content-main {
  text-align: left;
}

.about-value .content-center {
  max-width: inherit;
  text-align: left;
}

.pic-value {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 54%;
  height: 65vh;
  max-height: 550px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.pic-value .pic-img {
  height: 100%;
  width: auto;
}

.text-about-value {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 45%;
  padding: 0 0 0 3vw;
  color: #fff;
}

.text-about-value .title-main {
  text-align: left;
  margin: 20px 0 0;
}

.text-about-value .title-main:first-child {
  margin: 0;
}

.text-about-value .scrollA {
  max-height: 70vh;
}

.slide-partner {
  width: 90%;
  margin: 30px auto;
}

.box-partner-item,
.slide-partner {
  display: block;
  position: relative;
  height: auto;
}

.box-partner-item {
  width: 100%;
}

.partner-item {
  position: relative;
  display: block;
  margin: 5px 0 0;
  background-color: #fff;
}

.partner-item:after {
  content: "";
  position: absolute;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  left: 5px;
  top: 5px;
  pointer-events: none;
  border: 1px solid #0571b8;
}

.pic-partner-it {
  width: 100%;
  pointer-events: none;
}

.pic-partner-it,
.pic-partner-it img {
  position: relative;
  display: block;
  height: auto;
}

.pic-partner-it img {
  width: auto;
  max-width: 100%;
  max-height: 14vh;
  margin: auto;
}

.slide-partner .slide-pagination {
  padding: 40px 0 0;
}

.slide-partner .slide-buttons {
  position: absolute;
  bottom: 40px;
  left: calc(50% - 170px);
  width: 340px;
  z-index: 5;
}

.circle-nav .slide-next {
  background: hsla(0, 0%, 100%, 0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.circle-nav .slide-next:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: calc(50% - 7px);
  right: calc(50% - 5px);
  border-top: 7px solid transparent;
  border-left: 7px solid #fff;
  border-bottom: 7px solid transparent;
}

.circle-nav .slide-prev {
  background: hsla(0, 0%, 100%, 0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.circle-nav .slide-prev:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: calc(50% - 7px);
  right: calc(50% - 3px);
  border-top: 7px solid transparent;
  border-right: 7px solid #fff;
  border-bottom: 7px solid transparent;
}

.circle-nav .slide-next:hover {
  transform: translateX(5px);
  background-color: #0571b8;
  border: 5px solid #bfdfee;
}

.circle-nav .slide-prev:hover {
  transform: translateX(-5px);
  background-color: #0571b8;
  border: 5px solid #bfdfee;
}

.partner-text p:first-child img {
  max-height: 200px;
  margin: auto;
}

.slide-video {
  width: 70%;
  max-width: 60vw;
  margin: auto;
  text-align: center;
}

.slide-video .view-video {
  margin: -60px 0 0 -35px;
}

.slide-video .slide-buttons {
  position: absolute;
  width: calc(100% + 120px);
  top: 50%;
  left: calc(-5% - 20px);
  margin: -50px 0 0;
}

.library-box {
  margin: 30px 0 0;
}

.library-box,
.library-item {
  position: relative;
  display: inline-block;
  width: 100%;
}

.library-item {
  margin: auto;
}

.slide-video .library-item {
  max-width: 50vw;
}

#project-page .title-page {
  display: block;
}

.project-section {
  background-color: #fff;
}

.project-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1vw 0 40px;
}

.project-item {
  position: relative;
  display: block;
  width: calc(33% - 20px);
  margin: 10px;
  text-align: left;
  cursor: pointer;
  padding: 8px 0 0;
}

.project-item .pic-img {
  padding-top: 75%;
}

.pro-item-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

.project-pic {
  width: calc(100% - 16px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border: 3px solid #fff;
}

.project-pic,
.project-text {
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}

.project-text {
  width: 100%;
  padding: 20px;
  height: 298px;
  color: #444;
}

.project-text strong {
  font-weight: 500;
  color: #0571b8;
}

.text-ins-project {
  width: auto;
  padding: 0;
  margin: 0;
  height: 150px;
  line-height: 1.6em;
}

.project-title,
.text-ins-project {
  position: relative;
  display: block;
  overflow: hidden;
}

.project-title {
  width: 100%;
  height: auto;
  margin: 0 0 6px;
  height: 80px;
}

.project-title h3 {
  font-weight: 700;
  color: #0571b8;
  font-size: 20px;
}

.project-title h3,
.project-title > p {
  text-transform: uppercase;
}

.go-pro {
  color: #0571b8;
  text-transform: uppercase;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  margin: 20px 0 10px;
}

.go-pro,
.go-pro:after {
  display: inline-block;
  position: relative;
}

.go-pro:after {
  content: "";
  width: 60px;
  height: 1.2px;
  background-color: #0571b8;
  margin: 0 0 5px 10px;
  vertical-align: bottom;
}

.list-viewmore {
  padding: 0 0 40px;
  margin: 0;
  text-align: center;
  background-color: #fff;
}

.more-project {
  display: none;
  position: relative;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;
  color: #0571b8;
}

.more-project.show {
  display: inline-block;
}

.more-project:after {
  content: "";
  position: relative;
  display: block;
  width: 0;
  height: 0;
  margin: 5px auto;
  padding: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0571b8;
}

#project-details-page .title-page {
  display: block;
}

#project-details-page .title-big {
  text-align: center;
}

.pro-overall {
  background-image: radial-gradient(#0571b8, #014470);
  z-index: 1;
}

.pro-overall .two-column {
  color: #fff;
  padding: 20px 0;
}

.box-overall {
  position: relative;
  display: block;
  margin: auto;
  padding: 0;
}

.pro-location {
  background-color: #fff;
  padding: 30px 0 0;
}

.wrap-location {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
}

.map-project {
  width: 55%;
  height: 60vh;
  max-width: inherit;
  max-height: inherit;
  border-radius: 0;
  margin: 0 -5px;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.map-project .zoom {
  top: 15px;
  right: 15px;
}

.map-project .pic-img {
  width: 100%;
  height: 100%;
  background-size: contain;
}

.map-project .pic-img img {
  position: relative;
  left: auto;
  top: auto;
}

.description-map {
  position: relative;
  width: 45%;
  padding: 0 5% 0 40px;
  max-width: 700px;
  max-height: 60vh;
  color: #444;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

.description-map.full-p {
  width: 90%;
  max-width: 1000px;
  padding: 0;
  max-height: inherit;
  height: auto;
}

.description-map h3 {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  display: block;
  margin: 0 0 30px;
  color: #0571b8;
}

.scroll-descript {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: inherit;
  scrollbar-width: thin;
}

.description-map.full-p .scroll-descript {
  max-height: inherit;
  overflow: visible;
}

.description-map.full-p h3 {
  text-align: center;
}

.description-map.full-p .text-inner-scroll {
  padding: 0;
}

.scroll-descript::-webkit-scrollbar {
  width: 3px !important;
}

.scroll-descript::-webkit-scrollbar-thumb {
  background-color: #0571b8;
}

.link-google {
  position: relative;
  width: auto;
  height: auto;
  margin: 20px 0;
  display: block;
}

.link-google span {
  font-size: 15px;
  color: #444;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0 10px;
}

.link-google span,
.link-google:before {
  display: inline-block;
  vertical-align: middle;
}

.link-google:before {
  content: "";
  position: relative;
  width: 50px;
  height: 50px;
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/googlemap.svg)
    no-repeat 50% / contain;
}

.pro-value {
  background-color: #fff;
}

.slide-value {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  padding: 30px 60px;
}

.slide-value .slide-wrapper-outer {
  overflow: visible;
}

.slide-value .slide-next,
.slide-value .slide-prev {
  background-color: #0571b8;
}

.slide-value .slide-buttons {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}

.value-items {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 2px;
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
}

.value-items .zoom {
  opacity: 0;
}

.value-items .pic-img {
  padding-top: 50%;
  background-size: cover;
}

.slide-item.active .value-items,
.slide-item.active .zoom {
  opacity: 1;
}

.description-value {
  position: relative;
  display: block;
  text-align: left;
  padding: 10px 60px;
}

.description-value h3 {
  font-size: 24px;
  color: #0571b8;
  line-height: 1.7;
  text-transform: uppercase;
}

.description-value h3 strong {
  font-size: 105%;
}

.description-value p {
  margin: 10px 0;
}

.description-value img {
  position: relative;
  display: block;
  height: auto;
  width: 100%;
  margin-bottom: 15px;
}

.pro-product {
  padding: 30px 0 0;
  background-image: radial-gradient(#0571b8, #014470);
}

.thumbslide-pro {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  text-align: center;
  z-index: 4;
}

.thumbslide-pro:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.wrap-slide {
  width: 100vw;
  height: auto;
  background-color: #fff;
}

.slide-product,
.wrap-slide {
  position: relative;
  display: block;
}

.slide-product {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.slide-product .slide-buttons {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}

.sub-nav-pro {
  position: relative;
  display: inline-block;
  margin: 0 0 -3px;
  height: auto;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  float: none;
  text-align: center;
  background-color: #fff;
  z-index: 10;
}

.sub-nav-pro::-webkit-scrollbar {
  height: 6px !important;
}

.sub-nav-pro::-webkit-scrollbar-track {
  background-color: #fff;
}

.sub-nav-pro::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 5px;
}

.sub-nav-pro ul {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  height: auto;
  z-index: 2;
}

.sub-nav-pro li {
  position: relative;
  display: none;
  width: auto;
  height: auto;
  margin: 0;
}

.sub-nav-pro li a {
  display: block;
  padding: 14px 20px;
  text-transform: uppercase;
  margin: 0 1px;
  font-weight: 700;
  font-size: 13px;
  color: #444;
  background-color: #eee;
  line-height: 1.6;
  text-align: left;
  width: 100%;
}

.bg-product,
.sub-nav-pro li.current {
  display: block;
}

.bg-product {
  position: relative;
  margin: auto;
  width: auto;
  max-width: 90%;
  height: auto;
  max-height: 70vh;
  overflow: hidden;
  background-color: #fff;
  background-size: contain !important;
}

.bg-product img {
  position: relative;
  left: auto;
  top: auto;
}

.pro-library {
  background-color: #fff;
}

.slide-library-pro {
  padding: 0 0 80px;
}

.box-library,
.item-project-pic,
.slide-library-pro {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

.item-project-pic {
  margin: 0;
  cursor: pointer;
  overflow: hidden;
}

.item-project-pic .pic-img {
  padding-top: 60%;
}

.title-pic {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 20px;
  text-align: center;
}

.title-pic h3 {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

.pic-library {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.pic-library .pic-img {
  padding-top: 55%;
}

.slide-video .pic-library .pic-img {
  padding-top: 50%;
}

.video-project {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  padding: 0 0 5vw;
}

.video-project .video-youtube-full {
  height: 70vh;
  margin: 30px auto 0;
}

.video-project .youtube-video {
  overflow: hidden;
}

.video-project .control {
  bottom: -80px;
  opacity: 1;
  background-color: #0571b8;
  z-index: 20;
}

.pro-contact {
  background-color: #fff;
}

.box-pro-contact {
  position: relative;
  display: block;
  width: 90%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  text-align: center;
  color: #444;
}

.box-pro-contact p {
  line-height: 2;
}

.other-project {
  height: auto;
  margin: 0;
  padding: 0;
}

.line-other,
.other-project {
  position: relative;
  display: block;
  width: 100%;
}

.line-other {
  height: 1px;
  margin: 40px auto 30px;
  background: linear-gradient(
    45deg,
    rgba(0, 115, 191, 0),
    #0073b5 30%,
    #0073bf 70%,
    rgba(0, 115, 191, 0)
  );
}

.slide-other {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0 40px;
}

.slide-other .project-item {
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.slide-other .slide-buttons {
  position: absolute;
  top: 50%;
  left: -3%;
  width: 106%;
}

.slide-other .slide-next,
.slide-other .slide-prev {
  background-color: #0571b8;
}

.slide-other .project-pic {
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.slide-other .project-item {
  background-color: rgba(5, 113, 184, 0.03);
}

#sustainable-page .title-page {
  display: none;
}

.content-mask {
  position: absolute;
  width: 150vh;
  height: 100vh;
  top: 0;
  right: 0;
  z-index: 1;
}

.bg-develop {
  z-index: 1;
}

.bg-develop,
.bg-develop:after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.bg-develop:after {
  content: "";
  background-color: rgba(5, 113, 184, 0.7);
  mix-blend-mode: multiply;
}

.is-IE .bg-develop:after {
  background-color: rgba(5, 113, 184, 0.5);
  mix-blend-mode: inherit;
}

.bg-develop .pic-img {
  width: auto;
  height: 100%;
}

#sustainable-page .title-main {
  text-align: left;
  margin: 0;
}

#sustainable-page .text-box {
  text-align: left;
}

#sustainable-page .scrollA {
  max-height: 56vh;
}

.sus-develop {
  background-color: #0571b8;
}

.sus-develop .content-main {
  text-align: left;
}

.sus-develop .text-box {
  padding: 0 0 0 5vw;
  max-width: 45vw;
}

.bg-develop:before {
  height: 100%;
  width: 50%;
  background: linear-gradient(
    90deg,
    #0571b8,
    #0571b8 50%,
    rgba(5, 113, 184, 0)
  );
}

.bg-develop:before,
.sus-develop .box-img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.sus-develop .box-img:after {
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, #0571b8, rgba(5, 113, 184, 0));
}

.sus-culture {
  background-color: #0571b8;
}

.sus-culture .content-main {
  text-align: left;
}

.sus-culture .text-box {
  padding: 0 0 0 5vw;
  max-width: 55vw;
}

.sus-culture .bg-develop:before {
  width: 60%;
  background: linear-gradient(
    90deg,
    #0571b8,
    #0571b8 50%,
    rgba(5, 113, 184, 0)
  );
  z-index: 1;
}

.sus-educate {
  background-color: #0571b8;
}

.sus-educate .content-main {
  text-align: left;
}

.sus-educate .text-box {
  padding: 0 0 0 5vw;
  max-width: 52vw;
}

.sus-educate .box-img:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #0571b8, rgba(5, 113, 184, 0));
  z-index: 1;
}

.sus-person .pic-value {
  height: 60vh;
}

.sus-community {
  background-color: #0571b8;
}

.sus-community .content-center,
.sus-community .content-main {
  text-align: right;
}

.sus-community .text-box {
  margin: 0 120px 0 0;
  padding: 0 10vw 0 0;
  display: inline-block;
  max-width: 45vw;
}

.sus-community .content-mask {
  right: auto;
  left: 0;
}

.sus-community .bg-develop:before {
  left: auto;
  right: 0;
  background: linear-gradient(
    -90deg,
    #0571b8,
    #0571b8 50%,
    rgba(5, 113, 184, 0)
  );
}

.select-list {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  width: 250px;
  height: 46px;
  z-index: 1;
  border-radius: 30px;
  vertical-align: top;
}

.select-header {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #b7b7b7;
  cursor: pointer;
  border-radius: 30px;
}

.select-header:after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  display: block;
  width: 36px;
  height: 36px;
  background: url(/wp-content/uploads/2024/09/select.png) no-repeat 50%;
  z-index: 2;
  background-color: #0571b8;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.select-header h3 {
  display: block;
  padding: 0 40px 0 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #5a5a5a;
  line-height: 44px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.select-box {
  position: absolute;
  top: 2px;
  left: 0;
  display: none;
  width: 250px;
  height: auto;
  padding-top: 45px;
  z-index: 1;
}

.select-box ul {
  text-align: center;
  font-size: 0;
  padding: 1px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.select-box li,
.select-box ul {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.select-box li {
  margin: 0 auto 1px;
  background-color: #999;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.select-box li:first-child {
  border-radius: 10px 10px 0 0;
}

.select-box li:last-child {
  border-radius: 0 0 10px 10px;
}

.select-box li a {
  display: block;
  width: 100%;
  height: auto;
}

.select-box li h3 {
  display: block;
  padding: 13px 25px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #fff;
  text-align: left;
}

.select-box li.selected,
.select-box li:not(.selected):hover,
.select-header:hover:after {
  background-color: #0571b8;
}

.select-box li.selected:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#shareholder-page .title-page {
  display: block;
}

#shareholder-page,
.all-report {
  background: #ebebeb;
}

.all-report {
  min-height: 60vh;
}

.report-section {
  background: #ebebeb;
  width: 100%;
}

.relation-box,
.report-section {
  position: relative;
  display: block;
  height: auto;
}

.relation-box {
  width: 90%;
  max-width: 970px;
  margin: 0 auto;
  font-size: 0;
  min-height: 160px;
}

.list-box {
  position: relative;
  display: inline-block;
  width: calc(50% - 20px);
  margin: 8px;
}

.list-box.hide {
  display: none;
}

.list-box a {
  height: auto;
}

.list-box a,
.list-outer {
  position: relative;
  display: block;
  width: 100%;
}

.list-outer {
  height: 80px;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 0.3s ease-in-out;
  background-color: #fff;
  border-radius: 0;
}

.r-left {
  float: left;
  padding: 0 10px;
  margin: 0 0 0 -5px;
}

.r-left,
.r-text {
  position: relative;
  display: block;
  width: auto;
  height: 100%;
  line-height: 80px;
  overflow: hidden;
  vertical-align: middle;
}

.r-text {
  text-align: left;
  padding: 0 80px 0 0;
}

.r-link {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: 100%;
  line-height: 80px;
  padding: 0 20px;
}

.r-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 35px;
  text-align: center;
}

.r-date,
.r-num {
  display: inline-block;
  margin: 0;
  background-color: #0571b8;
  color: #fff;
  vertical-align: middle;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
}

.r-date {
  width: auto;
  height: auto;
  padding: 14px;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  line-height: 1;
}

.r-text p {
  display: inline-block;
  vertical-align: middle;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #606060;
  max-height: 60px;
  overflow: hidden;
  width: calc(100% - 5px);
  transition: all 0.3s ease-in-out;
}

.r-left:after,
.r-left:before,
.r-link:after,
.r-link:before,
.r-text:after,
.r-text:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.r-pdf {
  display: inline-block;
  width: 40px;
  height: 42px;
  background: url(/wp-content/uploads/2024/09/pdf.png) no-repeat 50%;
  vertical-align: middle;
  background-size: contain;
}

.slide-report {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  padding: 0 60px;
}

.slide-report .slide-pagination {
  padding: 40px 0 20px;
}

.slide-report .slide-buttons {
  position: absolute;
  top: calc(50% - 70px);
  left: 0;
}

.square-dot .slide-page {
  margin: 0 1px 0 0;
  color: #0571b8;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.06);
}

.square-dot .dot-number {
  border-radius: 0;
  color: inherit;
  line-height: 40px;
  font-weight: 500;
  width: 40px;
  height: 40px;
  padding: 0 0 0 12px;
  background-color: #fff;
}

.square-dot .slide-page:before {
  content: "0";
  position: absolute;
  line-height: 40px;
  left: 11px;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  color: inherit;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.square-dot .slide-page.active .dot-number,
.square-dot .slide-page:hover .dot-number {
  background-color: #0571b8;
  color: #fff;
}

.square-dot .slide-page.active:before,
.square-dot .slide-page:hover:before {
  color: #fff;
}

.group-box,
.share-box {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.share-box {
  padding: 0 0 30px;
}

.share-box .outer-but {
  display: block;
  width: auto;
  height: auto;
  text-align: center;
}

.iframe-sroll {
  width: 90%;
  height: 300px;
  max-width: 1000px;
  margin: 0 auto;
  display: block;
  position: relative;
  overflow: hidden !important;
  background-color: #fff;
  border: 1px solid #c3c3c3;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.iframe-sroll iframe {
  width: 100%;
  height: 1020px;
  position: absolute;
  left: 0;
  top: -43px;
  pointer-events: none;
}

.shareholder-but {
  position: relative;
  display: inline-block;
  margin-top: 60px;
  width: 146px;
  height: 146px;
  line-height: 146px;
  background-color: #ebebeb;
  border-radius: 50%;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.shareholder-but span {
  display: inline-block;
  margin-top: -10px;
  line-height: 1.4;
  font-weight: 700;
  font-family: Futurab;
  font-weight: 400;
  font-size: 17px;
  color: #0571b8;
  text-transform: uppercase;
  vertical-align: middle;
}

.shareholder-but:before {
  content: "";
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  border: 20px solid #ddd;
  opacity: 0.2;
  border-radius: 50%;
}

.shareholder-but:hover {
  transform: scale(0.96);
}

.slide-report-02 {
  margin: 0 0 30px;
}

.report-item,
.slide-report-02 {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
}

.report-item {
  box-shadow: 0 3px 10px rgba(1, 1, 1, 0.2);
}

.report-pic {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.report-pic:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #1278bb;
  transition: all 0.3s ease-in-out;
}

.report-pic img {
  width: 100%;
  height: auto;
  display: block;
}

.report-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  transition: all 1s ease-in-out;
}

.report-item:hover .report-pic:after {
  border: 7px solid #1278bb;
}

.report-item:hover .report-cover {
  opacity: 0.7;
}

.slide-report-02 .slide-buttons {
  position: absolute;
  top: calc(50% - 50px);
}

.all-report .slide-report-02 .slide-next {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/next2.svg)
    no-repeat 50%/80%;
  right: -100px;
}

.all-report .slide-report-02 .slide-prev {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/prev2.svg)
    no-repeat 50%/80%;
  left: -100px;
}

.all-report .slide-next {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/next3.svg)
    no-repeat 50%/90%;
}

.all-report .slide-prev {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/prev3.svg)
    no-repeat 50%/90%;
}

#news-page .title-page {
  display: block;
}

.news-market {
  padding: 0 0 30px;
  background-color: #fff;
}

.group-news {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.box-news {
  position: relative;
  display: block;
  vertical-align: top;
  width: calc(50% - 20px);
  margin: 10px;
}

.box-news:first-child,
.pic-news {
  width: 100%;
}

.pic-news {
  position: relative;
  display: block;
  height: auto;
  overflow: hidden;
}

.pic-news .pic-img {
  max-height: 400px;
  padding-top: 60%;
}

.box-news .date-thumb {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #0873ba;
  background-color: transparent;
}

.box-news .date-thumb span {
  color: #0873ba;
}

.text-news {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: calc(100% - 80px);
  padding: 20px 20px 20px 40px;
  text-align: left;
}

.text-news:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 30px;
  left: 10px;
  top: calc(50% - 15px);
  background-color: #aaa;
}

.text-news h3 {
  font-size: 15px;
  text-transform: uppercase;
  color: #444;
}

.load-news-section {
  background-color: #ebebeb;
  padding: 30px 0 0;
}

.load-news-section .wrap-content {
  padding: 20px 0 0;
}

.load-news-list {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 80vh;
  display: block;
  margin: 0;
  z-index: 1;
}

.load-news-list.show {
  min-height: inherit;
}

.load-news-list:after {
  content: "";
  height: 0;
  clear: both;
  display: block;
}

.content-column {
  text-align: center;
}

.content-column,
.news-list {
  position: relative;
  display: block;
  width: 100%;
}

.news-list {
  height: auto;
  margin: auto;
  overflow: hidden;
}

.news-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: calc(50% - 15px);
  margin: 0 5px 20px;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.news-item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.news-item .date-thumb {
  background-color: #fff;
  padding: 5px;
  font-size: 24px;
}

.news-item.current {
  pointer-events: none;
}

.news-item.current a {
  opacity: 0.5;
}

.news-item.current:before {
  background-color: #0571b8;
}

.news-item.current .news-txt > h3 {
  color: #fff;
}

.news-pic {
  position: relative;
  width: 50%;
  float: left;
  height: 20vh;
  max-height: 170px;
  min-height: 120px;
  display: block;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.news-pic:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #fff;
  top: 50%;
  margin-top: -20px;
  right: 0;
}

.news-pic img {
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.news-pic img,
.news-txt {
  position: relative;
  display: block;
}

.news-txt {
  float: left;
  text-align: left;
  padding: 10px 20px;
  width: 50%;
  height: 20vh;
  max-height: 150px;
  min-height: 120px;
  overflow: hidden;
}

.news-txt:after,
.news-txt:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.news-txt > h3 {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: #444;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 100%;
  margin: 0 -5px;
  max-height: 100px;
  overflow: hidden;
}

.news-txt > h3:after {
  display: none;
}

.list-pagi-group {
  background-color: #ebebeb;
}

.load-content {
  overflow: hidden;
  background-color: #fff;
  z-index: 4;
}

.load-content,
.load-data {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.load-data {
  min-height: 100vh;
}

.load-data .wrap-small {
  text-align: left;
}

.load-data.show {
  min-height: inherit;
}

.load-details {
  margin: 0;
  padding: 0;
}

.load-details,
.load-details .load-title {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.load-details .load-title {
  text-align: center;
  margin: 30px 0;
}

.load-details .load-title h2 {
  font-size: 2.5vw;
  text-transform: uppercase;
  font-weight: 700;
  color: #0571b8;
  margin: 10px 0;
}

.load-details img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  margin: 10px auto;
  display: block;
}

.load-details table {
  width: auto;
  height: auto;
  display: table;
  border-spacing: 1px;
  margin: 30px auto;
  table-layout: fixed;
}

.load-details table td,
.load-details table th {
  padding: 5px 10px;
  border: 1px solid #788892;
}

.load-details table tbody,
.load-details table tr {
  min-width: 360px;
}

.load-details table td,
.load-details table th {
  background-color: #eee;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  padding: 10px 15px;
}

.load-details iframe {
  height: 393.75px;
  width: 700px !important;
  max-width: 100%;
}

.hars-box,
.load-details iframe,
.load-text {
  display: block;
  position: relative;
  margin: auto;
}

.hars-box,
.load-text {
  background-color: #fff;
  padding: 50px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.load-details ul {
  list-style-type: circle;
  padding: 0 0 0 20px;
}

.load-details li {
  position: relative;
  color: #444;
  width: auto;
  height: auto;
  margin: 0 0 20px;
}

.load-details h3 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  color: #444;
}

.load-details p {
  margin: 0 0 20px;
  color: #444;
}

.load-text a {
  color: #0571b8;
}

#news-details-page .title-page {
  display: block;
}

.relative-news {
  text-align: center;
  background-color: #e1e1e1;
}

.load-content-news .load-details .load-title {
  padding: 0 50px;
}

.load-content-news .load-details .load-title h3 {
  display: inline-block;
  width: calc(100% - 80px);
  text-align: left;
  position: relative;
  padding: 0 0 0 40px;
  vertical-align: middle;
}

.load-content-news .load-details .load-title h3:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 25px;
  background-color: #aaa;
  top: calc(50% - 13px);
  left: 10px;
}

.load-content-news .date-thumb {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background-color: transparent;
  color: #0571b8;
}

.load-content-news .date-thumb span {
  color: #0571b8;
}

.load-content-news .load-text {
  padding: 0 50px 50px;
}

.date-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 5px 10px;
  font-weight: 500;
  font-size: 30px;
  color: #666;
  line-height: 1.3;
  text-align: center;
  z-index: 1;
}

.date-thumb span {
  font-weight: 500;
  font-size: 11px;
  display: block;
  color: #999;
}

.list-pagination {
  width: 100%;
  text-align: center;
  padding: 50px 0;
}

.list-pagination,
.slide-pagi {
  height: auto;
  position: relative;
  display: block;
}

.slide-pagi {
  width: 240px;
  margin: auto;
  z-index: 5;
}

.slide-pagi li {
  width: 100%;
  height: 40px;
  position: relative;
  display: block;
  text-align: center;
  float: left;
}

.slide-pagi a {
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  display: block;
  width: 100%;
  height: 100%;
  color: #0571b8;
}

.slide-pagi a.current {
  background-color: #fff;
  pointer-events: none;
}

.slide-pagi .slide-buttons {
  position: absolute;
  top: 0;
  margin: 0;
}

.slide-pagi .slide-prev {
  left: -45px;
}

.slide-pagi .slide-next,
.slide-pagi .slide-prev {
  background: #0873ba;
  width: 40px;
  height: 40px;
  top: 0;
  opacity: 1;
}

.slide-pagi .slide-next {
  right: -45px;
}

.slide-pagi .slide-prev:after {
  left: calc(50% - 3px);
  border-width: 6px 6px 6px 0;
  border-color: transparent #fff transparent transparent;
}

.slide-pagi .slide-next:after,
.slide-pagi .slide-prev:after {
  content: "";
  position: absolute;
  width: auto;
  height: auto;
  top: calc(50% - 6px);
  border-style: solid;
  z-index: 1;
}

.slide-pagi .slide-next:after {
  left: calc(50% - 2px);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #fff;
}

.slide-pagi .slide-next.disabled,
.slide-pagi .slide-prev.disabled {
  opacity: 0.5;
}

.list-pagination.pagi-picture,
.list-pagination.pagi-video {
  width: 100%;
  padding: 10px 0;
  float: left;
}

.slide-pagi.current-left {
  margin: 0;
  width: auto;
}

.slide-pagi.current-left .slide-item {
  float: none;
  display: inline-block;
  vertical-align: top;
}

.slide-pagi .slide-next:hover,
.slide-pagi .slide-prev:hover {
  background-color: #000;
  transform: none;
}

.slide-pagi .slide-prev:hover:after {
  border-color: transparent #fff transparent transparent;
}

.slide-pagi .slide-next:hover:after {
  border-color: transparent transparent transparent #fff;
}

.print {
  display: block;
  width: 100%;
  padding: 20px 5%;
  text-align: center;
  background-color: #0571b8;
}

.print,
.print-box {
  position: relative;
  height: auto;
}

.print-box {
  display: inline-block;
  width: auto;
  margin: 0;
}

.print-box a:hover {
  color: #231f20;
}

.print-box a:before {
  transition: all 0.3s ease-in-out;
}

.print-but,
.save-but,
.share-but {
  padding: 0 20px 0 10px;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 30px;
  background: 0 0;
  z-index: 1;
  border: 1px solid #ffffff5c;
}

.save-but:before {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/favorite.svg)
    no-repeat 50%/80%;
}

.print-but:before,
.save-but:before {
  content: "";
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}

.print-but:before {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/print.svg)
    no-repeat 50%/80%;
}

.share-but:before {
  content: "";
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  background: url(/wp-content/uploads/2024/09/share.svg) no-repeat 50%/80%;
}

.save-but:hover:before {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/favorite2.svg)
    no-repeat 50%/80%;
}

.print-but:hover:before {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/print2.svg)
    no-repeat 50%/80%;
}

.share-but:hover:before {
  background: url(/wp-content/uploads/2024/09/share.svg) no-repeat 50%/80%;
}

.share-item {
  position: absolute;
  right: -100%;
  bottom: 5px;
  width: 100%;
  height: 40px;
}

.share-item ul {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  text-align: left;
  padding: 0 0 0 10px;
}

.share-item li {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 50%;
  border: 1px solid #fff;
  transform: scaleX(0);
  transform-origin: left top;
  left: -40px;
  opacity: 0;
}

.share-item a {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 0;
  color: #fff;
  text-indent: -9999px;
}

.share-item a svg {
  width: 80%;
  height: 80%;
  position: absolute;
  left: 10%;
  top: 10%;
}

.share-but.active + .share-item li {
  transform: scaleX(1);
  left: 0;
  opacity: 1;
}

.share-but.active + .share-item li:nth-child(2) {
  transition-delay: 0.2s;
}

.share-but.active + .share-item li:nth-child(3) {
  transition-delay: 0.4s;
}

#recruitment-page {
  background-color: #fff;
}

#recruitment-page .title-page {
  display: block;
}

.enviroment-work {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #fff;
  z-index: 2;
}

.enviroment-work .title-main {
  text-align: left;
  margin: 0 0 20px;
}

.box-enviroment {
  display: inline-block;
  position: relative;
  width: 90%;
  max-width: 900px;
  color: #444;
  text-align: left;
  z-index: 5;
}

.box-enviroment strong {
  font-size: 110%;
  color: #0571b8;
}

.box-enviroment p {
  line-height: 1.8;
}

.box-enviroment p:first-child {
  margin: 0 0 6px;
}

.enviroment-work .pic-img {
  background-size: contain;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 0;
}

.enviroment-01 .pic-img,
.enviroment-03 .pic-img {
  background-position: 100%;
}

.enviroment-01 .box-enviroment,
.enviroment-03 .box-enviroment {
  padding: 5vw 0 5vw 10vw;
}

.enviroment-02 {
  text-align: right;
}

.enviroment-02:after {
  content: "";
  position: absolute;
  width: 70%;
  height: calc(100% + 4px);
  top: -2px;
  right: 0;
  background: linear-gradient(
    -90deg,
    #0571b8 60%,
    rgba(5, 113, 184, 0.7) 80%,
    rgba(5, 113, 184, 0)
  );
  z-index: 1;
}

.enviroment-02 .pic-img {
  background-position: 0;
}

.enviroment-02 .box-enviroment {
  color: #fff;
  padding: 5vw 8vw 5vw 0;
}

.enviroment-policy {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}

.pic-envi {
  position: relative;
  display: block;
  width: 50%;
  overflow: hidden;
}

.enviroment-policy .pic-img {
  width: 100%;
  height: 140%;
  position: absolute;
  left: 0;
  top: 0;
}

.box-policy {
  position: relative;
  display: block;
  padding: 5vw 3vw;
  width: 50%;
}

.box-policy .title-main {
  text-align: left;
  margin: 0 0 20px;
}

.enviroment-policy:nth-child(2n) {
  background-color: #0571b8;
}

.enviroment-policy:nth-child(2n) .box-policy {
  background-color: #0571b8;
  color: #fff;
}

.enviroment-policy:nth-child(odd) {
  flex-direction: row-reverse;
}

.enviroment-policy:nth-child(odd) .box-policy {
  background-color: #fff;
  color: #444;
}

.enviroment-policy:nth-child(odd) .title-main h2 {
  color: #0571b8;
}

.pic-translate,
.scrolling {
  transition: 0s !important;
}

.list-job {
  margin: 10px auto;
}

.content-table,
.list-job {
  position: relative;
  display: block;
  height: auto;
}

.content-table {
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
}

.table-recruitment {
  width: 100%;
  min-width: 840px;
  margin: 0 auto;
  border-spacing: 1px;
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.4;
}

.table-recruitment th {
  padding: 20px 15px;
  background-color: #0571b8;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  vertical-align: middle;
}

.table-recruitment > thead > tr > th:nth-child(2) {
  text-align: left;
  padding: 20px 15px 20px 25px;
}

.table-recruitment td {
  background-color: hsla(0, 0%, 100%, 0.8);
  font-size: 15px;
  color: #414141;
  vertical-align: middle;
  font-weight: 400;
  text-align: center;
}

.table-recruitment tbody tr td:nth-child(2) {
  text-align: left;
}

.table-recruitment td a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #444;
  line-height: 1.4;
  text-transform: uppercase;
  padding: 27px 20px;
  transition: all 0.3s ease-in-out;
}

.table-recruitment th:first-child {
  width: 60px;
  padding: 0;
}

.career {
  background-color: #fff;
  padding: 30px 0 0;
}

.career-box {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.input-text input[type="file"] {
  height: 64px;
  border: 1px solid #ddd;
}

table {
  display: table;
  border-spacing: 1px;
  border-collapse: separate;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
}

.recruit-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}

.recruit-background:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #ddd, hsla(0, 0%, 87%, 0));
}

.recruit-background .pic-img {
  background-position: bottom;
}

.recruit-background .pic-img img {
  position: relative;
}

.recruitment-information {
  margin: 0;
  padding: 0 0 60px;
  background-color: #ddd;
  overflow: hidden;
  z-index: 1;
}

.career-form,
.recruitment-information {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.career-form {
  padding: 0 0 40px;
}

.wrap-position {
  padding: 3vw 0 40px;
}

.join-us {
  width: 90%;
  max-width: 700px;
  margin: auto;
  padding: 40px;
  text-align: left;
  background-color: #fff;
}

.join-form,
.join-us {
  position: relative;
  display: block;
  height: auto;
}

.join-form {
  width: 100%;
  margin: 10px auto 0;
  z-index: 5;
}

.join-us .input-text {
  float: left;
  width: calc(50% - 6px);
  margin: 0 0 6px;
  border: 0;
}

.join-us .input-text:nth-child(odd) {
  margin-right: 6px;
}

.join-us .input-text input[type="text"] {
  height: 55px;
  line-height: 55px;
  background-color: #e4e4e4;
  color: #666;
  font-weight: 400;
  border-radius: 0;
  opacity: 1;
}

.join-us .input-text input[type="file"] {
  height: 55px;
}

.join-us .file-name {
  background-color: #e4e4e4;
  height: 55px;
  line-height: 55px;
}

.join-us .file-mark {
  line-height: 47px;
  top: 4px;
  right: 4px;
  font-size: 14px;
}

.join-us .input-but {
  margin: 10px 0;
}

.download-but {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0 50px 50px;
}

.download-but a {
  position: relative;
  display: block;
  color: #fff;
  padding: 10px 50px 10px 20px;
  background-color: #0571b8;
  text-align: left;
  width: 240px;
  transition: all 0.3s ease-in-out;
  margin: 0 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.download-but a:before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border: 1px solid #0571b8;
  transition: all 0.3s ease-in-out;
}

.download-but a:after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 25px;
  background: url(/wp-content/uploads/2024/09/select.png) no-repeat 50%;
  border-radius: 50%;
}

.details-center .download-but span {
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.6;
}

.details-center .download-but h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 7px 0 0;
  text-transform: uppercase;
}

.download-but a:hover {
  background-color: #00568e;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

.download-but a:hover:before {
  border: 3px solid #00568e;
}

.download-but a.apply-recruit {
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

.download-but a.apply-recruit h3 {
  margin: 0;
}

.download-but a.apply-recruit:after {
  display: none;
}

.loadform-recruit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loadform-recruit > span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.box-loadform {
  position: relative;
  margin: auto;
  max-width: 800px;
  background: #fff
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/pattern2.jpg)
    repeat;
  padding: 40px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.box-loadform form {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.box-loadform .input-text {
  width: calc(50% - 5px);
  display: block;
  border-radius: 0;
  border: 0;
}

.box-loadform .input-text input[type="text"] {
  color: #666;
  background-color: #ddd;
  opacity: 1;
  height: 60px;
}

.box-loadform .input-area {
  border: 0;
  border-radius: 0;
  margin: 0;
  width: calc(100% - 4px);
}

.box-loadform .input-area textarea {
  color: #666;
  background-color: #ddd;
  opacity: 1;
  border-radius: 0;
}

.box-loadform .close-popup {
  background-color: #ccc;
  position: absolute;
  top: 15px;
  right: 15px;
}

.box-loadform .close-popup:hover {
  border: 7px solid #0571b8;
}

.box-loadform .file-name {
  background-color: #ddd;
  border-radius: 0;
  color: #666;
}

.input-but button.but-recruit {
  padding: 15px 25px;
  font-size: 17px;
}

.input-text input[type="file"] {
  position: relative;
  display: block;
  width: 100%;
  height: 60px;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

.file-up {
  cursor: pointer;
}

.file-up:after {
  content: "";
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.8);
  border-radius: 8px;
  z-index: -1;
}

.file-name,
.file-up:after {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.file-name {
  display: block;
  color: #727272;
  font-weight: 400;
  font-size: 15px;
  white-space: nowrap;
  padding: 0 110px 0 20px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 60px;
  line-height: 60px;
}

.file-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  display: block;
  width: auto;
  height: auto;
  background-color: #0571b8;
  padding: 0 12px;
  font-size: 17px;
  line-height: 50px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  z-index: 1;
}

.file-mark,
.view-more {
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.view-more {
  padding: 10px 35px 10px 15px;
  margin: 10px 0 0 -10px;
  font-size: 14px;
  display: inline-block;
  position: relative;
  z-index: 10;
}

.view-more:after {
  border-top: 5px solid transparent;
  border-left: 5px solid #fff;
  border-bottom: 5px solid transparent;
  display: inline-block;
  top: calc(50% - 4px);
}

.view-more:after,
.view-more:before {
  content: "";
  position: absolute;
  right: -20px;
}

.view-more:before {
  width: 40px;
  height: 1px;
  top: 50%;
}

#contact-page,
.view-more:before {
  background-color: #fff;
}

#contact-page .title-page {
  display: block;
}

.contact-group {
  padding: 30px 0;
  background-color: #fff;
}

.contact-group .wrap-content {
  padding: 3vw 0 0;
}

.contact-group .company-info {
  text-align: center;
}

.contact-group .company-info a,
.contact-group .company-info p {
  color: #444;
}

.contact-group h3 {
  color: #0571b8;
}

.contact-group .title-main {
  margin: 0 0 20px;
}

.contact-group .company-info span {
  margin: 0 10px 0 0;
}

.section-input {
  padding: 40px 20px 20px;
  text-align: center;
}

.section-input:after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 110%;
  background-color: #fff;
  z-index: -1;
}

.contact-form {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/pattern.jpg)
    repeat;
  text-align: center;
  background-color: #fff;
  padding: 20px 0 50px;
}

.contact-form:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #0571b8, rgba(5, 113, 184, 0));
  pointer-events: none;
  z-index: 1;
}

.form-box {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 700px;
  height: auto;
  padding: 10px 0 0;
  text-align: center;
}

.form-box .input-text {
  display: inline-block;
  vertical-align: middle;
  width: calc(50% - 15px);
  margin: 2px 0;
  border-radius: 0;
  border: 0;
}

.form-box .input-text input[type="text"] {
  border-radius: 0;
  opacity: 1;
}

.form-box .input-area {
  width: calc(100% - 26px);
  margin: 2px 0 0;
  border: 0;
}

.form-box .input-area textarea {
  border-radius: 0;
  opacity: 1;
}

button.but-contact {
  margin: 0 30px 0 3px;
  padding: 22px 35px;
  font-size: 20px;
}

.captcha,
button.but-contact {
  position: relative;
  vertical-align: middle;
}

.captcha {
  display: inline-block;
}

.footer {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  height: auto;
  text-align: center;
  color: #fff;
  padding: 10px 30px;
}

.footer.align {
  padding: 0 30px;
}

.right-footer {
  float: left;
  height: auto;
  z-index: 5;
}

.copyright,
.right-footer {
  position: relative;
  display: block;
}

.copyright {
  padding: 0;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 1.6;
  text-align: left;
  font-weight: 300;
  color: #fff;
}

.copyright a {
  color: #fff;
  display: block;
  opacity: 0.5;
}

.bottom-link,
.bottom-link > a,
.bottom-link > a.hidden {
  display: none;
}

body.auto .footer {
  background: linear-gradient(135deg, #1983c8, #06629f);
}

body.auto .box-footer {
  display: flex;
}

.box-footer {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 1500px;
  padding: 4vw 10px;
  margin: auto;
}

.left-box-footer {
  width: 350px;
  padding: 0 0 100px;
}

.left-box-footer,
.logo-footer {
  position: relative;
  display: block;
}

.logo-footer {
  vertical-align: middle;
  background: url(/wp-content/uploads/2024/09/logo2.svg) no-repeat 50% / contain;
  width: 100%;
  height: 120px;
  margin: 0 auto;
}

.license {
  position: absolute;
  display: block;
  width: 150px;
  top: 200px;
  left: calc(50% - 510px);
}

.license img {
  display: block;
  height: auto;
  width: 100%;
}

.company-box-2 {
  display: block;
  position: relative;
  width: 600px;
  text-align: left;
}

.company-box-2 .company-info li {
  opacity: 1;
  margin: 0 0 6px;
}

.company-box-2 .company-info span {
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
}

.company-box-2 .company-info p {
  font-size: 16px;
}

.subcrible {
  width: 260px;
  text-align: left;
}

.subcrible,
.subcrible span {
  position: relative;
  display: block;
}

.subcrible span {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.input-subscribe {
  border: none;
}

.input-subscribe input[type="text"] {
  color: #0571b8;
  line-height: 40px;
  height: 40px;
  border-radius: 0;
  opacity: 1;
}

.input-subscribe button {
  position: absolute;
  border: none;
  right: 1px;
  top: 1px;
  z-index: 5;
}

.subcrible .social {
  position: relative;
  display: block;
  width: 100%;
  right: auto;
  top: auto;
}

.subcrible .social:before {
  content: "";
  position: relative;
  display: inline-block;
  width: 90px;
  height: 1px;
  background: hsla(0, 0%, 100%, 0.6);
  margin: 20px 0 0;
}

.all-album {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  z-index: 99999;
}

.album-load {
  height: 100%;
  opacity: 0;
  text-align: center;
}

.album-center,
.album-load {
  width: 100%;
  position: relative;
  display: block;
}

.album-center {
  height: 100vh;
}

.album-pic-center {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  display: block;
}

.album-pic-center .pic-name {
  position: absolute;
  left: 0;
  top: 1.5%;
  z-index: 5;
  width: 100%;
  height: auto;
}

.album-pic-center .pic-name h3 {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  padding: 10px 50px;
}

.album-pic-center .pic-name h3 > span > span {
  transition: all 0.6s ease;
  opacity: 0;
}

.album-pic-center .pic-name.move h3 > span > span.move {
  opacity: 1;
}

.container-zoom {
  width: 100%;
  height: 100vh;
  position: relative;
  display: block;
}

.container-zoom:after,
.container-zoom:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.container-zoom > img {
  width: auto;
  height: auto;
  max-height: 80vh;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0 -3px;
}

.album-pic-center .pinch-zoom-container {
  height: 100vh !important;
}

.dragscroll {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
}

.pinch-zoom-container {
  width: 100%;
  position: relative;
  display: block;
  margin: 0;
}

.all-pics .pinch-zoom-container {
  height: 100vh !important;
}

.pinch-zoom {
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
}

.pinch-zoom:after,
.pinch-zoom:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.pinch-zoom > img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0 -3px;
}

.zoom {
  width: 50px;
  height: 50px;
  right: 20px;
  top: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 20;
}

.zoom,
.zoom:after {
  position: absolute;
  border-radius: 50%;
}

.zoom:after {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(/wp-content/uploads/2024/09/zoom-in-02.svg) no-repeat 50%/80%;
}

.zoom-details {
  width: 50px;
  height: 50px;
  right: 10px;
  bottom: 10px;
  z-index: 20;
}

.zoom-details,
.zoom-details:after {
  position: absolute;
  border-radius: 50%;
}

.zoom-details:after {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2)
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/zoom.svg)
    no-repeat 50%/80%;
}

.zoom-large {
  width: 70px;
  height: 70px;
  top: 20px;
  right: 20px;
  display: inline-block;
  vertical-align: middle;
  z-index: 99999;
}

.zoom-large,
.zoom-large:after {
  position: absolute;
  border-radius: 50%;
}

.zoom-large:after {
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2)
    url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/zoom.svg)
    no-repeat 50%/90%;
}

.touch {
  background-color: #0571b8;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.cursor {
  cursor: url(/wp-content/uploads/2024/09/openhand.png) 8 8, move;
}

.drag-cursor {
  cursor: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/grabbing.png)
      8 8,
    move;
}

.go-top {
  position: fixed;
  color: #fff;
  left: calc(50% - 25px);
  bottom: 20px;
  width: 50px;
  height: 50px;
  margin: 0;
  background-color: #0873ba;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.go-top svg {
  width: 80%;
  height: 80%;
  margin: 10%;
}

.go-top.show {
  opacity: 1;
  pointer-events: auto;
}

.mouse {
  border: 1px solid #fff;
  width: 30px;
  height: 45px;
  position: fixed;
  right: 20px;
  bottom: 30px;
  border-radius: 50px;
  opacity: 0;
  z-index: 5;
}

.mouse.show {
  opacity: 1;
}

.mouse.show:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #fff;
  width: 5px;
  height: 10px;
  border-radius: 8px;
  animation: trackBallSlide 3s linear infinite;
}

.wheel {
  border: 1px solid hsla(0, 0%, 100%, 0.5);
  width: 30px;
  height: 54px;
  position: absolute;
  right: 30px;
  bottom: 30px;
  border-radius: 50px;
  pointer-events: none;
  visibility: visible;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 20;
}

.wheel:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #fff;
  width: 5px;
  height: 10px;
  border-radius: 8px;
  animation: trackBallSlide 3s linear infinite;
}

.wheel.show {
  opacity: 1;
}

.close,
.close-album,
.close-details,
.close-map,
.close-news,
.close-pics,
.close-popup,
.close-video {
  background: url(/wp-content/uploads/2024/09/close-1.svg) no-repeat 50%/80%;
  display: block;
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: fixed;
  right: 30px;
  top: 20px;
  border-radius: 50%;
  z-index: 999999;
}

.details-content .close-popup {
  background-color: #0073b5;
}

.content-manager .close-popup {
  right: -30px;
  top: -30px;
  position: absolute;
}

.close-pics-small {
  background: rgba(0, 0, 0, 0.2) url(/wp-content/uploads/2024/09/close-1.svg)
    no-repeat 50% / cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  display: none;
  z-index: 99999;
}

.close-map {
  background-color: #0873ba;
  position: absolute;
}

.close-video {
  top: 50%;
  margin: -30px 0 0;
}

.close-news {
  top: 50%;
  margin: -30px 20px 0 0;
  right: auto;
  left: 40px;
  width: 50px;
  height: 50px;
  background-color: #b3802c;
  border-radius: 0;
}

.details-content {
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  opacity: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: inherit;
  scrollbar-width: thin;
  z-index: 3000;
}

.details-content:after,
.details-content:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.details-content.no-after:after,
.details-content.no-after:before {
  display: none;
}

.details-content > span {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  z-index: 1;
}

.details-center {
  position: relative;
  display: inline-block;
  width: 90%;
  height: auto;
  vertical-align: middle;
  max-width: 1000px;
  margin: 0 auto;
  padding: 4vw 0 0;
  background-color: #fff;
  z-index: 10;
}

.details-center h2 {
  font-size: 32px;
  display: block;
  margin: 10px 0;
  padding: 0;
  color: #0571b8;
}

.details-center h2,
.details-center > h3 {
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.details-center > h3 {
  font-size: 20px;
  color: #444;
  margin: 0;
}

.details-outer {
  margin: 0;
  padding: 20px 50px 40px;
}

.details-outer,
.details-text {
  position: relative;
  width: 100%;
  height: auto;
}

.details-text {
  padding: 10px 50px 50px;
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: #404040;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ddd;
}

.details-text > h3 {
  margin: 40px 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  text-align: left;
}

.details-text > h3:after {
  display: none;
}

.details-text p {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

.details-text img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  margin: 0 auto;
}

.details-text ol,
.details-text ul {
  text-align: left;
  list-style: inherit;
  -webkit-margin-start: 16px;
}

.details-text li,
.details-text ol li,
.details-text p span,
.details-text span {
  text-align: left;
  margin: 5px 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.details-text a {
  color: #0571b8;
}

.details-text table {
  display: inline-block;
  width: auto;
  max-width: 100%;
  border-spacing: 1px;
  margin: 20px auto;
  table-layout: fixed;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: inherit;
  scrollbar-width: none;
}

.details-text table tbody {
  display: table;
  width: 100%;
  min-width: 500px;
  position: relative;
}

.details-text table td,
.details-text table th {
  background-color: #0571b8;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  padding: 5px 10px;
  border: 1px solid #fff;
}

.details-text iframe {
  max-width: 100%;
  max-height: 621.46893px;
  margin: 10px auto;
  display: block;
}

.details-center {
  opacity: 0;
}

.wrap-page {
  width: 100%;
  max-width: 900px;
  position: relative;
  margin: 0 auto;
  height: auto;
}

.no-scroll {
  overflow-x: hidden;
  overflow-y: hidden !important;
  overflow: hidden;
}

.no-index {
  position: static !important;
  display: none !important;
}

.level-index-out,
.no-link {
  pointer-events: none;
}

.level-index-out {
  z-index: -9999;
}

.level-index-in {
  z-index: 9990;
}

.visible {
  overflow: visible;
}

.two-column {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  column-count: 2;
  column-gap: 40px;
  text-align: justify;
}

.display-none {
  display: none !important;
}

.desktop {
  display: block;
}

.mobile {
  display: none;
}

img.desktop {
  display: block;
}

img.mobile {
  display: none;
}

.allvideo {
  position: fixed;
  overflow: hidden;
  display: none;
  z-index: 2200;
}

.allvideo,
.video-list {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video-list {
  position: absolute;
  z-index: 100;
  text-align: center;
}

.video-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  display: block;
}

.video-skin {
  bottom: 0;
  height: auto;
  min-height: 100%;
}

.video-skin,
.video-wrap iframe {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
}

.video-wrap iframe {
  height: 100%;
  background-color: #000;
  display: block;
  top: 0;
}

.video-wrap h3 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 10px;
  z-index: 10;
  color: #fff;
  font-weight: 700;
  min-width: 200px;
  text-transform: uppercase;
  font-size: 14px;
}

.pic-video {
  display: block;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  background-attachment: scroll;
  transition: all 0.8s ease-in-out;
  z-index: 2;
}

.pic-video,
.pic-video:after {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.pic-video:after {
  content: "";
  background: linear-gradient(
    0deg,
    rgba(33, 71, 106, 0.5),
    rgba(1, 33, 59, 0.5) 80%
  );
  opacity: 0;
}

.pic-video.hide {
  opacity: 0;
  z-index: -1;
}

.box-video-center {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #000;
  z-index: 10;
}

.video-cover-inline {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.video-full {
  background-color: #000;
  min-width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay-video {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.player-vid {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/play.svg)
    no-repeat 50% / contain;
  width: 140px;
  height: 140px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -70px 0 0 -70px;
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
  opacity: 0;
  z-index: 99999;
}

.player-vid:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.player-vid.hide {
  display: none;
  opacity: 0;
}

.player-vid.show {
  display: block;
  opacity: 1;
}

.controls {
  position: absolute;
  width: 100%;
  height: auto;
  padding: 5px 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  text-align: center;
  background-color: hsla(0, 0%, 100%, 0);
  transition: all 0.9s ease-in-out;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  z-index: 10;
}

.controls[data-state="hidden"] {
  display: none;
}

.controls[data-state="visible"] {
  visibility: visible;
}

.controls .progress {
  cursor: pointer;
  width: calc(100% - 150px);
  max-width: 200px;
  height: 10px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 1px 0;
  padding: 1px;
  background-color: hsla(0, 0%, 100%, 0.2);
}

.controls progress[data-state="fake"] {
  background-color: #fff;
  height: 20px;
}

.controls button {
  text-align: center;
  background-color: transparent;
  border: none;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}

.controls button:hover {
  opacity: 0.5;
}

.controls button:focus {
  opacity: 1;
}

.controls progress {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
}

.controls progress span {
  width: 0;
  height: 100%;
  display: inline-block;
  background-color: #fff;
}

.controls progress::-moz-progress-bar {
  background-color: #fff;
}

.video-cover-inline[data-fullscreen="true"] {
  position: fixed;
  left: 0;
  top: 0;
}

.video-cover-inline[data-fullscreen="true"] .video-full {
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  transform: none;
}

.video-cover-inline[data-fullscreen="true"] figcaption {
  display: none;
}

.video-cover-inline[data-fullscreen="true"] .controls {
  bottom: 10px;
  z-index: 2147483647;
  position: fixed;
}

.controls.addshow {
  bottom: 60px;
  transform: translateZ(0);
  opacity: 1;
}

.video-youtube-full {
  height: 100vh;
  z-index: 1;
}

.video-youtube-full,
.youtube-video {
  position: relative;
  width: 100%;
  display: block;
}

.youtube-video {
  height: 100%;
}

.youtube-video:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.youtube-video iframe {
  width: 100%;
  height: 56.25vw;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.full-frame .youtube-video iframe {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: none;
}

.youtube-video img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.bg-video {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-position: 50%;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  padding: 0;
  background-size: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.6s ease-in-out;
  z-index: 1;
}

.bg-video.hide,
.play-button {
  opacity: 0;
  pointer-events: none;
}

.play-button {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  z-index: 99999;
}

.play-button:before {
  transform: scale(0.6);
  background: linear-gradient(0deg, #0073b5, #bfdfee);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.5s ease-in-out;
}

.play-button:after,
.play-button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.play-button:after {
  background: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/play.svg)
    no-repeat 50% / contain;
}

.play-button:hover:before {
  transform: scale(0.9);
}

.play-button.show {
  opacity: 1;
  pointer-events: auto;
}

.pause-button {
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
}

.control,
.pause-button {
  position: absolute;
  opacity: 0;
}

.control {
  width: auto;
  height: auto;
  padding: 10px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  color: #fff;
  font-size: 12px;
  transition: opacity 0.5s ease-in-out;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  z-index: 10;
}

.control.show {
  opacity: 1;
}

.control.hide {
  opacity: 0;
}

.control span {
  margin: 0 5px;
}

.control button,
.control span {
  display: inline-block;
  vertical-align: middle;
}

.control button {
  outline: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  position: relative;
  margin: 0 10px;
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}

.control button:hover {
  opacity: 0.5;
  background-color: transparent;
}

.control button:focus {
  opacity: 1;
  background-color: transparent;
}

button[data-state="play"] {
  background-image: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/play.svg);
}

button[data-state="pause"] {
  background-image: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/pause.svg);
}

button[data-state="stop"] {
  background-image: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/stop.svg);
  display: none;
}

button[data-state="mute"] {
  background-image: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/mute.svg);
}

button[data-state="unmute"] {
  background-image: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/unmute.svg);
}

button[data-state="go-fullscreen"] {
  background-image: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/fullscreen.svg);
}

button[data-state="cancel-fullscreen"] {
  background-image: url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/video/cancel-fullscreen.svg);
}

.class-hidden {
  display: none;
}

#contact-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 110000;
  width: 82px;
  height: 82px;
  margin: -41px 0 0 -41px;
  border-radius: 50%;
  animation: Rotate 2.5s linear infinite;
  display: none;
}

.contact-success,
.register-success {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -150px;
  padding: 20px;
  font-size: 15px;
  line-height: 1.6;
  width: 300px;
  height: auto;
  background-color: #c30004;
  border-radius: 20px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  z-index: 99999;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.color-red {
  background-color: #d00;
  color: #fff;
}

.color-blue {
  background-color: #008c44;
  color: #fff;
}

.inputContainer {
  position: relative;
  float: left;
}

.formError {
  position: absolute;
  top: -30px;
  left: 20px;
  display: block;
  cursor: pointer;
  z-index: 99999;
}

.formErrorContent {
  background-color: rgba(209, 0, 8, 0.8);
  position: relative;
  display: inline-block;
  color: #fff;
  width: auto;
  height: auto;
  max-width: 250px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  border-radius: 10px;
  z-index: 9999;
}

.formErrorContent:after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 7px 0;
  border-color: rgba(209, 0, 8, 0.8) transparent transparent;
}

.greenPopup .formErrorContent {
  background-color: #008c44;
}

.blackPopup .formErrorContent {
  background-color: #393939;
  color: #fff;
}

.ajaxSubmit {
  padding: 20px;
  background-color: #008c44;
  display: none;
}

.popup-home {
  overflow: hidden;
  opacity: 0;
}

.popup-home .details-center {
  width: 98%;
  max-width: 1100px;
  margin: 0 -5px;
  background-color: transparent;
}

.popup-home img {
  width: 100%;
  height: auto;
  display: block;
}

.popup-home .details-center {
  min-height: 0;
}

.popup-home.details-content {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9999;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  margin: 0;
  top: 0;
  left: 0;
}

.popup-home.details-content:after,
.popup-home.details-content:before {
  content: "";
  position: relative;
  display: inline-block;
  width: auto;
  height: 100%;
  vertical-align: middle;
}

.popup-home.details-content > span {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

.popup-home .details-center {
  position: relative;
  display: inline-block;
  width: 90%;
  height: auto;
  vertical-align: middle;
  max-width: 1000px;
  padding: 0;
  margin: 0 auto;
  z-index: 5;
  background-color: #fff;
  opacity: 0;
}

.popup-home .details-content .close-popup {
  top: 30px;
  right: 30px;
  position: fixed;
  margin: 0;
}

.data-scroll {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.smooth-scroll {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.upload_target {
  width: 1px;
  height: 0;
  border: 0 solid #fff;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: -99999;
  position: absolute;
  left: -999999px;
  top: -999999px;
}

.data-updating {
  margin: 20px 0;
  text-align: center;
}

#thank-you-page {
  background-color: #fff;
}

#thank-you-page .title-page {
  display: block;
}

#search-page {
  background-color: #fff;
}

#search-page .title-page {
  display: block;
}

#search-page .load-title h3 {
  text-align: center;
  padding: 0 0 20px;
}

#search-page .content-text {
  background: 0 0;
  box-shadow: none;
  padding: 0;
}

#search-page .content-picture,
#search-page .content-text p,
#search-page .slide-award .slide-item {
  opacity: 1 !important;
}

.search-content {
  background-color: #fff;
  z-index: 1;
}

.search-content .title {
  padding: 0 0 20px;
}

.search-content h2 {
  font-size: 36px;
}

.search-result {
  position: relative;
  display: block;
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

.search-box {
  counter-reset: div;
}

.resultCount,
.search-box {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.resultCount {
  padding: 10px 0;
}

.resultCount span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #444;
  font-weight: 700;
  text-transform: uppercase;
}

.item-search {
  margin: 0 0 1px;
  text-align: left;
}

.item-search,
.item-search a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.item-search a {
  padding: 15px 30px;
}

.item-search:nth-child(odd) a {
  background-color: #216095;
}

.item-search:nth-child(2n) a {
  background-color: #4382b7;
}

.item-link-name {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-size: 13px;
  line-height: 1.4;
  margin: 7px 0;
  color: #d2d2d2;
  word-break: break-word;
}

.item-link-name,
.item-search:before {
  font-family: Arial, Helvetica, sans-serif;
}

.item-search:before {
  content: counter(div) " ";
  counter-increment: div;
  position: absolute;
  left: -20px;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  line-height: 40px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  z-index: 1;
}

.item-search:nth-child(-n + 9):before {
  content: "0" counter(div);
}

.item-search:nth-child(odd):before {
  background-color: #4382b7;
}

.item-search:nth-child(2n):before {
  background-color: #216095;
}

.item-search h3 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.item-search h3:after {
  content: normal !important;
}

.item-date {
  display: block;
  width: 100%;
  height: auto;
  text-align: left;
  margin: 0 0 5px;
}

.item-date,
.item-search p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #eee;
}

.item-search p {
  line-height: 1.4;
  margin: 7px 0;
}

.item-search h3 strong,
.item-search p strong {
  font-weight: 700;
  color: #fff;
}

.item-search p .item-date {
  display: inline-block;
  width: auto;
  margin: 0 5px 0 0;
}

.search-mess {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 30px 0;
}

.search-mess p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  text-transform: uppercase;
  text-align: center;
}

.search-content .page-num {
  max-width: 252px;
}

.search-tempty {
  padding: 5% 0;
}

.search-tempty p {
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
}
#doi-ngu-nhan-su .content-center .pic-value {
  padding: 0 0 0 5vw;
  max-width: 45vw;
}

.nav li:before {
  display: none;
}
@media screen and (max-width: 1700px) {
  .slide-pro .slide-buttons {
    right: auto;
    left: 450px;
  }
}

@media screen and (max-width: 1600px) {
  p {
    font-size: 15px;
  }

  .head-text h3 {
    font-size: 1vw;
  }

  .box-nav li span {
    font-size: 12px;
  }
}

@media screen and (max-width: 1400px) and (min-height: 720px) {
  .map-box.showroom {
    width: calc(100% - 350px);
  }

  .list-view {
    width: 350px;
  }
}

@media screen and (max-width: 1500px) {
  .view-album:not(.view-apartment) {
    width: 60px;
    height: 60px;
  }

  .box-nav li {
    margin: 15px 0 0;
  }

  .box-nav li a {
    font-size: 15px;
  }

  .text-slide-pro {
    max-height: 120px;
    overflow: hidden;
  }

  .business-home-pic .pic-img {
    width: 16vw;
    height: 16vw;
  }

  .next-mod,
  .prev-mod {
    width: 60px;
    height: 60px;
  }

  .item-news-home:first-child,
  .item-video-home {
    max-height: 340px;
  }

  .item-news-home:nth-child(2),
  .item-news-home:nth-child(3) {
    max-height: 170px;
  }

  .txt-news-home h3 {
    max-height: 121px;
  }

  .box-news-home {
    width: calc(100% - 220px);
  }

  .company-info li {
    margin: 0 0 10px;
  }

  .slide-partner {
    max-width: 900px;
  }

  .txt-business p {
    font-size: 15px;
  }

  .project-text > p {
    max-height: 97px;
  }

  .text-ins-project {
    height: 97px;
  }

  .description-value h3 {
    font-size: 22px;
  }

  .enviroment-02 .box-enviroment {
    max-width: 750px;
  }

  .left-box-footer {
    width: 300px;
  }

  .logo-footer {
    height: 100px;
  }

  .license {
    top: 220px;
  }
}

@media screen and (max-width: 1450px) {
  .nav ul {
    margin: 40px -5px 0;
  }

  .text-box ul li {
    font-size: 15px;
  }

  .slide-next,
  .slide-prev {
    width: 60px;
    height: 60px;
  }
  .pic-partner-it img {
    width: auto;
    max-width: 100%;
    max-height: 11vh;
    margin: auto;
  }
}

@media screen and (max-width: 1400px) {
  .slide-pro .slide-buttons {
    top: 0;
    margin: 0;
  }

  .load-details p {
    margin: 0 0 15px;
  }

  .box-enviroment {
    max-width: 740px;
  }

  .enviroment-02 .box-enviroment {
    max-width: 660px;
  }
  .pic-partner-it img {
    width: auto;
    max-width: 100%;
    max-height: 11vh;
    margin: auto;
  }
}

@media screen and (max-width: 1300px) {
  .control,
  .controls {
    padding: 0 0 0 200px;
  }

  .text-slide-pro {
    max-height: 97px;
    overflow: hidden;
  }

  .left-box-footer {
    width: 300px;
  }

  .logo-footer {
    height: 100px;
  }

  .company-box-2 {
    width: calc(100% - 560px);
    padding: 0 10px 0 30px;
  }

  .license {
    width: 140px;
    left: 117px;
  }
}

@media screen and (max-width: 1200px) {
  .grid {
    max-width: 800px;
  }
}

@media screen and (max-width: 1100px) {
  .logo:after {
    content: "";
    width: 100%;
    height: 100%;
  }
  .move-logo {
    height: 100%;
  }
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
  }

  p {
    font-size: 15px;
  }

  .header {
    height: 70px;
    display: block;
    background-color: #fff;
  }

  .header:after {
    background-color: #fff;
    background-image: none;
    height: 60px;
    opacity: 0;
  }

  .header.hide:after {
    opacity: 1;
  }

  .logo,
  body.auto .logo {
    width: 171px;
    height: 70px;
    left: calc(50% - 85px);
    top: 0;
    border-radius: 0;
    transition: height 0.3s ease-in-out;
    z-index: 100;
  }

  .header.hide .logo,
  body.auto .header.hide .logo {
    height: 60px;
    box-shadow: none;
  }

  .logo:after {
    background: url(/wp-content/uploads/2025/11/logo-khl-new.png) no-repeat 50%/80%;
    transition: background-size 0.3s ease-in-out;
  }

  .header.hide .logo:after,
  body.auto .header.hide .logo:after {
    background-size: 70%;
  }

  .container {
    margin: 60px 0 0;
    min-height: 60vh;
    z-index: 1;
  }

  .loadicon {
    width: 26vw;
    height: 11.05vw;
    margin: -5.5vw 0 0 -13vw;
  }

  .hotline {
    display: block;
    width: auto;
    height: auto;
    position: fixed;
    bottom: 30px;
    left: 10px;
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    padding: 5px;
    color: #fff;
    z-index: 101;
  }

  .h-icon {
    background: url(/wp-content/uploads/2024/09/phone.svg) no-repeat 50%/70%;
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid hsla(0, 0%, 100%, 0.7);
    animation: Callicon 3s infinite;
    margin: 0;
    z-index: 10;
  }

  .hotline .h-text {
    display: none;
  }

  .hotline:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    background: linear-gradient(145deg, #0873ba, #7ebadb 50%, #0873ba);
    background-size: auto;
    background-size: 400% 400%;
    animation: BorderBox 3s infinite;
    z-index: -1;
  }

  .logo-menu {
    display: none;
  }

  .header:after {
    opacity: 1;
  }

  .search-but {
    top: 18px;
    right: 65px;
  }

  .language {
    top: 4px;
    right: auto;
    left: 10px;
  }

  .overlay-menu:after {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    border-radius: 0;
    background-image: linear-gradient(0deg, #0073b5, #0873ba);
    opacity: 0.5;
    mix-blend-mode: multiply;
  }

  #home-page .title-page {
    display: none;
  }

  .title-page {
    text-align: center;
  }

  .title-page h1 {
    font-size: 4vw;
    color: #fff;
    font-style: normal;
    font-weight: 700;
  }

  .title-page h1 strong {
    font-size: 100%;
  }

  .title-page {
    bottom: auto;
    left: 0;
    right: auto;
  }

  .title-page,
  .title-page-project {
    display: block;
    top: calc(56.25vw - 120px);
  }

  .title-main {
    margin: 0;
  }

  .text-banner h3,
  .title-big h2,
  .title-main h2 {
    font-size: 2.8vw;
    font-weight: 700;
  }

  .title-main h3 {
    font-size: 20px;
  }

  .title-project {
    top: 42.25vw;
  }

  .search-form {
    height: 45px;
    top: 80px;
    right: auto;
    left: 80px;
    width: 90%;
    max-width: 340px;
    transform: scaleX(0);
  }

  .form-row-search input[type="text"] {
    line-height: 44px;
  }

  .search-form.active {
    transform: none;
  }

  .sub-nav,
  .sub-nav-pro {
    width: 100%;
    height: auto;
    text-align: center;
  }

  .sub-nav > * {
    transform: translateZ(0);
  }

  .sub-nav ul:after {
    display: none;
  }

  .sub-nav li a,
  .sub-nav-pro li a {
    padding: 12px 15px;
    font-size: 11px;
  }

  .outer-nav:not(.second) {
    margin: 0;
  }

  .outer-nav.second.fixed {
    top: 60px;
    background-color: #fff;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  .outer-nav.second.fixed .sub-nav {
    width: 100%;
    padding: 0;
  }

  .outer-nav {
    float: left;
  }

  .nav-click {
    top: 20px;
    right: 20px;
  }

  .nav-click > div {
    padding: 8px 6px;
    font-size: 13px;
  }

  .nav-click.active {
    top: 15px;
    right: 40px;
  }

  .close-nav {
    color: #231f20;
    margin: 0 14px;
  }

  .close-nav:after,
  .close-nav:before {
    height: 1.5px;
    background-color: #231f20;
    top: 14px;
  }

  .close-nav span {
    width: 40px;
    height: 40px;
    top: -5px;
  }

  .nav {
    padding: 40px 0;
    margin: 0;
    max-width: inherit;
  }

  .navigation {
    top: 70px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navigation.show {
    height: calc(100% - 70px);
  }

  .nav ul {
    padding: 0 0 60px;
  }

  .nav li.active-color a,
  .nav li.current a {
    color: #0873ba;
  }

  .nav li {
    margin: 0;
    padding: 10px 20px;
    text-align: left;
    border-bottom: 1px solid hsla(0, 0%, 78%, 0.1);
  }

  .nav li:before,
  .nav li:after {
    margin: 0 0 0 10px;
  }
  .nav li:after {
    display: none;
  }
  .nav li:before {
    display: inline-block;
  }

  .nav li a {
    padding: 15px 10px;
    color: #fff;
    text-align: center;
    font-size: 3.33333vw;
  }

  .nav li.current a,
  .navigation li.active a {
    color: #0873ba;
  }

  .nav li.current:before {
    width: 30px;
  }

  .nav:after,
  .nav:before,
  .navigation:after,
  .navigation:before,
  .navigation > span {
    display: none;
  }

  .nav li a.link-home {
    display: inline-block;
    padding: 0;
    margin-bottom: 10px;
  }

  .overlay-menu {
    height: calc(100vh - 60px);
    top: 60px;
    width: 100vw;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .wheel {
    display: none;
  }

  .box-slider {
    left: auto;
    top: auto;
    float: none;
  }

  .box-slider,
  .content-main {
    height: auto;
    position: relative;
    overflow: visible;
  }

  .content-main {
    padding: 30px 0;
  }

  .content-main:after,
  .content-main:before {
    display: none;
  }

  .group-central {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    float: none;
    display: block;
    text-align: center;
    transform: translate(0) !important;
    z-index: auto !important;
    overflow: visible;
  }

  .group-central:first-child {
    z-index: 1 !important;
  }

  .banner-inner,
  .bg-home,
  .bg-inner,
  .bg-larger {
    position: relative;
    top: auto;
    left: auto;
    height: 56.25vw;
  }

  .bg-home.move,
  .slide-mask .slide-item:nth-child(2n) .bg-home.move {
    animation: none;
  }

  .box-cover {
    display: block;
  }

  .box-nav {
    display: none;
  }

  .banner-inner:after,
  .banner-small:after {
    height: 40%;
  }

  .content-page {
    width: 100%;
    height: auto;
    position: relative;
  }

  .box-content {
    top: auto;
    left: auto;
    width: auto;
  }

  .box-content,
  .colum-box {
    position: relative;
    height: auto;
    display: block;
  }

  .colum-box {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
  }

  .full.lock {
    overflow-x: hidden;
  }

  .full img {
    max-width: 100%;
    min-width: 80%;
  }

  .all-pics .text-length h3 {
    font-size: 14px;
  }

  .allvideo {
    width: 100%;
    z-index: 5000;
  }

  .allvideo,
  .video-skin {
    height: 100%;
    left: 0;
    top: 0;
  }

  .video-skin {
    bottom: auto;
  }

  .overlay-video.show {
    height: 100%;
  }

  .album-pic-center img {
    max-width: 98%;
    max-height: inherit;
  }

  .album-pic-center .pic-name h3 {
    font-size: 14px;
  }

  .go-top {
    width: 50px;
    height: 50px;
    bottom: 30px;
    border: none;
    left: auto;
    right: 15px;
    color: #fff;
  }

  .container-zoom {
    height: auto;
  }

  .container-zoom.zoomin {
    height: 90vh;
  }

  .album-center .container-zoom {
    height: 100vh;
  }

  .thumb-content {
    bottom: 60px;
  }

  .thumb-box {
    position: relative;
    bottom: auto;
    left: auto;
  }

  .bg-product .zoom,
  .zoom {
    width: 40px;
    height: 40px;
    opacity: 1;
    box-shadow: none;
    top: 10px;
    right: 10px;
    background-color: hsla(0, 0%, 100%, 0.8);
  }

  .player,
  .view-album:not(.view-apartment) {
    transform: scale(0.8);
    background-color: rgba(0, 0, 0, 0.3);
  }

  .close,
  .close-album,
  .close-map,
  .close-popup,
  .close-video {
    width: 50px;
    height: 50px;
    right: 20px;
    top: 20px;
    background-color: #d3a238;
    margin: 0;
  }

  .close-pics {
    display: none;
  }

  .close-pics-small {
    display: block;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
    pointer-events: auto;
  }

  img.desktop {
    display: none;
  }

  img.mobile {
    display: block;
  }

  .title.mobile {
    position: relative;
    left: auto;
    top: auto;
  }

  .map-background {
    background-image: none !important;
  }

  .map-background img {
    opacity: 1;
    position: relative;
  }

  .map-background canvas {
    display: none;
    opacity: 0 !important;
  }

  .zoom-control {
    display: none;
  }

  .close-map {
    width: 40px;
    height: 40px;
  }

  .is-IOS .gm-style button {
    display: none !important;
  }

  .content-center {
    margin: 0;
    padding: 0;
  }

  .slide-pics {
    width: 100%;
    height: auto;
    position: relative;
  }

  .slide-pics .slide-controls {
    bottom: 20px;
    max-width: inherit;
    margin: 0;
    left: 0;
  }

  .slide-pics .slide-buttons {
    display: none;
  }

  .slide-pics .slide-pagination {
    display: block;
  }

  .box-txt {
    width: 90%;
    max-width: 600px;
    margin: auto;
  }

  .color-overlay,
  .slide-overlay {
    display: none;
  }

  .wrap-content {
    padding: 30px 0;
    z-index: 1;
  }

  .text-banner {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 600px;
    margin: auto;
    top: auto;
    left: auto;
    text-align: center;
    background-color: transparent;
  }

  .text-banner h3 {
    margin: 0 auto 10px;
  }

  .text-banner p {
    height: auto;
  }

  .group-central[data-name="home-banner"] .text-banner:before {
    background-color: transparent;
  }

  .home-message .content-main {
    padding: 0;
  }

  .bg-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .home-message .content-center {
    padding: 120px 0 60px;
  }

  .business-home-pic {
    display: block;
    transform: none !important;
  }

  .business-home-pic .pic-img {
    width: 30vw;
    height: 30vw;
    margin: auto;
  }

  .wrap-view-news {
    text-align: center;
    padding: 0;
  }

  .wrap-view-news .view-all {
    margin: 20px auto 0;
  }

  .wrap-view-recruit {
    margin: 10px 0;
  }

  .home-project .bg-cover {
    display: none;
  }

  .home-project .content-main {
    padding: 0;
  }

  .content-project {
    margin: 0;
  }

  .item-pic {
    width: 100%;
    margin: 0;
  }

  .slide-modify {
    right: auto;
    left: 0;
    bottom: auto;
    width: 100%;
    top: 50%;
    margin: -15px 0 0;
  }

  .next-mod,
  .prev-mod {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
  }

  .next-mod {
    right: 0;
  }

  .prev-mod {
    left: 0;
  }

  .text-project {
    width: 100%;
    padding: 20px 5%;
    max-width: inherit;
    max-height: inherit;
    margin: 0;
  }

  .item-project .pic-img {
    padding-top: 65%;
  }

  .prev-mod {
    margin: 0 -3px;
  }

  .text-project .scrollA {
    max-height: inherit;
  }

  .view-all {
    bottom: auto;
    left: auto;
    display: block;
    display: inline-block;
    margin: 20px auto 30px;
    padding: 12px 30px 12px 18px;
    position: relative;
    font-size: 12px;
  }

  .home-news .content-main {
    text-align: center;
    padding: 30px 0 60px;
  }

  .box-news-home {
    width: 90%;
    margin: 0 auto;
    max-width: 650px;
  }

  .box-news-home:after {
    top: -15px;
    height: calc(100% + 50px);
    width: 300px;
    left: 50%;
    margin: 0 0 0 -150px;
  }

  .home-news .title-main {
    padding: 0 0 30px;
  }

  .item-video-home {
    width: 100%;
    height: auto;
    max-height: inherit;
    margin: 0 0 20px;
  }

  .item-video-home .video-youtube-full {
    height: 100%;
    max-height: 340px;
  }

  .title-video {
    position: relative;
    display: block;
    bottom: auto;
    left: auto;
  }

  .slider-news {
    width: 100%;
  }

  .item-news-home .pic-img {
    height: 100%;
    padding-top: 66%;
  }

  .txt-news-home {
    padding: 15px;
    background-color: transparent;
  }

  .txt-news-home h3 {
    font-size: 13px;
    max-height: 105px !important;
  }

  .date-thumb {
    font-size: 24px;
  }

  .date-thumb span {
    font-weight: 500;
    font-size: 9px;
  }

  .item-news-home .pic-news-home {
    height: auto;
    width: 100%;
  }

  .item-news-home:first-child,
  .item-news-home:nth-child(2),
  .item-news-home:nth-child(3) {
    width: 33.3%;
    height: auto;
    max-height: inherit;
    min-height: 300px;
  }

  .item-news-home:first-child,
  .item-news-home:first-child .date-thumb,
  .item-news-home:nth-child(3),
  .item-news-home:nth-child(3) .date-thumb {
    background-color: #0571b8;
  }

  .item-news-home:nth-child(2),
  .item-news-home:nth-child(2) .date-thumb {
    background-color: #0092e3;
  }

  .item-news-home:nth-child(2) .txt-news-home,
  .item-news-home:nth-child(3) .txt-news-home {
    line-height: inherit;
    width: 100%;
    height: auto;
  }

  .item-news-home:first-child .txt-news-home {
    position: relative;
    left: auto;
    top: auto;
  }

  .item-news-home:first-child .pic-news-home {
    height: auto;
    max-height: inherit;
    margin-top: auto;
  }

  .item-news-home:first-child .date-thumb,
  .item-news-home:nth-child(2) .date-thumb,
  .item-news-home:nth-child(3) .date-thumb {
    right: auto;
    left: 0;
    top: 0;
    margin: 0;
  }

  .home-recruitment {
    background: linear-gradient(180deg, #004e91, #0097ea);
  }

  .home-recruitment .content-center {
    padding: 60px 0 0 5vw;
  }

  .number-recruit {
    width: 60px;
    justify-content: center;
    padding: 0;
    opacity: 0.8;
  }

  .number-recruit span {
    font-size: 30px;
    color: #fff;
  }

  .content-recruitment {
    width: calc(100% - 60px);
  }

  .expired:before {
    margin: 10px 0;
    width: 50px;
    opacity: 0.5;
  }

  .home-contact .content-center {
    padding: 0;
  }

  .company-box {
    padding: 10px 0;
    width: 100%;
    text-align: center;
  }

  .company-info p {
    font-size: 15px;
  }

  .company-info span {
    width: 30px;
    height: 30px;
    margin: 0 10px 0 0;
  }

  .company-box .title-main {
    text-align: center;
  }

  .company-box .title-main h2 {
    line-height: 1.8;
  }

  .home-contact {
    background: linear-gradient(0deg, #004e91, #0097ea);
    margin: -2px;
    padding: 50px 0 20px;
    overflow: visible !important;
  }

  .home-contact .box-overlay:first-child {
    display: none;
  }

  .home-contact .box-overlay:nth-child(2) {
    width: 660px;
    height: 580px;
    bottom: calc(50% - 290px);
    left: calc(50% - 330px);
  }

  .underline:not(.blue):after {
    width: 60px;
    background-color: hsla(0, 0%, 100%, 0.5);
  }

  .blue:after {
    width: 60px;
  }

  .about-us {
    background-color: #d5f2ff;
  }

  .about-us .content-main {
    padding: 0;
    text-align: center;
  }

  .about-us .bg-cover {
    position: relative;
    top: auto;
    left: auto;
    height: 56.25vw;
  }

  .about-us .title-main {
    text-align: center;
  }

  .about-us .title-main h2 {
    color: #0571b8;
  }

  .about-us .underline:after {
    background-color: #0571b8;
  }

  .about-us .text-box {
    padding: 30px 0;
    color: #444;
    margin: 20px auto;
  }

  .pic-partner-it img {
    max-height: 9vh;
  }

  .about-value .content-main {
    padding: 0;
  }

  .about-value .content-center {
    padding: 0;
    text-align: center;
    width: 100%;
  }

  .pic-value {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .text-about-value {
    width: 90%;
    padding: 30px 0;
    text-align: left;
    max-width: 700px;
  }

  .text-about-value .scrollA {
    max-height: inherit;
  }

  .about-video .title-pic h3 {
    font-size: 16px;
  }

  .title-pic {
    padding: 15px 5px;
  }

  .slide-video {
    width: 100%;
  }

  .slide-video,
  .slide-video .library-item {
    max-width: inherit;
  }

  .project-item {
    width: calc(50% - 10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 5px;
  }

  .project-text > p {
    max-height: 73px;
  }

  .project-pic {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .project-title h3 {
    font-size: 18px;
    margin: 5px 0;
  }

  .description-map .scrollB,
  .scroll-descript {
    max-height: inherit;
  }

  .go-pro {
    font-size: 13px;
  }

  .go-pro:after {
    width: 40px;
  }

  .wrap-content,
  .wrap-small {
    width: 100%;
  }

  .pro-overall .wrap-content {
    padding: 60px 0 0;
  }

  .pro-overall .two-column {
    column-count: 1;
  }

  .project-text {
    height: 283px;
  }

  .wrap-location {
    justify-content: center;
  }

  .wrap-location:after {
    content: "";
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    margin: 30px auto 0;
    background: linear-gradient(
      45deg,
      rgba(0, 115, 191, 0),
      rgba(0, 115, 181, 0.5) 30%,
      rgba(0, 115, 191, 0.5) 70%,
      rgba(0, 115, 191, 0)
    );
  }

  .map-project {
    width: 100%;
    margin: 0 0 20px;
    height: auto;
  }

  .map-project .pic-img {
    height: auto;
  }

  .description-map {
    width: 90%;
    padding: 0;
    height: auto;
    text-align: left;
  }

  .map-project .zoom {
    right: 10px;
    top: 10px;
  }

  .description-map .scrollA {
    max-height: inherit;
  }

  .description-map h3 {
    font-size: 20px;
  }

  .link-google {
    left: auto;
    position: relative;
    display: inline-block;
    margin: 10px 0;
  }

  .description-value {
    padding: 0 5%;
  }

  .description-value h3 {
    font-size: 20px;
  }

  .slide-value {
    padding: 20px 0;
  }

  .slide-value .slide-buttons {
    top: calc(50% - 15px);
  }

  .slide-product {
    padding: 0;
  }

  .bg-product {
    max-width: 100%;
  }

  .bg-product .zoom {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .pro-library > .wrap-content {
    padding: 30px 0 0;
  }

  .slide-library-pro {
    padding: 0;
  }

  .slide-library-pro .slide-page .dot-number {
    color: #aaa;
  }

  .slide-library-pro .slide-page.active .dot-number {
    color: #0873ba;
  }

  .slide-library-pro .circle-outer {
    stroke: #aaa;
  }

  .slide-library-pro .slide-page:hover .circle-outer {
    stroke: #0873ba;
  }

  .video-project {
    padding: 0 0 50px;
  }

  .video-project .video-youtube-full {
    height: 50vh;
  }

  .video-project .control {
    bottom: -30px;
  }

  .slide-other .project-item {
    box-shadow: none;
    background-color: hsla(0, 0%, 39%, 0.05);
  }

  .slide-other .slide-page .dot-number {
    color: #aaa;
  }

  .slide-other .slide-page.active .dot-number {
    color: #0873ba;
  }

  .slide-other .circle-outer {
    stroke: #aaa;
  }

  .slide-other .slide-page:hover .circle-outer {
    stroke: #0873ba;
  }

  .box-img {
    display: none;
  }

  .content-mask {
    display: block;
    position: relative;
    width: 100%;
    height: 56.25vw;
    top: auto;
    right: auto;
  }

  .bg-develop:after,
  .bg-develop:before {
    display: none;
  }

  #sustainable-page .content-main {
    padding: 0;
    text-align: center;
  }

  #sustainable-page .content-center {
    padding: 30px 0 50px;
    text-align: center;
  }

  #sustainable-page .text-box {
    text-align: left;
    padding: 0;
    margin: 0;
    max-width: inherit;
  }

  #sustainable-page .title-main {
    text-align: left;
  }

  #sustainable-page .scrollA {
    max-height: inherit;
  }

  #sustainable-page .sus-person .content-center {
    padding: 0 0 30px;
  }

  .slide-report {
    width: 90%;
    margin: auto;
    padding: 0;
  }

  .slide-report .slide-pagination {
    padding: 0;
  }

  .group-news {
    width: 90%;
    margin: auto;
  }

  .news-market {
    padding: 50px 0 20px;
  }

  .news-pic:before {
    display: none;
  }

  .news-list {
    width: 90%;
    margin: auto;
    text-align: center;
  }

  .news-item {
    width: calc(50% - 10px);
    margin: 0 5px 10px 0;
  }

  .news-txt {
    padding: 10px 15px;
    text-align: left;
  }

  .news-txt > h3 {
    font-size: 15px;
  }

  .box-news .date-thumb {
    position: absolute;
    background-color: #0571b8;
    color: #fff;
    padding: 5px 8px;
  }

  .box-news .date-thumb span {
    color: #fff;
  }

  .text-news {
    padding: 15px;
    width: 100%;
  }

  .text-news:before {
    display: none;
  }

  .news-pic,
  .news-txt {
    height: 130px;
    max-height: inherit;
    min-height: inherit;
  }

  .load-news-list {
    min-height: inherit;
    padding: 30px 0 0;
  }

  .list-pagination {
    background-color: #ebebeb;
  }

  .print-but,
  .save-but,
  .share-but:before {
    display: none;
  }

  .share-but {
    height: auto;
    line-height: inherit;
    padding: 0 0 10px;
  }

  .share-item {
    position: relative;
    right: auto;
    bottom: auto;
    height: auto;
  }

  .share-item ul {
    text-align: center;
    padding: 0;
  }

  .share-item li {
    transform: none;
    left: auto;
    opacity: 1;
  }

  .load-content-news .load-details .load-title {
    padding: 0;
  }

  .load-content-news .load-details .load-title h3 {
    width: 100%;
    padding: 30px 0 0;
    text-align: center;
  }

  .load-content-news .load-details .load-title h3:before {
    display: none;
  }

  .load-content-news .date-thumb {
    background-color: #0571b8;
    color: #fff;
  }

  .load-content-news .date-thumb span {
    color: #fff;
  }

  .load-content-news .load-text {
    padding: 0;
  }

  .recruitment-information {
    padding: 40px 0 0;
  }

  .recruit-background {
    position: relative;
    left: auto;
    top: auto;
    height: 50vw;
    overflow: hidden;
  }

  .recruit-background .pic-img {
    background-position: bottom;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }

  .join-us {
    display: none;
  }

  .download-but a.apply-recruit,
  .loadform-recruit {
    display: none !important;
  }

  .enviroment-work .pic-img {
    display: none;
  }

  .enviroment-02 {
    text-align: left;
  }

  .enviroment-02:after {
    width: 100%;
    background: linear-gradient(180deg, #004e91, #0097ea);
  }

  .box-enviroment {
    width: auto;
    padding: 5vw !important;
    max-width: inherit !important;
  }

  .enviroment-policy {
    display: block;
  }

  .pic-envi {
    height: 66.65vw;
  }

  .box-policy,
  .pic-envi {
    width: 100%;
  }

  .enviroment-policy .pic-img {
    transform: none !important;
  }

  .box-policy {
    padding: 5vw;
  }

  .enviroment-policy:nth-child(2n) .box-policy {
    background: linear-gradient(180deg, #004e91, #0097ea);
  }

  body.auto .footer {
    padding: 0;
  }

  .table-recruitment {
    width: 90%;
    min-width: inherit;
  }

  .career {
    padding: 30px 0 0;
  }

  .list-job {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    padding: 0;
    margin: auto;
  }

  .table-recruitment td,
  .table-recruitment th {
    padding: 14px 10px;
  }

  .table-recruitment td h3 {
    font-size: 15px;
  }

  .table-recruitment th:first-child {
    width: 50px;
    padding: 0;
  }

  .table-recruitment th:nth-child(2) {
    width: auto;
    max-width: 280px;
  }

  .table-recruitment th:nth-child(3) {
    width: 120px;
  }

  .table-recruitment th:nth-child(4) {
    width: 200px;
  }

  .table-recruitment th:nth-child(5) {
    width: 120px;
  }

  .table-recruitment th:nth-child(6) {
    width: 140px;
  }

  .table-recruitment th:nth-child(7) {
    width: 120px;
  }

  .table-recruitment td a {
    padding: 0;
    font-size: 15px;
  }

  .map-box.showroom {
    width: calc(100% - 300px);
    height: 80vh;
  }

  .company-info {
    width: 90%;
    margin: auto;
  }

  .list-view {
    width: 300px;
    height: 80vh;
  }

  .list-view li {
    padding: 20px;
  }

  .list-view h3 {
    font-size: 15px;
  }

  .list-view p {
    font-size: 13px;
  }

  .form-box {
    width: 90%;
    margin: auto;
  }

  button.but-contact {
    font-size: 17px;
    padding: 20px 22px;
  }

  .contact-group:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      45deg,
      rgba(0, 115, 191, 0),
      rgba(0, 115, 181, 0.5) 30%,
      rgba(0, 115, 191, 0.5) 70%,
      rgba(0, 115, 191, 0)
    );
    bottom: 10px;
    left: 0;
  }

  .captcha {
    width: 110px;
    height: 64px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    text-align: center;
    overflow: hidden;
    background-color: #f9f9f9;
  }

  .captcha:after {
    right: 3px;
    top: 5px;
    display: inline-block;
    width: 54px;
    height: 54px;
    background: #f9f9f9
      url(https://khaihoanland.vn/wp-content/themes/flatsome/template/assets/images/captcha.png)
      no-repeat 50% / cover;
  }

  .captcha:after,
  .captcha:before {
    content: "";
    position: absolute;
    z-index: 2;
  }

  .captcha:before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid #ccc;
    pointer-events: none;
  }

  .g-recaptcha {
    width: 100%;
    height: auto;
    margin: 0;
    text-align: center;
  }

  .g-recaptcha,
  .g-recaptcha > div {
    display: inline-block;
    position: relative;
  }

  .g-recaptcha > div {
    width: 100% !important;
    height: auto !important;
    margin: -5px 0 0;
    overflow: hidden;
  }

  .player:before,
  .view-video:before {
    display: none;
  }

  .video-youtube-full {
    height: auto;
  }

  .control {
    font-size: 11px;
    padding: 5px 10px;
    width: 100%;
    left: 0;
    transform: none;
    bottom: 0;
  }

  .control button {
    width: 20px;
    height: 20px;
    transition: none;
    margin: 0 10px;
    pointer-events: auto;
  }

  .control button:hover {
    opacity: 1;
  }

  .control:after {
    transition: none;
    background-color: rgba(53, 53, 53, 0.7);
    border-radius: 0;
  }

  .youtube-video iframe {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .play-button {
    transition: none;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }

  .play-button,
  .play-button:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .group-central[data-name="home-video"].fullmode {
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #000;
    overflow: hidden !important;
    z-index: 9999 !important;
  }

  .fullmode .box-video-center {
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
  }

  .fullmode .video-youtube-full {
    height: 100%;
  }

  .fullmode .youtube-video iframe {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
    position: absolute;
  }

  .is-IOS .control,
  .is-IOS .controls {
    display: none !important;
  }

  .is-IOS .youtube-video iframe {
    z-index: auto;
  }

  .is-IOS .video-youtube-full.playing iframe {
    z-index: 99;
  }

  .scrollA {
    width: 100%;
    height: auto;
    max-height: inherit;
    left: auto;
    top: auto;
    overflow: visible !important;
    padding: 0;
    margin: 0;
  }

  .detail-popup,
  .scrollA {
    position: relative;
  }

  .details-center {
    width: 100%;
    min-height: 100vh;
  }

  .details-center h2 {
    font-size: 24px;
    padding: 0 0 10px;
  }

  .details-text {
    padding: 10px 30px 30px;
  }

  .details-text h3 {
    font-size: 16px;
  }

  .details-text table tbody:only-child tr:first-child td,
  .details-text table thead td,
  .details-text table thead th {
    font-size: 14px;
  }

  .download-but {
    padding: 20px 5%;
  }

  .download-but a {
    padding: 10px 50px 10px 20px;
    width: 170px;
  }

  .download-but a:after {
    right: 10px;
    width: 30px;
    height: 30px;
    margin-top: -10px;
  }

  .details-center .download-but span {
    font-size: 14px;
    font-weight: 400;
  }

  .details-center .download-but h3 {
    font-size: 18px;
  }

  .footer {
    position: relative;
    bottom: auto;
    left: auto;
    margin: -1px 0;
    text-align: center;
    padding: 0;
    background-color: #fff;
    z-index: 2;
  }

  .footer:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    background-color: #d5f2ff;
  }

  .left-footer {
    float: none;
    padding: 0;
    width: 100%;
    background-color: #fff;
  }

  .right-footer {
    float: none;
    padding: 0 0 15px;
    width: 100%;
    background: #fff;
  }

  .social {
    float: none;
    position: relative;
    display: block;
    right: auto;
    top: auto;
  }

  .social li {
    display: inline-block;
  }

  .social li a {
    color: #0873ba;
  }

  .social li a:after {
    display: none;
  }

  .bottom-link {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    position: relative;
    text-align: center;
    display: block;
    background-color: #1e1f24;
  }

  .bottom-link > a {
    display: inline-block;
    vertical-align: middle;
    margin: 20px 5px;
  }

  .copyright {
    float: none;
    margin: 0 0 5px;
    padding: 0;
    color: #999;
    text-align: center;
    display: block;
  }

  .copyright a {
    opacity: 0.8;
  }

  body.auto .box-footer {
    display: block;
  }

  .left-box-footer {
    margin: 0 auto 30px;
    padding: 0;
  }

  .company-box-2 {
    width: 100%;
    padding: 0;
    margin: auto;
    text-align: center;
  }

  .subcrible {
    margin: auto;
    text-align: center;
    margin: 0 auto 30px;
    width: 230px;
  }

  .subcrible:before {
    content: "";
    position: relative;
    display: block;
    width: 80px;
    height: 1px;
    background-color: hsla(0, 0%, 100%, 0.5);
    margin: 30px auto;
  }

  .subcrible .social {
    display: none;
  }

  .license {
    position: relative;
    margin: auto;
    top: auto;
    left: auto;
  }

  .input-subscribe input[type="text"] {
    height: 38px;
    line-height: 38px;
  }

  .input-subscribe button {
    padding: 8px 13px;
    font-size: 13px;
  }

  .company-box-2 .company-info li {
    margin: 0 0 4px;
  }

  .company-box-2 .company-info p {
    font-size: 15px;
  }

  body.auto .footer {
    background: linear-gradient(180deg, #004e91, #0097ea);
  }

  .gm-fullscreen-control {
    display: block;
  }

  .register-form {
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    text-align: center;
    z-index: 1000;
  }

  .register-form.show {
    height: 100vh;
    overflow-y: auto;
    padding: 50px 0 30px;
  }

  .register-form .close {
    border-radius: 0 20px;
    background-color: transparent;
  }

  .slide-page {
    transform: scale(0.9);
    margin: 0 3px;
  }

  .thumb-item {
    transition: none;
  }

  .thumb-item:hover {
    border-color: #fff;
  }

  .album-center .slide-buttons {
    display: none;
  }

  .slide-pagination {
    margin: 20px 0;
  }

  .slide-pics .slide-pagination {
    bottom: 10px;
  }

  .slide-mask {
    background: linear-gradient(180deg, #0873ba, #0873ba 60%, #9ccbe4);
  }

  .slide-mask .slide-pagination {
    text-align: center;
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 10px 0;
  }

  .slide-project .slide-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 0 0 30px;
  }

  .slide-content .slide-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0 auto 20px;
  }

  .show .nav-click {
    animation: goLeft;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
  }

  .show .logo {
    animation: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
}

@media screen and (max-width: 900px) {
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
  }

  .wrap-news-home {
    max-width: 600px;
    margin: auto;
  }

  .item-news-home .pic-img {
    max-height: inherit;
  }

  .item-news-home {
    width: 100%;
  }

  .txt-news-home {
    width: 100%;
    padding: 15px;
  }

  .item-news-home:first-child {
    width: 100%;
    margin: 0;
  }

  .item-news-home:nth-child(2) {
    width: calc(50% - 5px);
    margin: 0 3px 10px 0;
  }

  .item-news-home:nth-child(3) {
    width: calc(50% - 5px);
    margin: 0 0 10px 3px;
  }

  .item-news-home:nth-child(2) .pic-news-home {
    width: 100%;
  }

  .item-news-home:nth-child(2) .txt-news-home {
    width: 100%;
    padding: 15px;
  }

  .item-news-home:nth-child(3) .pic-news-home,
  .item-news-home:nth-child(3) .txt-news-home {
    width: 100%;
  }

  .item-news-home:nth-child(4) {
    width: calc(100% - 10px);
  }

  .box-enviroment {
    padding: 40px;
  }
}

@media screen and (max-width: 840px) {
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
  }

  .news-list-padding {
    padding: 0;
  }

  .wrap-news {
    height: auto;
    max-width: 700px;
  }

  .box-news {
    width: calc(50% - 5px);
    margin: 1px;
    float: none;
    display: inline-block;
  }

  .wrap-news .box-news:first-child {
    height: auto;
    width: 100%;
    margin: 0 0 3px;
  }

  .wrap-news .box-news:nth-child(2),
  .wrap-news .box-news:nth-child(3),
  .wrap-news .box-news:nth-child(4),
  .wrap-news .box-news:nth-child(5) {
    height: auto;
  }

  .wrap-news .box-news:nth-child(3),
  .wrap-news .box-news:nth-child(4) {
    width: calc(50% - 5px);
    height: auto;
  }

  .wrap-news .box-news:nth-child(4),
  .wrap-news .box-news:nth-child(5) {
    margin: 0;
  }

  .wrap-news .box-news:nth-child(3) .pic-img,
  .wrap-news .box-news:nth-child(4) .pic-img {
    width: 100%;
    float: none;
  }

  .wrap-news .box-news:nth-child(2) .pic-img,
  .wrap-news .box-news:nth-child(3) .pic-img,
  .wrap-news .box-news:nth-child(4) .pic-img,
  .wrap-news .box-news:nth-child(5) .pic-img {
    height: 220px;
  }

  .wrap-news .box-news:nth-child(3) .text-news,
  .wrap-news .box-news:nth-child(4) .text-news {
    width: 100%;
    float: none;
    height: auto;
  }

  .wrap-news .box-news:nth-child(4) {
    text-align: left;
  }

  .wrap-news .box-news:nth-child(2),
  .wrap-news .box-news:nth-child(4) {
    margin: 3px 3px 3px 0;
  }

  .wrap-news .box-news:nth-child(3),
  .wrap-news .box-news:nth-child(5) {
    margin: 3px 0;
  }

  .text-news:after,
  .text-news:before {
    display: none;
  }

  .text-news {
    min-height: 90px;
  }

  .text-news h3 {
    display: block;
    font-size: 14px;
    height: auto;
  }

  .text-news h3,
  .wrap-news .box-news:nth-child(2) .text-news h3,
  .wrap-news .box-news:nth-child(3) .text-news h3,
  .wrap-news .box-news:nth-child(4) .text-news h3,
  .wrap-news .box-news:nth-child(5) .text-news h3 {
    max-height: inherit;
  }

  .home-recruitment .content-main {
    text-align: center;
  }

  .item-recruitment {
    width: 100%;
  }

  .number-recruit {
    background-color: #0092e3;
  }

  .content-recruitment {
    max-width: inherit;
  }
}

@media screen and (max-width: 780px) {
  #chien-luoc-phat-trien .content-center,
  #dao-tao-huan-luyen .content-center,
  #van-hoa-doanh-nghiep .content-center,
  #hoat-dong-cong-dong .content-center {
    width: 100%;
  }
  #chien-luoc-phat-trien.sus-develop .text-box,
  #dao-tao-huan-luyen.sus-develop .text-box,
  #van-hoa-doanh-nghiep.sus-develop .text-box,
  #hoat-dong-cong-dong.sus-community .text-box {
    padding: 5vw;
    max-width: 100vw;
  }

  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
  }

  .text-banner h3,
  .title-big h2,
  .title-main h2 {
    font-size: 24px;
  }

  .title-page h1 {
    font-size: 5vw;
  }

  .title-page {
    display: block;
    top: calc(56.25vw - 90px);
  }

  .title-page-project {
    top: calc(56.25vw - 120px);
  }

  .list-box {
    width: calc(50% - 13px);
    margin: 5px;
  }

  .r-left {
    padding: 0 5px 0 0;
  }

  .r-date {
    font-size: 12px;
    padding: 5px;
  }

  .r-link {
    padding: 0 10px;
  }

  .r-pdf {
    width: 35px;
  }

  .r-text {
    padding: 0 60px 0 0;
  }

  .load-details .wrap-content {
    width: 90%;
  }

  .load-title h3 {
    font-size: 18px;
    padding: 0 10px 20px 70px;
  }

  .load-text {
    padding: 5%;
    box-shadow: none;
  }

  .news-list {
    padding: 20px 10px 0;
  }

  .list-job {
    padding: 30px 0;
  }

  .table-recruitment td {
    background-color: #eee;
  }

  .table-recruitment th {
    display: none;
  }

  .table-recruitment tr:last-child {
    margin: 0;
  }

  .table-recruitment td:nth-child(2),
  .table-recruitment td:nth-child(4) {
    text-align: right;
  }

  .table-recruitment td {
    border-bottom: 1px solid #0571b8;
    border-bottom-style: dotted;
    background-color: #fff;
    display: block;
    text-align: right;
    padding: 20px 10px 20px 130px;
    position: relative;
  }

  .table-recruitment td:before {
    content: attr(data-label);
    float: left;
    font-size: 12px;
    color: #888;
    font-weight: 700;
    position: absolute;
    left: 10px;
    top: 50%;
    margin: -8px 0 0;
  }

  .table-recruitment td:first-child {
    background-color: #0571b8 !important;
    color: #fff !important;
    font-size: 18px;
    padding: 10px;
  }

  .table-recruitment td:first-child:before {
    color: #fff;
  }

  .status.hot {
    display: inline-block;
  }

  .slide-other {
    padding: 0 10px;
  }

  .map-box.showroom {
    width: 100%;
    height: 60vh;
  }

  .list-view {
    width: 90%;
    height: auto;
    position: relative;
    margin: 10px auto;
  }

  .list-view h3 {
    font-size: 15px;
  }

  .list-view li:last-child {
    border-bottom: 0;
  }

  .list-view:after,
  .list-view:before {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
  }

  .business-home {
    display: block;
  }

  .business-home-pic .pic-img {
    width: 50vw;
    height: 50vw;
  }

  .business-home .text-box,
  .business-home:nth-child(2) .text-box {
    text-align: center;
    padding: 30px 0;
  }

  .business-home:first-child .title-main,
  .business-home:nth-child(2) .title-main {
    text-align: center;
  }

  .number-recruit {
    width: 40px;
  }

  .number-recruit span {
    font-size: 24px;
  }

  .content-recruitment {
    width: calc(100% - 40px);
    padding: 0 0 0 15px;
  }

  .slide-partner .slide-buttons {
    left: calc(50% - 140px);
    width: 280px;
  }

  .news-item {
    width: 100%;
  }
}

@media screen and (max-width: 540px) {
  #doi-ngu-nhan-su .content-center .pic-value {
    padding: 0;
    max-width: 100%;
    height: 30vh;
  }
  .share-but {
    padding: 10px 15px;
  }
  .load-details iframe {
    height: 290px !important;
    width: 500px !important;
    max-width: 100%;
  }
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
  }

  p {
    font-size: 14px;
  }

  .title-page h1 {
    font-size: 5.5vw;
  }

  .text-banner h3,
  .title-big h2,
  .title-main h2 {
    font-size: 22px;
  }

  .title-main h3 {
    font-size: 19px;
  }

  .title-main h2:after {
    width: 60px;
  }

  .logo,
  body.auto .logo {
    width: 140px;
    left: calc(50% - 70px);
  }

  .nav li {
    padding: 6px 20px;
  }

  .nav li a {
    font-size: 4vw;
  }

  .captcha {
    width: 108px;
  }

  .company-info p {
    font-size: 15px;
  }

  .contact-text p {
    margin: 30px 0 10px;
  }

  .bg-home {
    min-height: 210px;
  }
  .slide-mask {
    height: auto;
  }
  .home-news .pic-news-home {
    width: 100%;
    height: 44%;
    position: relative;
    display: block;
    overflow: hidden;
  }
  .home-news .item-news-home:nth-child(2) .pic-news-home {
    width: 100%;
    height: 165px;
  }
  .home-news .item-news-home:nth-child(3) .pic-news-home {
    width: 100%;
    height: 165px;
  }
  #gia-tri-cot-loi .content-center .pic-value {
    width: 100%;
    height: 230px;
    overflow: hidden;
    padding: 15px !important;
  }
  #co-cau-to-chuc {
    height: 300px !important;
  }
  #doi-ngu-lanh-dao {
    height: fit-content;
  }
  .home-message .text-box:before {
    top: -40px;
    font-size: 80px;
  }

  .home-message .content-center {
    padding: 80px 0 40px;
  }

  .home-recruitment .text-box:before {
    top: -40px;
    font-size: 80px;
  }

  .company-info span {
    margin: 0 10px 0 0;
    width: 25px;
    height: 25px;
  }

  .company-info p {
    max-width: calc(100% - 50px);
  }

  .about-video .title-pic h3 {
    font-size: 14px;
  }

  .project-item {
    width: 100%;
    margin: 5px 0;
  }

  .project-text,
  .project-title,
  .text-ins-project {
    height: auto;
  }

  .slide-other {
    padding: 0;
  }

  .sub-nav-pro li {
    min-width: 200px;
  }

  .description-value h3 {
    font-size: 18px;
  }

  .list-box {
    margin: 0 0 6px;
  }

  .list-box,
  .relation-box {
    width: 100%;
  }

  .wrap-news {
    width: 90%;
  }

  .box-news {
    margin: 0 0 6px;
  }

  .box-news,
  .wrap-news .box-news:nth-child(3),
  .wrap-news .box-news:nth-child(4) {
    width: 100%;
  }

  .wrap-news .box-news:first-child .pic-img,
  .wrap-news .box-news:nth-child(2) .pic-img,
  .wrap-news .box-news:nth-child(3) .pic-img,
  .wrap-news .box-news:nth-child(4) .pic-img,
  .wrap-news .box-news:nth-child(5) .pic-img {
    height: 200px;
  }

  .text-news {
    min-height: inherit;
  }

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

  .news-list {
    padding: 10px;
  }

  .news-pic {
    width: 40%;
  }

  .news-txt {
    width: 60%;
  }

  .load-news-list:before {
    height: 60vh;
  }

  .print-box {
    text-align: center;
  }

  .news-relative .title-main {
    text-align: center;
    padding: 40px 5% 10px;
  }

  .slide-pagi {
    width: 130px;
  }

  .load-news-list,
  .load-news-section .wrap-content {
    padding: 0;
  }

  .list-pagination {
    padding: 20px 0;
  }

  .details-center {
    padding: 100px 0 0;
  }

  .details-center h2 {
    font-size: 20px;
  }

  .details-center > h3 {
    font-size: 16px;
  }

  .details-outer {
    padding: 20px;
  }

  .details-text {
    padding: 15px;
  }

  .details-text > h3 {
    font-size: 16px;
    margin: 20px 0 10px;
  }

  .details-text p {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .load-title h3 {
    font-size: 16px;
    padding: 15px;
  }

  .load-details .date-thumb {
    position: relative;
    display: inline-block;
    margin: 0 0 10px;
  }

  .load-details .wrap-content {
    padding: 10px 0 30px;
  }

  .load-content-news .load-details .load-title h3 {
    padding: 10px 0 0;
  }

  .load-title {
    margin: 0;
  }

  .career {
    padding: 0;
  }

  .box-enviroment {
    padding: 20px;
  }

  .box-enviroment:after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .table-recruitment {
    width: 100%;
  }

  .table-recruitment td a,
  table td {
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
  }

  .table-recruitment td {
    font-size: 13px;
  }
}

@media screen and (max-width: 440px) {
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    height: 70px;
  }

  .slide-page span:not(.dot-number) {
    transform: scale(0.8);
  }

  .thumb-item {
    height: 45px;
  }

  .slide-page {
    margin: 0 2px;
  }

  .gm-style .infobox {
    width: 260px;
  }

  .loadicon {
    width: 40vw;
    height: 17vw;
    margin: -8.5vw 0 0 -20vw;
  }

  .nav li:before,
  .nav li:after {
    font-size: 10px;
    margin: 0 0 0 2px;
  }

  .hotline {
    left: 10px;
  }

  .date-thumb {
    font-size: 20px;
  }

  .box-news .date-thumb {
    padding: 4px 5px;
  }

  .title-page:not(.title-page-project) {
    top: calc(56.25vw - 80px);
  }

  .title-page-project {
    top: calc(56.25vw - 100px);
  }

  .title-page h1 {
    font-size: 25px;
  }

  .text-banner h3,
  .title-big h2,
  .title-main h2 {
    font-size: 20px;
  }

  .title-main h3 {
    font-size: 14px;
  }

  .details-center h2 {
    font-size: 18px;
    margin-bottom: 0;
  }

  .title-project {
    top: calc(56.25vw - 80px);
  }

  .search-form {
    left: 20px;
  }

  .search-but:before {
    left: -9px;
    top: calc(50% - 9px);
  }

  .language {
    left: 5px;
  }

  .view-product {
    font-size: 12px;
  }

  .player,
  .view-video {
    transform: scale(0.8);
  }

  .social {
    margin: 0;
  }

  .bottom-link {
    padding: 20px;
  }

  .bottom-link > a {
    margin: 10px;
  }

  .left-box-footer {
    width: 100%;
  }

  .home-recruitment .content-center {
    padding: 40px 0 0 5vw;
  }

  .company-box,
  .home-contact .content-center {
    padding: 0;
  }

  .circle-nav .slide-next,
  .circle-nav .slide-prev {
    transform: scale(0.9);
  }

  .news-txt > h3 {
    font-size: 14px;
    max-height: 90px;
  }

  .join-us .input-text {
    width: 100%;
    margin: 0 0 6px;
  }

  .join-us .input-text:nth-child(odd) {
    margin: 0 0 6px;
  }

  .join-us .input-but {
    width: 100%;
  }

  .form-box .input-area,
  .form-box .input-text {
    width: 100%;
    margin: 0 0 6px;
  }

  .contact-group .title-main:first-child {
    margin: 0;
  }
}

@media screen and (max-width: 380px) {
  .ma-ck-m {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 10;
    color: #0873ba;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    height: 60px;
  }

  .logo,
  body.auto .logo {
    width: 120px;
    left: calc(50% - 62px);
  }

  .title-page h1 {
    font-size: 21px;
  }
}

@media print {
  .banner-inner,
  .footer-inner,
  .go-top,
  .header,
  .load-content:before,
  .outer-nav,
  .print,
  .register-form,
  .scroll-slide,
  .slide-buttons,
  .slide-pagination,
  .title-page,
  body:after,
  body:before {
    display: none !important;
  }

  .container,
  .load-content,
  .news-detail,
  .section-first {
    opacity: 1;
    margin: auto;
    visibility: visible;
  }
}

.full::-webkit-scrollbar,
.sub-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.content-table::-webkit-scrollbar,
.news-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.navigation::-webkit-scrollbar,
.select-box::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.info-facilities::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.content-table,
.full,
.info-facilities,
.navigation,
.news-list,
.sub-nav,
.sub-news {
  scrollbar-color: inherit;
  scrollbar-width: none;
}

@keyframes Start {
  0% {
    visibility: hidden;
  }

  to {
    visibility: visible;
  }
}

@keyframes Preloader {
  to {
    transform: rotate(1turn);
  }
}

@keyframes Play {
  0% {
    background-position: 0;
  }

  to {
    background-position: -360px;
  }
}

@keyframes BorderBox {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 100%;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes Callicon {
  0% {
    transform: scale(1) rotate(0);
  }

  40% {
    transform: scale(1.1) rotate(40deg);
  }

  45% {
    transform: scale(1.2) rotate(20deg);
  }

  50% {
    transform: scale(1.3) rotate(40deg);
  }

  55% {
    transform: scale(1.2) rotate(20deg);
  }

  60% {
    transform: scale(1.1) rotate(40deg);
  }

  to {
    transform: scale(1) rotate(0);
  }
}

@keyframes Leftpage {
  0% {
    left: -100%;
  }

  to {
    left: 100%;
  }
}

@keyframes Rotate {
  0% {
    transform: rotate(0) translateZ(0);
  }

  to {
    transform: rotate(1turn) translateZ(0);
  }
}

@keyframes RotateNew {
  0% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }

  33% {
    transform: rotate(90deg) scale(0.8);
    opacity: 0.4;
  }

  60% {
    transform: rotate(135deg) scale(1.1);
    opacity: 1;
  }

  80% {
    transform: rotate(35deg) scale(0.9);
    opacity: 0.4;
  }

  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

@keyframes RotateNew1 {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  33% {
    transform: scale(0.8);
    opacity: 0.9;
  }

  80% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes AniPointer {
  0% {
    box-shadow: 0 0 0 rgba(53, 53, 53, 0);
    transform: scale(0);
  }

  50% {
    box-shadow: 0 0 50px rgba(53, 53, 53, 0.5);
    transform: scale(1);
  }

  to {
    box-shadow: 0 0 60px rgba(53, 53, 53, 0);
    transform: scale(2);
  }
}

@keyframes Border {
  0% {
    border-color: #ffdd80;
  }

  20% {
    border-color: #00303f;
  }

  60% {
    border-color: #ffdd80;
  }
}

@keyframes Round {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(120deg);
  }

  to {
    transform: rotate(240deg);
  }
}

@keyframes Show100 {
  0% {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }

  to {
    opacity: 0.7;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideOutUp {
  0% {
    transform: translateZ(0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translateZ(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes Ani {
  0% {
    box-shadow: 0 0 0 rgba(179, 128, 44, 0);
    transform: scale(0);
  }

  70% {
    box-shadow: 0 0 50px #b3802c;
    transform: scale(1);
  }

  to {
    box-shadow: 0 0 60px rgba(179, 128, 44, 0);
    transform: scale(2);
  }
}

@keyframes toHeight {
  0% {
    height: 100vh;
  }

  to {
    height: 60vh;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100px, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg) scale(0.5);
    opacity: 0;
  }

  to {
    transform: perspective(400px) rotateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0) scale(1);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotateX(90deg) scale(0.5);
    opacity: 0;
  }
}

@keyframes scaleSmall {
  0% {
    opacity: 0;
    transform: rotate(15deg) scale(0.8);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes scaleSmallY {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes scaleLarge {
  0% {
    opacity: 0;
    transform: scale(2);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes goHeight {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes goWidth {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes aniHeight {
  0% {
    transform: scaleX(1);
  }

  to {
    transform: scaleY(0);
  }
}

@keyframes aniWidth {
  0% {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@keyframes moveLeft {
  to {
    transform: translateX(-100%);
  }
}

@keyframes moveRight {
  to {
    transform: translateX(100%);
  }
}

@keyframes toRight {
  0% {
    opacity: 0;
    right: -100px;
  }

  to {
    opacity: 1;
    right: 0;
  }
}

@keyframes toLeft {
  0% {
    opacity: 0;
    left: -100px;
  }

  to {
    opacity: 1;
    left: 0;
  }
}

@keyframes goRight {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes goRight2 {
  0% {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes goLeft {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes goLeft2 {
  0% {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: translateY(-12px);
  }

  15% {
    opacity: 0;
    transform: translateY(8px);
  }

  30% {
    opacity: 1;
    transform: translateY(-12px);
  }

  50% {
    opacity: 0;
    transform: translateY(8px);
  }

  60% {
    opacity: 1;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(-12px);
  }
}

@keyframes DrawStroke {
  0% {
    stroke-dashoffset: 660;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    opacity: 1;
  }
}

@keyframes StrokeLine {
  0% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -200;
  }
}

@keyframes StrokeLine1 {
  0% {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 200;
  }
}

@keyframes Bg-ZoomIn {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  to {
    transform: scale(1);
  }
}

@keyframes Bg-ZoomOut {
  0% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  to {
    transform: scale(1.2);
  }
}

@keyframes WheelArrow {
  0% {
    transform: rotate(-45deg) translate(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    transform: rotate(-45deg) translate(-5px, 5px);
    opacity: 0;
  }
}

@keyframes MaskPlay {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}

.slideout-Up {
  animation-name: slideOutUp;
}

.slidein-Up {
  animation-name: slideInUp;
}

.fade-In {
  animation-name: fadeIn;
}

.fade-Out {
  animation-name: fadeOut;
}

.fadein {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}

.fadein,
.fadeout {
  animation-duration: 1s;
}

.fadeout {
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}

.fadeindown {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.fadeinup {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.goleft {
  animation-name: goLeft;
  animation-fill-mode: forwards;
}

.goleft,
.goright {
  animation-duration: 0.8s;
}

.goright {
  animation-name: goRight;
  animation-fill-mode: forwards;
}

.scalelarge {
  animation: scaleLarge;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.moveleft {
  animation-name: moveLeft;
  animation-fill-mode: forwards;
}

.moveleft,
.moveright {
  pointer-events: none;
  animation-duration: 0.8s;
}

.moveright {
  animation-name: moveRight;
  animation-fill-mode: forwards;
}

.contact-form,
.container,
.footer,
.go-top,
.header,
.register-form {
  animation: Start 1s steps(1) 0s 1 normal both;
}

.language,
.logo,
.nav-click,
.right-header,
.search-but {
  opacity: 0;
}

.show .right-header,
.show .search-but {
  animation: goLeft;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
}

.show .language {
  animation: goLeft;
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}