/* ===== BETFLIX2499 — Bootstrap 5 rebuild ===== */
:root{
  --bf-pink:#ff2d86;
  --bf-pink-2:#ff4bab;
  --bf-magenta:#c53467;
  --bf-gold:#fb9b2c;
  --bf-green-1:#34ff00;
  --bf-green-2:#0e862b;
  --bf-dark:#1b0712;
  --bf-dark-2:#2a0a1c;
  --bf-card:rgba(255,255,255,.06);
  --bf-card-border:rgba(255,255,255,.10);
}
*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Kanit',system-ui,sans-serif;
  color:#fff;
  background:linear-gradient(180deg,#c53467 0%,#7d1f43 22%,#3d1228 55%,#1b0712 100%) fixed;
  background-color:#1b0712;
  overflow-x:hidden;
  padding-bottom:74px; /* space for mobile bottom action bar */
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; }
.container-bf{ max-width:1200px; }

/* ---- buttons ---- */
.btn-bf-green{
  background:linear-gradient(180deg,var(--bf-green-1),var(--bf-green-2));
  color:#fff; border:0; border-radius:6px; font-weight:500;
  padding:10px 22px; box-shadow:0 4px 14px rgba(14,134,43,.45);
}
.btn-bf-green:hover{ color:#fff; filter:brightness(1.08); transform:translateY(-1px); }
.btn-bf-pink{
  background:linear-gradient(55deg,var(--bf-pink-2),var(--bf-pink));
  color:#fff; border:2px solid var(--bf-gold); border-radius:10px; font-weight:500;
  padding:9px 20px; box-shadow:0 4px 14px rgba(255,45,134,.4);
}
.btn-bf-pink:hover{ color:#fff; filter:brightness(1.08); transform:translateY(-1px); }
.btn-bf-line{
  background:linear-gradient(180deg,var(--bf-green-1),var(--bf-green-2));
  color:#fff; border:0; border-radius:50px; font-weight:400;
  padding:9px 18px; display:inline-flex; align-items:center; gap:8px;
}
.btn-bf-line:hover{ color:#fff; filter:brightness(1.08); }

/* ---- announcement marquee ---- */
.bf-announce{ background:#000; color:#ffd54a; font-size:.92rem; padding:7px 0; overflow:hidden; }
.bf-announce .marquee{ display:inline-block; white-space:nowrap; padding-left:100%; animation:bf-marq 18s linear infinite; }
@keyframes bf-marq{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

/* ---- navbar ---- */
.bf-navbar{ background:rgba(20,5,14,.85); backdrop-filter:blur(8px); border-bottom:1px solid rgba(251,155,44,.25); }
.bf-navbar .navbar-brand img{ height:46px; }
.bf-navbar .nav-link{ color:#fff; font-weight:300; padding:.4rem .9rem; transition:color .2s; }
.bf-navbar .nav-link:hover,.bf-navbar .nav-link.active{ color:var(--bf-gold); }
.bf-navbar .dropdown-menu{ background:var(--bf-dark-2); border:1px solid var(--bf-card-border); }
.bf-navbar .dropdown-item{ color:#eaeaea; }
.bf-navbar .dropdown-item:hover{ background:rgba(255,45,134,.18); color:#fff; }

/* ---- section headings ---- */
.bf-heading{ text-align:center; font-weight:600; margin-bottom:.25rem; }
.bf-heading span{ color:var(--bf-gold); }
.bf-subheading{ text-align:center; color:#ffd9ea; font-weight:300; margin-bottom:1.6rem; }
.bf-section{ padding:46px 0; }

/* ---- hero carousel ---- */
.bf-hero .carousel-item img{ border-radius:16px; }
.bf-hero{ padding-top:26px; }

/* ---- provider marquee ---- */
.bf-providers{ padding:26px 0; overflow:hidden; }
.bf-track{ display:flex; gap:26px; width:max-content; animation:bf-scroll 40s linear infinite; }
.bf-providers:hover .bf-track{ animation-play-state:paused; }
.bf-track img{ height:56px; width:auto; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
@keyframes bf-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- game tabs + grid ---- */
.bf-cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; border:0; margin-bottom:26px; }
.bf-cats .nav-link{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:84px; padding:12px 10px; border-radius:14px; color:#fff; font-weight:300;
  background:var(--bf-card); border:1px solid var(--bf-card-border);
}
.bf-cats .nav-link img{ height:30px; width:auto; }
.bf-cats .nav-link.active{ background:linear-gradient(180deg,var(--bf-pink-2),var(--bf-pink)); border-color:var(--bf-gold); color:#fff; }
.bf-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.bf-grid .game{
  background:var(--bf-card); border:1px solid var(--bf-card-border); border-radius:14px;
  padding:14px; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
  transition:transform .2s, box-shadow .2s;
}
.bf-grid .game:hover{ transform:translateY(-4px); box-shadow:0 8px 22px rgba(255,45,134,.35); border-color:var(--bf-gold); }
.bf-grid .game img{ max-height:100%; object-fit:contain; }

/* ---- about + content ---- */
.bf-card-panel{ background:var(--bf-card); border:1px solid var(--bf-card-border); border-radius:18px; padding:30px; }
.bf-content p{ color:#f1e3ea; font-weight:300; line-height:1.9; }

/* ---- promotions ---- */
.bf-promos .promo{ border-radius:16px; overflow:hidden; border:1px solid var(--bf-card-border); transition:transform .2s; }
.bf-promos .promo:hover{ transform:translateY(-4px); }

/* ---- footer ---- */
.bf-footer{ background:rgba(10,3,8,.6); border-top:1px solid rgba(251,155,44,.25); padding:34px 0 20px; }
.bf-footer a:hover{ color:var(--bf-gold); }
.bf-footer .foot-menu{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; font-weight:300; }
.bf-copell{ text-align:center; color:#d9b8c8; font-size:.86rem; margin-top:18px; }

/* ---- mobile bottom action bar (สมัคร/เข้าสู่ระบบ) ---- */
.bf-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:rgba(20,5,14,.96); border-top:1px solid rgba(251,155,44,.3);
  display:flex; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 20px rgba(0,0,0,.45);
}
.bf-bottomnav .btn{ flex:1; text-align:center; padding:11px 8px; font-size:1rem; }

/* ---- responsive ---- */
@media (max-width:992px){ .bf-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:768px){ .bf-grid{ grid-template-columns:repeat(3,1fr); } .bf-section{ padding:32px 0; } }
@media (min-width:769px){ .bf-bottomnav{ display:none; } body{ padding-bottom:0; } }

/* ==========================================================================
   NAVBAR TOGGLER (hamburger) — เดิมไอคอน default สีเข้ม กลืนกับ navbar เข้ม
   ใส่ไอคอนเส้นสีทอง + กรอบให้เห็นชัด
   ========================================================================== */
.bf-navbar .navbar-toggler{
  border:2px solid rgba(251,155,44,.6);
  border-radius:10px; padding:.35rem .55rem;
  background:rgba(255,255,255,.06);
}
.bf-navbar .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(251,155,44,.3); }
.bf-navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fb9b2c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.6' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   PAGE-BUILDER content blocks — เพิ่มพื้นหลังกล่องเนื้อหา (เดิม inline มีแค่สี)
   ========================================================================== */
.v-content{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  border:1px solid rgba(251,155,44,.22);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
/* FAQ (block_type 5) — การ์ด Q/A */
.fags .bg-faq{ background:linear-gradient(180deg, rgba(42,10,28,.7), rgba(27,7,18,.82)) !important; transition:transform .18s ease, border-color .2s ease; }
.fags .bg-faq:hover{ transform:translateY(-3px); border-color:rgba(251,155,44,.55); }
.fags .bg-faq h3{ display:flex; align-items:flex-start; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px dashed rgba(251,155,44,.3); color:var(--bf-gold); font-weight:700; }
.fags .bg-faq h3::before{ content:"Q"; flex:0 0 auto; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(180deg,var(--bf-gold),#e07d12); color:#1b0712; font-weight:800; }
.fags .bg-faq p{ display:flex; align-items:flex-start; gap:10px; margin:0; color:#f1e3ea; line-height:1.8; }
.fags .bg-faq p::before{ content:"A"; flex:0 0 auto; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--bf-pink); color:#fff; font-weight:800; }
/* block ผลบอลสด / ผลหวย (ถ้ามีในหน้า) */
.livescore-block, .lotto-block, .football-block, .lottopage-block{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.24));
  border:1px solid rgba(251,155,44,.22); border-radius:16px; padding:18px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}