.__banner {
  position: relative;
  height: 748px;
}

.__banner__global {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.__banner__left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.__banner__map {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.__banner__map__world {
  position: relative;
  width: 100%;
  padding-top: 46%; /* tỷ lệ chuẩn */
  background: url(../svg/map_world.svg) no-repeat top left / contain;
  background-size: contain;
  z-index: 1;
  opacity: 0.3;
}

/* Points */
.__banner__point {
  position: absolute;
  width: 21px;
  height: 21px;
  background: url(../svg/point.svg) no-repeat center/cover;
  z-index: 2;
}

.point_1 {
  top: 22%;
  left: 10%;
}
.point_2 {
  top: 17%;
  left: 16%;
}
.point_3 {
  top: 22%;
  left: 28%;
}
.point_4 {
  top: 51%;
  left: 63%;
}
.point_5 {
  top: 38%;
  left: 69%;
}

.__banner__person {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30%;
  background: url(../img/banner/good_gird.png) center/ cover no-repeat;
  z-index: 3;
}

.__banner__content {
  position: absolute;
  top: 27%;
  left: 0;
  z-index: 3;
  display: flex;
  gap: 48px;
  flex-direction: column;
  max-width: 592px;
}

.__banner__info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-primary);
}

.__banner__info__title {
  font-size: var(--text-3xl);
  line-height: 68px;
  letter-spacing: 0%;
}
.__banner__info__title > .banner__color > span {
  width: 100%;
  display: block;
}
.__banner__info__des {
  color: #5a6475;
  max-width: 528px;
}

/* banner tuyển dụng */
.__banner__recruit__header {
  background: url(../img/banner/img__banner__recruit.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}


@media (max-width: 991px) {
  .__banner {
    padding: 48px 0 32px 0;
    height: 770px;
    background: url("../svg/map_world_mobile.svg") no-repeat center / contain;
    padding-bottom: 40px;
  }

  .__banner__global {
    flex-direction: column;
    align-items: center;
  }

  .__banner__left {
    max-width: 343px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .__banner__content {
    width: 100%;
    gap: 24px;
    text-align: center;
  }

  .__banner__info {
    gap: var(--gap-secondary);
  }

  .__banner__info__title {
    font-size: var(--text-slg);
    line-height: var(--leading-xlg);
  }

  .__banner--btn {
    text-align: center;
  }

  .__banner__map {
    display: none;
  }
  .__banner__person {
    position: relative;
    width: 60%;
    height: 360px;
    background-size: contain;
    background-position: center;
    margin-top: 360px;
  }
}