/* =====================================================================
   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;
  /* B2 — Trang trí thuần, KHÔNG có chữ hay biểu tượng nào đè lên, nên giữ được
     bản rực rỡ. Xem --vm-grad-brand-vivid trong tokens.css. */
  background: var(--vm-grad-brand-vivid);
  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-text);
  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-text);
}
.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);
  /* Cắt theo góc bo của thẻ. Dải màu đánh dấu văn phòng đang chọn (::after bên
     dưới) cao 4px nhưng khai báo bo góc 16px — trình duyệt không bo nổi một hộp
     thấp như vậy nên hai đầu dải gần như vuông và còn thò ra ngoài mép thẻ,
     nhìn như miếng dán đè lên. Cắt ở đây thì dải ôm đúng đường cong của thẻ.
     Không ảnh hưởng đổ bóng vì bóng nằm ngoài phần tử. */
  overflow: hidden;
  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;
  /* R4 — Vạch này KHÔNG phải trang trí thuần như ba chỗ dùng -vivid còn lại: nó
     là dấu hiệu nhận biết văn phòng "đang chọn", nên rơi vào phạm vi WCAG 1.4.11
     và có nghĩa vụ đạt 3:1. Với -vivid thì đầu sáng #2faeda chỉ đạt 2.41:1 trên
     nền thẻ đã nhuộm (#f3f9fb) ở chế độ sáng, và 58/101 điểm dọc dải rớt ngưỡng.
     Đổi sang -indicator: 0/101 điểm rớt ở cả hai chế độ (thấp nhất 3.20 sáng /
     3.39 tối). Đánh đổi có thật: đầu sáng tối đi ΔL* ≈ 6.7 nên vạch bớt rực một
     chút so với trước — đây đã là mức hạ nhỏ nhất còn đạt chuẩn, vì nấc kế tiếp
     primary-500 hụt sát nút ở 2.95:1. Đừng trả về -vivid. */
  background: var(--vm-grad-brand-indicator);
}

.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-text);
  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-text);
}
.vm-contact-office__list a { color: var(--vm-text-soft); word-break: break-word; }
.vm-contact-office__list a:hover { color: var(--vm-brand-text); }

.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
   ===================================================================== */
/* Khoảng chừa header khi cuộn tới #ban-do / #he-thong-van-phong đã do
   scroll-padding-top trong base.css lo — đặt thêm scroll-margin-top ở đây
   sẽ cộng dồn, đích neo rơi thấp gần gấp đôi. */

.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-text);
}
.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);
  /* B3 — Dải này làm MÀU CHỮ chứ không làm nền, nên phải tương phản với nền
     trang. Xem --vm-grad-brand-text trong tokens.css. */
  background: var(--vm-grad-brand-text);
  -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-text);
}
.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-text);
  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-text);
  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;
  }
}