/* =========================================================================
   X-DMAIC launcher.css — nút liên hệ Kè X (parts/launcher.php, assets/js/launcher.js).
   Trạng thái JS gắn lên .sm-launcher: .is-online, .is-open (bảng kênh), .is-kex (đang hỏi chuyện), .is-wiggle.
   Theo DESIGN.md: bảng nền Ink, nhấn lime, Lexend, bo 24/16/12, nút tròn viền lime khi hover.
   ========================================================================= */
.sm-launcher{position:fixed;right:24px;bottom:24px;z-index:9990;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;font-family:var(--xd-font)}
.sm-launcher>*{pointer-events:auto}
.sm-launcher [hidden]{display:none!important}

/* Nút: đầu Kè X trong vòng tròn xanh thương hiệu */
.sm-launcher-btn{position:relative;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;opacity:0;transform:translateY(24px) scale(.5);animation:xd-ln-pop .6s cubic-bezier(.3,1.5,.5,1) .3s forwards}
html.xd-intro-on .sm-launcher-btn{animation-play-state:paused}
.sm-launcher-avatar{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--xd-blue-400) 0,var(--xd-blue) 55%,var(--xd-blue-700) 100%);box-shadow:0 0 0 3px var(--xd-white),0 10px 26px -6px rgba(1,30,90,.55);transition:transform var(--xd-fast) var(--xd-ease),box-shadow var(--xd-fast)}
.sm-launcher-btn:hover .sm-launcher-avatar,.sm-launcher-btn:focus-visible .sm-launcher-avatar{transform:scale(1.06);box-shadow:0 0 0 3px var(--xd-lime),0 12px 30px -6px rgba(1,30,90,.6)}
.sm-launcher-btn:focus-visible{outline:none}
.sm-launcher-face{position:absolute;left:50%;top:54%;width:112%;height:112%;max-width:none;transform:translate(-50%,-50%);transition:opacity .2s ease,transform .35s cubic-bezier(.3,1.5,.5,1)}
.sm-launcher-face.is-open{opacity:0;transform:translate(-50%,-40%) scale(.9)}
.sm-launcher.is-open .sm-launcher-face.is-idle{opacity:0}
.sm-launcher.is-open .sm-launcher-face.is-open{opacity:1;transform:translate(-50%,-50%)}

/* Chấm trạng thái: lime trong giờ làm việc, xám ngoài giờ */
.sm-launcher-status{position:absolute;right:1px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--xd-muted);box-shadow:0 0 0 3px var(--xd-white)}
.sm-launcher.is-online .sm-launcher-status{background:var(--xd-lime)}
.sm-launcher.is-online .sm-launcher-status::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--xd-lime);animation:xd-ln-ping 2s ease-out infinite}
.sm-launcher.is-wiggle .sm-launcher-avatar{animation:xd-ln-hop .9s cubic-bezier(.3,1.4,.5,1)}

