/*
 * Dịch vụ & phí (service-fees, CONTRACT-RATES §6.4): table (Dịch vụ · Giá · Ghi chú, chia nhóm) và list (tên … giá).
 * Điện thoại: mỗi hàng bảng xếp thành khối; bảng mang role tường minh nên đổi display không mất ngữ nghĩa.
 */

.vh-fees__group + .vh-fees__group {
	margin-top: var(--vh-card-gap);
}

.vh-fees__gtitle {
	margin: 0 0 8px;
	font-family: var(--vh-font-heading);
	font-size: 1.125rem;
	line-height: var(--vh-lh-heading);
}

.vh-fees__table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--vh-color-border-strong);
}

.vh-fees__table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.vh-fees__table tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--vh-color-border);
}

.vh-fees__table th,
.vh-fees__table td {
	display: block;
	padding: 0;
	text-align: left;
}

.vh-fees__table .vh-fees__name {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: var(--vh-fw-medium);
}

.vh-fees__ic {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--vh-color-surface);
	color: var(--vh-color-primary);
}

.vh-fees__ic .vh-i {
	width: 18px;
	height: 18px;
}

.vh-fees__table .vh-fees__price {
	text-align: right;
	white-space: nowrap;
}

/* Điện thoại: chip "Đã gồm…" dài, cho xuống dòng riêng dưới tên để tên không bị bóp. */
.vh-fees__table tr.is-included .vh-fees__price {
	grid-column: 1 / -1;
	text-align: left;
}

.vh-fees__note {
	grid-column: 1 / -1;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-fees__money {
	font-weight: var(--vh-fw-bold);
}

.vh-fees__text {
	color: var(--vh-color-text);
	font-size: var(--vh-fs-small);
	white-space: normal;
}

.vh-fees__incl {
	white-space: normal;
}

/* ---------- list ---------- */
.vh-fees__list {
	display: grid;
	gap: 0 calc(var(--vh-card-gap) * 1.5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-fees__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--vh-color-border);
}

.vh-fees__iname {
	font-weight: var(--vh-fw-medium);
}

.vh-fees__dots {
	flex: 1 1 24px;
	min-width: 24px;
	border-bottom: 1px dotted var(--vh-color-border-strong);
	transform: translateY(-4px);
}

.vh-fees__iprice {
	text-align: right;
}

.vh-fees__inote {
	flex-basis: 100%;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-fees__foot {
	margin: var(--vh-card-gap) 0 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

@media (min-width: 768px) {
	.vh-fees__table {
		border-top: 0;
	}

	.vh-fees__table thead {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	.vh-fees__table tr {
		display: table-row;
		padding: 0;
	}

	.vh-fees__table th,
	.vh-fees__table td {
		display: table-cell;
		padding: 12px 14px;
		border-bottom: 1px solid var(--vh-color-border);
		vertical-align: top;
	}

	.vh-fees__table thead th {
		border-bottom: 1px solid var(--vh-color-border-strong);
		color: var(--vh-color-muted);
		font-size: var(--vh-fs-small);
		font-weight: var(--vh-fw-medium);
	}

	.vh-fees__table thead th:nth-child(2) {
		text-align: right;
	}

	/* Ô tên trở lại ô bảng; biểu tượng đứng cùng dòng chữ. */
	.vh-fees__table .vh-fees__name {
		display: table-cell;
		padding-left: 0;
	}

	.vh-fees__table .vh-fees__ic {
		margin: -4px 10px 0 0;
		vertical-align: middle;
	}

	.vh-fees__table thead th:first-child {
		padding-left: 0;
	}

	.vh-fees__table tr.is-included .vh-fees__price {
		text-align: right;
	}

	/* Cột giá hẹp vừa nội dung: chip "Đã gồm…" giữ một dòng. */
	.vh-fees__incl {
		white-space: nowrap;
	}

	.vh-fees__table .vh-fees__price {
		width: 1%;
	}

	.vh-fees__table .vh-fees__note {
		width: 40%;
		font-size: var(--vh-fs-small);
	}

	.vh-fees__list--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}