:root{
  /* Base */
  --ibio-ink: #0f172a;     /* สีข้อความหลัก (เข้ม อ่านชัด) */
  --ibio-soft: #475569;    /* ข้อความรอง */
  --ibio-bg: #f7fafc;
  --ibio-card: #ffffff;
  --ibio-line: #e5e7eb;
  --ibio-shadow: 0 18px 40px rgba(15, 23, 42, .08);
  --ibio-radius: 18px;
  --ibio-nav-h: 72px;

  /* Brand accents (ใช้ตกแต่ง/ไฮไลต์/พื้นหลังอ่อน) */
  --ibio-cyan: #18B0D8;  /* สีแบรนด์เดิม เก็บไว้ */
  --ibio-sky:  #88D8F0;
  --ibio-green:#80C040;
  --ibio-lime: #C0D860;
  --ibio-pink: #F0A8C8;
  --ibio-blue: #2870B8;

  /* Accessible primaries (ใช้กับตัวอักษร/ลิงก์/ปุ่ม) */
  --ibio-primary: #0B6F8D;       /* เข้มขึ้น (สำหรับ text/link บนพื้นขาว) */
  --ibio-primary-700: #08586F;   /* เข้มกว่า (hover/active) */

  /* Text colors on colored backgrounds */
  --ibio-on-primary: #ffffff;    /* ตัวอักษรบนปุ่มสี primary */
}
:root{
  --ibio-link:#0B6F8D;
  --ibio-link-hover:#08586F;
  --ibio-fineprint:#334155;
}
a.ibio-oemx-link{ color:var(--ibio-link) !important; }
a.ibio-oemx-link:hover{ color:var(--ibio-link-hover) !important; }
.ibio-compare-cta__fineprint{ color:var(--ibio-fineprint) !important; }


  /* ทำ hero ให้สว่างขึ้น + ดูคลีน */
  .ibio-hero{
    background: linear-gradient(180deg, #F6FBFF 0%, #EFF7FF 100%);
  }

  /* Overlay แบบสว่าง (ไม่กดมืด) + มีโทนโลโก้ */
  .ibio-hero-overlay{
    background:
      radial-gradient(900px 520px at 18% 28%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 60%),
      radial-gradient(820px 560px at 82% 18%, rgba(136,216,240,.35) 0%, rgba(136,216,240,0) 62%), /* sky */
      radial-gradient(720px 520px at 70% 78%, rgba(128,192,64,.18) 0%, rgba(128,192,64,0) 62%),   /* green */
      radial-gradient(560px 420px at 92% 70%, rgba(240,168,200,.14) 0%, rgba(240,168,200,0) 60%),   /* pink */
      linear-gradient(90deg, rgba(246,251,255,.90) 0%, rgba(246,251,255,.42) 52%, rgba(246,251,255,.18) 100%);
  }

  /* Glow โทนโลโก้ (สดใส Modern) */
  .ibio-hero-glow{
    background: radial-gradient(circle at 30% 30%,
      rgba(24,176,216,.22),    /* cyan */
      rgba(40,112,184,.16),    /* blue */
      rgba(240,168,200,.12),   /* pink */
      rgba(128,192,64,.10),    /* green */
      rgba(255,255,255,0) 62%);
    opacity: .95;
  }

  /* ข้อความ/แบดจ์ให้เข้ม อ่านชัดบนพื้นสว่าง */
  .ibio-badge{
    color: var(--ibio-ink);
    background: rgba(255,255,255,.75);
    border:1px solid rgba(15,23,42,.10);
  }
  .ibio-lead{ color: rgba(35,31,32,.82); }

  /* ปุ่ม primary ให้พรีเมียม (ฟ้า -> ฟ้าคราม) */
  .ibio-btn-primary{
    background: linear-gradient(90deg, var(--ibio-blue), var(--ibio-cyan));
    border: 0;
    color:#fff;
    box-shadow: 0 12px 30px rgba(40,112,184,.18);
  }
  .ibio-btn-primary:hover{ filter: brightness(1.03); }
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* ✅ กันหัวข้อโดน header/scrollnav บัง */
  scroll-padding-top: calc(var(--ibio-nav-h) + 96px);
}
body{
  margin:0;
  font-family:"Noto Sans Thai", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--ibio-ink);
  background:var(--ibio-bg);
}
body.drawer-open{overflow:hidden}

a{color:inherit}
img{max-width:100%; height:auto; display:block}

/* ✅ ช่วย anchor ทุก section */
section{scroll-margin-top: calc(var(--ibio-nav-h) + 96px);}

.ibio-container{
  width:min(1200px, calc(100% - 32px));
  margin-inline:auto;
}

/* ===== Header ===== */
.ibio-header{
  position:sticky;
  top:0;
  z-index:80;
  background:#fff;
  border-bottom:1px solid var(--ibio-line);
}
.ibio-header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:72px;
  padding:12px 0;
}
.ibio-brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.ibio-logo{width:100px; object-fit:contain}

.ibio-nav{flex:1}
.ibio-nav-list{
  display:flex; align-items:center; gap:10px;
  list-style:none; padding:0; margin:0;
}
.ibio-nav-item{position:relative}

.ibio-nav-link,
.ibio-nav-btn{
  appearance:none; border:0; background:transparent;
  font:inherit; cursor:pointer; text-decoration:none;
  padding:10px 12px; border-radius:999px;
  color:var(--ibio-ink);
  font-weight:600; white-space:nowrap;
}
.ibio-nav-link:hover,
.ibio-nav-btn:hover{background:rgba(49,153,206,.10); color:var(--ibio-primary-700)}
.ibio-nav-btn[aria-expanded="true"]{background:rgba(49,153,206,.14); color:var(--ibio-primary-700)}

.ibio-chev{
  display:inline-block; width:10px; height:10px; margin-left:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px); opacity:.8;
}

