/* Phễu quảng cáo — cùng hệ màu CRM. Nguồn số: Meta = xanh BlueBolt, mã đếm = xanh ngọc, CRM = cam */
:root{--src-meta:#004AAD;--src-pixel:#0B8DB5;--src-crm:#E8701A}
.qst-nhap{background:var(--grey-soft);color:#56637A}
.qst-dang-chay{background:var(--ok-soft);color:var(--ok)}
.qst-dang-chay::before{animation:qblink 1.4s infinite}
.qst-tam-dung{background:var(--warn-soft);color:var(--warn)}
.qst-xong{background:var(--brand-soft);color:var(--brand)}
@keyframes qblink{50%{opacity:.25}}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.orange:hover{filter:brightness(.95);color:#fff}
.btn svg{flex:none}

/* tổng theo dòng sản phẩm */
.qline{margin-bottom:18px;overflow:hidden}
.qline-h{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--sunken)}
.qline-h h2{margin:0;font-size:15.5px;display:flex;align-items:center;gap:9px;min-width:220px}
.qline-s{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.qline-s span{display:block;font-size:11px;color:var(--muted)}
.qline-s b{font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.camp{display:grid;grid-template-columns:minmax(0,1.8fr) repeat(5,minmax(74px,.55fr));gap:14px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);cursor:pointer}
.qline-h+.camp{border-top:0}
.camp:hover{background:var(--brand-tint)}
.camp .nm{font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.camp .ds{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.camp .c span{display:block;font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.camp .c b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* việc cần làm */
.qtodo{margin-bottom:16px}
.qtodo .card-b{display:flex;flex-direction:column;gap:0;padding-top:8px}
.qtodo-i{display:flex;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.qtodo-i:first-child{border-top:0}
.qtodo-i>i{flex:none;width:9px;height:9px;border-radius:50%}
.qtodo-i>span{flex:1;min-width:0}
.qtodo-i.bad>i{background:var(--bad)}.qtodo-i.warn>i{background:var(--orange)}.qtodo-i.info>i{background:var(--faint)}
.qk{grid-template-columns:repeat(6,minmax(0,1fr))}
.qk .kpi .v{font-size:21px}

/* phễu */
.qgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:18px;align-items:start}
.qgrid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-top:18px;align-items:start}
.qside{display:flex;flex-direction:column;gap:18px;min-width:0}
.qf{display:flex;flex-direction:column}
.qf-row{display:grid;grid-template-columns:170px minmax(0,1fr) 92px;gap:14px;align-items:center}
.qf-l b{display:block;font-size:13.5px;line-height:1.3}
.qf-l .src{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.src.src-meta{color:var(--src-meta)}.src.src-pixel{color:var(--src-pixel)}.src.src-crm{color:var(--src-crm)}
.qf-bar{position:relative;height:40px;background:var(--sunken);border-radius:8px;overflow:hidden;display:flex;align-items:center}
.qf-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;opacity:.9;transition:width .5s ease}
.qf-bar i.src-meta{background:linear-gradient(90deg,#004AAD,#2D6FD0)}
.qf-bar i.src-pixel{background:linear-gradient(90deg,#0B8DB5,#33AFD3)}
.qf-bar i.src-crm{background:linear-gradient(90deg,#E8701A,#F39450)}
.qf-bar em{position:relative;font-style:normal;font-weight:700;font-size:16px;padding-left:12px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.18);mix-blend-mode:normal}
.qf-bar.thin em{color:var(--ink);text-shadow:none}
.qf-bar em .muted{color:var(--muted);text-shadow:none;font-weight:500;font-size:13px}
.qf-r{text-align:right;line-height:1.25}
.qf-r b{display:block;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.qf-r span{font-size:11px;color:var(--muted)}
.qf-arrow{display:grid;grid-template-columns:170px minmax(0,1fr) 92px;gap:14px;height:24px;align-items:center}
.qf-arrow span{grid-column:2;font-size:12px;font-weight:600;color:var(--muted);padding-left:12px;position:relative}
.qf-arrow span:not(:empty)::before{content:"↓";margin-right:6px;color:var(--faint)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}
.legend i.src-meta{background:var(--src-meta)}.legend i.src-pixel{background:var(--src-pixel)}.legend i.src-crm{background:var(--src-crm)}

/* người đang vào */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 0 rgba(14,138,85,.5);animation:qring 1.8s infinite}
@keyframes qring{70%{box-shadow:0 0 0 7px rgba(14,138,85,0)}100%{box-shadow:0 0 0 0 rgba(14,138,85,0)}}
.qfeed ul{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto}
.qfeed li{display:grid;grid-template-columns:42px auto minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px;align-items:baseline}
.qfeed li:first-child{border-top:0}
.qfeed li.new{animation:qflash 2.2s}
@keyframes qflash{0%{background:var(--orange-soft)}100%{background:transparent}}
.qfeed time{color:var(--faint);font-variant-numeric:tabular-nums}
.qfeed b{font-weight:600;white-space:nowrap}
.qfeed span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.qt{width:100%;border-collapse:collapse;font-size:13px}
.qt th{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.qt td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.qt tr:last-child td{border-bottom:0}
.qt .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qt.full th:first-child,.qt.full td:first-child{padding-left:20px}
.qt.full th:last-child,.qt.full td:last-child{padding-right:20px}
.qt tr.go{cursor:pointer}.qt tr.go:hover{background:var(--brand-tint)}
pre.code{background:#0F1B33;color:#DDE6F5;border-radius:9px;padding:11px 13px;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto;margin:6px 0 0;white-space:pre-wrap;word-break:break-all;flex:1}
.copy-row{display:flex;gap:8px;align-items:flex-start}
.copy-row .btn{margin-top:6px}

/* sửa landing */
.pe{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:18px;align-items:start}
.pe-form{display:flex;flex-direction:column;gap:14px}
.pe-b{display:flex;flex-direction:column;gap:12px}
.pe-b textarea.inp{min-height:0}
.preview{position:sticky;top:20px;height:calc(100vh - 150px);min-height:520px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.preview .bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--sunken);font-size:12.5px;color:var(--muted);font-weight:600}
.preview .bar .seg{margin-left:auto}
.preview .frame{height:calc(100% - 40px);display:flex;justify-content:center;background:#E9EDF4}
.preview iframe{border:0;width:390px;height:100%;background:#fff;box-shadow:0 0 0 1px var(--line)}
.preview.desk iframe{width:100%}
.link svg{width:13px;height:13px;vertical-align:-2px}

/* skill */
.qskills{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.qskill{padding:18px;display:flex;flex-direction:column;gap:8px}
.qskill .r{font-size:11px;color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.qskill h3{margin:0;font-size:16px;font-family:ui-monospace,Menlo,monospace}
.qskill p{margin:0;color:var(--ink-2);font-size:13px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.row-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.reader{white-space:pre-wrap;font:12.5px/1.6 ui-monospace,Menlo,monospace;color:var(--ink-2);max-height:65vh;overflow:auto;background:var(--sunken);border:1px solid var(--line);border-radius:8px;padding:14px;margin:0}

@media (max-width:1180px){.qk{grid-template-columns:repeat(3,minmax(0,1fr))}.qgrid,.qgrid2{grid-template-columns:1fr}.camp{grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,auto))}.camp .c.opt{display:none}.pe{grid-template-columns:1fr}.preview{position:relative;height:75vh}}
@media (max-width:700px){.qk{grid-template-columns:repeat(2,minmax(0,1fr))}.qf-row,.qf-arrow{grid-template-columns:110px minmax(0,1fr) 70px;gap:8px}.qline-s{gap:14px}}

/* mẫu quảng cáo */
.qads{margin-bottom:18px}
.qads .card-h{flex-wrap:wrap;padding-bottom:12px}
.qvar{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:7px;background:var(--orange-soft);color:#B4530C;font-weight:800;font-size:13px}
.qad-act{display:flex;gap:6px;flex-wrap:wrap}
.qad-act .btn svg{width:13px;height:13px}
.qvideo{display:block;width:100%;max-height:68vh;background:#000;border-radius:10px}
.modal.lg{width:min(860px,100%)}
.qadrow{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.qadrow .form-grid{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.qadrow .form-grid{grid-template-columns:1fr 1fr}}