/* =============================================================================
   sales-calc.css — สไตล์ของตัวคำนวณ & เสนอขาย (js/sales-ui-calc.js) + การ์ดแพ็กเกจ (.pk)
   🌐 F161: ย้ายออกมาจาก <style> ของ /sales/ เพราะหน้าสาธารณะ /calc/ ใช้ตัวคำนวณตัวเดียวกัน
      ⇒ ไฟล์เดียว 2 หน้า (ก๊อปไว้ 2 ที่ = วันหนึ่งหน้าตาไม่ตรงกัน §8.49)
   🔑 ของเฉพาะหน้า (ตัวกรอง · แท็บแอดมิน · คู่มือฟรีแลนซ์ · ลูกค้าของฉัน · กฎพิมพ์ใบสรุป) อยู่หน้าเดิม
   🔴 #v_calc = กล่องของแท็บคำนวณ — หน้า /calc/ ต้องใช้ id เดียวกัน (กฎ .kpi ผูกกับ id นี้)
   ============================================================================= */

/* ── การ์ดแพ็กเกจ (แท็บ 🧩 แพ็กเกจ + ข้อ ④ ของตัวคำนวณ) ── */
.pkcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.pk{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    display:flex;flex-direction:column;gap:6px}
.pk h3{margin:0;font-size:13.5px;line-height:1.35}
.pk .sub{font-size:11.5px;color:var(--muted)}
.pk .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
/* 🖼️ F147 รูปแพ็กเกจแทนแท็ก (ผู้ใช้สั่ง 7 ต.ค.) — ไม่มีรูป = ไม่มีกล่อง · ราคาชิดล่างด้วย margin-top:auto เดิม */
.pk .pimg{margin-top:4px;border-radius:8px;overflow:hidden;background:var(--bg,#f6f8fb);aspect-ratio:4/3}
.pk .pimg img{display:block;width:100%;height:100%;object-fit:contain}
.pk .tag{font-size:11px;background:var(--bg,#f6f8fb);border:1px solid var(--line);
         border-radius:999px;padding:2px 8px;white-space:nowrap}
.pk .prices{margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);
            display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.pk .p1{font-size:11px;color:var(--muted)}
.pk .p2{font-size:17px;font-weight:800;color:var(--navy)}
.pk .vat{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.pk.noprice .p2{color:var(--red);font-size:13px}
.pk .eff{font-size:11px;color:var(--muted);margin-top:2px}   /* 🗓️ F140 วันที่ราคามีผล */

/* ── 🧮 แท็บคำนวณ — HTML มาจาก js/sales-ui-calc.js · สไตล์อยู่หน้านี้ (app.css ห้ามมีของเฉพาะหน้า) ── */
.card h3.sq-h{display:flex;align-items:center;gap:8px;border-left:none;padding-left:0}
.sq-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
      background:var(--accent);color:#fff;font-size:13px;flex:0 0 auto}
.sq-in{margin-bottom:0;border-bottom:none;border-radius:12px 12px 0 0}
.sq-out{margin-top:0;border-top:1px dashed var(--line);border-radius:0 0 12px 12px}
.sq-out:empty{padding:0;border-top:none}
/* F161: แผงปรับสมมติฐาน มีเฉพาะหน้า /calc/ — หน้าในระบบได้ก้อนว่าง ต้องไม่เหลือกรอบการ์ดเปล่า */
.sq-tw:empty{display:none}
.sq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px 12px;margin-top:10px}
.sq-grid .fg label span{display:block;margin-bottom:3px}
.sq-seg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.sq-seg button{flex:1 1 auto;min-width:120px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--navy);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sq-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sq-msg{font-size:12.5px;color:var(--muted);margin:8px 0}
.sq-msg.err{color:var(--red);font-weight:700}
.sq-msg.warn{color:#7a5a00;background:#fff8e6;border:1px solid #f0d089;border-radius:8px;padding:6px 10px}
.sq-bad{color:var(--red)}
.warn.sq-bad{background:#fdecea;border-color:#f3b9b2;color:#96271a}
.sq-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.sq-row select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;
  font-size:13px;background:#fff;max-width:100%}
.fg label.sq-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:600;
  cursor:pointer;margin-top:22px}
.fg label.sq-chk input{width:auto}
/* F143: กล่องขนาดที่แนะนำ + วิธีคิด (ข้อมูล ไม่ใช่คำเตือน ⇒ โทนม่วงของหน้า ไม่ใช่เหลือง/แดง) */
.sq-rec{font-size:13px;margin:8px 0;padding:8px 10px;background:#f7f3fc;border:1px solid #e2d6f3;border-radius:8px}
.sq-rec .sq-how{font-size:12.5px;margin-top:4px}
.sq-rec .note{margin-top:4px}
.sq-simby{font-size:12.5px;margin:2px 0 6px}
.sq-chart{margin:10px 0}
.sq-chart svg{display:block;max-width:100%;height:auto}
/* 📊 ใบสรุป ⑧: กราฟค่าใช้จ่ายรายเดือน + กราฟคืนทุน วางคู่กัน (จอแคบซ้อนกัน)
   🔴 เดิมคุมขนาดด้วย .sq-bars svg{max-width:520px} ซึ่งไม่เคยมีผล — svg ฝัง max-width:100% ไว้ในตัว
      (inline ชนะกฎของหน้า) ⇒ กราฟแท่งยืดเต็มกระดาษตอนพิมพ์ (ผู้ใช้ทดสอบ 6.69) ⇒ คุมที่กล่องแทน */
.sq-two{display:grid;grid-template-columns:1fr;gap:6px 18px;align-items:start}
@media(min-width:760px){.sq-two{grid-template-columns:1fr 1fr}}
.sq-half{min-width:0}
.sq-half .sq-chart{max-width:460px}
#v_calc .kpi .v{font-size:19px;overflow-wrap:anywhere}
.kpis.sq-k2{grid-template-columns:repeat(2,1fr)}
.sq-apwrap{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sq-ap{display:grid;gap:6px 8px;align-items:end;background:#f8fafc;border:1px solid var(--line);
  border-radius:10px;padding:8px;
  grid-template-columns:minmax(150px,2fr) repeat(3,minmax(64px,.8fr)) minmax(150px,1.3fr) auto minmax(92px,auto) auto}
.sq-ap label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted);font-weight:700}
.sq-ap input[type=text],.sq-ap select{padding:7px 8px;border:1px solid var(--line);border-radius:7px;
  font-family:inherit;font-size:13px;width:100%;background:#fff}
.sq-ap label.ht{flex-direction:row;align-items:center;gap:4px;padding-bottom:9px}
.sq-tm{display:flex;align-items:center;gap:4px}
.sq-ap .out{font-size:12px;display:flex;flex-direction:column;padding-bottom:4px}
.sq-ap .full,.sq-addon .full{grid-column:1/-1;margin:0}
.pk.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.sq-promo{font-size:12px;color:#5b3d92;font-weight:700}
.sq-addons{display:flex;flex-direction:column;gap:8px}
.sq-addon{display:grid;grid-template-columns:1fr auto auto;gap:6px 12px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.sq-step{display:flex;align-items:center;gap:8px}
.sq-step b{min-width:22px;text-align:center}
.sq-sub{margin:14px 0 6px;font-size:13.5px;color:var(--navy)}
.sq-grid-t th,.sq-grid-t td{font-size:12.5px;white-space:nowrap}
.sq-grid-t tr.sq-off{opacity:.55}
.sq-grid-t td.sq-na{color:var(--muted)}
.sq-grid-t td.sq-on{background:#fff3e0;font-weight:800}
.sq-notes{font-size:11.5px;color:var(--muted);margin:6px 0;padding-left:20px}
.sq-det{margin:8px 0;font-size:12.5px}
.sq-det summary{cursor:pointer;font-weight:700;color:var(--navy)}
.sq-sumhead{border-bottom:2px solid var(--orange);padding-bottom:6px;margin-bottom:8px;font-size:13px}
.sq-sumhead b{font-size:15px;color:var(--navy)}
.sq-sumgrid{margin:8px 0}
.sq-wf{width:100%}   /* ตารางราคาเต็มกรอบ — เดิมกว้างตามเนื้อหา ยอดเงินไปจบกลางกรอบ ไม่ตรงแนวกับแถวสรุปข้างบน */
.sq-wf td{font-size:13px}
.sq-wf tr.tot td{font-weight:800;background:#f6f9ff}
.sq-wf tr.sub td{border-bottom:none;padding-top:0}
.sq-line{font-size:13px;margin:6px 0}
.sq-block{margin:6px 0;padding-left:20px;font-size:12.5px;color:var(--red)}
.sq-disc{margin-top:10px;font-size:12px;font-weight:700;border:1px dashed var(--line);border-radius:8px;
  padding:8px 10px;background:#fafbfc}
/* 🔴 E-7: แถวเครื่องใช้ไฟฟ้า 8 คอลัมน์ต้องการกว้าง ~730px (ขั้นต่ำ 150+64×3+150+92 + 2 ช่อง auto + ช่องว่าง 7×8)
      + ขอบการ์ด ~66px ⇒ จอแคบกว่า ~800px (iPad แนวตั้ง · มือถือแนวนอน) ล้นการ์ดจนทั้งหน้าเลื่อนข้าง
      ⇒ ต่ำกว่า 900px ใช้ 3 คอลัมน์ (ชื่อ/ช่วงเวลาเต็มแถว) · 🧪 sales-page-wired SP13 คิดขอบนี้จากกฎข้างบน */
@media(max-width:900px){
  .sq-ap{grid-template-columns:1fr 1fr 1fr}
  .sq-ap .nm,.sq-ap .tm{grid-column:1/-1}
}
@media(max-width:480px){
  .sq-ap input[type=text],.sq-ap select,.sq-row select{font-size:16px}
  .sq-seg button{min-width:0;flex:1 1 45%}
  .fg label.sq-chk{margin-top:4px}
  .sq-addon{grid-template-columns:1fr auto}
  .sq-addon .nm{grid-column:1/-1}
  #v_calc .kpi .v{font-size:16px}
}