/* Bong bóng lời mời */
.sm-launcher-bubble{position:absolute;right:80px;bottom:8px;display:flex;align-items:flex-start;gap:6px;width:max-content;max-width:min(270px,calc(100vw - 120px));padding:12px 10px 12px 16px;border-radius:16px 16px 4px 16px;background:var(--xd-ink);color:var(--xd-on-dark);box-shadow:var(--xd-shadow-1);font-size:14px;font-weight:600;line-height:1.45;transform-origin:100% 100%}
.sm-launcher-bubble:not([hidden]){animation:xd-ln-bubble .45s cubic-bezier(.3,1.4,.5,1)}
.sm-launcher-bubble span{cursor:pointer}
.sm-launcher-bubble-x{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--xd-muted);cursor:pointer}
.sm-launcher-bubble-x:hover,.sm-launcher-bubble-x:focus-visible{background:rgba(255,255,255,.12);color:#fff;outline:none}

/* Bảng kênh liên hệ */
.sm-launcher-panel{position:absolute;right:0;bottom:82px;width:330px;max-width:calc(100vw - 28px);overflow:hidden;border-radius:var(--xd-r-lg);background:var(--xd-white);border:1px solid var(--xd-line);box-shadow:var(--xd-shadow-2);opacity:0;transform:translateY(12px) scale(.94);transform-origin:100% 100%;transition:opacity .18s ease,transform .28s cubic-bezier(.3,1.3,.5,1)}
.sm-launcher.is-open .sm-launcher-panel{opacity:1;transform:none}
.sm-launcher-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 16px 18px 20px;background:var(--xd-ink);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;color:#fff}
.sm-launcher-head p{margin:0}
.sm-launcher-title{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.sm-launcher-state{display:flex;align-items:center;gap:8px;margin-top:6px!important;font-size:13px;color:var(--xd-on-dark-2)}
.sm-launcher-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--xd-muted)}
.sm-launcher.is-online .sm-launcher-dot{background:var(--xd-lime);box-shadow:0 0 0 3px rgba(213,242,91,.25)}
.sm-launcher-state-on{display:none}
.sm-launcher.is-online .sm-launcher-state-on{display:inline}
.sm-launcher.is-online .sm-launcher-state-off{display:none}
.sm-launcher-close{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background var(--xd-fast)}
.sm-launcher-close:hover,.sm-launcher-close:focus-visible{background:rgba(255,255,255,.22);outline:none}
.sm-launcher-list{list-style:none;margin:0;padding:8px}
.sm-launcher-item a{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--xd-r-md);color:var(--xd-ink);text-decoration:none;transition:background-color var(--xd-fast)}
.sm-launcher-item a:hover,.sm-launcher-item a:focus-visible{background:var(--xd-paper);outline:none}
.sm-launcher-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--xd-r-sm);background:var(--xd-ink);color:#fff}
.is-zalo .sm-launcher-icon{background:var(--xd-blue)}
.is-call .sm-launcher-icon{background:var(--xd-lime);color:var(--xd-ink)}
.sm-launcher-text{display:flex;flex:1;flex-direction:column;min-width:0}
.sm-launcher-text strong{font-size:15px;font-weight:700;line-height:1.3}
.sm-launcher-text small{font-size:13px;line-height:1.4;color:var(--xd-sub)}
.sm-launcher-go{display:grid;color:var(--xd-sub);transition:transform var(--xd-fast) var(--xd-ease)}
.sm-launcher-item a:hover .sm-launcher-go{transform:translateX(3px);color:var(--xd-ink)}
/* "Gọi ngay" chỉ cho thiết bị cảm ứng */
@media (hover:hover) and (pointer:fine){.sm-launcher-item.is-call{display:none}}

