/* หน้าบริการ: งานแอร์ 3 อย่างช่วงใหญ่ ข้อความกับรูปสลับข้าง · งานรอง 4 อย่างการ์ด 2x2 (แถบปุ่มลัด .svc-bar กับแถบปิดท้าย .cta-row อยู่ใน base.css) */
.svc{padding-block:64px}
.svc--tint{background:var(--sky-50)}
.svc-in{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.svc-in.svc--flip .svc-text{order:2}
.svc-text h2{margin-bottom:12px}
.svc-text p{color:var(--c-muted);max-width:34em}
.svc-text .price{margin-top:16px}
.svc-checks{flex-direction:column;gap:6px;margin-top:16px}
.svc-checks li{white-space:normal;color:var(--ink)}
.svc-deal{--c-strong:#fff;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:18px;padding:14px 18px;border-radius:14px;
  background:var(--navy);color:#fff;font-family:var(--f-head);font-weight:600}
.svc-deal span{flex-basis:100%;font-family:var(--f-body);font-weight:500;font-size:.9rem;color:#c9d8f5}
.svc-deal b{font-size:2rem;line-height:1.1}
.svc-deal a{margin-left:auto;color:#fff;font-size:.95rem;text-underline-offset:3px}
.svc-text .svc-deal{color:#fff}
.svc-sub{margin-top:14px;font-family:var(--f-head);font-weight:600;color:var(--navy)}
.svc-sub+.svc-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin-top:8px}
/* ราคาเริ่มต้นทุกงาน: การ์ด 4 ใบ กดแล้วเลื่อนไปงานนั้น · ติดตั้งแอร์เป็นใบน้ำเงิน (งานหลักของร้าน) */
.prices{padding-block:56px 64px;background:var(--sky-50)}
.prices-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:6px 24px;margin-bottom:24px}
.prices-head p{color:var(--c-muted)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--ink);
  text-decoration:none;box-shadow:0 22px 36px -32px rgba(16,36,95,.8);transition:transform .25s,box-shadow .25s,border-color .25s}
.pcard dl{margin:12px 0 0}
.pcard dl div{display:flex;align-items:baseline;justify-content:space-between;gap:2px 12px;flex-wrap:wrap;padding:9px 0;border-bottom:1px dashed var(--line)}
.pcard dl div:last-child{border-bottom:0}
.pcard dt{font-size:.93rem;font-weight:500;line-height:1.4}
.pcard dd{margin:0 0 0 auto;font-family:var(--f-head);font-weight:600;color:var(--navy);white-space:nowrap}
.pcard dd b{font-size:1.5rem;line-height:1}
.pcard-note{margin-top:6px;font-size:.88rem;line-height:1.5;color:var(--c-muted)}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px}
.pcard-foot span:first-child{padding:3px 12px;border-radius:999px;background:var(--sky-50);color:var(--navy);font-family:var(--f-head);font-weight:600;font-size:.85rem}
.pcard-go{font-family:var(--f-head);font-weight:600;font-size:.9rem;color:var(--blue-700);white-space:nowrap}
.pcard-go::after{content:" ›";font-size:1.1em}
.pcard--main{--c-heading:#fff;--c-strong:#fff;background:linear-gradient(160deg,var(--blue-700),var(--navy));border-color:transparent;color:#fff}
.pcard--main dl div{border-bottom-color:rgba(255,255,255,.2)}
.pcard--main dd{color:#fff}
.pcard--main .pcard-foot span:first-child{background:#fff}
.pcard--main .pcard-go{color:#fff}
.pcard:focus-visible{outline:3px solid var(--blue-600);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 44px -30px rgba(16,36,95,.85);border-color:var(--blue-500)}}

/* รายการจุดเด่นต่องาน: ป้ายเม็ดยาเรียงแถว · รายการ "ราคานี้รวมแล้ว" ยังเป็นสองคอลัมน์เหมือนเดิม */
.svc-checks:not(.svc-sub + .svc-checks){flex-direction:row;gap:8px}
.svc-checks:not(.svc-sub + .svc-checks) li{padding:4px 14px 4px 32px;border-radius:999px;background:var(--sky-50);font-size:.93rem;line-height:1.5}
.svc-checks:not(.svc-sub + .svc-checks) li::before{left:8px;top:50%;margin-top:-9px}
.svc--tint .svc-checks:not(.svc-sub + .svc-checks) li{background:#fff}
.mini .svc-checks li{background:var(--sky-50)!important}
.mini-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:auto;padding-top:18px}
.mini-links a{font-family:var(--f-head);font-weight:600;color:var(--blue-700);text-underline-offset:3px;padding:6px 0}
.mini-links a:first-child{color:var(--line-green-text)}

/* ป้ายราคาที่ร้านแจ้ง: แถวงานซ้าย ราคาขวา · รับประกันเป็นป้ายเม็ดยาท้ายกล่อง */
.rate{margin-top:18px;padding:14px 18px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);max-width:34em}
.svc--tint .rate{box-shadow:0 14px 26px -24px rgba(16,36,95,.6)}
.mini .rate{background:var(--sky-50);border-color:transparent;box-shadow:none;margin-top:14px}
.rate-k{font-size:.88rem;font-weight:500;color:var(--c-muted)}
.rate dl{margin:0}
.rate dl div{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:8px 0;border-bottom:1px dashed var(--line)}
.mini .rate dl div{border-bottom-color:#c9daf3}
.rate dl div:last-child{border-bottom:0}
.rate dt{font-weight:500;color:var(--ink);line-height:1.45}
.rate dd{margin:0;flex:none;font-family:var(--f-head);font-weight:600;color:var(--navy);white-space:nowrap}
.rate dd b{font-size:1.45rem;line-height:1}
.rate-note{margin-top:6px;font-size:.92rem;color:var(--c-muted)}
.svc-text .rate-note{color:var(--c-muted)}
.rate-warr{display:inline-flex;align-items:center;gap:6px;margin:10px 8px 0 0;padding:4px 12px 4px 6px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:.88rem;font-weight:500;--c-strong:#fff}
.rate-warr::before{content:"✓";width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--cyan);font-size:.7rem;font-weight:700}
.svc-text .rate-warr{color:#fff}
.mini .rate:has(> .rate-warr:only-child){padding:0;background:none;margin-top:10px}
.mini .rate:has(> .rate-warr:only-child) .rate-warr{margin-top:0}
.svc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.svc-work{font-weight:600;color:var(--blue-700);text-underline-offset:3px;padding:10px 0}
.svc-tel{font-family:var(--f-head);font-weight:600;color:var(--navy);text-decoration:none;padding:10px 0}
.svc-pics{display:grid;gap:12px;grid-template-columns:2fr 1fr;aspect-ratio:3/1.95}
.svc-pics img{width:100%;height:100%;object-fit:cover;border-radius:14px;background:var(--sky-100);min-height:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.svc-pics img:hover{transform:scale(1.03)}}
/* งานรอง: รูปใหญ่บน รูปย่อ 3 รูป ข้อความล่าง */
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mini{display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--line);
  box-shadow:0 22px 36px -32px rgba(16,36,95,.8);transition:transform .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){.mini:hover{transform:translateY(-4px);box-shadow:0 30px 44px -32px rgba(16,36,95,.85)}}
.mini-pics{display:grid;gap:6px;padding:6px}
.mini-pics>img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:15px 15px 6px 6px;background:var(--sky-100)}
.mini-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mini-thumbs img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;background:var(--sky-100)}
.mini-body{display:flex;flex-direction:column;flex:1;padding:16px 22px 22px}
.mini-body>p{margin-top:6px;color:var(--c-muted)}
.mini-body .svc-checks{margin-top:12px}
.mini-body .svc-cta{margin-top:auto;padding-top:18px}
.svc-pics--3{grid-template-rows:1fr 1fr}
.svc-pics--3 .big{grid-row:span 2}
/* 5 รูป: ใหญ่ซ้าย เล็ก 2x2 */
.svc-pics--5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/1.6}
.svc-pics--5 .big{grid-row:span 2}
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .mini-grid{grid-template-columns:1fr}
  .svc-in{grid-template-columns:1fr;gap:24px}
  .svc-in.svc--flip .svc-text{order:0}
  .svc-pics{order:-1}
}
@media (max-width:560px){
  /* มือถือ: รูปใหญ่เต็มแถว รูปเล็กเรียงใต้ */
  .svc-pics--5{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;aspect-ratio:auto;gap:8px}
  .svc-pics--5 .big{grid-column:1/-1;grid-row:auto;aspect-ratio:720/594}
  .svc-pics--5 img:not(.big){aspect-ratio:1;border-radius:10px}
}
@media (max-width:560px){
  .svc{padding-block:44px}
  .svc-cta .btn{flex:1 1 100%}
  .svc-sub+.svc-checks{grid-template-columns:1fr}
  .svc-deal a{margin-left:0}
  .prices{padding-block:40px 44px}
  .pgrid{grid-template-columns:1fr;gap:12px}
  .pcard{padding:18px 18px 16px}
}