/*
 * Popup profile học viên (inc/students.php, assets/js/student-profile.js).
 * Máy tính: ảnh vinh danh vuông bên trái, thông tin bên phải; điện thoại: xếp dọc.
 */

.tri-student-card--profile {
	cursor: pointer;
}

.tri-student-card--profile:focus-visible {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 4px;
}

.tri-hv-open {
	overflow: hidden;
}

.tri-hv {
	/* margin auto: reset chung của theme đặt margin 0 → dialog dính góc trái trên. */
	width: min(920px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 24px 64px transparent;
	box-shadow: 0 24px 64px color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent);
	overflow: auto;
}

.tri-hv::backdrop {
	background: var(--wp--preset--color--navy);
	background: color-mix(in srgb, var(--wp--preset--color--navy) 60%, transparent);
}

.tri-hv[open] {
	animation: tri-hv-in 0.22s ease-out;
}

@keyframes tri-hv-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

.tri-hv__box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.tri-hv__close {
	position: absolute;
	box-sizing: border-box;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	background: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent);
	color: var(--wp--preset--color--navy);
	font-size: 0;
	cursor: pointer;
	box-shadow: 0 2px 8px transparent;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent);
}

/* Dấu X vẽ bằng 2 vạch, luôn đúng tâm (ký tự "×" của font lệch xuống — 12/10/2026). */
.tri-hv__close::before,
.tri-hv__close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	content: "";
	transform: translate(-50%, -50%) rotate(45deg);
}

.tri-hv__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.tri-hv__close:hover,
.tri-hv__close:focus-visible {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

.tri-hv__frame {
	position: relative;
	display: block;
	aspect-ratio: 1;
	background: var(--wp--preset--color--ice-soft, var(--wp--preset--color--page));
	cursor: zoom-in;
}

/* Nhãn "Phóng to" góc dưới phải ảnh — bấm mở trình xem ảnh (lightbox.js). */
.tri-hv__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
	background: color-mix(in srgb, var(--wp--preset--color--navy) 78%, transparent);
	color: var(--wp--preset--color--white);
	font-size: var(--tri-fs-7);
	font-weight: var(--tri-fw-bold);
	line-height: 1;
	pointer-events: none;
}

.tri-hv:not(.tri-hv--poster) .tri-hv__zoom {
	display: none;
}

.tri-hv__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ảnh chụp gốc / bảng điểm là ảnh dọc: hiện trọn, không cắt (06/10/2026). */
.tri-hv[data-hv-anh="snap"] .tri-hv__img,
.tri-hv[data-hv-anh="exam"] .tri-hv__img {
	object-fit: contain;
}

.tri-hv__note {
	margin: 0;
	padding: 8px 16px 0;
	color: var(--wp--custom--color--ink-soft, var(--wp--preset--color--navy));
	font-size: var(--tri-fs-7);
	text-align: center;
}

/* Không có ảnh lớn nào: ảnh tròn của thẻ, hiện tròn giữa nền nhạt. */
.tri-hv:not(.tri-hv--poster) .tri-hv__frame {
	display: grid;
	place-items: center;
	aspect-ratio: auto;
	padding: 32px 0 8px;
	background: none;
}

.tri-hv:not(.tri-hv--poster) .tri-hv__img {
	width: min(220px, 60%);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
}

.tri-hv__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 24px 28px;
}

.tri-hv__kicker {
	margin: 0;
	color: var(--wp--custom--color--ink-soft, var(--wp--preset--color--navy));
	font-size: var(--tri-fs-6);
}

.tri-hv__name {
	margin: 0;
	font-size: var(--tri-fs-3);
	font-weight: var(--tri-fw-heavy);
	line-height: var(--tri-lh-title);
	text-transform: uppercase;
}

.tri-hv__headline {
	margin: 0;
	color: var(--wp--preset--color--action);
	font-weight: var(--tri-fw-bold);
}

.tri-hv__journey {
	margin: 0;
	font-size: var(--tri-fs-6);
	font-weight: var(--tri-fw-bold);
}

.tri-hv__overall {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* display:flex ở trên đè thuộc tính hidden → vòng điểm trống vẫn hiện (12/10/2026). */
.tri-hv__overall[hidden] {
	display: none;
}

.tri-hv__overall-score {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-size: var(--tri-fs-3);
	font-weight: var(--tri-fw-heavy);
}

/* Dưới 8.0 xanh, từ 8.0 cam — cùng luật huy hiệu thẻ (parts/04-cards.css). */
.tri-hv__overall--duoi-8 .tri-hv__overall-score {
	background: var(--wp--preset--color--action);
}

.tri-hv__overall-label {
	font-size: var(--tri-fs-4);
	font-weight: var(--tri-fw-bold);
}

.tri-hv__bands {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-hv__bands li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--wp--preset--color--page);
}

.tri-hv__bands strong {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 36px;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px transparent;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--navy) 15%, transparent);
	font-size: var(--tri-fs-5);
	font-weight: var(--tri-fw-heavy);
}

