/* ============================================================
   Snackies Factory — ระบบสีและองค์ประกอบ
   อ้างอิงจากแบบร่างหน้าจอที่ลูกค้าพิจารณาแล้ว
   ============================================================ */
:root{
  /* ---- มาตราส่วนตัวอักษร (8 ต.ค. 2569 — ลูกค้าแจ้งขนาดตัวอักษรแต่ละเมนูไม่สมส่วน)
     เดิมมี 25 ขนาดปนกัน (12.5 · 13.5 · 14.5 · 15.5 …) → เหลือ 6 ระดับ ห้ามเขียน px ตรง ๆ อีก ให้ใช้ตัวแปรนี้
     2xs ป้ายจิ๋ว · xs ข้อความรอง/หัวตาราง/ป้ายกำกับ · sm ข้อมูลในตาราง/ชิป/หมายเหตุ
     md เนื้อหา/ปุ่ม/ช่องกรอก/แท็บ/เมนู · lg หัวการ์ด · xl หัวหน้า   (ตัวเลขแสดงผลใหญ่ > 20px คงไว้) */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:15px; --fs-xl:18px;
  /* ========== สีแบรนด์ WhiteLAB+ — ขาว-ดำตามโลโก้ (whitelabplus.com) ==========
     ส่วนติดต่อใช้ขาว/ดำ/เทา · สีมีไว้เฉพาะกราฟ (s1–s5) และสถานะ (ok/warn/danger) */
  --brand:#111114; --brand-deep:#000; --brand-cyan:#8FE3D6; --brand-sky:#d9d9de; --brand-pink:#D0457A;

  --ink:#16161a; --ink2:#4a4a55; --ink3:#80808b;
  --line:#e6e6ea; --line2:#f2f2f4; --surface:#fff; --bg:#f6f6f7;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --shadow-lg:0 2px 4px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.09);
  --accent:#16161a; --accent-soft:#f0f0f2; --accent-line:#c9c9d0;
  /* ---------- ตัวอักษร ----------
     --mono มี "IBM Plex Sans Thai" ต่อท้ายด้วยเจตนา: IBM Plex Mono ไม่มีอักขระไทย
     ถ้าไม่ใส่ไว้ ข้อความอย่าง "600 กก." จะได้ตัวเลขเป็น Plex Mono แต่ "กก." ตกไปใช้ฟอนต์
     monospace ของเครื่อง (Menlo/Courier) → ดูเหมือนคนละฟอนต์ในบรรทัดเดียวกัน
     ⚠️ ค่าตรงนี้เป็น "ค่าตั้งต้น" เท่านั้น — หน้า “ธีม & ตัวอักษร” เขียนทับที่ :root ตอนรันได้ */
  --font:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Thai",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pink:#D0457A; --pink-soft:#fcebf2; --pink-line:#f2bcd0;
  --ok:#12855c; --ok-soft:#e1f4ed; --ok-line:#a8ddc8;
  --warn:#a86a00; --warn-soft:#fdf1dd; --warn-line:#f0d5a6;
  --danger:#c62a4c; --danger-soft:#fdeaef; --danger-line:#f3bbc8;
  /* แถบเมนูซ้าย — พื้นขาว + ตัวอักษรน้ำเงินแบรนด์
     ทุกคู่สีผ่านเกณฑ์อ่านง่ายที่โครงการตั้งไว้ (ต่ำสุด 7.54:1 ที่เมนูย่อย) */
  --rail:#fff; --rail-2:#f1f1f3; --rail-line:#e8e8ec;
  --rail-ink:#16161a; --rail-ink2:#5d5d68;
  --rail-on:#16161a;     /* ปุ่มเมนูที่เลือกอยู่ — น้ำเงินแบรนด์ ตัวอักษรขาว 9.35:1 */
  --rail-hover:#000;  /* สีตัวอักษรตอนเอาเมาส์ชี้ */
  /* สีกราฟ — ตรวจด้วย validate_palette (all-pairs) ผ่านทุกข้อ: ความสว่าง/ความอิ่มสี/CVD/ตัดกับพื้น
     เริ่มที่สีแบรนด์สองตัวแรก แล้วต่อด้วยสีที่คนตาบอดสีแยกออก — ไล่ตามลำดับ ห้ามวนซ้ำ */
  --s1:#5B4BD1; --s2:#008F7A; --s3:#B86200; --s4:#D0457A; --s5:#2F7FD8;
}
*{box-sizing:border-box}
/* ช่องกรอกและปุ่มบางตัวเบราว์เซอร์ตั้งฟอนต์ระบบให้เอง — บังคับให้ใช้ฟอนต์เดียวกับทั้งระบบ */
button,input,select,textarea,optgroup,option{font-family:inherit}

html,body{height:100%}
body{
  margin:0; color:var(--ink); font-size:var(--fs-md); line-height:1.5;
  background:var(--bg);
  background-image:linear-gradient(180deg,#efeff1 0%,var(--bg) 42%,var(--bg) 100%);
  background-attachment:fixed;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mut{color:var(--ink3);font-size:var(--fs-sm)}
.r{text-align:right}
[hidden]{display:none!important}

/* ---------- โครงหน้า ---------- */
.app{display:grid;grid-template-columns:246px 1fr;height:100vh;overflow:hidden}
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid var(--rail-line)}
.brand{padding:16px 18px 14px;border-bottom:1px solid var(--rail-line);flex:none}
.brand .bl{display:block;width:100%;max-width:168px;height:auto}
/* ถ้ารูปโลโก้โหลดไม่ขึ้น ยังต้องเหลือชื่อแบรนด์เป็นตัวหนังสืออยู่ */
.brand .bn{font-size:var(--fs-xl);font-weight:700;color:var(--rail-ink);letter-spacing:.01em}
.brand .bs{font-size:var(--fs-xs);color:var(--rail-ink2);margin-top:4px}

/* ---------- มาสคอต ----------
   ใช้เป็นภาพประกอบเท่านั้น ห้ามเป็นตัวสื่อความหมายเดียว (อ่านด้วยเสียงต้องไม่พลาดข้อมูล)
   จึงใส่ alt="" ทุกจุดแล้วให้ข้อความข้าง ๆ เป็นตัวบอกเรื่อง */
.masc{display:block;height:auto;flex:none;user-select:none;-webkit-user-drag:none}
.masc-hi{display:flex;gap:16px;align-items:center}
.masc-hi .masc{width:78px}
.masc-hi>div{min-width:0}
.empty .masc{width:104px;margin:0 auto 10px;opacity:.92}
@media (max-width:620px){ .masc-hi .masc{width:62px} }
body.no-masc .masc{display:none}
.navgroup{padding:12px 10px 4px}
.navtitle{font-size:var(--fs-2xs);font-weight:700;color:var(--rail-ink2);letter-spacing:.12em;padding:0 12px 7px}
.nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--rail-ink);
  font-size:var(--fs-md);font-weight:500;border-left:3px solid transparent;cursor:pointer;width:100%;
  background:none;border-top:none;border-right:none;border-bottom:none;text-align:left;font-family:inherit}
.nav:hover{background:var(--rail-2);color:var(--rail-hover)}
.nav.on{background:var(--rail-on);color:#fff;border-left-color:transparent;font-weight:600}
.nav svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav.locked{color:#a3b0c4;cursor:not-allowed}
.nav.locked:hover{background:none;color:#a3b0c4}
.nav .tag{margin-left:auto;font-size:var(--fs-2xs);font-weight:600;color:var(--rail-ink);background:var(--pink-soft);padding:2px 7px;border-radius:999px}
.railfoot{margin-top:auto;padding:14px 22px 18px;font-size:var(--fs-xs);color:var(--rail-ink2);line-height:1.6}

.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.top{display:flex;align-items:center;gap:16px;background:var(--surface);border-bottom:1px solid var(--line);
  padding:0 26px;height:64px;flex:none}
/* มาสคอตตัวเล็กบนแถบหัวข้อ — อยู่ในแถบ 64px พอดี ไม่ดันเนื้อหาลงสักพิกเซล
   ชิดล่างให้เหมือนยืนอยู่บนเส้นแบ่ง · กลับด้านที่ .tm-flip ชั้นนอก เพราะรูปใช้ transform ทำแอนิเมชัน */
.topmasc{flex:none;align-self:flex-end;line-height:0;margin-left:-6px;
  margin-bottom:-13px;position:relative;z-index:2}   /* ล้นลงมานิดเดียว — ตกอยู่ในช่องว่างบนของเนื้อหา ไม่ทับการ์ด */
.topmasc .tm-flip{display:block;line-height:0}
.topmasc img{height:76px;width:auto;display:block;transform-origin:bottom center;will-change:transform}
@media (max-width:620px){ .topmasc{display:none} }  /* จอมือถือพื้นที่หัวจอน้อย เก็บไว้ก่อน */
.top h1{font-size:var(--fs-xl);font-weight:700;margin:0;color:var(--rail-ink)}
.top .sub{font-size:var(--fs-sm);color:var(--ink3);margin-top:1px}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--ink2)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:600;font-size:var(--fs-sm)}
.body{padding:20px 26px 26px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;flex:1}

/* ---------- ส่วนประกอบ ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.ch{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line2)}
.ch h2{font-size:var(--fs-lg);font-weight:700;margin:0;color:var(--rail-ink)}
.ch .hint{font-size:var(--fs-xs);color:var(--ink3)}
.tiles{display:grid;gap:14px;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
/* โครงสองคอลัมน์ — ยุบเหลือคอลัมน์เดียวบนจอแคบ ไม่งั้นตารางข้างในถูกบีบจนต้องเลื่อนด้านข้าง */
.g2{display:grid;gap:16px;align-items:start;
  grid-template-columns:minmax(0,var(--a,1fr)) minmax(0,var(--b,1fr))}
@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(min(var(--n,4),2),minmax(0,1fr))}
  .g2{grid-template-columns:minmax(0,1fr)}
}
/* หน้าที่มีตารางกว้างคู่กับแผงข้าง ต้องยุบเร็วกว่าปกติ
   ไม่งั้นตารางถูกบีบจนต้องเลื่อนด้านข้างบนโน้ตบุ๊ก 1280px */
@media (max-width:1360px){ .g2.tight{grid-template-columns:minmax(0,1fr)} }
@media (max-width:620px){ .tiles{grid-template-columns:minmax(0,1fr)} }
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.tile .lb{font-size:var(--fs-xs);color:var(--ink3);font-weight:600}
.tile .vl{font-size:28px;font-weight:700;margin-top:6px;letter-spacing:-.02em;color:var(--rail-ink)}
.tile .ft{font-size:var(--fs-xs);color:var(--ink2);margin-top:3px}

/* ตาราง — ต้องพอดีจอ ไม่ต้องเลื่อนด้านข้าง
   เดิม th/td เป็น white-space:nowrap ทุกช่อง ตารางจึงกว้างตามเนื้อหาเสมอ
   และล้นจอ iPad แนวตั้งเกือบทุกเมนู · ตอนนี้ให้ข้อความขึ้นบรรทัดใหม่ได้
   ส่วนที่ห้ามหัก (ตัวเลข · ป้ายสถานะ · ปุ่ม) กันไว้เฉพาะจุด */
table{width:100%;border-collapse:collapse;table-layout:auto}
th{font-size:var(--fs-xs);font-weight:700;color:var(--accent);text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--accent-soft);line-height:1.35}
/* ⚠️ ใช้ break-word ไม่ใช่ anywhere — anywhere ยอมหักกลางคำ เบราว์เซอร์จึงบีบคอลัมน์ชื่อ
   ได้จนเหลือความกว้างตัวอักษรเดียว แล้วชื่อสินค้าเรียงลงแนวตั้ง */
td{padding:10px 12px;min-height:50px;font-size:var(--fs-sm);border-bottom:1px solid var(--line2);
  vertical-align:middle;line-height:1.4;overflow-wrap:break-word}
/* คอลัมน์แรกคือชื่อรายการเสมอ — ต้องมีที่พอให้อ่านได้ ไม่โดนคอลัมน์ตัวเลขแย่งไปหมด */
.tw th:first-child,.tw td:first-child{min-width:150px}
@media (max-width:620px){ .tw td:first-child{min-width:0} }
td .mut{line-height:1.35}
tbody tr:hover td{background:#fafafb}
tr:last-child td{border-bottom:none}
/* ตัวเลขและหน่วยต้องอยู่บรรทัดเดียว ไม่งั้นอ่านยาก */
td.num,th.r,td.r{white-space:nowrap}
td.num{overflow-wrap:normal}
/* ช่องปุ่มจัดการ: ให้ปุ่มขึ้นบรรทัดใหม่ได้เองเมื่อจอแคบ แทนที่จะดันตารางให้กว้าง */
td .btn{margin:2px 3px 2px 0}
.tcell-act{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.tcell-act .btn{margin:0}
/* เหลือ overflow ไว้เป็นตาข่ายกันพลาด แต่เป้าหมายคือไม่ต้องใช้ */
.tw{overflow-x:auto}

@media (max-width:1200px){
  th,td{padding:9px 9px;font-size:var(--fs-sm)}
  th{font-size:var(--fs-xs)}
  .btn.sm{padding:0 9px}
}
@media (max-width:900px){
  th,td{padding:8px 7px;font-size:var(--fs-sm)}
  /* คอลัมน์รองซ่อนบนจอแคบ — ข้อมูลยังดูได้จากหน้ารายละเอียด */
  .c-sec{display:none}
}
/* จอมือถือ: ตารางเปลี่ยนเป็นการ์ดเรียงลง ไม่ต้องเลื่อนด้านข้างเลย
   หัวตารางถูกซ่อน จึงต้องมี data-l บอกชื่อคอลัมน์กำกับในแต่ละช่อง (ใส่ให้ด้วย labelCells() ใน app.js) */
@media (max-width:620px){
  th,td{padding:7px 6px;font-size:var(--fs-xs)}
  .btn.sm{height:30px;padding:0 9px;font-size:var(--fs-xs)}
  .tw thead{display:none}
  .tw table,.tw tbody,.tw tr,.tw td{display:block;width:100%}
  .tw tr{border-bottom:1px solid var(--line);padding:8px 2px}
  .tw tr:last-child{border-bottom:none}
  .tw td{border:0;padding:3px 10px;min-height:0;text-align:left!important;white-space:normal!important}
  .tw td[data-l]::before{content:attr(data-l) " ";color:var(--ink3);font-size:var(--fs-xs);font-weight:600}
  .tw td:empty{display:none}
  .tcell-act{justify-content:flex-start}
}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--danger-soft);color:var(--danger)}
.p-mut{background:#eef1f3;color:var(--ink2)}
.p-info{background:var(--accent-soft);color:var(--accent)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

.btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 17px;border-radius:11px;
  border:1px solid var(--line);background:#fff;color:var(--rail-ink);font:inherit;font-size:var(--fs-md);font-weight:600;
  cursor:pointer;transition:background .14s,box-shadow .14s,transform .1s}
.btn:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:linear-gradient(135deg,#16161a,#3d3d47);border-color:transparent;color:#fff;
  font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.btn.pri:hover{background:linear-gradient(135deg,#000,#2a2a32)}
.btn.danger{background:var(--danger);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(210,64,95,.26)}
.btn.sm{height:34px;padding:0 13px;font-size:var(--fs-sm);border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);background:var(--surface);padding:0 8px}
.tab{padding:12px 16px;font-size:var(--fs-md);font-weight:500;color:var(--ink2);border-bottom:2px solid transparent;
  cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.tab .cnt{color:var(--ink3);font-size:var(--fs-xs);margin-left:6px}

input,select,textarea{height:40px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font:inherit;font-size:var(--fs-md);color:var(--ink);width:100%}
textarea{height:auto;min-height:60px;padding:10px 13px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-line);outline-offset:-1px;border-color:var(--accent)}
label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--ink2);margin-bottom:5px}
.field{flex:1;min-width:140px}
.formrow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
/* ---------- ฟอร์มเต็มหน้า (ไม่ได้อยู่ในป๊อปอัป) ----------
   .formrow เป็น flex ที่ยืดเต็มความกว้าง พอจออยู่ที่ 1440px ช่องจะกว้างเกินจนดูไม่สมดุล
   ฟอร์มในหน้าจึงใช้ .fgrid ที่เป็นกริดคอลัมน์เท่า ๆ กัน และคุมความกว้างรวมไว้ */
.formbox{max-width:1040px}
.fgrid{display:grid;gap:14px 16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:start}
.fgrid .field{min-width:0;max-width:none}
.fgrid .sp2{grid-column:span 2}
.fgrid .sp-all{grid-column:1/-1}
@media (max-width:620px){ .fgrid{grid-template-columns:minmax(0,1fr)} .fgrid .sp2{grid-column:auto} }
/* แถวตั้งหน่วยนับ — ทุกแถวมีคอลัมน์ตรงกัน อ่านง่ายกว่า flex ที่ความกว้างไม่เท่ากัน */
.urow{display:grid;grid-template-columns:minmax(0,1.1fr) 22px 110px minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:10px;align-items:end}
.urow .ueq{padding-bottom:10px;text-align:center;color:var(--ink3);font-weight:600}
.urow .utag{padding-bottom:9px;min-width:0}
.urow .btn{margin-bottom:0}
@media (max-width:860px){
  .urow{grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr) auto}
  .urow .ueq{display:none}
  .urow .utag{grid-column:1/-1;padding-bottom:0}
}

