/* =====================================================================
   Queen Brows ERP/CRM — ส่วนประกอบเฟส 1 (ลูกค้า · Lead · นัดหมาย · หน้าร้าน · ขาย · การเงิน · คลังข้อมูล)
   ใช้ต่อจาก app.css (ธีมเดียวกัน ไม่มี backdrop blur)
   ===================================================================== */

/* ---------- เมนูซ้าย 11 รายการ ---------- */
.rail { overflow-y: auto; gap: 2px; padding: 12px 6px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-brand { width: 40px; height: 40px; font-size: 18px; margin-bottom: 6px; flex: none; }
.rail-item { width: 70px; padding: 6px 2px 5px; font-size: 10.5px; flex: none; }
.rail-item svg.i { width: 20px; height: 20px; }
.rail-badge.amber { background: var(--amber); }
.rail-badge.left { right: auto; left: 10px; }
.rail-bottom { padding-top: 6px; }
@media (max-height: 780px) { .rail-item { padding: 4px 2px 3px; gap: 1px; } .rail-item span { font-size: 10px; } }

/* ---------- ฟอร์ม ---------- */
.req { color: var(--danger); font-weight: 700; }
.sel .sel-ic { display: inline-flex; } .sel .sel-ic:empty { display: none; }
.sel-lbl.ph { color: var(--muted-2); }
.sel:disabled { background: var(--bg); cursor: default; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.danger-solid:hover { background: #b91c1c; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; } .btn.ok:hover { background: #15803d; }
.btn.purple { background: var(--purple-bg); border-color: #dccdfb; color: var(--purple); }
.input[type=date], .input[type=time], .input[type=datetime-local] { min-height: 38px; }
.input:disabled, textarea.input:disabled { background: var(--bg); color: var(--muted); }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; max-width: 100%; }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: 13px; color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.tgl { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; user-select: none; position: relative; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl .tr { width: 40px; height: 22px; border-radius: 11px; background: #cbd5e1; position: relative; flex: none; transition: background .15s; }
.tgl .tr::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tgl input:checked + .tr { background: var(--ok); } .tgl input:checked + .tr::after { left: 20px; }
.tgl input:focus-visible + .tr { box-shadow: 0 0 0 3px var(--brand-soft); }
.chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.form-sec { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }
.form-sec::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.grid-3.tight, .grid-2.tight { gap: 8px; }
.hint { font-size: 12px; color: var(--muted); }
.money-in { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- ส่วนหน้า ---------- */
.page-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ph-t { min-width: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.filters .search { flex: 1; min-width: 200px; }
.filters .sel.block { width: auto; min-width: 150px; }
.filters .input[type=date] { width: auto; }
.pager .gap { padding: 0 2px; }
.num, .money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--ok); } .neg { color: var(--danger); }
.nowrap { white-space: nowrap; }
.link { color: var(--brand); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-align: left; }
.link:hover { text-decoration: underline; }
.row-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; } .mt0 { margin-top: 0; }
.tabs2 { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tabs2 button { border: 0; background: none; padding: 9px 14px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs2 button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tabs2 .n { font-size: 11px; background: var(--danger); color: #fff; border-radius: 999px; padding: 0 6px; line-height: 17px; }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi.click { cursor: pointer; } .kpi.click:hover { border-color: var(--brand-line); }
.kpi .v.sm { font-size: 20px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--brand-soft); border-top-color: var(--brand); animation: spin .8s linear infinite; margin: 0 auto; }
.muted-box { background: var(--bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.alertbox { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; border-radius: 10px; padding: 8px 12px; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.modal.xl { max-width: 1080px; }
.modal-foot .spacer { flex: 1; }
.modal-foot { flex-wrap: wrap; }

/* ---------- สถานะ ---------- */
.stchip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--bg); color: var(--muted); }
.st-new { background: #eaf1fe; color: #1f5fe0; } .st-talk { background: #e0f2fe; color: #0369a1; } .st-int { background: #ede9fe; color: #6d28d9; }
.st-dec { background: #fef3c7; color: #92400e; } .st-fu { background: #ffedd5; color: #c2410c; } .st-appt { background: #ccfbf1; color: #0f766e; }
.st-dep { background: #dcfce7; color: #15803d; } .st-won { background: #16a34a; color: #fff; } .st-lost { background: #f1f5f9; color: #64748b; }

/* ---------- รายละเอียด (ลูกค้า / Lead / ขาย) ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dl { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 7px 12px; font-size: 13.5px; margin: 0; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; min-width: 0; }
.cust-hd { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cust-hd .nm { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.cust-hd .meta { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); align-items: center; }
.minirow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; min-width: 0; }
.minirow:last-child { border-bottom: 0; }
.minirow.click { cursor: pointer; border-radius: 8px; } .minirow.click:hover { background: #f8fafc; }
.minirow .grow { flex: 1; min-width: 0; }
.minirow.on { background: var(--brand-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
/* หน้าลูกค้า: นัด ↔ OPD ↔ ใบยินยอม ที่ผูกกัน */
.linked { border-bottom: 1px dashed var(--line-soft); }
.linked:last-child { border-bottom: 0; }
.linked > .minirow { border-bottom: 0; }
.link-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 0 8px; }
.link-row .btn.sm { padding: 2px 9px; font-size: 12px; }
.chip.link-chip { cursor: pointer; } .chip.link-chip svg { width: 12px; height: 12px; }
.chip.link-chip:hover { filter: brightness(.97); }
.minirow .grow .s { font-size: 12px; color: var(--muted); }
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-i { position: relative; padding: 0 0 14px; font-size: 13.5px; }
.tl-i::before { content: ""; position: absolute; left: -19px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
.tl-i.sys::before { border-color: var(--muted-2); }
.tl-i .h { color: var(--muted); font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tl-i .b { white-space: pre-wrap; margin-top: 2px; }
.sum { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum .big { font-size: 18px; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); padding-top: 7px; margin-top: 2px; }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.qa .btn { justify-content: center; }
.warn-names { background: var(--warn-bg); color: #8a5608; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; text-align: left; }

/* ---------- ไฟล์แนบ / รูป ---------- */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); flex: none; }
.thumb a { display: block; width: 100%; height: 100%; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--danger); font-size: 11px; font-weight: 700; gap: 2px; }
.thumb .x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(15,23,42,.72); color: #fff; display: grid; place-items: center; padding: 0; }
.thumb .x svg.i { width: 13px; height: 13px; }
.add-thumb { width: 84px; height: 84px; border: 1.5px dashed #c9d4e5; border-radius: 10px; background: #fff; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; flex: none; }
.add-thumb:hover { border-color: var(--brand); color: var(--brand); }
.add-thumb.busy { opacity: .6; pointer-events: none; }

/* ---------- แชท: แผงลูกค้า / ร่าง AI / รูปแนบ ---------- */
.att-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.att-row .thumb, .att-row .add-thumb { width: 60px; height: 60px; }
/* แผง AI ร่างคำตอบ (เหนือช่องพิมพ์) — ภายในทีม ลูกค้าไม่เห็น */
.ai-panel { background: var(--purple-bg); border: 1px solid #ddd0fb; color: #3b1c7a; border-radius: 10px; padding: 6px 10px 8px; margin-bottom: 8px; font-size: 12.5px; max-height: 40vh; overflow: auto; }
.ai-panel.busy { display: flex; gap: 10px; align-items: center; padding: 9px 12px; }
.ai-panel.warn { background: #fff7ed; border-color: #fed7aa; }
.ai-panel .grow { flex: 1; min-width: 0; }
.ai-head { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ai-head > svg { width: 15px; height: 15px; color: var(--purple); flex: none; }
.ai-head .btn.icon.sm { width: 26px; height: 26px; }
.ai-head .btn.sm:not(.icon) { padding: 2px 8px; font-size: 12px; }
.ai-conf { font-size: 11.5px; border-radius: 999px; padding: 1px 8px; background: #ede4ff; color: #5b21b6; white-space: nowrap; }
.ai-conf.high { background: var(--ok-bg); color: #166534; } .ai-conf.low { background: var(--danger-bg); color: #991b1b; }
.ai-row { display: flex; gap: 6px; align-items: flex-start; margin-top: 5px; min-width: 0; overflow-wrap: break-word; }
.ai-row > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ai-row > span, .ai-row > div { min-width: 0; }
.ai-row.muted { color: #6b5b95; } .ai-row.hot { color: #9a3412; } .ai-row.ai-hint { color: #1e3a8a; }
.ai-panel.min { padding-bottom: 6px; }
.ai-row ul { margin: 2px 0 0; padding-left: 18px; }
.ai-refine { display: flex; gap: 6px; margin-top: 7px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.ai-q { flex: none; border: 1px solid #d8c8fb; background: #fff; color: #5b21b6; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.ai-q:hover { background: #f3edff; }
.ai-ask { display: flex; gap: 6px; margin-top: 6px; align-items: center; min-width: 0; }
.ai-ask .input { flex: 1; min-width: 0; padding: 5px 10px; font-size: 13px; }
.ai-ask .btn { flex: none; }
.ai-ins { color: #6b5b95; margin-top: 2px; overflow-wrap: anywhere; }
.ai-spin { width: 16px; height: 16px; border: 2px solid #d8c8fb; border-top-color: var(--purple); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
.pop.ai-menu { max-width: min(340px, calc(100vw - 16px)); }
.ai-budget { margin-top: 10px; display: grid; gap: 4px; }
.ai-budget .bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.ai-budget .bar i { display: block; height: 100%; background: var(--purple); border-radius: 999px; }
.ai-users { display: grid; gap: 6px; font-size: 13px; }
.ai-users .row-b { flex-wrap: wrap; gap: 2px 10px; }
.pop.wide { max-width: 440px; min-width: 320px; }
.pop .opt .pimg { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex: none; background: var(--bg); }
.pop .opt .sub { white-space: normal; }
.pop .opt .pcode { flex: none; width: 40px; height: 26px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font: 700 11px ui-monospace, Consolas, monospace; display: grid; place-items: center; }

/* ---------- คลังข้อความ: แผงตรวจก่อนส่ง · ช่อง [ ] · ข้อความแนะนำ · ยืนยันก่อนส่ง ---------- */
.pat-ctx { background: #fffdf6; border: 1px solid #f1e3b8; border-radius: 10px; padding: 6px 10px 8px; margin-bottom: 8px; font-size: 12.5px; max-height: 36vh; overflow: auto; }
.pat-ctx.min { padding-bottom: 6px; }
.pat-ctx .pc-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pat-ctx .pc-head .btn.icon.sm { width: 26px; height: 26px; }
.pat-ctx .pc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pat-ctx .pc-int { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #8a5608; background: var(--amber-bg); border-radius: 999px; padding: 2px 8px; white-space: nowrap; flex: none; }
.pat-ctx .pc-int svg { width: 12px; height: 12px; }
.pat-ctx .pc-body { display: grid; gap: 5px; margin-top: 5px; }
.pat-ctx .pc-row { display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.pat-ctx .pc-row .k { flex: none; min-width: 76px; color: var(--muted); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.pat-ctx .pc-row .k svg { width: 13px; height: 13px; }
.pat-ctx .pc-row .v { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.pat-ctx .pc-row .q { color: var(--ink); font-weight: 500; }
.pat-ctx .pc-row .btn.sm { padding: 3px 9px; font-size: 12px; }
.pat-ctx .pc-note { display: flex; gap: 6px; align-items: flex-start; background: #fff4cc; border: 1px solid #f3dd8f; border-radius: 8px; padding: 6px 8px; color: #6b4a06; cursor: pointer; }
.pat-ctx .pc-note.hot { background: #ffe8a3; border-color: #e7b93c; }
.pat-ctx .pc-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.pat-ctx .pc-note .v { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pat-ctx .pc-note.open .v { display: block; }
.pat-ctx .gt { display: inline-block; background: var(--danger-bg); color: #991b1b; border-radius: 6px; padding: 0 6px; margin: 1px 2px 1px 0; }
.pat-ctx .gt.ok { background: var(--ok-bg); color: #166534; }
.pat-ctx .assess .v { color: #5b21b6; }
.ok-t { color: var(--ok); } .warn-t { color: var(--warn); }
.code-ref { display: inline; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); border-radius: 5px; padding: 0 4px; font: 600 11.5px ui-monospace, Consolas, monospace; cursor: pointer; }
.holes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; color: #991b1b; background: var(--danger-bg); border-radius: 8px; padding: 5px 8px; margin-bottom: 8px; min-width: 0; }
.holes svg { width: 14px; height: 14px; flex: none; }
.holes .hole { border: 1px dashed #e59393; background: #fff; color: #991b1b; border-radius: 6px; padding: 1px 6px; font-size: 12px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.sugg { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; margin-bottom: 8px; font-size: 12.5px; padding-bottom: 2px; }
.sugg > svg { width: 14px; height: 14px; color: var(--purple); flex: none; }
.sugg .lbl { color: var(--muted); white-space: nowrap; flex: none; }
.sugg .sg { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 10px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--text); cursor: pointer; }
.sugg .sg:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.sugg .sg b { color: var(--brand); }
.gate-list { display: grid; gap: 8px; }
.gate-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.gate-item input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.gate-item > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.gate-hints { margin-top: 12px; display: grid; gap: 6px; font-size: 12.5px; background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.gate-hints .gh { overflow-wrap: anywhere; }
/* คลังข้อความในหน้า คลังข้อมูล */
.lib-guide { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); max-height: 360px; overflow: auto; }
.pat-card .pc-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; min-width: 0; }
.pat-card .fu { font-size: 12.5px; color: var(--ink); margin-top: 4px; overflow-wrap: anywhere; }
.pat-card .int { font-size: 12.5px; color: #6b4a06; background: #fff4cc; border-radius: 8px; padding: 5px 8px; margin-top: 6px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pat-card .body { overflow-wrap: anywhere; }
.chip.lock { background: var(--danger-bg); color: #991b1b; border-color: #f5c2c2; }
.chip.assess { background: var(--purple-bg); color: #5b21b6; border-color: #ddd0fb; }
.chip.img-miss { background: var(--amber-bg); color: #8a5608; border-color: #f3dd8f; }
.gate-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.elig-rules { margin: 0 0 8px; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; overflow-wrap: anywhere; }
/* คลังคำตอบ: เลือกหมวด → เลื่อนดูคำตอบทั้งหมดในหมวด (มือถือเป็นแผ่นเลื่อนขึ้นจากด้านล่าง) */
.modal.pat-browser { display: flex; flex-direction: column; height: min(780px, calc(100vh - 40px)); overflow: hidden; }
.modal.pat-browser .modal-head h3 { display: flex; align-items: center; gap: 8px; }
.modal.pat-browser .modal-head h3 svg { width: 18px; height: 18px; color: var(--brand); }
.modal.pat-browser .modal-body { padding: 0; flex: 1; min-height: 0; display: flex; }
.pb { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.pb-top { padding: 12px 16px 10px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 10px; }
.pb-top .search { position: relative; }
.pb-cats { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }   /* ตัวกรองหมวดตัดลงบรรทัดใหม่ เห็นครบทุกหมวด ไม่ต้องเลื่อนข้าง */
.pb-cat { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--text); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; cursor: pointer; }
.pb-cat svg { width: 14px; height: 14px; color: var(--purple); }
.pb-cat .n { font-size: 11px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.pb-cat.on { background: var(--brand); border-color: var(--brand); color: #fff; } .pb-cat.on .n { background: rgba(255,255,255,.22); color: #fff; } .pb-cat.on svg { color: #fff; }
.pb-list { flex: 1; overflow: auto; padding: 4px 8px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pb-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); background: none; padding: 11px 8px; cursor: pointer; }
.pb-item:hover, .pb-item:focus-visible { background: var(--bg); }
.pb-code { flex: none; min-width: 46px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font: 700 12px ui-monospace, Consolas, monospace; display: grid; place-items: center; padding: 0 6px; }
.pb-img { flex: none; width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--bg); }
.pb-main { min-width: 0; flex: 1; display: grid; gap: 3px; }
.pb-t { font-weight: 600; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.pb-t .mono { color: var(--brand); }
.pb-t svg { width: 13px; height: 13px; color: var(--danger); vertical-align: -2px; }
.pb-n { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pb-b { font-size: 13px; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-end, .pb-more { text-align: center; color: var(--muted); font-size: 12.5px; padding: 14px; }
.pb-empty { text-align: center; color: var(--muted); padding: 30px 16px; font-size: 13.5px; display: grid; gap: 10px; justify-items: center; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 560px), (pointer: coarse) and (max-width: 1100px) and (max-aspect-ratio: 5/8) {
  .modal-bg:has(> .modal.pat-browser) { padding: 0; align-items: end; }
  .modal.pat-browser { max-width: none; height: 90vh; height: 90dvh; border-radius: 16px 16px 0 0; }
  .modal.pat-browser .modal-head { padding: 12px 14px; }
  .pb-top { padding: 10px 12px 8px; }
  .pb-cats { max-height: 28vh; overflow-y: auto; }   /* หมวดเยอะบนมือถือ: ตัดบรรทัดแต่ไม่กินที่รายการคำตอบเกินไป */
  .pb-cat { padding: 5px 10px; font-size: 12.5px; }
}
@media (max-width: 820px), (pointer: coarse) and (max-height: 560px), (pointer: coarse) and (max-width: 1100px) and (max-aspect-ratio: 5/8) {
  .pat-ctx { max-height: 24vh; }
  .holes { max-height: 13vh; overflow: auto; }
  .pat-ctx .pc-row .k { min-width: 64px; }
  .ai-panel { max-height: 32vh; padding: 5px 8px 7px; }
  .ai-panel .ai-why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* เหตุผลยาวไม่ดันแชทหาย */
  .ai-row ul { padding-left: 16px; }
  .ai-ask .tl-long { display: none; }   /* "ร่างใหม่" เหลือแต่ไอคอน */
}
/* iPhone ซูมหน้าเองเมื่อแตะช่องที่ตัวอักษรเล็กกว่า 16px (แล้วหน้าจอไม่พอดีจอ) — จอสัมผัสใช้ 16px */
@media (pointer: coarse) { input.input, textarea, .comp-text { font-size: 16px; } .ai-ask .input { font-size: 16px; } }
.info .cust-mini { text-align: left; }
.info .lead-mini { background: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.handoff { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

/* ---------- Lead: บอร์ด ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kcol { flex: 0 0 272px; background: #eef2f8; border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 250px); min-height: 160px; }
.kcol-head { padding: 10px 12px 8px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.kcol-head .n { background: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.kcol-head .v { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kcol-body { padding: 0 8px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; flex: 1; }
.kcol.drop { outline: 2px dashed var(--brand); outline-offset: -3px; background: var(--brand-soft); }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; cursor: pointer; box-shadow: var(--shadow-sm); }
.kcard:hover { border-color: #c9d4e5; }
.kcard.dragging { opacity: .45; }
.kcard .t { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.kcard .s { font-size: 12px; color: var(--muted); }
.kcard .m { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; flex-wrap: wrap; color: var(--muted); }
.kcard .m .val { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.due { display: inline-flex; align-items: center; gap: 3px; } .due.over { color: var(--danger); font-weight: 600; } .due.today { color: var(--warn); font-weight: 600; }
.kmore { text-align: center; font-size: 12px; }
.matrix th, .matrix td { text-align: center; } .matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix td.z { color: #cbd5e1; }

/* ---------- นัดหมาย: ปฏิทิน ---------- */
.cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-nav .ttl { font-weight: 700; color: var(--ink); font-size: 15px; min-width: 150px; text-align: center; }
.cal-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; max-height: calc(100vh - 250px); }
.cal-grid { display: grid; position: relative; min-width: max-content; }
.cal-h { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 6px; font-weight: 600; font-size: 13px; text-align: center; white-space: nowrap; }
.cal-h.corner { left: 0; z-index: 4; }
.cal-times { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid var(--line); }
.cal-times div { font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; box-sizing: border-box; transform: translateY(-7px); }
.cal-col { position: relative; border-right: 1px solid var(--line-soft); min-width: 170px; }
.cal-slot { border-bottom: 1px solid var(--line-soft); cursor: pointer; box-sizing: border-box; }
.cal-slot.hour { border-bottom-color: #e2e8f0; }
.cal-slot:hover { background: #f5f9ff; }
.cal-ev { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 3px 7px; font-size: 12px; overflow: hidden; cursor: pointer; border-left: 3px solid; line-height: 1.35; box-shadow: var(--shadow-sm); }
.cal-ev .t { font-weight: 600; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 1; pointer-events: none; }
.ev-booked { background: #eaf1fe; border-color: #1f5fe0; color: #173b8f; }
.ev-confirmed { background: #ede9fe; border-color: #7c3aed; color: #4c1d95; }
.ev-arrived { background: #ccfbf1; border-color: #0d9488; color: #115e59; }
.ev-done { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.ev-cancelled, .ev-no_show { background: #f1f5f9; border-color: #94a3b8; color: #64748b; text-decoration: line-through; }
.week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.wday { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 220px; display: flex; flex-direction: column; min-width: 0; }
.wday.today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.wday-h { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; display: flex; justify-content: space-between; gap: 6px; align-items: center; cursor: pointer; }
.wday-h b { color: var(--ink); }
.wday-b { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.bk { border-radius: 8px; padding: 5px 8px; font-size: 12px; border-left: 3px solid; cursor: pointer; line-height: 1.35; }
.bk .t { font-weight: 600; }
.remind-row .txt { font-size: 12.5px; color: var(--muted); white-space: pre-wrap; }

/* ---------- หน้าร้าน / บัตรประชาชน ---------- */
.idc { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: start; }
.idc .ph { width: 100px; height: 124px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; color: var(--muted-2); }
.idc .ph img { width: 100%; height: 100%; object-fit: cover; }
.idc .ph svg.i { width: 34px; height: 34px; }
.agent-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cand { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cand + .cand { margin-top: 8px; }
.cand.best { border-color: var(--ok); background: var(--ok-bg); }
.queue-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.queue-row:last-child { border-bottom: 0; }
.queue-row .tm { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {   /* จอเล็ก: ปุ่ม (ดู OPD / ขาย) ลงบรรทัดล่าง ชื่อ-บริการไม่ถูกบีบ */
  .queue-row { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 10px; }
  .queue-row > :nth-child(3) { grid-column: 2 / -1; }
}

/* ---------- ขาย: รายการสินค้า/บริการ ---------- */
.items { display: flex; flex-direction: column; }
.itemrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 72px 110px 100px 110px 34px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.itemrow.h { font-size: 12px; color: var(--muted); font-weight: 600; padding-top: 0; }
.itemrow .amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.itemrow .input { padding: 7px 9px; }
.pay-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fbfcfe; }

/* ---------- การเงิน / AI ---------- */
.catbar { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 4px 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.catbar .bar { grid-column: 1 / -1; height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.catbar .bar i { display: block; height: 100%; border-radius: 4px; }
.mode-cards { display: grid; gap: 8px; }
.mode-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.mode-card.on { border-color: var(--brand); background: var(--brand-soft); }
.mode-card input { margin-top: 4px; accent-color: var(--brand); }
.mode-card .d { font-size: 12.5px; color: var(--muted); }
.mode-card.locked { opacity: .5; cursor: not-allowed; }
.kw-list { display: flex; gap: 6px; flex-wrap: wrap; }
.kw-list .kw { background: var(--brand-soft); color: var(--brand); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; display: inline-flex; gap: 4px; align-items: center; }
.kw-list .kw button { border: 0; background: none; color: inherit; padding: 0; line-height: 1; }
.side-list { display: flex; flex-direction: column; gap: 2px; }
.side-list button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 9px; display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text); }
.side-list button:hover { background: var(--bg); }
.side-list button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.side-list .n { margin-left: auto; font-size: 12px; color: var(--muted); }
.split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
.pat-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.pat-card:last-child { border-bottom: 0; }
.pat-card .body { font-size: 13px; color: var(--muted); white-space: pre-wrap; max-height: 5.8em; overflow: hidden; }
.pat-card .thumbs .thumb { width: 56px; height: 56px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .detail { grid-template-columns: 1fr; } .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .itemrow { grid-template-columns: minmax(0, 1fr) 130px 60px 96px 96px 34px; } .itemrow .disc { display: none; } .split { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .kcol { flex-basis: 250px; }
  .week { grid-template-columns: repeat(7, 210px); }
  .dl { grid-template-columns: 1fr; gap: 2px 0; } .dl dd { margin-bottom: 6px; }
  .kpis.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .sel.block { min-width: 0; flex: 1 1 140px; }
  .itemrow { grid-template-columns: minmax(0, 1fr) 110px 56px 90px 34px; } .itemrow .amt { display: none; }
  .idc { grid-template-columns: 80px minmax(0, 1fr); } .idc .ph { width: 80px; height: 100px; }
  .qa { grid-template-columns: 1fr; }
}
@media print { .rail, .page-acts, .filters, .pager { display: none !important; } }

/* อัตราค่าคอม: ช่องกรอกคู่กับปุ่มสลับ % / บาท */
.rate-cell { display: flex; gap: 4px; align-items: center; }
.rate-cell .input { padding: 6px 8px; text-align: right; min-width: 0; }
.rate-cell .kind { width: 34px; flex: none; justify-content: center; padding: 6px 0; font-weight: 700; }
.table.rates td, .table.rates th { padding: 8px 10px; }
/* ตารางอัตราค่าคอม: หัวตาราง (ชื่อระดับ + ช่องเติมทั้งคอลัมน์) ค้างอยู่บนสุดขณะเลื่อนดูบริการ */
.rates-wrap { max-height: min(74vh, 960px); overflow: auto; }
.table.rates thead th { position: sticky; top: 0; z-index: 3; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); vertical-align: top; }
.table.rates .rate-cell.fill { margin-top: 6px; }
.table.rates .rate-cell.fill .input { background: #fffdf3; border-style: dashed; font-weight: 600; }
.table.rates .rate-cell.fill .input::placeholder { font-weight: 400; font-size: 12.5px; }
.table.rates .rate-cell.fill .input.bad { border-color: var(--danger); background: #fff5f5; }
.table.rates .fill-hint { font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 6px; line-height: 1.4; white-space: normal; }
.chip.lv .lnk[disabled] { opacity: .25; pointer-events: none; }
.chip.lv { display: inline-flex; align-items: center; gap: 4px; }
.chip.lv .lnk { border: 0; background: none; padding: 0 2px; color: inherit; opacity: .6; cursor: pointer; display: inline-flex; }
.chip.lv .lnk:hover { opacity: 1; }
.chip.lv .lnk svg { width: 13px; height: 13px; }
.sel.lvsel { min-width: 180px; }

/* เตือนหน้าต่าง 24 ชม. ของ Facebook/Instagram */
.win-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.win-warn svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ใบ OPD 4 หน้า */
.opdrec .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 14px; font: inherit; cursor: pointer; text-align: left; }
.opt-chip i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.opt-chip.on { border-color: #14432f; background: #eef6f1; color: #14432f; font-weight: 600; }
.opt-chip .swatch { display: inline-block; width: 34px; height: 9px; border-radius: 6px 12px 2px 6px; border: 1px solid #555; margin-bottom: 3px; }
.tone-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; margin-top: 8px; cursor: pointer; }
.tone-row .num { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #14432f; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #14432f; }
.tone-row.on { border-color: #14432f; background: #eef6f1; } .tone-row.on .num { background: #14432f; color: #fff; }
.tone-row .input { grid-column: 2 / -1; }
.tone-lab { display: inline-block; border: 1px solid #14432f; color: #14432f; padding: 1px 10px; margin-top: 4px; font-size: 12.5px; }
.tone-row .dots { display: flex; gap: 10px; } .tone-row .dots span { text-align: center; font-size: 11px; color: var(--muted); }
.tone-row .dots b { display: block; width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 2px; }
.sk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.skpad { position: relative; background: #fff; border: 1.5px dashed #9fb3a8; border-radius: 12px; touch-action: none; overflow: hidden; }
.skpad.brow { aspect-ratio: 400 / 160; } .skpad.lips { aspect-ratio: 300 / 160; }
.skpad svg, .skpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .skpad canvas { touch-action: none; cursor: crosshair; }
.pad-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .pad-tools .btn.on { border-color: #14432f; color: #14432f; background: #eef6f1; }
.dotc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.mix-row { display: grid; grid-template-columns: 26px minmax(0, 1.3fr) minmax(0, 1fr) 90px 116px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; }
.mix-row.h { font-size: 12px; color: var(--muted); font-weight: 600; } .mix-row .n { font-weight: 700; color: #14432f; }
.wells { display: flex; gap: 4px; } .well { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.well.on { background: #14432f; border-color: #14432f; color: #fff; }
.sig-thumb { height: 34px; max-width: 120px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.sigpad { position: relative; height: 220px; border: 2px dashed #94a3b8; border-radius: 12px; background: #fff; touch-action: none; }
.sigpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
@media (max-width: 900px) { .sk-grid { grid-template-columns: 1fr; } .mix-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-bottom: 1px dashed var(--line); } .mix-row.h { display: none; } .mix-row [data-k=drops] { grid-column: 2; } .mix-row [data-k=note] { grid-column: 2 / -1; } }

/* สลับ แชท | คอมเมนต์ + หน้ารวมคอมเมนต์ */
.mode-switch { display: flex; gap: 4px; background: var(--bg); border-radius: 12px; padding: 3px; margin-bottom: 12px; }
.mode-switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; padding: 7px 8px; border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--muted); font-weight: 600; cursor: pointer; }
.mode-switch button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.mode-switch button svg { width: 15px; height: 15px; } .mode-switch .badge { min-width: 18px; height: 18px; font-size: 10.5px; background: #d97706; }
.cm-av { width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; position: relative; font-size: 15px; }
.cm-av .chi, .cm-av svg { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; }
.cm-item { align-items: flex-start; } .cm-item .cm-text { font-size: 13px; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; margin-top: 2px; }
.cm-item.unread .cm-text { font-weight: 600; color: var(--ink); }
.cm-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg); }
.cm-st { font-size: 10.5px; padding: 0 7px; border-radius: 6px; background: var(--bg); color: var(--muted); font-weight: 600; }
.cm-st.replied { background: #e0f2fe; color: #0369a1; } .cm-st.done { background: #dcfce7; color: #166534; } .cm-st.hid { background: #fee2e2; color: #991b1b; } .cm-st.dm { background: #ede9fe; color: #6d28d9; }
.cm-post { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; max-width: 560px; align-self: center; width: 100%; }
.cm-post img, .cm-post .ph { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; flex: none; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cm-post .cap { font-size: 13px; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; margin: 2px 0 4px; }
.cm-same { align-self: stretch; border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cm-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.nw { white-space: nowrap; }
@media (max-width: 820px) {
  .cm-thead .acts .lbl { display: none; }
  .cm-thead .acts .btn { width: 34px; padding: 0; justify-content: center; }
  .cm-post img, .cm-post .ph { width: 56px; height: 56px; }
}
.cm-hint { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.cm-hint + .btn { margin-left: auto; }

/* แจ้งเตือนเด้งบนเครื่องนี้ (Web Push) */
.push-bell.on { color: var(--brand); }
.push-bell.on svg { fill: var(--brand-soft); }
.push-hint { display: flex; align-items: center; gap: 10px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 12px; padding: 9px 8px 9px 12px; margin: 0 0 10px; }
.push-hint > svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.push-hint .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.push-hint .t b { color: var(--ink); } .push-hint .t span { color: var(--muted); font-size: 12px; }
.push-hint .btn { flex: none; }
.nt-state { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bg); margin-bottom: 14px; }
.nt-state > svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.nt-state.on { background: var(--ok-bg); color: #166534; } .nt-state.off { background: var(--brand-soft); color: var(--ink); } .nt-state.bad { background: var(--danger-bg); color: #991b1b; }
.nt-state b { display: block; font-size: 15px; margin-bottom: 2px; } .nt-state .d { font-size: 13px; opacity: .9; overflow-wrap: anywhere; }
.nt-steps { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; } .nt-steps li { margin: 2px 0; overflow-wrap: anywhere; }
.nt-steps .k { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
.nt-steps .k svg { width: 14px; height: 14px; }
.nt-sec { margin-top: 16px; } .nt-sec h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.nt-dev { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.nt-dev .n { flex: 1; min-width: 0; overflow-wrap: anywhere; } .nt-dev .n small { display: block; color: var(--muted); }
.nt-why { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 14px; overflow-wrap: anywhere; }

/* ราคาหลายระดับ + ผ่อน 0% */
.tier-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-top: 3px; }
.tier-chips .chip { font-size: 11px; padding: 1px 7px; font-weight: 500; }
.tiers { display: grid; gap: 8px; }
.tier-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 130px 34px; grid-template-areas: "l l p d" "k m dp dp" "n n n n"; gap: 6px 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); }
.tier-row [data-k=label] { grid-area: l; } .tier-row [data-k=price] { grid-area: p; } .tier-row .tier-m { grid-area: m; } .tier-row [data-k=note] { grid-area: n; } .tier-row > .btn { grid-area: d; }
.tier-row .tier-kind { grid-area: k; min-width: 0; } .tier-row .tier-dep { grid-area: dp; }
.tier-row .tier-m { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.tier-row .tier-m .input { width: 64px; } .tier-row .tier-dep .input { width: 96px; }
.nm-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nm-cell .fsel { font-size: 12.5px; }

/* เอกสารยินยอม */
.cd-sum { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.cd-sum .k { color: var(--muted); overflow-wrap: anywhere; } .cd-sum .v { overflow-wrap: anywhere; }
.cd-sum.warn .v { color: #b45309; font-weight: 600; } .cd-sum.warn .v svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 640px) { .cd-sum { grid-template-columns: 1fr; } }
/* หน้าเข้าสู่ระบบ: โลโก้ QARVA ONE */
.login-logo { margin: 0; line-height: 0; } .login-logo img { height: 44px; max-width: 100%; object-fit: contain; }

.course-pick { display: grid; gap: 6px; }   /* สัญญาเรียน: เลือกคอร์สของร้าน หรือพิมพ์ชื่อเอง */
/* ค่าคอม: ใส่ทีเดียวหลายรายการ · ใบขาย: ลายเซ็นลูกค้า */
.bulk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bulk-row .bulk-grp { flex: 1 1 260px; min-width: 0; }
.bulk-row .bulk-lv { flex: 0 1 180px; min-width: 0; }
.bulk-row .bulk-val { flex: 0 0 150px; }
.rate-cell .input.bulk-hit { background: #fff8db; border-color: #f0d27a; }
.sale-sig .sig-img { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; margin-bottom: 6px; }
.sale-sig .sig-img img { display: block; width: 100%; max-height: 110px; object-fit: contain; }

/* ใบ OPD หน้า 3 แบบรอบ + ประวัติการแก้ไข · หน้า 4 ประเภทการรับชำระ (v32) */
.round-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.round-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  background: #fff; font: inherit; cursor: pointer; text-align: left; min-width: 0; max-width: 100%; }
.round-chip b { font-size: 13.5px; color: #14432f; } .round-chip span { font-size: 11.5px; color: var(--muted); }
.round-chip:hover { border-color: #14432f; }
.round-chip.on { background: #14432f; border-color: #14432f; } .round-chip.on b, .round-chip.on span { color: #fff; }
.round-chip.off { border-style: dashed; } .round-chip.off b { text-decoration: line-through; color: var(--muted); }
.round-chip.on.off { background: #6b7280; border-color: #6b7280; } .round-chip.on.off b { color: #fff; }
.round-chip.new { border-style: dashed; }
.round-head .rh-no { width: 110px; } .round-head .rh-date { width: 180px; }
.opdrec .notice .grow { flex: 1; min-width: 0; }
.opdrec .grow-text { flex: 1 1 16rem; min-width: 0; overflow-wrap: break-word; }
.log-item { padding: 12px 0; border-bottom: 1px solid var(--line-soft); } .log-item:last-child { border-bottom: 0; }
.log-tb { margin-top: 6px; font-size: 13px; } .log-tb th, .log-tb td { padding: 5px 8px; }
.log-tb td.from { color: #9f1239; text-decoration: line-through; text-decoration-color: rgba(159, 18, 57, .35); } .log-tb td.to { color: #166534; font-weight: 600; }
.table-wrap > .table.ledger { min-width: 1120px; } .table.ledger td:nth-child(2) { min-width: 170px; }
.table.ledger .pay-cell { min-width: 150px; } .table.ledger .note-cell { min-width: 170px; } .table.ledger .note-cell .input { padding: 6px 8px; }
@media (max-width: 520px) { .round-head .rh-no { width: 90px; } .round-head .rh-date { flex: 1 1 150px; width: auto; } }