.hk-service-rows {
	--hk-sr-radius: 30px;
}

.hk-service-rows__heading {
	margin: 0 0 35px;
	color: var(--hk-brown);
	font-family: var(--hk-font);
	font-size: clamp(28px, 2.78vw, 40px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.02em;
}

.hk-service-rows__list {
	display: grid;
	row-gap: 30px;
}

.hk-service-rows__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 37px;
	min-height: 571px;
}

.hk-service-rows__row--image-left .hk-service-rows__media {
	order: -1;
}

.hk-service-rows__card {
	padding: 28px 40px 32px 29px;
	border-radius: var(--hk-sr-radius);
	background-color: var(--hk-sr-bg, var(--hk-cream-2));
}

.hk-service-rows__title {
	margin: 0 0 22px;
	color: var(--hk-brown);
	font-family: var(--hk-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.364;
	letter-spacing: -.02em;
}

.hk-service-rows__blocks {
	display: grid;
	row-gap: 24px;
}

.hk-service-rows__block {
	display: grid;
	grid-template-columns: 35px minmax(0, 1fr);
	column-gap: 17px;
	align-items: start;
}

.hk-service-rows__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	padding: 5px;
	border-radius: 5px;
	background-color: var(--hk-sr-icon-bg, var(--hk-yellow));
}

.hk-service-rows__icon img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

.hk-service-rows__block-title {
	margin: 6px 0 16px;
	color: #000;
	font-family: var(--hk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.375;
	letter-spacing: -.02em;
}

.hk-service-rows__bullets {
	margin: 0;
	padding-left: 24px;
	color: #000;
	font-size: 16px;
	line-height: 1.375;
	letter-spacing: -.02em;
	list-style: disc;
}

.hk-service-rows__bullets li {
	margin: 0;
}

.hk-service-rows__media {
	overflow: hidden;
	border-radius: var(--hk-sr-radius);
	background-color: var(--hk-beige);
}

.hk-service-rows__img {
	width: 100%;
	height: 100% !important;
	min-height: 100%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.hk-service-rows {
		--hk-sr-radius: 24px;
	}

	.hk-service-rows__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
		min-height: 0;
	}

	.hk-service-rows__media,
	.hk-service-rows__row--image-left .hk-service-rows__media {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.hk-service-rows__list {
		row-gap: 40px;
	}
}

@media (max-width: 767px) {
	.hk-service-rows__card {
		padding: 24px 20px 26px;
	}

	.hk-service-rows__title {
		font-size: 20px;
	}

	.hk-service-rows__media,
	.hk-service-rows__row--image-left .hk-service-rows__media {
		aspect-ratio: 4 / 3;
	}

	.hk-service-rows__block {
		column-gap: 12px;
	}

	.hk-service-rows__bullets {
		padding-left: 20px;
		font-size: 15px;
	}
}

/* Xếp chồng khi cuộn (Figma: Frame 1..4 sticky). Mỗi hàng có nền trùng nền trang để che hàng trước. */
.hk-service-rows.is-stacked {
	--hk-sr-stack-top: 110px;
	--hk-sr-stack-step: 22px;
}

.hk-service-rows.is-stacked .hk-service-rows__row {
	position: sticky;
	top: calc(var(--hk-sr-stack-top) + var(--hk-sr-i, 0) * var(--hk-sr-stack-step));
	padding-block: 12px;
	background: var(--hk-sr-stack-bg, #FBF4E4);
	transform-origin: center top;
	transition: transform .4s var(--hk-ease);
}

.hk-service-rows.is-stacked .hk-service-rows__row.no-stick {
	position: relative;
	top: auto;
}

.hk-service-rows.is-stacked .hk-service-rows__row.is-covered {
	transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
	.hk-service-rows.is-stacked .hk-service-rows__row {
		transition: none;
	}
}
