/* =====================================================================
   VINAMEDICAL — Trợ lý ảo góc màn hình

   Chỗ đứng của các nút nổi đã có sẵn:
     góc dưới TRÁI   .vm-quick-contact  (gọi / Facebook / email)
     góc dưới PHẢI   .vm-to-top         (lên đầu trang)
     giữa dưới       .fx-sticky-cta     (chỉ trang chủ)

   Trợ lý chiếm góc dưới PHẢI ở vị trí gốc, và đẩy nút "lên đầu trang"
   lên trên nó — vì trợ lý luôn hiện, còn nút lên đầu trang chỉ hiện sau
   khi cuộn.

   Về các số px còn sót trong tệp này: mọi khoảng cách và bo góc đã kéo về
   thang token. Phần còn lại là bề ngang biểu tượng SVG (16/17/18/26px), độ dày
   viền (1–2px), đường kính chấm nhịp (7/11px) và ảnh thẻ sản phẩm (44px) —
   tokens.css không có thang riêng cho các đại lượng này nên giữ nguyên số thật.
   ===================================================================== */

.vm-tro-ly {
  position: fixed;
  right: var(--vm-space-5);
  bottom: var(--vm-space-5);
  z-index: calc(var(--vm-z-sticky) + 1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--vm-space-3);
}

/* Đẩy nút lên đầu trang lên trên trợ lý. Bề ngang nút mở lấy từ token
   --vm-tl-nut-size: trước đây số 58px được chép tay ở hai nơi, hai chỗ lệch
   nhau một chút là hai nút nổi chồng lên nhau. */
.vm-to-top {
  bottom: calc(var(--vm-space-5) + var(--vm-tl-nut-size) + var(--vm-space-3));
}

/* G10 — Khi khung trò chuyện mở, nó phủ trọn chỗ đứng của nút lên đầu trang
   (đo tại 360×780: khung x16→344 y539→700, nút x302→344 y658→700). Nút bị
   che hoàn toàn nên bấm không tới; ẩn hẳn cho khỏi bẫy người dùng. */
body:has(.vm-tro-ly.is-mo) .vm-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* B9 — Cùng loại vấn đề, lần này là ngăn kéo điều hướng. Đo tại 390×844: nút mở
   trợ lý chiếm [322,776,374,828], nút "Đổi giao diện sáng / tối" ở chân ngăn kéo
   chiếm [67,778,370,824] — chồng nhau 48×46px.
   Chức năng thì KHÔNG hỏng: khi ngăn kéo mở, JS gắn [inert] cho nút trợ lý nên
   bấm vào vùng chồng vẫn rơi đúng vào nút đổi giao diện (đã kiểm bằng
   elementFromPoint). Nhưng phần tử vẫn hiện nguyên trên màn hình, đè một đĩa tròn
   màu thương hiệu lên gần một phần sáu nút kia — người dùng nhìn thấy một nút bị
   cắt cụt và một nút tròn bấm vào lại ra việc khác hẳn.
   Ẩn hẳn trong lúc ngăn kéo mở, đúng khuôn mẫu đã dùng cho .vm-to-top ngay trên.
   Đây là luật CSS thuần và chỉ CỘNG THÊM, không đụng tới cách JS gắn/gỡ [inert]
   nên hành vi trợ năng đang đúng vẫn giữ nguyên. */
