/**
 * VTG Jobs — mobile-first, tablet, full-width desktop.
 */

svg.vtg-ico,
.vtg-menu-svg svg,
.vtg-dock-svg,
.vtg-account-pop svg,
.vtg-sidebar-search__icon svg {
	max-width: none !important;
	max-height: none !important;
	overflow: visible !important;
	flex-shrink: 0;
}

.vtg-menu-svg svg,
.vtg-sidebar-search__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.vtg-jobs-page,
.vtg-jobs-archive,
.vtg-job-single,
.vtg-jobs-search,
.vtg-jobs-list,
.vtg-job-card,
.vtg-dash,
.vtg-jobs-form {
	box-sizing: border-box;
	font-family: "Be Vietnam Pro", "Noto Sans", system-ui, sans-serif;
	color: #16181d;
	max-width: none;
	width: 100%;
}

/* Every top-level page wrapper, one padding. The homepage had none and the help
   page had its own, so the distance from the header to the first heading — and
   from the last block to the footer — changed depending on which page you were
   on. */
.vtg-jobs-page,
.vtg-jobs-archive,
.vtg-job-single,
.vtg-home,
.vtg-help {
	padding: 8px 0 32px;
}

@media (min-width: 850px) {
	.vtg-jobs-page,
	.vtg-jobs-archive,
	.vtg-job-single,
	.vtg-home,
	.vtg-help {
		padding: 4px 0 48px;
	}
}

.vtg-job-single__head h1,
.vtg-jobs-archive h1,
.vtg-page-title {
	margin: 0 0 8px;
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.25;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
.vtg-page-title {
	margin: 0 0 16px;
}

/* Normalize plain WP page typography regardless of the active theme's own styles.
   Direct-child only, so nested components (buttons, forms, cards) keep their own styling. */
.vtg-page-content > h1 {
	margin: 0 0 12px;
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 700;
	color: #0f172a;
	line-height: 1.25;
}
.vtg-page-content > h2 {
	margin: 20px 0 10px;
	font-size: 1.2rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}
.vtg-page-content > h3 {
	margin: 16px 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
}
.vtg-page-content > p {
	margin: 0 0 12px;
	color: #334155;
	font-size: 15px;
	line-height: 1.7;
}
.vtg-page-content > p a:not(.vtg-jobs-btn),
.vtg-page-content > ul a:not(.vtg-jobs-btn),
.vtg-page-content > ol a:not(.vtg-jobs-btn) {
	color: #154787;
	text-decoration: underline;
}
.vtg-page-content > p a:not(.vtg-jobs-btn):hover,
.vtg-page-content > ul a:not(.vtg-jobs-btn):hover,
.vtg-page-content > ol a:not(.vtg-jobs-btn):hover {
	color: #0e3568;
}
.vtg-page-content > ul,
.vtg-page-content > ol {
	margin: 0 0 12px;
	padding-left: 1.3em;
	color: #334155;
	font-size: 15px;
	line-height: 1.7;
}

.vtg-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 13px;
	color: #64748b;
}
.vtg-breadcrumb__home {
	display: inline-flex;
	align-items: center;
	color: #64748b;
}
.vtg-breadcrumb__home:hover { color: #154787; }
.vtg-breadcrumb__sep {
	color: #c4bba8;
}
.vtg-breadcrumb__link {
	color: #64748b;
	text-decoration: none;
}
.vtg-breadcrumb__link:hover {
	color: #154787;
	text-decoration: underline;
}
.vtg-breadcrumb__current {
	color: #334155;
	font-weight: 600;
}

.vtg-jobs-search {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0 0 20px;
	padding: 14px;
	border: 1px solid #d9d2c4;
	border-radius: 12px;
	background: #fffbf5;
}

@media (min-width: 600px) {
	.vtg-jobs-search {
		grid-template-columns: 1fr 1fr;
		padding: 16px;
		gap: 12px;
	}
}

@media (min-width: 850px) {
	.vtg-jobs-search {
		grid-template-columns: minmax(180px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto;
		align-items: center;
	}
}

.vtg-jobs-search__field span { display: none; }
.vtg-jobs-form label span,
.vtg-apply-form label span {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5c5a54;
}

/* Push buttons are excluded, not just checkboxes and radios. This rule paints a
   white field background, and it out-specifies .vtg-jobs-btn (three attribute
   parts against one class), so an <input type="submit"> carrying that class came
   out white-on-white with its label invisible — which is what WordPress's
   comment_form() emits for the comment submit. Everything else on the site uses
   <button>, which this selector never matched, so the trap only sprang there. */
.vtg-jobs-search input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.vtg-jobs-search select,
.vtg-jobs-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.vtg-jobs-form select,
.vtg-jobs-form textarea,
.vtg-apply-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.vtg-apply-form select,
.vtg-apply-form textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #c4bba8;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
}

.vtg-jobs-form input[type="checkbox"],
.vtg-jobs-form input[type="radio"],
.vtg-apply-form input[type="checkbox"],
.vtg-apply-form input[type="radio"] {
	width: 16px;
	height: 16px;
	min-height: 0;
	flex-shrink: 0;
}
.vtg-jobs-form label:has(> input[type="checkbox"]),
.vtg-apply-form label:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.vtg-jobs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: #154787;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	width: auto;
}
.vtg-jobs-btn:hover { background: #0e2f5c; color: #fff; }
.vtg-job-card__cta { display: none !important; }

.vtg-jobs-found {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: #5c5a54;
}

.vtg-jobs-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.vtg-jobs-pager__n {
	min-width: 40px;
	min-height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	color: #16181d;
	text-decoration: none;
}

.vtg-jobs-pager__n.is-active {
	background: #154787;
	border-color: #154787;
	color: #f4efe6;
}

.vtg-job-single__kicker {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #154787;
	margin: 0 0 6px;
}

/* Layout: mobile = single column stack; desktop = 3 columns.
   grid-template-areas itself is written inline on the element, because which
   rows exist depends on whether the posting has a company, skills or benefits —
   see $layout_areas in single-job_listing.php. Do not add it here as well: an
   inline style wins over a stylesheet, so a copy in this file would look
   authoritative while changing nothing. The rows it builds are
   "head head about" / "desc desc apply" / "lists lists apply". */
.vtg-job-single__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}
.vtg-job-single__layout > .vtg-panel,
.vtg-job-single__lists > .vtg-panel {
	margin: 0 !important;
}

@media (min-width: 850px) {
	.vtg-job-single__layout {
		/* minmax(0,…) rather than 1fr: 1fr floors at min-content, so one long
		   unbroken word in the description widens its column and squeezes the rest. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.vtg-job-single__area-head { grid-area: head; }
	.vtg-job-single__area-about { grid-area: about; }
	.vtg-job-single__area-desc { grid-area: desc; }
	.vtg-job-single__area-lists { grid-area: lists; }
	.vtg-job-single__area-apply {
		grid-area: apply;
		/* The rail spans two rows; without this it stretches to their full height
		   and the panel background runs on well past its own text. */
		align-self: start;
	}
}

/* Kỹ năng | Phúc lợi — two columns of one row on desktop, stacked on mobile. */
.vtg-job-single__lists {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

@media (min-width: 850px) {
	.vtg-job-single__lists {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 849px) {
	.vtg-job-single__layout {
		grid-template-areas: none !important;
		grid-template-columns: 1fr !important;
	}
	.vtg-job-single__area-apply { order: -1; }
}

.vtg-job-single__content {
	font-size: 1rem;
	line-height: 1.65;
}

.vtg-job-single__apply,
.vtg-dash {
	margin-top: 8px;
	padding: 16px;
	border: 1px solid #d9d2c4;
	border-radius: 16px;
	background: #fffbf5;
}

@media (min-width: 850px) {
	.vtg-job-single__apply {
		position: sticky;
		top: 16px;
		margin-top: 0;
	}

	.vtg-dash {
		padding: 20px 24px;
	}
}

.vtg-dash {
	margin-top: 0;
}

.vtg-dash__nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px 12px;
	margin: -4px -16px 16px;
	padding: 4px 16px 12px;
	border-bottom: 1px solid #d9d2c4;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

@media (min-width: 850px) {
	.vtg-dash__nav {
		flex-wrap: wrap;
		margin: 0 0 20px;
		padding: 0 0 12px;
		overflow: visible;
	}
}

.vtg-dash__nav a {
	color: #5c5a54;
	text-decoration: none;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: 0.9rem;
	padding: 0 4px;
}

.vtg-dash__nav a.is-active {
	color: #154787;
	font-weight: 600;
}

.vtg-jobs-form {
	display: grid;
	gap: 14px;
	max-width: none;
	width: 100%;
}

.vtg-jobs-form > h2 {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px solid #e8e4dc;
	font-size: 1.05rem;
}
.vtg-jobs-form > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.vtg-jobs-form__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 4px;
	border-radius: 50%;
	background: #154787;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	vertical-align: middle;
}
.vtg-jobs-form__checkrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.vtg-jobs-form__checkrow label {
	min-width: 0;
}
.vtg-jobs-form__checkrow--inline {
	align-self: end;
	min-height: 44px;
	align-items: center;
}

/* Wide desktop/tablet: pack short fields 3 per row instead of stretching to full width. */
@media (min-width: 1280px) {
	.vtg-jobs-form {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 600px) {
	.vtg-jobs-form {
		grid-template-columns: 1fr 1fr;
	}

	.vtg-jobs-form textarea,
	.vtg-jobs-form .vtg-jobs-form__full,
	.vtg-jobs-form > p,
	.vtg-jobs-form > button,
	.vtg-jobs-form > .vtg-jobs-actions {
		grid-column: 1 / -1;
	}
}

@media (min-width: 850px) {
	.vtg-jobs-form {
		grid-template-columns: 1fr 1fr;
	}

	.vtg-jobs-form textarea,
	.vtg-jobs-form .vtg-jobs-form__full,
	.vtg-jobs-form > p,
	.vtg-jobs-form > button,
	.vtg-jobs-form > .vtg-jobs-actions {
		grid-column: 1 / -1;
	}
}

/* Long forms stay readable instead of stretching edge-to-edge on wide screens. */
.vtg-guest-post .vtg-dash__body {
	max-width: 1180px;
	margin: 0 auto;
}

.vtg-auth-gate {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding: 32px 20px;
}
.vtg-auth-gate__lead {
	margin: 0 0 20px;
	color: #475569;
	font-size: 15px;
	line-height: 1.6;
}
.vtg-auth-gate__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 16px;
}
.vtg-auth-gate__hint {
	margin: 0;
	color: #94a3b8;
	font-size: 13px;
}

.vtg-guest-post__co-hint {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #b45309;
}

/* Two-column layout: main job content left, pay/contact/account sidebar card right. */
.vtg-guest-post__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}
@media (min-width: 900px) {
	.vtg-guest-post__grid {
		grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
	}
	.vtg-guest-post__col-side {
		position: sticky;
		top: 16px;
	}
}
.vtg-guest-post__card {
	padding: 16px;
	margin-bottom: 16px;
	background: #faf9f6;
	border: 1px solid #e8e4dc;
	border-radius: 12px;
}
.vtg-guest-post__card:last-of-type {
	margin-bottom: 0;
}
.vtg-guest-post__card .vtg-jobs-form__step {
	background: #C09C40;
}
.vtg-guest-post__submit {
	width: 100%;
	margin-top: 16px;
	justify-content: center;
}

.vtg-dash__body {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vtg-jobs-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
}

.vtg-jobs-table th,
.vtg-jobs-table td {
	padding: 10px 8px;
	border-bottom: 1px solid #d9d2c4;
	text-align: left;
	font-size: 0.875rem;
	vertical-align: top;
}

@media (max-width: 599px) {
	.vtg-dash__body {
		overflow-x: visible;
	}

	.vtg-jobs-table {
		min-width: 0;
		border-collapse: separate;
		border-spacing: 0 10px;
	}

	.vtg-jobs-table thead {
		display: none;
	}

	.vtg-jobs-table tbody,
	.vtg-jobs-table tr,
	.vtg-jobs-table th,
	.vtg-jobs-table td {
		display: block;
		width: 100%;
	}

	.vtg-jobs-table tr {
		margin: 0;
		padding: 12px 14px;
		border: 1px solid #d9d2c4;
		border-radius: 12px;
		background: #fffbf5;
	}

	.vtg-jobs-table td {
		border: 0;
		padding: 4px 0;
	}

	.vtg-jobs-table td:first-child {
		font-weight: 600;
		font-size: 1rem;
		padding-top: 0;
	}

	.vtg-jobs-table td:last-child {
		padding-bottom: 0;
	}
}

@media (min-width: 600px) and (max-width: 849px) {
	.vtg-jobs-table {
		min-width: 0;
		font-size: 0.8125rem;
	}

	.vtg-jobs-table th,
	.vtg-jobs-table td {
		padding: 8px 6px;
	}
}

.vtg-jobs-notice {
	padding: 12px 14px;
	border-radius: 8px;
	background: #e8efe4;
}

.vtg-company-form__preview {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 8px;
	border: 1px solid #e8e4dc;
}
.vtg-company-form__preview--cover {
	width: 100%;
	max-width: 360px;
	height: 90px;
}

