/* Group stylesheet for the list widgets. */

.alovesinh-list-check {
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-list-check-item {
	display: flex;
	align-items: flex-start;
	gap: var( --alv-sp-2 );
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
	color: var( --alv-block-text );
}

/* Every value here is a variable because each block that holds the list gives its tick a treatment of its
	own and sets only these, not the whole rule. The size stays border-box, as the source design measures
	the disc including its padding. */
.alovesinh-list-check-item svg {
	flex-shrink: 0;
	width: var( --alv-check-size, 20px );
	height: var( --alv-check-size, 20px );
	margin-top: var( --alv-check-offset, 0 );
	padding: var( --alv-check-pad, 0 );
	border-radius: var( --alv-check-radius, 0 );
	color: var( --alv-check-color, var( --alv-c-green-tick ) );
	background: var( --alv-check-bg, transparent );
}

/* A bare check beside its line, used where the list carries no colour of its own. */
.alovesinh-list-check-tick-plain .alovesinh-list-check-item {
	align-items: flex-start;
}

.alovesinh-list-check-tick-plain {
	--alv-check-size: 18px;
	--alv-check-offset: var( --alv-sp-1 );
	--alv-check-color: var( --alv-c-success );
}

/* A brand disc. Its line sits beside the disc rather than above its first row, so the row centres. */
.alovesinh-list-check-tick-brand .alovesinh-list-check-item {
	align-items: center;
	font-weight: var( --alv-fw-medium );
	color: var( --alv-c-text-4 );
}

.alovesinh-list-check-tick-brand {
	--alv-check-size: 22px;
	--alv-check-pad: var( --alv-sp-1 );
	--alv-check-radius: var( --alv-r-circle );
	--alv-check-color: var( --alv-c-brand-deep );
	--alv-check-bg: color-mix( in srgb, var( --alv-c-brand ) 12%, transparent );
}

/* A green disc on the dark booking panel, where the list is a short reassurance line. */
.alovesinh-list-check-tick-success .alovesinh-list-check-item {
	align-items: center;
	gap: var( --alv-sp-1 );
	font-size: var( --alv-fs-2 );
	color: color-mix( in srgb, var( --alv-c-white ) 85%, transparent );
}

.alovesinh-list-check-tick-success {
	--alv-check-size: 18px;
	--alv-check-pad: 3px;
	--alv-check-radius: var( --alv-r-circle );
	--alv-check-color: var( --alv-c-success );
	--alv-check-bg: color-mix( in srgb, var( --alv-c-success ) 20%, transparent );
}

/* A disc that takes the colour of the service card it sits in, so one list serves all six cards. */
.alovesinh-list-check-tick-service .alovesinh-list-check-item {
	align-items: flex-start;
	line-height: var( --alv-lh-copy );
	color: var( --alv-c-text-2 );
}

.alovesinh-list-check-tick-service {
	--alv-check-size: 18px;
	--alv-check-offset: 5px;
	--alv-check-pad: 4px;
	--alv-check-radius: var( --alv-r-circle );
	--alv-check-color: var( --alv-service-color, var( --alv-c-brand ) );
	--alv-check-bg: var( --alv-service-bg, color-mix( in srgb, var( --alv-c-brand ) 10%, transparent ) );
}

/* The footer contact column: a detail line, not a claim, so the mark is the row's own icon at
	caption size rather than a tick, and the type drops a step below the links beside it. */
.alovesinh-list-check-tick-contact .alovesinh-list-check-item {
	align-items: flex-start;
	font-size: var( --alv-fs-2 );
	line-height: var( --alv-lh-relaxed );
}

.alovesinh-list-check-tick-contact {
	--alv-check-size: 16px;
	--alv-check-offset: 6px;
	--alv-check-color: var( --alv-c-brand-alt );
}

.alovesinh-list-check-lead {
	font-weight: var( --alv-fw-bold );
}

/* The combo panel's disc is smaller and tighter than the one on the download block, and its lines
	run to two rows, so they hang from the top of the disc instead of centring on it. */
.alovesinh-list-check-tick-combo .alovesinh-list-check-item {
	align-items: flex-start;
	color: var( --alv-c-text-4 );
}

.alovesinh-list-check-tick-combo {
	--alv-check-size: 20px;
	--alv-check-pad: 3px;
	--alv-check-radius: var( --alv-r-circle );
	--alv-check-color: var( --alv-c-brand-deep );
	--alv-check-bg: color-mix( in srgb, var( --alv-c-brand ) 12%, transparent );
}

/* Two tracks rather than one column, which is how the long booking block sets its reassurance
	list. It has to say display: grid because the shared column atom under it is a flex column. */
.alovesinh-list-check-columns-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

@media ( max-width: 980px ) {

	.alovesinh-list-check-columns-two {
		grid-template-columns: 1fr;
	}
}

.alovesinh-list-lead,
.alovesinh-list-link {
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-list-lead-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var( --alv-sp-1 ) var( --alv-sp-2 );
}

/* The glyph is stated at 20px: this tile is 40px against the shared tile's 48px, and the source
	design carries the smaller mark on the svg itself rather than in a rule. */
.alovesinh-list-lead-item .alovesinh-icon-box {
	--alv-icon-box: 40px;
	--alv-icon-size: 20px;
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-brand ) 12%, transparent );
	grid-row: span 2;
}

