/* หน้าตาตามแบบที่เคาะไว้ (ระบบ/ออกแบบ/T1.3/จาก-claude-design)
   - มือถือ < 768px = แบบ 2a + 2b (คอลัมน์เดียว มีแถบคิดยอดลอยล่างจอ)
   - iPad แนวตั้ง 768-1099px = สองช่อง (ตาราง + คิดยอด) แบบนี้ผมออกเองเพราะแบบยังไม่มี
   - iPad แนวนอน / จอคอม >=1100px = แบบ 3a (แถบหัวร้าน + สามช่อง หมวด - ตาราง - บิล)
   ปุ่มทุกอันสูงอย่างน้อย 44px เพราะคนใช้ยืนอยู่หน้ากองเหล็ก มือเปื้อน กดด้วยนิ้วโป้ง
   ไม่โหลดฟอนต์จากอินเทอร์เน็ต เพราะโปรแกรมต้องใช้ได้ตอนเน็ตร้านล่ม */
:root {
  --ดำ: #231F20;
  --แดง: #CE0000;
  --พื้น: #F4F2EF;
  --เหลือง: #FBF0D4;
  --น้ำตาล: #8A5A00;
  --เส้น: rgba(35, 31, 32, .12);
  --จาง: rgba(35, 31, 32, .55);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 🔴 กฎนี้ต้องมี — ไฟล์นี้ตั้ง display: flex/grid ให้หลายกล่องที่ JavaScript สั่งซ่อนด้วย hidden
   กฎของเราชนะกฎ [hidden] ของเบราว์เซอร์เสมอ (ระดับความจำเพาะเท่ากันแต่ของเรามาทีหลัง)
   ผลคือของที่สั่งซ่อนแล้วยังโผล่อยู่ — เจอมาแล้ว 3 จุด: แถบคิดยอด · แถว VAT · กล่องท้ายใบ */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--พื้น); color: var(--ดำ);
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  font-size: 16px; padding-bottom: 96px;
}
code { font-family: "IBM Plex Mono", Consolas, monospace; }
a { color: inherit; text-decoration: none; }
input { font-family: inherit; }
.ขวา { text-align: right; }

/* ---------- ส่วนหัว: แถบร้าน + แถบเตือนราคา ---------- */
/* มือถือกลับลำดับให้แถบดำอยู่บนสุด เพราะคำเตือนเรื่องราคาสำคัญกว่าโลโก้
   จอใหญ่เรียงตามแบบ 3a คือแถบร้านขาวอยู่บน แถบเตือนดำอยู่ล่าง */