/* ===== Kè X hỏi chuyện ===== */
.sm-kex{position:absolute;right:0;bottom:84px;width:350px;max-width:calc(100vw - 28px);padding:18px;border-radius:var(--xd-r-lg) var(--xd-r-lg) 6px var(--xd-r-lg);background:var(--xd-white);color:var(--xd-ink);border:1px solid var(--xd-line);box-shadow:var(--xd-shadow-2);transform-origin:100% 100%}
.sm-kex:not([hidden]){animation:xd-ln-bubble .45s cubic-bezier(.3,1.4,.5,1)}
.sm-kex-head{display:flex;align-items:flex-start;gap:12px}
.sm-kex-face{flex:none;width:56px;height:56px;object-fit:contain;margin-top:-2px}
.sm-kex-text{flex:1;min-width:0}
.sm-kex-text p{margin:0}
.sm-kex-react{margin:0 0 6px!important;font-size:13.5px;font-style:italic;line-height:1.45;color:var(--xd-sub)}
.sm-kex-react.is-typing{font-style:normal;font-size:20px;line-height:1;letter-spacing:2px;animation:xd-kex-dots .9s ease-in-out infinite}
.sm-kex-say{font-size:15px;font-weight:600;line-height:1.5}
.sm-kex-x{flex:none;display:grid;place-items:center;width:30px;height:30px;margin:-4px -4px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--xd-sub);cursor:pointer}
.sm-kex-x:hover,.sm-kex-x:focus-visible{background:var(--xd-paper);color:var(--xd-ink);outline:none}
.sm-kex-body{margin-top:14px}
.sm-kex-opts,.sm-kex-acts{display:flex;flex-direction:column;gap:8px}
.sm-kex-opt,.sm-kex-act,.sm-kex-people,.sm-kex-back{display:block;width:100%;margin:0;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--xd-fast),border-color var(--xd-fast),color var(--xd-fast)}
.sm-kex-opt{padding:11px 14px;border-radius:var(--xd-r-sm);border:1.5px solid var(--xd-line);background:transparent;color:var(--xd-ink);font-size:14px;font-weight:600;line-height:1.35}
.sm-kex-opt:hover,.sm-kex-opt:focus-visible{border-color:var(--xd-ink);background:var(--xd-paper);outline:none}
.sm-kex-act{padding:12px 16px;border-radius:var(--xd-r-pill);border:1.5px solid var(--xd-ink);background:transparent;color:var(--xd-ink);font-size:14px;font-weight:700;line-height:1.35;text-align:center}
.sm-kex-act.is-primary{background:var(--xd-lime);border-color:var(--xd-lime)}
.sm-kex-act:hover,.sm-kex-act:focus-visible{background:var(--xd-ink);color:#fff;outline:none}
.sm-kex-act.is-primary:hover,.sm-kex-act.is-primary:focus-visible{background:var(--xd-lime-hover);border-color:var(--xd-lime-hover);color:var(--xd-ink)}
.sm-kex-people,.sm-kex-back{width:auto;padding:6px 2px;border:0;background:transparent;color:var(--xd-sub);font-size:13px;font-weight:600}
.sm-kex-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.sm-kex-people{margin-left:auto;text-align:right}
.sm-kex-people::after{content:" →"}
.sm-kex-back::before{content:"← "}
.sm-kex-people:hover,.sm-kex-back:hover,.sm-kex-people:focus-visible,.sm-kex-back:focus-visible{color:var(--xd-ink);outline:none;text-decoration:underline}

.sm-launcher-bubble span{cursor:pointer}

/* ===== Form "Để lại số" dùng chung + minigame (cùng góc với nút Kè X) ===== */
.sm-lead,.sm-game{position:absolute;right:0;bottom:84px;width:370px;max-width:calc(100vw - 28px);max-height:calc(100vh - 120px);overflow-y:auto;padding:20px;border-radius:var(--xd-r-lg) var(--xd-r-lg) 6px var(--xd-r-lg);background:var(--xd-white);color:var(--xd-ink);border:1px solid var(--xd-line);box-shadow:var(--xd-shadow-2);transform-origin:100% 100%}
.sm-lead:not([hidden]),.sm-game:not([hidden]){animation:xd-ln-bubble .4s cubic-bezier(.3,1.4,.5,1)}
.sm-launcher.is-sheet .sm-launcher-bubble{display:none!important}
.sm-lead-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.sm-lead-head>div{flex:1;min-width:0}
.sm-lead-face{flex:none;width:52px;height:52px;object-fit:contain}
.sm-lead-k{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--xd-blue)}
.sm-lead-t{margin:0;font-size:16px;font-weight:700;line-height:1.4}
.sm-lead-x{flex:none;display:grid;place-items:center;width:34px;height:34px;margin:-6px -6px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--xd-sub);cursor:pointer}
.sm-lead-x:hover,.sm-lead-x:focus-visible{background:var(--xd-paper);color:var(--xd-ink);outline:none}
.sm-lead-form{display:flex;flex-direction:column;gap:12px}
.sm-lead-f{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}
.sm-lead-f i{font-style:normal;color:var(--xd-error)}
.sm-lead-f small{font-weight:400;color:var(--xd-sub)}
.sm-lead-f input,.sm-lead-f select{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--xd-line);border-radius:var(--xd-r-sm);background:#fff;font:inherit;font-size:16px;color:var(--xd-ink)}
.sm-lead-f input:focus,.sm-lead-f select:focus{outline:3px solid var(--xd-blue);outline-offset:2px;border-color:var(--xd-blue)}
.sm-lead-ck{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600;line-height:1.45;cursor:pointer}
.sm-lead-ck input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--xd-ink)}
.sm-lead-err{margin:0;font-size:13.5px;font-weight:600;color:#B91C1C}
.sm-lead-go{width:100%;justify-content:center}
.sm-lead-go[aria-busy="true"]{opacity:.6;cursor:wait}
.sm-lead-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--xd-sub)}
.sm-lead-note a{color:var(--xd-blue)}
.sm-lead-done{display:flex;flex-direction:column;gap:10px;outline:none}
.sm-lead-done b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.sm-lead-done p{margin:0;font-size:14.5px;line-height:1.55;color:var(--xd-sub-2)}
.sm-lead-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sm-lead [hidden]{display:none!important}

