/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — Sales & CRM AI module (หน้า 55–64)
   โหลดหลัง wh.css เสมอ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GRID ────────────────────────────────────────────────────────── */
.g-crm1{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.25fr) minmax(0,.95fr);gap:16px}
.g-crm4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.g-crm31{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);gap:16px}

.wmapsvg{width:100%;height:auto;display:block;margin:4px 0 6px}

/* ── 2. FUNNEL — กรวยการขาย ─────────────────────────────────────────── */
.fnl{display:flex;flex-direction:column;gap:5px;align-items:center}
.fnl__r{display:flex;align-items:center;gap:12px;width:100%}
.fnl__b{flex:0 0 auto;display:grid;place-items:center;height:36px;color:#08131F;font-size:11.5px;font-weight:800;
  clip-path:polygon(var(--l) 0,var(--r) 0,100% 100%,0 100%);background:var(--c,#3B6BFF);
  white-space:nowrap;padding:0 10px}
.fnl__tx{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.fnl__v{font-size:12.5px;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums}
.fnl__c{font-size:10.5px;color:var(--tx-4);font-variant-numeric:tabular-nums}
.fnl__p{flex:0 0 54px;text-align:right;font-size:11px;font-weight:700;color:#2ED47A;font-variant-numeric:tabular-nums}
.fn1{--c:#3B6BFF;--l:0%;--r:100%;width:100%}
.fn2{--c:#2ED47A;--l:5%;--r:95%;width:88%}
.fn3{--c:#2DD4BF;--l:6%;--r:94%;width:77%}
.fn4{--c:#FBBF24;--l:7%;--r:93%;width:66%}
.fn5{--c:#FB923C;--l:8%;--r:92%;width:56%}
.fn6{--c:#FB7185;--l:9%;--r:91%;width:47%}
.fn7{--c:#8B7CFF;--l:10%;--r:90%;width:39%}

/* ── 3. CUSTOMER HEADER — บัตรลูกค้า ────────────────────────────────── */
.cust{display:grid;grid-template-columns:88px minmax(0,1fr) 156px 216px;gap:18px;align-items:start}
.cust__logo{display:grid;place-items:center;width:88px;height:88px;border-radius:16px;
  border:1px solid var(--line-soft);background:var(--bg-tile)}
.cust__logo svg{stroke:#5AAEFF;fill:none;stroke-width:1.4}
.cust__st{display:inline-block;margin-top:9px;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;
  color:#2ED47A;background:color-mix(in srgb,#2ED47A 16%,transparent);text-align:center;width:100%}
.cust__n{font-size:19px;font-weight:800;color:var(--tx)}
.cust__n2{font-size:12.5px;color:var(--tx-3);margin-top:2px}
.cust__tags{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.ctag{padding:4px 11px;border-radius:8px;font-size:10.5px;font-weight:700;
  color:var(--c,#3B6BFF);background:color-mix(in srgb,var(--c,#3B6BFF) 16%,transparent)}
.ctag--vip{--c:#FBBF24}
.cust__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:11px;color:var(--tx-3)}
.cust__meta b{color:var(--tx-2);font-weight:600}
.kam{padding:12px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-tile)}
.kam__n{font-size:13px;font-weight:700;color:var(--tx-2)}
.kam__r{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx-3);margin-top:5px}
.kam__r svg{flex-shrink:0;stroke:var(--tx-4);fill:none;stroke-width:1.7}
.kam__acts{display:flex;gap:6px;margin-top:11px}
.kam__acts button{flex:1;display:grid;place-items:center;height:32px;border-radius:9px;
  border:1px solid var(--line-soft);background:var(--bg-card);color:var(--tx-3)}
.kam__acts button:hover{color:var(--tx);border-color:var(--line-hot)}
.kam__acts svg{stroke:currentColor;fill:none;stroke-width:1.7}

/* ── 4. RFM HEAT GRID ───────────────────────────────────────────────── */
.rfm{width:100%;border-collapse:separate;border-spacing:4px;font-size:12px}
.rfm th{font-size:10px;font-weight:600;color:var(--tx-4);padding:3px 5px}
.rfm tbody th{text-align:right}
.rfm td{text-align:center;padding:14px 4px;border-radius:7px;font-weight:800;font-size:12.5px;color:#08131F;
  font-variant-numeric:tabular-nums;background:var(--c,#2FA85B)}
.r5{--c:#1E7F45} .r4{--c:#2FA85B} .r3{--c:#8BB93E} .r2{--c:#E8C547} .r1{--c:#E8944B}

/* ── 5. TIMELINE — เส้นเวลากิจกรรม ──────────────────────────────────── */
.tline{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:6px 0 2px}
.tline__s{flex:1 0 96px;text-align:center;min-width:0}
.tline__ic{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 9px;border-radius:50%;
  border:1.4px solid var(--c,#3B6BFF);background:color-mix(in srgb,var(--c,#3B6BFF) 13%,transparent)}
.tline__ic svg{stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.7}
.tline__t{font-size:11px;font-weight:700;color:var(--tx-2)}
.tline__d{font-size:10px;color:var(--tx-4);margin-top:2px}
.tline__dt{font-size:9.5px;color:var(--tx-4);margin-top:5px;font-variant-numeric:tabular-nums}
.tline__a{flex:0 0 20px;display:grid;place-items:center;height:38px;color:var(--tx-4)}
.tline__a svg{stroke:currentColor;fill:none;stroke-width:2}

/* ── 6. LEAD SCORE TABLE ────────────────────────────────────────────── */
.lgrade{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  font-size:11px;font-weight:800;color:#08131F;background:var(--c,#2ED47A)}
.lg-a{--c:#22C77A} .lg-b{--c:#E8D046} .lg-c{--c:#F0A93C} .lg-d{--c:#EE6D4A}

/* ── 7. SCENARIO CARDS ──────────────────────────────────────────────── */
.scn{padding:12px 14px;border-radius:12px;border:1.4px solid var(--line-soft);background:var(--bg-tile);
  margin-bottom:10px;transition:border-color .2s var(--ease)}
.scn:hover{border-color:var(--line-hot)}
.scn.on{border-color:var(--c,#2ED47A);background:color-mix(in srgb,var(--c,#2ED47A) 8%,transparent)}
.scn__n{font-size:12.5px;font-weight:800;color:var(--c,var(--tx-2));margin-bottom:9px}
.scn__g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.scn__g b{display:block;font-size:9.5px;font-weight:500;color:var(--tx-4)}
.scn__g span{display:block;font-size:12.5px;font-weight:800;color:var(--tx-2);margin-top:3px;font-variant-numeric:tabular-nums}

/* ── 8. STRATEGY QUADRANT ───────────────────────────────────────────── */
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quad article{padding:13px;border-radius:12px;border-top:2.5px solid var(--c,#3B6BFF);
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);border-left:1px solid var(--line-soft);
  background:var(--bg-tile)}
.quad h4{font-size:12px;font-weight:800;color:var(--c,#3B6BFF);margin-bottom:8px}
.quad li{font-size:11px;color:var(--tx-3);line-height:1.75;list-style:none;position:relative;padding-left:12px}
.quad li::before{content:"•";position:absolute;left:0;color:var(--c,#3B6BFF)}
.quad p{font-size:10px;color:var(--tx-4);margin-top:8px}

/* ── 9. RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:1400px){
  .g-crm1,.g-crm31{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cust{grid-template-columns:72px minmax(0,1fr);gap:14px}
}
@media (max-width:1100px){
  .g-crm4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quad{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .g-crm1,.g-crm31,.g-crm4{grid-template-columns:minmax(0,1fr)}
  .cust{grid-template-columns:minmax(0,1fr)}
  .cust__meta{grid-template-columns:minmax(0,1fr)}
}

/* ตัวเลขในการ์ดขั้นตอน workflow (หน้า 58) */
.awf__v{font-size:19px;font-weight:800;color:var(--tx);margin-top:8px;font-variant-numeric:tabular-nums}
.awf__u{font-size:9.5px;color:var(--tx-4);margin-top:1px}
.awf__s .tile{margin:0 auto 8px}

/* รายการแบบมีเลขลำดับ (หน้า 62) */
.bull--num{list-style:decimal}

/* What-if sliders (หน้า 63) */
.wif{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 0;cursor:pointer}
.wif__k{font-size:11.5px;color:var(--tx-2)}
.wif__v{font-size:11.5px;font-weight:800;color:#8B7CFF;font-variant-numeric:tabular-nums}
.wif input{grid-column:1/-1;width:100%;margin-top:5px;accent-color:#8B7CFF;cursor:pointer}