/* VTG cards + dense job listing */
.vtg-dash, .vtg-jobs-page, .vtg-jobs-list, .vtg-jobs-archive {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vtg-dash { display: flex; flex-direction: column; gap: 12px; }
.vtg-dash__nav, .vtg-tabs { display: none !important; }
.vtg-dash__body {
  background: #fff; border: 1px solid #e8e4dc; border-radius: 14px;
  padding: 16px 18px 22px; width: 100%; overflow-x: auto;
}
.vtg-dash table { width: 100%; border-collapse: collapse; min-width: 720px; }
.vtg-dash th, .vtg-dash td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid #f1efe9;
  font-size: 14px; vertical-align: middle;
}
.vtg-dash th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; white-space: nowrap; }

.vtg-card {
  background: #fff; border: 1px solid #e8e4dc; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(22,24,29,.04); overflow: hidden; width: 100%;
}
.vtg-card__body { padding: 14px 16px; }
.vtg-card__title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: #0f172a; }

.vtg-jobs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 10px; border: 0;
  background: #154787; color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  /* Form controls do not inherit the page font. A <button> or an
     <input type="submit"> falls back to the browser's UI font without this. */
  font-family: inherit;
}
.vtg-jobs-btn--ghost { background: #fff; color: #154787; border: 1px solid #d6d0c4; }
.vtg-pill {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; background: #efeae2; color: #154787;
  vertical-align: middle; margin-left: 4px; line-height: 1.4;
}
.vtg-pill--ok { background: #dcfce7; color: #166534; }
.vtg-pill--urgent { background: #fee2e2; color: #b91c1c; }

/* ===== Toolbar / chips / search ===== */
.vtg-jobs-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}
.vtg-filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0;
}
.vtg-filter-chips a {
  padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #e8e4dc;
  color: #334155; text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.2;
}
.vtg-filter-chips a.is-active,
.vtg-filter-chips a:hover { background: #154787; color: #fff; border-color: #154787; }

.vtg-jobs-search {
  display: grid !important;
  grid-template-columns: minmax(160px, 1.8fr) minmax(110px, .85fr) minmax(110px, .85fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
  background: #fff;
  border: 1px solid #e8e4dc;
  border-radius: 12px;
  padding: 8px !important;
  margin: 0 !important;
}
.vtg-jobs-search__field { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.vtg-jobs-search__field > span { display: none !important; }
.vtg-jobs-search input,
.vtg-jobs-search select {
  width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #e8e4dc;
  border-radius: 9px; background: #fff;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1e293b !important;
}
@media (min-width: 768px) {
  .vtg-jobs-search input,
  .vtg-jobs-search select { font-size: 14px !important; }
}
.vtg-jobs-search .vtg-jobs-btn { min-height: 36px; padding: 0 14px; font-size: 14px !important; }
.vtg-jobs-search input[type="checkbox"],
.vtg-jobs-search__check,
.vtg-jobs-search label:has(> input[type="checkbox"]) { display: none !important; }

.vtg-jobs-found {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 14.5px;
  font-weight: 500;
}
.vtg-jobs-page { padding: 0 !important; }

/* ===== Responsive job grid — mobile first: 1 col / tablet 2 / desktop 3 ===== */
.vtg-jobs-list__items {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  align-items: stretch !important;
  grid-auto-rows: auto !important;
}
.vtg-jobs-list__items > * { min-width: 0 !important; }

@media (min-width: 768px) {
  .vtg-jobs-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1200px) {
  .vtg-jobs-list__items { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

article.vtg-job-card,
.vtg-job-card.vtg-card,
.vtg-job-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  position: relative !important;
  padding: 10px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  border: 1px solid #C09C40 !important;
  border-radius: 12px !important;
  background: #fff !important;
  min-width: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  article.vtg-job-card, .vtg-job-card.vtg-card, .vtg-job-card {
    padding: 12px !important;
  }
}
.vtg-job-card:hover {
  border-color: #a37f2c !important;
  box-shadow: 0 3px 10px rgba(22,24,29,.05) !important;
}
.vtg-job-card.is-urgent {
  border-color: #dc2626 !important;
}
.vtg-job-card.is-urgent:hover {
  border-color: #b91c1c !important;
}

.vtg-job-card__hit {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}
/* The save button is absolutely positioned top-right and is 34px wide, so it
   sits over whatever lands in that corner — which is the tail of the job title.
   Reserve the gutter on this row only, not on the card, so the meta grid below
   keeps its full width. box-sizing is spelled out because width is pinned to
   100% here and a content-box theme would turn the padding into overflow. */
.vtg-job-card__top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 38px !important;
}
.vtg-job-card__logo {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #efeae2 !important;
  color: #154787 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.vtg-job-card__logo img {
  width: 36px !important; height: 36px !important; object-fit: cover; display: block;
}
@media (min-width: 768px) {
  .vtg-job-card__logo { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .vtg-job-card__logo img { width: 40px !important; height: 40px !important; }
}
.vtg-job-card__initial {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.vtg-job-card__main { flex: 1; min-width: 0; }
.vtg-job-card__title {
  margin: 0 0 2px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vtg-job-card__title a { color: inherit; text-decoration: none; }
.vtg-job-card__company {
  margin: 0 !important;
  font-size: 15px !important;
  color: #475569 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
@media (min-width: 768px) {
  .vtg-job-card__company { font-size: 15px !important; }
}
.vtg-job-card__verified {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  vertical-align: middle;
  flex-shrink: 0;
}
.vtg-job-card__loc { color: #64748b !important; }
.vtg-job-card__exp { color: #64748b !important; }

.vtg-job-card__meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 10px !important;
  align-items: center !important;
  font-size: 15px !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  min-width: 0 !important;
  width: 100% !important;
}
.vtg-job-card__meta > span {
  min-width: 0 !important;
}
/* Lương on a line of its own. grid-column needs !important like everything else
   in this file — the two-column rule above sets each cell with !important, and a
   plain declaration here would lose to it. */
.vtg-job-card__pay {
  grid-column: 1 / -1 !important;
  color: #154787 !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
}
.vtg-job-card__age { color: #94a3b8 !important; }
@media (min-width: 768px) {
  .vtg-job-card__meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    font-size: 15px !important;
  }
  .vtg-job-card__pay { font-size: 15.5px !important; }
}

.vtg-job-card__cta,
.vtg-job-card a.vtg-jobs-btn,
.vtg-job-card .vtg-jobs-btn,
.vtg-job-card .vtg-jobs-btn--ghost,
.vtg-job-card button.vtg-jobs-btn {
  display: none !important;
  position: absolute !important;
  width: 0 !important; height: 0 !important; min-height: 0 !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  visibility: hidden !important;
}

/* ===== Pager ===== */
.vtg-jobs-pager {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 14px 0 4px !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #f1efe9;
}
.vtg-jobs-pager__n {
  min-width: 34px; min-height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e8e4dc; border-radius: 9px; background: #fff; color: #0f172a;
  text-decoration: none; font-size: 15px; font-weight: 600;
}
.vtg-jobs-pager__n:hover { border-color: #154787; color: #154787; }
.vtg-jobs-pager__n.is-active { background: #154787; border-color: #154787; color: #fff; }
.vtg-jobs-pager__meta { margin-left: 6px; font-size: 14px; color: #64748b; }

/* Mobile ≤767: search bar layout */
@media (max-width: 767px) {
  .vtg-jobs-search { grid-template-columns: 1fr 1fr !important; }
  .vtg-jobs-search__q,
  .vtg-jobs-search .vtg-jobs-btn { grid-column: 1 / -1; }
  .vtg-jobs-bar .vtg-jobs-search { grid-template-columns: 1fr 1fr !important; }
  .vtg-jobs-bar .vtg-jobs-search__q,
  .vtg-jobs-bar .vtg-jobs-btn { grid-column: 1 / -1; }
}
/* Mid tablet: filter still 2-col friendly */
@media (max-width: 1100px) and (min-width: 768px) {
  .vtg-jobs-search { grid-template-columns: minmax(140px, 1.5fr) minmax(100px, .8fr) minmax(100px, .8fr) auto !important; }
}

.vtg-job-card__hc,
.vtg-job-card__deadline {
  white-space: nowrap;
}

.vtg-job-card__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.vtg-job-card__ico {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  stroke: currentColor;
  opacity: .85;
}
.vtg-job-card__pay .vtg-job-card__ico { opacity: 1; }

/* ---------------------------------------------------------------------------
   Job card: contrast + click affordance.
   Loaded after the inline critical CSS, which no longer pins box-shadow or
   hides card CTAs — that block was the reason none of this could be styled.
   --------------------------------------------------------------------------- */
article.vtg-job-card,
.vtg-job-card {
	/* Gold border kept — it is the brand edge, not the grey the brief assumed.
	   What was missing is depth, so add a resting shadow instead: that is what
	   separates "card" from "table row". */
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vtg-job-card:hover,
.vtg-job-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -6px rgba(15, 23, 42, .16) !important;
	border-color: #154787 !important;
}

.vtg-job-card:hover .vtg-job-card__title,
.vtg-job-card:focus-within .vtg-job-card__title {
	color: #154787 !important;
}

/* Money reads as money. Navy was the same family as the title and the company
   name, so the one number people scan for had nothing to stand out against.
   Green rather than orange: orange would fight the red "Gấp" badge. */
.vtg-job-card__pay {
	color: #047857 !important;
	font-weight: 800 !important;
	font-size: 16px !important;
}

.vtg-job-card__pay .vtg-job-card__ico {
	color: #047857;
}

/* Secondary text was #64748b — passing, but only just. One step darker reads
   cleanly on a dim phone screen outdoors, which is where most of this is read. */
.vtg-job-card__loc,
.vtg-job-card__exp,
.vtg-job-card__hc,
.vtg-job-card__deadline {
	color: #475569 !important;
}

/* Three days or less is the only deadline worth colouring. */
.vtg-job-card__deadline.is-soon {
	color: #b45309 !important;
	font-weight: 600 !important;
}


/* Two round buttons stacked on the right edge: save at the top, open at the
   bottom. Both are always visible — a control that only appears on hover does
   not exist on a touch screen, which is most of this traffic. */
.vtg-job-card__actions,
.vtg-job-card__go {
	position: absolute;
	/* 8px to match the inline critical block, which pins __actions with
	   !important — a different value here would misalign the two buttons. */
	right: 8px;
	z-index: 2;
}

.vtg-job-card__actions {
	top: 8px;
}

.vtg-job-card__go {
	bottom: 8px;
}

.vtg-job-card__actions form {
	margin: 0;
	display: flex;
}

.vtg-job-card__save,
.vtg-job-card__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f5f9;
	color: #475569;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.vtg-job-card__save:hover,
.vtg-job-card__save:focus-visible {
	background: #e2e8f0;
	color: #154787;
	outline: none;
}

/* Saved state uses the brand gold and a filled glyph, so it is readable as a
   state rather than just a colour change. */
.vtg-job-card__save.is-on {
	background: #fdf6e3;
	color: #b8860b;
}

.vtg-job-card__save.is-on .vtg-ico {
	fill: currentColor;
}

/* The open button is the card's primary action, so it takes the brand colour
   once the pointer is anywhere on the card — not only over the button itself. */
.vtg-job-card:hover .vtg-job-card__go,
.vtg-job-card:focus-within .vtg-job-card__go {
	background: #154787;
	color: #fff;
	transform: translateX(2px);
}

/* Reserve the right column so meta text never runs under the buttons. */
.vtg-job-card__meta {
	padding-right: 46px !important;
}

@media (prefers-reduced-motion: reduce) {
	.vtg-job-card,
	.vtg-job-card__go,
	.vtg-job-card__save {
		transition: none;
	}

	.vtg-job-card:hover {
		transform: none;
	}

	.vtg-job-card:hover .vtg-job-card__go {
		transform: none;
	}
}

/* The urgent card used to be the only one with a coloured border, which made
   every ordinary card look switched off. Keep the signal on the badge and give
   the card a tint instead of a red outline. */
.vtg-job-card.is-urgent {
	border-color: #C09C40 !important;
	background: #fffcf9 !important;
}

.vtg-job-card.is-urgent:hover {
	border-color: #154787 !important;
}

/* Chức danh and ngành share the first row now that lương has one of its own.
   Both are trimmed to the first segment in PHP ("Quản lý / Trưởng phòng",
   "Nhà hàng / Khách sạn / Du lịch"), but a one-line clamp still guards the rest
   — half a card is narrow, and a wrapped value would push the row taller than
   the one beside it. */
.vtg-job-card__cat,
.vtg-job-card__level {
	color: #475569 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Same 3px gold top edge as every other surface. cards.css loads after
   directory.css and sets the card border with !important, so the rule has to be
   repeated here to survive. */
.vtg-card,
article.vtg-job-card,
.vtg-job-card.vtg-card,
.vtg-job-card {
	border-top-width: 3px !important;
	border-top-color: #C09C40 !important;
	border-top-style: solid !important;
}