body:has(.vm-drawer.is-open) .vm-tro-ly {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Nút mở
   --------------------------------------------------------------- */
/* Nút KHÔNG có nền: bot đứng trần trên trang.
   Ô 58px vẫn giữ nguyên dù trong suốt — đó là vùng chạm, bỏ đi thì nút tụt
   xuống dưới chuẩn 44x44 của WCAG 2.5.8. */
.vm-tro-ly__mo {
  position: relative;
  width: var(--vm-tl-nut-size); height: var(--vm-tl-nut-size);
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none;
  /* Màu tự lật theo chủ đề: primary-700 trên nền sáng (6,30:1),
     primary-300 trên nền tối (9,44:1). Cùng một token, hai hoàn cảnh. */
  color: var(--vm-brand-text);
  cursor: pointer;
  transition: transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-tro-ly__mo:hover { transform: scale(1.06); }

/* 44px thay cho 30px: mất vòng tròn nền thì bot phải tự chiếm chỗ, nếu không
   nút trông như một vết bẩn nhỏ ở góc màn hình. 44px vừa khít vùng chạm. */
.vm-tro-ly__mo svg { width: 44px; height: 44px; }

/* Quầng sáng cùng màu nền trang — KHÔNG phải nền của nút.
   Vì sao cần: nút nổi trên bất cứ thứ gì đang cuộn qua, kể cả ảnh bìa nhiều
   màu. Không có vòng tròn che chắn thì bot đặt trên ảnh sẽ lẫn vào ảnh. Quầng
   này tách hình khỏi phông mà vẫn không tạo ra mảng nền nhìn thấy được. */
.vm-tro-ly__mo svg {
  filter:
    drop-shadow(0 0 2px var(--vm-bg))
    drop-shadow(0 0 5px var(--vm-bg))
    drop-shadow(0 1px 3px color-mix(in srgb, var(--vm-neutral-950) 28%, transparent));
}

/* ================================================================
   Bot trợ lý — chuyển động
   ----------------------------------------------------------------
   Hình do Lottie Creator dựng, chuyển động viết lại bằng CSS. Vì sao không
   dùng thẳng SMIL của bản xuất: SMIL không tắt được bằng media query nên
   không tôn trọng được thiết lập "giảm hiệu ứng chuyển động" (WCAG 2.3.3).

   Dùng thuộc tính biến đổi rời (translate/scale/rotate) thay cho transform
   gộp: nhờ vậy tia sáng chạy được HAI animation cùng lúc — xoay và nháy —
   mà không cái nào ghi đè cái nào.
   ================================================================ */
.vm-bot [class^="fx-"] { transform-box: fill-box; transform-origin: center; }

/* Ăng-ten nhún nhẹ suốt chu kỳ — dấu hiệu "đang thức, đang chờ". */
@keyframes vm-bot-anten {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* Nháy mắt HAI cái liền rồi nghỉ dài. Nháy đều đặn một cái trông như đèn
   xi-nhan; nháy đôi mới ra nhịp mắt người. Mỗi cái chỉ 0,07 giây. */
@keyframes vm-bot-nhay {
  0%, 26.6%    { scale: 1 1; }
  28.9%        { scale: 1 0.08; }
  31.7%, 35.6% { scale: 1 1; }
  37.8%        { scale: 1 0.08; }
  40.6%, 100%  { scale: 1 1; }
}

/* Xoay đúng 90 độ: ngôi sao 4 cánh đối xứng bậc 4 nên hết vòng lặp hình
   trùng khít vị trí đầu — không thấy điểm nối. */
@keyframes vm-bot-xoay { from { rotate: 0deg; } to { rotate: 90deg; } }

@keyframes vm-bot-nhap {
  0%, 57.8%   { scale: 1; }
  62.2%       { scale: 0.28; }
  70%         { scale: 1.28; }
  77.8%, 100% { scale: 1; }
}

.vm-bot .fx-anten { animation: vm-bot-anten 3s cubic-bezier(.65, 0, .35, 1) infinite; }
.vm-bot .fx-mat   { animation: vm-bot-nhay 3s linear infinite; }
.vm-bot .fx-tia   {
  animation: vm-bot-xoay 3s cubic-bezier(.65, 0, .35, 1) infinite,
             vm-bot-nhap 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vm-bot [class^="fx-"] { animation: none !important; }
}
.vm-tro-ly.is-mo .vm-tro-ly__mo { transform: scale(0.92); opacity: 0.9; }

/* Chấm nhịp báo còn sống, tắt khi người dùng không muốn hiệu ứng. */
/* Viền lấy theo nền TRANG chứ không ghi cứng #fff: trước đây nút có vòng tròn
   xanh nên viền trắng tách chấm khỏi vòng tròn đó. Bỏ vòng tròn rồi thì chấm
   nằm thẳng trên nền trang, viền trắng ở chế độ tối sẽ thành một vành sáng lạc lõng. */
.vm-tro-ly__cham {
  position: absolute; top: 2px; right: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--vm-accent-500);
  border: 2px solid var(--vm-bg);
}
@media (prefers-reduced-motion: no-preference) {
  .vm-tro-ly__cham { animation: vm-tl-nhip 2.2s var(--vm-ease-out) infinite; }
}
@keyframes vm-tl-nhip {
  0%, 60%, 100% { transform: scale(1); }
  30%           { transform: scale(1.35); }
}
.vm-tro-ly.is-mo .vm-tro-ly__cham { display: none; }

/* ---------------------------------------------------------------
   Khung trò chuyện
   --------------------------------------------------------------- */
.vm-tro-ly__khung {
  width: min(370px, calc(100vw - var(--vm-space-5) * 2));
  /* G5 — 100dvh chứ không phải 100vh: trên iOS/Android khi thanh địa chỉ
     hiện, 100vh lớn hơn vùng nhìn thấy 60–110px. Khung neo theo bottom nên
     phần dôi đẩy ngược lên trên, vượt khỏi mép trên màn hình — đúng chỗ đặt
     nút đóng, người dùng không đóng được khung. */
  max-height: min(560px, calc(100dvh - 140px));
  display: flex; flex-direction: column;
  order: -1;                       /* nằm TRÊN nút mở */
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity var(--vm-dur-base) var(--vm-ease-out),
              transform var(--vm-dur-base) var(--vm-ease-out);
}
.vm-tro-ly.is-mo .vm-tro-ly__khung { opacity: 1; transform: none; }

/* Bắt buộc phải có: display:flex ở trên đè mất quy tắc mặc định
   [hidden] { display: none }. Thiếu dòng này thì lúc đóng, khung vẫn chiếm một
   ô 359x156 trong suốt ở góc dưới phải và NUỐT mọi cú bấm vào vùng đó. */
.vm-tro-ly__khung[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vm-tro-ly__khung { transition: none; }
}

.vm-tro-ly__dau {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vm-space-3);
  padding: var(--vm-space-4) var(--vm-space-4);
  /* G2 — Đầu khung trước đây là --vm-grad-brand với chữ #fff cứng. Dải màu đó
     kết thúc ở --vm-primary-400 (#2faeda), nơi chữ trắng chỉ đạt 2.56:1 — hỏng
     ở CẢ hai chế độ sáng và tối, vì dải màu này dùng mã màu cố định chứ không
     theo --vm-brand. Đổi sang --vm-grad-deep: điểm sáng nhất của nó là
     --vm-primary-700 (#0c6482), chữ --vm-text-on-deep (#eaf3f8) đạt 5.91:1. */
  background: var(--vm-grad-deep);
  color: var(--vm-text-on-deep);
}
.vm-tro-ly__ten {
  display: inline-flex; align-items: center; gap: var(--vm-space-2);
  font-family: var(--vm-font-display);
  font-weight: var(--vm-weight-semi);
  font-size: var(--vm-text-sm);
}
.vm-tro-ly__ten svg { width: 18px; height: 18px; }
.vm-tro-ly__dong {
  position: relative;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff; cursor: pointer;
}
/* G9 — Vòng tròn chỉ 30×30 nên ngón tay bấm trượt. Nới vùng bấm ra 44×44
   bằng lớp giả trong suốt, hình thức nhìn thấy giữ nguyên 30×30. */
.vm-tro-ly__dong::after {
  content: "";
  position: absolute;
  inset: calc((var(--vm-tap-min) - 30px) / -2);
}
.vm-tro-ly__dong:hover { background: rgba(255, 255, 255, 0.3); }
.vm-tro-ly__dong svg { width: 16px; height: 16px; }

.vm-tro-ly__than {
  flex: 1;
  overflow-y: auto;
  padding: var(--vm-space-4);
  display: flex; flex-direction: column; gap: var(--vm-space-3);
  /* G4 — Trước đây viết var(--vm-surface-soft, #f7fafc) nhưng biến
     --vm-surface-soft chưa từng được khai báo ở đâu, nên luôn rơi về mã màu
     sáng cứng #f7fafc: ở chế độ tối thân khung trắng toát kẹp giữa đầu khung
     và ô nhập đều tối. Token nay đã có thật trong tokens.css cho cả hai chế độ. */
  background: var(--vm-surface-soft);
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-relaxed);
}

