:root{
	--hn-brand: #0b7a5a;
	--hn-radius: 18px;
	--hn-handle-size: 46px;
	--hn-divider: 10px;
	--hn-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.hn_chi-tiet-khach-hang__frame {
	max-width: 100%;
	border-radius: 10px;
	box-sizing: border-box;
}

.hn_chi-tiet-khach-hang__compare{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 6;
	border-radius: var(--hn-radius);
	overflow: hidden;
	user-select: none;
	touch-action: none;
	background: #eee;
	box-shadow: var(--hn-shadow);
}

.hn_chi-tiet-khach-hang__compare img{
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.hn_chi-tiet-khach-hang__compare img.hn_chi-tiet-khach-hang__before{
	position: absolute;
}

.hn_chi-tiet-khach-hang__after{
	clip-path: inset(0 0 0 50%);
	will-change: clip-path;
}

.hn_chi-tiet-khach-hang__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 10px;
	transform: translateX(-50%);
	background: #fff;
	will-change: left;
}

.hn_chi-tiet-khach-hang__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 999px;
	cursor: grab;
	will-change: left;
}

.hn_chi-tiet-khach-hang__handle svg {
	width: 48px;
}

.hn_chi-tiet-khach-hang__tag{
	position: absolute;
	top: 14px;
	padding: 8px 12px;
	font-weight: 600;
	font-size: 13px;
	border-radius: 999px;
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(0,0,0,.06);
}
.hn_chi-tiet-khach-hang__tag--before{ left: 14px; }
.hn_chi-tiet-khach-hang__tag--after{ right: 14px; }

@media (max-width:640px){
	:root{ --hn-handle-size: 40px; --hn-divider: 5px; --hn-radius: 14px; }
	.hn_chi-tiet-khach-hang__compare{ aspect-ratio: 16 / 9; }
}


}