/**
 * Chỉ số tổng quan UET — 4 cột giống trang chủ.
 */

.eduma-ouet {
	--ouet-number-odd: #034ea1;
	--ouet-number-even: #f36c00;
	--ouet-number: var(--ouet-number-odd);
	--ouet-label: #334155;
	--ouet-divider: rgba(3, 78, 161, 0.18);
	box-sizing: border-box;
	width: 100%;
	font-family: "Roboto", "Montserrat", system-ui, -apple-system, sans-serif;
}

.eduma-ouet *,
.eduma-ouet *::before,
.eduma-ouet *::after {
	box-sizing: border-box;
}

.eduma-ouet__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.eduma-ouet__item {
	position: relative;
	min-width: 0;
	padding: 8px 28px;
	text-align: center;
}

.eduma-ouet--dividers .eduma-ouet__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 12%;
	right: 0;
	width: 1px;
	height: 76%;
	background: var(--ouet-divider);
	transform: rotate(18deg);
	transform-origin: center;
	pointer-events: none;
}

.eduma-ouet__value {
	margin: 0 0 10px;
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ouet-number);
}

/* Cột lẻ (1, 3): xanh — cột chẵn (2, 4): cam */
.eduma-ouet__item:nth-child(odd) .eduma-ouet__value {
	color: var(--ouet-number-odd);
}

.eduma-ouet__item:nth-child(even) .eduma-ouet__value {
	color: var(--ouet-number-even);
}

.eduma-ouet__label {
	margin: 0;
	font-size: clamp(0.875rem, 1.15vw, 1.05rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--ouet-label);
}

@media (max-width: 1024px) {
	.eduma-ouet__item {
		padding: 8px 16px;
	}

	.eduma-ouet--dividers .eduma-ouet__item:not(:last-child)::after {
		transform: rotate(12deg);
	}
}

@media (max-width: 767px) {
	.eduma-ouet__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 28px;
	}

	.eduma-ouet__item {
		padding: 4px 12px;
	}

	.eduma-ouet--dividers .eduma-ouet__item:nth-child(2n)::after,
	.eduma-ouet--dividers .eduma-ouet__item:last-child::after {
		display: none;
	}

	.eduma-ouet--dividers .eduma-ouet__item:not(:nth-child(2n))::after {
		display: block;
		transform: rotate(14deg);
	}

	.eduma-ouet__value {
		font-size: 2rem;
		margin-bottom: 8px;
	}

	.eduma-ouet__label {
		font-size: 0.875rem;
	}
}

@media (max-width: 480px) {
	.eduma-ouet__grid {
		grid-template-columns: 1fr;
		row-gap: 22px;
	}

	.eduma-ouet--dividers .eduma-ouet__item::after {
		display: none !important;
	}
}