/* =====================================================================
   VINAMEDICAL — CSS riêng cho nhóm trang
   Giới thiệu / Lĩnh vực hoạt động / Đối tác.
   Tiền tố: vm-about-*  và  vm-partner-page-*
   Chỉ dùng biến --vm-* khai báo trong tokens.css (tự động hợp chế độ tối).
   Phụ thuộc: tokens.css, base.css, components.css, layout.css
   ===================================================================== */

/* =====================================================================
   1. KHỐI GIỚI THIỆU CHUNG (gioi-thieu.html)
   ===================================================================== */
.vm-about-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* --- Cụm ảnh xếp lệch --- */
.vm-about-intro__media {
  position: relative;
  padding-bottom: clamp(3rem, 8vw, 5rem);
  padding-right: clamp(2rem, 8vw, 4.5rem);
}
.vm-about-intro__shot {
  overflow: hidden;
  border-radius: var(--vm-radius-xl);
  background: var(--vm-bg-muted);
  box-shadow: var(--vm-shadow-lg);
}
.vm-about-intro__shot img { width: 100%; height: 100%; object-fit: cover; }
.vm-about-intro__shot--main { aspect-ratio: 4 / 3; }
.vm-about-intro__shot--sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--vm-bg);
  box-shadow: var(--vm-shadow-xl);
}

/* Thẻ nổi ghi số năm hoạt động */
.vm-about-intro__badge {
  position: absolute;
  left: clamp(-0.5rem, 1vw, 0.75rem);
  bottom: clamp(2rem, 6vw, 3.5rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  padding: var(--vm-space-4) var(--vm-space-5);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-grad-cta);
  color: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-cta);
}
.vm-about-intro__badge-ico svg { width: 30px; height: 30px; }
.vm-about-intro__badge-txt { display: flex; flex-direction: column; line-height: 1.15; }
.vm-about-intro__badge-txt b {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-2xl);
  font-weight: var(--vm-weight-black);
}
.vm-about-intro__badge-txt small { font-size: var(--vm-text-2xs); opacity: 0.92; }

/* --- Cột nội dung --- */
.vm-about-intro__body { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-about-intro__text { font-size: var(--vm-text-base); }
.vm-about-intro__text > * + * { margin-top: var(--vm-space-4); }

.vm-about-intro__legal {
  display: flex;
  align-items: flex-start;
  gap: var(--vm-space-3);
  padding: var(--vm-space-4) var(--vm-space-5);
  border-radius: var(--vm-radius-md);
  border: 1px dashed color-mix(in srgb, var(--vm-brand) 40%, transparent);
  background: var(--vm-brand-soft);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
}
.vm-about-intro__legal svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--vm-brand); }

/* Bốn chỉ số nhỏ */
.vm-about-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vm-about-figure { display: flex; align-items: center; gap: var(--vm-space-3); }
.vm-about-figure__ico {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
}
.vm-about-figure__ico svg { width: 20px; height: 20px; }
.vm-about-figure span { display: flex; flex-direction: column; line-height: 1.25; }
.vm-about-figure b {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-xl);
  font-weight: var(--vm-weight-black);
  color: var(--vm-text);
}
.vm-about-figure small { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }

@media (min-width: 900px) {
  .vm-about-intro { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .vm-about-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   2. SỨ MỆNH & TẦM NHÌN
   ===================================================================== */
.vm-about-mv {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-6);
}
.vm-about-mv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--vm-radius-xl);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-sm);
  overflow: hidden;
  transition: transform var(--vm-dur-base) var(--vm-ease-out),
              box-shadow var(--vm-dur-base) var(--vm-ease-out);
}
.vm-about-mv__card:hover { transform: translateY(-5px); box-shadow: var(--vm-shadow-lg); }
.vm-about-mv__card::after {
  content: "";
  position: absolute;
  right: -70px; top: -70px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: var(--vm-brand-soft);
  pointer-events: none;
}
.vm-about-mv__card--vision::after { background: var(--vm-cta-soft); }
.vm-about-mv__icon {
  position: relative;
  z-index: 1;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-lg);
  background: var(--vm-grad-brand);
  color: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-brand);
}
.vm-about-mv__card--vision .vm-about-mv__icon {
  background: var(--vm-grad-cta);
  box-shadow: var(--vm-shadow-cta);
}
.vm-about-mv__icon svg { width: 30px; height: 30px; }
.vm-about-mv__title { position: relative; z-index: 1; font-size: var(--vm-text-xl); }
.vm-about-mv__text {
  position: relative;
  z-index: 1;
  font-size: var(--vm-text-md);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}