.alovesinh-list-lead-label {
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-block-title );
}

.alovesinh-list-lead-description {
	font-size: var( --alv-fs-2 );
	line-height: var( --alv-lh-body );
	color: var( --alv-block-text );
}

.alovesinh-list-contents-title {
	margin-bottom: var( --alv-sp-2 );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

/* The number is a counter rather than the browser's own list marker: a marker sits outside the
	text block and cannot be given a colour or a weight of its own. */
.alovesinh-list-contents-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: alovesinh-contents;
}

.alovesinh-list-contents-item {
	counter-increment: alovesinh-contents;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-base );
	color: var( --alv-c-text-2 );
}

.alovesinh-list-contents-item::before {
	margin-right: 8px;
	font-weight: var( --alv-fw-bold );
	color: var( --alv-contents-number, var( --alv-c-brand-deep ) );
	content: counter( alovesinh-contents ) ".";
}

.alovesinh-list-contents-item a:hover {
	color: var( --alv-c-brand-deep );
}

/* Across the legal strip the list has to fold rather than push the copyright line off the page. */
.alovesinh-row.alovesinh-list-link {
	--alv-row-wrap: wrap;
}

/* The padding is what makes the row tappable, so it stays on the link and not on the list item:
	padding on the item would enlarge the row without enlarging the target inside it. */
.alovesinh-list-link-item a {
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	min-height: 32px;
	padding: var( --alv-sp-1 ) 0;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-relaxed );
	color: var( --alv-block-text );
	transition: color var( --alv-dur-1 ) ease;
}

.alovesinh-list-link-item a:hover {
	color: var( --alv-block-accent );
}

.alovesinh-list-link-item svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* A pointer can hit a 32px row, a thumb cannot: without this, every link of the list sits under
	the touch floor on a phone. */
@media ( max-width: 820px ) {

	.alovesinh-list-link-item a {
		min-height: var( --alv-touch );
		padding: var( --alv-sp-2 ) 0;
		line-height: 20px;
	}
}

.alovesinh-chan-trang-cuoi .alovesinh-list-link {
	--alv-row-align: stretch;
}

.alovesinh-chan-trang-cuoi .alovesinh-list-link-item {
	display: flex;
}

.alovesinh-chan-trang-cuoi .alovesinh-list-link-item a {
	color: var( --alv-c-on-dark-muted );
}

/* Above the phone width only: at 820 and under the strip keeps the thumb floor and the fold set above,
	which this rule outweighs by a class and would shrink back under the floor. */
@media ( min-width: 821px ) {

	.alovesinh-chan-trang-cuoi .alovesinh-list-link-item a {
		min-height: 0;
		padding: 0;
	}
}

.alovesinh-phan-loai-nem .alovesinh-list-check,
.alovesinh-tang-tai-lieu .alovesinh-list-check,
.alovesinh-khuyen-mai-nem-sofa-the .alovesinh-list-check,
.alovesinh-dat-lich-nhanh .alovesinh-list-lead {
	margin-bottom: var( --alv-sp-3 );
}

.alovesinh-truoc-sau-truot .alovesinh-list-lead {
	margin: calc( var( --alv-sp-3 ) - var( --alv-sp-2 ) ) 0 var( --alv-sp-3 );
}

.alovesinh-truoc-sau-truot .alovesinh-list-lead-item .alovesinh-icon-box {
	--alv-icon-box: 36px;
	--alv-icon-size: 18px;
	--alv-icon-radius: var( --alv-r-1 );
}

.alovesinh-truoc-sau-truot .alovesinh-list-lead-description {
	font-size: var( --alv-fs-3 );
}