/* =====================================================================
   VINAMEDICAL — Kiểu dáng riêng cho trang Liên hệ và trang 404
   Tiền tố: .vm-contact-*  (trang lien-he.html)
            .vm-404-*      (trang 404.html)
   Chỉ dùng biến --vm-* khai báo trong tokens.css, không hard-code màu.
   Chế độ tối được thừa hưởng tự động vì mọi màu đều đi qua biến vai trò.
   ===================================================================== */

/* =====================================================================
   0. TIỆN ÍCH DÙNG CHUNG CHO HAI TRANG
   ===================================================================== */

/* Ô giữ chỗ cho biểu tượng chèn bằng VM.icon(): tự tan biến khỏi bố cục
   để thẻ <svg> bên trong thừa hưởng đúng kiểu của thành phần bao ngoài
   (ví dụ .vm-alert svg, .vm-input-group svg đều nhắm thẳng vào svg). */
.vm-icon-slot { display: contents; }

/* Tên pháp lý công ty đặt dưới tiêu đề hero trang Liên hệ */
.vm-contact-hero-legal {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-wide);
  line-height: var(--vm-leading-normal);
  color: var(--vm-primary-200);
  max-width: 60ch;
}

/* =====================================================================
   1. DẢI KÊNH LIÊN HỆ NHANH
   ===================================================================== */
.vm-contact-channels {
  display: grid;
  gap: var(--vm-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
}

/* Mỗi thẻ là một liên kết bấm được (tel:, mailto:, facebook…) */
.vm-contact-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-3);
  padding: var(--vm-space-6);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-line);
  color: var(--vm-text);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--vm-dur-base) var(--vm-ease-out),
    box-shadow var(--vm-dur-base) var(--vm-ease-out),
    border-color var(--vm-dur-base) var(--vm-ease-out);
}

/* Vệt màu chạy ngang mép trên khi rê chuột */
.vm-contact-channel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--vm-grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--vm-dur-slow) var(--vm-ease-out);
}

.vm-contact-channel:hover,
.vm-contact-channel:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--vm-shadow-lg);
  border-color: color-mix(in srgb, var(--vm-brand) 42%, var(--vm-border));
  color: var(--vm-text);
}

.vm-contact-channel:hover::before,
.vm-contact-channel:focus-visible::before { transform: scaleX(1); }

.vm-contact-channel__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
  transition:
    background-color var(--vm-dur-base) var(--vm-ease-out),
    color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-contact-channel__icon svg { width: 24px; height: 24px; }
.vm-contact-channel:hover .vm-contact-channel__icon {
  background: var(--vm-brand);
  color: var(--vm-text-on-brand);
}

/* Thẻ hotline dùng tông màu nhấn để nổi bật hơn nhóm còn lại */
.vm-contact-channel--cta::before { background: var(--vm-grad-cta); }
.vm-contact-channel--cta .vm-contact-channel__icon {
  background: var(--vm-cta-soft);
  color: var(--vm-cta);
}
.vm-contact-channel--cta:hover .vm-contact-channel__icon {
  background: var(--vm-cta);
  color: var(--vm-text-on-brand);
}
.vm-contact-channel--cta:hover {
  border-color: color-mix(in srgb, var(--vm-cta) 42%, var(--vm-border));
}

.vm-contact-channel__label {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-2xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-caps);
  text-transform: uppercase;
  color: var(--vm-text-muted);
}
.vm-contact-channel__value {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-bold);
  line-height: var(--vm-leading-snug);
  color: var(--vm-text);
  word-break: break-word;
}
.vm-contact-channel__note {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-normal);
}

/* =====================================================================
   2. HỆ THỐNG VĂN PHÒNG
   ===================================================================== */
