/* ========== Layout หลัก ========== */
.fbx-tri-hero{
  width:1700px;
  margin:40px auto;
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width:1700px){
  .fbx-tri-hero{ width:min(1280px,95vw); }
}

.fbx-panel{
  position:relative; border-radius:22px; overflow:hidden;
  background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.10);
}
.fbx-left{ grid-row:1 / span 2; height:560px; }
.fbx-right-top, .fbx-right-btm{ height:calc((560px - 22px)/2); }

/* ========== สไลด์พื้นฐาน ========== */
.fbx-slide-wrap{ position:relative; width:100%; height:100%; }
.fbx-slide-track{ position:absolute; inset:0; }

.fbx-slide-item{
  position:absolute; inset:0;
  opacity:0; transform:translateX(10%);
  transition:opacity 650ms ease, transform 700ms cubic-bezier(.22,.61,.36,1);
  will-change:transform, opacity;
}
.fbx-slide-item.fbx-is-active{ opacity:1; transform:translateX(0); z-index:2; }
.fbx-slide-item img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
  filter:brightness(.94);
}

/* overlay ใต้แคปชัน */
.fbx-slide-item::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
}

/* ========== Caption (ย้ายเข้า slide-item) ========== */
.fbx-slide-item .fbx-caption{
  position:absolute; left:6%; bottom:10%; z-index:3;
  max-width:min(520px,60%);
  background:rgba(255,255,255,.62); backdrop-filter:blur(6px);
  color:#111; padding:18px 22px; border-radius:18px;
}
.fbx-cap-sub{ margin:0 0 6px; color:#e44f7a; font-weight:800; }
.fbx-cap-title{ margin:0 0 8px; font-weight:900; font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.15; }
.fbx-cap-desc{ margin:0 0 14px; color:#333; font-weight:600; }
.fbx-cap-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#d9b48f; color:#fff; text-decoration:none;
  padding:10px 18px; border-radius:999px; font-weight:800;
  transition:transform .25s ease, filter .25s ease;
}
.fbx-cap-btn:hover{ transform:translateY(-1px); filter:brightness(.96); }
.fbx-cap-btn i{ font-size:.95em; position:relative; top:.5px; transition:transform .35s ease; }
.fbx-cap-btn:hover i{ transform:translate(4px,-3px) rotate(12deg); }

/* ========== Controls & Dots ========== */
.fbx-controls{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:3;
}
.fbx-controls.fbx-controls-sm{ top:12px; transform:none; flex-direction:row; }
.fbx-controls .fbx-nav-prev, .fbx-controls .fbx-nav-next{
  width:42px; height:42px; border:0; border-radius:12px; cursor:pointer;
  background:#fff; color:#333; font-size:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  transition:transform .2s ease, background .2s ease;
}
.fbx-controls.fbx-controls-sm .fbx-nav-prev,
.fbx-controls.fbx-controls-sm .fbx-nav-next{ width:36px; height:36px; font-size:18px; }
.fbx-controls .fbx-nav-prev:hover, .fbx-controls .fbx-nav-next:hover{
  transform:scale(1.06); background:#f9f6f2;
}

.fbx-dots{
  position:absolute; left:14px; top:14px; z-index:3;
  display:flex; gap:8px; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.76); backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.fbx-dots.fbx-dots-sm{ top:auto; bottom:14px; }
.fbx-dots button{
  width:8px; height:8px; border:0; border-radius:999px; background:#e0d9d2; cursor:pointer;
  transition:width .25s ease, background .25s ease;
}
.fbx-dots button.fbx-dot-active{ width:22px; background:#d9b48f; }

/* ========== Responsive ========== */
@media (max-width:992px){
  .fbx-tri-hero{
    width:min(1280px,94vw);
    grid-template-columns:1fr; grid-template-rows:auto; gap:18px;
  }
  .fbx-left{ height:min(88vh,680px); }
  .fbx-right-top, .fbx-right-btm{ display:none; } /* ซ่อนพาเนลขวาในมือถือ */
  .fbx-slide-item .fbx-caption{ left:5.5%; bottom:8%; max-width:86%; padding:16px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .fbx-slide-item{ transition:none; }
  .fbx-controls .fbx-nav-prev, .fbx-controls .fbx-nav-next,
  .fbx-cap-btn, .fbx-cap-btn i{ transition:none; }
}