@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family="UTM Aptima":wght@100;200;300;400;700&display=swap');


body,
html {
	font-family: "UTM Aptima" !important;
	user-select: none;
}

/* Animation base */
.mp-animation,
.note-tooltip .title,
.note-tooltip::after,
.hotspot-tooltip.homeview::after,
.hotspot-tooltip .title,
.hotspot-tooltip::after {
	opacity: 0;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.mp-animated {
	opacity: 1;
}

/* Keyframes: effects */
@-webkit-keyframes mp-pulse {
	from {
		opacity: 0;
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes mp-pulse {
	from {
		opacity: 0;
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.mp-pulse {
	-webkit-animation-name: mp-pulse;
	animation-name: mp-pulse;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

@-webkit-keyframes mp-fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mp-fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.mp-fadeIn {
	-webkit-animation-name: mp-fadeIn;
	animation-name: mp-fadeIn;
}

@-webkit-keyframes mp-fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes mp-fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.mp-fadeInUp {
	-webkit-animation-name: mp-fadeInUp;
	animation-name: mp-fadeInUp;
}

@-webkit-keyframes mp-fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes mp-fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.mp-fadeInDown {
	-webkit-animation-name: mp-fadeInDown;
	animation-name: mp-fadeInDown;
}

@-webkit-keyframes mp-fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes mp-fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.mp-fadeInLeft {
	-webkit-animation-name: mp-fadeInLeft;
	animation-name: mp-fadeInLeft;
}

@-webkit-keyframes mp-fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes mp-fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.mp-fadeInRight {
	-webkit-animation-name: mp-fadeInRight;
	animation-name: mp-fadeInRight;
}

@-webkit-keyframes mp-fadeOutRight {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

@keyframes mp-fadeOutRight {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

.mp-fadeOutRight {
	-webkit-animation-name: mp-fadeOutRight;
	animation-name: mp-fadeOutRight;
}

@-webkit-keyframes mp-fadeZoom {
	from {
		opacity: 0;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes mp-fadeZoom {
	from {
		opacity: 0;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.mp-fadeZoom {
	-webkit-animation-name: mp-fadeZoom;
	animation-name: mp-fadeZoom;
}

@-webkit-keyframes mp-fadeZoomBig {
	from {
		opacity: 0;
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes mp-fadeZoomBig {
	from {
		opacity: 0;
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.mp-fadeZoomBig {
	-webkit-animation-name: mp-fadeZoomBig;
	animation-name: mp-fadeZoomBig;
}

@-webkit-keyframes mp-bounceBig {

	from,
	20%,
	53%,
	to {
		opacity: 1;
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
		transform: translate3d(0, -30px, 0) scaleY(1.1);
	}

	70% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
		transform: translate3d(0, -15px, 0) scaleY(1.05);
	}

	80% {
		-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translate3d(0, 0, 0) scaleY(.95);
		transform: translate3d(0, 0, 0) scaleY(.95);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
		transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
}

@keyframes mp-bounceBig {

	from,
	20%,
	53%,
	to {
		opacity: 1;
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
		transform: translate3d(0, -30px, 0) scaleY(1.1);
	}

	70% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
		transform: translate3d(0, -15px, 0) scaleY(1.05);
	}

	80% {
		-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translate3d(0, 0, 0) scaleY(.95);
		transform: translate3d(0, 0, 0) scaleY(.95);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
		transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
}

.mp-bounceBig {
	-webkit-animation-name: mp-bounceBig;
	animation-name: mp-bounceBig;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
}

@-webkit-keyframes mp-bounce {

	from,
	20%,
	53%,
	80%,
	to {
		opacity: 1;
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	40%,
	43% {
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	40%,
	43%,
	70% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
	}

	70% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}

@keyframes mp-bounce {

	from,
	20%,
	53%,
	80%,
	to {
		opacity: 1;
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	40%,
	43% {
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}

	40%,
	43%,
	70% {
		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
	}

	70% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}
}

.mp-bounce {
	-webkit-animation-name: mp-bounce;
	animation-name: mp-bounce;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
}

@-webkit-keyframes mp-flash {

	from,
	50%,
	to {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

@keyframes mp-flash {

	from,
	50%,
	to {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

.mp-flash {
	-webkit-animation-name: mp-flash;
	animation-name: mp-flash;
}

@-webkit-keyframes mp-clipY {
	0% {
		opacity: 1;
		-webkit-transform: scale(0, 1);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
	}
}

@keyframes mp-clipY {
	0% {
		opacity: 1;
		transform: scale(0, 1);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

.mp-clipY {
	-webkit-animation-name: mp-clipY;
	animation-name: mp-clipY;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

@-webkit-keyframes mp-clipX {
	0% {
		opacity: 1;
		-webkit-transform: scale(1, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
	}
}

@keyframes mp-clipX {
	0% {
		opacity: 1;
		transform: scale(1, 0);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

.mp-clipX {
	-webkit-animation-name: mp-clipX;
	animation-name: mp-clipX;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

@-webkit-keyframes mp-clipXY {
	0% {
		opacity: 1;
		-webkit-transform: scale(0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
	}
}

@keyframes mp-clipXY {
	0% {
		opacity: 1;
		transform: scale(0, 0);
	}

	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

.mp-clipYY {
	-webkit-animation-name: mp-clipXY;
	animation-name: mp-clipXY;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

@-webkit-keyframes mp-backInUp {
	0% {
		-webkit-transform: translateY(1200px) scale(.7);
		opacity: .5;
	}

	80% {
		-webkit-transform: translateY(0) scale(.7);
		opacity: .7;
	}

	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}

@keyframes mp-backInUp {
	0% {
		transform: translateY(1200px) scale(.7);
		opacity: .5;
	}

	80% {
		transform: translateY(0) scale(.7);
		opacity: .7;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.mp-backInUp {
	-webkit-animation: mp-backInUp;
	animation: mp-backInUp;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

@-webkit-keyframes mp-zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.5, .5, .5);
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 1;
	}
}

@keyframes mp-zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.5, .5, .5);
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 1;
	}
}

.mp-zoomIn {
	-webkit-animation-name: mp-zoomIn;
	animation-name: mp-zoomIn;
}

@-webkit-keyframes mp-zoomInDown {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

@keyframes mp-zoomInDown {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

.mp-zoomInDown {
	-webkit-animation-name: mp-zoomInDown;
	animation-name: mp-zoomInDown;
}

@-webkit-keyframes mp-zoomInUp {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

@keyframes mp-zoomInUp {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

.mp-zoomInUp {
	-webkit-animation-name: mp-zoomInUp;
	animation-name: mp-zoomInUp;
}

@-webkit-keyframes mp-zoomInLeft {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

@keyframes mp-zoomInLeft {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

.mp-zoomInLeft {
	-webkit-animation-name: mp-zoomInLeft;
	animation-name: mp-zoomInLeft;
}

@-webkit-keyframes mp-zoomInRight {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

@keyframes mp-zoomInRight {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1);
	}

	to {
		opacity: 1;
	}
}

.mp-zoomInRight {
	-webkit-animation-name: mp-zoomInRight;
	animation-name: mp-zoomInRight;
}

@-webkit-keyframes mp-typing {
	0% {
		width: 0%;
	}

	30% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes mp-typing {
	0% {
		width: 0%;
	}

	30% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

.mp-typing {
	-webkit-animation: mp-typing;
	animation: mp-typing;
}

@-webkit-keyframes mp-pulsate {
	0% {
		-webkit-transform: scale(.62);
		transform: scale(.62);
		opacity: 1;
		box-shadow: inset 0 0 25px 3px rgba(207, 172, 114, .75), 0 0 25px 10px rgba(207, 172, 114, .75);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
		box-shadow: none;
	}
}

@keyframes mp-pulsate {
	0% {
		-webkit-transform: scale(.62);
		transform: scale(.62);
		opacity: 1;
		box-shadow: inset 0 0 25px 3px rgba(207, 172, 114, .75), 0 0 25px 10px rgba(207, 172, 114, .75);
	}

	100% {
		-webkit-transform: scale(1, 1);
		transform: scale(1);
		opacity: 0;
		box-shadow: none;
	}
}

.mp-pulsate {
	-webkit-animation: mp-pulsate;
	animation: mp-pulsate;
}

@-webkit-keyframes hotspot-pulse {
	0% {
		-webkit-transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
	}

	70% {
		-webkit-transform: scale(1.1);
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
	}

	100% {
		-webkit-transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

@keyframes hotspot-pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
	}

	70% {
		transform: scale(1.1);
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

/* hiệu ứng vị trí */



/* Tooltip base */
.hotspot-tooltip {
	position: absolute;
}

.hotspot-tooltip::after {
	position: absolute;
	content: '';
	border-left: 2px dotted #fff;
	overflow: hidden;
	top: 31px;
	z-index: 0;
	transform-origin: bottom center;
	left: 57%;
	transform: translateX(-50%);
	-webkit-animation-name: mp-clipX;
	animation-name: mp-clipX;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
}

.title {
	position: relative;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #0050a0;
	text-align: center;
	font-family: '"UTM Aptima"';
	padding: 8px 20px;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0, 80, 160, 0.08);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	-webkit-animation-name: mp-fadeZoomBig;
	animation-name: mp-fadeZoomBig;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;

}


/* Homeview */
.hotspot-tooltip.homeview .title {
	color: #fff;
	text-shadow: 0 0 1px white;
	background: rgba(6, 42, 68, .46);
	text-shadow: 0 0 1px rgba(255, 255, 255, .6);
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}

.hotspot-tooltip.homeview::after {
	position: absolute;
	content: '';
	border-left: 2px dotted #fff;
	width: 102px;
	height: 51px;
	overflow: hidden;
	top: 31px;
	z-index: 0;
	transform-origin: bottom left;
	left: calc(50% - 1px);
	-webkit-animation-name: mp-clipX;
	animation-name: mp-clipX;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.hotspot-tooltip.homeview.arrow .title {
	top: -14px;
}

.hotspot-tooltip.homeview.arrow::after {
	height: 51px;
	top: 14px;
}

/* Note tooltip */
.note-tooltip {
	position: absolute;
	position: relative;
}



/* Height helpers for connector line */
#h25 .hotspot-tooltip::after,
#h25 .note-tooltip::after {
	height: 28px;
}

#h50 .hotspot-tooltip::after,
#h50 .note-tooltip::after {
	height: 52px;
}

#h75 .hotspot-tooltip::after,
#h75 .note-tooltip::after {
	height: 78px;
}

#h125 .hotspot-tooltip::after,
#h125 .note-tooltip::after {
	height: 128px;
}

#h150 .hotspot-tooltip::after,
#h150 .note-tooltip::after {
	height: 152px;
}

#h175 .hotspot-tooltip::after,
#h175 .note-tooltip::after {
	height: 178px;
}

#h200 .hotspot-tooltip::after,
#h200 .note-tooltip::after {
	height: 202px;
}

#h225 .hotspot-tooltip::after,
#h225 .note-tooltip::after {
	height: 228px;
}

#h250 .hotspot-tooltip::after,
#h250 .note-tooltip::after {
	height: 252px;
}

#h275 .hotspot-tooltip::after,
#h275 .note-tooltip::after {
	height: 278px;
}

#h300 .hotspot-tooltip::after,
#h300 .note-tooltip::after {
	height: 302px;
}

#h350 .hotspot-tooltip::after,
#h350 .note-tooltip::after {
	height: 352px;
}

#h400 .hotspot-tooltip::after {
	height: 402px;
}

/* Tooltip base NK*/
.hotspot-center {
	display: flex;
	justify-items: center;
	position: absolute;
	align-content: center;
	align-items: center;
	flex-direction: column;
}

.hotspot-center::after {
	position: absolute;
	content: '';
	border-left: 2px solid #fff;
	overflow: hidden;
	top: 31px;
	z-index: 1;
	transform-origin: bottom center;
	left: 50%;
	transform: translateX(-50%);
	-webkit-animation-name: mp-clipX;
	animation-name: mp-clipX;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
	pointer-events: none !important;
	cursor: none !important;
}


.hotspot-center-tienich {
	position: absolute;
}

.hotspot-center-tienich::after {
	position: absolute;
	content: '';
	border-left: 3px solid #fff;
	overflow: hidden;
	top: 31px;
	z-index: 1;
	transform-origin: bottom center;
	left: 50%;
	transform: translateX(-50%);
	-webkit-animation-name: mp-clipX;
	animation-name: mp-clipX;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
}

.thanhdev {
    position: relative;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;
    --sweep-color: #00ffee;
    --sweep-width: 28px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #FFFFFF;
    text-align: center;
    padding: 3px 20px 7px;
    border-radius: 100px 5px;
    box-shadow: 5px -2px 0px 0px rgb(156 117 68);
    border: 1px solid transparent;
    border-bottom: 0;
    pointer-events: auto;
    background: #00A79C;
    background-clip: padding-box, border-box;
    -webkit-background-clip: padding-box, border-box;
    font-size: 15px;
    font-family: "UTM Aptima";
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    -webkit-animation-name: mp-fadeZoomBig;
    animation-name: mp-fadeZoomBig;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    z-index: 3;
    gap: 8px;
    align-items: center;
}


.titlenk-tienich {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: auto;
	padding: 2px 20px;
	border-radius: 30px;
	font-size: 15px;
	font-family: "UTM Aptima";
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	/* Nền trong suốt để nổi border */
	background: #00A79C;
	background-clip: padding-box;
	-webkit-background-clip: padding-box;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 3;
	gap: 8px;
	animation: mp-fadeZoomBig 0.5s ease 1.2s both;
	/* Viền ảo gradient - vàng đồng pha đỏ cam ấm */
	border: 2px solid transparent;
	background-image:
		linear-gradient(#00A79C, #00A79C),
		linear-gradient(135deg, #7C482B, #C27E3A, #E2B36C, #7C482B);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	cursor: pointer;
}

/* Icon nằm trước text */
/* .titlenk::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url('../../assets/img/iconlogo.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
} */
#benh_vien_nhi_dong::before{
	background-image: url(../../assets//img/compassbg.png);
}
/* Logo bằng ::before (giữ nguyên) */
.thanhdev::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url('../../assets/img/iconlogo.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 10px; /* cách chữ 1 tí nếu cần */
	vertical-align: middle;
}




.titlenk-tienich::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url('../../assets/img/iconlogotienich.png');
	background-size: contain;
	/* để logo không bị méo */
	background-repeat: no-repeat;
	background-position: center;
}


/* Brown-themed variant */
.titlenk-maunau {
	position: relative;
	overflow: hidden;
	--sweep-color: rgba(255, 255, 255, 0.6);
	--sweep-width: 28px;
	background: linear-gradient(to bottom,
			rgba(130, 92, 61, 0.98) 0%,
			rgba(130, 92, 61, 0.85) 30%,
			rgba(130, 92, 61, 0.60) 60%,
			rgba(130, 92, 61, 0.28) 85%,
			rgba(130, 92, 61, 0.12) 100%);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	color: #fff;
	text-align: center;
	padding: 8px 20px 12px;
	border-radius: 5px 5px 0 0;
	box-shadow: 0 2px 12px rgba(130, 92, 61, 0.22), 0 0 18px rgba(130, 92, 61, 0.12);
	border: 1px solid transparent;
	border-bottom: 0;
	pointer-events: auto;
	background:
		linear-gradient(to bottom,
			rgba(130, 92, 61, 0.98) 0%,
			rgba(130, 92, 61, 0.85) 30%,
			rgba(130, 92, 61, 0.60) 60%,
			rgba(130, 92, 61, 0.28) 85%,
			rgba(130, 92, 61, 0.12) 100%) padding-box,
		linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)) border-box;
	background-clip: padding-box, border-box;
	-webkit-background-clip: padding-box, border-box;
	font-size: 12px;
	font-family: '"UTM Aptima"';
	font-weight: 500;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	-webkit-animation-name: mp-fadeZoomBig;
	animation-name: mp-fadeZoomBig;
	-webkit-animation-duration: 0.5s;
	animation-duration: .5s;
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
	z-index: 3;
}
/* Light Sweep effect (inspired by sample) */
.titlenk::after,
.thanhdev::after,
.titlenk-maunau::before {
	content: '';
	position: absolute;
	z-index: 0;
	/* stays under content text */
	width: var(--sweep-width);
	height: 300%;
	background-color: var(--sweep-color);
	box-shadow:
		0 0 3px var(--sweep-color),
		0 0 6px var(--sweep-color),
		0 0 9px var(--sweep-color);
	mix-blend-mode: screen;
	top: 50%;
	left: calc(100% + var(--sweep-width) + 20px);
	transform: translateY(-50%) skew(-30deg);
	pointer-events: auto;
	animation: titlenkSweep 6.5s ease-in-out infinite forwards;
}

.titlenk-tienich::after,
.titlenk-maunau::before {
	content: '';
	position: absolute;
	z-index: 0;
	/* stays under content text */
	width: var(--sweep-width);
	height: 300%;
	background-color: var(--sweep-color);
	box-shadow:
		0 0 3px var(--sweep-color),
		0 0 6px var(--sweep-color),
		0 0 9px var(--sweep-color);
	mix-blend-mode: screen;
	top: 50%;
	left: calc(100% + var(--sweep-width) + 20px);
	transform: translateY(-50%) skew(-30deg);
	pointer-events: none;
	animation: titlenkSweep 6.5s ease-in-out infinite forwards;
}

@keyframes titlenkSweep {
	92% {
		left: calc(100% + var(--sweep-width) + 20px);
	}

	100% {
		left: calc((var(--sweep-width) + 20px) * (-1));
	}
}

/* Clean variant without border/sweep: titlenk2 */
.titlenk2 {
	position: relative;
	background-color: rgba(130, 92, 61, 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	text-align: center;
	padding: 10px 16px;
	border-radius: 8px;
	border: 1px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	font-size: clamp(11px, 1.4vw, 14px);
	font-family: '"UTM Aptima"';
	font-weight: 500;
	line-height: 1.4;
	max-width: 68vw;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	animation: tooltipInner .42s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* Callout arrow under the tooltip pointing up */
/* Arrow border (white) */
.titlenk2::after {
	content: '';
	position: absolute;
	bottom: -11px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-width: 11px 11px 0 11px;
	border-style: solid;
	border-color: #ffffff transparent transparent transparent;
}

/* Arrow fill (translucent bg) */
.titlenk2::before {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	
}

/* Simple tooltip container variant */
.hotspot-center2 {
	position: absolute;
	/* Add subtle global blur behind the tooltip block */
	background-color: rgba(0, 0, 0, 0.26);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform-origin: bottom center;
	animation: tooltipPop .48s cubic-bezier(.16, .84, .44, 1) forwards;
	will-change: transform, opacity, filter;
	max-width: 70vw;
}

/* Homeview */
.hotspot-center.homeview .title,
.hotspot-center-tienich.homeview .title {
	color: #fff;
	text-shadow: 0 0 1px white;
	background: rgba(6, 42, 68, .46);
	text-shadow: 0 0 1px rgba(255, 255, 255, .6);
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	z-index: 2;
}

.hotspot-center.homeview::after,
.hotspot-center-tienich.homeview::after {
	position: absolute;
	content: '';
	border-left: 2px dotted #fff;
	width: 102px;
	height: 51px;
	overflow: hidden;
	top: 31px;
	z-index: 0;
	transform-origin: bottom left;
	left: calc(50% - 1px);
	-webkit-animation-name: mp-clipX;
	animation-name: mp-clipX;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.hotspot-center.homeview.arrow .title,
.hotspot-center-tienich.homeview.arrow .title {
	top: -14px;
}

.hotspot-center.homeview.arrow::after,
.hotspot-center-tienich.homeview.arrow::after {
	height: 51px;
	top: 14px;
}

/* Height helpers for connector line */
#h25 .hotspot-center::after,
#h25 .note-tooltip::after {
	height: 28px;
}

#h25 .hotspot-center-tienich::after,
#h25 .note-tooltip::after {
	height: 28px;
}

#h50 .hotspot-center::after,
#h50 .note-tooltip::after {
	height: 52px;
}

#h50 .hotspot-center-tienich::after,
#h50 .note-tooltip::after {
	height: 52px;
}

#h75 .hotspot-center::after,
#h75 .note-tooltip::after {
	height: 78px;
}

#h75 .hotspot-center-tienich::after,
#h75 .note-tooltip::after {
	height: 78px;
}

#h100 .hotspot-center::after,
#h100 .note-tooltip::after {
	height: 100px;
}

#h100 .hotspot-center-tienich::after,
#h100 .note-tooltip::after {
	height: 100px;
}

#h125 .hotspot-center::after,
#h125 .note-tooltip::after {
	height: 128px;
}

#h125 .hotspot-center-tienich::after,
#h125 .note-tooltip::after {
	height: 128px;
}

#h150 .hotspot-center::after,
#h150 .note-tooltip::after {
	height: 152px;
}

#h150 .hotspot-center-tienich::after,
#h150 .note-tooltip::after {
	height: 152px;
}

#h175 .hotspot-center::after,
#h175 .note-tooltip::after {
	height: 178px;
}

#h175 .hotspot-center-tienich::after,
#h175 .note-tooltip::after {
	height: 178px;
}

#h200 .hotspot-center::after,
#h200 .note-tooltip::after {
	height: 202px;
}

#h200 .hotspot-center-tienich::after,
#h200 .note-tooltip::after {
	height: 202px;
}

#h225 .hotspot-center::after,
#h225 .note-tooltip::after {
	height: 228px;
}

#h225 .hotspot-center-tienich::after,
#h225 .note-tooltip::after {
	height: 228px;
}

#h250 .hotspot-center::after,
#h250 .note-tooltip::after {
	height: 252px;
}

#h250 .hotspot-center-tienich::after,
#h250 .note-tooltip::after {
	height: 252px;
}

#h275 .hotspot-center::after,
#h275 .note-tooltip::after {
	height: 278px;
}

#h275 .hotspot-center-tienich::after,
#h275 .note-tooltip::after {
	height: 278px;
}

#h300 .hotspot-center::after,
#h300 .note-tooltip::after {
	height: 302px;
}

#h300 .hotspot-center-tienich::after,
#h300 .note-tooltip::after {
	height: 302px;
}

#h350 .hotspot-center::after,
#h350 .note-tooltip::after {
	height: 352px;
}

#h350 .hotspot-center-tienich::after,
#h350 .note-tooltip::after {
	height: 352px;
}

