/* EO action bar — xem shared/eo-action-bar.js. Màu lấy theo token của từng mẫu (--c-accent…), có giá trị dự phòng. */
:root { --eo-ab-h: 64px; --eo-ab-safe: env(safe-area-inset-bottom, 0px); }

.eo-actionbar { display: none; }
.eo-float-zalo { display: none; }

.eo-ab-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 10px;
  border-radius: 12px; border: 0; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  white-space: nowrap; line-height: 1;
}
.eo-ab-call { background: var(--eo-ab-call-bg, #ecfdf5); color: var(--eo-ab-call-fg, #065f46); }
.eo-ab-zalo { background: #eaf2ff; color: #0050c8; }
.eo-ab-cta  { background: var(--eo-ab-cta-bg, var(--c-accent, #0b5ed7)); color: var(--eo-ab-cta-fg, #fff); }

.eo-totop {
  position: fixed; right: 16px; bottom: 24px; z-index: 890; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--eo-ab-cta-bg, var(--c-accent, #0b5ed7)); color: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.eo-totop.visible { opacity: 1; pointer-events: auto; transform: none; }

/* ── Mobile / tablet: 1 thanh dính đáy, mọi trang cùng vị trí ── */
@media (max-width: 1023.98px) {
  html.eo-ab body { padding-bottom: calc(var(--eo-ab-h) + var(--eo-ab-safe)) !important; }
  html.eo-ab { scroll-padding-bottom: calc(var(--eo-ab-h) + var(--eo-ab-safe) + 16px); }
  .eo-actionbar {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    box-sizing: border-box; height: calc(var(--eo-ab-h) + var(--eo-ab-safe)); padding: 8px 12px calc(8px + var(--eo-ab-safe));
    background: var(--eo-ab-bg, #fff); box-shadow: 0 -4px 18px rgba(0, 0, 0, .10); transition: transform .2s;
  }
  html.eo-ab-has-zalo .eo-actionbar { grid-template-columns: 1fr 1fr 1.6fr; }
  html.eo-typing .eo-actionbar { transform: translateY(110%); }
  body:has(.nav-drawer.open) .eo-actionbar, body.nav-open .eo-actionbar { visibility: hidden; }
  .eo-totop { bottom: calc(var(--eo-ab-h) + var(--eo-ab-safe) + 12px); }
  html.eo-typing .eo-totop { display: none; }}

/* ── Desktop: CTA ở header (mẫu tự vẽ) · Zalo trái-dưới · lên-đầu phải-dưới ── */
@media (min-width: 1024px) {
  .eo-float-zalo {
    display: flex; flex-direction: column; align-items: center; gap: 4px; position: fixed; left: 24px; bottom: 24px; z-index: 890;
    text-decoration: none;
  }
  .eo-float-zalo__icon { width: 52px; height: 52px; border-radius: 50%; background: #0068ff; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 24px; box-shadow: 0 4px 16px rgba(0, 104, 255, .4); transition: transform .2s; }
  @media (hover: hover) and (pointer: fine){.eo-float-zalo:hover .eo-float-zalo__icon{ transform: scale(1.08); }}
  .eo-float-zalo__label { font-size: 11px; font-weight: 700; color: #0050c8; background: #fff; border-radius: 4px; padding: 2px 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
  .eo-totop { right: 24px; bottom: 24px; }}
@media print { .eo-actionbar, .eo-float-zalo, .eo-totop { display: none !important; }}

/* Một số theme ép mọi con trực tiếp của <body> thành position:relative + z-index:1 (vd fx.css — selector có #id nên rất mạnh)
   → khoá vị trí/lớp của component, nếu không thanh/Zalo/lên-đầu bị kéo giãn theo trang */
.eo-actionbar, .eo-float-zalo, .eo-totop { position: fixed !important; }
.eo-actionbar { z-index: 900 !important; }
.eo-float-zalo, .eo-totop { z-index: 890 !important; }
/* thông báo nổi của WooCommerce (snackbar) nằm trên thanh, không bị che */
@media (max-width: 1023.98px) {
  html.eo-ab .wc-block-components-notices__snackbar, html.eo-ab .wc-block-components-notice-snackbar-list { bottom: calc(var(--eo-ab-h) + var(--eo-ab-safe) + 8px) !important; }}