/* ============ BANKKIN INTELLIGENT SYSTEM ============ */
:root{
  --bg:#0e0f14; --panel:#171922; --panel2:#1e2130; --line:#2b2f40;
  --text:#e9ecf5; --muted:#98a0b8;
  --yellow:#ffc81e; --yellow-dark:#e0a800; --yellow-soft:rgba(255,200,30,.12);
  --green:#31c48d; --red:#f05252; --blue:#4c8dff; --orange:#ff8a3d;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",-apple-system,"Segoe UI",sans-serif;font-size:14px}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 10px}

/* ---------- Layout ---------- */
.wrap{display:flex;min-height:100vh}
.side{width:230px;background:var(--panel);border-right:1px solid var(--line);
  padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto;flex:none}
.side .brand{font-weight:800;font-size:22px;color:var(--yellow);letter-spacing:1px;
  padding:6px 10px 16px;display:block}
.side .brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:.5px;font-weight:400}
.side a.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--muted);margin-bottom:4px;font-weight:500}
.side a.nav:hover{background:var(--panel2);color:var(--text)}
.side a.nav.active{background:var(--yellow-soft);color:var(--yellow)}
.side .navgroup{font-size:11px;color:#5d6480;padding:14px 12px 6px;letter-spacing:1px}
.main{flex:1;padding:24px 30px 60px;max-width:1500px}
.page-head{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px;gap:14px;flex-wrap:wrap}
.page-head h2{font-size:20px}
.page-head .sub{color:var(--muted);font-size:12px}

/* ---------- Home ---------- */
.hero{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.logo{font-size:clamp(62px,13vw,150px);font-weight:900;color:var(--yellow);letter-spacing:6px;
  line-height:1;text-shadow:0 0 60px rgba(255,200,30,.35)}
.logo-sub{font-size:clamp(13px,1.6vw,19px);color:var(--muted);letter-spacing:3px;text-transform:uppercase}
.logo-desc{color:#c8cee0;max-width:620px;margin-top:10px;line-height:1.7}
.dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:34px}
.dept{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;transition:.15s;display:block}
.dept:hover{border-color:var(--yellow);transform:translateY(-3px)}
.dept .ic{font-size:30px}
.dept b{display:block;margin:10px 0 4px;font-size:16px}
.dept span{color:var(--muted);font-size:12px;line-height:1.6;display:block}
.dept .cnt{margin-top:12px;color:var(--yellow);font-weight:700;font-size:12px}

/* ---------- Card / table ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:18px}
.card > h3{font-size:15px;color:var(--yellow);display:flex;align-items:center;gap:8px}
.card .hint{color:var(--muted);font-size:12px;margin:-4px 0 14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:.4px;
  padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid #23273a;vertical-align:middle}
tr:hover td{background:#1b1e2b}
.table-scroll{overflow-x:auto}
.empty{color:var(--muted);text-align:center;padding:26px;font-size:13px}

/* ---------- Form ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);
  color:var(--text);border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--yellow)}
textarea{min-height:74px;resize:vertical}
input[type=file]{padding:7px}
.btn{background:var(--yellow);color:#1a1400;border:none;border-radius:9px;padding:10px 18px;
  font-weight:700;cursor:pointer;font-size:13px;font-family:inherit}
.btn:hover{background:var(--yellow-dark)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--yellow);color:var(--yellow);background:transparent}
.btn.sm{padding:6px 12px;font-size:12px}
.btn.red{background:var(--red);color:#fff}
.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs a,.tabs button{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:9px 16px;border-radius:999px;font-size:12.5px;cursor:pointer;font-family:inherit;font-weight:600}
.tabs a.active,.tabs button.active{background:var(--yellow);color:#1a1400;border-color:var(--yellow)}

/* ---------- Badge / status ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--panel2);color:var(--muted);white-space:nowrap}
.badge.y{background:var(--yellow-soft);color:var(--yellow)}
.badge.g{background:rgba(49,196,141,.14);color:var(--green)}
.badge.r{background:rgba(240,82,82,.14);color:var(--red)}
.badge.b{background:rgba(76,141,255,.14);color:var(--blue)}
.badge.o{background:rgba(255,138,61,.14);color:var(--orange)}

/* ---------- Stepper ---------- */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.step{flex:1;min-width:88px;text-align:center;padding:7px 4px;border-radius:8px;font-size:11px;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.step.done{background:rgba(49,196,141,.14);color:var(--green);border-color:rgba(49,196,141,.3)}
.step.now{background:var(--yellow);color:#1a1400;border-color:var(--yellow);font-weight:700}

/* ---------- Countdown ---------- */
.count{display:inline-flex;flex-direction:column;align-items:center;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:6px 14px;min-width:74px}
.count b{font-size:22px;line-height:1;color:var(--yellow)}
.count.late b{color:var(--red)}
.count span{font-size:10px;color:var(--muted);margin-top:3px}

/* ---------- Photos ---------- */
.pics{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pics a{display:block;width:118px;height:88px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line)}
.pics img{width:100%;height:100%;object-fit:cover}
.thumb-mini{width:44px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* ---------- Flash ---------- */
.flash{padding:11px 16px;border-radius:10px;margin-bottom:14px;font-size:13px;font-weight:600}
.flash.ok{background:rgba(49,196,141,.13);color:var(--green);border:1px solid rgba(49,196,141,.3)}
.flash.warn{background:rgba(255,200,30,.13);color:var(--yellow);border:1px solid rgba(255,200,30,.3)}

/* ---------- Misc ---------- */
.muted{color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}.side{width:70px}
  .side .brand small,.side .nav span,.side .navgroup{display:none}.main{padding:18px}}
details.box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel2);margin-top:10px}
details.box summary{cursor:pointer;color:var(--yellow);font-weight:600;font-size:12.5px}
.chk{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;margin-bottom:7px}
.chk input[type=checkbox]{width:16px;height:16px;accent-color:var(--yellow);flex:none}
.chk .nm{flex:1;font-size:12.5px}
.chk input[type=number]{width:62px}
canvas#sig{background:#fff;border-radius:10px;width:100%;height:170px;touch-action:none;cursor:crosshair}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:13px}
.kv div:nth-child(odd){color:var(--muted)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{border-left:2px solid var(--line);padding:0 0 14px 14px;position:relative}
.timeline li::before{content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;
  border-radius:50%;background:var(--yellow)}
.timeline small{color:var(--muted);display:block}

/* ---------- ไล่เฉดสีตามวันนัดติดตาม (เขียว → เหลือง → ส้ม → แดง) ---------- */
tr.fu-green  td,tr.fu-green:hover  td{background:rgba(49,196,141,.10)}
tr.fu-yellow td,tr.fu-yellow:hover td{background:rgba(255,200,30,.12)}
tr.fu-orange td,tr.fu-orange:hover td{background:rgba(255,138,61,.15)}
tr.fu-red    td,tr.fu-red:hover    td{background:rgba(240,82,82,.18);color:#ffd9d9}
tr.fu-green  td:first-of-type{box-shadow:inset 4px 0 0 var(--green)}
tr.fu-yellow td:first-of-type{box-shadow:inset 4px 0 0 var(--yellow)}
tr.fu-orange td:first-of-type{box-shadow:inset 4px 0 0 var(--orange)}
tr.fu-red    td:first-of-type{box-shadow:inset 4px 0 0 var(--red)}
.fu-green-box  b{color:var(--green)}
.fu-yellow-box b{color:var(--yellow)}
.fu-orange-box b{color:var(--orange)}
.fu-red-box    b{color:var(--red)}
.count.due{border-color:var(--red);animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.fu-label{font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap}
tr.fu-red .fu-label{color:var(--red);font-weight:700}
.alertbar{background:rgba(240,82,82,.14);border:1px solid rgba(240,82,82,.4);color:#ffb4b4;
  padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:13.5px}
.alertbar b{color:#fff;font-size:15px}

/* ---------- นาฬิกาจับเวลาฝ่ายขาย (นับเดินหน้า) ---------- */
.timer{display:inline-flex;flex-direction:column;align-items:center;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:7px 14px;min-width:112px}
.timer .tval{font-size:19px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums}
.timer .tnote{font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap}
.timer[data-sla=green]  .tval{color:var(--green)}
.timer[data-sla=yellow] .tval{color:var(--yellow)}
.timer[data-sla=orange] .tval{color:var(--orange)}
.timer[data-sla=red]    .tval{color:var(--red)}
.timer[data-sla=red]{border-color:var(--red);animation:pulse 1.3s ease-in-out infinite}
tr[data-sla=green]  td,tr[data-sla=green]:hover  td{background:rgba(49,196,141,.10)}
tr[data-sla=yellow] td,tr[data-sla=yellow]:hover td{background:rgba(255,200,30,.12)}
tr[data-sla=orange] td,tr[data-sla=orange]:hover td{background:rgba(255,138,61,.15)}
tr[data-sla=red]    td,tr[data-sla=red]:hover    td{background:rgba(240,82,82,.18)}
tr[data-sla=green]  td:first-of-type{box-shadow:inset 4px 0 0 var(--green)}
tr[data-sla=yellow] td:first-of-type{box-shadow:inset 4px 0 0 var(--yellow)}
tr[data-sla=orange] td:first-of-type{box-shadow:inset 4px 0 0 var(--orange)}
tr[data-sla=red]    td:first-of-type{box-shadow:inset 4px 0 0 var(--red)}
.daypick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.daypick a{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;font-size:12px;color:var(--muted)}
.daypick a.active{background:var(--yellow);color:#1a1400;border-color:var(--yellow);font-weight:700}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi div{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px}
.kpi b{display:block;font-size:24px;color:var(--yellow);line-height:1.2}
.kpi span{font-size:11.5px;color:var(--muted)}

/* ---------- ป้ายเวอร์ชัน ---------- */
.verbadge{font-size:10px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;margin:0 10px 14px;display:inline-block}
.verbadge.live{color:var(--green);border-color:rgba(49,196,141,.4);background:rgba(49,196,141,.12);font-weight:700}
@media(max-width:1000px){.verbadge{display:none}}

/* ---------- จุดแสดงสถานะออนไลน์ ---------- */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(49,196,141,.2);
  animation:pulse 1.8s ease-in-out infinite}

/* ---------- แนวโน้มการปิดการขาย ---------- */
.chance{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.chance label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:10px;padding:10px 16px;cursor:pointer;background:var(--panel2);
  font-size:13px;color:var(--muted);user-select:none}
.chance label:hover{border-color:var(--muted)}
.chance input{display:none}
.cdot{width:12px;height:12px;border-radius:50%;flex:none}
.c-green  .cdot{background:var(--green)}
.c-yellow .cdot{background:var(--yellow)}
.c-orange .cdot{background:var(--orange)}
.c-red    .cdot{background:var(--red)}
.chance label:has(input:checked){color:var(--text);font-weight:700}
.chance label.c-green:has(input:checked){border-color:var(--green);background:rgba(49,196,141,.16)}
.chance label.c-yellow:has(input:checked){border-color:var(--yellow);background:rgba(255,200,30,.16)}
.chance label.c-orange:has(input:checked){border-color:var(--orange);background:rgba(255,138,61,.16)}
.chance label.c-red:has(input:checked){border-color:var(--red);background:rgba(240,82,82,.16)}
.cbadge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:700}
.cbadge.c-green {background:rgba(49,196,141,.16);color:var(--green)}
.cbadge.c-yellow{background:rgba(255,200,30,.16);color:var(--yellow)}
.cbadge.c-orange{background:rgba(255,138,61,.16);color:var(--orange)}
.cbadge.c-red   {background:rgba(240,82,82,.16);color:var(--red)}
textarea.big{min-height:130px;font-size:14.5px;line-height:1.7}

/* ---------- บันทึกการติดตาม (อ่านอย่างเดียว) ---------- */
.lognote{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:12px;position:relative}
.lognote.c-green {border-left:4px solid var(--green)}
.lognote.c-yellow{border-left:4px solid var(--yellow)}
.lognote.c-orange{border-left:4px solid var(--orange)}
.lognote.c-red   {border-left:4px solid var(--red)}
.lognote .head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.lognote .when{font-weight:700;color:var(--yellow);font-size:13px}
.lognote .body{white-space:pre-wrap;line-height:1.75;font-size:13.5px}
.lognote .foot{margin-top:9px;font-size:11.5px;color:var(--muted)}
.lock{font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:2px 8px}
.inboxcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px;margin-bottom:16px}
.inboxcard[data-sla=red]{border-color:rgba(240,82,82,.5)}
.inboxhead{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.inboxhead .who{font-size:17px;font-weight:800}
.inboxhead .tel{font-size:20px;font-weight:800;color:var(--yellow);letter-spacing:.5px}

/* ---------- การ์ดผู้ใช้ในแถบเมนู ---------- */
.mecard{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;margin:0 4px 14px}
.mecard b{display:block;font-size:13px}
.mecard span{font-size:11px;color:var(--muted)}
.mecard:hover{border-color:var(--yellow)}
@media(max-width:1000px){.mecard{display:none}}

/* ---------- แจ้งเตือนผู้สมัครใหม่ (เฉพาะ king) ---------- */
#pendingToast{position:fixed;right:22px;bottom:22px;z-index:99;width:290px;
  background:var(--panel);border:1px solid var(--yellow);border-radius:14px;padding:16px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.55)}
#pendingToast .pt-head{color:var(--yellow);font-weight:700;font-size:13.5px;margin-bottom:10px}
#pendingToast .pt-head b{font-size:17px}
#pendingToast .pt-item{border-top:1px solid var(--line);padding:7px 0;font-size:12.5px}
#pendingToast .pt-item span{display:block;color:var(--muted);font-size:11px}
#pendingToast .btn{margin-top:10px;width:100%;text-align:center;display:block}
#pendingToast .pt-close{position:absolute;top:8px;right:10px;background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:14px}
#pendingToast.flash-in{animation:toastin .45s ease-out, pulse 1.6s ease-in-out 3}
@keyframes toastin{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:700px){#pendingToast{right:12px;left:12px;width:auto;bottom:12px}}

/* ---------- ตารางแบบกระชับ อ่านง่าย ไม่ล้นจอ ---------- */
table.dense{table-layout:auto}
table.dense th{position:sticky;top:0;background:var(--panel);z-index:2;padding:8px 9px}
table.dense td{padding:8px 9px;vertical-align:top}
table.dense input,table.dense select{padding:6px 8px;font-size:12.5px}
table.dense input[type=date]{font-size:12px}
.cellmain{font-weight:700;font-size:13px;line-height:1.4}
.cellsub{color:var(--muted);font-size:11px;line-height:1.5;margin-top:1px}
.minicount{margin-top:5px;font-size:10.5px;font-weight:700;border-radius:6px;
  padding:3px 7px;display:inline-block;white-space:nowrap}
.minicount.c-green {background:rgba(49,196,141,.16);color:var(--green)}
.minicount.c-yellow{background:rgba(255,200,30,.16);color:var(--yellow)}
.minicount.c-orange{background:rgba(255,138,61,.16);color:var(--orange)}
.minicount.c-red   {background:rgba(240,82,82,.18);color:var(--red)}
table.dense .btn.sm{padding:5px 9px;font-size:12px;margin-bottom:2px}

/* ============ กระพริบเฉพาะกรอบ · เร็ว-ช้าตามระดับความเร่งด่วน ============
   แดง เร็วสุด (0.7s) → ส้ม (1.3s) → เหลือง (2.2s) → เขียว ค้างไม่กระพริบ      */
@keyframes edge-red{
  0%,100%{box-shadow:inset 4px 0 0 var(--red), 0 0 0 0 rgba(240,82,82,0)}
  50%    {box-shadow:inset 4px 0 0 var(--red), 0 0 16px 2px rgba(240,82,82,.85)}}
@keyframes edge-orange{
  0%,100%{box-shadow:inset 4px 0 0 var(--orange), 0 0 0 0 rgba(255,138,61,0)}
  50%    {box-shadow:inset 4px 0 0 var(--orange), 0 0 14px 2px rgba(255,138,61,.7)}}
@keyframes edge-yellow{
  0%,100%{box-shadow:inset 4px 0 0 var(--yellow), 0 0 0 0 rgba(255,200,30,0)}
  50%    {box-shadow:inset 4px 0 0 var(--yellow), 0 0 12px 1px rgba(255,200,30,.55)}}

/* แถวในตาราง : กระพริบที่แถบสีขอบซ้าย ไม่ใช่ทั้งแถว */
tr.fu-red    td:first-of-type{animation:edge-red    .7s ease-in-out infinite}
tr.fu-orange td:first-of-type{animation:edge-orange 1.3s ease-in-out infinite}
tr.fu-yellow td:first-of-type{animation:edge-yellow 2.2s ease-in-out infinite}
tr.fu-green  td:first-of-type{animation:none;box-shadow:inset 4px 0 0 var(--green)}
tr[data-sla=red]    td:first-of-type{animation:edge-red    .7s ease-in-out infinite}
tr[data-sla=orange] td:first-of-type{animation:edge-orange 1.3s ease-in-out infinite}
tr[data-sla=yellow] td:first-of-type{animation:edge-yellow 2.2s ease-in-out infinite}
tr[data-sla=green]  td:first-of-type{animation:none;box-shadow:inset 4px 0 0 var(--green)}

/* กรอบกล่อง : นาฬิกาจับเวลา / การ์ดลูกค้าใหม่ / กล่องนับถอยหลัง */
@keyframes frame-red{
  0%,100%{border-color:var(--red);   box-shadow:0 0 0 0 rgba(240,82,82,0)}
  50%    {border-color:#ff8f8f;      box-shadow:0 0 18px 2px rgba(240,82,82,.75)}}
@keyframes frame-orange{
  0%,100%{border-color:var(--orange);box-shadow:0 0 0 0 rgba(255,138,61,0)}
  50%    {border-color:#ffb27d;      box-shadow:0 0 16px 2px rgba(255,138,61,.6)}}
@keyframes frame-yellow{
  0%,100%{border-color:var(--yellow);box-shadow:0 0 0 0 rgba(255,200,30,0)}
  50%    {border-color:#ffe07a;      box-shadow:0 0 14px 1px rgba(255,200,30,.5)}}

.timer[data-sla=red]{opacity:1;animation:frame-red .7s ease-in-out infinite}
.timer[data-sla=orange]{border-color:var(--orange);animation:frame-orange 1.3s ease-in-out infinite}
.timer[data-sla=yellow]{border-color:var(--yellow);animation:frame-yellow 2.2s ease-in-out infinite}
.timer[data-sla=green]{border-color:var(--green);animation:none}
.inboxcard[data-sla=red]{animation:frame-red .7s ease-in-out infinite}
.inboxcard[data-sla=orange]{border-color:var(--orange);animation:frame-orange 1.3s ease-in-out infinite}
.inboxcard[data-sla=yellow]{border-color:var(--yellow);animation:frame-yellow 2.2s ease-in-out infinite}
.inboxcard[data-sla=green]{border-color:rgba(49,196,141,.5);animation:none}
.count.due{opacity:1;animation:frame-red .7s ease-in-out infinite}

/* กล่องแจ้งเตือนผู้สมัครใหม่ : กระพริบกรอบอย่างเดียว */
#pendingToast.flash-in{animation:toastin .45s ease-out, frame-yellow 2.2s ease-in-out infinite}

.cbadge{white-space:nowrap}
table.dense .cbadge{font-size:10.5px;padding:3px 9px}

/* ============ เกณฑ์สีเวลาติดต่อกลับ (หลังแอดมินลงบันทึก) ============
   เขียว/เหลือง = ค้างนิ่ง · ส้ม = กระพริบช้า 1.6s · แดง = กระพริบเร็ว 0.6s  */
.timer[data-sla=green]{border-color:var(--green);animation:none}
.timer[data-sla=yellow]{border-color:var(--yellow);animation:none}
.timer[data-sla=orange]{border-color:var(--orange);animation:frame-orange 1.6s ease-in-out infinite}
.timer[data-sla=red]{border-color:var(--red);animation:frame-red .6s ease-in-out infinite}
.inboxcard[data-sla=green]{border-color:rgba(49,196,141,.5);animation:none}
.inboxcard[data-sla=yellow]{border-color:rgba(255,200,30,.5);animation:none}
.inboxcard[data-sla=orange]{border-color:var(--orange);animation:frame-orange 1.6s ease-in-out infinite}
.inboxcard[data-sla=red]{border-color:var(--red);animation:frame-red .6s ease-in-out infinite}
tr[data-sla=green]  td:first-of-type{animation:none;box-shadow:inset 4px 0 0 var(--green)}
tr[data-sla=yellow] td:first-of-type{animation:none;box-shadow:inset 4px 0 0 var(--yellow)}
tr[data-sla=orange] td:first-of-type{animation:edge-orange 1.6s ease-in-out infinite}
tr[data-sla=red]    td:first-of-type{animation:edge-red .6s ease-in-out infinite}

/* ---------- เสียงบ่นของลูกค้าที่รอสาย ---------- */
.tmsg{font-size:11.5px;font-weight:700;margin-top:5px;line-height:1.4;text-align:center;
  max-width:190px;white-space:normal}
.timer[data-sla=green]  .tmsg{color:var(--green)}
.timer[data-sla=yellow] .tmsg{color:var(--yellow)}
.timer[data-sla=orange] .tmsg{color:var(--orange)}
.timer[data-sla=red]    .tmsg{color:var(--red)}
.timer[data-sla=red]    .tmsg{animation:msgshake 1.2s ease-in-out infinite}
@keyframes msgshake{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.inboxcard .tmsg{font-size:13px;max-width:230px}
table.dense .tmsg,td .tmsg{font-size:10.5px;max-width:150px}

/* ---------- กลุ่มนาฬิกา + ข้อความ + ปุ่มหยุดเวลา ---------- */
.timerwrap{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:flex-end}
.inboxcard .timer{min-width:210px;padding:10px 16px}
.inboxcard .timer .tval{font-size:26px}
.inboxcard .timer .tnote{font-size:11px}
.stopbtn{line-height:1.35;padding:12px 18px;font-size:13px;text-align:center;white-space:nowrap}


/* ---------- ปุ่มหยุดเวลาแบบสี่เหลี่ยมเล็ก ---------- */
.stopbtn{width:66px;height:66px;padding:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:20px;line-height:1;border-radius:12px}
.stopbtn small{font-size:9.5px;font-weight:700}
@media(max-width:900px){.stopbtn{flex:none}}

/* ---------- เบอร์โทรกดโทรออกได้ ---------- */
a.telbtn{display:inline-flex;flex-direction:column;line-height:1.15;
  background:rgba(255,200,30,.10);border:1px solid rgba(255,200,30,.35);
  border-radius:12px;padding:8px 16px;transition:.15s}
a.telbtn:hover{background:rgba(255,200,30,.2);border-color:var(--yellow)}
a.telbtn small{font-size:9.5px;color:var(--muted);font-weight:600;margin-top:3px}
a.telbtn.dialed{border-color:var(--green);background:rgba(49,196,141,.12)}
a.telbtn.dialed small::after{content:' · โทรออกแล้ว';color:var(--green)}

/* ---------- ข้อความเสียงบ่นลูกค้า ใหญ่ขึ้น ---------- */
.inboxcard .tmsg{font-size:15px;max-width:250px;margin-top:7px}
.timer[data-frozen]{animation:none !important;border-color:var(--green) !important}
.timer[data-frozen] .tval{color:var(--green) !important}
.inboxcard:has(.timer[data-frozen]){animation:none !important;border-color:rgba(49,196,141,.5) !important}

/* ---------- หัวการ์ด : ข้อมูลซ้าย / นาฬิกา+ปุ่ม ขวาสุดเสมอ ---------- */
.inboxhead{display:flex;flex-wrap:nowrap;align-items:stretch;gap:14px}
.headleft{display:flex;flex-wrap:wrap;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.headleft > div:first-child{min-width:0}
.timerwrap{flex:0 0 auto;margin-left:auto;display:flex;align-items:stretch;gap:10px}

/* กรอบเวลาและปุ่มหยุดเวลา สูงเท่ากันอัตโนมัติ ช่องไฟเท่ากัน */
.inboxcard .timer{min-width:212px;width:212px;padding:12px 14px;justify-content:center;
  box-sizing:border-box;margin:0}
.inboxcard .stopbtn{width:88px;height:auto;align-self:stretch;padding:0;margin:0;
  border-radius:14px;font-size:22px}
.inboxcard .stopbtn small{font-size:10px}
.inboxcard .timer .tval{font-size:25px}
.inboxcard .tmsg{font-size:15px;max-width:100%;margin-top:6px}

/* จอแคบ/แนวตั้ง : ย่อขนาดลง แต่ยังอยู่ขวาสุด ไม่ตกลงบรรทัดใหม่ */
@media(max-width:1000px){
  .inboxcard .timer{width:172px;min-width:172px;padding:10px}
  .inboxcard .timer .tval{font-size:21px}
  .inboxcard .tmsg{font-size:13px}
  .inboxcard .stopbtn{width:74px;font-size:19px}
}
@media(max-width:700px){
  .inboxcard .timer{width:140px;min-width:140px}
  .inboxcard .timer .tval{font-size:18px}
  .inboxcard .timer .tnote{font-size:9.5px}
  .inboxcard .tmsg{font-size:11.5px}
  .inboxcard .stopbtn{width:60px;font-size:17px}
  .inboxcard .stopbtn small{font-size:8.5px}
  .headleft{gap:8px}
}

/* ---------- กันหน้าเว็บล้นแนวนอน (ตารางกว้างต้องเลื่อนในกรอบตัวเอง) ---------- */
.main{min-width:0}
.card,.inboxcard{min-width:0}
.table-scroll{max-width:100%;min-width:0}

/* ข้อมูลลูกค้าต้องไม่ถูกบีบจนอ่านไม่ออก */
.headleft{min-width:260px}
/* จอแคบ/แนวตั้ง : กลุ่มนาฬิกาลงบรรทัดใหม่ได้ แต่ยังชิดขวาสุดเสมอ */
/* มือถือ/ไอแพด ทั้งแนวตั้งและแนวนอน : ทุกอย่างอยู่บรรทัดเดียวกันเสมอ
   ข้อมูลลูกค้าเรียงลงเป็นคอลัมน์ทางซ้าย · เวลากับปุ่มชิดขวาสุด */
@media(max-width:1000px){
  .inboxhead{flex-wrap:nowrap;align-items:flex-start}
  .headleft{min-width:0;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:7px}
  .headleft > div:first-child{width:100%}
  .inboxhead .who{font-size:15px;overflow-wrap:anywhere}
  .inboxcard a.telbtn{font-size:17px;padding:7px 12px;max-width:100%}
  .inboxcard a.telbtn small{font-size:9px}
  .timerwrap{margin-left:auto;width:auto;justify-content:flex-end;flex:0 0 auto}
}

/* ---------- นาฬิกาแบบไม่มีกรอบ : เหลือแต่ตัวเลขเวลา ---------- */
.inboxcard .timer{background:none;border:none;box-shadow:none;padding:0;margin:0;
  width:auto;min-width:0;align-items:flex-end;text-align:right;animation:none !important}
.inboxcard .timer .tval{font-size:30px;letter-spacing:.5px;line-height:1.05}
.inboxcard .timer .tnote{font-size:11px;margin-top:4px}
.inboxcard .tmsg{font-size:15px;text-align:right;max-width:270px;margin-top:6px}
.inboxcard .timerwrap{align-items:center;gap:16px}
.inboxcard .stopbtn{width:72px;height:72px;align-self:center;border-radius:14px}

/* สีตัวเลขตามระดับ + เรืองแสงกระพริบเฉพาะตัวเลข (ส้มช้า / แดงเร็ว) */
.inboxcard .timer[data-sla=green]  .tval{color:var(--green)}
.inboxcard .timer[data-sla=yellow] .tval{color:var(--yellow)}
.inboxcard .timer[data-sla=orange] .tval{color:var(--orange);animation:glow-orange 1.6s ease-in-out infinite}
.inboxcard .timer[data-sla=red]    .tval{color:var(--red);animation:glow-red .6s ease-in-out infinite}
@keyframes glow-orange{0%,100%{text-shadow:none}50%{text-shadow:0 0 14px rgba(255,138,61,.85)}}
@keyframes glow-red{0%,100%{text-shadow:none}50%{text-shadow:0 0 16px rgba(240,82,82,.95)}}
.inboxcard .timer[data-frozen] .tval{color:var(--green) !important;animation:none !important}

/* จอมือถือ : ย่อขนาดเวลาและข้อความให้พอดี ไม่ล้นขอบ */
@media(max-width:760px){
  .inboxcard .timerwrap{gap:10px;max-width:100%;flex-wrap:nowrap}
  .inboxcard .timer{flex:1 1 auto;min-width:0}
  .inboxcard .timer .tval{font-size:24px}
  .inboxcard .timer .tnote{font-size:10px}
  .inboxcard .tmsg{font-size:12.5px;max-width:100%}
  .inboxcard .stopbtn{width:60px;height:60px;font-size:18px;flex:0 0 auto}
  .inboxcard .stopbtn small{font-size:8.5px}
}

/* จอแคบมาก : ย่อป้าย/ตัวหนังสือให้ยังอยู่บรรทัดเดียว */
@media(max-width:560px){
  .inboxcard .badge{font-size:9.5px;padding:2px 7px}
  .inboxhead .who{font-size:14px}
  .inboxcard a.telbtn{font-size:15px;padding:6px 10px}
  .inboxcard .timer .tval{font-size:20px}
  .inboxcard .tmsg{font-size:11px}
  .inboxcard .stopbtn{width:52px;height:52px;font-size:16px}
  .inboxcard .stopbtn small{font-size:8px}
  .inboxcard .timerwrap{gap:8px}
}

/* ---------- อิโมจิ/ข้อความ แยกส่วน เพื่อย่อบนจอเล็ก ---------- */
.tem{margin-right:6px;font-size:1.1em}
@media(max-width:620px){
  .inboxcard .headleft{min-width:148px}
  .inboxcard .timer .tnote{display:none}
  .inboxcard .ttx{display:none}
  .inboxcard .tem{font-size:22px;margin:0}
  .inboxcard .timer .tval{font-size:19px}
  .inboxcard .tmsg{margin-top:2px}
  .inboxcard .stopbtn{width:46px;height:46px;font-size:15px}
  .inboxcard .stopbtn small{display:none}
  .inboxcard a.telbtn{font-size:14px}
  .inboxcard a.telbtn small{display:none}
}
@media(max-width:620px){
  .inboxcard .timer .tval{font-size:17px;letter-spacing:0}
  .inboxcard .timerwrap{gap:8px}
}
@media(max-width:620px){
  .inboxcard{padding:14px}
  .inboxcard .headleft{min-width:110px;gap:6px}
  .inboxcard .timerwrap{gap:6px;flex:0 0 auto}
  .inboxcard a.telbtn{font-size:13.5px;padding:5px 9px}
  .inboxcard .timer .tval{font-size:16px}
  .inboxcard .stopbtn{width:44px;height:44px}
}

/* ============ โลโก้ BANKKIN + เวิร์ดมาร์ก intelligent (สไตล์ AI) ============ */
.hero-logo{width:min(420px,62vw);height:auto;display:block;margin:0 auto 6px;
  filter:drop-shadow(0 14px 40px rgba(255,200,30,.28))}
.hero-logo.sm{width:min(260px,52vw)}

.ai-word{font-family:'Orbitron','IBM Plex Sans Thai',sans-serif;font-weight:900;
  font-size:clamp(17px,2.6vw,30px);letter-spacing:.34em;text-transform:lowercase;
  background:linear-gradient(90deg,#1f6bff,#38e8ff,#8a6bff,#1f6bff);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:aiflow 7s linear infinite;
  filter:drop-shadow(0 0 16px rgba(56,200,255,.45));padding-left:.34em}
@keyframes aiflow{to{background-position:300% 0}}

.ai-nodes{width:min(230px,46vw);height:auto;margin:8px auto 0;display:block;overflow:visible}
.ai-nodes line{stroke:#38e8ff;stroke-width:1.1;opacity:.45}
.ai-nodes circle{fill:#0e0f14;stroke:#38e8ff;stroke-width:1.6;
  animation:ainode 2.6s ease-in-out infinite}
.ai-nodes circle:nth-child(8){animation-delay:.25s}
.ai-nodes circle:nth-child(9){animation-delay:.5s}
.ai-nodes circle:nth-child(10){animation-delay:.75s}
.ai-nodes circle:nth-child(11){animation-delay:1s}
.ai-nodes circle:nth-child(12){animation-delay:1.25s}
@keyframes ainode{0%,100%{fill:#0e0f14;filter:none}
  50%{fill:#38e8ff;filter:drop-shadow(0 0 7px rgba(56,232,255,.9))}}

/* โลโก้ในแถบเมนูซ้าย */
.side .brand{padding:4px 8px 12px;display:block}
.side .brand img{width:100%;max-width:150px;height:auto;display:block}
.ai-word.sm{font-size:11.5px;letter-spacing:.3em;padding-left:.3em;margin-top:5px;display:block;
  filter:drop-shadow(0 0 8px rgba(56,200,255,.5))}
@media(max-width:1000px){
  .side .brand img{max-width:40px}
  .ai-word.sm{display:none}
}

/* ---------- จัด intelligent ให้อยู่กึ่งกลางใต้โลโก้ในแถบเมนู ---------- */
.side .brand{text-align:center}
.side .brand img{margin:0 auto}
.ai-word.sm{width:100%;text-align:center;padding-left:.3em}

/* ---------- กล่องแจ้งเตือนคำขอลบ (เฉพาะ king) ---------- */
#deleteToast{position:fixed;right:22px;bottom:22px;z-index:98;width:300px;
  background:var(--panel);border:1px solid var(--red);border-radius:14px;padding:16px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.55)}
#deleteToast .pt-head{color:var(--red);font-weight:700;font-size:13.5px;margin-bottom:10px}
#deleteToast .pt-head b{font-size:17px}
#deleteToast .pt-item{border-top:1px solid var(--line);padding:7px 0;font-size:12.5px}
#deleteToast .pt-item span{display:block;color:var(--muted);font-size:11px}
#deleteToast .btn{margin-top:10px;width:100%;text-align:center;display:block}
#deleteToast .pt-close{position:absolute;top:8px;right:10px;background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:14px}
#pendingToast{bottom:auto;top:22px}

/* ---------- ชิปสีประจำช่องทาง / สีประจำตัวพนักงาน ---------- */
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;
  white-space:nowrap;color:var(--c);background:color-mix(in srgb, var(--c) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);line-height:1.5}
.person{display:inline-flex;align-items:center;gap:6px;color:var(--c);font-weight:700;font-size:12px}
.person i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;
  box-shadow:0 0 6px color-mix(in srgb, var(--c) 60%, transparent)}
th.chcell,td.chcell{width:6px;min-width:6px;padding:0 !important;border-bottom:none}

/* ---------- ปุ่มนับลูกค้าทัก ---------- */
.tapsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.tapsum > div{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px}
.tapsum b{display:block;font-size:26px;color:var(--yellow);line-height:1.2}
.tapsum span{font-size:11.5px;color:var(--muted)}
.tapgrp{font-size:12px;color:var(--muted);margin:16px 0 8px;letter-spacing:.5px}
.tapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tapbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  background:color-mix(in srgb, var(--c) 14%, var(--panel2));
  border:1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius:14px;padding:14px 16px;color:var(--text);font-family:inherit;
  font-size:13.5px;font-weight:700;transition:.12s;text-align:left}
.tapbtn:hover{background:color-mix(in srgb, var(--c) 26%, var(--panel2));
  border-color:var(--c);transform:translateY(-2px)}
.tapbtn:active,.tapbtn.hit{transform:scale(.96);
  background:color-mix(in srgb, var(--c) 45%, var(--panel2))}
.tapbtn .tn{line-height:1.3}
.tapbtn .tc{font-size:22px;color:var(--c);min-width:34px;text-align:right}
#lastTap{font-size:11.5px;color:var(--muted)}

/* ---------- เช็ครถตามจุด ---------- */
.pbar{flex:1;min-width:160px;height:10px;border-radius:99px;background:var(--panel2);
  border:1px solid var(--line);overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--green));
  transition:width .35s}
.shotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.shot{display:block;background:var(--panel2);border:2px solid var(--line);border-radius:14px;
  padding:10px;cursor:pointer;transition:.15s;text-align:center}
.shot:hover{border-color:var(--yellow)}
.shot .thumb{position:relative;height:96px;border-radius:10px;overflow:hidden;background:#0e0f14;
  display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--muted)}
.shot .thumb img{width:100%;height:100%;object-fit:cover}
.shot .mark{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#0e0f14}
.shot .nm{font-size:12px;font-weight:700;margin-top:8px;line-height:1.35}
.shot .msg{font-size:10.5px;color:var(--muted);margin-top:3px;min-height:14px}
.shot .redo{margin-top:7px;width:100%;font-size:10.5px;padding:4px}
.shot.ok{border-color:var(--green);background:rgba(49,196,141,.10)}
.shot.ok .mark{background:var(--green)}
.shot.ok .msg{color:var(--green);font-weight:700}
.shot.bad{border-color:var(--red);background:rgba(240,82,82,.12)}
.shot.bad .mark{background:var(--red);color:#fff}
.shot.bad .msg{color:var(--red);font-weight:700}
.shot.busy{border-color:var(--yellow);opacity:.7}
.shot.shake{animation:shk .5s}
@keyframes shk{0%,100%{transform:none}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---------- ช่องอัปโหลดรูปแยกตามจุดในฟอร์มเปิดใบงาน ---------- */
.shotsec{margin-top:10px}
.shotsec summary{font-size:13px}
.upgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:12px}
.upcell{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px;cursor:pointer;transition:.12s}
.upcell:hover{border-color:var(--yellow)}
.uplabel{display:block;font-size:12px;font-weight:700;margin-bottom:6px;line-height:1.35}
.upcell input[type=file]{width:100%;font-size:10.5px;padding:4px}
.upcount{display:block;font-size:10.5px;color:var(--muted);margin-top:5px}
.upcount.has{color:var(--green);font-weight:700}
.npic{position:absolute;left:6px;bottom:6px;background:rgba(14,15,20,.85);color:var(--yellow);
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.shotsec .secn{color:var(--green);font-size:11.5px;font-weight:700;margin-left:8px}

/* ---------- รายการจุดตรวจเช็คในหน้าใบงาน ---------- */
.ptsec{font-size:12.5px;color:var(--yellow);margin:16px 0 8px;border-bottom:1px solid var(--line);
  padding-bottom:6px}
.ptrow{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px;
  background:var(--panel2)}
.ptrow.done{border-color:rgba(49,196,141,.45);background:rgba(49,196,141,.07)}
.ptrow.bad{border-color:rgba(240,82,82,.45);background:rgba(240,82,82,.08)}
.ptname{font-size:12.5px;font-weight:700;margin-bottom:6px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.ptrow input[type=file]{width:100%;font-size:11px;padding:5px}
.ptpics{margin-top:8px;gap:6px}
.ptpics a{width:66px;height:50px}

/* ---------- จุดตรวจเช็ค : เรียงเป็นคอลัมน์ซ้าย→ขวา หัวข้อค้างบนสุด ---------- */
.ptcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
  overflow-x:auto;padding-bottom:6px}
.ptcol{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0}
.ptcol.soon{opacity:.55;border-style:dashed}
.ptcolhead{position:sticky;top:0;z-index:2;background:var(--panel);color:var(--yellow);
  font-weight:700;font-size:12.5px;padding:10px 12px;border-bottom:1px solid var(--line)}
.ptlist{padding:10px;overflow-y:auto;max-height:62vh}
.ptcols .ptrow{margin-bottom:8px}
.ptcols .ptname{font-size:11.5px}
@media(max-width:1000px){.ptcols{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:700px){.ptcols{grid-template-columns:1fr}.ptlist{max-height:none}}

/* ---------- หมายเหตุรายจุด ---------- */
.ptnote{width:100%;margin-top:6px;font-size:11px;padding:6px 8px;
  background:var(--panel);border:1px dashed var(--line)}
.ptnote:focus{border-style:solid;border-color:var(--yellow)}
.ptnote.has,.ptrow.noted .ptnote{border-color:var(--orange);border-style:solid;
  background:rgba(255,138,61,.10);color:#ffd9bf}
.ptrow.noted{border-color:rgba(255,138,61,.55);background:rgba(255,138,61,.08)}
.shot.noted{border-color:var(--orange)}
.shot .ptnote{margin-top:7px}
.abnbox{background:rgba(255,138,61,.10);border:1px solid rgba(255,138,61,.45);
  border-radius:10px;padding:11px 13px;margin:10px 0 12px}
.abnbox > b{color:var(--orange);font-size:12.5px;display:block;margin-bottom:7px}
.abnrow{font-size:12px;padding:5px 0;border-top:1px solid rgba(255,138,61,.18);
  display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.abnpt{font-weight:700;color:var(--orange);white-space:nowrap}

/* ---------- วิดีโอในจุดตรวจเช็ค ---------- */
.pics a.vid{position:relative}
.pics video,.shot .thumb video{width:100%;height:100%;object-fit:cover;display:block}
.vbadge{position:absolute;left:5px;bottom:5px;background:rgba(14,15,20,.85);color:var(--yellow);
  font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:99px;pointer-events:none}
.shot .thumb .vbadge{left:6px;bottom:6px;font-size:12px}

/* ---------- หน้าต่างดูรูป/วิดีโอ พร้อมปุ่มย้อนกลับ ---------- */
#lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,7,10,.95);display:none;
  flex-direction:column;align-items:center;justify-content:center}
#lightbox.on{display:flex}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:14px 18px;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent)}
.lb-back{background:var(--yellow);color:#1a1400;border:none;border-radius:10px;
  padding:10px 18px;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit}
.lb-back:hover{background:var(--yellow-dark)}
.lb-cap{margin-left:auto;color:var(--muted);font-size:13px}
.lb-close{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:10px;
  width:40px;height:40px;font-size:17px;cursor:pointer}
.lb-close:hover{background:rgba(240,82,82,.8)}
.lb-media{max-width:92vw;max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-media img,.lb-media video{max-width:92vw;max-height:82vh;border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.7)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.10);
  color:#fff;border:none;width:52px;height:76px;font-size:32px;cursor:pointer;border-radius:12px}
.lb-nav:hover{background:var(--yellow);color:#1a1400}
.lb-prev{left:14px} .lb-next{right:14px}
@media(max-width:700px){.lb-nav{width:40px;height:60px;font-size:26px}
  .lb-back{padding:9px 14px;font-size:13px}}
.shot .thumb{cursor:zoom-in}
.shot .addbtn{width:100%;margin-top:7px;font-size:11px;padding:6px 4px}

/* ---------- แท็บกระพริบ + แถบ KPI เมื่อมีลูกค้าค้างรอโทร ---------- */
.tabs a.kpiblink{border-color:var(--red);color:var(--red);font-weight:800;
  animation:kpitab 1s ease-in-out infinite}
.tabs a.kpiblink.active{background:var(--yellow);color:#1a1400;border-color:var(--yellow)}
@keyframes kpitab{
  0%,100%{box-shadow:0 0 0 0 rgba(240,82,82,0);background:var(--panel)}
  50%    {box-shadow:0 0 16px 2px rgba(240,82,82,.65);background:rgba(240,82,82,.16)}}
.kpibar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(240,82,82,.12);border:1px solid rgba(240,82,82,.45);border-radius:12px;
  padding:12px 16px;margin-bottom:14px;font-size:13px}
.kpibar b{color:#ffd7d7}
.kpibar > b{color:var(--red)}
.kpibar span{color:var(--muted)}
.kpibar .btn{margin-left:auto}
.kpidot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;
  animation:pulse 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(240,82,82,.18)}
.privacybar{background:rgba(49,196,141,.10);border:1px solid rgba(49,196,141,.35);
  color:#a7f3d0;border-radius:12px;padding:11px 16px;margin-bottom:14px;font-size:12.5px;line-height:1.7}

/* ---------- แก้ตัวหนังสือจมพื้นหลัง : ให้อ่านชัดตลอดเวลา ---------- */
/* แท็บกระพริบ : พื้นหลังคงที่ ตัวหนังสือขาวสว่าง กระพริบเฉพาะแสงรอบปุ่ม */
.tabs a.kpiblink{background:rgba(240,82,82,.22);border-color:var(--red);
  color:#fff !important;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.6);
  animation:kpitab 1.1s ease-in-out infinite}
.tabs a.kpiblink.active{background:var(--yellow);color:#1a1400 !important;
  border-color:var(--yellow);text-shadow:none}
@keyframes kpitab{
  0%,100%{box-shadow:0 0 0 0 rgba(240,82,82,0)}
  50%    {box-shadow:0 0 20px 4px rgba(240,82,82,.8)}}

/* แถบ KPI : ตัวหนังสือขาว อ่านง่ายบนพื้นแดงเข้ม */
.kpibar{background:rgba(240,82,82,.20);border-color:rgba(240,82,82,.6)}
.kpibar > b{color:#fff;font-size:13.5px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.kpibar span{color:#ffdede}
.kpibar span b{color:#fff}

/* แถบแจ้งเตือนแดง : เพิ่มความสว่างตัวอักษร */
.alertbar{background:rgba(240,82,82,.20);border-color:rgba(240,82,82,.6);color:#ffe6e6}
.alertbar b{color:#fff}

/* แถบความเป็นส่วนตัว (เขียว) */
.privacybar{background:rgba(49,196,141,.14);border-color:rgba(49,196,141,.5);color:#d7fbe9}

/* ---------- คำพูดลูกค้าต่อท้ายชื่อ (8 ระดับอารมณ์) ---------- */
.custvoice{display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  font-size:14px;font-weight:800;padding:4px 12px;border-radius:999px;vertical-align:middle;
  border:1px solid transparent;white-space:nowrap}
.custvoice .tem{font-size:17px;margin:0}
.custvoice[data-sla=green] {color:#31c48d;background:rgba(49,196,141,.14);border-color:rgba(49,196,141,.4)}
.custvoice[data-sla=lime]  {color:#a3e635;background:rgba(163,230,53,.14);border-color:rgba(163,230,53,.4)}
.custvoice[data-sla=yellow]{color:#ffc81e;background:rgba(255,200,30,.15);border-color:rgba(255,200,30,.45)}
.custvoice[data-sla=gold]  {color:#f59e0b;background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.5)}
.custvoice[data-sla=orange]{color:#ff8a3d;background:rgba(255,138,61,.18);border-color:rgba(255,138,61,.55);
  animation:frame-orange 1.6s ease-in-out infinite}
.custvoice[data-sla=deep]  {color:#fb7185;background:rgba(251,113,133,.18);border-color:rgba(251,113,133,.6);
  animation:frame-orange 1.2s ease-in-out infinite}
.custvoice[data-sla=red]   {color:#ff8080;background:rgba(240,82,82,.20);border-color:rgba(240,82,82,.7);
  animation:frame-red .8s ease-in-out infinite}
.custvoice[data-sla=dead]  {color:#fff;background:rgba(185,28,28,.75);border-color:#ff4d4d;
  animation:frame-red .5s ease-in-out infinite}

/* สีตัวเลขเวลา + กรอบการ์ด ให้ตรงกับระดับใหม่ */
.inboxcard .timer[data-sla=lime]   .tval{color:#a3e635}
.inboxcard .timer[data-sla=gold]   .tval{color:#f59e0b}
.inboxcard .timer[data-sla=deep]   .tval{color:#fb7185;animation:glow-orange 1.2s ease-in-out infinite}
.inboxcard .timer[data-sla=dead]   .tval{color:#ff5a5a;animation:glow-red .5s ease-in-out infinite}
.inboxcard[data-sla=lime]{border-color:rgba(163,230,53,.5);animation:none}
.inboxcard[data-sla=gold]{border-color:rgba(245,158,11,.6);animation:none}
.inboxcard[data-sla=deep]{border-color:#fb7185;animation:frame-orange 1.2s ease-in-out infinite}
.inboxcard[data-sla=dead]{border-color:#ff4d4d;animation:frame-red .5s ease-in-out infinite}
tr[data-sla=lime] td:first-of-type{box-shadow:inset 4px 0 0 #a3e635;animation:none}
tr[data-sla=gold] td:first-of-type{box-shadow:inset 4px 0 0 #f59e0b;animation:none}
tr[data-sla=deep] td:first-of-type{animation:edge-orange 1.2s ease-in-out infinite}
tr[data-sla=dead] td:first-of-type{animation:edge-red .5s ease-in-out infinite}
@media(max-width:760px){.custvoice{font-size:12px;padding:3px 9px;margin-left:6px}
  .custvoice .tem{font-size:15px}}
@media(max-width:560px){.custvoice .ttx{display:none}.custvoice{padding:3px 7px}}

/* ระดับที่ 8 : เกิน 6 ชั่วโมง (ง้อลูกค้า) */
.custvoice[data-sla=crimson]{color:#ffb4b4;background:rgba(190,24,60,.32);border-color:#e11d48;
  animation:frame-red .65s ease-in-out infinite}
.inboxcard .timer[data-sla=crimson] .tval{color:#fb7185;animation:glow-red .65s ease-in-out infinite}
.inboxcard[data-sla=crimson]{border-color:#e11d48;animation:frame-red .65s ease-in-out infinite}
tr[data-sla=crimson] td:first-of-type{animation:edge-red .65s ease-in-out infinite}

/* ---------- ล็อตรับของเข้าคาร์โก้ ---------- */
.lotcard{border-left:4px solid var(--green)}
.lotcard.bad{border-left-color:var(--red)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap}
.tagchip{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:12px;cursor:pointer;color:var(--muted)}
.tagchip input{width:15px;height:15px;accent-color:var(--yellow)}
.tagchip:has(input:checked){border-color:var(--yellow);color:var(--yellow);background:rgba(255,200,30,.12)}
.linebox{background:rgba(6,199,85,.10);border:1px solid rgba(6,199,85,.4);border-radius:12px;
  padding:12px 14px;margin-top:12px}
.linebox > b{display:block;color:#06c755;font-size:12.5px;margin-bottom:7px}
.linetxt{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:12.5px;line-height:1.7;white-space:pre-wrap;margin-bottom:9px}

/* ---------- ฟอร์มรับของเข้า 3 ขั้นตอน ---------- */
.stepbox{background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:14px}
.stephead{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13.5px;
  color:var(--yellow);margin-bottom:12px}
.stepno{width:26px;height:26px;border-radius:50%;background:var(--yellow);color:#1a1400;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex:none}
.secblock{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.secblock > b{display:block;font-size:12.5px;color:var(--yellow);margin-bottom:8px}
.boxrow{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:10px;padding:10px 12px;margin-bottom:9px}
.boxrow.bad{border-left-color:var(--red)}
.boxhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;margin-bottom:6px}

/* เมนูภาพรวมด้านบนสุด (แผนผังงานรถ / การเข้าใช้งาน) — ทำให้ใหญ่เด่นกว่าเมนูฝ่าย */
.side a.nav.big{padding:13px 12px;font-size:15px;font-weight:700;color:var(--text);
  background:var(--panel2);border:1px solid #2a3050;margin-bottom:6px}
.side a.nav.big span{letter-spacing:.3px}
.side a.nav.big:hover{border-color:var(--yellow);color:var(--yellow)}
.side a.nav.big.active{background:var(--yellow-soft);border-color:var(--yellow);color:var(--yellow)}

/* ---- ใบเสนอราคา ---- */
tr.subline td{background:rgba(255,255,255,.02);opacity:.85}
tr.subline td:nth-child(2) input{color:var(--muted);font-size:12px}

/* ---- แถบคะแนนความขยัน ---- */
.dilibar{height:9px;border-radius:6px;background:var(--panel2);overflow:hidden;
  border:1px solid #2a3050}
.dilibar i{display:block;height:100%;border-radius:6px;transition:width .5s ease}
td.c{text-align:center}

/* ---- ตารางเทียบราคาโรงงาน ---- */
td.fp-low{background:rgba(45,200,120,.16);color:var(--green);font-weight:700}
td.fp-high{background:rgba(230,70,70,.13);color:var(--red)}

/* ---- แคตตาล็อกชุดแปลง ---- */
.setpics{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.setpics img{height:150px;width:auto;border-radius:8px;border:1px solid #2a3050;
  object-fit:cover;transition:transform .15s}
.setpics a:hover img{transform:scale(1.03);border-color:var(--yellow)}
.itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:3px 14px;margin-top:8px;font-size:12.5px}

/* ---- หน้าเข้าสู่ระบบ : รองรับมือถือ ---- */
.loginForm{width:300px;max-width:92vw}
.loginGap{height:74px}
@media (max-width:820px){
  .loginGap{height:16px}
  .loginForm{width:100%;max-width:420px}
  .loginForm input{font-size:16px}
}

/* ================= ใช้งานบนมือถือ : ขยายช่องกรอกให้ใหญ่ กดง่าย ================= */
@media (max-width:820px){
  /* ฟอร์มเรียงเป็นคอลัมน์เดียว ไม่บีบกันจนหัวข้อตกบรรทัด */
  .grid{grid-template-columns:1fr !important;gap:14px}
  .grid > div[style*="span 2"],
  .grid > div[style*="span 3"]{grid-column:auto !important}

  /* ช่องกรอกใหญ่ขึ้น นิ้วโป้งกดโดนง่าย · 16px กันจอซูมเอง */
  input,select,textarea{font-size:16px;padding:13px 12px;border-radius:11px}
  input[type=file]{padding:11px;font-size:14px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  textarea{min-height:96px}
  label{font-size:13px;margin-bottom:6px}
  select{background-image:none;min-height:48px}

  /* ปุ่มใหญ่ขึ้น กดง่าย */
  .btn{padding:13px 20px;font-size:15px;border-radius:11px}
  .btn.sm{padding:9px 14px;font-size:13.5px}
  .actions{gap:10px}
  .actions .btn{flex:1 1 auto}

  /* การ์ด/หัวข้อ ให้พื้นที่มากขึ้น */
  .card{padding:14px 13px}
  .stepbox{padding:13px 12px}
  .main{padding:14px 12px 70px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tabs a{flex:none;white-space:nowrap}

  /* แถบเมนูซ้ายแคบลงอีก เหลือพื้นที่ให้เนื้อหา */
  .side{width:56px;padding:8px 6px}
  .side a.nav,.side a.nav.big{padding:11px 6px;justify-content:center;font-size:18px}
  .side a.nav.big{background:none;border:none}
}

/* ---- กันเนื้อหาล้นออกนอกจอมือถือ ---- */
.wrap{max-width:100%}
.main{min-width:0}
@media (max-width:820px){
  html,body{overflow-x:hidden}
  .main{max-width:100%;overflow-x:hidden}
  .card,.stepbox,.box,.secblock{max-width:100%;overflow-wrap:anywhere}
  /* แถบแท็บ : เลื่อนในตัวเอง ไม่ดันจอ */
  .tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  /* ตารางข้อมูล label|ค่า : เหลือ 2 คอลัมน์ ไม่ใช่ 4 */
  .kv{grid-template-columns:104px 1fr !important;gap:6px 10px}
  .kv > div{font-size:13px}
  /* ตารางกว้าง ๆ ให้เลื่อนในกรอบตัวเอง */
  .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:max-content}
  /* รูปภาพไม่ล้น */
  .pics img,.setpics img,.ptpics img{max-width:100%}
}