/* ============================================================
   Prakandd v5 — สว่าง อ่านง่าย ใช้ง่าย
   ------------------------------------------------------------
   หลักคิด: ทำให้เจ้าหน้าที่ที่ไม่ใช่สายไอทีใช้ได้ทันทีโดยไม่ต้องสอน
   - ตัวหนังสือใหญ่ (base 15px) เว้นระยะเยอะ ไม่อัดแน่น
   - ทุกปุ่ม/เมนู มีคำไทยกำกับ ไม่ใช้ไอคอนล้วน
   - สถานะเขียนเป็นประโยค ไม่ใช่โค้ด
   - ไม่มีคีย์ลัด ไม่มีลากวาง ไม่มีฟอนต์ monospace
   ============================================================ */

:root {
  color-scheme: light;

  --bg: #f3f5f9;
  --surface: #ffffff;
  --soft: #f7f9fc;
  --line: #e4e9f0;
  --line-2: #d2dae5;

  --ink: #1b2333;
  --ink-2: #5a6779;
  --ink-3: #9aa4b2;

  /* สีหลัก: น้ำเงินสด ดูน่าเชื่อถือแต่ไม่ทึบเหมือนของเดิม */
  --brand: #3b6ff5;
  --brand-dark: #2b57d0;
  --brand-soft: #eaf0ff;

  --ok: #12a150;
  --ok-soft: #e7f7ee;
  --warn: #e8890c;
  --warn-soft: #fdf3e3;
  --bad: #e0424a;
  --bad-soft: #fdeced;
  --purple: #7c5cf0;
  --purple-soft: #f0ecfe;
  --teal: #0f9b95;
  --teal-soft: #e5f6f5;
  --line-green: #06c755;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --sh-1: 0 1px 2px rgba(27, 35, 51, .05);
  --sh-2: 0 2px 8px rgba(27, 35, 51, .07);
  --sh-3: 0 10px 28px rgba(27, 35, 51, .11);
  --sh-4: 0 24px 60px rgba(27, 35, 51, .2);

  --f: "Noto Sans Thai", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--f); font-size: 16px; line-height: 1.72;  /* 15→16 sync กับ core/style.css (2026-08-21 ขยายทั้งระบบ) */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--brand-dark); text-decoration: none; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ============================================================
   แถบบน — เมนูเป็นคำไทย อ่านออกทันที
   ============================================================ */
