:root{
  --brand:#c9a227; 

  --brand-dark:#b6911f;
  --text:#212529;
  --muted:#6c757d;
  --bg:#ffffff;
  --card:#ffffff;
  --border:#e9ecef;
}

*{box-sizing:border-box}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:"Prompt",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif
}
a{text-decoration:none}
img{display:block;max-width:100%}

/* Topbar */
.topbar{
  background:#f8f9fa;
  border-bottom:1px solid #eee;
  font-size:.9rem;
  padding:6px 0
}
.topbar a{color:#000;margin-left:10px}
.topbar a:hover{color:var(--brand)}

/* Navbar */
.navbar{
  padding:.5rem 0;
  background:#fff;
  border-bottom:1px solid var(--border)
}
.navbar .navbar-brand img{height:72px}
.nav-link{color:#222}
.nav-link:hover,.nav-link:focus{color:var(--brand)}

/* ปุ่มแบรนด์ */
.btn-brand{background:var(--brand);color:#111;border:none}
.btn-brand:hover{background:var(--brand-dark);color:#111}

/* Banner (Carousel) */
.banner-img{height:460px;object-fit:cover}
.banner-search .form-control{border-radius:12px 0 0 12px}
.banner-search .btn{border-radius:0 12px 12px 0}

/* =========================================================
   🔧 ลบ/ปิด overlay สีเหลือง/เงาที่ทับรูปในแบนเนอร์ให้หมด
   — ไม่กระทบกล่องค้นหา (.banner-search)
   ========================================================= */

/* 1) ปิด pseudo overlays ที่มาจาก CSS */
#bannerCarousel::before,
#bannerCarousel::after,
#bannerCarousel .carousel-inner::before,
#bannerCarousel .carousel-inner::after,
#bannerCarousel .carousel-item::before,
#bannerCarousel .carousel-item::after{
  content:none !important;
  display:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* 2) ปิด layer ที่กินเต็มจอซึ่งชอบใช้เป็น overlay */
#bannerCarousel .carousel-item > .position-absolute.w-100.h-100:not(.banner-search),
#bannerCarousel .carousel-item > .position-absolute.top-0.start-0.w-100.h-100:not(.banner-search){
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 3) ปิด div ชื่อที่นิยมใช้เป็น overlay */
#bannerCarousel .overlay,
#bannerCarousel .banner-overlay,
#bannerCarousel .scrim,
#bannerCarousel .mask,
#bannerCarousel .holder,
#bannerCarousel .shade,
#bannerCarousel .gradient,
#bannerCarousel .glassy,
#bannerCarousel .glass,
#bannerCarousel .backdrop{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 4) เคสที่ overlay ถูกใส่เป็น inline-style linear-gradient */
#bannerCarousel [style*="linear-gradient"]:not(.banner-search){
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ลูกศรควบคุม (ให้มองชัดขึ้นนิดหน่อย) */
#bannerCarousel .carousel-control-prev-icon,
#bannerCarousel .carousel-control-next-icon{
  filter:invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.05)
}
.card .card-img-top{height:200px;object-fit:cover}
.card .card-body{padding:14px}

/* Cute section */
.cute-footer-bar{background:#fff;border:1px dashed var(--border);border-radius:12px}
.cute-icon{font-size:20px}

/* Lists small */
.text-truncate-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

/* Footer */
.footer{background:#101010;color:#cfcfcf}
.footer a{color:#e9d27a}
.footer-title{font-weight:700;margin-bottom:10px}

/* ======================== */
/* ปรับปุ่มทั้งหมดเป็นสีเหลืองทอง */
/* ======================== */
.btn,
button,
input[type="submit"],
input[type="button"]{
  background-color:var(--brand) !important;
  color:#111 !important;
  border:none !important;
  transition:all .2s ease-in-out;
  border-radius:8px;
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background-color:var(--brand-dark) !important;
  color:#111 !important;
  transform:translateY(-1px);
}

/* ปุ่ม Outline */
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-danger{
  color:var(--brand) !important;
  border:2px solid var(--brand) !important;
  background-color:transparent !important;
}
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-danger:hover{
  background-color:var(--brand) !important;
  color:#111 !important;
}

/* บังคับสีปุ่ม Bootstrap อื่นให้เป็นทอง */
.btn-primary,
.btn-success,
.btn-secondary,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark{
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#111 !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-secondary:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-dark:hover{
  background-color:var(--brand-dark) !important;
  border-color:var(--brand-dark) !important;
  color:#111 !important;
}

/* ขนาดปุ่ม */
.btn-sm{padding:6px 16px;font-size:.9rem}
.btn-lg{padding:12px 28px;font-size:1.1rem;font-weight:700}

/* ปุ่มใน Banner */
.banner-search .btn{
  background-color:var(--brand) !important;
  color:#111 !important;
  border:none;
}
.banner-search .btn:hover{
  background-color:var(--brand-dark) !important;
  color:#111 !important;
}
