/* Goku CRM V4.7 · mkt-plan – Kế hoạch Marketing tổng thể, timeline, duyệt từng hạng mục, danh mục nguồn Lead / kênh */
.mp{--mp-b:#e6ebf2;--mp-run:#fff3a3;--mp-run-b:#f2d94e;--mp-navy:#0f2747;--mp-gl:250px;min-width:0}
.mp-switch{display:inline-flex;background:#eef2f8;border-radius:11px;padding:3px;margin:0 0 14px;gap:2px;max-width:100%;overflow-x:auto}
.mp-switch button{border:0;background:none;padding:8px 14px;border-radius:9px;font-weight:700;color:#55627a;white-space:nowrap}
.mp-switch button.on{background:#fff;color:var(--b,#2269d9);box-shadow:0 1px 3px rgba(15,27,45,.12)}
.mp-switch i{font-style:normal;background:#e5383b;color:#fff;border-radius:9px;padding:0 7px;font-size:11px;margin-left:4px}
.mp-head{padding-bottom:14px}
.mp-titlebar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.mp-title{font-size:19px!important;letter-spacing:.2px;color:var(--mp-navy);margin:2px 0 4px!important}
.mp-titlebar p{max-width:720px;margin:0}
.mp-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.mp-tools .btn,.mp-tools .ghost,.mp-file{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mp-file{cursor:pointer}
.mp-lab{display:flex;flex-direction:column;font-size:11.5px;font-weight:700;color:#6b7686;gap:3px}
.mp-lab .field{padding:8px 10px;min-width:96px}
.mp-budget{margin-top:14px;border-top:1px dashed var(--mp-b);padding-top:10px}
.mp-bgrid{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(150px,1fr) minmax(160px,1fr) repeat(4,minmax(110px,.8fr));gap:4px 12px;align-items:end}
.mp-hide{display:none!important}
.mp-pct{display:flex;align-items:center;gap:8px}.mp-pct .field{width:80px}.mp-pct small{color:#6b7686;font-size:12px;white-space:nowrap}
.mp-bfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.mp-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px}
.mp-kpi{background:#fff;border:1px solid var(--mp-b);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0;border-top:4px solid #1f8fff}
.mp-kpi.k2{border-top-color:#7c5cff}.mp-kpi.k3{border-top-color:#16a34a}.mp-kpi.k4{border-top-color:#f59e0b}.mp-kpi.k5{border-top-color:#0ea5e9}
.mp-kpi small{color:#6b7686;font-weight:700;font-size:12px}.mp-kpi b{font-size:23px;letter-spacing:-.4px;color:var(--mp-navy)}.mp-kpi span{font-size:12px;color:#7a8696}
.mp-kpi.warn{border-top-color:#e5383b;background:#fff7f7}.mp-kpi.warn b{color:#c02626}
.mp-quarters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.mp-qc{background:#fff;border:1px solid var(--mp-b);border-radius:12px;padding:11px 14px;min-width:0}
.mp-qc.over{border-color:#f5b4b4;background:#fffafa}
.mp-qc small{color:#6b7686;font-weight:700}
.mp-qbar{position:relative;height:8px;border-radius:6px;background:#edf1f7;margin:8px 0 6px;overflow:hidden}
.mp-qbar span{position:absolute;left:0;top:0;bottom:0;border-radius:6px}.mp-qbar .p{background:#a9c6ff}.mp-qbar .a{background:#1f5fc9;height:4px;top:2px}
.mp-qc.over .mp-qbar .p{background:#f59a9a}
.mp-qnum{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:#5b6676;flex-wrap:wrap}
.mp-warn{display:inline-flex;align-items:center;gap:4px;color:#c02626;font-size:12px;font-weight:700}
.mp-wait{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff8e1;border:1px solid #f6d77a;border-radius:12px;padding:10px 14px;margin-bottom:14px}.mp-wait b{margin-right:auto;color:#7a5200}.mp-wait button{border:1px solid #f0c95a;background:#fff;border-radius:8px;padding:6px 11px;font-weight:700;color:#7a5200}
.mp-main{padding:16px 18px}
.mp-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mp-seg{display:inline-flex;border:1px solid var(--mp-b);border-radius:10px;overflow:hidden;background:#fff}
.mp-seg button{border:0;background:none;padding:7px 12px;font-weight:700;font-size:13px;color:#55627a;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mp-seg button+button{border-left:1px solid var(--mp-b)}
.mp-seg button.on{background:var(--mp-navy);color:#fff}
.mp-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#3a4657;cursor:pointer}
.mp-search{margin-left:auto;min-width:200px;padding:8px 10px}
.mp-chips{margin:10px 0 6px}
.mp-bulk{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#0f2747;color:#fff;border-radius:12px;padding:9px 12px;margin:8px 0}
.mp-bulk b{margin-right:auto;font-size:13.5px}.mp-bulk .ghost{padding:6px 11px}.mp-bulk .btn{padding:6px 12px;background:#2d7ee9;border-color:#2d7ee9}
.mp-empty{padding:34px 10px;text-align:center;color:#6b7686}
/* bảng kế hoạch */
.mp-tablewrap{overflow:auto;max-height:72vh;border:1px solid var(--mp-b);border-radius:12px;margin-top:8px;background:#fff}
.mp-tbl{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:100%}
.mp-tbl th{position:sticky;top:0;background:#1c2b3f;color:#fff;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;padding:7px 8px;text-align:left;white-space:nowrap;z-index:2;border-right:1px solid #33465e}
.mp-tbl thead tr:nth-child(2) th{top:29px}
.mp-tbl th.mp-mh{background:var(--mp-run);color:#4a3b00;text-transform:none;font-size:11.5px;text-align:center;min-width:74px;border-right:1px solid #ecd76a}
.mp-tbl th.mp-time{text-align:center}
.mp-tbl td{border-bottom:1px solid #edf0f5;border-right:1px solid #f1f3f7;padding:5px 7px;vertical-align:top;background:#fff}
.mp-tbl .r{text-align:right}
.mp-tbl .mp-c0{position:sticky;left:0;z-index:1;width:30px;min-width:30px;max-width:30px;text-align:center;padding:5px 2px}
.mp-tbl .mp-c1{position:sticky;left:30px;z-index:1;width:40px;min-width:40px;max-width:40px;text-align:center;padding:5px 2px}
.mp-tbl .mp-c2{position:sticky;left:70px;z-index:1;min-width:150px;box-shadow:2px 0 0 #e3e8f0}
.mp-tbl th.mp-c0,.mp-tbl th.mp-c1,.mp-tbl th.mp-c2{z-index:3}
.mp-tbl .mp-c3{min-width:280px;max-width:380px}
.mp-row.sel td{background:#f2f7ff}
.mp-stt{border:1px solid var(--mp-b);background:#f7f9fc;border-radius:7px;min-width:28px;padding:3px 6px;font-weight:700;color:#2b3645}
.mp-stt:hover{background:#e8f0ff;color:#1f5fc9}
.mp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;flex-shrink:0;vertical-align:middle}
.mp-c2 .mp-in{width:calc(100% - 16px)}
.mp-in{border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 5px;font-size:12.5px;color:#17263b;width:100%;min-width:0;font-family:inherit}
.mp-in:hover{border-color:#dbe3ee;background:#fbfcfe}.mp-in:focus{outline:0;border-color:#6da1e6;background:#fff;box-shadow:0 0 0 2px #cce0ff88}
select.mp-in{cursor:pointer;min-width:110px}select.mp-in:disabled{color:#17263b;opacity:1;cursor:default;-webkit-appearance:none;appearance:none}
.mp-ta{resize:vertical;min-height:38px;line-height:1.4}.mp-ta.sm{min-width:170px}
.mp-sm{width:58px}.mp-md{width:110px}.mp-money{width:100px;text-align:right}
.mp-ro{display:block;padding:4px 2px}
.mp-act{display:block;white-space:pre-line;line-height:1.4;max-height:7.2em;overflow:hidden}
.mp-cm{display:block;color:#8a96a8;font-size:10.5px;text-align:right}
.mp-help{display:block;color:#7a8696;font-size:11px;padding-left:5px}
.mp-stc{white-space:nowrap;min-width:110px}
.mp-stc .v41-st{font-size:11px}
.mp-lock{color:#15803d;vertical-align:middle;display:inline-flex}.mp-lock svg{width:13px;height:13px}
.mp-rn{display:block;white-space:normal;color:#b45309;font-size:11px;max-width:160px;margin-top:3px}
.mp-qa{display:block;margin-top:5px;border:1px solid #c9d8f5;background:#eef4ff;color:#1f5fc9;border-radius:7px;font-size:11.5px;font-weight:700;padding:3px 8px}
.mp-qa.approve{background:#e3f6e9;border-color:#a7e0bb;color:#15803d}.mp-qa.done{background:#dcf5f2;border-color:#9fdcd5;color:#0e7c7b}
.mp-m{text-align:center;vertical-align:middle!important;min-width:74px;white-space:nowrap;font-size:12px;color:#3a4657;user-select:none}
.mp-m.ed{cursor:pointer;touch-action:none}
.mp-m.ed:hover{outline:2px solid #6da1e6;outline-offset:-2px}
.mp-m.on{background:var(--mp-run)!important;color:#3d3000;font-weight:700}
.mp-m.ov:not(.on){background:#fffbe6!important}
.mp-m em{font-style:normal;font-weight:600}
.mp-m.over{background:#fde8e8!important;color:#c02626!important}
.mp-m.mut{color:#8a96a8}
.mp-mc{width:70px;border:1px solid #dbe3ee;border-radius:6px;padding:4px;font-size:12px;text-align:right;background:#fff}
.mp-tot{white-space:nowrap;min-width:84px;vertical-align:middle!important}.mp-tot small{display:block;color:#15803d;font-size:10.5px}
.mp-grp td{background:#f4f7fb!important;border-top:1px solid #dfe5ee;font-size:12px}
.mp-grp .mp-gname{position:sticky;left:30px;z-index:1}
.mp-grp .mp-gname i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle}
.mp-grp small{color:#7a8696;margin-left:4px}.mp-grp .sub{color:#5b6676;font-weight:600}
.mp-gadd{border:1px dashed #b7c6dc;background:#fff;color:#2269d9;border-radius:6px;padding:0 5px;margin-left:6px;vertical-align:middle;line-height:0;height:20px}
.mp-gadd svg{width:13px;height:13px}
.mp-foot td{background:#f8fafc;font-size:12px;border-top:1px solid #e3e8f0}
.mp-foot .mp-fl{position:sticky;left:30px;z-index:1;text-align:right;color:#3a4657}
.mp-foot td.over{background:#fde8e8!important;color:#c02626}
.mp-foot.act td{background:#eef6ff}
.mp-red{color:#c02626}
/* thực chi */
.mp-m.pa{padding:4px 4px}.mp-m.pa small{display:block;color:#8a96a8;font-size:10.5px}
.mp-ma{width:76px;border:1px solid #dbe3ee;border-radius:6px;padding:3px 4px;font-size:12px;text-align:right;background:#fff}
/* điện thoại */
.mp-cards{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mp-cgrp{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px}.mp-cgrp i{width:10px;height:10px;border-radius:3px}.mp-cgrp small{color:#7a8696}
.mp-card{border:1px solid var(--mp-b);border-radius:12px;padding:11px 12px;background:#fff}
.mp-card.sel{border-color:#8fb4f0;background:#f6f9ff}
.mp-cact{margin:7px 0;white-space:pre-line;font-size:13px;line-height:1.45;max-height:4.4em;overflow:hidden;cursor:pointer;color:#2b3645}
.mp-cmeta{display:flex;gap:10px;font-size:12px;color:#6b7686;align-items:center}.mp-cmeta b{margin-left:auto;color:var(--mp-navy);font-size:14px}
.mp-cmonths{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px}
.mp-cmonths button{border:1px solid #e3e8f0;background:#f8fafc;border-radius:7px;padding:4px 2px;font-size:11px;font-weight:700;color:#3d3000;min-height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mp-cmonths button small{font-weight:600;color:#7a8696;font-size:10px}
.mp-cmonths button.on{background:var(--mp-run);border-color:var(--mp-run-b)}
.mp-cmonths button:disabled{opacity:1}
.mp-cfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;align-items:center}.mp-cfoot .mp-qa{margin:0;padding:7px 10px}
.mp-mtot{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.mp-mtot div{border:1px solid var(--mp-b);border-radius:9px;padding:6px;text-align:center;font-size:12px;background:#fff}
.mp-mtot small{display:block;color:#7a8696;font-weight:700}.mp-mtot span{display:block;color:#8a96a8;font-size:10.5px}
.mp-mtot .over{background:#fde8e8;border-color:#f5b4b4;color:#c02626}
/* timeline */
.mp-gwrap{overflow:auto;border:1px solid var(--mp-b);border-radius:12px;margin-top:8px;max-height:72vh;background:#fff}
.mp-gantt{position:relative;min-width:calc(var(--mp-gl) + 12 * 62px)}
.mp-gantt.wk{min-width:calc(var(--mp-gl) + 53 * 17px)}
.mp-grow{display:grid;grid-template-columns:var(--mp-gl) minmax(0,1fr);border-bottom:1px solid #eef1f6;min-height:38px}
.mp-grow.head{position:sticky;top:0;z-index:3;background:#1c2b3f;color:#fff;min-height:44px}
.mp-grow.grp{background:#f4f7fb;min-height:30px}
.mp-gl{position:sticky;left:0;z-index:2;background:inherit;background-color:#fff;padding:6px 10px;display:flex;align-items:center;gap:6px;border-right:1px solid #e3e8f0;min-width:0;cursor:pointer}
.mp-grow.head .mp-gl{background:#1c2b3f;cursor:default}.mp-grow.grp .mp-gl{background:#f4f7fb;font-size:12.5px;cursor:default}
.mp-grow.grp .mp-gl i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.mp-grow.grp small{color:#7a8696}
.mp-gl>div{min-width:0}.mp-gl b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-gl small{display:block;color:#7a8696;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-gh{display:grid;align-items:stretch}
.mp-ghm{text-align:center;font-size:11.5px;padding:4px 2px;border-left:1px solid #33465e;display:flex;flex-direction:column;justify-content:center;grid-row:1}
.mp-ghm small{color:#b9c6d8;font-size:10.5px}.mp-ghm.over small{color:#ff9d9d;font-weight:700}
.mp-gantt.wk .mp-ghm{padding:3px 0}
.mp-ghw{grid-row:2;text-align:center;font-size:9.5px;color:#b9c6d8;border-left:1px solid #2b3d55;padding:2px 0}
.mp-gt{display:grid;align-items:center;padding:5px 0;background-image:linear-gradient(90deg,#f1f3f7 1px,transparent 1px);background-size:calc(100% / 12) 100%}
.mp-gantt.wk .mp-gt{background-size:calc(100% / 53) 100%}
.mp-barg{grid-row:1;height:24px;border-radius:7px;border:0;background:var(--c);color:#fff;font-size:11px;font-weight:700;margin:0 2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 6px;cursor:pointer;box-shadow:0 1px 2px rgba(15,27,45,.18);text-align:left;min-width:0}
.mp-barg span{text-shadow:0 1px 1px rgba(0,0,0,.25)}
.mp-barg.mp-g-gray{background:color-mix(in srgb,var(--c) 22%,#fff);color:#2b3645;border:1.5px dashed var(--c);box-shadow:none}
.mp-barg.mp-g-gray span,.mp-barg.mp-g-orange span,.mp-barg.mp-g-red span{text-shadow:none}
.mp-barg.mp-g-gold{background:repeating-linear-gradient(135deg,var(--c) 0 8px,color-mix(in srgb,var(--c) 70%,#fff) 8px 14px)}
.mp-barg.mp-g-orange{background:color-mix(in srgb,var(--c) 22%,#fff);color:#b45309;border:1.5px solid #f59e0b}
.mp-barg.mp-g-red{opacity:.35}
.mp-barg.mp-g-teal{opacity:.75}
.mp-row.mp-st-red td{color:#94a3b8}
.mp-barg:hover{filter:brightness(1.07);outline:2px solid #0f2747;outline-offset:1px}
.mp-gdot{grid-row:1;justify-self:center;font-size:10px;font-weight:700;color:var(--c);border:1px solid var(--c);border-radius:999px;padding:0 5px;background:#fff;white-space:nowrap}
.mp-today{position:absolute;top:0;bottom:0;left:calc(var(--mp-gl) + (100% - var(--mp-gl)) * var(--x));width:2px;background:#ff5a36;z-index:2;pointer-events:none}
.mp-today:before{content:'Hôm nay';position:absolute;bottom:4px;left:4px;font-size:10px;font-weight:700;color:#fff;background:#ff5a36;border-radius:4px;padding:0 4px;white-space:nowrap}
/* hộp thoại */
.mp-modal{max-width:100%}
.mp-locked{display:flex;gap:8px;align-items:flex-start;background:#e9f8ef;border:1px solid #b7e4c7;color:#14532d;border-radius:10px;padding:9px 12px;margin:10px 0;font-size:13px;flex-wrap:wrap}
.mp-locked svg{flex-shrink:0;margin-top:2px}
.mp-mgrid-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:16px 0 6px;align-items:baseline}.mp-mgrid-h small{color:#7a8696}
.mp-mgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.mp-mbox{border:1px solid #e3e8f0;border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:4px;background:#fbfcfe;min-width:0}
.mp-mbox.on{background:#fffbe0;border-color:var(--mp-run-b)}
.mp-mbox label{font-size:12px;font-weight:700;display:flex;gap:5px;align-items:center;cursor:pointer}
.mp-mbox .field{padding:5px 6px;font-size:12px;width:100%}
.mp-links{border-top:1px dashed var(--mp-b);margin-top:14px;padding-top:10px}
.mp-links>b{display:inline-flex;gap:6px;align-items:center}
.mp-tasks{list-style:none;padding:0;margin:8px 0}.mp-tasks li{display:flex;gap:8px;align-items:center;border:1px solid #e3e8f0;border-radius:8px;padding:6px 8px;margin-bottom:5px;font-size:13px}.mp-tasks li small{color:#7a8696;margin-left:auto}
.mp-reopen{margin-top:12px;border:1px solid #fde1c8;background:#fff8f1;border-radius:10px;padding:8px 12px}.mp-reopen summary{cursor:pointer;font-weight:700;color:#b45309}
.mp-asklist{margin:8px 0;padding-left:18px;font-size:13px;max-height:200px;overflow:auto}
.mp-prev{max-height:48vh}
/* danh mục */
.mp-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mp-catlist{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.mp-catrow{display:grid;grid-template-columns:38px minmax(0,1fr) 70px 64px 30px;gap:8px;align-items:center}
.mp-catrow input[type=color]{width:34px;height:32px;border:1px solid #dbe3ee;border-radius:8px;padding:2px;background:#fff;cursor:pointer}
.mp-catrow .field{padding:7px 9px}.mp-catrow small{color:#7a8696;font-size:12px;text-align:right}
.mp-catrow.off .mpc_name{color:#94a3b8;text-decoration:line-through}
.mp-catadd{display:flex;gap:8px;flex-wrap:wrap}.mp-catadd .field{flex:1 1 200px}
.mp-srcbar label{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-srcbar label i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
@media (max-width:1280px){.mp-bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.mp-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.mp-cats{grid-template-columns:1fr}.mp-quarters{grid-template-columns:repeat(2,minmax(0,1fr))}.mp-mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .mp{--mp-gl:150px}
  .mp-bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mp-bgrid>label:first-child{grid-column:1/-1}
  .mp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mp-kpi{padding:10px 12px}.mp-kpi b{font-size:19px}.mp-kpis .k5{grid-column:1/-1}
  .mp-quarters{gap:8px}.mp-qc{padding:9px 10px}
  .mp-main{padding:12px}
  .mp-search{margin-left:0;flex:1 1 100%;min-width:0}
  .mp-seg button{padding:7px 9px;font-size:12.5px}
  .mp-tools{width:100%}.mp-tools .btn,.mp-tools .ghost{flex:1 1 auto;justify-content:center}
  .mp-gantt{min-width:calc(var(--mp-gl) + 12 * 46px)}
  .mp-gl b{font-size:11.5px}
  .mp-catrow{grid-template-columns:34px minmax(0,1fr) 54px 56px 26px;gap:5px}
  .mp-switch button{padding:7px 10px;font-size:13px}
}
@media (max-width:480px){.mp-mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mp-mtot{grid-template-columns:repeat(3,1fr)}}
.mp-atbl .mp-c1{left:0}.mp-atbl .mp-c2{left:40px}