/**
 * Popup xem PDF Hồ sơ năng lực.
 */

.tmnp-profile-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}

.tmnp-profile-modal.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.tmnp-profile-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(6 18 36 / 0.78);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.tmnp-profile-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(1180px, 100%);
	height: min(900px, calc(100vh - 48px));
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: 14px;
	background: #eef2f6;
	box-shadow: 0 24px 80px rgb(0 0 0 / 0.35);
	transform: translateY(18px) scale(0.985);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tmnp-profile-modal.is-active .tmnp-profile-modal__dialog {
	transform: translateY(0) scale(1);
}

.tmnp-profile-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 64px;
	padding: 12px 16px 12px 22px;
	background: #ffffff;
	border-bottom: 1px solid #dce3eb;
}

.tmnp-profile-modal__heading,
.tmnp-profile-modal__actions,
.tmnp-profile-modal__action {
	display: flex;
	align-items: center;
}

.tmnp-profile-modal__heading {
	min-width: 0;
	gap: 10px;
	color: #046ab5;
}

.tmnp-profile-modal__heading svg {
	flex: 0 0 auto;
}

.tmnp-profile-modal__heading h2 {
	margin: 0;
	overflow: hidden;
	font-family: var(--font-hanken, 'Hanken Grotesk', sans-serif);
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 700;
	line-height: 1.2;
	color: #131b2e;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tmnp-profile-modal__actions {
	flex: 0 0 auto;
	gap: 8px;
}

.tmnp-profile-modal__action,
.tmnp-profile-modal__close {
	justify-content: center;
	min-height: 40px;
	border: 1px solid #d7e0e9;
	border-radius: 8px;
	background: #ffffff;
	color: #334155;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tmnp-profile-modal__action {
	gap: 7px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.tmnp-profile-modal__close {
	display: inline-flex;
	align-items: center;
	width: 40px;
	padding: 0;
}

.tmnp-profile-modal__action:hover,
.tmnp-profile-modal__action:focus-visible,
.tmnp-profile-modal__close:hover,
.tmnp-profile-modal__close:focus-visible {
	border-color: #046ab5;
	background: #edf6fc;
	color: #046ab5;
}

.tmnp-profile-modal__action:focus-visible,
.tmnp-profile-modal__close:focus-visible {
	outline: 2px solid #046ab5;
	outline-offset: 2px;
}

.tmnp-profile-modal__viewer {
	position: relative;
	flex: 1;
	min-height: 0;
	background: #d8dee6;
}

.tmnp-profile-modal__frame {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #ffffff;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.tmnp-profile-modal__frame.is-loaded {
	opacity: 1;
}

.tmnp-profile-modal__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #475569;
	font-size: 14px;
}

.tmnp-profile-modal__spinner {
	width: 24px;
	height: 24px;
	border: 3px solid #cbd5e1;
	border-top-color: #046ab5;
	border-radius: 50%;
	animation: tmnp-profile-spin 0.75s linear infinite;
}

.tmnp-profile-modal__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
}

.tmnp-profile-modal__fallback a {
	color: #046ab5;
	font-weight: 700;
}

body.tmnp-profile-modal-open {
	overflow: hidden;
	padding-right: var(--profile-scrollbar-width, 0);
}

/* Mục Hồ sơ năng lực trong menu. */
.menu-item--profile > a {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
}

.menu-item--profile__icon {
	flex: 0 0 auto;
}

@keyframes tmnp-profile-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) {
	.tmnp-profile-modal {
		padding: 0;
	}

	.tmnp-profile-modal__dialog {
		width: 100%;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	.tmnp-profile-modal__header {
		min-height: 58px;
		padding: 9px 10px 9px 14px;
	}

	.tmnp-profile-modal__action span {
		display: none;
	}

	.tmnp-profile-modal__action {
		width: 40px;
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmnp-profile-modal,
	.tmnp-profile-modal__dialog {
		transition: none;
	}

	.tmnp-profile-modal__spinner {
		animation: none;
	}
}