/* Quy trình */
.homenest__quy-trinh-cham-soc-website {
    width: 100%;
    padding: 0 32px;
    margin-bottom: 100px;
}

.homenest__quy-trinh-cham-soc-website__container {
    background: url('/wp-content/uploads/2025/07/page-header-bg.webp') center / cover;
    padding-top: 100px;
    padding-bottom: 100px;
    border-radius: 16px;
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
}

.homenest__quy-trinh-cham-soc-website__container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/wp-content/uploads/2025/07/page-header-bg-shape.svg') center / contain no-repeat;
}

.homenest__quy-trinh-cham-soc-website__wrapper {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 50px;
}

h2.homenest__quy-trinh-cham-soc-website__title {
    font-size: 43px;
    position: static;
    width: unset;
    clip-path: unset;
    line-height: 140%;
}

p.homenest__quy-trinh-cham-soc-website__desc {
    color: #000;
    font-size: 18px;
    line-height: 160%;
    width: 500px;
}

.homenest__quy-trinh-cham-soc-website__contain {
    display: flex;
    list-style: none;
    height: 450px;
    padding: 0;
    gap: 12px;
    width: 100%;
}

@keyframes FadeIn {
	from {
		opacity: 0;
	}to {
		opacity: 1;
	}
}

.homenest__quy-trinh-cham-soc-website__item {
	height:  100%;
	flex-grow: 1;
	transition: all .3s ease;
	position: relative;
	overflow: hidden;
	border-radius: 8px;

	background-size: cover;
	background-position: center;
}

li.homenest__quy-trinh-cham-soc-website__item::before {
	content: "";
}

.homenest__quy-trinh-cham-soc-website__item:not(.active) {
	cursor: pointer;
}

.homenest__quy-trinh-cham-soc-website__item.active {
	flex-grow: 7;
}

.homenest__quy-trinh-cham-soc-website__item.active .hn__heading {
	opacity: 0;
}

.homenest__quy-trinh-cham-soc-website__item .hn__heading {
	background-color: #fff;
	opacity: 1;
	transition: all .3s ease;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.hn__heading .number {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 12px;
	font: 400 36px "Anton";

	/* 	Viền chữ */
	background-image: linear-gradient(92.16deg, #020C6A 0%, #1A85F8 56.7%, #66E5FB 100%);
	-webkit-background-clip: text !important;
	-webkit-text-stroke: 2px transparent;
	color: #fff !important;
}

.hn__heading > div:not(.number) {
	writing-mode: vertical-rl;
	margin: 0;
	transform: rotate(180deg) translateX(50%);
	position: absolute;
	bottom: 16px;
	left: 50%;
	font-size: 20px;
	font-weight: 500;
	background: linear-gradient(180deg, #020C6A 0%, #1A85F8 56.7%, #66E5FB 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent;
}

.homenest__quy-trinh-cham-soc-website__item .hn__heading-and-content {
	position: absolute;
	bottom: 16px;
	left: 16px;
	right: 16px;
	display: grid;
	grid-template-areas: "num head"
		"ctn ctn";
	grid-template-columns: 100px 1fr;
	grid-gap: 16px;
	opacity: 0;
	animation: FadeIn .3s linear .2s forwards;
	align-items: center;
}

.homenest__quy-trinh-cham-soc-website__item .hn__heading-and-content .number {
	grid-area: num;
	font: 400 80px "Anton";
	line-height: 1.1em;
	-webkit-text-stroke-width: 0.5px;
	-webkit-text-stroke-color: #fff;
	color: transparent;
}

.homenest__quy-trinh-cham-soc-website__item .hn__heading-and-content .heading {
	margin: 0;
	display: inline-block;
	font-size: 32px;
	font-weight: 500;
	color: #fff;
}

.homenest__quy-trinh-cham-soc-website__item .hn__heading-and-content p.content {
	margin: 0;
	grid-area: ctn;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
	line-height: 1.6em;
}

.homenest__quy-trinh-cham-soc-website__item:not(.active) .hn__heading-and-content {
	display: none;
}
/* End - Quy trình */