/* Minigame: chữ dmaıc, chấm lime nhảy trên từng chữ */
.sm-game-stage{display:flex;justify-content:center;margin:4px 0 6px;padding:28px 16px 18px;border-radius:var(--xd-r-md);background:var(--xd-ink)}
.sm-game-stage svg{display:block;width:100%;max-width:300px;height:auto;overflow:visible}
.sm-game-dot{transition:transform .16s cubic-bezier(.3,1.5,.5,1)}
.sm-game.is-win .sm-game-dot{filter:drop-shadow(0 0 10px rgba(213,242,91,.9))}
.sm-game-msg{min-height:42px;margin:10px 0;font-size:14.5px;font-weight:600;line-height:1.45;text-align:center}
.sm-game-acts{display:flex;align-items:center;justify-content:center;gap:16px}
.sm-game-acts .xb{min-width:150px}
.sm-game-pips{display:flex;gap:6px}
.sm-game-pips i{width:10px;height:10px;border-radius:50%;background:var(--xd-line)}
.sm-game-pips i.is-miss{background:var(--xd-sub)}
.sm-game-skip{display:block;margin:12px auto 0;padding:6px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--xd-sub);text-decoration:underline;cursor:pointer}

@media (max-width:767px){
  .sm-launcher{right:14px;bottom:14px}
  .sm-launcher-btn{width:58px;height:58px}
  .sm-launcher-bubble{right:70px;bottom:6px;font-size:13px}
  .sm-launcher-panel{bottom:72px}
  /* Điện thoại: hộp Kè X trượt từ dưới lên, ẩn nút khi đang hỏi */
  .sm-launcher.is-kex .sm-launcher-btn{visibility:hidden}
  .sm-kex{position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:70vh;overflow-y:auto;padding:20px 16px calc(16px + env(safe-area-inset-bottom));border-radius:var(--xd-r-lg) var(--xd-r-lg) 0 0;border-bottom:0;transform-origin:50% 100%}
  .sm-kex:not([hidden]){animation:xd-kex-up .35s cubic-bezier(.2,.9,.3,1)}
  .sm-kex-face{width:52px;height:52px}
  .sm-launcher.is-sheet .sm-launcher-btn{visibility:hidden}
  .sm-lead,.sm-game{position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:85vh;padding:20px 16px calc(16px + env(safe-area-inset-bottom));border-radius:var(--xd-r-lg) var(--xd-r-lg) 0 0;border-bottom:0;transform-origin:50% 100%}
  .sm-lead:not([hidden]),.sm-game:not([hidden]){animation:xd-kex-up .35s cubic-bezier(.2,.9,.3,1)}
}
@media (prefers-reduced-motion:reduce){
  .sm-launcher-btn{animation:none;opacity:1;transform:none}
  .sm-launcher.is-wiggle .sm-launcher-avatar,.sm-launcher-bubble:not([hidden]),.sm-kex:not([hidden]),.sm-launcher.is-online .sm-launcher-status::after{animation:none}
}
@keyframes xd-ln-pop{0%{opacity:0;transform:translateY(24px) scale(.5,.35)}55%{opacity:1;transform:translateY(-6px) scale(.94,1.08)}80%{transform:translateY(0) scale(1.05,.95)}100%{opacity:1;transform:none}}
@keyframes xd-ln-hop{0%,100%{transform:none}30%{transform:translateY(-7px) rotate(-6deg)}55%{transform:translateY(0) rotate(4deg)}75%{transform:rotate(-2deg)}}
@keyframes xd-ln-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes xd-ln-bubble{0%{opacity:0;transform:translateX(10px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes xd-kex-dots{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes xd-kex-up{from{transform:translateY(100%)}to{transform:none}}
.sm-lead-ck small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--xd-sub)}