.vm-contact-offices {
  display: grid;
  gap: var(--vm-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.vm-contact-office {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
  padding: var(--vm-space-6);
  background: var(--vm-surface);
  border: 1.5px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-line);
  transition:
    transform var(--vm-dur-base) var(--vm-ease-out),
    box-shadow var(--vm-dur-base) var(--vm-ease-out),
    border-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-contact-office:hover {
  transform: translateY(-4px);
  box-shadow: var(--vm-shadow-lg);
}

/* Văn phòng đang được chọn: viền thương hiệu + nền dịu */
.vm-contact-office.is-active {
  border-color: var(--vm-brand);
  box-shadow: var(--vm-shadow-lg);
  background: color-mix(in srgb, var(--vm-brand) 5%, var(--vm-surface));
}
.vm-contact-office.is-active::after {
  content: "";
  position: absolute;
  inset: -1.5px -1.5px auto -1.5px;
  height: 4px;
  border-radius: var(--vm-radius-lg) var(--vm-radius-lg) 0 0;
  background: var(--vm-grad-brand);
}

.vm-contact-office__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vm-space-3);
}
.vm-contact-office__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-2xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-caps);
  text-transform: uppercase;
}
.vm-contact-office__badge svg { width: 13px; height: 13px; }
.vm-contact-office.is-active .vm-contact-office__badge {
  background: var(--vm-brand);
  color: var(--vm-text-on-brand);
}
.vm-contact-office__city {
  font-size: var(--vm-text-lg);
  line-height: var(--vm-leading-snug);
}

.vm-contact-office__list {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-3);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-normal);
}
.vm-contact-office__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--vm-space-3);
}
.vm-contact-office__list svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--vm-brand);
}
.vm-contact-office__list a { color: var(--vm-text-soft); word-break: break-word; }
.vm-contact-office__list a:hover { color: var(--vm-brand); }

.vm-contact-office__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  margin-top: auto;
  padding-top: var(--vm-space-2);
}
.vm-contact-office__actions .vm-btn { flex: 1 1 auto; }

/* =====================================================================
   3. KHUNG BẢN ĐỒ NHÚNG
   ===================================================================== */
/* Chừa chỗ cho header dính khi cuộn tới bằng nút "Xem bản đồ" */
#ban-do,
#he-thong-van-phong { scroll-margin-top: calc(var(--vm-header-h) + var(--vm-space-4)); }

.vm-contact-map {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-4);
}
.vm-contact-map__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
}
.vm-contact-map__bar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--vm-brand);
}
.vm-contact-map__place {
  font-family: var(--vm-font-display);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
}

/* Khung bo góc có viền, tỉ lệ 16/9 trên desktop */
.vm-contact-map__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--vm-border);
  border-radius: var(--vm-radius-xl);
  overflow: hidden;
  background: var(--vm-bg-muted);
  box-shadow: var(--vm-shadow-md);
}
.vm-contact-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =====================================================================
   4. BIỂU MẪU GỬI YÊU CẦU TƯ VẤN
   ===================================================================== */
.vm-contact-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

/* Ô lưới mặc định có min-width:auto nên có thể phình rộng hơn cột chứa nó
   và đẩy trang tràn ngang — ép về 0 để luôn co đúng bề rộng cột. */
.vm-contact-grid > * { min-width: 0; }

.vm-contact-formcard {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-xl);
  box-shadow: var(--vm-shadow-md);
}
.vm-contact-formcard__head {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-2);
  margin-bottom: var(--vm-space-6);
}
.vm-contact-formcard__title { font-size: var(--vm-text-xl); }
.vm-contact-formcard__desc {
  font-size: var(--vm-text-sm);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-relaxed);
}
/* Hộp cảnh báo demo đặt ngay trên biểu mẫu */
.vm-contact-formcard .vm-alert { margin-bottom: var(--vm-space-6); }

/* Ô đồng ý cho phép liên hệ lại */
.vm-contact-form__consent {
  padding: var(--vm-space-4);
  border: 1px dashed var(--vm-border-strong);
  border-radius: var(--vm-radius-md);
  background: var(--vm-bg-subtle);
}
.vm-contact-form__consent .vm-check { color: var(--vm-text-soft); line-height: var(--vm-leading-normal); }

.vm-contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
}
.vm-contact-form__actions .vm-btn { flex: 1 1 200px; }

