/* =====================================================================
   VINAMEDICAL — Kiểu dáng riêng cho nhóm trang Tin tức & Tuyển dụng
   Dùng cho: tin-tuc.html, tin-tuc-chi-tiet.html, tuyen-dung.html
   Quy ước: chỉ dùng biến --vm-*, không hard-code mã màu.
   Tiền tố: .vm-news-page-*  (tin tức)  |  .vm-career-*  (tuyển dụng)
   ===================================================================== */

/* =====================================================================
   1. TRANG DANH SÁCH TIN TỨC
   ===================================================================== */

/* ---------- 1.1 Bài nổi bật ---------- */
.vm-news-page-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-6);
  align-items: stretch;
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-xl);
  overflow: hidden;
  box-shadow: var(--vm-shadow-line);
  transition:
    box-shadow var(--vm-dur-base) var(--vm-ease-out),
    border-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-news-page-featured:hover {
  box-shadow: var(--vm-shadow-lg);
  border-color: color-mix(in srgb, var(--vm-brand) 35%, var(--vm-border));
}
.vm-news-page-featured__media {
  position: relative;
  display: block;
  border-radius: 0;
  min-height: 240px;
}
.vm-news-page-featured__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--vm-dur-slower) var(--vm-ease-out);
}
.vm-news-page-featured:hover .vm-news-page-featured__media > img { transform: scale(1.05); }

/* Nhãn "Nổi bật" nằm trên ảnh */
.vm-news-page-featured__flag {
  position: absolute;
  top: var(--vm-space-4);
  left: var(--vm-space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-grad-cta);
  color: #fff;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  box-shadow: var(--vm-shadow-cta);
}
.vm-news-page-featured__flag svg { width: 14px; height: 14px; }

.vm-news-page-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
  justify-content: center;
  padding: var(--vm-space-6);
}
.vm-news-page-featured__title {
  font-size: var(--vm-text-2xl);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text);
}
.vm-news-page-featured__title a { color: inherit; }
.vm-news-page-featured__title a:hover { color: var(--vm-brand-text); }
.vm-news-page-featured__desc {
  color: var(--vm-text-soft);
  font-size: var(--vm-text-base);
  line-height: var(--vm-leading-relaxed);
}

@media (min-width: 768px) {
  .vm-news-page-featured { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; }
  .vm-news-page-featured__media { min-height: 100%; }
  .vm-news-page-featured__body { padding: var(--vm-space-10); }
}

/* ---------- 1.2 Thanh lọc ---------- */
.vm-news-page-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-space-4);
  padding: var(--vm-space-4);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
}
.vm-news-page-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-2);
}
.vm-news-page-filters__search {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 360px;
}

/* ---------- 1.3 Bố cục danh sách + cột phải ---------- */
.vm-news-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .vm-news-page-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--vm-space-12); }
}

/* Cột phải: ẩn dưới 1024px theo yêu cầu thiết kế. Chức năng lọc "Chủ đề
   quan tâm" của nó được thay bằng hàng chip .vm-news-page-topics (mục 1.2b). */
.vm-news-page-side { display: none; }
@media (min-width: 1024px) {
  .vm-news-page-side {
    display: flex;
    flex-direction: column;
    gap: var(--vm-space-6);
    position: sticky;
    /* Không giới hạn chiều cao + cuộn lồng nữa: cột cao hơn màn hình thì
       page-news.js (stickyAside) đặt mốc dính âm để cột trôi theo trang. */
    top: var(--vm-aside-top, calc(var(--vm-header-h) + var(--vm-space-5)));
  }
}

/* ---------- 1.2b Hàng chip "Chủ đề" (dưới 1024px) ----------
   Cuộn ngang một hàng; mép phải mờ dần là dấu hiệu "còn nữa", tắt khi đã
   cuộn tới cuối (lớp is-scroll-end / is-scroll-start do page-news.js bật). */
