/* Chữ đặt TRÊN nền màu thương hiệu.
   Ở chế độ tối --ino-chinh được nâng sáng (#6FA8FF) để chữ màu đọc được trên
   nền tối; cùng biến đó lại làm nền cho bong bóng chat, nút gửi và các nút gợi
   ý — nền sáng lên thì chữ trắng chỉ còn 2,4:1. Đảo sang chữ tối cho các chỗ
   đó, khai một chỗ để không sót nút nào. */
:root { --tla-chu-tren-mau: #fff; }
:root[data-theme="dark"] { --tla-chu-tren-mau: #06152E; }
/* =========================================================================
   InnoSME Vietnam - Khối chat tư vấn khách hàng (công khai, phía người xem)
   Nhúng thẳng vào nội dung trang, luôn mở sẵn — không phải bong bóng nổi.
   Dùng lại đúng biến màu --ino-* của theme "Công nghệ" (xem assets/style.css)
   để khối luôn khớp bộ nhận diện dù theme đổi màu.
   ========================================================================= */

#tla-khoi-full {
  display: flex; flex-direction: column; height: min(600px, 78vh);
  background: var(--ino-nen, #fff); border: 1px solid var(--ino-vien, #E3E8EF);
  border-radius: var(--ino-goc, 22px);
  box-shadow: var(--ino-bong, 0 1px 2px rgba(13,27,61,.05), 0 10px 30px rgba(10,102,194,.08));
  overflow: hidden; font-family: var(--ino-font-chu, system-ui, sans-serif);
}

.tla-ds {
  flex: 1; min-height: 0; overflow-y: auto; padding: 22px clamp(16px, 4vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--ino-nen-phu, #F2F4F7);
}
/* Hàng = ảnh đại diện + bong bóng, đặt cạnh nhau. Bong bóng tự nhận
   max-width phần còn lại (min-width:0 để chữ dài vẫn xuống dòng đúng, không
   đẩy tràn ảnh đại diện ra ngoài). */
.tla-hang { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; }
.tla-hang.khach { align-self: flex-end; }
.tla-hang.tro-ly { align-self: flex-start; }

.tla-avt {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; font-size: 15px;
}
.tla-avt-ai { background: var(--ino-nen, #fff); border: 1px solid var(--ino-vien, #E3E8EF); }
.tla-avt-ai img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.tla-avt-khach { background: var(--ino-chinh, #0A66C2); color: var(--tla-chu-tren-mau, #fff); }
.tla-avt-khach svg { width: 16px; height: 16px; fill: currentColor; }
.tla-avt-khach-that { background: var(--ino-nen-phu, #F2F4F7); }
.tla-avt-khach-that img { width: 100%; height: 100%; object-fit: cover; }

/* Thanh đăng nhập/đăng xuất — chỉ hiện khi module Khách hàng đã bật đăng nhập
   Google (xem Widget.php::url_dang_nhap_google), im lặng ẩn hẳn nếu chưa cấu
   hình, không chiếm chỗ hay báo lỗi gì. */
.tla-dau {
  display: flex; align-items: center; gap: 9px; padding: 10px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--ino-vien, #E3E8EF); background: var(--ino-nen, #fff); flex-shrink: 0;
  font-size: 13.5px;
}
.tla-dau-anh { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tla-dau-chao { flex: 1; min-width: 0; color: var(--ino-chu, #0D1B3D); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tla-dau-thoat { flex: 0 0 auto; color: var(--ino-chu-nhat, #8A94A6); }
.tla-dau-thoat:hover { color: var(--ino-chinh, #0A66C2); }
.tla-dau-vao {
  color: var(--ino-chinh, #0A66C2); font-weight: 600; text-decoration: none;
}
.tla-dau-vao:hover { text-decoration: underline; }

.tla-dong-tin {
  min-width: 0; padding: 11px 15px; border-radius: var(--ino-goc-nho, 14px);
  font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.tla-dong-tin.khach {
  background: var(--ino-chinh, #0A66C2); color: var(--tla-chu-tren-mau, #fff); border-bottom-right-radius: 4px;
}
.tla-dong-tin.tro-ly {
  background: var(--ino-nen, #fff); color: var(--ino-chu, #0D1B3D);
  border: 1px solid var(--ino-vien, #E3E8EF); border-bottom-left-radius: 4px;
}
.tla-dong-tin.he-thong {
  align-self: center; background: transparent; color: var(--ino-chu-nhat, #8A94A6); font-size: 13px; text-align: center;
}
.tla-goi-y {
  align-self: stretch; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}
.tla-goi-y-nut {
  border: 1px solid var(--ino-vien, #E3E8EF); background: var(--ino-nen, #fff); color: var(--ino-chinh, #0A66C2);
  border-radius: var(--ino-goc-pill, 999px); padding: 8px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.tla-goi-y-nut:hover { background: color-mix(in srgb, var(--ino-chinh, #0A66C2) 8%, transparent); border-color: var(--ino-chinh, #0A66C2); }
.tla-goi-y-nut.tla-goi-y-lien-ket {
  background: var(--ino-chinh, #0A66C2); border-color: var(--ino-chinh, #0A66C2); color: var(--tla-chu-tren-mau, #fff);
}
.tla-goi-y-nut.tla-goi-y-lien-ket:hover { background: var(--ino-phu, #2EA7FF); border-color: var(--ino-phu, #2EA7FF); }
.tla-goi-y-nut.tla-goi-y-liet-ke {
  /* Nền 10% đẩy tương phản chữ xuống 4,49:1 — hụt đúng 0,01 so với chuẩn 4,5.
   Nhạt bớt nền là đủ, không phải đổi màu chữ. */
  background: color-mix(in srgb, var(--ino-chinh, #0A66C2) 7%, transparent);
  border-color: var(--ino-chinh, #0A66C2); color: var(--ino-chinh, #0A66C2);
}
.tla-goi-y-nut.tla-goi-y-liet-ke:hover { background: color-mix(in srgb, var(--ino-chinh, #0A66C2) 18%, transparent); }

/* Form ngắn "để lại thông tin liên hệ" — thay chỗ khối gợi ý, cùng khổ rộng và bo góc để không lệch nhịp với các bong bóng chat khác. */
.tla-form-lien-he {
  align-self: stretch; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
  padding: 12px; border: 1px solid var(--ino-vien, #E3E8EF); border-radius: var(--ino-goc-nho, 14px);
  background: var(--ino-nen, #fff);
}
.tla-form-lien-he input {
  flex: 1 1 140px; min-width: 0; border: 1px solid var(--ino-vien, #E3E8EF); border-radius: var(--ino-goc-pill, 999px);
  padding: 9px 14px; font: inherit; font-size: 13.5px; color: var(--ino-chu, #0D1B3D); background: var(--ino-nen, #fff);
}
.tla-form-lien-he input:focus { outline: 2px solid var(--ino-phu, #2EA7FF); outline-offset: 1px; }
.tla-form-lien-he-nut { flex: 1 0 100%; display: flex; gap: 8px; justify-content: flex-end; }
.tla-form-lien-he-nut button {
  border: 0; border-radius: var(--ino-goc-pill, 999px); padding: 8px 16px; cursor: pointer;
  font-weight: 650; font-size: 13.5px;
}
.tla-form-lien-he-nut button[type="submit"] { background: var(--ino-chinh, #0A66C2); color: var(--tla-chu-tren-mau, #fff); }
.tla-form-lien-he-nut button[data-bo-qua] {
  background: transparent; color: var(--ino-chu-nhat, #8A94A6); border: 1px solid var(--ino-vien, #E3E8EF);
}

.tla-dang-go {
  display: flex; gap: 4px; padding: 12px 15px;
  background: var(--ino-nen, #fff); border: 1px solid var(--ino-vien, #E3E8EF); border-radius: var(--ino-goc-nho, 14px);
}
.tla-dang-go span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ino-chu-nhat, #8A94A6);
  animation: tla-nhay 1.2s infinite ease-in-out;
}
.tla-dang-go span:nth-child(2) { animation-delay: .15s; }
.tla-dang-go span:nth-child(3) { animation-delay: .3s; }
@keyframes tla-nhay { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.tla-form {
  display: flex; gap: 10px; padding: 16px clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--ino-vien, #E3E8EF); background: var(--ino-nen, #fff); flex-shrink: 0;
}
.tla-form textarea {
  flex: 1; resize: none; border: 1px solid var(--ino-vien, #E3E8EF); border-radius: var(--ino-goc-nho, 14px);
  padding: 11px 14px; font: inherit; font-size: 15px; max-height: 120px; color: var(--ino-chu, #0D1B3D);
  background: var(--ino-nen, #fff);
}
.tla-form textarea:focus { outline: 2px solid var(--ino-phu, #2EA7FF); outline-offset: 1px; }
.tla-form button {
  border: 0; border-radius: var(--ino-goc-nho, 14px); padding: 0 22px; cursor: pointer;
  background: var(--ino-chinh, #0A66C2); color: var(--tla-chu-tren-mau, #fff); font-weight: 650; font-size: 15px;
}
.tla-form button:disabled { opacity: .55; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .tla-dang-go span { animation: none; }
}

/* ---- Liên kết trong câu trả lời của trợ lý ----
   Địa chỉ web thô giữa đoạn văn thì khách không bấm: không biết bấm được,
   cũng không biết bấm vào sẽ tới đâu. Đổi thành nút có chữ nói rõ việc. */
.tla-lien-ket {
  color: #1D4ED8;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}
.tla-lien-ket:not(.nut):hover { color: #1E3A8A; }
.tla-lien-ket.nut {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 6px 4px 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: #1D4ED8;
  color: var(--tla-chu-tren-mau, #fff);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tla-lien-ket.nut:hover { background: #1E40AF; }
.tla-lien-ket.nut:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }

@media (max-width: 640px) {
  .tla-hang { max-width: 92%; }
  .tla-avt { width: 24px; height: 24px; }
  .tla-lien-ket.nut { white-space: normal; }
}