/* Callnow v3 (Contact FAB) - port tu ecommerce-dev. Mau thuong hieu (--cf-brand-*) duoc khai bao inline trong template. */
:root{
  --cf-side:30px; --cf-bottom:15vh; --cf-bottom-tight:16px;
  --cf-gap-round:32px; --cf-gap-square:2px;
  --cf-pulse-mid:58px; --cf-pulse-max:104px;
  --cf-square-corner:12px;
  --cf-label-size:14px; --cf-label-size-hover:16px;

  --cf-glow-border: 8px;

  --cf-size:76px; --cf-icon-scale:.64; --cf-overlap-round:calc(var(--cf-size)*.42);
  --cf-overlap-square: var(--cf-square-corner);
  --cf-fab-size:66px; /* FAB size mặc định (giữ nguyên theo yêu cầu) */

  /* Số item trong stack — được ghi đè inline từ PHP (count($items)).
     Dùng để tính chiều cao stack và co lại cho vừa màn hình. */
  --cf-count: 5;
  /* Sàn kích thước: co để vừa màn hình nhưng không bao giờ nhỏ hơn mức bấm được. */
  --cf-size-min: 34px;
}
.cf--square {
  --cf-side:0;
}

/* -------- Size presets --------
   Preset chỉ khai báo kích thước MONG MUỐN (--cf-size-pref).
   Kích thước THẬT (--cf-size) được tính bên dưới để stack luôn vừa màn hình.
   GIỮ NGUYÊN kích thước FAB ( --cf-fab-size ) để tránh quá nhỏ.
*/
.cf--size-lg { --cf-size-pref:76px; --cf-fab-size:66px; }
/* md giảm hơn trước: 64px -> 56px; FAB giữ nguyên 56px */
.cf--size-md { --cf-size-pref:56px; --cf-fab-size:56px; }
/* sm giảm mạnh: 52px -> 40px; FAB giữ nguyên 48px */
.cf--size-sm { --cf-size-pref:40px; --cf-fab-size:48px; }

/* Mặc định: kích thước thật = kích thước mong muốn (dock ngang & FAB không bị chi phối
   bởi chiều cao stack nên giữ nguyên preset). */
.cf-quick, .cf-drawer { --cf-size: var(--cf-size-pref, 76px); --cf-overlap-round: calc(var(--cf-size)*.42); }

/* -------- Stack dọc: ép vừa chiều cao khả dụng --------
   Stack là position:fixed, bottom:var(--cf-bottom), mọc NGƯỢC LÊN, nên chiều cao cần
   = count*size + (count-1)*gap. Với 5+ số Zalo ở preset lg (7*76 + 6*32 = 724px) nó
   vượt quá viewport và tràn khỏi đỉnh màn hình — đây là chỗ layout "vỡ".
   Xử lý: co GAP trước (khoảng cách chỉ để hở vòng glow), rồi mới co ICON, và không
   bao giờ nhỏ hơn --cf-size-min để vẫn bấm được. Không dùng overflow:auto vì sẽ cắt
   mất vòng glow và nhãn hover (chúng tràn ra ngoài khung theo thiết kế). */
.cf-quick:not(.cf--bottom){
  --cf-avail: calc(100vh - var(--cf-bottom) - 16px);
  --cf-gap: min(var(--cf-gap-pref, 32px), calc(var(--cf-avail) * .05));
  --cf-size: max(
    var(--cf-size-min),
    min(
      var(--cf-size-pref, 76px),
      calc((var(--cf-avail) - (var(--cf-count) - 1) * var(--cf-gap)) / var(--cf-count))
    )
  );
  --cf-overlap-round: calc(var(--cf-size)*.42);
}
.cf--square .cf-quick:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf--square .cf-quick:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label{
  left: 0 !important
}
.cf--square.cf--left .cf-label {
  margin-left: 0 !important;
  padding: 0 18px 0 calc(var(--cf-size) - var(--cf-glow-border)) !important;
}

