@font-face {
	font-family: 'AvenirNextLTPro';
	src: url('../fonts/AvenirNextLTPro-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'AvenirNextLTPro';
	src: url('../fonts/AvenirNextLTPro-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'AvenirNextLTPro';
	src: url('../fonts/AvenirNextLTPro-Medium.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'AvenirNextLTPro';
	src: url('../fonts/AvenirNextLTPro-MediumItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'AvenirNextLTPro';
	src: url('../fonts/AvenirNextLTPro-Bold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'AvenirNextLTPro';
	src: url('../fonts/AvenirNextLTPro-BoldItalic.ttf') format('truetype');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

:root {
	--hcvm-blue: #17479D;
	--hcvm-orange: #EE6823;
	--hcvm-emerald: #10b981;
	--hcvm-amber: #f59e0b;
	--hcvm-ink: #111827;
	--hcvm-muted: #5f6973;
	--hcvm-line: rgba(23, 71, 157, 0.14);
	--hcvm-surface: #fbfdff;
}

.hcvm-trigger {
	position: relative;
	margin-left: 10px;
	padding: 12px 26px 12px 56px !important;
	background: linear-gradient(120deg, #054fd2 0%, #6a11cb 55%, #ee6823 100%) !important;
	background-size: 200% 100% !important;
	border: 0 !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	box-shadow: 0 0 0 8px rgba(238, 104, 35, 0.4), 0 8px 22px rgba(5, 79, 210, 0.32);
	animation: hcvm-pulse-glow 2.2s ease-in-out infinite;
	transition: transform 0.25s ease, background-position 0.6s ease;
	overflow: visible;
}

.rtl .hcvm-trigger {
	margin-left: 0;
	margin-right: 10px;
	padding: 12px 56px 12px 26px !important;
}

.hcvm-trigger:hover,
.hcvm-trigger:focus {
	background-position: 100% 0 !important;
	color: #fff !important;
	transform: scale(1.03);
	box-shadow: 0 0 0 10px rgba(238, 104, 35, 0.42), 0 12px 28px rgba(5, 79, 210, 0.4);
}

@keyframes hcvm-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 6px rgba(238, 104, 35, 0.28), 0 6px 20px rgba(5, 79, 210, 0.28); }
	50%      { box-shadow: 0 0 0 12px rgba(238, 104, 35, 0.45), 0 10px 26px rgba(5, 79, 210, 0.38); }
}

@keyframes hcvm-soft-heartbeat {
	0%, 100% { transform: scale(1); }
	35%      { transform: scale(1.025); }
	70%      { transform: scale(0.995); }
}

.hcvm-btn-icon {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	background: #ffffff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}

.rtl .hcvm-btn-icon {
	left: auto;
	right: 8px;
}

.hcvm-btn-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.hcvm-icon-doc {
	fill: #054fd2;
	stroke: #054fd2;
	stroke-width: 0.5;
}

.hcvm-icon-fold {
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.2;
}

.hcvm-icon-cv {
	fill: #ffffff;
	font-size: 8px;
	font-weight: 900;
	font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
	letter-spacing: 0.5px;
}

.hcvm-icon-spark {
	fill: #ee6823;
}

.hcvm-icon-spark-1 { animation: hcvm-sparkle 2s ease-in-out infinite; }
.hcvm-icon-spark-2 { animation: hcvm-sparkle 2s ease-in-out 0.5s infinite; }
.hcvm-icon-spark-3 { animation: hcvm-sparkle 2s ease-in-out 1s infinite; }

@keyframes hcvm-sparkle {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1; }
}

.hcvm-icon-bubble {
	fill: #ee6823;
	stroke: #ffffff;
	stroke-width: 0.8;
}

.hcvm-icon-arrow {
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hcvm-original-apply-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.hcvm-popup-wrapper {
	background: #fff;
	max-width: 780px;
	margin: 40px auto;
	padding: 34px;
	position: relative;
	border-radius: 12px;
}

/* Lock body scroll khi popup fullscreen mở — tránh wheel scroll page bên ngoài */
html.hcvm-body-lock,
body.hcvm-body-lock {
	overflow: hidden !important;
	height: 100% !important;
	-ms-overflow-style: none !important;
}

html.hcvm-body-lock::-webkit-scrollbar,
body.hcvm-body-lock::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
}

/* Dashboard popup chiếm 75% viewport, luôn align center cả ngang & dọc.
   Override default Magnific Popup table-layout bằng flexbox center. */
.hcvm-mfp.mfp-wrap {
	overflow: hidden !important;
	overscroll-behavior: contain !important;
}

.hcvm-mfp .mfp-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px 16px !important;
}

.hcvm-mfp .mfp-container::before {
	display: none !important; /* triệt :before do Magnific dùng cho vertical-align trick */
}

.hcvm-mfp .mfp-content {
	width: 75vw !important;
	max-width: 75vw !important;
	margin: 0 !important;
	display: block !important;
	vertical-align: middle;
}

.hcvm-popup-wrapper.hcvm-dashboard-popup {
	width: 100%;
	max-width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px 30px;
	box-sizing: border-box;
	margin: 0;
}

/* Fullscreen result: wrapper khoá height = 100vh, KHÔNG scroll.
   .inner bên trong giữ scrollbar cục bộ. Nút X là sibling .inner nên ở ngoài
   vùng scroll, luôn neo top-right wrapper. */
.hcvm-mfp.is-fullscreen .mfp-container {
	overflow: hidden !important;
}

.hcvm-mfp.is-fullscreen .hcvm-popup-wrapper.hcvm-dashboard-popup {
	overflow: hidden;
	position: relative;
}

/* Fullscreen .inner: position:relative shell 100vh; bên trong dùng absolute
   positioning thay vì flex để tránh sizing quirks. Title fix top, actions fix
   bottom, scroll fill giữa. */
.hcvm-mfp.is-fullscreen .hcvm-popup-wrapper.hcvm-dashboard-popup > .inner {
	position: relative !important;
	height: 100vh !important;
	max-height: 100vh !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	display: block !important;
}

.hcvm-mfp.is-fullscreen .hcvm-popup-wrapper.hcvm-dashboard-popup > .inner > .widget-title {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	margin: 0 !important;
	padding: 16px 40px !important;
	background: #fff;
	border-bottom: 1px solid var(--hcvm-line);
	box-sizing: border-box;
	z-index: 5;
}

/* Step container (result) fill phần dưới title, là vùng định vị cho scroll + actions */
.hcvm-mfp.is-fullscreen .hcvm-step[data-step="result"].is-active {
	display: block !important;
	position: absolute !important;
	top: 60px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Scroll container — fill từ top:0 step đến bottom:76px (chỗ cho actions footer).
   overflow-y:scroll + min-height nội dung lớn hơn container → scrollbar thumb HIỆN. */
.hcvm-mfp.is-fullscreen .hcvm-step[data-step="result"].is-active > .hcvm-result-scroll {
	position: absolute !important;
	top: 0;
	bottom: 76px;
	left: 0;
	right: 0;
	overflow-y: scroll !important;
	overflow-x: hidden !important;
	padding: 24px 40px !important;
	margin: 0 !important;
	box-sizing: border-box;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: auto;
	overscroll-behavior: contain;
	outline: none;
}

/* Ép dashboard cao hơn vùng scroll khả dụng để scrollbar thumb luôn hiện */
.hcvm-mfp.is-fullscreen .hcvm-result-scroll .hcvm-dashboard-grid {
	min-height: calc(100vh - 60px);
}

/* Actions = footer cố định bottom 0, height 76px */
.hcvm-mfp.is-fullscreen .hcvm-step[data-step="result"].is-active > .hcvm-actions {
	position: absolute !important;
	bottom: 0;
	left: 0;
	right: 0;
	height: 76px;
	margin: 0 !important;
	padding: 14px 40px !important;
	background: #fff;
	border-top: 1px solid var(--hcvm-line);
	box-sizing: border-box;
	z-index: 5;
}

.hcvm-mfp.is-fullscreen .hcvm-result-scroll::-webkit-scrollbar {
	width: 8px;
	background: #f1f1f1;
}

.hcvm-mfp.is-fullscreen .hcvm-result-scroll::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.hcvm-mfp.is-fullscreen .hcvm-result-scroll::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 0;
	border: none;
}

.hcvm-mfp.is-fullscreen .hcvm-result-scroll::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* Fullscreen mode — bật khi đang hiển thị step result */
.hcvm-mfp.is-fullscreen .mfp-container {
	padding: 0 !important;
	display: block !important;
}

.hcvm-mfp.is-fullscreen .mfp-content {
	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.hcvm-mfp.is-fullscreen .hcvm-popup-wrapper.hcvm-dashboard-popup {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.hcvm-mfp.is-fullscreen .hcvm-actions {
	margin-bottom: 16px;
}

/* X close button — render trực tiếp trong popup, độc lập với Magnific .mfp-close */
.hcvm-mfp .mfp-close {
	display: none !important;
}

.hcvm-close-btn {
	display: none;
	position: absolute;
	top: 14px;
	right: 18px;
	width: 40px;
	height: 40px;
	line-height: 1;
	font-size: 22px;
	font-weight: 300;
	font-family: Arial, sans-serif;
	color: #111827;
	background: #fff;
	border: 1px solid var(--hcvm-line);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	z-index: 1100;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.hcvm-close-btn:hover {
	background: rgba(238, 104, 35, 0.15);
	border-color: var(--hcvm-orange);
	color: var(--hcvm-orange);
}

.hcvm-mfp.is-fullscreen .hcvm-close-btn {
	display: block;
	position: fixed;
	top: 16px;
	right: 24px;
	z-index: 1200;
}

.hcvm-step {
	display: none;
}

.hcvm-step.is-active {
	display: block;
}

.hcvm-intro,
.hcvm-note {
	color: var(--hcvm-muted);
}

.hcvm-cv-file {
	display: none;
}

.hcvm-message {
	margin: 0 0 18px;
	min-height: 22px;
}

.hcvm-message.is-error {
	color: #d93025;
}

.hcvm-choice-step {
	padding: 18px 0 8px;
}

.hcvm-choice-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* gap 24px = 16px (ring↔ring mong muốn) + 4px + 4px (ring 2 nút nhô ngoài border) */
	gap: 24px;
}

.hcvm-choice-btn {
	position: relative;
	min-height: 64px;
	border-radius: 999px !important;
	color: #ffffff !important;
	font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 17px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 0 !important;
	padding: 14px 24px 14px 70px !important;
	line-height: 1.2;
	overflow: visible;
	background-size: 200% 100% !important;
	transition: transform 0.25s ease, background-position 0.6s ease, box-shadow 0.3s ease;
}

.hcvm-choice-btn .hcvm-btn-icon {
	left: 10px;
	width: 44px;
	height: 44px;
}

.hcvm-choice-btn .hcvm-btn-icon svg {
	width: 26px;
	height: 26px;
}

.hcvm-btn-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
	border-radius: 0;
}

.hcvm-choice-btn .hcvm-btn-icon img {
	width: 40px;
	height: 40px;
}

.hcvm-trigger .hcvm-btn-icon img {
	width: 40px;
	height: 40px;
}

.hcvm-choice-btn .hcvm-btn-text {
	display: inline-block;
	color: #ffffff !important;
	position: relative;
	z-index: 1;
}

.hcvm-choice-apply {
	background: linear-gradient(120deg, #1e40af 0%, #5b21b6 55%, #c2410c 100%) !important;
	font-weight: 600;
	box-shadow: 0 0 0 4px rgba(238, 104, 35, 0.85), 0 6px 18px rgba(30, 64, 175, 0.3) !important;
}

.hcvm-choice-apply:hover,
.hcvm-choice-apply:focus {
	background-position: 100% 0 !important;
	color: #ffffff !important;
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 8px 24px rgba(30, 64, 175, 0.45) !important;
}

.hcvm-choice-ai {
	background: linear-gradient(120deg, #1a8cff 0%, #6a11cb 55%, #ee6823 100%) !important;
	font-weight: 800;
	box-shadow: 0 0 0 4px rgba(238, 104, 35, 0.85), 0 6px 18px rgba(106, 17, 203, 0.3) !important;
	animation: hcvm-soft-heartbeat 1.8s ease-in-out infinite;
}

.hcvm-choice-ai:hover,
.hcvm-choice-ai:focus {
	background-position: 100% 0 !important;
	color: #ffffff !important;
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 8px 24px rgba(106, 17, 203, 0.4) !important;
	animation-play-state: paused;
}

.hcvm-choice-ai:hover .hcvm-recommend-badge,
.hcvm-choice-ai:focus .hcvm-recommend-badge {
	box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.hcvm-trigger,
	.hcvm-choice-ai,
	.hcvm-icon-spark-1,
	.hcvm-icon-spark-2,
	.hcvm-icon-spark-3 {
		animation: none !important;
	}
}

.hcvm-recommend-badge {
	position: absolute;
	top: -10px;
	right: -8px;
	background: var(--hcvm-emerald);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(16, 185, 129, 0.38);
	white-space: nowrap;
	z-index: 2;
}

.hcvm-processing {
	text-align: center;
	padding: 36px 28px 28px;
	margin: 18px auto;
	max-width: 640px;
	max-height: 380px;
	background: #ffffff;
	border-radius: 32px;
	box-shadow: 0 12px 32px rgba(5, 79, 210, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
	font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hcvm-processing-robot {
	width: 96px;
	height: 104px;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: hcvm-robot-bob 2.4s ease-in-out infinite;
}

.hcvm-processing-robot svg {
	width: 100%;
	height: 100%;
	display: block;
}

@keyframes hcvm-robot-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

.hcvm-processing-bar {
	position: relative;
	width: 100%;
	max-width: 520px;
	height: 16px;
	margin: 0 auto 14px;
	border-radius: 999px;
	background: #eef2f7;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.hcvm-processing-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #ee6823 0%, #f08a4d 100%);
	transition: width 0.35s ease;
	box-shadow: 0 0 12px rgba(238, 104, 35, 0.45);
	position: relative;
	overflow: hidden;
}

.hcvm-processing-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
	animation: hcvm-bar-shimmer 1.6s linear infinite;
}

@keyframes hcvm-bar-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.hcvm-processing-title {
	margin: 0 0 10px;
	color: #054fd2;
	font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	animation: hcvm-title-pulse 2s ease-in-out infinite;
}

@keyframes hcvm-title-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.65; }
}

.hcvm-processing-subtitle {
	margin: 12px auto 0;
	padding-top: 12px;
	border-top: 1px solid #eef2f7;
	max-width: 520px;
	color: #738198;
	font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
}

.hcvm-processing-message {
	margin: 10px auto 0;
	max-width: 520px;
	color: #d93025;
	min-height: 20px;
	font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
}

.hcvm-processing-retry {
	margin-top: 14px;
}

.hcvm-processing-retry[hidden] {
	display: none !important;
}

/* ===== Dashboard layout ===== */

.hcvm-dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 24px;
	align-items: start;
}

.hcvm-dashboard-left {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.hcvm-candidate-card,
.hcvm-score-card {
	border: 1px solid var(--hcvm-line);
	border-radius: 12px;
	padding: 18px;
	background: var(--hcvm-surface);
}

.hcvm-card-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hcvm-blue);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hcvm-candidate-info {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 0;
	font-size: 14px;
}

.hcvm-candidate-info dt {
	color: var(--hcvm-muted);
	font-weight: 500;
}

.hcvm-candidate-info dd {
	margin: 0;
	color: var(--hcvm-ink);
	word-break: break-word;
}

.hcvm-candidate-info dd a {
	color: var(--hcvm-blue);
}

.hcvm-score-card {
	text-align: center;
}

.hcvm-progress-ring {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 6px 0 14px;
}

.hcvm-progress-ring svg {
	width: 140px;
	height: 140px;
}

.hcvm-progress-ring .hcvm-ring-track {
	fill: none;
	stroke: rgba(23, 71, 157, 0.12);
	stroke-width: 12;
}

.hcvm-progress-ring .hcvm-ring-fill {
	fill: none;
	stroke-width: 12;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 0.6s ease;
}

.hcvm-progress-ring .hcvm-ring-fill.is-good {
	stroke: var(--hcvm-emerald);
}

.hcvm-progress-ring .hcvm-ring-fill.is-low {
	stroke: var(--hcvm-amber);
}

.hcvm-progress-ring .hcvm-ring-text {
	font-size: 24px;
	font-weight: 700;
	fill: var(--hcvm-ink);
	text-anchor: middle;
	dominant-baseline: central;
}

.hcvm-strategic-summary {
	margin: 0;
	font-size: 14px;
	color: var(--hcvm-ink);
	line-height: 1.55;
}

/* ===== Right column: tabs ===== */

.hcvm-dashboard-right {
	border: 1px solid var(--hcvm-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.hcvm-tab-nav {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--hcvm-line);
	background: var(--hcvm-surface);
}

.hcvm-tab-btn {
	flex: 1 1 auto;
	padding: 14px 16px;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--hcvm-muted);
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.hcvm-tab-btn:hover {
	color: var(--hcvm-blue);
	background: rgba(23, 71, 157, 0.04);
}

.hcvm-tab-btn.is-active {
	color: var(--hcvm-blue);
	border-bottom-color: var(--hcvm-orange);
	background: #fff;
}

.hcvm-tab-pane {
	display: none;
	padding: 20px 22px 24px;
}

.hcvm-tab-pane.is-active {
	display: block;
}

.hcvm-tab-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hcvm-blue);
}

.hcvm-tab-subtitle {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--hcvm-muted);
	line-height: 1.5;
}

/* ===== Tab 1: skill columns ===== */

.hcvm-skill-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 16px;
}

.hcvm-skill-column h5 {
	margin: 0 0 10px;
	font-size: 14px;
}

.hcvm-skill-matched h5 {
	color: var(--hcvm-emerald);
}

.hcvm-skill-gap h5 {
	color: var(--hcvm-amber);
}

.hcvm-icon-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcvm-icon-list li {
	position: relative;
	padding: 4px 0 4px 26px;
	font-size: 14px;
	line-height: 1.45;
}

.hcvm-icon-list--check li::before {
	content: '\2714';
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--hcvm-emerald);
	font-weight: 700;
}

.hcvm-icon-list--warn li::before {
	content: '\26A0';
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--hcvm-amber);
}