/* ---------------------------------------------------------------
   Bong bóng hội thoại
   --------------------------------------------------------------- */
.vm-tl-dong { display: flex; }
.vm-tl-dong--toi { justify-content: flex-end; }

.vm-tl-bong {
  max-width: 88%;
  padding: var(--vm-space-3) var(--vm-space-4);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-surface);
  border: 1px solid var(--vm-border-subtle);
}
.vm-tl-dong--bot .vm-tl-bong { border-bottom-left-radius: var(--vm-radius-xs); }
.vm-tl-dong--toi .vm-tl-bong {
  background: var(--vm-brand);
  border-color: var(--vm-brand);
  color: var(--vm-text-on-brand);
  border-bottom-right-radius: var(--vm-radius-xs);
}
.vm-tl-bong p { margin: var(--vm-space-2) 0 0; }
.vm-tl-nho { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }

/* Ba chấm "đang soạn" */
.vm-tl-go { display: inline-flex; gap: var(--vm-space-1); padding: var(--vm-space-1) 0; }
.vm-tl-go i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vm-text-muted);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .vm-tl-go i { animation: vm-tl-go 1.1s ease-in-out infinite; }
  .vm-tl-go i:nth-child(2) { animation-delay: 0.15s; }
  .vm-tl-go i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes vm-tl-go {
  0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------------------------------------------------------------
   Nút chọn nhanh
   --------------------------------------------------------------- */
.vm-tl-nut {
  display: flex; flex-wrap: wrap; gap: var(--vm-space-2);
  margin-top: var(--vm-space-3);
}
.vm-tl-nut__mot {
  position: relative;
  /* G9 — padding dọc nâng từ 7px lên thang token 8px để nút cao ~39px,
     phần còn thiếu cho đủ 44px lấy bằng lớp giả bên dưới. */
  padding: var(--vm-space-2) var(--vm-space-3);
  border: 1px solid color-mix(in srgb, var(--vm-brand) 40%, transparent);
  border-radius: var(--vm-radius-pill);
  background: transparent;
  color: var(--vm-brand-text);
  font: inherit;
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-medium);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--vm-dur-fast) var(--vm-ease-out),
              color var(--vm-dur-fast) var(--vm-ease-out);
}
.vm-tl-nut__mot:hover { background: var(--vm-brand); color: var(--vm-text-on-brand); }
/* Khoảng cách giữa các nút là 8px nên nới mỗi bên 3px vẫn không chồng lấn nhau. */
.vm-tl-nut__mot::after {
  content: "";
  position: absolute;
  inset-block: -3px;
  inset-inline: 0;
}

