/* Khung chat tư vấn tự động (Issue #219) — Mẫu 1 "bong bóng trò chuyện". Nạp bởi content/temp1/chatbot.php.
   Mọi lớp có tiền tố .htv2-cb để không đụng CSS cũ. Màu theo bộ htv2 (xanh đậm #13286b, xanh #0f6fb0, giá #c8281c).
   Máy tính: nút nằm trên nút Zalo/tổng hợp (hotline.php: right 50px, bottom 50px, cao 50px).
   Điện thoại/máy tính bảng (<= 991px): nút nằm trên thanh điều hướng dưới (htv2-mobile-nav.css, cao 72px). */

.htv2-cb {
  position: fixed;
  right: 50px;
  bottom: 112px;
  z-index: 999990;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #1c2433;
  text-align: left;
}
.htv2-cb *,
.htv2-cb *::before,
.htv2-cb *::after { box-sizing: border-box; }
.htv2-cb [hidden] { display: none !important; }
.htv2-cb .htv2-cb-an {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Nút tròn */
.htv2-cb-nut {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: #13286b; color: #fff;
  box-shadow: 0 8px 22px rgba(19, 40, 107, .35);
  cursor: pointer;
  transition: transform .15s ease;
}
.htv2-cb-nut:hover { transform: scale(1.05); }
.htv2-cb-nut svg { width: 27px; height: 27px; }
.htv2-cb.dang-mo .htv2-cb-nut { visibility: hidden; }

/* Lời chào cạnh nút */
.htv2-cb-chao {
  position: absolute; right: 68px; bottom: 8px;
  width: 210px; padding: 10px 30px 10px 12px;
  background: #fff; color: #1c2433;
  border: 1px solid #dfe5ef; border-radius: 14px 14px 4px 14px;
  box-shadow: 0 8px 22px rgba(19, 40, 107, .18);
  font-size: 13px; font-weight: 600;
}
.htv2-cb-chao-dong {
  position: absolute; top: 4px; right: 6px;
  width: 22px; height: 22px; padding: 0;
  border: 0; background: none; color: #4a5568;
  font-size: 18px; line-height: 1; cursor: pointer;
}

/* Khung chat */
.htv2-cb-khung {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000001;
  display: flex; flex-direction: column;
  width: 372px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 48px);
  background: #fff;
  border: 1px solid #dfe5ef; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(19, 40, 107, .28);
  overflow: hidden;
}
.htv2-cb-dau {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 11px 14px;
  background: #13286b; color: #fff;
}
.htv2-cb-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: #13286b; font-weight: 800; font-size: 13px;
}
.htv2-cb-ten { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.htv2-cb-ten b { font-size: 14.5px; }
.htv2-cb-ten small { font-size: 11.5px; opacity: .85; }
.htv2-cb-dong {
  margin-left: auto; padding: 2px 8px;
  border: 0; background: none; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}

.htv2-cb-log {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 12px;
  overflow-y: auto; overscroll-behavior: contain;
  background: #f6f8fc;
}
.htv2-cb-tin {
  max-width: 86%; padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere;
}
.htv2-cb-tin.bot { align-self: flex-start; background: #fff; border: 1px solid #e3e8f0; border-bottom-left-radius: 4px; }
.htv2-cb-tin.khach { align-self: flex-end; background: #0f6fb0; color: #fff; border-bottom-right-radius: 4px; }
.htv2-cb-tin a { color: inherit; text-decoration: underline; }

/* Thẻ máy */
.htv2-cb-ds-may { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; width: 100%; max-width: 310px; }
.htv2-cb-the {
  display: flex; align-items: center; gap: 10px;
  padding: 6px; background: #fff; color: #1c2433;
  border: 1px solid #e3e8f0; border-radius: 10px;
  text-decoration: none;
}
.htv2-cb-the:hover, .htv2-cb-the:focus { border-color: #0f6fb0; color: #1c2433; text-decoration: none; }
.htv2-cb-the img,
.htv2-cb-anh-trong {
  display: block; flex: none; width: 56px; height: 56px; object-fit: contain;
  border-radius: 6px; background: #f3f5f9;
}
.htv2-cb-the-chu { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.htv2-cb-the-ten {
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.htv2-cb-the-dong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.htv2-cb-gia { color: #c8281c; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.htv2-cb-tt { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #17803d; background: #e6f4ea; }
.htv2-cb-tt.het { color: #5b6473; background: #eef0f3; }
.htv2-cb-xem { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: #0f6fb0; }

/* Nút lựa chọn */
.htv2-cb-lua-chon { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; }
.htv2-cb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; margin: 0;
  border: 1px solid transparent; border-radius: 999px;
  background: #eaf2fb; color: #0d5c93;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.htv2-cb-chip:hover, .htv2-cb-chip:focus { border-color: #0f6fb0; color: #0d5c93; text-decoration: none; }
.htv2-cb-chip.zalo { background: #0068ff; color: #fff; }
.htv2-cb-chip.goi { background: #c8281c; color: #fff; }
.htv2-cb-chip.zalo:hover, .htv2-cb-chip.goi:hover { color: #fff; border-color: #13286b; }
.htv2-cb-chip[disabled] { opacity: .55; cursor: default; }

.htv2-cb-goi-y {
  display: flex; gap: 6px;
  padding: 8px 10px;
  overflow-x: auto; scrollbar-width: thin;
  background: #fff; border-top: 1px solid #e3e8f0;
}
.htv2-cb-goi-y:empty { display: none; }

/* Ô gõ */
.htv2-cb-o { display: flex; gap: 8px; padding: 8px 10px 10px; margin: 0; background: #fff; }
.htv2-cb-o input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px; margin: 0;
  font: inherit; font-size: 14px; color: #1c2433;
  background: #f6f8fc; border: 1px solid #d5dce8; border-radius: 999px;
}
.htv2-cb-o input:focus,
.htv2-cb .htv2-cb-o input:focus-visible { border-color: #0f6fb0; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(15, 111, 176, .2); }
.htv2-cb-o button {
  flex: none; height: 40px; padding: 0 16px;
  border: 0; border-radius: 999px;
  background: #0f6fb0; color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.htv2-cb-o button[disabled] { opacity: .6; cursor: default; }

/* Đang gõ */
.htv2-cb-dang-go { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; }
.htv2-cb-dang-go i { width: 6px; height: 6px; border-radius: 50%; background: #8a94a6; animation: htv2-cb-nhay 1s infinite; }
.htv2-cb-dang-go i:nth-child(2) { animation-delay: .15s; }
.htv2-cb-dang-go i:nth-child(3) { animation-delay: .3s; }
@keyframes htv2-cb-nhay { 0%, 60%, 100% { opacity: .4; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Form để lại số */
.htv2-cb-form-so {
  display: flex; flex-direction: column; gap: 6px;
  align-self: flex-start; width: 100%; max-width: 310px; margin: 0; padding: 10px;
  background: #fff; border: 1px solid #e3e8f0; border-radius: 12px;
}
.htv2-cb-form-so label { font-size: 12px; font-weight: 600; color: #4a5568; margin: 0; }
.htv2-cb-form-so input, .htv2-cb-form-so textarea {
  width: 100%; padding: 8px 10px; margin: 0;
  font: inherit; font-size: 14px; color: #1c2433;
  border: 1px solid #d5dce8; border-radius: 8px; background: #fff; resize: vertical;
}
.htv2-cb-form-so input:focus, .htv2-cb-form-so textarea:focus { border-color: #0f6fb0; outline: none; }
.htv2-cb-form-so button {
  height: 38px; border: 0; border-radius: 8px;
  background: #c8281c; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}

.htv2-cb button:focus-visible,
.htv2-cb a:focus-visible,
.htv2-cb input:focus-visible,
.htv2-cb textarea:focus-visible { outline: 2px solid #f2b705; outline-offset: 2px; }

@media (max-width: 991px) {
  .htv2-cb { right: 14px; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
  .htv2-cb-nut { width: 52px; height: 52px; }
}
@media (max-width: 600px) {
  .htv2-cb-khung {
    top: 48px; right: 0; bottom: 0; left: 0;
    width: 100%; max-width: 100%; height: auto; max-height: none;
    border-radius: 16px 16px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .htv2-cb-o input, .htv2-cb-form-so input, .htv2-cb-form-so textarea { font-size: 16px; } /* iPhone không tự phóng to */
  .htv2-cb-chao { width: 180px; }
  html.htv2-cb-mo, html.htv2-cb-mo body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .htv2-cb-nut { transition: none; }
  .htv2-cb-dang-go i { animation: none; }
}
@media print {
  .htv2-cb { display: none !important; }
}