/*
 * Nút tư vấn nổi – snippets/float-contact.bwt, assets/float-contact.js
 * Tab dính mép phải; mép dính cạnh màn hình để vuông, 2 góc ngoài bo --radius-md (anh huy 05/11).
 */

.fc {
  /* Khoảng cách từ đáy: mặc định 16px; trên mobile ở trang có thanh dính đáy (cao 72px) thì đặt trên thanh. */
  --fc-bottom: var(--space-4);
  position: fixed;
  right: 0;
  bottom: calc(var(--fc-bottom) + env(safe-area-inset-bottom));
  z-index: var(--z-float);
}
.tpl-product:has(.pd-actions) .fc,
.tpl-cart:has(.cart-bar) .fc,
body:has(.pcb-bar:not([hidden])) .fc { --fc-bottom: calc(72px + var(--space-3)); }

/* ---------- Rút gọn ---------- */

.fc-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 56px;
  padding: var(--space-2) 0 7px var(--space-1);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-action);
  color: var(--color-on-action);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fc-tab::-webkit-details-marker { display: none; }
.fc-tab:hover { background: var(--color-action-hover); }
.fc-tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.fc-ic {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
}
.fc-ic::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgb(255 255 255 / 0.55);
  border-radius: var(--radius-full);
  animation: fc-pulse 2.4s var(--ease-out) infinite;
}
@keyframes fc-pulse {
  from { transform: scale(0.9); opacity: 1; }
  to   { transform: scale(1.25); opacity: 0; }
}
.fc-ic-i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.fc-ic-i.is-on { opacity: 1; transform: none; }
.fc-ic-i .fc-logo { width: 24px; height: 24px; }
.fc-ic-i--phone .icon { width: 20px; height: 20px; color: var(--color-action); }

.fc-t { font-size: 0.6875rem; font-weight: var(--weight-strong); line-height: 1; }
.fc-dots { display: flex; gap: 3px; min-height: 4px; }
.fc-dots i { width: 4px; height: 4px; border-radius: var(--radius-full); background: rgb(255 255 255 / 0.45); }
.fc-dots i.is-on { background: var(--color-on-action); }

.fc-zalo { fill: var(--brand-zalo); }
.fc-mess { fill: var(--brand-messenger); }

/* ---------- Sổ ra ---------- */

.fc[open] { z-index: var(--z-overlay); } /* khi mở: nền mờ phủ cả đầu trang */
.fc[open] > .fc-tab { visibility: hidden; }
.fc[open]::before { /* nền mờ phía sau trên mobile, chạm để đóng (float-contact.js) */
  content: "";
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
}
.fc-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(288px, calc(100vw - var(--space-6)));
  max-height: calc(100vh - var(--fc-bottom) - var(--space-8));
  overflow-y: auto;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  animation: fc-in var(--duration-base) var(--ease-out);
}
@keyframes fc-in { from { opacity: 0; transform: translateX(16px); } }

.fc-hd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-action);
  color: var(--color-on-action);
}
.fc-hd p { margin: 0; min-width: 0; }
.fc-hd b { display: block; font-size: var(--text-base); }
.fc-hd small { display: block; font-size: var(--text-xs); }
.fc-x {
  flex: none;
  margin-left: auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.16);
  color: inherit;
  cursor: pointer;
}
.fc-x .icon { width: 20px; height: 20px; }
.fc-x:focus-visible { outline: 2px solid var(--color-on-action); outline-offset: 2px; }

.fc-list { margin: 0; padding: var(--space-1) 0; list-style: none; }
.fc-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}
.fc-list a:hover { background: var(--color-surface-alt); }
.fc-list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.fc-list b { display: block; font-size: var(--text-sm); font-weight: var(--weight-strong); }
.fc-list small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.fc-num { display: block; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-price); }
.fc-bi {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
}
.fc-bi .fc-logo { width: 26px; height: 26px; }
.fc-bi .icon { width: 20px; height: 20px; }
.fc-bi--call { background: var(--color-action); color: var(--color-on-action); }
.fc-bi--tech { background: var(--color-secondary); color: var(--color-on-action); }

.fc-soc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.fc-soc > span { margin-right: auto; }
.fc-soc a {
  width: var(--tap-min);
  height: var(--tap-min);
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.fc-soc a:hover { border-color: var(--color-border-strong); }
.fc-soc .icon { width: 18px; height: 18px; }

@media (min-width: 64em) {
  .fc { --fc-bottom: var(--space-5); }
  .tpl-product:has(.pd-actions) .fc,
  .tpl-cart:has(.cart-bar) .fc,
  body:has(.pcb-bar:not([hidden])) .fc { --fc-bottom: var(--space-5); }
  .fc[open]::before { display: none; }
  .fc-panel { width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-ic::after { animation: none; }
  .fc-panel { animation: none; }
  .fc-ic-i { transition: none; }
}

@media print { .fc { display: none; } }