/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — Marketing AI module (หน้า 65–74)
   โหลดหลัง crm.css เสมอ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GRID ────────────────────────────────────────────────────────── */
.kpis--9{grid-template-columns:repeat(9,1fr)}
.g-mkt31{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:16px}
.g-mkt5{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}

/* ── 2. PLATFORM TILES — เลือกแพลตฟอร์ม ─────────────────────────────── */
.plat{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
.plat a{display:block;padding:14px 8px;border-radius:12px;text-align:center;text-decoration:none;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .2s var(--ease)}
.plat a:hover{border-color:var(--c,var(--line-hot));transform:translateY(-2px)}
.plat__ic{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 8px;border-radius:11px;
  background:color-mix(in srgb,var(--c,#3B6BFF) 16%,transparent)}
.plat__ic svg{stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.7}
.plat__n{font-size:11px;font-weight:700;color:var(--tx-2)}
.plat__s{font-size:9.5px;color:var(--tx-4);margin-top:2px;line-height:1.35}
.plat__v{font-size:15px;font-weight:800;color:var(--c,var(--tx));margin-top:6px;font-variant-numeric:tabular-nums}
.p-fb{--c:#4A7BE8} .p-tt{--c:#2DD4BF} .p-ig{--c:#E85CA0} .p-yt{--c:#EE5D52} .p-li{--c:#3B8CD6}
.p-web{--c:#8B7CFF} .p-blog{--c:#2ED47A} .p-mail{--c:#FBBF24} .p-line{--c:#5BC236}

/* ── 3. CONTENT CARDS ───────────────────────────────────────────────── */
.cnt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.cntc{border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);background:var(--bg-tile);
  transition:border-color .2s var(--ease)}
.cntc:hover{border-color:var(--line-hot)}
.cntc__im{position:relative}
.cntc__im svg{width:100%;height:auto;display:block}
.cntc__st{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:99px;font-size:9.5px;font-weight:700;
  color:#08131F;background:var(--c,#2ED47A)}
.st-pub{--c:#2ED47A} .st-prog2{--c:#38BDF8} .st-sch{--c:#FBBF24} .st-draft{--c:#7E97BC}
.cntc__len{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:5px;font-size:9.5px;
  font-weight:700;color:#EAF2FF;background:rgba(8,19,31,.8)}
.cntc__c{padding:9px 10px 11px}
.cntc__p{font-size:10px;font-weight:700;color:var(--c,#3B6BFF)}
.cntc__d{font-size:9.5px;color:var(--tx-4);margin-top:2px}
.cntc__m{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line-soft);
  font-size:9.5px;color:var(--tx-3)}
.cntc__m span{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.cntc__m svg{stroke:var(--tx-4);fill:none;stroke-width:1.8}

/* ── 4. CONTENT WORKFLOW (7 ขั้น) ───────────────────────────────────── */
.cflow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 0}
.cflow__s{flex:1 0 138px;min-width:0;padding:13px 11px;border-radius:12px;text-align:left;
  border:1px solid var(--line-soft);background:var(--bg-tile);border-left:2.5px solid var(--c,#3B6BFF)}
.cflow__t{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--tx-2)}
.cflow__t svg{flex-shrink:0;stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.8}
.cflow__d{font-size:9.5px;color:var(--tx-4);margin-top:6px;line-height:1.5}
.cflow__a{flex:0 0 20px;display:grid;place-items:center;color:var(--tx-4)}
.cflow__a svg{stroke:currentColor;fill:none;stroke-width:2}

/* ── 5. CAMPAIGN WORKFLOW (การ์ดใหญ่ 13 ขั้น) ───────────────────────── */
.cwf{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px}
.cwf__s{padding:13px 10px;border-radius:12px;text-align:center;
  border:1px solid var(--line-soft);background:var(--bg-tile);border-top:2.5px solid var(--c,#3B6BFF)}
.cwf__ic{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 9px;border-radius:12px;
  background:color-mix(in srgb,var(--c,#3B6BFF) 15%,transparent)}
.cwf__ic svg{stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.6}
.cwf__n{font-size:10.5px;font-weight:700;color:var(--tx-2);line-height:1.3}
.cwf__d{font-size:9.5px;color:var(--tx-4);margin-top:5px;line-height:1.5}
.cwf__b{display:block;margin-top:9px;padding:4px 0;border-radius:7px;font-size:9.5px;font-weight:800;
  color:var(--c,#2ED47A);background:color-mix(in srgb,var(--c,#2ED47A) 14%,transparent)}
.cwf__b--e{--c:#FB7185}

/* ── 6. RANK BAR — ช่องทาง/แคมเปญ ───────────────────────────────────── */
.rank{display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0}
.rank__k{font-size:11px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank__t{height:9px;border-radius:99px;background:var(--bg-input);overflow:hidden}
.rank__t i{display:block;height:100%;border-radius:99px;background:var(--c,#3B6BFF);transition:width .8s var(--ease)}
.rank__v{font-size:11px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 7. CALENDAR (คอนเทนต์) ─────────────────────────────────────────── */
.ccal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.ccal b{font-size:9.5px;font-weight:600;color:var(--tx-4);padding:3px 0}
.ccal span{display:grid;place-items:center;height:24px;border-radius:6px;font-size:10.5px;color:var(--tx-3);
  font-variant-numeric:tabular-nums}
.ccal span.o{color:var(--tx-4);opacity:.4}
.ccal span.has{color:#08131F;background:#8B7CFF;font-weight:800}
.ccal span.now{outline:2px solid #2ED47A;outline-offset:-2px;color:var(--tx);font-weight:800}

/* ── 8. RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:1500px){ .kpis--9{grid-template-columns:repeat(5,1fr)} .plat{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:1400px){
  .g-mkt31{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-mkt5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cnt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cwf{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){ .cwf{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){
  .kpis--9{grid-template-columns:repeat(2,1fr)}
  .plat{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-mkt31,.g-mkt5,.cnt{grid-template-columns:minmax(0,1fr)}
  .cwf{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.mt16{margin-top:16px}

/* ── การ์ดแพลตฟอร์มโฆษณา (หน้า 69) ─────────────────────────────────── */
.pcard{padding:13px 12px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-tile);
  border-top:2.5px solid var(--c,#3B6BFF);color:var(--c,#3B6BFF)}
.pcard__h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--tx-2);margin-bottom:10px}
.pcard__ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:color-mix(in srgb,var(--c,#3B6BFF) 17%,transparent)}
.pcard__ic svg{stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.8}
.pcard__r{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:3.5px 0;font-size:10.5px}
.pcard__r b{font-weight:500;color:var(--tx-4)}
.pcard__r span{font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.pcard__sp{width:100%;height:auto;display:block;margin-top:9px}

/* ── การ์ดครีเอทีฟ (หน้า 69) ────────────────────────────────────────── */
.g-proc5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.crv{border-radius:11px;overflow:hidden;border:1px solid var(--line-soft);background:var(--bg-tile);
  border-top:2.5px solid var(--c,#3B6BFF)}
.crv svg{width:100%;height:auto;display:block}
.crv__c{padding:8px 9px 10px}
.crv__n{font-size:10.5px;font-weight:700;color:var(--tx-2);line-height:1.35}
.crv__m{display:flex;justify-content:space-between;gap:6px;margin-top:6px;font-size:9.5px;color:var(--tx-4);
  font-variant-numeric:tabular-nums}
.crv__w{font-size:9px;color:#FBBF24;margin-top:5px;line-height:1.4}
@media (max-width:1400px){ .g-proc5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .g-proc5{grid-template-columns:minmax(0,1fr)} }

/* ── Word cloud + การ์ดวิกฤต (หน้า 70) ─────────────────────────────── */
.wcloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:14px 6px;
  line-height:1.5;text-align:center}
.wcloud span{color:var(--c,var(--tx-2));font-weight:700}
.w5{font-size:26px} .w4{font-size:21px} .w3{font-size:17px} .w2{font-size:13.5px}
.recobx--r{border-color:color-mix(in srgb,#FB7185 38%,transparent);background:color-mix(in srgb,#FB7185 9%,transparent)}
.t-grey{--tone:#7E97BC}

/* ── แถบเปรียบเทียบ Attribution Model (หน้า 71) ─────────────────────── */
.atr{display:flex;align-items:center;gap:8px;padding:5px 0}
.atr__k{flex:0 0 104px;font-size:10.5px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atr i{display:grid;place-items:center;height:20px;border-radius:4px;background:var(--c,#3B6BFF);min-width:0}
.atr i b{font-size:9px;font-weight:800;color:#08131F;font-style:normal}

/* ── การ์ด What-if (หน้า 73) ────────────────────────────────────────── */
.wcard{padding:12px 11px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-tile);
  border-top:2.5px solid var(--c,#3B6BFF);text-align:center}
.wcard__ic{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 8px;border-radius:10px;
  background:color-mix(in srgb,var(--c,#3B6BFF) 16%,transparent)}
.wcard__ic svg{stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.7}
.wcard__t{font-size:10.5px;font-weight:700;color:var(--tx-2);line-height:1.35;min-height:28px}
.wcard__r{display:flex;justify-content:space-between;gap:6px;padding:3px 0;font-size:10px}
.wcard__r b{font-weight:500;color:var(--tx-4)}
.wcard__r span{font-weight:800;font-variant-numeric:tabular-nums}
.wcard .btn{margin-top:9px}