/* STACK */
.cf-quick{ position:fixed; z-index:9999; display:flex; flex-direction:column; bottom:var(--cf-bottom); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.cf--left{ left:var(--cf-side); } .cf--right{ right:var(--cf-side); }
.cf--bottom{ left:var(--cf-side); right:var(--cf-side); bottom:var(--cf-bottom-tight)!important; flex-direction:row; justify-content:center; gap: var(--cf-gap-square); }
.cf--round{ --cf-gap-pref: var(--cf-gap-round); gap: var(--cf-gap, var(--cf-gap-round)); }
.cf--square{ --cf-gap-pref: var(--cf-gap-square); gap: var(--cf-gap, var(--cf-gap-square)); }
.cf--right .cf-item{ flex-direction:row-reverse; }

.cf-item{ display:flex; align-items:center; gap:0; text-decoration:none; }
.cf-icon{ width:var(--cf-size); height:var(--cf-size); display:grid; place-items:center; position:relative; overflow:visible; background: var(--cf-item-bg, var(--cf-brand-bg));position: relative; z-index: 9999; }
.cf-icon img{ width:calc(var(--cf-size)*var(--cf-icon-scale)); height:calc(var(--cf-size)*var(--cf-icon-scale)); object-fit:contain; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

.cf-label{
  background: var(--cf-item-bg, var(--cf-brand-bg)); color:#fff; height:var(--cf-size);
  display:flex; align-items:center; white-space:nowrap; font-weight:600; line-height:1;
  font-size:var(--cf-label-size);
  opacity:0; max-width:0; padding-inline:0; overflow:hidden;
  transform:translateX(-14px);
  transition:opacity .22s, transform .22s, max-width .22s, padding-inline .22s, font-size .22s;
  box-shadow:none; pointer-events:auto;
}
.cf-quick:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf-quick:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label{
  opacity:1; transform:translateX(0); max-width:420px; padding: 0 18px 0 calc(var(--cf-size) + var(--cf-glow-border)); font-size:var(--cf-label-size-hover);position: absolute;left: 20px;z-index: 999;
}
.cf--bottom .cf-label{ display:none!important; }

.cf-quick.cf--left.cf--round.cf--size-md:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label,
.cf-quick.cf--left.cf--round.cf--size-md:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label, .cf-quick:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
  left: 35px;
}

.cf-quick.cf--left.cf--round.cf--size-lg:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label,
.cf-quick.cf--left.cf--round.cf--size-lg:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label, .cf-quick:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
  left: 45px;
}

/* round glow */
.cf--round .cf-icon{ border-radius:50%; box-shadow:0 12px 28px rgba(0,0,0,.18), 0 0 0 var(--cf-glow-border) var(--cf-brand-glow-soft); }
.cf--round .cf-label{ border-radius:999px; margin-left:calc(-1*var(--cf-overlap-round)); }
.cf--right.cf--round .cf-label{ margin-right:calc(-1*var(--cf-overlap-round)); margin-left:0; }
.cf--round .cf-icon::before,.cf--round .cf-icon::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  pointer-events:none; box-shadow:0 0 0 0 var(--cf-brand-glow);
  animation:cf-ring 2.2s ease-out infinite; opacity:.9;
}
.cf--round .cf-icon::after{ animation-delay:.8s; box-shadow:0 0 0 0 var(--cf-brand-glow-soft); }

/* square */
.cf--square .cf-icon{ border-radius:var(--cf-square-corner); box-shadow:0 10px 24px rgba(0,0,0,.16); }
.cf--square .cf-icon::before,.cf--square .cf-icon::after{ display:none!important; }
.cf--square.cf--left  .cf-icon{ border-radius:0 var(--cf-square-corner) var(--cf-square-corner) 0; }
.cf--square.cf--right .cf-icon{ border-radius:var(--cf-square-corner) 0 0 var(--cf-square-corner); }
.cf--square.cf--left  .cf-label{ border-radius:0 var(--cf-square-corner) var(--cf-square-corner) 0; margin-left:var(--cf-square-corner); }
.cf--square.cf--right .cf-label{ border-radius:var(--cf-square-corner) 0 0 var(--cf-square-corner); margin-right:var(--cf-square-corner); margin-left:0; }

.cf-quick.cf--right:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf-quick.cf--right:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
    padding: 0 calc(var(--cf-size) - var(--cf-glow-border)) 0 18px;
    font-size: var(--cf-label-size-hover);
    left: unset;
    right: 30px !important;
}

.cf-quick.cf--right.cf--round.cf--size-md:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf-quick.cf--right.cf--round.cf--size-md:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
    right: 40px !important;
}

.cf-quick.cf--right.cf--round.cf--size-lg:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf-quick.cf--right.cf--round.cf--size-lg:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
    right: 50px !important;
}

.cf-quick.cf--right.cf--square.cf--size-sm:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf-quick.cf--right.cf--square.cf--size-sm:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
    right: 0px !important;
}
.cf-quick.cf--right.cf--square.cf--size-md:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf-quick.cf--right.cf--square.cf--size-md:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
    right: 5px !important;
}

.cf-quick.cf--right.cf--square.cf--size-lg:not(.cf--bottom) .cf-item:has(.cf-icon:hover) .cf-label,
.cf-quick.cf--right.cf--square.cf--size-lg:not(.cf--bottom) .cf-item:has(.cf-label:hover) .cf-label {
    right: 10px !important;
}

