/* Public Website Chat + desktop contact rail. Presentation only. */
.ct-wc{
  --g:#118755;--gd:#075b40;--o:#ff5a1f;--navy:#10243c;--line:#d7e4dc;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}
.ct-wc *,.ct-wc *::before,.ct-wc *::after{box-sizing:border-box}

.ct-wc-bubble{
  position:fixed;left:22px;right:auto;bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 16px 0 12px;border:0;border-radius:999px;cursor:pointer;
  background:var(--gd);color:#fff;font-weight:800;font-size:14px;
  box-shadow:0 10px 28px rgba(7,91,64,.28)
}
.ct-wc-bubble:focus-visible{outline:2px solid var(--o);outline-offset:3px}
.ct-wc-bubble span{width:10px;height:10px;border-radius:50%;background:#7ee0a8}

.ct-wc-panel{
  position:fixed;left:22px;right:auto;bottom:22px;z-index:81;
  width:min(420px, calc(100vw - 48px));
  height:min(620px, calc(var(--wc-vv, 100dvh) - 44px));
  max-height:min(620px, calc(var(--wc-vv, 100dvh) - 44px));
  display:none;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 48px rgba(16,36,60,.18)
}
.ct-wc.is-open .ct-wc-panel{display:flex}
.ct-wc.is-open .ct-wc-bubble{display:none}

.ct-wc-head{
  flex:0 0 auto;padding:14px 16px;background:var(--gd);color:#fff;
  display:flex;align-items:flex-start;gap:10px
}
.ct-wc-head b{display:block;font-size:15px;letter-spacing:-.02em}
.ct-wc-head small{display:block;margin-top:2px;opacity:.85;font-size:12.5px;font-weight:550}
.ct-wc-x{margin-left:auto;border:0;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:4px}

.ct-wc-body{
  flex:1 1 auto;min-height:0;overflow:auto;
  display:flex;flex-direction:column;
  padding:14px 16px 10px;background:#f7fbf8
}
.ct-wc-body:has([data-wc-live]:not([hidden])),
.ct-wc-body:has([data-wc-fallback]:not([hidden])){overflow:hidden}
.ct-wc [data-wc-live]:not([hidden]),
.ct-wc [data-wc-fallback]:not([hidden]){
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0
}
.ct-wc-ask{margin:0 0 12px;font-size:14.5px;line-height:1.45;color:var(--navy);font-weight:700}
.ct-wc label{display:grid;gap:4px;margin:0 0 10px;font-size:12px;font-weight:750;color:#3d5548}
.ct-wc input,.ct-wc textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font:inherit;font-size:14.5px;font-weight:500;color:var(--navy);background:#fff
}
.ct-wc textarea{min-height:84px;resize:vertical}
.ct-wc input:focus,.ct-wc textarea:focus{outline:2px solid var(--g);outline-offset:1px;border-color:var(--g)}
.ct-wc-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.ct-wc-go{
  width:100%;border:0;border-radius:12px;min-height:46px;cursor:pointer;
  background:var(--o);color:#fff;font-weight:800;letter-spacing:.04em
}
.ct-wc-go:disabled{opacity:.6;cursor:wait}
.ct-wc-priv{margin:10px 0 0;font-size:11.5px;line-height:1.4;color:#66776d}
.ct-wc-err{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:#fff3ec;color:#9a3b12;font-size:13px;font-weight:650}

.ct-wc-status{flex:0 0 auto;margin:0 0 8px;font-size:12px;color:#66776d}
.ct-wc-thread{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;padding:4px 2px 8px
}
.ct-wc-msg{
  max-width:86%;padding:10px 12px;border-radius:14px;
  font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word
}
.ct-wc-msg.in{align-self:flex-end;background:var(--gd);color:#fff;border-bottom-right-radius:4px}
.ct-wc-msg.out{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--navy);border-bottom-left-radius:4px}

.ct-wc-composer{
  flex:0 0 auto;display:flex;align-items:stretch;gap:8px;
  padding:10px 12px;border-top:1px solid var(--line);background:#fff
}
.ct-wc-composer[hidden]{display:none!important}
.ct-wc-composer textarea{min-height:48px;flex:1 1 auto;min-width:0;resize:none}
.ct-wc-composer button{
  flex:0 0 auto;align-self:stretch;border:0;border-radius:12px;padding:0 16px;
  background:var(--gd);color:#fff;font-weight:800;cursor:pointer;white-space:nowrap
}
.ct-wc-fallback{display:grid;gap:8px;margin-top:8px}
.ct-wc-fallback a{
  display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;
  text-decoration:none;font-weight:800
}
.ct-wc-fallback .zalo{background:var(--o);color:#fff}
.ct-wc-fallback .call{background:#eaf6ef;color:var(--gd)}

/* Desktop/tablet: Gọi + Zalo rail, independent of chat. */
.ct-contact-rail{
  position:fixed;right:22px;bottom:24px;z-index:60;
  display:flex;flex-direction:column;gap:12px;align-items:stretch
}
.ct-contact-rail a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:56px;min-height:48px;padding:0 14px;border-radius:14px;
  font-weight:800;font-size:13px;letter-spacing:.02em;text-decoration:none;
  box-shadow:0 8px 20px rgba(16,36,60,.14)
}
.ct-contact-rail__call{
  background:#fff;color:#075b40;border:1.5px solid #118755
}
.ct-contact-rail__zalo{
  background:#ff5a1f;color:#fff;border:1.5px solid #ff5a1f
}

/* Homepage blue Zalo FAB is replaced by the contact rail on desktop/tablet. */
@media (min-width:768px){
  .ct150-zaloFab{display:none!important}
}

@media (min-width:768px) and (max-width:1023px){
  .ct-wc-bubble{left:14px;bottom:16px}
  .ct-wc-panel{
    left:14px;bottom:16px;
    width:min(390px, calc(100vw - 28px));
    height:min(560px, calc(var(--wc-vv, 100dvh) - 32px));
    max-height:min(560px, calc(var(--wc-vv, 100dvh) - 32px))
  }
  .ct-contact-rail{right:14px;bottom:16px;gap:10px}
  .ct-contact-rail a{min-height:44px;padding:0 12px;font-size:12.5px}
}

@media (max-width:767px){
  .ct-contact-rail{display:none!important}
  .ct-wc-bubble{
    left:12px;right:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:65
  }
  .ct-wc-panel{
    left:10px;right:10px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));
    height:min(640px, calc(var(--wc-vv, 100dvh) - 88px - env(safe-area-inset-bottom,0px)));
    max-height:calc(var(--wc-vv, 100dvh) - 88px - env(safe-area-inset-bottom,0px));
    border-radius:18px
  }
  body.ct162-detail .ct-wc-bubble{
    bottom:calc(88px + 12px + env(safe-area-inset-bottom,0px))
  }
  body.ct162-detail .ct-wc-panel{
    bottom:calc(88px + env(safe-area-inset-bottom,0px));
    height:min(640px, calc(var(--wc-vv, 100dvh) - 100px - env(safe-area-inset-bottom,0px)));
    max-height:calc(var(--wc-vv, 100dvh) - 100px - env(safe-area-inset-bottom,0px))
  }
  body.ct162-detail:has(#ctCookieConsent:not([hidden])) .ct-wc-bubble{
    bottom:calc(196px + env(safe-area-inset-bottom,0px))
  }
  body.ct162-detail:has(#ctCookieConsent:not([hidden])) .ct-wc-panel{
    bottom:calc(196px + env(safe-area-inset-bottom,0px));
    max-height:calc(var(--wc-vv, 100dvh) - 208px - env(safe-area-inset-bottom,0px));
    height:min(640px, calc(var(--wc-vv, 100dvh) - 208px - env(safe-area-inset-bottom,0px)))
  }
  body:not(.ct162-detail):has(#ctCookieConsent:not([hidden])) .ct-wc-bubble{
    bottom:calc(184px + env(safe-area-inset-bottom,0px))
  }
  body:not(.ct162-detail):has(#ctCookieConsent:not([hidden])) .ct-wc-panel{
    bottom:calc(172px + env(safe-area-inset-bottom,0px));
    max-height:calc(var(--wc-vv, 100dvh) - 184px - env(safe-area-inset-bottom,0px));
    height:min(640px, calc(var(--wc-vv, 100dvh) - 184px - env(safe-area-inset-bottom,0px)))
  }
}


/* ===== V181 mobile reliability ===== */
.ct-wc-bubble{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(max-width:767px){
  .ct-wc-bubble{z-index:112!important}
  .ct-wc-panel{z-index:130!important}
  body.ct162-detail .ct-wc-bubble{left:12px!important;right:auto!important;bottom:calc(102px + env(safe-area-inset-bottom,0px))!important}
  body.ct162-detail .ct-wc-panel{
    left:8px!important;right:8px!important;bottom:calc(94px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;height:min(650px,calc(var(--wc-vv,100dvh) - 112px - env(safe-area-inset-bottom,0px)))!important;
    max-height:calc(var(--wc-vv,100dvh) - 112px - env(safe-area-inset-bottom,0px))!important
  }
  body.ct162-list .ct-wc-bubble{left:12px!important;right:auto!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  body.ct162-list .ct-wc-panel{
    left:8px!important;right:8px!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;z-index:130!important
  }
}