/* Trợ lý Froga (chatbot) — nút chú ếch nổi + khung chat. Xem tro-ly.php. */
.froga-tl { position: fixed; right: clamp(12px, 3vw, 26px); bottom: clamp(12px, 3vw, 26px); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: 'Be Vietnam Pro', sans-serif; }
body.single-product .froga-tl { bottom: 84px; }

.froga-tl-nut { position: relative; width: 66px; height: 66px; border-radius: 50%; border: 2px solid #23773C; background: #FFFFFF; padding: 9px; cursor: pointer; box-shadow: 0 10px 24px rgba(30, 59, 39, .22); transition: transform .2s ease, box-shadow .2s ease; }
.froga-tl-nut:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(30, 59, 39, .28); }
.froga-tl-nut img { width: 100%; height: 100%; object-fit: contain; display: block; }
.froga-tl-cham { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #2FA35A; border: 2px solid #FFFFFF; }

.froga-tl-khung { width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px)); background: #FFFFFF; border: 1px solid #E4DDC9; border-radius: 20px; box-shadow: 0 24px 60px rgba(30, 59, 39, .22); display: flex; flex-direction: column; overflow: hidden; animation: frogaTlHien .22s ease-out both; }
.froga-tl-khung[hidden] { display: none; }
@keyframes frogaTlHien { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.froga-tl-dau { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #1E3B27; color: #FFFFFF; }
.froga-tl-dau img { flex: none; width: 46px; height: 46px; object-fit: contain; background: #FFFFFF; clip-path: circle(50% at 50% 50%); padding: 6px 7px; box-sizing: border-box; } /* clip-path thay border-radius: xem dieu-huong.css, chữ FROGA không bị cắt */
.froga-tl-dau div { flex: 1; min-width: 0; line-height: 1.25; }
.froga-tl-dau strong { display: block; font-size: 15px; font-weight: 700; }
.froga-tl-dau span { display: block; font-size: 12px; color: #E7F2E4; }
.froga-tl-dong { border: 0; background: transparent; color: #FFFFFF; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 6px; }

.froga-tl-tin { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: #FBF8F0; }
.froga-tl-dong-tin { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; color: #1E3B27; white-space: pre-wrap; word-break: break-word; }
.froga-tl-froga { align-self: flex-start; background: #FFFFFF; border: 1px solid #E4DDC9; border-bottom-left-radius: 4px; }
.froga-tl-khach { align-self: flex-end; background: #23773C; color: #FFFFFF; border-bottom-right-radius: 4px; }
.froga-tl-dong-tin a { color: #23773C; font-weight: 700; text-decoration: underline; }
.froga-tl-khach a { color: #FFFFFF; }
.froga-tl-cho { align-self: flex-start; color: #5F6B58; font-size: 13px; padding: 4px 6px; }
.froga-tl-cho::after { content: '…'; animation: frogaTlCham 1s steps(3, end) infinite; }
@keyframes frogaTlCham { 0% { content: '.'; } 50% { content: '..'; } 100% { content: '…'; } }
.froga-tl-loi { align-self: flex-start; background: #FFF1C9; color: #7A5F22; border: 1px solid #F0DCA6; }

.froga-tl-goi-y { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.froga-tl-goi-y button { border: 1px solid #BBD9B9; background: #FFFFFF; color: #23773C; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.froga-tl-goi-y button:hover { background: #E7F2E4; }

.froga-tl-nhap { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #E4DDC9; background: #FFFFFF; }
.froga-tl-nhap input { flex: 1; min-width: 0; border: 1px solid #DAD2BA; border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 15px; color: #1E3B27; background: #FFFFFF; }
.froga-tl-nhap input:focus { outline: 2px solid #23773C; outline-offset: 1px; }
.froga-tl-nhap button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #23773C; color: #FFFFFF; font-size: 17px; cursor: pointer; }
.froga-tl-nhap button:disabled { opacity: .5; cursor: default; }
.froga-tl-chu-thich { font-size: 11.5px; color: #5F6B58; text-align: center; padding: 0 12px 9px; background: #FFFFFF; }
.froga-tl-chu-thich a { color: #23773C; font-weight: 700; }

/* Bong bóng chủ động */
.froga-tl-bong { position: relative; width: min(300px, calc(100vw - 40px)); background: #FFFFFF; border: 1px solid #E4DDC9; border-radius: 16px 16px 4px 16px; padding: 12px 34px 12px 14px; box-shadow: 0 14px 34px rgba(30, 59, 39, .2); animation: frogaTlHien .25s ease-out both; }
.froga-tl-bong p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: #1E3B27; font-weight: 600; }
.froga-tl-bong-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.froga-tl-bong-chip button { border: 1px solid #BBD9B9; background: #F1F8EE; color: #23773C; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.froga-tl-bong-chip button:hover { background: #E7F2E4; }
.froga-tl-bong-dong { position: absolute; right: 6px; top: 4px; border: 0; background: transparent; color: #5F6B58; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; }

@media (max-width: 700px) {
  .froga-tl { right: 10px; bottom: 12px; }
  .froga-tl-bong { width: min(280px, calc(100vw - 30px)); }
  body.single-product .froga-tl { bottom: 84px; }
  .froga-tl-nut { width: 58px; height: 58px; padding: 7px; }
  .froga-tl-khung { width: calc(100vw - 20px); height: min(560px, calc(100vh - 90px)); }
  .froga-tl-dong-tin { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .froga-tl-khung, .froga-tl-nut { animation: none !important; transition: none !important; }
}