@media (min-width: 860px) {
  .vm-about-mv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   3. DANH SÁCH CÓ DẤU TICK
   ===================================================================== */
.vm-about-ticks {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vm-about-ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--vm-space-3);
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-normal);
  color: var(--vm-text-soft);
}
.vm-about-ticks li svg {
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 4px;
  color: var(--vm-brand);
}
.vm-about-ticks--sm { gap: var(--vm-space-2); }
.vm-about-ticks--sm li { font-size: var(--vm-text-xs); }

/* Hai cột Mục tiêu & Định hướng */
.vm-about-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-6);
}
.vm-about-lists__col {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-5);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--vm-radius-lg);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
}
.vm-about-lists__col--alt { background: var(--vm-bg-subtle); }
.vm-about-lists__head { display: flex; align-items: center; gap: var(--vm-space-3); }
.vm-about-lists__head span {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
}
.vm-about-lists__head span svg { width: 22px; height: 22px; }
.vm-about-lists__head h3 { font-size: var(--vm-text-lg); }

@media (min-width: 860px) {
  .vm-about-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   4. THẺ LĨNH VỰC TRÊN TRANG GIỚI THIỆU
   ===================================================================== */
.vm-about-sc__title { font-size: var(--vm-text-md); line-height: var(--vm-leading-snug); }
.vm-about-sc__title a { color: var(--vm-text); }
.vm-about-sc__title a:hover { color: var(--vm-brand); }
.vm-about-sc__desc {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
  margin-bottom: var(--vm-space-2);
}
.vm-service-card .vm-link-more { margin-top: auto; }

/* =====================================================================
   5. NĂNG LỰC & CHỨNG NHẬN
   ===================================================================== */
.vm-about-cap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-6);
}
.vm-about-cap__card {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-3);
  padding: var(--vm-space-6);
  border-radius: var(--vm-radius-lg);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  transition: border-color var(--vm-dur-base) var(--vm-ease-out),
              box-shadow var(--vm-dur-base) var(--vm-ease-out),
              transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-about-cap__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--vm-brand) 40%, var(--vm-border));
  box-shadow: var(--vm-shadow-md);
}
.vm-about-cap__ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
}
.vm-about-cap__ico svg { width: 25px; height: 25px; }
.vm-about-cap__card h3 { font-size: var(--vm-text-md); }
.vm-about-cap__card p {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}
.vm-about-cap-note { margin-top: var(--vm-space-8); }

@media (min-width: 700px) { .vm-about-cap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vm-about-cap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =====================================================================
   6. TRANG DANH SÁCH LĨNH VỰC (linh-vuc-hoat-dong.html)
   ===================================================================== */
.vm-about-lv { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 6rem); }

.vm-about-lv__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.vm-about-lv__media {
  position: relative;
  margin: 0;
  border-radius: var(--vm-radius-xl);
  overflow: hidden;
  background: var(--vm-bg-muted);
  box-shadow: var(--vm-shadow-lg);
  aspect-ratio: 16 / 10;
}
.vm-about-lv__media img { width: 100%; height: 100%; object-fit: cover; }
.vm-about-lv__badge {
  position: absolute;
  left: var(--vm-space-5);
  bottom: var(--vm-space-5);
  width: 78px; height: 78px;
  display: grid; place-items: center;
  padding: var(--vm-space-3);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-lg);
}
.vm-about-lv__badge img { width: 100%; height: auto; object-fit: contain; }

.vm-about-lv__body { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-about-lv__title { font-size: var(--vm-text-2xl); }
.vm-about-lv__desc {
  font-size: var(--vm-text-md);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}

@media (min-width: 900px) {
  .vm-about-lv__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vm-about-lv__row--flip .vm-about-lv__media { order: 2; }
}

/* Dải kêu gọi liên hệ cuối trang */
.vm-about-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-5);
  align-items: flex-start;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-grad-brand);
  color: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-brand);
  overflow: hidden;
}
.vm-about-cta h2 { color: var(--vm-neutral-0); font-size: var(--vm-text-2xl); }
.vm-about-cta p { color: color-mix(in srgb, var(--vm-neutral-0) 85%, transparent); max-width: 62ch; }
.vm-about-cta__actions { display: flex; flex-wrap: wrap; gap: var(--vm-space-3); }

@media (min-width: 900px) {
  .vm-about-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--vm-space-8);
  }
  .vm-about-cta__actions { flex-shrink: 0; }
}

/* =====================================================================
   7. QUY TRÌNH DẠNG BƯỚC ĐÁNH SỐ
   Di động: đường nối dọc — Desktop: đường nối ngang
   ===================================================================== */
.vm-about-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vm-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.vm-about-steps__item {
  position: relative;
  display: flex;
  gap: var(--vm-space-4);
}
.vm-about-steps__num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-black);
  background: var(--vm-grad-brand);
  color: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-brand);
}
.vm-about-steps__item::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: calc(-1 * var(--vm-space-6));
  width: 2px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--vm-brand) 60%, transparent), transparent);
}
.vm-about-steps__item:last-child::after { display: none; }
.vm-about-steps__title { font-size: var(--vm-text-md); margin-bottom: var(--vm-space-2); }
.vm-about-steps__desc {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}

