/* Logo trên đầu trang: ép 64px */
.hero .brand-logo,
.hero picture img,
.hero img.brand-logo {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}
/* Tiêu đề: Merriweather có chân */
.hero h1{
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif !important;
  font-weight: 900;
  font-size: 36px;           /* chỉnh tuỳ ý */
  letter-spacing: .2px;
  margin: .2rem 0 0;
}
/* Hai dòng khẩu hiệu: to hơn, rõ hơn */
.hero .mantra{ font-size: 20px; font-weight: 700; opacity: .95; }
.hero .sub   { font-size: 16px; color: #475569; }

@media (max-width:640px){
  .hero .brand-logo, .hero picture img { width:48px !important; height:48px !important; }
  .hero h1 { font-size: 26px; }
  .hero .mantra { font-size: 16px; }
  .hero .sub    { font-size: 14px; }
}

/* ===== Thu nhỏ trên màn hình nhỏ */
@media (max-width: 640px){
  .hero .brand-logo,
  .hero picture img,
  .hero img.brand-logo { width: 48px !important; height: 48px !important; }
  .hero h1    { font-size: 26px; }
  .hero .mantra{ font-size: 16px; }
  .hero .sub   { font-size: 14px; }
}
/* FONT CÓ CHÂN CHO TIÊU ĐỀ */
.hero h1{
  font-family: 'Noto Serif', 'Times New Roman', Georgia, serif !important;
  font-weight: 900;           /* đậm đẹp cho tiêu đề */
  letter-spacing: .2px;
}
@media (max-width:640px){
  .brand-logo{ width:40px; height:40px; }
}
/* Khung danh sách chat */
#chat-list {
  list-style: none;
  margin: 0;
  padding: 16px;
  height: 56vh;            /* tuỳ bạn */
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
}

/* Bong bóng chung */
.bubble {
  max-width: 72ch;
  width: fit-content;
  padding: 10px 14px;
  margin: 8px 0;
  border-radius: 14px;
  line-height: 1.55;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 15px;
}

/* Người dùng – nền trắng */
.bubble.user {
  background: #ffffff;
  border: 1px solid #e9ecef;
  margin-left: auto;           /* dạt phải */
  border-bottom-right-radius: 6px;
}

/* Bot – nền xám nhạt */
.bubble.bot {
  background: #f6f7f9;
  border: 1px solid #eceff3;
  margin-right: auto;          /* dạt trái */
  border-bottom-left-radius: 6px;
}

/* Nút gửi dạng chỉ icon */
#send-btn.icon-only{
  min-width:44px; padding:12px;
  display:inline-flex; align-items:center; justify-content:center;
}
#send-btn.icon-only .mini-icon{ width:20px; height:20px; margin:0; }
#send-btn .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#send-btn.icon-only .mini-icon{
  width:20px;height:20px;margin:0;
}
#chat-input {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
}
#chat-input:focus { border-color: #9ca3af; }
#send-btn {
  min-width: 82px;
  border: none;
  border-radius: 10px;
  background: #0ea5e9;   /* xanh dịu */
  color: white;
  font-weight: 600;
  cursor: pointer;
}
#send-btn:disabled { opacity: .6; cursor: not-allowed; }
/* ====== Chat bubbles: trắng – xám nhạt, thanh & sạch ====== */
#chat-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  height: 420px;                 /* chỉnh theo ý */
  overflow-y: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
}

/* Mỗi dòng tin nhắn */
.msg { display: flex; width: 100%; }
.msg.user { justify-content: flex-end; }
.msg.bot  { justify-content: flex-start; }

/* Bong bóng chung */
.bubble {
  max-width: 80%;
  padding: 12px 14px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 15px;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,.02);
}

/* User: nền trắng + viền nhẹ */
.bubble.user {
  background: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
}

/* Bot: nền xám nhạt, không viền */
.bubble.bot {
  background: #f1f1f1;
  color: #111;
  border: none;
}

/* Markdown đơn giản */
.bubble strong, .bubble b { font-weight: 700; }
.bubble p { margin: 0 0 .5rem 0; }

/* ====== “Đang soạn…” 3 chấm ====== */
.typing { display: inline-flex; gap: 5px; align-items: center; }
.typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9aa0a6;
  animation: typingBlink 1.2s infinite ease-in-out;
  opacity: .6;
}
.typing .dot:nth-child(2){ animation-delay: .2s; }
.typing .dot:nth-child(3){ animation-delay: .4s; }

@keyframes typingBlink {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* (Tùy chọn) Ẩn thanh cuộn xấu */
#chat-box::-webkit-scrollbar { width: 8px; }
#chat-box::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 8px; }
#chat-box::-webkit-scrollbar-track { background: transparent; }
.suggest{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
.suggest .chip{ padding:6px 10px; font-size:13px; border:1px solid var(--line);
  background:#fff; border-radius:999px; cursor:pointer; }
.suggest .chip:hover{ background:#f8fafc; }
/* Chip gợi ý hỏi thêm (bên dưới câu trả lời) */
.suggest{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
.suggest .chip{
  padding:6px 10px; font-size:13px; border:1px solid var(--line);
  background:#fff; border-radius:999px; cursor:pointer;
}
.suggest .chip:hover{ background:#f8fafc; }