:root{--news:#E5004F;--promo:#ED6C00;--article:#002C76}
.nbadge{font-family:'Kanit';font-weight:600;font-size:12px;color:#fff;padding:4px 12px;border-radius:20px;display:inline-block}
.nbadge.news{background:var(--news)}.nbadge.promo{background:var(--promo)}.nbadge.article{background:var(--article)}

/* ===== เลย์เอาต์ List + Sidebar (ดีไซน์ที่ผู้ใช้เลือกจาก news-demo แบบ 2) ===== */
.lay{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start;padding-top:22px}
.lcard{display:grid;grid-template-columns:260px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line);cursor:pointer}
.lcard:first-child{padding-top:0}
.lcard .im{height:160px;border-radius:12px;overflow:hidden;background:var(--panel)}
.lcard .im>div{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .45s ease}
.lcard:hover .im>div{transform:scale(1.06)}
.lcard h3{font-family:'Kanit';font-weight:600;font-size:18px;line-height:1.4;margin:7px 0 8px;transition:.15s}
.lcard:hover h3{color:var(--red)}
.lcard p{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard .dt{font-family:'Chakra Petch';font-size:12px;color:var(--muted);margin-top:10px;display:flex;gap:14px}
.lcard.big{grid-template-columns:1fr;padding-top:0}
.lcard.big .im{height:300px}
.lcard.big h3{font-size:24px}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* แถบข้าง */
.sb{position:sticky;top:90px;display:flex;flex-direction:column;gap:26px}
.sbx{border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.sbx h4{font-family:'Signs','Kanit';font-weight:700;font-size:15px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--red);display:inline-block}
.pop{display:flex;gap:12px;padding:9px 0;cursor:pointer;align-items:center}
.pop .n{font-family:'Signs','Chakra Petch';font-weight:700;font-size:18px;color:#d9dadf;width:24px;flex:none}
.pop b{font-family:'Kanit';font-weight:500;font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:.15s}
.pop:hover b{color:var(--red)}
.pop .vw{font-family:'Chakra Petch';font-size:11px;color:var(--muted)}
.tchip{display:inline-flex;align-items:center;gap:6px;font-family:'Kanit';font-size:13px;border:1px solid var(--line);border-radius:20px;padding:6px 14px;margin:0 6px 8px 0;transition:.15s;color:#444}
.tchip:hover,.tchip.on{background:var(--red);border-color:var(--red);color:#fff}
.tchip i{font-style:normal;font-family:'Chakra Petch';font-size:11px;opacity:.7}

/* แบ่งหน้า 10 บทความ/หน้า */
.pg{display:flex;gap:8px;justify-content:center;align-items:center;padding:34px 0 60px;flex-wrap:wrap}
.pg a,.pg span.cur{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;font-family:'Signs','Chakra Petch';font-weight:600;font-size:14px;color:#444;transition:.15s;padding:0 12px}
.pg a:hover{border-color:var(--red);color:var(--red)}
.pg span.cur{background:var(--red);border-color:var(--red);color:#fff}
.pg .dots{color:#bbb}
.pg .pn{font-family:'Kanit';font-weight:500;font-size:13.5px}

@media(max-width:900px){.lay{grid-template-columns:1fr}.sb{position:static}}
@media(max-width:600px){.lcard{grid-template-columns:1fr}.lcard .im{height:190px}}