.vm-news-page-topics {
  --vm-fade-l: 0px;
  --vm-fade-r: 48px;
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  min-width: 0;
  margin-top: var(--vm-space-4);
}
.vm-news-page-topics[hidden] { display: none; }
@media (max-width: 639.98px) {
  /* Màn hẹp: nhãn nằm riêng một dòng để hàng chip được trọn bề ngang */
  .vm-news-page-topics { flex-direction: column; align-items: stretch; gap: var(--vm-space-2); }
}
.vm-news-page-topics.is-scroll-start { --vm-fade-l: 24px; }
.vm-news-page-topics.is-scroll-end { --vm-fade-r: 0px; }
.vm-news-page-topics--always { margin: 0 0 var(--vm-space-6); }
@media (min-width: 1024px) {
  /* Từ 1024px danh sách tin có cột phụ với đám mây chủ đề — không cần hàng này */
  .vm-news-page-topics:not(.vm-news-page-topics--always) { display: none; }
}
.vm-news-page-topics__label {
  flex: 0 0 auto;
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
}
.vm-news-page-topics__track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--vm-space-2);
  padding-block: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--vm-fade-l), #000 calc(100% - var(--vm-fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--vm-fade-l), #000 calc(100% - var(--vm-fade-r)), transparent 100%);
}
.vm-news-page-topics__track::-webkit-scrollbar { display: none; }
.vm-news-page-topics__track .vm-news-page-tag {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}
.vm-news-page-topics__track .vm-news-page-mini__date { margin: 0; }

/* Nút "Bỏ lọc chủ đề" ở dòng trạng thái */
.vm-news-page-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--vm-space-2);
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-pill);
  background: var(--vm-surface);
  color: var(--vm-brand-text);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semi);
  cursor: pointer;
}
.vm-news-page-clear:hover { border-color: var(--vm-brand); }
.vm-news-page-clear svg { width: 14px; height: 14px; }

.vm-news-page-widget {
  padding: var(--vm-space-5);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
}
.vm-news-page-widget__title {
  display: flex;
  align-items: center;
  gap: var(--vm-space-2);
  margin-bottom: var(--vm-space-4);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  color: var(--vm-brand-text);
}
.vm-news-page-widget__title svg { width: 16px; height: 16px; }

/* Danh sách bài mới nhất dạng thu nhỏ */
.vm-news-page-mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
}
.vm-news-page-mini {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: var(--vm-space-3);
  align-items: center;
}
.vm-news-page-mini .vm-media { border-radius: var(--vm-radius-sm); }
.vm-news-page-mini__title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text);
  transition: color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-news-page-mini:hover .vm-news-page-mini__title { color: var(--vm-brand-text); }
.vm-news-page-mini__date {
  margin-top: 4px;
  font-size: var(--vm-text-2xs);
  color: var(--vm-text-muted);
}

/* Đám mây thẻ */
.vm-news-page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-2);
}
.vm-news-page-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.34rem 0.72rem;
  border-radius: var(--vm-radius-pill);
  border: 1px solid var(--vm-border);
  background: var(--vm-bg-subtle);
  color: var(--vm-text-soft);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-medium);
  cursor: pointer;
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-news-page-tag:hover { border-color: var(--vm-brand); color: var(--vm-brand-text); }
.vm-news-page-tag.is-active {
  background: var(--vm-brand);
  border-color: var(--vm-brand);
  color: var(--vm-text-on-brand);
}
.vm-news-page-tag__n {
  font-size: var(--vm-text-2xs);
  opacity: 0.72;
}