.hcvm-cross-industry {
	margin: 0;
	padding: 12px 14px;
	background: rgba(23, 71, 157, 0.05);
	border-left: 3px solid var(--hcvm-blue);
	border-radius: 6px;
	font-size: 13.5px;
	color: var(--hcvm-ink);
	line-height: 1.55;
}

/* ===== Tab 2: adaptive optimization items ===== */

.hcvm-optimization-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hcvm-opt-item {
	border: 1px solid var(--hcvm-line);
	border-radius: 10px;
	padding: 14px 16px;
	background: var(--hcvm-surface);
}

.hcvm-opt-item h5 {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--hcvm-blue);
}

.hcvm-opt-item dl {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 6px 12px;
	margin: 0;
	font-size: 13.5px;
}

.hcvm-opt-item dt {
	color: var(--hcvm-muted);
	font-weight: 600;
}

.hcvm-opt-item dd {
	margin: 0;
	color: var(--hcvm-ink);
	line-height: 1.5;
}

.hcvm-opt-item .hcvm-opt-suggested {
	color: var(--hcvm-blue);
}

.hcvm-opt-item .hcvm-opt-question {
	color: var(--hcvm-orange);
}

/* ===== Tab 3: bias guard log ===== */

.hcvm-status-note {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: rgba(16, 185, 129, 0.08);
	border-left: 3px solid var(--hcvm-emerald);
	border-radius: 6px;
	font-size: 13.5px;
	color: var(--hcvm-ink);
	line-height: 1.55;
}

