/* base */
.jpfc-list{list-style:none;margin:0;padding:0}
.jpfc-item{position:relative;transform:translateY(40px);opacity:0;animation:jpfc-in .6s cubic-bezier(.2,.8,.2,1) forwards}
.jpfc-item:nth-child(1){animation-delay:110ms}
.jpfc-item:nth-child(2){animation-delay:220ms}
.jpfc-item:nth-child(3){animation-delay:330ms}
@keyframes jpfc-in{to{transform:translateY(0);opacity:1}}

.jpfc-btn{
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  background: var(--jpfc-btn-bg, #fff); /* màu per-button */
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  transition:transform .2s ease, opacity .2s ease;
}
.jpfc-btn:hover{transform:translateY(-2px) scale(1.03);opacity:1}
.jpfc-ico{width:60%;height:60%}
.jpfc-pulse::after{content:'';position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(0,0,0,.12);animation:jpfc-pulse 1.8s infinite}
@keyframes jpfc-pulse{0%{box-shadow:0 0 0 0 rgba(0,0,0,.18)}70%{box-shadow:0 0 0 16px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

/* ===== Badge Hotline (chung) ===== */
.jpfc-item > .jpfc-btn.jpfc-hotline + .jpfc-badge{
  position:absolute; top:55%; transform:translateY(-50%);
  display:inline-flex; align-items:center; white-space:nowrap;
  font-weight:700; font-size:var(--fs,13px);
  padding:var(--pv,6px) var(--ph,12px);
  border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.14);
}
/* Ép Safari dùng màu text từ inline style (color) của badge */
.jpfc-badge,
.jpfc-badge--force{
  color: inherit; /* dùng inline color trước */
  -webkit-text-fill-color: currentColor !important; /* Safari bắt buộc dùng màu chữ hiện tại */
  -webkit-text-stroke: 0 transparent; /* tránh viền giả làm thay đổi màu */
}

.jpfc-left  .jpfc-item > .jpfc-btn.jpfc-hotline + .jpfc-badge { left: calc(var(--jpfc-size) + 10px); }
.jpfc-right .jpfc-item > .jpfc-btn.jpfc-hotline + .jpfc-badge { right:calc(var(--jpfc-size) + 10px); }

/* Kiểu badge */
.jpfc-badge--bubble::before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:999px;background:inherit}
.jpfc-left  .jpfc-badge--bubble::before{left:-7px}
.jpfc-right .jpfc-badge--bubble::before{right:-7px}

.jpfc-badge--dot::before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:999px;background:inherit;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.jpfc-left  .jpfc-badge--dot::before{left:-12px}
.jpfc-right .jpfc-badge--dot::before{right:-12px}

.jpfc-badge--triangle::before{content:"";position:absolute;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:inherit}
.jpfc-left  .jpfc-badge--triangle::before{left:-3px}
.jpfc-right .jpfc-badge--triangle::before{right:-3px}

.jpfc-badge--plain{ /* no tail */ }
.jpfc-badge--rounded-rect{ border-radius:10px }

/* optional glow cho hotline */
.jpfc-btn.jpfc-hotline{ box-shadow:0 0 0 3px rgba(0,136,255,.10),0 8px 24px rgba(0,0,0,.15) }

/* ===== Mobile trigger (ẩn/hiện) ===== */
/* ===== Mobile trigger (ẩn/hiện) ===== */
.jpfc-trigger{
  position:fixed;
  /* DÙNG BIẾN RIÊNG: nếu không set thì fallback công thức cũ */
  bottom: var(--jpfc-trigBottom, calc(var(--jpfc-bottom,24px) + var(--jpfc-size,56px)/2 - var(--jpfc-trig,36px)/2));
  width:var(--jpfc-trig,36px);
  height:var(--jpfc-trig,36px);
  display:none; align-items:center; justify-content:center;
  background: var(--jpfc-trig-bg, #fff);
  color: var(--jpfc-trig-arrow, #111);
  z-index:99998; cursor:pointer;
  transition:filter .2s ease, box-shadow .2s ease, background .2s ease;
}
/* Lấy theo side của contact nhưng offset riêng */
.jpfc-trigger.jpfc-left  { left:  var(--jpfc-trigSide, 0);  border-radius:0 999px 999px 0; }
.jpfc-trigger.jpfc-right { right: var(--jpfc-trigSide, 0);  border-radius:999px 0 0 999px; }

/* icon mũi tên */
.jpfc-trigger svg { width:18px; height:18px; display:block; }
.jpfc-trigger svg path { fill: currentColor; }

/* 5 style */
.jpfc-trig--solid{ box-shadow:0 8px 24px rgba(0,0,0,.15); }

.jpfc-trig--outline{
  background: transparent;
  border:1px solid var(--jpfc-trig-arrow, #111);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.jpfc-trig--glass{
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.jpfc-trig--ghost{
  background: transparent;
  box-shadow:none;
}

.jpfc-trig--neo{
  background: var(--jpfc-trig-bg, #fff);
  box-shadow:
    6px 6px 16px rgba(0,0,0,.12),
    -6px -6px 16px rgba(255,255,255,.9);
}

/* hiển thị trên mobile */
@media (max-width: 768px){
  .jpfc-trigger{ display:flex; }
  .jpfc-wrap{ transition:transform .25s ease; }
  .jpfc-left.jpfc-collapsed{  transform:translateX(-300%); }
  .jpfc-right.jpfc-collapsed{ transform:translateX( 300%);  }
  .jpfc-wrap.jpfc-collapsed .jpfc-badge{
    opacity:0; visibility:hidden; pointer-events:none;
    transform: translateY(-50%) scale(.98);
  }
}

/* wrap collapsed: ẩn HOÀN TOÀN khỏi màn hình + không nhận click */
.jpfc-wrap.jpfc-collapsed{ pointer-events:none; transition:transform .25s ease; }
@media (max-width: 768px){
  .jpfc-trigger{ display:flex; }
  .jpfc-wrap{ transition:transform .25s ease; }
  .jpfc-left.jpfc-collapsed{  transform:translateX(-300%); }
  .jpfc-right.jpfc-collapsed{ transform:translateX( 300%);  }
  .jpfc-wrap.jpfc-collapsed .jpfc-badge{
    opacity:0; visibility:hidden; pointer-events:none;
    transform: translateY(-50%) scale(.98);
    transition: opacity .2s ease;
  }
  /* mobile-only items */
  .jpfc-mobile-only{ display:list-item; }

  .jpfc-closebtn{
    width:var(--jpfc-size,56px);
    height:var(--jpfc-size,56px);
    padding:0;
    border:none;
    appearance:none;
    background:#fff !important;
    border-radius:999px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    display:flex; align-items:center; justify-content:center;
    line-height:0;
    cursor:pointer;
    position:relative;
    z-index:1;
  }
  .jpfc-closebtn::before,
  .jpfc-closebtn::after{ content:none !important; display:none !important; }
  .jpfc-closebtn .jpfc-close-ico{ display:block !important; width:20px !important; height:20px !important; pointer-events:none; }
  .jpfc-closebtn .jpfc-close-ico path{ stroke:#D93025 !important; stroke-width:2.5 !important; stroke-linecap:round !important; fill:none !important; }
  .jpfc-closebtn:hover .jpfc-close-ico path{ stroke:#b2251d !important; }
}
@media (min-width: 769px){
  .jpfc-mobile-only{ display:none; }
}