@charset "UTF-8";
/* Regular */
@font-face {
  font-family: "VlBlackMango";
  src: url("../fonts/VLBLACKMANGO-REGULAR.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "SFUFutura";
  src: url("../fonts/SFUFuturaRegular.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "VLCANDLESCRIPT";
  src: url("../fonts/VLCANDLESCRIPTPRO.OTF") format("opentype");
  font-weight: 400;
  font-style: normal;
}
/* Medium */
/* Bold (≈ 700) */
@font-face {
  font-family: "SFUFutura";
  src: url("../fonts/SFUFuturaBold.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/* Extrabold (≈ 800) */
@font-face {
  font-family: "SFUFutura";
  src: url("../fonts/SFUFuturaExtraBold.TTF") format("truetype");
  font-weight: 800;
  font-style: normal;
}
/* Heavy (≈ 900) */
@font-face {
  font-family: "SFUFutura";
  src: url("../fonts/SFUFuturaHeavy.TTF") format("truetype");
  font-weight: 900;
  font-style: normal;
}
html {
  font-size: 2.7777777778vw;
}
@media (min-width: 1024px) {
  html {
    font-size: 0.5208333333vw;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 62.5%;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-padding-top: 8rem;
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 0;
}

body {
  font-family: "SFUFutura", Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  color: #2D2D2D;
}

img {
  width: 100%;
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
}

a,
button {
  text-decoration: none;
  color: #0066C5;
}
a:hover,
button:hover {
  opacity: 0.7;
  text-decoration: none;
}

input:focus,
select:focus,
button:focus {
  outline: none;
}

ul {
  list-style: none;
}

b, strong {
  font-weight: 700 !important;
}

/** font family **/
.font-blackmango {
  font-family: "VlBlackMango", Arial, Helvetica, sans-serif;
}

.font-candle {
  font-family: "VLCANDLESCRIPT", Arial, Helvetica, sans-serif;
}

.font-sfufutura {
  font-family: "SFUFutura", Arial, Helvetica, sans-serif;
}

/** text color **/
.text-default {
  color: #2D2D2D;
}

.text-primary {
  color: #006286;
}

.text-secondary {
  color: #004563;
}

.text-third {
  color: #016D9C;
}

.text-fourth {
  color: #FFE894;
}

.text-five {
  color: #EDBC5F;
}

.text-six {
  color: #CB983D;
}

.text-seven {
  color: #006997;
}

.bg-default {
  background-color: #2D2D2D;
}

.bg-primary {
  background-color: #006286;
}

.bg-secondary {
  background-color: #004563;
}

.bg-third {
  background-color: #016D9C;
}

.bg-fourth {
  background-color: #FFE894;
}

.bg-five {
  background-color: #EDBC5F;
}

.bg-six {
  background-color: #CB983D;
}

.bg-seven {
  background-color: #006997;
}

@media (min-width: 1024px) {
  .text-lg-default {
    color: #2D2D2D !important;
  }
  .text-lg-primary {
    color: #006286 !important;
  }
  .text-lg-secondary {
    color: #004563 !important;
  }
  .text-lg-third {
    color: #016D9C !important;
  }
  .text-lg-fourth {
    color: #FFE894 !important;
  }
  .text-lg-five {
    color: #EDBC5F !important;
  }
  .text-lg-six {
    color: #CB983D !important;
  }
  .bg-lg-default {
    background-color: #2D2D2D !important;
  }
  .bg-lg-primary {
    background-color: #006286 !important;
  }
  .bg-lg-secondary {
    background-color: #004563 !important;
  }
  .bg-lg-third {
    background-color: #016D9C !important;
  }
  .bg-lg-fourth {
    background-color: #FFE894 !important;
  }
  .bg-lg-five {
    background-color: #EDBC5F !important;
  }
  .bg-lg-six {
    background-color: #CB983D !important;
  }
}
.text-gradient {
  display: inline-block;
  background: linear-gradient(90deg, #AF6E47 0%, #C58159 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-1 {
  display: inline-block;
  background: linear-gradient(90deg, #AF6E47 0%, #E0966B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-2 {
  display: inline-block;
  background: linear-gradient(180deg, #016D9C 29.59%, #002636 62.04%), #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-gradient-3 {
  display: block;
  background: linear-gradient(180deg, #FFE894 0%, #CB983D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-gradient-4 {
  display: block;
  background: linear-gradient(180deg, #F4F0E8 21.77%, #9DC4D2 67.94%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.t-shadow {
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.15);
}

.bg-linear-1 {
  background: #000000;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 80%);
}

.slick-dots {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.slick-dots li {
  font-size: 0;
  width: 0.8rem;
  height: 0.8rem;
  background: #CB983D;
  border-radius: 50%;
  margin: 0 0.6rem;
  opacity: 0.45;
}
.slick-dots li.slick-active {
  opacity: 1;
}
@media (min-width: 1024px) {
  .slick-dots li {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0.8rem;
  }
}

.section_giatri .slick-slide, .section_giatri .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true] {
  transform: scale(0.7);
  transition: transform 0.5s ease;
}
.section_giatri .slick-center, .section_giatri .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] {
  transform: scale(1);
}
.section_giatri .slick-current.slick-active {
  transform: scale(1);
}
.section_giatri .slick-slide:not(.slick-center) img {
  filter: saturate(0.4);
}
.section_giatri .slide-content::before {
  filter: blur(7px);
  bottom: -5.5rem;
  transition: all 0.5s ease;
}
.section_giatri .scrollTarget .slide-content:hover .ttl {
  opacity: 0;
}
.section_giatri .scrollTarget .slide-content:hover .number {
  top: calc(50% - 15rem);
  right: 50%;
  transform: translate(50%, -50%);
}
.section_giatri .scrollTarget .slide-content:hover .desc {
  opacity: 1;
}
.section_giatri .slide-content {
  transition: all 0.5s ease;
}
.section_giatri .slide-content:hover img {
  filter: saturate(1);
}
.section_giatri .slide-content img {
  transition: all 0.5s ease;
}
.section_giatri .slick-list {
  padding-bottom: 8rem !important;
}

.cloud-track {
  background-image: url("../images/homepage/cloud.webp");
  background-size: 80% auto;
  background-repeat: repeat-x;
  background-position: left center;
}

.cloud-animate {
  animation: cloudScroll 100s linear infinite;
}

.section_tongquan .text-box-wrapper .label:before {
  content: "";
  height: 100%;
  position: absolute;
  display: block;
  width: 0.4rem;
  background: #EDBC5F;
  left: 0;
  top: 0;
}

.animate-pulse-1 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: animatePulse 8s 2s ease-in-out infinite;
}
.animate-pulse-2 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: animatePulse 5s 2s ease-in-out infinite;
}

.map-pin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: animatePulse 5s 2s ease-in-out infinite;
  animation-delay: calc(var(--index) * 2s);
}

.ico-float {
  animation: icoFloat 3s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.ico-float:hover {
  animation-play-state: paused;
  transform: translateY(-1.5rem) scale(1.12);
  filter: brightness(1.15) drop-shadow(0 0.8rem 1.6rem rgba(0, 0, 0, 0.35));
}

.section_vitri .svg-3 path, .section_vitri .svg-4 path {
  stroke: #CB983D;
}

.box-phankhu .img_phankhu {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.box-phankhu .img_phankhu.active {
  opacity: 1;
}

.map-point {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.map-hover {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.animate-scale-hover:hover .map-point {
  transform: scale(1.1) translateY(-3rem);
}
.animate-scale-hover:hover .map-hover {
  transform: scale(1.02);
  filter: drop-shadow(0 0 0.2rem #fff) drop-shadow(0 0 0.6rem #fff) drop-shadow(0 0 1.2rem #ffd27a) drop-shadow(0 0 2rem #ffd27a);
}

.modal-sanpham .slick-dots {
  margin-bottom: -2rem;
}
@media (min-width: 1024px) {
  .modal-sanpham .slick-dots {
    margin-bottom: -2rem;
  }
}

.section_tienich {
  position: relative;
}
.section_tienich::before {
  content: "";
  position: absolute;
  top: -20rem;
  left: 0;
  width: 100%;
  height: 45rem;
  background-image: url("../images/homepage/before_tienich.webp");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
}
.section_tienich::after {
  content: "";
  position: absolute;
  bottom: -44rem;
  left: 0;
  width: 100%;
  height: 45rem;
  background-image: url("../images/homepage/after_tienich.webp");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
}

.section_dailo {
  position: relative;
}
.section_dailo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 39.2rem;
  background-image: url("../images/homepage/before-dailo.webp");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

.tienich-hoatiet path {
  fill-opacity: 0;
  stroke-width: 1.2;
}
.tienich-hoatiet .svg-1 path, .tienich-hoatiet .svg-2 path {
  stroke: #FFE894;
}

.slide-tienich {
  width: calc(100% + 60rem);
  margin: 0 -30rem;
  padding-bottom: 15rem;
}
.slide-tienich-item {
  position: relative;
  max-width: 54rem;
  width: 100%;
  height: auto;
  margin: 0 2rem;
}
.slide-tienich-item .box-item {
  width: 100%;
  height: 100%;
  position: relative;
}
.slide-tienich-item .box-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 21rem;
  background: #000000;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 70%);
  z-index: 1;
}
.slide-tienich-item.slide-item-prev, .slide-tienich-item.slide-item-next {
  transform: scale(0.85);
}
.slide-tienich-controls {
  position: relative;
}
.slide-tienich-controls::before {
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../images/ico-line.webp);
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 5rem;
  z-index: 2;
}
.slide-tienich .box-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.slide-tienich .box-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 95%;
  border-radius: 50%;
  z-index: 2;
  border: 1px solid #fff;
}

.listTienIch-item {
  box-shadow: 0 0 0.3rem 0.05rem rgba(0, 0, 0, 0.3);
}
@media (min-width: 1024px) {
  .listTienIch-item {
    box-shadow: 0 0 0.8rem 0.05rem rgba(0, 0, 0, 0.3);
  }
}
.listTienIch .slick-list {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.listTienIch .slick-slide,
.listTienIch .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true] {
  scale: 0.9;
  transition: scale 0.5s ease-in-out;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.listTienIch .slick-slide::after,
.listTienIch .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.listTienIch .slick-slide .slide-lable,
.listTienIch .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true] .slide-lable {
  display: none;
  transition: font-size 0.5s ease-in-out;
}
.listTienIch .slick-center,
.listTienIch .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] {
  scale: 1.05;
}
.listTienIch .slick-center .slide-lable,
.listTienIch .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] .slide-lable {
  display: block;
  font-size: 1.5rem;
}
@media (min-width: 1024px) {
  .listTienIch .slick-center .slide-lable,
  .listTienIch .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] .slide-lable {
    font-size: 2.5rem;
  }
}
.listTienIch .slick-center::after,
.listTienIch .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true]::after {
  content: inherit;
}
.listTienIch .slick-arrow {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  z-index: 99;
  background-size: cover;
}
@media (min-width: 1024px) {
  .listTienIch .slick-arrow {
    width: 5.2rem;
    height: 5.2rem;
  }
}
.listTienIch .slick-arrow.slick-next {
  right: calc(50% - 5rem);
  background-image: url("../images/btn-next.webp");
}
@media (min-width: 1024px) {
  .listTienIch .slick-arrow.slick-next {
    right: 38rem;
  }
}
.listTienIch .slick-arrow.slick-prev {
  left: calc(50% - 5rem);
  background-image: url("../images/btn-prev.webp");
}
@media (min-width: 1024px) {
  .listTienIch .slick-arrow.slick-prev {
    left: 38rem;
  }
}

.section_kientruc {
  position: relative;
}
.section_kientruc::before {
  content: "";
  position: absolute;
  top: -26rem;
  left: 0;
  width: 100%;
  height: 26.3rem;
  background-image: url("../images/homepage/before-kientruc.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

.char {
  display: inline-block;
  overflow: unset;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding: 0 2rem;
  margin: 0 -2rem;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  z-index: 9999;
}
.modal.active {
  display: flex;
}
.modal.fade .modal-overlay, .modal.fade .modal-close {
  opacity: 1;
}
.modal.fade .modal-content {
  opacity: 1;
  transform: translateY(0);
}
.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  background-color: black;
  transition: 0.3s ease-in-out;
}
@media (min-width: 1024px) {
  .modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.modal-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #000;
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transition: 0.3s ease-in-out;
  z-index: 9;
}
@media (min-width: 1024px) {
  .modal-close {
    top: 4rem;
    right: 4rem;
    font-size: 2.2rem;
  }
}
.modal-close:hover svg {
  transform: rotate(180deg);
}
.modal-close svg {
  transition: 0.3s ease-in-out;
}
.modal-close svg path {
  stroke: #000000;
  transition: 0.3s ease-in-out;
}
.modal-content {
  overflow: auto;
  opacity: 0;
  transform: translateY(-10rem);
  transition: 0.3s ease-in-out;
}

.arrowSlidePhankhu .btn-arrows:hover svg path {
  stroke: #ffffff;
}

#modal-sanpham .slick-dots {
  bottom: -2rem;
}
@media (min-width: 1024px) {
  #modal-sanpham .slick-dots {
    margin-bottom: -3rem;
  }
}
#modal-sanpham.modal.fade .modal-content {
  transform: translateX(0);
}
#modal-sanpham .modal-content {
  transform: translateX(-100%);
  transition: all 0.5s ease-in-out;
  position: relative;
}