.ส่วนหัวรวม {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-direction: column-reverse;
}
.แถบหัว {
  background: #fff; border-bottom: 1px solid var(--เส้น);
  display: flex; align-items: center; gap: 16px; padding: 10px 12px;
}
/* ตราร้านมีทุกขนาดจอ · มือถือเหลือแต่ตรา ไม่มีชื่อร้าน เพราะต้องเก็บที่ให้ช่องค้นหา */
.ตรา { display: flex; align-items: center; gap: 10px; flex: none; }
.ตราสี { width: 36px; height: 36px; flex: none; display: block; }
.ชื่อตรา, .สถานะราคา { display: none; }
.แถบบน {
  background: var(--ดำ); color: var(--พื้น);
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.แถบบน .วันที่ { opacity: .75; font-weight: 500; }
.เตือน { display: flex; align-items: center; gap: 8px; }
.จุด { width: 8px; height: 8px; border-radius: 50%; background: var(--แดง); flex: none; }
.จุด.เขียว { background: #2E7D32; }

/* ---------- โครงหน้า ---------- */
.ช่องซ้าย, .ช่องขวา { display: none; }        /* มือถือไม่มีสองช่องนี้ */
.ช่องกลาง { min-width: 0; }

/* ---------- ช่องค้นหา (มีทุกหน้า) ---------- */
.ช่องค้นหา {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  height: 50px; border: 1.5px solid var(--ดำ); border-radius: 10px; background: #fff;
}
.ช่องค้นหา svg { color: var(--จาง); flex: none; }
.ช่องค้นหา input {
  flex: 1; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; min-width: 0;
}

/* ---------- หัวหน้าหมวด ---------- */
.หัวหมวด { background: #fff; border-bottom: 1px solid var(--เส้น); padding: 6px 10px 10px; }
.แถวหัว { display: flex; align-items: center; gap: 12px; }
.ปุ่มย้อน {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ชื่อหมวด { display: flex; flex-direction: column; min-width: 0; }
.ชื่อหมวด b { font-size: 18px; line-height: 1.2; }
.ชื่อหมวด small { font-size: 12px; color: var(--จาง); }
/* 🔴 ต้องเป็น inline-flex + align-items:center เสมอ
   ปุ่มพวกนี้เป็น <a> ที่กำหนดความสูงตายตัวไว้ ถ้าไม่จัดกลางแนวตั้งให้
   ตัวหนังสือจะเกาะขอบบนของกล่อง เหลือที่ว่างห้อยข้างล่าง (ผู้ใช้ท้วง 29 ส.ค. 2569)
   เดิมมันดู "เหมือนจะถูก" เพราะพ่อแม่บางที่เป็น flex align-items:center อยู่แล้ว
   พอเอาไปวางในกล่องธรรมดาถึงเห็นว่าเบี้ยว */
.ปุ่มรอง {
  margin-left: auto; flex: none; height: 44px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(35, 31, 32, .25); border-radius: 8px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
  color: inherit; text-decoration: none;
}
.ปุ่มกรอง { display: flex; gap: 10px; padding: 12px 2px 2px; overflow-x: auto; }
.ชิป {
  height: 44px; padding: 0 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 1px solid rgba(35, 31, 32, .25); background: #fff;
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.ชิป.เลือก { background: var(--ดำ); color: var(--พื้น); border-color: var(--ดำ); }

/* ---------- ตารางสินค้า ---------- */
.หัวคอลัมน์, .แถวสินค้า {
  display: grid; grid-template-columns: 1fr 96px 74px; gap: 8px;
}
.ช่องน้ำหนัก { display: none; }
.หัวคอลัมน์ {
  padding: 7px 12px; background: var(--พื้น);
  border-bottom: 1px solid rgba(35, 31, 32, .15);
  font-size: 11.5px; font-weight: 600; color: rgba(35, 31, 32, .6);
}
.หัวกลุ่ม {
  padding: 8px 12px; background: var(--ดำ); color: var(--พื้น);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.หัวกลุ่ม b { font-size: 16.5px; }
.หัวกลุ่ม small { font-size: 11.5px; opacity: .82; }
.หัวกลุ่มเล็ก { margin: 0; padding: 12px 12px 6px; font-size: 12px; color: var(--จาง); }

/* คั่นหมวดย่อยเวลาหน้าหมวดโชว์ของหลายหมวดย่อยปนกัน (ยังไม่กดตัวกรอง) — ใหญ่กว่า .หัวกลุ่ม
   เพื่อให้เห็นชัดว่าเป็นคนละชั้น: หมวดย่อย (เหล็กฉาก/แผ่นดำ ฯลฯ) ครอบกลุ่มขนาดย่อยๆ อีกที */
.หัวหมวดย่อย {
  padding: 14px 12px 4px; font-size: 15px; font-weight: 700; color: var(--ดำ);
  background: var(--พื้น); border-top: 1px solid rgba(35, 31, 32, .15);
}

.แถวสินค้า {
  width: 100%; align-items: center; min-height: 64px;
  padding: 9px 12px; border: 0; border-bottom: 1px solid rgba(35, 31, 32, .09);
  background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.แถวสินค้า:active { background: var(--พื้น); }
.แถวสินค้า.ไม่มีราคา { background: var(--เหลือง); }
.ชื่อสินค้า { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ชื่อสินค้า b { font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.ชื่อสินค้า code { font-size: 11px; color: var(--จาง); }
.ชื่อสินค้า em { font-style: normal; font-size: 11.5px; font-weight: 600; }
.ยังไม่ยืนยัน { color: var(--แดง); }
.รอราคา { color: var(--น้ำตาล); }
.แถวสินค้า .ราคา { text-align: right; font-size: 20px; font-weight: 700; line-height: 1.1; }
.แถวสินค้า .ราคา.รอราคา, .แถวสินค้า .ราคา.กรอกเอง { font-size: 14.5px; }
.แถวสินค้า .ราคา.กรอกเอง { color: var(--จาง); font-weight: 600; }
.แถวสินค้า .ต่ำสุด { text-align: right; font-size: 15px; color: var(--ดำ); }
/* จุดแดงเล็กแทนประโยคเตือน — ของที่รอเจ้าของยืนยันมีเป็นร้อยรายการ
   ถ้าเขียนเป็นประโยคทุกแถวจะกลายเป็นพื้นหลังที่ไม่มีใครอ่าน */
.จุดรอยืนยัน {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--แดง); margin-right: 5px; vertical-align: middle;
}

/* ---------- กล่องบอกปัญหา ---------- */
.แถบเหลือง {
  background: var(--เหลือง); color: var(--น้ำตาล);
  padding: 10px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.45;
}
.กล่องปัญหา {
  margin: 12px; padding: 16px; background: #fff;
  border: 1px solid var(--เส้น); border-left: 4px solid var(--แดง); border-radius: 8px;
}
.กล่องปัญหา b { font-size: 16px; }
.กล่องปัญหา p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(35, 31, 32, .75); }
.กล่องปัญหา code { font-size: 12px; color: var(--จาง); word-break: break-all; }
.กล่องปัญหา .วิธีแก้ { font-weight: 600; color: var(--ดำ); }

/* ---------- รายการหมวดในหน้าแรก ---------- */
.คำแนะนำคอม { display: none; }
.แถวหมวด {
  display: flex; align-items: center; gap: 10px; min-height: 64px;
  padding: 10px 12px; background: #fff;
  border-bottom: 1px solid rgba(35, 31, 32, .09);
}
.แถวหมวด:active { background: var(--พื้น); }
.รหัสหมวด {
  flex: none; width: 42px; height: 42px; border-radius: 8px;
  background: var(--พื้น); border: 1px solid var(--เส้น);
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", Consolas, monospace; font-size: 13px; font-weight: 600;
}
.เนื้อหมวด { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.เนื้อหมวด b { font-size: 17px; }
.เนื้อหมวด small {
  font-size: 11.5px; color: var(--จาง);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.นับหมวด { flex: none; text-align: right; display: flex; flex-direction: column; }
.นับหมวด b { font-size: 17px; }
.นับหมวด small { font-size: 11px; }
.ลูกศร { flex: none; color: var(--จาง); }

/* ---------- เครื่องคิดยอด ---------- */
.การ์ดยอด {
  margin: 8px 10px; padding: 9px 10px; background: #fff;
  border: 1px solid rgba(35, 31, 32, .14); border-radius: 8px;
  display: flex; flex-direction: column; gap: 7px;
}
.การ์ดยอด .หัวการ์ด { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.การ์ดยอด .หัวการ์ด .ชื่อสินค้า { flex: 1; }
/* ยอดของแถวย้ายขึ้นมาอยู่หัวการ์ด (28 ส.ค. 2569) — บรรทัดจำนวนจึงว่างพอให้ปุ่มลัดมาอยู่ด้วย */
.การ์ดยอด .หัวการ์ด .รวมแถว { flex: none; margin: 0; padding-top: 2px; }
.ปุ่มเอาออก {
  flex: none; width: 44px; height: 44px; border: 0; background: transparent;
  color: var(--จาง); cursor: pointer; font-size: 20px; line-height: 1;
}
/* wrap ไว้เพราะปุ่มลัดจำนวนมาต่อท้ายบรรทัดนี้แล้ว — จอแคบจะตกลงไปบรรทัดล่างเอง
   จอคอมแถบขวาย่อทุกอย่างลงจนอยู่บรรทัดเดียวได้ (ดูบล็อก "แถบขวา" ข้างล่าง) */
.แถวจำนวน { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ช่องราคา, .ช่องจำนวน, .ช่องข้อความ {
  height: 46px; padding: 0 10px; border: 1.5px solid var(--ดำ); border-radius: 8px;
  background: #fff; font: inherit; font-weight: 700; outline: none; min-width: 0;
}
/* กว้างขึ้นจาก 86px (30 ส.ค. 2569 — ผู้ใช้ท้วง) — ราคาหลายหลัก เช่น "12550" เดิมถูกตัด
   มองไม่เห็นครบ ช่องจำนวน/ปุ่มลัดข้างล่างไม่ต้องกว้างเท่าเดิม เอาที่ว่างมาไว้ตรงนี้แทน */
.ช่องราคา { width: 112px; font-size: 19px; }
/* ช่องจำนวนต้องพิมพ์เองได้ ลูกค้าสั่ง 50 เส้นจะได้ไม่ต้องกดปุ่มบวก 50 ครั้ง */
.ช่องจำนวน { width: 62px; font-size: 19px; text-align: center; }
.ช่องข้อความ { width: 100%; font-size: 15px; font-weight: 500; }
.ช่องราคา.ต้องกรอก { border-color: var(--แดง); background: #FFF5F5; }
.แถวจำนวน .คูณ { color: var(--จาง); font-size: 13px; }
.ปุ่มนับ {
  width: 44px; height: 46px; flex: none; border: 1.5px solid var(--ดำ); border-radius: 8px;
  background: #fff; color: var(--ดำ); font-size: 22px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.ปุ่มนับ.เพิ่ม { background: var(--ดำ); color: var(--พื้น); }
.ปุ่มนับ.กว้าง { width: auto; padding: 0 18px; font-size: 16px; }
.รวมแถว { margin-left: auto; font-size: 20px; font-weight: 700; }

/* ปุ่มลัด 10/20/50/100 เดิม flex:1 เต็มบรรทัด ทำให้กว้างเวอร์บนการ์ดที่กว้าง (ผู้ใช้ท้วง 30 ส.ค. 2569)
   ยังต้อง flex-grow ไว้เพื่อให้แถบขวา (จอคอม ดูบล็อกข้างล่าง) พอดีแถวเดียวไม่ล้น
   แต่ใส่ max-width กันไม่ให้ยืดเกินพอดีตอนอยู่บนการ์ดกว้างแบบ /คิดยอด มือถือ */
.ลัดจำนวน { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 170px; max-width: 210px; }
.ชิปลัด {
  flex: 1; max-width: 48px; height: 40px; padding: 0 6px; cursor: pointer;
  border: 1px solid rgba(35, 31, 32, .22); border-radius: 7px; background: var(--พื้น);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--จาง);
}
.ท้ายการ์ด { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ต่ำกว่าต่ำสุด {
  font-size: 11.5px; font-weight: 600; color: var(--น้ำตาล);
  background: var(--เหลือง); padding: 5px 8px; border-radius: 6px;
}

.ปุ่มเต็มแถว {
  display: block; width: calc(100% - 20px); margin: 10px; height: 48px;
  border: 1.5px dashed rgba(35, 31, 32, .35); border-radius: 8px; background: transparent;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--จาง); cursor: pointer;
}
.ฟอร์มเอง { border-color: var(--ดำ); border-width: 1.5px; }

.กล่องขนส่ง {
  margin: 10px; padding: 11px; background: #fff;
  border: 1px solid rgba(35, 31, 32, .14); border-radius: 8px;
  display: flex; flex-direction: column; gap: 9px;
}
.แถวขนส่ง { display: flex; align-items: center; gap: 8px; }
.แถวขนส่ง input {
  width: 104px; height: 46px; padding: 0 10px; border: 1.5px solid var(--ดำ);
  border-radius: 8px; font: inherit; font-size: 19px; font-weight: 700; outline: none;
}
.แถวขนส่ง .หน่วย { font-size: 13px; color: var(--จาง); }
.ปุ่มสลับ {
  margin-left: auto; height: 46px; padding: 0 16px; border: 1.5px solid var(--ดำ);
  border-radius: 8px; background: #fff; font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; flex: none;
}
.ปุ่มสลับ.เปิด { background: var(--ดำ); color: var(--พื้น); }

.สรุปยอด {
  background: var(--ดำ); color: var(--พื้น);
  padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 9px;
}
.สรุปยอด .บรรทัด { display: flex; align-items: baseline; justify-content: space-between; }
.สรุปยอด .บรรทัด span { font-size: 13.5px; opacity: .8; }
.สรุปยอด .บรรทัด b { font-size: 19px; font-weight: 600; }
.สรุปยอด .รวม { padding-top: 9px; border-top: 1px solid rgba(244, 242, 239, .25); }
.สรุปยอด .รวม span { font-size: 15px; font-weight: 700; opacity: 1; }
.สรุปยอด .รวม b { font-size: 34px; line-height: 1; }
.สรุปยอด .หมายเหตุ { margin: 0; font-size: 11.5px; opacity: .65; line-height: 1.5; }

/* VAT: ค่าเริ่มต้นคือไม่คิด ต้องกดเปิดเอง และแก้เปอร์เซ็นต์ได้ */
.แถวVat {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-top: 1px solid rgba(244, 242, 239, .18);
  padding-top: 10px;
}
/* สองปุ่มติดกัน อันที่ไฟติด = ตอนนี้กำลังคิดแบบนั้นอยู่
   ปุ่มใบเดียวที่สลับข้อความไปมา คนเพิ่งใช้จะแยกไม่ออกว่าเป็นสถานะหรือเป็นคำสั่ง */
.สลับสองทาง {
  display: flex; flex: 1; border: 1.5px solid rgba(244, 242, 239, .45);
  border-radius: 8px; overflow: hidden;
}
.สลับสองทาง button {
  flex: 1; height: 42px; border: 0; background: transparent; color: var(--พื้น);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; opacity: .65;
}
.สลับสองทาง button.เลือก { background: var(--พื้น); color: var(--ดำ); opacity: 1; }
.ช่องVat {
  width: 56px; height: 42px; padding: 0 8px; text-align: center; flex: none;
  border: 1.5px solid rgba(244, 242, 239, .5); border-radius: 8px;
  background: transparent; color: var(--พื้น);
  font: inherit; font-size: 16px; font-weight: 700; outline: none;
}
.แถวVat .เปอร์เซ็นต์ { font-size: 14px; opacity: .8; }
/* ป้ายเล็กใต้คำว่า "ยอดรวม" — ย้ำอีกทีว่ายอดก้อนนี้รวมภาษีหรือยัง */
.สรุปยอด .รวม i {
  display: block; font-style: normal; font-size: 11.5px; font-weight: 500; opacity: .7;
}

.ปุ่มคัดลอก {
  margin-top: 4px; height: 50px; width: 100%; border: 0; border-radius: 8px;
  background: var(--พื้น); color: var(--ดำ);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}

/* ปุ่มยกของทั้งตะกร้าไปเปิดบิล (ผู้ใช้สั่ง 28 ส.ค. 2569 ข้อ 2 + 4)
   วางเป็นปุ่มแดงเหนือปุ่มคัดลอก เพราะ "ลูกค้าเอาเลย" คือปลายทางที่ร้านอยากได้
   ส่วนคัดลอกข้อความคือทางออกสำรองตอนลูกค้าแค่ถามราคา */
.ปุ่มเปิดบิล {
  height: 50px; width: 100%; border: 0; border-radius: 8px;
  background: var(--แดง); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ปุ่มเปิดบิล[disabled] { opacity: .45; cursor: default; }
/* "เปิดใบเสนอราคาจากรายการนี้" ลดเป็นปุ่มรองหลังเพิ่ม "เปิดบิลขายทันที" (D-091)
   ลูกค้าส่วนใหญ่ที่ยืนหน้าร้านเอาของเลย ไม่ได้ขอใบเสนอราคา — บิลขายจึงควรเป็นทางลัดหลัก */
.ปุ่มเปิดบิล.รอง { background: #fff; color: var(--ดำ); border: 1.5px solid var(--เส้น); margin-top: 6px; }

/* ---------- แถบขวาบนจอคอม/iPad: ย่อทุกอย่างลง ~18% ----------
   ผู้ใช้ตีกลับว่า "ฝั่งขวาดูใหญ่เกินไป กินพื้นที่มากเกินไป" (28 ส.ค. 2569)

   ย่อเฉพาะในแถบขวาเท่านั้น **ห้ามย่อทั้งไฟล์** เพราะการ์ดก้อนเดียวกันนี้ไปโผล่
   ที่หน้า /คิดยอด บนมือถือด้วย ซึ่งคนกดด้วยนิ้วโป้งตอนยืนหน้ากองเหล็ก
   ปุ่มที่นั่นต้องสูง 44px+ ตามที่เคาะไว้ตั้งแต่ T1.3 — บนจอคอมมีเมาส์ ย่อได้

   ผลพลอยได้: บรรทัดจำนวนแคบพอให้ปุ่มลัด 10/20/50/100 อยู่บรรทัดเดียวกับช่องจำนวนได้ */
.ช่องขวา .การ์ดยอด { margin: 6px 8px; padding: 8px 9px; gap: 5px; }
.ช่องขวา .ชื่อสินค้า b { font-size: 14px; }
.ช่องขวา .ชื่อสินค้า code { font-size: 10px; }
.ช่องขวา .ชื่อสินค้า em { font-size: 10.5px; }
.ช่องขวา .รวมแถว { font-size: 16.5px; }
.ช่องขวา .ปุ่มเอาออก { width: 26px; height: 26px; font-size: 17px; }

/* บรรทัดเดียวจบ: [ราคา] x [-][จำนวน][+] [10][20][50][100] */
.ช่องขวา .แถวจำนวน { gap: 4px; flex-wrap: nowrap; }
.ช่องขวา .ช่องราคา { width: 64px; height: 36px; font-size: 15px; padding: 0 6px; }
.ช่องขวา .ช่องจำนวน { width: 42px; height: 36px; font-size: 15px; padding: 0 4px; }
.ช่องขวา .ช่องข้อความ { height: 38px; font-size: 13.5px; }
.ช่องขวา .ปุ่มนับ { width: 28px; height: 36px; font-size: 18px; }
.ช่องขวา .ปุ่มนับ.กว้าง { width: auto; padding: 0 12px; font-size: 13.5px; }
.ช่องขวา .แถวจำนวน .คูณ { font-size: 11px; }
.ช่องขวา .ลัดจำนวน { gap: 3px; min-width: 0; margin-left: 2px; }
.ช่องขวา .ชิปลัด { height: 36px; padding: 0; font-size: 11.5px; border-radius: 6px; }

.ช่องขวา .ต่ำกว่าต่ำสุด { font-size: 10.5px; padding: 4px 6px; }
.ช่องขวา .ปุ่มเต็มแถว {
  height: 40px; margin: 8px; width: calc(100% - 16px); font-size: 13px;
}
.ช่องขวา .กล่องขนส่ง { margin: 8px; padding: 9px 10px; gap: 7px; }
.ช่องขวา .แถวขนส่ง input { width: 82px; height: 38px; font-size: 16px; }
.ช่องขวา .แถวขนส่ง .หน่วย { font-size: 11.5px; }
.ช่องขวา .ปุ่มสลับ { height: 38px; padding: 0 12px; font-size: 13px; }

.ช่องขวา .สรุปยอด { margin: 8px; padding: 11px 12px 14px; gap: 7px; border-radius: 8px; }
.ช่องขวา .สรุปยอด .บรรทัด span { font-size: 12px; }
.ช่องขวา .สรุปยอด .บรรทัด b { font-size: 16px; }
.ช่องขวา .สรุปยอด .รวม { padding-top: 7px; }
.ช่องขวา .สรุปยอด .รวม span { font-size: 13px; }
.ช่องขวา .สรุปยอด .รวม b { font-size: 27px; }
.ช่องขวา .สรุปยอด .รวม i { font-size: 10.5px; }
.ช่องขวา .สรุปยอด .หมายเหตุ { font-size: 10.5px; }
.ช่องขวา .แถวVat { padding-top: 8px; gap: 6px; }
.ช่องขวา .สลับสองทาง button { height: 36px; font-size: 12.5px; }
.ช่องขวา .ช่องVat { width: 46px; height: 36px; font-size: 14px; padding: 0 4px; }
.ช่องขวา .แถวVat .เปอร์เซ็นต์ { font-size: 12px; }
.ช่องขวา .ปุ่มคัดลอก { height: 42px; font-size: 13.5px; }
.ช่องขวา .ปุ่มเปิดบิล { height: 44px; font-size: 14.5px; }

/* ---------- แถบคิดยอดลอยอยู่ล่างจอ (มือถือ) ---------- */
.แถบคิดยอด {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 15;
  height: 60px; padding: 0 16px; border-radius: 10px;
  background: var(--แดง); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(35, 31, 32, .28);
}
.แถบคิดยอด .ขวา { display: flex; align-items: center; gap: 6px; font-size: 20px; }
/* 🔴 ต้องมีบรรทัดนี้ ไม่งั้น hidden ไม่ทำงาน — `display: flex` ข้างบนชนะกฎ [hidden] ของเบราว์เซอร์
   ผลคือแถบแดง "0 รายการ 0 บาท" ลอยค้างอยู่ล่างจอมือถือตลอดเวลาแม้ยังไม่ได้เลือกอะไร */
.แถบคิดยอด[hidden] { display: none; }
/* อยู่หน้าคิดยอดอยู่แล้ว ไม่ต้องมีแถบลิงก์ไปหน้าคิดยอดอีก — มันบังปุ่มข้างล่างเฉยๆ */
body.หน้า-คิดยอด .แถบคิดยอด { display: none; }

/* ---------- ข้อความแจ้งสั้นๆ ---------- */
.ข้อความลอย {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 30;
  max-width: 90vw; padding: 11px 16px; border-radius: 8px;
  background: var(--ดำ); color: var(--พื้น);
  font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: 0 4px 14px rgba(35, 31, 32, .3);
}

/* ---------- ตารางแบบ 3a: แตกรหัสกับน้ำหนักออกเป็นคอลัมน์ ----------
   ใช้ container query ดูความกว้างของช่องกลางจริงๆ ไม่ใช่ความกว้างจอ
   เพราะช่องกลางจะเหลือที่เท่าไหร่ขึ้นกับว่าแถบซ้าย/ขวากางอยู่หรือเปล่า */
.ช่องกลาง { container-type: inline-size; container-name: กลาง; }

@container กลาง (min-width: 600px) {
  .หัวคอลัมน์, .แถวสินค้า {
    /* บีบคอลัมน์ตายตัวลงจากแบบเล็กน้อย เพื่อให้ชื่อสินค้าเหลือที่พออ่านจบในบรรทัดเดียว
       ตอนอยู่บน iPad ที่ตารางได้ 600px พอดี */
    grid-template-columns: minmax(0, 1.9fr) 96px 112px 84px; gap: 8px;
  }
  .ช่องน้ำหนัก { display: block; text-align: right; font-size: 13.5px; color: rgba(35, 31, 32, .7); }
  /* น้ำหนักมีคอลัมน์ของตัวเองแล้ว ไม่ต้องเขียนซ้ำใต้ชื่อ */
  .แถวสินค้า .ย่อยแคบ { display: none; }
  /* ผู้ใช้สั่ง (28 ส.ค. 2569): "ทำให้ตัวหนังสือ ปุ่มต่างๆ เล็กลง จะได้เห็นรายการสินค้ามากขึ้น"
     จอนี้มีเมาส์ ไม่ต้องเผื่อนิ้วโป้งเหมือนมือถือ จึงบีบความสูงแถวลงได้
     52px -> 42px = เห็นเพิ่มราว 4 แถวต่อหนึ่งหน้าจอ 800px */
  .แถวสินค้า { min-height: 42px; padding: 4px 14px; }
  .แถวสินค้า .ชื่อสินค้า b { font-size: 14.5px; }
  .แถวสินค้า .ชื่อสินค้า code { font-size: 10.5px; }
  .แถวสินค้า .ราคา { font-size: 16px; }
  .แถวสินค้า .ต่ำสุด { font-size: 13px; }
  .แถวสินค้า .ช่องน้ำหนัก { font-size: 12.5px; }
  .หัวกลุ่ม { padding: 5px 12px; }
  .หัวกลุ่ม b { font-size: 14.5px; }
  .หัวกลุ่ม small { font-size: 10.5px; }
  .หัวคอลัมน์ { padding: 5px 14px; font-size: 10.5px; }
}

/* ---------- iPad แนวตั้ง / จอกลาง: สองช่อง (ตาราง + คิดยอด) ---------- */
/* แบบจาก Claude Design ยังไม่มีจอแนวตั้ง อันนี้ผมออกเอง:
   เอาบิลมาไว้ข้างขวาเลย เพราะที่ยังพอ ดีกว่าซ่อนแล้วให้กดเข้าออก */
@media (min-width: 768px) and (max-width: 1099px) {
  body { padding-bottom: 0; }
  /* จอนี้กว้างพอให้มีชื่อร้านข้างตราแล้ว */
  .ตราสี { width: 42px; height: 42px; }
  .ชื่อตรา { display: flex; flex-direction: column; }
  .ชื่อตรา b { font-size: 15px; line-height: 1.2; }
  .ชื่อตรา small { font-size: 11.5px; color: var(--จาง); }
  .จอ { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 360px); }
  .ช่องขวา {
    display: block; position: sticky; top: 96px;
    height: calc(100vh - 96px); overflow-y: auto;
    background: var(--พื้น); border-left: 1px solid var(--เส้น);
  }
  .ช่องกลาง { background: #fff; min-height: calc(100vh - 96px); }
  .แถบคิดยอด { display: none; }
  .ข้อความลอย { bottom: 24px; }
  body.หน้า-คิดยอด .ช่องขวา { display: none; }
  body.หน้า-คิดยอด .จอ { grid-template-columns: minmax(0, 1fr); }
  body.หน้า-คิดยอด .เครื่องคิดยอด { max-width: 640px; margin: 0 auto; }
}

/* ---------- iPad แนวนอน / จอคอม: แบบ 3a สามช่องเต็ม ---------- */
@media (min-width: 1100px) {
  body { padding-bottom: 0; }
  .ส่วนหัวรวม { flex-direction: column; }

  /* แถบร้าน 66px: ตรา - ช่องค้นหา - สถานะราคา */
  .แถบหัว { height: 66px; padding: 0 20px; gap: 18px; }
  .ตรา { gap: 11px; }
  .ตราสี { width: 46px; height: 46px; }
  .ชื่อตรา { display: flex; flex-direction: column; }
  .ชื่อตรา b { font-size: 16px; line-height: 1.2; }
  .ชื่อตรา small { font-size: 12px; color: var(--จาง); }
  .แถบหัว .ช่องค้นหา {
    flex: none; width: 400px; height: 46px;
    background: var(--พื้น); border: 1px solid rgba(35, 31, 32, .22);
  }
  .สถานะราคา {
    display: flex; flex-direction: column; align-items: flex-end;
    margin-left: auto; flex: none;
  }
  .สถานะราคา b { font-size: 13px; }
  .สถานะราคา small { font-size: 11.5px; color: var(--จาง); }
  .แถบบน { padding: 9px 20px; font-size: 13px; }
  .แถบบน .วันที่ { display: none; }      /* ย้ายไปอยู่บนแถบร้านแล้ว */

  .จอ {
    display: grid;
    /* ตารางต้องได้อย่างน้อย 600px เพื่อให้ขึ้นครบ 5 คอลัมน์ตามแบบ 3a
       ที่เหลือแบ่งกัน 1.35 ต่อ 1 ระหว่างตารางกับบิล
       iPad 1180 -> ตาราง 600 บิล 364 (ตรงกับแบบ) | จอ 1280 -> 612/452 | จอ 1920 -> 980/724 */
    /* ⚠️ เคยลองบีบแถบขวาให้แคบแล้วผู้ใช้ตีกลับ (28 ส.ค. 2569 รอบสอง):
       "ไม่ได้ให้ย่อให้มันแคบลง พื้นที่ตรงกลางเหลือเยอะมาก"
       สิ่งที่ต้องการคือ **ตัวหนังสือกับปุ่มเล็กลง** เพื่อให้เห็นรายการได้มากขึ้น
       ไม่ใช่คอลัมน์แคบลง — สัดส่วนคอลัมน์จึงกลับมาเป็นของเดิม
       ตัวที่ย่อจริงอยู่ในบล็อก "แถบขวาบนจอคอม" และ "ความหนาแน่นของตารางสินค้า" */
    grid-template-columns: 216px minmax(600px, 1.35fr) minmax(344px, 1fr);
    align-items: start;
  }
  .ช่องซ้าย, .ช่องขวา {
    display: block; position: sticky; top: 106px;
    height: calc(100vh - 106px); overflow-y: auto; background: #fff;
  }
  .ช่องซ้าย { border-right: 1px solid var(--เส้น); }
  .ช่องขวา { border-left: 1px solid var(--เส้น); background: var(--พื้น); }
  .ช่องกลาง { min-height: calc(100vh - 106px); background: #fff; }

  .หัวช่องซ้าย {
    padding: 11px 14px; border-bottom: 1px solid rgba(35, 31, 32, .1);
    font-size: 11.5px; font-weight: 600; color: var(--จาง);
  }
  .หมวดข้าง {
    display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 5px 12px;
    border-left: 3px solid transparent; border-bottom: 1px solid rgba(35, 31, 32, .07);
  }
  .หมวดข้าง:hover { background: var(--พื้น); }
  .หมวดข้าง.เลือก { background: var(--พื้น); border-left-color: var(--แดง); }
  .หมวดข้าง .รหัสหมวด { width: 32px; height: 28px; font-size: 11px; }
  .หมวดข้าง .ชื่อ {
    flex: 1; font-size: 14px; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .หมวดข้าง .นับ { font-size: 12.5px; color: var(--จาง); }

  .หัวช่องขวา {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--เส้น);
  }
  .หัวช่องขวา b { font-size: 16.5px; }
  .หัวช่องขวา .ปุ่มรอง { height: 44px; }

  /* ชื่อหมวดกับปุ่มกรองอยู่แถวเดียวกันตามแบบ 3a */
  .หัวหมวด { padding: 14px 18px 10px; border-bottom: 0; }
  .หัวหมวด .แถวหัว { gap: 12px; align-items: center; }
  .ปุ่มย้อน { display: none; }               /* มีแถบหมวดค้างซ้ายแล้ว */
  .ชื่อหมวด b { font-size: 22px; }
  .ชื่อหมวด small { font-size: 12.5px; }
  /* 🔴 padding:0 เดิมทำให้ 2 แถบ .ปุ่มกรอง ที่วางซ้อนกัน (หน้าแก้ราคา — แถบเครื่องมือ + แถบหมวดย่อย)
     ชิดกันสนิทไม่มีช่องว่างเลย (ผู้ใช้ท้วง 30 ส.ค. 2569) — คืน padding-top ให้มีช่องหายใจ */
  .ปุ่มกรอง { padding: 10px 0 0; margin-left: 12px; flex: 1; }

  .แถบคิดยอด { display: none; }              /* ยอดอยู่ช่องขวาตลอดเวลา */
  .ข้อความลอย { bottom: 24px; left: 240px; transform: none; }
  .สรุปยอด { border-radius: 8px; margin: 10px; }

  /* หมวดอยู่แถบซ้ายแล้ว ตรงกลางเลยบอกวิธีใช้แทนการโชว์รายการหมวดซ้ำ */
  body.หน้า-หน้าแรก #รายการหมวด { display: none; }
  .คำแนะนำคอม { display: block; padding: 28px 24px; max-width: 560px; }
  .คำแนะนำคอม h1 { margin: 0 0 12px; font-size: 24px; }
  .คำแนะนำคอม p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: rgba(35, 31, 32, .75); }

  /* หน้า /คิดยอด มีเครื่องคิดยอดอยู่กลางจออยู่แล้ว ไม่ต้องมีช่องขวาซ้ำ */
  body.หน้า-คิดยอด .ช่องขวา { display: none; }
  body.หน้า-คิดยอด .จอ { grid-template-columns: 216px minmax(0, 1fr); }
  body.หน้า-คิดยอด .เครื่องคิดยอด { max-width: 720px; }
}

/* ============================================================ ลูกค้า (T1.4) */
.แถวหมวด.ปิดแล้ว { opacity: .5; }
.ป้ายปิด {
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--จาง);
  border: 1px solid var(--เส้น); border-radius: 4px; padding: 1px 5px; vertical-align: middle;
}
.แถบสำเร็จ {
  margin: 10px 12px 0; padding: 9px 12px; border-radius: 8px;
  background: #E8F5E9; color: #1B5E20; font-size: 13.5px; font-weight: 600;
}

.ฟอร์มลูกค้า, .ฟอร์มเอกสาร { padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 12px; }
.ฟอร์มลูกค้า fieldset, .ฟอร์มเอกสาร fieldset {
  margin: 0; padding: 12px; border: 1px solid var(--เส้น); border-radius: 10px; background: #fff;
}
.ฟอร์มลูกค้า legend, .ฟอร์มเอกสาร legend {
  padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--จาง);
}
/* ป้ายบอกว่าเป็นข้อมูลชั้นจำกัด (ข้อกำหนดข้อ 5) — พอมี T1.7 กล่องพวกนี้จะหายไปเองสำหรับคนที่ไม่มีสิทธิ์ */
.ฟอร์มลูกค้า .ป้ายชั้น {
  font-style: normal; font-weight: 500; font-size: 11px; color: var(--น้ำตาล);
}
.ฟอร์มลูกค้า fieldset.ชั้นจำกัด { border-color: var(--น้ำตาล); }
.ฟอร์มลูกค้า label, .ฟอร์มเอกสาร label { display: block; margin-top: 10px; }
.ฟอร์มลูกค้า label:first-of-type, .ฟอร์มเอกสาร label:first-of-type { margin-top: 0; }
.ฟอร์มลูกค้า label > span, .ฟอร์มเอกสาร label > span {
  display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600;
}
.ฟอร์มลูกค้า label > span i, .ฟอร์มเอกสาร label > span i {
  font-style: normal; font-weight: 500; color: var(--แดง); font-size: 11.5px;
}
.ฟอร์มลูกค้า label > small, .ฟอร์มเอกสาร label > small {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--จาง); line-height: 1.5;
}
.ฟอร์มลูกค้า textarea, .ฟอร์มเอกสาร textarea {
  font-family: inherit; line-height: 1.5; resize: vertical;
  height: auto; padding: 8px 10px;   /* ไม่งั้นโดน height 46px ของช่องบรรทัดเดียวบีบ */
}
.ฟอร์มลูกค้า select, .ฟอร์มเอกสาร select { background: #fff; }
.ฟอร์มลูกค้า .ปุ่มเต็มแถว, .ฟอร์มเอกสาร .ปุ่มเต็มแถว { margin: 0 0 8px; }

/* ตารางสิทธิ์บทบาท (checkmark) — สรุปให้เห็นชัดว่าบทบาทที่เลือกทำอะไรได้บ้าง */
.ตารางสิทธิ์ { margin-top: 10px; overflow-x: auto; }
.ตารางสิทธิ์ table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ตารางสิทธิ์ th, .ตารางสิทธิ์ td {
  padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--เส้น); white-space: nowrap;
}
.ตารางสิทธิ์ th:first-child, .ตารางสิทธิ์ td:first-child { text-align: left; font-weight: 600; }
.ตารางสิทธิ์ th { font-weight: 700; color: var(--จาง); font-size: 12px; }
.ตารางสิทธิ์ td.มี { color: #1E7A34; font-weight: 700; }
.ตารางสิทธิ์ td.ไม่มี { color: var(--จาง); opacity: .5; }

.ท้ายฟอร์ม { padding: 4px 12px 24px; }
.ประวัติเอกสารลูกค้า {
  margin: 4px 0 10px; border: 1px solid var(--เส้น); border-radius: 10px; overflow: hidden;
}
.ประวัติเอกสารลูกค้า .หัวกลุ่มเล็ก { padding: 10px 12px 4px; }
.ประวัติเอกสารลูกค้า .แถวเอกสาร:last-child { border-bottom: 0; }
/* วงเงินเทียบยอดค้าง (ระบบ 4) — บรรทัดเดียวใต้ช่องวงเงิน ไม่ต้องเปิดหน้าอื่นก็รู้ว่าเหลือเท่าไหร่ */
.วงเงินเทียบยอด { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--จาง); }
.วงเงินเทียบยอด.เกิน { color: var(--แดง); }
.ท้ายฟอร์ม form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ท้ายฟอร์ม small { font-size: 11.5px; color: var(--จาง); line-height: 1.5; }
.ประวัติแก้ { margin: 14px 0 0; font-size: 11.5px; color: var(--จาง); line-height: 1.6; }

/* หน้าลูกค้าไม่มีเครื่องคิดยอด ต้องคืนพื้นที่ช่องขวาให้เนื้อหา ไม่งั้นเหลือคอลัมน์ว่างข้างจอ */
@media (min-width: 768px) and (max-width: 1099px) {
  /* หน้าที่ไม่มีเครื่องคิดยอด ต้องคืนพื้นที่คอลัมน์ขวาให้เนื้อหา
     ไม่งั้นคอลัมน์ว่าง 360px จะบีบการ์ดจนเหลือ 139px */
  body.หน้า-กล่องระบบ .จอ,
  body[class*="หน้า-ลูกค้า"] .จอ,
  /* 🔴 D-054 — โมดูลราคาไม่มีเครื่องคิดยอดฝั่งขวาเหมือนกัน แต่ไม่เคยมีใครประกาศ
     grid-template-columns ของตัวเองมาก่อนเลยตั้งแต่ T1.12 คอลัมน์ขวา ~360px ที่ว่างเปล่า
     เลยบีบเนื้อหาจนตัวหนังสือ/ป้ายราคาแตกเป็นคำๆ (ผู้ใช้ท้วง 30 ส.ค. 2569 — เจอจากรูปจริง) */
  /* 🔴 ก้อนซื้อ/รับของ/ทุน (ขั้น 3) ก็ไม่มีเครื่องคิดยอดเหมือนกัน ต้องประกาศเองตั้งแต่วันแรก
     ไม่ใช่รอให้ผู้ใช้ท้วงจากรูปจริงเหมือนที่เกิดกับโมดูลราคาใน D-054 */
  body[class*="หน้า-ผู้ขาย"] .จอ,
  body[class*="หน้า-สั่งซื้อ"] .จอ,
  body[class*="หน้า-รับของ"] .จอ,
  body[class*="หน้า-ต้นทุน"] .จอ,
  body[class*="หน้า-ราคา"] .จอ { grid-template-columns: minmax(0, 1fr); }
  body[class*="หน้า-ลูกค้า"] .ฟอร์มลูกค้า,
  body[class*="หน้า-ลูกค้า"] .ท้ายฟอร์ม { max-width: 640px; }
}
@media (min-width: 1100px) {
  .เมนูจอเล็ก { display: none; }            /* จอนี้มีทางเข้าอยู่แถบซ้ายแล้ว */
  body[class*="หน้า-ลูกค้า"] .จอ,
  body[class*="หน้า-ผู้ขาย"] .จอ,
  body[class*="หน้า-สั่งซื้อ"] .จอ,
  body[class*="หน้า-รับของ"] .จอ,
  body[class*="หน้า-ต้นทุน"] .จอ,
  body[class*="หน้า-ราคา"] .จอ { grid-template-columns: 216px minmax(0, 1fr); }
  body[class*="หน้า-ลูกค้า"] .ฟอร์มลูกค้า,
  body[class*="หน้า-ลูกค้า"] .ท้ายฟอร์ม { max-width: 720px; }
  body[class*="หน้า-ลูกค้า"] .แถวหมวด { max-width: 900px; }
}

/* ============================================ หน้ากล่องระบบ (T1.13 · แบบ 1a การ์ดกระเบื้อง) */
/* มือถือเป็นค่าเริ่มต้น แล้วค่อยขยายที่จอใหญ่ ตามแนวเดียวกับส่วนอื่นของไฟล์นี้ */
.กล่องระบบ { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; }

/* หัวหน้าแรก — คำทักทาย + ปุ่มลัด (ระบบ 7) */
.หัวหน้าแรก { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ทักทายหน้าแรก { margin: 0; font-size: 17px; font-weight: 700; }
.ทักทายหน้าแรก small { font-size: 13px; font-weight: 500; color: var(--จาง); }

/* แถบสรุปตัวเลขประจำวัน — เจ้าของเท่านั้น (ระบบ 7) */
.แถบkpi { display: flex; flex-wrap: wrap; gap: 8px; }
.ช่องkpi {
  flex: 1 1 120px; padding: 10px 14px; background: #fff;
  border: 1px solid var(--เส้น); border-radius: 10px;
  font-size: 12px; color: var(--จาง); line-height: 1.5;
}
.ช่องkpi b { display: block; font-size: 19px; font-weight: 700; color: var(--ดำ); }
.ช่องkpi.เตือน { border-color: rgba(206, 0, 0, .35); background: #FFF8F8; }
.ช่องkpi.เตือน b { color: var(--แดง); }

/* แถวบน — เรื่องที่กดทุกวัน การ์ดแดงใบใหญ่ */
.แถวเด่น { display: flex; flex-direction: column; gap: 10px; }
.การ์ดเด่น {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 86px; padding: 12px 18px;
  background: var(--แดง); border-radius: 16px; color: #fff;
}
.การ์ดเด่น:active { background: #B00000; }
.การ์ดเด่น .กรอบไอคอน {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; flex: none;
  background: rgba(255, 255, 255, .16); border-radius: 13px;
}
.การ์ดเด่น .กรอบไอคอน svg { width: 27px; height: 27px; }
.การ์ดเด่น b { font-size: 23px; font-weight: 700; line-height: 1.2; }
.การ์ดเด่น small {
  display: block; font-size: 13px; color: rgba(255, 255, 255, .84); line-height: 1.35;
}

/* แถวล่าง — เรื่องที่นานๆ ใช้ครั้ง การ์ดขาวใบเล็ก */
.แถวรอง { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.การ์ดรอง {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 8px; min-height: 114px; padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--เส้น); border-radius: 14px;
}
.การ์ดรอง:active { border-color: var(--แดง); }
.การ์ดรอง .กรอบไอคอน {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; background: var(--พื้น); border-radius: 10px;
}
.การ์ดรอง .กรอบไอคอน svg { width: 22px; height: 22px; }
.การ์ดรอง b { font-size: 18px; font-weight: 700; line-height: 1.2; }
.การ์ดรอง small { display: none; }        /* จอเล็กเอาแค่ชื่อ ไม่งั้นการ์ดสูงเกิน */

/* ตัวเลขแจ้งเตือน — ยังไม่มีข้อมูลจริงจนถึงขั้น 2 แต่ทำที่ไว้แล้วจะได้ไม่ต้องรื้อ
   กฎ: ไม่มีอะไรต้องทำ = ไม่มีป้าย ห้ามขึ้นเลข 0 ค้างไว้ (D-036) */
.ป้ายเตือน {
  position: absolute; top: 10px; right: 12px;
  min-width: 28px; height: 28px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; border-radius: 14px;
}
.การ์ดเด่น .ป้ายเตือน { color: var(--แดง); background: #fff; }
.การ์ดรอง .ป้ายเตือน { color: #fff; background: var(--แดง); top: 9px; right: 9px; }

/* เรื่องที่ยังทำไม่เสร็จ = บรรทัดตัวหนังสือ ไม่ใช่กล่องเทากดไม่ได้ */
.กำลังทำเพิ่ม {
  margin: 2px 0 0; padding: 12px 14px; font-size: 13px; line-height: 1.6;
  color: var(--จาง); background: rgba(35, 31, 32, .04); border-radius: 12px;
}
.กำลังทำเพิ่ม b { display: block; font-size: 12px; color: var(--ดำ); }

@media (min-width: 768px) {
  .กล่องระบบ { padding: 26px 32px 32px; gap: 18px; max-width: 1180px; }
  .แถวเด่น {
    display: grid; grid-template-columns: repeat(var(--จำนวน, 3), minmax(0, 1fr)); gap: 20px;
  }
  /* จอนี้กว้างพอให้การ์ดเด่นเป็นทรงสูงตามแบบ 1a — ไอคอนอยู่บน ชื่ออยู่ล่าง */
  .การ์ดเด่น {
    flex-direction: column; align-items: flex-start; justify-content: flex-end;
    gap: 14px; min-height: 200px; padding: 26px;
    box-shadow: 0 10px 24px rgba(206, 0, 0, .20);
  }
  /* 🔴 ไอคอนดันขึ้นบนสุด แล้วเว้นที่คำอธิบายไว้ 2 บรรทัดเสมอ
     ไม่งั้นการ์ดที่คำอธิบายยาวกว่าเพื่อน ชื่อจะเลื่อนขึ้นไปคนละระดับกับใบอื่น
     ซึ่งเป็นสิ่งที่ผู้ใช้ท้วงว่า "ไม่สวย" เมื่อ 29 ส.ค. 2569 */
  .การ์ดเด่น .กรอบไอคอน { width: 68px; height: 68px; border-radius: 17px; margin-bottom: auto; }
  .การ์ดเด่น .กรอบไอคอน svg { width: 36px; height: 36px; }
  .การ์ดเด่น b { font-size: 30px; }
  .การ์ดเด่น small { font-size: 15px; min-height: 2.7em; }

  .แถวรอง { grid-template-columns: repeat(var(--จำนวน, 3), minmax(0, 1fr)); gap: 18px; }
  .การ์ดรอง {
    flex-direction: row; align-items: center; gap: 18px;
    min-height: 118px; padding: 0 22px; box-shadow: 0 2px 6px rgba(35, 31, 32, .05);
  }
  .การ์ดรอง .กรอบไอคอน { width: 54px; height: 54px; border-radius: 13px; }
  .การ์ดรอง .กรอบไอคอน svg { width: 28px; height: 28px; }
  .การ์ดรอง .เนื้อการ์ด { min-width: 0; }
  .การ์ดรอง b { font-size: 22px; }
  .การ์ดรอง small { display: block; font-size: 14px; color: var(--จาง); line-height: 1.4; }
  .กำลังทำเพิ่ม { font-size: 14px; padding: 14px 18px; }
}

@media (min-width: 1100px) {
  .กล่องระบบ { padding: 32px 40px 40px; gap: 22px; }
  .การ์ดเด่น { min-height: 236px; padding: 30px; gap: 16px; border-radius: 18px; }
  .การ์ดเด่น .กรอบไอคอน { width: 76px; height: 76px; border-radius: 18px; }
  .การ์ดเด่น .กรอบไอคอน svg { width: 40px; height: 40px; }
  .การ์ดเด่น b { font-size: 34px; }
  .การ์ดเด่น small { font-size: 17px; }
  .การ์ดรอง { min-height: 150px; border-radius: 16px; }
  .การ์ดรอง b { font-size: 24px; }
  .การ์ดรอง small { font-size: 15px; }
  /* หน้านี้ไม่มีแถบซ้ายและไม่มีตะกร้า จอจึงเป็นคอลัมน์เดียวเต็มความกว้าง */
  body.หน้า-กล่องระบบ .จอ { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ ผู้ใช้ + เข้าระบบ (T1.7) */
/* ป้ายคนที่ล็อกอินอยู่ บนแถบหัว — มือถือเหลือแค่วงกลม ชื่อโผล่ตอนจอกว้างพอ */
.ป้ายผู้ใช้ { display: flex; align-items: center; gap: 9px; flex: none; margin-left: auto; }
.วงกลมผู้ใช้ {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--ดำ); color: var(--พื้น);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.ชื่อผู้ใช้บนแถบ { display: none; }

/* หน้าล็อกอิน — หน้าเดี่ยว ไม่มีเมนู ไม่มีแถบหัว จัดกลางจอ */
body.หน้า-เข้าระบบ { padding-bottom: 0; }
.กล่องเข้าระบบ {
  max-width: 420px; margin: 0 auto; padding: 32px 20px 40px;
  display: flex; flex-direction: column;
}
.ตราเข้าระบบ { width: 168px; max-width: 60%; height: auto; align-self: center; }
.กล่องเข้าระบบ h1 { margin: 22px 0 4px; font-size: 24px; text-align: center; }
.กล่องเข้าระบบ .นำ {
  margin: 0 0 18px; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--จาง);
}
.กล่องเข้าระบบ .นำ b { color: var(--ดำ); }
.กล่องเข้าระบบ .กล่องปัญหา { margin: 0 0 14px; padding: 12px 14px; }
.กล่องเข้าระบบ .กล่องปัญหา b { font-size: 14px; line-height: 1.5; }

.ฟอร์มเข้าระบบ {
  padding: 16px; background: #fff;
  border: 1px solid var(--เส้น); border-radius: 12px;
}
.ฟอร์มเข้าระบบ label { display: block; margin-top: 14px; }
.ฟอร์มเข้าระบบ label:first-of-type { margin-top: 0; }
.ฟอร์มเข้าระบบ label > span {
  display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600;
}
.ฟอร์มเข้าระบบ label > span i {
  font-style: normal; font-weight: 500; color: var(--แดง); font-size: 11.5px;
}
.ฟอร์มเข้าระบบ label > small {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--จาง); line-height: 1.5;
}
.ช่องรหัสผ่าน { position: relative; }
.ช่องรหัสผ่าน .ช่องข้อความ { padding-right: 44px; }
.ปุ่มดูรหัส {
  position: absolute; top: 0; right: 0; width: 44px; height: 46px;
  border: 0; background: transparent; color: var(--จาง); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ปุ่มดูรหัส .ขีดฆ่า { display: none; }
.ปุ่มดูรหัส.เปิดอยู่ { color: var(--ดำ); }
.ปุ่มดูรหัส.เปิดอยู่ .ขีดฆ่า { display: inline; }
/* ปุ่มเข้าระบบเป็นปุ่มแดงเต็มแถว สูง 52px — คนใช้ยืนอยู่หน้าร้าน มือเปื้อน กดด้วยนิ้วโป้ง */
.ปุ่มเข้าระบบ {
  display: block; width: 100%; height: 52px; margin-top: 18px;
  border: 0; border-radius: 10px; background: var(--แดง); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ปุ่มเข้าระบบ:active { background: #B00000; }
.แจ้งเก็บข้อมูล {
  margin: 16px 2px 0; font-size: 11.5px; line-height: 1.65; color: var(--จาง);
}

/* รายการประวัติการเข้าใช้ในหน้าบัญชีของฉัน */
.ประวัติเข้าใช้ { margin: 0; padding: 0; list-style: none; }
.ประวัติเข้าใช้ li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  padding: 9px 0; border-top: 1px solid var(--เส้น);
}
.ประวัติเข้าใช้ li:first-child { border-top: 0; }
.ประวัติเข้าใช้ b { font-size: 13.5px; font-weight: 600; }
.ประวัติเข้าใช้ li.ล้มเหลว b { color: var(--แดง); }
.ประวัติเข้าใช้ span { font-size: 12.5px; color: var(--จาง); text-align: right; }
.ประวัติเข้าใช้ small {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--จาง); word-break: break-word;
}

/* ---------- รายชื่อผู้ใช้ / ใครออนไลน์ (T1.7 ก้อน 3) ---------- */
.รายชื่อผู้ใช้ { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.แถวผู้ใช้ {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
}
.แถวผู้ใช้.ปิดแล้ว { opacity: .55; }
.แถวผู้ใช้ .เนื้อแถว { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.แถวผู้ใช้ .เนื้อแถว b { font-size: 15.5px; line-height: 1.3; }
.แถวผู้ใช้ .เนื้อแถว small { font-size: 12px; color: var(--จาง); line-height: 1.45; }
.แถวผู้ใช้ .ปุ่มรอง { height: 40px; font-size: 13px; }
.ป้ายออนไลน์ {
  flex: none; font-size: 11px; font-weight: 700; color: #1B5E20;
  background: #E8F5E9; border-radius: 5px; padding: 3px 7px;
}

/* ---------- หน้าประวัติ / audit log (T1.7 ก้อน 5) ---------- */
.ตัวกรองประวัติ {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 4px; align-items: center;
}
.ตัวกรองประวัติ .ช่องข้อความ { width: auto; flex: 1 1 150px; min-width: 0; }
.ตัวกรองประวัติ .ปุ่มรอง { margin-left: 0; display: flex; align-items: center; }
.ช่องติ๊ก {
  display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 10px;
  background: #fff; border: 1px solid var(--เส้น); border-radius: 8px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.ช่องติ๊ก input { width: 20px; height: 20px; }

.รายการประวัติ { padding: 4px 12px 8px; display: flex; flex-direction: column; }
.แถวประวัติ {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; border-top: 1px solid var(--เส้น);
}
.แถวประวัติ:first-child { border-top: 0; }
.เวลาประวัติ { font-size: 11.5px; color: var(--จาง); font-weight: 600; }
.เนื้อประวัติ { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.เนื้อประวัติ b { font-size: 14.5px; }
.เนื้อประวัติ .ทำอะไร { font-size: 13.5px; }
.เนื้อประวัติ code { font-size: 12.5px; background: var(--เหลือง); padding: 1px 5px; border-radius: 4px; }
.เนื้อประวัติ small { font-size: 11.5px; color: var(--จาง); line-height: 1.5; word-break: break-word; }
/* ⭐ ครั้งที่เข้าไม่สำเร็จต้องเห็นชัดจากการกวาดตา ไม่ต้องอ่านทีละบรรทัด */
.แถวประวัติ.ล้มเหลว .ทำอะไร { color: var(--แดง); font-weight: 700; }

@media (min-width: 768px) {
  /* จอกว้างพอให้เวลากับเนื้อหาอยู่บรรทัดเดียวกัน อ่านไล่ตามเวลาได้เร็วกว่า */
  .แถวประวัติ { flex-direction: row; align-items: baseline; gap: 14px; }
  .เวลาประวัติ { flex: none; width: 148px; }
  .เนื้อประวัติ { flex: 1; }
  .เนื้อประวัติ b { display: inline; }
  .เนื้อประวัติ .ทำอะไร { display: inline; margin-left: 8px; }
}

@media (min-width: 768px) {
  .ชื่อผู้ใช้บนแถบ { display: flex; flex-direction: column; line-height: 1.2; }
  .ชื่อผู้ใช้บนแถบ b { font-size: 14px; }
  .ชื่อผู้ใช้บนแถบ small { font-size: 11.5px; color: var(--จาง); }
  .กล่องเข้าระบบ { padding-top: 56px; }
  /* หน้าบัญชีของฉันไม่มีเครื่องคิดยอด ต้องคืนพื้นที่คอลัมน์ขวาให้เนื้อหา */
  body.หน้า-บัญชีของฉัน .จอ,
  body[class*="หน้า-ผู้ใช้"] .จอ,
  body.หน้า-ออนไลน์ .จอ,
  body.หน้า-ไม่มีสิทธิ์ .จอ { grid-template-columns: minmax(0, 1fr); }
  body.หน้า-บัญชีของฉัน .ฟอร์มลูกค้า,
  body.หน้า-บัญชีของฉัน .ท้ายฟอร์ม,
  body[class*="หน้า-ผู้ใช้"] .ฟอร์มลูกค้า,
  body[class*="หน้า-ผู้ใช้"] .ท้ายฟอร์ม,
  body[class*="หน้า-ผู้ใช้"] .รายชื่อผู้ใช้,
  body.หน้า-ออนไลน์ .รายชื่อผู้ใช้ { max-width: 640px; }
  body[class*="หน้า-ประวัติ"] .จอ { grid-template-columns: minmax(0, 1fr); }
  /* หน้าบัญชีรับเงิน (T2.1) อยู่ใต้เมนูตั้งค่าเหมือนกัน จึงใช้กติกาผังเดียวกัน */
  body.หน้า-บัญชีรับเงิน .จอ { grid-template-columns: minmax(0, 1fr); }
  body.หน้า-บัญชีรับเงิน .ฟอร์มเอกสาร { max-width: 720px; }
}
@media (min-width: 1100px) {
  .แถบหัว .วงกลมผู้ใช้ { width: 42px; height: 42px; font-size: 17px; }
  /* หน้าที่มีแถบซ้ายของตัวเอง (เมนูตั้งค่า) ต้องกันที่ให้แถบซ้าย 216px เหมือนหน้าลูกค้า */
  body[class*="หน้า-ผู้ใช้"] .จอ,
  body[class*="หน้า-ประวัติ"] .จอ,
  body.หน้า-บัญชีรับเงิน .จอ,
  body.หน้า-ออนไลน์ .จอ { grid-template-columns: 216px minmax(0, 1fr); }
  body[class*="หน้า-ผู้ใช้"] .ฟอร์มลูกค้า,
  body[class*="หน้า-ผู้ใช้"] .ท้ายฟอร์ม,
  body[class*="หน้า-ผู้ใช้"] .รายชื่อผู้ใช้,
  body.หน้า-ออนไลน์ .รายชื่อผู้ใช้ { max-width: 720px; }
}


/* ============================================================
   โมดูลราคา (T1.12) — หน้าแก้ราคา + หน้านำเข้าจาก Excel
   แบบที่ผู้ใช้เลือกจาก Claude Design:
     1c = หน้าแก้ราคาบนมือถือ (แป้นตัวเลขของแอปเอง)
     3b = หน้าเดียวกันบนคอม (พิมพ์ได้เลย + ประวัติราคาอยู่ข้างๆ)
     3a = หน้าดูก่อนยืนยันของการนำเข้า (ใช้ทั้งคอมและ iPad)
   ============================================================ */

/* ---------- ของใช้ร่วมในโมดูลนี้ ---------- */
.หน้าราคาแรก, .หน้านำเข้า, .หน้าดูก่อนยืนยัน { padding: 12px 12px 24px; }
.ว่างเปล่า { padding: 20px 14px; color: var(--จาง); font-size: 14px; line-height: 1.6; }
.บรรทัดบอก { margin: 8px 2px; font-size: 13px; line-height: 1.6; color: var(--จาง); }
.บรรทัดบอก b { color: var(--ดำ); }
.ปุ่มรอง.ใหญ่ { height: 52px; padding: 0 22px; font-size: 15px; display: inline-flex; align-items: center; }

.หัวกลุ่มราคา {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 18px 2px 8px;
}
.หัวกลุ่มราคา b { font-size: 17px; }
.หัวกลุ่มราคา small { font-size: 13px; color: var(--จาง); }
.หัวกลุ่มราคา .ปุ่มรอง { margin-left: auto; }

.กล่องเตือนราคา {
  background: var(--เหลือง); border: 1px solid rgba(138, 90, 0, .3);
  border-left: 5px solid var(--น้ำตาล); border-radius: 9px;
  padding: 10px 14px; margin: 10px 0;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13.5px; line-height: 1.55; color: var(--น้ำตาล);
}
.กล่องเตือนราคา b { color: var(--น้ำตาล); }
.รหัสที่หาย { display: flex; flex-wrap: wrap; gap: 5px; }
.รหัสที่หาย code {
  background: rgba(138, 90, 0, .13); border-radius: 4px; padding: 2px 5px; font-size: 11.5px;
}

/* ---------- หน้าแรกของโมดูลราคา ---------- */
.ค้นเพื่อแก้ { margin: 20px 0 10px; display: flex; flex-direction: column; gap: 10px; }
.ค้นเพื่อแก้ label > span {
  display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px;
}
/* ---------- แถบเครื่องมือของโมดูลราคา ----------
   แถบซ้ายถูกใช้เป็น 13 หมวดสินค้าไปแล้ว (ผู้ใช้สั่งให้กดไล่หมวดได้)
   ทางไป นำเข้า/ส่งออก/ประวัติ จึงต้องมีที่อยู่ของตัวเองที่เห็นได้ทุกหน้า */
.แถบเครื่องมือราคา { margin-top: 2px; }

/* ---------- แถวสินค้าในหน้าแก้ราคา (ผลค้นหา + รายการในหมวด) ---------- */
.รายการแก้ราคา {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
  overflow: hidden; margin-bottom: 12px;
}
.แถวเลือกแก้ราคา {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 9px 13px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--เส้น);
}
.แถวเลือกแก้ราคา:last-child { border-bottom: 0; }
.แถวเลือกแก้ราคา:active { background: var(--พื้น); }
.แถวเลือกแก้ราคา.ยังไม่มีราคา { background: var(--เหลือง); }
.แถวเลือกแก้ราคา.ปิดอยู่ { color: var(--จาง); }
.ซ้ายแก้ราคา { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ซ้ายแก้ราคา code { font-size: 11.5px; color: var(--จาง); }
.ซ้ายแก้ราคา b { font-size: 15px; font-weight: 500; line-height: 1.35; }
.เหตุที่แก้ไม่ได้ { flex: none; font-size: 12px; color: var(--จาง); text-align: right; }
.แถวเลือกแก้ราคา .ลูกศร { flex: none; }

/* ราคา 4 ระดับในแถวเดียว — บนมือถือโชว์แค่ปลีกกับต่ำสุด ไม่งั้นแถวแตก */
.ราคา4ระดับ { flex: none; display: flex; align-items: stretch; gap: 6px; }
.ช่องราคาย่อ {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  min-width: 58px; padding: 2px 7px; border-radius: 6px; background: var(--พื้น);
}
.ช่องราคาย่อ small { font-size: 9.5px; color: var(--จาง); line-height: 1.3; }
.ช่องราคาย่อ b { font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ช่องราคาย่อ.ราคาพื้น { background: rgba(206, 0, 0, .07); }
.ช่องราคาย่อ.ราคาพื้น small, .ช่องราคาย่อ.ราคาพื้น b { color: var(--แดง); }
/* บนจอแคบเหลือแค่ราคาปลีก (ตัวแรก) กับราคาต่ำสุด (ตัวสุดท้าย) */
@media (max-width: 599px) {
  .ช่องราคาย่อ:nth-child(2), .ช่องราคาย่อ:nth-child(3) { display: none; }
  .ช่องราคาย่อ { min-width: 52px; }
}

/* ---------- ประวัติราคา (ใช้ทั้งในหน้าแก้ราคา หน้าประวัติ และหน้านำเข้าเสร็จ) ---------- */
.กลุ่มล่าสุด { margin-top: 6px; }
.แถวประวัติ {
  display: block; background: #fff; border: 1px solid var(--เส้น); border-radius: 9px;
  padding: 9px 13px; margin-bottom: 7px; text-decoration: none; color: inherit;
}
.แถวประวัติ.ลิงก์:active { background: var(--พื้น); }
.แถวประวัติ > small { display: block; margin-top: 3px; font-size: 12px; color: var(--จาง); line-height: 1.5; }
.แถวประวัติ > small code { font-size: 11px; }
.บนประวัติ { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.วันประวัติ { font-size: 13px; font-weight: 600; flex: none; }
.ราคาประวัติ { display: flex; align-items: baseline; gap: 7px; margin-left: auto; }
.ราคาประวัติ s { font-size: 13.5px; color: var(--จาง); }
.ราคาประวัติ i { font-style: normal; color: var(--จาง); }
.ราคาประวัติ b { font-size: 18px; }
.เปอร์เซ็นต์ { font-size: 14px; font-weight: 700; flex: none; min-width: 58px; text-align: right; }
.เปอร์เซ็นต์.ลง, .เปอร์เซ็นต์.แรง { color: var(--แดง); }
.เปอร์เซ็นต์.ขึ้น { color: var(--ดำ); }

/* ---------- หน้าแก้ราคา ---------- */
.จอแก้ราคา { display: block; }
.การ์ดสินค้า {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 2px;
}
.การ์ดสินค้า code { font-size: 12.5px; font-weight: 600; color: var(--แดง); }
.การ์ดสินค้า b { font-size: 18px; line-height: 1.3; }
.การ์ดสินค้า small { font-size: 12px; color: var(--จาง); }

.ฟอร์มราคา { margin-top: 4px; }
.แถวแก้ราคา {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--เส้น); border-left: 6px solid transparent;
  border-radius: 10px; padding: 9px 13px; margin-bottom: 8px; cursor: pointer;
}
.แถวแก้ราคา.เปลี่ยนแล้ว { border-left-color: var(--ดำ); }
.แถวแก้ราคา.กำลังแก้ { border-color: var(--ดำ); }
.ป้ายระดับ { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ป้ายระดับ b { font-size: 15px; }
.ป้ายระดับ small { font-size: 12px; color: var(--จาง); }
.ป้ายระดับ em { font-style: normal; font-size: 11.5px; color: var(--จาง); display: none; }

.ช่องกรอกราคา { flex: none; display: flex; align-items: center; gap: 8px; }
.ป้ายเปลี่ยน { font-size: 12px; font-weight: 700; }
.ป้ายเปลี่ยน.แรง { color: var(--แดง); }
/* 🔴 D-054 — ตั้งใจใส่ .ช่องกรอกราคา นำหน้าเสมอ ห้ามลบเหลือ ".ช่องราคา" เฉยๆ
   เพราะ static/tsd.js ก็มีช่อง class="ช่องราคา" ของเครื่องคิดยอดหน้า /คิดยอด อยู่แล้ว
   ถ้าเผลอเขียนเป็นซีเล็กเตอร์เปล่าซ้ำ กฎข้อหลังจะทับกฎข้อแรกทุกหน้าที่มีทั้งคู่ (D-054) */
.ช่องกรอกราคา .ช่องราคา {
  width: 128px; height: 48px; box-sizing: border-box; padding: 0 12px;
  border: 1.5px solid var(--ดำ); border-radius: 9px; background: #fff;
  font-family: inherit; font-size: 22px; font-weight: 700; color: var(--ดำ);
  text-align: right; outline: none;
}
.ช่องกรอกราคา .ช่องราคา:focus { border-color: var(--แดง); }
.หน่วยราคา { font-size: 12.5px; color: var(--จาง); flex: none; width: 26px; }

/* 🔴 ราคาต่ำสุดที่อนุมัติต้องดูออกทันทีว่าเป็นคนละพวกกับ 3 ราคาขาย */
.เส้นแบ่งราคาพื้น { display: flex; align-items: center; gap: 10px; margin: 16px 2px 9px; }
.เส้นแบ่งราคาพื้น i { flex: none; width: 6px; height: 22px; background: var(--แดง); border-radius: 3px; }
.เส้นแบ่งราคาพื้น span { font-size: 15px; font-weight: 700; color: var(--แดง); }
.เส้นแบ่งราคาพื้น u { flex: 1; height: 1px; background: rgba(206, 0, 0, .25); }
.แถวแก้ราคา.ราคาพื้น { border-color: var(--แดง); border-left-color: var(--แดง); }
.แถวแก้ราคา.ราคาพื้น .ป้ายระดับ b { color: var(--แดง); }
.แถวแก้ราคา.ราคาพื้น .ช่องราคา { border-color: var(--แดง); }

.แถวปุ่มบันทึก { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 16px 0 8px; }
.ปุ่มบันทึกราคา {
  height: 54px; padding: 0 28px; border: 0; border-radius: 10px;
  background: var(--แดง); color: #fff; font-family: inherit;
  font-size: 17px; font-weight: 700; cursor: pointer;
}
.ปุ่มบันทึกราคา:active { background: #B00000; }
.คำใบ้บันทึก { font-size: 12.5px; color: var(--จาง); line-height: 1.5; }
.คำใบ้บันทึก.มีการเปลี่ยน { color: var(--ดำ); font-weight: 600; }

.ฝั่งประวัติราคา { display: none; }

/* ---------- แป้นตัวเลขของแอปเอง (แบบ 1c) ---------- */
.แป้นราคา {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 2px solid var(--ดำ); border-radius: 14px 14px 0 0;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 22px rgba(35, 31, 32, .18);
  display: flex; flex-direction: column; gap: 8px;
}
.หัวแป้น { display: flex; align-items: center; gap: 10px; }
.หัวแป้น b { font-size: 14.5px; }
.หัวแป้น span { font-size: 12.5px; color: var(--จาง); }
.หัวแป้น .เปอร์เซ็นต์ { margin-left: auto; min-width: 0; }
.ปิดแป้น {
  height: 34px; padding: 0 14px; border: 1px solid var(--เส้น); border-radius: 8px;
  background: var(--พื้น); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.จอแป้น {
  height: 52px; border: 2px solid var(--ดำ); border-radius: 9px; background: var(--พื้น);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 14px;
  font-size: 27px; font-weight: 700;
}
.จอแป้น.ว่าง { color: var(--จาง); font-size: 17px; }
.ปุ่มแป้น { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ปุ่มเลข {
  height: 46px; border: 1px solid rgba(35, 31, 32, .22); border-radius: 9px; background: #fff;
  font-family: inherit; font-size: 21px; font-weight: 700; color: var(--ดำ); cursor: pointer;
}
.ปุ่มเลข.พิเศษ { background: var(--พื้น); font-size: 16px; }
.ปุ่มเลข:active { background: var(--พื้น); }
body.เปิดแป้นอยู่ { overflow: hidden; }

/* ---------- หน้านำเข้าจาก Excel ---------- */
.ฟอร์มเลือกไฟล์ {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.ช่องเลือกไฟล์ > span { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.ช่องเลือกไฟล์ input[type=file] { display: block; width: 100%; font-family: inherit; font-size: 14px; }
.ช่องเลือกไฟล์ small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--จาง); line-height: 1.6; }
.ฟอร์มเลือกไฟล์ .ปุ่มบันทึกราคา { align-self: flex-start; }

.กล่องกฎนำเข้า {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
  padding: 13px 16px; margin-top: 12px;
}
.กล่องกฎนำเข้า > b { font-size: 15px; }
.กล่องกฎนำเข้า ul { margin: 9px 0 4px; padding-left: 20px; }
.กล่องกฎนำเข้า li { font-size: 13px; line-height: 1.7; color: var(--จาง); }
.กล่องกฎนำเข้า li b { color: var(--ดำ); }

.ตารางรอบ { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.ตารางรอบ th {
  text-align: left; padding: 8px 10px; background: var(--พื้น);
  border-bottom: 1px solid var(--เส้น); font-size: 11.5px; color: var(--จาง);
}
.ตารางรอบ td { padding: 9px 10px; border-bottom: 1px solid var(--เส้น); vertical-align: middle; }
.ตารางรอบ .เลข { text-align: right; font-variant-numeric: tabular-nums; }
.ตารางรอบ tr.ย้อนแล้ว { color: var(--จาง); }
.ชื่อไฟล์รอบ a { font-weight: 600; }
.ท้ายรอบ { text-align: right; white-space: nowrap; }

.แถบย้อนกลับ {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--เหลือง); border: 1px solid rgba(138, 90, 0, .3);
  border-radius: 10px; padding: 12px 16px; margin: 12px 0;
}
.แถบย้อนกลับ .ข้อความยืนยัน b { color: var(--น้ำตาล); }

/* ---------- หน้าดูก่อนยืนยัน (แบบ 3a) ---------- */
.แถบสรุปนำเข้า { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ก้อนสรุป {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 9px;
  padding: 9px 13px; display: flex; flex-direction: column; gap: 1px;
}
.ก้อนสรุป small { font-size: 12px; color: var(--จาง); }
.ก้อนสรุป b { font-size: 25px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ก้อนสรุป b.จาง { color: var(--จาง); }
.ก้อนสรุป.เด่น { border: 2px solid var(--ดำ); }
.ก้อนสรุป.เด่น small { color: var(--ดำ); font-weight: 600; }
.ก้อนสรุป.เหลือง { background: var(--เหลือง); border-color: rgba(138, 90, 0, .3); }
.ก้อนสรุป.เหลือง small, .ก้อนสรุป.เหลือง b { color: var(--น้ำตาล); }

.แถวคำเตือน { display: grid; gap: 9px; margin-top: 10px; }
.กล่องคำเตือน {
  background: #fff; border-radius: 9px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.กล่องคำเตือน.แดง { border: 1px solid rgba(206, 0, 0, .35); border-left: 5px solid var(--แดง); }
.กล่องคำเตือน.เหลือง { background: var(--เหลือง); border: 1px solid rgba(138, 90, 0, .35); border-left: 5px solid var(--น้ำตาล); }
.หัวคำเตือน { display: flex; flex-direction: column; gap: 2px; }
.หัวคำเตือน b { font-size: 15px; }
.กล่องคำเตือน.แดง .หัวคำเตือน b { color: var(--แดง); }
.กล่องคำเตือน.เหลือง .หัวคำเตือน b { color: var(--น้ำตาล); }
.หัวคำเตือน span { font-size: 12.5px; color: var(--จาง); line-height: 1.5; }
.กล่องคำเตือน.เหลือง .หัวคำเตือน span { color: rgba(138, 90, 0, .85); }
.บรรทัดคำเตือน {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px;
}
.บรรทัดคำเตือน code { font-size: 11.5px; color: var(--จาง); flex: none; }
.บรรทัดคำเตือน .ชื่อ { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.บรรทัดคำเตือน s { color: var(--จาง); }
.บรรทัดคำเตือน i { font-style: normal; color: var(--จาง); }
.บรรทัดคำเตือน em { font-style: normal; font-size: 12px; color: var(--จาง); }
.บรรทัดคำเตือน em.แรง { font-size: 13.5px; font-weight: 700; color: var(--แดง); }
.กล่องคำเตือน .อีก { font-size: 12px; color: var(--จาง); }

.แถบกรองตาราง { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 14px 0 8px; }
.แถบกรองตาราง .ชิป { cursor: pointer; font-family: inherit; }
.แถบกรองตาราง .ชิป em, .ปุ่มกรอง .ชิป em {
  font-style: normal; font-size: 12px; opacity: .7; margin-left: 4px;
}
.หมายเหตุกรอง { font-size: 12px; color: var(--จาง); margin-left: auto; }

/* ตารางกว้างกว่าจอ iPad — ให้เลื่อนแนวนอนในกรอบตัวเอง ไม่ดันทั้งหน้าให้ล้น */
.กรอบตารางนำเข้า {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 9px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ตารางนำเข้า { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 13px; }
.ตารางนำเข้า th {
  position: sticky; top: 0; z-index: 1; text-align: right; white-space: nowrap;
  padding: 8px 10px; background: var(--พื้น); border-bottom: 1px solid var(--เส้น);
  font-size: 12px; font-weight: 700;
}
.ตารางนำเข้า th.คอลัมน์รหัส, .ตารางนำเข้า th.คอลัมน์ชื่อ, .ตารางนำเข้า th.คอลัมน์ป้าย {
  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--จาง);
}
.ตารางนำเข้า th.ราคาพื้น { color: var(--แดง); }
.ตารางนำเข้า td { padding: 7px 10px; border-bottom: 1px solid rgba(35, 31, 32, .07); vertical-align: middle; }
.ตารางนำเข้า tr { border-left: 4px solid transparent; }
.ตารางนำเข้า tr.ผิดปกติ td:first-child { box-shadow: inset 4px 0 0 var(--แดง); }
.ตารางนำเข้า tr.ผิดปกติ { background: rgba(206, 0, 0, .035); }
.ตารางนำเข้า tr.ทับของใหม่ td:first-child { box-shadow: inset 4px 0 0 var(--น้ำตาล); }
.ตารางนำเข้า tr.ทับของใหม่ { background: rgba(251, 240, 212, .5); }
.คอลัมน์รหัส code { font-size: 12px; color: var(--จาง); }
.คอลัมน์ชื่อ { font-size: 14px; font-weight: 500; line-height: 1.35; min-width: 200px; }
.คอลัมน์ชื่อ small { display: block; font-weight: 400; font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.คอลัมน์ชื่อ small.ทับ { color: var(--น้ำตาล); }
.คอลัมน์ชื่อ small.เตือนย่อย { color: var(--แดง); }
.คอลัมน์ราคา { text-align: right; white-space: nowrap; width: 130px; }
.คอลัมน์ราคา s { display: block; font-size: 11.5px; color: rgba(35, 31, 32, .45); }
.คอลัมน์ราคา b { display: block; font-size: 17px; }
.คอลัมน์ราคา em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--จาง); }
.คอลัมน์ราคา .คงเดิม { font-size: 12px; color: rgba(35, 31, 32, .38); }
.คอลัมน์ราคา.เปลี่ยน { background: rgba(251, 240, 212, .75); }
.คอลัมน์ราคา.ผิดปกติ { background: rgba(206, 0, 0, .1); }
.คอลัมน์ราคา.ผิดปกติ b, .คอลัมน์ราคา.ผิดปกติ em { color: var(--แดง); }
.ป้ายแถว {
  display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.35;
  background: rgba(35, 31, 32, .07); color: var(--จาง); padding: 4px 7px; border-radius: 6px;
}
.ตารางนำเข้า tr.ผิดปกติ .ป้ายแถว { background: rgba(206, 0, 0, .1); color: var(--แดง); }
.ตารางนำเข้า tr.ทับของใหม่ .ป้ายแถว { background: rgba(138, 90, 0, .15); color: var(--น้ำตาล); }

/* แถบยืนยัน — ปุ่มต้องกดโดนโดยบังเอิญไม่ได้ จึงบังคับพิมพ์จำนวนรายการก่อน */
.แถบยืนยัน {
  position: sticky; bottom: 0; z-index: 5; margin-top: 12px;
  background: var(--ดำ); color: var(--พื้น); border-radius: 10px;
  padding: 13px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ข้อความยืนยัน { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 240px; }
.ข้อความยืนยัน b { font-size: 15px; }
.ข้อความยืนยัน small { font-size: 12px; opacity: .72; line-height: 1.5; }
.ปุ่มยืนยันชุด { display: flex; align-items: flex-end; gap: 11px; flex-wrap: wrap; }
.แถบยืนยัน .ปุ่มรอง { background: transparent; color: var(--พื้น); border-color: rgba(244, 242, 239, .4); }
.ช่องยืนยันจำนวน { display: flex; flex-direction: column; gap: 4px; }
.ช่องยืนยันจำนวน span { font-size: 12px; opacity: .8; }
.ช่องยืนยันจำนวน input { width: 116px; height: 52px; font-size: 20px; font-weight: 700; text-align: center; }
.ปุ่มยืนยันนำเข้า {
  height: 52px; padding: 0 24px; border: 0; border-radius: 9px;
  background: var(--แดง); color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.ปุ่มยืนยันนำเข้า:active { background: #B00000; }
.ไม่มีอะไรเปลี่ยน { font-size: 14px; opacity: .8; }

/* ---------- iPad ---------- */
@media (min-width: 768px) {
  .หน้าราคาแรก, .หน้านำเข้า, .หน้าดูก่อนยืนยัน { padding: 16px 18px 28px; }
  .แถบสรุปนำเข้า { grid-template-columns: repeat(5, 1fr); }
  .แถวคำเตือน { grid-template-columns: 1fr 1fr; }
  .ป้ายระดับ em { display: block; }
  .ช่องกรอกราคา .ช่องราคา { width: 170px; height: 54px; font-size: 26px; }
}

/* ---------- คอม: แบบ 3b — ประวัติราคาอยู่ข้างช่องกรอก เห็นพร้อมกัน ---------- */
@media (min-width: 1100px) {
  .จอแก้ราคา {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px;
    align-items: start; padding: 14px 16px 24px;
  }
  .ฝั่งประวัติราคา {
    display: block; background: #fff; border: 1px solid var(--เส้น);
    border-radius: 10px; padding: 14px 16px; position: sticky; top: 12px;
  }
  .หัวฝั่งประวัติ { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
  .หัวฝั่งประวัติ b { font-size: 17px; }
  .หัวฝั่งประวัติ small { font-size: 12.5px; color: var(--จาง); line-height: 1.5; }
  .ฝั่งประวัติราคา .แถวประวัติ { border: 0; border-bottom: 1px solid var(--เส้น); border-radius: 0; padding: 9px 0; margin: 0; }
  .ฝั่งประวัติราคา .แถวประวัติ:last-of-type { border-bottom: 0; }
  .ช่องกรอกราคา .ช่องราคา { width: 200px; height: 56px; font-size: 28px; }
  .แถวแก้ราคา { cursor: default; padding: 11px 16px; }
  .แป้นราคา { display: none !important; }   /* คอมมีแป้นพิมพ์จริงอยู่แล้ว */
  .การ์ดสินค้า b { font-size: 24px; }
}

/* ============================================ โมดูลเอกสาร — ใบเสนอราคา (T1.5) */
/* มือถือเป็นค่าเริ่มต้น แล้วค่อยขยายที่จอใหญ่ ตามแนวเดียวกับส่วนอื่นของไฟล์นี้
   หน้าเปิดบิลต้องใช้ได้บนมือถือจริง เพราะคนเปิดบิลยืนอยู่หน้ากองเหล็กกับลูกค้า */

/* ---------- ปุ่มหลัก (ปุ่มที่อยากให้กด) ---------- */
.ปุ่มหลัก {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16px; flex: none;
  background: var(--ดำ); color: var(--พื้น); border: 1.5px solid var(--ดำ);
  border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ปุ่มหลัก:active { opacity: .85; }
.ปุ่มรอง.อันตราย { color: var(--แดง); border-color: rgba(206, 0, 0, .45); }

/* หน้าแรก: ปุ่มเปิดบิลขาย + เปิดใบเสนอราคา คู่กัน (D-091)
   "เปิดบิลขาย" คือปลายทางที่ร้านอยากได้เร็วสุด จึงเป็นแดงเด่นสุด เหมือนปุ่ม "ออกบิลขาย"
   ในหน้าเปิดบิลจริง ส่วนใบเสนอราคาลดเป็นปุ่มรอง ไม่ใช่ว่าใช้ไม่ได้ แค่ไม่ใช่ทางลัดหลัก */
.ปุ่มคู่หน้าแรก { display: flex; gap: 8px; flex-wrap: wrap; }
.ปุ่มหลัก.ขาย { background: var(--แดง); border-color: var(--แดง); }
.ปุ่มหลัก.รอง { background: #fff; color: var(--ดำ); }
.ปุ่มจิ๋ว {
  height: 32px; padding: 0 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--เส้น); border-radius: 6px; background: #fff;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--ดำ); text-decoration: none; cursor: pointer;
}
.ปุ่มรอง.เต็มแถว { display: flex; width: 100%; margin: 10px 0 0; }
.ปุ่มจิ๋ว.อันตราย { color: var(--แดง); border-color: rgba(206, 0, 0, .45); }

/* ยกเลิกกลุ่มรับเงินทั้งก้อน (T2.6 ส่วนที่เหลือ) — แถวเล็กใต้บรรทัดเงินเข้าที่ปิดหลายบิล */
.แถวยกเลิกกลุ่ม {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px 12px 8px; padding: 8px 10px 8px 34px;
  border-left: 2px solid var(--เส้น);
}
.แถวยกเลิกกลุ่ม small { color: var(--เทา); flex: none; }
.แถวยกเลิกกลุ่ม .ช่องข้อความ {
  flex: 1 1 180px; min-width: 0; height: 32px; font-size: 12.5px; font-weight: 500;
}

.กล่องสำเร็จ {
  margin: 10px 12px 0; padding: 9px 12px; border-radius: 8px;
  background: #E8F5E9; color: #1B5E20; font-size: 13.5px; font-weight: 600;
}
.กล่องบอกแก้ไข {
  margin: 10px 12px 0; padding: 10px 12px; border-radius: 8px;
  background: var(--เหลือง); color: var(--น้ำตาล);
  font-size: 13px; font-weight: 600; line-height: 1.5;
}
.หัวส่วน { margin: 20px 14px 6px; font-size: 15px; font-weight: 700; }
.หัวย่อย { margin: 14px 14px 4px; font-size: 13px; font-weight: 700; color: #666; }
.คำใบ้บรรทัด { margin: 4px 14px 10px; font-size: 12px; color: var(--จาง); line-height: 1.55; }
.กล่องเนื้อ {
  margin: 0 12px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
}

/* ---------- หน้ารายการใบ ---------- */
.แถวเอกสาร {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--เส้น);
}
.แถวเอกสาร:active { background: var(--พื้น); }
.ซ้ายใบ { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.เลขใบ { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ลูกค้าใบ {
  font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ย่อยใบ { font-size: 11.5px; color: var(--จาง); }
.ยอดใบ { flex: none; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ยอดหัวใบ { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ป้ายยกเลิก { color: var(--แดง); font-weight: 700; }
/* ใบที่ยกเลิกต้องเห็นชัดจากระยะไกลว่าใช้ไม่ได้ ไม่ใช่ต้องอ่านตัวหนังสือถึงจะรู้ */
.แถวเอกสาร.ยกเลิกแล้ว { background: #FBF7F7; }
.แถวเอกสาร.ยกเลิกแล้ว .ลูกค้าใบ,
.แถวเอกสาร.ยกเลิกแล้ว .ยอดใบ { text-decoration: line-through; color: var(--จาง); }

/* ---------- ช่องค้นที่มีรายการให้เลือก (ลูกค้า / สินค้า) ---------- */
.ที่ค้น { position: relative; }
.ผลเลือก {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin-top: 4px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--ดำ); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(35, 31, 32, .16);
}
.ผลเลือก .ตัวเลือก {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; min-height: 52px; padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--เส้น); background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.ผลเลือก .ตัวเลือก:last-child { border-bottom: 0; }
.ผลเลือก .ตัวเลือก:active { background: var(--พื้น); }
.ผลเลือก .ตัวเลือก b { font-size: 14.5px; font-weight: 600; }
.ผลเลือก .ตัวเลือก small { font-size: 11.5px; color: var(--จาง); }
.ผลเลือก .ไม่เจอ { padding: 12px; font-size: 13px; color: var(--จาง); }
/* ราคาที่เคยให้ลูกค้ารายนี้ (ข้อ 10.2) — ต้องเด่นกว่าราคาป้าย เพราะเป็นราคาที่เขาคาดว่าจะได้อีก */
.ป้ายเคยให้ {
  margin-top: 3px; padding: 1px 7px; border-radius: 20px;
  background: var(--เหลือง); color: var(--น้ำตาล); font-size: 11px; font-weight: 700;
}

/* หลายเครื่องพร้อมกัน — มีคนกันของนี้ไว้ในบิลค้างของเขาอยู่ (เตือนก่อนกด ไม่ใช่บล็อก — D-066) */
.ป้ายจอง {
  display: block; margin-top: 3px; padding: 1px 7px; border-radius: 20px;
  background: var(--เหลือง); color: var(--น้ำตาล); font-size: 11px; font-weight: 700;
  width: fit-content;
}
.ป้ายจอง.แรง { background: var(--แดง); color: #fff; }

/* ---------- บรรทัดรายการในใบ ---------- */
#รายการเอกสาร { margin-top: 10px; }
.บรรทัดรายการ {
  padding: 10px; margin-bottom: 8px;
  border: 1px solid var(--เส้น); border-radius: 10px; background: var(--พื้น);
}
.หัวบรรทัด { display: flex; align-items: center; gap: 8px; }
.เลขลำดับ {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ดำ); color: var(--พื้น);
  font-size: 12px; font-weight: 700; line-height: 24px; text-align: center;
}
.ช่องชื่อรายการ {
  flex: 1; min-width: 0; height: 42px; padding: 0 10px;
  border: 1.5px solid var(--เส้น); border-radius: 8px; background: #fff;
  font: inherit; font-size: 14.5px; font-weight: 600; outline: none;
}
.ช่องชื่อรายการ:focus { border-color: var(--ดำ); }
.ปุ่มลบแถว {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: var(--จาง); font-size: 24px; line-height: 1; cursor: pointer;
}
.ปุ่มลบแถว:active { background: rgba(206, 0, 0, .1); color: var(--แดง); }
.รหัสในบรรทัด { margin: 3px 0 0 32px; font-size: 10.5px; color: var(--จาง); }

.ตัวเลขบรรทัด {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-top: 8px;
}
.ช่องเล็ก { display: flex; flex-direction: column; gap: 3px; margin: 0 !important; }
.ช่องเล็ก small { font-size: 11px; color: var(--จาง); font-weight: 600; }
.ช่องเล็ก input {
  width: 100%; height: 46px; padding: 0 10px;
  border: 1.5px solid var(--เส้น); border-radius: 8px; background: #fff;
  font: inherit; font-size: 17px; font-weight: 700; text-align: right; outline: none;
  font-variant-numeric: tabular-nums;
}
.ช่องเล็ก input:focus { border-color: var(--ดำ); }
/* ช่องหน่วยนับใส่คำ ไม่ใช่ตัวเลข จึงชิดซ้ายและไม่ต้องตัวหนาเท่าช่องเงิน */
.ช่องเล็ก input[data-ช่อง="หน่วยนับ"] { text-align: left; font-weight: 600; font-size: 15px; }
.ช่องรวมบรรทัด {
  grid-column: span 2; display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 6px; border-top: 1px solid var(--เส้น);
}
.ช่องรวมบรรทัด small { font-size: 11.5px; color: var(--จาง); font-weight: 600; }
.ช่องรวมบรรทัด b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ใบ้ราคาเก่า {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px; color: var(--น้ำตาล); font-weight: 600;
}

.ช่องติ๊ก { display: flex !important; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ช่องติ๊ก input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ดำ); }
.ช่องติ๊ก > span { margin: 0 !important; font-size: 15px !important; }
.ช่องติ๊ก > small { width: 100%; margin-top: 2px !important; }
.ฟอร์มเอกสาร .วันที่ { font-weight: 600; }

/* ---------- แถบยอดค้างล่างจอ ---------- */
.แถบยอดเอกสาร {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--ดำ); color: var(--พื้น);
}
.ยอดย่อยใบ { display: none; }
.ยอดรวมใหญ่ { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.ยอดรวมใหญ่ small { font-size: 11px; opacity: .7; }
.ยอดรวมใหญ่ b { font-size: 22px; font-variant-numeric: tabular-nums; }
.ปุ่มบันทึกใบ {
  flex: none; height: 48px; padding: 0 22px;
  border: 0; border-radius: 10px; background: var(--แดง); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ปุ่มบันทึกใบ:active { background: #B00000; }

/* ---------- หน้าดูใบ ---------- */
.แถวปุ่มเอกสาร {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 14px 0;
}
.แถวปุ่มเอกสาร .ปุ่มรอง { margin-left: 0; }
/* กรอบตัวอย่างกระดาษ — อัตราส่วน A4 เพื่อให้เห็นว่าของจริงจะเต็มหน้าแค่ไหน */
.กรอบกระดาษ {
  margin: 0 12px; background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
  overflow: hidden;
}
.กรอบกระดาษ iframe { display: block; width: 100%; height: 560px; border: 0; }

.แถวประวัติใบ {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--เส้น);
}
.แถวประวัติใบ:last-child { border-bottom: 0; }
.ป้ายเวอร์ชัน {
  flex: none; min-width: 34px; padding: 2px 7px; text-align: center;
  background: var(--พื้น); border: 1px solid var(--เส้น); border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
}
.เนื้อประวัติ { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.เนื้อประวัติ b { font-size: 13.5px; }
.เนื้อประวัติ small { font-size: 11px; color: var(--จาง); }
.ยอดประวัติ { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--จาง); }

/* ผังหน้าดูใบ — กระดาษซ้าย · เครื่องมือขวา
   มือถือ/แท็บเล็ต: เรียงลงมาช่องเดียว และดัน "เครื่องมือ" ขึ้นก่อน
   เพราะบนจอแคบสิ่งที่ต้องกดควรอยู่ก่อนสิ่งที่ต้องดู (ของเดิมก็เรียงแบบนี้) */
.ผังดูใบ { display: flex; flex-direction: column; }
.ผังดูใบ > .ฝั่งเครื่องมือ { order: -1; }

/* ---------- iPad แนวตั้งขึ้นไป ---------- */
@media (min-width: 768px) {
  /* หน้าเอกสารไม่มีเครื่องคิดยอด ต้องคืนคอลัมน์ขวาให้เนื้อหา ไม่งั้นเหลือช่องว่างข้างจอ */
  /* 🔴 :not() ตรงนี้สำคัญ — หน้าเปิดบิล (T1.5ข) เป็นสามช่องเต็มจอ ไม่ใช่คอลัมน์เดียวกลางจอ
     ถ้าลืมยกเว้น กฎ max-width ข้างล่างจะบีบตารางบิลจนเหลือครึ่งจอ */
  body[class*="หน้า-เอกสาร"]:not(.หน้า-เอกสาร-แก้ไข) .จอ { grid-template-columns: minmax(0, 1fr); }
  body[class*="หน้า-เอกสาร"]:not(.หน้า-เอกสาร-แก้ไข) .ฟอร์มเอกสาร,
  body[class*="หน้า-เอกสาร"]:not(.หน้า-เอกสาร-แก้ไข) .กล่องเนื้อ,
  body[class*="หน้า-เอกสาร"]:not(.หน้า-เอกสาร-แก้ไข) .กรอบกระดาษ { max-width: 760px; }
  /* จอกว้างพอแล้ว กางตัวเลขเป็น 4 ช่องในแถวเดียว อ่านเหมือนตารางบนกระดาษ */
  .ตัวเลขบรรทัด { grid-template-columns: 100px 110px 130px minmax(0, 1fr);
                  align-items: end; }
  .ช่องรวมบรรทัด { grid-column: auto; border-top: 0; padding-top: 0; flex-direction: column;
                    align-items: flex-end; gap: 2px; }
  .ยอดย่อยใบ { display: flex; gap: 16px; font-size: 13px; opacity: .85; }
  .ยอดย่อยใบ b { font-variant-numeric: tabular-nums; }
  .ยอดรวมใหญ่ { flex: none; text-align: right; margin-left: auto; }
  .กรอบกระดาษ iframe { height: 900px; }
}

@media (min-width: 1100px) {
  body[class*="หน้า-เอกสาร"]:not(.หน้า-เอกสาร-แก้ไข) .จอ {
    grid-template-columns: 216px minmax(0, 1fr);
  }
  .แถวเอกสาร { max-width: 900px; }
  .กรอบกระดาษ iframe { height: 1040px; }
}

/* ---------- จอกว้าง: หน้าดูใบเป็นสองคอลัมน์ ----------
   🔴 ปัญหาเดิม: กระดาษกว้างได้แค่ขนาด A4 (760px) เพราะตัวอย่างต้องตรงกับ PDF เป๊ะๆ
   ยืดให้กว้างกว่านี้ = บรรทัดตัดคนละที่กับกระดาษจริง ตัวอย่างก็โกหกทันที
   ที่ว่างขวามือจึงไม่ได้เอาไปขยายกระดาษ แต่เอาไปวางปุ่ม/ประวัติ/ยกเลิก
   ซึ่งเดิมซ่อนอยู่ใต้กระดาษยาวเป็นจอ ต้องเลื่อนลงไปหา */
/* 🔴 จุดตัดเป็น 1400 ไม่ใช่ 1100 — แถบซ้าย 216 + กระดาษ 786 + เครื่องมืออีก 320
   รวมเกิน 1280 ไปแล้ว ถ้าตัดที่ 1100 จอโน้ตบุ๊กจะโดนคอลัมน์ขวาล้นออกนอกจอ (เจอมาแล้ว) */
@media (min-width: 1400px) {
  body.หน้า-เอกสาร-ดู .ผังดูใบ {
    display: grid; grid-template-columns: 786px minmax(320px, 620px);
    gap: 8px; align-items: start;
  }
  body.หน้า-เอกสาร-ดู .ผังดูใบ > .ฝั่งเครื่องมือ { order: 0; }
  /* เครื่องมือค้างอยู่กับที่ตอนเลื่อนดูกระดาษหน้า 2 — 96px คือความสูงส่วนหัวที่ sticky อยู่ */
  body.หน้า-เอกสาร-ดู .ฝั่งเครื่องมือ {
    position: sticky; top: 104px; max-height: calc(100vh - 116px); overflow: auto;
    padding-bottom: 12px;
  }
  body.หน้า-เอกสาร-ดู .ฝั่งเครื่องมือ .หัวส่วน:first-child { margin-top: 0; }
  /* ปุ่มในคอลัมน์แคบ ให้เรียงเต็มความกว้างจะกดง่ายกว่าปุ่มสั้นๆ เบียดกันสองแถว */
  body.หน้า-เอกสาร-ดู .แถวปุ่มเอกสาร { padding-top: 0; }
  body.หน้า-เอกสาร-ดู .แถวปุ่มเอกสาร > a {
    flex: 1 1 calc(50% - 4px); justify-content: center; text-align: center;
  }
  body.หน้า-เอกสาร-ดู .ฝั่งกระดาษ .หัวส่วน { margin-top: 12px; }
}


/* ============================================================================
   หน้าเปิดบิล (T1.5ข) — แบบ 1a จาก Claude Design
   ต้นฉบับ: ระบบ/ออกแบบ/T1.5/แบบรอบ2-จาก-claude-design.html

   ผังเดียวกับหน้าเช็คราคาเป๊ะ เพื่อไม่ให้พนักงานต้องเรียนรู้หน้าจอใหม่:
       ซ้าย 216px = คิวบิล  ·  กลาง = ตารางรายการ  ·  ขวา 300px = ยอด + ปุ่มจบงาน
   🔴 ทั้งหน้าต้องจบใน 1280x800 ไม่มี outer scroll — ที่เลื่อนได้คือในตารางเท่านั้น
   ============================================================================ */

/* ---- จอแคบ (มือถือ/แท็บเล็ตแนวตั้ง): เรียงลงมาคอลัมน์เดียว ---- */
.จอบิล { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 4px; }
.กล่องปัญหา.บาง, .กล่องบอกแก้ไข.บาง { margin: 0; padding: 8px 11px; font-size: 12.5px; }

/* ---------- ลูกค้า: ปกติเป็นบรรทัดเดียว กดแล้วกางฟอร์ม ---------- */
.กล่องลูกค้า {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px; overflow: hidden;
}
.แถบลูกค้า {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.แถบลูกค้า:hover { background: var(--พื้น); }
.วงลูกค้า {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--พื้น); color: var(--จาง);
  font-size: 13px; font-weight: 700; line-height: 30px; text-align: center;
}
.มีลูกค้าแล้ว .วงลูกค้า { background: var(--ดำ); color: var(--พื้น); }
.ชื่อบนแถบลูกค้า { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ชื่อบนแถบลูกค้า b {
  font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.กล่องลูกค้า:not(.มีลูกค้าแล้ว) .ชื่อบนแถบลูกค้า b { color: var(--จาง); font-weight: 600; }
.ชื่อบนแถบลูกค้า small {
  font-size: 11px; color: var(--จาง);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ปุ่มเปลี่ยนลูกค้า { flex: none; font-size: 12px; font-weight: 700; color: var(--แดง); }

.ฟอร์มลูกค้าย่อ {
  padding: 4px 11px 11px; border-top: 1px solid var(--เส้น); background: var(--พื้น);
}
.ฟอร์มลูกค้าย่อ label { display: block; margin-top: 8px; }
.ฟอร์มลูกค้าย่อ label > span {
  display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--จาง);
}
.ฟอร์มลูกค้าย่อ label > span i { font-style: normal; color: var(--แดง); }
.ฟอร์มลูกค้าย่อ .ช่องข้อความ { height: 38px; font-size: 14px; font-weight: 600; }
.สองช่อง { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 10px; }
.ปิดฟอร์มลูกค้า { margin-top: 10px; }

/* ---------- ช่องค้นสินค้า + ปุ่มดึงจากเครื่องคิดยอด ---------- */
.แถวค้นสินค้า { display: flex; gap: 8px; align-items: stretch; }
.แถวค้นสินค้า .ที่ค้น { flex: 1; min-width: 0; }
.แถวค้นสินค้า .ช่องข้อความ { height: 40px; font-size: 14px; font-weight: 600; }
.ปุ่มดึง {
  flex: none; padding: 0 14px; border: 0; border-radius: 8px;
  background: var(--ดำ); color: var(--พื้น);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ปุ่มดึง:active { opacity: .85; }

/* ---------- ตารางรายการ ---------- */
.ตารางบิล {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.หัวตารางบิล { display: none; }         /* จอแคบใช้การ์ดต่อบรรทัด ไม่ใช่ตาราง */
#รายการเอกสาร { overflow: auto; }

/* จอแคบ: 1 รายการ = 1 การ์ด ชื่อบนสุด ตัวเลขเรียงข้างล่าง */
.แถวบิล {
  display: grid; gap: 6px 8px; padding: 9px 11px;
  grid-template-columns: 34px minmax(0, 1fr) 62px 54px 26px;
  grid-template-areas:
    "ลำดับ ชื่อ ชื่อ ชื่อ ลบ"
    ".     จำนวน หน่วย ราคา ราคา"
    ".     เงิน  เงิน  เงิน  เงิน";
  border-bottom: 1px solid rgba(35, 31, 32, .09);
  align-items: center;
}
.แถวบิล:last-child { border-bottom: 0; }
.ลำดับบิล {
  grid-area: ลำดับ; align-self: start; margin-top: 6px;
  display: flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--จาง); font-variant-numeric: tabular-nums;
}
.ปุ่มเลื่อนแถว { display: flex; flex-direction: column; gap: 1px; }
.ปุ่มเลื่อนแถว button {
  width: 18px; height: 15px; padding: 0; border: 0; background: transparent;
  color: var(--จาง); font-size: 8px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ปุ่มเลื่อนแถว button:disabled { opacity: .2; cursor: default; }
.ปุ่มเลื่อนแถว button:not(:disabled):hover { color: var(--ดำ); }
.ช่องชื่อบิล { grid-area: ชื่อ; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.จำนวนบิล { grid-area: จำนวน; }
.หน่วยบิล { grid-area: หน่วย; }
.ช่องราคาบิล { grid-area: ราคา; display: flex; flex-direction: column; gap: 2px; }
.เงินบิล {
  grid-area: เงิน; text-align: right; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ลบแถวบิล {
  grid-area: ลบ; align-self: start; width: 26px; height: 26px;
  border: 0; background: transparent; color: var(--จาง);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.ลบแถวบิล:hover { color: var(--แดง); }

.แถวบิล input {
  height: 34px; padding: 0 8px; min-width: 0; width: 100%;
  border: 1.5px solid rgba(35, 31, 32, .22); border-radius: 6px; background: #fff;
  font: inherit; outline: none; font-variant-numeric: tabular-nums;
}
.แถวบิล input:focus { border-color: var(--ดำ); }
.ชื่อบิล { font-size: 14px; font-weight: 600; }
.หมายเหตุบิล {
  height: 28px !important; font-size: 13px; font-weight: 500;
  border-style: dashed !important; background: transparent !important;
}
/* ป้ายบอกว่าช่องนี้คืออะไร ("หมายเหตุ" / ตัวอย่าง) เล็กกว่าปกติ — แต่พิมพ์จริงแล้วต้องอ่านง่ายเท่าช่องอื่น */
.หมายเหตุบิล::placeholder { font-size: 11.5px; }
/* หมายเหตุที่ยังว่างต้องจางจนแทบไม่เห็น ไม่งั้นทุกบรรทัดจะมีกล่องว่างเกะกะเต็มตาราง */
.หมายเหตุบิล:placeholder-shown { border-color: rgba(35, 31, 32, .12) !important; }
.จำนวนบิล, .ราคาบิล { text-align: right; font-weight: 700; font-size: 14px; }
.หน่วยบิล { font-size: 12.5px; text-align: center; }
.บอกต่ำสุด {
  font-style: normal; font-size: 10px; color: var(--จาง); text-align: right; line-height: 1.2;
}
.บอกต่ำสุด.จาง { opacity: .55; }
/* 🔴 ราคาต่ำกว่าต่ำสุด = เรื่องเงินของร้าน ต้องเห็นจากมุมตาโดยไม่ต้องอ่าน */
.แถวบิล.ราคาต่ำ .ราคาบิล { border-color: var(--แดง); color: var(--แดง); }
/* พิมพ์ราคาปุ๊บกรอบแดงขึ้นทันที ตัวหนังสือใต้ช่องต้องเปลี่ยนสีตามโดยไม่ต้องวาดตารางใหม่
   (วาดใหม่ระหว่างพิมพ์ = เคอร์เซอร์เด้งออกจากช่องทุกตัวอักษร) */
.แถวบิล.ราคาต่ำ .บอกต่ำสุด { color: var(--แดง); font-weight: 700; opacity: 1; }
.เตือนต่ำ {
  font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--แดง);
  text-align: right; line-height: 1.2;
}
.ลิงก์ราคาเก่า {
  align-self: flex-start; padding: 2px 7px; border-radius: 5px;
  border: 0; background: var(--เหลือง); color: var(--น้ำตาล);
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
}

/* ---------- ปุ่มลัดท้ายตาราง ---------- */
.แถวลัดใบ { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.แถวลัดใบ .ตัวคั่นลัด { flex: 1; }
.ท้ายใบ {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  padding: 10px 11px; background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
}
.ท้ายใบ label { display: block; }
.ท้ายใบ span {
  display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--จาง);
}
.ท้ายใบ .ช่องข้อความ { height: 38px; font-size: 14px; font-weight: 600; }

/* ---------- แถบซ้าย: คิวบิล ---------- */
.ปุ่มบิลใหม่ {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 9px 9px 4px; height: 38px;
  border: 1.5px dashed rgba(35, 31, 32, .32); border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--จาง);
}
.ปุ่มบิลใหม่:hover { border-color: var(--ดำ); color: var(--ดำ); }
.หัวคิว {
  padding: 10px 12px 5px; font-size: 10.5px; font-weight: 600; color: var(--จาง);
}
.การ์ดคิว {
  display: flex; flex-direction: column; gap: 1px;
  margin: 0 8px 5px; padding: 7px 9px; border-radius: 8px;
  background: var(--พื้น); border: 1px solid var(--เส้น);
}
.การ์ดคิว:hover { border-color: var(--ดำ); }
.การ์ดคิว b {
  font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.การ์ดคิว .ยอดคิว { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.การ์ดคิว small { font-size: 10px; color: var(--จาง); }
/* ใบที่กำลังทำอยู่ต้องแยกออกจากใบที่พักไว้ทันทีที่มอง ไม่ใช่ต้องไล่อ่าน */
.การ์ดคิว.นี่คือใบนี้ { background: var(--ดำ); color: #fff; border-color: var(--ดำ); }
.การ์ดคิว.นี่คือใบนี้ small { color: rgba(255, 255, 255, .72); }
.การ์ดคิว.ออกแล้ว { background: #fff; }
.การ์ดคิว.ออกแล้ว .ยอดคิว { font-size: 13px; }
.การ์ดคิว.ยกเลิกแล้ว b, .การ์ดคิว.ยกเลิกแล้ว .ยอดคิว {
  text-decoration: line-through; color: var(--จาง);
}
.คิวว่าง { margin: 0 10px 8px; font-size: 11px; color: var(--จาง); line-height: 1.6; }

/* ---------- แถบขวา: ยอด + ปุ่มจบงาน ---------- */
.สรุปบิล { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.กล่องน้ำหนัก {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 7px; background: var(--พื้น);
}
.กล่องน้ำหนัก span { font-size: 11px; color: var(--จาง); }
.กล่องน้ำหนัก i { font-style: normal; opacity: .75; }
.กล่องน้ำหนัก b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.กล่องตั้งใบ {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px; border: 1px solid var(--เส้น); border-radius: 8px; background: #fff;
}
.กล่องตั้งใบ .ชื่อกล่อง { font-size: 12.5px; font-weight: 700; }
.สลับVAT {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; margin: 0;
}
.สลับVAT > span { font-size: 12.5px; font-weight: 700; }
.สลับVAT input { position: absolute; opacity: 0; width: 0; height: 0; }
.รางสลับ {
  flex: none; width: 38px; height: 21px; border-radius: 11px; background: rgba(35, 31, 32, .22);
  position: relative; transition: background .12s;
}
.รางสลับ::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .12s;
}
.สลับVAT input:checked + .รางสลับ { background: var(--ดำ); }
.สลับVAT input:checked + .รางสลับ::after { transform: translateX(17px); }
.สลับVAT input:focus-visible + .รางสลับ { outline: 2px solid var(--แดง); outline-offset: 2px; }
.แถวอัตรา { display: flex; align-items: center; gap: 7px; }
.แถวอัตรา span { font-size: 11.5px; color: var(--จาง); }
.ช่องอัตรา {
  width: 52px; height: 32px; padding: 0 8px; text-align: center;
  border: 1.5px solid var(--ดำ); border-radius: 6px; background: #fff;
  font: inherit; font-size: 13px; font-weight: 700; outline: none;
}
.แถวขนส่งใบ { display: flex; align-items: center; gap: 7px; }
.ช่องขนส่งใบ {
  flex: 1; min-width: 0; height: 34px; padding: 0 9px;
  border: 1.5px solid var(--ดำ); border-radius: 6px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 700; outline: none;
  font-variant-numeric: tabular-nums;
}
.แถวขนส่งใบ .ปุ่มสลับ { margin-left: 0; height: 34px; padding: 0 12px; font-size: 12.5px; }

.ยอดย่อยรวม { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.บรรทัดยอด { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.บรรทัดยอด span { font-size: 12px; color: var(--จาง); }
.บรรทัดยอด b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.ยอดใหญ่ {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border-radius: 8px; background: var(--ดำ); color: #fff;
}
.ยอดใหญ่ small { font-size: 11px; opacity: .72; }
.ยอดใหญ่ b { font-size: 27px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

.ปุ่มจบงาน { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.ปุ่มจบ {
  height: 42px; border-radius: 8px; border: 1.5px solid var(--ดำ);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; position: relative;
}
.ปุ่มจบ.หลัก { background: var(--ดำ); color: var(--พื้น); }
.ปุ่มจบ.รอง { background: #fff; color: var(--ดำ); }
.ปุ่มจบ:not([disabled]):active { opacity: .85; }
/* ⏳ ปุ่มที่ยังไม่เปิดใช้ต้องกดไม่ได้จริงๆ และบอกเหตุผล ไม่ใช่กดแล้วเงียบ (D-036) */
.ปุ่มจบ.ยังไม่เปิด {
  background: var(--พื้น); border-color: transparent;
  color: rgba(35, 31, 32, .38); cursor: default; font-size: 13px;
}
.ปุ่มจบ.ยังไม่เปิด i {
  position: absolute; top: -7px; right: 8px; padding: 1px 6px; border-radius: 5px;
  background: var(--เหลือง); color: var(--น้ำตาล);
  font-style: normal; font-size: 9.5px; font-weight: 700;
}
.ลิงก์บันทึก {
  border: 0; background: transparent; padding: 2px;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--จาง);
  text-decoration: underline; cursor: pointer;
}

/* ============================================================================
   บิลขาย + รับเงิน (T2.1 · ขั้น C)
============================================================================ */
/* 🔴 ปุ่มออกบิลขายต้องเด่นที่สุดในจอ — เป็นปลายทางจริงของร้าน ไม่ใช่ใบเสนอราคา
   สูงกว่าปุ่มอื่นเพราะเป็นปุ่มที่กดแล้วมีเงินเปลี่ยนมือ กดพลาดแล้วต้องตามแก้ */
.ปุ่มจบ.ขาย {
  background: var(--แดง); border-color: var(--แดง); color: #fff;
  height: 52px; font-size: 15px; flex-direction: column; gap: 0;
}
.ปุ่มจบ.ขาย i {
  font-style: normal; font-size: 10px; font-weight: 500; opacity: .85;
}
.ปุ่มจบ.ขาย[disabled] { background: rgba(206, 0, 0, .35); border-color: transparent; }
.ปุ่มจบ.เต็มแถว { width: 100%; }

/* ---------- ป๊อปอัพรับเงิน ---------- */
.ฉากทึบ {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(35, 31, 32, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.กล่องรับเงิน {
  background: #fff; border-radius: 14px; padding: 18px;
  width: 100%; max-width: 460px; max-height: 92vh; overflow: auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.หัวกล่องรับเงิน {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--เส้น); margin-bottom: 14px;
}
.หัวกล่องรับเงิน span { font-size: 14px; color: var(--จาง); font-weight: 600; }
.หัวกล่องรับเงิน b { font-size: 30px; font-variant-numeric: tabular-nums; }

/* ปุ่มวิธีจ่ายเป็นปุ่มใหญ่กดด้วยนิ้วโป้งได้ ไม่ใช่ radio จิ๋วๆ
   คนกดคือคนที่ยืนอยู่หน้าเคาน์เตอร์โดยมีลูกค้ารออยู่ตรงหน้า */
.แถววิธีจ่าย { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ปุ่มวิธี {
  height: 52px; border-radius: 10px; border: 1.5px solid var(--เส้น); background: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--ดำ);
}
.ปุ่มวิธี.เชื่อ { grid-column: 1 / -1; font-size: 14px; }
.ปุ่มวิธี.เลือก { border-color: var(--ดำ); background: var(--ดำ); color: #fff; }
.ปุ่มวิธี:active { opacity: .85; }

.กล่องบัญชีเลือก {
  margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--พื้น);
}
.กล่องบัญชีเลือก .ชื่อกล่อง {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--จาง);
  text-transform: none; margin-bottom: 8px;
}
.แถวบัญชี {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px;
  border-radius: 8px; cursor: pointer;
}
.แถวบัญชี:hover { background: #fff; }
.แถวบัญชี input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: #231F20; }
.แถวบัญชี span { display: flex; flex-direction: column; min-width: 0; }
.แถวบัญชี b { font-size: 14px; }
.แถวบัญชี small { font-size: 11.5px; color: var(--จาง); }

.ปุ่มท้ายป๊อปอัพ {
  display: flex; gap: 8px; margin-top: 16px; align-items: stretch;
}
.ปุ่มท้ายป๊อปอัพ .ปุ่มรอง { flex: none; }
.ปุ่มท้ายป๊อปอัพ .ปุ่มจบ { flex: 1; }

/* ---------- กล่องสถานะการชำระบนหน้าบิล ---------- */
/* คนหน้าร้านเปิดหน้าบิลเพื่อตอบคำถามเดียว: "ใบนี้เก็บเงินหรือยัง"
   จึงต้องอยู่บนสุด อ่านจบใน 1 วินาที และสีต่างกันชัดระหว่างครบกับค้าง */
.กล่องชำระ {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0;
  margin: 10px 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--เส้น); border-left-width: 4px; background: #fff;
}
.กล่องชำระ.ครบ { border-left-color: #2E7D32; }
.กล่องชำระ.ค้าง { border-left-color: var(--แดง); background: #FFF8F8; }
.ซ้ายชำระ { display: flex; flex-direction: column; min-width: 0; flex: 1 1 240px; }
.ซ้ายชำระ b { font-size: 15px; }
.ซ้ายชำระ small { font-size: 11.5px; color: var(--จาง); }

/* ส่วนที่นานๆ ใช้ครั้ง — พับไว้ก่อน ไม่ให้ไปแย่งสายตากับปุ่มยืนยันเงินที่กดทุกวัน */
.พับได้ > summary {
  margin: 16px 12px 0; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--เส้น); background: #fff;
  font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none;
}
.พับได้ > summary::-webkit-details-marker { display: none; }
.พับได้ > summary::before { content: "▸ "; color: var(--จาง); }
.พับได้[open] > summary::before { content: "▾ "; }

/* ---------- ปุ่มยืนยันรับเงิน (D-044) ---------- */
/* คนกดคือคนที่เพิ่งเช็คสลิปในมือถือเสร็จ ต้องจบในคลิกเดียวจากกล่องนี้เลย
   ไม่ใช่เลื่อนลงไปหาฟอร์มข้างล่าง ไม่งั้นวันที่ยุ่งๆ จะไม่มีใครกด */
/* 🔴 ห้ามใช้ flex: none ที่ฟอร์มนี้ — ตอนมีแค่สองปุ่มมันพอดีจอ แต่พอ D-045
   เพิ่มช่องจำนวนเข้ามา ความกว้าง max-content ของฟอร์มก็เกินจอมือถือทันที
   แล้วทั้งหน้าจะเลื่อนซ้ายขวาได้ (เจอจาก ตรวจหน้าจอ.py ที่ 390px — เทส HTTP จับไม่ได้) */
.ฟอร์มยืนยันเงิน {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 320px; min-width: 0;
}
.แถวยืนยันเงิน { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ปุ่มยืนยันเงิน {
  height: 46px; padding: 0 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid var(--ดำ); background: var(--ดำ); color: var(--พื้น);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
}
.ปุ่มยืนยันเงิน.โอน { background: #fff; color: var(--ดำ); }
.ปุ่มยืนยันเงิน:active { opacity: .85; }
.ช่องบัญชีสั้น { height: 46px; max-width: 240px; flex: 1 1 150px; min-width: 0; }
.ฟอร์มยืนยันเงิน .คำใบ้บรรทัด { margin: 0; }

.กล่องใช้แล้ว {
  margin: 10px 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--เหลือง); color: var(--น้ำตาล);
  border: 1px solid rgba(138, 90, 0, .22);
}
.กล่องใช้แล้ว b { display: block; font-size: 14px; }
.กล่องใช้แล้ว p { margin: 4px 0 0; font-size: 12.5px; }
.กล่องใช้แล้ว a { text-decoration: underline; font-weight: 700; }

.ป้ายใช้แล้ว {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  background: var(--เหลือง); color: var(--น้ำตาล); font-weight: 700; font-size: 10.5px;
}
.ป้ายค้าง {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  background: var(--แดง); color: #fff; font-weight: 700; font-size: 10.5px;
}
.เตือนแดง { color: var(--แดง); font-weight: 700; }

/* ---------- หน้าตั้งค่าบัญชีรับเงิน ---------- */
.แถวปุ่มบัญชี { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.แถวปุ่มบัญชี.ใต้ฟอร์ม { margin: -4px 12px 20px; }
.แถวปุ่มบัญชี form { margin: 0; }
/* บัญชีที่ปิดแล้วยังอยู่บนจอ (ห้ามลบ) แต่ต้องดูออกทันทีว่าเลิกใช้แล้ว */
fieldset.บัญชีปิดอยู่ { opacity: .55; }
.ป้ายเริ่มต้น {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  background: var(--เหลือง); color: var(--น้ำตาล); font-size: 10.5px; font-weight: 700;
}

/* ---------- iPad แนวตั้งขึ้นไป: ตารางเริ่มเป็นตารางจริง ---------- */
@media (min-width: 768px) {
  .สองช่อง { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ท้ายใบ { grid-template-columns: 200px minmax(0, 1fr); }

  .หัวตารางบิล {
    display: grid; gap: 8px; padding: 6px 12px;
    grid-template-columns: 34px minmax(0, 1fr) 62px 54px 92px 92px 26px;
    background: var(--พื้น); border-bottom: 1px solid rgba(35, 31, 32, .15);
    font-size: 10.5px; font-weight: 600; color: var(--จาง);
  }
  .แถวบิล {
    grid-template-columns: 34px minmax(0, 1fr) 62px 54px 92px 92px 26px;
    grid-template-areas: "ลำดับ ชื่อ จำนวน หน่วย ราคา เงิน ลบ";
    align-items: start; padding: 7px 12px;
  }
  .ลำดับบิล { margin-top: 6px; }
  .จำนวนบิล, .หน่วยบิล { margin-top: 0; }
  .เงินบิล { padding-top: 8px; }
  .ลบแถวบิล { margin-top: 5px; }
}

/* ---------- จอคอม: สามช่องเต็มจอ ไม่มี outer scroll ---------- */
@media (min-width: 1100px) {
  body.หน้า-เอกสาร-แก้ไข { padding-bottom: 0; }
  body.หน้า-เอกสาร-แก้ไข .จอ { grid-template-columns: 216px minmax(0, 1fr) 300px; }
  body.หน้า-เอกสาร-แก้ไข .แถบยอดเอกสาร { display: none; }

  /* 🔴 หัวใจของ "จบในหน้าเดียว": ช่องกลางสูงเท่าจอพอดี แล้วให้ตารางเลื่อนอยู่ข้างใน
     ถ้าปล่อยให้ทั้งหน้าเลื่อน แถบยอดกับปุ่มจบงานจะหลุดออกนอกจอตอนรายการยาว */
  body.หน้า-เอกสาร-แก้ไข .ช่องกลาง {
    height: calc(100vh - 106px); min-height: 0; overflow: hidden; background: #fff;
  }
  body.หน้า-เอกสาร-แก้ไข .ช่องกลาง > #ผลค้นหา { display: none; }
  body.หน้า-เอกสาร-แก้ไข #เนื้อหาหลัก { height: 100%; min-height: 0; }
  .จอบิล { height: 100%; min-height: 0; padding: 10px 14px 12px; }
  .ตารางบิล { flex: 1; min-height: 0; }

  .สรุปบิล { height: calc(100vh - 106px); overflow-y: auto; }
  .ปุ่มจบงาน { margin-top: auto; padding-top: 8px; }
}

/* ================================================================
   หน้าเรื่องเงิน — ค้างจ่าย · เงินเข้า (T2.3 · D-045)
   ================================================================
   หลัก: ตัวเลขต้องอ่านได้จากระยะแขน เพราะคนเปิดหน้านี้กำลังถือโทรศัพท์
   คุยกับลูกค้าอยู่ ไม่ได้นั่งเพ่งหน้าจอ — ตัวเลขจึงใหญ่กว่าตัวหนังสือรอบข้างเสมอ
   และใช้ tabular-nums ทุกที่ เพื่อให้หลักเลขตรงกันตอนไล่สายตาลงคอลัมน์ */

/* ---------- แถบตัวเลขสรุปหัวหน้า ---------- */
/* มือถือ: เลื่อนแนวนอนได้ ไม่บีบให้เลขเล็กลงจนอ่านไม่ออก
   (ที่ว่างที่เหลือให้เอาไปวางของที่ต้องกด อย่าเอาไปย่อของเดิม — D-043) */
.แถบตัวเลข {
  display: flex; gap: 10px; padding: 12px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* scroll-shadow: บอกว่ายังเลื่อนต่อได้ไหม — เงาขวาจางลงเองพอเลื่อนถึงการ์ดสุดท้าย (D-043 ไม่รื้อ overflow-x) */
  background:
    linear-gradient(90deg, var(--พื้น), rgba(244, 242, 239, 0) 12px) 0 0,
    linear-gradient(270deg, var(--พื้น), rgba(244, 242, 239, 0) 12px) 100% 0,
    linear-gradient(90deg, rgba(35, 31, 32, .14), rgba(35, 31, 32, 0) 12px) 0 0,
    linear-gradient(270deg, rgba(35, 31, 32, .14), rgba(35, 31, 32, 0) 12px) 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.ก้อนเลข {
  flex: 1 0 44%; min-width: 150px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 10px; background: #fff;
  border: 1px solid var(--เส้น); border-left: 4px solid var(--ดำ);
}
.ก้อนเลข small { font-size: 11.5px; color: var(--จาง); font-weight: 600; }
.ก้อนเลข b {
  font-size: 24px; line-height: 1.15; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ก้อนเลข i { font-style: normal; font-size: 11.5px; color: var(--จาง); }
/* แดง = เงินที่ควรจะได้แล้วแต่ยังไม่ได้ · จาง = ยังไม่ต้องทำอะไร · เขียว = ยอดที่รับมาแล้ว */
.ก้อนเลข.แดง { border-left-color: var(--แดง); background: #FFF8F8; }
.ก้อนเลข.แดง b { color: var(--แดง); }
.ก้อนเลข.จาง { border-left-color: rgba(35, 31, 32, .2); }
.ก้อนเลข.จาง b { color: var(--จาง); }
.ก้อนเลข.สด { border-left-color: #2E7D32; }
.ก้อนเลข.รวม { border-left-color: var(--ดำ); background: var(--ดำ); color: var(--พื้น); }
.ก้อนเลข.รวม small, .ก้อนเลข.รวม i { color: rgba(244, 242, 239, .7); }

/* ---------- การ์ดหนี้รายลูกค้า ---------- */
/* 1 การ์ด = 1 สายที่ต้องโทร — ทั้งการ์ดจึงต้องอ่านจบได้โดยไม่ต้องกดเข้าไปดูอะไรอีก */
.การ์ดหนี้ {
  margin: 0 12px 12px; border-radius: 10px; background: #fff;
  border: 1px solid var(--เส้น); border-left: 4px solid rgba(35, 31, 32, .2);
  overflow: hidden;
}
.การ์ดหนี้.ร้อน { border-left-color: var(--แดง); }
.หัวหนี้ {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid rgba(35, 31, 32, .09);
}
.ชื่อหนี้ { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ชื่อหนี้ b { font-size: 16px; font-weight: 700; }
.ชื่อหนี้ small { font-size: 11.5px; color: var(--จาง); }
.ยอดหนี้ {
  flex: none; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.การ์ดหนี้.ร้อน .ยอดหนี้ { color: var(--แดง); }

.แถวหนี้ {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 14px; border-bottom: 1px solid rgba(35, 31, 32, .07);
}
.แถวหนี้:active { background: var(--พื้น); }
.ซ้ายหนี้ { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ซ้ายหนี้ b { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ซ้ายหนี้ small { font-size: 11.5px; color: var(--จาง); }
.ยอดหนี้เล็ก {
  flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ป้ายบางส่วน { color: var(--น้ำตาล); font-weight: 700; }

.ท้ายหนี้ {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: var(--พื้น);
}
/* ปุ่มในท้ายการ์ดต้องกดได้จริงด้วยนิ้วโป้ง — 32px ของปุ่มจิ๋วเตี้ยไปสำหรับมือเปื้อน */
.ท้ายหนี้ .ปุ่มจิ๋ว { height: 40px; padding: 0 14px; font-size: 13px; }

.กล่องปัญหา.ดี { border-left-color: #2E7D32; }
.กล่องปัญหา.ดี a { text-decoration: underline; font-weight: 700; }
/* ใบที่เกินกำหนดในมุมมองรายใบ — ต้องเห็นจากระยะไกลว่าแถวไหนร้อน */
.แถวเอกสาร.ค้างร้อน { background: #FFF8F8; box-shadow: inset 3px 0 0 var(--แดง); }

/* ---------- หน้าเงินเข้า ---------- */
.หัวไล่ยอด {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding-right: 12px;
}
.หัวไล่ยอด .หัวกลุ่มเล็ก { line-height: 1.6; }

/* ทั้งแถวเป็น <label> ของช่องติ๊ก — นิ้วโป้งจิ้มตรงไหนก็ติ๊กได้ ไม่ต้องเล็งกล่องเล็กๆ
   ปุ่มลูกศรไปบิลอยู่ขวาสุดแยกออกมา เพราะเป็นคนละเจตนากับการติ๊ก */
.แถวเงินเข้า {
  display: flex; align-items: center; gap: 10px; min-height: 62px;
  padding: 8px 4px 8px 12px; background: #fff;
  border-bottom: 1px solid var(--เส้น); cursor: pointer;
}
.แถวเงินเข้า:active { background: var(--พื้น); }
.ติ๊กไล่ยอด { width: 22px; height: 22px; flex: none; accent-color: #2E7D32; }
.เวลาเงิน {
  flex: none; width: 42px; font-size: 12.5px; font-weight: 700; color: var(--จาง);
  font-variant-numeric: tabular-nums;
}
.กลางเงิน { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.กลางเงิน b { font-size: 14.5px; font-weight: 700; }
.กลางเงิน small { font-size: 11.5px; color: var(--จาง); }
.ยอดเงินเข้า {
  flex: none; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ไปบิล {
  flex: none; width: 40px; height: 40px; color: var(--จาง);
  display: inline-flex; align-items: center; justify-content: center;
}
.แถวเงินเข้า.คืนเงิน { background: #FFF8F8; }
.แถวเงินเข้า.คืนเงิน .ยอดเงินเข้า { color: var(--แดง); }
.แถวเงินเข้า.ไม่จ่าย .ยอดเงินเข้า { font-size: 13px; color: var(--จาง); }
/* ติ๊กแล้ว = จางลง ไม่ใช่หายไป — ต้องยังนับจำนวนบรรทัดคู่กับ statement ได้ */
.แถวเงินเข้า.ติ๊กแล้ว { opacity: .45; }

/* ---------- แถวรับเงินย่อยในหน้าบิล (D-045) ---------- */
/* บิลใบเดียวรับเงินได้หลายก้อน ประวัติจึงต้องเป็นรายการที่อ่านเป็นลำดับเหตุการณ์ได้
   ของเดิมเป็นข้อความบรรทัดเดียวคั่นด้วย | ซึ่งพอมี 3 ก้อนขึ้นไปก็อ่านไม่ออกแล้ว */
.รายการรับเงิน {
  display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
  /* ไม่ให้ยืดเต็มกล่อง — ยอดเงินจะไปอยู่อีกซีกจอ ห่างจากข้อความของมันเอง */
  max-width: 460px;
}
.แถวรับเงิน {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--จาง);
}
.แถวรับเงิน b { font-weight: 700; color: var(--ดำ); }
.แถวรับเงิน .ยอด {
  margin-left: auto; font-weight: 700; color: var(--ดำ);
  font-variant-numeric: tabular-nums;
}
.แถวรับเงิน.ติดลบ .ยอด { color: var(--แดง); }

/* ---------- ช่องจำนวนเงินข้างปุ่มยืนยัน (D-045) ---------- */
/* 🔴 หัวใจของการรับเงินหลายก้อน: ช่องนี้กรอกยอดค้างไว้ให้ล่วงหน้าเสมอ
   เคสปกติ (จ่ายครบทีเดียว) จึงไม่ต้องแตะเลย = คลิกเดียวเหมือนเดิม
   เคสพิเศษ (โอน 10,000 แล้วอีก 5,240) แค่พิมพ์ทับ แล้วกดปุ่มเดิมสองรอบ */
.ช่องจำนวนรับ {
  height: 46px; width: 132px; flex: none; padding: 0 12px;
  border: 1.5px solid var(--ดำ); border-radius: 8px; background: #fff;
  font: inherit; font-size: 17px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
}
.ช่องจำนวนรับ:focus { outline: 2px solid var(--แดง); outline-offset: 1px; }
.ป้ายช่องจำนวน {
  display: flex; flex-direction: column; gap: 3px; flex: none;
}
.ป้ายช่องจำนวน > span { font-size: 11px; font-weight: 700; color: var(--จาง); }
.ปุ่มยืนยันเงิน.เชื่อ {
  background: #fff; color: var(--จาง); border-color: rgba(35, 31, 32, .25);
  font-weight: 600;
}

@media (min-width: 768px) {
  .ก้อนเลข { flex: 1 1 0; min-width: 170px; }
  .การ์ดหนี้, .แถบตัวเลข { margin-left: 12px; margin-right: 12px; }
  .แถบตัวเลข { margin: 0; }
}

@media (min-width: 1100px) {
  /* จอคอมเหลือที่ว่างขวามือทั้งแถบ — เอาไปวางการ์ดหนี้สองคอลัมน์
     ดีกว่าปล่อยการ์ดยืดจนชื่อลูกค้ากับยอดห่างกันคนละฝั่งจอ (D-043) */
  body.หน้า-ค้างจ่าย .รายลูกค้าสองคอลัมน์ {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
  }
  .ก้อนเลข b { font-size: 27px; }
}

/* มือถือ: กล่องรับเงินเรียงเป็นชั้น — ช่องจำนวนเต็มแถว · ปุ่มสองอันแบ่งครึ่ง ·
   บัญชีเต็มแถว  (ยัดสี่อย่างในแถวเดียวที่ 390px แล้วทุกอันจะแคบจนกดพลาด) */
@media (max-width: 599px) {
  .ป้ายช่องจำนวน { flex: 1 1 100%; }
  .ช่องจำนวนรับ { width: 100%; height: 50px; font-size: 19px; }
  .ปุ่มยืนยันเงิน { flex: 1 1 140px; }
  .ช่องบัญชีสั้น { flex: 1 1 100%; max-width: none; }
  .ก้อนเลข { flex: 1 0 62%; }
}

/* 🔴 หน้าเรื่องเงินไม่มีแถบซ้ายและไม่มีเครื่องคิดยอด — ต้องประกาศคอลัมน์เองทุกหน้า
   ไม่งั้น .ช่องกลาง จะไปนั่งในคอลัมน์แรกกว้าง 216px ของผังสามช่อง
   แล้วทั้งหน้าจะถูกบีบอยู่ริมซ้ายจอ (เจอจาก ตรวจหน้าจอ.py — เทส HTTP ตอบ 200 ปกติ) */
@media (min-width: 768px) {
  body.หน้า-ค้างจ่าย .จอ,
  body.หน้า-เงินเข้า .จอ,
  body.หน้า-ขาย .จอ,
  body.หน้า-รายงาน .จอ,
  body.หน้า-สต็อกคงเหลือ .จอ { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  body.หน้า-ค้างจ่าย .จอ,
  body.หน้า-เงินเข้า .จอ,
  body.หน้า-ขาย .จอ,
  body.หน้า-รายงาน .จอ,
  body.หน้า-สต็อกคงเหลือ .จอ { grid-template-columns: minmax(0, 1fr); }
  /* จอ 1600px+ ไม่ปล่อยให้แถวยาวจนต้องกวาดตาข้ามจอ — อ่านเลขไม่ทันอยู่ดี */
  body.หน้า-ค้างจ่าย #เนื้อหาหลัก { max-width: 1180px; }
  body.หน้า-เงินเข้า #เนื้อหาหลัก { max-width: 980px; }
  body.หน้า-ขาย #เนื้อหาหลัก { max-width: 980px; }
  body.หน้า-รายงาน #เนื้อหาหลัก { max-width: 1180px; }
  body.หน้า-สต็อกคงเหลือ #เนื้อหาหลัก { max-width: 1180px; }
}

/* ---------- หน้าขาย (T2.2 · D-052) ---------- */
.แถวปุ่มยอดขาย { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; }

/* แถวสถิติเทียบเดือน — เบากว่า .แถบตัวเลข เพราะเป็นข้อมูลเสริม ไม่ใช่ตัวเลขหลักของหน้า */
.กล่องเทียบเดือน {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 0 12px 12px;
  padding: 10px 14px; border-radius: 10px; background: var(--พื้น);
}
.กล่องเทียบเดือน span { display: flex; flex-direction: column; gap: 1px; }
.กล่องเทียบเดือน small { font-size: 11px; color: var(--จาง); font-weight: 600; }
.กล่องเทียบเดือน b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.กล่องเทียบเดือน .ขึ้น b { color: #2E7D32; }
.กล่องเทียบเดือน .ลง b { color: var(--แดง); }

/* แถวบิลขาย — ลอกโครงจาก .แถวเงินเข้า (เวลา · กลาง · ยอด) แต่เป็นลิงก์เปิดบิลตรงๆ
   ไม่มีช่องติ๊ก เพราะหน้านี้ไม่ใช่หน้าไล่ statement */
.แถวบิลขาย {
  display: flex; align-items: center; gap: 10px; min-height: 62px;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--เส้น);
  text-decoration: none; color: inherit;
}
.แถวบิลขาย:active { background: var(--พื้น); }
.เวลาบิล {
  flex: none; width: 42px; font-size: 12.5px; font-weight: 700; color: var(--จาง);
  font-variant-numeric: tabular-nums;
}
.กลางบิล { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.กลางบิล b { font-size: 14.5px; font-weight: 700; }
.กลางบิล small { font-size: 11.5px; color: var(--จาง); }
.ยอดบิล {
  flex: none; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.แถวบิลขาย.ยกเลิก { background: #FFF8F8; }
.แถวบิลขาย.ยกเลิก .กลางบิล b { text-decoration: line-through; color: var(--จาง); }
.แถวบิลขาย.ยกเลิก .กลางบิล small { color: var(--แดง); font-weight: 600; }
.แถวบิลขาย.ยกเลิก .ยอดบิล { text-decoration: line-through; color: var(--จาง); }

/* สีสถานะจ่ายต่อแถวบิล (ผู้ใช้สั่ง 7 ก.ย. 2569 จากภาพหน้าจอ) — เขียว=จ่ายครบ ·
   เหลือง=ค้างบางส่วน · แดง=ยังไม่ยืนยัน/ค้างเต็ม · เทา=ยกเลิกแล้ว (ยกเลิกใช้สีเดิมของ .ยกเลิก ด้านบน)
   🔴 ต้องใช้ตัวเลือก "small.สถานะจ่าย-*" ไม่ใช่ ".สถานะจ่าย-*" เฉยๆ — .กลางบิล small
   (class+element) specificity สูงกว่า class เดี่ยว ถ้าเขียนแบบเดิมสีจะไม่ขึ้นเลยเงียบๆ */
small.สถานะจ่าย-เขียว { color: #2E7D32; font-weight: 600; }
small.สถานะจ่าย-เหลือง { color: var(--น้ำตาล); font-weight: 600; }
small.สถานะจ่าย-แดง { color: var(--แดง); font-weight: 600; }

/* ---------- หน้าเงินเข้า: รายการรายวัน (T2.3 ส่วนหน้ารายการ · เพิ่มรอบ 30) ---------- */
/* ลอกโครงจาก .แถวบิลขาย เปลี่ยนคอลัมน์ซ้ายจาก 'เวลา' (42px) เป็น 'วันที่' ที่กว้างพอมีชื่อวันนำหน้า
   ทั้งแถวเป็นลิงก์คลิกเดียวไปหน้ารายละเอียดวันนั้น — ตอบโจทย์ "กดเลือกวันไหนก็ได้" แทนเลื่อนทีละวัน */
.แถวสรุปวัน {
  display: flex; align-items: center; gap: 10px; min-height: 62px;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--เส้น);
  text-decoration: none; color: inherit;
}
.แถวสรุปวัน:active { background: var(--พื้น); }
.วันสรุปวัน { flex: none; width: 96px; font-size: 13px; font-weight: 700; }
.ตัวเลขสรุปวัน { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ตัวเลขสรุปวัน b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ตัวเลขสรุปวัน small { font-size: 11.5px; color: var(--จาง); }

/* ---------- หน้าเงินเข้า: ปฏิทิน (D-063) ---------- */
/* 7 คอลัมน์คงที่เท่ากับจำนวนวันในสัปดาห์ — ไม่ใช่ auto-fit เพราะต้องตรงกับหัวคอลัมน์ จ.-อา. เป๊ะ
   ช่องว่างหัว/ท้ายเดือน (ก่อนวันที่ 1 · หลังวันสุดท้าย) เป็น <span> เปล่าไม่ใช่ลิงก์ กันคนกดพลาด */
.ตารางปฏิทิน {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px; margin: 0 12px 12px;
}
.หัวคอลัมน์ปฏิทิน {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--จาง);
  padding: 4px 0;
}
.ช่องปฏิทิน {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 58px; padding: 4px 2px; border-radius: 8px;
  background: #fff; border: 1px solid var(--เส้น);
  text-decoration: none; color: inherit; text-align: center; overflow: hidden;
}
.ช่องปฏิทิน:active { background: var(--พื้น); }
.ช่องปฏิทิน.ว่าง { background: transparent; border-color: transparent; }
/* "ไม่มีรับเงิน" (หน้าเงินเข้า) กับ "ไม่มีข้อมูล" (หน้าขาย — ยังไม่มีบิลออกวันนั้น) หน้าตาเดียวกัน */
.ช่องปฏิทิน.ไม่มีรับเงิน, .ช่องปฏิทิน.ไม่มีข้อมูล { background: var(--พื้น); }
.เลขวันปฏิทิน { font-size: 11px; font-weight: 700; color: var(--จาง); }
.ช่องปฏิทิน.ไม่มีรับเงิน .เลขวันปฏิทิน, .ช่องปฏิทิน.ไม่มีข้อมูล .เลขวันปฏิทิน { opacity: .6; }
.ยอดวันปฏิทิน {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.15; word-break: break-word;
}
.ย่อยวันปฏิทิน { font-size: 9px; color: var(--จาง); white-space: nowrap; }
/* วันนี้ — ขอบทึบสีดำแทนขอบบางปกติ ให้เห็นจากมุมตาไม่ต้องอ่านเลขวัน */
.ช่องปฏิทิน.วันนี้ { border: 2px solid var(--ดำ); }
/* จอเล็ก 7 คอลัมน์แน่นมาก — ตัดบรรทัดย่อย (ลูกค้า/ค้างจ่าย) ทิ้งก่อน เหลือแค่วันที่+ยอดรวม
   เปิดครบตอนแตะเข้าไปดูรายวันอยู่แล้ว ไม่ใช่ข้อมูลหายแค่ไม่มีที่พอโชว์บนช่องจิ๋ว */
@media (max-width: 479px) {
  .ย่อยวันปฏิทิน { display: none; }
  .ช่องปฏิทิน { min-height: 50px; }
}
@media (min-width: 700px) {
  .ช่องปฏิทิน { min-height: 76px; }
  .เลขวันปฏิทิน { font-size: 12.5px; }
  .ยอดวันปฏิทิน { font-size: 14px; }
  .ย่อยวันปฏิทิน { font-size: 10.5px; }
}

/* ---------- หน้าสำรองข้อมูล (T1.11ก) ---------- */
.แถวสำรอง {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  margin: 0 12px; padding: 8px 14px; background: #fff;
  border: 1px solid var(--เส้น); border-top: 0;
}
.แถวสำรอง:first-of-type { border-top: 1px solid var(--เส้น); border-radius: 8px 8px 0 0; }
.แถวสำรอง:last-of-type { border-radius: 0 0 8px 8px; }
.ซ้ายสำรอง { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ซ้ายสำรอง b { font-size: 14.5px; }
.ซ้ายสำรอง small { font-size: 11.5px; color: var(--จาง); }
.แถวสำรอง form { margin: 0; }

@media (min-width: 768px) {
  body.หน้า-สำรองข้อมูล .จอ { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  body.หน้า-สำรองข้อมูล .จอ { grid-template-columns: 216px minmax(0, 1fr); }
  body.หน้า-สำรองข้อมูล #เนื้อหาหลัก { max-width: 900px; }
}

/* ---------- คำเตือนวงเงินเครดิตบนหน้าเปิดบิล (T2.4 · D-047) ---------- */
/* วางติดใต้แถบลูกค้าโดยตั้งใจ — จังหวะที่คนต้องรู้คือวินาทีที่เพิ่งเลือกลูกค้าเสร็จ
   ไม่ใช่ตอนกดปุ่มออกบิล ซึ่งของถูกยกขึ้นรถไปแล้ว
   🔴 เป็นคำเตือนอย่างเดียว ไม่มีการปิดปุ่มหรือบล็อกอะไรทั้งสิ้น (เหตุผลใน D-047) */
.เตือนเครดิต {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 10px 10px; padding: 9px 12px; border-radius: 8px;
  background: var(--เหลือง); color: var(--น้ำตาล);
  border: 1px solid rgba(138, 90, 0, .25);
}
.เตือนเครดิต b { font-size: 13.5px; }
.เตือนเครดิต small { font-size: 12px; opacity: .9; flex: 1 1 100%; }
.เตือนเครดิต .ปุ่มจิ๋ว { margin-left: auto; }
/* "แรง" = เกินกำหนดหรือเกินวงเงินแล้ว — ต้องต่างจากเหลืองแบบเห็นได้จากมุมตา */
.เตือนเครดิต.แรง {
  background: #FFF1F1; color: var(--แดง); border-color: rgba(206, 0, 0, .3);
}
.เตือนเครดิต.แรง b { font-weight: 700; }

/* ---------- หน้ารับเงินก้อนเดียวปิดหลายบิล (T2.6 · D-048) ---------- */
.ช่องยอดรวม {
  font-size: 22px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; height: 52px;
}
.หัวจัดสรร, .แถวจัดสรร {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px; gap: 10px;
  align-items: center;
}
.หัวจัดสรร {
  padding: 6px 2px; font-size: 11px; font-weight: 700; color: var(--จาง);
}
.หัวจัดสรร span:not(:first-child) { text-align: right; }
.แถวจัดสรร {
  min-height: 58px; padding: 6px 2px;
  border-bottom: 1px solid rgba(35, 31, 32, .09);
}
.ซ้ายจัดสรร { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ซ้ายจัดสรร b { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ซ้ายจัดสรร small { font-size: 11.5px; color: var(--จาง); }
.แถวจัดสรร.ร้อน .ซ้ายจัดสรร small { color: var(--แดง); font-weight: 600; }
.ค้างจัดสรร { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ช่องจ่ายใบ {
  height: 44px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* ยอดที่แบ่งแล้วต้องเท่ากับยอดที่รับมา — ไม่เท่าเมื่อไหร่ต้องเห็นทันที
   ไม่ใช่ปล่อยให้กดบันทึกแล้วค่อยไปเจอตอนกระทบยอดสิ้นเดือน */
.สรุปจัดสรร {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: #E8F5E9; color: #1B5E20; font-size: 13.5px; font-weight: 600;
}
.สรุปจัดสรร b { font-size: 16px; font-variant-numeric: tabular-nums; }
.สรุปจัดสรร.ไม่ตรง { background: var(--เหลือง); color: var(--น้ำตาล); }

@media (max-width: 599px) {
  .หัวจัดสรร { display: none; }
  .แถวจัดสรร { grid-template-columns: minmax(0, 1fr) 92px; }
  .แถวจัดสรร .ค้างจัดสรร { grid-column: 2; font-size: 12px; color: var(--จาง); }
  .แถวจัดสรร .ช่องจ่ายใบ { grid-column: 2; }
}
@media (min-width: 768px) {
  body.หน้า-รับเงินรวม .จอ { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  body.หน้า-รับเงินรวม .จอ { grid-template-columns: minmax(0, 1fr); }
  body.หน้า-รับเงินรวม #เนื้อหาหลัก { max-width: 820px; }
}
.ปุ่มจิ๋ว.หลัก {
  background: var(--ดำ); color: var(--พื้น); border-color: var(--ดำ); font-weight: 700;
}

/* 🔴 จอคอมซ่อนปุ่มย้อนกลับทิ้ง (บรรทัด ~516) เพราะ "มีแถบหมวดค้างซ้ายแล้ว"
   แต่หน้าเรื่องเงินไม่มีแถบซ้าย — พอซ่อนปุ่มย้อนด้วย ก็ไม่เหลือทางกลับเลย
   นอกจากปุ่ม back ของเบราว์เซอร์ ซึ่งในโปรแกรมที่เปิดเป็นหน้าต่างของตัวเอง (D-020)
   **ไม่มีให้เห็น** — คนใช้จะติดอยู่ในหน้านั้น
   ⚠️ หน้าใหม่ที่ไม่มีแถบซ้าย ต้องมาเพิ่มชื่อในรายการนี้ด้วยเสมอ */
@media (min-width: 1100px) {
  body.หน้า-ค้างจ่าย .ปุ่มย้อน,
  body.หน้า-เงินเข้า .ปุ่มย้อน,
  body.หน้า-รับเงินรวม .ปุ่มย้อน,
  body.หน้า-ขาย .ปุ่มย้อน,
  body.หน้า-รายงาน .ปุ่มย้อน,
  body.หน้า-สต็อกคงเหลือ .ปุ่มย้อน { display: flex; }
}


/* ============================================ ซื้อ · รับของ · ทุน (ขั้น 3 — T3.1–T3.3) */
/* มือถือเป็นค่าเริ่มต้นเหมือนส่วนอื่นของไฟล์นี้ แล้วค่อยกางที่จอใหญ่
   🔴 ตารางทุกตัวในก้อนนี้เลื่อนแนวนอนในกรอบตัวเอง ไม่ดันทั้งหน้าให้ล้น */

/* ---------- ฟอร์ม: แถวสองช่อง / ติ๊ก ---------- */
.ฟอร์มลูกค้า .แถวสองช่อง { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 10px; }
.ฟอร์มลูกค้า .แถวติ๊ก {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.ฟอร์มลูกค้า .แถวติ๊ก input { width: 20px; height: 20px; flex: none; }
.ฟอร์มลูกค้า .แถวติ๊ก span { font-size: 13.5px; font-weight: 600; }

/* ---------- ตัวค้นหาสินค้าเวลาเพิ่มบรรทัด ---------- */
.กล่องค้นบรรทัด { display: flex; gap: 8px; align-items: center; }
.กล่องค้นบรรทัด .ช่องข้อความ { flex: 1; min-width: 0; }
.กล่องค้นบรรทัด .ปุ่มรอง { flex: none; }
.ผลค้นบรรทัด { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ผลค้นบรรทัด:empty { margin-top: 0; }
.ผลสินค้าซื้อ {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--เส้น); border-radius: 9px; background: #fff;
}
.ผลสินค้าซื้อ:hover { border-color: var(--ดำ); }
.ผลสินค้าซื้อ b { font-size: 14px; }
.ผลสินค้าซื้อ small { font-size: 11.5px; color: var(--จาง); }

/* ---------- การ์ด 1 บรรทัดของใบสั่งซื้อ/ใบรับของ ---------- */
/* ใช้การ์ดแทนตารางแนวนอนเพราะบรรทัดหนึ่งมีถึง 7 ช่องที่ต้องกรอก
   บนแท็บเล็ตที่ยืนถืออยู่ที่ลาน ตารางแคบๆ กรอกไม่ได้จริง */
.การ์ดบรรทัด {
  border: 1px solid var(--เส้น); border-radius: 10px; background: #fff;
  padding: 10px 11px; margin-top: 10px;
}
.หัวบรรทัด { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ลำดับบรรทัด { font-weight: 700; font-size: 13px; }
.รหัสบรรทัด { font-size: 11.5px; color: var(--จาง); flex: 1; min-width: 0; }
.ปุ่มลบบรรทัด {
  flex: none; height: 32px; padding: 0 11px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--เส้น); border-radius: 8px; background: var(--พื้น);
  color: var(--แดง); cursor: pointer;
  display: inline-flex; align-items: center;   /* D-044 ข้อ 3 */
}
.ช่องบรรทัด { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ช่องบรรทัด .ช่องย่อย { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ช่องบรรทัด .ช่องย่อย.ยาว { grid-column: 1 / -1; }
.ช่องบรรทัด .ช่องย่อย > span { font-size: 11px; color: var(--จาง); font-weight: 600; }
.ช่องบรรทัด .ช่องกรอกบรรทัด { height: 40px; font-size: 14px; font-weight: 600; }
.รวมบรรทัด {
  margin-top: 8px; font-size: 12px; color: var(--จาง); font-variant-numeric: tabular-nums;
}
.บรรทัดว่าง { margin: 10px 0 0; font-size: 12.5px; color: var(--จาง); line-height: 1.6; }

/* ---------- ยอดรวมของใบสั่งซื้อ ---------- */
.ยอดใบสั่งซื้อ { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.ยอดใบสั่งซื้อ > div { display: flex; justify-content: space-between; font-size: 13px; }
.ยอดใบสั่งซื้อ b { font-variant-numeric: tabular-nums; }
.ยอดใบสั่งซื้อ .สุทธิ {
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--เส้น); font-size: 16px;
}
.ยอดใบสั่งซื้อ .สุทธิ b { font-size: 20px; font-weight: 700; }

/* ---------- กล่องเนื้อหาของหน้าดูใบ ---------- */
.กล่องซื้อ {
  margin: 12px; border: 1px solid var(--เส้น); border-radius: 10px; background: #fff;
  overflow: hidden;
}
.หัวกล่องซื้อ {
  padding: 10px 13px; font-size: 12px; font-weight: 700; color: var(--จาง);
  border-bottom: 1px solid var(--เส้น); background: var(--พื้น);
}
.เนื้อกล่องซื้อ { margin: 0; padding: 12px 13px; font-size: 13.5px; line-height: 1.65; }
.ท้ายกล่องซื้อ {
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between;
  padding: 10px 13px; background: var(--พื้น); border-top: 1px solid var(--เส้น);
  font-size: 12px; color: var(--จาง);
}
.ท้ายกล่องซื้อ b { color: var(--ดำ); font-variant-numeric: tabular-nums; }

.แถวย่อยซื้อ {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 13px; border-bottom: 1px solid rgba(35, 31, 32, .07);
}
.แถวย่อยซื้อ b { font-size: 13px; }
.แถวย่อยซื้อ small { font-size: 11.5px; color: var(--จาง); }

.ป้ายสถานะซื้อ {
  flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--พื้น); border: 1px solid var(--เส้น);
  display: inline-flex; align-items: center;   /* D-044 ข้อ 3 */
}
.ป้ายสถานะซื้อ.ร้อน { background: var(--ดำ); color: var(--พื้น); border-color: var(--ดำ); }

/* ---------- ตารางเทียบ "สั่ง / รับแล้ว / ยังขาด" ---------- */
.ตารางซื้อ { overflow-x: auto; }
.แถวตารางซื้อ {
  display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(78px, .7fr));
  gap: 8px; align-items: center; min-width: 560px;
  padding: 9px 13px; border-bottom: 1px solid rgba(35, 31, 32, .07);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.แถวตารางซื้อ.หัว {
  font-size: 11px; font-weight: 700; color: var(--จาง); background: #fff;
}
.แถวตารางซื้อ.ครบแล้ว { opacity: .55; }
.กล่องซื้อ .ช่องชื่อ { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.กล่องซื้อ .ช่องชื่อ b { font-size: 13.5px; }
.กล่องซื้อ .ช่องชื่อ small { font-size: 11px; color: var(--จาง); }
.แถวตารางซื้อ .ยังขาด { color: var(--แดง); font-weight: 700; }

/* ---------- การ์ดของ 1 บรรทัดในหน้าดูใบรับของ ---------- */
.การ์ดรับของ { padding: 11px 13px; border-bottom: 1px solid rgba(35, 31, 32, .09); }
.การ์ดรับของ.ขาดทุน { background: #FFF8F8; }
.หัวการ์ดรับของ { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.หัวการ์ดรับของ b { font-size: 15px; }
.หัวการ์ดรับของ small { font-size: 11.5px; color: var(--จาง); }
.แถวค่ารับของ { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.แถวค่ารับของ > span { display: flex; flex-direction: column; gap: 1px; }
.แถวค่ารับของ small { font-size: 11px; color: var(--จาง); font-weight: 600; }
.แถวค่ารับของ b { font-size: 15px; font-variant-numeric: tabular-nums; }
.แถวค่ารับของ > span.จาง b { color: var(--จาง); font-weight: 600; }
.แถวค่ารับของ > span.แดง b { color: var(--แดง); }
.หมายเหตุรับของ { margin: 8px 0 0; font-size: 12.5px; color: var(--จาง); }

/* ชั้นเจ้าของ — กรอบน้ำตาลเหมือน fieldset.ชั้นจำกัด ของหน้าลูกค้า จะได้อ่านออกทันที
   ว่า "ก้อนนี้คือของที่คนอื่นไม่เห็น" โดยไม่ต้องอ่านตัวหนังสือ */
.ชั้นเจ้าของ {
  margin-top: 10px; padding: 10px 11px; border: 1px solid var(--น้ำตาล);
  border-radius: 9px; background: #FFFDF7;
}
.ชั้นเจ้าของ .ป้ายชั้น {
  display: inline-block; margin-bottom: 8px; font-size: 10.5px; font-weight: 700;
  color: var(--น้ำตาล); letter-spacing: .03em;
}
.ชั้นเจ้าของ .แถวค่ารับของ + .แถวค่ารับของ { margin-top: 8px; }
.รอราคาซื้อ { margin: 0; font-size: 12.5px; color: var(--น้ำตาล); font-weight: 600; }
.เตือนขาดทุน { margin: 8px 0 0; font-size: 12.5px; color: var(--แดง); font-weight: 700; }

.ปุ่มปรับราคา {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(138, 90, 0, .3);
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.ป้ายปรับราคา { width: 100%; font-size: 11.5px; font-weight: 700; color: var(--จาง); }
.ปุ่มปรับราคา .ช่องราคาเอง { width: 116px; height: 36px; font-size: 13px; }
.ปุ่มปรับราคา small { width: 100%; font-size: 11px; color: var(--จาง); line-height: 1.55; }

/* ---------- ตารางทุน/กำไรทั้งร้าน ---------- */
.ตารางทุน { overflow-x: auto; }
.แถวตารางทุน {
  display: grid; grid-template-columns: minmax(190px, 1.7fr) repeat(5, minmax(76px, .7fr));
  gap: 8px; align-items: center; min-width: 640px;
  padding: 9px 13px; border-bottom: 1px solid rgba(35, 31, 32, .07);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.แถวตารางทุน.หัว { font-size: 11px; font-weight: 700; color: var(--จาง); }
.แถวตารางทุน.ร้อน { background: #FFF8F8; }
.แถวตารางทุน .แดง { color: var(--แดง); font-weight: 700; }
.ตารางทุน .ช่องชื่อ { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ตารางทุน .ช่องชื่อ b { font-size: 13.5px; }
.ตารางทุน .ช่องชื่อ small { font-size: 11px; color: var(--จาง); }

/* ---------- รายงาน (T4.1+T4.2) — ก้อนลิงก์ค้างจ่าย + กราฟ + ตาราง Top ---------- */
.แถวลิงก์ค้างจ่าย {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 12px 12px; padding: 12px 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--เส้น); font-size: 13px; color: var(--ดำ);
}
.แถวลิงก์ค้างจ่าย svg { flex: none; color: var(--จาง); }
.แถวลิงก์ค้างจ่าย b { font-weight: 700; }

.หัวกราฟ {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px; flex-wrap: wrap;
}
.หัวกราฟ .หัวกลุ่มเล็ก { padding: 12px 0 6px; }
.หัวกราฟ .ตัวกรองประวัติ { padding: 6px 0; }

.กล่องกราฟ {
  margin: 0 12px 16px; padding: 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--เส้น);
}
.กราฟแท่งรายวัน { width: 100%; height: 170px; display: block; }
.แท่งขาย { fill: var(--ดำ); opacity: .82; }
.แท่งกำไร { fill: var(--แดง); }
.คำอธิบายกราฟ {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--จาง);
}
.จุดกราฟ {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 5px; vertical-align: middle;
}
.จุดกราฟ.ขาย { background: var(--ดำ); opacity: .82; }
.จุดกราฟ.กำไร { background: var(--แดง); }

.กราฟโดนัทกล่อง { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.กราฟโดนัท { flex: none; }
.ตำนานโดนัท { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; flex: 1; min-width: 160px; }
.ตำนานโดนัท span { display: flex; align-items: center; }
.ตำนานโดนัท b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }

.ตารางรายงาน { overflow-x: auto; }
.แถวตารางรายงาน {
  display: grid; gap: 8px; align-items: center; min-width: 560px;
  padding: 9px 13px; border-bottom: 1px solid rgba(35, 31, 32, .07);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.ตารางรายงาน.สินค้า .แถวตารางรายงาน { grid-template-columns: minmax(190px, 1.7fr) repeat(5, minmax(76px, .7fr)); }
.ตารางรายงาน.ลูกค้า .แถวตารางรายงาน { grid-template-columns: minmax(190px, 1.7fr) repeat(3, minmax(90px, .8fr)); }
.แถวตารางรายงาน.หัว { font-size: 11px; font-weight: 700; color: var(--จาง); }
.แถวตารางรายงาน .แดง { color: var(--แดง); font-weight: 700; }
.ตารางรายงาน .ช่องชื่อ { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ตารางรายงาน .ช่องชื่อ b { font-size: 13.5px; }
.ตารางรายงาน .ช่องชื่อ small { font-size: 11px; color: var(--จาง); }

.กล่องเทียบเดือน .เทียบเล็ก { font-size: 12px; }

/* ---------- หน้าเทียบราคา เก่า → ใหม่ ---------- */
.เทียบราคา { display: flex; align-items: center; gap: 12px; padding: 16px 13px; }
.ฝั่งเทียบ { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ฝั่งเทียบ small { font-size: 11.5px; color: var(--จาง); font-weight: 600; }
.ฝั่งเทียบ b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ฝั่งเทียบ i { font-style: normal; font-size: 11.5px; color: var(--จาง); }
.ฝั่งเทียบ.ใหม่ b { color: var(--แดง); }
.ลูกศรเทียบ { flex: none; font-size: 22px; color: var(--จาง); }

@media (min-width: 768px) {
  .ฟอร์มลูกค้า .แถวสองช่อง { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ช่องบรรทัด { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ช่องบรรทัด .ช่องย่อย.ยาว { grid-column: span 2; }
  .ช่องบรรทัด .ช่องย่อย.สั้น { grid-column: span 1; }
}

/* ============================================ โมดูลนับสต็อก (T3.4 ส่วนแรก) */
.แถบคืบหน้านับสต็อก { padding: 10px 14px 4px; }
.แถบคืบหน้านับสต็อก .แถวคืบหน้าบน {
  display: flex; align-items: baseline; justify-content: space-between; font-size: 13px;
}
.แถบคืบหน้านับสต็อก .แถวคืบหน้าบน span { font-size: 11.5px; color: var(--จาง); }
.รางคืบหน้านับสต็อก {
  margin-top: 6px; height: 6px; border-radius: 4px; background: var(--เส้น); overflow: hidden;
}
.รางคืบหน้านับสต็อก i { display: block; height: 100%; background: var(--แดง); border-radius: 4px; }

.ช่องค้นหาในหมวด { margin: 10px 12px; height: 46px; }
.ไม่พบในหมวด { margin: 0 12px 10px; font-size: 13px; color: var(--จาง); }

.แถวนับสต็อก {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
  padding: 9px 13px; margin-bottom: 8px;
}
.แถวนับสต็อก.นับแล้ว { border-color: rgba(27, 94, 32, .25); }
.แถวนับสต็อก .ชื่อสินค้า { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.แถวนับสต็อก .ชื่อสินค้า b { font-size: 15px; }
.แถวนับสต็อก .ชื่อสินค้า small { font-size: 12px; color: var(--จาง); }
/* 🔴 ตั้งใจใช้ชื่อเจาะจง ".ช่องนับสต็อก" ไม่ใช่ ".ช่องราคา" — ดูเหตุผลเดียวกับ D-054
   ที่ .ช่องราคา เปล่าๆ เคยถูกใช้ซ้ำข้ามฟีเจอร์จนกฎท้ายไฟล์ทับกฎต้นไฟล์มาแล้ว */
.ช่องนับสต็อก {
  flex: none; width: 104px; height: 48px; box-sizing: border-box; padding: 0 10px;
  border: 1.5px solid var(--ดำ); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 19px; font-weight: 700; color: var(--ดำ);
  text-align: right; outline: none;
}
.ช่องนับสต็อก:focus { border-color: var(--แดง); }
.ช่องนับสต็อก::placeholder { color: rgba(35, 31, 32, .32); font-size: 13px; font-weight: 400; }
.ป้ายนับสต็อกแล้ว {
  flex: none; font-size: 10.5px; font-weight: 700; color: #1B5E20;
  background: #E8F5E9; border-radius: 5px; padding: 3px 7px;
}

@media (min-width: 768px) {
  .แถวนับสต็อก { padding: 10px 16px; }
  .ช่องนับสต็อก { width: 130px; height: 50px; font-size: 21px; }
}

/* ---------- นับสต็อกหมุนเวียน (T3.5 · ดีไซน์ใหม่ D-070) — คอลัมน์ข้างวงคืบหน้า + ผลต่างล่าสุด ---------- */
.ป้ายผลต่างนับสต็อก {
  flex: none; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 3px 7px;
  white-space: nowrap;
}
.ป้ายผลต่างนับสต็อก.ขาด { color: var(--แดง); background: #FFF5F5; }
.ป้ายผลต่างนับสต็อก.เกิน { color: #1B5E20; background: #E8F5E9; }

.โครงหมุนเวียน { display: flex; flex-direction: column; gap: 16px; padding: 0 12px 16px; }
.คอลัมน์นับหมุนเวียน { min-width: 0; }

.การ์ดคืบหน้าหมุนเวียน {
  background: #fff; border: 1px solid var(--เส้น); border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.วงคืบหน้าหมุนเวียน {
  width: 110px; height: 110px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.วงคืบหน้าหมุนเวียน::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff;
}
.วงคืบหน้าหมุนเวียน b { position: relative; z-index: 1; font-size: 24px; font-weight: 700; }
.วงคืบหน้าหมุนเวียน span {
  position: relative; z-index: 1; font-size: 9.5px; color: var(--จาง);
  display: block; text-align: center; margin-top: 2px; line-height: 1.3;
}
.การ์ดคืบหน้าหมุนเวียน p { margin: 0; text-align: center; font-size: 12px; color: var(--จาง); line-height: 1.55; }

.การ์ดผลต่างหมุนเวียน { background: #fff; border: 1px solid var(--เส้น); border-radius: 12px; padding: 16px; }
.การ์ดผลต่างหมุนเวียน b { font-size: 13.5px; }
.คำอธิบายผลต่างหมุนเวียน { margin: 3px 0 0; font-size: 11px; color: var(--จาง); line-height: 1.5; }
.รายการผลต่างหมุนเวียน { margin-top: 8px; display: flex; flex-direction: column; }
.แถวผลต่างหมุนเวียน {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 0; border-top: 1px solid rgba(35, 31, 32, .08); font-size: 12.5px;
}
.แถวผลต่างหมุนเวียน:first-child { border-top: 0; }
.ชื่อผลต่างหมุนเวียน { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ชื่อผลต่างหมุนเวียน small { font-size: 10.5px; color: var(--จาง); }
.แถวผลต่างหมุนเวียน b { flex: none; font-size: 12.5px; }
.แถวผลต่างหมุนเวียน b.ขาด { color: var(--แดง); }
.แถวผลต่างหมุนเวียน b.เกิน { color: #1B5E20; }

@media (min-width: 1000px) {
  .โครงหมุนเวียน { flex-direction: row; align-items: flex-start; gap: 24px; }
  .คอลัมน์นับหมุนเวียน { flex: 1 1 auto; }
  .คอลัมน์ข้างหมุนเวียน {
    flex: none; width: 300px; position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 14px;
  }
}

/* 🔴 หน้านี้มีแถบซ้ายแต่ไม่มีเครื่องคิดยอดฝั่งขวา (ปิดด้วย {% block ช่องขวา %}{% endblock %})
   ต้องประกาศ grid-template-columns เองเสมอ ไม่งั้นคอลัมน์ขวาผีจะไปบีบตัวหนังสือ (D-054 ข้อ 6) */
@media (min-width: 768px) and (max-width: 1099px) {
  body.หน้า-นับสต็อก .จอ { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  body.หน้า-นับสต็อก .จอ { grid-template-columns: 216px minmax(0, 1fr); }
  /* แถบซ้ายทำหน้าที่สลับหมวดแทนแล้วที่ขนาดนี้ ชิปในเนื้อหาหลักซ้ำซ้อนกัน */
  .สลับหมวดนับสต็อก { display: none; }
}

/* ============================================ สต็อกคงเหลือ (T3.6 · ดีไซน์ใหม่ D-070) */
/* การ์ดสรุปหัวหน้า — แทน .แถบkpi/.ช่องkpi ทั่วไป (ตั้งชื่อแยกเฉพาะหน้านี้กันชนกับหน้าแรก) */
.สรุปสต็อก { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 12px 4px; }
.การ์ดสรุปสต็อก {
  flex: 1 1 160px; min-width: 0; position: relative; background: #fff;
  border: 1px solid var(--เส้น); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.การ์ดสรุปสต็อก.เตือน { border-color: rgba(206, 0, 0, .3); background: #FFFBFB; }
.แถวบนการ์ดสรุปสต็อก { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ป้ายชื่อการ์ดสรุปสต็อก { font-size: 12px; font-weight: 600; color: var(--จาง); }
.ไอคอนการ์ดสรุปสต็อก {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: var(--พื้น); color: var(--จาง);
  display: flex; align-items: center; justify-content: center;
}
.การ์ดสรุปสต็อก.เตือน .ไอคอนการ์ดสรุปสต็อก { background: #FFEBEB; color: var(--แดง); }
.ตัวเลขการ์ดสรุปสต็อก {
  font-size: clamp(18px, 5vw, 26px); font-weight: 700; line-height: normal;
  overflow-wrap: anywhere; max-width: 100%;
}
.การ์ดสรุปสต็อก.เตือน .ตัวเลขการ์ดสรุปสต็อก { color: var(--แดง); }
.ป้ายลับการ์ดสรุปสต็อก {
  position: absolute; top: 12px; right: 14px;
  font-size: 10px; font-weight: 700; color: var(--น้ำตาล);
  background: var(--เหลือง); padding: 3px 7px; border-radius: 5px;
}

/* รายการสินค้า — การ์ดต่อแถว แทนตารางเดิม เพื่อไม่ต้องเลื่อนแนวนอนบนมือถือ */
.รายการสต็อก { display: flex; flex-direction: column; gap: 8px; margin: 0 12px 12px; }
.การ์ดสต็อก {
  position: relative; background: #fff; border: 1px solid var(--เส้น); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
}
.การ์ดสต็อก.ใกล้หมด { border-color: rgba(206, 0, 0, .35); }
.การ์ดสต็อก.ใกล้หมด::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 10px 0 0 10px; background: var(--แดง);
}
.หัวการ์ดสต็อก { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ชื่อการ์ดสต็อก { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ชื่อการ์ดสต็อก b { font-size: 14.5px; font-weight: 600; }
.ชื่อการ์ดสต็อก small { font-size: 11.5px; color: var(--จาง); }
.คงเหลือการ์ดสต็อก { flex: none; text-align: right; }
.คงเหลือการ์ดสต็อก b { font-size: 19px; font-weight: 700; }
.คงเหลือการ์ดสต็อก b.แดง { color: var(--แดง); }
.คงเหลือการ์ดสต็อก small { display: block; font-size: 10.5px; color: var(--จาง); }

.แถบระดับสต็อก { display: flex; flex-direction: column; gap: 5px; }
.รางระดับสต็อก { height: 6px; border-radius: 4px; background: var(--พื้น); overflow: hidden; }
.รางระดับสต็อก i { display: block; height: 100%; border-radius: 4px; background: #2E7D32; }
.รางระดับสต็อก i.แดง { background: var(--แดง); }
.ป้ายระดับสต็อก { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--จาง); }

.ท้ายการ์ดสต็อก {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid rgba(35, 31, 32, .08);
}
.ฟอร์มจุดสั่งซื้อ { display: flex; align-items: center; gap: 6px; }
.ป้ายฟอร์มจุดสั่งซื้อ { font-size: 11.5px; color: var(--จาง); }
.ฟอร์มจุดสั่งซื้อ input {
  width: 68px; height: 34px; padding: 0 8px; box-sizing: border-box;
  border: 1.5px solid var(--เส้น); border-radius: 6px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: right;
}
.ฟอร์มจุดสั่งซื้อ input:focus { border-color: var(--แดง); outline: none; }
.ฟอร์มจุดสั่งซื้อ button {
  height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--ดำ);
  color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center;   /* D-044 ข้อ 3 */
}
.มูลค่าการ์ดสต็อก { text-align: right; }
.มูลค่าการ์ดสต็อก span { display: block; font-size: 10.5px; color: var(--จาง); }
.มูลค่าการ์ดสต็อก b { font-size: 14.5px; font-weight: 700; }

@media (min-width: 768px) {
  .หัวการ์ดสต็อก { align-items: center; }
  .การ์ดสต็อก { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
  .หัวการ์ดสต็อก { flex: 1 1 280px; }
  .แถบระดับสต็อก { flex: 1 1 200px; }
  .ท้ายการ์ดสต็อก { flex: none; border-top: 0; padding-top: 0; }
}

/* D-083 (ตอบ Q43, 5 ก.ย. 2569) — เกณฑ์ปุ่ม/ช่องกรอก ≥44px บังคับเฉพาะจอสัมผัส (แท็บเล็ต+มือถือ)
   จอคอมใช้เมาส์แม่นกว่านิ้วมือเปื้อนน้ำมันหน้ากองเหล็ก ปุ่มรอง/ช่องกรอกที่ตั้งใจออกแบบให้กระชับ
   (เช่น .ปุ่มจิ๋ว, ช่องราคา/จำนวนในตะกร้าขวา) จึงคงขนาดเดิมบนจอคอมได้ — min-height ชนะ height ที่
   ประกาศไว้ที่อื่นเสมอตามสเปก CSS (max(height, min-height)) ไม่ต้องไล่แก้ทีละจุดทั่วไฟล์
   ช่องติ๊ก/ปุ่มวิทยุบังคับ min-width ด้วย กันไม่ให้กลายเป็นรูปสี่เหลี่ยมยาวเบี้ยว */
@media (max-width: 1099px) {
  button, input, select, a[class*="ปุ่ม"] { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-width: 44px; min-height: 44px; }
}