.tri-hv__bands span {
	font-size: var(--tri-fs-6);
	font-weight: var(--tri-fw-bold);
}

@media (min-width: 768px) {
	.tri-hv__box {
		grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
		align-items: center;
	}

	.tri-hv:not(.tri-hv--poster) .tri-hv__box {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	}

	.tri-hv:not(.tri-hv--poster) .tri-hv__frame {
		padding: 32px 0 32px 24px;
	}

	.tri-hv__body {
		padding: 32px 32px 32px 28px;
	}
}

/* ── Gọn một màn (12/10/2026, góp ý PGĐ): không cuộn trong popup; 4 kỹ năng thành một
   hàng (số trên, tên dưới — hết tràn chữ "Listening"); điện thoại khung nhỏ hơn màn
   để chạm vào nền xung quanh là đóng (một tay). ── */
.tri-hv {
	overflow: hidden;
}

.tri-hv__box {
	max-height: calc(100dvh - 32px);
}

.tri-hv__body {
	min-height: 0;
	overflow-y: auto;
}

.tri-hv__bands {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.tri-hv__bands li {
	flex-direction: column;
	gap: 4px;
	padding: 8px 4px;
	text-align: center;
}

.tri-hv__bands strong {
	min-width: 0;
	width: 100%;
	max-width: 52px;
	height: 34px;
}

.tri-hv__bands span {
	max-width: 100%;
	overflow: hidden;
	font-size: var(--tri-fs-7);
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 768px) {
	/* Máy tính: ảnh không cao quá màn → cả hộp luôn vừa một màn. */
	.tri-hv__box {
		grid-template-columns: minmax(0, min(460px, calc(100dvh - 32px))) minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.tri-hv {
		width: min(360px, calc(100vw - 56px));
		max-height: calc(100dvh - 120px);
		border-radius: 20px;
	}

	.tri-hv__box {
		grid-template-rows: auto minmax(0, 1fr);
		max-height: calc(100dvh - 120px);
	}

	.tri-hv__close {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
	}

	/* Ảnh vuông nhưng không cao quá nửa màn — chừa chỗ cho tên + điểm. */
	.tri-hv.tri-hv--poster .tri-hv__frame {
		width: min(100%, 46dvh);
		margin-inline: auto;
	}

	.tri-hv:not(.tri-hv--poster) .tri-hv__frame {
		padding: 20px 0 4px;
	}

	.tri-hv:not(.tri-hv--poster) .tri-hv__img {
		width: min(140px, 45%);
	}

	.tri-hv__zoom {
		right: 8px;
		bottom: 8px;
		padding: 5px 9px;
	}

	.tri-hv__body {
		gap: 8px;
		padding: 12px 14px 14px;
	}

	.tri-hv__kicker {
		font-size: var(--tri-fs-7);
	}

	.tri-hv__name {
		font-size: var(--tri-fs-4);
	}

	.tri-hv__headline,
	.tri-hv__journey {
		display: -webkit-box;
		overflow: hidden;
		font-size: var(--tri-fs-7);
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tri-hv__headline[hidden],
	.tri-hv__journey[hidden] {
		display: none;
	}

	.tri-hv__overall {
		gap: 10px;
	}

	.tri-hv__overall-score {
		width: 48px;
		height: 48px;
		font-size: var(--tri-fs-4);
	}

	.tri-hv__overall-label {
		font-size: var(--tri-fs-5);
	}

	.tri-hv__bands {
		gap: 6px;
	}

	.tri-hv__bands li {
		padding: 6px 2px;
		border-radius: 12px;
	}

	.tri-hv__bands strong {
		height: 30px;
		border-radius: 8px;
		font-size: var(--tri-fs-6);
	}
}

/* Màn rất hẹp / thấp (iPhone SE 320×568): bỏ dòng "Học viên The Real IELTS", ảnh thấp
   hơn, chữ kỹ năng nhỏ lại — vẫn vừa một màn, không cắt chữ. */
@media (max-width: 360px) {
	.tri-hv.tri-hv--poster .tri-hv__frame {
		width: min(100%, 40dvh);
	}

	.tri-hv__kicker {
		display: none;
	}

	.tri-hv__body {
		gap: 6px;
		padding: 10px 10px 12px;
	}

	.tri-hv__overall-score {
		width: 40px;
		height: 40px;
	}

	.tri-hv__bands {
		gap: 4px;
	}

	.tri-hv__bands span {
		font-size: 10px;
		letter-spacing: -0.01em;
		text-overflow: clip;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tri-hv[open] {
		animation: none;
	}
}

/* ── Thẻ "Vinh danh học viên" dựng bằng HTML (13/10/2026) — theo mẫu ảnh vinh danh mới 1200×1200,
   cho học viên chưa có ảnh vinh danh (ô "Popup học viên"). Kích thước theo cqi của khung vuông:
   1cqi = 1% cạnh thẻ, đo từ ảnh mẫu. ── */
.tri-hv-form {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--beau-sans);
	line-height: 1.1;
}

.tri-hv-form[hidden],
.tri-hv__frame[hidden] {
	display: none;
}

.tri-hv-form p {
	margin: 0;
}

.tri-hv-form__rule {
	position: absolute;
	top: 7cqi;
	left: 4.2cqi;
	width: 64cqi;
	height: 0.35cqi;
	background: var(--wp--preset--color--navy);
}

.tri-hv-form__brand {
	position: absolute;
	top: 4.6cqi;
	right: 5cqi;
	font-size: 2.6cqi;
	font-weight: var(--tri-fw-bold);
	line-height: 1;
}

.tri-hv-form__brand b {
	display: block;
}

.tri-hv-form__title {
	position: absolute;
	top: 12.5cqi;
	left: 4.2cqi;
	right: 30cqi;
	font-size: 6cqi;
	font-weight: var(--tri-fw-heavy);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.tri-hv-form__title span {
	color: var(--wp--preset--color--red);
}

.tri-hv-form__bar {
	position: absolute;
	top: 22.2cqi;
	left: 4.2cqi;
	width: 11cqi;
	height: 0.9cqi;
	background: var(--wp--preset--color--gold);
}

/* Tên dài xuống tối đa 2 dòng, dính đáy hộp để không đè ô Overall. */
.tri-hv-form__name {
	position: absolute;
	top: 26cqi;
	left: 4.2cqi;
	width: 47cqi;
	height: 11cqi;
	padding-bottom: 1cqi;
	box-sizing: border-box;
	display: flex !important;
	align-items: flex-end;
	font-size: 4.3cqi;
	font-weight: var(--tri-fw-heavy);
	text-transform: uppercase;
	overflow: hidden;
}

.tri-hv-form__overall {
	position: absolute;
	top: 39.5cqi;
	left: 6.3cqi;
	width: 41.5cqi;
	height: 8cqi;
	display: grid;
	place-items: center;
	border-radius: 1.8cqi;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--gold);
	font-size: 5.2cqi;
	font-weight: var(--tri-fw-heavy);
	text-transform: uppercase;
	white-space: nowrap;
}

.tri-hv-form__overall[hidden] {
	display: none;
}

.tri-hv-form__bands {
	position: absolute;
	top: 51cqi;
	left: 7cqi;
	width: 40.5cqi;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3cqi;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-hv-form__bands li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1cqi;
	height: 13.3cqi;
	border-radius: 1.8cqi;
	background: var(--wp--preset--color--ice-soft);
}

.tri-hv-form__bands strong {
	font-size: 5cqi;
	font-weight: var(--tri-fw-heavy);
	line-height: 1;
}

.tri-hv-form__bands span {
	font-size: 2.3cqi;
	text-transform: uppercase;
	line-height: 1;
}

.tri-hv-form__photo {
	position: absolute;
	top: 23.8cqi;
	left: 53.3cqi;
	width: 40cqi;
	height: 63.3cqi;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border: 0.8cqi solid var(--wp--preset--color--white);
	border-radius: 2.6cqi;
	background: var(--wp--preset--color--blue-2) center / cover no-repeat;
	box-shadow: 0 1cqi 3cqi color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent);
}

/* Chưa có ảnh: chữ cái đầu trong vòng tròn trắng. */
.tri-hv-form__initials {
	display: grid;
	place-items: center;
	width: 26cqi;
	height: 26cqi;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-size: 10cqi;
	font-weight: var(--tri-fw-heavy);
}

.tri-hv-form__photo.has-img .tri-hv-form__initials {
	display: none;
}

.tri-hv-form__star {
	position: absolute;
	top: 82cqi;
	left: 3.4cqi;
	font-size: 6cqi;
	line-height: 1;
}

.tri-hv-form__slogan {
	position: absolute;
	top: 92.2cqi;
	left: 3.8cqi;
	right: 4cqi;
	display: flex !important;
	align-items: center;
	gap: 6cqi;
	font-size: 2.6cqi;
}

.tri-hv-form__slogan::after {
	content: "";
	flex: 1;
	height: 0.3cqi;
	background: var(--wp--preset--color--navy);
}

/* Điện thoại: thẻ vuông không cao quá nửa màn như ảnh vinh danh. */
@media (max-width: 767px) {
	.tri-hv.tri-hv--form .tri-hv-form {
		width: min(100%, 46dvh);
		margin-inline: auto;
	}

	/* Nút × nằm đúng góc chữ thương hiệu → ẩn chữ cho khỏi chồng. */
	.tri-hv-form__brand {
		display: none;
	}
}

@media (max-width: 360px) {
	.tri-hv.tri-hv--form .tri-hv-form {
		width: min(100%, 40dvh);
	}
}

/* display:grid của dải kỹ năng đè thuộc tính hidden → ẩn điểm (ô "Popup học viên") không ăn. */
.tri-hv__bands[hidden] {
	display: none;
}