/* ==========================================================================
   FUGA — Ảnh có điểm sản phẩm + điểm "+" (dùng chung với Ảnh dọc kéo ngang)
   ========================================================================== */
.fg-hsbanner { position: relative; overflow: hidden; }
.fg-hsbanner picture { display: block; }
.fg-hsbanner__img { width: 100%; height: auto; }

.fg-hotspot {
	position: absolute; z-index: 3; left: var(--x, 50%); top: var(--y, 50%);
	display: grid; place-items: center; width: 34px; height: 34px;
	border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%;
	background: rgba(18, 18, 18, .62); color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transform: translate(-50%, -50%);
	transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s, color .2s;
}
.fg-hotspot .fg-icon { width: 12px; height: 12px; transition: transform .2s; }
.fg-hotspot:hover, .fg-hotspot:focus-visible {
	border-color: #fff; background: #fff; color: #111;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
	transform: translate(-50%, -50%) scale(1.05);
}
.fg-hotspot:hover .fg-icon, .fg-hotspot:focus-visible .fg-icon { transform: rotate(90deg); }
.fg-hotspot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 768px) {
	.fg-hotspot { left: var(--mx, 50%); top: var(--my, 50%); width: 30px; height: 30px; }
	.fg-hotspot .fg-icon { width: 11px; height: 11px; }
}