/* Sải Cánh Express — Liên hệ nhanh (v4.15.0). Xem inc/quick-contact-sce.php */
.sce-qc{
  --qc-size:48px;
  position:fixed; top:50%; left:16px; transform:translateY(-50%); z-index:9980;
  display:flex; flex-direction:column; gap:10px;
  margin:0; padding:0;
}
.sce-qc--right{ left:auto; right:16px; }

.sce-qc-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:var(--qc-size); height:var(--qc-size); border-radius:50%;
  background:var(--qc, #D60000); color:#fff !important; text-decoration:none !important;
  box-shadow:0 4px 12px -2px rgba(16,24,40,.22), 0 0 0 3px rgba(255,255,255,.9);
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.sce-qc-btn:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 10px 20px -4px rgba(16,24,40,.28), 0 0 0 3px rgba(255,255,255,.95); }
.sce-qc-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px var(--qc, #D60000); }

.sce-qc-ico{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; pointer-events:none; }
.sce-qc-svg{ width:26px; height:26px; display:block; }
.sce-qc-ico img{ width:28px; height:28px; object-fit:contain; display:block; }

/* Nhãn: máy tính = tooltip khi rê chuột */
.sce-qc-label{
  position:absolute; left:calc(100% + 12px); top:50%; transform:translate(-4px,-50%);
  padding:6px 10px; border-radius:8px; white-space:nowrap;
  background:#101828; color:#fff; font:600 13px/1.2 Inter, system-ui, sans-serif;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.sce-qc--right .sce-qc-label{ left:auto; right:calc(100% + 12px); transform:translate(4px,-50%); }
.sce-qc-btn:hover .sce-qc-label, .sce-qc-btn:focus-visible .sce-qc-label{ opacity:1; visibility:visible; transform:translate(0,-50%); }

/* Vòng sóng quanh "Gọi ngay" */
.sce-qc-btn{ isolation:isolate; }
/* v4.20.1 — vòng sóng chạy bằng transform/opacity (GPU ghép được), không vẽ lại box-shadow mỗi khung hình */
.sce-qc--pulse .sce-qc-phone::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; pointer-events:none;
  background:rgba(214,0,0,.45); will-change:transform,opacity;
  animation:sce-qc-pulse 2s ease-out infinite;
}
.sce-qc--pulse .sce-qc-phone .sce-qc-svg{ animation:sce-qc-ring 2s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes sce-qc-pulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.65); opacity:0; } }
@keyframes sce-qc-ring{ 0%,60%,100%{ transform:rotate(0);} 65%,75%{ transform:rotate(-14deg);} 70%,80%{ transform:rotate(14deg);} }
@media (prefers-reduced-motion:reduce){
  .sce-qc-btn{ transition:none; }
  .sce-qc--pulse .sce-qc-phone::before, .sce-qc--pulse .sce-qc-phone .sce-qc-svg, .sce-qc--m-bar.sce-qc--pulse .sce-qc-phone .sce-qc-ico::after{ animation:none; }
}

/* ===== Di động ===== */
@media (max-width:859px){
  /* Kiểu 1: thanh ngang cuối màn hình */
  .sce-qc--m-bar{
    top:auto; bottom:0; left:0; right:0; transform:none;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
    padding:6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background:var(--sce-white, #fff); border-top:1px solid var(--sce-line, #E5E5EA);
    box-shadow:0 -6px 20px -10px rgba(16,24,40,.18);
  }
  .sce-qc--m-bar .sce-qc-btn{
    width:auto; height:auto; min-height:52px; border-radius:10px; flex-direction:column; gap:3px;
    background:none; box-shadow:none; color:var(--sce-ink, #1D1D1F) !important;
  }
  .sce-qc--m-bar .sce-qc-btn:hover{ transform:none; box-shadow:none; }
  .sce-qc--m-bar .sce-qc-btn:active{ background:var(--sce-bg, #F5F5F7); }
  .sce-qc--m-bar .sce-qc-ico{ width:30px; height:30px; border-radius:50%; background:var(--qc); color:#fff; }
  .sce-qc--m-bar .sce-qc-svg{ width:18px; height:18px; }
  .sce-qc--m-bar .sce-qc-ico img{ width:30px; height:30px; }
  .sce-qc--m-bar .sce-qc-label{
    position:static; transform:none; opacity:1; visibility:visible; padding:0; background:none;
    color:inherit; font:600 11.5px/1.15 Inter, system-ui, sans-serif;
  }
  .sce-qc--m-bar .sce-qc-phone .sce-qc-label{ color:var(--sce-red, #D60000); }
  .sce-qc--m-bar.sce-qc--pulse .sce-qc-phone::before{ display:none; }
  .sce-qc--m-bar .sce-qc-ico{ position:relative; isolation:isolate; }
  .sce-qc--m-bar.sce-qc--pulse .sce-qc-phone .sce-qc-ico::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:rgba(214,0,0,.45);
    will-change:transform,opacity; animation:sce-qc-pulse 2s ease-out infinite; }

  body.sce-qc-m-bar{ padding-bottom:calc(66px + env(safe-area-inset-bottom)) !important; }
  /* Thanh liên hệ riêng của Trang Quốc gia trùng chức năng → ẩn, chỉ giữ 1 thanh */
  body.sce-qc-m-bar .sce-cp-dock{ display:none !important; }
  /* Đẩy huy hiệu reCAPTCHA lên khỏi thanh */
  body.sce-qc-m-bar .grecaptcha-badge{ bottom:calc(76px + env(safe-area-inset-bottom)) !important; }

  /* Kiểu 2: nút tròn góc phải-dưới */
  .sce-qc--m-bubbles{ --qc-size:46px; top:auto; transform:none; left:auto; right:12px; bottom:calc(16px + env(safe-area-inset-bottom)); gap:8px; }
  .sce-qc--m-bubbles .sce-qc-label{ display:none; }

  /* Kiểu 3: tắt trên di động */
  .sce-qc--m-off{ display:none !important; }
}

/* Trang chủ đang dùng giao diện tối */
:root[data-theme="dark"] .sce-qc-btn{ box-shadow:0 4px 12px -2px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.12); }
@media (max-width:859px){
  :root[data-theme="dark"] .sce-qc--m-bar .sce-qc-btn{ box-shadow:none; }
}
@media print{ .sce-qc{ display:none !important; } }
