/* =========================
   xibio ScrollNav (isolated)
========================= */
:root{
  --xibio-maxw: 1200px;
  --xibio-header-h: 72px; /* JS จะอัปเดตให้อัตโนมัติ */
}

/* ช่วยให้ anchor ไม่โดน header บัง (เผื่อกรณีกด hash ปกติ) */
#intro, #popular, #partners, #insights, #service, #standard, #portfolio, #faq, #contact, #contactSummary{
  scroll-margin-top: calc(var(--xibio-header-h) + 14px);
}

/* มือถือ/จอเล็ก: อยู่ด้านบนแบบ sticky + scroll แนวนอน */
.xibio-scrollnav-wrap{
  position: sticky;
  top: calc(var(--xibio-header-h) + 8px);
  z-index: 60;
  margin: 10px 0 18px;
  pointer-events: none; /* กันคลิกทะลุ เฉพาะตัว nav เปิด pointer */
}
.xibio-scrollnav{
  pointer-events: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

.xibio-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;

  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
  border: 1px solid #e6edf5;
  background: #f8fbff;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.xibio-pill:hover{ transform: translateY(-1px); }
.xibio-pill.is-active{
  background: rgba(38,146,202,.12);
  border-color: rgba(38,146,202,.35);
}

/* Flash ตอนสกอลล์ถึง section */
.xibio-scroll-flash{
  outline: 3px solid rgba(38,146,202,.30);
  border-radius: 14px;
  transition: outline-color .2s ease;
}

/* ✅ จอใหญ่: ย้ายไป “มุมขวา” */
@media (min-width: 1240px){
  .xibio-scrollnav-wrap{
    position: fixed;
    top: calc(var(--xibio-header-h) + 12px);
    right: max(12px, calc((100vw - var(--xibio-maxw))/2 - 8px));
    margin: 0;
    width: 200px;
    pointer-events: none;
  }

  .xibio-scrollnav{
    pointer-events: auto;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    padding: 10px;
    max-height: calc(100vh - var(--xibio-header-h) - 24px);
    overflow: auto;
  }

  .xibio-pill{
    justify-content: flex-start;
    border-radius: 14px;
  }
}
@media (min-width: 1240px){
  .xibio-scrollnav-wrap{
    position: fixed !important;
    top: calc(var(--xibio-header-h) + 12px) !important;
    right: 12px !important;   /* ✅ มุมขวาจอ */
    left: auto !important;
    width: 130px;
    z-index: 9999;
    margin: 0 !important;
  }
}
.xibio-pill[aria-current="true"]{
  background: rgba(38,146,202,.12);
  border-color: rgba(38,146,202,.35);
}
/* ✅ HIDE only on phones */
@media (max-width: 767.98px){
  .xibio-scrollnav-wrap,
  #xibioScrollNav{
    display: none !important;
  }
}