/* THOAN OS — AI Quản gia V1.1 — nổi bật + giọng nói */
:root{
  --qg-navy:#073b6f;
  --qg-navy-2:#0a4d86;
  --qg-navy-3:#1267a8;
  --qg-orange:#ff9700;
  --qg-orange-2:#ffad2f;
  --qg-orange-soft:#fff3df;
  --qg-ink:#173a5e;
  --qg-muted:#657a8e;
  --qg-line:#dce7f0;
  --qg-bg:#f7fbff;
  --qg-white:#fff;
  --qg-green:#35c676;
  --qg-shadow:0 28px 78px rgba(4,38,70,.30),0 8px 28px rgba(4,38,70,.16);
}

/* Launcher — cố tình khác nền trang để người mới nhìn thấy ngay */
.thoan-butler-launcher{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:920;
  width:auto;
  min-width:198px;
  height:66px;
  padding:7px 15px 7px 7px;
  border:2px solid rgba(255,151,0,.98);
  border-radius:999px;
  background:#fff;
  color:var(--qg-navy);
  box-shadow:0 16px 40px rgba(7,59,111,.28),0 0 0 6px rgba(255,151,0,.11);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.thoan-butler-launcher:hover{
  transform:translateY(-3px);
  border-color:var(--qg-orange-2);
  box-shadow:0 21px 48px rgba(7,59,111,.34),0 0 0 7px rgba(255,151,0,.16);
}
.thoan-butler-launcher:focus-visible{outline:3px solid rgba(255,151,0,.48);outline-offset:4px}
.thoan-butler-launcher .butler-mark-wrap{
  position:relative;
  width:49px;
  height:49px;
  flex:0 0 49px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,var(--qg-navy),var(--qg-navy-3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 5px 14px rgba(7,59,111,.22);
}
.thoan-butler-launcher .butler-mark{font-size:25px;line-height:1}
.thoan-butler-launcher .butler-online{
  position:absolute;right:-1px;bottom:0;width:14px;height:14px;border-radius:50%;
  background:var(--qg-green);border:3px solid #fff;
}
.thoan-butler-launcher .butler-launcher-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  line-height:1.15;
}
.thoan-butler-launcher .butler-launcher-copy strong{
  font-size:.92rem;
  font-weight:950;
  letter-spacing:.005em;
  white-space:nowrap;
}
.thoan-butler-launcher .butler-launcher-copy small{
  margin-top:4px;
  color:#627b91;
  font-size:.69rem;
  font-weight:800;
  white-space:nowrap;
}
.thoan-butler-launcher::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(255,151,0,.22);
  border-radius:999px;
  opacity:0;
  transform:scale(.98);
  pointer-events:none;
  animation:thoanButlerBeacon 4.2s ease-out 1.2s 3;
}
@keyframes thoanButlerBeacon{
  0%{opacity:0;transform:scale(.98)}
  18%{opacity:.9}
  72%{opacity:.2;transform:scale(1.08)}
  100%{opacity:0;transform:scale(1.12)}
}

