/* หน้าแรกตามภาพ Final ของเจ้าของ (2026-10-18 · PREVIEW) · notes/home-v4/make_home_v4.py
   ขนาด/ตำแหน่งวัดจากภาพต้นแบบกว้าง 1672px · จอ ≥1200 ใช้หน่วย vw ให้สัดส่วนเท่าต้นแบบ */
.h4-page{--h4-navy:#0e2152;--h4-or:#f26a1b;--h4-ink:#162447;--h4-mut:#4b5672}

/* ── Hero ── */
.h4-hero{position:relative;overflow:hidden;background:linear-gradient(90deg,#f3f5f8 0%,#eef1f5 40%,#e9edf2 100%)}
.h4-hero-img{position:absolute;top:0;right:0;width:58.14%;height:100%;object-fit:cover;object-position:left center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%);mask-image:linear-gradient(90deg,transparent 0,#000 13%)}
.h4-hero-in{position:relative;z-index:1;height:23.56vw;padding:1.85vw 0 0 6.28vw;box-sizing:border-box}
.h4-hero h1{margin:0;font-size:4.02vw;line-height:.98;font-weight:700;letter-spacing:-.02em;color:var(--h4-navy)}
.h4-hero h1 span{display:block}
.h4-h1b{color:var(--h4-or)}
.h4-sub{margin:.75vw 0 0;font-size:1.27vw;line-height:1.5;color:#3a4561}
.h4-sub span{display:block}
.h4-ctas{display:flex;gap:.9vw;margin-top:.8vw}
.h4-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6vw;border-radius:.5vw;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background-color .2s,color .2s,box-shadow .2s}
.h4-btn:hover{text-decoration:none}
.h4-hero .h4-btn{height:2.99vw;font-size:1.08vw}
.h4-btn-main{width:14.7vw;background:var(--h4-navy);color:#fff;box-shadow:0 6px 16px rgba(14,33,82,.2)}
.h4-btn-main:hover{background:#18306f;color:#fff}
.h4-btn-out{width:12vw;background:#fff;color:var(--h4-navy);border:2px solid var(--h4-navy);box-sizing:border-box}
.h4-btn-out:hover{background:#eef2fa;color:var(--h4-navy)}
.h4-hero .h4-btn .h4-ic{width:1.3vw;height:1.3vw}
.h4-ben{list-style:none;margin:1.35vw 0 0 -.45vw;padding:0;display:flex;gap:0}
.h4-ben li:nth-child(1){width:9.39vw}.h4-ben li:nth-child(2){width:10.17vw}.h4-ben li:nth-child(3){width:12.98vw}
.h4-ben li{display:flex;align-items:center;gap:.5vw;white-space:nowrap;flex:none}
.h4-bic{display:grid;place-items:center;flex:none;width:2.75vw;height:2.75vw;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(14,33,82,.12);color:var(--h4-navy)}
.h4-bic .h4-ic{width:1.35vw;height:1.35vw}
.h4-ben span:last-child{display:flex;flex-direction:column;line-height:1.3}
.h4-ben b{font-size:.9vw;color:var(--h4-ink)}
.h4-ben small{font-size:.72vw;color:var(--h4-mut)}
.h4-page a:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}

/* ── โปรแกรม ── */
.h4-progs{background:#f4f6f9;padding:20px 0 34px}
.h4-progs-in{max-width:1541px;margin:0 auto;padding:0 18px;box-sizing:content-box}
.h4-progs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.h4-progs-head h2{margin:0;font-size:34px;line-height:1.25;color:var(--h4-ink)}
.h4-progs-head p{margin:2px 0 0;font-size:16.5px;color:var(--h4-mut)}
.h4-btn-all{height:38px;padding:0 16px;font-size:14.5px;background:#fff;color:var(--h4-navy);border:1.5px solid var(--h4-navy);border-radius:8px;margin-bottom:6px}
.h4-btn-all:hover{background:var(--h4-navy);color:#fff}
.h4-btn-all .h4-ic{width:17px;height:17px}
.h4-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.h4-card{display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(16,30,70,.08);transition:box-shadow .2s,transform .2s}
.h4-card:hover{box-shadow:0 10px 24px rgba(16,30,70,.14);transform:translateY(-2px)}
.h4-card-img{display:block;aspect-ratio:7/5;overflow:hidden;background:#e9edf2}
.h4-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.h4-card-body{display:flex;flex-direction:column;flex:1;padding:8px 14px 12px 16px}
.h4-card-head{display:flex;align-items:center;gap:10px}
.h4-card-head>div{min-width:0}
.h4-card-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:9px;color:#fff}
.h4-card-ic .h4-ic{width:26px;height:26px}
.h4-card h3{margin:0;font-size:17.5px;line-height:1.2;letter-spacing:-.2px}
.h4-card h3 a{color:var(--h4-ink);text-decoration:none}
.h4-card h3.h4-long{font-size:15.5px;letter-spacing:-.3px;white-space:nowrap}
.h4-card h3 a:hover{text-decoration:underline}
.h4-card-typ{margin:1px 0 0;font-size:15.5px;line-height:1.3;color:#2b3550}
.h4-card-desc{margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--h4-mut)}
.h4-card-go{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:38px;padding:0 20px;margin-top:auto;border-radius:7px;background:#1668e3;color:#fff;font-size:15px;font-weight:700;text-decoration:none;transition:background-color .2s}
.h4-card-desc{margin-bottom:12px}
.h4-card-go:hover{background:#0f52b8;color:#fff;text-decoration:none}

/* หัวเว็บ: ปุ่มขอใบเสนอราคาเป็นสีส้มแบบต้นแบบ (ข้อมูล/ลิงก์จริงไม่เปลี่ยน) */
.h4-page .topbar .tb-quote{background:var(--h4-or);border-color:var(--h4-or);color:#fff}
.h4-page .topbar .tb-quote:hover{background:#dd5a0f;color:#fff}

@media (prefers-reduced-motion:no-preference){
  .h4-hero-in{animation:h4Up .5s ease-out both}
}
@keyframes h4Up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Responsive ── */
@media (max-width:1599.98px) and (min-width:1280px){
  .h4-grid{gap:14px}
  .h4-card-body{padding:7px 10px 10px 12px}
  .h4-card-ic{width:38px;height:38px}.h4-card-ic .h4-ic{width:22px;height:22px}
  .h4-card h3{font-size:16px}.h4-card h3.h4-long{font-size:13.5px}
  .h4-card-typ{font-size:14px}
  .h4-card-desc{font-size:12.5px;margin-top:9px}
}
@media (max-width:1279.98px){.h4-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1199.98px){
  .h4-hero h1{line-height:1.12}
  /* เรียงชั้น: ข้อความ → ภาพ Hero ก้อนเดียว */
  .h4-hero-img{position:static;display:block;width:100%;height:auto;aspect-ratio:972/394;-webkit-mask-image:none;mask-image:none}
  .h4-hero{display:flex;flex-direction:column}
  .h4-hero-in{order:-1;height:auto;padding:28px 24px 14px}
  .h4-hero h1{font-size:clamp(34px,6vw,54px)}
  .h4-sub{font-size:clamp(15.5px,1.9vw,19px);margin-top:10px}
  .h4-ctas{gap:12px;margin-top:18px;flex-wrap:wrap}
  .h4-hero .h4-btn{height:50px;font-size:16px;padding:0 20px;width:auto;border-radius:9px;gap:9px}
  .h4-hero .h4-btn .h4-ic{width:19px;height:19px}
  .h4-ben{margin:20px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .h4-ben li{white-space:normal;gap:9px;width:auto!important}
  .h4-bic{width:40px;height:40px}.h4-bic .h4-ic{width:20px;height:20px}
  .h4-ben b{font-size:14px}.h4-ben small{font-size:12px}
}
@media (max-width:899.98px){
  .h4-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .h4-ben{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599.98px){
  .h4-hero-in{padding:22px 18px 12px}
  .h4-sub span{display:inline}
  .h4-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .h4-hero .h4-btn{padding:0 10px;font-size:15px;height:48px}
  .h4-progs-head h2{font-size:25px}
  .h4-progs-head p{font-size:15px}
  .h4-btn-all{width:100%}
  .h4-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:599.98px){.h4-card-go{min-height:44px;align-self:stretch}}
/* ราคาบนการ์ด 3 ใบ (Label · Remote LAN · Bill Designer · 2026-10-22) ใต้คำอธิบาย เหนือปุ่ม */
.h4-card-price{margin:auto 0 12px;font-size:15px;line-height:1.3;color:#2b3550}
.h4-card-price+.h4-card-go{margin-top:0}
.h4-card-price b{font-size:20px;font-weight:800;color:#0f2a5c;letter-spacing:-.2px}