/* Cột phải: lý do chọn Vinamedical + hộp hotline */
.vm-contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--vm-space-5);
  min-width: 0;
}
/* Chuỗi dài (email, số máy) phải xuống dòng thay vì làm tràn thẻ */
.vm-contact-aside .vm-feature { min-width: 0; }
.vm-contact-aside .vm-feature > div { min-width: 0; }
.vm-contact-aside .vm-feature__desc { overflow-wrap: anywhere; }
.vm-contact-aside__title {
  font-size: var(--vm-text-lg);
  margin-bottom: var(--vm-space-1);
}

/* Hộp hotline nổi bật, nền chuyển sắc thương hiệu.
   Đây là bề mặt LUÔN tối ở cả hai chế độ (nền là --vm-grad-deep), nên chữ phải
   giữ tông sáng cố định. Hai giá trị dưới đây lấy đúng theo .vm-section--dark
   trong base.css để hai khối tối trên site trông đồng nhất; khai báo một lần
   ở đây rồi dùng lại bên dưới, không rải mã màu khắp tệp. */
.vm-contact-hotline {
  --vm-contact-on-deep: var(--vm-text-on-deep);  /* dùng chung token với .vm-section--dark */
  --vm-contact-on-deep-soft: var(--vm-text-on-deep-soft); /* dùng chung token */

  position: relative;
  padding: var(--vm-space-6);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-grad-deep);
  color: var(--vm-contact-on-deep);
  overflow: hidden;
  isolation: isolate;
}
.vm-contact-hotline::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -60px;
  z-index: -1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vm-accent-500) 48%, transparent), transparent 68%);
  filter: blur(22px);
}
/* Dùng flex (khối) chứ không phải inline-flex để số hotline xuống dòng riêng */
.vm-contact-hotline__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-2xs);
  font-weight: var(--vm-weight-bold);
  letter-spacing: var(--vm-tracking-caps);
  text-transform: uppercase;
  color: var(--vm-primary-200);
}
.vm-contact-hotline__label svg { width: 15px; height: 15px; }
.vm-contact-hotline__num {
  display: inline-block;
  overflow-wrap: anywhere;
  margin-block: var(--vm-space-2);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-2xl);
  font-weight: var(--vm-weight-black);
  letter-spacing: var(--vm-tracking-snug);
  color: var(--vm-text-on-brand);
}
.vm-contact-hotline__num:hover { color: var(--vm-primary-200); }
.vm-contact-hotline__note {
  font-size: var(--vm-text-sm);
  color: var(--vm-contact-on-deep-soft);
  line-height: var(--vm-leading-normal);
  margin-bottom: var(--vm-space-5);
}
.vm-contact-hotline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
}

/* Thẻ tiêu đề bọc nút mở/đóng câu hỏi — chỉ để đúng trật tự h2 → h3,
   không thay đổi hình thức so với .vm-accordion__btn gốc */
.vm-contact-faq-h {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* =====================================================================
   5. KHỐI KÊU GỌI CUỐI TRANG
   ===================================================================== */
.vm-contact-final {
  position: relative;
  padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: var(--vm-radius-2xl);
  background: var(--vm-bg-subtle);
  border: 1px solid var(--vm-border);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.vm-contact-final__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vm-space-4);
  max-width: 62ch;
  margin-inline: auto;
}
.vm-contact-final__title { font-size: var(--vm-text-2xl); }
.vm-contact-final__desc {
  font-size: var(--vm-text-md);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-relaxed);
}
.vm-contact-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vm-space-4);
  margin-top: var(--vm-space-2);
}

/* =====================================================================
   6. TRANG 404 — KHÔNG TÌM THẤY TRANG
   ===================================================================== */
.vm-404 {
  position: relative;
  min-height: 70dvh;
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--vm-bg);
}
.vm-404 .vm-bg-grid { z-index: -2; }
.vm-404__blob-1 {
  width: min(460px, 70vw);
  height: min(460px, 70vw);
  top: -18%;
  left: -12%;
  z-index: -1;
}
.vm-404__blob-2 {
  width: min(380px, 60vw);
  height: min(380px, 60vw);
  bottom: -22%;
  right: -10%;
  z-index: -1;
}

