/* =========================
   Feature Cards - match sample layout
   ========================= */

.feature-section{
  position: relative;
}

/* แถบหัวแดงเต็มกว้าง */
.feature-strip{
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  font-weight: 650;
  letter-spacing: .02em;
  color: #fff;

  background: linear-gradient(90deg, rgba(255,0,0,.85), rgba(255,45,141,.75));
  box-shadow: 0 16px 28px rgba(255,0,0,.12);
  border: 1px solid rgba(255,255,255,.12);
}

/* การ์ดหลัก */
.featurex{
  border-radius: 22px;
  overflow: hidden;
  min-height: 420px;

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);

  padding: 18px 18px 16px;
  position: relative;
}

/* รูปบนสุดใหญ่อยู่กึ่งกลาง */
.featurex-media{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
}

.featurex-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* title กึ่งกลาง สีทอง */
.featurex-title{
  margin: 14px 0 8px;
  text-align: center;
  font-weight: 650;
  letter-spacing: .02em;
  color: #f0c44c;
  text-transform: uppercase;
  text-shadow: 0 12px 26px rgba(0,0,0,.35);
}

/* divider */
.featurex-divider{
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,.14);
  margin: 8px 0 10px;
}

/* text */
.featurex-text{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.25;
  font-size: .75rem;
}

/* สีพื้นหลังรายใบ (ให้คล้ายภาพตัวอย่าง) */
.featurex-pink{
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(255,45,141,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}
.featurex-gold{
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(214,165,42,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}
.featurex-orange{
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(255,140,0,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}
.featurex-brown{
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(185,120,40,.20), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}
.featurex-amber{
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(255,200,80,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}
.featurex-blue{
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(58,107,255,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}

/* hover */
.featurex:hover{
  transform: translateY(-2px);
  transition: .18s ease;
  border-color: rgba(214,165,42,.25);
}

/* responsive media heights */
@media (max-width: 991.98px){
  .featurex-media{ height: 210px; }
}
@media (max-width: 575.98px){
  .featurex{ min-height: auto; }
  .featurex-media{ height: 200px; }
  .featurex-text{ font-size: .95rem; }
}