/* Chatbot Thủ Từ — nút nổi + khung chat, dùng chung 3 trang */
:root {
  --tt-moss: #2f4f3e;
  --tt-moss-deep: #223c2f;
  --tt-cream: #faf6ef;
  --tt-gold: #d9a441;
  --tt-ink: #2b2b2b;
}
#ttFab {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tt-moss), var(--tt-moss-deep));
  border: 2px solid var(--tt-gold);
  font-size: 26px; cursor: pointer; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
#ttFab:hover { transform: scale(1.06); }
#ttPanel {
  position: fixed; right: 18px; bottom: 88px; z-index: 9999;
  width: 360px; max-width: calc(100vw - 36px); height: 500px; max-height: calc(100vh - 120px);
  background: var(--tt-cream); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  display: none; flex-direction: column; border: 1px solid #e4d9c3;
}
#ttPanel.open { display: flex; }
#ttHead {
  background: linear-gradient(135deg, var(--tt-moss), var(--tt-moss-deep));
  color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px;
}
#ttHead .ttAvatar {
  width: 38px; height: 38px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  border: 2px solid var(--tt-gold); flex: none;
}
#ttHead .ttName { font-weight: 700; font-size: 15px; }
#ttHead .ttSub { font-size: 12px; opacity: .85; }
#ttHead .ttClose { margin-left: auto; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
#ttMsgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ttMsg { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.ttMsg.bot { background: #fff; border: 1px solid #e4d9c3; color: var(--tt-ink); align-self: flex-start; border-top-left-radius: 4px; }
.ttMsg.user { background: var(--tt-moss); color: #fff; align-self: flex-end; border-top-right-radius: 4px; }
.ttMsg.typing { font-style: italic; opacity: .7; }
#ttChips { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px dashed #e4d9c3; }
.ttChip {
  background: #fff; border: 1px solid var(--tt-gold); color: var(--tt-moss);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.ttChip:hover { background: var(--tt-gold); color: #fff; }
#ttForm { display: flex; border-top: 1px solid #e4d9c3; background: #fff; }
#ttInput { flex: 1; border: none; padding: 12px; font-size: 14px; outline: none; background: transparent; }
#ttSend {
  border: none; background: var(--tt-moss); color: #fff; padding: 0 18px;
  font-size: 16px; cursor: pointer;
}
#ttSend:hover { background: var(--tt-moss-deep); }
@media (max-width: 480px) {
  #ttPanel { right: 12px; bottom: 82px; }
  #ttFab { right: 12px; bottom: 12px; }
}