/* ============================================================
   LING SI — chat tư vấn (widget nổi)
   ============================================================ */

.ls-chat-btn{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink);color:#f7f2e9;overflow:visible;
  box-shadow:0 14px 30px rgba(27,25,23,.28);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ls-chat-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(27,25,23,.34)}
.ls-chat-btn img{width:44px;height:44px;border-radius:50%;background:#fff;display:block}
.ls-chat-btn .dot{
  position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:50%;
  background:#7bd88f;border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(123,216,143,.7);animation:ls-pulse 2.4s infinite;
}
@keyframes ls-pulse{
  0%{box-shadow:0 0 0 0 rgba(123,216,143,.55)}
  70%{box-shadow:0 0 0 9px rgba(123,216,143,0)}
  100%{box-shadow:0 0 0 0 rgba(123,216,143,0)}
}

.ls-chat{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:min(392px,calc(100vw - 24px));height:min(620px,calc(100vh - 40px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 26px 60px rgba(27,25,23,.26);
}
.ls-chat.is-open{display:flex}

.ls-chat-head{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--ink);color:#f7f2e9;
}
.ls-chat-head img{width:42px;height:42px;border-radius:50%;background:#fff}
.ls-chat-head .who{line-height:1.25}
.ls-chat-head strong{display:block;font-size:.94rem;font-weight:600}
.ls-chat-head small{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#bfd8c5}
.ls-chat-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#7bd88f}
.ls-chat-close{
  margin-left:auto;width:34px;height:34px;border:1px solid rgba(247,242,233,.28);
  background:transparent;color:#f7f2e9;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;
}
.ls-chat-close:hover{background:rgba(247,242,233,.14)}

.ls-chat-body{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:
    radial-gradient(circle at 18% 0%,rgba(201,163,119,.10),transparent 55%),
    var(--paper);
  scroll-behavior:smooth;
}
.ls-msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ls-msg--bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink-soft)}
.ls-msg--me{align-self:flex-end;background:var(--ink);color:#f7f2e9;border-bottom-right-radius:5px}
.ls-msg a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.ls-msg--me a{color:#f0dcc0}
.ls-msg-time{align-self:flex-start;font-size:.66rem;color:var(--muted);margin:-4px 0 2px 6px}

.ls-cards{display:flex;flex-direction:column;gap:8px;align-self:flex-start;max-width:90%}
.ls-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:11px;
  font-size:.82rem;color:var(--ink);
}
.ls-card b{font-weight:600}
.ls-card span{color:var(--gold);white-space:nowrap;font-weight:600}

.ls-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
.ls-quick button{
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  padding:7px 12px;border-radius:999px;font-size:.76rem;cursor:pointer;
}
.ls-quick button:hover{border-color:var(--gold-soft);color:var(--ink)}

.ls-chat-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.ls-chat-form input{
  flex:1;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--sans);font-size:.9rem;color:var(--ink);background:var(--paper);
}
.ls-chat-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,118,63,.12)}
.ls-chat-form button{
  width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:#fff;
  cursor:pointer;display:grid;place-items:center;font-size:1rem;
}
.ls-chat-form button:disabled{opacity:.5;cursor:default}

.ls-chat-foot{
  padding:8px 16px 12px;font-size:.68rem;color:var(--muted);text-align:center;background:#fff;
}
.ls-chat-foot a{color:var(--gold)}

.ls-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:5px}
.ls-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:ls-bounce 1.2s infinite}
.ls-typing i:nth-child(2){animation-delay:.15s}
.ls-typing i:nth-child(3){animation-delay:.3s}
@keyframes ls-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

@media (max-width:560px){
  .ls-chat-btn{right:14px;bottom:calc(92px + env(safe-area-inset-bottom));width:54px;height:54px;padding:0}
  .ls-chat-btn img{width:40px;height:40px}
  .ls-chat{
    left:10px;right:10px;
    bottom:calc(8px + var(--ls-kb, 0px) + env(safe-area-inset-bottom));
    width:auto;max-width:calc(100vw - 20px);
    height:min(74vh,560px);
    height:min(74dvh,560px);
    max-height:calc(100dvh - 96px - var(--ls-kb, 0px));
    border-radius:16px;
    border-bottom:1px solid var(--line);
    transition:bottom .18s ease, max-height .18s ease;
  }
  .ls-chat-head{padding:10px 12px}
  .ls-chat-head img{width:36px;height:36px}
  .ls-chat-body{padding:12px 12px 8px;gap:8px}
  .ls-msg{max-width:86%;font-size:.9rem}
  .ls-chat-form{padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:6px}
  .ls-chat-form input{font-size:16px;padding:10px 12px}
  .ls-chat-form button{padding:10px 14px}
  .ls-chat-foot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ls-chat-btn .dot,.ls-typing i{animation:none}
  .ls-chat-body{scroll-behavior:auto}
}

/* Nút Zalo tròn, xếp dưới nút bot */
.ls-zalo-btn{
  position:fixed;right:20px;bottom:86px;z-index:80;
  width:58px;height:58px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(27,25,23,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ls-zalo-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(27,25,23,.28)}
.ls-zalo-btn img{width:46px;height:46px;border-radius:50%;display:block}
.ls-zalo-btn.is-hidden{display:none}
@media (max-width:560px){
  .ls-zalo-btn{right:14px;bottom:calc(154px + env(safe-area-inset-bottom));width:54px;height:54px}
  .ls-zalo-btn img{width:42px;height:42px}
}