:root{
  --mcb-bar-h: 76px;
  --mcb-shadow: 0 8px 30px rgba(0,0,0,.12);
}
/* Khóa scroll nền khi popup mở (dự phòng) */
html.mcb-lock,
body.mcb-lock{
  overflow-x: hidden;
	overflow-y:hidden;
  touch-action: none;
  overscroll-behavior: contain;
}



.bt-vertical-menu-trigger{
	z-index:1;
}
/* ====== MOBILE BAR ====== */
.mcb-wrapper{ padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--mcb-bar-h)); }

.mcb-bottom-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
   box-shadow: 0 -6px 18px rgba(0,0,0,.16), 0 -1px 0 rgba(0,0,0,.08) !important;
}

.mcb--flat .mcb-flat-list{
  list-style:none; margin:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; align-items:center; text-align:center;
}

.mcb-flat-btn{
  appearance:none; border:0; background:transparent; width:100%; padding:6px 2px;
  color:var(--mcb-primary,#0b3472);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:inherit;
}

/* === ICON container: chiều cao cố định, rộng tự nhiên (giữ tỉ lệ) === */
.mcb-ico{ display:inline-flex; height:22px; width:auto; align-items:center; justify-content:center; line-height:0; }
.mcb-ico > svg,
.mcb-ico > img{ display:block; height:100%; width:auto; object-fit:contain; }

/* nhãn mobile */
.mcb-flat-btn span{font-size:12px; line-height:1; color:#334155}

/* ====== POPUP (BOTTOM mặc định) ====== */
.mcb-sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.32);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:9998;
}
.mcb-sheet{
  position:fixed; left:0; right:0; z-index:9998;
  translate: 0 calc(100% + 24px);
  transition: translate .24s ease;
  display:flex; justify-content:center; padding: 0 12px;
}
.mcb-sheet__panel{
  width:min(720px,100%); background:#fff;
  border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:8px 8px 12px;
}
.mcb-sheet__handle{width:40px;height:4px;border-radius:999px;background:#e5e7eb;margin:8px auto 10px}
.mcb-sheet__title{margin:0 8px 8px;font-size:24px; color:#29b6f6 !important;}
/*.mcb-sheet__desc{margin:0 8px 10px;color:#6b7280;font-size:13px}*/
.mcb-list{display:flex;flex-direction:column;gap:8px;padding:8px}
.mcb-item{
  display:flex; align-items:center; gap:10px; padding:12px;
  border-radius:12px; background:#fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.mcb-item__main{flex:1 1 auto; min-width:0}
.mcb-item__title{font-weight:700;font-size:12px; color:#737373 !important;}
.mcb-item__sub{color:#380b0e;font-size:15px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcb-item__actions{display:flex;gap:8px;flex-wrap:wrap}
.mcb-chip{ padding:8px 10px; border-radius:10px; font-size:12px; font-weight:700; background:#f3f4f6; border:1px solid #e5e7eb; color:#111827; }
.mcb-chip--primary{ background:#eff6ff; border-color:#dbeafe; color:#1d4ed8;}
.mcb-chip--zalo{ background:#e8f0ff; border-color:#d6e3ff; color:#0b57d0;}
.mcb-chip--success{ background:#ecfdf5; border-color:#d1fae5; color:#065f46;}
.mcb-sheet-backdrop.mcb-show{opacity:1;pointer-events:auto}
.mcb-sheet.mcb-show{translate:0 0}

/* ====== DESKTOP ====== */
.mcb-desktop-toggle{
  position: fixed; z-index: 9990;
  right: 16px; bottom: 16px;
  display:none; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
  background:#fff; color:var(--mcb-primary,#0b3472);
  box-shadow: var(--mcb-shadow);
  cursor:pointer;
}
.mcb-desktop-toggle svg{width:24px;height:24px}
.mcb-desktop-label{font-weight:700; font-size:24px}

.mcb-desktop-panel{
  position: fixed; z-index: 9997;
  right: 16px; bottom: 64px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow: var(--mcb-shadow);
  padding:10px;
  max-width: min(90vw, 760px);
  max-height: min(80vh, 520px);
  overflow: auto;
}
.mcb-desktop-panel.left{ right:auto; left:16px; }

.mcb-desk-list{
  list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap;
}
.mcb-desk-list.vertical{ flex-direction:column; flex-wrap:nowrap; }
.mcb-desk-item{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-radius:10px; color:var(--mcb-primary,#0b3472); text-decoration:none;
  border:1px solid rgba(0,0,0,.06); background:#fff;
}

/* === ICON desktop: cao 20px, rộng tự nhiên === */
.mcb-desk-item .mcb-ico{
  height:20px; width:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
}
a.mcb-desk-item:hover{
	cursor:pointer;
}
.mcb-desk-item .mcb-ico > svg,
.mcb-desk-item .mcb-ico > img{
  height:100%; width:auto; object-fit:contain; display:block;
}

/* ====== POPUP CENTER MODE ====== */
.mcb-sheet.mcb-center{
  bottom:-10%;
  
  translate: 0 10%;
  padding: 0 16px;
  opacity: 0;
  transition: translate .24s ease, opacity .18s ease;
}
.mcb-sheet.mcb-center .mcb-sheet__panel{
  max-height: min(80vh, 560px);
  overflow:auto;
}
.mcb-sheet.mcb-center.mcb-show{
  opacity:1; translate: 0 -190%;
}

/* ====== RESPONSIVE ====== */
.mcb-desktop-active .mcb-bottom-bar{ display:none }