/* ===== Company profile form ===== */
.vtg-copro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.vtg-copro .vtg-panel { margin: 0 !important; }
.vtg-copro__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}
.vtg-copro__bar .vtg-jobs-form__hint { margin: 0; }
.vtg-copro__bar-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
/* Save stays reachable on a long form. Matches .vtg-dash__body's white so the
   fade blends instead of banding. */
.vtg-copro__save {
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding: 14px 0 4px;
	background: linear-gradient(to top, #fff 65%, rgba(255, 255, 255, 0));
}

/* Image field: current image next to the picker, so it's obvious what will be replaced */
.vtg-media-field { min-width: 0; }
.vtg-media-field__k {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5c5a54;
}
.vtg-media-field__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.vtg-media-field__thumb {
	flex: 0 0 auto;
	border: 1px solid #e8e4dc;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.vtg-media-field__thumb img { display: block; }
.vtg-media-field__thumb--logo { width: 72px; height: 72px; }
.vtg-media-field__thumb--logo img { width: 72px; height: 72px; object-fit: cover; }
.vtg-media-field__thumb--cover { width: 150px; height: 72px; }
.vtg-media-field__thumb--cover img { width: 150px; height: 72px; object-fit: cover; }
.vtg-media-field__ctl {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.vtg-media-field__ctl input[type="file"] { max-width: 100%; font-size: 13px; }
.vtg-media-field input[type="file"] { font-size: 13px; }

.vtg-alerts-help {
	font-size: 14px;
	line-height: 1.6;
	color: #3f3d38;
}
.vtg-alerts-help p {
	margin: 0 0 8px;
}
.vtg-alerts-help ol {
	margin: 0;
	padding-left: 20px;
}
.vtg-alerts-help li {
	margin-bottom: 4px;
}
.vtg-alerts-help li:last-child {
	margin-bottom: 0;
}

.vtg-jobs-notice--err {
	background: #f8e8e8;
}

.vtg-jobs-empty {
	padding: 32px 0;
	color: #5c5a54;
}

.vtg-cv-list {
	padding-left: 18px;
}

.vtg-apply-form {
	display: grid;
	gap: 12px;
}

/* CV deadline notice in the apply panel. Two states, because "còn nhận đến
   30/09" and "đã đóng từ 30/09" are opposite news and must not look alike. */
.vtg-apply-until,
.vtg-apply-closed {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 0.875rem;
	line-height: 1.4;
}

.vtg-apply-until {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.vtg-apply-closed {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	font-weight: 600;
}

.vtg-apply-closed .vtg-ico {
	flex: 0 0 auto;
}

.vtg-jobs-search__check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 0.9rem;
}

.vtg-pill {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #ebe4d6;
	color: #5c5a54;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.vtg-pill--urgent {
	background: #f4d7b0;
	color: #6a3d00;
}

.vtg-pill--ok {
	background: #dce8d4;
	color: #2c4a1f;
}

.vtg-badge {
	display: inline-flex;
	min-width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 999px;
	background: #154787;
	color: #f4efe6;
	font-size: 11px;
	align-items: center;
	justify-content: center;
}

.vtg-jobs-btn--sm {
	min-height: 36px;
	padding: 0 10px;
	font-size: 13px;
	width: auto;
}

.vtg-jobs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.vtg-jobs-actions form {
	display: inline;
}

.vtg-inline-form,
.vtg-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.vtg-item-row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 0 0 12px;
	padding: 30px 12px 12px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fffefb;
}

/* Awards and certificates are a year and a line of text, not the five fields an
   experience row holds. A narrow year column keeps the text field the width of
   the thing actually being typed into. */
.vtg-item-row--short {
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: start;
}
.vtg-item-row__remove {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: #f1efe9;
	color: #78716c;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.vtg-item-row__remove:hover {
	background: #fee2e2;
	color: #b91c1c;
}
.vtg-item-repeater__add {
	margin-top: 4px;
}

.vtg-profile-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.vtg-profile-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.vtg-profile-col > h2 {
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px solid #e8e4dc;
	font-size: 1.05rem;
}
.vtg-profile-col > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
@media (min-width: 700px) {
	.vtg-profile-row {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}
.vtg-item-row textarea {
	grid-column: 1 / -1;
}
.vtg-item-row__month {
	display: block;
	min-width: 0;
}
.vtg-item-row__month input {
	width: 100%;
}

/* No negative top margin: these hints also stand alone between blocks, where a
   pull-up overlaps whatever sits above. line-height is required too, otherwise
   descenders get clipped inside tight-line-height containers. */
.vtg-jobs-form__hint {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: #94a3b8;
}
.vtg-jobs-form__hint-inline {
	font-weight: 400;
	color: #94a3b8;
}
.vtg-jobs-form__readonly {
	margin: 0;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 2px;
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
}

.vtg-toggle-switch {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}
.vtg-toggle-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.vtg-toggle-switch__track {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	background: #cbd5e1;
	border-radius: 999px;
	transition: background .15s ease;
}
.vtg-toggle-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
	transition: transform .15s ease;
}
.vtg-toggle-switch__input:checked + .vtg-toggle-switch__track {
	background: #154787;
}
.vtg-toggle-switch__input:checked + .vtg-toggle-switch__track .vtg-toggle-switch__thumb {
	transform: translateX(20px);
}
.vtg-toggle-switch__input:focus-visible + .vtg-toggle-switch__track {
	outline: 2px solid #154787;
	outline-offset: 2px;
}
.vtg-toggle-switch__label {
	font-size: 14px;
	color: #16181d;
}

.vtg-jobs-form__toggles-label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5c5a54;
}

.vtg-alerts-page {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}
.vtg-alerts-page__form {
	margin: 0;
}
.vtg-alerts-page .vtg-alerts-help {
	margin: 0;
}
@media (min-width: 1000px) {
	.vtg-alerts-page {
		grid-template-columns: 1.3fr 1fr;
	}
}

.vtg-alerts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.vtg-alerts-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
@media (min-width: 700px) {
	.vtg-alerts-grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.vtg-multiselect {
	position: relative;
}
.vtg-multiselect__box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 10px;
	border: 1px solid #c4bba8;
	border-radius: 8px;
	background: #fff;
	cursor: text;
}
.vtg-multiselect__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.vtg-multiselect__input {
	flex: 1 1 120px !important;
	width: auto !important;
	min-width: 120px;
	min-height: 0 !important;
	border: 0 !important;
	outline: 0;
	padding: 4px 2px !important;
	font: inherit;
	font-size: 14px;
	background: transparent;
}
.vtg-multiselect__panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid #c4bba8;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.vtg-multiselect__option {
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
	color: #3f3d38;
	cursor: pointer;
}
.vtg-multiselect__option:hover {
	background: #f2ede2;
}
.vtg-multiselect__option.is-selected {
	background: #eef2ff;
	color: #154787;
	font-weight: 600;
}

.vtg-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 10px;
	border: 1px solid #c4bba8;
	border-radius: 8px;
	background: #fff;
}
.vtg-tags__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.vtg-tags__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px 4px 10px;
	border-radius: 999px;
	background: #eef2ff;
	color: #154787;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.vtg-tags__chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #154787;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}
.vtg-tags__chip-x:hover {
	background: #dbe4ff;
}
.vtg-tags__input {
	flex: 1 1 120px !important;
	width: auto !important;
	min-width: 120px;
	min-height: 0 !important;
	border: 0 !important;
	outline: 0;
	padding: 4px 2px !important;
	font: inherit;
	font-size: 14px;
	background: transparent;
}

/* ---------------------------------------------------------------------------
   Application cards + the conversation on them. Shared by the candidate's
   "Hồ sơ đã nộp" and the employer's applicant detail, so a message looks the
   same to both people reading it.
   --------------------------------------------------------------------------- */
.vtg-appcards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 16px;
}

.vtg-appcard {
	padding: 16px;
	border: 1px solid #d9d2c4;
	border-top: 3px solid #C09C40;
	border-radius: 12px;
	background: #fff;
}

/* A rejected application is still worth reading, just not worth waiting on. */
.vtg-appcard.is-closed {
	background: #fbfaf8;
	border-top-color: #cbd5e1;
}

.vtg-appcard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.vtg-appcard__title {
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
}

.vtg-appcard__title a {
	color: #0f172a;
	text-decoration: none;
}

.vtg-appcard__title a:hover {
	color: #154787;
}

.vtg-appcard__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0 0 12px;
	padding: 0 0 12px;
	list-style: none;
	border-bottom: 1px solid #f0ece3;
}

.vtg-appcard__stats strong {
	display: block;
	font-size: 17px;
	color: #154787;
}

.vtg-appcard__stats span {
	font-size: 12px;
	color: #64748b;
}

.vtg-appcard__note {
	margin: 10px 0 0;
	font-size: 13px;
	color: #64748b;
}

.vtg-thread {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vtg-thread__head {
	margin: 20px 0 4px;
	padding-top: 16px;
	border-top: 1px solid #e7e1d5;
}

.vtg-thread__row {
	padding: 8px 12px;
	border-radius: 10px;
	background: #f6f8fb;
	/* Not full width: a wall of edge-to-edge blocks reads as one paragraph
	   rather than as an exchange between two people. */
	max-width: 88%;
}

/* Whoever is reading sits on the right. The candidate template and the employer
   template each map their own side to --candidate / --employer, so this stays a
   single pair of rules rather than two near-identical sets. */
.vtg-thread__row--employer {
	background: #eef2f8;
	align-self: flex-start;
}

.vtg-thread__row--candidate {
	background: #f1f7f2;
	align-self: flex-end;
}

/* A status change is the system speaking, so it is centred and quieter than
   either person's messages. */
.vtg-thread__row--system {
	align-self: center;
	max-width: 100%;
	background: transparent;
	border: 1px dashed #e2ddd1;
	text-align: center;
}

.vtg-thread__who {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	color: #94a3b8;
	margin-bottom: 2px;
}

.vtg-thread__body {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #1f2937;
	/* A pasted link with no spaces would otherwise stretch the card. */
	overflow-wrap: anywhere;
	white-space: pre-line;
}

/* --- Structured rows -------------------------------------------------------
   An invite, a rejection or a document request is a thing to act on, not a
   remark. They get a card of their own so they do not scroll past looking like
   another line of chat. */
.vtg-thread__row--k-interview,
.vtg-thread__row--k-reject,
.vtg-thread__row--k-request,
.vtg-thread__row--k-withdraw {
	max-width: 100%;
	align-self: stretch;
	border: 1px solid #d9d2c4;
	background: #fffefb;
}

.vtg-thread__row--k-interview {
	border-left: 3px solid #154787;
}

.vtg-thread__row--k-request {
	border-left: 3px solid #C09C40;
}

.vtg-thread__row--k-reject,
.vtg-thread__row--k-withdraw {
	border-left: 3px solid #94a3b8;
	background: #fbfaf8;
}

.vtg-thread__title {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
}

.vtg-thread__fact {
	margin: 0 0 2px;
	font-size: 14px;
	color: #1f2937;
}

.vtg-thread__state {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
}

.vtg-thread__reply {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
}

.vtg-thread__reply textarea {
	flex: 1 1 180px;
	min-width: 0;
	min-height: 38px;
	padding: 8px 10px;
	border: 1px solid #c4bba8;
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
}

.vtg-thread__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Employer's three extra actions. <details> so they stay out of the way until
   wanted — the free-text box is the common case. */
.vtg-appact {
	margin-top: 10px;
	border: 1px solid #e7e1d5;
	border-radius: 10px;
	background: #fffefb;
}

.vtg-appact > summary {
	padding: 10px 14px;
	font-weight: 600;
	font-size: 14px;
	color: #154787;
	cursor: pointer;
}

.vtg-appact[open] > summary {
	border-bottom: 1px solid #e7e1d5;
}

.vtg-appact .vtg-jobs-form {
	padding: 14px;
}

.vtg-appact--warn > summary {
	color: #b45309;
}

/* Withdrawing is destructive and rare: available, but never competing with the
   reply box for attention. */
.vtg-appcard__withdraw {
	margin-top: 10px;
}

.vtg-appcard__withdraw-btn {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: #94a3b8;
	text-decoration: underline;
	cursor: pointer;
}

.vtg-appcard__withdraw-btn:hover {
	color: #dc2626;
}

.vtg-appcard__reply {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
}

.vtg-appcard__reply textarea {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #c4bba8;
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
}

@media (max-width: 520px) {
	.vtg-appcard__stats {
		gap: 14px;
	}

	.vtg-appcard__reply {
		flex-direction: column;
	}

	.vtg-appcard__reply textarea {
		width: 100%;
	}
}

.vtg-ats-detail {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid #d9d2c4;
	border-radius: 12px;
	background: #fff;
}

.vtg-cover {
	margin: 12px 0;
}

.vtg-notes {
	list-style: none;
	padding: 0;
}

.vtg-notes time {
	display: block;
	font-size: 12px;
	color: #5c5a54;
}

.vtg-inbox {
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
}

.vtg-inbox li {
	padding: 12px 0;
	border-bottom: 1px solid #d9d2c4;
}

.vtg-inbox .is-unread strong {
	color: #154787;
}

.vtg-inbox__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.vtg-inbox li p {
	margin: 4px 0 8px;
	line-height: 1.55;
	color: #475569;
	word-break: break-word;
}

.vtg-inbox__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.vtg-inbox__foot time {
	font-size: 13px;
	color: #64748b;
}

/* Shared filter bar for the applicant / inbox / analytics lists. */
.vtg-ats-filter {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin: 12px 0 16px;
}

.vtg-ats-filter label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	min-width: 0;
}

