/* desk.css — เลย์เอาต์จอคอม (≥960px) · จอมือถือใช้สไตล์ในหน้าเดิมทั้งหมด ไฟล์นี้ไม่แตะ */
.dnav{ display:none; }

@media (min-width:960px){
  html,body{ background:var(--paper); }
  .phone{ width:100%; max-width:none; padding-bottom:0; --pad:max(40px, calc((100% - 1160px) / 2)); }
  .bar, .menu{ display:none; }

  /* หัวเว็บ: เมนู + โทร + ไลน์ แทนแถบปุ่มล่าง */
  .top{ height:72px; padding:0 var(--pad); }
  .wm{ font-size:20px; }
  .wm small{ font-size:12.5px; }
  .dnav{ display:flex; align-items:center; gap:28px; }
  .dnav a{ color:#E8E2D6; text-decoration:none; font-size:15.5px; line-height:1.5; }
  .dnav a:hover, .dnav a[aria-current]{ color:var(--gold); }
  .dnav .tel{ color:#fff; font-weight:600; padding-left:24px; border-left:1px solid #3A342C; }
  .dnav .dl{ display:flex; align-items:center; gap:8px; background:var(--line-green); color:#fff; font-weight:700; padding:9px 16px; border-radius:10px; }
  .dnav .dl:hover{ color:#fff; filter:brightness(1.05); }
  .dnav a{ white-space:nowrap; }
  .wm{ white-space:nowrap; flex:none; }
}
/* จอโน้ตบุ๊ก 960–1279 เมนูเดิมล้นเป็น 2 บรรทัด (เจอ 5 พ.ย. 69) → บีบระยะ ตัดคำรองใต้โลโก้ */
@media (min-width:960px) and (max-width:1279px){
  .dnav{ gap:16px; }
  .dnav a{ font-size:14.5px; }
  .dnav .tel{ padding-left:14px; }
  .dnav .dl{ padding:8px 12px; }
  .wm small{ display:none; }
}
@media (min-width:960px){

  section, section.soft, .crumb, .contact, .foot{ padding-left:var(--pad); padding-right:var(--pad); }
  section{ padding-top:56px; padding-bottom:24px; }
  section.soft{ padding-top:56px; padding-bottom:56px; }
  h1, h2{ line-height:1.4; }
  h2{ font-size:28px; }
  .spec{ font-size:16px; margin:6px 0 20px; }
  .note, .more{ font-size:15.5px; }

  /* ===== หน้าแรก ===== */
  /* k1: สูงตามความกว้างจอ = ครอปคงที่ทุกขนาดจอ · โฟกัส 21% ตัดของเล่นเป่าลมท้ายภาพออก เหลือขอบบนรั้ว */
  .hero{ height:min(640px, 44vw); }
  .hero img{ object-position:center 21%; }
  .hero .ov{ background:linear-gradient(90deg,rgba(19,16,13,.88) 0%,rgba(19,16,13,.6) 35%,rgba(19,16,13,0) 62%); }
  .hero .txt{ left:var(--pad); right:auto; bottom:auto; top:50%; transform:translateY(-50%); max-width:540px; }
  .hero h1{ font-size:clamp(34px, 3.4vw, 48px); line-height:1.4; margin:12px 0 8px; }
  .hero p{ font-size:18px; margin-bottom:24px; }
  .hero .btn{ width:auto; display:inline-flex; padding:0 28px; height:56px; font-size:18px; }
  .hero .hint{ text-align:left; font-size:14.5px; }

  /* ฝ้า + รั้ว วางคู่กันแถวเดียว การ์ดขนาดเท่ากัน */
  .prod2{ display:grid; grid-template-columns:4fr 3fr; gap:48px; padding:0 var(--pad); }
  .prod2 > section{ padding-left:0; padding-right:0; }
  .prod2 .grid3{ grid-template-columns:repeat(4,1fr); gap:10px; }
  .prod2 .grid2{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .prod2 .grid3 .card.cta{ grid-column:auto; }
  .prod2 > section{ display:flex; flex-direction:column; }
  .prod2 .more{ margin-top:auto; padding-top:12px; }
  /* การ์ดชวนทักไลน์: ให้ดูเป็นปุ่ม ไม่ใช่ช่องรูปที่โหลดไม่ขึ้น */
  .card.cta{ aspect-ratio:1/1; background:#EAF9F0; border:1.5px solid var(--line-green); padding:14px; }
  .card.cta span{ font-size:15px; line-height:1.5; color:var(--ink); font-weight:600; }
  .card.cta span b{ color:var(--ink); }
  .card.cta::after{ content:'ทักไลน์ →'; color:#05A447; font-weight:700; font-size:15px; }
  .card.cta .li{ display:none; }
  .card.cta:hover{ background:#DDF5E7; }
  /* การ์ดเครื่องคำนวณ: ลูกศรของตัวเอง ไม่ใช่ "ทักไลน์ →" · ขอบทองให้ต่างจากการ์ดไลน์ */
  .card.cta.calc-cta{ background:#FFF8E6; border-color:var(--gold); }
  .card.cta.calc-cta::after{ content:none; }
  .card.cta.calc-cta span{ font-size:14px; font-weight:500; }
  .card.cta.calc-cta span b{ font-weight:700; }
  .card.cta.calc-cta .xs{ display:none; }  /* การ์ดจอคอมกว้าง ~150px ใส่ประโยคเต็มไม่พอ ท่อนที่ตัดไปอยู่ในลิงก์ลูกศร */
  .card.cta.calc-cta .go{ color:var(--gold-ink); font-size:14.5px; margin-top:auto; }
  .card.cta.calc-cta:hover{ background:#FFF1CC; }
  .hero .hint a{ white-space:normal; }
  #calc{ scroll-margin-top:96px; }
  .card .lb{ font-size:13px; padding:6px 9px; }

  .row3{ height:440px; gap:10px; }
  .pline{ font-size:17px; margin-top:20px; }
  .bulk{ display:grid; grid-template-columns:1fr auto; column-gap:48px; align-items:center; margin-top:28px; padding-top:28px; }
  .bulk h3{ grid-column:1; font-size:22px; line-height:1.45; }
  .bulk p{ grid-column:1; font-size:16px; margin:0; }
  .bulk .btns{ grid-column:2; grid-row:1 / span 2; width:420px; }
  .bulk .btn{ height:50px; font-size:16px; }

  .works{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .works div span{ font-size:14px; }

  .contact{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:48px; padding-top:48px; padding-bottom:48px; }
  .contact h2{ grid-column:1; }
  .contact p{ grid-column:1; font-size:17px; }
  .contact .btns{ grid-column:2; grid-row:1 / span 3; width:420px; margin-top:0; }

  .faq{ padding-bottom:48px; }
  .faq-list{ max-width:820px; }  /* คอลัมน์เดียว: 2 คอลัมน์เปิดข้อหนึ่งแล้วอีกฝั่งโหว่ */
  .faq summary{ font-size:17px; }
  .faq details p{ font-size:16px; }
  .contact + .foot{ border-top:1px solid #2E2923; }
  .foot{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-top:24px; padding-bottom:28px; }
  .foot nav{ margin-bottom:0; order:2; }

  /* ===== หน้าฝ้า ===== */
  .crumb{ padding-top:24px; font-size:14.5px; }
  .fa-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:40px; padding:0 var(--pad); align-items:start; }
  .fa-grid > section{ padding-left:0; padding-right:0; }
  .fa-grid > section[data-kg-group]{ padding-top:16px; }
  .fa-grid h1{ font-size:34px; }
  .fa-grid .kg-chips{ grid-template-columns:repeat(7,1fr); gap:10px; margin-top:14px; }
  .kg-stage figcaption{ padding:14px 18px; font-size:16px; }
  .kg-stage figcaption .code{ font-size:19px; }
  .kg-stage figcaption .cap{ font-size:14px; }
  .fa-grid > section.soft{ position:sticky; top:96px; margin-top:24px; padding:28px 24px 24px; border-radius:16px; }
  .fa-grid > section.soft h2{ font-size:24px; }
  .fa-grid .calc{ background:transparent; border:0; padding:0; margin-top:16px; }
  .fa-grid .seg{ background:#fff; }
  .fa-grid .seg button[aria-pressed="true"]{ background:var(--soft); box-shadow:none; }
  .fa-grid .kg-msg{ background:#fff; }
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-left:0; list-style:none; counter-reset:s; margin-top:16px; }
  .steps li{ counter-increment:s; background:var(--soft); border-radius:12px; padding:18px 20px; margin:0; font-size:15.5px; line-height:1.6; }
  .steps li::before{ content:counter(s); display:block; font-size:24px; font-weight:700; color:var(--gold-ink); margin-bottom:4px; }
  .fa-steps{ padding-bottom:56px; }
}