/* ============================================================
   goodapp.pro — assets/css/banners.css
   ระบบแบนเนอร์ (ลำดับ 2): แถว "บริการของเรา" 4 ช่อง (16:9) + แถวของฟรี 3 แถบ (32:9)
   ใช้ตัวแปรสีจาก theme.css (มืด/สว่างตามธีม)
   ============================================================ */
.bn-row{display:grid; gap:16px; margin:0 0 18px;}
.bn-row-svc{grid-template-columns:repeat(4,1fr);}
.bn-row-free{grid-template-columns:repeat(3,1fr); gap:14px;}

.bn-row[data-n="1"]{grid-template-columns:1fr;}
.bn-row[data-n="2"]{grid-template-columns:repeat(2,1fr);}
.bn-row-svc[data-n="3"]{grid-template-columns:repeat(3,1fr);}
.bn-card{
  display:block; color:inherit; text-decoration:none; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.bn-card:hover{border-color:rgba(var(--accent-rgb,34,211,238),.45); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.16);}
.bn-cover{display:block; width:100%; overflow:hidden; background:var(--bg-2);}
.bn-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.bn-wide{aspect-ratio:16/9;}
.bn-strip{aspect-ratio:32/9;}            /* 16:9 ตัดครึ่งความสูง — แนะนำอัปโหลด 960×270 px */
.bn-caption{display:block; padding:12px 14px; font-size:14px; line-height:1.6; color:var(--ink);}
.bn-free{border-radius:12px;}

@media (max-width:900px){
  .bn-row-svc, .bn-row-svc[data-n="3"], .bn-row-svc[data-n="4"]{grid-template-columns:repeat(2,1fr);}
  .bn-row-svc[data-n="1"]{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .bn-row{gap:10px;}
  .bn-row-free, .bn-row-free[data-n]{grid-template-columns:1fr;}   /* มือถือ: แถบซ้อนลงมา แถบละใบ */
}
/* หน้าหมวด: เว้นระยะแถวแบนเนอร์ด้านบนสุด */
.bn-top{padding:18px 0 0;}