/* Khối kêu gọi đăng ký bản tin */
.vm-news-page-cta {
  position: relative;
  overflow: hidden;
  padding: var(--vm-space-6);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-grad-deep);
  color: #fff;
}
.vm-news-page-cta__title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-lg);
  font-weight: var(--vm-weight-bold);
  color: #fff;
  margin-bottom: var(--vm-space-2);
}
.vm-news-page-cta__desc {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--vm-space-4);
}
.vm-news-page-cta form { display: flex; flex-direction: column; gap: var(--vm-space-3); }
.vm-news-page-cta .vm-input {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.vm-news-page-cta .vm-input::placeholder { color: rgba(255, 255, 255, 0.62); }

/* Hàng thông tin phụ trên thẻ tin tức */
.vm-news-page-cardmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  font-size: var(--vm-text-xs);
  color: var(--vm-text-muted);
}
.vm-news-page-cardmeta span { display: inline-flex; align-items: center; gap: 5px; }
.vm-news-page-cardmeta svg { width: 14px; height: 14px; }

/* Lưới bài viết nằm cạnh cột phụ 320px nên hạ bề rộng tối thiểu của thẻ
   để vẫn đạt 2 cột ở 1024px và 3 cột từ 1400px trở lên. */
.vm-news-page-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr)); }

.vm-news-page-more { display: flex; justify-content: center; margin-top: var(--vm-space-10); }

/* Số lượng kết quả đang hiển thị */
.vm-news-page-count {
  margin-bottom: var(--vm-space-5);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-muted);
}
.vm-news-page-count b { color: var(--vm-text); font-weight: var(--vm-weight-semi); }

/* =====================================================================
   2. TRANG CHI TIẾT BÀI VIẾT
   ===================================================================== */
.vm-news-page-artlayout {
  margin-top: var(--vm-space-6);
  display: grid;
  /* Bắt buộc minmax(0, 1fr) chứ không phải 1fr: ô lưới mặc định có
     min-width: auto, nên một bảng rộng trong bài viết sẽ thổi phồng cả rãnh
     (đo được rãnh 328px nhưng nội dung 437px ở màn 360px) và phần chữ tràn
     bị html { overflow-x: clip } cắt vĩnh viễn — không cuộn ngang để đọc được.
     Bản màn hình ≥1024px bên dưới vốn đã viết đúng, chỉ thiếu ở đây. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vm-space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .vm-news-page-artlayout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--vm-space-12); margin-top: var(--vm-space-12); }
}

.vm-news-page-aside {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-5);
}
@media (min-width: 1024px) {
  /* Cột phụ bài viết KHÔNG dính cả khối. Cột kéo dài hết chiều cao bài
     (align-self: stretch) và chia làm hai phần:
       • __tocwrap (flex: 1) — "làn" chiếm hết chiều cao cột trừ phần dưới;
         mục lục (__toc) dính trong làn này ngay dưới đầu trang, nên có mặt từ
         lúc bắt đầu đọc và dừng ở cuối làn;
       • __float — chia sẻ + tư vấn ở đáy cột, ngang cuối bài; chỉ lộ ra khi
         mục lục đã hết dính nên hai khối không bao giờ chồng nhau.
     Dính bằng CSS thuần nên không giật, và dừng trong cột nên không bao giờ
     đè lên khối bài liên quan/chân trang. */
  .vm-news-page-aside { align-self: stretch; }
  .vm-news-page-aside__tocwrap { flex: 1 1 auto; }
  .vm-news-page-aside__float {
    display: flex;
    flex-direction: column;
    gap: var(--vm-space-5);
  }
  .vm-news-page-aside__toc {
    position: sticky;
    top: calc(var(--vm-header-h) + var(--vm-space-5));
  }
  /* Bài có mục lục dài hơn màn hình: mục lục tự cuộn trong khung của nó
     (page-news.js giữ mục đang đọc luôn trong khung). */
  .vm-news-page-aside__toc .vm-toc {
    max-height: calc(100vh - var(--vm-header-h) - 2 * var(--vm-space-5));
    max-height: calc(100dvh - var(--vm-header-h) - 2 * var(--vm-space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
@media (max-width: 1023.98px) {
  /* Dưới 1024px cột phụ rơi xuống sau toàn bài: mục lục ở đó vô dụng, đã có
     bản thu gọn .vm-news-page-tocm ngay trước thân bài. */
  .vm-news-page-aside .vm-toc,
  .vm-news-page-aside__tocwrap { display: none; }
}

/* Mục lục thu gọn đặt trước thân bài (chỉ dưới 1024px) */
.vm-news-page-tocm {
  margin-bottom: var(--vm-space-6);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-subtle);
}
.vm-news-page-tocm summary {
  display: flex;
  align-items: center;
  gap: var(--vm-space-2);
  min-height: 48px;
  padding: 0 var(--vm-space-4);
  list-style: none;
  cursor: pointer;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  color: var(--vm-brand-text);
}
.vm-news-page-tocm summary::-webkit-details-marker { display: none; }
.vm-news-page-tocm summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.vm-news-page-tocm summary > svg:last-child {
  margin-left: auto;
  transition: transform var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-news-page-tocm[open] summary > svg:last-child { transform: rotate(180deg); }
.vm-news-page-tocm__n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-brand-soft);
  font-size: var(--vm-text-2xs);
  text-align: center;
  letter-spacing: 0;
}
.vm-news-page-tocm nav {
  padding: 0 var(--vm-space-4) var(--vm-space-2);
  border-top: 1px solid var(--vm-border);
}
.vm-news-page-tocm ol { list-style: none; margin: 0; padding: 0; counter-reset: tocm; }
.vm-news-page-tocm li { counter-increment: tocm; }
.vm-news-page-tocm li + li { border-top: 1px dashed var(--vm-border); }
.vm-news-page-tocm a {
  display: flex;
  align-items: center;
  gap: var(--vm-space-2);
  min-height: 44px;
  padding: 6px 0;
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text-soft);
}
.vm-news-page-tocm a::before {
  content: counter(tocm) ".";
  color: var(--vm-brand-text);
  font-weight: var(--vm-weight-bold);
}
.vm-news-page-tocm a:hover,
.vm-news-page-tocm a.is-active { color: var(--vm-brand-text); }

/* Hàng chia sẻ ngay dưới ảnh bìa (chỉ dưới 1024px) */
.vm-news-page-sharetop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-5);
}
.vm-news-page-sharetop__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
}
.vm-news-page-sharetop__label svg { width: 16px; height: 16px; color: var(--vm-brand-text); }
@media (min-width: 1024px) {
  .vm-news-page-tocm,
  .vm-news-page-sharetop { display: none; }
}