/* CTA */
.ibio-header-cta{display:flex; gap:8px; align-items:center;}
.ibio-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:14px;
  text-decoration:none; font-size:13px;font-weight:700;
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.ibio-btn:active{transform:translateY(1px)}
.ibio-btn-primary{background:var(--ibio-primary-700); color:#fff;}
.ibio-btn-primary:hover{background:var(--ibio-primary)}
.ibio-btn-outline{
  background:#fff; border-color:rgba(49,153,206,.35);
  color:var(--ibio-primary-700);
}
.ibio-btn-outline:hover{border-color:var(--ibio-primary); background:rgba(49,153,206,.06)}
.ibio-btn-ghost{
  background:transparent; border-color:rgba(15,23,42,.12);
  color:var(--ibio-ink);
}
.ibio-btn-ghost:hover{background:rgba(15,23,42,.04)}
.w-full{width:100%}

/* Burger */
.ibio-burger{
  display:none;
  border:1px solid rgba(15,23,42,.12);
  background:#fff; border-radius:14px;
  width:46px; height:42px; padding:10px;
  cursor:pointer;
}
.ibio-burger span{
  display:block; height:2px; background:var(--ibio-ink);
  border-radius:2px; margin:5px 0; opacity:.85;
}

/* ===== Mega Menu ===== */
.ibio-mega[hidden]{display:none !important}
.ibio-mega{
  position:absolute; left:0; top:100%; width:100%;
  background:transparent; z-index:79;
}
.ibio-mega-shell{
  background:#fff; border:1px solid var(--ibio-line);
  border-radius:22px; box-shadow:var(--ibio-shadow);
  margin:12px auto 16px; overflow:hidden;
  transform:translateY(-6px); opacity:0;
  transition:opacity .14s ease, transform .14s ease;
}
.ibio-mega.is-open .ibio-mega-shell{transform:translateY(0); opacity:1}
.ibio-mega-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--ibio-line);
}
.ibio-mega-kicker{font-size:12px; font-weight:800; color:var(--ibio-primary-700); letter-spacing:.2px}
.ibio-mega-sub{display:block; color:var(--ibio-soft); font-size:13px; margin-top:2px}
.ibio-icon-btn{
  border:1px solid rgba(15,23,42,.12); background:#fff;
  width:42px; height:42px; border-radius:14px; cursor:pointer;
}
.ibio-mega-body{padding:16px}
.ibio-mega-grid{display:grid; grid-template-columns:1fr 1fr 1fr 360px; gap:14px; align-items:start;}
.ibio-mega-col{padding:10px 10px 14px}
.ibio-mega-col h4{margin:0 0 10px; font-size:14px; font-weight:800}
.ibio-mega-col a{
  display:block; text-decoration:none;
  padding:8px 10px; border-radius:12px;
  color:var(--ibio-ink); font-weight:600; line-height:1.25;
}
.ibio-mega-col a:hover{background:rgba(49,153,206,.08); color:var(--ibio-primary-700)}
.ibio-mega-side{padding:6px}
.ibio-mega-card{
  border:1px solid rgba(49,153,206,.22);
  background:rgba(49,153,206,.05);
  border-radius:18px; padding:14px;
}
.ibio-mega-card .tag{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:900; color:var(--ibio-primary-700);
  background:#fff; border:1px solid rgba(49,153,206,.25);
}
.ibio-mega-card h3{margin:10px 0 6px; font-size:18px}
.ibio-mega-card p{margin:0 0 10px; color:var(--ibio-soft)}
.ibio-mega-card ul{margin:0 0 12px; padding-left:18px}
.ibio-mega-card li{margin:6px 0}

/* =========================
   Right-0 Floating ScrollNav
   ========================= */

/* ✅ override เดิม */
.ibio-scrollnav-wrap[hidden]{display:none !important}

.ibio-scrollnav-wrap{
  position: fixed;                 /* จาก sticky -> fixed */
  right: 1px;                     /* ✅ ชิดขวา (ปรับเป็น 0 ได้) */
  top: calc(var(--ibio-nav-h) + 12px);
  z-index: 90;
  padding: 0;
  width: 150px;                    /* ความกว้าง panel */
  pointer-events: none;            /* กันทับคอนเทนต์ (ให้คลิกได้เฉพาะด้านใน) */
}

