.hk-vm {
	--hk-vm-col: 38%;

	display: grid;
	grid-template-columns: var(--hk-vm-col) minmax(0, 1fr);
	align-items: center;
	column-gap: 40px;
}

.hk-vm__media {
	position: relative;
	padding-top: 6%;
}

.hk-vm__frame {
	position: relative;
	aspect-ratio: 514 / 467;
	overflow: hidden;
}

.hk-vm__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.hk-vm__frame--mask {
	-webkit-mask: url("../../../assets/images/decor/vision-image-mask.svg") center / 100% 100% no-repeat;
	mask: url("../../../assets/images/decor/vision-image-mask.svg") center / 100% 100% no-repeat;
}

.hk-vm__frame--rounded {
	border-radius: 30px;
}

.hk-vm__decor {
	--hk-anim-w: 120px;

	position: absolute;
	top: 0;
	right: 19%;
	z-index: 1;
	line-height: 0;
}

.hk-vm__decor .hk-anim {
	--hk-anim-w: inherit;
}

.hk-vm__list {
	display: flex;
	flex-direction: column;
	gap: 88px;
}

.hk-vm__item {
	display: flex;
	align-items: center;
	gap: 55px;
}

.hk-vm__blob {
	position: relative;
	flex: none;
	width: 197px;
	aspect-ratio: 197 / 190;
	overflow: hidden;
	transition: transform .6s var(--hk-ease);
}

.hk-vm__blob--1 {
	-webkit-mask: url("../../../assets/images/decor/vision-blob-1.svg") center / 100% 100% no-repeat;
	mask: url("../../../assets/images/decor/vision-blob-1.svg") center / 100% 100% no-repeat;
}

.hk-vm__blob--2 {
	-webkit-mask: url("../../../assets/images/decor/vision-blob-2.svg") center / 100% 100% no-repeat;
	mask: url("../../../assets/images/decor/vision-blob-2.svg") center / 100% 100% no-repeat;
}

.hk-vm__item:hover .hk-vm__blob {
	transform: rotate(8deg) scale(1.03);
}

.hk-vm__blob-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.hk-vm__title {
	margin: 0 0 15px;
	color: #000;
	font-family: var(--hk-font);
	font-size: clamp(32px, 3.5vw, 50px);
	font-weight: 600;
	line-height: 1.36;
	letter-spacing: -.03em;
}

.hk-vm__text {
	margin: 0;
	color: #000;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.35;
	letter-spacing: -.03em;
}

@media (max-width: 1024px) {
	.hk-vm {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}

	.hk-vm__media {
		max-width: 560px;
		width: 100%;
		margin-inline: auto;
	}

	.hk-vm__list {
		gap: 48px;
	}

	.hk-vm__item {
		gap: 32px;
	}

	.hk-vm__blob {
		width: 160px;
	}
}

@media (max-width: 767px) {
	.hk-vm__decor {
		--hk-anim-w: 84px;
	}

	.hk-vm__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.hk-vm__blob {
		width: 130px;
	}

	.hk-vm__title {
		margin-bottom: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hk-vm__blob {
		transition: none;
	}
}

/* Figma (Frame 250 / Vector): viền hoa xoay liên tục; ảnh bên trong xoay ngược để luôn đứng thẳng. */
.hk-vm__blob {
	animation: hk-vm-spin 16s linear infinite;
}

.hk-vm__blob--2 {
	animation-direction: reverse;
}

.hk-vm__blob-img {
	animation: hk-vm-spin 16s linear infinite reverse;
}

.hk-vm__blob--2 .hk-vm__blob-img {
	animation-direction: normal;
}

.hk-vm__item:hover .hk-vm__blob {
	transform: none;
}

@keyframes hk-vm-spin {
	to {
		transform: rotate(-360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hk-vm__blob,
	.hk-vm__blob-img {
		animation: none;
	}
}