/* v4.8 – Trợ lý AIST: nút nổi + khung chat. Mọi quy tắc nằm trong .tl để không đụng site.css */
.tl{--tl-navy:#173B6C;--tl-blue:#2764A5;--tl-orange:#E08D2D;--tl-ink:#1D1E20;--tl-mute:#6F7A86;--tl-line:#DFE6EF;--tl-soft:#F3F6FA;font-size:15px;line-height:1.55}
.tl *{box-sizing:border-box}
.tl-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:990;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:linear-gradient(135deg,#F3AE4F 0%,#E08D2D 100%);color:#13284A;font:inherit;padding:8px 20px 8px 8px;cursor:pointer;box-shadow:0 10px 28px rgba(224,141,45,.42),0 2px 6px rgba(23,59,108,.18);transition:transform .15s,box-shadow .15s;text-align:left}
.tl-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(224,141,45,.5),0 2px 8px rgba(23,59,108,.2)}
.tl-fab::before{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid rgba(224,141,45,.55);animation:tlpulse 2.4s ease-out infinite;pointer-events:none}
.tl.seen .tl-fab::before{animation:none;border-color:transparent}
@keyframes tlpulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
.tl-fi{position:relative;width:46px;height:46px;border-radius:50%;background:var(--tl-navy);color:#fff;display:grid;place-items:center;flex:none}
.tl-dot{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:#2BB673;border:2px solid #F3AE4F}
.tl-fl{display:flex;flex-direction:column;line-height:1.2}
.tl-fl b{font-size:1rem;font-weight:800}
.tl-fl small{font-size:.78rem;font-weight:600;color:#3A3020;opacity:.85;margin-top:2px}
.tl-short{display:none}
.tl.open .tl-fab,.tl.open .tl-teaser{display:none}
/* lời mời xuất hiện cạnh nút */
.tl-teaser{position:fixed;right:20px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:991;width:min(330px,calc(100vw - 28px));background:#fff;border-radius:16px;box-shadow:0 16px 44px rgba(10,20,35,.22);border:1px solid var(--tl-line);padding:16px 16px 14px;display:flex;gap:12px;align-items:flex-start}
.tl-teaser[hidden]{display:none}
.tl-teaser::after{content:"";position:absolute;right:34px;bottom:-8px;width:16px;height:16px;background:#fff;border-right:1px solid var(--tl-line);border-bottom:1px solid var(--tl-line);transform:rotate(45deg)}
.tl-tav{position:relative;width:40px;height:40px;border-radius:50%;background:var(--tl-navy);color:#fff;display:grid;place-items:center;flex:none}
.tl-tav svg{width:20px;height:20px}
.tl-tav i{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#2BB673;border:2px solid #fff}
.tl-teaser b{display:block;color:var(--tl-navy);font-size:.95rem;padding-right:18px}
.tl-teaser p{margin:4px 0 10px;font-size:.88rem;color:#3B4654;line-height:1.5}
.tl-tbtn{border:0;background:var(--tl-navy);color:#fff;border-radius:999px;padding:7px 16px;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.tl-tx{position:absolute;top:6px;right:8px;border:0;background:none;font-size:20px;line-height:1;color:var(--tl-mute);cursor:pointer;padding:4px 6px}
@media (prefers-reduced-motion:no-preference){.tl-teaser:not([hidden]){animation:tlin .35s ease-out}@keyframes tlin{from{opacity:0;transform:translateY(10px)}}}
/* khi thanh cookie đang hiện trên màn hình hẹp: đẩy nút lên trên thanh */
@media (max-width:1099px){body.cc-on .tl-fab{bottom:calc(var(--cc-h,0px) + 22px + env(safe-area-inset-bottom,0px))}body.cc-on .tl-teaser{display:none}}
.tl-panel{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1001;padding:0;margin:0;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100vh - 40px));background:#fff;border-radius:16px;box-shadow:0 18px 60px rgba(10,20,35,.28);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--tl-line)}
.tl-panel[hidden]{display:none}
.tl-head{display:flex;align-items:center;gap:10px;background:var(--tl-navy);color:#fff;padding:12px 10px 12px 14px;flex:none}
.tl-av{width:36px;height:36px;border-radius:50%;background:var(--tl-orange);color:#13284A;display:grid;place-items:center;flex:none}.tl-av svg{width:20px;height:20px}
.tl-ht{flex:1;min-width:0;display:flex;flex-direction:column}
.tl-ht b{font-size:1rem}
.tl-ht span{font-size:.78rem;color:#C9D8EC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-ico{border:0;background:rgba(255,255,255,.12);color:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center;flex:none}
.tl-ico:hover{background:rgba(255,255,255,.22)}
.tl-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--tl-soft);overscroll-behavior:contain}
.tl-msg{max-width:88%;padding:9px 12px;border-radius:14px;overflow-wrap:anywhere}
.tl-msg p{margin:0 0 .45em}.tl-msg p:last-child{margin:0}
.tl-msg ul{margin:.2em 0 .45em;padding-left:1.2em}.tl-msg li{margin:.15em 0}
.tl-msg a{color:var(--tl-blue);font-weight:600}
.tl-bot{align-self:flex-start;background:#fff;border:1px solid var(--tl-line);border-bottom-left-radius:4px;color:var(--tl-ink)}
.tl-user{align-self:flex-end;background:var(--tl-navy);color:#fff;border-bottom-right-radius:4px;white-space:pre-wrap}
.tl-chips{display:flex;flex-wrap:wrap;gap:6px}
.tl-chip{border:1px solid #C9D3E0;background:#fff;color:var(--tl-navy);border-radius:999px;padding:6px 11px;font:inherit;font-size:.85rem;cursor:pointer;text-align:left}
.tl-chip:hover{border-color:var(--tl-navy)}
.tl-act{align-self:flex-start;border:1.5px solid var(--tl-orange);background:#FFF6EB;color:#7A4510;border-radius:999px;padding:6px 12px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.tl-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--tl-line);border-radius:14px}
.tl-typing i{width:7px;height:7px;border-radius:50%;background:#9AA7B6;animation:tlb 1s infinite ease-in-out}
.tl-typing i:nth-child(2){animation-delay:.15s}.tl-typing i:nth-child(3){animation-delay:.3s}
@keyframes tlb{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.tl-typing i{animation:none}.tl-fab{transition:none}.tl-fab::before{animation:none}}
.tl-foot{display:flex;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--tl-line);background:#fff;flex:none}
.tl-foot textarea{flex:1;resize:none;border:1.5px solid #CBD5E1;border-radius:12px;padding:9px 12px;font:inherit;font-size:16px;line-height:1.4;max-height:120px;min-height:42px;color:var(--tl-ink)}
.tl-foot textarea:focus,.tl-ho input:focus,.tl-ho textarea:focus{outline:none;border-color:var(--tl-blue);box-shadow:0 0 0 3px rgba(39,100,165,.18)}
.tl-send{border:0;background:var(--tl-orange);color:#1D1E20;width:42px;height:42px;border-radius:12px;cursor:pointer;display:grid;place-items:center;flex:none}
.tl-send:disabled{opacity:.5;cursor:not-allowed}
.tl-note{margin:0;padding:6px 12px 10px;font-size:.72rem;color:var(--tl-mute);background:#fff;flex:none;line-height:1.45}
.tl-note a{color:var(--tl-mute)}
.tl-link{border:0;background:none;padding:0;font:inherit;color:var(--tl-blue);text-decoration:underline;cursor:pointer}
.tl-ho{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff}
.tl-ho[hidden]{display:none}
.tl-ho-h{margin:0}.tl-ho-h b{display:block;color:var(--tl-navy)}.tl-ho-h span{display:block;font-size:.85rem;color:var(--tl-mute);margin-top:2px}
.tl-ho label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.88rem;color:var(--tl-ink)}
.tl-ho input,.tl-ho textarea{font:inherit;font-size:16px;font-weight:400;border:1.5px solid #CBD5E1;border-radius:8px;padding:8px 10px;width:100%;color:var(--tl-ink)}
.tl-ho-b{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tl-btn{border:0;background:var(--tl-navy);color:#fff;border-radius:8px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer}
.tl-btn:disabled{opacity:.5}
.tl-err{margin:0;background:#F9E3DE;color:#A23B2A;border-radius:8px;padding:8px 10px;font-size:.85rem}
.tl-ok{background:#E5F4EC;color:#1F7A4D;border-radius:10px;padding:12px;font-size:.92rem}
.tl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tl :focus-visible{outline:3px solid var(--tl-orange);outline-offset:2px}
@media (max-width:560px){
  .tl-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px 16px 6px 6px;gap:8px}
  .tl-fi{width:40px;height:40px}
  .tl-long,.tl-fl small{display:none}
  .tl-short{display:block}
  .tl-teaser{right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .tl-teaser::after{right:40px}
  .tl-panel{right:0;left:0;bottom:0;top:0;width:100%;height:100%;border-radius:0;border:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
}