html body .load_home_page svg {
    width: 80vw;
}

.arrow-svg {
    width: 20px;
    height: 20px;
}

.vertical-arrow svg path {
    fill: none;
    stroke: #B89F6B;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main-map {
    width: 100%;
    height: auto;
    display: block;
}

/* optional: improve rendering */
.main-map {
    image-rendering: auto;
}

.fade-edge::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(to top, #F1EFE7, transparent 180px),
        linear-gradient(to bottom, #F1EFE7, transparent 180px),
        linear-gradient(to left, #F1EFE7, transparent 200px),
        linear-gradient(to right, #F1EFE7, transparent 120px);
}
 .fade-edge::after {
    pointer-events: none !important;
}

.shine-wrap {
  position: relative;
  display: inline-block;
}

@media (max-width: 768px) {

    .main-map {
        width: 100%;
        height: auto;
        display: block;

        /* giữ nét */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;

        transform: scale(1.001);
        backface-visibility: hidden;
    }

    .fade-edge::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;

        background:
            linear-gradient(to top, #F1EFE7, transparent 25px),   /* dưới */
            linear-gradient(to bottom, #F1EFE7, transparent 5px), /* trên */
            linear-gradient(to left, #F1EFE7, transparent 5px),   /* phải */
            linear-gradient(to right, #F1EFE7, transparent 5px);  /* trái */
    }
}


/* css logo xuat hien */
/* ===== FULL SCREEN ===== */
.intro-luxury {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);

  animation: introFadeOut 24s linear forwards;
}

/* vignette */
.intro-luxury::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 25%, rgba(0,0,0,0.9) 100%);
}

/* ===== LOGO ===== */
.logo-wrap2 {
  position: relative;

  width: 20vw; /* start nhỏ */

  opacity: 0;

  animation: logoGrow 24s linear forwards;
}

.logo-wrap2 img {
  width: 100%;
  display: block;
}

/* ===== SHINE ===== */
.shine-once {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    110deg,
    transparent 47%,
    rgba(255,255,255,0.4) 50%,
    transparent 53%
  );

  mix-blend-mode: screen;
  filter: blur(16px);

  opacity: 0;

  animation: shineOnce 24s linear forwards;
}

/* ===== SCALE LỚN HƠN ===== */
@keyframes logoGrow {

  /* 0–5s: fade in */
  0% {
    opacity: 0;
    width: 20vw;
  }

  20% {
    opacity: 1;
    width: 30vw;
  }

  /* 5–14s: tăng mạnh (QUAN TRỌNG) */
  60% {
    width: 70vw;
  }

  /* 14–20s: đạt max */
  85% {
    width: 85vw;
  }

  /* giữ */
  95% {
    width: 85vw;
    opacity: 1;
  }

  /* fade */
  100% {
    opacity: 0;
    width: 85vw;
  }
}

/* ===== SHINE CHẬM ===== */
@keyframes shineOnce {

  0% {
    opacity: 0;
    transform: translateX(-150%);
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  80% {
    transform: translateX(150%);
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* ===== FADE OUT ===== */
@keyframes introFadeOut {
  0% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}


/* thêm dòng này */
.project-overview.dim-strong .back-img img {
  filter: brightness(0.75) blur(1px);
}

/* logo */
@media (max-width: 768px){

  /* bật logo dark */
  #logo img.header-logo-dark{
    opacity: 1 !important;
  }

  /* tắt logo thường */
  #logo img.header-logo{
    opacity: 0 !important;
  }

}

/**/
@media (max-width: 768px){
    .home-4 .logo-wrap{
        top: 58.5%  !important;   /* chỉnh lại cho đúng mắt */
        left: 56% !important;
    }
}
/**/
@media (min-width: 769px){
    .fs-17{
        /* font-size: 0.785rem; */
    }
}