.top {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.top__in {
  max-width: none; margin: 0; padding: 0 20px;   /* เต็มจอ — เดิม 1280px กลางจอ เมนูล้นเลื่อนไม่ได้ */
  height: 68px; display: flex; align-items: center; gap: 16px;
}
.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo img { width: 40px; height: 40px; border-radius: 11px; }
.logo__t b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.logo__t span { font-size: 11.5px; color: var(--ink-3); }

/* เมนูยืดเต็มพื้นที่ที่เหลือ + เลื่อนแนวนอนได้ถ้าล้น (จอเล็กจะได้ไม่ตกขอบเลื่อนไม่ถึง) */
.menu { display: flex; gap: 4px; align-items: center; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.menu::-webkit-scrollbar { height: 5px; }
.menu::-webkit-scrollbar-thumb { background: var(--line-2, #cbd5e1); border-radius: 3px; }
.menu a {
  display: flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  padding: 9px 13px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
}
.menu a:hover { background: var(--soft); color: var(--ink); }
.menu a.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.menu a .i { font-size: 16px; }

.top__grow { flex: 0 0 8px; }   /* เมนูยืดเต็มแล้ว (flex:1) ตัวคั่นไม่ต้องแย่งพื้นที่ */
.me { display: flex; align-items: center; gap: 10px; flex: none; }
.me__av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
}
.me__t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.me__t span { font-size: 12px; color: var(--ink-3); }

/* เมนูมือถือ */
.burger { display: none; }
.mmenu { display: none; }

.page { max-width: 1280px; margin: 0 auto; padding: 26px 22px 60px; }

/* ============================================================
   หัวเรื่อง + คำทักทาย
   ============================================================ */
.hello { margin-bottom: 22px; }
.hello h1 { font-size: 27px; margin-bottom: 4px; }
.hello p { margin: 0; color: var(--ink-2); font-size: 15px; }
.hello b { color: var(--ink); }

.headrow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.headrow h1 { font-size: 24px; }
.headrow p { margin: 3px 0 0; color: var(--ink-2); font-size: 14px; }
.headrow .grow { flex: 1; }

/* ============================================================
   กล่องค้นหา — ใหญ่ ชัด มีตัวอย่าง
   ============================================================ */
.find {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 18px 20px; margin-bottom: 20px;
}
.find__l { font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.find__row { display: flex; gap: 10px; flex-wrap: wrap; }
.find__box { flex: 1; min-width: 240px; position: relative; }
.find__box .i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 17px; pointer-events: none;
}
.find__box input {
  width: 100%; height: 50px; padding: 0 16px 0 44px;
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-family: var(--f); font-size: 15px;
}
.find__box input::placeholder { color: var(--ink-3); }
.find__box input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.find__eg { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; }
.find__eg b { color: var(--ink-2); font-weight: 600; }

/* ============================================================
   แท็บสถานะ — คำไทย + จำนวน
   ============================================================ */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  font-family: var(--f); font-size: 14px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: all .13s;
}
.tab:hover { border-color: var(--brand); color: var(--ink); }
.tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.tab__n {
  background: var(--soft); border-radius: 999px; padding: 0 8px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.tab.on .tab__n { background: rgba(255,255,255,.26); color: #fff; }

/* ============================================================
   การ์ดงาน — กะทัดรัด 3 บรรทัด กดเพื่อดูข้อมูลครบ
   ============================================================ */
.works { display: flex; flex-direction: column; gap: 9px; }
.work {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
  transition: box-shadow .14s, border-color .14s;
}
.work:hover { box-shadow: var(--sh-2); border-color: var(--line-2); }
.work.open { border-color: var(--brand); box-shadow: var(--sh-2); }

/* หัวการ์ด (กดได้) */
.work__hd {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; width: 100%;
  background: none; border: 0; text-align: left; font-family: var(--f);
}
.plate {
  background: var(--ink); color: #fff; border-radius: 7px;
  padding: 3px 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
.plate--none { background: var(--line-2); color: var(--ink-2); font-size: 13px; }
/* display:block จำเป็น — ถ้าเป็น inline span การตัด ... จะไม่ทำงานและข้อความจะดันจนล้นจอ */
.work__mid { display: block; min-width: 0; overflow: hidden; }
.work__name { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.work__sub {
  display: block; font-size: 12.5px;   line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.work__money { font-size: 15px; font-weight: 700; color: red; white-space: nowrap; }
.work__caret {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; color: #1a75bb; font-size: 25px; transition: transform .18s;
}
.work.open .work__caret { transform: rotate(180deg); color: var(--brand); }
.work__tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* แถบความคืบหน้าเล็กใต้หัว */
.work__line {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 12px; font-size: 12.5px; color: var(--ink-2);
}
.work__linebar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; max-width: 180px; }
.work__linebar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.work__linebar i.ok { background: var(--ok); }
.work__step { font-weight: 600; color: var(--ink); white-space: nowrap; }
.work__ago { margin-left: auto; color: var(--ink-3); white-space: nowrap; }

/* ส่วนที่กางออก */
.work__more { display: none; border-top: 1px solid var(--line); padding: 16px 14px; }
.work.open .work__more { display: block; }
.work__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px 18px;
}
.cell__k { font-size: 12px; margin-bottom: 1px; }
.cell__v { font-size: 13px; font-weight: 600; word-break: break-word; }
.cell__v.money { color: red; }

.prog { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-top: 16px; }
.prog__t { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.prog__now { font-size: 14px; font-weight: 700; }
.prog__cnt { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
.prog__bar { height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.prog__bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .5s; }
.prog__bar i.ok { background: var(--ok); }
.prog__next { font-size: 13px; color: var(--ink-2); margin-top: 9px; }
.prog__next b { color: var(--ink); font-weight: 600; }

.work__acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

/* ป้ายสถานะ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--ps); color: var(--pc);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--open { --pc: #1d4ed8; --ps: #e8effe; }
.pill--wait { --pc: var(--ink-2); --ps: var(--soft); }
.pill--progress { --pc: var(--warn); --ps: var(--warn-soft); }
.pill--hold { --pc: #b45309; --ps: #fef3e2; }
.pill--closing { --pc: #6d28d9; --ps: var(--purple-soft); }
.pill--done { --pc: var(--ok); --ps: var(--ok-soft); }
.pill--cancel { --pc: var(--ink-3); --ps: var(--soft); }

.flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  background: var(--fs); color: var(--fc);
}
.flag--urgent { --fc: var(--bad); --fs: var(--bad-soft); }
.flag--high { --fc: var(--warn); --fs: var(--warn-soft); }
.flag--normal { --fc: var(--brand-dark); --fs: var(--brand-soft); }
.flag--low { --fc: var(--ink-3); --fs: var(--soft); }
 
 
 
.late {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 8px;
  background: var(--bad-soft); color: var(--bad);
  font-size: 12.5px; font-weight: 700;
}
.ontime { font-size: 12.5px; color: var(--ok); font-weight: 600; }

/* ============================================================
   ป้าย SLA — บอกเวลาที่เหลือแบบเห็นปุ๊บเข้าใจปั๊บ
   ============================================================ */
.sla {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--sb); color: var(--sc); border: 1px solid var(--sbd);
}
.sla__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sla--ok   { --sc: #0b7a3c; --sb: var(--ok-soft);   --sbd: #b9ecce; }
.sla--warn { --sc: #a15c05; --sb: var(--warn-soft); --sbd: #f3d5a8; }
.sla--late { --sc: #b3272e; --sb: var(--bad-soft);  --sbd: #f4b9bc; }
.sla--done { --sc: var(--ink-3); --sb: var(--soft); --sbd: var(--line); }
/* ยังไม่มีใครกดรับ = SLA ยังไม่เริ่มนับ */
.sla--waiting { --sc: #6d28d9; --sb: #f0ecfe; --sbd: #d9cffc; }
.sla--late .sla__dot { animation: slaBlink 1.4s ease-in-out infinite; }
@keyframes slaBlink { 50% { opacity: .25; } }

/* แถบเวลาที่เหลือในบรรทัดสรุปการ์ด */
.slabar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; max-width: 90px; flex: none; }
.slabar i { display: block; height: 100%; border-radius: 999px; }

/* การ์ดที่เกินกำหนด — ขอบแดงให้สะดุดตา */
.work.is-late { border-color: #f0b4b8; }
.work.is-late .work__hd { background: linear-gradient(90deg, #fdf0f1, transparent 55%); }

/* ★ การ์ด "ติดปัญหา" — ต้องสะดุดตากว่าเกินกำหนด: ขอบซ้ายแดงหนา + พื้นแดงอ่อน
   ใช้ !important + specificity สูง เพื่อชนะกฎ .work ของสกิน ChatCenter ที่ใส่ !important ไว้ */
.work.is-hold { border-color: #eab4b0 !important; border-left: 4px solid #d92d20 !important; }
.work.is-hold .work__hd { background: linear-gradient(90deg, #fdecea, transparent 60%); }
/* ป้าย "ติดปัญหา" บนการ์ด — แดงเต็ม เห็นแต่ไกล */
.holdtag { display: inline-flex; align-items: center; gap: 4px;
  background: #d92d20; color: #fff; font-weight: 700; font-size: 12px;
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(217,45,32,.32); }

.donetag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 8px;
  background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 700;
}

/* ============================================================
   ปุ่ม — ใหญ่ กดง่าย มีคำเสมอ
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; border: 1.5px solid transparent;
  font-family: var(--f); font-size: 14.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .13s, border-color .13s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--p { background: var(--brand); color: #fff; }
.btn--p:hover:not(:disabled) { background: var(--brand-dark); }
.btn--ok { background: var(--ok); color: #fff; }
.btn--ok:hover:not(:disabled) { filter: brightness(1.08); }
.btn--line { background: var(--line-green); color: #fff; }
.btn--line:hover:not(:disabled) { filter: brightness(1.07); }
.btn--bad { background: var(--bad); color: #fff; }
.btn--g { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.btn--g:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.btn--sm { padding: 7px 14px; font-size: 13.5px; }
.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--blk { width: 100%; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ============================================================
   แผง
   ============================================================ */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  margin-bottom: 18px; overflow: hidden;
}
.panel__h {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.panel__h h2, .panel__h h3 { font-size: 15px; }
.panel__h .grow { flex: 1; }
.panel__b { padding: 20px; }

/* ============================================================
   ฟอร์ม — ช่องใหญ่ ป้ายชัด
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; }
.fd { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fd--full { grid-column: 1 / -1; }
.fd--2 { grid-column: span 2; }
.fd__l { font-size: 14px; font-weight: 600; color: var(--ink); }
.fd__l .rq { color: var(--bad); }
.fd__h { font-size: 12.5px; color: var(--ink-3); }
.fd__e { font-size: 13px; color: var(--bad); font-weight: 500; display: none; }
.fd.bad .fd__e { display: block; }

.in, .sel, .ta {
  width: 100%; padding: 8px 14px;
  border: 1.5px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-family: var(--f); font-size: 15px;
}
.in::placeholder, .ta::placeholder { color: var(--ink-3); }
.in:focus, .sel:focus, .ta:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.in.bad, .sel.bad { border-color: var(--bad); background: #fff; }
.in:disabled, .sel:disabled { background: var(--soft); color: var(--ink-2); }
.ta { min-height: 100px; resize: vertical; }
.sel {
  appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%239aa4b2' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 13px;
}

/* ตัวเลือกแบบกด */
.picks { display: flex; flex-wrap: wrap; gap: 9px; }
.pick {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px; border-radius: 10px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; user-select: none; transition: all .12s;
}
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:hover { border-color: var(--brand); color: var(--ink); }
.pick:has(input:checked) {
  background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand-dark); font-weight: 700;
}
.pick:has(input:checked)::before { content: "✓"; font-weight: 700; }
.pick:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--brand-soft); }

/* ============================================================
   ตัวช่วยกรอก 3 ขั้นตอน (หน้าเปิด Ticket)
   ============================================================ */
.wiz { display: flex; gap: 0; margin-bottom: 24px; }
.ws { flex: 1; position: relative; text-align: center; }
.ws::after {
  content: ""; position: absolute; top: 22px; left: 50%; width: 100%; height: 3px;
  background: var(--line); z-index: 0;
}
.ws:last-child::after { display: none; }
.ws.done::after { background: var(--ok); }
.ws__n {
  position: relative; z-index: 1; margin: 0 auto 8px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2.5px solid var(--line-2);
  color: var(--ink-3); font-size: 16px; font-weight: 700;
}
.ws.done .ws__n { background: var(--ok); border-color: var(--ok); color: #fff; }
.ws.now .ws__n {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 0 0 5px var(--brand-soft);
}
.ws__t { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ws.now .ws__t, .ws.done .ws__t { color: var(--ink); }
.ws__s { font-size: 12px; color: var(--ink-3); }
.ws.now { cursor: default; }
.ws { cursor: pointer; }

.step-body { display: none; }
.step-body.on { display: block; }

/* ============================================================
   ขั้นตอนงาน (แนวนอน)
   ============================================================ */
.track { display: flex; overflow-x: auto; padding: 6px 0; }
.tstep { flex: 1 0 auto; min-width: 105px; text-align: center; position: relative; padding: 0 5px; }
.tstep::after {
  content: ""; position: absolute; top: 16px; left: 50%; width: 100%; height: 3px;
  background: var(--line); z-index: 0;
}
.tstep:last-child::after { display: none; }
.tstep.done::after { background: var(--ok); }
.tstep__d {
  position: relative; z-index: 1; margin: 0 auto 7px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line-2);
  color: var(--ink-3); font-size: 14px; font-weight: 700;
}
.tstep.done .tstep__d { background: var(--ok); border-color: var(--ok); color: #fff; }
.tstep.now .tstep__d {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 0 0 5px var(--brand-soft);
}
.tstep__l { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.tstep.done .tstep__l, .tstep.now .tstep__l { color: var(--ink); font-weight: 600; }

/* ============================================================
   ประวัติการทำงาน
   ============================================================ */
.flow { display: flex; flex-direction: column; }
.fnode { display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.fnode__rail { display: flex; flex-direction: column; align-items: center; }
.fnode__ico {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 14px;
  background: var(--soft); border: 2px solid var(--line); color: var(--ink-3);
}
.fnode__line { flex: 1; width: 3px; background: var(--line); margin: 4px 0; border-radius: 3px; }
.fnode:last-child .fnode__line { display: none; }
.fnode__body { padding-bottom: 22px; min-width: 0; }
.fnode:last-child .fnode__body { padding-bottom: 0; }
.fnode.done .fnode__ico { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.fnode.done .fnode__line { background: var(--ok-soft); }
.fnode.now .fnode__ico {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.fnode__t { font-size: 12.5px; color: var(--ink-3); }
.fnode__h { font-size: 15px; font-weight: 700; margin: 2px 0 3px; }
.fnode__d { font-size: 14px; color: var(--ink-2); }
.fnode__by { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.fnode__by b { color: var(--ink-2); font-weight: 600; }

.bar { height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .5s; }

/* ============================================================
   ข้อความแจ้ง
   ============================================================ */
.msg {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r);
  font-size: 13px; background: var(--ms); color: var(--mc);
  border: 1px solid color-mix(in srgb, var(--mc) 22%, transparent);
}
.msg__i { flex: none; font-size: 17px; line-height: 1.4; }
.msg b { display: inline; margin-bottom: 2px; }
.msg ol, .msg ul { margin: 6px 0 0; padding-left: 20px; }
.msg li { margin: 2px 0; }
.msg--info { --mc: var(--brand-dark); --ms: var(--brand-soft); }
.msg--warn { --mc: #a15c05; --ms: var(--warn-soft); }
.msg--err { --mc: #b3272e; --ms: var(--bad-soft); }
.msg--ok { --mc: #0b7a3c; --ms: var(--ok-soft); }
.msg--line { --mc: #068a3c; --ms: #e8faf0; }

/* ============================================================
   แนบไฟล์
   ============================================================ */
.drop-zone {
  border: 2px dashed var(--line-2); border-radius: var(--r);
  padding: 30px 20px; text-align: center; background: var(--soft); cursor: pointer;
  transition: all .14s;
}
.drop-zone:hover, .drop-zone.over { border-color: var(--brand); background: var(--brand-soft); }
.drop-zone__i { font-size: 30px; }
.drop-zone__t { font-size: 15px; font-weight: 600; margin-top: 8px; }
.drop-zone__h { font-size: 13px; color: var(--ink-3); }
.flist { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.fitem {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); font-size: 14px;
}
.fitem__i { font-size: 18px; }
.fitem__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fitem__s { color: var(--ink-3); font-size: 12.5px; }
.fitem__x {
  background: none; border: 0; color: var(--ink-3); cursor: pointer;
  font-size: 17px; padding: 2px 6px; border-radius: 6px;
}
.fitem__x:hover { color: var(--bad); background: var(--bad-soft); }

/* ============================================================
   กล่องเด้ง
   ============================================================ */
.mask {
  position: fixed; inset: 0; z-index: 100; background: rgba(27, 35, 51, .5);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.mask.on { display: flex; }
.dlg {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-4);
  width: min(1020px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  animation: pop .16s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.dlg__h { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dlg__h h3 { font-size: 18px; }
.dlg__h .grow { flex: 1; }
.dlg__b { padding: 22px; overflow-y: auto; }
.dlg__f {
  padding: 16px 22px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; background: var(--soft);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.x {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 9px;
  color: var(--ink-3); font-size: 19px; cursor: pointer;
}
.x:hover { background: var(--soft); color: var(--ink); }

/* ============================================================
   แจ้งเตือนมุมจอ
   ============================================================ */
.toasts { position: fixed; right: 10px; top: 10px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }

.toast {
  display: flex; align-items: center; gap: 11px; min-width: 280px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--ok); border-radius: var(--r);
  box-shadow: var(--sh-3); font-size: 14.5px; animation: tin .2s ease-out;
}
.toast--err { border-left-color: var(--bad); }
.toast--info { border-left-color: var(--brand); }
@keyframes tin { from { opacity: 0; transform: translateX(20px); } }

/* ============================================================
   ว่างเปล่า
   ============================================================ */
.void { padding: 60px 20px; text-align: center; }
.void__i { font-size: 46px; }
.void__t { font-size: 17px; font-weight: 700; margin-top: 10px; }
.void__d { font-size: 14px; color: var(--ink-2); margin-top: 5px; }

/* ============================================================
   กรมธรรม์
   ============================================================ */
.polbox {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #b9ecce; background: #f0fbf5;
  border-radius: var(--r); padding: 16px 18px;
}
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 20px; }
.kv__k { font-size: 12.5px; color: var(--ink-3); }
.kv__v { font-size: 14.5px; font-weight: 600; margin-top: 1px; word-break: break-word; }

/* ============================================================
   ตาราง (สำหรับคนที่ชินของเดิม)
   ============================================================ */
.tblwrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 1100px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2; background: var(--soft);
  border-bottom: 2px solid var(--line-2); padding: 13px 14px; text-align: left;
  font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--brand-soft); }

/* ============================================================
   LINE จำลอง
   ============================================================ */
.phone { width: 340px; flex: none; border: 10px solid #22282f; border-radius: 34px; background: #8CABD8; overflow: hidden; box-shadow: var(--sh-3); }
.phone__bar { background: #22282f; color: #fff; padding: 7px 14px; font-size: 11px; display: flex; justify-content: space-between; }
.phone__nav { background: #06c755; color: #fff; padding: 10px 14px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.phone__chat { height: 450px; overflow-y: auto; padding: 12px; background: #8CABD8; display: flex; flex-direction: column; gap: 10px; }
.lmsg { display: flex; gap: 7px; align-items: flex-end; }
.lmsg__av { width: 30px; height: 30px; border-radius: 50%; flex: none; background: #fff; display: grid; place-items: center; overflow: hidden; }
.lmsg__av img { width: 100%; height: 100%; object-fit: contain; }
.lmsg__body { max-width: 230px; }
.lmsg__name { font-size: 10.5px; color: #33405a; margin-bottom: 3px; }
.lbub { background: #fff; border-radius: 16px; padding: 9px 12px; font-size: 13px; color: #1b2333; line-height: 1.55; }
.lmsg__time { font-size: 9.5px; color: #33405a; align-self: flex-end; margin-bottom: 3px; }
.flexb { width: 230px; background: #fff; border-radius: 14px; overflow: hidden; font-size: 12.5px; }
.flexb__hero { background: #06c755; padding: 12px 14px; color: #fff; }
.flexb__hero b { font-size: 14px; display: block; }
.flexb__hero span { font-size: 11px; opacity: .92; }
.flexb__body { padding: 12px 14px; }
.flexb__kv { display: flex; gap: 8px; font-size: 11.5px; margin-bottom: 5px; }
.flexb__k { color: #9aa4b2; width: 64px; flex: none; }
.flexb__v { color: #1b2333; font-weight: 600; flex: 1; word-break: break-word; }
.flexb__file { display: flex; align-items: center; gap: 9px; border: 1px solid #e4e9f0; border-radius: 9px; padding: 8px 10px; margin: 10px 0 8px; background: #f7f9fc; }
.flexb__file b { font-size: 11.5px; display: block; color: #1b2333; }
.flexb__file span { font-size: 10px; color: #9aa4b2; }
.flexb__btn { display: block; text-align: center; background: #06c755; color: #fff; border-radius: 8px; padding: 9px; font-size: 12.5px; font-weight: 600; border: 0; width: 100%; cursor: pointer; font-family: var(--f); }
.flexb__btn--g { background: #fff; color: #06c755; border: 1.5px solid #06c755; margin-top: 7px; }
.flexb__foot { padding: 0 14px 12px; font-size: 10px; color: #9aa4b2; text-align: center; }

.json {
  background: #1b2333; color: #e9eef4; border-radius: var(--r);
  padding: 16px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.7;
  overflow-x: auto; white-space: pre; max-height: 420px; overflow-y: auto;
}
.json .k { color: #93c5fd; } .json .s { color: #86efac; }
.json .n { color: #fcd34d; } .json .b { color: #f0abfc; }

.log { display: flex; flex-direction: column; gap: 8px; }
.logline {
  display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--r);
  background: var(--soft); border: 1px solid var(--line); font-size: 13.5px;
}
.logline__t { color: var(--ink-3); flex: none; }
.logline--ok { border-left: 3px solid var(--ok); }
.logline--err { border-left: 3px solid var(--bad); }

/* ป้ายบอกสถานะงานล่าสุด (ข้อความอิสระ) */
.note {
  display: inline-block; padding: 4px 11px; border-radius: 8px;
  background: var(--warn-soft); color: #a15c05;
  font-size: 13px; font-weight: 600;
}

/* ============================================================
   Utilities
   ============================================================ */
.dim { color: var(--ink); }
.mono, .num { font-variant-numeric: tabular-nums; }
.phead { margin-bottom: 20px; }
.phead__grow { flex: 1; }
.nw { white-space: nowrap; }
.ctr { text-align: center; }
.hs { display: flex; align-items: center; gap: 10px; }
.vs { display: flex; flex-direction: column; gap: 10px; }
.wrapf { flex-wrap: wrap; }
.grow { flex: 1; }
.hr { height: 1px; background: var(--line); margin: 20px 0; border: 0; }
.only-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .menu { display: none; }
  .burger {
    display: grid; place-items: center; width: 42px; height: 42px;
    border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface);
    font-size: 18px; cursor: pointer; color: var(--ink-2);
  }
  .mmenu {
    display: none; position: fixed; inset: 68px 0 auto 0; z-index: 49;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px; box-shadow: var(--sh-3);
  }
  .mmenu.on { display: block; }
  .mmenu a {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--ink-2);
  }
  .mmenu a.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
  .me__t { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .top__in { padding: 0 14px; gap: 12px; height: 62px; }
  .mmenu { inset-block-start: 62px; }
  .logo__t span { display: none; }
  .page { padding: 18px 14px 50px; }
  .hello h1 { font-size: 22px; }
  .headrow h1 { font-size: 20px; }
  /* การ์ดบนมือถือ: ป้ายสถานะลงบรรทัดใหม่ ไม่เบียดชื่อลูกค้า */
  .work__hd { grid-template-columns: auto 1fr auto; gap: 10px; padding: 11px 12px; }
  .work__tags { grid-column: 1 / -1; order: 3; }
  .work__money { font-size: 14px; }
  .work__line { padding: 0 12px 11px; font-size: 12px; flex-wrap: wrap; }
  .work__linebar { max-width: 100px; }
  .work__ago { width: 100%; margin-left: 0; }
  .work__more { padding: 14px 12px; }
  .work__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .work__acts .btn { flex: 1; }
  .fd--2 { grid-column: span 1; }
  .dlg__f { flex-direction: column-reverse; }
  .dlg__f .btn { width: 100%; }
  .phone { width: 100%; }
  .ws__s { display: none; }
  .ws__t { font-size: 12.5px; }
  .btnrow .btn { flex: 1; }
}

@media print {
  .top, .btn, .tabs, .find, .noprint { display: none !important; }
  .panel, .work { break-inside: avoid; box-shadow: none; }
}

/* ============================================================
   จอคอม (≥961px): เมนูย้ายมาเป็น "แถบซ้าย" · เนื้อหาเต็มจอ
   — จอมือถือยังใช้แถบบน + เบอร์เกอร์เหมือนเดิม (บล็อกด้านบน)
   ============================================================ */
@media (min-width: 961px) {
  .top {
    position: fixed; inset: 0 auto 0 0; width: 232px; height: 100vh;
    border-bottom: none; border-right: 1px solid var(--line); z-index: 50;
  }
  .top__in {
    flex-direction: column; align-items: stretch; height: 100%;
    padding: 16px 12px; gap: 10px; overflow-y: auto;
  }
  /* โลโก้ดวงเจริญ — ใหญ่ชัด พื้นหลังโปร่งใส (แถบขาว ไม่ต้องมีกรอบขาว) */
  .logo { padding: 2px 6px 6px; gap: 10px; }
  .logo img { width: 44px; height: 44px; background: transparent; }
  .logo__t b { font-size: 15px; letter-spacing: -.2px; }
  .logo__t span { font-size: 11px; }
  /* เมนูเรียงลงแนวตั้ง เต็มความกว้างแถบ — 11 เมนูต้องพอดีไม่ล้น */
  .menu {
    flex-direction: column; align-items: stretch; gap: 2px;
    overflow-x: visible; overflow-y: auto; min-width: 0; flex: 0 1 auto;
  }
  .menu a { width: 100%; padding: 8px 12px; font-size: 14.5px; }
  /* ดันกล่อง "ฉัน" ลงล่างสุดของแถบ */
  .top__grow { flex: 1 1 auto; }
  .me {
    flex: none; flex-wrap: wrap; gap: 8px;
    border-top: 1px solid var(--line); padding-top: 12px;
  }
  /* แถบซ้ายลอยอยู่นอก flow → เว้นที่ให้ด้วย padding ของ body (กันเนื้อหาซ้อนแถบ)
     เฉพาะหน้าที่มีแถบเมนู (.top) เท่านั้น — หน้าล็อกอินไม่มีแถบ จะได้ไม่เขยิบ */
  body:has(> .top) { padding-left: 232px; }
  /* เนื้อหากว้างเต็มพื้นที่ที่เหลือ ไม่จำกัด 1280px กลางจออีกต่อไป */
  .page { max-width: none; margin: 0; padding: 26px 30px 60px; }
  /* ★ ทุกหน้าต้องกว้างเท่ากัน — ปลดล็อกกล่องครอบด้านในของแต่ละหน้า
     (ฟอร์มเปิดงาน 880 / เช็คสถานะ 900 / channels·ตั้งค่า 1060) ไม่งั้นบางหน้าดูแคบกว่า
     ยกเว้น .dlg (ป็อปอัพ) ที่ต้องคงความแคบไว้ */
  .form-wrap, .wrap2, .pwrap, .hero__in, .hero__bar {
    max-width: none !important; margin-inline: 0 !important;
  }
}