/* ============================================================================
 *  HỘP TƯ VẤN BÁN HÀNG - giao diện
 *
 *  Dùng chung cho trang giới thiệu (/) và trang giáo viên (/giao-vien). Hai
 *  trang này nạp tokens.css trước nên mọi màu ở đây chỉ gọi biến tầng ngữ nghĩa,
 *  nhờ vậy nền tối tự đúng mà không phải khai lại một bảng màu thứ hai.
 *
 *  VÌ SAO TÁCH RA MỘT TỆP CSS RIÊNG: hộp tư vấn nổi đè lên mọi thứ và có luật
 *  riêng về z-index, còn landing.css với teacher.css đều là CSS của nội dung
 *  trang. Trộn vào đó thì mỗi lần sửa trang bán hàng lại phải đọc qua phần chat.
 *
 *  Ở đây KHÔNG dùng emoji, mọi biểu tượng là SVG nét vẽ nội tuyến do tu-van.js
 *  dựng, giống nếp của trang giáo viên.
 * ==========================================================================*/

/* Nhãn chỉ dành cho trình đọc màn hình. Nút nổi là hình tròn có mỗi cái icon,
   không có nhãn này thì người dùng trình đọc nghe được đúng chữ "nút". */
.tv-an {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- NÚT NỔI */
.tv-nut {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9500;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
  transition: transform .18s ease, background .18s ease;
}
.tv-nut:hover { background: var(--brand-strong); transform: translateY(-2px); }
.tv-nut:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Panel mở rồi thì nút nổi phải biến mất, không thì trên điện thoại nó nằm đè
   lên chính ô gõ của panel. */
.tv-nut[hidden] { display: none; }

/* Chấm nhắc nhẹ ở góc nút: đủ để mắt liếc thấy có người trực, không nhấp nháy
   đỏ kiểu quảng cáo. */
.tv-nut i {
  position: absolute;
  top: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  background: var(--ok);
  border: 2px solid var(--surface);
}

/* ------------------------------------------------------------------ NỀN MỜ */
/* Chỉ bật ở màn hẹp, nơi panel gần phủ kín màn hình. Trên máy tính panel nhỏ
   nằm góc, che mờ cả trang bán hàng chỉ làm khách mất mạch đọc. */
.tv-nen {
  position: fixed;
  inset: 0;
  z-index: 9550;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  display: none;
}

/* -------------------------------------------------------------------- PANEL */
.tv-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9600;
  width: 360px;
  height: 520px;
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .26);
  font-family: var(--font-sans);
  color: var(--ink-main);
  overflow: hidden;
}
.tv-panel[hidden] { display: none; }

.tv-dau {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: var(--brand);
  color: var(--on-brand);
  flex-shrink: 0;
}
.tv-dau b { font-size: 15px; font-weight: 600; display: block; }
.tv-dau span { font-size: 11.5px; opacity: .88; display: block; }
.tv-dau-txt { flex: 1; min-width: 0; }
.tv-dong {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .18);
  color: var(--on-brand);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv-dong:hover { background: rgba(255, 255, 255, .32); }
.tv-dong:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }

/* --------------------------------------------------------------- KHUNG TIN */
.tv-than {
  flex: 1 1 auto;
  min-height: 0;          /* không có dòng này thì khung tin từ chối co lại và
                             đẩy nút Zalo ở chân hộp ra ngoài, bị cắt mất */
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-subtle);
}

.tv-tin { display: flex; }
.tv-tin.toi { justify-content: flex-end; }
.tv-tin > div {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}
.tv-tin.he > div {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--ink-main);
}
.tv-tin.toi > div {
  background: var(--brand);
  color: var(--on-brand);
  border-bottom-right-radius: 4px;
}
.tv-tin a { color: var(--brand); font-weight: 600; }
.tv-tin.toi a { color: var(--on-brand); text-decoration: underline; }
.tv-tin b { font-weight: 600; }
.tv-loi { color: var(--err); }

/* Ba chấm đang gõ. Cùng nhịp với gia sư AI trong app để hai chỗ chat của sản
   phẩm không mỗi nơi một kiểu chờ. */
.tv-cham i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--ink-muted);
  margin-right: 3px;
  animation: tvNhay 1s infinite;
}
.tv-cham i:nth-child(2) { animation-delay: .15s; }
.tv-cham i:nth-child(3) { animation-delay: .3s; }
@keyframes tvNhay { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tv-cham i { animation: none; opacity: .5; }
  .tv-nut { transition: none; }
}

/* ------------------------------------------------------- DANH SÁCH CÂU HỎI */
/* Danh sách nằm BÊN TRONG khung tin, luôn là khối cuối cùng của mạch hội thoại.
   Tách nó ra thành một tầng riêng có chiều cao cố định thì tám nút chiếm gần hết
   hộp, lời chào và câu trả lời vừa hiện ra không còn chỗ đứng. Nằm trong mạch
   thì nó cuộn chung, và sau mỗi câu đã hỏi vẫn thấy ngay để bấm câu tiếp. */
.tv-ds {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
.tv-ds[hidden] { display: none; }
.tv-ds-nhan {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  margin: 2px 0 2px;
}
.tv-cau {
  text-align: left;
  border: 1px solid var(--line-strong);
  background: var(--surface-card);
  color: var(--ink-main);
  font: 13px/1.45 var(--font-sans);
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tv-cau:hover { border-color: var(--brand); color: var(--brand); }
.tv-cau:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* --------------------------------------------------------------- CHÂN PANEL */
.tv-chan {
  border-top: 1px solid var(--line);
  padding: 10px 12px 12px;
  flex-shrink: 0;
  background: var(--surface-card);
}
.tv-o { display: flex; gap: 8px; align-items: flex-end; }
.tv-o[hidden] { display: none; }
.tv-o textarea {
  flex: 1;
  resize: none;
  max-height: 92px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font: 13.5px/1.5 var(--font-sans);
  background: var(--bg-subtle);
  color: var(--ink-main);
}
.tv-o textarea:focus { outline: none; border-color: var(--brand); }
.tv-o textarea:disabled { opacity: .55; cursor: not-allowed; }
.tv-gui {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv-gui:disabled { opacity: .45; cursor: not-allowed; }
.tv-gui:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Lời mời nhắn Zalo khi máy chủ tắt AI hoặc khách đã hỏi hết lượt trong ngày. */
.tv-moi {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.tv-moi[hidden] { display: none; }

/* Nút Zalo luôn ở chân panel: kể cả khi AI hỏng, mất mạng hay hết lượt thì
   khách vẫn còn đúng một đường liên hệ nhìn thấy được. */
.tv-zalo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-main);
  text-decoration: none;
}
.tv-zalo:hover { border-color: var(--brand); color: var(--brand); }
.tv-zalo:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------------- MÀN HÌNH HẸP */
/* 375px là máy phổ biến nhất của học sinh. Panel bám sát bốn cạnh với lề nhỏ
   thay vì tính theo phần trăm, nhờ vậy không bao giờ đẩy trang tràn ngang. */
@media (max-width: 560px) {
  .tv-nen { display: block; }
  .tv-nen.mo { opacity: 1; pointer-events: auto; }
  .tv-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    top: 8px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: var(--radius-md);
  }
  .tv-nut { right: 14px; bottom: 14px; }
}