.box_poi {
    width: 360px; /* mặc định desktop */
}
/* Mobile (màn hình nhỏ hơn hoặc bằng 768px) */
@media (max-width: 768px) {
    .box_poi {
        width: 250px !important;
    }
}


.callout_description {
text-shadow: 2px 2px 10px #04040457;
}

.poi_embed_text {
text-shadow: 2px 2px 10px #04040457;
}
.custom .callout_line {
    display: grid !important;
        justify-items: center !important;
}
.custom .callout_content {
    display: grid !important;
    justify-items: center !important;
}
.callout_text_main {
    font-weight: bold;
}
.callout_title_bg {
  border: 2px solid rgb(208,186,117); 
  border-radius: 8px; /* Làm tròn góc */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ nhẹ */
}
.callout_title_text {
    margin-top: 6px !important;
    margin-right: 4px;
    margin-bottom: 4px !important;
    margin-left: 4px;
    font-size: 20px !important;
}
.right_callout .callout_content {
    border-width: 0px !important;
}
.right_callout .callout_title {
    margin-top: -10px; !important;
    margin-left: -10px;
}
.left_callout .callout_content {
    border-width: 0px !important;
    padding-right: 4px;
}
.left_callout .callout_title {
    margin-top: -10px; !important;
    margin-left: 13px !important;
}
.fancybox-content {
    background: #ffffff00 !important; 
}
.fancybox-bg {
    background: #ffffff00 !important; 
}
.green-text {
  font-family: "Lora", Times, serif !important;
  font-size: 48px;
  font-weight: bold;

  background: linear-gradient(to right, white, #00aaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Stroke mảnh chỉ tạo viền nhỏ */
  -webkit-text-stroke: 1px #005577;

  /* Shadow tạo hiệu ứng viền ngoài mở rộng */
  text-shadow:
    1px 1px 0 #005577,
   -1px 1px 0 #005577,
    1px -1px 0 #005577,
   -1px -1px 0 #005577;
}

.poi_embed_selection {
    border-style: hidden !important;; 
}

/* Code cho gold-circle */
.gold-circle {
  display: inline-block;
}

.gold-circle img {
  border-radius: 50%;     /* bo góc thành hình tròn */
}

/* vòng tròn vàng bao quanh */
.gold-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;             /* lớn hơn ảnh một chút */
  height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(240,180,41,0.8);
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 25px rgba(240,180,41,0.6);
  animation: pulse-ring 2s ease-in-out infinite;
  pointer-events: none;    /* không che chuột */
}

@keyframes pulse-ring {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; }
  50%  { transform: translate(-50%, -50%) scale(1.2); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; }
}
/* het code gold-circle */