:root{
  --mb-accent:#e53935;
  --mb-dark:#1f2430;
  --mb-muted:#7a8599;
  --mb-panel:#ffffff;
  --mb-shadow:0 14px 34px rgba(0,0,0,.18);
  --mb-radius:14px;
  --mb-gap:12px;
  --mb-item-h:64px;
}

.mb-cta-widget{position:fixed; right:10px; bottom:70px; z-index:9999; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.mb-cta-widget.cta-bottom-left{left:20px; right:auto}
.mb-cta-widget *{box-sizing:border-box}

/* Panel */
.mb-cta-widget .def-content{width:320px; max-width:calc(100vw - 32px); background:var(--mb-panel); border-radius:var(--mb-radius); box-shadow:var(--mb-shadow); overflow:hidden; transform:translateY(10px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; margin-bottom:12px}
.mb-cta-widget.open .def-content{transform:translateY(0); opacity:1; pointer-events:auto}

/* Header */
.mb-cta-widget .def-header{background:var(--mb-accent); color:#fff; font-weight:600; padding:12px 44px 12px 14px; position:relative}
.mb-cta-widget .def-header .close-icon{position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;  color:#fff; border:0; cursor:pointer}

/* Item row */
.mb-cta-widget .item a{display:flex; align-items:center; gap:var(--mb-gap); padding:10px 14px; height:var(--mb-item-h); text-decoration:none; color:var(--mb-dark); border-bottom:1px solid #eef1f5}
.mb-cta-widget .item:last-child a{border-bottom:0}
.mb-cta-widget .item .img{width:40px;height:40px;border-radius:50%; display:grid; place-items:center; background:#f3f6fb; flex:0 0 40px}
.mb-cta-widget .item .img img, .mb-cta-widget .item .img svg{width:22px;height:22px;object-fit:contain}
.mb-cta-widget .detail b{display:block; font-size:15px; line-height:1.1}
.mb-cta-widget .detail .arcu-item-subtitle{display:block; color:var(--mb-muted); font-size:13px}
.mb-cta-widget .item.zalo .img{
  background: #0165f8;
}
.mb-cta-widget .item.phone .img{
  background: #4EB625;
}
.mb-cta-widget .item.messenger .img{
  background: #00adff;
}
.mb-cta-widget .item.sms .img{
  background: #0296ff;
}
/* Floating button */
.mb-cta-widget .out-circle{padding: 8px;position:relative; width:64px; height:64px; border-radius:50%; background:var(--mb-accent); color:#fff; box-shadow:var(--mb-shadow); display:grid; place-items:center; cursor:pointer; user-select:none}
.mb-cta-widget.open .out-circle{float: right;}
.mb-cta-widget .out-circle .main-icon{display:grid; place-items:center; text-align:center}
.mb-cta-widget .out-circle .main-icon svg,.mb-cta-widget .out-circle .main-icon img{width: 20px}
.mb-cta-widget .out-circle .main-icon p{margin:0; font-size:11px; letter-spacing:.2px;color: #fff}

.mb-cta-widget .pregan{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(229,57,53,.35); animation:mb-ping 1.8s linear infinite}
.mb-cta-widget .pregan:nth-child(1){animation-delay:0s}
.mb-cta-widget .pregan:nth-child(2){animation-delay:.6s}
@keyframes mb-ping{from{transform:scale(.9); opacity:1} to{transform:scale(1.6); opacity:0}}

.mb-cta-widget .ser-icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.mb-cta-widget .process{display:flex; gap:5px; transition:transform .5s ease}
.mb-cta-widget .ser-icon .item{display:grid; place-items:center}

.mb-cta-widget .out-circle .close-icon{position:absolute; width:64px; height:64px; border-radius:50%; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.12); border:0; display:none}
.mb-cta-widget.open .out-circle .close-icon{display:block}

/* States */
.mb-cta-widget .element.unsee{display:none}
.mb-cta-widget.open .element.unsee{display:block}
.mb-cta-widget.open .out-circle >*{display: none;!important}
.mb-cta-widget.open .out-circle >button.close-icon.element.unsee{display: flex!important;align-items: center;justify-content: center;margin: 0!important;width:64px; height:64px;background:var(--mb-accent);}
/* Mobile */
@media (max-width:480px){
  .mb-cta-widget{right:16px; bottom:16px}
  .mb-cta-widget.cta-bottom-left{left:16px}
  .mb-cta-widget .def-content{width:92vw}
}