@media (min-width: 640px) {
  .vm-about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vm-space-8); }
  .vm-about-steps__item { flex-direction: column; }
  .vm-about-steps__item::after {
    left: 56px;
    right: calc(-1 * var(--vm-space-8));
    top: 23px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(to right,
      color-mix(in srgb, var(--vm-brand) 60%, transparent), transparent);
  }
  .vm-about-steps__item:nth-child(2n)::after { display: none; }
}

@media (min-width: 1024px) {
  .vm-about-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vm-about-steps__item:nth-child(2n)::after { display: block; }
  .vm-about-steps__item:nth-child(3n)::after { display: none; }
  .vm-about-steps__item:last-child::after { display: none; }
}

/* =====================================================================
   8. TRANG CHI TIẾT (lĩnh vực & đối tác): 2 cột + cột dính
   ===================================================================== */
.vm-about-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.vm-about-detail__main { min-width: 0; }
.vm-about-detail__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  margin-top: var(--vm-space-10);
  padding-top: var(--vm-space-6);
  border-top: 1px solid var(--vm-border);
}
.vm-about-detail__aside { display: flex; flex-direction: column; gap: var(--vm-space-5); }

.vm-about-aside__box {
  padding: var(--vm-space-5);
  border-radius: var(--vm-radius-lg);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-sm);
}
.vm-about-aside__box--cta {
  background: var(--vm-bg-subtle);
  border-color: color-mix(in srgb, var(--vm-brand) 30%, var(--vm-border));
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-3);
}
.vm-about-aside__title {
  display: flex;
  align-items: center;
  gap: var(--vm-space-2);
  font-size: var(--vm-text-md);
  margin-bottom: var(--vm-space-4);
}
.vm-about-aside__box--cta .vm-about-aside__title { margin-bottom: 0; }
.vm-about-aside__title svg { width: 19px; height: 19px; color: var(--vm-brand); flex-shrink: 0; }
.vm-about-aside__note { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }

.vm-about-hotline {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  padding: var(--vm-space-3) var(--vm-space-4);
  border-radius: var(--vm-radius-md);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  color: var(--vm-text);
}
.vm-about-hotline:hover { color: var(--vm-brand); border-color: var(--vm-brand); }
.vm-about-hotline svg { width: 24px; height: 24px; color: var(--vm-cta); flex-shrink: 0; }
.vm-about-hotline span { display: flex; flex-direction: column; line-height: 1.25; }
.vm-about-hotline small { font-size: var(--vm-text-2xs); color: var(--vm-text-muted); }
.vm-about-hotline b { font-family: var(--vm-font-display); font-size: var(--vm-text-lg); }

.vm-about-aside__list { display: flex; flex-direction: column; gap: var(--vm-space-2); }
.vm-about-aside__list a {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  padding: var(--vm-space-2);
  border-radius: var(--vm-radius-md);
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text-soft);
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out),
              color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-about-aside__list a:hover { background: var(--vm-brand-soft); color: var(--vm-brand); }
.vm-about-aside__list img {
  flex-shrink: 0;
  width: 38px; height: 38px;
  object-fit: contain;
  padding: 4px;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-neutral-0);
  border: 1px solid var(--vm-border);
}
.vm-about-aside__list span { flex: 1; }
.vm-about-aside__list svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }

@media (min-width: 1000px) {
  .vm-about-detail { grid-template-columns: minmax(0, 1fr) 340px; }
  .vm-about-detail__aside {
    position: sticky;
    top: calc(var(--vm-header-h) + var(--vm-space-6));
  }
}

/* =====================================================================
   9. ĐẦU TRANG CHI TIẾT LĨNH VỰC
   ===================================================================== */