/* FAB (giữ logic & kích thước FAB như cũ) */
.cf-drawer{ position:fixed; z-index:10000; bottom:var(--cf-bottom-tight); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.cf-drawer.cf--left{ left:var(--cf-side); } .cf-drawer.cf--right{ right:var(--cf-side); }
.cf-toggle{ position:absolute; opacity:0; pointer-events:none; }
.cf-fab{
  position:relative; width:var(--cf-fab-size); height:var(--cf-fab-size);
  border-radius:50%; background: var(--cf-brand-bg); color:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.cf-fab::before,.cf-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 var(--cf-brand-glow); animation:cf-ring 2.2s ease-out infinite; opacity:.9;
}
.cf-fab::after{ animation-delay:.8s; box-shadow:0 0 0 0 var(--cf-brand-glow-soft); }
.cf-fab .fab-icon{ position:absolute; width:58%; height:58%; display:grid; place-items:center; }
.cf-fab .fab-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.fab-dyn{ transition: transform .25s ease, opacity .25s ease; }
.fab-dyn.in{transform:translateX(0);opacity:1;}
.fab-dyn.prep{transform:translateX(14px);opacity:0;}
.fab-dyn.out{transform:translateX(-14px);opacity:0;}
.fab-close{ opacity:0; transform:scale(.6) rotate(-90deg); transition:opacity .2s, transform .2s; }
.cf-toggle:checked + .cf-fab{ background:#ef4444; }
.cf-toggle:checked + .cf-fab .fab-dyn{ opacity:0; transform:scale(.6); }
.cf-toggle:checked + .cf-fab .fab-close{ opacity:1; transform:scale(1) rotate(0deg); }
.cf-toggle:checked + .cf-fab::before, .cf-toggle:checked + .cf-fab::after{ display:none; }

.cf-panel{
  position:absolute; bottom:calc(100% + 12px); left:0;
  background:#fff; border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.22);
  padding:12px; min-width:280px; opacity:0; visibility:hidden; pointer-events:none;
  transform-origin:bottom left; transform:translateY(10px) scale(.96);
  transition:opacity .22s, transform .22s, visibility 0s linear .22s;
}
.cf-drawer.cf--right .cf-panel{ left:auto; right:0; transform-origin:bottom right; }
.cf-toggle:checked ~ .cf-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition:opacity .22s, transform .22s, visibility 0s; }

.cf-list{ display:flex; flex-direction:column; gap:8px; overflow:visible; max-height:none; }
.cf-row{ display:flex; align-items:center; gap:12px; text-decoration:none; background:#fff; border-radius:12px; padding:10px 12px; transition:background .18s; }
.cf-row:hover{ background: rgba(0,0,0,.05); }
.cf-row-icon{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: var(--cf-item-bg, var(--cf-brand-bg)); }
.cf-row-icon img{ width:70%; height:70%; display:block; }
.cf-row-text{ color:#111; font-weight:700; font-size:15px; }

/* ========== Gom nhóm nút cùng type (>=3 liên tiếp, tổng >4) ==========
   Nút gom hiển thị icon đại diện + badge số lượng; bấm để xổ các nút con
   NGAY TẠI CHỖ (in-flow), đẩy các nút khác giãn ra. Toggle bằng checkbox thuần CSS.

   Cách xổ: display none <-> flex (tức thì) + fade-in bằng opacity/transform.
   KHÔNG animate chiều cao bằng grid/max-height vì cách đó buộc overflow:hidden,
   mà overflow:hidden lại CẮT vòng glow + hiệu ứng pulse của nút con (chúng tràn ra
   ngoài khung tới ~104px) và gây giật scrollbar. display-toggle không clip gì cả. */

/* Badge số lượng, dùng chung cho stack & FAB. */
.cf-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 5px; box-sizing:border-box;
  border-radius:999px; background:#ef4444; color:#fff;
  font-size:12px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:5; pointer-events:none;
}
.cf--right .cf-badge{ right:auto; left:-4px; }

@keyframes cf-pop{ from{ opacity:0; transform:translateY(-8px) scale(.92); } to{ opacity:1; transform:none; } }

/* ----- Stack group ----- */
.cf-group{ display:flex; flex-direction:column; gap:0; }
.cf-group-toggle{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.cf-group-head{ cursor:pointer; }
/* Chevron nhỏ báo trạng thái mở/đóng (ẩn ở dock bottom vì không có nhãn). */
.cf-group-head .cf-caret{
  position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
  background:#fff; color:#333; font-size:10px; line-height:16px; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.3); z-index:5; transition:transform .2s; pointer-events:none;
}
.cf--right .cf-group-head .cf-caret{ right:auto; left:-2px; }
.cf-group-toggle:checked ~ .cf-group-head .cf-caret{ transform:rotate(180deg); }

/* ĐÓNG: bỏ hẳn khỏi luồng -> không chiếm chỗ, không clip, không scrollbar. */
.cf-group-body{ display:none; }
.cf-group-toggle:checked ~ .cf-group-body{
  display:block; padding-top:var(--cf-gap, var(--cf-gap-round));
  /* KHÔNG set overflow -> visible -> vòng glow của nút con hiển thị đầy đủ. */
  animation:cf-pop .24s ease both;
}
/* Các nút con xếp dọc + giãn cách bằng chính --cf-gap của stack. */
.cf-group-body-inner{
  display:flex; flex-direction:column; gap:var(--cf-gap, var(--cf-gap-round));
}
/* Nút con: tắt hiệu ứng pulse (::before/::after) để 3-5 vòng lan tỏa không chồng lên
   nhau gây rối; vòng glow tĩnh vẫn giữ (không bị clip nữa nhờ overflow visible).
   Nút cha vẫn pulse bình thường. */
.cf-group-body .cf-icon::before,
.cf-group-body .cf-icon::after{ display:none !important; }

/* Dock bottom (thanh ngang): thân nhóm bung LÊN TRÊN dạng popover để không tràn đáy. */
.cf--bottom .cf-group{ position:relative; }
.cf--bottom .cf-group-head .cf-caret{ display:none; }
.cf--bottom .cf-group-toggle:checked ~ .cf-group-body{
  position:absolute; left:50%; bottom:calc(100% + var(--cf-gap, var(--cf-gap-round)));
  transform:translateX(-50%); padding-top:0; width:max-content;
}

/* ----- FAB row group ----- */
.cf-rowgroup{ display:flex; flex-direction:column; }
.cf-rowgroup-toggle{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.cf-rowgroup-head{ cursor:pointer; }
.cf-row-icon{ position:relative; }
.cf-badge--row{ top:-2px; right:-2px; min-width:18px; height:18px; font-size:11px; }
.cf-rowgroup-caret{ margin-left:auto; color:#888; transition:transform .2s; }
.cf-rowgroup-toggle:checked ~ .cf-rowgroup-head .cf-rowgroup-caret{ transform:rotate(180deg); }
.cf-rowgroup-body{ display:none; }
.cf-rowgroup-toggle:checked ~ .cf-rowgroup-body{
  display:flex; flex-direction:column; gap:8px; padding-top:8px;
  animation:cf-pop .2s ease both;
}
.cf-rowgroup-body-inner{
  display:flex; flex-direction:column; gap:8px;
  padding-left:12px; border-left:2px solid rgba(0,0,0,.08); margin-left:17px;
}

@keyframes cf-ring{
  0%{ box-shadow:0 0 0 0 var(--cf-brand-glow); opacity:.75; }
  60%{ box-shadow:0 0 0 var(--cf-pulse-mid) transparent; opacity:.30; }
  100%{ box-shadow:0 0 0 var(--cf-pulse-max) transparent; opacity:0; }
}

/* -------- Mobile --------
   Trước đây template không có media query nào: preset lg/md giữ nguyên 76px/56px kể cả
   trên máy 360px, cộng --cf-side:30px, --cf-bottom:15vh và vòng pulse toả tới 104px
   => nút chiếm gần hết màn hình. Hạ trần kích thước cho CẢ stack lẫn FAB.
   Chỉ hạ TRẦN (--cf-size-pref): công thức ép-vừa-màn-hình ở trên vẫn chạy tiếp, nên
   nhiều item trên mobile vẫn co thêm được. */
@media (max-width: 767px){
  :root{
    --cf-side:14px;
    --cf-bottom:12vh;
    --cf-gap-round:16px;
    --cf-size-min:32px;
    --cf-pulse-mid:34px; --cf-pulse-max:60px;
    --cf-label-size:13px; --cf-label-size-hover:14px;
  }
  .cf--size-lg { --cf-size-pref:54px; --cf-fab-size:54px; }
  .cf--size-md { --cf-size-pref:46px; --cf-fab-size:50px; }
  .cf--size-sm { --cf-size-pref:38px; --cf-fab-size:44px; }

  /* Panel FAB không được rộng hơn màn hình. */
  .cf-panel{ min-width:0; width:calc(100vw - 2*var(--cf-side) - 8px); max-width:320px; }
  .cf-row-icon{ width:32px; height:32px; }
  .cf-row-text{ font-size:14px; }
}