:root {
  --border-exh-download: #F9F6F0;
  --grey:#E5E5E5;
}

.exp_s_cont{
    column-gap: .75rem;
}
.exp_s_cont > .col{
    max-width: 256px;
    row-gap:.25rem;
    column-gap:.75rem;
}
.exp_s_img{
    width:48px;
    height:48px;
    padding:4px;
}

.point-map {
  transform: scale(1.5);
  cursor: pointer;
  position: absolute;
  width: 2.5% !important;
  aspect-ratio: 1 / 1;
  -webkit-aspect-ratio: 1 / 1; /* สำหรับ Safari */
  object-fit: cover;
  -webkit-object-fit: cover;
  border-radius: 100%;
  outline: 1px solid var(--grey);
  animation: glow 3s infinite normal;
  -webkit-animation: glow 3s infinite normal;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  box-sizing: border-box; /* เพื่อให้การคำนวณขนาดถูกต้อง */
  border: none;
}
.point-map-city {
  transform: scale(1);
  cursor: pointer;
  position: absolute;
  width: 9% !important;
  aspect-ratio: 1 / 1;
  -webkit-aspect-ratio: 1 / 1; /* สำหรับ Safari */
  object-fit: cover;
  -webkit-object-fit: cover;
  border-radius: 100%;
  outline: 4px solid var(--grey);
  animation: glow 3s infinite normal;
  -webkit-animation: glow 3s infinite normal;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  box-sizing: border-box; /* เพื่อให้การคำนวณขนาดถูกต้อง */
  border: none;
}

.point-map.active{
  outline: 2px solid var(--pink);
  animation: glowactive 3s infinite normal;
}
.point-map-city.active{
  outline: 2px solid var(--pink);
  animation: glowactive 3s infinite normal;
}
#expomap{
    height:400px;
}
#slideMap{
    height: auto;
}
@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(98, 91, 113, 0.5);  /* Start with small glow */
  }
  50% {
    box-shadow: 0 0 0px 4px rgba(98, 91, 113, 0.5); /* Bigger, brighter glow */
  }
  100% {
    box-shadow: 0 0 0px 4px transparent; /* Bigger, brighter glow */
  }
}
@keyframes glowactive {
  0% {
    box-shadow: 0 0 10px rgba(193, 78, 82, 0.5);  /* Start with small glow */
  }
  50% {
    box-shadow: 0 0 0px 4px rgba(193, 78, 82, 0.5); /* Bigger, brighter glow */
  }
  100% {
    box-shadow: 0 0 0px 4px transparent; /* Bigger, brighter glow */
  }
}

#accordionExpoMap .expo-acc-item > .expo-acc-btn{
    font-size: 18px;
    font-weight: 500;
    padding:.75rem;
    background-color:transparent;
    border:none;
}
#accordionExpoMap .expo-acc-item.active{
    border-radius:.5rem;
    background-color: var(--white);
    box-shadow: 0px 4px 16px 0px #00000014;

}
.expo-acc-body{
    padding:.75rem;
}
#secGdBook{
    background-image: linear-gradient(#bfd730, #bfd730),linear-gradient(to bottom, var(--bg-body) 0%, transparent 50%), url(../images/bg-press.webp) ;
    background-position: bottom, center, center;
    background-size: 100% 62px, cover, auto;
    background-repeat: no-repeat, no-repeat, repeat;
    position: relative;
}
#secGdBook .pt-sec-40{
    padding-top: 2.5rem;
}
.gdbook-decor{
    margin-top: 1.5rem;
    padding: 0 1rem;
}
.gdbook-reed{
    width: 130px;
    height: auto;
}
.gdbook-leaf{
    width: 200px;
    height: auto;
}

@media (min-width: 576px) {

}

@media (min-width: 768px) {
    .gdbook-decor{
        padding: 0 1.5rem;
    }
    .gdbook-reed{
        width: 200px;
    }
    .gdbook-leaf{
        width: 320px;
    }
    .exp_s_img{
        width:64px;
        height:64px;
        padding:8px;
    }
    .exp_s_cont{
        column-gap: 1.5rem;
    }
    @keyframes glow {
    0% {
      box-shadow: 0 0 10px rgba(98, 91, 113, 0.5);  /* Start with small glow */
    }
    50% {
      box-shadow: 0 0 0px 10px rgba(98, 91, 113, 0.5); /* Bigger, brighter glow */
    }
    100% {
      box-shadow: 0 0 0px 10px transparent; /* Bigger, brighter glow */
    }
  }
  @keyframes glowactive {
    0% {
      box-shadow: 0 0 10px rgba(193, 78, 82, 0.5);  /* Start with small glow */
    }
    50% {
      box-shadow: 0 0 0px 10px rgba(193, 78, 82, 0.5); /* Bigger, brighter glow */
    }
    100% {
      box-shadow: 0 0 0px 10px transparent; /* Bigger, brighter glow */
    }
  }

}


@media (min-width: 992px) {
    .gdbook-decor{
        margin-top: -50px;
        padding: 0 4%;
    }
    .gdbook-reed{
        width: 260px;
    }
    .gdbook-leaf{
        width: 406px;
        margin-right: 6%;
    }
    #expomap{
        height:640px;
    }
    /* col-lg-5 stretches to col-lg-7's height; its content must not add height */
    #secExposite .col-lg-5{
        display: flex;
        flex-direction: column;
    }
    #secExposite #slideMap{
        flex: 1 1 0;
        height: 0;
        min-height: 0;
    }
    #slideMap > .container{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #secExposite #accordionExpoMap{
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }
    @keyframes glow {
        0% {
        box-shadow: 0 0 10px rgba(98, 91, 113, 0.5);  /* Start with small glow */
        }
        50% {
        box-shadow: 0 0 0px 14px rgba(98, 91, 113, 0.5); /* Bigger, brighter glow */
        }
        100% {
        box-shadow: 0 0 0px 14px transparent; /* Bigger, brighter glow */
        }
    }
    @keyframes glowactive {
        0% {
        box-shadow: 0 0 10px rgba(193, 78, 82, 0.5);  /* Start with small glow */
        }
        50% {
        box-shadow: 0 0 0px 14px rgba(193, 78, 82, 0.5); /* Bigger, brighter glow */
        }
        100% {
        box-shadow: 0 0 0px 14px transparent; /* Bigger, brighter glow */
        }
    }
    

}

@media (min-width: 1200px) {
    @keyframes glow {
    0% {
      box-shadow: 0 0 10px rgba(98, 91, 113, 0.5);  /* Start with small glow */
    }
    50% {
      box-shadow: 0 0 0px 16px rgba(98, 91, 113, 0.5); /* Bigger, brighter glow */
    }
    100% {
      box-shadow: 0 0 0px 16px transparent; /* Bigger, brighter glow */
    }
  }
  @keyframes glowactive {
    0% {
      box-shadow: 0 0 10px rgba(225, 107, 144, 0.5);  /* Start with small glow */
    }
    50% {
      box-shadow: 0 0 0px 16px rgba(225, 107, 144, 0.5); /* Bigger, brighter glow */
    }
    100% {
      box-shadow: 0 0 0px 16px transparent; /* Bigger, brighter glow */
    }
  }
}