.vtg-ats-filter label > span {
	font-size: 13px;
	color: #475569;
	line-height: 1.4;
}

.vtg-ats-filter select {
	max-width: 260px;
	padding: 8px 10px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
}

@media (max-width: 600px) {
	.vtg-ats-filter {
		flex-direction: column;
		align-items: stretch;
	}

	.vtg-ats-filter select {
		max-width: none;
	}
}

.vtg-stat-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0;
}

.vtg-stat-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid #d9d2c4;
	border-radius: 10px;
	background: #fff;
}

.vtg-stat-card__n {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #154787;
}

.vtg-stat-card__l {
	font-size: 13px;
	line-height: 1.4;
	color: #64748b;
}

@media (max-width: 900px) {
	.vtg-stat-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Personal account page. */
.vtg-me-avatar {
	margin: 16px 0;
}

.vtg-me-avatar__row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
}

.vtg-me-avatar__img img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 28%;
	border: 1px solid #d9d2c4;
	display: block;
}

.vtg-me-avatar__form {
	flex: 1 1 260px;
	min-width: 0;
}

/* The shared form is a grid; this one is a plain stack. */
.vtg-jobs-form.vtg-me-avatar__form {
	display: block;
}

.vtg-me-verify {
	margin: -4px 0 0;
}

.vtg-check {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.5;
}

.vtg-check input[type="checkbox"] {
	width: auto;
	margin-top: 3px;
	flex: 0 0 auto;
}

.vtg-check.is-disabled {
	opacity: .7;
}

.vtg-check > span {
	font-size: 14px;
	color: #1f2937;
}

.vtg-check > span small {
	display: block;
	margin: 2px 0 0;
}

.vtg-pref-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
	padding: 14px 16px;
	border: 1px solid #d9d2c4;
	border-radius: 10px;
	background: #fff;
}

@media (max-width: 600px) {
	.vtg-pref-grid {
		grid-template-columns: 1fr;
	}
}

.vtg-talent-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 850px) {
	.vtg-talent-list {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}
}

.vtg-talent-list li {
	padding: 12px 0;
	border-bottom: 1px solid #d9d2c4;
}

.vtg-report {
	margin-top: 24px;
}

.vtg-similar {
	margin-top: 32px;
	grid-column: 1 / -1;
}

.vtg-jobs-form .vtg-inline {
	margin-top: 6px;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}


