/* Trang giải pháp chiếu sáng — MPE Mall. Tham khảo mpe.com.vn (6 nhóm giải pháp).
   Token 1:1 design-system.html §9. Tái dùng .pj-cta/.pj-btn từ projects.css. */
:root{
  --sl-navy:#1F5D8F; --sl-navy-hover:#174A72; --sl-navy-soft:#EDF4F9;
  --sl-green:#2B86A9; --sl-lime:#48AFC6; --sl-blue:#3B9FC0;
  --sl-success:#15803D;
  --sl-border:#EAECF0; --sl-text:#344054; --sl-muted:#667085; --sl-surface:#F8FAFC;
  --sl-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --sl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.sl-wrap{background:#fff; padding:0 0 48px; font-family:var(--sl-font); color:var(--sl-text); font-size:14px; line-height:1.5;}
.sl-hero{background:linear-gradient(135deg,#1F5D8F 0%,#2B86A9 100%); color:#fff; border-radius:14px; padding:36px 32px; margin:24px 0 28px;}
.sl-hero .kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.16); border-radius:999px; padding:5px 12px; margin-bottom:12px;}
.sl-hero h1{margin:0 0 10px; font-size:28px; line-height:1.25; font-weight:700; color:#fff;}
.sl-hero p{margin:0; max-width:760px; font-size:14px; opacity:.92;}
.sl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.sl-card{border:1px solid var(--sl-border); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column;}
.sl-card .img{aspect-ratio:16/10; overflow:hidden; background:var(--sl-surface); display:block;}
.sl-card .img img{width:100%; height:100%; object-fit:cover; display:block;}
.sl-card .body{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.sl-card h2{margin:0; font-size:18px; line-height:1.25; font-weight:700; color:var(--sl-navy);}
.sl-card h2 a{color:inherit; text-decoration:none;}
.sl-card p{margin:0; font-size:14px; line-height:1.65;}
.sl-chips{display:flex; flex-wrap:wrap; gap:6px;}
.sl-chips span{font-family:var(--sl-mono); font-size:12px; font-weight:600; color:var(--sl-navy); background:var(--sl-navy-soft); border-radius:6px; padding:3px 8px;}
.sl-card .go{margin-top:auto; padding-top:4px; font-size:13px; font-weight:700; color:var(--sl-blue); text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.sl-card .go:hover{text-decoration:underline;}
@media (max-width:1024px){
  .sl-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .sl-grid{grid-template-columns:1fr;}
  .sl-hero{padding:26px 20px;}
  .sl-hero h1{font-size:22px;}
}