/* Đầu bài viết — nằm trong dải hero tối nên chữ dùng màu sáng */
.vm-news-page-arthead h1 {
  max-width: 40ch;
  font-size: var(--vm-text-3xl);
  line-height: var(--vm-leading-snug);
}
.vm-news-page-arthead .vm-badge { align-self: flex-start; }
.vm-news-page-artmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vm-space-3) var(--vm-space-6);
  font-size: var(--vm-text-sm);
  color: rgba(255, 255, 255, 0.82);
}
.vm-news-page-artmeta span { display: inline-flex; align-items: center; gap: 6px; }
.vm-news-page-artmeta svg { width: 16px; height: 16px; color: var(--vm-primary-200); }

/* Ảnh bìa lớn của bài viết */
.vm-news-page-cover {
  position: relative;
  border-radius: var(--vm-radius-xl);
  box-shadow: var(--vm-shadow-lg);
}

/* Ghi chú khi bài viết chưa có nội dung đầy đủ */
.vm-news-page-note { margin-top: var(--vm-space-6); }

/* Hàng thẻ cuối bài */
.vm-news-page-tagrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vm-space-2);
  margin-top: var(--vm-space-10);
  padding-top: var(--vm-space-6);
  border-top: 1px solid var(--vm-border);
}
.vm-news-page-tagrow__label {
  margin-right: var(--vm-space-2);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
}
.vm-news-page-tagrow a {
  display: inline-flex;
  padding: 0.34rem 0.8rem;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-brand-soft);
  color: var(--vm-brand-text);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-medium);
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-news-page-tagrow a:hover { background: var(--vm-brand); color: var(--vm-text-on-brand); }