/* --- 1.5.0 card / facts / chips / pending --- */
.vtg-job-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:10px;background:#fff}
.vtg-job-card__logo{flex:0 0 40px;width:40px;height:40px;border-radius:10px;overflow:hidden;background:#eef2ff;display:flex;align-items:center;justify-content:center}
.vtg-job-card__logo img{width:40px;height:40px;object-fit:cover}
.vtg-job-card__initial{font-weight:700;color:#154787}
.vtg-job-card__main{flex:1;min-width:0}
.vtg-job-card__actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.vtg-job-card__heart{border:0;background:transparent;color:#9ca3af;font-size:18px;cursor:pointer;line-height:1;padding:4px}
.vtg-job-card__heart:hover{color:#c0392b}
.vtg-job-card__age{opacity:.7}
.vtg-job-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;list-style:none;margin:12px 0 0;padding:0}
.vtg-job-facts__item{background:#f8fafc;border-radius:10px;padding:10px 12px}
.vtg-job-facts__k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#64748b}
.vtg-job-facts__v{font-weight:600;color:#0f172a}
.vtg-jobs-notice--pending{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;padding:10px 14px;border-radius:10px}
.vtg-filter-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:8px 0 12px;-webkit-overflow-scrolling:touch}
.vtg-filter-chips a{flex:0 0 auto;padding:6px 12px;border-radius:999px;background:#f1f5f9;color:#154787;text-decoration:none;font-size:13px;white-space:nowrap}
.vtg-filter-chips a.is-active{background:#154787;color:#fff}
.vtg-job-card.is-seen{opacity:.72}
.vtg-job-card.is-seen .vtg-job-card__title a{font-weight:400}
.vtg-apply-sticky{display:none}
@media (max-width:849px){
  .vtg-apply-sticky{display:block;position:fixed;left:0;right:0;bottom:56px;z-index:40;padding:8px 12px;background:rgba(255,255,255,.96);border-top:1px solid #e5e7eb}
  .vtg-apply-sticky .vtg-jobs-btn{width:100%}
}
.vtg-status-stepper{display:flex;gap:0;list-style:none;padding:0;margin:12px 0;flex-wrap:wrap}
.vtg-status-stepper li{flex:1;min-width:70px;text-align:center;font-size:11px;padding:6px 4px;border-bottom:3px solid #e5e7eb;color:#94a3b8}
.vtg-status-stepper li.is-done{border-color:#154787;color:#154787;font-weight:600}
.vtg-status-stepper li.is-current{border-color:#C09C40;color:#92400e;font-weight:700}



/* ===== 1.7 home / cards ===== */
.vtg-jobs-list,
.vtg-jobs-page,
.vtg-jobs-search { width: 100% !important; max-width: none !important; }
.vtg-jobs-list__items {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  align-items: start !important;
}
.vtg-job-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 14px !important;
  background: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.vtg-job-card__cta,
.vtg-job-card .vtg-jobs-btn { display: none !important; }
.vtg-job-card__actions {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 32px !important;
}
.vtg-dash, .vtg-dash__body { width: 100% !important; max-width: none !important; }
@media (max-width: 1199px) {
  .vtg-jobs-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .vtg-jobs-list__items { grid-template-columns: 1fr !important; }
}

/* Verified check on card */
.vtg-job-card__verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 4px; border-radius: 50%;
  background: #16a34a; color: #fff; font-size: 9px; font-weight: 800; line-height: 1;
  vertical-align: middle; flex-shrink: 0;
}
.vtg-job-card__loc, .vtg-job-card__exp { color: #64748b; }


/* ===== Single job detail — card layout ===== */
.vtg-panel {
  background: #fff;
  border: 1px solid #e8e4dc;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 16px;
}
.vtg-panel__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.vtg-job-single__head {
  margin-bottom: 16px;
}
.vtg-job-single__head-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.vtg-job-single__logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vtg-job-single__logo img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}
.vtg-job-single__logo--sm {
  flex-basis: 64px;
  width: 64px;
  height: 64px;
  align-self: center;
  border-radius: 12px;
}
.vtg-job-single__logo--sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vtg-job-single__initial {
  font-weight: 800;
  font-size: 22px;
  color: #154787;
}
.vtg-job-single__logo--sm .vtg-job-single__initial {
  font-size: 20px;
}
.vtg-job-single__head-main {
  flex: 1;
  min-width: 0;
}
.vtg-job-single__title {
  margin: 0 0 6px !important;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.65rem) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.vtg-job-single__company {
  margin: 0;
  font-size: 14px;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.vtg-job-single__company a {
  color: #154787;
  font-weight: 600;
  text-decoration: none;
}
.vtg-job-single__company a:hover {
  text-decoration: underline;
}
.vtg-job-single__posted {
  color: #94a3b8;
  font-weight: 400;
}
.vtg-job-single__kicker { display: none !important; }

/* Facts grid */
.vtg-job-facts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vtg-job-facts__item {
  background: #f8fafc !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
.vtg-job-facts__item.is-pay {
  background: #eff6ff !important;
  border-color: #dbeafe !important;
}
.vtg-job-facts__item.is-pay .vtg-job-facts__v {
  color: #154787 !important;
  font-weight: 800 !important;
}
/* .vtg-job-single__skills used to be a wrap of pills inside the header. It is a
   panel of its own now, next to Phúc lợi — see the .vtg-skill-list block below.
   The old flex rule is gone rather than left dormant: it would have turned the
   panel into a flex row and laid the heading out beside the list. */
.vtg-job-facts__k {
  display: block !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #64748b !important;
  margin-bottom: 2px !important;
}
.vtg-job-facts__v {
  font-weight: 600 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  word-break: break-word;
}

/* Body panels */
.vtg-job-single__content {
  font-size: 15px;
  line-height: 1.7;
  color: #334155;
}
.vtg-job-single__content p { margin: 0 0 10px; }
.vtg-job-single__content ul {
  margin: 0 0 12px;
  padding-left: 1.2em;
}
.vtg-job-single__content li { margin-bottom: 4px; }

.vtg-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.vtg-benefit-list li {
  position: relative;
  padding: 8px 12px 8px 36px;
  background: #f0fdf4;
  border-radius: 10px;
  color: #166534;
  font-size: 14px;
  font-weight: 500;
}
.vtg-benefit-list li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Kỹ năng: same shape as Phúc lợi so the pair reads as one row of two, amber
   instead of green and a diamond instead of a tick. Colour alone would not carry
   the difference for a red–green colour-blind reader, which is why the marker
   glyph changes too. Not a star: on this site a star already means "doanh
   nghiệp trả phí nổi bật", and a second meaning would blunt the first. */
.vtg-skill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.vtg-skill-list li {
  position: relative;
  padding: 8px 12px 8px 36px;
  background: #fefce8;
  border-radius: 10px;
  color: #854d0e;
  font-size: 14px;
  font-weight: 500;
}
.vtg-skill-list li::before {
  content: "◆";
  position: absolute;
  left: 12px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eab308;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vtg-job-single__co-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.vtg-job-single__co-name {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 15px;
}
.vtg-job-single__co-name a {
  color: #0f172a;
  text-decoration: none;
}
.vtg-job-single__co-addr {
  margin: 0 0 6px;
  font-size: 13px;
  color: #64748b;
}
.vtg-link {
  color: #154787;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.vtg-link:hover { text-decoration: underline; }

/* Apply sticky panel */
.vtg-job-single__apply {
  background: #fffbf5 !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin: 0 !important;
}
.vtg-job-single__apply-pay {
  margin: -4px 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: #154787;
}
.vtg-jobs-btn--block {
  width: 100% !important;
  display: flex !important;
}
.vtg-job-single__auth-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.vtg-muted { color: #64748b; font-size: 14px; }

.vtg-report {
  margin-top: 14px;
  border-top: 1px solid #e8e4dc;
  padding-top: 10px;
}
.vtg-report summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 12px;
  color: #dc2626;
  list-style: none;
}
.vtg-report summary::-webkit-details-marker { display: none; }
.vtg-report__ico {
  flex-shrink: 0;
  stroke: #dc2626;
}

.vtg-similar {
  margin-top: 24px;
}
.vtg-similar .vtg-panel__title {
  margin-bottom: 12px;
}

/* Hide old stray meta list if any theme leftover */
.vtg-job-single__head > ul.vtg-job-card__meta {
  display: none !important;
}

/* ===== Company brand page ===== */
.vtg-company-hero {
  padding: 0;
  overflow: hidden;
}
.vtg-company-hero__cover {
  height: 120px;
  background: linear-gradient(120deg, #154787, #C09C40);
  background-size: cover;
  background-position: center;
}
.vtg-company-hero__body {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 18px 18px;
}
.vtg-company-hero__logo {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  margin-top: -42px;
  border-radius: 16px;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(22,24,29,.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vtg-company-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vtg-company-hero__logo span {
  font-size: 30px;
  font-weight: 800;
  color: #154787;
}
.vtg-company-hero__info {
  flex: 1 1 280px;
  min-width: 0;
  padding-top: 10px;
}
.vtg-company-hero__name {
  margin: 0 0 4px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
}
/* Was a single <p>; now a wrapper of one <p> per fact — lĩnh vực, địa chỉ, quy
   mô — so the margin moves off the block and onto the lines inside it. */
.vtg-company-hero__sub {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 14px;
}

.vtg-company-hero__line {
  margin: 0 0 3px;
  line-height: 1.5;
}

.vtg-company-hero__line:last-child {
  margin-bottom: 0;
}

/* The industries line is the one that grows: a company may list up to five, and
   at a narrow width that has to wrap rather than stretch the hero. */
.vtg-company-hero__line:first-child {
  font-weight: 600;
  color: #475569;
}
/* Four now that quy mô moved in, and one of them is text ("Dưới 25") rather than
   a short number — so this wraps instead of forcing the row past the hero on a
   phone. Row gap is smaller than the column gap: a wrapped second row should
   read as a continuation, not a separate block. */
.vtg-company-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 14px;
}
.vtg-company-hero__stat {
  display: flex;
  flex-direction: column;
}
.vtg-company-hero__stat b {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}
.vtg-company-hero__stat span {
  font-size: 12px;
  color: #94a3b8;
}
.vtg-company-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vtg-company-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 850px) {
  .vtg-company-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}
.vtg-company-jobs-section {
  margin-top: 20px;
}
.vtg-company-jobs-section > .vtg-panel__title {
  margin-bottom: 12px;
}

/* --- Paid brand page -------------------------------------------------------
   What buying "Doanh nghiệp nổi bật" looks like once a visitor is actually on
   the profile. Green is the mark the featured card already carries in the
   listings, so arriving here from one is continuous rather than a surprise.

   Deliberately a change of degree, not of layout: nothing moves, nothing extra
   appears, and an unpaid profile is not made to look broken or unfinished by
   comparison. A page that shames the companies who have not paid costs more
   trust than the upgrade earns.

   Every selector below is scoped to .is-featured, so the default page is
   untouched by all of it. */
.vtg-company-page.is-featured .vtg-panel {
  /* Beats the shared 3px gold edge, which is a single class. */
  border-top-color: #16a34a;
}

/* Taller, and green rather than the blue-to-gold house gradient. Companies that
   upload their own cover keep it — the inline background-image on the element
   wins over this either way. */
.vtg-company-page.is-featured .vtg-company-hero__cover {
  height: 156px;
  background: linear-gradient(120deg, #14532d, #16a34a 55%, #C09C40);
}

/* The ring reads as a frame around the logo instead of the plain white gap. */
.vtg-company-page.is-featured .vtg-company-hero__logo {
  border-color: #16a34a;
  box-shadow: 0 2px 10px rgba(22, 163, 74, .28);
}

/* The pill is the one place the word "Nổi bật" appears, so it carries the most
   weight per pixel. Filled rather than tinted, to separate it from the verified
   pill beside it, which is a check and not a purchase. */
.vtg-company-page.is-featured .vtg-pill--star {
  background: #16a34a;
  color: #fff;
}

/* 640px, matching the breakpoint where the shared rule drops the cover to 80px.
   Any other number opens a band where the paid cover is the shorter of the two:
   at 849px, for instance, this would apply 104px while the default was still on
   its 120px desktop height. */
@media (max-width: 640px) {
  .vtg-company-page.is-featured .vtg-company-hero__cover {
    height: 104px;
  }
}
.vtg-company-contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vtg-company-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #334155;
}
.vtg-company-contact li a { color: #154787; font-weight: 600; }
.vtg-company-contact .vtg-ico {
  flex-shrink: 0;
  color: #94a3b8;
}

@media (max-width: 640px) {
  .vtg-company-hero__cover { height: 80px; }
  .vtg-company-hero__logo { width: 68px; height: 68px; margin-top: -34px; }
  .vtg-company-hero__stats { gap: 14px; }
}

/* ===== Wallet (ví tín dụng) ===== */
.vtg-wallet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}
@media (min-width: 850px) {
  .vtg-wallet { grid-template-columns: 1fr 1fr; }
}
.vtg-wallet__balance {
  background: linear-gradient(135deg, #154787, #1e5ba8);
  border-color: #154787;
  color: #fff;
}
.vtg-wallet__label {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}
.vtg-wallet__amount {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
}
.vtg-wallet__balance .vtg-jobs-form__hint {
  color: rgba(255,255,255,.8);
  margin-top: 10px;
}
.vtg-wallet__prices {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vtg-wallet__prices li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #334155;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1efe9;
}
.vtg-wallet__prices li:last-child { border-bottom: 0; padding-bottom: 0; }
.vtg-wallet__prices b { color: #154787; white-space: nowrap; }
.vtg-wallet__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #b45309;
}

/* Top-up tier picker */
.vtg-topup__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.vtg-topup__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 10px;
  border: 1.5px solid #d9d2c4;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.vtg-topup__tier:hover {
  border-color: #154787;
  background: #f4f7fc;
  transform: translateY(-1px);
}
.vtg-topup__tier-amount {
  font-size: 20px;
  font-weight: 800;
  color: #154787;
  line-height: 1.15;
}
.vtg-topup__tier-vnd {
  font-size: 12.5px;
  color: #64748b;
}
.vtg-topup__opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 700px) {
  .vtg-topup__opts { grid-template-columns: 1fr 2fr; }
}
.vtg-topup__opts label { display: block; }
.vtg-topup__opts label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c5a54;
}
.vtg-topup__opts input,
.vtg-topup__opts select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #c4bba8;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.vtg-topup__bank-title {
  margin: 20px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

/* Transfer instructions after a tier is chosen */
.vtg-topup-guide {
  border-top: 3px solid #C09C40;
}
.vtg-topup-guide__lead {
  margin: 0 0 14px;
  color: #334155;
  font-size: 14.5px;
  line-height: 1.6;
}
.vtg-topup-guide__warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
}

.vtg-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1efe9;
}
.vtg-copy-row:last-of-type { border-bottom: 0; }
.vtg-copy-row__k {
  flex: 0 0 150px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #64748b;
}
.vtg-copy-row__v {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}
.vtg-copy-row--amount .vtg-copy-row__v,
.vtg-copy-row--ref .vtg-copy-row__v { font-size: 20px; }
.vtg-copy-row--ref {
  background: #fffbf5;
  border: 1px dashed #C09C40;
  border-radius: 10px;
  padding: 12px;
  margin: 4px 0;
}
.vtg-copy-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #154787;
  border-radius: 8px;
  background: #fff;
  color: #154787;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vtg-copy-btn:hover { background: #154787; color: #fff; }
.vtg-copy-btn.is-copied {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

@media (max-width: 600px) {
  .vtg-copy-row__k { flex-basis: 100%; }
}
.vtg-wallet__section { margin: 24px 0 10px; }
.vtg-wallet__buys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Wallet page: actions on the left, balance pinned right */
.vtg-topup-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.vtg-topup-layout__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.vtg-topup-layout__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 1000px) {
  .vtg-topup-layout { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
  .vtg-topup-layout__side {
    position: sticky;
    top: 16px;
  }
}
/* Gaps come from the flex containers above, not per-panel margins. */
.vtg-topup-layout .vtg-panel { margin: 0 !important; }

.vtg-pricecard { margin: 24px 0 16px !important; }

/* Transfer reference — the one thing that must not be mistyped */
.vtg-refbox {
  margin: 14px 0 4px;
  padding: 18px 16px;
  border: 2px dashed #C09C40;
  border-radius: 14px;
  background: #fffbf0;
  text-align: center;
}
.vtg-refbox__k {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a6d1f;
}
.vtg-refbox__code {
  margin: 0 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.1;
  color: #0f172a;
  word-break: break-all;
}
.vtg-refbox__warn {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  color: #b91c1c;
}
.vtg-copy-btn--lg {
  min-height: 44px;
  padding: 0 26px;
  font-size: 15px;
  background: #C09C40;
  border-color: #C09C40;
  color: #fff;
}
.vtg-copy-btn--lg:hover { background: #a8862f; border-color: #a8862f; color: #fff; }

.vtg-jobs-btn--xl {
  min-height: 54px !important;
  padding: 0 28px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

.vtg-topup-guide__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* Top-up history as cards */
.vtg-topup-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 900px) {
  .vtg-topup-cards { grid-template-columns: 1fr 1fr; }
}
.vtg-tcard {
  padding: 16px;
  border: 1px solid #e8e4dc;
  border-left: 4px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
}
.vtg-tcard--approved { border-left-color: #16a34a; }
.vtg-tcard--pending  { border-left-color: #C09C40; }
.vtg-tcard--awaiting { border-left-color: #94a3b8; }
.vtg-tcard--rejected,
.vtg-tcard--cancelled { border-left-color: #dc2626; }
.vtg-tcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.vtg-tcard__amount {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}
.vtg-tcard__meta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #94a3b8;
}
.vtg-tcard__meta code {
  font-weight: 700;
  letter-spacing: .06em;
  color: #b45309;
}
.vtg-tcard__status {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.vtg-tcard__status--approved { background: #dcfce7; color: #166534; }
.vtg-tcard__status--pending  { background: #fef3c7; color: #92400e; }
.vtg-tcard__status--rejected,
.vtg-tcard__status--cancelled { background: #fee2e2; color: #b91c1c; }
.vtg-tcard__note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #b91c1c;
}
/* Small text that can wrap needs an explicit line-height — the wallet panels sit
   inside containers with a tight one. */
.vtg-tcard__meta,
.vtg-tcard__note,
.vtg-topup-guide__warn,
.vtg-topup-guide__lead,
.vtg-invprofile__sum {
  line-height: 1.55;
}
.vtg-tcard__inv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e8e4dc;
}
.vtg-tcard__invform { margin: 0; }
.vtg-toggle-switch.is-disabled { opacity: .5; cursor: not-allowed; }
/* Issued invoice: switch stays visibly ON but is not a control any more —
   rendered as a <span>, so there is no input to submit even if CSS is bypassed. */
.vtg-toggle-switch.is-locked {
  cursor: default;
  opacity: .75;
}
.vtg-toggle-switch__track.is-on { background: #154787; }
.vtg-toggle-switch__track.is-on .vtg-toggle-switch__thumb { transform: translateX(20px); }

/* Invoice profile card */
.vtg-invprofile__badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.vtg-invprofile__sum {
  flex: 1 1 140px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
}
.vtg-jobs-btn--block {
  display: flex !important;
  width: 100% !important;
}
.vtg-modinv__up {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.vtg-modinv__up input[type="file"] { max-width: 190px; font-size: 12px; }

/* Modal */
body.vtg-modal-open { overflow: hidden; }
.vtg-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vtg-modal[hidden] { display: none; }
.vtg-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .5);
}
.vtg-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 22px;
  border-radius: 16px;
  border-top: 3px solid #C09C40;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
}
.vtg-modal__x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.vtg-modal__x:hover { color: #475569; }
.vtg-topup-pending {
  border-left: 4px solid #C09C40;
}
.vtg-topup-pending__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1efe9;
}
.vtg-topup-pending__row:last-child { border-bottom: 0; }
.vtg-topup-pending__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.vtg-topup-pending code {
  font-weight: 700;
  letter-spacing: .06em;
  color: #b45309;
}
.vtg-jobs-btn--buy {
  border-color: #C09C40 !important;
  color: #8a6d1f !important;
}
.vtg-jobs-btn--buy:hover {
  background: #C09C40 !important;
  color: #fff !important;
}
.vtg-wallet__in { color: #166534; font-weight: 700; white-space: nowrap; }
.vtg-wallet__out { color: #b91c1c; font-weight: 700; white-space: nowrap; }

.vtg-company-subtitle {
  margin-top: 20px;
}
.vtg-company-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vtg-company-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.vtg-company-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vtg-company-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.vtg-company-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.vtg-company-gallery-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.vtg-company-gallery-edit__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #b91c1c;
}
.vtg-company-gallery-edit__item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e8e4dc;
}


/* ---------------------------------------------------------------------------
   Homepage ([vtg_home]).
   Sections are separated by whitespace rather than boxes-in-boxes so the job
   cards stay the only framed element on the page.
   --------------------------------------------------------------------------- */
.vtg-home {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.vtg-home-hero h1 {
	margin: 0 0 8px;
}

.vtg-home-stats {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
}

/* Desktop hero: title, quick-filter chips and the search bar stack in column
   one; the counters sit in column two beside them.

   The chips and the search form both arrive from [vtg_job_search] inside one
   .vtg-jobs-bar wrapper, so they cannot go in separate grid cells while that
   wrapper is a box. display:contents dissolves it and promotes both children
   into this grid — the shortcode itself is untouched, which matters because
   /tim-viec/ still wants them stacked. */
/* 1100px, not 900: the search bar keeps four fields side by side and needs
   roughly 600px, so splitting the row any earlier squeezes it into the
   two-column fallback while the counters sit in empty space. */
@media (min-width: 1100px) {
	.vtg-home-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 32px;
		align-items: start;
	}

	.vtg-home-hero > h1 {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
	}

	.vtg-home-hero .vtg-jobs-bar {
		display: contents;
	}

	.vtg-home-hero .vtg-filter-chips {
		grid-column: 1;
		grid-row: 2;
	}

	/* Spans all three rows and centres, so the numbers sit level with the middle
	   of the title-chips-search stack rather than hanging off its top. */
	.vtg-home-hero .vtg-home-stats {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		margin: 0;
		gap: 28px;
	}

	.vtg-home-hero .vtg-jobs-search {
		grid-column: 1;
		grid-row: 3;
		margin-top: 14px !important;
	}
}

.vtg-home-stats li {
	display: flex;
	flex-direction: column;
}

.vtg-home-stats strong {
	font-size: 26px;
	line-height: 1.2;
	color: #154787;
}

.vtg-home-stats span {
	font-size: 13px;
	color: #64748b;
}

.vtg-home-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
}

.vtg-home-sec__head h2 {
	margin: 0;
	font-size: 22px;
	line-height: 1.3;
}

/* Pill button, not a text link. These sit beside a heading and directly above a
   row of chips, so they need a shape of their own to read as "more" instead of
   as one more item in the list. */
.vtg-home-sec__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1px solid #d9d2c4;
	border-radius: 999px;
	background: #fff;
	color: #154787;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.vtg-home-sec__more:hover,
.vtg-home-sec__more:focus-visible {
	background: #154787;
	border-color: #154787;
	color: #fff;
	text-decoration: none;
	outline: none;
}

.vtg-home-sec__more .vtg-ico {
	flex: 0 0 auto;
	transition: transform .15s ease;
}

.vtg-home-sec__more:hover .vtg-ico {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.vtg-home-sec__more,
	.vtg-home-sec__more .vtg-ico {
		transition: none;
	}

	.vtg-home-sec__more:hover .vtg-ico {
		transform: none;
	}
}

/* Browse-by blocks — the two lists sit side by side instead of stacking, which
   halves the vertical space they took for the information they actually carry. */
.vtg-home-browse {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Tighter gap now that each column carries its own border to separate them. */
	gap: 16px;
	align-items: stretch;
}

/* Each list is its own box. Loose on the page background the two columns bled
   together and the "Tất cả …" button read as belonging to both. */
.vtg-home-browse__col {
	min-width: 0;
	padding: 18px 20px;
	border: 1px solid #e8e4dc;
	border-top: 3px solid #C09C40;
	border-radius: 14px;
	background: #fff;
}

.vtg-home-browse .vtg-home-sec__head {
	margin-bottom: 12px;
}

.vtg-home-browse .vtg-home-sec__head h2 {
	font-size: 18px;
}

/* Chips, not a grid: each sizes to its own text, so one long industry name no
   longer stretches every card in its row or leaves a ragged single-item row. */
.vtg-home-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.vtg-home-term {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px 7px 13px;
	border: 1px solid #d9d2c4;
	border-radius: 999px;
	background: #fff;
	text-decoration: none;
	color: #1f2937;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	max-width: 100%;
}

.vtg-home-term > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.vtg-home-term:hover {
	border-color: #154787;
	color: #154787;
	background: #f8fafc;
}

/* Counts land within a point or two of each other, so the leader needs marking
   or the ordering reads as arbitrary. */
.vtg-home-term.is-top {
	border-color: #c9b884;
	background: #fffdf6;
}

.vtg-home-term em {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 2px 8px;
	min-width: 24px;
	text-align: center;
}

.vtg-home-term.is-top em {
	background: #f2e6c4;
	color: #7a5c12;
}

@media (max-width: 860px) {
	.vtg-home-browse {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.vtg-home-browse__col {
		padding: 16px;
	}
}

/* Alert capture + employer CTA. */
.vtg-home-alert,
.vtg-home-hire {
	padding: 24px;
	border: 1px solid #d9d2c4;
	border-radius: 12px;
	background: #fff;
}

.vtg-home-alert h2,
.vtg-home-hire h2 {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}

.vtg-home-alert p,
.vtg-home-hire p {
	margin: 0 0 14px;
	line-height: 1.6;
	color: #475569;
	max-width: 640px;
}

/* The facts each box owes its own audience — what arrives and how to stop it on
   the candidate side, reach and duration on the employer side. Ticks rather
   than bullets: these are commitments, not a feature list. */
.vtg-home-facts {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.vtg-home-facts li {
	position: relative;
	padding-left: 22px;
	font-size: 13px;
	line-height: 1.55;
	color: #475569;
}

.vtg-home-facts li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #16a34a;
}

.vtg-home-alert__form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

/* Capped: left to grow it swallowed the whole row on a wide screen and pushed
   the two selects and the button into a cramped huddle on the right. */
.vtg-home-alert__form input[type="email"] {
	flex: 1 1 240px;
	max-width: 340px;
	min-width: 0;
}

/* combo.js wraps each select, so the flex item is the wrapper, not the select.
   Without this the wrapper's own width:100% made every combo ask for the whole
   row.

   grow:1, not 0. Once this box became one half of .vtg-home-duo each column is
   only ~290px between 900 and 1200px, so the two pickers no longer fit side by
   side and wrap onto rows of their own — where grow:0 pinned them at 190px and
   left the rest of the row empty. Growing lets a picker that ends up alone fill
   its row, while two that still fit keep sharing one. */
.vtg-home-alert__form select,
.vtg-home-alert__form .vtg-combo {
	flex: 1 1 190px;
	width: auto;
	min-width: 0;
}

.vtg-home-alert__form input,
.vtg-home-alert__form select {
	padding: 10px 12px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
}

.vtg-home-alert .vtg-jobs-form__hint {
	margin: 10px 0 0;
}

.vtg-home-hire {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	/* Distinct from the candidate-facing blocks without shouting. */
	background: #f8fafc;
	border-color: #c9b884;
}

.vtg-home-hire__text {
	flex: 1 1 320px;
	min-width: 0;
}

.vtg-home-hire__text p {
	margin: 0;
}

.vtg-home-hire__cta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* No per-breakpoint column counts: auto-fill already reflows these grids. Only
   the narrowest case needs forcing, where the min track is wider than screen. */
@media (max-width: 520px) {
	.vtg-home {
		gap: 32px;
	}

	.vtg-home-alert__form input[type="email"] {
		max-width: none;
	}

	/* .vtg-combo has to be listed alongside select. combo.js hides the native
	   control and paints its own, so on a phone the rule below was widening a
	   select nobody can see while the visible wrapper kept its 190px basis and
	   sat half-width — which is exactly what the two pickers looked like. */
	.vtg-home-alert__form input[type="email"],
	.vtg-home-alert__form select,
	.vtg-home-alert__form .vtg-combo,
	.vtg-home-alert__form button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Company archive (/doanh-nghiep/).
   A directory of employers: logo, what they do, and whether they are hiring —
   the three things a candidate scans for. Not a blog roll of excerpts.
   --------------------------------------------------------------------------- */
.vtg-company-archive__head h1 {
	margin: 0 0 8px;
}

.vtg-company-archive__lead {
	margin: 0;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.6;
	color: #475569;
}

/* Three across on a desktop, fixed rather than auto-fill. auto-fill(320px) let
   the count drift with the window — four on a wide screen, and four columns is
   what squeezed the address and industry lines into an ellipsis. Wider cards is
   the whole point now that both of those wrap. */
.vtg-company-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}

/* Same step-downs as the homepage wall below: the sidebar takes ~260px until it
   folds away at 899px, so the content column shrinks well before the viewport
   looks narrow. */
@media (max-width: 1180px) {
	.vtg-company-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.vtg-company-cards {
		grid-template-columns: 1fr;
	}
}

/* The homepage wall used to run its own ladder — 5 across, stepping down at
   1500 / 1180 / 899. It is three across now, which is exactly what
   .vtg-company-cards above already does, so the whole set of overrides is gone
   rather than kept as a second copy that says the same thing. Only the top
   margin differs: the homepage section supplies its own spacing above. */
.vtg-company-cards--home {
	margin-top: 0;
}

.vtg-company-card {
	display: grid;
	/* Logo column, then text; the footer spans both so the button lines up
	   across cards no matter how long the name or address runs. */
	grid-template-columns: 56px minmax(0, 1fr);
	/* 1fr on the body row: grid stretches every card in a row to the tallest,
	   and without this the spare height piled up under the footer instead of
	   above it, leaving the "Xem hồ sơ" buttons at different heights. */
	grid-template-rows: 1fr auto;
	gap: 12px 14px;
	padding: 16px;
	/* Anchors the featured star to the card's own top right corner. */
	position: relative;
	/* Blue edge, in both places the card renders: the homepage wall and the
	   /doanh-nghiep/ archive. A light tint at rest so the full brand blue is
	   still free to mean something on the states below — the same two-step the
	   card had when it was beige at rest and gold when hiring. */
	border: 1px solid #7fa0c8;
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Side borders only, never border-color: these rules carry more specificity than
   the shared 3px top-edge rule at the bottom of this file, so recolouring all
   four sides here would re-introduce the gold top on every card that is hovered
   or currently hiring — which on the homepage is all of them. */
.vtg-company-card:hover {
	border-right-color: #154787;
	border-bottom-color: #154787;
	border-left-color: #154787;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
	transform: translateY(-2px);
}

.vtg-company-card.is-hiring {
	border-right-color: #154787;
	border-bottom-color: #154787;
	border-left-color: #154787;
}

/* A company that paid for placement. Green against a wall of blue cards, and
   border-color rather than side-by-side because here the top edge should turn
   green too — the shorthand also out-specifies the shared 3px top rule near the
   foot of this file, which would otherwise keep that edge blue.

   Declared after :hover and .is-hiring deliberately: all three are one class on
   one class, so the tie is broken by source order and paid has to win it. */
.vtg-company-card.is-featured {
	border-color: #16a34a;
}

/* Needs the extra class to survive hover, which would otherwise repaint the
   sides blue and lose the distinction exactly when a reader is looking at it. */
.vtg-company-card.is-featured:hover {
	border-color: #15803d;
	box-shadow: 0 8px 20px rgba(22, 163, 74, .18);
}

.vtg-company-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	text-decoration: none;
}

.vtg-company-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Letter avatar. Most local employers upload no logo, and a wall of identical
   grey placeholders is harder to scan than a wall of initials. */
.vtg-company-card__logo em {
	font-style: normal;
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	color: #154787;
}

.vtg-company-card__body {
	min-width: 0;
}

.vtg-company-card__name {
	display: flex;
	/* Top, not centre: the tick would otherwise float to the middle of a
	   two-line name instead of sitting against the first line. */
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 700;
}

.vtg-company-card__name a {
	color: #0f172a;
	text-decoration: none;
	/* Two lines then clip. Local company names run long ("Công ty TNHH Một
	   thành viên …") and one ellipsised line hides the distinguishing part. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vtg-company-card__name a:hover {
	color: #154787;
	text-decoration: underline;
}

.vtg-company-card__tick {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 3px;
	color: #16a34a;
}

.vtg-company-card__meta,
.vtg-company-card__addr {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.5;
	color: #64748b;
}

.vtg-company-card__meta .vtg-ico,
.vtg-company-card__addr .vtg-ico {
	flex: 0 0 auto;
	margin-top: 3px;
	color: #94a3b8;
}

/* These used to be clamped to one line with an ellipsis, which cut "Công nghệ
   thông tin · Truyề…" and "Số 35/6 Lê Văn Nhiễu, Phườ…" — the half that got
   trimmed was the half that identified the place. They wrap now.

   The ragged wall the clamp was guarding against is already handled: the card is
   a grid with grid-template-rows:1fr auto, so the body row absorbs the spare
   height and the footer stays pinned to the bottom. The "Xem hồ sơ" buttons
   still line up across a row however many lines the text above them takes.

   break-word, because an address can carry a long unbroken token — a URL-like
   plot number, a street name with no spaces — that would otherwise push the
   card wider than its column. */
.vtg-company-card__meta span,
.vtg-company-card__addr span {
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* The 2-line cap that briefly sat here for the homepage is gone with the reason
   for it: that wall was five across, so its cards were a third the width and a
   full address ran to six lines. At three across it is the same card as the
   archive and shows the same full text. */

.vtg-company-card__foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 12px;
	border-top: 1px solid #eef2f7;
}

/* The homepage twin that used to sit here is gone with the 899px two-column step
   it existed to outrank — --home no longer sets columns at all, so it inherits
   the single column below like every other company grid. The 640px rule further
   up already covers this width; kept as the belt to that braces, since a theme
   could plausibly reintroduce a wider rule between the two. */
@media (max-width: 520px) {
	.vtg-company-cards {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Searchable select (combo.js). Wraps a real <select>, which stays in the DOM
   and keeps submitting the form; the native control is only hidden visually.
   --------------------------------------------------------------------------- */
.vtg-combo {
	position: relative;
	min-width: 0;
	width: 100%;
}

.vtg-combo__native {
	/* Not display:none — the select must stay focusable-by-form and submittable,
	   and some browsers skip validation on fully hidden controls. */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vtg-combo__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
}

.vtg-combo__input:focus {
	outline: 2px solid #154787;
	outline-offset: -1px;
}

.vtg-combo__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	/* Safe default for any context: same width as its field, anchored to it. The
	   wide multi-column panel is opted into per container below, because which
	   way it may grow depends on where the field sits on the page. */
	left: 0;
	right: auto;
	width: 100%;
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid #d9d2c4;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

.vtg-combo__list {
	list-style: none;
	margin: 0;
	padding: 4px;
}

.vtg-combo__option {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 6px;
	background: none;
	text-align: left;
	font-size: 14px;
	line-height: 1.4;
	color: #1f2937;
	cursor: pointer;
}

.vtg-combo__option:hover,
.vtg-combo__option:focus {
	background: #eef2f7;
	color: #154787;
	outline: none;
}

.vtg-combo__empty {
	margin: 0;
	padding: 12px;
	font-size: 14px;
	color: #64748b;
}

/* Term index pages (/khu-vuc/, /nganh-nghe/). */
.vtg-term-index__tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 18px 0 6px;
}

.vtg-term-index__tools input[type="search"] {
	flex: 1 1 280px;
	max-width: 380px;
	padding: 10px 12px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
}

.vtg-term-index__count {
	font-size: 14px;
	color: #64748b;
}

.vtg-term-group {
	margin: 22px 0 0;
}

.vtg-term-group__letter {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #94a3b8;
	border-bottom: 1px solid #eef2f7;
	padding-bottom: 6px;
}

.vtg-term-group__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 6px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vtg-term-group__items a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: #1f2937;
	font-size: 14px;
	line-height: 1.45;
}

.vtg-term-group__items a:hover {
	background: #f1f5f9;
	color: #154787;
}

.vtg-term-group__items em {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 12px;
	color: #64748b;
}

/* Nothing live to offer: still listed for SEO, but visibly secondary. */
.vtg-term-group__items li.is-empty a {
	color: #94a3b8;
}

/* ---------------------------------------------------------------------------
   Moderation queue (?tab=review).
   Cards rather than a table: a moderator needs salary, area, company and the
   risk flags side by side to decide, and a table row cannot hold that.
   --------------------------------------------------------------------------- */
.vtg-review__tabs {
	margin: 16px 0 20px;
}

.vtg-review-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0 0 20px;
}

.vtg-review-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 1px solid #d9d2c4;
	border-radius: 12px;
	background: #fff;
}

/* A posting that mentions charging the candidate should be visible from across
   the room, not one line of grey text among twenty. */
.vtg-review-card.is-risk {
	border-color: #dc2626;
	box-shadow: inset 3px 0 0 #dc2626;
}

.vtg-review-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: #64748b;
}

.vtg-pill--pending {
	background: #fef3c7;
	color: #92400e;
}

.vtg-pill--draft {
	background: #fee2e2;
	color: #991b1b;
}

.vtg-pill--publish {
	background: #dcfce7;
	color: #166534;
}

.vtg-review-card__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
}

/* A button, not a link: it opens a dialog and goes nowhere, so it should not
   offer "open in new tab" and should not look like navigation. */
.vtg-review-card__open {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: #0f172a;
	text-align: left;
	cursor: pointer;
}

.vtg-review-card__open:hover {
	color: #154787;
	text-decoration: underline;
}

.vtg-review-card__co {
	margin: 0;
	font-size: 14px;
	color: #475569;
}

.vtg-review-card__tick {
	color: #16a34a;
	font-weight: 700;
}

.vtg-review-card__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 14px;
	margin: 0;
}

.vtg-review-card__facts dt {
	font-size: 12px;
	color: #94a3b8;
	line-height: 1.4;
}

.vtg-review-card__facts dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #1f2937;
	overflow-wrap: anywhere;
}

.vtg-review-card__flags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vtg-review-card__flags li {
	font-size: 12px;
	line-height: 1.4;
	padding: 3px 9px;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
}

.vtg-review-card__flags li.is-danger {
	background: #fee2e2;
	color: #991b1b;
	font-weight: 600;
}

.vtg-review-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid #eef2f7;
}

.vtg-review-card__actions form {
	margin: 0;
}

/* Dialog ------------------------------------------------------------------ */
.vtg-review-modal {
	width: min(680px, calc(100vw - 24px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 14px;
	/* Gold rule across the top, matching the other popups in the product. */
	border-top: 3px solid #C09C40;
	overflow: hidden;
}

.vtg-review-modal::backdrop {
	background: rgba(15, 23, 42, .55);
}

.vtg-review-modal__box {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 48px);
}

.vtg-review-modal__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px 12px;
	border-bottom: 1px solid #eef2f7;
}

.vtg-review-modal__head h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
	flex: 1 1 auto;
}

.vtg-review-modal__x {
	flex: 0 0 auto;
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: #64748b;
	cursor: pointer;
	padding: 0 4px;
}

.vtg-review-modal__body {
	padding: 16px 20px;
	overflow-y: auto;
}

.vtg-review-modal__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 14px 0 0;
}

.vtg-review-modal__facts dt {
	font-size: 12px;
	color: #94a3b8;
}

.vtg-review-modal__facts dd {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.vtg-review-modal__body h4 {
	margin: 20px 0 8px;
	font-size: 15px;
}

.vtg-review-modal__desc {
	font-size: 15px;
	line-height: 1.65;
	color: #1f2937;
}

.vtg-review-modal__desc p {
	margin: 0 0 10px;
}

.vtg-review-modal__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 20px;
	border-top: 1px solid #eef2f7;
	background: #fbfaf7;
}

.vtg-review-modal__foot form {
	margin: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.vtg-review-modal__reject {
	flex: 1 1 100%;
}

.vtg-review-modal__reject select,
.vtg-review-modal__reject input[type="text"] {
	flex: 1 1 180px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
}

@media (min-width: 600px) {
	.vtg-review-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vtg-review-modal__facts {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1100px) {
	.vtg-review-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
   Chip tabs — a filter row for dashboard screens.
   Kept in directory.css, not news.css: news.css is only enqueued in the news
   section, so anything the dashboard uses has to live here.
   --------------------------------------------------------------------------- */
.vtg-chip-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 16px 0 20px;
}

.vtg-chip-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px 8px 15px;
	border: 1px solid #d9d2c4;
	border-radius: 999px;
	background: #fff;
	color: #1f2937;
	/* The theme underlines links inside page content; these are controls. */
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
}

.vtg-chip-tab:hover,
.vtg-chip-tab:focus {
	border-color: #154787;
	color: #154787;
	text-decoration: none;
}

.vtg-chip-tab em {
	font-style: normal;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 2px 8px;
	min-width: 24px;
	text-align: center;
}

.vtg-chip-tab.is-active {
	background: #154787;
	border-color: #154787;
	color: #fff;
}

.vtg-chip-tab.is-active em {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* Scroll sideways instead of stacking into three rows on a narrow screen. */
@media (max-width: 520px) {
	.vtg-chip-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: -16px;
		margin-right: -16px;
		padding: 0 16px 4px;
	}

	.vtg-chip-tabs::-webkit-scrollbar {
		display: none;
	}

	.vtg-chip-tab {
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   Operational boxes — one section per task, used by the top-up screen.
   --------------------------------------------------------------------------- */
.vtg-ops-box {
	margin: 0 0 26px;
	padding: 18px;
	border: 1px solid #d9d2c4;
	border-radius: 14px;
	background: #fff;
}

/* The box that carries actual work gets the gold edge; history stays flat so
   the eye lands on what still needs doing. */
.vtg-ops-box--act {
	border-color: #c9b884;
	box-shadow: inset 3px 0 0 #c9b884;
}

.vtg-ops-box--quiet {
	background: #fbfaf7;
}

.vtg-ops-box__head {
	margin: 0 0 14px;
}

.vtg-ops-box__head h2 {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.3;
}

.vtg-ops-box__head p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #64748b;
	max-width: 70ch;
}

.vtg-ops-box summary {
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
}

/* Top-up cards ------------------------------------------------------------- */
.vtg-topup-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.vtg-topup-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 1px solid #e7e1d5;
	border-radius: 12px;
	background: #fff;
}

.vtg-topup-card__amount {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #154787;
}

/* The reference code is the whole job: it is what gets matched against the
   bank statement, so it is set apart rather than sitting in a table cell. */
.vtg-topup-card__ref {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 9px 12px;
	border: 1px dashed #c9b884;
	border-radius: 8px;
	background: #fffdf6;
}

.vtg-topup-card__ref span {
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #94a3b8;
}

.vtg-topup-card__ref code {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #7a5c12;
}

.vtg-topup-card__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vtg-topup-card__who strong {
	font-size: 15px;
}

.vtg-topup-card__who small {
	font-size: 13px;
	color: #64748b;
	overflow-wrap: anywhere;
}

.vtg-topup-card__time {
	margin: 0;
	font-size: 13px;
	color: #94a3b8;
}

.vtg-topup-card__inv {
	margin: 0;
}

.vtg-topup-card__bill {
	display: grid;
	gap: 8px;
	margin: 0;
}

.vtg-topup-card__bill dt {
	font-size: 12px;
	color: #94a3b8;
}

.vtg-topup-card__bill dd {
	margin: 1px 0 0;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.vtg-topup-card__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: auto 0 0;
	padding-top: 10px;
	border-top: 1px solid #eef2f7;
}

.vtg-topup-card__form input[type="text"],
.vtg-topup-card__form input[type="file"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
}

.vtg-topup-card__btns {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
}

/* Compact rows for the informational lists ---------------------------------- */
.vtg-ops-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.vtg-ops-list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 0;
	border-bottom: 1px solid #eef2f7;
	font-size: 14px;
}

.vtg-ops-list li:last-child {
	border-bottom: 0;
}

.vtg-ops-list code {
	font-weight: 600;
	color: #7a5c12;
}

.vtg-ops-list time {
	margin-left: auto;
	font-size: 13px;
	color: #94a3b8;
}

.vtg-ops-list__note {
	flex: 1 1 100%;
	font-size: 13px;
	color: #64748b;
}

.vtg-pill--approved {
	background: #dcfce7;
	color: #166534;
}

.vtg-pill--rejected {
	background: #fee2e2;
	color: #991b1b;
}

.vtg-pill--cancelled {
	background: #e2e8f0;
	color: #475569;
}

.vtg-pill--awaiting {
	background: #fef3c7;
	color: #92400e;
}

@media (min-width: 700px) {
	.vtg-topup-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vtg-ops-box {
		padding: 22px;
	}
}

@media (min-width: 1200px) {
	.vtg-topup-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Revenue stat variants ------------------------------------------------------ */
.vtg-stat-card--hero {
	border-color: #154787;
	background: #f5f8fc;
}

.vtg-stat-card--hero .vtg-stat-card__n {
	font-size: 26px;
}

/* Promo figures sit apart from revenue on purpose: this is money given away,
   and colouring it like income is how a promotion starts reading as growth. */
.vtg-stat-card--promo {
	border-color: #c9b884;
	background: #fffdf6;
}

.vtg-stat-card--promo .vtg-stat-card__n {
	color: #7a5c12;
}

.vtg-topup-card.is-off {
	opacity: .65;
}

/* Two-wallet split in the employer sidebar ---------------------------------- */
.vtg-wallet__split {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.vtg-wallet__split li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	font-size: 14px;
	border-top: 1px solid #eef2f7;
}

.vtg-wallet__split span {
	color: #64748b;
}

.vtg-wallet__split .is-promo strong {
	color: #7a5c12;
}

.vtg-topup__promo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 4px;
}

.vtg-topup__promo span {
	font-size: 13px;
	color: #475569;
}

.vtg-topup__promo input {
	max-width: 260px;
	padding: 10px 12px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Company records (?tab=companies).
   --------------------------------------------------------------------------- */
.vtg-co-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
}

.vtg-co-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 14px 0 0;
}

.vtg-co-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid #d9d2c4;
	border-radius: 12px;
	background: #fff;
}

.vtg-co-card.is-verified {
	border-color: #c9b884;
}

.vtg-co-card__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.vtg-co-card__logo {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vtg-co-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.vtg-co-card__logo em {
	font-style: normal;
	font-weight: 700;
	font-size: 19px;
	color: #154787;
}

.vtg-co-card__id {
	min-width: 0;
	flex: 1 1 auto;
}

.vtg-co-card__id h3 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 2px;
	font-size: 16px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.vtg-co-card__tick {
	flex: 0 0 auto;
	display: inline-flex;
	color: #16a34a;
}

.vtg-co-card__id p {
	margin: 0;
	font-size: 13px;
	color: #64748b;
	overflow-wrap: anywhere;
}

.vtg-co-card__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 14px;
	margin: 0;
}

.vtg-co-card__facts dt {
	font-size: 12px;
	color: #94a3b8;
	line-height: 1.4;
}

.vtg-co-card__facts dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.vtg-co-card__addr {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #64748b;
}

.vtg-co-card__addr .vtg-ico {
	flex: 0 0 auto;
	margin-top: 2px;
}

.vtg-co-card__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #eef2f7;
}

/* Flat icon buttons — no fill, no border until hovered, so a row of them reads
   as one control group rather than three competing buttons. */
.vtg-icon-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.vtg-icon-actions form {
	margin: 0;
	display: flex;
}

.vtg-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 38px keeps it a comfortable thumb target without looking like a button. */
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: none;
	color: #64748b;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .12s ease, color .12s ease;
}

.vtg-icon-btn:hover,
.vtg-icon-btn:focus-visible {
	background: #eef2f7;
	color: #154787;
	text-decoration: none;
	outline: none;
}

.vtg-icon-btn--danger:hover,
.vtg-icon-btn--danger:focus-visible {
	background: #fee2e2;
	color: #b91c1c;
}

@media (min-width: 700px) {
	.vtg-co-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.vtg-co-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Company list: no outer frame. The cards carry their own border, so a second
   one around them only narrows the grid on a wide screen. */
.vtg-co-list {
	margin: 20px 0 0;
}

.vtg-co-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	position: relative;
	margin: 0 0 12px;
}

.vtg-co-search__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	pointer-events: none;
	display: flex;
}

.vtg-co-search input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	max-width: 420px;
	/* Left padding clears the icon sitting inside the field. */
	padding: 10px 12px 10px 40px;
	border: 1px solid #d9d2c4;
	border-radius: 10px;
	background: #fff;
	/* 16px stops iOS Safari zooming the page on focus. */
	font-size: 16px;
}

.vtg-co-list .vtg-chip-tabs {
	margin: 0 0 16px;
}

@media (max-width: 520px) {
	.vtg-co-search__icon {
		display: none;
	}

	.vtg-co-search input[type="search"] {
		flex: 1 1 100%;
		max-width: none;
		padding-left: 12px;
	}
}

/* ---------- Tin tuyển dụng của nhà tuyển dụng ----------
   Was a five-column table. At the width the dashboard actually gives it, the
   action column held six buttons and wrapped into a block three rows deep, so
   every posting was a tall ragged row and the header labels no longer lined up
   with anything. One card per posting instead: two columns on a desktop, one
   everywhere else. */
.vtg-myjobs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	align-items: start;
}

/* 1100px, not the 900px where the sidebar collapses: at 900 the dashboard rail
   still takes ~240px, which would leave each card about 300px — narrower than
   one "Tin nổi bật 30 ngày — 200.000 đ" button. */
@media (min-width: 1100px) {
	.vtg-myjobs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vtg-myjob {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid #e8e4dc;
	border-radius: 14px;
}

/* A paused posting is still listed but is not working for anyone, so it should
   not look as alive as the rest of the grid. */
.vtg-myjob.is-paused {
	background: #fafaf9;
	border-color: #e7e5e4;
}

.vtg-myjob__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vtg-myjob__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vtg-myjob__title {
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 700;
}

.vtg-myjob__title a {
	color: #0f172a;
	text-decoration: none;
}

.vtg-myjob__title a:hover,
.vtg-myjob__title a:focus-visible {
	color: #154787;
	text-decoration: underline;
}

.vtg-myjob__pay {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #15803d;
}

.vtg-myjob__dates {
	margin: 0;
	font-size: 12px;
	color: #64748b;
}

/* Three numbers across, not stacked: side by side they read as one sentence —
   this many saw it, this many applied, which is this rate. */
.vtg-myjob__stats {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	border-top: 1px solid #f1f5f9;
	border-bottom: 1px solid #f1f5f9;
}

.vtg-myjob__stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vtg-myjob__stats strong {
	font-size: 20px;
	line-height: 1.1;
	font-weight: 700;
	color: #0f172a;
}

.vtg-myjob__stats a {
	color: #154787;
}

.vtg-myjob__stats span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

/* A posting with real traffic and almost no applications is a copy problem, not
   a reach problem — paying to boost it would waste the money. */
.vtg-myjob__stats li.is-low strong {
	color: #b45309;
}

.vtg-myjob__warn {
	margin: 0;
	padding: 8px 10px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #92400e;
}

.vtg-myjob__acts,
.vtg-myjob__boost-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.vtg-myjob__acts form,
.vtg-myjob__boost-row form {
	margin: 0;
}

/* margin-top:auto pins this footer to the bottom of the card, so in a two-column
   row the "Đẩy tin" blocks line up even when one title wraps and the other
   does not. */
.vtg-myjob__boost {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #f1f5f9;
}

.vtg-myjob__boost-title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #94a3b8;
}

/* One block per service — "Tin nổi bật" and "Nhãn Tuyển gấp" — each with its own
   status line above its buttons, so the dates sit next to the thing that extends
   them. */
.vtg-boost + .vtg-boost {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #eceae4;
}

.vtg-boost__state {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0 0 8px;
	font-size: 12.5px;
}

.vtg-boost__name {
	font-weight: 700;
	color: #334155;
}

/* A running badge is money already spent, so it gets the colour and the dot;
   "Chưa dùng" is a neutral fact, not a warning, and stays grey. */
.vtg-boost__on {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #15803d;
	font-weight: 600;
}

.vtg-boost__on::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
	flex: 0 0 auto;
}

