/* =====================================================================
   app.css — Design System ตาม CLAUDE.md
   พื้น #f9fafc · การ์ดขาว · ตัวหนังสือ #1a2032 / รอง #5c6478 · accent #2563eb
   มุมโค้ง 14px · Anuphan (เนื้อหา) + Bai Jamjuree (หัวข้อ/ตัวเลข)
   ปุ่มใหญ่พอกดด้วยนิ้วโป้ง — หัวหน้าฝ่ายใช้ระหว่างเดินในลาน
   ===================================================================== */
:root {
  --bg: #f9fafc;
  --card: #ffffff;
  --ink: #1a2032;
  --ink-2: #5c6478;
  --accent: #2563eb;
  --accent-soft: #eff4ff;
  --line: #e6e9f0;

  /* สีสถานะ — ความหมายเดียวกันทุกหน้าจอ */
  --ok: #16a34a;        --ok-bg: #eafaef;      /* เขียว = พร้อมใช้ */
  --busy: #ea8a00;      --busy-bg: #fff4e5;    /* ส้ม = ถูกจอง/เบิกออก */
  --bad: #dc2626;       --bad-bg: #fdeceb;     /* แดง = ชำรุด */
  --off: #8b93a7;       --off-bg: #f0f1f5;     /* เทา = ส่งซ่อม/จำหน่ายออก */

  /* ---------- สีแบรนด์ (ดึงมาจากโลโก้จริง) ----------
     เจ้าของอยากให้เว็บเข้ากับโลโก้ ดำ-ทอง-เขียวขี้ม้า (16 ก.ย. 2569)

     🚨 หน้าพนักงาน "ไม่" เปลี่ยนเป็นพื้นดำ — ตัดสินใจร่วมกับเจ้าของแล้ว
        เพราะหัวหน้าฝ่ายถือมือถือเดินกลางลานตอนแดดจัด
        ตัวหนังสือทองบนพื้นดำอ่านยากกว่าดำบนขาวมาก
        (หน้าลูกค้าเป็นหน้าขาย เปิดตอนไหนก็ได้ → จัดเต็มดำ-ทองที่ public.css)

     ทองใช้เป็น "สีเน้น" เท่านั้น — ขอบ ไอคอน หัวข้อ
     ห้ามเอาไปทำสีตัวอักษรเนื้อหา และห้ามแตะสีสถานะ 4 สีข้างบน
     เพราะความหมายของสีสถานะสำคัญกว่าความสวย */
  --gold: #c9922f;
  --gold-line: #e3cfa0;      /* ขอบบาง ๆ ให้รู้สึกถึงแบรนด์ ไม่แย่งสายตา */
  --gold-soft: #fdf8ec;      /* พื้นอ่อนตอนเอาเมาส์ชี้ */
  --forest: #3a4a35;         /* เขียวขี้ม้าจากรูปในโลโก้ */

  --r: 14px;
  --shadow: 0 1px 2px rgba(26,32,50,.04), 0 6px 18px rgba(26,32,50,.06);
  --tap: 46px;          /* ขนาดปุ่มขั้นต่ำ ให้กดด้วยนิ้วโป้งได้ */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Anuphan', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, .num { font-family: 'Bai Jamjuree', 'Anuphan', sans-serif; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem;  margin: 0 0 .75rem; }
p { margin: 0 0 .6rem; }
code { background: var(--accent-soft); padding: .1em .4em; border-radius: 6px; font-size: .9em; }
.muted { color: var(--ink-2); }
.small { font-size: .86rem; }
.err { color: var(--bad); font-weight: 500; }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* ---------- การ์ด ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.card + .card { margin-top: .9rem; }

/* ---------- ปุ่ม ---------- */
.btn {
  min-height: var(--tap); padding: 0 1.1rem;
  border-radius: 11px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f4f6fb; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #1d4fd8; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: #eef1f7; }
.btn-lg { width: 100%; min-height: 52px; font-size: 1.02rem; }
.icon-btn {
  width: var(--tap); height: var(--tap); border: 0; background: transparent;
  font-size: 1.3rem; border-radius: 11px; cursor: pointer; color: var(--ink);
}

/* ---------- ฟอร์ม ---------- */
label { display: block; font-weight: 500; margin: .8rem 0 .3rem; font-size: .94rem; }
input, select {
  width: 100%; min-height: var(--tap); padding: .5rem .8rem;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  font: inherit; color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* ---------- ป้ายสถานะ ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 500; background: var(--accent-soft); color: var(--accent);
  white-space: nowrap;
}
.chip.ok   { background: var(--ok-bg);   color: var(--ok); }
.chip.busy { background: var(--busy-bg); color: #b56a00; }
.chip.bad  { background: var(--bad-bg);  color: var(--bad); }
.chip.off  { background: var(--off-bg);  color: var(--off); }

/* ---------- หน้าเปิดระบบ / ตั้งค่า ---------- */
.boot, .login {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem; gap: .35rem;
}
.boot-mark, .login-mark { font-size: 2.6rem; }
.setup-card, .login-card { max-width: 420px; width: 100%; text-align: left; margin-top: 1rem; }
.setup-card ol { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
.setup-card li { margin-bottom: .35rem; }
.login-card { text-align: center; }
.login-card label { text-align: left; }
.login-card h1 { margin-top: .3rem; }
.login-card .btn-lg { margin-top: 1.2rem; }

/* ---------- โครงแอป ---------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.brand-mark { font-size: 1.2rem; }

/* ---------- โลโก้จริงของเพลิน ----------
   ไฟล์โลโก้เป็น JPG รูปหกเหลี่ยมบนพื้นเทา (ไม่มีพื้นใส)
   จึงครอบด้วยกรอบมนแล้วซูมเข้านิดหน่อย ให้พื้นเทาหลุดออกนอกกรอบไป
   object-fit: cover + scale = ตัวโลโก้เต็มกรอบพอดี ไม่เห็นขอบเทา */
.brand-logo, .login-logo {
  border-radius: 10px; object-fit: cover; flex: 0 0 auto;
  background: var(--ink); transform: scale(1.06);
}
.brand-logo { width: 30px; height: 30px; box-shadow: 0 0 0 1px var(--gold-line); }
.login-logo {
  width: 96px; height: 96px; border-radius: 20px; margin: 0 auto .4rem;
  display: block; box-shadow: 0 6px 20px rgba(26,32,50,.18), 0 0 0 1px var(--gold-line);
}

/* ---------- แถวลิงก์ใต้หัวข้อหน้า ----------
   ปุ่มรองที่ไม่ใช่งานหลักของหน้า (ดูหน้าลูกค้า · ดาวน์โหลดข้อมูล)
   วางแยกจาก .toolbar เพราะ toolbar คือตัวเลือกวันที่ ซึ่งใช้บ่อยกว่ามาก
   ถ้าเอามารวมกัน ปุ่มที่ใช้วันละครั้งจะไปเบียดปุ่มที่ใช้ทุกนาที */
.page-links {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem;
}
.page-links .btn { border-color: var(--gold-line); }
.page-links .btn:hover { background: var(--gold-soft); border-color: var(--gold); }
.page-links a.btn { text-decoration: none; }
.who { display: flex; align-items: center; gap: .45rem; }
.who-name { font-weight: 500; font-size: .92rem; }

.shell { flex: 1; display: flex; align-items: flex-start; }
.sidenav {
  position: sticky; top: 57px; width: 232px; flex: 0 0 232px;
  padding: .9rem .7rem; display: flex; flex-direction: column; gap: .2rem;
  max-height: calc(100dvh - 57px); overflow-y: auto;
}
.navlink {
  display: flex; align-items: center; gap: .6rem;
  min-height: var(--tap); padding: 0 .8rem; border-radius: 11px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem;
  border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left;
}
.navlink:hover { background: #eef1f7; color: var(--ink); }
.navlink.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.navlink .ico { font-size: 1.1rem; width: 1.4rem; text-align: center; }

.view { flex: 1; min-width: 0; padding: 1rem 1.1rem 5.5rem; }
.view:focus { outline: none; }
.view-head { margin-bottom: .7rem; }
.view-head h1 { font-size: 1.2rem; }
@media (min-width: 560px) { .view-head { margin-bottom: .9rem; } .view-head h1 { font-size: 1.35rem; } }

/* ---------- เมนูล่างบนมือถือ ---------- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav .navlink {
  flex: 1; flex-direction: column; gap: .1rem; min-height: 58px;
  padding: .35rem .2rem; font-size: .72rem; text-align: center; justify-content: center;
}
.bottomnav .navlink .ico { font-size: 1.25rem; width: auto; }
.bottomnav .navlink.active { background: transparent; }

.only-mobile { display: none; }
@media (max-width: 899px) {
  .only-mobile { display: flex; }
  .sidenav {
    display: none; position: fixed; inset: 57px 0 0 0; width: auto; max-height: none;
    background: var(--bg); z-index: 15; padding: 1rem;
  }
  .sidenav.open { display: flex; }
  .brand-name { display: none; }
  .view { padding: .9rem .8rem 6rem; }
}

/* =====================================================================
   ผังช่องกางเต็นท์ 27 ช่อง — 🚨 ต้องเห็นครบในจอเดียว ทั้งมือถือและคอม
   (CLAUDE.md: นี่คือหน้าที่พนักงานเปิดบ่อยที่สุด)

   งบความสูงบนมือถือ 375×812: หัว 57 + เมนูล่าง 58 → เหลือ ~680px
   หัวข้อ 34 + สรุป 56 + หัวโซน 3×22 + ช่อง 6 แถว×48 + ช่องไฟ ≈ 500px → พอดี
   มือถือ 5 คอลัมน์ (โซนละ 2 แถว) · คอม 9 คอลัมน์ (โซนละ 1 แถว)
   ===================================================================== */
.pitch-grid {
  display: grid; gap: .3rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (min-width: 560px) { .pitch-grid { grid-template-columns: repeat(7, minmax(0,1fr)); gap: .4rem; } }
@media (min-width: 900px) { .pitch-grid { grid-template-columns: repeat(9, minmax(0,1fr)); gap: .5rem; } }

.pitch {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: .3rem .15rem; text-align: center; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  cursor: pointer; font: inherit; color: inherit; overflow: hidden;
}
.pitch:hover { border-color: var(--accent); }
.pitch-code { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: .88rem; line-height: 1.2; }
.pitch-sub  { font-size: .66rem; color: var(--ink-2); line-height: 1.25; white-space: nowrap; }
.pitch-cap  { display: none; }        /* ความจุคน: ซ่อนบนมือถือเพื่อให้ครบ 27 ช่องในจอเดียว */
.pitch.free { background: var(--ok-bg);   border-color: #bfe8cd; }
.pitch.busy { background: var(--busy-bg); border-color: #f3d6a8; }
.pitch.busy .pitch-sub { color: #b56a00; }
.pitch.off  { background: var(--off-bg);  border-color: #dcdfe8; color: var(--off); }

@media (min-width: 560px) {
  .pitch { min-height: 66px; border-radius: 12px; padding: .45rem .3rem; }
  .pitch-code { font-size: .98rem; }
  .pitch-sub  { font-size: .72rem; }
  .pitch-cap  { display: block; }
}

.zone-head {
  display: flex; align-items: baseline; gap: .45rem;
  margin: .55rem 0 .3rem; font-weight: 600; font-size: .85rem; color: var(--ink-2);
}
.zone-head:first-child { margin-top: .1rem; }
@media (min-width: 900px) { .zone-head { margin: .9rem 0 .45rem; font-size: .92rem; } }

/* คำอธิบายสี — ความหมายเดียวกันทุกหน้าจอ */
.legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.legend span { display: inline-flex; align-items: center; gap: .28rem; font-size: .74rem; color: var(--ink-2); }
.legend i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }

/* ธงเล็กมุมช่อง: ของที่ต้องเตรียม / รอชำระเงิน */
.pitch { position: relative; }
.pitch-flag {
  position: absolute; top: 1px; right: 2px;
  font-size: .58rem; line-height: 1; color: var(--ink-2);
  background: rgba(255,255,255,.85); border-radius: 5px; padding: .1rem .18rem;
}
.pitch-flag-r { right: auto; left: 2px; }
.pitch.sel { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ตัวบอกว่าหน้าจอกำลังอัปเดตสดอยู่ไหม */
.live { display: inline-block; margin-left: .3rem; white-space: nowrap; font-size: .82rem; }

/* ---------- รายละเอียดของช่องที่แตะ ---------- */
.detail { margin-top: .9rem; }
.detail-head { display: flex; align-items: flex-start; gap: .5rem; }
.detail-head h2 { flex: 1; margin: 0 0 .5rem; }

.bk { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .7rem; }
.bk:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.bk-top { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .35rem; }
.bk-top > div { flex: 1; min-width: 0; }
.bk-name { font-weight: 600; }

.bk-items { background: var(--bg); border-radius: 11px; padding: .55rem .7rem; margin: .5rem 0; }
.bk-items-head { font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }
.bk-item { display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: .2rem 0; font-size: .9rem; }
.bk-item .codes { color: var(--ink-2); font-size: .78rem; }
.bk-item code { background: #fff; border: 1px solid var(--line); }

.bk-money {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .88rem; padding: .45rem .7rem; border-radius: 11px; background: var(--accent-soft);
}
.bk-money .owe  { color: #b56a00; font-weight: 600; }
.bk-money .paid { color: var(--ok); font-weight: 600; }

/* ---------- แถบสรุปตัวเลข ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: .35rem .45rem; text-align: center; min-width: 0;
}
.stat-num { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.stat-lab { font-size: .68rem; color: var(--ink-2); line-height: 1.25; }
.stat-when { grid-column: 1 / -1; }
.stat-when .stat-num { font-size: .82rem; }
@media (min-width: 560px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
  .stat { padding: .7rem .85rem; text-align: left; border-radius: var(--r); }
  .stat-num { font-size: 1.5rem; }
  .stat-lab { font-size: .82rem; }
  .stat-when { grid-column: auto; }
}

/* ---------- หน้ารับออเดอร์ ---------- */
.pick-list { display: flex; flex-direction: column; }
.pick {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.pick:last-child { border-bottom: 0; }
.pick-info { flex: 1; min-width: 0; }
.pick-name { font-weight: 500; }
.pick-out { opacity: .5; }
.pick-qty { flex: 0 0 78px; width: 78px; text-align: center; font-weight: 600; }

.quote { margin: .3rem 0 .9rem; }
.quote-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .32rem 0; font-size: .94rem; border-bottom: 1px dashed var(--line);
}
.quote-row span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-total {
  border-bottom: 0; border-top: 2px solid var(--ink); margin-top: .35rem; padding-top: .5rem;
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.12rem;
}

.ok-card { border-color: #bfe8cd; background: linear-gradient(#f4fdf7, #fff); }
.row-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.row-btns .btn { flex: 1 1 auto; min-width: 140px; }

/* iframe ที่ใช้สั่งพิมพ์ — ต้องมีอยู่จริงในหน้า แต่ไม่ให้มองเห็น */
#print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

/* =====================================================================
   ใบงานวันนี้ — ใช้บนมือถือระหว่างเดินในลาน
   แถวของแต่ละชิ้นต้องสูงพอกดด้วยนิ้วโป้งได้ ไม่ต้องเล็ง
   ===================================================================== */
.job { padding: .8rem .9rem; }
.job-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .4rem; }
.job-pitch {
  flex: 0 0 auto; font-family: 'Bai Jamjuree', sans-serif; font-weight: 700;
  font-size: 1.05rem; background: var(--accent-soft); color: var(--accent);
  border-radius: 10px; padding: .25rem .6rem; line-height: 1.3;
}
.job-who { flex: 1; min-width: 0; }
.job-name { font-weight: 600; }

.item-list { margin: .5rem 0 .2rem; }
.item-row {
  display: flex; align-items: center; gap: .75rem;
  min-height: 54px; padding: .35rem .5rem; margin: 0 -.5rem;
  border-radius: 10px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.item-row:last-child { border-bottom: 0; }
.item-row:active { background: #eef1f7; }
.item-row .item-cb { width: 24px; height: 24px; flex: 0 0 24px; min-height: 0; accent-color: var(--accent); }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.item-code {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 600; font-size: .95rem;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.item-done { opacity: .55; }

.job-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.job-actions .btn { flex: 1 1 auto; min-width: 130px; }
.btn-bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-bad:hover { background: #b91c1c; }

/* ---------- กล่องโต้ตอบ ---------- */
.pcp-dialog {
  border: 0; border-radius: var(--r); padding: 0; max-width: min(94vw, 480px); width: 100%;
  box-shadow: 0 10px 40px rgba(26,32,50,.22); color: var(--ink); background: var(--card);
}
.pcp-dialog::backdrop { background: rgba(26,32,50,.45); }
.dlg-body { padding: 1.1rem 1.15rem 1.2rem; max-height: 82dvh; overflow-y: auto; }
.dlg-head { display: flex; align-items: flex-start; gap: .5rem; }
.dlg-head h2 { flex: 1; margin: 0 0 .6rem; }
.pcp-dialog .row-btns { display: flex; gap: .5rem; margin-top: 1rem; }
.pcp-dialog .row-btns .btn { flex: 1; }

/* ---------- เส้นเวลาประวัติของ ---------- */
.timeline { margin-top: .6rem; }
.tl { display: flex; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.tl:first-child { border-top: 0; }
.tl-ico { flex: 0 0 1.6rem; font-size: 1.15rem; text-align: center; }
.tl-body { flex: 1; min-width: 0; }
.tl-top { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; }
.btn-photo { min-height: 34px; padding: 0 .6rem; font-size: .82rem; margin-top: .25rem; }

/* =====================================================================
   คลังของ + แจ้งชำรุดแบบมีสติ
   ===================================================================== */
.stock-row { border-bottom: 1px solid var(--line); }
.stock-row:last-child { border-bottom: 0; }

/* คิวงานค้าง — ของที่ใช้ไม่ได้แล้วแต่ยังมีคนจองไว้ */
.alert-card { border-color: #f4c2bf; background: linear-gradient(#fef6f5, #fff); }
.alert-card h2 { color: var(--bad); }
.alert-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem;
  padding: .6rem 0; border-top: 1px solid #f4d7d5;
}
.alert-row > span:first-child { flex: 1 1 140px; }
.alert-row .btn-fix { min-height: 40px; padding: 0 .8rem; }

/* กล่องเตือนตอนกำลังจะเปลี่ยนสถานะของที่มีคนจองไว้ */
.warn-box {
  background: var(--bad-bg); border: 1px solid #f4c2bf; border-radius: 11px;
  padding: .65rem .8rem; margin-bottom: .7rem;
}
.warn-box strong { color: var(--bad); }
.warn-box p { margin: .3rem 0 0; }
.warn-row {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .6rem 0; border-top: 1px solid var(--line);
}
.warn-row > div { flex: 1 1 160px; min-width: 0; }
.warn-row select { flex: 1 1 170px; }

/* ปุ่มเลือกเหตุการณ์ */
.ev-list { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; }
.ev-btn {
  justify-content: space-between; text-align: left; padding: .5rem .8rem;
  min-height: 52px; gap: .8rem;
}
.ev-btn > span:first-child { font-weight: 500; }

/* ---------- คิวตรวจสลิป ---------- */
.slip { border-left: 4px solid var(--accent); }
.slip-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.slip-head > div { flex: 1; min-width: 0; }
.slip-money {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .9rem;
  background: var(--bg); border-radius: 10px; padding: .5rem .7rem; margin-bottom: .6rem;
}
.slip-view .btn { margin-bottom: .2rem; }
.slip-img {
  width: 100%; height: auto; max-height: 62dvh; object-fit: contain;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg); margin: .5rem 0;
}

/* ---------- แดชบอร์ด ---------- */
.num-bad { color: var(--bad); }

.buy-list { margin-top: .4rem; }
.buy-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 0; border-top: 1px solid var(--line);
}
.buy-list .buy-row:first-child { border-top: 0; }
.buy-info { flex: 1; min-width: 0; }
.buy-name { font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.buy-alert { background: var(--bad-bg); border-radius: 10px; padding: .6rem .5rem; margin: 0 -.5rem; }
.buy-qty { flex: 0 0 auto; text-align: center; min-width: 74px; }
.buy-num {
  display: block; font-family: 'Bai Jamjuree', sans-serif; font-weight: 700;
  font-size: 1.35rem; color: var(--bad); line-height: 1.1;
}

/* กราฟแท่งรายได้ — ทำด้วย CSS ล้วน ไม่ต้องโหลดไลบรารีกราฟ */
.rev-row { display: flex; align-items: center; gap: .6rem; padding: .32rem 0; }
.rev-m { flex: 0 0 78px; font-size: .85rem; color: var(--ink-2); }
.rev-bar { flex: 1; height: 20px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.rev-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.rev-n {
  flex: 0 0 auto; min-width: 96px; text-align: right;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}

.owe-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 0; border-top: 1px solid var(--line);
}
.owe-list .owe-row:first-child { border-top: 0; }
.owe-row > div { flex: 1; min-width: 0; }
.owe-n {
  flex: 0 0 auto; font-weight: 700; color: #b45309;
  font-family: 'Bai Jamjuree', sans-serif; font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .rev-m { flex: 0 0 62px; font-size: .78rem; }
  .rev-n { min-width: 80px; font-size: .8rem; }
}

/* ---------- หน้าเปิดใช้จริง ---------- */
textarea {
  width: 100%; min-height: 140px; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .85rem; line-height: 1.5; color: var(--ink); resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.hint-box {
  background: var(--accent-soft); border-radius: 11px; padding: .6rem .8rem; margin: .6rem 0;
  font-size: .88rem;
}
.hint-box code { background: #fff; display: inline-block; margin: .2rem 0; word-break: break-word; }
.pre-box {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .7rem; overflow-x: auto; font-size: .78rem; margin: .5rem 0 0;
}

/* ---------- หน้าผังลาน (ฝั่งแอดมิน) ---------- */
.editmap {
  position: relative; margin-top: .6rem; border: 1px solid var(--line);
  border-radius: 11px; overflow: hidden; cursor: crosshair; background: #eef3ea;
}
.editmap .map-img { display: block; width: 100%; height: auto; }
.editmap .pin {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 30px; height: 26px; padding: 0 .3rem;
  border-radius: 999px; border: 2px solid #fff; cursor: pointer;
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: .68rem;
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.editmap .pin.free { background: #16a34a; }
.editmap .pin.off  { background: #8b93a7; }
#phint.placing {
  background: var(--busy-bg); border: 1px solid #f3d6a8; border-radius: 9px;
  padding: .45rem .65rem; color: #b56a00;
}

.prow {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 0; border-top: 1px solid var(--line);
}
.prow:first-child { border-top: 0; }
.prow-off { opacity: .55; }
.pr-main { flex: 1; min-width: 0; }
.pr-code {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700;
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.prow .btn { min-height: 38px; padding: 0 .6rem; font-size: .84rem; flex: 0 0 auto; }
.btn-del { color: var(--bad); border-color: #f4c2bf; }
.btn-del:hover { background: var(--bad-bg); }

.inline-check { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.inline-check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }

/* ---------- ตารางผลตรวจสิทธิ์ ---------- */
.checks { display: flex; flex-direction: column; gap: .5rem; }
.check {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.check .mark { font-size: 1.05rem; line-height: 1.4; }
.check.pass { border-color: #bfe8cd; background: var(--ok-bg); }
.check.fail { border-color: #f4c2bf; background: var(--bad-bg); }
.check .what { font-weight: 500; }
.check .why  { font-size: .84rem; color: var(--ink-2); margin-top: .15rem; word-break: break-word; }

/* ---------- แถบเครื่องมือ ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: .9rem; }
.toolbar .field { flex: 1 1 150px; min-width: 0; }
/* ช่องวันที่มีความกว้างขั้นต่ำในตัว ถ้าไม่บังคับ min-width:0 หน้าจะเลื่อนแนวนอนบนมือถือ */
.toolbar input, .toolbar select { min-width: 0; }
.toolbar label { margin-top: 0; }

/* ---------- ข้อความแจ้งเตือนลอย ---------- */
.toast {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 460px);
  background: var(--ink); color: #fff; padding: .7rem 1rem;
  border-radius: 12px; box-shadow: var(--shadow); font-size: .93rem;
}
.toast.bad { background: var(--bad); }
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* ---------- หน้าที่ยังไม่ถึงคิวทำ ---------- */
.soon { text-align: center; padding: 2.2rem 1rem; }
.soon-mark { font-size: 2.4rem; }
.soon h2 { margin-top: .5rem; }

/* ข้อความเตือนในกล่องสรุปยอด — เช่น คนเกินกว่าที่ช่องรับได้ */
.err-inline {
  margin: 0;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: .92rem;
  line-height: 1.5;
}

/* แถบเตือนบนสุดของหน้า — ใช้ตอน "ทำต่อไม่ได้เพราะระบบยังไม่พร้อม"
   ต้องเห็นก่อนลงมือกรอก ไม่ใช่มารู้ทีหลังว่าที่กรอกไปหายหมด */
.warnbar {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #78350f;
  line-height: 1.55;
}
.warnbar strong { color: #92400e; }
.warnbar .muted { color: #a16207; margin-top: .25rem; }

/* ---------- ช่องวันที่ภาษาไทย (ดู watchThaiDateInputs ใน ui.js) ----------
   ป้าย "1 ต.ค. 2569" อยู่ข้างล่าง · ช่องวันที่จริงโปร่งใสทับอยู่ข้างบน
   → กดตรงไหนก็เปิดปฏิทิน · ขนาดกดเท่าช่องกรอกปกติ (44px ตาม CLAUDE.md) */
.tdate { position: relative; display: block; width: 100%; min-width: 0; }
.tdate-face {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  min-height: var(--tap, 44px); padding: .5rem .8rem;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.tdate-face::after { content: '📅'; margin-left: auto; font-size: .95em; opacity: .55; }
.tdate.empty .tdate-face { color: var(--ink-2, #5c6478); }
.tdate > input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.tdate:focus-within .tdate-face { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* ช่องจำนวนคืนแคบกว่าช่องวันที่ · บรรทัด "เช็คเอาต์เช้า …" ชิดแถบเลือกวัน */
.toolbar .field.field-nights { flex: 0 0 120px; }
.checkout-line { margin: -.45rem 0 .9rem; }

/* ---------------------------------------------------------------------
   สมุดเงินประกัน — ใช้ยืนหน้าร้านมือเดียว ปุ่มต้องใหญ่ กดไม่พลาด
   --------------------------------------------------------------------- */
.dep-list { display: grid; gap: .6rem; }
.dep-row { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .75rem; }
.dep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.dep-name { font-weight: 600; }
.dep-amt { font-family: 'Bai Jamjuree', sans-serif; font-weight: 600; white-space: nowrap; }
.dep-btns { display: flex; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.dep-btns .btn { min-height: 44px; }
.dep-form { margin-top: .7rem; border-top: 1px dashed var(--line); padding-top: .7rem; }
.dep-form .hide { display: none; }
.dep-actions { display: flex; gap: .5rem; margin-top: .7rem; }
.dep-actions .btn { min-height: 44px; flex: 1; }
.file-lab { display: flex; align-items: center; gap: .5rem; margin-top: .6rem;
            border: 1px dashed var(--line); border-radius: 10px; padding: .6rem .7rem;
            cursor: pointer; }
.dep-holders .sr { display: flex; justify-content: space-between; gap: .6rem;
                   padding: .45rem 0; border-bottom: 1px solid var(--line); }
.dep-log { display: grid; gap: .3rem; }
.dep-logrow { display: flex; align-items: center; gap: .5rem; padding: .35rem 0;
              border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dep-logtxt { flex: 1; font-size: .9rem; color: var(--ink-2); }
.dep-kind { font-size: .78rem; font-weight: 600; border-radius: 999px; padding: .12rem .5rem; }
.k-in  { background: #e7f6ec; color: #1b7a3d; }
.k-out { background: #e8f0fe; color: #1a56c4; }
.k-cut { background: #fdeceb; color: #b3261e; }

/* ปุ่มข้อความ (สลับโหมดเข้าระบบ/สมัคร) + ข้อความแจ้งผลสำเร็จ */
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
            text-decoration: underline; cursor: pointer; }
.ok-line { background: #e7f6ec; color: #1b7a3d; border-radius: 10px;
           padding: .55rem .7rem; font-size: .9rem; margin: .2rem 0 0; }

/* =====================================================================
   หน้า "รูป & อุปกรณ์" — เจ้าของ/แอดมินจัดการรูปและรุ่นเต็นท์เอง
   ออกแบบให้ใช้บนมือถือเป็นหลัก เพราะรูปอยู่ในมือถือของคนถ่าย
   ===================================================================== */
.tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: .7rem; }
.tab { flex: 0 0 auto; min-height: 38px; padding: 0 .8rem; border-radius: 999px;
       border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
       font-family: inherit; font-size: .88rem; cursor: pointer; }
.tab.on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }

.cat-list { display: flex; flex-direction: column; gap: .7rem; }
.cat-card { padding: .8rem .9rem; }
.cat-head { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.cat-head h2 { font-size: 1rem; margin: 0 0 .1rem; }
.cat-head > div { flex: 1 1 180px; min-width: 0; }

.cat-pics { display: flex; gap: .5rem; overflow-x: auto; padding: .55rem 0 .3rem; }
.cat-pics:empty { display: none; }
.pic { position: relative; flex: 0 0 116px; }
.pic img { width: 116px; height: 86px; object-fit: cover; border-radius: 10px;
           border: 1px solid var(--line); display: block; }
.pic-cover { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 6px;
             background: var(--accent); color: #fff; font-size: .68rem; font-weight: 600; }
.pic-btns { display: flex; gap: .2rem; margin-top: .25rem; }
.pic-btns button { flex: 1; min-height: 30px; border: 1px solid var(--line); background: var(--card);
                   border-radius: 7px; font-size: .8rem; cursor: pointer; color: var(--ink-2); }
.pic-btns button:disabled { opacity: .35; cursor: default; }

.cat-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.btn-sm { min-height: 38px; padding: 0 .75rem; font-size: .85rem; }
.file-btn { display: inline-flex; align-items: center; cursor: pointer; }
.file-btn.busy { opacity: .6; pointer-events: none; }

/* ฟอร์มในกล่องโต้ตอบ — ช่องกรอกเรียงลงมาให้กรอกด้วยนิ้วโป้งได้ */
.dlg-fields { display: flex; flex-direction: column; gap: .15rem; }
.dlg-fields label { margin-top: .6rem; font-weight: 500; font-size: .9rem; }
.dlg-fields label.chk { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.dlg-fields .two { display: flex; gap: .6rem; }
.dlg-fields .two > * { flex: 1; min-width: 0; }

/* ---------- การ์ดที่พับเก็บได้ (เช่น "ของที่ต้องการเช่า" ในหน้ารับออเดอร์) ----------
   ลูกค้าราวครึ่งหนึ่งไม่เช่าอะไรเลย ถ้ากางรายการทั้งหมดไว้ตลอด
   แอดมินต้องเลื่อนผ่านของ 20 กว่ารายการทุกครั้งกว่าจะถึงปุ่มบันทึก */
.acc-card { padding: 0; }
.acc-card > summary {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1rem; cursor: pointer; list-style: none;
  font-family: 'Bai Jamjuree', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem;
}
.acc-card > summary::-webkit-details-marker { display: none; }
.acc-card > summary::after {
  content: '▾'; margin-left: auto; color: var(--ink-2); font-size: .9rem;
  transition: transform .15s ease;
}
.acc-card[open] > summary::after { transform: rotate(180deg); }
.acc-card > summary:hover { background: var(--bg); border-radius: var(--r); }
.acc-card > :not(summary) { padding-left: 1rem; padding-right: 1rem; }
.acc-card > :last-child { padding-bottom: 1rem; }
.acc-sum {
  font-family: 'Anuphan', system-ui, sans-serif; font-weight: 400; font-size: .87rem;
  color: var(--ink-2); padding: .1rem .5rem; border-radius: 999px; background: var(--bg);
}
.acc-sum.on { background: var(--ok-bg); color: var(--ok); font-weight: 600; }

/* ช่องเลือกรุ่นในแถวของเช่า — อยู่ระหว่างชื่อของกับช่องจำนวน */
.pick-model { flex: 0 1 210px; min-width: 130px; min-height: 42px; }
#items-find { margin: .2rem 0 .5rem; }
@media (max-width: 520px) {
  .pick { flex-wrap: wrap; }
  .pick-info { flex: 1 1 100%; }
  .pick-model { flex: 1 1 auto; }
}

/* ชุดครบเซ็ตในหน้ารับออเดอร์ — เน้นให้เห็นก่อน เพราะขายดีสุดและถูกกว่าเช่าแยกชิ้น */
.pick-pkg { background: #f5f9ff; border-radius: 12px; padding: .6rem .7rem; margin-bottom: .35rem;
            border-bottom: 0; border: 1px solid #dbe7fb; }
.pick-inside { margin-top: .15rem; line-height: 1.45; }

/* ปุ่มเลือกรูป 2 ทาง — กล้องมาก่อนเพราะพนักงานยืนอยู่หน้างานกับลูกค้า
   แต่ต้องมีทางเลือกแกลเลอรีเสมอ เผื่อถ่ายไว้ก่อนหรือลูกค้าส่งรูปมาทางไลน์ */
.pick-photo { display: flex; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .35rem; }
.pick-photo .btn { flex: 1 1 140px; min-height: 44px; }

/* =====================================================================
   หน้ารับเงินหน้างาน — ใช้บนมือถือขณะยืนคุยกับลูกค้า ปุ่มต้องใหญ่กดด้วยนิ้วโป้งได้
   ===================================================================== */
.cash-me { display: flex; align-items: center; justify-content: space-between;
           gap: .6rem; flex-wrap: wrap; padding: .8rem .9rem; }
.cash-me-row { display: flex; flex-direction: column; font-size: .9rem; color: var(--ink-2); }
.cash-amt { font-family: 'Bai Jamjuree', system-ui, sans-serif; font-size: 1.35rem;
            font-weight: 700; color: var(--ink); }

/* เงินที่รอเรากดรับ ต้องสะดุดตาที่สุด — ไม่กด = ยอดไม่ตรงตอนปิดวัน */
.cash-wait { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
             flex-wrap: wrap; padding: .8rem .9rem; margin-top: .6rem;
             background: #fff7ed; border: 1px solid #fed7aa; }

.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
             gap: .5rem; margin-bottom: .8rem; }
.kind { display: flex; flex-direction: column; align-items: center; gap: .2rem;
        min-height: 72px; padding: .5rem .3rem; border-radius: 12px; cursor: pointer;
        border: 1.5px solid var(--line); background: var(--card);
        font-family: inherit; font-size: .82rem; line-height: 1.25; text-align: center; }
.kind-ico { font-size: 1.4rem; }
.kind.on { border-color: var(--accent); background: #eff6ff; color: var(--accent); font-weight: 600; }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.pay-sum { display: flex; align-items: center; justify-content: space-between;
           padding: .5rem 0 .7rem; border-bottom: 1px dashed var(--line); margin-bottom: .7rem; }
.pay-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.pay-btns .btn { flex: 1 1 150px; }

.qr-dlg .qr-box { margin: .6rem auto; max-width: 300px; }
.qr-dlg .qr-box svg { width: 100%; height: auto; display: block; }
.qr-dlg .qr-amt { text-align: center; font-family: 'Bai Jamjuree', system-ui, sans-serif;
                  font-size: 1.6rem; font-weight: 700; color: var(--accent); margin-bottom: .2rem; }

/* แถวพนักงานในหน้าตั้งค่า — ชื่อกับคำอธิบายซ้าย ช่องเลือกสิทธิ์ขวา */
.srow { align-items: center; gap: .6rem; flex-wrap: wrap; }
.srow .sdesc { display: block; }
.srow select { flex: 0 0 auto; max-width: 100%; }

/* ---------------------------------------------------------------
   ประกาศ/กฎระเบียบถึงพนักงาน

   🍎 summary ต้องปิดสามเหลี่ยมด้วย ::-webkit-details-marker ด้วย
      list-style:none อย่างเดียวไม่พอบน Safari ของ iPhone — จะเหลือสามเหลี่ยม
      ค้างอยู่หน้าหัวข้อ ซึ่งบนคอมมองไม่เห็นปัญหานี้เลย
   --------------------------------------------------------------- */
.ann-card { margin-bottom: .8rem; }
.ann-card > summary { cursor: pointer; list-style: none; }
.ann-card > summary::-webkit-details-marker { display: none; }
.ann-card > summary::after {
  content: '▸ แตะเพื่ออ่านฉบับเต็ม';
  display: block;
  margin-top: .35rem;
  color: var(--accent);
  font-size: .82rem;
}
.ann-card[open] > summary::after { content: '▾ ย่อเก็บ'; }
.ann-title { display: block; margin: .35rem 0 .15rem; }
.ann-body {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;      /* กันคำยาวผิดปกติดันจอเลื่อนซ้าย-ขวา */
  line-height: 1.75;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.ann-sign { margin-top: .9rem; }

/* หน้าสอน AI — คำถามที่ตอบไม่ได้ กับคลังคำตอบ */
.gap-row { align-items: center; gap: .6rem; flex-wrap: wrap; }
.gap-row > span:first-child { flex: 1 1 200px; }
.qa-item { margin-bottom: .6rem; }
.qa-item .row-btns { margin-top: .7rem; }

/* ---------------------------------------------------------------
   ปุ่มสลับแอป — งานลาน / งานบุคคล

   แยกตามที่เจ้าของทักท้วง 16 ก.ย. 2569 (เทียบกับ FlowAccount ที่แยก
   ระบบบัญชีออกจากระบบพนักงานเป็นคนละแอป)
   --------------------------------------------------------------- */
.appsw {
  display: grid;
  gap: .35rem;
  padding: 0 0 .7rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.appsw-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .6rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
}
.appsw-btn:hover { background: var(--bg); }
.appsw-btn.sel { background: #eef3ff; border-color: #c7d7fb; }
.appsw-btn .ico { font-size: 1.15rem; line-height: 1; }
.appsw-txt { display: flex; flex-direction: column; line-height: 1.25; }
.appsw-txt small { color: var(--ink2); font-size: .74rem; }

/* ---------------------------------------------------------------
   กฎระเบียบ — สารบัญ แล้วกดเข้าไปอ่านทีละเรื่อง

   เจ้าของทักท้วง 16 ก.ย. 2569: กดเข้ามาแล้วขึ้นเนื้อหาเต็มเลย
   ควรเห็นหัวข้อก่อน เพราะจะมีอีกหลายเรื่องตามมา
   --------------------------------------------------------------- */
.rules-toc { padding: .35rem .35rem; }
.toc-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .7rem .6rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
}
.toc-row:last-child { border-bottom: 0; }
.toc-row:hover { background: var(--bg); }
.toc-no {
  flex: 0 0 auto;
  min-width: 2.4rem;
  padding: .2rem .4rem;
  border-radius: 8px;
  background: #eef3ff;
  color: var(--accent);
  font-family: 'Bai Jamjuree', system-ui, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  text-align: center;
}
.toc-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.toc-title { font-weight: 600; }
.toc-sum, .toc-date { color: var(--ink2); font-size: .8rem; line-height: 1.4; }
.toc-date { font-size: .75rem; }
.toc-go { flex: 0 0 auto; color: var(--ink2); font-size: 1.3rem; line-height: 1; }

.rules-back { margin-bottom: .7rem; }
.rules-back-bottom { display: block; width: 100%; margin-top: .8rem; }

/* ---------------------------------------------------------------
   ผังจอง — สลับดูเป็นรูปผังหรือตาราง

   เจ้าของขอ 16 ก.ย. 2569: ตารางอ่านได้แต่ไม่เห็นภาพ
   รูปผังทำให้รู้ทันทีว่าวันนี้แน่นโซนไหน โดยไม่ต้องไล่อ่านทีละช่อง
   --------------------------------------------------------------- */
.viewsw { display: flex; gap: .4rem; margin: .2rem 0 .7rem; }
.viewsw-btn {
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  color: var(--ink2);
}
.viewsw-btn.sel { background: #eef3ff; border-color: #c7d7fb; color: var(--accent); font-weight: 600; }

.bm-wrap { position: relative; border-radius: 14px; overflow: hidden; line-height: 0; }
.bm-img { width: 100%; height: auto; display: block; }
.bm-none { padding: .8rem; }

/* หมุดคงขนาดเท่าเดิมเสมอ ไม่ว่ารูปจะกว้างแค่ไหน — อ่านรหัสช่องออกตลอด */
.bm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 2.1rem;
  padding: .16rem .3rem;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  cursor: pointer;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.bm-pin.free { background: #16a34a; color: #fff; }
.bm-pin.busy { background: #ea8f00; color: #fff; }
.bm-pin.off  { background: #9aa1b1; color: #fff; }
/* รอชำระเงิน = ขอบแดงบาง ๆ ไม่เปลี่ยนสีพื้น จะได้ยังรู้ว่าช่องนี้ถูกจองแล้ว */
.bm-pin.wait { outline: 2px solid #dc2626; outline-offset: 1px; }
.bm-pin:hover { filter: brightness(1.08); }

/* ซูม/ลากผังของพนักงาน — หมุดใกล้กันสุด 2.2% ของรูป ไม่ซูมก็ทับกันอ่านไม่ออก */
.bm-wrap { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.bm-wrap.can-pan { touch-action: none; }
.bm-inner { position: relative; transform-origin: 0 0; will-change: width, transform; }
.bm-wrap.can-pan .bm-inner { cursor: grab; touch-action: none; }
.bm-wrap.can-pan .bm-inner:active { cursor: grabbing; }
.bm-ctrls {
  position: absolute; right: .5rem; top: .5rem;
  display: flex; flex-direction: column; gap: .3rem; z-index: 2;
}
.bm-zoom {
  width: 2rem; height: 2rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .94);
  cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
  color: var(--ink);
}
.bm-hint {
  position: absolute; left: .5rem; bottom: .5rem; z-index: 2;
  padding: .2rem .5rem; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .68rem; line-height: 1.6;
}

/* =====================================================================
   ⏰ หน้าลงเวลาเข้าออกงาน (17 ก.ย. 2569)
   ใช้กลางแจ้ง กดด้วยนิ้วโป้ง บางคนใส่แว่นอ่านหนังสือ → ทุกอย่างต้องใหญ่
   ===================================================================== */

/* ป้ายชื่อตัวเอง — กันเคสยืมมือถือเพื่อนที่ค้างล็อกอินไว้
   ต้องใหญ่พอที่จะสะดุดตาโดยไม่ต้องตั้งใจอ่าน ไม่งั้นไม่มีประโยชน์ */
.whoami { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.whoami-lab { color: var(--ink-2); font-size: .9rem; }
.whoami-name {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.35rem;
  flex: 1; min-width: 0;
}

.clock-card { text-align: center; }
.clock-now {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700;
  font-size: 2.6rem; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  margin: .2rem 0 .8rem;
}

.kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .9rem; }
.kind-btn {
  min-height: 58px; padding: .5rem .4rem;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card);
  font: inherit; font-size: 1rem; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
}
.kind-btn.sel { border-color: var(--gold); background: var(--gold-soft); font-weight: 600; }
.kind-hint { font-size: .66rem; color: var(--ink-2); font-weight: 400; }

.btn-shoot { width: 100%; }

/* กล้องหน้าต้องกลับซ้ายขวา ไม่งั้นพนักงานจะรู้สึกว่าขยับผิดข้าง เล็งหน้าตัวเองยาก */



/* ---------- กล้องเต็มจอ ----------
   🚨 เจ้าของทดสอบบนมือถือจริงแล้วติด (16 ก.ย. 2569):
      เดิมเฟรมกล้องเป็นกล่องในหน้า ปุ่มถ่ายอยู่ใต้กล่อง
      ต้องเลื่อนจอจนเห็นเฟรมเหลือครึ่งเดียวถึงจะกดปุ่มได้ = เล็งหน้าตัวเองไม่ได้ตอนกด

   fixed + inset:0 → กินทั้งจอ ปุ่มติดขอบล่างเสมอ ไม่มีวันต้องเลื่อน
   z-index สูงกว่า topbar (20) และ bottomnav ไม่งั้นแถบเมนูจะบังปุ่มถ่าย */
.cam-full {
  position: fixed; inset: 0; z-index: 60;
  background: #000; display: flex; flex-direction: column;
}
.cam-full video, .cam-full img {
  flex: 1; width: 100%; min-height: 0; object-fit: cover;
}
/* กล้องหน้าต้องกลับซ้ายขวา ไม่งั้นขยับแล้วรู้สึกผิดข้าง เล็งยาก
   (รูปที่ถ่ายออกมาไม่กลับ เพราะ canvas วาดจากภาพจริง ไม่ได้วาดจากที่เห็น) */
.cam-full video { transform: scaleX(-1); }

.cam-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.82);
}
.cam-bar .btn {
  background: transparent; border-color: rgba(255,255,255,.35); color: #fff;
}
.cam-bar .btn-primary { background: var(--accent); border-color: var(--accent); }
.cam-kind { color: #fff; font-size: .9rem; opacity: .85; min-width: 72px; text-align: right; }

/* ปุ่มถ่ายแบบกล้องมือถือ — วงกลมใหญ่ กดด้วยนิ้วโป้งได้โดยไม่ต้องมอง */
.cam-shutter {
  width: 74px; height: 74px; border-radius: 50%; flex: 0 0 auto; cursor: pointer;
  background: #fff; border: 5px solid rgba(255,255,255,.45);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.cam-shutter:active { transform: scale(.94); }

/* หน้ายืนยัน ปุ่มสองอันแบ่งครึ่ง ไม่มีปุ่มชัตเตอร์แล้ว */
.cam-bar-confirm .btn { flex: 1; }
.cam-warn {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  padding: .6rem .9rem; background: rgba(0,0,0,.72); color: #ffd79a; font-size: .86rem;
}

/* ---------- หน้าแก้เวลาพนักงาน (อาย) ---------- */
.hr-row { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.hr-row:last-child { border-bottom: 0; }
.hr-row-head { display: flex; align-items: center; gap: .6rem; }
.hr-row-head b { font-family: 'Bai Jamjuree', sans-serif; font-size: 1.05rem; }
.hr-row-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .3rem; }
.hr-edit { margin-top: .6rem; padding: .7rem .8rem; background: var(--gold-soft);
           border: 1px solid var(--gold-line); border-radius: 12px; }
.hr-edit .btn { margin-top: .7rem; width: 100%; }

/* 🚨 ช่องบอกปัญหาบนจอกล้องเต็มจอ
   เดิม error ไปขึ้นในกล่องของหน้าปกติ ซึ่งอยู่ "ใต้" จอเต็มทั้งใบ
   พนักงานจึงไม่เห็นเลยว่าบันทึกไม่สำเร็จ เห็นแค่รูปค้าง แล้วเดินจากไป
   ต้องอยู่ในจอเต็ม เหนือทุกอย่าง และแดงจนมองข้ามไม่ได้ */
.cam-err {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--bad); color: #fff; font-weight: 500; line-height: 1.5;
}

/* ประวัติการแก้ — พับไว้เป็นค่าเริ่ม เปิดดูเมื่ออยากรู้ ไม่ให้รกรายการหลัก */
.hr-hist { margin-top: .4rem; font-size: .88rem; }
.hr-hist summary { cursor: pointer; color: var(--ink-2); }
.hr-hist ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.hr-hist li { margin-bottom: .35rem; }

/* ปุ่มคู่มือแบบมีรูปที่แทรกกลางเนื้อหาประกาศ */
.ann-guide { margin: .4rem 0 .2rem; text-decoration: none; }
.ann-body-cont { margin-top: .6rem; }

/* ผลตรวจสลิปอัตโนมัติ (EasySlip) ในคิวตรวจสลิป */
.auto-check { background: #fff7e6; border: 1px solid #f3d9a4; border-radius: 10px; padding: .55rem .75rem; margin: .5rem 0; }
.auto-check ul { margin: .25rem 0 .25rem 1.1rem; padding: 0; }

/* คนปิดการขาย (ค่าคอม) ในรายละเอียดใบจอง */
.bk-closer { margin-top: .4rem; }
.closer-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--ink, #1a2032); }
.closer-pick { min-height: 40px; max-width: 100%; }

/* ผูกไลน์พนักงาน (หน้าลงเวลา) */
.ll-code { font-family: 'Bai Jamjuree', sans-serif; font-size: 2.6rem; font-weight: 700; letter-spacing: .3em; text-align: center; margin: .6rem 0 .2rem; }
.line-link .btn { min-height: 48px; }

/* ติดตามไลน์พนักงาน */
.hl-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid #eef0f5; }
.hl-row:last-child { border-bottom: 0; }
.hl-col { flex-direction: column; }
.hl-st { text-align: right; }

/* ประวัติพนักงาน / แฟ้มของฉัน */
.hp-list { display: grid; gap: .4rem; margin-top: .6rem; }
.hp-person { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left;
  min-height: 56px; padding: .6rem .8rem; border: 1px solid #e3e7ef; border-radius: 12px; background: #fff; font: inherit; cursor: pointer; }
.hp-range { display: flex; flex-wrap: wrap; gap: .6rem; }
.hp-range .field { flex: 1 1 140px; }
.hp-tabs { display: flex; gap: .35rem; overflow-x: auto; padding: .2rem 0 .5rem; -webkit-overflow-scrolling: touch; }
.hp-tab { flex: 0 0 auto; min-height: 42px; padding: 0 .9rem; border-radius: 999px; border: 1px solid #dfe3ec; background: #fff; font: inherit; cursor: pointer; }
.hp-tab.sel { background: var(--accent, #2563eb); color: #fff; border-color: transparent; }
.hp-stats .stat { min-width: 0; }
.hp-warn .stat-num { color: #dc2626; }
.hp-rows { display: grid; }
.hp-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid #eef0f5; }
.hp-row:last-child { border-bottom: 0; }
.hp-row > div { min-width: 0; overflow-wrap: anywhere; }
.hp-bad { color: #dc2626; }
.hp-cancelled .hp-title, .hp-cancelled .hp-detail { text-decoration: line-through; opacity: .6; }
.hp-add { margin-bottom: .8rem; }
.hp-add > summary { list-style: none; display: inline-flex; }
.hp-add > summary::-webkit-details-marker { display: none; }
.hp-form { display: grid; gap: .55rem; margin-top: .6rem; }
.hp-form label { display: grid; gap: .2rem; font-size: .92rem; }
.hp-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.hp-photo { margin: 0; }
.hp-photo img { width: 100%; border-radius: 10px; display: block; }
.hp-dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .35rem .8rem; margin: 0; }
.hp-dl dt { color: var(--ink-2, #5c6478); }
.hp-dl dd { margin: 0; overflow-wrap: anywhere; }
.hl-report { white-space: pre-wrap; font: inherit; margin: 0; overflow-wrap: anywhere; }

/* ตรวจรูปลงเวลา */
.hpx-bar, .hpx-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hpx-bar input { flex: 1 1 150px; }
.hpx-top strong { flex: 1 1 200px; }
.hpx-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; background: #fff; }
.hpx-head, .hpx-row { display: grid; grid-template-columns: 84px repeat(4, minmax(118px, 1fr)); gap: .4rem; padding: .45rem .5rem; min-width: 560px; }
.hpx-head { font-weight: 600; font-size: .85rem; color: var(--ink-2, #5c6478); border-bottom: 1px solid #eef0f5; }
.hpx-row { border-bottom: 1px solid #eef0f5; align-items: start; }
.hpx-name { font-weight: 600; overflow-wrap: anywhere; padding-top: .3rem; }
.hpx-cell { display: grid; gap: .35rem; }
.hpx-empty { color: #9aa1b1; font-size: .8rem; padding: .6rem 0; }
.hpx-shot { margin: 0; border: 3px solid transparent; border-radius: 10px; padding: 2px; }
.hpx-shot.ok { border-color: #16a34a; }
.hpx-shot.bad { border-color: #dc2626; }
.hpx-shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 7px; background: #eef0f5; display: block; cursor: zoom-in; }
.hpx-nophoto { aspect-ratio: 3 / 4; display: grid; place-items: center; background: #f3f4f8; border-radius: 7px; font-size: .75rem; color: #9aa1b1; }
.hpx-shot figcaption { font-size: .75rem; line-height: 1.3; display: grid; gap: .1rem; margin-top: .2rem; }
.hpx-flags { color: #b45309; }
.hpx-note { color: #dc2626; }
.hpx-acts { display: flex; gap: .25rem; margin-top: .25rem; }
.hpx-acts .btn { flex: 1; min-height: 38px; padding: 0; }
.hpx-viewer { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; flex-direction: column; border: 4px solid transparent; }
.hpx-viewer.ok { border-color: #16a34a; }
.hpx-viewer.bad { border-color: #dc2626; }
.hpx-viewer img { flex: 1; min-height: 0; width: 100%; object-fit: contain; touch-action: pan-y; }
.hpx-x { position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 1.2rem; z-index: 2; }
.hpx-cap { color: #fff; font-size: .85rem; padding: .4rem .8rem; }
.hpx-vbar { display: grid; grid-template-columns: 56px 1fr 1fr 56px; gap: .4rem; padding: .5rem .6rem calc(.6rem + env(safe-area-inset-bottom)); }
.hpx-vbar .btn { min-height: 52px; }
.hpx-hist { color: #cbd5e1; font-size: .75rem; padding: 0 .8rem; overflow-wrap: anywhere; }
.hl-who { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.hl-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #eef0f5; }
.hl-noface { display: grid; place-items: center; }
.hl-pick { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.hl-pick select { min-height: 40px; max-width: 100%; }

/* walk-in ในหน้าเงินประกัน */
.walkin-card .btn-lg { width: 100%; }
.walkin-form { display: grid; gap: .35rem; margin-top: .7rem; }
.w-quote { background: #eef6ff; border-radius: 10px; padding: .55rem .7rem; margin: .3rem 0; }
.w-total { font-family: "Bai Jamjuree", sans-serif; font-size: 1.15rem; color: var(--ink, #1a2032); margin-right: .4rem; }
.chat-link { border: 2px solid #16a34a; }
.chat-msg { width: 100%; font: inherit; margin: .4rem 0; }
.lv-types { display: grid; gap: .4rem; }
.lv-type { display: flex; gap: .55rem; align-items: flex-start; border: 1px solid #e3e7ef; border-radius: 12px; padding: .55rem .7rem; }
.lv-type small { display: block; }
.lv-type input { margin-top: .25rem; }
.lv-half { display: flex; gap: .45rem; align-items: center; margin: .4rem 0; }
.lv-balance { display: grid; gap: .15rem; }
.lv-acts { display: flex; flex-direction: column; gap: .35rem; }
.bk-change { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.bk-change .bc-form { flex-basis: 100%; }
.bc-move-form { display: grid; gap: .35rem; margin-top: .4rem; border-top: 1px dashed #e3e7ef; padding-top: .5rem; }
.lv-bal-rows { display: grid; gap: .25rem; margin-top: .35rem; }
.lv-bal-row { display: flex; justify-content: space-between; gap: .6rem; }
.lv-bal-note { margin: -.15rem 0 .2rem; }
.mi-sec { margin: .8rem 0 .1rem; font-size: 1rem; }
.mi-status { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mi-docs { display: grid; gap: .4rem; }
.mi-doc { display: flex; justify-content: space-between; align-items: center; gap: .6rem; border: 1px solid #e3e7ef; border-radius: 12px; padding: .5rem .7rem; }
.hp-sub-cmp { overflow-x: auto; }
.hp-cmp { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hp-cmp th, .hp-cmp td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid #eef0f5; vertical-align: top; overflow-wrap: anywhere; }
.hp-changed td:last-child { background: #fff7e6; font-weight: 600; }

/* 📲 ส่งใบยืนยันการจองทางไลน์ (line-confirm.js · 149) */
.bk .lc-box { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e3e6ee; }
.lc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.lc-list { margin-top: 8px; }
.lc-person { align-items: center; gap: 8px; }
.lc-msg { color: #5c6478; overflow-wrap: anywhere; }

/* ➕ เช่าเพิ่ม (addons.js · 151) */
.bk-addons { margin-top: 8px; }
.bk-addons .btn { margin-top: 6px; }
.ad-card { border: 1px solid #e3e6ee; border-radius: 14px; padding: 12px; margin-top: 10px; background: #fff; }
.ad-card.ad-hot { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .15); }
.ad-top { display: flex; align-items: flex-start; gap: 10px; }
.ad-who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ad-pitch { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.5rem; min-width: 3.2rem;
  text-align: center; background: #eef2ff; color: #1a2032; border-radius: 10px; padding: 4px 6px; }
.ad-items { margin: 8px 0; }
.ad-money { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-acts .row-btns { margin-top: 10px; }
.ad-payform { margin-top: 10px; padding: 10px; border-radius: 12px; background: #fff7ed; }
.ad-m { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid #e3e6ee;
  border-radius: 12px; background: #fff; min-height: 44px; }
.ad-trow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px dashed #e3e6ee; }
.ad-trow input { width: 72px; text-align: center; }
.ad-staff select, .ad-staff input[type=text] { width: 100%; }
.ad-m { flex: 1 1 140px; white-space: nowrap; }
.ad-m input { width: auto; height: auto; margin: 0; }

/* 💸 สรุปรอบจ่าย (hrpay.js) · 🧾 หลักฐานใบลา (538) */
.py-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.py-big { font-family: 'Bai Jamjuree', sans-serif; font-size: 1.8rem; font-weight: 700; color: #1a2032; }
.py-review { text-decoration: none; }
.py-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.py-net { font-family: 'Bai Jamjuree', sans-serif; font-size: 1.3rem; font-weight: 700; }
.py-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.py-flags a.chip { text-decoration: none; }
.py-lines { margin: 8px 0; }
.py-line { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #e3e6ee; }
.py-line.py-minus span:last-child { color: #dc2626; }
.py-detail { margin-top: 8px; overflow-x: auto; }
.py-days { width: 100%; border-collapse: collapse; font-size: .9rem; }
.py-days th, .py-days td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #eef0f5; vertical-align: top; }
.py-days tr.py-no td { color: #5c6478; }
.lv-ev { margin: 6px 0 10px; }
.lv-evrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.lv-evedit-box { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lv-evedit-box select, .lv-evedit-box input { width: auto; min-width: 140px; }
.lv-evnote { margin: 6px 0 0; padding-left: 18px; }
.lv-evnote li { margin: 2px 0; }
.lv-warn { margin: 4px 0 0; padding-left: 18px; }
.lv-warn li { margin: 2px 0; }

/* ---------- สอน AI (aiqa.js) — คลาส .aiq- เป็นของเซสชัน AI แชทลูกค้า ---------- */
.aiq-start { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 .6rem; }
.aiq-count { font-family: "Bai Jamjuree", sans-serif; color: var(--ink-2); }
.aiq-count strong { font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.aiq-go { min-height: var(--tap); }
.aiq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.aiq-item { width: 100%; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; text-align: left;
  min-height: var(--tap); padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.aiq-item:hover { background: var(--gold-soft); border-color: var(--gold-line); }
.aiq-q { flex: 1 1 200px; }
.aiq-dlg { width: min(640px, calc(100vw - 32px)); }
.aiq-pos { font-family: "Bai Jamjuree", sans-serif; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aiq-bar { height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: .8rem; }
.aiq-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.aiq-label { margin: .5rem 0 .2rem; font-size: .85rem; color: var(--ink-2); }
.aiq-question { margin: 0; font-family: "Bai Jamjuree", sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
.aiq-ai { background: var(--accent-soft); border-radius: 10px; padding: .6rem .8rem; white-space: pre-wrap; word-break: break-word; font-size: .95rem; }
.aiq-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.aiq-actions .btn { min-height: var(--tap); }
.aiq-actions .btn-primary { flex: 1 1 180px; }
.aiq-foot { display: flex; justify-content: center; margin-top: .6rem; }
.aiq-saved { margin: .4rem 0 0; min-height: 1.3em; font-size: .88rem; color: var(--ok); }
/* มือถือ: ปุ่มบันทึกต้องเห็นตลอด ไม่ต้องเลื่อนหา — ติดขอบล่างของป๊อปอัพ */
.aiq-dlg textarea { min-height: 0; }
.aiq-dlg #aiq-answer { height: 6.5em; }
.aiq-dlg #aiq-avoid { height: 3.4em; }
.aiq-dlg .aiq-actions { position: sticky; bottom: -1.2rem; background: var(--card); padding: .6rem 0 .9rem; margin-bottom: -.4rem; }

/* 📲 ใบยืนยันการจอง (confirms.js · 157) */
.cf-row { border-bottom: 1px solid #eef0f5; }
.cf-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; background: none; border: 0;
  text-align: left; cursor: pointer; font: inherit; color: inherit; min-height: 48px; }
.cf-who { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.cf-body { padding: 0 0 12px; }
.hp-tabs a.hp-tab { text-decoration: none; display: inline-flex; align-items: center; color: inherit; }
.hp-tabs a.hp-tab.sel { color: #fff; }

/* 💳 ลูกค้าจ่ายแล้ว (addons.js · 163) */
.ad-paidform { margin-top: 10px; padding: 10px; border-radius: 12px; background: #eff6ff; }
.ad-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px; margin: 8px 0; border: 1px solid #dbe3f0;
  border-radius: 12px; background: #fff; cursor: pointer; }
.ad-opt input { width: auto; margin-top: 4px; flex: none; }
.ad-opt span { display: flex; flex-direction: column; gap: 2px; }

/* แจ้งลา — 3 หมวด (ป่วย/กิจ/พักร้อน) + ประเภทย่อย + วันคงเหลือในปุ่ม (17 ก.ย. 2569)
   🔴 input ทั่วไปใน app.css กว้าง 100% → radio ในการ์ดประเภทลาเลยบวมกินครึ่งจอ ต้องคืนขนาดเดิม */
.lv-type input[type=radio] { width: 20px; height: 20px; min-height: 0; flex: none; padding: 0; margin-top: .2rem; }
.lv-type > span { flex: 1; min-width: 0; }
.lv-groups { display: grid; gap: .45rem; }
.lv-group { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 1.5px solid #e3e7ef; border-radius: 14px; padding: .65rem .8rem; cursor: pointer; }
.lv-group.on { border-color: var(--accent); background: #eff6ff; }
.lv-g-ico { font-size: 1.6rem; flex: none; }
.lv-g-txt { flex: 1; min-width: 0; }
.lv-g-txt strong { display: block; font-size: 1.05rem; }
.lv-g-bal { display: block; white-space: pre-line; color: var(--ink-2); font-size: .85rem; line-height: 1.45; }
.lv-group.on .lv-g-txt strong { color: var(--accent); }
.lv-left { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: .45rem .65rem; font-weight: 600; font-size: .92rem; margin: .5rem 0 .3rem; }
.lv-vac { margin: .3rem 0; }

/* =====================================================================
   .lnc- หน้าแอดมิน "กิจกรรม" (js/pages/activities.js) — session ไลน์ลูกค้าดูแล
   ===================================================================== */
.lnc-row { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; margin-bottom: .6rem; }
.lnc-row img, .lnc-noimg { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex: 0 0 64px; }
.lnc-noimg { display: grid; place-items: center; font-size: 1.6rem; background: var(--accent-soft); }
.lnc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lnc-check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.lnc-check input { width: auto; }
.lnc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: .6rem 0; }
.lnc-thumb { margin: 0; }
.lnc-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.lnc-thumb figcaption { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.lnc-item { display: grid; gap: .35rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.lnc-item .btn { justify-self: start; }

/* 🗺️ ผังประจำวัน (day-plan.js) */
.dp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dp-canvas { width: 100%; height: auto; display: block; margin: 10px 0; border: 1px solid #e3e6ee; border-radius: 10px; background: #fff; }
.dp-list { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.dp-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e3e6ee; }
.dp-code { flex: none; min-width: 3.4rem; color: #fff; border-radius: 8px; padding: 4px 6px; text-align: center;
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; line-height: 1.1; display: flex; flex-direction: column; }
.dp-code small { font-size: .7rem; font-weight: 700; }
.dp-txt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

/* ---- session การเงิน (.fn-) ---- */
.fn-pos-head { margin: 1.4rem 0 .6rem; font-size: 1.05rem; }
.fn-picked { background: #eef4ff; border-radius: 10px; padding: .45rem .7rem; margin: .3rem 0 .5rem; }
.fn-guests { display: grid; gap: .35rem; margin-top: .5rem; }
.fn-guest-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.fn-guest-row input { width: 5.5rem; }
.fn-items-for { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.fn-q-pitch { margin-top: .5rem; border-top: 1px solid #e5e8ef; padding-top: .4rem; }
.fn-q-sub { font-size: .88rem; color: #5c6478; padding-left: .8rem; }

/* ลิงก์หน้ารวมคู่มือ บนหน้ากฎระเบียบ (HR 18 ก.ย. 2569) */
.hr-manuals-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; text-decoration: none; color: inherit; margin-bottom: .9rem; }
.hr-manuals-link strong { color: var(--accent); }

/* ---------- กล่องแชทลูกค้า (inbox.js) — คลาส .aiq- ของเซสชัน AI แชทลูกค้า ---------- */
.aiq-inbox { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: .8rem; align-items: start; }
.aiq-inbox-list { padding: .7rem; max-height: calc(100dvh - 190px); overflow-y: auto; }
.aiq-filters { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }
.aiq-f { cursor: pointer; border: 1px solid var(--line); min-height: 34px; font: inherit; font-size: .85rem; }
.aiq-f.aiq-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.aiq-chat { display: flex; flex-direction: column; gap: .2rem; width: 100%; text-align: left; padding: .6rem .65rem;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; min-height: var(--tap); }
.aiq-chat:hover, .aiq-chat.aiq-sel { background: var(--accent-soft); }
.aiq-chat-top, .aiq-chat-bottom { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.aiq-chat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiq-chat-time { font-size: .75rem; color: var(--ink-2); white-space: nowrap; }
.aiq-chat-last { flex: 1; min-width: 0; font-size: .85rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiq-chat-bottom .chip { font-size: .72rem; white-space: nowrap; }
.aiq-unread { background: var(--bad); color: #fff; border-radius: 99px; min-width: 1.4em; padding: 0 .4em; font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; }
.aiq-inbox-thread { display: flex; flex-direction: column; padding: 0; height: calc(100dvh - 190px); min-height: 380px; overflow: hidden; }
.aiq-thread-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.aiq-thread-who { flex: 1; min-width: 0; }
.aiq-back { display: none; }
.aiq-msgs { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .45rem; background: var(--bg); }
.aiq-day { align-self: center; font-size: .75rem; color: var(--ink-2); padding: .1rem .6rem; background: var(--card); border-radius: 99px; margin: .3rem 0; }
.aiq-msg { max-width: min(78%, 520px); padding: .45rem .7rem .3rem; border-radius: 14px; background: var(--card); box-shadow: 0 1px 1px rgba(26,32,50,.06); display: flex; flex-direction: column; gap: .15rem; }
.aiq-msg.aiq-in { align-self: flex-start; border-bottom-left-radius: 4px; }
.aiq-msg.aiq-out { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.aiq-msg.aiq-ai-msg { background: var(--off-bg); }
.aiq-msg-tag { font-size: .72rem; color: var(--ink-2); }
.aiq-msg-body { white-space: pre-wrap; word-break: break-word; }
.aiq-msg-time { font-size: .68rem; color: var(--ink-2); align-self: flex-end; font-variant-numeric: tabular-nums; }
.aiq-img { max-width: 100%; max-height: 320px; border-radius: 10px; cursor: zoom-in; display: block; }
.aiq-compose { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--line); background: var(--card); }
.aiq-compose textarea { flex: 1; min-height: 0; resize: none; }
.aiq-compose .btn { min-height: var(--tap); align-self: stretch; }
@media (max-width: 760px) {
  .aiq-inbox { grid-template-columns: 1fr; }
  .aiq-inbox-list { max-height: none; }
  .aiq-inbox.aiq-reading .aiq-inbox-list { display: none; }
  .aiq-back { display: inline-flex; }
  .aiq-inbox-thread { height: calc(100dvh - 150px); }
}
.aiq-compose .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fn-lay { margin: .4rem 0 .6rem; border: 1px solid #e5e8ef; border-radius: 10px; padding: .35rem .6rem; background: #fbfcfe; }
.fn-lay summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.fn-lay-map { display: flex; justify-content: center; margin: .3rem 0; }
.fn-lay-none { margin: .3rem 0; }
.fn-pitch-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; }
.fn-pitch-chips .btn { min-height: 44px; min-width: 64px; }
.fn-extra-who { background: #f3f6fb; border-radius: 10px; padding: .5rem .7rem; }
.fn-in { color: #15803d; }
.fn-out { color: #b42318; }
.fn-dep { color: #5c6478; }
.fn-cat-block { margin-bottom: .6rem; }
.fn-cat-block h3 { font-size: .95rem; margin: .4rem 0 .2rem; }
.fn-lg-row { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid #eef0f4; }
.fn-lg-main { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.fn-lg-side { text-align: right; flex: 0 0 auto; }
.fn-lg-amt { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.fn-voided { opacity: .6; }
.fn-presets { margin-top: .3rem; }
.fn-slip-prev { display: block; max-width: 100%; max-height: 38dvh; margin: .5rem auto 0; border-radius: 10px; border: 1px solid #e5e8ef; }
.fn-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .5rem; }
.fn-chips .btn { min-height: 40px; }
/* ---- จอครัว (618) — ปุ่มใหญ่ จิ้มง่าย ---- */
.fn-kh-card { padding: 1rem 1.1rem; }
.fn-kh-top { display: flex; gap: .9rem; align-items: center; }
.fn-kh-pitch { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 2rem; min-width: 3.4rem; text-align: center;
  background: #eef4ff; border-radius: 12px; padding: .2rem .5rem; }
.fn-kh-who { min-width: 0; overflow-wrap: anywhere; font-size: 1.05rem; }
.fn-kh-lines { margin: .7rem 0 .3rem; }
.fn-kh-line { display: flex; gap: .6rem; align-items: baseline; font-size: 1.2rem; padding: .25rem 0; }
.fn-kh-qty { font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; font-size: 1.4rem; min-width: 2.4rem; }
.fn-kh-note { background: #fff7e6; border-radius: 10px; padding: .45rem .7rem; font-size: 1.05rem; }
.fn-kh-acts { display: flex; gap: .6rem; margin-top: .7rem; }
.fn-kh-go { flex: 1; min-height: 64px; font-size: 1.3rem; }
.fn-kh-back { min-height: 64px; min-width: 88px; }
.fn-kh-new { outline: 3px solid #2563eb; animation: fn-kh-flash 1s ease-in-out 3; }
@keyframes fn-kh-flash { 50% { background: #eef4ff; } }
.fn-kh-cancel { border: 2px solid #b42318; opacity: .8; }
.fn-kh-stop { color: #b42318; font-weight: 700; font-size: 1.15rem; margin: .5rem 0; }

/* 624 cash: เตือนให้ลูกค้าสั่งเอง + เลือกช่องก่อนรับเงินชาบู/เช่าอุปกรณ์ */
.fn-pos-pitch { display: grid; gap: .4rem; margin-bottom: .8rem; }
.fn-self-order { margin: 0; padding: .55rem .7rem; border-radius: 8px; background: rgba(40, 160, 110, .12); }
.fn-req { color: #c33; font-weight: 700; }
.fn-pick-first { padding: .6rem 0; }
.fn-ws-food { display: grid; gap: .4rem; margin: .4rem 0; padding: .5rem .7rem; border-radius: 8px; background: #fff6e8; color: #1a2032; }

/* 💰 เงินและวันลาของฉัน (mine.js · HR 582) */
.mn-leave-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 10px 16px; margin: 0 0 14px; text-decoration: none; }
.mn-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.mn-tab.on { background: var(--accent, #2f6f4f); color: #fff; }
.mn-round .mn-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mn-lines { width: 100%; border-collapse: collapse; margin-top: 6px; }
.mn-lines td { padding: 4px 0; border-bottom: 1px solid var(--line, #e5e5e5); }
.mn-lines td:last-child { text-align: right; white-space: nowrap; }
.mn-net td { font-weight: 700; border-bottom: 0; padding-top: 8px; }
.mn-lv { padding: 8px 0; border-bottom: 1px solid var(--line, #e5e5e5); }
.mn-lv:last-child { border-bottom: 0; }
.cash-sent { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ⚠️ ลงเวลา: เลือกประเภทแปลก (clock.js · HR 19 ก.ย. 2569) */
.kind-warn { grid-column: 1 / -1; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--gold-soft, #fff4d6); color: var(--ink, #222); font-weight: 600; }
.cam-warn { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; padding: 12px;
  border-radius: 12px; background: #fff4d6; color: #222; font-weight: 600; line-height: 1.5; }
.cam-warn .btn { margin: 8px 8px 0 0; }

/* 636 สรุปเงินประจำวัน */
.fn-cd-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .4rem 0 .8rem; }
.fn-cd-tot > div { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: 8px; background: var(--accent-soft, #eff4ff); }
.fn-cd-tot strong { font-variant-numeric: tabular-nums; }
.fn-cd-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: .2rem .6rem; padding: .45rem 0; border-top: 1px solid var(--line, #e6e9f0); align-items: start; }
.fn-cd-row > span:last-child { grid-column: 2 / -1; }
.fn-cd-amt { text-align: right; font-variant-numeric: tabular-nums; }
.fn-cd-void { opacity: .55; }
.fn-cd-hold { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line, #e6e9f0); }
/* 638 เงินขาย/เงินประกัน + QR ไลน์ลาน */
.fn-split { display: grid; gap: .2rem; margin: .3rem 0 .5rem; }
.fn-split span { display: flex; justify-content: space-between; gap: .6rem; }
.fn-lineqr-box { max-width: 260px; margin: .6rem auto; background: #fff; padding: .4rem; border-radius: 8px; }
/* 654 สินค้าขาย */
.fn-shop-form { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.fn-shop-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: .4rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--line, #e6e9f0); }
@media (max-width: 560px) {
  .fn-shop-form { grid-template-columns: 1fr 1fr; }
  .fn-shop-row { grid-template-columns: 1fr 1fr; }
}
/* 656 นับของชุดเต็นท์ */
.fn-sc-row { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem .6rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line, #e6e9f0); }
.fn-sc-in { display: flex; gap: .3rem; }
.fn-sc-in input { width: 5.5rem; }
@media (max-width: 560px) { .fn-sc-row { grid-template-columns: 1fr auto; } .fn-sc-row > div:first-child { grid-column: 1 / -1; } }

/* 658 จอครัว: 4 ช่องสถานะ + โหมดจอครัว (#kitchen/tv) สำหรับแท็บเล็ตตั้งในครัว */
.fn-kh-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.fn-kh-lane { display: grid; gap: .7rem; min-width: 0; }
.fn-kh-lanehead { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.1rem;
  padding: .5rem .7rem; border-radius: 10px; background: var(--accent-soft, #eff4ff); }
.fn-kh-count { font-family: 'Bai Jamjuree', sans-serif; font-size: 1.4rem; }
.fn-kh-src { font-size: .9rem; font-weight: 600; color: var(--ink-2, #5c6478); margin-bottom: .35rem; }
.fn-kh-src-pos { border-left: 6px solid #16a34a; }
.fn-kh-src-rent { border-left: 6px solid #d97706; }
.fn-kh-src-food { border-left: 6px solid #2563eb; }
.fn-kh-cash { background: #fff1f0; color: #b42318; border-radius: 10px; padding: .45rem .7rem; font-size: 1rem; }
.shop-find { width: 100%; padding: .6rem .8rem; font-size: 1rem; margin-bottom: .5rem; }
.fn-kh-warn { background: #fef3f2; border: 2px solid #d92d20; color: #912018; }
.fn-kh-stage { border-radius: 10px; padding: .45rem .7rem; font-size: 1rem; font-weight: 600; margin: .3rem 0; }
.fn-kh-stage-wait { background: #fff4e5; color: #b54708; }
.fn-kh-stage-go { background: #ecfdf3; color: #067647; }
.fn-kh-sumline { font-size: 1.05rem; }
.fn-kh-clock { font-family: 'Bai Jamjuree', sans-serif; font-size: 1.6rem; font-weight: 700; margin-left: auto; }
.fn-kh-new { animation: fn-kh-flash 1s ease-in-out 8; }
@media (max-width: 900px) { .fn-kh-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fn-kh-lanes { grid-template-columns: 1fr; } }
/* โหมดจอครัว: ไม่มีเมนู ใช้พื้นที่เต็มจอ ตัวใหญ่ขึ้น */
body.fn-tv .topbar, body.fn-tv .sidenav, body.fn-tv .bottomnav { display: none !important; }
body.fn-tv .view { max-width: none; padding: .8rem 1rem; }
body.fn-tv .fn-kh-line { font-size: 1.45rem; }
body.fn-tv .fn-kh-qty { font-size: 1.7rem; }
body.fn-tv .fn-kh-pitch { font-size: 2.6rem; }
body.fn-tv .fn-kh-go { min-height: 76px; font-size: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .fn-kh-new { animation: none; } }
/* ผังจอง: QR ประจำช่อง + รับเงินแทน */
.fn-pitch-acts { margin-top: .6rem; }
.fn-pitch-qr { max-width: 320px; }
/* 662 หน้ารับเงินเริ่มจากผัง */
.fn-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .45rem; margin: .5rem 0 .8rem; }
.fn-map-cell { display: grid; gap: .1rem; justify-items: center; padding: .5rem .3rem; min-height: 64px; border-radius: 10px;
  border: 1px solid var(--line, #e6e9f0); background: var(--card, #fff); color: var(--ink-2, #5c6478); font: inherit; cursor: pointer; }
.fn-map-cell strong { font-family: 'Bai Jamjuree', sans-serif; font-size: 1.2rem; color: var(--ink, #1a2032); }
.fn-map-cell span { font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-map-cell.busy { background: var(--accent-soft, #eff4ff); border-color: var(--accent, #2563eb); color: var(--ink, #1a2032); }
.fn-map-cell:focus-visible { outline: 3px solid var(--accent, #2563eb); outline-offset: 2px; }
.fn-take-bar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* 670 โหมดซ้อม */
.fn-practice-bar { background: #fde047; color: #422006; text-align: center; padding: .35rem 1rem; font-size: .95rem; }
body.fn-practice .topbar { box-shadow: inset 0 -4px 0 #facc15; }
.fn-practice-btn { white-space: nowrap; }
body.fn-practice .fn-practice-btn { background: #fde047; color: #422006; }

/* 🗂️ เมนูซ้ายแบบหมวดพับได้ (น้องเว็บ · พี่เต้ 19 ก.ย. 2569) — ย้อนกลับ: NAV_GROUPED = false ใน app.js */
.navgroup { margin: 2px 0; }
.navgroup-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 12px; border: 0; background: transparent;
  border-radius: 10px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; min-height: 48px; }
.navgroup-head:hover { background: #eef1f7; }
.navgroup-head .ico { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.navgroup-n { margin-left: auto; font-size: .8rem; color: var(--muted); background: #eef1f7; border-radius: 999px; padding: 1px 8px; font-weight: 500; }
.navgroup-arrow { color: var(--muted); width: 1rem; text-align: center; }
.navgroup-items { display: none; padding-left: 10px; }
.navgroup.open .navgroup-items { display: block; }
.navgroup.open > .navgroup-head { color: var(--accent); }

/* หน้า 📋 งาน: ข้อความเตือน (ยังไม่ปิดงาน) — น้องเว็บ */
.toast.warn { background: #b45309; }

/* 738: หมวด ประกาศ / คำสั่งงาน ในหน้ากฎระเบียบ */
.rules-group { font-size: 1rem; margin: 1.1rem 0 .45rem; }
.rules-group .muted { font-weight: 400; margin-left: .35rem; }

/* รูปที่เลือกไว้ก่อนกดส่งในกล่องแชท (324 · อายขอส่งรูปให้ลูกค้า) */
.aiq-photo-wrap { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem 0; }
.aiq-photo-wrap img { max-height: 90px; border-radius: 10px; border: 1px solid var(--line); }
.aiq-compose .file-btn { min-height: var(--tap); padding: 0 .7rem; font-size: 1.15rem; }