/* ---------------------------------------------------------------
   Thẻ sản phẩm trong hội thoại
   --------------------------------------------------------------- */
.vm-tl-sp { display: flex; flex-direction: column; gap: var(--vm-space-2); margin-top: var(--vm-space-3); }
.vm-tl-sp__mot {
  display: flex; align-items: center; gap: var(--vm-space-3);
  padding: var(--vm-space-2);
  border: 1px solid var(--vm-border-subtle);
  border-radius: var(--vm-radius-md);
  color: inherit;
}
.vm-tl-sp__mot:hover { border-color: var(--vm-brand); background: var(--vm-brand-soft); }
.vm-tl-sp__mot img {
  width: 44px; height: 44px; flex: 0 0 44px;
  object-fit: contain;
  border-radius: var(--vm-radius-sm);
  background: #fff;
}
.vm-tl-sp__mot span { display: flex; flex-direction: column; min-width: 0; }
.vm-tl-sp__mot b {
  font-size: var(--vm-text-xs);
  font-weight: var(--vm-weight-semi);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vm-tl-sp__mot i { font-style: normal; font-size: var(--vm-text-2xs); color: var(--vm-text-muted); }
.vm-tl-sp__them { font-size: var(--vm-text-xs); color: var(--vm-text-muted); }

/* ---------------------------------------------------------------
   Văn phòng
   --------------------------------------------------------------- */
.vm-tl-vp { display: flex; flex-direction: column; gap: var(--vm-space-3); }
.vm-tl-vp__mot { display: flex; flex-direction: column; gap: 2px; }
.vm-tl-vp__mot b { font-size: var(--vm-text-xs); letter-spacing: var(--vm-tracking-wide); }
.vm-tl-vp__mot span { font-size: var(--vm-text-xs); color: var(--vm-text-soft); }
.vm-tl-vp__mot a { font-size: var(--vm-text-xs); color: var(--vm-brand-text); font-weight: var(--vm-weight-medium); }

/* ---------------------------------------------------------------
   Biểu mẫu trong hội thoại
   --------------------------------------------------------------- */
.vm-tl-form { display: flex; flex-direction: column; gap: var(--vm-space-2); margin-top: var(--vm-space-3); }
.vm-tl-form input,
.vm-tl-form textarea {
  width: 100%;
  padding: var(--vm-space-2) var(--vm-space-3);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  background: var(--vm-surface);
  color: var(--vm-text);
  font: inherit;
  font-size: var(--vm-text-xs);
}
.vm-tl-form input:focus,
.vm-tl-form textarea:focus { outline: none; border-color: var(--vm-brand); }
.vm-tl-form textarea { resize: vertical; }

/* ---------------------------------------------------------------
   Ô nhập câu hỏi
   --------------------------------------------------------------- */
.vm-tro-ly__nhap {
  display: flex; align-items: center; gap: var(--vm-space-2);
  padding: var(--vm-space-3);
  border-top: 1px solid var(--vm-border);
  background: var(--vm-surface);
}
.vm-tro-ly__nhap input {
  flex: 1;
  padding: 0 var(--vm-space-3);
  min-height: var(--vm-tap-min);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  background: var(--vm-surface);
  color: var(--vm-text);
  font: inherit;
  font-size: var(--vm-text-sm);
}
.vm-tro-ly__nhap input:focus { outline: none; border-color: var(--vm-brand); }
/* G9 — nút gửi nâng từ 40×40 lên đúng chuẩn vùng chạm 44×44. */
.vm-tro-ly__nhap .vm-btn--icon {
  width: var(--vm-tap-min); min-height: var(--vm-tap-min); height: var(--vm-tap-min);
}
.vm-tro-ly__nhap .vm-btn--icon svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------
   Màn hình nhỏ
   --------------------------------------------------------------- */
/* M1 — Màn hình ≤1023px: nút lên đầu trang đứng BÊN TRÁI nút trợ lý, cùng hàng
   đáy, căn giữa theo chiều dọc với nó — thay vì chồng lên trên làm cột nút nổi
   cao 120px che chữ bên phải màn hình. */
@media (max-width: 1023px) {
  .vm-to-top {
    right: calc(var(--vm-space-5) + var(--vm-tl-nut-size) + var(--vm-space-3));
    bottom: calc(var(--vm-space-5) + (var(--vm-tl-nut-size) - var(--vm-tap-min)) / 2);
  }
}
@media (max-width: 640px) {
  .vm-tro-ly { right: var(--vm-space-4); bottom: var(--vm-space-4); }
  .vm-tro-ly__mo { width: var(--vm-tl-nut-size-sm); height: var(--vm-tl-nut-size-sm); }
  .vm-to-top {
    right: calc(var(--vm-space-4) + var(--vm-tl-nut-size-sm) + var(--vm-space-3));
    bottom: calc(var(--vm-space-4) + (var(--vm-tl-nut-size-sm) - var(--vm-tap-min)) / 2);
  }
  .vm-tro-ly__khung {
    width: calc(100vw - var(--vm-space-4) * 2);
    max-height: calc(100dvh - 150px);
  }
}

/* Không in ra giấy. */
@media print {
  .vm-tro-ly { display: none !important; }
}