.vtg-boost__off {
	color: #94a3b8;
}

/* Name over price, so the eye can scan one column of what and one of how much
   instead of re-reading "Tin nổi bật 7 ngày — 80.000 đ" as a single long run.
   Scoped to this row: .vtg-jobs-btn is inline-flex with align-items:center, so
   an unscoped rule would put the two lines side by side and would also reach the
   buy buttons on the ví/nạp tiền page, which are single-line. */
.vtg-myjob__boost-row .vtg-jobs-btn--buy {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1px;
	min-height: 46px;
	padding: 6px 12px;
	line-height: 1.3;
	text-align: left;
}

.vtg-myjob__boost-name {
	font-size: 12.5px;
	font-weight: 500;
}

.vtg-myjob__boost-price {
	font-size: 13.5px;
	font-weight: 700;
}

/* Wallet cannot cover this one, so it leads to nạp tiền. Muted rather than
   disabled: a disabled button gives the employer nothing to do about it, and
   this one has somewhere useful to go. */
.vtg-myjob__boost-row .vtg-jobs-btn--buy.is-locked {
	border-color: #e2ddd2 !important;
	color: #8a8578 !important;
	background: #fbfaf8;
}

.vtg-myjob__boost-row .vtg-jobs-btn--buy.is-locked:hover,
.vtg-myjob__boost-row .vtg-jobs-btn--buy.is-locked:focus-visible {
	border-color: #C09C40 !important;
	background: #fff !important;
	color: #8a6d1f !important;
}