.vm-about-svc-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.vm-about-svc-hero__text { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-about-svc-hero__cover {
  position: relative;
  margin: 0;
  border-radius: var(--vm-radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: var(--vm-shadow-xl);
}
.vm-about-svc-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.vm-about-svc-hero__ico {
  position: absolute;
  right: var(--vm-space-4);
  bottom: var(--vm-space-4);
  width: 66px; height: 66px;
  display: grid; place-items: center;
  padding: var(--vm-space-2);
  border-radius: var(--vm-radius-md);
  background: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-md);
}
.vm-about-svc-hero__ico img { width: 100%; height: auto; object-fit: contain; }

@media (min-width: 960px) {
  .vm-about-svc-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* =====================================================================
   10. TRANG DANH SÁCH ĐỐI TÁC (doi-tac.html)
   ===================================================================== */
.vm-partner-page__card { text-align: center; }
.vm-partner-page__card .vm-partner-card__country {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vm-partner-page__card .vm-partner-card__country svg { width: 14px; height: 14px; }
.vm-partner-page__summary {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-normal);
  color: var(--vm-text-soft);
  flex: 1;
}
.vm-partner-page__card .vm-btn { margin-top: var(--vm-space-2); }

/* Lý do trở thành đối tác */
.vm-partner-page__why {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.vm-partner-page__reasons { display: flex; flex-direction: column; gap: var(--vm-space-5); }
.vm-partner-page__reason {
  display: flex;
  gap: var(--vm-space-4);
  padding: var(--vm-space-5);
  border-radius: var(--vm-radius-lg);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
}
.vm-partner-page__reason > span {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
}
.vm-partner-page__reason > span svg { width: 23px; height: 23px; }
.vm-partner-page__reason h3 { font-size: var(--vm-text-md); margin-bottom: 4px; }
.vm-partner-page__reason p {
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-text-soft);
}
/* min-width:0 để ô lưới co lại được, tránh tràn ở màn hình hẹp */
.vm-partner-page__form { min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--vm-radius-xl);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  box-shadow: var(--vm-shadow-md);
}
.vm-partner-page__form > h3 { font-size: var(--vm-text-lg); margin-bottom: var(--vm-space-2); }
.vm-partner-page__form > p {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  margin-bottom: var(--vm-space-6);
}

@media (min-width: 960px) {
  .vm-partner-page__why { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* =====================================================================
   11. TRANG HỒ SƠ ĐỐI TÁC (doi-tac-chi-tiet.html)
   ===================================================================== */
.vm-partner-page__hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.vm-partner-page__hero-text { display: flex; flex-direction: column; gap: var(--vm-space-4); }
.vm-partner-page__full {
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-semi);
  color: color-mix(in srgb, var(--vm-neutral-0) 88%, transparent);
}
.vm-partner-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vm-partner-page__meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.35rem 0.85rem;
  border-radius: var(--vm-radius-pill);
  font-size: var(--vm-text-xs);
  color: var(--vm-neutral-0);
  background: color-mix(in srgb, var(--vm-neutral-0) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vm-neutral-0) 24%, transparent);
}
.vm-partner-page__meta svg { width: 15px; height: 15px; }
.vm-partner-page__plate {
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--vm-radius-xl);
  background: var(--vm-neutral-0);
  box-shadow: var(--vm-shadow-xl);
}
.vm-partner-page__plate img { width: 100%; max-width: 260px; height: auto; object-fit: contain; }

@media (min-width: 900px) {
  .vm-partner-page__hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* Thẻ dòng sản phẩm phân phối */
.vm-partner-page__line { align-items: center; }
.vm-partner-page__line .vm-feature__desc { margin: 0; }

/* Điều hướng hãng trước / hãng sau */
.vm-partner-page__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-space-4);
}
.vm-partner-page__nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--vm-space-3);
  padding: var(--vm-space-3) var(--vm-space-5);
  border-radius: var(--vm-radius-md);
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  color: var(--vm-text);
  max-width: 100%;
  transition: border-color var(--vm-dur-fast) var(--vm-ease-out),
              color var(--vm-dur-fast) var(--vm-ease-out),
              transform var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-partner-page__nav-item:hover {
  border-color: var(--vm-brand);
  color: var(--vm-brand);
  transform: translateY(-2px);
}
.vm-partner-page__nav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.vm-partner-page__nav-item span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.vm-partner-page__nav-item small { font-size: var(--vm-text-2xs); color: var(--vm-text-muted); }
.vm-partner-page__nav-item b {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vm-partner-page__nav-item--next { text-align: right; }
.vm-partner-page__nav-item--next span { align-items: flex-end; }

@media (max-width: 560px) {
  .vm-partner-page__nav { flex-direction: column; align-items: stretch; }
  .vm-partner-page__nav-item { justify-content: flex-start; }
  .vm-partner-page__nav-item--next { justify-content: flex-end; }
}

/* =====================================================================
   12. TINH CHỈNH NHỎ
   ===================================================================== */
/* Ô chứa biểu tượng chèn bằng JS trong khối cảnh báo */
.vm-alert > [data-icon] { flex-shrink: 0; display: flex; align-items: flex-start; }

/* Trên nền tối, viền ảnh lệch dùng nền trang để tách khối */
.vm-about-intro__shot--sub { border-color: var(--vm-bg); }

/* Không cho bảng thông tin nhanh tràn ngang trong cột dính */
.vm-about-aside__box .vm-table-wrap { border: 0; }
.vm-about-aside__box .vm-table th,
.vm-about-aside__box .vm-table td {
  padding: var(--vm-space-3);
  font-size: var(--vm-text-xs);
}