/* Điều hướng bài trước / bài sau */
.vm-news-page-pn {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-4);
  margin-top: var(--vm-space-8);
}
@media (min-width: 640px) {
  .vm-news-page-pn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vm-news-page-pn__item {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-2);
  padding: var(--vm-space-5);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-news-page-pn__item:hover {
  border-color: color-mix(in srgb, var(--vm-brand) 40%, var(--vm-border));
  box-shadow: var(--vm-shadow-md);
  transform: translateY(-3px);
}
.vm-news-page-pn__item--next { text-align: right; align-items: flex-end; }
.vm-news-page-pn__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  color: var(--vm-brand-text);
}
.vm-news-page-pn__label svg { width: 14px; height: 14px; }
.vm-news-page-pn__title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-base);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text);
}
.vm-news-page-pn__item:hover .vm-news-page-pn__title { color: var(--vm-brand-text); }

/* Khối tư vấn ở cột phải bài viết */
.vm-news-page-help {
  padding: var(--vm-space-6);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-grad-brand);
  color: #fff;
}
.vm-news-page-help__title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-bold);
  color: #fff;
  margin-bottom: var(--vm-space-2);
}
.vm-news-page-help__desc {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  /* R1-phụ — Bỏ mức mờ 0.86: trên --vm-grad-brand nó chỉ đạt 3.84:1, hụt AA.
     Xem giải thích đầy đủ ở .vm-footer-cta__box p trong layout.css. */
  color: var(--vm-text-on-grad-brand);
  margin-bottom: var(--vm-space-4);
}
.vm-news-page-help__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-2);
  margin-bottom: var(--vm-space-4);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-lg);
  font-weight: var(--vm-weight-bold);
  color: #fff;
}
.vm-news-page-help__phone:hover { color: #fff; text-decoration: underline; }
.vm-news-page-help__phone svg { width: 20px; height: 20px; }

/* Hộp chia sẻ */
.vm-news-page-sharebox {
  padding: var(--vm-space-5);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
}
.vm-news-page-sharebox__title {
  margin-bottom: var(--vm-space-3);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  color: var(--vm-brand-text);
}

/* ---------- 2b. Vùng chạm tối thiểu 44px trên màn hình cảm ứng / hẹp ----------
   Đo trước khi sửa: "Đọc tiếp" 83×24, thẻ chủ đề cuối bài cao 31, số điện
   thoại khối trợ giúp 168×31, nút chia sẻ 40×40. */
@media (max-width: 1023.98px), (pointer: coarse) {
  .vm-news-card .vm-link-more,
  .vm-news-page-help__phone,
  .vm-news-page-tagrow a,
  .vm-news-page-tag,
  .vm-news-page-clear {
    min-height: 44px;
    align-items: center;
  }
  .vm-news-page-tagrow a { padding-inline: 1rem; }
  .vm-news-page-tag { padding-inline: 0.95rem; }
  .vm-news-page-sharetop .vm-share__btn,
  .vm-news-page-sharebox .vm-share__btn { width: 44px; height: 44px; }
}

/* =====================================================================
   3. TRANG TUYỂN DỤNG
   ===================================================================== */
.vm-career-intro { max-width: 78ch; }
.vm-career-intro p { color: var(--vm-text-soft); line-height: var(--vm-leading-relaxed); }
.vm-career-intro p + p { margin-top: var(--vm-space-4); }

/* Thanh lọc vị trí */
.vm-career-filters {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
  margin-bottom: var(--vm-space-8);
  padding: var(--vm-space-5);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-subtle);
}
.vm-career-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vm-space-2);
}
.vm-career-filters__label {
  min-width: 92px;
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
}