/* ให้คลิกได้เฉพาะกล่อง nav */
.ibio-scrollnav a{
  pointer-events: auto;
  background:#fff;
  padding:10px;
  text-decoration: none;
  display:flex;
  flex-direction: column;          /* ✅ เรียงบน-ล่าง */
  gap:8px;
  align-items: stretch;
  color: #000;
  font-size: small;
  max-height: calc(100vh - (var(--ibio-nav-h) + 28px));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* รายการเต็มบรรทัด */
.ibio-pill{
  width:100%;
  text-align:left;
  white-space:normal;              /* ให้ตัดบรรทัดได้ */
  padding:10px 12px;
}

/* active/hover เดิมใช้ได้ */
.ibio-pill:hover{background:#f393bd; color:#fff}
.ibio-pill.is-active{background:#3cc5ee; color:#fff}

/* CTA ให้ดูเป็นปุ่มเต็มบรรทัด */
.ibio-pill-cta{
  background:var(--ibio-primary-700);
  color:#fff;
}

/* ✅ มือถือซ่อน (กันบัง) */
@media (max-width: 991.98px){
  .ibio-scrollnav-wrap{ display:none !important; }
}



  .ibio-hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background: #f6fbff; /* fallback */
  }

  .ibio-hero-bg{ position:absolute; inset:0; z-index:0; }

  .ibio-hero-slide{
    position:absolute; inset:0;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0;
    transform: scale(1.01);
    transition: opacity 900ms ease;
    will-change: opacity;
  }
  .ibio-hero-slide.is-active{ opacity:1; }

  /* Ken burns แบบเบามาก (ไม่ให้มืด/หนัก) */
  @keyframes ibioKenBurnsLight{
    0%{ transform: scale(1.01) translate3d(0,0,0); }
    100%{ transform: scale(1.05) translate3d(-0.6%, -0.6%, 0); }
  }
  .ibio-hero-slide.is-kenburns{ animation: ibioKenBurnsLight 12s ease-in-out forwards; }

  /* Overlay แบบสว่าง + อ่านง่าย (ไม่กดมืด) */
  .ibio-hero-overlay{
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(900px 520px at 18% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
      radial-gradient(760px 520px at 78% 22%, rgba(33,96,221,.14) 0%, rgba(33,96,221,0) 65%),
      linear-gradient(90deg, rgba(246,251,255,.86) 0%, rgba(246,251,255,.42) 50%, rgba(246,251,255,.18) 100%);
  }

  /* Noise ลดลง/หรือปิดได้ (นี่ทำให้ใสขึ้น) */
  .ibio-hero-noise{
    position:absolute; inset:-20%;
    z-index:2;
    pointer-events:none;
    opacity:.04; /* เบามาก */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    transform: rotate(6deg);
  }

  /* แสง ambient (สดใส/โมเดิร์น) */
  .ibio-hero-glow{
    position:absolute;
    z-index:2;
    pointer-events:none;
    width:620px; height:620px;
    border-radius:999px;
    left:-220px; top:80px;
    background: radial-gradient(circle at 30% 30%,
      rgba(33,96,221,.20),
      rgba(110,231,183,.16),
      rgba(255,255,255,0) 62%);
    filter: blur(8px);
    opacity:.9;
    animation: ibioGlow 10s ease-in-out infinite;
  }
  @keyframes ibioGlow{
    0%,100%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(36px,-18px,0) scale(1.05); }
  }

  /* Copy layer ต้องอยู่บนสุด */
  .ibio-hero .ibio-hero-copy{ position:relative; z-index:3; }

  /* Badge/Lead ให้เป็นสีเข้ม (อ่านชัดในโทนสว่าง) */
  .ibio-badge{
    color:#0b1b3a;
    background: rgba(255,255,255,.72);
    border:1px solid rgba(15,23,42,.10);
    border-radius:999px;
    padding:8px 12px;
    display:inline-block;
  }
  .ibio-lead{ color: rgba(11,27,58,.86); }

  /* Entrance motion */
  .ibio-hero .ibio-hero-copy > *{
    opacity:0;
    transform: translateY(10px);
    transition: opacity 700ms ease, transform 700ms ease;
  }
  .ibio-hero.is-ready .ibio-hero-copy > *{ opacity:1; transform: translateY(0); }
  .ibio-hero.is-ready .ibio-hero-copy > *:nth-child(1){ transition-delay: 80ms; }
  .ibio-hero.is-ready .ibio-hero-copy > *:nth-child(2){ transition-delay: 140ms; }
  .ibio-hero.is-ready .ibio-hero-copy > *:nth-child(3){ transition-delay: 200ms; }
  .ibio-hero.is-ready .ibio-hero-copy > *:nth-child(4){ transition-delay: 260ms; }
  .ibio-hero.is-ready .ibio-hero-copy > *:nth-child(5){ transition-delay: 320ms; }

  @media (prefers-reduced-motion: reduce){
    .ibio-hero-slide{ transition:none; }
    .ibio-hero-slide.is-kenburns{ animation:none; }
    .ibio-hero-glow{ animation:none; }
    .ibio-hero .ibio-hero-copy > *{ transition:none; opacity:1; transform:none; }
  }


.ibio-hero-copy h1{margin:0 0 10px; font-size:40px; line-height:1.06; letter-spacing:-.5px;}
.ibio-lead{margin:0 0 16px; color:var(--ibio-soft); line-height:1.75; max-width:62ch}
.ibio-hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.ibio-kpis{display:flex; gap:12px; flex-wrap:wrap}
.ibio-kpi{
  background:#fff; border:1px solid var(--ibio-line);
  border-radius:16px; padding:12px 14px; min-width:160px;
}
  @media (min-width: 768px){
    .ibio-hero-copy{ padding-top:50px; }
  }
.ibio-kpi strong{display:block; font-size:20px}
.ibio-kpi span{color:var(--ibio-soft); font-size:13px}

.ibio-hero-card{
  background:#fff; border:1px solid var(--ibio-line);
  border-radius:22px; box-shadow:var(--ibio-shadow);
  padding:16px;
  max-width:560px;
}
.ibio-card-title{margin:0 0 8px; font-size:18px}
.ibio-card-sub{margin:0 0 14px; color:var(--ibio-soft); line-height:1.65}

.ibio-steps{list-style:none; padding:0; margin:0 0 14px; display:grid; gap:10px}
.ibio-steps li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px; border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(15,23,42,.02);
}
.ibio-steps .n{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(49,153,206,.14);
  color:var(--ibio-primary-700); font-weight:900;
}
.ibio-steps small{display:block; color:var(--ibio-soft); margin-top:2px}

#ibioHeroSentinel{height:1px}

.ibio-section{padding:32px 0}
.ibio-section-head h2{margin:0 0 6px; font-size:28px}
.ibio-section-head p{margin:0; color:var(--ibio-soft); line-height:1.7}

.ibio-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
.ibio-card{
  background:#fff; border:1px solid var(--ibio-line);
  border-radius:22px; padding:16px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.ibio-card p{margin:0 0 10px; color:var(--ibio-soft); line-height:1.7}
.ibio-link{color:var(--ibio-primary-700); text-decoration:none; font-weight:800}
.ibio-link:hover{text-decoration:underline}

.ibio-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
.ibio-feature{background:#fff; border:1px solid var(--ibio-line); border-radius:22px; padding:16px}
.ibio-feature p{margin:0; color:var(--ibio-soft); line-height:1.75}

.ibio-timeline{margin-top:14px; background:#fff; border:1px solid var(--ibio-line); border-radius:22px; padding:10px}
.ibio-tl-item{display:flex; gap:12px; padding:14px; border-radius:18px}
.ibio-tl-item + .ibio-tl-item{border-top:1px solid var(--ibio-line)}
.ibio-tl-item span{
  width:44px; height:44px; border-radius:16px;
  background:rgba(49,153,206,.12);
  color:var(--ibio-primary-700);
  font-weight:900; display:flex; align-items:center; justify-content:center;
}
.ibio-tl-item p{margin:0; color:var(--ibio-soft); line-height:1.7}

.ibio-logos{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.ibio-logo-pill{
  background:#fff; border:1px solid var(--ibio-line);
  padding:12px 14px; border-radius:999px;
  font-weight:900; color:var(--ibio-primary-700);
}

.ibio-callout{
  margin-top:14px; background:#fff;
  border:1px solid rgba(49,153,206,.22);
  border-radius:22px; padding:16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:0 14px 30px rgba(15,23,42,.06);
}
.ibio-callout p{margin:0; color:var(--ibio-soft)}

.ibio-faq{margin-top:14px; display:grid; gap:10px}
.ibio-faq details{background:#fff; border:1px solid var(--ibio-line); border-radius:18px; padding:12px 14px}
.ibio-faq summary{cursor:pointer; font-weight:900}
.ibio-faq p{margin:10px 0 0; color:var(--ibio-soft); line-height:1.75}

/* ===== Contact ===== */
.ibio-contact{margin-top:14px; display:grid; grid-template-columns:1.2fr .8fr; gap:14px}
.ibio-form{background:#fff; border:1px solid var(--ibio-line); border-radius:22px; padding:16px}
.ibio-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
.ibio-form-grid .full{grid-column:1 / -1}
.ibio-form span{display:block; font-weight:800; margin-bottom:6px}
.ibio-form input,.ibio-form textarea{
  width:100%; padding:12px;
  border-radius:14px; border:1px solid rgba(15,23,42,.12);
  font:inherit; outline:none;
}
.ibio-form input:focus,.ibio-form textarea:focus{
  border-color:rgba(49,153,206,.55);
  box-shadow:0 0 0 4px rgba(49,153,206,.12);
}

.ibio-contact-card{background:#fff; border:1px solid var(--ibio-line); border-radius:22px; padding:16px}
.ibio-contact-list{margin:0; padding-left:18px; color:var(--ibio-soft); line-height:1.75}
.ibio-contact-list strong{color:var(--ibio-ink)}
.ibio-contact-list a{color:var(--ibio-primary-700); font-weight:800; text-decoration:none}
.ibio-contact-list a:hover{text-decoration:underline}

.ibio-contact-team{margin-top:12px; display:grid; gap:10px}
.ibio-person{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(15,23,42,.02);
  border-radius:18px;
  padding:12px;
}
.ibio-person h4{margin:0 0 8px}
.ibio-person-actions{display:flex; gap:8px; flex-wrap:wrap}
.ibio-mini{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:14px;
  text-decoration:none; font-weight:800;
  border:1px solid rgba(49,153,206,.25);
  color:var(--ibio-primary-700);
  background:#fff;
}
.ibio-mini:hover{background:rgba(49,153,206,.06); border-color:rgba(49,153,206,.45)}

.ibio-contact-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* Map */
.ibio-map{
  margin-top:14px;
  background:#fff;
  border:1px solid var(--ibio-line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.ibio-map iframe{width:100%; height:420px; border:0; display:block}

/* ===== Footer ===== */
.ibio-footer{border-top:1px solid var(--ibio-line); background:#fff; padding:18px 0}
.ibio-footer-inner{display:flex; align-items:center; justify-content:space-between; gap:10px}

/* ===== Drawer (Mobile) ===== */
.ibio-drawer-wrap[hidden]{display:none !important}
.ibio-drawer-wrap{
  position:fixed; inset:0; z-index:100; display:flex; justify-content:flex-end;
}
.ibio-drawer-overlay{position:absolute; inset:0; background:transparent; border:0}
.ibio-drawer{
  position:relative;
  width:min(92vw, 380px);
  height:100%;
  background:#fff;
  border-left:1px solid var(--ibio-line);
  box-shadow:-18px 0 40px rgba(15,23,42,.10);
  padding:12px;
  transform:translateX(100%);
  transition:transform .18s ease;

  /* ✅ FIX: drawer เลื่อนได้จริง (iOS/Android) */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
body.drawer-open .ibio-drawer{transform:translateX(0)}
.ibio-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 2px 10px; border-bottom:1px solid var(--ibio-line)
}
.ibio-drawer-brand{display:flex; align-items:center; gap:10px}
.ibio-drawer-brand img{width:100px;  object-fit:contain}
.ibio-drawer-nav{padding:10px 2px; display:grid; gap:8px}

.ibio-drawer-link{
  width:100%; text-align:left;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  padding:12px; border-radius:16px;
  font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.ibio-drawer-link[aria-expanded="true"]{
  border-color:rgba(49,153,206,.35);
  background:rgba(49,153,206,.08);
  color:var(--ibio-primary-700);
}
.ibio-drawer-sub{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(15,23,42,.02);
  border-radius:16px;
  padding:10px;
  display:grid;
  gap:6px;
}
.ibio-drawer-sub a{
  text-decoration:none;
  padding:10px;
  border-radius:12px;
  font-weight:700;
}
.ibio-drawer-sub a:hover{background:rgba(49,153,206,.08); color:var(--ibio-primary-700)}
.ibio-drawer-a{
  text-decoration:none;
  padding:12px;
  border-radius:16px;
  font-weight:800;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}
.ibio-drawer-sub[hidden]{ display:none !important; }

.ibio-drawer-a:hover{background:rgba(49,153,206,.08); color:var(--ibio-primary-700)}
.ibio-drawer-cta{display:grid; gap:10px; margin-top:6px}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .ibio-nav{display:none}
  .ibio-header-cta{display:none}
  .ibio-burger{display:inline-block}

  .ibio-hero-copy h1{font-size:34px}
  .ibio-hero-grid{grid-template-columns:1fr; gap:12px}

  .ibio-cards{grid-template-columns:1fr}
  .ibio-grid-3{grid-template-columns:1fr}
  .ibio-contact{grid-template-columns:1fr}
  .ibio-form-grid{grid-template-columns:1fr}
  .ibio-mega-grid{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .ibio-hero-copy h1{font-size:30px}
}

/* =========================================================
   ✅ BUGFIX PACK (สำคัญ)
   - กันชั้น wrap/overlay บังคลิก
   - ชัวร์สุดตอน drawer ปิด/กำลัง animate
   ========================================================= */
.ibio-drawer-overlay{ z-index:0; }
.ibio-drawer{ z-index:1; }

/* ตอนปิด: ไม่ให้ชั้น wrap กินคลิก */
.ibio-drawer-wrap{ pointer-events:none; }
/* ตอนเปิด: ให้คลิกได้ทั้ง overlay (เพื่อปิด) และ drawer */
body.drawer-open .ibio-drawer-wrap{ pointer-events:auto; }

  #hero .ibio-hero-overlay{ background: none !important; opacity:0 !important; }
  #hero .ibio-hero-noise{ opacity:0 !important; }
  #hero .ibio-hero-glow{ opacity:0 !important; }
  
.ibio-compare{
  /* iBio palette */
  --cmp-blue:#2692CA;
  --cmp-sky:#63B7E0;
  --cmp-green:#90C643;
  --cmp-pink:#EE5689;

  --cmp-text:#0b1220;          /* เข้มขึ้น = แข็งแรง */
  --cmp-soft:#55657c;
  --cmp-line:#e6edf5;

  --cmp-bg:#f7fbff;            /* ✅ เติมชีวิตเล็กน้อย (ไม่ใช่กราเดี้ยน) */
  --cmp-card:#ffffff;

  --cmp-radius:18px;
  --cmp-shadow:0 14px 34px rgba(15,23,42,.10);
  --cmp-shadow-soft:0 10px 22px rgba(15,23,42,.07);

  --cmp-headh:124px;
  --cmp-rowh:92px;

  background: #ffffff;
  position:relative;
  overflow:hidden;
}

/* ✅ Bubble สีแบบเบา ๆ ให้ไม่จืด (ไม่หนัก) */
.ibio-compare::before,
.ibio-compare::after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  pointer-events:none;
  opacity:.14;
  filter: blur(0px);
}
.ibio-compare::before{
  left:-260px; top:-260px;
  background: radial-gradient(circle at 30% 30%, rgba(38,146,202,.95) 0%, rgba(38,146,202,0) 62%);
}
.ibio-compare::after{
  right:-280px; bottom:-280px;
  background: radial-gradient(circle at 60% 60%, rgba(238,86,137,.95) 0%, rgba(238,86,137,0) 62%);
}

.ibio-compare .ibio-container{ position:relative; z-index:1; }

.ibio-compare .ibio-section-head{ text-align:center; }
.ibio-compare .ibio-section-head h2{
  margin:0 0 10px;
  font-size:34px;
  line-height:1.15;
  color:var(--cmp-text);
  letter-spacing:.2px;
  font-weight:900;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}

/* ✅ เส้นใต้ “หลายสี” ทำให้สดใสทันที (เส้นเล็ก ไม่หนัก) */
.ibio-compare .ibio-section-head h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:140px;
  height:4px;
  border-radius:999px;
  background: var(--cmp-pink);
  opacity:.95;
}

.ibio-compare .ibio-section-head h2 .accent{ color:var(--cmp-blue); }
.ibio-compare .ibio-section-head p{
  margin:0;
  color:var(--cmp-soft);
  font-size:16px;
  line-height:1.65;
}

/* ===== Compare Grid ===== */
.ibio-compare-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.05fr 1.2fr 1.2fr;
  gap:18px;
  align-items:stretch;
}

/* ===== Left labels (desktop) ===== */
.ibio-compare-labels{ background: transparent; }
.ibio-compare-spacer{ height:var(--cmp-headh); }
.ibio-compare-labels ul,
.ibio-compare-card ul{ list-style:none; margin:0; padding:0; }

.ibio-compare-labels li{
  min-height: var(--cmp-rowh);
  display:flex;
  align-items:center;
  padding: 0 14px;
  border-bottom:1px solid rgba(230,237,245,.95);
  color: var(--cmp-soft);
  font-weight:800;
  font-size:14px;
}

/* ===== Cards ===== */
.ibio-compare-card{
  background: var(--cmp-card);
  border:1px solid var(--cmp-line);
  border-radius: var(--cmp-radius);
  box-shadow: var(--cmp-shadow-soft);
  overflow:hidden;
  position:relative;
}

/* ✅ iBio Highlight: ขอบ 2px + shadow สี (สดใส/แข็งแรง) */
.ibio-compare-card.is-ibio{
  transform: translateY(-10px);
  border:2px solid rgba(38,146,202,.35);
  box-shadow:
    0 18px 44px rgba(38,146,202,.18),
    0 14px 38px rgba(238,86,137,.10),
    var(--cmp-shadow);
}

/* Glow เบา ๆ ไม่หนัก */
.ibio-compare-card.is-ibio::after{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(38% 38% at 50% 12%, rgba(99,183,224,.18) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(36% 36% at 20% 85%, rgba(144,198,67,.14) 0%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}

.ibio-compare-card-head{
  height: var(--cmp-headh);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  position:relative;
  z-index:1;
  border-bottom:1px solid rgba(230,237,245,.95);
  background:#fff;
}

/* ✅ หัวการ์ด iBio มี tint สดใส แต่ไม่ไล่หนัก */
.ibio-compare-card.is-ibio .ibio-compare-card-head{
  background:
    linear-gradient(180deg, rgba(38,146,202,.10) 0%, rgba(255,255,255,0) 68%),
    #fff;
}

.ibio-compare-card.is-other .ibio-compare-card-head{
  background: rgba(15,23,42,.03);
}

.ibio-compare-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.ibio-compare-brand img{
  width:108px; height:42px; object-fit:contain;
  border-radius:12px;
  background:#fff;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
.ibio-compare-brand .name{
  font-size:22px;
  font-weight:950;
  color: var(--cmp-text);
  letter-spacing:.2px;
}

/* ✅ sub อยู่ใน head */
.ibio-compare-card-head .sub{
  font-size:13px;
  color: var(--cmp-soft);
  margin-top:-6px;
  text-align:center;
  max-width: 380px;
}

/* ===== Rows ===== */
.ibio-compare-card li{
  min-height: var(--cmp-rowh);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 14px;
  border-bottom:1px solid rgba(230,237,245,.95);
  position:relative;
  z-index:1;
  background:#fff;
}

/* ✅ Zebra เบา ๆ ช่วยอ่านง่าย */
.ibio-compare-card li:nth-child(even){
  background: rgba(99,183,224,.06);
}
.ibio-compare-card.is-other li:nth-child(even){
  background: rgba(15,23,42,.03);
}

/* ✅ แถบสีด้านซ้ายใน iBio card = สดใส/แข็งแรงมาก */
.ibio-compare-card.is-ibio li::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: var(--cmp-blue);
  opacity:.9;
}
.ibio-compare-card.is-ibio li:nth-child(2)::after{ background: var(--cmp-sky); }
.ibio-compare-card.is-ibio li:nth-child(3)::after{ background: var(--cmp-green); }
.ibio-compare-card.is-ibio li:nth-child(4)::after{ background: var(--cmp-blue); }
.ibio-compare-card.is-ibio li:nth-child(5)::after{ background: var(--cmp-pink); }

.ibio-compare-card li .txt{
  color: var(--cmp-text);
  font-size:15px;              /* ใหญ่ขึ้นนิด อ่านง่าย */
  line-height:1.55;

  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;

  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: calc(1.55em * 3);
}

/* ✅ check: iBio ใช้ “เขียว” = ดูแข็งแรง / ผ่าน QC */
.ibio-compare-card li::before{
  content:"✓";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  flex:0 0 28px;
  font-weight:1000;
  font-size:14px;
  background: rgba(144,198,67,.18);
  color: var(--cmp-green);
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}

/* other: dot */
.ibio-compare-card.is-other li::before{
  content:"•";
  font-size:20px;
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.55);
}

.ibio-compare-labels li:last-child,
.ibio-compare-card li:last-child{ border-bottom:0; }

/* ===== Mobile ===== */
@media (max-width: 980px){
  .ibio-compare-grid{ grid-template-columns: 1fr; gap:14px; }
  .ibio-compare-labels{ display:none; }
  .ibio-compare-card.is-ibio{ transform:none; }

  .ibio-compare-card li{
    align-items:flex-start;
    padding: 14px 14px;
    min-height:auto;
  }
  .ibio-compare-card li .txt{
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height:none;
  }
  .ibio-compare-card li .txt::before{
    content: attr(data-label);
    display:block;
    font-weight:950;
    color: var(--cmp-soft);
    margin-bottom:4px;
    font-size:12px;
  }
}
.ibio-compare .cmp-inline-check{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  justify-content:center;
  color: var(--cmp-soft);
  font-size:16px;
  line-height:1.6;
}

.ibio-compare .cmp-inline-check li{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-weight:700;
  color: var(--cmp-soft);
}

/* ✅ วงกลมไอคอนแบบเดียวกับ .ibio-compare-card li::before */
.ibio-compare .cmp-inline-check li::before{
  content:"✓";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  flex:0 0 28px;
  font-weight:1000;
  font-size:14px;
  background: rgba(144,198,67,.18);
  color: var(--cmp-green);
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
/* =========================
   iBio Strengths (NEW)
   ========================= */
#strengths{ background:#fff !important;padding-top: 60px !important; }
.ibio-strengths-head{ text-align:center; }

.ibio-strengths-title{
  margin:0 0 8px;
  font-size:34px;
  line-height:1.15;
  font-weight:950;
  color:#0b1220;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}

/* underline สดใสตามโทน iBio */
.ibio-strengths-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:150px;
  height:4px;
  border-radius:999px;
  background: #EE5689;
}

.ibio-strengths-sub{
  margin:0;
  color:#55657c;
  font-size:16px;
  line-height:1.75;
}

/* inline checks */
.ibio-strengths-checks{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  justify-content:center;
  color:#55657c;
  font-size:16px;
  line-height:1.6;
}
.ibio-strengths-checks li{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-weight:800;
}
.ibio-strengths-checks li::before{
  content:"✓";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  flex:0 0 28px;
  font-weight:1000;
  font-size:14px;
  background: rgba(144,198,67,.18);
  color:#90C643;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}

/* 3 cards */
.ibio-strengths-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

.ibio-strengths-card{
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  height:100%;
}

.ibio-strengths-h3{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.35;
  font-weight:950;
  color:#0b1220;
  text-wrap: balance;
}

.ibio-strengths-p{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.85;
  color:#55657c;
  text-align:left;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.ibio-strengths-p:last-child{ margin-bottom:0; }

/* responsive: อย่าฝืน 3 คอลัมน์จนบรรทัดตกมั่ว */
@media (max-width: 1100px){
  .ibio-strengths-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .ibio-strengths-grid{ grid-template-columns: 1fr; }
  .ibio-strengths-card{ padding:18px; }
  .ibio-strengths-h3{ font-size:19px; }
  .ibio-strengths-p{ font-size:15.5px; }
}
/* ===== Compare CTA (NEW) ===== */
.ibio-compare-cta{
  margin-top:18px;
  background:#ffffff;                 /* ✅ ขาวล้วน */
  border:1px solid #e6edf5;
  border-radius:18px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
  overflow:hidden;
}

.ibio-compare-cta__inner{
  display:flex;
  gap:18px;
  padding:20px;                       /* ✅ padding 20 */
  align-items:flex-start;
  position:relative;
}

/* แถบ accent (ไม่ใช่กราเดี้ยน) */
.ibio-compare-cta__inner::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background:#2692CA;                 /* ฟ้าโลโก้ */
}

.ibio-compare-cta__copy{
  flex:1 1 auto;
  padding-left:8px;
}

.ibio-compare-cta__title{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.25;
  font-weight:950;
  color:#0b1220;
}

.ibio-compare-cta__desc{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.8;
  color:#55657c;
}

.ibio-compare-cta__bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 12px;
}

.ibio-compare-cta__bullets li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#0b1220;
  font-weight:800;
  font-size:15px;
  line-height:1.55;
}

.ibio-compare-cta__bullets li::before{
  content:"✓";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  flex:0 0 28px;
  font-weight:1000;
  font-size:14px;
  background: rgba(144,198,67,.18);
  color:#90C643;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
  margin-top:1px;
}

.ibio-compare-cta__fineprint{
  margin-top:10px;
  color:#7a8aa2;
  font-size:12.5px;
  line-height:1.6;
}

.ibio-compare-cta__actions{
  flex:0 0 260px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  justify-content:center;
}

@media (max-width: 980px){
  .ibio-compare-cta__inner{ flex-direction:column; }
  .ibio-compare-cta__actions{ flex:1 1 auto; }
  .ibio-compare-cta__bullets{ grid-template-columns: 1fr; }
}

/* =========================
   About (NEW) - ibio-aboutx
   ========================= */

.ibio-aboutx{ background:#fff; }

.ibio-aboutx-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap:22px;
  align-items:start;
}

/* Video */
.ibio-aboutx-video{ margin-top:14px; }
.ibio-aboutx-videoWrap{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  border:1px solid #e6edf5;
}
.ibio-aboutx-videoWrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* 3 cards */
.ibio-aboutx-cards3{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.ibio-aboutx-card{
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  height:100%;
}
.ibio-aboutx-h3{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.35;
  font-weight:950;
  color:#0b1220;
  text-wrap: balance;
}
.ibio-aboutx-p{
  margin:0 0 8px;
  font-size:15.5px;
  line-height:1.85;
  color:#55657c;
  text-align:left;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap: pretty;
}
.ibio-aboutx-p:last-child{ margin-bottom:0; }

/* Aside card */
.ibio-aboutx-aside{
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  padding:20px;
  box-shadow:0 14px 30px rgba(15,23,42,.08);
  position:sticky;
  top:16px;
}
.ibio-aboutx-title{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.15;
  font-weight:950;
  color:#0b1220;
}
.ibio-aboutx-sub{
  margin:0 0 14px;
  color:#55657c;
  font-size:16px;
  line-height:1.85;
}

/* Steps */
.ibio-aboutx-steps{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ibio-aboutx-steps li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid #e6edf5;
  background:#fff;
}
.ibio-aboutx-n{
  width:32px; height:32px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  color:#fff;
  background:#2692CA; /* ฟ้าโลโก้ */
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  flex:0 0 32px;
}
.ibio-aboutx-steps strong{
  display:block;
  font-size:14.5px;
  font-weight:950;
  color:#0b1220;
  margin-bottom:2px;
}
.ibio-aboutx-steps small{
  display:block;
  font-size:13.5px;
  line-height:1.75;
  color:#55657c;
}

.ibio-aboutx-btn{
  display:block;
  width:100%;
  text-align:center;
}

/* Responsive */
@media (max-width: 1100px){
  .ibio-aboutx-grid{
    grid-template-columns: 1fr;
  }
  .ibio-aboutx-aside{
    position:relative;
    top:auto;
  }
  .ibio-aboutx-cards3{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 720px){
  .ibio-aboutx-videoWrap{ border-radius:16px; }
  .ibio-aboutx-cards3{ grid-template-columns: 1fr; }
  .ibio-aboutx-card{ padding:16px; }
  .ibio-aboutx-title{ font-size:24px; }
}

/* =========================
   OEM (NEW) - ibio-oemx
   ========================= */
.ibio-oemx{ background:#fff; }

/* Head */
.ibio-oemx-head{ text-align:center; }
.ibio-oemx-title{
  margin:0 0 8px;
  font-size:34px;
  line-height:1.15;
  font-weight:950;
  color:#0b1220;
  display:inline-block;
  position:relative;
  padding-bottom:10px;
}
.ibio-oemx-title::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:160px; height:4px;
  border-radius:999px;
  background:#2692CA; /* ขาวล้วน ไม่มีไล่สี */
}
.ibio-oemx-sub{
  margin:0;
  color:#55657c;
  font-size:16px;
  line-height:1.8;
}

/* 3 grid cards */
.ibio-oemx-grid3{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}

.ibio-oemx-card{
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  height:100%;
}

.ibio-oemx-h3{
  margin:0 0 10px;
  font-size:19px;
  line-height:1.35;
  font-weight:950;
  color:#0b1220;
  text-wrap: balance;
}
.ibio-oemx-p{
  margin:0;
  font-size:16px;
  line-height:1.85;
  color:#55657c;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap: pretty;
}

/* Why block */
.ibio-oemx-why{
  margin-top:14px;
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
  padding:18px 18px 18px 18px;
  position:relative;
  overflow:hidden;
}
.ibio-oemx-whyBadge{
  position:absolute;
  top:14px; left:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  font-weight:950;
  font-size:13px;
  color:#0b1220;
  background: rgba(99,183,224,.16);
  border:1px solid rgba(99,183,224,.35);
}
.ibio-oemx-whyBody{ padding-left:0; padding-top:30px; }
.ibio-oemx-whyTitle{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.3;
  font-weight:950;
  color:#0b1220;
}
.ibio-oemx-whyList{
  margin:0;
  padding-left:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 12px;
}
.ibio-oemx-whyList li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#0b1220;
  font-weight:800;
  font-size:15px;
  line-height:1.65;
}
.ibio-oemx-whyList li::before{
  content:"✓";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  flex:0 0 28px;
  font-weight:1000;
  font-size:14px;
  background: rgba(144,198,67,.18);
  color:#90C643;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
  margin-top:1px;
}

/* Links group */
.ibio-oemx-links{ margin-top:14px; }
.ibio-oemx-linksHead{ text-align:center; margin-bottom:0; }
.ibio-oemx-linksTitle{
  margin:0 0 6px;
  font-size:28px;
  line-height:1.2;
  font-weight:950;
  color:#0b1220;
}
.ibio-oemx-linksSub{
  margin:0;
  color:#55657c;
  font-size:16px;
  line-height:1.8;
}
.ibio-oemx-cardLink .ibio-oemx-p{ margin-bottom:12px; }

.ibio-oemx-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:950;
  color:#2692CA;
  text-decoration:none;
}
.ibio-oemx-link::after{
  content:"→";
  font-weight:1000;
}
.ibio-oemx-link:hover{ text-decoration:underline; }

/* CTA */
.ibio-oemx-cta{
  margin-top:14px;
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
  padding:20px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}
.ibio-oemx-ctaTitle{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.25;
  font-weight:950;
  color:#0b1220;
}
.ibio-oemx-ctaDesc{
  margin:0;
  color:#55657c;
  font-size:16px;
  line-height:1.8;
}
.ibio-oemx-ctaActions{
  display:flex;
  gap:10px;
  flex:0 0 auto;
  align-items:center;
}

/* Responsive */
@media (max-width: 1100px){
  .ibio-oemx-grid3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ibio-oemx-whyList{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ibio-oemx-title{ font-size:28px; }
  .ibio-oemx-linksTitle{ font-size:24px; }
  .ibio-oemx-grid3{ grid-template-columns: 1fr; }
  .ibio-oemx-card{ padding:18px; }
  .ibio-oemx-cta{ flex-direction:column; align-items:stretch; }
  .ibio-oemx-ctaActions{ justify-content:flex-start; flex-wrap:wrap; }
}
/* =========================
   Project Path Card (NEW)
   prefix: ibio-pathx-
   ========================= */

.ibio-pathx{
  background:#ffffff;
  border:1px solid #e6edf5;
  border-radius:18px;
  padding:20px;
  box-shadow:0 14px 30px rgba(15,23,42,.08);
  max-width: 620px;
}

/* Title + lead */
.ibio-pathx__title{
  margin:0 0 10px;
  font-size:26px;
  line-height:1.2;
  font-weight:950;
  color:#0b1220;
  text-wrap: balance;
}

.ibio-pathx__lead{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  color:#55657c;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap: pretty;
}

/* Steps list */
.ibio-pathx__steps{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ibio-pathx__step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;
  background:#ffffff;                 /* ขาวล้วน */
  border:1px solid #e6edf5;
}

/* Number pill (สดใสแต่ไม่กราเดี้ยน) */
.ibio-pathx__num{
  width:34px; height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  font-weight:1000;
  font-size:14px;
  color:#0b1220;
  background: rgba(38,146,202,.16);   /* ฟ้าโลโก้แบบ soft */
  border:1px solid rgba(38,146,202,.28);
  box-shadow:0 10px 18px rgba(15,23,42,.06);
}

/* Text */
.ibio-pathx__txt{ min-width:0; }

.ibio-pathx__h{
  display:block;
  margin:0 0 4px;
  font-size:15.5px;
  line-height:1.35;
  font-weight:950;
  color:#0b1220;
  text-wrap: balance;
}

.ibio-pathx__d{
  display:block;
  font-size:13.8px;
  line-height:1.75;
  color:#55657c;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap: pretty;
}

/* Button */
.ibio-pathx__btn{
  display:block;
  width:100%;
  text-align:center;
}

/* Responsive */
@media (max-width: 720px){
  .ibio-pathx{ padding:18px; border-radius:16px; }
  .ibio-pathx__title{ font-size:22px; }
  .ibio-pathx__lead{ font-size:15.5px; }
  .ibio-pathx__step{ padding:12px; border-radius:14px; }
  .ibio-pathx__num{ width:32px; height:32px; flex-basis:32px; }
  .ibio-pathx__h{ font-size:15px; }
  .ibio-pathx__d{ font-size:13.6px; }
}
/* =========================
   Standards (NEW) - ibio-stdx
   ========================= */
.ibio-stdx{
  background:#ffffff;
}

.ibio-stdx__head{
  text-align:center;
  margin-bottom:14px;
}

.ibio-stdx__title{
  margin:0 0 8px;
  font-size:34px;
  line-height:1.15;
  font-weight:950;
  color:#0b1220;
  display:inline-block;
  position:relative;
  padding-bottom:10px;
  text-wrap: balance;
}
.ibio-stdx__title::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:170px; height:4px;
  border-radius:999px;
  background:#2692CA; /* ฟ้าโลโก้ */
}

.ibio-stdx__lead{
  margin:0 auto;
  max-width:920px;
  font-size:16px;
  line-height:1.9;
  color:#55657c;
  overflow-wrap:break-word;
  text-wrap: pretty;
}

/* Gallery */
.ibio-stdx__gallery{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.ibio-stdx__shot{
  margin:0;
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}
.ibio-stdx__shot--full{
  grid-column: 1 / -1;
}
.ibio-stdx__shot img{
  width:100%;
  height:auto;
  display:block;
}

/* Blocks */
.ibio-stdx__block{
  margin-top:14px;
  background:#fff;
  border:1px solid #e6edf5;
  border-radius:18px;
  padding:18px 18px;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}

.ibio-stdx__h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.25;
  font-weight:950;
  color:#0b1220;
  display:flex;
  align-items:center;
  gap:10px;
}
.ibio-stdx__h3::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#90C643; /* เขียวโลโก้ */
  box-shadow:0 10px 18px rgba(15,23,42,.06);
}

/* List (no messy wrap) */
.ibio-stdx__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ibio-stdx__list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 12px;
  border:1px solid #e6edf5;
  border-radius:16px;
  background:#ffffff;
}

.ibio-stdx__list li::before{
  content:"✓";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  flex:0 0 28px;
  font-weight:1000;
  font-size:14px;
  background: rgba(144,198,67,.18);
  color:#90C643;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
  margin-top:1px;
}

.ibio-stdx__list strong{
  display:block;
  font-size:15.5px;
  line-height:1.35;
  font-weight:950;
  color:#0b1220;
  margin:0 0 4px;
  text-wrap: balance;
}

.ibio-stdx__list span{
  display:block;
  font-size:14.5px;
  line-height:1.85;
  color:#55657c;
  overflow-wrap:break-word;
  text-wrap: pretty;
}

/* Responsive */
@media (max-width: 980px){
  .ibio-stdx__gallery{
    grid-template-columns: 1fr;
  }
  .ibio-stdx__shot--full{
    grid-column:auto;
  }
}

@media (max-width: 720px){
  .ibio-stdx__title{ font-size:28px; }
  .ibio-stdx__lead{ font-size:15.5px; }
  .ibio-stdx__block{ padding:16px; border-radius:16px; }
  .ibio-stdx__shot{ border-radius:16px; }

  .ibio-stdx__list li{
    padding:12px;
    border-radius:14px;
  }
  .ibio-stdx__list strong{ font-size:15px; }
  .ibio-stdx__list span{ font-size:14.2px; }
}

    /* ===== iBio 6 Steps (isolated classes) ===== */
    #process .ib6-wrap, #process .ib6-wrap * { box-sizing: border-box; }

    #process .ib6-wrap{
      --ib6-blue:#2692CA;
      --ib6-sky:#63B7E0;
      --ib6-green:#90C643;
      --ib6-pink:#EE5689;

      --ib6-text:#0f172a;
      --ib6-soft:#64748b;
      --ib6-line:#e6edf5;

      --ib6-card:#ffffff;
      --ib6-radius:18px;
      --ib6-shadow:0 14px 34px rgba(15,23,42,.08);

    }
    #process{ background: transparent !important; }
    #process .ibio-container{ background: transparent !important; }
    /* ===== NEW: Section BG Card + Circle BG ===== */
    #process .ib6-surface{
      position:relative;
      background:#fff;
      border:1px solid var(--ib6-line);
      border-radius: 22px;
      box-shadow: var(--ib6-shadow);
      padding: 20px;              /* ✅ padding 20 */
      overflow:hidden;
    }

    /* Decorative circles */
    #process .ib6-surface::before,
    #process .ib6-surface::after{
      content:"";
      position:absolute;
      width:420px; height:420px;
      border-radius:999px;
      pointer-events:none;
      opacity:.14;
      filter: blur(0px);
    }
    #process .ib6-surface::before{
      top:-230px; left:-230px;
      background: radial-gradient(circle at 30% 30%, rgba(38,146,202,.9) 0%, rgba(38,146,202,0) 60%);
    }
    #process .ib6-surface::after{
      bottom:-240px; right:-240px;
      background: radial-gradient(circle at 65% 65%, rgba(144,198,67,.9) 0%, rgba(144,198,67,0) 60%);
    }

    /* extra small circles */
    #process .ib6-bubbles{
      position:absolute; inset:0;
      pointer-events:none;
      opacity:.10;
    }
    #process .ib6-bubbles i{
      position:absolute;
      display:block;
      width:22px; height:22px;
      border-radius:999px;
      background: rgba(99,183,224,.9);
    }
    #process .ib6-bubbles i:nth-child(1){ left:52%; top:22%; width:14px; height:14px; }
    #process .ib6-bubbles i:nth-child(2){ left:49.3%; top:41%; width:10px; height:10px; background: rgba(238,86,137,.9); }
    #process .ib6-bubbles i:nth-child(3){ left:52.4%; top:58%; width:12px; height:12px; background: rgba(144,198,67,.9); }

    /* Head */
    #process .ib6-head{ text-align:center; margin-bottom:18px; position:relative; z-index:1; }
    #process .ib6-title{
      margin:0 0 8px;
      font-size:36px;
      line-height:1.2;
      color:var(--ib6-text);
      letter-spacing:.2px;
      font-weight:900;
    }
    #process .ib6-title .accent{ color: var(--ib6-blue); }
    #process .ib6-sub{
      margin:0;
      color:var(--ib6-soft);
      font-size:16px;
      line-height:1.6;
    }

    /* Layout */
    #process .ib6-timeline{ position:relative; z-index:1; }
    #process .ib6-timeline::before{
      content:"";
      position:absolute;
      left:50%;
      top:0;
      bottom:0;
      width:2px;
      transform:translateX(-50%);
      background: var(--ib6-line);
      border-radius:999px;
      pointer-events:none;
    }

    #process .ib6-grid{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:16px 28px;
    }

    /* Card */
    #process .ib6-card{
      position:relative;
      background:var(--ib6-card);
      border:1px solid var(--ib6-line);
      border-radius:var(--ib6-radius);
      box-shadow: 0 10px 22px rgba(15,23,42,.06);
      padding:18px;
      display:grid;
      grid-template-columns: 54px 1fr;
      column-gap:14px;
      align-items:start;
      min-height:120px;
    }

    #process .ib6-card.is-left{ margin-right: 16px; }
    #process .ib6-card.is-right{ margin-left: 16px; }

    #process .ib6-card::after{
      content:"";
      position:absolute;
      top:22px;
      width:10px; height:10px;
      border-radius:999px;
      background: var(--ib6-line);
    }
    #process .ib6-card.is-left::after{ right:-28px; }
    #process .ib6-card.is-right::after{ left:-28px; }

    /* Badge */
    #process .ib6-badge{
      width:44px;
      height:44px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:18px;
      color:#fff;
      box-shadow: 0 10px 20px rgba(15,23,42,.10);
      user-select:none;
    }
    #process .ib6-b1{ background: var(--ib6-blue); }
    #process .ib6-b2{ background: var(--ib6-sky); }
    #process .ib6-b3{ background: var(--ib6-green); }
    #process .ib6-b4{ background: var(--ib6-blue); }
    #process .ib6-b5{ background: var(--ib6-pink); }
    #process .ib6-b6{ background: var(--ib6-green); }

    #process .ib6-h3{
      margin:0 0 8px;
      font-size:18px;
      line-height:1.35;
      color:var(--ib6-text);
      font-weight:900;
    }
    #process .ib6-p{
      margin:0;
      font-size:16px;
      line-height:1.7;
      color:var(--ib6-soft);
    }

    #process .ib6-card:hover{
      border-color: rgba(38,146,202,.22);
      transform: translateY(-1px);
      transition: .16s ease;
    }

    /* Responsive */
    @media (max-width: 980px){
      #process .ib6-title{ font-size:30px; }
      #process .ib6-surface{ padding:16px; }
      #process .ib6-surface::before{ width:340px; height:340px; top:-210px; left:-210px; }
      #process .ib6-surface::after{ width:360px; height:360px; bottom:-230px; right:-230px; }
      #process .ib6-bubbles{ display:none; }

      #process .ib6-timeline::before{ display:none; }
      #process .ib6-grid{ grid-template-columns: 1fr; gap:12px; }
      #process .ib6-card{ margin:0 !important; }
      #process .ib6-card::after{ display:none; }
    }