#h400 .hotspot-center::after {
	height: 402px;
}

#h400 .hotspot-center-tienich::after {
	height: 402px;
}
#h100,#h75,#h30,#h25,#h50,#h125,#h150,#h175,#h200,#h225,#h250,#h275,#h300,#h350,#h400{
	border: none !important;
}
/* Keyframes for tooltipnk2 appearance */
@keyframes tooltipAppear {
	from {
		opacity: 0;
		transform: translateY(6px) scale(.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes tooltipInner {
	from {
		transform: translateY(4px);
	}

	to {
		transform: translateY(0);
	}
}

/* Improved pop-in with slight overshoot */
@keyframes tooltipPop {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
		filter: blur(1px);
	}

	60% {
		opacity: 1;
		transform: translateY(0) scale(1.02);
		filter: blur(0.3px);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hotspot-center2 {
		animation: none;
		opacity: 1;
	}

	.titlenk2 {
		animation: none;
	}
}

.thanhdev-thumb {
	position: fixed;
	bottom: 0;
	z-index: 1000;
	background-color: #00A79C;
	width: 208px;
	height: 0;
	opacity: 0;
	margin-bottom: 6px;
	border-radius: 10px;
	pointer-events: auto;
	z-index: 1;
	overflow: hidden;
}

.thanhdev-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 10px;
	}

@keyframes thumbOpen {
	0% { width:0px; height:0px; opacity:0; transform: translateY(46px); transform-origin: center;}
	100% { width:208px; height:100px; opacity:1; transform: translateY(0%); transform-origin: center;}
  }
@keyframes thumbClose {
	0% { width:208px; height:100px; opacity:1; transform: translateY(0%); transform-origin: center;}
	100% { width:0px; height:0px; opacity:0; transform: translateY(46px); transform-origin: center;}
  }

  .thanhdev-thumb.is-open { animation: thumbOpen 0.4s ease forwards; }
  .thanhdev-thumb.is-close { animation: thumbClose 0.4s ease forwards; }


/* Giữ nguyên .titlenk overflow: hidden để hiệu ứng sweep hoạt động */
.titlenk {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 60%;
  height: 30px;
  /* Giữ lại */
  color: #fff;
  padding: 8px 20px;
  border-radius: 10px;
  background: hsl(0, 0%, 0%);
  /* opacity: 0.8; */
  font-family: "UTM Aptima";
  font-weight: 500;
  /* box-shadow: 1.95px 1.95px 2.6px rgb(143, 109, 72); */
  border: 1.5px solid #fdfbe9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  z-index: 3;
  gap: 8px;
  text-transform: uppercase;
  cursor: pointer;
  height: 30px;
  white-space: nowrap;
  pointer-events: auto;
}
.hotspot-center{
  position: relative;
}
/* Hiệu ứng quét sáng vẫn giữ nguyên */
/* .titlenk::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: var(--sweep-width);
  height: 300%;
  background-color: var(--sweep-color);
  box-shadow:
    0 0 3px var(--sweep-color),
    0 0 6px var(--sweep-color),
    0 0 9px var(--sweep-color);
  mix-blend-mode: screen;
  top: 50%;
  left: calc(100% + var(--sweep-width) + 20px);
  transform: translateY(-50%) skew(-30deg);
  animation: titlenkSweep 6.5s ease-in-out infinite forwards;
} */

@keyframes titlenkSweep {
  92% {
    left: calc(100% + var(--sweep-width) + 20px);
  }

  100% {
    left: calc((var(--sweep-width) + 20px) * (-1));
  }
}

.img-thumbnail-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}


.thumbnail-preview {
  display: none;
  position: absolute;
  top: -130px;
  height: 130px;
  width: 270px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 99;
  border: 2px solid #fff;
}

#kcn_quoc_quang_luong-hotspot .thumbnail-preview {
  top: -140px;
}

#kcn_huu_thanh-hotspot .thumbnail-preview {
  top: -130px;
}

#quoc_lo_1A-hotspot:hover .thumbnail-preview {
  animation: fadeZoomUpRight 0.4s ease forwards;
}

#kcn_phu_an_thanh-hotspot:hover .thumbnail-preview {
  animation: fadeZoomUpRight 0.4s ease forwards;
}
#tien_ich1-hotspot:hover .thumbnail-preview {
    animation: fadeZoomUpCenter 0.4s ease forwards;
}

@keyframes fadeZoomUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 55px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -10px);
  }
}

@keyframes fadeZoomUpCenter {
  0% {
    opacity: 0;
    transform: translate(10px, 55px);
  }

  100% {
    opacity: 1;
    transform: translate(10px, -10px);
  }
}

@keyframes fadeZoomUpRight {
  0% {
    opacity: 0;
    transform: translate(50%, 55px);
  }
  100% {
    opacity: 1;
    transform: translate(50%, -10px);
  }
}