/* Đầu mục vị trí trong accordion */
.vm-career-jobhead {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-2);
  min-width: 0;
  flex: 1 1 auto;
}
.vm-career-jobhead__title {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  color: inherit;
}
.vm-career-jobmeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-2) var(--vm-space-4);
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-normal);
  color: var(--vm-text-muted);
}
.vm-career-jobmeta span { display: inline-flex; align-items: center; gap: 5px; }
.vm-career-jobmeta svg { width: 14px; height: 14px; color: var(--vm-brand-text); }
.vm-career-jobmeta__deadline { color: var(--vm-cta-text); font-weight: var(--vm-weight-semi); }

/* Tin đã quá hạn nộp (xét theo ngày giờ Việt Nam trong page-news.js) */
.vm-career-expired {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-danger-50);
  color: var(--vm-danger-700);
  font-weight: var(--vm-weight-semi);
}
.vm-accordion__item.is-expired .vm-career-jobhead__title { color: var(--vm-text-muted); }
.vm-accordion__item.is-expired .vm-career-jobmeta__deadline {
  color: var(--vm-text-muted);
  text-decoration: line-through;
}
.vm-career-jobbody .vm-btn[disabled],
.vm-career-detail .vm-btn[aria-disabled="true"] {
  opacity: 0.5;
  filter: grayscale(0.6);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.vm-badge.vm-career-status--off {
  background: var(--vm-danger-50);
  border-color: transparent;
  color: var(--vm-danger-700);
}

/* ---------- Trang chi tiết một vị trí (single-vm_job.php) ---------- */
.vm-news-page-artlayout.vm-career-detail { margin-top: 0; }
.vm-career-detail__card {
  padding: var(--vm-space-6);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-md);
}
@media (min-width: 768px) { .vm-career-detail__card { padding: var(--vm-space-10); } }
.vm-career-detail__card h2 {
  margin-bottom: var(--vm-space-3);
  font-size: var(--vm-text-lg);
  color: var(--vm-text);
}
.vm-career-detail__card p { color: var(--vm-text-soft); line-height: var(--vm-leading-relaxed); }
.vm-career-detail__note { margin-bottom: var(--vm-space-5); }
.vm-career-detail__back { margin-top: var(--vm-space-6); }
.vm-career-detail__back .vm-link-more { min-height: 44px; }

.vm-career-facts { margin: 0 0 var(--vm-space-5); }
.vm-career-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--vm-space-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--vm-border);
  font-size: var(--vm-text-sm);
}
.vm-career-facts dt { color: var(--vm-text-muted); flex-shrink: 0; }
.vm-career-facts dd { margin: 0; color: var(--vm-text); font-weight: var(--vm-weight-semi); text-align: right; }

.vm-career-others { list-style: none; margin: 0; padding: 0; }
.vm-career-others li + li { border-top: 1px solid var(--vm-border); }
.vm-career-others a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 10px 0;
}
.vm-career-others b {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text);
}
.vm-career-others span { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }
.vm-career-others a:hover b { color: var(--vm-brand-text); }
.vm-news-page-help .vm-btn { overflow-wrap: anywhere; }
.vm-news-page-help .vm-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Nội dung mở ra của một vị trí */
.vm-career-jobbody { display: flex; flex-direction: column; gap: var(--vm-space-5); }
.vm-career-jobbody h4 {
  margin-bottom: var(--vm-space-2);
  font-size: var(--vm-text-base);
  color: var(--vm-text);
}
.vm-career-jobbody ul {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-2);
  list-style: none;
}
.vm-career-jobbody li {
  position: relative;
  padding-left: var(--vm-space-6);
  line-height: var(--vm-leading-relaxed);
}
.vm-career-jobbody li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--vm-grad-cta);
  transform: rotate(45deg);
}
.vm-career-jobbody__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  padding-top: var(--vm-space-2);
}

