:root{
  --bs-top: 50vh;
  --bs-right: 12px;
  --bs-panel-w: 300px;
}

/* FAB (kính lúp gọn, glass) */
.bs-find-fab{
  position: fixed !important;
  right: var(--bs-right);
  top: calc(var(--bs-top) - 22px);
  z-index: 2147483647;
  width: 44px; height: 44px; border-radius: 22px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(25,25,25,.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.bs-find-fab:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.42); }
.bs-find-fab:active{ transform: translateY(0); }
.bs-find-fab svg{ width: 22px; height: 22px; display:block; }
.bs-fab-bounce{ animation: bs-bounce .45s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes bs-bounce{ 0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)} }

/* Panel */
.bs-find-panel{
  position: fixed;
  right: calc(var(--bs-right) + 52px);
  top: calc(var(--bs-top) - 26px);
  z-index: 2147483647;
  width: min(var(--bs-panel-w), calc(100vw - 130px));
  display: flex; gap: 6px; align-items: center;
  padding: 8px;
  background: rgba(22,22,22,.96); color: #fff;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.46);
  transform: translateX(10px) scale(.98);
  opacity: 0; pointer-events: none;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.bs-find-panel.open{
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.bs-find-input{
  flex: 1; min-width: 120px;
  background: transparent; color: #fff; outline: none;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 8px;
}

/* Highlight */
.bs-mark{ background: #ffeb3b; border-radius: 3px; padding: 0 .1em; }
.bs-current{ outline: 2px solid #ff9800; background: #fff176; }

/* Ẩn widget khi edit page */
body[class*="edit"] .bs-find-fab,
body[class*="edit"] .bs-find-panel{ display: none !important; }

/* Mobile */
@media (max-width: 768px){
  :root{ --bs-top: 45vh; --bs-right: 10px; --bs-panel-w: 86vw; }
  .bs-find-fab{ width: 48px; height: 48px; }
}