/* แถวราคาเฉพาะช่องทาง — ช่องติ๊ก / ช่องราคา / ป้ายกำไร เรียงเป็นคอลัมน์ตรงกันทุกแถว */
.prow-list{display:flex;flex-direction:column;gap:8px;max-width:780px}
.prow{display:grid;grid-template-columns:minmax(0,230px) 170px minmax(0,1fr);gap:12px;align-items:center}
.prow .chk{margin-bottom:0}
@media (max-width:760px){ .prow{grid-template-columns:minmax(0,1fr) 130px} .prow>span:last-child{grid-column:1/-1} }

/* แถบปุ่มท้ายฟอร์ม — มีเส้นคั่นให้รู้ว่าจบฟอร์มแล้ว */
.fact{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line2)}

/* หัวข้อย่อยในฟอร์มยาว — แบ่งเป็นช่วงให้อ่านง่ายเวลากรอก */
.fsec{font-size:var(--fs-sm);font-weight:700;color:var(--rail-ink);padding-top:12px;border-top:1px solid var(--line2)}
.fsec span{font-weight:500;color:var(--ink3);font-size:var(--fs-xs)}
/* แถวรายการในฟอร์มใบขอซื้อ — หนึ่งกล่องต่อหนึ่งรายการ */
.prline{border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin-bottom:10px;background:var(--line2)}
.prline .formrow{margin-bottom:8px}
.prline .formrow:last-child{margin-bottom:0}
.prline input{background:#fff}
.prhead{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:var(--fs-sm);color:var(--rail-ink)}
.prhead .btn{margin-left:auto}
.prtag{font-size:var(--fs-xs);font-weight:600;padding:2px 9px;border-radius:999px}
.prtag.ok{background:var(--ok-soft);color:var(--ok)}
.prtag.new{background:var(--warn-soft);color:#6b4a12}

/* ช่องติ๊กแบบปุ่มกดได้ทั้งแถว (เป้ากดใหญ่ สำหรับแท็บเล็ต) */
.chk{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;
  cursor:pointer;font-weight:500;font-size:var(--fs-sm)}
.chk input{width:18px;height:18px;flex:none}

.note{display:flex;gap:10px;padding:13px 16px;background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:12px;font-size:var(--fs-sm);color:#123f6d;line-height:1.55}
.note.warn{background:var(--warn-soft);border-color:var(--warn-line);color:#6b4a12}
.note svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;margin-top:1px}
.tbd{display:inline-block;font-size:var(--fs-xs);font-weight:600;color:#6b5a2a;background:#f3ecd9;
  border:1px dashed #cbb87e;border-radius:4px;padding:1px 7px}
.bar{height:9px;border-radius:999px;background:var(--line2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#16161a,#6b6b76)}

/* ---------- กล่องโต้ตอบ ---------- */
.scrim{position:fixed;inset:0;background:rgba(23,53,106,.38);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:#fff;border-radius:18px;width:min(560px,100%);max-height:88vh;overflow:auto;
  box-shadow:0 24px 60px rgba(23,53,106,.3)}
.modal .ch{position:sticky;top:0;background:#fff;z-index:1}
.modal .mbody{padding:16px;display:flex;flex-direction:column;gap:14px}
.modal .mfoot{padding:14px 18px;border-top:1px solid var(--line2);display:flex;gap:10px;justify-content:flex-end;
  position:sticky;bottom:0;background:#fff;z-index:1}
/* คลิกนอกกรอบแล้วสั่นเตือน แทนที่จะปิดหน้าต่างทิ้งข้อมูลที่กรอกไว้ */
.modal.shake{animation:popshake .3s}
@keyframes popshake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){ .modal.shake{animation:none;outline:2px solid var(--accent)} }

.toast{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toast div{background:var(--rail-ink);color:#fff;padding:12px 17px;border-radius:12px;font-size:var(--fs-md);font-weight:600;
  box-shadow:0 10px 28px rgba(23,53,106,.32);max-width:380px}
.toast div.bad{background:var(--danger)}
.toast div.ok{background:var(--ok)}

/* ---------- ขนาดตั้งต้นของไอคอน ----------
   ⚠️ ไอคอนทุกตัวเป็น <svg viewBox="0 0 20 20"> ที่ไม่ได้ตั้ง width/height ไว้ในแท็ก
      ถ้าที่ใดไม่มีกฎขนาด เบราว์เซอร์จะยืดเต็มความกว้างของกล่อง และ fill ค่าเริ่มต้นคือสีดำทึบ
      → เคยหลุดขึ้น prod เป็นวงกลมดำยักษ์กลางหน้าจอ (ไอคอนนาฬิกาในหัวช่วงของตารางใบนับ)
   กฎนี้มีความเจาะจงต่ำ (0,1,0) กฎเดิมอย่าง `.btn svg` (0,1,1) จึงยังเขียนทับได้เหมือนเดิม */
/* ปุ่มสลับโหมดในฟอร์ม (เช่น รับเข้า: จากใบสั่งซื้อ / รับเข้าเอง)
   ⚠️ ใช้ปุ่มสองใบที่เห็นพร้อมกัน ไม่ใช่ dropdown — คนใช้ต้องรู้ว่ามีอีกทางเลือกหนึ่งอยู่ */
.segbar{display:flex;gap:8px;margin-bottom:14px}
.seg{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 14px;
  font-family:inherit;font-size:var(--fs-md);font-weight:600;color:var(--ink2);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;transition:all .14s}
.seg:hover{border-color:var(--accent);color:var(--accent)}
.seg.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg svg{width:17px;height:17px}
@media (max-width:620px){ .segbar{flex-direction:column} }

/* แถบกรอง+ค้นหาเหนือตารางสรุปสินค้าคงเหลือ (เมนูจัดการสินค้า) */
.sumbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.sumbar .chips{flex-wrap:wrap}
.sumbar .tsearch{flex:1;min-width:190px;max-width:320px}
@media (max-width:620px){ .sumbar .tsearch{max-width:none} }

.ico{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

.empty{padding:46px 20px;text-align:center;color:var(--ink3)}
.empty .big{font-size:var(--fs-lg);font-weight:600;color:var(--ink2);margin-bottom:6px}

/* ---------- หน้าเฟส 2 (ล็อก) ---------- */
.locked-page{display:grid;place-items:center;flex:1;text-align:center;padding:40px}
.locked-page .box{max-width:520px}
.locked-page svg{width:46px;height:46px;stroke:var(--ink3);stroke-width:1.4;fill:none;margin-bottom:14px}
.locked-page h2{font-size:var(--fs-xl);margin:0 0 8px}
.locked-page p{color:var(--ink2);margin:0 0 6px;line-height:1.65}


/* ---------- หน้าหลัก: ปุ่มไอคอน (แนวเดียวกับ DP Dashboard) ---------- */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.htile{position:relative;display:block;width:100%;text-align:left;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;cursor:pointer;
  font-family:inherit;box-shadow:0 1px 3px rgba(16,21,26,.05);
  transition:transform .16s ease,border-color .16s,box-shadow .16s}
.htile:hover{transform:translateY(-3px);border-color:var(--tint,var(--accent));
  box-shadow:0 14px 28px rgba(16,21,26,.14)}
.htile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;color:#fff;
  background:linear-gradient(135deg,var(--tint,#14508c),var(--tint2,#3b7dc4))}
.hico svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hname{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.hdesc{margin-top:4px;font-size:var(--fs-xs);color:var(--ink3);line-height:1.5;min-height:38px}
.hbadge{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:var(--fs-xs);font-weight:700;
  padding:4px 10px;border-radius:20px;background:var(--accent-soft);color:var(--accent)}
.hbadge.warn{background:var(--warn-soft);color:var(--warn)}
.hbadge.bad{background:var(--danger-soft);color:var(--danger)}
.hbadge.ok{background:var(--ok-soft);color:var(--ok)}
.harrow{position:absolute;top:20px;right:18px;color:var(--ink3);opacity:0;transition:.16s}
.harrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.htile:hover .harrow{opacity:1;transform:translateX(2px)}
.htile.locked{cursor:not-allowed;background:#f5f7f8;border-style:dashed;box-shadow:none}
.htile.locked:hover{transform:none;border-color:var(--line);box-shadow:none}
.htile.locked .hico{background:#dfe4e8;color:#93a0aa}
.htile.locked .hname{color:var(--ink3)}
.htile.locked .harrow{display:none}
.hsection{display:flex;align-items:baseline;gap:12px;margin-top:4px}
.hsection h2{font-size:var(--fs-lg);font-weight:700;margin:0}
.hsection .sub{font-size:var(--fs-sm);color:var(--ink3)}

/* ---------- ปุ่มพับเมนู ---------- */
.navtoggle{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--line);
  border-radius:6px;background:#fff;color:var(--ink2);cursor:pointer;padding:0;transition:background .14s}
.navtoggle:hover{background:#f2f5f7;color:var(--ink)}
.navtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navtoggle svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}

/* ---------- เมนูแบบพับ (เหลือไอคอน) ---------- */
.app{transition:grid-template-columns .18s ease}
.app.narrow{grid-template-columns:62px 1fr}
.app.narrow .brand{padding:20px 0 16px;text-align:center}
.app.narrow .brand .bn{font-size:var(--fs-lg)}
.app.narrow .brand .bs,
.app.narrow .railfoot,
.app.narrow .navtitle,
.app.narrow .nav .tag,
.app.narrow .nav span{display:none}
.app.narrow .navgroup{padding:12px 8px 4px}
.app.narrow .nav{justify-content:center;padding:11px 0;border-left-width:0;border-radius:7px}
.app.narrow .nav.on{border-left-width:0;box-shadow:none}
.app.narrow .navgroup + .navgroup{border-top:1px solid var(--rail-line);margin-top:6px;padding-top:10px}


/* ---------- เมนูแบบหมวด (ไอคอนเฉพาะหัวหมวด) ---------- */
.ghead{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:9px;
  background:none;border:none;color:var(--rail-ink);font:inherit;font-size:var(--fs-md);font-weight:600;
  text-align:left;cursor:pointer}
.ghead:hover{background:var(--rail-2);color:var(--rail-hover)}
.ghead svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ghead .glabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghead .tag{font-size:var(--fs-2xs);font-weight:600;color:var(--rail-ink);background:var(--pink-soft);padding:2px 7px;border-radius:999px}
.gchev{width:15px!important;height:15px!important;opacity:.55;transition:transform .16s}
.ngroup.open .gchev{transform:rotate(180deg)}
.ghead.solo{font-weight:600}
.ghead.solo.on{background:var(--rail-on);color:#fff;box-shadow:none}

.gitems{display:none;flex-direction:column;gap:1px;padding:2px 0 8px 41px}
.ngroup.open .gitems{display:flex}
.nitem{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:7px;border:none;
  background:none;color:var(--rail-ink2);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.nitem:hover{background:var(--rail-2);color:var(--rail-hover)}
.nitem.on{background:var(--rail-2);color:var(--rail-on);font-weight:700;box-shadow:inset 3px 0 0 var(--rail-on)}
.nitem:disabled{color:#a3b0c4;cursor:not-allowed}
.nitem:disabled:hover{background:none;color:#a3b0c4}
.lockedgrp .ghead{color:var(--rail-ink2)}
.lockedgrp .ghead:hover{background:var(--rail-2);color:var(--rail-hover)}

/* พับแล้วเหลือเฉพาะไอคอนหัวหมวด */
.app.narrow .gitems{display:none!important}
.app.narrow .ghead{justify-content:center;padding:12px 0}
.app.narrow .ghead .glabel,
.app.narrow .ghead .tag,
.app.narrow .gchev{display:none}
.app.narrow .ghead.solo.on{box-shadow:none}


/* ---------- หน้าหลักชั้นแรก: การ์ดหมวดใหญ่ ---------- */
.hgrid.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.htile.big{padding:24px}
.hico.big{width:58px;height:58px;border-radius:15px}
.hico.big svg{width:30px;height:30px}
.htile.big .hname{font-size:var(--fs-xl)}
.htile.big .hdesc{min-height:42px}
.htile.soft{background:#f7f9fa;border-style:dashed}
.htile.soft .hico{background:#dfe4e8;color:#93a0aa}
.htile.soft .hname{color:var(--ink3)}
.htile.soft .harrow{display:none}
.htile.soft:hover{transform:none;border-color:var(--line);box-shadow:none;cursor:default}

/* ---------- กราฟแดชบอร์ดผู้บริหาร (สไตล์เดียวกับ JCC) ---------- */
.chart-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.chartcard{padding:16px 18px 18px}
.chartcard .cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.chartcard h3{margin:0;font-size:var(--fs-lg);font-weight:600}
.chartcard.full{grid-column:1/-1}

.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut-box{position:relative;width:140px;height:140px;flex:none}
.donut{width:140px;height:140px}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dc-num{font-family:var(--mono);font-size:var(--fs-xl);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.dc-lbl{font-size:var(--fs-xs);color:var(--ink3);margin-top:3px}
.legend{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm);min-width:0;flex:1}
.legend .lg{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.legend .lg b{margin-left:auto;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}

.bars{display:flex;align-items:flex-end;gap:10px;height:190px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bar-val{font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;color:var(--ink2);margin-bottom:5px}
.bar{width:100%;max-width:46px;border-radius:5px 5px 0 0;background:var(--accent);min-height:2px;transition:opacity .14s}
.bar:hover{opacity:.82}
.bar-lbl{font-size:var(--fs-2xs);color:var(--ink3);margin-top:7px;text-align:center;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.area-svg{width:100%;height:260px;display:block}
.area-x{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--fs-2xs);color:var(--ink3)}

/* ============================================================
   แผงปุ่มงานสไตล์ POS — ใช้กับสต๊อก / ข้อมูลหลัก / การผลิต
   ออกแบบให้กดด้วยนิ้วบนแท็บเล็ตได้สะดวก (เป้ากดใหญ่ ≥ 120px)
   ============================================================ */
.padsec{display:flex;align-items:baseline;gap:10px;margin:2px 0 -4px}
.padsec h2{font-size:var(--fs-lg);font-weight:600;margin:0}
.padsec .sub{font-size:var(--fs-sm);color:var(--ink3)}

.pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:14px}
.pad.lg{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.pad.sm{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
/* จำนวนคอลัมน์ตายตัว — ใช้เมื่ออยากให้แถวเต็มพอดี ไม่เหลือช่องว่างท้ายแถว
   (auto-fill คำนวณจากความกว้าง ทำให้แผงที่มี 2 ปุ่มเหลือที่ว่างครึ่งจอ) */
.pad.fix{grid-template-columns:repeat(var(--n,3),1fr)}
@media (max-width:1024px){ .pad.fix{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .pad.fix{grid-template-columns:1fr} }

.padbtn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  min-height:132px;padding:16px;width:100%;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 2px rgba(16,21,26,.05);transition:transform .1s,box-shadow .14s,border-color .14s}
.padbtn:hover{border-color:var(--tint,var(--accent));box-shadow:0 6px 18px rgba(16,21,26,.1);transform:translateY(-2px)}
.padbtn:active{transform:translateY(0) scale(.988);box-shadow:0 1px 2px rgba(16,21,26,.05)}
.padbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.padbtn .pico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--tint,#14508c),var(--tint2,#3b7dc4));color:#fff}
.padbtn .pico svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.padbtn .pname{font-size:var(--fs-lg);font-weight:600;line-height:1.3}
.padbtn .pdesc{font-size:var(--fs-xs);color:var(--ink3);line-height:1.45}
.padbtn .pbadge{position:absolute;top:13px;right:13px;font-size:var(--fs-2xs);font-weight:600;padding:3px 9px;
  border-radius:999px;background:#eef1f3;color:var(--ink3)}
.padbtn .pbadge.ok{background:var(--ok-soft);color:var(--ok)}
.padbtn .pbadge.warn{background:var(--warn-soft);color:var(--warn)}
.padbtn .pbadge.bad{background:var(--danger-soft);color:var(--danger)}

/* ปุ่มงานหลัก — สีเต็มใบ ให้สะดุดตาบนแท็บเล็ต */
.padbtn.solid{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--tint,#14508c),var(--tint2,#3b7dc4))}
.padbtn.solid .pico{background:rgba(255,255,255,.18)}
.padbtn.solid .pdesc{color:rgba(255,255,255,.82)}
.padbtn.solid .pbadge{background:rgba(255,255,255,.2);color:#fff}
.padbtn.solid:hover{box-shadow:0 8px 22px rgba(16,21,26,.22)}

/* ปุ่มที่ยังไม่เปิดใช้งาน */
.padbtn.off{background:#f5f7f8;border-style:dashed;cursor:not-allowed;box-shadow:none}
.padbtn.off:hover{transform:none;border-color:var(--line);box-shadow:none}
.padbtn.off .pico{background:#dfe4e8;color:#93a0aa}
.padbtn.off .pname{color:var(--ink3)}

/* ปุ่มเลือกสถานี — เล็กและแน่นกว่า */
.padbtn.stn{min-height:96px;gap:7px;padding:14px}
.padbtn.stn .pico{width:38px;height:38px;border-radius:10px}
.padbtn.stn .pico svg{width:20px;height:20px}
.padbtn.stn .pname{font-size:var(--fs-md)}
.padbtn.stn.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-line) inset}

/* แถบชี้แจงเฟส 2 */
.phase2bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;
  background:var(--warn-soft);border:1px solid var(--warn-line);color:#6b4a12;font-size:var(--fs-sm);line-height:1.5}
.phase2bar svg{width:22px;height:22px;flex:none;stroke:#8f5d00;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.phase2bar b{color:#5a3e0f}

/* ---------- ปรับให้กดด้วยนิ้วได้สะดวก (แท็บเล็ต / จอสัมผัส) ---------- */
@media (pointer:coarse){
  .btn{height:46px;padding:0 18px;font-size:var(--fs-lg)}
  .btn.sm{height:38px;padding:0 14px;font-size:var(--fs-md)}
  .tab{padding:15px 18px;font-size:var(--fs-lg)}
  .nitem{padding-top:12px;padding-bottom:12px}
  input,select,textarea{min-height:46px;font-size:16px}
  table td{height:54px}
}
@media (max-width:1024px){
  .pad{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .pad.lg{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .body{padding:16px 18px 22px}
}
@media (max-width:720px){
  .pad,.pad.lg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pad.sm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .padbtn{min-height:116px;padding:13px}
}

/* ---------- หน้าบันทึกหน้างาน (แท็บเล็ต) ---------- */
.stnwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:980px){.stnwrap{grid-template-columns:minmax(0,1fr)}}

.bigval{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:10px;
  padding:0 16px;height:74px;background:#fff;cursor:pointer;width:100%;font-family:inherit;text-align:left}
.bigval .bl{font-size:var(--fs-xs);color:var(--ink3);font-weight:600;letter-spacing:.04em}
.bigval .bv{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.bigval .bu{font-size:var(--fs-lg);color:var(--ink2)}
.bigval.on{border-color:var(--accent);background:#fbfdff;box-shadow:0 0 0 3px var(--accent-soft)}
.bigval.lock{background:#f7f9fa;cursor:default}

.kpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpad button{height:62px;font-size:22px;font-weight:600;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-family:var(--mono);cursor:pointer;color:var(--ink)}
.kpad button:hover{background:#f7f9fa}
.kpad button:active{background:var(--accent-soft);transform:scale(.97)}
.kpad button.fn{font-family:inherit;font-size:var(--fs-lg);font-weight:600;color:var(--ink2)}
.kpad button.ok{grid-column:span 3;background:var(--accent);border-color:var(--accent);color:#fff;
  font-family:inherit;font-size:var(--fs-lg)}

.steps{display:flex;gap:8px;flex-wrap:wrap}
.stp{flex:1;min-width:150px;display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:7px;
  background:#fff;border:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink2)}
.stp b{width:22px;height:22px;border-radius:50%;background:#eef1f3;color:var(--ink2);display:grid;
  place-items:center;font-size:var(--fs-xs);flex:none}
.stp.done{background:var(--ok-soft);border-color:var(--ok-line);color:#12563a}
.stp.done b{background:var(--ok);color:#fff}
.stp.now{background:var(--accent-soft);border-color:var(--accent-line);color:#0f3b66;font-weight:600}
.stp.now b{background:var(--accent);color:#fff}

.lrow{display:flex;align-items:center;gap:14px;padding:0 16px;height:62px;border-bottom:1px solid var(--line2)}
.lrow:last-child{border-bottom:none}
.lrow .nm{font-size:var(--fs-lg);font-weight:500}
.lrow button.lin{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:8px;
  padding:0 14px;height:46px;background:#fff;margin-left:auto;min-width:148px;justify-content:flex-end;
  cursor:pointer;font-family:inherit}
.lrow button.lin.on{border-color:var(--accent);background:#fbfdff;box-shadow:0 0 0 3px var(--accent-soft)}
.lrow .lin .v{font-family:var(--mono);font-size:var(--fs-xl);font-weight:600}
.lrow .lin .u{font-size:var(--fs-sm);color:var(--ink3)}

.balbar{display:flex;gap:14px;padding:14px 18px;border-radius:9px;align-items:center;
  background:var(--ok-soft);border:1px solid var(--ok-line)}
.balbar.bad{background:var(--danger-soft);border-color:var(--danger-line)}
.balbar svg{width:26px;height:26px;flex:none;stroke:var(--ok);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.balbar.bad svg{stroke:var(--danger)}
.bigbtn{height:64px;border-radius:10px;font-size:var(--fs-xl);font-weight:700;justify-content:center}

/* ============================================================
   โหมดแอปบนหน้าจอโฮม (บันทึกจาก Safari บน iPad / iPhone)
   ============================================================ */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.app{height:100dvh}
.body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* กดปุ่มแล้วตอบสนองทันที ไม่ต้องรอ double-tap และไม่ขึ้นเมนูคัดลอกเวลากดค้าง */
button,.btn,.padbtn,.htile,.tab,.nitem,.ghead,.bigval,.kpad button,.lrow .lin,.navtoggle{
  touch-action:manipulation;-webkit-touch-callout:none}
.padbtn,.htile,.kpad button,.bigval,.lrow .lin,.nitem,.ghead{
  -webkit-user-select:none;user-select:none}

/* เว้นขอบจอโค้งและแถบโฮมของ iPad */
@supports (padding:env(safe-area-inset-bottom)){
  .body{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  .rail{padding-bottom:env(safe-area-inset-bottom)}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* ============================================================
   จอแคบ (iPad แนวตั้ง / มือถือ) — เมนูเป็น "ลิ้นชัก" เลื่อนออกมาทับ
   ไม่ใช่แถบยาวบนหัวหน้าจอที่ดันเนื้อหาลงไป
   ============================================================ */
.navscrim{display:none}

@media (max-width:1024px){
  .app,.app.narrow{grid-template-columns:1fr;height:100dvh}

  .rail,.app.narrow .rail{
    display:flex;position:fixed;top:0;left:0;bottom:0;width:286px;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:8px 0 32px rgba(18,35,58,.22)}
  .app.navopen .rail{transform:none}

  /* ในลิ้นชักให้แสดงชื่อเต็มเสมอ ไม่ใช้โหมดพับแบบเดสก์ท็อป */
  .app.narrow .rail .glabel,
  .app.narrow .rail .tag,
  .app.narrow .rail .gchev,
  .app.narrow .rail .brand .bs,
  .app.narrow .rail .nav span{display:initial}
  .app.narrow .navgroup{display:block;padding:12px 10px 4px}
  .app.narrow .ghead{justify-content:flex-start;padding:12px}
  .app.narrow .nav{justify-content:flex-start;padding:10px 12px;border-left-width:3px;border-radius:5px}
  .app.narrow .brand{text-align:left;padding:20px 18px 16px}
  .app.narrow .gitems{display:none!important}
  .app.narrow .ngroup.open .gitems{display:flex!important}
  .app.narrow .navgroup + .navgroup{border-top:none;margin-top:0;padding-top:0}

  .navscrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(8,12,16,.45);
    opacity:0;pointer-events:none;transition:opacity .22s;border:none;padding:0}
  .app.navopen .navscrim{opacity:1;pointer-events:auto}

  /* เป้ากดใหญ่ขึ้นในลิ้นชัก */
  .ghead{padding:12px}
  .nitem{padding:11px 12px;font-size:var(--fs-md)}
  .body{padding:16px 16px 22px}
  @supports (padding:env(safe-area-inset-bottom)){
    .body{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  }
}

/* ⚠️ เหตุผลเดียวกับแอปไลน์ — ลูกของ .body ต้องไม่ถูกบีบจนเนื้อหาโดนตัด */
.body > *:not(.locked-page){flex:none}

/* ============================================================
   แดชบอร์ดภาพรวม Snackies — ธีมฟ้า/ขาว/ชมพู
   ============================================================ */
.dsec{display:flex;align-items:center;gap:10px;margin:6px 0 -6px}
.dsec .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--accent-soft);color:var(--accent)}
.dsec .ic svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dsec h2{margin:0;font-size:var(--fs-xl);font-weight:700;color:var(--accent);letter-spacing:-.01em}
.dsec.pink .ic{background:var(--pink-soft);color:var(--pink)}
.dsec.pink h2{color:var(--pink)}
.dsec .sub{font-size:var(--fs-sm);color:var(--ink3);margin-left:2px}
.dsec .right{margin-left:auto;display:flex;align-items:center;gap:8px}

.card{border-radius:12px}
.tile{border-radius:12px}
.tile.pink{background:linear-gradient(140deg,#fef2f7,var(--pink-soft));border-color:var(--pink-line)}
.tile.pink .vl{color:var(--pink)}
.tile.blue{background:linear-gradient(140deg,#f2f9ff,var(--accent-soft));border-color:var(--accent-line)}
.tile.blue .vl{color:var(--accent)}

/* แถบความคืบหน้าเป้าหมาย พร้อมหมุดไตรมาส */
.goal{padding:18px 20px}
.goal .gtop{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.goal .gnum{font-family:var(--mono);font-size:38px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--accent)}
.goal .gof{font-size:var(--fs-lg);color:var(--ink2);margin-bottom:4px}
.goal .gpill{margin-left:auto}
.gbar{position:relative;height:14px;border-radius:8px;background:var(--line2);overflow:visible}
.gbar > i{display:block;height:14px;border-radius:8px;background:linear-gradient(90deg,#16161a,#6b6b76)}
.gbar .mk{position:absolute;top:-6px;width:2px;height:26px;background:var(--pink);border-radius:1px}
.gbar .mk span{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:var(--fs-2xs);
  color:var(--pink);font-weight:700;white-space:nowrap}
.gaxis{display:flex;justify-content:space-between;margin-top:30px;font-size:var(--fs-xs);color:var(--ink3)}

/* โดนัท */
.donut-box{position:relative;width:150px;height:150px;flex:none}
.donut{width:150px;height:150px;transform:rotate(-90deg)}
.donut circle{transition:opacity .15s}
.donut-wrap.dim circle:not(.hot){opacity:.32}
.lg2{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0;font-size:var(--fs-sm)}
.lg2 .r{display:flex;align-items:center;gap:9px;color:var(--ink2);cursor:default;padding:3px 6px;border-radius:6px}
.lg2 .r:hover{background:var(--bg)}
.lg2 .sw{width:11px;height:11px;border-radius:3px;flex:none}
.lg2 .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg2 .vv{margin-left:auto;font-family:var(--mono);font-weight:700;color:var(--ink);white-space:nowrap}
.lg2 .pc{width:44px;text-align:right;color:var(--ink3);font-family:var(--mono)}

/* แผนที่ชุมชนเกษตรกร */
.mapgrid{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:18px;align-items:start}
.thmap{width:100%;max-width:230px;display:block}
/* หมุดต้องเด่นกว่าแผนที่เสมอ — เงาขาวรอบหมุดช่วยให้อ่านออกแม้ทับภาคสีเข้ม */
.thmap .dot circle{filter:drop-shadow(0 1px 2px rgba(2,52,191,.35))}
.thmap .dot{cursor:pointer}
.thmap .dot circle{stroke:#fff;stroke-width:2}
.thmap .dot.done circle{fill:var(--pink)}
.thmap .dot.plan circle{fill:#fff;stroke:var(--accent);stroke-width:2}
.thmap .dot:hover circle{r:8}
.cmlist{display:flex;flex-direction:column;gap:2px}
/* แถวรายชื่อชุมชน — ชื่อยาวต้องหดได้ ไม่งั้นข้อความท้ายแถวดันล้นขอบจอบนมือถือ */
.cmrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:var(--fs-sm);
  flex-wrap:wrap;min-width:0}
.cmrow:hover{background:var(--bg)}
.cmrow .d{width:10px;height:10px;border-radius:50%;flex:none}
.cmrow>span:not(.d):not(.p){min-width:0;overflow-wrap:anywhere}
.cmrow .p{margin-left:auto;font-size:var(--fs-xs);color:var(--ink3);text-align:right;min-width:0;overflow-wrap:anywhere}

/* ตัวสลับช่วงเวลา */
.seg{display:inline-flex;background:var(--line2);border-radius:12px;padding:4px;gap:2px}
.seg button{border:none;background:none;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink2);
  padding:7px 14px;border-radius:7px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(23,53,106,.16)}

/* แถวที่กดเข้าไปดูรายละเอียดได้ */
.rowlink{cursor:pointer}
.rowlink:hover td{background:var(--accent-soft)}
.rowgo{display:inline-flex;color:var(--ink3)}
.rowgo svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- แถบเครื่องมือในตาราง: จัดกลุ่มปุ่มตามหน้าที่ ---------- */
.toolbar{display:flex;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:flex-end}
.tgrp{display:flex;gap:7px;align-items:center;flex-wrap:wrap;position:relative;padding-top:15px}
.tgl{position:absolute;top:0;left:2px;font-size:var(--fs-2xs);font-weight:700;color:var(--ink3);letter-spacing:.02em}
.tgrp + .tgrp{padding-left:14px;border-left:1px solid var(--line)}
.tsearch{margin-left:auto;width:min(280px,100%);height:38px}
@media (max-width:760px){ .tsearch{margin-left:0} .tgrp + .tgrp{padding-left:0;border-left:0} }

/* ชิปกรองสถานะล็อต */
.chips{display:flex;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink2);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.chip:hover{background:var(--accent-soft)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip .cnt{font-size:var(--fs-xs);font-weight:700;padding:1px 7px;border-radius:999px;background:var(--line2);color:var(--ink2)}
.chip.on .cnt{background:rgba(255,255,255,.26);color:#fff}

/* ---------- หน้าจุดสั่งซื้อ: แถบระดับคงเหลือเทียบจุดสั่งซื้อ ---------- */
.rbar{padding:9px 0;border-bottom:1px solid var(--line2)}
.rbar:last-of-type{border-bottom:none}
.rbar-h{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.rbar-nm{flex:1;min-width:0;font-weight:500;font-size:var(--fs-sm);overflow-wrap:anywhere}
/* แถบมีหมุดบอกจุดต่ำสุด/สูงสุด จึงอ่านได้ว่า "ขาดอีกเท่าไร" ไม่ใช่แค่ยาว-สั้น */
.rbar-t{position:relative;height:12px;border-radius:999px;background:var(--line2);overflow:visible}
.rbar-t i{display:block;height:100%;border-radius:999px;transition:width .3s}
.rbar-t b{position:absolute;top:-3px;width:2px;height:18px;border-radius:2px;transform:translateX(-1px)}
.rbar-t .mk-min{background:var(--danger)}
.rbar-t .mk-max{background:var(--accent-line)}
.rbar-f{font-size:var(--fs-xs);margin-top:5px;line-height:1.45}
.rlegend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line2);font-size:var(--fs-xs);color:var(--ink3)}
.rlegend span{display:inline-flex;align-items:center;gap:6px}
.rlegend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.rlegend .lg-min{width:2px;height:13px;border-radius:2px;background:var(--danger)}
.rlegend .lg-max{width:2px;height:13px;border-radius:2px;background:var(--accent-line)}

/* แถบจัดกลุ่มตาม lead time */
.lbar{display:flex;align-items:center;gap:10px;padding:7px 0}
.lbar-nm{width:92px;flex:none;font-size:var(--fs-sm);color:var(--ink2)}
.lbar-t{flex:1;min-width:0;height:10px;border-radius:999px;background:var(--line2);overflow:hidden}
.lbar-t i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.lbar-v{width:72px;flex:none;text-align:right;font-size:var(--fs-xs);font-weight:600;color:var(--ink2)}
@media (max-width:620px){ .lbar-nm{width:78px} .lbar-v{width:62px} }

/* ตารางแทนกราฟ (เข้าถึงได้) */
.tblview{margin-top:12px;border-top:1px solid var(--line2);padding-top:10px}
.tblview table{width:100%;font-size:var(--fs-sm)}
.tblview td{padding:5px 0}
.tblview td:last-child{text-align:right;font-family:var(--mono);font-weight:600}

/* ทูลทิปกราฟ */
.vtip{position:fixed;z-index:70;pointer-events:none;background:var(--ink);color:#fff;font-size:var(--fs-xs);
  padding:7px 11px;border-radius:7px;box-shadow:0 6px 18px rgba(18,35,58,.28);white-space:nowrap}
.vtip b{font-family:var(--mono)}

/* ---------- หน้าธีม & ตัวอักษร ---------- */
.fontgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pick{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);
  cursor:pointer;font-family:inherit;color:var(--ink);min-width:0;transition:border-color .12s,background .12s}
.pick:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.pick.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.pick .pk-name{font-weight:600;font-size:var(--fs-md)}
.pick .pk-sample{font-size:var(--fs-lg);color:var(--ink2);line-height:1.45;overflow-wrap:break-word;max-width:100%}
.pick .pk-note{font-size:var(--fs-xs);color:var(--ink3);overflow-wrap:break-word;max-width:100%}
.pick .pk-sw{display:flex;gap:4px}
.pick .pk-sw i{width:26px;height:16px;border-radius:4px;display:block;border:1px solid rgba(0,0,0,.08)}

/* ขนาดตัวอักษร "ใหญ่ขึ้น" (5%) — ขยายทั้งกล่องเนื้อหา ตัวอักษร ปุ่ม และตารางจึงโตพร้อมกัน
   ไม่ขยายแถบเมนูซ้ายกับแถบหัว เพราะความกว้างถูกล็อกไว้ที่โครงหน้า
   ⚠️ มีผลเฉพาะจอกว้าง ≥ 820px (คอม/แท็บเล็ตแนวตั้งขึ้นไป) — วัดแล้วถ้าขยายบนจอมือถือ
      ตารางและแท็บจะล้นจนต้องเลื่อนด้านข้าง ซึ่งเป็นสิ่งที่ลูกค้าไม่ต้องการ */
@media (min-width:820px){ body.big-type .body{zoom:1.05} }

/* ---------- ฉากมาสคอตบนหน้าเมนูหลัก ----------
   ใช้ภาพมาสคอตชุดเดียว แต่ให้แต่ละหมวดไม่ซ้ำแบบกัน ด้วย 4 อย่างรวมกัน:
   ตัวเต็ม/เฉพาะหัว · กลับด้านซ้าย-ขวา · ของที่ลอยอยู่ข้างตัว · จังหวะการขยับ
   ⚠️ การกลับด้านต้องทำที่ .ms-flip (ชั้นนอก) ไม่ใช่ที่รูป เพราะรูปใช้ transform
      ทำแอนิเมชันอยู่แล้ว ถ้าใส่ทับกันอันใดอันหนึ่งจะหาย */
.mscene{display:flex;align-items:center;gap:14px;padding:12px 18px;margin-bottom:14px;overflow:hidden;
  background:linear-gradient(118deg,var(--accent-soft),var(--surface) 62%);
  border:1px solid var(--line);border-radius:14px}
.mscene.rev{flex-direction:row-reverse;
  background:linear-gradient(242deg,var(--accent-soft),var(--surface) 62%)}
.ms-fig{position:relative;flex:none;line-height:0;align-self:flex-end;z-index:1}
/* ท่า "โผล่เฉพาะหัว" — ดันให้รอยตัดอยู่ใต้ขอบกรอบ จะได้ดูเหมือนโผล่ขึ้นมาทัก ไม่ใช่ภาพถูกตัด */
.ms-fig.head{margin-bottom:-18px}
.ms-fig .masc{width:var(--mw,84px);transform-origin:bottom center;will-change:transform}
.ms-flip{display:block;line-height:0;transform:scaleX(-1)}
/* ของประจำหมวดลอยอยู่ "ด้านนอก" ข้างตัว — ไม่ทับหมวก และไม่ไปซ้อนกับกรอบคำพูด */
.ms-prop{position:absolute;top:36%;left:-8px;z-index:1;width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--accent-line);display:grid;place-items:center;
  box-shadow:var(--shadow);color:var(--accent);will-change:transform}
.mscene.rev .ms-prop{left:auto;right:-8px}
.ms-prop svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ms-bubble{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:10px 15px;min-width:0;box-shadow:var(--shadow)}
.ms-bubble b{display:block;font-size:var(--fs-lg);margin-bottom:2px}
.ms-bubble span{display:block;font-size:var(--fs-sm);color:var(--ink2);line-height:1.5}
.ms-bubble:after{content:"";position:absolute;left:-6px;top:24px;width:11px;height:11px;
  background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg)}
.mscene.rev .ms-bubble:after{left:auto;right:-6px;
  border:0;border-right:1px solid var(--line);border-top:1px solid var(--line)}
@media (max-width:620px){
  .mscene{gap:10px;padding:10px 12px}
  .ms-fig .masc{width:calc(var(--mw,84px) * .72)}
  .ms-prop{width:30px;height:30px;left:-5px}
  .ms-prop svg{width:16px;height:16px}
}

/* จังหวะขยับ — คนละแบบคนละความเร็ว จะได้ไม่ขยับพร้อมกันจนดูรก */
@keyframes m-bob   {0%,100%{transform:translateY(0)}            50%{transform:translateY(-7px)}}
@keyframes m-sway  {0%,100%{transform:rotate(-3.5deg)}          50%{transform:rotate(3.5deg)}}
@keyframes m-wiggle{0%,100%{transform:scale(1,1)}  38%{transform:scale(1.05,.95)}  70%{transform:scale(.975,1.03)}}
@keyframes m-nod   {0%,100%{transform:translateY(0) rotate(0)}  28%{transform:translateY(-3px) rotate(-5deg)}  62%{transform:translateY(0) rotate(4deg)}}
@keyframes m-jump  {0%,58%,100%{transform:translateY(0)}  72%{transform:translateY(-13px)}  86%{transform:translateY(-3px)}}
@keyframes m-float {0%,100%{transform:translateY(0) rotate(-1.5deg)}  50%{transform:translateY(-5px) rotate(1.5deg)}}
@keyframes m-peek  {0%,100%{transform:translateY(7px) rotate(-2deg)}  50%{transform:translateY(-2px) rotate(2deg)}}
@keyframes m-prop  {0%,100%{transform:translateY(0) rotate(-7deg)}    50%{transform:translateY(-7px) rotate(7deg)}}
.a-bob   {animation:m-bob    2.6s ease-in-out infinite}
.a-sway  {animation:m-sway   3.2s ease-in-out infinite}
.a-wiggle{animation:m-wiggle 2.9s ease-in-out infinite}
.a-nod   {animation:m-nod    3.6s ease-in-out infinite}
.a-jump  {animation:m-jump   2.4s ease-in-out infinite}
.a-float {animation:m-float  4.2s ease-in-out infinite}
.a-peek  {animation:m-peek   3.0s ease-in-out infinite}
.ms-prop {animation:m-prop   3.8s ease-in-out infinite}
/* ⚠️ ต้องเคารพการตั้งค่า "ลดการเคลื่อนไหว" ของเครื่อง — บางคนเวียนหัวกับภาพขยับ */
@media (prefers-reduced-motion:reduce){
  .ms-fig .masc, .ms-prop, .topmasc img{animation:none!important}
}
/* ปิดมาสคอตจากหน้าธีมแล้ว กรอบฉากต้องหายไปด้วย ไม่ใช่เหลือกล่องเปล่า */
body.no-masc .mscene,
body.no-masc .topmasc{display:none!important}

/* ---------- หน้ารายการขายทั้งหมด ---------- */
/* กราฟแท่งรายวัน — จำนวนวันไม่แน่นอน (7-90 วัน) จึงให้แท่งยืดเองตามพื้นที่
   ไม่ใช้ความกว้างตายตัว ไม่งั้นช่วง 90 วันจะล้นออกนอกจอ */
.daybars{display:flex;align-items:flex-end;gap:2px;height:178px}
.daybars i{flex:1;min-width:2px;max-width:46px;background:var(--s1);border-radius:3px 3px 0 0;display:block}
/* ช่วงที่มีไม่กี่วัน แท่งจะอ้วนเกินไป จึงจำกัดความกว้างแล้วจัดกลางแทน */
.daybars{justify-content:center}
.daybars i:hover{background:var(--brand-deep)}
.dayax{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:var(--fs-xs);color:var(--ink3)}

/* แถบสินค้าขายดี — ชื่อยาวได้ไม่จำกัด จึงวางยอดเงินคนละบรรทัดกับแถบ */
.ibar{padding:8px 0;border-bottom:1px solid var(--line2)}
.ibar:last-child{border-bottom:none}
.ibar-h{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.ibar-nm{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:500;overflow-wrap:anywhere}
.ibar-v{flex:none;font-weight:600}
.ibar-t{height:9px;border-radius:999px;background:var(--line2);overflow:hidden}
.ibar-t i{display:block;height:100%;border-radius:999px;background:var(--s1)}

/* แถบแบ่งหน้า */
.pgbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line)}
.pgbar .mut{flex:1;min-width:0;text-align:center}
@media (max-width:620px){ .pgbar .mut{order:-1;flex-basis:100%} }

/* จุดสีประจำช่องทางขาย — ใช้ในตารางและชิปกรอง อ่านง่ายกว่าป้ายสีเต็มใบเวลามีหลายสิบแถว
   ⚠️ สีอย่างเดียวบอกความหมายไม่ได้ จึงมีชื่อช่องทางเป็นตัวหนังสือกำกับเสมอ */
.chdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);
  margin-right:7px;vertical-align:baseline;flex:none}
.tgrp.nowrap{flex-wrap:nowrap}
.dinp{height:34px;width:150px;min-width:0}
@media (max-width:620px){ .tgrp.nowrap{flex-wrap:wrap} .dinp{width:100%} }

/* ป้ายช่องทางขาย = เครื่องหมายแพลตฟอร์ม + ชื่อ
   ⚠️ เครื่องหมายอย่างเดียวบอกความหมายไม่ได้ ชื่อช่องทางต้องมีเสมอ (คนตาบอดสี/โปรแกรมอ่านจอ) */
.plat{display:inline-flex;align-items:center;gap:8px;min-width:0}
.plat-m{width:var(--s,20px);height:var(--s,20px);flex:none;line-height:0;display:block}
/* มุมโค้งคุมที่ CSS ให้เท่ากันทุกช่องทาง ทั้งที่เป็นไฟล์รูปและที่วาดเป็น SVG */
.plat-m img{width:100%;height:100%;display:block;border-radius:24%;object-fit:cover}
.plat-m svg{width:100%;height:100%;display:block}
.chip .plat{gap:7px}

/* ---------- สัดส่วนตามช่องทาง (หน้าวิเคราะห์การขาย) ----------
   แถบสัดส่วนยังใช้ "สี" เป็นตัวแยกช่องทาง ส่วนรายการด้านล่างแสดงเป็นโลโก้
   จึงต้องมีขีดสีเล็ก ๆ นำหน้าแต่ละบรรทัด เพื่อโยงว่าโลโก้นี้คือแถบสีไหน */
.chbar{display:flex;gap:2px;height:30px;border-radius:5px;overflow:hidden}
.chbar i{display:block;min-width:3px}
.chleg{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.chleg-r{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);min-width:0}
.chleg-r .plat{min-width:0}
.chkey{width:4px;height:18px;border-radius:999px;background:var(--c);flex:none}

/* ---------- แถบเครื่องมือของหน้าสั่งซื้อ (เมนู สั่งซื้อ) ---------- */
/* ⚠️ ห้ามฝัง grid-template-columns ใน app.js — คุมความกว้างที่นี่ให้ media query ทับได้ */
.pbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.pbar .pu-q{flex:1;min-width:190px;max-width:420px}
/* แถบสรุป "เลือกไว้กี่รายการ" ลอยล่างจอ — ติ๊กของที่อยู่ท้ายตารางยาว ๆ แล้วยังกดปุ่มได้
   ⚠️ ต้องเผื่อ safe-area ของ iPad ไม่งั้นปุ่มไปอยู่ใต้แถบ home ของ iOS */
.selbar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  margin-top:12px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.selbar>span{font-weight:600}
@media (max-width:620px){
  .pbar .pu-q{max-width:none}
  .selbar>span{width:100%}
}

/* ---------- ตารางที่ติ๊กเลือกได้ (หน้ารออนุมัติ · คิวจัดซื้อ) ---------- */
/* ⚠️ ช่องติ๊กต้องตั้งขนาดเอง ไม่งั้นกฎ input{min-height:46px} ของโหมดสัมผัส
   จะทำให้มันกลายเป็นสี่เหลี่ยมว่างใหญ่เท่าปุ่ม ดูเหมือนช่องกรอกที่เสีย */
.ptable input.pick{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--accent);cursor:pointer}
.ptable .pickcell{width:46px;padding-right:0}
.ptable .actcell{width:1%;white-space:nowrap;text-align:right}
/* ⚠️ "ในคลัง" ชิดขวา + "ต้องการรับ" ชิดซ้าย ทำให้ตัวเลขสองกลุ่มอ่านปนกัน — เว้นระยะคั่นไว้ */
.ptable .needcell{padding-left:22px}
/* กดตรงไหนของแถวก็ติ๊กได้ — เล็งช่องติ๊กเล็ก ๆ บนแท็บเล็ตยาก */
.ptable tbody tr.pickrow{cursor:pointer}
.ptable tbody tr.pickrow:hover{background:var(--line2)}
.ptable tbody tr.pickrow.on{background:var(--accent-soft)}
.ptable tbody tr.pickrow.on td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* ปุ่ม "ตัวเลือก" ของแต่ละแถว — ปุ่มเดียวต่อแถว แทนปุ่มรอง 3 ปุ่มเรียงกัน
   ⚠️ ปุ่มรองตัวยาวเคยเด่นกว่างานหลัก (ติ๊กหลายรายการ) จนคนใช้งง */
.btn.icon{gap:7px}
.btn.icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.btn.icon .cdot{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;
  place-items:center;font-size:var(--fs-2xs);font-weight:700;background:var(--accent);color:#fff}

/* ป้าย "ของซ้ำ" — ชิปเล็ก ไม่ใช่กล่องเตือนเต็มความกว้างที่ดันแถวให้สูงเป็นสองเท่า */
.dupchip{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:2px 9px;border-radius:999px;
  background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);
  font-size:var(--fs-xs);font-weight:600;line-height:1.7}
.dupchip svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;flex:none}

/* รายการตัวเลือกในป๊อปอัป — ปุ่มเต็มความกว้าง กดง่ายบนแท็บเล็ต */
.menulist{display:flex;flex-direction:column;gap:8px}
.mitem{display:flex;align-items:flex-start;gap:11px;width:100%;padding:12px 14px;text-align:left;
  font-family:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:11px;cursor:pointer;transition:border-color .14s,background .14s}
.mitem:hover{border-color:var(--accent);background:var(--accent-soft)}
.mitem:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mitem svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.mitem span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mitem b{font-size:var(--fs-md);font-weight:600}
.mitem i{font-size:var(--fs-xs);font-style:normal;color:var(--ink3);line-height:1.45}
.mitem.pri{border-color:var(--accent);background:var(--accent-soft)}
.mitem.pri b{color:var(--accent)}
@media (pointer:coarse){
  .ptable input.pick{width:24px;height:24px}
  .ptable .pickcell{width:54px}
  .mitem{padding:14px 16px}
}

/* ---------- งานคลังหลายคลัง (sql/21) ---------- */
/* การ์ดคลังที่กำลังเลือกอยู่ — ต้องเห็นชัดว่าตารางตำแหน่งข้างล่างเป็นของคลังไหน */
.padbtn.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft) inset}
.padbtn.off-soft{opacity:.55}
/* แถวที่ปิดใช้งาน — จางลงแต่ยังอ่านออก ไม่ใช่ซ่อน เพราะของเก่ายังอ้างถึงอยู่ */
.ptable tbody tr.dim td{opacity:.6}
/* ปุ่มสั้น ๆ สองสามปุ่มในช่องเดียว — เรียงแนวนอนแล้วค่อยตกบรรทัดเมื่อแคบ
   ⚠️ ต่างจาก .tcell-act ที่บังคับซ้อนแนวตั้ง ซึ่งเหมาะกับปุ่มชื่อยาวเท่านั้น */
/* ⚠️ nowrap โดยตั้งใจ — ช่องปุ่มเป็น width:1% (กว้างเท่าเนื้อหา) ถ้าปล่อยให้ wrap
   เบราว์เซอร์จะบีบช่องจนปุ่มซ้อนกันแนวตั้งทั้งที่ยังมีที่ว่างเหลืออีกครึ่งจอ */
.btnrow{display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-end}
@media (max-width:620px){ .btnrow{flex-wrap:wrap;justify-content:flex-start} }

/* ---------- ฟอร์มการนับสต๊อกประจำวัน ---------- */
/* ⚠️ ลูกค้าบอกว่าแบบการ์ด POS ไม่ตอบโจทย์ — ของจริงคือ "ฟอร์มนับรายวัน" ที่เดินไล่ชั้นแล้วกรอกทีละแถว
   จึงทำเป็นตารางที่หน้าตาเหมือนกระดาษ มีหัวฟอร์ม ช่องลงชื่อ และพิมพ์ออกมาใช้ได้ */
.cntprog{display:flex;flex-direction:column;gap:6px;flex:0 0 206px;max-width:206px;
  padding:8px 12px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.cntprog .bar{height:8px;background:var(--line2)}
.cntprog span{font-size:var(--fs-xs);font-weight:600;color:var(--ink2)}
@media (max-width:620px){ .cntprog{flex:1 1 100%;max-width:none} }

/* แถวเลือกชั้นวาง Area → Location → Shelf */
.lvl{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:5px 0}
.lvl + .lvl{border-top:1px solid var(--line2)}
.lvl-k{min-width:74px;font-size:var(--fs-xs);font-weight:600;color:var(--ink3)}
.chipn{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-left:5px;
  border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:var(--fs-2xs);font-weight:700}
.chip.on .chipn{background:rgba(255,255,255,.22);color:#fff}

/* หัวฟอร์มและช่องลงชื่อ — ทำให้อ่านแล้วรู้ว่าเป็นเอกสารหนึ่งใบ ไม่ใช่หน้าจอลอย ๆ */
/* ⚠️ หัวฟอร์มต้องเป็นบล็อก ชื่อฟอร์มอยู่บรรทัดบนเต็มความกว้าง แล้วช่องข้อมูลอยู่ใต้เป็นตาราง
   เคยจัดเป็น flex แถวเดียว แล้วช่องสุดท้ายตกไปอยู่บรรทัดใหม่คนเดียว อ่านไม่เหมือนฟอร์ม */
.sheet-form .fs-head{padding:16px 18px;border-bottom:2px solid var(--line)}
.fs-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.fs-title .t{font-size:var(--fs-xl);font-weight:700;color:var(--rail-ink)}
.fs-title .s{font-size:var(--fs-xs);color:var(--ink3)}
.fs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:2px 22px}
.fs-meta > div{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-sm);
  border-bottom:1px dotted var(--line);padding:5px 0}
.fs-meta span{color:var(--ink3);min-width:78px;flex:none}
.fs-meta b{font-weight:600}
.blankline{flex:1;border-bottom:1px solid var(--line2);min-width:70px}
.fs-foot{display:flex;flex-wrap:wrap;gap:28px;padding:18px}
.fs-foot > div{display:flex;align-items:baseline;gap:8px;flex:1;min-width:240px;font-size:var(--fs-sm)}
.fs-foot span{color:var(--ink3);white-space:nowrap}

/* ตารางฟอร์ม — แถบหัวช่วงบอกตำแหน่งเก็บของ เดินนับไล่ชั้นแล้วกรอกตามลำดับ */
.ctab tbody tr.grp td,
.ptable tbody tr.grp td{background:var(--accent-soft);font-weight:600;color:var(--accent);
  padding:7px 14px;border-top:1px solid var(--accent-line)}
.ctab tbody tr.grp svg,
.ptable tbody tr.grp svg{width:14px;height:14px;vertical-align:-2px}
.ctab tbody tr.r-ok{background:var(--ok-soft)}
.ctab tbody tr.r-diff{background:var(--warn-soft)}
.ctab .w-no{width:52px}
.ctab .w-qty{width:118px}
.ctab .w-diff{width:92px}
.ctab .w-act{width:52px}
.ctab .d-neg{color:var(--danger);font-weight:700}
.ctab .d-pos{color:var(--ok);font-weight:700}
.ctab .ci{display:flex;gap:9px;align-items:center}
.ctab .ci > *:first-child{border-radius:8px}
/* ช่องกรอกในตาราง — เป็นช่องว่างให้เติมเหมือนในกระดาษ ไม่ใช่กล่องหนา ๆ */
.ctab .cin{width:100%;max-width:112px;text-align:right;font-weight:700;
  border-color:var(--accent-line);background:var(--accent-soft)}
.ctab .cin:focus{background:var(--surface)}
.ctab .nin{width:100%;min-width:110px}
@media (max-width:620px){ .ctab .cin{max-width:none} }

/* พิมพ์ฟอร์มออกมาใช้ — ซ่อนเมนู ปุ่ม และช่องกรอกที่ยังว่าง ให้เหลือเฉพาะตัวฟอร์ม
   ⚠️ ของที่ยังไม่นับต้องพิมพ์เป็น "ช่องว่าง" ไม่ใช่ขีด จะได้เขียนด้วยปากกาได้ */
@media print {
  /* ⚠️ แถบหัวของแอปใช้คลาส .top (ไม่ใช่ .topbar) — เคยเขียนผิดแล้วชื่อผู้ใช้กับปุ่มเปลี่ยนรหัสผ่านติดไปบนกระดาษ */
  .rail, .top, .navscrim, .noprint, .pbar, .toast, #modalRoot { display:none !important }
  .app, .body, .main { display:block !important; padding:0 !important; background:#fff !important }
  .card, .sheet-form { border:0 !important; box-shadow:none !important; border-radius:0 !important }
  .tw { overflow:visible !important }
  /* ⚠️ คอลัมน์รอง (.c-sec) ถูกซ่อนที่จอแคบ — กระดาษ A4 กว้างราว 790px จึงโดนซ่อนไปด้วย
     แต่ "เลขล็อต" กับ "หมายเหตุ" เป็นหัวใจของฟอร์มนับ ห้ามหาย */
  .ctab .c-sec { display:table-cell !important }
  .ctab { font-size:var(--fs-2xs) }
  /* ⚠️ กระดาษแคบกว่าจอ ถ้าไม่กันไว้ คอลัมน์ชื่อสินค้าจะถูกบีบจนตัวอักษรเรียงลงทีละตัว
     (ปัญหาเดิมที่เคยเจอกับตารางบนจอแคบ) — ตัดรูปออกและตั้งความกว้างขั้นต่ำ */
  .ctab .ci > *:first-child { display:none !important }
  /* ⚠️ ล็อกความกว้างเป็นเปอร์เซ็นต์ของหน้ากระดาษ — ถ้าปล่อยให้เบราว์เซอร์คิดเอง
     คอลัมน์ชื่อสินค้าจะกินที่จนคอลัมน์ "ผลต่าง" กับ "หมายเหตุ" หลุดขอบขวาไปเลย */
  .ctab { table-layout:fixed; width:100% }
  .ctab th:nth-child(1), .ctab td:nth-child(1) { width:5% }
  .ctab th:nth-child(2), .ctab td:nth-child(2) { width:29% }
  .ctab th:nth-child(3), .ctab td:nth-child(3) { width:17% }
  .ctab th:nth-child(4), .ctab td:nth-child(4) { width:11% }
  .ctab th:nth-child(5), .ctab td:nth-child(5) { width:12% }
  .ctab th:nth-child(6), .ctab td:nth-child(6) { width:9% }
  .ctab th:nth-child(7), .ctab td:nth-child(7) { width:17% }
  .ctab th:nth-child(8), .ctab td:nth-child(8) { display:none !important }
  /* ช่องกรอกบนกระดาษต้องกว้างพอให้เห็นตัวเลขเต็ม และว่างไว้ให้เขียนด้วยปากกาได้ */
  /* ⚠️ ช่องกรอกต้องกว้างเท่าช่องตารางพอดี — เคยตั้ง width:auto แล้วตัวเลขล้นไปทับคอลัมน์ผลต่าง */
  .ctab .cin, .ctab .nin { border:0 !important; background:transparent !important; box-shadow:none !important;
    width:100% !important; max-width:none !important; min-width:0 !important; padding:0 !important;
    box-sizing:border-box; -webkit-appearance:none; appearance:none }
  .ctab tbody tr.r-ok, .ctab tbody tr.r-diff { background:transparent !important }
  .ctab tbody tr.grp td { background:#f0f0f0 !important; color:#000 !important }
  .ctab thead { display:table-header-group }   /* หัวตารางซ้ำทุกหน้ากระดาษ */
  .ctab tr { break-inside:avoid }
  .fs-foot { break-inside:avoid }
  @page { size:A4; margin:12mm }
}

/* ---------- นำเข้าไฟล์ Rocket CRM ---------- */
.note.ok{background:var(--ok-soft);border-color:var(--ok-line);color:#0d4a33}
.note.bad{background:var(--danger-soft);border-color:var(--danger-line);color:#7a1830}
.rk-body{padding:16px;display:flex;flex-direction:column;gap:14px}
.rk-body > *{flex:none}
.rk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rk-steps > div{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink2);line-height:1.5}
.rk-steps > div > b:first-child{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:var(--fs-xs)}
.rk-act{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rk-prog{flex:1;min-width:200px;display:flex;gap:10px;align-items:center}
.rk-prog[hidden]{display:none}
.rk-bar{flex:1;height:9px;border-radius:999px;background:var(--line2);overflow:hidden}
.rk-bar i{display:block;height:100%;background:var(--s1);border-radius:999px;transition:width .2s}
.rk-err{margin:6px 0 0;padding-left:18px;font-size:var(--fs-sm)}

/* ---------- ลูกค้า & RFM ---------- */
button.tab{background:none;border:none;border-bottom:2px solid transparent;font:inherit;cursor:pointer}
/* กราฟแท่งแนวตั้งมีป้ายใต้แท่ง — สีเดียว (s1) เพราะเป็นข้อมูลชุดเดียว */
.cbars{display:flex;align-items:flex-end;gap:6px;height:180px}
.cbars .cb{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.cbars .cb i{display:block;width:100%;max-width:44px;background:var(--s1);border-radius:4px 4px 0 0}
.cbars .cb:hover i{background:var(--brand-deep)}
.cbars .cb b{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;color:var(--ink2);margin-bottom:4px;white-space:nowrap}
.cbars .cb span{font-size:var(--fs-xs);color:var(--ink3);margin-top:6px;min-height:15px;white-space:nowrap}
.cbars.dense{gap:2px}
.cbars.dense .cb b{display:none}
/* การ์ดกลุ่มลูกค้า RFM */
.segs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.segc{text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;box-shadow:var(--shadow)}
.segc:hover{border-color:var(--accent)}
.segc.static{cursor:default}
.segc.static:hover{border-color:var(--line)}
.segc-h{display:flex;align-items:center;gap:8px}
.segc-n{margin-left:auto;font-weight:700;font-size:var(--fs-xl)}
.segc-bar{height:6px;border-radius:999px;background:var(--line2);overflow:hidden}
.segc-bar i{display:block;height:100%;background:var(--s1)}
.segc-d{font-size:var(--fs-sm);color:var(--ink);margin-top:2px}
.segc-a{font-size:var(--fs-sm);color:var(--ink2);line-height:1.5}
.segc-a b{color:var(--accent);margin-right:4px}
.segc-p{display:flex;gap:8px;font-size:var(--fs-sm);padding:4px 0;border-top:1px solid var(--line2)}
.segc-p span:nth-child(2){flex:1;min-width:0}
/* ตาราง R × F — ไล่เฉดสีเดียวตามจำนวนคน */
.hmap td.hm{text-align:center;font-family:var(--mono);font-weight:600;color:var(--ink);
  background:color-mix(in srgb, var(--accent) var(--k), var(--surface));border:2px solid var(--surface);min-width:64px}
.hmap th{white-space:nowrap}
/* คะแนน R · F · M ในตารางรายชื่อ */
.rfm{display:inline-flex;gap:3px}
.rfm .sc{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;background:var(--line2);color:var(--ink2)}
.rfm .sc.s4,.rfm .sc.s5{background:var(--accent-soft);color:var(--accent)}
/* ตั้งค่า RFM */
.rf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;padding:16px}
.rf-box{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rf-box > *{flex:none}
.rf-box h3{margin:0;font-size:var(--fs-lg)}
.rf-lad{display:flex;flex-direction:column;gap:6px}
.rf-lad > div{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.rf-lad .sc5{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-family:var(--mono);
  font-size:var(--fs-xs);background:var(--accent-soft);color:var(--accent)}
.rf-lad .rf-n{width:96px;height:34px}
.rf-lad.off{opacity:.45}
.rf-lbl input{width:100%;min-width:120px;height:34px}
/* คะแนน RFM ในตารางรายชื่อ — ชื่อ · แถบ 5 ช่อง · ตัวเลข (แทนตัวเลข 3 ตัวที่อ่านไม่ออก) */
.rfm2{display:flex;flex-direction:column;gap:3px;min-width:170px}
.rfm-row{display:grid;grid-template-columns:62px max-content 14px;justify-content:start;align-items:center;gap:8px;font-size:var(--fs-xs);line-height:1.2}
.rfm-k{color:var(--ink2);white-space:nowrap}
.rfm-bar{display:inline-flex;gap:2px}
.rfm-bar i{width:14px;height:8px;border-radius:2px;background:var(--line);box-shadow:inset 0 0 0 1px var(--accent-line);display:block}
.rfm-bar.lvhi i.on{background:var(--accent)}
.rfm-bar.lvlo i.on{background:var(--warn)}
.rfm-v{font-family:var(--mono);font-weight:700;color:var(--ink);text-align:right}
/* ---------- ตำแหน่งเก็บของแบบต้นไม้ Area → Location → Shelf ---------- */
.loc-steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--ink2)}
.loc-steps b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-right:4px;
  background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:var(--fs-xs)}
.loc-steps i{font-style:normal;color:var(--ink3)}
.loctree .lvtag{display:inline-block;min-width:66px;text-align:center;font-size:var(--fs-xs);font-weight:700;border-radius:6px;
  padding:2px 6px;margin-right:4px;background:var(--line2);color:var(--ink2)}
.loctree tr.lv-area td{background:var(--surface)}
.loctree tr.lv-area .lvtag{background:var(--accent);color:#fff}
.loctree tr.lv-zone td:first-child{padding-left:38px}
.loctree tr.lv-zone .lvtag{background:var(--accent-soft);color:var(--accent)}
.loctree tr.lv-shelf td:first-child{padding-left:70px}
.loctree tr.lv-zone td:first-child,.loctree tr.lv-shelf td:first-child{position:relative}
.loctree tr.lv-zone td:first-child::after,.loctree tr.lv-shelf td:first-child::after{content:"";position:absolute;
  top:0;bottom:0;border-left:2px solid var(--line)}
.loctree tr.lv-zone td:first-child::after{left:22px}
.loctree tr.lv-shelf td:first-child::after{left:54px}
@media (max-width:620px){
  .loctree tr.lv-zone td:first-child{padding-left:22px}
  .loctree tr.lv-shelf td:first-child{padding-left:40px}
  .loctree tr.lv-zone td:first-child::after{left:8px}
  .loctree tr.lv-shelf td:first-child::after{left:26px}
}

/* ทะเบียนสินค้า — ช่องเลือกสถานะในตาราง (7 ต.ค. 2569) สีตามสถานะ เหมือน .pill */
.stsel{height:34px;padding:0 10px;border-radius:999px;font-size:var(--fs-sm);font-weight:600;width:auto;max-width:200px;border-color:transparent;cursor:pointer}
.stsel.st-ok{background:var(--ok-soft);color:var(--ok)}
.stsel.st-warn{background:var(--warn-soft);color:var(--warn)}
.stsel.st-bad{background:var(--danger-soft);color:var(--danger)}
.stsel.st-mut{background:#eef1f3;color:var(--ink2)}
.stsel.st-info{background:var(--accent-soft);color:var(--accent)}
.stsel option{color:var(--ink);background:#fff;font-weight:400}

/* ทะเบียนสินค้า — SKU ตามแพลตฟอร์ม (8 ต.ค. 2569) */
.skuchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.skuchip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 3px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-xs);font-weight:500;background:#fff}
.skuchip .plat{gap:0}
.skuchip b{font-weight:600;font-variant-numeric:tabular-nums}
.skurow{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.skurow-b{display:flex;flex-wrap:wrap;gap:6px}
.skutag{display:inline-flex;align-items:center;gap:2px;padding:2px 2px 2px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.skutag .btn{height:24px;min-height:24px;padding:0 7px}
@media (max-width:620px){.skurow{grid-template-columns:1fr}}

/* ---------------- งานบุคคล (8 ต.ค. 2569) ---------------- */
.ava{width:var(--s);height:var(--s);border-radius:50%;object-fit:cover;flex:none;display:inline-block;background:#f3e3ea;vertical-align:middle}
.ava-t{display:inline-grid;place-items:center;color:#fff;font-weight:700;font-size:calc(var(--s) * .42);
  background:linear-gradient(135deg,#E22D61,#F7AEC4)}
.empcell{display:flex;align-items:center;gap:11px;min-width:0}
.empcell b{font-weight:600}
.emphead{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:18px 18px 14px}
.emphead-b{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.emphead-n{font-size:var(--fs-xl);font-weight:700}
.emphead-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.emphead-c{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-md);min-width:0}
.ava-btn{position:relative;border:0;background:none;padding:0;cursor:pointer;border-radius:50%;flex:none}
.ava-btn>span{position:absolute;right:2px;bottom:2px;width:28px;height:28px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);display:grid;place-items:center;color:var(--accent)}
.ava-btn>span svg{width:15px;height:15px}
.ava-btn:disabled{cursor:default}.ava-btn:disabled>span{display:none}
.ava-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tline{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:6px}
.tl-i{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:start;padding:8px 0 8px 16px;position:relative}
.tl-i::before{content:"";position:absolute;left:-7px;top:13px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.tl-promote::before,.tl-start::before{background:var(--accent)}
.tl-resign::before{border-color:var(--danger)}
.tl-d{color:var(--ink2);font-size:var(--fs-sm);padding-top:2px}
.acc-mode{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.acc-menus.off{opacity:.45;pointer-events:none}
.acc-g{font-size:var(--fs-xs);font-weight:700;color:var(--ink2);margin:12px 0 6px}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.acc-grid .chk{padding:7px 10px;font-weight:500;font-size:var(--fs-sm)}
@media (max-width:620px){.tl-i{grid-template-columns:1fr auto}.tl-d{grid-column:1/-1}}

/* ผังองค์กร — เส้นเชื่อมแบบเดียวกับ dp-kpi */
.org-wrap{overflow-x:auto;padding:18px 8px 14px}
.org-leg{display:flex;gap:12px;align-items:center;font-size:var(--fs-xs);color:var(--ink2);margin-left:12px}
.org-leg span{display:inline-flex;align-items:center;gap:5px}
.org-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.lg-exec{background:#E22D61}.lg-dept{background:#0234BF}.lg-role{background:#fff;border:1px solid var(--line)}
.orgtree{display:flex;justify-content:center;min-width:max-content;margin:auto}
.orgtree ul{display:flex;justify-content:center;padding:22px 0 0;margin:0;position:relative;list-style:none}
.orgtree>ul{padding-top:0}
.orgtree li{list-style:none;text-align:center;position:relative;padding:22px 10px 0}
.orgtree>ul>li{padding-top:0}
.orgtree li::before,.orgtree li::after{content:"";position:absolute;top:0;right:50%;border-top:2px solid var(--line);width:50%;height:22px}
.orgtree li::after{right:auto;left:50%;border-left:2px solid var(--line)}
.orgtree li:only-child::before,.orgtree li:only-child::after{display:none}
.orgtree li:only-child{padding-top:0}
.orgtree li:first-child::before,.orgtree li:last-child::after{border:0}
.orgtree li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
.orgtree li:first-child::after{border-radius:6px 0 0 0}
.orgtree ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid var(--line);height:22px}
.orgtree>ul>li::before,.orgtree>ul>li::after{display:none}
.orgn{position:relative;display:inline-block;min-width:140px;max-width:220px;padding:9px 14px 10px;border:1px solid var(--line);
  border-radius:11px;background:#fff;cursor:pointer;box-shadow:0 1px 2px rgba(2,52,191,.06);transition:.15s}
.orgn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(2,52,191,.12)}
.orgn-k{font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--ink2)}
.orgn-t{font-weight:700;font-size:var(--fs-sm);line-height:1.3}
.orgn-exec{background:linear-gradient(180deg,#fff,#fde7ee);border-color:#E22D61}.orgn-exec .orgn-t{color:#B02050}
.orgn-dept{background:linear-gradient(180deg,#0A52A8,#0234BF);border-color:#0234BF}
.orgn-dept .orgn-t{color:#fff}.orgn-dept .orgn-k{color:#cfe0fb}
.orgn-p{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:7px}
.orgn-o{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 9px 2px 2px;border:1px solid var(--line);
  border-radius:14px;font-size:var(--fs-xs);font-weight:600;color:inherit;text-decoration:none;background:#fff}
.orgn-o span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.orgn-o:hover{border-color:var(--accent)}
.orgn-e{font-size:var(--fs-2xs);color:var(--warn);margin-top:6px}
.orgn-add{position:absolute;right:-9px;bottom:-9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--accent);font-weight:700;line-height:1;cursor:pointer;opacity:0;transition:.15s}
.orgn:hover .orgn-add,.orgn-add:focus-visible{opacity:1}
@media (hover:none){.orgn-add{opacity:1}}

/* ---------- ออเดอร์แพลตฟอร์ม + นำเข้าไฟล์คำสั่งซื้อ (sql/33) */
.segbar .seg:disabled{opacity:.55;cursor:not-allowed}
.pf-st{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.po-split{display:flex;gap:2px;height:22px;border-radius:6px;overflow:hidden;background:var(--line2)}
.po-split i{display:block;min-width:2px}
.po-legend{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:var(--fs-sm)}
.po-legend > span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.po-legend i{flex:none;width:12px;height:12px;border-radius:3px}

/* ตัวเลขบนการ์ดย่อตามความกว้างการ์ด (12 ต.ค. 2569 ลูกค้าแจ้ง ฿2,800,109 ล้นการ์ดในกล่องครึ่งจอ)
   ⚠️ container-type ใส่ได้เฉพาะ .tiles > .tile (กริดกำหนดความกว้างให้) — ใส่กับ .tile ที่อยู่ใน flex แล้วการ์ดจะแฟบเหลือ 0 */
.tiles > .tile{container-type:inline-size;min-width:0}
.tiles > .tile .vl{font-size:clamp(17px,12.5cqi,28px);line-height:1.2;overflow-wrap:normal}
/* ช่วงวันที่บนการ์ด — ตัวอักษรปกติ (Plex Mono กว้างเกินจนขึ้นสองบรรทัด) · ปีย้ายไปบรรทัดล่าง */
.tiles > .tile .vl.vl-date{font-family:var(--font);font-size:clamp(16px,11cqi,26px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- สินค้าขายดี: กราฟแท่งเรียงอันดับ + ข้อมูลในแถวเดียวกัน (#orders) */
.tsku{padding:6px 16px 14px}
.tsku-r{display:grid;grid-template-columns:26px minmax(150px,1.25fr) minmax(170px,2fr) 64px 64px 84px 60px;
  gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2)}
.tsku-r:last-child{border-bottom:0}
.tsku-r .r{text-align:right}
.tsku-h{font-size:var(--fs-xs);color:var(--ink3);font-weight:600;padding-top:4px}
.tsku-n{color:var(--ink3);font-size:var(--fs-xs);text-align:right}
.tsku-nm{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tsku-nm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsku-nm small{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsku-bar{position:relative;display:flex;align-items:center;gap:8px;min-width:0}
.tsku-bar i{display:block;height:14px;border-radius:0 4px 4px 0;background:var(--s1);flex:none}
.tsku-bar em{font-style:normal;font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.tsku-r:not(.tsku-h):hover{background:var(--accent-soft)}
@media (max-width:900px){
  .tsku-r{grid-template-columns:22px minmax(120px,1fr) minmax(140px,1.4fr) 54px 54px}
  .tsku-r .c-sec{display:none}
}
@media (max-width:620px){
  .tsku-r{grid-template-columns:20px 1fr 52px;row-gap:4px}
  .tsku-h{display:none}
  .tsku-bar{grid-column:2 / 4;grid-row:2}
  .tsku-r > span:nth-child(4){display:none}
}
.tsku-nm small .pill{font-size:var(--fs-2xs);padding:0 6px;line-height:16px;min-height:0;height:auto;vertical-align:1px}

/* ตารางแท็บออเดอร์ (วิเคราะห์การขาย) — ตัวอักษรเล็กลง ข้อมูลต่อออเดอร์เยอะ (8 ต.ค. 2569 ลูกค้าขอ) */
.otbl th{padding:8px 9px}
.otbl td{padding:7px 9px;line-height:1.35}
.otbl td .pill{font-size:var(--fs-2xs);padding:2px 8px;gap:4px}
/* ห้ามตัดบรรทัดเฉพาะช่องที่ระบุ (.nw) และวันที่ (.dt) — เดิมล็อกคอลัมน์ที่ 1 กับ 3 ซึ่งในตารางรายการขายคือชื่อสินค้า */
.otbl td.nw{white-space:nowrap}
/* ป้ายช่องทาง (โลโก้+ชื่อ) ในตารางเล็ก */
.otbl .plat{font-size:var(--fs-xs)}

/* หน้าต่างรายละเอียดออเดอร์ (dlgOrder) */
.modal.wide{width:min(760px,100%)}
.od-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.od-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.od-kv{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm)}
.od-kv span{color:var(--ink3);font-size:var(--fs-xs)}
.od-kv b{font-weight:600}
@media (max-width:620px){ .od-grid{grid-template-columns:minmax(0,1fr)} }
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:var(--accent-soft)}

/* ---------- เส้นสถานะจัดส่ง (dlgOrder → orderTrack) */
.otrack{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 0 2px;
  --c:var(--accent);--tr:width .9s cubic-bezier(.4,0,.2,1)}
.otrack.t-ok{--c:var(--ok)} .otrack.t-bad{--c:var(--danger)} .otrack.t-warn{--c:var(--warn)}
/* แถบวิ่งจากจุดศูนย์กลางของขั้นแรกถึงขั้นสุดท้าย (5 คอลัมน์ → 10% ถึง 90%) */
.ot-bar{position:absolute;left:10%;right:10%;top:15px;height:4px;border-radius:4px;background:var(--line)}
.ot-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--c);transition:var(--tr)}
.otrack.go .ot-bar i{width:var(--to)}
.ot-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0}
.ot-dot{width:22px;height:22px;border-radius:50%;background:var(--surface);border:3px solid var(--line);
  transition:background .25s,border-color .25s,box-shadow .25s;transition-delay:var(--d)}
.ot-step span{font-size:var(--fs-xs);font-weight:600;color:var(--ink3);line-height:1.3;transition:color .25s;transition-delay:var(--d)}
.ot-step small{font-size:var(--fs-2xs);color:var(--ink3);min-height:14px}
.otrack.go .ot-step.done .ot-dot{background:var(--c);border-color:var(--c)}
.otrack.go .ot-step.cur .ot-dot{background:var(--surface);border-color:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
.otrack.go .ot-step.done span,.otrack.go .ot-step.cur span{color:var(--ink)}
.otrack.go .ot-step.cur span{color:var(--c)}
.otrack.go .ot-step.end .ot-dot{background:var(--c);border-color:var(--c)}
.otrack .ot-step.todo{opacity:.7}
@media (prefers-reduced-motion:reduce){ .ot-bar i,.ot-dot,.ot-step span{transition:none!important} }
@media (max-width:620px){ .ot-step span{font-size:var(--fs-2xs)} .ot-step small{font-size:var(--fs-2xs)} }

/* วันที่ภาษาไทย ("4 ต.ค. 69") ใช้ตัวอักษรปกติ + ตัวเลขกว้างเท่ากัน — Plex Mono ทำให้ตัวไทยห่างผิดปกติ (8 ต.ค. 2569 ลูกค้าแจ้ง) */
.dt{font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.sm-pill{font-size:var(--fs-2xs);padding:1px 7px;gap:3px;vertical-align:1px}
/* ลูกค้าในหน้าต่างออเดอร์ */
.od-cust{border:1px solid var(--ok-line);background:var(--ok-soft);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.od-cust-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.od-trk{font-size:var(--fs-lg);font-weight:700;letter-spacing:.02em}

/* บรรทัดรองในตาราง (รหัส · เบอร์ · ชื่อขนส่ง) เล็กกว่าข้อมูลหลักหนึ่งระดับเสมอ */
td .mut{font-size:var(--fs-xs)}
/* ปุ่มลบในแถว — ตัวหนังสือแดง ไม่เด่นเท่าปุ่มหลัก (ลบตำแหน่งคลัง ฯลฯ) */
.btn.danger-t{color:var(--danger);border-color:var(--danger-line)}
.btn.danger-t:hover{background:var(--danger-soft)}

/* ---------- กราฟหน้าวิเคราะห์การขาย (stackChart / lineChart) */
.sachart{display:block;width:100%;height:auto;overflow:visible}
.sachart .cg{stroke:var(--line2);stroke-width:1}
.sachart .ct{fill:var(--ink3);font-size:var(--fs-2xs);font-family:var(--font)}
.sachart .ct-v{fill:var(--ink2);font-weight:600}
.sachart .lx{stroke:transparent;stroke-width:1}
.sachart .ld{opacity:0}
.sachart .lhit:hover .lx{stroke:var(--line)}
.sachart .lhit:hover .ld{opacity:1;stroke:var(--surface);stroke-width:2}
.sachart rect[data-tip]{cursor:crosshair}
.salegend{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-xs);color:var(--ink2);margin-bottom:6px}
.salegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.own{font-size:var(--fs-2xs);color:var(--accent);font-weight:700}
.sa-sub{font-size:var(--fs-sm);font-weight:700;color:var(--rail-ink);margin-bottom:8px}
tr.hlrow td{background:var(--accent-soft)}
.own-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;max-height:52vh;overflow:auto}
@media (max-width:620px){ .own-list{grid-template-columns:minmax(0,1fr)} }
/* ตั้งบัญชีร้าน — ป้ายบัญชีที่เลือก กดกากบาทเอาออก */
.own-chips{display:flex;flex-wrap:wrap;gap:6px}
.own-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--accent-soft);
  border:1px solid var(--accent-line);font-size:var(--fs-sm);font-weight:600}
.own-chip button{border:none;background:none;cursor:pointer;color:var(--ink3);font-size:var(--fs-md);line-height:1;padding:0 6px;border-radius:999px}
.own-chip button:hover{background:var(--surface);color:var(--danger)}
/* แดชบอร์ดผู้บริหาร: บอกช่วงข้อมูลที่ใช้คิดค่าเฉลี่ย/พยากรณ์ (เดิมคูณยอด 30 วันเป็นทั้งปี ได้ตัวเลขเกินจริง) */
.gdata{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:var(--fs-sm);color:var(--ink2);line-height:1.5}
.gdata .ico{flex:none;margin-top:2px;color:var(--ink3)}
.gdata.warn{color:#7a4a00}
.gdata.warn .ico{color:var(--warn)}

/* ============================================================
   WhiteLAB+ mockup — ส่วนเพิ่มเติมจากโครง Snackies
   ============================================================ */
.wl-logo{display:flex;align-items:center;gap:10px}
.wl-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#5B4BD1,#D0457A)}
.wl-mark svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wl-logo .bn{font-size:21px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.wl-logo .bn b{font-weight:700;color:var(--rail-ink)}
.wl-logo .bn i{font-style:normal;font-weight:700;color:var(--pink)}
.app.narrow .wl-logo{justify-content:center}
.app.narrow .wl-logo .bn{display:none}
@media (max-width:1024px){ .app.narrow .wl-logo .bn{display:initial} .app.narrow .wl-logo{justify-content:flex-start} }

.wl-demobar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 16px;border-radius:12px;
  background:var(--pink-soft);border:1px solid var(--pink-line);color:#7a1f45;font-size:var(--fs-sm)}
.wl-demobar>svg{width:18px;height:18px}
.wl-demobar>div{flex:1;min-width:220px}
.wl-hero{background:linear-gradient(120deg,#0d0d10,#2b2b33 70%,#4a4a55);color:#fff;border-radius:18px;padding:22px 26px;box-shadow:var(--shadow-lg)}
.wl-hero h2{margin:4px 0 6px;font-size:var(--fs-xl);font-weight:500;line-height:1.5}
.wl-hero b{font-weight:700}
.wl-hero .mut{color:rgba(255,255,255,.8)}
.wl-hero-k{font-size:var(--fs-sm);opacity:.85}
.wl-pad{padding:14px 18px 16px}

.rowlink{cursor:pointer}
.chips{border-bottom:1px solid var(--line)}
.card>.chips:first-child{border-radius:16px 16px 0 0}
.tabs{border-radius:16px 16px 0 0}

/* กราฟ */
.wl-chart{width:100%;height:auto;display:block;overflow:visible}
.wl-chart .hit:hover path{opacity:.82}
.wl-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink2);margin-bottom:6px}
.wl-legend span{display:inline-flex;align-items:center;gap:7px}
.wl-legend i,.wl-tip i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.wl-tip{position:fixed;z-index:90;pointer-events:none;background:#1d1a3a;color:#fff;padding:8px 11px;border-radius:9px;
  font-size:var(--fs-xs);line-height:1.6;box-shadow:0 8px 24px rgba(29,26,58,.3);max-width:280px}
.wl-tip i{margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.wl-hb{display:flex;flex-direction:column;gap:10px}
.wl-hbr{display:grid;grid-template-columns:minmax(90px,150px) 1fr 70px;gap:10px;align-items:center;font-size:var(--fs-sm)}
.wl-hbl{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-hbt{height:14px;background:var(--line2);border-radius:4px;overflow:hidden}
.wl-hbt i{display:block;height:100%;border-radius:0 4px 4px 0}
.wl-hbv{text-align:right;color:var(--ink)}
.wl-hbr:hover .wl-hbt i{opacity:.82}
.wl-mini{width:80px;height:7px;background:var(--line2);border-radius:4px;overflow:hidden;flex:none}
.wl-mini i{display:block;height:100%;background:var(--s1)}
.wl-stack{display:flex;gap:2px;height:22px;border-radius:6px;overflow:hidden}
.wl-stack i{display:block;min-width:4px}

.wl-alerts{display:flex;flex-direction:column}
.wl-al{display:flex;gap:10px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line2);color:var(--ink);font-size:var(--fs-sm)}
.wl-al:hover{background:var(--accent-soft)}
.wl-al:last-child{border-bottom:none}
.wl-al .pill{flex:none;min-width:92px;justify-content:center}

.wl-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 20px}
.wl-kv div{display:flex;flex-direction:column;gap:2px}
.wl-kv span{font-size:var(--fs-xs);color:var(--ink3);font-weight:600}

/* kanban */
.wl-kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.wl-col{background:#efeff2;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.wl-colh{display:flex;flex-direction:column;padding:4px 6px;color:var(--rail-ink)}
.wl-deal{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);box-shadow:var(--shadow)}
.wl-deal.due{border-color:var(--warn-line);box-shadow:inset 3px 0 0 var(--warn)}
.wl-dealv{display:flex;justify-content:space-between;font-weight:700;margin-top:2px}
.wl-dealn{font-size:var(--fs-xs)}
.wl-dealnx{font-size:var(--fs-xs);color:var(--warn);font-weight:600;display:flex;gap:5px;align-items:center}
.wl-dealb{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
@media (max-width:1024px){ .wl-kanban{grid-template-columns:repeat(5,240px)} }

/* ขั้นตอน MO */
.wl-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.wl-step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--ink2)}
.wl-step b{font-size:22px;color:var(--rail-ink)}
.wl-steps.big .wl-step{flex-direction:row;align-items:center;gap:10px}
.wl-steps.big .wl-step b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-md);background:var(--line2);color:var(--ink3);flex:none}
.wl-step.done b{background:var(--ok-soft)!important;color:var(--ok)!important}
.wl-step.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.wl-step.cur b{background:var(--accent)!important;color:#fff!important}
@media (max-width:900px){ .wl-steps{grid-template-columns:repeat(3,1fr)} }
.wl-prog{display:flex;gap:3px}
.wl-prog i{width:22px;height:7px;border-radius:3px;background:var(--line)}
.wl-prog i.on{background:var(--accent)}

/* ล็อต */
.wl-lotrow td{background:#fafafb!important}
.wl-lots{display:flex;flex-direction:column;gap:6px}
.wl-lots>div{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:6px 10px;border-radius:8px;background:#fff;border:1px solid var(--line2)}
.wl-lots>div.warn{border-color:var(--warn-line);background:var(--warn-soft)}

.wl-tl{display:flex;flex-direction:column;gap:12px}
.wl-tl>div{border-left:3px solid var(--accent-line);padding-left:12px;font-size:var(--fs-sm)}

/* เอกสาร */
.wl-doc{display:flex;flex-direction:column;gap:14px;font-size:var(--fs-sm)}
.wl-doch{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--accent)}
.wl-docsum{display:flex;flex-direction:column;gap:4px;align-self:flex-end;min-width:220px}
.wl-docsum div{display:flex;justify-content:space-between;gap:20px}
.wl-docsum .t{border-top:1px solid var(--line);padding-top:6px;font-size:var(--fs-md);color:var(--rail-ink)}


@media (max-width:620px){
  .who-n,.demo-chip{display:none}
  .ch{flex-wrap:wrap}
  .ch>div[style]{margin-left:0!important}
  .chips{flex-wrap:nowrap;overflow-x:auto}
  .chip{flex:none}
  .top{padding:0 14px;gap:10px}
  .top h1{font-size:var(--fs-lg)}
  .top .sub{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .wl-hbr{grid-template-columns:minmax(70px,110px) 1fr 58px}
  .wl-steps{grid-template-columns:repeat(2,1fr)}
}
.main,.body{min-width:0}
.body>*{min-width:0}

/* ============================================================
   v2 — กราฟสมัยใหม่ + หน้าอ่านง่าย (14 ต.ค. 2569 ลูกค้าแจ้ง "กราฟไม่สวย · ระบบเข้าใจยาก")
   ============================================================ */
/* โลโก้ตัวอักษร (ไม่ใช้รูป) */
.wlt{display:flex;align-items:baseline;flex-wrap:wrap;line-height:1;color:var(--ink);position:relative;width:max-content}
.wlt-w{font-family:"Montserrat","IBM Plex Sans Thai",sans-serif;font-weight:400;font-size:25px;letter-spacing:-.01em}
.wlt-l{font-family:"Montserrat","IBM Plex Sans Thai",sans-serif;font-weight:800;font-size:25px;font-style:italic;letter-spacing:.01em}
.wlt sup{font-weight:800;font-size:16px;margin-left:1px;align-self:flex-start;line-height:1}
.wlt-f{flex-basis:100%;text-align:center;font-size:10px;letter-spacing:.42em;color:var(--ink2);margin-top:5px;padding-left:.42em}
.app.narrow .wlt-w,.app.narrow .wlt-f,.app.narrow .wlt sup{display:none}
.app.narrow .wlt{margin:0 auto}
.app.narrow .wlt-l{font-size:17px}
@media (max-width:1024px){ .app.narrow .wlt-w,.app.narrow .wlt-f,.app.narrow .wlt sup{display:initial} .app.narrow .wlt-l{font-size:25px} .app.narrow .wlt{margin:0} }

.demo-chip{font-size:var(--fs-2xs);font-weight:700;padding:4px 10px;border-radius:999px;background:var(--pink-soft);color:#8a1f4c;border:1px solid var(--pink-line)}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink2)}
.iconbtn:hover{background:var(--accent-soft);color:var(--ink)}
.iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.sec{display:flex;align-items:baseline;gap:10px;margin:6px 2px -4px}
.sec h2{margin:0;font-size:var(--fs-lg);font-weight:700}
.sec span{font-size:var(--fs-sm);color:var(--ink3)}
.g3{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.g3>.card,.g2>.card{min-width:0}
@media (max-width:1280px){ .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .g3{grid-template-columns:minmax(0,1fr)} }
.chips.bare{border:none;padding:0;background:none}

/* การ์ดตัวเลข */
.kpis{display:grid;gap:14px;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(min(var(--n,4),2),minmax(0,1fr))} }
@media (max-width:560px){ .kpis{grid-template-columns:minmax(0,1fr)} }
.kpi{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px 14px;
  box-shadow:var(--shadow);color:var(--ink);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;animation:rise .45s ease both}
a.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#cfcfd6}
.kh{display:flex;align-items:center;gap:9px}
.ki{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.ki svg{width:16px;height:16px}
.kl{font-size:var(--fs-sm);color:var(--ink2);font-weight:600;line-height:1.3}
.kgo{margin-left:auto;color:var(--ink3);opacity:0;transition:.15s}
a.kpi:hover .kgo{opacity:1}
.kv{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:6px;line-height:1.15}
.kf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink3)}
.ks{margin-top:auto;padding-top:8px}
.spk{width:100%;height:34px;display:block}
.dp{display:inline-flex;align-items:center;gap:3px;font-weight:700;padding:2px 8px;border-radius:999px;font-size:var(--fs-xs)}
.dp.good{background:var(--ok-soft);color:var(--ok)}
.dp.bad{background:var(--danger-soft);color:var(--danger)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kpis>*:nth-child(2){animation-delay:.05s}.kpis>*:nth-child(3){animation-delay:.1s}.kpis>*:nth-child(4){animation-delay:.15s}

/* กราฟ */
.wl-chart{width:100%;height:auto;display:block;overflow:visible;font-family:var(--font)}
.wl-chart .gl{stroke:#ececf0;stroke-width:1;stroke-dasharray:3 4}
.wl-chart .gl.zero{stroke:#c9c9d0;stroke-dasharray:none}
.wl-chart .ax{font-size:11px;fill:var(--ink3)}
.wl-chart .ax.on{fill:var(--ink);font-weight:700}
.wl-chart .ref{stroke:var(--ink2);stroke-width:1.2;stroke-dasharray:5 5;opacity:.7}
.wl-chart .reft{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;font-size:11px;fill:var(--ink2);font-weight:600}
.wl-chart .ln{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s ease-out .1s forwards}
.wl-chart .ln.dash{stroke-dasharray:.012 .008;stroke-dashoffset:0;animation:none;stroke-width:2}
.wl-chart .ar{opacity:0;animation:fade .8s ease .5s forwards}
.wl-chart .pt{stroke:#fff;stroke-width:2.5;opacity:0;animation:fade .3s ease 1.1s forwards}
.wl-chart .pt.sm{stroke-width:1.5}
.wl-chart .lastv{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;font-size:13px;font-weight:700;fill:var(--ink);opacity:0;animation:fade .3s ease 1.15s forwards;font-family:var(--mono)}
.wl-chart .xh{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.wl-chart .hd{stroke:#fff;stroke-width:2.5;opacity:0}
.wl-chart .hit:hover .xh,.wl-chart .hit:hover .hd{opacity:1}
.wl-chart .bk{transform-box:fill-box;transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.8,.2,1) both;transition:opacity .15s}
.wl-chart.bc:hover .bars .bk{opacity:.38}
.wl-chart.bc .bars:hover .bk{opacity:1}
.wl-chart.bc:not(:hover) .bars.hl .bk{filter:saturate(1.15)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.wl-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink2);margin-bottom:8px}
.wl-legend span{display:inline-flex;align-items:center;gap:7px}
.wl-legend i,.wl-tip i,.dn-l i,.mt-l i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none;background:var(--c)}
.wl-legend i.dash{height:3px;border-radius:2px}
.wl-tip i.ln{height:3px}
.wl-tip{position:fixed;z-index:90;pointer-events:none;background:rgba(22,22,26,.94);color:#fff;padding:9px 12px;border-radius:10px;
  font-size:var(--fs-xs);line-height:1.7;box-shadow:0 10px 28px rgba(0,0,0,.25);max-width:280px;backdrop-filter:blur(4px)}
.wl-tip i{margin-right:6px;vertical-align:0;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.wl-tip .up{color:#6ee7b7;font-weight:700}.wl-tip .dn{color:#fda4af;font-weight:700}

/* โดนัท */
.dn{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dn-c{position:relative;width:170px;height:170px;flex:none;margin:0 auto}
.dn-c svg{width:100%;height:100%;animation:spin .9s cubic-bezier(.2,.8,.2,1) both}
.dn-c .track{fill:none;stroke:var(--line2);stroke-width:22}
.dn-c .seg{fill:none;stroke-width:22;transition:stroke-width .15s;cursor:pointer}
.dn-c .seg:hover{stroke-width:28}
@keyframes spin{from{transform:rotate(-90deg) scale(.85);opacity:0}to{transform:none;opacity:1}}
.dn-m{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.dn-m b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.dn-m span{font-size:var(--fs-xs);color:var(--ink3);max-width:96px;line-height:1.3}
.dn-l{flex:1;min-width:190px;max-width:440px;display:flex;flex-direction:column;gap:2px}
.dn-l>div{display:grid;grid-template-columns:12px 1fr auto auto;gap:8px;align-items:center;font-size:var(--fs-sm);padding:6px 8px;border-radius:8px;color:var(--ink2)}
.dn-l>div:hover{background:var(--line2)}
.dn-l b{color:var(--ink)}
.dn-l em{font-style:normal;color:var(--ink3);font-size:var(--fs-xs);min-width:52px;text-align:right}

/* แถบสัดส่วน */
.mt-b{display:flex;gap:3px;height:14px;border-radius:7px;overflow:hidden;background:var(--line2)}
.mt-b i{display:block;background:var(--c);min-width:3px;transform-origin:left;animation:growx .7s cubic-bezier(.2,.8,.2,1) both}
.mt-b i:hover{filter:brightness(1.12)}
.mt-l{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:9px;font-size:var(--fs-xs);color:var(--ink2)}
.mt-l span{display:inline-flex;align-items:center;gap:6px}
.mt-l b{color:var(--ink)}
.mt-l em{font-style:normal;color:var(--ink3)}
.ks .mt-b{height:9px}
.ks .mt-l{margin-top:6px}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* วงแหวน */
.rgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.rg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.rg svg{width:76px;height:76px}
.rg .track{fill:none;stroke:var(--line2);stroke-width:8}
.rg .arc{fill:none;stroke-width:8;stroke-linecap:round;animation:ring 1s ease both}
@keyframes ring{from{stroke-dasharray:0 999}}
.rg b{display:block;font-size:var(--fs-xl);font-weight:700}
.rg span{display:block;font-size:var(--fs-xs);color:var(--ink2);font-weight:600}
.rg em{display:block;font-style:normal;font-size:var(--fs-2xs);color:var(--ink3)}
.mini-h{font-size:var(--fs-xs);font-weight:700;color:var(--ink2);margin-bottom:8px}

/* อันดับ */
.rk{display:flex;flex-direction:column;gap:6px}
.rk-r{display:flex;gap:12px;align-items:flex-start;padding:7px 8px;border-radius:10px;color:var(--ink)}
.rk-r:hover{background:var(--line2)}
.rk-n{width:24px;height:24px;border-radius:7px;background:var(--line2);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;color:var(--ink2);flex:none}
.rk-r:first-child .rk-n{background:var(--ink);color:#fff}
.rk-b{flex:1;min-width:0}
.rk-t{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm)}
.rk-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rk-bar{height:8px;border-radius:4px;background:var(--line2);margin-top:6px;overflow:hidden}
.rk-bar i{display:block;height:100%;border-radius:4px;background:var(--c);transform-origin:left;animation:growx .7s cubic-bezier(.2,.8,.2,1) both}
.rk-b em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--ink3);margin-top:3px}

/* กรวย */
.fn{display:flex;flex-direction:column;gap:2px}
.fn-r{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:center}
.fn-l{font-size:var(--fs-sm);font-weight:600;color:var(--ink2)}
.fn-w{display:flex;justify-content:center}
.fn-w i{display:flex;align-items:center;justify-content:center;gap:4px;height:38px;border-radius:9px;font-style:normal;font-size:var(--fs-sm);white-space:nowrap;
  animation:growx .7s cubic-bezier(.2,.8,.2,1) both;transform-origin:center}
.fn-cv{margin-left:204px;text-align:center;font-size:var(--fs-2xs);color:var(--ink3);font-weight:600;padding:1px 0}
@media (max-width:620px){ .fn-r{grid-template-columns:1fr} .fn-cv{margin-left:0} }

/* แถบขั้นตอน */
.flw{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding-bottom:2px}
.flw-s{flex:1;min-width:150px;display:flex;gap:11px;align-items:center;padding:13px 15px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow)}
a.flw-s:hover{border-color:#bfbfc8}
.flw-i{width:26px;height:26px;border-radius:50%;background:var(--line2);color:var(--ink3);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;flex:none}
.flw-s b{display:block;font-size:22px;line-height:1.1}
.flw-s>div>span{display:block;font-size:var(--fs-xs);color:var(--ink2);font-weight:600}
.flw-s em{font-style:normal;font-size:var(--fs-2xs);color:var(--ink3)}
.flw-s.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),var(--shadow)}
.flw-s.on .flw-i{background:var(--ink);color:#fff}
.flw-s.bad{border-color:var(--danger-line);background:var(--danger-soft)}
.flw-s.bad .flw-i{background:var(--danger);color:#fff}
.flw-s.done .flw-i{background:var(--ok-soft);color:var(--ok)}
.flw-a{display:grid;place-items:center;color:#c2c2ca;flex:none}
@media (max-width:760px){ .flw-a{display:none} .flw-s{min-width:140px} }

/* สรุปภาษาคน */
.ins-l{display:flex;flex-direction:column;padding:6px 8px 10px}
.ins-r{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:12px;color:var(--ink);font-size:var(--fs-sm);line-height:1.55}
a.ins-r:hover{background:var(--line2)}
.ins-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--ink2)}
.ins-r.ok .ins-i{background:var(--ok-soft);color:var(--ok)}
.ins-r.bad .ins-i{background:var(--danger-soft);color:var(--danger)}
.ins-r.warn .ins-i{background:var(--warn-soft);color:var(--warn)}
.ins-r>div{flex:1}
.ins-go{color:var(--ink3);opacity:0;margin-top:6px}
a.ins-r:hover .ins-go{opacity:1}

/* หน้าหลัก */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:22px;align-items:center;padding:24px 26px;border-radius:20px;color:#fff;
  background:radial-gradient(1200px 300px at 100% 0%,rgba(91,75,209,.35),transparent 60%),linear-gradient(120deg,#0d0d10,#24242b);box-shadow:var(--shadow-lg)}
.hero-t>span{font-size:var(--fs-sm);opacity:.7}
.hero h2{margin:4px 0 6px;font-size:24px;font-weight:700}
.hero p{margin:0;opacity:.85;font-size:var(--fs-md);line-height:1.6}
.todo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.td{display:flex;flex-direction:column;gap:2px;padding:13px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;transition:.15s}
.td:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.td-i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;margin-bottom:6px;background:rgba(255,255,255,.14)}
.td b{font-size:26px;line-height:1}
.td>span:not(.td-i){font-size:var(--fs-xs);opacity:.85;line-height:1.35}
.td.bad .td-i{background:#e2486b}.td.warn .td-i{background:#c98a14}.td.ok .td-i{background:#1f9a6c}.td.info .td-i{background:#5B4BD1}
@media (max-width:1200px){ .hero{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){ .todo{grid-template-columns:repeat(2,minmax(0,1fr))} }
.depts{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.dept{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.dept-h{display:flex;gap:12px;align-items:flex-start}
.dept-i{width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.dept-i svg{width:21px;height:21px}
.dept-h b{display:block;font-size:var(--fs-lg)}
.dept-h>div>span{display:block;font-size:var(--fs-xs);color:var(--ink3);line-height:1.5;margin-top:2px}
.dept-s{font-size:var(--fs-xs);font-weight:700;color:var(--ink2);background:var(--line2);border-radius:8px;padding:6px 10px}
.dept-l{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.dept-l a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:9px;color:var(--ink);font-size:var(--fs-sm);font-weight:600}
.dept-l a:hover{background:var(--line2)}
.dept-l a svg{color:var(--ink3)}
.demo-note{display:flex;gap:8px;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--ink3);padding:4px}
.shr{display:flex;align-items:center;gap:8px}
@media (prefers-reduced-motion:reduce){ *{animation:none!important} .wl-chart .ln{stroke-dashoffset:0} .wl-chart .ar,.wl-chart .pt,.wl-chart .lastv{opacity:1} }

/* โลโก้จริง (รูป) — 14 ต.ค. 2569 ผู้ใช้ขอกลับมาใช้รูปโลโก้ */
.wl-logoimg{display:block;width:100%;max-width:188px;height:auto}
.app.narrow .wl-logoimg{max-width:44px;margin:0 auto;object-fit:cover;object-position:8% 50%;height:30px}
@media (max-width:1024px){ .app.narrow .wl-logoimg{max-width:188px;height:auto;margin:0;object-fit:initial} }

/* ยอดขายแพลตฟอร์ม */
.pbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink2);cursor:pointer}
.pchip i,.pname i{width:10px;height:10px;border-radius:3px;background:var(--c);display:inline-block;flex:none}
.pchip:hover{border-color:#bfbfc8;color:var(--ink)}
.pchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pchip.on i{box-shadow:0 0 0 1.5px #fff}
.pname{display:inline-flex;align-items:center;gap:8px}
.wl-chart .mk{font-size:10px;font-weight:700;fill:var(--danger);paint-order:stroke;stroke:#fff;stroke-width:3px}
.wf{display:flex;flex-direction:column;gap:9px}
.wf-r{display:grid;grid-template-columns:130px 1fr 64px;gap:10px;align-items:center;font-size:var(--fs-sm)}
.wf-l{color:var(--ink2);font-weight:600;line-height:1.3}
.wf-t{position:relative;height:22px;background:var(--line2);border-radius:6px;overflow:hidden}
.wf-t i{position:absolute;top:0;bottom:0;border-radius:5px;background:#9a9aa6;transform-origin:left;animation:growx .7s cubic-bezier(.2,.8,.2,1) both}
.wf-r.base .wf-t i{background:var(--s1)}
.wf-r.minus .wf-t i{background:#e58aa0}
.wf-r.end .wf-t i{background:var(--ok)}
.wf-r b{text-align:right}
.wf-r.minus b{color:var(--danger)}
.wf-r.end{padding-top:9px;border-top:1px dashed var(--line)}
.tk-big{margin-bottom:14px}
.tk-big b{display:block;font-size:24px;font-weight:700}
.tk-big span{font-size:var(--fs-xs);color:var(--ink3)}
.kpis.one{grid-template-columns:minmax(0,1fr)}
.kpis.one .kpi{height:100%}