#sub-banners .sb-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}
#sub-banners .sb-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

#sub-banners .sb-inner {
  position: relative;
  display: flex;
  align-items: flex-start; /* [แก้] ยึดความสูงคงที่ ไม่ยืดตาม */
  gap: 0;

  min-height: 220px;
  padding: 0;
  isolation: isolate;

  height: 300px; /* [สำคัญ] ความสูงสำหรับ PC */
}

/* [แก้] ปรับ Media Query ให้สอดคล้องกัน */
@media (max-width: 1199.98px) {
  #sub-banners .sb-inner {
    height: 260px;
  }
}
@media (max-width: 767.98px) {
  #sub-banners .sb-inner {
    height: 240px;
  }
}
/* (ลบ 575px ออกไปก่อน) */

/* ---------- Background colors ---------- */
#sub-banners .sb-card {
  background: #fff;
}
#sub-banners .sb-pink .sb-text {
  background: #eb2856;
}
#sub-banners .sb-orange .sb-text {
  background: #f3a163;
}
#sub-banners .sb-blue .sb-text {
  background: #7ca1f4;
}

/* ---------- Text ---------- */
#sub-banners .sb-text {
  color: #fff;
  z-index: 2;
  flex-basis: 45%;
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  position: relative;

  height: 100%;
}

/* Layer เบลอขอบ */
#sub-banners .sb-text::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10%;
  bottom: 0;
  width: 20%;
  background: linear-gradient(
    to right,
    var(--sb-bg-color-end, transparent) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

#sub-banners .sb-pink .sb-text::after {
  --sb-bg-color-end: #eb2856;
}
#sub-banners .sb-orange .sb-text::after {
  --sb-bg-color-end: #f3a163;
}
#sub-banners .sb-blue .sb-text::after {
  --sb-bg-color-end: #7ca1f4;
}

#sub-banners .sb-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
}
#sub-banners .sb-title {
  margin: 0.5rem 0 0.25rem;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.6rem);
}

#sub-banners .sb-sub {
  opacity: 0.95;
  margin-bottom: 0.75rem;

  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.6em;
}

#sub-banners .sb-link {
  font-weight: 700;
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
}

/* ---------- Model image ---------- */
#sub-banners .sb-model {
  width: 55% !important;
  flex-basis: 55%;
  flex-shrink: 0;

  position: static !important;
  right: 0;
  bottom: 0;
  z-index: 1;

  height: 100% !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center !important;
  background-color: #f7f7f7;

  padding: 0;
  box-sizing: border-box;

  filter: none;
  transition: transform 0.45s ease;
}

/* ---------- Hover ---------- */
#sub-banners .sb-card:hover .sb-model {
  transform: scale(1.03);
}

/*

/*
=============================================
  [--- นี่คือ Media Query ที่แก้ไขแล้ว (สำหรับมือถือ) ---]
  (Layout: ข้อความซ้าย | รูปขวา เสมอ)
=============================================
*/
@media (max-width: 575.98px) {
  /* 1. [แก้] เพิ่มความสูงการ์ด ให้โปร่งขึ้น */
  #sub-banners .sb-inner {
    height: 220px; /* เพิ่มจาก 200px เป็น 220px (ปรับค่านี้ได้) */
  }

  /* 2. [แก้] ปรับสัดส่วนข้อความ (ซ้าย) */
  #sub-banners .sb-text {
    flex-basis: 55%; /* [แก้] ให้พื้นที่ข้อความ 55% (เพื่อให้รูปไม่เบียด) */
    padding: 1rem;
    justify-content: center; /* [แก้] จัดกึ่งกลางแนวตั้ง */
    gap: 0.1rem; /* [แก้] ลดช่องว่างระหว่างบรรทัดลงเล็กน้อย */
  }

  /* 3. [แก้] ปรับขนาดฟอนต์ให้อ่านง่ายขึ้น (แก้ "เล็กไป") */
  #sub-banners .sb-eyebrow {
    font-size: 0.75rem; /* 12px */
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.25rem;
  }
  #sub-banners .sb-title {
    font-size: 1.15rem; /* 18.4px - ใหญ่ขึ้น */
    margin-bottom: 0.25rem;
  }
  #sub-banners .sb-sub {
    font-size: 0.875rem; /* 14px - ใหญ่ขึ้น */
    margin-bottom: 0.6rem;
    -webkit-line-clamp: 2;
  }
  #sub-banners .sb-link {
    font-size: 0.9rem; /* 14.4px */
  }

  /* 4. ไล่สีเบลอขอบ (คงเดิม) */
  #sub-banners .sb-text::after {
    right: -15%;
    top: 0;
    bottom: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(
      to right,
      var(--sb-bg-color-end, transparent) 0%,
      transparent 100%
    );
  }

  /* 5. [แก้] ปรับสัดส่วนรูปภาพ (ขวา) */
  #sub-banners .sb-model {
    flex-basis: 45%; /* [แก้] ให้พื้นที่รูป 45% */
    width: 45% !important;
    height: 100% !important; /* สูงเต็ม 220px */
    object-position: center 30%; /* โฟกัสส่วนบนของรูปเล็กน้อย */
  }
}