/* =============================================================
   ZALO CHAT WIDGET — overrides for Zalo OA SDK
   Lazy loaded via preload trick (only when Zalo is configured)
   ============================================================= */
.za-chat__wrapper {
  bottom: 160px !important; right: 16px !important;
  border-radius: 18px !important; overflow: hidden !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1) !important;
  border: none !important;
}
.box__top      { background: linear-gradient(135deg, #0068FF 0%, #0050d0 100%) !important; border-radius: 0 !important; }
.box__header   { padding: 12px 14px !important; }
.oa-name       { font-weight: 700 !important; font-size: .95rem !important; }
.box__welcome  { background: linear-gradient(135deg, #0068FF 0%, #0050d0 100%) !important; padding: 20px 20px 28px !important; }
.box__welcome h1 { font-size: 1.5rem !important; font-weight: 800 !important; margin-bottom: 4px !important; }
.box__welcome h3 { font-size: .9rem !important; font-weight: 400 !important; opacity: .88 !important; }
.box__body     { background: #f7f9fc !important; }
.bounding      { padding: 20px 16px !important; }
.text-hint-welcome { font-size: .9rem !important; color: #555 !important; margin-bottom: 14px !important; text-align: center; }
.zbtn          { border-radius: 10px !important; font-weight: 700 !important; font-size: .9rem !important; padding: 13px 16px !important; margin-bottom: 8px !important; transition: opacity .2s !important; }
.zbtn-primary  { background: #0068FF !important; color: #fff !important; border: none !important; }
.zbtn-primary:hover { opacity: .88 !important; }
.zbtn-normal   { background: #fff !important; color: #333 !important; border: 1.5px solid #e0e7ef !important; }
.zbtn-normal:hover  { background: #f0f4ff !important; }
.box__footer .footer-wrapper { padding: 8px 14px !important; background: #fff !important; border-top: 1px solid #edf2f7 !important; }
.language-change-wrapper { gap: 6px !important; }
.zbtn-info, .zbtn-clear  { padding: 5px 12px !important; border-radius: 6px !important; font-size: .78rem !important; font-weight: 600 !important; }
.zalo-chat-widget { bottom: 88px !important; right: 16px !important; }

@media (max-width: 640px) {
  .za-chat__wrapper {
    right: 0 !important; left: 0 !important;
    width: 100% !important; bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important; max-height: 80vh !important;
  }
}