.box_modal-txt p {
  margin-bottom: 1rem;
}

.mask {
  -webkit-mask: url(../images/urban-sprite.webp);
  mask: url(../images/urban-sprite.webp);
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  animation: mask-play 2.4s steps(29) forwards;
}

.mask-2 {
  -webkit-mask: url(../images/nature-sprite.webp);
  mask: url(../images/nature-sprite.webp);
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  animation: mask-play2 2.4s steps(22) forwards;
}

@keyframes mask-play2 {
  from {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes mask-play {
  0% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    opacity: 1;
  }
  90% {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    opacity: 1;
  }
  100% {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    display: none;
    opacity: 0;
  }
}
@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes svg_bunder {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes float-play {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}
@keyframes anchorFloat {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-15px);
    opacity: 1;
  }
}
@keyframes zoomPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
@media (max-width: 1023px) {
  @keyframes wave {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -420px;
    }
  }
  @keyframes swell {
    0%, 100% {
      transform: translate3d(0, -5px, 0);
    }
    50% {
      transform: translate3d(0, 2px, 0);
    }
  }
}
@media (min-width: 1024px) {
  @keyframes wave {
    0% {
      margin-left: 0;
    }
    100% {
      margin-left: -1920px;
    }
  }
  @keyframes swell {
    0%, 100% {
      transform: translate3d(0, -25px, 0);
    }
    50% {
      transform: translate3d(0, 5px, 0);
    }
  }
}
@keyframes animate-pulse {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.5);
  }
  45% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes animate-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2rem);
  }
}
@media (min-width: 1024px) {
  @keyframes cloud_animate {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes cloud_animate2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
}
@media (max-width: 1023px) {
  @keyframes cloud_animate {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.5rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes cloud_animate2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(0.5rem);
    }
    100% {
      transform: translateY(0);
    }
  }
}
@keyframes button-sweep {
  0% {
    right: -180px;
  }
  60% {
    right: 180px;
  }
  100% {
    right: 180px;
  }
}
@keyframes sweep {
  0% {
    background-position: 0 0;
  }
  30% {
    background-position: 150% 150%;
  }
  99% {
    background-position: 150% 150%;
  }
  100% {
    background-position: 150% 150%;
  }
}
@keyframes animate-scale-in {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@keyframes cloudScroll {
  0% {
    background-position-x: 0;
  }
  to {
    background-position-x: 600%;
  }
}
@keyframes animatePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes icoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1rem);
  }
}/*# sourceMappingURL=global.css.map */