/* ==========================================================================
   TRỢ LÝ CHAT — giao diện · 18/08/2026
   Toàn bộ lớp đặt tiền tố hnt-chat- để không đụng lớp nào của main.css.
   Màu và bo góc lấy nguyên từ biến của main.css, KHÔNG dựng bảng màu riêng:
   widget phải trông như mọc ra từ site, không phải đồ gắn ngoài.
   ========================================================================== */

.hnt-chat-root{
  --cw-bg:      var(--bg, #fff);
  --cw-ground:  var(--page, #F7F8FA);
  --cw-navy:    var(--primary, #002C5F);
  --cw-accent:  var(--accent, #0066CC);
  --cw-soft:    var(--accent-soft, #EAF1FE);
  --cw-ink:     var(--text, #111827);
  --cw-muted:   #5B6472;
  /* 🔴 KHÔNG dùng #8A93A0: axe đo được 3,1:1 trên nền trắng, dưới ngưỡng 4,5 của
     chữ thường, và cả site đang giữ mốc axe 0 lỗi. Dùng lại đúng token main.css
     đã giải bài này cho giá cũ gạch ngang: #6C7686 = 4,59 trên trắng. */
  --cw-faint:   var(--price-old, #6C7686);
  --cw-line:    var(--border, #E5E7EB);
  --cw-good:    var(--green, #11803A);
  --cw-good-bg: var(--green-bg, #E9F8EE);
  --cw-r:       var(--radius-card, 20px);
  --cw-rb:      var(--radius-btn, 12px);
  /* Chiều cao thanh cố định dưới chân.
     🔴 ĐỪNG GÕ CỨNG SỐ NÀY. Ngày 18/08 đo ra 60px rồi khai cứng, tới 19/08 đo lại
        ở khổ máy tính thì thanh cao 68px — hụt 8px, mà lỗi kiểu đó im lặng.
        Số dưới đây chỉ là mốc tạm dùng trước khi JavaScript kịp chạy; chat-ai.js
        đo thanh thật rồi ghi đè biến này, và đặt 0 ở trang KHÔNG có thanh. */
  --cw-thanh:   68px;

  position: fixed;
  right: 14px;
  /* 🔴 Nâng trên MỌI khổ màn hình, không riêng điện thoại. Bản 18/08 chỉ nâng ở
     ≤900px nên trên máy tính nút ĐÈ LÊN THANH 54px (đo 19/08 tại trang xe). */
  bottom: calc(var(--cw-thanh) + 14px);
  z-index: 9000;              /* dưới lớp phủ menu (9999), trên nội dung trang */
  font-family: inherit;

  /* 🔴 Xếp bằng flex và ép THỨ TỰ, đừng trông vào thứ tự trong mã HTML.
     Trong markup nút đứng TRƯỚC khung. Trước 19/08 không ai thấy vì mở chat là
     nút bị ẩn. Khi giữ nút lại (để trên điện thoại còn chỗ bấm thu về) thì nút
     nhảy lên nằm trên khung, đè 622px và bị đẩy cao hơn thanh cố định 580px. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.hnt-chat-khung{ order: 1; }
.hnt-chat-mo-o{ order: 2; position: relative; display: inline-flex; align-items: center; }

@media (max-width: 900px){
  .hnt-chat-root{ right: 12px; bottom: calc(var(--cw-thanh) + 12px); }

  /* 🔴 TRÊN ĐIỆN THOẠI KHÔNG CÒN NÚT TRÒN, KỂ CẢ KHI CHAT ĐANG MỞ (chốt 19/08 vòng 2).
     Đường vào và đường thu đều là nút "Chat AI" trong thanh đáy; lúc mở nó đổi mặt
     thành dấu × kèm chữ "Đóng" (luật ở main.css).
     Bản trước còn cho nút tròn hiện lại khi mở, và khách bắt ngay: nó ăn mất một
     khoảng lớn giữa khung chat với thanh. Bỏ nó đi thì khung chat cao thêm 66px. */
  /* 🔴 PHẢI ĐỦ ĐẶC HIỆU. Khai trơ `.hnt-chat-mo{display:none}` là THUA, vì luật
     `.hnt-chat-mo{display:flex}` bên dưới có cùng đặc hiệu mà lại đứng SAU khối
     @media này trong file — cùng hạng thì luật sau thắng, bất kể media query.
     Thêm một lớp cha là đủ để không phải trông vào thứ tự dòng. */
  .hnt-chat-root .hnt-chat-mo-o{ display: none; }

  /* Bong bóng chào nay không neo vào nút tròn nữa mà nằm ngay trên thanh, chỉ xuống
     đúng ô Chat AI ở góc phải. Hẹp lại cho khỏi che nội dung.
     🔴 `bottom: 68px` ở luật gốc là chỗ chừa cho nút tròn. Nút tròn đã bỏ trên điện
        thoại nên con số đó thành khoảng trống vô cớ: đo được bong bóng cách thanh
        80px, nổi lên giữa màn hình và che nội dung (anh Vũ bắt được 19/08). */
  /* 🔴 PHẢI ĐỦ ĐẶC HIỆU (lần thứ ba dính bẫy này trong ngày). Luật gốc
     `.hnt-chat-chao{bottom:68px}` nằm BÊN DƯỚI khối @media này trong file; cùng
     đặc hiệu thì luật đứng sau thắng, media query không cộng thêm gì. Khai trơ
     `.hnt-chat-chao{bottom:0}` ở đây là vô hiệu — đo ra vẫn cách thanh 80px. */
  /* 🔴 THU NHỎ BONG BÓNG — 22/08/2026, "mẫu C · tối giản". Anh Vũ gửi ảnh chụp:
     "hiện tại che quá nhiều trên màn hình". Đo được 232×91px, tức 10,7% chiều cao
     màn iPhone, chữ gãy 3 dòng. Bản này còn 168×52px = 6,1%, nhỏ hơn 59% diện tích.
     Bốn thay đổi, mỗi cái một việc:
       max-width 232 → 168px · font 13,5 → 12px
       ảnh robot     → ẩn hẳn. Đây là thứ cắt được nhiều nhất: nó chiếm 30px bề
                       ngang cộng khoảng cách 9px, mà bong bóng chỉ rộng có 232px.
       "Bấm để hỏi"  → từ block thành inline, nằm cùng dòng thay vì chiếm một dòng riêng.
     🔴 12px LÀ SÀN, ĐỪNG HẠ TIẾP. Dưới mức đó là `qa/soi-dien-thoai.js` báo lỗi
        "chữ nhỏ", và khách lớn tuổi đọc ngoài nắng không ra.
     ⚪ Đánh đổi đã báo anh Vũ trước khi làm: bỏ ảnh robot là mất dấu hiệu duy nhất
        cho biết đây là trợ lý AI. Anh Vũ chọn mẫu này sau khi xem cả ba bản chụp thật.
     🔑 CHỮ TRONG BONG BÓNG KHÔNG NẰM Ở ĐÂY — nó là ô cài đặt `chao_chu_dong` trong
        wp-admin. Đổi lời chào thì vào đó, đừng sửa file này.
     🔴 NHƯNG CHIỀU CAO THÌ PHỤ THUỘC VÀO CÂU CHỮ, đo được:
          câu đang chạy (43 ký tự)  → 168×68px = 8,1% màn hình, nhỏ hơn 46%
          câu ngắn      (16 ký tự)  → 168×52px = 6,1% màn hình, nhỏ hơn 59%
        Bề ngang thì cố định 168px, chỉ số dòng đổi. Con số 52px trong bản trình bày
        đầu là đo KÈM câu ngắn — đừng trích nó cho câu dài. */
  .hnt-chat-root .hnt-chat-chao{
    max-width: 168px; bottom: 0;
    font-size: 12px; line-height: 1.4;
    border-radius: 12px 12px 4px 12px;
  }
  .hnt-chat-root .hnt-chat-chao-mo{ padding: 8px 24px 8px 10px; gap: 0; }
  .hnt-chat-root .hnt-chat-chao-anh{ display: none; }
  .hnt-chat-root .hnt-chat-chao b{ display: inline; font-size: 11px; margin: 0 0 0 5px; }
  .hnt-chat-root .hnt-chat-chao-dong{ width: 22px; height: 22px; font-size: 14px; }

  /* Mũi tên chỉ xuống nút Chat AI. Bong bóng đứng một mình thì khách không biết nó
     nói về nút nào — nhất là khi thanh dưới có tới bốn nút.
     🔴 Vị trí ngang do JS đo tâm nút thật rồi ghi vào --cw-mui. Ghi cứng một con số
        là sai ngay khi màn rộng khác 390px, vì bốn cột chia đều theo bề ngang. */
  .hnt-chat-chao::after{
    content: ""; position: absolute;
    bottom: -8px; right: var(--cw-mui, 44px);
    width: 15px; height: 15px;
    background: var(--cw-bg);
    border-right: 1px solid var(--cw-line);
    border-bottom: 1px solid var(--cw-line);
    transform: rotate(45deg);
  }
}

/* ---------- nút mở: hình TRÒN, chỉ có biểu tượng ---------------------------
   Bản 18/08 là viên thuốc có chữ "Hỏi giá lăn bánh", cố ý để khách biết bấm vào
   được gì. Anh Vũ chốt đổi sang tròn ngày 19/08.
   ⚠️ Đánh đổi đã nói rõ với khách: nút tròn GIẤU công dụng, nên bong bóng tự chào
      ở dưới gánh việc giới thiệu. Bỏ bong bóng đi là khách không còn manh mối nào. */
.hnt-chat-mo{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  /* 20/08 tối: ruột đổi từ bóng nói sang ĐÚNG con robot của cụm nút điện thoại.
     Anh Vũ chốt "trên máy tính không đổi gì, chỉ đổi icon chat AI cho giống điện
     thoại" — nên chấm xanh lá, gợn sóng và TỔNG KÍCH THƯỚC giữ nguyên.
     🔴 `border: 3px solid #fff` ĐÃ BỎ, và bề ngang đổi 56 → 62 để bù đúng phần
        viền vừa gỡ (56 + 3 + 3 = 62). Nút trông y hệt cỡ cũ.
        Vì sao gỡ: vòng trắng nay nằm TRONG chính con robot (kho <symbol> ở
        footer.php) để nó co giãn theo mọi cỡ dùng lại. Giữ cả hai là hai vòng
        trắng chồng nhau, dày mỏng không đều ở chỗ giáp.
     🔴 Nền phải là TRẮNG chứ không phải `none`: mép răng cưa của hình tròn SVG cần
        một nền trắng ở dưới để hoà vào, không thì viền lởm chởm trên nền trang. */
  width: 62px; height: 62px;      /* > 44 tối thiểu cho ngón tay, vẫn không chiếm chỗ */
  background: #fff;
  color: #fff;
  border: 0; border-radius: 50%;
  padding: 0; font: inherit; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,44,95,.30);
  transition: transform .16s ease-out, box-shadow .16s ease-out;
  /* 🔴 TUYỆT ĐỐI KHÔNG `overflow: hidden` ở đây. Đã thử và đã hỏng: chấm xanh lá
     "đang trực" nằm ở `top:-2px right:-2px`, tức là NGOÀI hộp nút, nên overflow
     cắt cụt mất nó — và vòng gợn sóng `::after` phóng to 1,3 lần cũng bị cắt.
     Không cần cắt gì cả: hình tròn trong SVG đã vừa khít khung, bốn góc thừa là
     trong suốt. */
}
.hnt-chat-mo:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,44,95,.36), 0 0 0 1px rgba(30,99,214,.24); }
.hnt-chat-mo:focus-visible{ outline: 3px solid var(--cw-accent); outline-offset: 3px; }
/* Robot lấp kín ruột nút. 27px cũ là cỡ của biểu tượng nét mảnh ngày trước —
   con robot nay TỰ MANG hình tròn nền nên nó phải bằng đúng lòng nút. */
.hnt-chat-mo svg, .hnt-chat-mo img{ width: 100%; height: 100%; display: block; object-fit: cover; }
/* 🔴 11/09: ảnh thật đã tự vẽ sẵn quả cầu xanh "đang trực", nên `.hnt-chat-cham`
   (chấm CSS riêng, dựng cho SVG cũ) BỎ HẲN — phần tử HTML tương ứng cũng đã gỡ. */
/* 🔴🔴 11/09: NHÃN CHỮ CỐ ĐỊNH — nút tròn giấu công dụng (xem chú thích ngay
   trên), và bong bóng tự chào chỉ nói MỘT LẦN mỗi phiên rồi tắt hẳn. Sau đó nút
   câm lặng giữa những nút Zalo/Messenger có chữ ngay cạnh trong thanh CTA, nên
   anh Vũ đo được rất ít cuộc chat tới từ nút này. Đặt bằng absolute, KHÔNG đụng
   width/height của .hnt-chat-mo — gợn sóng ::after và animation vốn tính theo
   đúng kích thước 62px, đổi kích thước nút là hỏng cả hai. */
.hnt-chat-nhan-mo{
  position: absolute; top: 50%; right: calc(100% + 10px); transform: translateY(-50%);
  font-size: 12.5px; font-weight: 700; color: var(--cw-navy);
  white-space: nowrap; background: #fff; padding: 7px 14px; border-radius: 99px;
  box-shadow: 0 6px 16px rgba(0,44,95,.20);
  pointer-events: none;
}
/* Chat đang mở: khách đã ở trong cuộc trò chuyện, nhãn mời hết việc. */
.hnt-chat-root[data-mo="1"] .hnt-chat-nhan-mo{ display: none; }

/* 🔴 11/09: hiệu ứng động RIÊNG cho nhãn "Trợ lý ảo" — thay bong bóng chào đã
   tắt. `translateY(-50%)` phải đi CÙNG trong mỗi khung hình vì animation ghi
   đè toàn bộ giá trị transform tĩnh ở trên, thiếu là nhãn tụt khỏi giữa nút. */
@media (prefers-reduced-motion: no-preference){
  .hnt-chat-nhan-mo{ animation: hnt-chat-nhan-song 1.8s ease-in-out infinite; }
}
@keyframes hnt-chat-nhan-song{
  0%, 100% { transform: translateY(-50%) scale(1);    box-shadow: 0 6px 16px rgba(0,44,95,.20); }
  50%      { transform: translateY(-50%) scale(1.07); box-shadow: 0 8px 22px rgba(30,99,214,.42); }
}

/* 🔴 KHÔNG ẩn nút khi đang mở chat (đổi 19/08).
   Trước đó mở chat là nút biến mất, trên điện thoại khách không còn chỗ nào bấm
   để thu lại. Nay giữ nguyên nút, bấm lần nữa là đóng — giống hệt nút popup. */
.hnt-chat-root[data-mo="1"] .hnt-chat-mo{ transform: scale(.92); }
.hnt-chat-root[data-mo="1"] .hnt-chat-mo:hover{ transform: scale(.92) translateY(-2px); }
/* đang mở thì thôi gợn sóng, khỏi rối mắt */
.hnt-chat-root[data-mo="1"] .hnt-chat-mo::after{ display: none; }

/* gợn sóng — vòng loang ra rồi tan, để nút không chìm vào trang */
@media (prefers-reduced-motion: no-preference){
  .hnt-chat-mo::after{
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--cw-navy);
    animation: hnt-chat-song 2.4s ease-out infinite;
    pointer-events: none;
  }
  @keyframes hnt-chat-song{
    from{ opacity: .5; transform: scale(1); }
    to  { opacity: 0;  transform: scale(1.3); }
  }

  /* 🔴 11/09: "nhảy + lắc" — cùng keyframe với bản điện thoại (main.css
     @keyframes hnt-noi-nhun). Nút tròn máy tính trước đây KHÔNG có animation
     chuyển động nào (chỉ gợn sóng ::after), giờ thêm cho đồng bộ hai bên và
     mạnh hơn hẳn bản mobile cũ — anh Vũ xin rõ "mạnh hơn".
     🔴 Dừng animation khi hover/đang mở để không đánh nhau với transform tĩnh
     ở hai chỗ đó (translateY khi hover, scale(.92) khi data-mo="1"). */
  .hnt-chat-mo{ animation: hnt-chat-nhun 2s ease-in-out infinite; }
  .hnt-chat-mo:hover,
  .hnt-chat-root[data-mo="1"] .hnt-chat-mo{ animation-play-state: paused; }
  @keyframes hnt-chat-nhun{
    0%, 55%, 100% { transform: translateY(0) rotate(0deg); }
    8%  { transform: translateY(-3px)  rotate(-10deg); }
    16% { transform: translateY(-13px) rotate(9deg); }
    24% { transform: translateY(-4px)  rotate(-7deg); }
    32% { transform: translateY(-9px)  rotate(5deg); }
    40% { transform: translateY(-2px)  rotate(-3deg); }
    48% { transform: translateY(0)     rotate(0deg); }
  }
}

/* ---------- bong bóng tự chào -------------------------------------------- */
/* 🔴 VỎ NGOÀI LÀ HỘP TRƠN (21/08). Trước đây vỏ vừa là nút vừa chứa nút đóng
   → axe `nested-interactive`. Nay vỏ chỉ lo hình dáng và vị trí; phần bấm-để-mở
   nằm ở `.hnt-chat-chao-mo` bên dưới, ngang hàng với nút đóng.
   ⚠️ ĐỆM VÀ FLEX ĐÃ CHUYỂN XUỐNG NÚT ĐÓ. Đưa `padding` về lại đây là vùng đệm
      thành phần không bấm được, và chữ bị đẩy hai lần. */
.hnt-chat-chao{
  position: absolute; right: 0; bottom: 68px;
  width: max-content; max-width: min(268px, calc(100vw - 40px));
  background: var(--cw-bg); color: var(--cw-ink);
  border: 1px solid var(--cw-line); border-radius: 14px 14px 4px 14px;
  font-size: 13.5px; line-height: 1.5; text-align: left;
  box-shadow: 0 10px 30px rgba(0,44,95,.16);
}
/* Phần bấm-để-mở. Là <button> thật nên Enter/Space chạy sẵn — KHÔNG bắt phím
   bằng tay nữa (chat-ai.js đã bỏ, thêm lại là một lần Enter chạy hai lượt).
   🔴 `font`/`color`/`text-align` phải khai lại: luật mặc định của trình duyệt
      cho <button> thắng cả kế thừa, thiếu là chữ tụt về Arial 13,333px căn giữa.
   ⚪ Nút đóng nằm `position:absolute` nên vẫn vẽ ĐÈ LÊN nút này dù đứng trước
      trong mã — phần tử có định vị luôn vẽ sau phần tử trong dòng chảy. */
.hnt-chat-chao-mo{
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%; margin: 0;
  padding: 12px 32px 12px 12px;
  border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left;
  border-radius: inherit;
  cursor: pointer;
}
.hnt-chat-chao-mo:focus-visible{ outline: 2px solid var(--cw-accent); outline-offset: 2px; }
.hnt-chat-chao-anh{ flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.hnt-chat-chao-anh svg, .hnt-chat-chao-anh img{ width: 100%; height: 100%; display: block; object-fit: cover; }
/* 🔴 `min-width: 0` — hộp con của flex mặc định KHÔNG chịu hẹp hơn chữ dài nhất
   bên trong nó. Thiếu dòng này thì một câu chào dài đẩy bong bóng rộng quá
   `max-width` và tràn ra khỏi mép màn hình. */
.hnt-chat-chao-chu{ min-width: 0; }
/* 🔴 Trạng thái nghỉ phải là trạng thái ĐÚNG. Không dùng fill-mode both: khung
   nhìn không vẽ khung hình (tab ẩn, trình duyệt tạm dừng) thì hiệu ứng đứng ở
   khung đầu VĨNH VIỄN và bong bóng vô hình mà không báo lỗi. Đã cắn 18/08. */
@media (prefers-reduced-motion: no-preference){
  .hnt-chat-chao{ animation: hnt-chat-chao-hien .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes hnt-chat-chao-hien{
    from{ opacity: 0; transform: translateY(9px) scale(.96); }
    to  { opacity: 1; transform: none; }
  }
}
.hnt-chat-chao[hidden]{ display: none; }
.hnt-chat-chao b{ display: block; font-size: 12px; color: var(--cw-accent); margin-top: 6px; font-weight: 650; }
.hnt-chat-chao-dong{
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: var(--cw-faint);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.hnt-chat-chao-dong:hover{ background: var(--cw-ground); color: var(--cw-ink); }
.hnt-chat-chao-dong:focus-visible{ outline: 2px solid var(--cw-accent); outline-offset: 1px; }
.hnt-chat-root[data-mo="1"] .hnt-chat-chao{ display: none; }

/* ---------- khung chat ---------- */
.hnt-chat-khung{
  display: none;
  width: 374px; height: 566px; max-height: calc(100vh - 40px);
  background: var(--cw-bg);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r);
  box-shadow: 0 24px 60px rgba(0,44,95,.22);
  overflow: hidden;
  flex-direction: column;
}
.hnt-chat-root[data-mo="1"] .hnt-chat-khung{ display: flex; }

/* Trên điện thoại: KHÔNG kéo kín màn hình nữa (đổi 19/08 theo yêu cầu anh Vũ).
   Chừa một dải trên cùng để khách bấm ra ngoài là đóng, và giữ nút mở luôn nhìn
   thấy để bấm lần nữa là thu lại. Cơ chế giống hộp popup.
   ⚠️ Đánh đổi đã biết: khung nhỏ hơn thì bảng giá dài phải cuộn nhiều hơn. Nên
      chừa vừa đủ chỗ bấm (dải trên 92px), phần còn lại vẫn to hết mức. */
@media (max-width: 560px){
  /* nền mờ, bấm đâu cũng đóng. Vẽ như con đầu tiên nên nằm dưới khung và nút. */
  .hnt-chat-root[data-mo="1"]::before{
    content: ""; position: fixed; inset: 0;
    background: rgba(8, 24, 45, .42);
  }
  .hnt-chat-root[data-mo="1"] .hnt-chat-khung,
  .hnt-chat-root[data-mo="1"] .hnt-chat-mo{ position: relative; z-index: 1; }

  .hnt-chat-root[data-mo="1"] .hnt-chat-khung{
    position: fixed;
    left: 8px; right: 8px; width: auto;
    top: 92px;                                   /* dải bấm-để-đóng */
    /* 🔴 20/08: KHÔNG còn cộng --cw-thanh. Thanh đáy đã bỏ trên điện thoại, và cụm
       nút nổi thì tự giấu khi chat mở (main.css), nên dưới khung không còn gì để
       tránh. Cộng --cw-thanh vào đây là chừa 180px trống dưới đáy khung — biến đó
       nay mang chiều cao TỚI ĐỈNH cụm nút bên phải, dùng cho bong bóng chào chứ
       không dùng cho khung.
       ⚠️ Vẫn phải chừa mép dưới: env() ở site này luôn trả 0 (header.php không khai
          viewport-fit=cover), nên sàn cứng 20px giữ ô nhập khỏi rơi vào vùng iOS
          nuốt cú chạm đầu tiên. */
    bottom: max(20px, calc(8px + env(safe-area-inset-bottom, 0px)));
    height: auto; max-height: none;
  }
}
@media (prefers-reduced-motion: no-preference){
  .hnt-chat-root[data-mo="1"]::before{ animation: hnt-chat-nen .2s ease-out; }
  @keyframes hnt-chat-nen{ from{ opacity: 0; } to{ opacity: 1; } }
}

/* mở ra từ đúng góc nút vừa bấm, một lần, 220ms
   🔴 CỐ Ý KHÔNG DÙNG fill-mode `both`. Với `both`, khi hiệu ứng không chạy được
   (khung nhìn không vẽ khung hình, trình duyệt tạm dừng hiệu ứng, tab ẩn) thì
   khung ĐỨNG NGUYÊN Ở TRẠNG THÁI ĐẦU: opacity 0 và thu nhỏ 0,94. Khách bấm nút
   rồi không thấy gì hiện ra, mà không có lỗi nào báo. Bỏ `both` thì trạng thái
   nghỉ luôn là trạng thái đúng, hiệu ứng chỉ là phần thêm. */
@media (prefers-reduced-motion: no-preference){
  .hnt-chat-root[data-mo="1"] .hnt-chat-khung{
    animation: hnt-chat-buc .22s cubic-bezier(.2,.8,.2,1);
    transform-origin: bottom right;
  }
  @keyframes hnt-chat-buc{
    from{ opacity: 0; transform: scale(.94) translateY(10px); }
    to  { opacity: 1; transform: none; }
  }
}

/* ---------- đầu khung ---------- */
.hnt-chat-dau{
  flex: 0 0 auto;
  background: var(--cw-navy); color: #fff;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 11px;
}
.hnt-chat-anh{
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  /* ⚠️ Nền mờ `rgba(255,255,255,.18)` cũ ĐÃ BỎ: nó là cái đĩa cho emoji 🚗 đứng
     lên, mà robot tự mang nền tròn của nó rồi.
     🔴 Cũng KHÔNG khai vòng trắng ở đây — vòng nằm trong chính <symbol>. Robot
     xanh Hyundai đặt lên thanh tiêu đề cũng xanh navy thì nửa dưới hình tròn tan
     vào nền; đó là lý do có vòng, và nó phải nằm một chỗ duy nhất. */
  overflow: hidden;
}
.hnt-chat-anh svg, .hnt-chat-anh img{ width: 100%; height: 100%; display: block; object-fit: cover; }
.hnt-chat-ten{ font-size: 14px; font-weight: 700; line-height: 1.3; }
.hnt-chat-phu{ font-size: 11.5px; opacity: .84; line-height: 1.35; }
.hnt-chat-dong{
  margin-left: auto; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.hnt-chat-dong:hover{ background: rgba(255,255,255,.24); }
.hnt-chat-dong:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- thân ---------- */
.hnt-chat-than{
  flex: 1 1 auto; overflow-y: auto;
  background: var(--cw-ground);
  padding: 15px 13px 16px;
  display: flex; flex-direction: column; gap: 11px;
  overscroll-behavior: contain;
}
.hnt-chat-loi{ max-width: 86%; font-size: 14px; line-height: 1.55; }
.hnt-chat-loi .b{ padding: 10px 13px; border-radius: 15px; }
.hnt-chat-loi.ai{ align-self: flex-start; display: flex; align-items: flex-end; gap: 7px; }
/* ---------- ảnh robot cạnh mỗi câu trả lời (20/08/2026 tối) ---------- */
.hnt-chat-ava{ flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.hnt-chat-ava svg, .hnt-chat-ava img{ width: 100%; height: 100%; display: block; object-fit: cover; }
/* 🔴 Hộp con của flex không chịu hẹp hơn chữ dài nhất bên trong. Thiếu dòng này
   thì một đường link dài đẩy bong bóng vượt quá 86% và tràn khỏi khung. */
.hnt-chat-loi.ai .b{ min-width: 0; }
/* 🔴 Bong bóng của ANH VŨ thì KHÔNG có robot — đó là người thật, và cả khối này
   sinh ra để khách phân biệt người với máy. Anh Vũ đã có nhãn tên kèm chấm xanh lá
   ở trên, không cần thêm dấu hiệu nào nữa. */
.hnt-chat-loi.ai.vu .hnt-chat-ava{ display: none; }
.hnt-chat-loi.ai .b{ background: #fff; border: 1px solid var(--cw-line); border-bottom-left-radius: 5px; color: var(--cw-ink); }
.hnt-chat-loi.toi{ align-self: flex-end; }
.hnt-chat-loi.toi .b{ background: var(--cw-accent); color: #fff; border-bottom-right-radius: 5px; }
.hnt-chat-loi p + p{ margin-top: 7px; }

/* ---------- BONG BÓNG CỦA NGƯỜI THẬT (20/08/2026) --------------------------
   Anh Vũ nhảy vào cuộc chat qua Telegram, chữ của anh hiện thẳng ở đây.

   🔴 PHẢI NHÌN RA NGAY LÀ NGƯỜI, KHÔNG PHẢI MÁY. Khách đang đọc một giọng rồi
      đột nhiên giọng đổi — không có dấu hiệu gì thì khách tưởng trợ lý bị loạn.
      Nền navy đậm khác hẳn nền trắng của trợ lý, cộng một nhãn có chấm xanh lá.
   ⚪ Cố ý KHÔNG dùng màu xanh của bong bóng khách: hai bên vẫn phải phân biệt
      được ai nói câu nào. */
.hnt-chat-loi.ai.vu .b{
  background: var(--cw-navy, #04356C);
  border-color: var(--cw-navy, #04356C);
  color: #fff;
}
.hnt-chat-loi.ai.vu a{ color: #cfe2ff; }
.hnt-chat-nhan-vu{
  align-self: flex-start;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--cw-navy, #04356C);
  margin-bottom: -3px;
}
.hnt-chat-nhan-vu::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22C55E; flex-shrink: 0;
}

/* Link trong bong bóng — địa chỉ, Zalo, số gọi.
   🔴 Hai nền khác nhau nên phải khai riêng: bong bóng của trợ lý nền TRẮNG (link
      xanh đọc được), bong bóng của khách nền XANH ĐẶC (link xanh trên xanh là mất
      chữ). Đây đúng kiểu lỗi "đổi màu chữ mà không xem nền" đã cắn dự án này.
   Địa chỉ dài không có dấu cách sẽ đẩy rộng bong bóng, nên cho phép ngắt giữa từ. */
.hnt-chat-loi a{ text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.hnt-chat-loi.ai .b a{ color: var(--cw-accent); }
.hnt-chat-loi.toi .b a{ color: #fff; }

@media (prefers-reduced-motion: no-preference){
  .hnt-chat-loi{ animation: hnt-chat-len .2s ease-out; }
  @keyframes hnt-chat-len{ from{ opacity:0; transform: translateY(7px); } to{ opacity:1; transform:none; } }
}

/* ---------- THẺ GIÁ — điểm nhấn duy nhất của widget ----------
   Con số lăn bánh là thứ đối thủ giấu sau chữ "liên hệ để biết giá". Nó là lý do
   khách ở lại, nên nó phải là thứ nặng nhất trên màn hình. Mọi thứ khác giữ nhẹ. */
.hnt-chat-the{
  align-self: flex-start; max-width: 94%;
  background: #fff; border: 1px solid var(--cw-line);
  border-radius: 16px; padding: 14px 16px 13px;
  box-shadow: 0 6px 18px rgba(0,44,95,.07);
}
.hnt-chat-the-ten{
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cw-muted); margin-bottom: 5px;
}
.hnt-chat-the-so{
  font-size: 27px; font-weight: 800; letter-spacing: -.032em; line-height: 1.1;
  color: var(--cw-navy); font-variant-numeric: tabular-nums;
}
.hnt-chat-the-so small{ font-size: 15px; font-weight: 700; margin-left: 2px; }
.hnt-chat-the-nhan{ font-size: 12px; color: var(--cw-muted); margin-top: 2px; }
.hnt-chat-the-cu{
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--cw-line);
  font-size: 12.5px;
}
.hnt-chat-the-gach{ color: var(--cw-faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.hnt-chat-the-giam{
  background: var(--cw-good-bg); color: var(--cw-good);
  border-radius: 999px; padding: 3px 9px; font-weight: 700;
}

/* ---------- gợi ý bấm nhanh ---------- */
.hnt-chat-goiy{ display: flex; flex-wrap: wrap; gap: 7px; }
.hnt-chat-goiy button{
  background: var(--cw-soft); color: var(--cw-navy);
  border: 0; border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.hnt-chat-goiy button:hover{ background: #dbe8fc; }
.hnt-chat-goiy button:focus-visible{ outline: 2px solid var(--cw-accent); outline-offset: 2px; }

/* ---------- nút chuyển sang Zalo ---------- */
.hnt-chat-zalo{
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cw-accent); color: #fff; text-decoration: none;
  border-radius: var(--cw-rb); padding: 9px 15px;
  font-size: 13.5px; font-weight: 700;
}
.hnt-chat-zalo:hover{ background: #0055ad; color: #fff; }

/* ---------- BẢNG ĐỂ LẠI SỐ (19/08/2026) ----------
   Nằm TRONG dòng trò chuyện, không phải hộp chặn đường: khách không muốn điền thì
   cứ gõ câu tiếp, bảng trôi lên như một tin nhắn cũ.
   🔴 align-self:stretch chứ không flex-start — bong bóng chat rộng tối đa 86%, còn
      bảng thì cần trọn bề ngang, ba ô nhập chen trong 86% là chật đúng ở khổ 390px. */
.hnt-chat-bang{
  align-self: stretch;
  background: #fff; border: 1px solid var(--cw-line);
  border-radius: 16px; padding: 14px 14px 13px;
  box-shadow: 0 6px 18px rgba(0,44,95,.09);
}
.hnt-chat-bang-dau{
  font-size: 14.5px; font-weight: 750; letter-spacing: -.01em;
  color: var(--cw-navy);
}
.hnt-chat-bang-phu{
  margin: 5px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--cw-muted);
}
.hnt-chat-bang-o{ display: block; margin-bottom: 9px; }
.hnt-chat-bang-o > span{
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cw-faint);
}
.hnt-chat-bang-o input,
.hnt-chat-bang-o select{
  width: 100%; min-height: 44px;          /* 44 = ngưỡng ngón tay của WCAG */
  background: var(--cw-ground);
  border: 1px solid var(--cw-line); border-radius: 11px;
  padding: 10px 12px;
  /* 🔴 16px là mức tối thiểu, dưới mức này iPhone tự phóng to cả trang khi khách
     chạm vào ô nhập. Cùng luật với ô hỏi ở chân khung, đừng hạ xuống cho gọn. */
  font: inherit; font-size: 16px; line-height: 1.35; color: var(--cw-ink);
}
.hnt-chat-bang-o input:focus,
.hnt-chat-bang-o select:focus{
  outline: none; border-color: var(--cw-accent);
  box-shadow: 0 0 0 3px rgba(0,102,204,.16);
}
.hnt-chat-bang-o input::placeholder{ color: #9BA5B3; }
/* 🔴 Báo sai bằng CẢ viền lẫn chữ, không chỉ bằng màu: người mù màu vẫn phải thấy. */
.hnt-chat-bang-o.sai input{ border-color: #C0392B; background: #FDF1EF; }
.hnt-chat-bang-loi{
  display: none; margin: -4px 0 9px;
  font-size: 12px; font-weight: 600;
  color: #B02A1B;                         /* 5,9:1 trên nền trắng */
}
.hnt-chat-bang-loi.hien{ display: block; }
.hnt-chat-bang-gui{
  width: 100%; min-height: 46px; margin-top: 3px;
  background: var(--cw-accent); color: #fff; border: 0;
  border-radius: var(--cw-rb);
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.hnt-chat-bang-gui:hover{ background: #0055ad; }
.hnt-chat-bang-gui:disabled{ background: #C9D1DA; cursor: default; }
.hnt-chat-bang-gui:focus-visible{ outline: 3px solid var(--cw-navy); outline-offset: 2px; }

/* ---------- thẻ báo đã nhận số ---------- */
.hnt-chat-xong{
  align-self: stretch;
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--cw-good-bg); border: 1px solid #BFE6CC;
  border-radius: 16px; padding: 13px 14px;
}
.hnt-chat-xong-v{
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cw-good); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.hnt-chat-xong b{ display: block; font-size: 13.5px; color: #0B5E29; }
.hnt-chat-xong p{ margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: #1F5B36; }

/* ---------- ba chấm đang gõ ---------- */
.hnt-chat-go{ display: inline-flex; gap: 4px; padding: 4px 2px; }
.hnt-chat-go i{ width: 6px; height: 6px; border-radius: 50%; background: var(--cw-faint); }
@media (prefers-reduced-motion: no-preference){
  .hnt-chat-go i{ animation: hnt-chat-nhay 1.1s infinite; }
  .hnt-chat-go i:nth-child(2){ animation-delay: .18s; }
  .hnt-chat-go i:nth-child(3){ animation-delay: .36s; }
  @keyframes hnt-chat-nhay{ 0%,60%,100%{ opacity:.3; transform:none; } 30%{ opacity:1; transform: translateY(-3px); } }
}

/* ---------- chân khung ---------- */
.hnt-chat-chan{
  flex: 0 0 auto; background: var(--cw-bg);
  border-top: 1px solid var(--cw-line);
  padding: 10px 12px 9px;
}
.hnt-chat-hang{ display: flex; align-items: flex-end; gap: 9px; }
.hnt-chat-o{
  flex: 1; resize: none; overflow-y: auto;
  max-height: 96px; min-height: 44px;
  background: var(--cw-ground);
  border: 1px solid var(--cw-line); border-radius: 20px;
  padding: 10px 14px;
  /* 🔴 16px là mức tối thiểu, dưới mức này iPhone tự phóng to cả trang khi
     khách chạm vào ô nhập. Cả site đã ép luật này từ RC12, giữ nguyên. */
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--cw-ink);
}
.hnt-chat-o:focus{ outline: none; border-color: var(--cw-accent); }
.hnt-chat-gui{
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--cw-accent); color: #fff; border: 0;
  display: grid; place-items: center; cursor: pointer;
}
.hnt-chat-gui:disabled{ background: #C9D1DA; cursor: default; }
.hnt-chat-gui:focus-visible{ outline: 3px solid var(--cw-navy); outline-offset: 2px; }
.hnt-chat-gui svg{ width: 17px; height: 17px; }

/* Dòng ghi chú ở chân khung đã gỡ 19/08 theo yêu cầu anh Vũ; luật CSS đi theo.
   Muốn đưa lại thì thêm lại thẻ p.hnt-chat-noi trong inc/chat-ai.php và luật này. */

.hnt-chat-an{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}