/* --- BKK 4 Blocks Skin (Elementor FREE) --- */
:root{--grid:rgba(255,255,255,.06);--card:#ffffff18;--card-b:#ffffff25;--shadow:0 22px 60px rgba(2,6,23,.35);--radius:22px}
body{background:#0a1b44}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(60rem 40rem at 8% -10%, rgba(59,130,246,.28), transparent 60%),
  radial-gradient(65rem 45rem at 110% -6%, rgba(34,197,94,.18), transparent 58%),
  linear-gradient(180deg,#0c2364,#0b1f55 40%,#0a1a44);}
body:after{content:"";position:fixed;inset:0;z-index:-1;background-image:
  linear-gradient(var(--grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;mix-blend-mode:overlay;opacity:.5;
  mask-image: radial-gradient(90rem 60rem at 50% 0%, black 50%, transparent 100%);}

/* glass card */
.bkk-card .elementor-container,
.bkk-card .elementor-widget-image-box .elementor-image-box-wrapper{
  background:var(--card);backdrop-filter:blur(8px);border:1px solid var(--card-b);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(16px,2.2vw,26px)}
.bkk-card.hero .elementor-container{padding:clamp(24px,3vw,36px)}

/* hero text & accent */
#hero .elementor-heading-title{font-weight:900;letter-spacing:.2px;
  background:linear-gradient(90deg,#60a5fa,#22c55e,#60a5fa);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:heroMove 8s linear infinite}
@keyframes heroMove{0%{background-position:0% 50%}100%{background-position:200% 50%}}
#hero .accent{color:#ffd166}

/* badges & ribbon */
.bkk-badge{display:inline-block;background:#e2e8f033;border:1px solid #ffffff33;color:#e5edff;
  padding:.35rem .7rem;border-radius:999px;font-weight:800;margin-right:.4rem}
.bkk-badge.bkk-outline{background:transparent}
.bkk-ribbon{display:inline-block;background:#ffd166;color:#111827;font-weight:900;
  padding:.35rem .6rem;border-radius:10px}

/* CTA buttons */
.bkk-cta-row .elementor-container{gap:12px}
.btn-neo .elementor-button{position:relative;overflow:hidden;border:0;border-radius:14px;
  font-weight:800;color:#062d13;background:linear-gradient(90deg,#22c55e,#2dd4bf,#60a5fa,#22c55e);
  background-size:300% 100%;animation:btnRun 6s linear infinite;box-shadow:0 12px 30px rgba(34,197,94,.25)}
.btn-ghost .elementor-button{border-radius:14px;font-weight:800;color:#e2e8f0;background:transparent;
  border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.elementor-button:hover{transform:translateY(-1px)}
@keyframes btnRun{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* promo cards */
.bkk-cards .elementor-image-box-wrapper{background:rgba(15,23,42,.45);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;
  box-shadow:0 12px 36px rgba(0,0,0,.35);transition:transform .2s ease, box-shadow .2s ease}
.bkk-cards .elementor-widget-image-box:hover .elementor-image-box-wrapper{
  transform:translateY(-6px);box-shadow:0 18px 54px rgba(0,0,0,.45)}
.bkk-cards .elementor-image-box-title{color:#fff;font-weight:900}
.bkk-cards .elementor-image-box-description{color:#cbd5e1}

/* reviews grid */
.reviews-grid .elementor-container{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1024px){.reviews-grid .elementor-container{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.reviews-grid .elementor-container{grid-template-columns:1fr}}
.review-card{color:#e5edff}
.review-card .rev-head{display:flex;justify-content:space-between;margin-bottom:6px;color:#cbd5e1}
.review-card .rev-stars{color:#ffd166;letter-spacing:2px;margin-bottom:6px}

/* price table */
.neo-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;background:#0e1e4a;color:#e5edff}
.neo-table thead th{padding:12px 14px;text-align:left;background:#0b245f;border-bottom:1px solid rgba(255,255,255,.1)}
.neo-table tbody td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.neo-table tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.muted{color:#9fb5ff}

/* === FIX HERO BUTTONS ROW (no structure change needed) === */
/* ทำให้คอลัมน์ซ้ายของ HERO จัด widget แบบ flex: ข้อความ/หัวข้อกินเต็มบรรทัด แต่ปุ่มอยู่แถวเดียว */
#hero .elementor-column:first-child .elementor-widget-wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
/* ทุก widget (ยกเว้นปุ่ม) ให้กินเต็มบรรทัด */
#hero .elementor-column:first-child .elementor-widget-wrap > :not(.elementor-widget-button){
  flex: 1 1 100%;
}
/* ปุ่มให้เรียงข้างกันและไม่ขยายเต็มบรรทัด */
#hero .elementor-column:first-child .elementor-widget-wrap > .elementor-widget-button{
  flex: 0 0 auto;
}
/* ขนาดปุ่มและเว้นระยะให้พอดี */
#hero .elementor-column:first-child .elementor-widget-button .elementor-button{
  min-width: 180px; justify-content:center;
}

/* มือถือ: ซ้อนปุ่มลงเป็นแนวตั้ง กว้าง 80% กึ่งกลางสวย ๆ */
@media (max-width:767px){
  #hero .elementor-column:first-child .elementor-widget-button .elementor-button{
    display:block; width:80%; margin:8px auto 0;
    min-width: unset;
  }
}