.hcvm-bias-log {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hcvm-bias-log li {
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--hcvm-line);
	background: #fff;
	font-size: 13.5px;
	line-height: 1.5;
}

.hcvm-bias-tag {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.hcvm-bias-tag.is-blocked {
	background: rgba(217, 48, 37, 0.12);
	color: #d93025;
}

.hcvm-bias-tag.is-adjusted {
	background: rgba(238, 104, 35, 0.14);
	color: var(--hcvm-orange);
}

/* ===== Tab 4: interview scenarios ===== */

.hcvm-scenarios {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.hcvm-scenario {
	border: 1px solid var(--hcvm-line);
	border-radius: 10px;
	padding: 14px 16px;
	background: var(--hcvm-surface);
}

.hcvm-scenario h5 {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--hcvm-blue);
}

.hcvm-scenario dl {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 6px 12px;
	margin: 0;
	font-size: 13.5px;
}

.hcvm-scenario dt {
	color: var(--hcvm-muted);
	font-weight: 600;
}

.hcvm-scenario dd {
	margin: 0;
	color: var(--hcvm-ink);
	line-height: 1.5;
}

/* ===== Actions footer ===== */

.hcvm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--hcvm-line);
}

.hcvm-actions .btn,
.hcvm-actions .button {
	min-height: 48px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hcvm-actions .btn-theme {
	background: var(--hcvm-blue);
	color: #fff;
	border: 1px solid var(--hcvm-blue);
}

.hcvm-actions .btn-theme:hover {
	background: #0f3578;
	border-color: #0f3578;
	color: #fff;
}

.hcvm-actions .btn-default {
	background: #fff;
	color: var(--hcvm-ink);
	border: 1px solid var(--hcvm-line);
}

.hcvm-actions .btn-default:hover {
	background: rgba(238, 104, 35, 0.08);
	border-color: var(--hcvm-orange);
	color: var(--hcvm-orange);
}

/* ===== Mobile responsive ===== */

@media (max-width: 768px) {
	.hcvm-mfp .mfp-content {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
	}

	.hcvm-popup-wrapper.hcvm-dashboard-popup {
		padding: 18px;
		max-height: calc(100vh - 48px);
	}

	.hcvm-mfp.is-fullscreen .hcvm-popup-wrapper.hcvm-dashboard-popup {
		padding: 56px 16px 20px;
	}

	.hcvm-dashboard-grid {
		grid-template-columns: 1fr;
	}

	.hcvm-skill-columns {
		grid-template-columns: 1fr;
	}

	.hcvm-opt-item dl,
	.hcvm-scenario dl {
		grid-template-columns: 1fr;
	}

	.hcvm-opt-item dt,
	.hcvm-scenario dt {
		margin-top: 6px;
	}

	.hcvm-tab-btn {
		flex: 1 1 50%;
		font-size: 13px;
		padding: 10px 12px;
	}

	/* Theme .action KHÔNG phải flex (header v4 dùng text-align:center + inline-block,
	   vertical-align:top) → ép flex thật để control alignment trigger + bookmark. */
	.job-detail-buttons .action {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center !important;
		justify-content: center;
		gap: 12px;
	}

	/* Zero mọi margin riêng của 3 component → flex gap là khoảng cách DUY NHẤT,
	   đảm bảo spacing nhất quán: deadline↔trigger = trigger↔favourite. */
	.job-detail-buttons .btn-apply {
		margin: 0;
	}

	.job-detail-buttons .btn-shortlist {
		margin: 0;
	}

	/* deadline-time (Application ends) chiếm full-width → luôn dòng riêng trên top */
	.job-detail-buttons .deadline-time {
		flex: 0 0 100%;
		text-align: center;
		margin: 0;
	}

	/* Ring tĩnh ĐỐI XỨNG (bỏ pulse + bỏ drop-shadow hướng xuống 0 6px 18px gây
	   bóng đổ vào gap dưới làm favourite trông gần hơn deadline). Giờ gap trên/dưới
	   trigger cân đối → deadline↔trigger nhìn bằng trigger↔favourite. */
	.hcvm-trigger {
		margin: 0;
		width: fit-content;
		box-shadow: 0 0 0 3px rgba(238, 104, 35, 0.5);
		animation: none;
	}

	.hcvm-choice-actions {
		grid-template-columns: 1fr;
		/* mobile: ring↔ring = 24px khi xếp dọc (gap 32 − 4 − 4) */
		gap: 32px;
	}

	.hcvm-choice-btn {
		width: 100%;
		font-size: 16px;
	}

	.hcvm-processing-title {
		font-size: 20px;
	}

	.hcvm-processing-subtitle {
		font-size: 15px;
	}
}

/* < 400px: xếp dọc theo đúng DOM order → deadline (top) → trigger → favourite (bottom).
   gap = 19px = 16px (khoảng cách thị giác mong muốn) + 3px (bề dày ring nhô ra ngoài
   border-box, không chiếm layout) → mép ngoài ring cách deadline & favourite đúng 16px. */
@media (max-width: 399px) {
	.job-detail-buttons .action {
		flex-direction: column !important;
		align-items: center !important;
		gap: 19px;
	}

	.hcvm-trigger {
		margin: 0;
	}
}