/* ============================================================================
   hotspot-callout.css — thẻ callout đè lên tour (js/hotspot-callout.js)

   Bố cục theo ảnh mẫu chủ dự án đưa: chấm neo tại ĐÚNG điểm hotspot, một đường
   dẫn đi lên, thẻ nhãn tối có tiêu đề + dòng CTA vàng, và ảnh tròn tuỳ chọn.

   ⚠ GỐC TOẠ ĐỘ LÀ CHẤM NEO, không phải góc thẻ. JS chỉ đặt translate3d(x,y) =
     đúng toạ độ getScreenPosition trả về; mọi thứ khác dựng NGƯỢC LÊN từ đó bằng
     position:absolute. Nếu lấy góc thẻ làm gốc thì mỗi lần đổi cỡ chữ/nhãn là
     điểm neo trôi khỏi hotspot.
   ========================================================================== */

#st-callouts { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }

.st-co {
  --st-co-bg: rgba(15, 23, 42, .82);
  --st-co-cta: #ffd54a;
  --st-co-line: rgba(255, 255, 255, .85);
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;          /* chỉ là một ĐIỂM; con dựng quanh nó */
  will-change: transform;
}

/* Chấm neo — tâm trùng đúng toạ độ hotspot. */
.st-co-dot {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 1px 4px rgba(0, 0, 0, .45);
}

/* Đường dẫn từ chấm neo lên thẻ. */
.st-co-line {
  position: absolute;
  left: 0; bottom: 0;
  width: 1.5px; height: 46px;
  margin-left: -.75px;
  background: var(--st-co-line);
  transform: translateY(-7px);
}

/* Thẻ nhãn: neo ĐÁY của thẻ vào đầu trên đường dẫn. */
.st-co-card {
  position: absolute;
  left: 0; bottom: 52px;
  transform: translateX(-50%);
  display: grid; gap: 2px;
  /* ⚠ `width: max-content` LÀ BẮT BUỘC. Thẻ là position:absolute trong `.st-co` rộng
     0px, nên shrink-to-fit co nó về bề rộng TỐI THIỂU — đo thật: 63px, tiêu đề bị cắt
     thành "HỒ…" và "Xem VR360" xuống 2 dòng. Không phải lỗi max-width. */
  width: max-content;
  max-width: 230px;
  padding: 8px 13px;
  border: 0; border-radius: 8px;
  background: var(--st-co-bg);
  color: #fff;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
  transition: transform .14s ease, box-shadow .14s ease;
}
.st-co-card:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.st-co-card:active { transform: translateX(-50%) translateY(0); }

.st-co-t {
  font-size: 14px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-co-cta {
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  color: var(--st-co-cta);
}

/* Ảnh tròn tuỳ chọn — nằm TRÊN thẻ, như mẫu "Biển Phước Hải". */
.st-co-ph {
  position: absolute;
  left: 0; bottom: 116px;
  transform: translateX(-50%);
  display: block;
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  cursor: pointer;
  background: #e2e8f0;
}
.st-co-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Biến thể quay sang TRÁI: thẻ lệch sang trái điểm neo thay vì canh giữa.
   Dùng khi hotspot nằm sát mép phải màn hình. */
.st-co-l .st-co-card { left: -10px; transform: translateX(-100%); }
.st-co-l .st-co-card:hover { transform: translateX(-100%) translateY(-2px); }
.st-co-l .st-co-card:active { transform: translateX(-100%) translateY(0); }
.st-co-l .st-co-ph { left: -10px; transform: translateX(-100%); }

/* Điện thoại: thu nhỏ để không che mất cảnh. */
@media (max-width: 640px) {
  .st-co-card { max-width: 168px; padding: 6px 10px; }
  .st-co-t { font-size: 12.5px; }
  .st-co-cta { font-size: 11px; }
  .st-co-ph { width: 48px; height: 48px; bottom: 104px; }
  .st-co-line { height: 38px; }
  .st-co-card { bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-co-card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KIỂU 2 — "nhan": nhãn VÀNG bo tròn, chữ trong viên đen, ghim đỏ, vành nền.
   Theo ảnh mẫu thứ hai chủ dự án đưa (HOLIDAY INN / INTERCONTINENTAL).
   Gốc toạ độ vẫn là ĐIỂM HOTSPOT như kiểu 1 — mọi thứ dựng ngược lên từ đó.
   ══════════════════════════════════════════════════════════════════════════ */
.st-co-nhan { --st-co-bg: #f5b921; --st-co-ink: #14181d; }

/* Vành nền ellipse trên mặt đất, ngay tại điểm hotspot. */
.st-co-nhan .st-co-base {
  position: absolute; left: 0; top: 0;
  width: 118px; height: 26px;
  margin: -13px 0 0 -59px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), inset 0 0 12px rgba(255, 255, 255, .3);
}

/* Ghim đỏ — đáy ghim chạm tâm vành nền. */
.st-co-nhan .st-co-pin {
  position: absolute; left: 0; bottom: 0;
  width: 26px; height: 32px;
  margin-left: -13px;
  transform: translateY(-4px);
}
.st-co-nhan .st-co-pin svg { width: 100%; height: 100%; display: block; }
.st-co-nhan .st-co-pin path { fill: #ef3b2d; }
.st-co-nhan .st-co-pin circle { fill: #ffd54a; }

/* Nhãn vàng + viên chữ đen bên trong. Đáy nhãn nằm trên đầu ghim. */
.st-co-nhan .st-co-badge {
  position: absolute;
  left: 0; bottom: 44px;
  transform: translateX(-50%);
  width: max-content;                 /* ⚠ cha rộng 0px → thiếu dòng này là co về bề rộng tối thiểu */
  max-width: 260px;
  padding: 7px 9px;
  border: 0; border-radius: 13px;
  background: var(--st-co-bg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 6px 16px rgba(0, 0, 0, .3);
  cursor: pointer;
  font-family: inherit;
  transition: transform .14s ease;
}
.st-co-nhan .st-co-badge:hover { transform: translateX(-50%) translateY(-2px); }
.st-co-nhan .st-co-badge:active { transform: translateX(-50%) translateY(1px); }

.st-co-nhan .st-co-t {
  display: block;
  padding: 5px 14px;
  border-radius: 8px;
  background: var(--st-co-ink);
  color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.st-co-nhan.st-co-l .st-co-badge { left: -10px; transform: translateX(-100%); }
.st-co-nhan.st-co-l .st-co-badge:hover { transform: translateX(-100%) translateY(-2px); }
.st-co-nhan.st-co-l .st-co-badge:active { transform: translateX(-100%) translateY(1px); }

@media (max-width: 640px) {
  .st-co-nhan .st-co-base { width: 84px; height: 19px; margin: -9.5px 0 0 -42px; border-width: 2.5px; }
  .st-co-nhan .st-co-pin { width: 20px; height: 25px; margin-left: -10px; }
  .st-co-nhan .st-co-badge { bottom: 34px; padding: 5px 7px; border-radius: 11px; max-width: 190px; }
  .st-co-nhan .st-co-t { font-size: 12.5px; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) { .st-co-nhan .st-co-badge { transition: none; } }