.vm-404__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vm-space-5);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

/* Con số 404 lớn tô bằng gradient chữ */
.vm-404__num {
  font-family: var(--vm-font-display);
  font-size: clamp(5.5rem, 20vw, 12rem);
  font-weight: var(--vm-weight-black);
  line-height: 0.88;
  letter-spacing: var(--vm-tracking-tight);
  background: var(--vm-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.vm-404__title {
  font-size: var(--vm-text-3xl);
  line-height: var(--vm-leading-snug);
}
.vm-404__desc {
  font-size: var(--vm-text-md);
  color: var(--vm-text-soft);
  line-height: var(--vm-leading-relaxed);
  max-width: 56ch;
}

/* Ô tìm kiếm gửi sang trang tìm kiếm */
.vm-404__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-space-3);
  width: min(100%, 520px);
}
.vm-404__search .vm-input-group { flex: 1 1 240px; }
.vm-404__search .vm-btn { flex: 0 0 auto; }

/* 4 nút liên kết nhanh */
.vm-404__links {
  display: grid;
  gap: var(--vm-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  width: 100%;
  margin-top: var(--vm-space-2);
}
.vm-404__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vm-space-2);
  padding: var(--vm-space-5) var(--vm-space-4);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-line);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-sm);
  font-weight: var(--vm-weight-semi);
  color: var(--vm-text);
  transition:
    transform var(--vm-dur-base) var(--vm-ease-out),
    box-shadow var(--vm-dur-base) var(--vm-ease-out),
    border-color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-404__link:hover {
  transform: translateY(-5px);
  box-shadow: var(--vm-shadow-lg);
  border-color: color-mix(in srgb, var(--vm-brand) 42%, var(--vm-border));
  color: var(--vm-brand);
}
.vm-404__link-ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--vm-radius-md);
  background: var(--vm-brand-soft);
  color: var(--vm-brand);
  transition:
    background-color var(--vm-dur-base) var(--vm-ease-out),
    color var(--vm-dur-base) var(--vm-ease-out);
}
.vm-404__link-ico svg { width: 21px; height: 21px; }
.vm-404__link:hover .vm-404__link-ico {
  background: var(--vm-brand);
  color: var(--vm-text-on-brand);
}

/* Khối "Có thể bạn quan tâm" */
.vm-404-suggest__group + .vm-404-suggest__group { margin-top: clamp(2rem, 4vw, 3rem); }
.vm-404-suggest__label {
  display: flex;
  align-items: center;
  gap: var(--vm-space-3);
  margin-bottom: var(--vm-space-5);
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-md);
  font-weight: var(--vm-weight-bold);
  color: var(--vm-text);
}
.vm-404-suggest__label svg {
  width: 19px;
  height: 19px;
  color: var(--vm-brand);
  flex-shrink: 0;
}

/* =====================================================================
   7. ĐIỂM DỪNG RESPONSIVE
   ===================================================================== */

/* Di động: bản đồ chuyển sang tỉ lệ 4/3 cho đỡ dẹt */
@media (max-width: 767.98px) {
  .vm-contact-map__frame { aspect-ratio: 4 / 3; }
  .vm-contact-office__actions .vm-btn { flex: 1 1 100%; }
  .vm-404__search .vm-btn { width: 100%; }
}

/* Máy tính bảng nằm ngang trở lên: biểu mẫu chia 2 cột */
@media (min-width: 1024px) {
  .vm-contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .vm-contact-aside {
    position: sticky;
    top: calc(var(--vm-header-h) + var(--vm-space-5));
  }
}

/* Người dùng chọn giảm chuyển động: bỏ mọi hiệu ứng nâng thẻ */
@media (prefers-reduced-motion: reduce) {
  .vm-contact-channel,
  .vm-contact-office,
  .vm-404__link {
    transition: none;
  }
  .vm-contact-channel:hover,
  .vm-contact-office:hover,
  .vm-404__link:hover {
    transform: none;
  }
}