.vtg-myjob__boost-row .is-locked .vtg-myjob__boost-price em {
	font-style: normal;
	font-weight: 600;
	color: #b45309;
}

/* The two closing calls to action, side by side. Stacked, the employer block
   read as a footnote to the candidate one; they are addressed to different
   people and neither is a follow-up to the other. */
.vtg-home-duo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: stretch;
}

.vtg-home-duo > .vtg-home-sec {
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* Inside a column the employer block stacks instead of splitting text | buttons
   left and right — there is no longer width for two halves. */
.vtg-home-duo .vtg-home-hire {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.vtg-home-duo .vtg-home-hire__text {
	flex: 1 1 auto;
}

.vtg-home-duo .vtg-home-hire__cta {
	margin-top: auto;
}

.vtg-home-duo .vtg-home-alert__form input[type="email"] {
	max-width: none;
}

@media (min-width: 900px) {
	.vtg-home-duo {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Shared card/box top rule.
   Every framed surface gets the same 3px gold edge the popups already use, so
   panels, cards and operational boxes read as one family. Declared last in this
   file so it wins over each block's own border shorthand — but cards.css and
   news.css load after this one, so their surfaces repeat it there.
   --------------------------------------------------------------------------- */
.vtg-panel,
.vtg-ops-box,
.vtg-stat-card,
.vtg-topup-card,
.vtg-review-card,
.vtg-co-card,
.vtg-company-card,
.vtg-home-alert,
.vtg-home-hire,
.vtg-guest-post__card {
	border-top: 3px solid #C09C40;
}

/* The company card is the one card in this list that is blue rather than gold,
   so its top edge follows the other three sides. Must come after the group rule
   above: same specificity, so source order is what decides it. Keeps the 3px
   weight — only the hue changes, not the shape. */
.vtg-company-card {
	border-top-color: #154787;
}

/* Status colours keep their own edge — a posting flagged for charging
   candidates must not read the same as an ordinary one. */
.vtg-review-card.is-risk {
	border-top-color: #dc2626;
}

.vtg-ops-box--act {
	border-top-color: #C09C40;
}

/* Wide screens: the option list runs in several columns inside a panel wider
   than its field. With 102 wards a single column meant scrolling a long way to
   reach anything past "Ea …"; three columns put roughly 30 on screen at once.

   Which direction the panel may grow depends on where its field sits, so each
   container opts in for itself — a blanket rule sent the homepage panel off the
   left edge of the screen. */
@media (min-width: 900px) {
	/* Main filter bar: full page width, and both combos sit right of centre, so
	   the panel grows leftward. */
	.vtg-jobs-search .vtg-combo__panel {
		width: min(680px, 78vw);
		right: 0;
		left: auto;
	}

	/* Alert box: the left half of the closing two-column row, so it grows
	   rightward and stays narrower — there is no 680px to spare beside it. */
	.vtg-home-alert .vtg-combo__panel {
		width: min(520px, 60vw);
	}

	.vtg-jobs-search .vtg-combo__list,
	.vtg-home-alert .vtg-combo__list {
		display: grid;
		/* auto-fill, not a fixed 3: the same rule then gives the 680px panel
		   three columns and the 520px one two, with no second breakpoint. */
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 0 4px;
	}

	.vtg-jobs-search .vtg-combo__option,
	.vtg-home-alert .vtg-combo__option {
		/* Names are trimmed rather than wrapped so every row stays one line and
		   the columns line up. */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
   Company portal. Reuses the job filter bar wholesale — an employer search is a
   job search with the results grouped differently, and two bars that behave
   differently for the same act of filtering is the thing to avoid.
   --------------------------------------------------------------------------- */
.vtg-company-archive__stats {
	margin-top: 14px;
}

/* The shared bar is built for four controls. This form has five — tên, khu vực,
   ngành, sắp xếp, and the button — so the fifth wrapped onto a row of its own,
   and because grid items stretch by default the button took the whole 1.8fr
   search column and rendered about 840px wide.

   Every template below repeats !important because the rule being overridden
   declares it; without that, specificity never gets a say. */
.vtg-company-archive__filter {
	margin-top: 18px;
}

/* Two classes, not one. The rule being overridden lives in cards.css, which
   loads after this file, so a single-class selector would tie on specificity and
   lose on source order even with !important on both sides. */
.vtg-jobs-search.vtg-company-archive__filter {
	grid-template-columns:
		minmax(150px, 1.7fr)
		minmax(110px, 1fr)
		minmax(110px, 1fr)
		minmax(96px, .62fr)
		auto !important;
}

/* Tablet: five across would squeeze the term pickers under their placeholder
   text, so the name field takes the first row and the rest share the second. */
@media (max-width: 1180px) and (min-width: 768px) {
	.vtg-jobs-search.vtg-company-archive__filter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr) auto !important;
	}

	.vtg-jobs-search.vtg-company-archive__filter .vtg-jobs-search__q {
		grid-column: 1 / -1;
	}
}

/* Phone. This block is required, not optional: the desktop template above has
   !important and no breakpoint of its own, so it out-specifies the shared mobile
   rule and kept all five columns — about 466px of minimums — on a 390px screen,
   pushing the bar off the side.

   minmax(0, 1fr) rather than 1fr: a bare 1fr floors at min-content, and the term
   pickers' placeholder text is long enough ("Khu vực đang tuyển") to hold the
   column open past half the screen and overflow it.

   Rows: name, then the two pickers side by side, then sort and Lọc together. */
@media (max-width: 767px) {
	.vtg-jobs-search.vtg-company-archive__filter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	}

	/* !important on both, and not for tidiness. Chrome::critical_css() prints
	   .vtg-jobs-search__q, .vtg-jobs-search .vtg-jobs-btn { grid-column:1/-1
	   !important } inline in the head. An !important declaration outranks a
	   non-important one no matter how specific the loser is, so the extra class
	   here bought nothing on its own and the button kept a full row to itself. */
	.vtg-jobs-search.vtg-company-archive__filter .vtg-jobs-search__q {
		grid-column: 1 / -1 !important;
	}

	.vtg-jobs-search.vtg-company-archive__filter .vtg-jobs-btn {
		grid-column: auto !important;
	}
}

.vtg-company-archive__chips {
	margin: 12px 0 0;
}

/* ---------------------------------------------------------------------------
   Staff record lists (Quản lý tin, Quản lý tài khoản). One row shape for both:
   what the record is on the left, what you can do to it on the right.
   --------------------------------------------------------------------------- */
.vtg-adminrow-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.vtg-adminrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid #d9d2c4;
	border-top: 3px solid #C09C40;
	border-radius: 12px;
	background: #fff;
}

/* Grows, so the actions stay pinned right until the row is too narrow to hold
   both — then they wrap underneath instead of squeezing the title. */
.vtg-adminrow__main {
	flex: 1 1 260px;
	min-width: 0;
}

.vtg-adminrow__meta {
	margin: 4px 0 0;
	font-size: 13px;
	color: #64748b;
}

.vtg-adminrow__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Why an account has no delete button, rather than an unexplained gap. */
.vtg-adminrow__note {
	font-size: 12px;
	color: #94a3b8;
	max-width: 220px;
}

.vtg-company-archive__browse {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #e5e0d6;
}

.vtg-company-archive__browse-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Grouped job form. The grid still comes from .vtg-jobs-form; these rules only
   add the grouping shell, so every existing field keeps its sizing.
   --------------------------------------------------------------------------- */
.vtg-form-group {
	grid-column: 1 / -1;
	margin: 0 0 18px;
	padding: 0;
	border: 1px solid #e5e0d6;
	border-top: 3px solid #C09C40;
	border-radius: 12px;
	background: #fff;
}

.vtg-form-group > legend {
	/* float, not the default legend rendering: a legend sitting in the border
	   cannot be given a background that survives the 3px gold rule above it. */
	float: left;
	width: 100%;
	margin: 0;
	padding: 12px 18px 0;
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
}

.vtg-form-group__body {
	clear: both;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
	padding: 12px 18px 18px;
}

.vtg-form-group__body > label {
	display: block;
	min-width: 0;
}

.vtg-form-group__body > .vtg-jobs-form__full,
.vtg-form-group__body > p {
	grid-column: 1 / -1;
}

.vtg-form-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-style: normal;
	line-height: 1.5;
	color: #64748b;
}

/* Legal note, not a tip — it has to read differently from the hints. */
.vtg-form-warn {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	border-left: 3px solid #C09C40;
	background: #fdf8ec;
	font-size: 12.5px;
	line-height: 1.55;
	color: #6b5518;
}

.vtg-form-check {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.vtg-form-actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

/* Greyed out, not hidden: the numbers stay readable so the employer can see
   what they are giving up by ticking "thỏa thuận". */
.vtg-form-group__body input[data-vtg-salary].is-locked {
	background: #f1f5f9;
	color: #94a3b8;
}

@media (max-width: 720px) {
	.vtg-form-group__body {
		grid-template-columns: 1fr;
	}
}

/* One item per line. This used to be white-space:pre so a long entry could not
   fold onto a second line and read as two items — but a real benefit runs past
   a hundred characters, and the sideways scroll meant you could not see the
   sentence you were typing. Soft wrapping instead: the row spacing below keeps
   the items apart visually, and the parser splits on newlines only, so a
   wrapped line is still one item no matter how it looks. */
.vtg-form-lines {
	min-height: 104px;
	line-height: 1.7;
	resize: vertical;
	white-space: pre-wrap;
	overflow-x: hidden;
	word-break: break-word;
}

.vtg-form-lines::placeholder {
	color: #94a3b8;
	line-height: 1.7;
}

/* Wide desktop: the six groups pair up instead of each taking a full row.
   At 1700px a full-width group made "Số lượng cần tuyển" an 800px-wide box for
   a two-digit number, and pushed the whole form to three screens of scrolling.

   1400px, not 1280: below that a half-width group is ~600px and its own two
   inner columns get too narrow to read. */
@media (min-width: 1400px) {
	.vtg-jobs-form {
		gap: 0 20px;
		/* start, not stretch: a short group sits at its natural height rather
		   than growing an empty tail to match the tall one beside it. */
		align-items: start;
	}

	.vtg-form-group {
		grid-column: auto;
		margin-bottom: 20px;
	}

	/* Six groups, two per row, three rows. Only the submit row spans — the
	   description group was full width for a while, but that left an odd row of
	   one and pushed the count back to four. */
	.vtg-form-actions {
		grid-column: 1 / -1;
	}

	/* Inside a half-width group the inner pair gets ~380px each, which is still
	   fine for two short line-lists but not for anything wider. */
	.vtg-form-group__body {
		gap: 12px 14px;
	}
}

/* ---------------------------------------------------------------------------
   Help page. Feature rows and FAQ, both plain enough to read on a phone.
   --------------------------------------------------------------------------- */
/* Width and padding come from the shared page rule near the top of this file.
   This was the only page capped at 1000px while every other one ran full width,
   so moving between Trợ giúp and anything else visibly shifted the content. */
.vtg-help {
	width: 100%;
}

.vtg-help__head h1 {
	margin: 0 0 8px;
}

.vtg-help__lead {
	margin: 0;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.6;
	color: #475569;
}

.vtg-help__roles {
	margin: 18px 0 6px;
}

.vtg-help__sec {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #e5e0d6;
}

.vtg-help__sec > h2 {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.3;
}

.vtg-help__grouptitle {
	margin: 18px 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #64748b;
}

.vtg-help__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.vtg-help__feature {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #e5e0d6;
	border-top: 3px solid #C09C40;
	border-radius: 10px;
	background: #fff;
}

.vtg-help__ico {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 2px;
	color: #154787;
}

.vtg-help__body {
	min-width: 0;
}

.vtg-help__name {
	display: block;
	font-weight: 700;
	color: #0f172a;
	text-decoration: none;
}

.vtg-help__name:hover {
	color: #154787;
	text-decoration: underline;
}

.vtg-help__desc {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #475569;
}

.vtg-help__note {
	margin: 6px 0 14px;
	font-size: 14px;
	color: #475569;
}

.vtg-help__faq {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.vtg-help__q {
	border: 1px solid #e5e0d6;
	border-top: 3px solid #C09C40;
	border-radius: 10px;
	background: #fff;
}

.vtg-help__q > summary {
	padding: 12px 14px;
	cursor: pointer;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.45;
	list-style: none;
}

.vtg-help__q > summary::-webkit-details-marker {
	display: none;
}

/* The marker has to be drawn by hand once list-style is off, or an open and a
   closed question look identical. */
.vtg-help__q > summary::before {
	content: "+";
	display: inline-block;
	width: 18px;
	font-weight: 700;
	color: #C09C40;
}

.vtg-help__q[open] > summary::before {
	content: "–";
}

.vtg-help__a {
	padding: 0 14px 14px 46px;
}

.vtg-help__a p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.65;
	color: #334155;
}

.vtg-help__a p:last-child {
	margin-bottom: 0;
}

.vtg-help__contact p {
	margin: 6px 0 0;
	line-height: 1.6;
}

@media (min-width: 900px) {
	.vtg-help__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.vtg-help__a {
		padding-left: 14px;
	}
}

.vtg-company-archive__why {
	margin: 4px 0 10px;
	padding: 8px 12px;
	border-left: 3px solid #C09C40;
	background: #fdf8ec;
	color: #6b5518;
	font-size: 13px;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Company profile form. Same treatment the job form got: the panels pair up on
   a wide screen instead of each taking a full row, which at 1800px turned a
   single "Tên doanh nghiệp" box into a 1700px-wide line.
   --------------------------------------------------------------------------- */

/* The h2 inside a panel had a border-top and 8px of margin, borrowed from when
   these headings separated sections of one long form. Inside a bordered panel
   that reads as a stray rule under the panel's own gold edge, and it left the
   heading almost touching the first label. */
.vtg-copro .vtg-jobs-form > h2 {
	margin: 0 0 14px;
	padding-top: 0;
	border-top: 0;
	font-size: 16px;
	line-height: 1.3;
}

/* File inputs were raw browser chrome — grey "Chọn tệp / Không có tệp nào được
   chọn" next to fields that all share one rounded style. */
.vtg-copro input[type="file"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px dashed #cfc7b6;
	border-radius: 10px;
	background: #fdfcfa;
	font-size: 13px;
	color: #475569;
	cursor: pointer;
}

.vtg-copro input[type="file"]:hover {
	border-color: #C09C40;
	background: #fdf8ec;
}

.vtg-copro input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 6px 12px;
	border: 1px solid #d9d2c4;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	color: #154787;
	cursor: pointer;
}

.vtg-copro input[type="file"]::file-selector-button:hover {
	background: #efeae2;
}

/* A media row is a thumbnail plus a control, so it needs the panel's full width
   rather than half of it — the cover preview alone is 150px, which left the file
   input squeezed into what remained of a 330px column. */
.vtg-copro .vtg-media-field {
	grid-column: 1 / -1;
}

.vtg-media-field__row {
	align-items: flex-start;
}

.vtg-media-field__thumb {
	/* The preview is a sample of what visitors see, so it gets the same framing
	   as the brand page rather than sitting as a bare image. */
	border: 1px solid #e2ddd2;
	border-radius: 10px;
	overflow: hidden;
	background: #f8f6f2;
	flex: 0 0 auto;
}

@media (min-width: 1400px) {
	.vtg-copro {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		/* start, not stretch: a two-field panel keeps its own height instead of
		   growing an empty tail to match the tall one beside it. */
		align-items: start;
	}

	/* __save, not __bar: the bar sits above the <form> in the markup, so it is
	   not a grid item here at all. The submit row is, and it belongs under both
	   columns rather than stuck in one of them. */
	.vtg-copro__save {
		grid-column: 1 / -1;
	}
}

/* Grouping inside the company panels.
   Every item sat exactly one grid gap from its neighbour, so a hint explaining
   the field above it was the same distance from that field as from the next,
   unrelated label — "Bỏ trống thì trang thương hiệu…" read as though it belonged
   to FACEBOOK FANPAGE underneath it. Pull hints up towards what they explain and
   push the next field down. */
.vtg-copro .vtg-jobs-form {
	gap: 16px 18px;
}

.vtg-copro .vtg-jobs-form > .vtg-jobs-form__hint {
	margin-top: -8px;
	margin-bottom: 6px;
}

/* A media block ends in its own hint, so it needs the same separation from
   whatever follows. */
.vtg-copro .vtg-media-field {
	margin-bottom: 6px;
}

/* Uppercase labels are visually heavy; 6px under them against 16px above reads
   as the label belonging to the field, which is what it does. */
.vtg-copro .vtg-jobs-form label span,
.vtg-copro .vtg-media-field__k {
	margin-bottom: 7px;
}

/* Two company marks that must not be mistaken for each other. Green tick = a
   moderator checked the legal papers. Gold star = the company paid for
   placement. Different colour, different shape, different promise. */
.vtg-pill--star {
	background: #fdf0d5;
	color: #7a5c12;
}

/* Pinned to the card's top right rather than flowing after the name. Gold is
   kept: the border says "paid", the star says which mark it is, and two greens
   would collapse into the verified tick's meaning. */
.vtg-company-card__star {
	position: absolute;
	top: 10px;
	right: 12px;
	display: inline-flex;
	color: #C09C40;
}

/* The name would otherwise run under the star on a long company name. Only the
   featured card reserves the space, so every other card keeps its full measure. */
.vtg-company-card.is-featured .vtg-company-card__name {
	padding-right: 30px;
}

/* "Dịch vụ đang dùng" — what the employer already has, with its end date. */
.vtg-owned {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.vtg-owned__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 10px 12px;
	border: 1px solid #e5e0d6;
	border-left: 3px solid #16a34a;
	border-radius: 8px;
	background: #fff;
}

/* Amber once it is inside the renewal window, so the one row that needs action
   does not read the same as the ones that do not. */
.vtg-owned__item.is-ending {
	border-left-color: #C09C40;
	background: #fdf8ec;
}

.vtg-owned__k {
	font-weight: 700;
	font-size: 14px;
	color: #0f172a;
}

.vtg-owned__v {
	font-size: 13px;
	color: #475569;
}

/* Two account guides, one per audience. Reuses .vtg-home-duo for the 2-up grid;
   these rules only style the numbered steps inside. */
.vtg-home-guide {
	padding: 24px;
	border: 1px solid #d9d2c4;
	border-top: 3px solid #C09C40;
	border-radius: 12px;
	background: #fff;
}

.vtg-home-guide h2 {
	margin: 0 0 12px;
	font-size: 19px;
	line-height: 1.3;
}

/* Counter rather than list-style: the marker needs its own colour and a fixed
   column so wrapped step text lines up under itself, not under the number. */
.vtg-home-guide__steps {
	counter-reset: vtgstep;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.vtg-home-guide__steps li {
	position: relative;
	padding-left: 34px;
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
}

.vtg-home-guide__steps li::before {
	counter-increment: vtgstep;
	content: counter(vtgstep);
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #154787;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.vtg-home-guide__note {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: #f6f4ef;
	font-size: 13px;
	line-height: 1.55;
	color: #475569;
}

.vtg-home-guide__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

/* The guides sit above the closing CTAs, so they keep their own gap from them. */
.vtg-home-guides {
	margin-bottom: 0;
}

.vtg-company-ownerbar {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 10px;
  font-size: 14px;
  color: #9a3412;
}
.vtg-company-ownerbar a { font-weight: 600; }
.vtg-company-hero__hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: #64748b;
}
.vtg-company-share {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 4px 0 0;
  min-width: 0;
}
.vtg-company-share__label {
  display: none;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.vtg-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #d7e0ea;
  border-radius: 10px;
  background: #fff;
  color: #154787;
  font: 600 13px/1.2 inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.vtg-share-btn .vtg-ico { flex: 0 0 auto; }
.vtg-share-btn--zalo { color: #0068ff; border-color: #b6d4ff; background: #f3f8ff; }
.vtg-share-btn--fb { color: #1877f2; border-color: #c5dbfb; background: #f5f8ff; }
.vtg-share-btn:hover { filter: brightness(.97); }
@media (min-width: 720px) {
  .vtg-company-share {
    flex-direction: column;
    align-self: center;
    margin: 8px 0 0 auto;
    min-width: 132px;
  }
  .vtg-company-share__label { display: block; }
  .vtg-share-btn { width: 100%; justify-content: flex-start; }
}
.vtg-company-empty {
  color: #64748b;
  font-size: 14px;
}
.vtg-company-closed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vtg-company-closed li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
}
.vtg-company-closed span { color: #64748b; white-space: nowrap; }

.vtg-company-map {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #e2e8f0;
  aspect-ratio: 4 / 3;
}
.vtg-company-map iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 220px;
  max-width: 100%;
  border: 0 !important;
}

.vtg-preset-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.vtg-preset-chips__label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  margin-right: 4px;
}
.vtg-preset-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d7e0ea;
  background: #fff;
  color: #154787;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.vtg-preset-chip:hover { background: #f1f5f9; }
.vtg-preset-chip.is-active {
  background: #154787;
  border-color: #154787;
  color: #fff;
}

.vtg-flash {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
}
.vtg-flash[hidden] { display: none; }
.vtg-flash__card {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 24px 22px 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
}
.vtg-flash__x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}
.vtg-flash__kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #16a34a;
}
.vtg-flash__title {
  margin: 0 0 8px;
  font-size: 20px;
  color: #154787;
}
.vtg-flash__body {
  margin: 0 0 16px;
  color: #334155;
  line-height: 1.5;
}

.vtg-account-pop__reqs {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  color: #e11d48;
  font-size: 13px;
  line-height: 1.45;
}
.vtg-account-pop__reqs[hidden] { display: none; }
.vtg-account-pop__reqs li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.vtg-account-pop__reqs li[hidden] { display: none; }
.vtg-account-pop__reqs li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e11d48;
  flex: 0 0 8px;
}