/* Quy trình tuyển dụng 4 bước */
.vm-career-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-6);
  counter-reset: vmstep;
}
@media (min-width: 640px) { .vm-career-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vm-career-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vm-career-step {
  position: relative;
  counter-increment: vmstep;
  padding: var(--vm-space-6);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  transition: all var(--vm-dur-base) var(--vm-ease-out);
}
.vm-career-step:hover {
  border-color: color-mix(in srgb, var(--vm-brand) 40%, var(--vm-border));
  box-shadow: var(--vm-shadow-md);
  transform: translateY(-4px);
}
.vm-career-step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--vm-space-4);
  border-radius: 50%;
  background: var(--vm-brand-soft);
  color: var(--vm-brand-text);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-black);
}
.vm-career-step__num::before { content: counter(vmstep, decimal-leading-zero); }
.vm-career-step__title { font-size: var(--vm-text-md); margin-bottom: var(--vm-space-2); }
.vm-career-step__desc {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-relaxed);
}

/* Biểu mẫu ứng tuyển */
.vm-career-formlayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .vm-career-formlayout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--vm-space-12); }
}
.vm-career-formcard {
  padding: var(--vm-space-6);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-md);
}
@media (min-width: 768px) { .vm-career-formcard { padding: var(--vm-space-10); } }

/* Ô tải tệp CV — chỉ mang tính giao diện */
.vm-career-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vm-space-2);
  padding: var(--vm-space-6);
  border: 2px dashed var(--vm-border-strong);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-subtle);
  text-align: center;
  cursor: pointer;
  transition: all var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-career-upload:hover { border-color: var(--vm-brand); background: var(--vm-brand-soft); }
.vm-career-upload:focus-within { border-color: var(--vm-brand); box-shadow: var(--vm-shadow-focus); }
.vm-career-upload svg { width: 26px; height: 26px; color: var(--vm-brand-text); }
.vm-career-upload__main { font-size: var(--vm-text-sm); font-weight: var(--vm-weight-semi); color: var(--vm-text); }
.vm-career-upload__sub { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }
/* Ô chọn tệp phủ kín khung nhưng trong suốt — vẫn bấm và tab tới được */
.vm-career-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Bù một quy tắc còn thiếu trong components.css: biểu tượng cảnh báo trong
   .vm-field__error không được đặt kích thước nên bị kéo giãn hết cỡ.
   Chỉ khai báo thêm, không sửa tệp lõi. */
.vm-field__error svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Cột thông tin liên hệ nhân sự */
.vm-career-hr {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
  padding: var(--vm-space-6);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-grad-deep);
  color: #fff;
}
.vm-career-hr h3 { color: #fff; font-size: var(--vm-text-lg); }
.vm-career-hr p { font-size: var(--vm-text-sm); line-height: var(--vm-leading-relaxed); color: rgba(255, 255, 255, 0.82); }
.vm-career-hr__row {
  display: flex;
  align-items: flex-start;
  gap: var(--vm-space-3);
  font-size: var(--vm-text-sm);
  color: rgba(255, 255, 255, 0.92);
}
.vm-career-hr__row svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--vm-primary-200); }
.vm-career-hr__row a { color: #fff; }
.vm-career-hr__row a:hover { text-decoration: underline; }

/* =====================================================================
   4. TINH CHỈNH CHO CHẾ ĐỘ TỐI
   Các biến --vm-* đã tự đổi theo chủ đề, chỉ chỉnh vài chỗ dùng nền sáng cố định.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vm-news-page-tag:not(.is-active) { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-career-filters { background: var(--vm-surface-2); }
  :root:not([data-theme="light"]) .vm-career-upload { background: var(--vm-surface-2); }
}
:root[data-theme="dark"] .vm-news-page-tag:not(.is-active) { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-career-filters { background: var(--vm-surface-2); }
:root[data-theme="dark"] .vm-career-upload { background: var(--vm-surface-2); }

/* =====================================================================
   5. IN ẤN — bỏ các khối phụ khi in bài viết
   ===================================================================== */
@media print {
  .vm-news-page-aside,
  .vm-news-page-pn,
  .vm-read-progress { display: none !important; }
  .vm-news-page-artlayout { grid-template-columns: 1fr; }
}