.thoan-butler-teaser{
  position:fixed;
  right:232px;
  bottom:30px;
  z-index:919;
  max-width:275px;
  padding:11px 14px;
  border:1px solid #ffd7a0;
  border-left:4px solid var(--qg-orange);
  border-radius:15px;
  background:#fff;
  color:var(--qg-ink);
  box-shadow:0 12px 34px rgba(7,59,111,.18);
  font-size:.86rem;
  font-weight:800;
  line-height:1.42;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.thoan-butler-teaser.show{opacity:1;transform:translateY(0)}

/* Panel — tách khỏi giao diện chính bằng viền cam + bóng sâu */
.thoan-butler-panel{
  position:fixed;
  right:22px;
  bottom:102px;
  z-index:921;
  width:min(420px,calc(100vw - 28px));
  max-height:min(690px,calc(100vh - 132px));
  background:#fff;
  border:2px solid rgba(255,151,0,.48);
  border-radius:24px;
  box-shadow:var(--qg-shadow),0 0 0 7px rgba(255,255,255,.62),0 0 0 9px rgba(7,59,111,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(16px) scale(.982);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.thoan-butler-panel.open{opacity:1;transform:none;pointer-events:auto}

.thoan-butler-head{
  position:relative;
  padding:14px 14px 14px 15px;
  display:flex;
  gap:11px;
  align-items:center;
  color:#fff;
  background:linear-gradient(128deg,#06345f 0%,#07518c 58%,#0d6aae 100%);
  border-bottom:3px solid var(--qg-orange);
}
.thoan-butler-head::after{
  content:"AI HƯỚNG DẪN";
  position:absolute;
  left:71px;
  bottom:-12px;
  z-index:2;
  padding:3px 8px;
  border-radius:999px;
  background:var(--qg-orange);
  color:#173a5e;
  font-size:.56rem;
  font-weight:950;
  letter-spacing:.06em;
  box-shadow:0 4px 12px rgba(255,151,0,.22);
}
.thoan-butler-avatar{
  width:45px;height:45px;border-radius:15px;flex:0 0 45px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 0 0 1px rgba(255,151,0,.20);
  font-size:23px;
}
.thoan-butler-title{min-width:0;flex:1;padding-bottom:1px}
.thoan-butler-title strong{display:block;font-size:1rem;letter-spacing:.01em}
.thoan-butler-title span{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:.74rem;color:#dbeeff}
.thoan-butler-title span::before{content:"";width:7px;height:7px;border-radius:50%;background:#49d98b}
.thoan-butler-head-actions{display:flex;align-items:center;gap:6px}
.thoan-butler-voice-toggle,
.thoan-butler-close{
  width:35px;height:35px;border-radius:11px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.12);color:#fff;
  cursor:pointer;line-height:1;display:grid;place-items:center;
}
.thoan-butler-voice-toggle{font-size:16px}
.thoan-butler-voice-toggle:hover,.thoan-butler-close:hover{background:rgba(255,255,255,.21)}
.thoan-butler-voice-toggle.active{background:var(--qg-orange);color:#173a5e;border-color:var(--qg-orange);box-shadow:0 0 0 3px rgba(255,151,0,.18)}
.thoan-butler-close{font-size:21px}

.thoan-butler-body{
  background:linear-gradient(180deg,#edf6fd 0%,#f8fbfe 16%,#fff 40%);
  padding:22px 13px 10px;
  overflow:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}
.thoan-butler-message-row{display:flex;margin:0 0 10px}
.thoan-butler-message-row.user{justify-content:flex-end}
.thoan-butler-message{
  max-width:88%;
  padding:10px 12px;
  border-radius:15px;
  font-size:.91rem;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}
.thoan-butler-message-row.bot .thoan-butler-message{
  color:#214865;background:#fff;border:1px solid #d6e5f0;border-top-left-radius:5px;
  box-shadow:0 7px 20px rgba(7,59,111,.08);
}
.thoan-butler-message-row.user .thoan-butler-message{
  color:#fff;background:linear-gradient(135deg,#07518c,#0a639f);border-top-right-radius:5px;
  box-shadow:0 6px 16px rgba(7,59,111,.14);
}
.thoan-butler-message strong{color:inherit}

.thoan-butler-quick{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px}
.thoan-butler-chip,
.thoan-butler-action{
  appearance:none;
  border:1px solid #c9dce9;
  background:#fff;
  color:#174b76;
  border-radius:999px;
  padding:8px 10px;
  font:inherit;
  font-size:.79rem;
  font-weight:850;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.thoan-butler-chip:hover{background:#edf6fc;border-color:#95c1de;transform:translateY(-1px);box-shadow:0 5px 12px rgba(7,59,111,.08)}
.thoan-butler-action{
  border-radius:12px;
  background:var(--qg-orange);
  color:#173a5e;
  border-color:var(--qg-orange);
  padding:9px 12px;
  box-shadow:0 5px 13px rgba(255,151,0,.17);
}
.thoan-butler-action.secondary{background:#eef5fb;border-color:#d7e5f0;color:#174b76;box-shadow:none}
.thoan-butler-action-row{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}

.thoan-butler-typing{
  display:none;align-items:center;gap:5px;width:max-content;padding:9px 12px;margin:0 0 10px;
  border:1px solid #dbe8f1;background:#fff;border-radius:15px;border-top-left-radius:5px;
  box-shadow:0 5px 15px rgba(7,59,111,.06);
}
.thoan-butler-typing.show{display:flex}
.thoan-butler-typing i{width:6px;height:6px;border-radius:50%;background:#83a2ba;animation:thoanButlerDot 1.1s infinite ease-in-out}
.thoan-butler-typing i:nth-child(2){animation-delay:.13s}.thoan-butler-typing i:nth-child(3){animation-delay:.26s}
@keyframes thoanButlerDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

.thoan-butler-foot{
  padding:10px 11px 11px;
  border-top:1px solid #dce8f1;
  background:#fff;
  box-shadow:0 -8px 24px rgba(7,59,111,.035);
}
.thoan-butler-form{display:flex;align-items:flex-end;gap:7px}
.thoan-butler-input{
  min-height:44px;max-height:105px;flex:1;resize:none;
  border:1px solid #bfd5e5;border-radius:13px;padding:10px 11px;
  color:#183f60;background:#fbfdff;font:inherit;font-size:.9rem;line-height:1.42;
  outline:none;
}
.thoan-butler-input:focus{border-color:#4b9ed1;box-shadow:0 0 0 3px rgba(42,132,196,.12);background:#fff}
.thoan-butler-mic,
.thoan-butler-send{
  width:44px;height:44px;flex:0 0 44px;border-radius:13px;cursor:pointer;font-size:18px;display:grid;place-items:center;
}
.thoan-butler-mic{
  border:1px solid #ffc46b;
  background:#fff4df;
  color:#8f5200;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.thoan-butler-mic:hover{background:#ffe7bc;transform:translateY(-1px)}
.thoan-butler-mic.listening{
  color:#fff;
  background:#e5484d;
  border-color:#e5484d;
  box-shadow:0 0 0 4px rgba(229,72,77,.16);
  animation:thoanButlerMicPulse 1.2s ease-in-out infinite;
}
@keyframes thoanButlerMicPulse{50%{box-shadow:0 0 0 8px rgba(229,72,77,.09)}}
.thoan-butler-send{border:0;background:var(--qg-navy);color:#fff}
.thoan-butler-send:hover{background:#0a4d86}
.thoan-butler-send:disabled,.thoan-butler-mic:disabled{opacity:.48;cursor:not-allowed;transform:none}
.thoan-butler-voice-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  min-height:18px;
  color:#71879a;
  font-size:.68rem;
  line-height:1.35;
}
.thoan-butler-voice-status strong{color:#9a5a00;font-weight:850}
.thoan-butler-voice-status.listening strong{color:#c73136}
.thoan-butler-note{font-size:.65rem;color:#8798a6;text-align:center;margin-top:4px;line-height:1.35}

.thoan-butler-tour-badge{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;padding:5px 8px;border-radius:999px;
  background:var(--qg-orange-soft);color:#9b5700;border:1px solid #ffd9a3;font-size:.7rem;font-weight:900;
}
.thoan-butler-tour-focus{
  position:relative;
  z-index:2;
  box-shadow:inset 0 0 0 3px rgba(255,151,0,.72),0 0 0 8px rgba(255,151,0,.13)!important;
  transition:box-shadow .25s ease;
}

.ai-butler-card{position:relative;overflow:hidden}
.ai-butler-card::after{
  content:"ĐANG HOẠT ĐỘNG";
  position:absolute;right:-38px;top:20px;transform:rotate(38deg);
  width:150px;text-align:center;padding:5px 0;
  background:#49d98b;color:#073b3f;font-size:.62rem;font-weight:950;letter-spacing:.05em;
}

@media(max-width:620px){
  .thoan-butler-launcher{
    right:14px;bottom:14px;min-width:0;width:62px;height:62px;padding:6px;border-width:2px;
    justify-content:center;box-shadow:0 15px 34px rgba(7,59,111,.30),0 0 0 5px rgba(255,151,0,.12)
  }
  .thoan-butler-launcher .butler-mark-wrap{width:47px;height:47px;flex-basis:47px}
  .thoan-butler-launcher .butler-launcher-copy{display:none}
  .thoan-butler-panel{right:7px;bottom:84px;width:calc(100vw - 14px);max-height:calc(100vh - 98px);border-radius:20px}
  .thoan-butler-teaser{right:80px;bottom:20px;max-width:220px}
  .thoan-butler-body{padding:21px 10px 8px}
  .thoan-butler-message{max-width:92%;font-size:.89rem}
  .thoan-butler-head::after{left:70px}
}

@media(prefers-reduced-motion:reduce){
  .thoan-butler-panel,.thoan-butler-launcher,.thoan-butler-teaser,.thoan-butler-chip{transition:none}
  .thoan-butler-typing i,.thoan-butler-mic.listening,.thoan-butler-launcher::after{animation:none}
}

/* V1.2 — chọn đúng giọng đọc tiếng Việt, không rơi về giọng ngoại ngữ */
.thoan-butler-voice-choice{
  display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 8px;
  border:1px solid #e1ebf2;border-radius:10px;background:#f8fbfd;
  color:#5f778a;font-size:.68rem;line-height:1.25;
}
.thoan-butler-voice-choice[hidden]{display:none!important}
.thoan-butler-voice-choice>span{font-weight:800;white-space:nowrap;color:#315975}
.thoan-butler-voice-select{
  min-width:0;flex:1;border:1px solid #c9dce9;border-radius:8px;background:#fff;
  color:#174b76;font:inherit;font-size:.68rem;padding:5px 7px;outline:none;
}
.thoan-butler-voice-select:focus{border-color:#4b9ed1;box-shadow:0 0 0 2px rgba(42,132,196,.10)}

/* V1.3 — giọng AI + dẫn đường trực tiếp */
.thoan-butler-tour-focus{
  outline:4px solid rgba(255,151,0,.96)!important;
  outline-offset:5px;
  box-shadow:0 0 0 12px rgba(255,151,0,.17),0 20px 45px rgba(7,59,111,.18)!important;
  animation:thoanButlerGuideFocus 1.05s ease-in-out 3;
}
@keyframes thoanButlerGuideFocus{
  0%,100%{transform:translateY(0);filter:none}
  50%{transform:translateY(-5px);filter:brightness(1.035)}
}
.thoan-butler-voice-status span:last-child{font-weight:750;color:#336a8f}
.thoan-butler-voice-toggle.active{background:#fff3dc!important;color:#9b5700!important;border-color:#ffb54a!important}