:root{
  --bg:#f5f8fc; --surface:#ffffff; --surface-2:#f7f9fc; --border:#e6ebf2;
  --text:#17284a; --muted:#7d8799; --primary:#1d6fe8; --primary-ink:#ffffff;
  --primary-soft:#e8f0ff; --success:#0a8f5c; --success-soft:#e5f8f0;
  --warning:#a9681a; --warning-soft:#fff4dd; --danger:#c0392b; --danger-soft:#fbe7e4;
  --info:#1d6fe8; --info-soft:#e8f0ff; --radius:10px; --radius-sm:8px;
  /* màu nhấn (icon, cột tiến độ) — chữ dùng --success/--warning cho đủ tương phản */
  --green:#0ca66a; --orange:#f4a027; --fb:#1877f2; --zalo:#0068ff; --zalo-bar:#8c45e8;
  --shadow:0 2px 8px rgba(30,60,100,.04);
  --shadow-lg:0 14px 36px rgba(23,40,74,.14);
  --sidebar:208px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1420; --surface:#161d2b; --surface-2:#1b2434; --border:#273145;
    --text:#e6ebf4; --muted:#93a1b5; --primary:#5b7bf0; --primary-ink:#0b1020;
    --primary-soft:#1d2a4d; --success:#4cc38a; --success-soft:#12301f;
    --warning:#e0b155; --warning-soft:#3a2f12; --danger:#f0766a; --danger-soft:#3a1c18;
    --info:#5bb6e8; --info-soft:#122c3d; --green:#4cc38a; --orange:#e0b155;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;line-height:1.25}
h1{font-size:1.4rem}h2{font-size:1.15rem}h3{font-size:1rem}
small{color:var(--muted)}

/* layout shell */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;transition:transform .2s}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px 18px;font-weight:700;font-size:1.05rem;border-bottom:1px solid var(--border)}
.sidebar .brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#7a3df0);display:grid;place-items:center;color:#fff;font-weight:800}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text);font-weight:500}
.nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.active{background:var(--primary-soft);color:var(--primary)}
.nav .ico{width:20px;text-align:center;opacity:.85}
.nav .section{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:14px 12px 6px}
.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:12px 22px}
.topbar h1{margin:0;font-size:1.15rem}
.topbar .spacer{flex:1}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);cursor:pointer}
.content{padding:22px;max-width:1120px;width:100%}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:700}

/* cards + grid */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .card-h{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card .card-h h2,.card .card-h h3{margin:0}
.card .card-b{padding:18px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .n{font-size:1.9rem;font-weight:700;line-height:1}
.stat .l{color:var(--muted);font-size:.85rem;margin-top:6px}
.stat .t{font-size:1.4rem}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.b-draft{background:var(--surface-2);color:var(--muted)}
.b-pending_review,.b-needs_review,.b-queued,.b-pending,.b-pending_verify,.b-pending_group{background:var(--warning-soft);color:var(--warning)}
.b-approved,.b-running{background:var(--info-soft);color:var(--info)}
.agent-status{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--muted)}
.agent-status .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.agent-status.on .dot{background:var(--success);box-shadow:0 0 0 3px var(--success-soft);animation:pulse 2s infinite}
.agent-status.on{color:var(--success)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--success-soft)}50%{box-shadow:0 0 0 6px transparent}}
.b-scheduled{background:var(--primary-soft);color:var(--primary)}
.b-published,.b-done,.b-active{background:var(--success-soft);color:var(--success)}
.b-failed,.b-rejected,.b-error,.b-revoked,.b-disabled,.b-cancelled,.b-expired{background:var(--danger-soft);color:var(--danger)}
.b-publishing{background:var(--primary-soft);color:var(--primary)}
.b-waiting_review{background:var(--warning-soft);color:var(--warning)}
.b-drafting,.b-sending{background:var(--primary-soft);color:var(--primary)}
.b-partial{background:var(--info-soft);color:var(--info)}
.b-paused{background:var(--surface-2);color:var(--muted)}
.b-stopped{background:var(--danger-soft);color:var(--danger)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-weight:600;font-size:.9rem;cursor:pointer;font-family:inherit;transition:.12s}
.btn:hover{text-decoration:none;border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.success{background:var(--success);border-color:var(--success);color:#fff}
.btn.danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 45%,var(--border));color:var(--danger)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:.82rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:6px}
.input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:.95rem}
.textarea{min-height:180px;resize:vertical;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent);outline-offset:1px;border-color:var(--primary)}
.hint{color:var(--muted);font-size:.82rem;margin-top:5px}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.table th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.table tr:last-child td{border-bottom:none}
.table .muted{color:var(--muted)}
.table-wrap{overflow-x:auto}

/* flash */
.flash{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:14px;border:1px solid transparent;font-size:.92rem}
.flash.success{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 30%,transparent)}
.flash.error{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.flash.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}

/* misc */
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.page-head .spacer{flex:1}
.notice{background:var(--warning-soft);color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 30%,transparent);
  padding:12px 15px;border-radius:var(--radius-sm);font-size:.9rem}
.empty{text-align:center;color:var(--muted);padding:34px 18px}
.kv{display:flex;gap:8px;font-size:.88rem;padding:5px 0;border-bottom:1px dashed var(--border)}
.kv .k{color:var(--muted);min-width:130px}
.chat{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto;padding:4px}
.msg{max-width:78%;padding:10px 13px;border-radius:14px;font-size:.92rem;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--primary);color:var(--primary-ink);border-bottom-right-radius:4px}
.msg.agent{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.system{align-self:center;background:transparent;color:var(--muted);font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem}
.overlay{display:none}

/* auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 600px at 20% -10%,color-mix(in srgb,var(--primary) 18%,transparent),transparent),var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:28px}
.auth-card .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;margin-bottom:4px}
.auth-card .brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#7a3df0);display:grid;place-items:center;color:#fff}
.auth-card .sub{color:var(--muted);margin-bottom:20px;font-size:.9rem}

/* responsive */
@media (max-width:860px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-100%);width:260px}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .menu-btn{display:inline-block}
  .overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
  .content{padding:16px}
}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:10px}
.media-item{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--muted)}
.media-item img,.media-item video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2)}

/* Thêm/Sửa căn: ô kéo thả ảnh/video + xem trước trước khi lưu */
.media-drop{padding:12px;border:1px dashed color-mix(in srgb,var(--primary) 45%,var(--border));
  border-radius:var(--radius-sm);background:var(--surface-2)}
.media-drop.over{border-color:var(--primary);background:var(--primary-soft)}
.media-drop .hint{margin-top:8px}
.media-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.media-previews:not(:empty){margin-top:10px}
.media-pv{display:flex;flex-direction:column;gap:5px;min-width:0}
.media-pv img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.media-pv-file{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.8rem;font-weight:600}
.media-pv small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-pv .btn{justify-content:center}
.content{max-width:1280px;margin:0 auto}
.card{display:flex;flex-direction:column}
.card .card-h{min-height:58px;padding:12px 18px}
.card .card-h h2{font-size:1.02rem;font-weight:650}
.card .card-b{flex:1}
.stat{position:relative;overflow:hidden;padding:18px 20px}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--border)}
.grid.cols-4>.stat:nth-child(2)::before{background:var(--warning)}
.grid.cols-4>.stat:nth-child(3)::before{background:var(--primary)}
.grid.cols-4>.stat:nth-child(4)::before{background:var(--success)}
.stat .n{font-size:2rem;letter-spacing:-.02em}
.card .stat{background:var(--surface-2);box-shadow:none}
.card .stat::before{display:none}
.card .stat .n{font-size:1.6rem}
.empty{padding:28px 18px}
.kv{border:0;border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:10px 0}
.kv:last-child{border-bottom:0}
.kv .badge{flex-shrink:0}
.kv .muted{color:var(--muted)}
.topbar{min-height:62px}
.sidebar .brand{min-height:62px;padding:0 18px;gap:11px;font-size:1rem;letter-spacing:-.01em}
.sidebar .brand .logo{width:32px;height:32px;border-radius:9px;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 35%,transparent)}
.nav{padding:14px 12px;gap:3px}
.nav a{gap:11px;padding:9px 12px;font-size:.92rem;color:color-mix(in srgb,var(--text) 82%,var(--muted));transition:background .12s,color .12s}
.nav a:hover{color:var(--text)}
.nav a.active{font-weight:600;color:var(--primary)}
.nav .ico{width:20px;height:20px;display:grid;place-items:center;opacity:1;color:var(--muted);flex-shrink:0}
.nav a:hover .ico{color:var(--text)}
.nav a.active .ico{color:var(--primary)}
.nav .section{font-size:.7rem;font-weight:600;letter-spacing:.08em;padding:18px 12px 6px}
.btn{white-space:nowrap}
.menu-btn{font-size:1.05rem;line-height:1;padding:8px 11px}
@media (max-width:640px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .card .grid.cols-2:has(>.stat){grid-template-columns:repeat(2,1fr)}
  .grid{gap:12px}
  .stat{padding:14px 16px}
  .stat .n{font-size:1.6rem}
  .topbar{min-height:56px;padding:10px 16px;gap:10px}
  .topbar h1{font-size:1.05rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .card-h,.card .card-b{padding-left:16px;padding-right:16px}
  .page-head{flex-wrap:wrap}
  .page-head>.btn-row{flex:1 1 100%;flex-wrap:nowrap}
  .page-head>.btn-row .select{flex:1;min-width:0}
  .page-head>.btn{flex:1 1 100%;justify-content:center}
  .table th,.table td{padding:10px 8px;white-space:nowrap}
  .table td:first-child{white-space:normal;min-width:160px}
}
.grid>*{min-width:0}
.kv>span{min-width:0;overflow-wrap:anywhere}
.chat-box{height:340px;max-height:none;padding:4px 2px 8px}
.composer{display:flex;align-items:flex-end;gap:8px;margin-top:12px;padding:6px 6px 6px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.composer:focus-within{border-color:var(--primary)}
.composer textarea{flex:1;min-width:0;max-height:140px;padding:6px 0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.95rem;line-height:1.5;resize:none}
.composer .btn{padding:8px;border-radius:12px}
/* lịch tự động: form tạo/sửa + trang chi tiết một lịch (danh sách lịch nằm ở /jobs) */
.group-list{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px}
.group-row{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;border-radius:8px;font-size:.9rem;cursor:pointer}
.group-row:hover{background:var(--surface-2)}
.group-row>span{min-width:0;overflow-wrap:anywhere}
.check-row{display:flex;align-items:flex-start;gap:9px;padding:8px 0;font-size:.9rem;cursor:pointer}
.check-row+.check-row{border-top:1px dashed var(--border)}
.check-row .hint{margin-top:2px}
.day-row{display:flex;flex-wrap:wrap;gap:8px}
.day-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface-2);font-size:.86rem;font-weight:600;cursor:pointer}
.day-chip:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.time-row{display:inline-flex;align-items:center;gap:6px;margin:0 8px 8px 0}
.time-row .input{width:auto;min-width:120px}
.run-block{padding:14px 0;border-bottom:1px solid var(--border)}
.run-block:first-child{padding-top:0}
.run-block:last-child{border-bottom:0;padding-bottom:0}
.run-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
@media (max-width:640px){
  .group-list{max-height:220px}
  .run-head{gap:8px}
}
.msg.typing{display:flex;gap:4px;padding:13px 14px}
.msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typing 1s infinite}
.msg.typing span:nth-child(2){animation-delay:.15s}
.msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.kpi{display:flex;gap:14px;align-items:flex-start}
.kpi::before{display:none}
.kpi>div{flex:1;min-width:0}
.kpi .l{margin:0 0 6px}
.kpi .n small{font-size:1rem;font-weight:600;color:var(--muted)}
.kpi .n.txt{font-size:1.15rem;line-height:1.3;color:var(--success)}
.kpi.off .n.txt{color:var(--muted)}
.kpi .sub{margin-top:8px;font-size:.78rem;color:var(--muted)}
.kpi-ico{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
.kpi.warn .kpi-ico{background:var(--warning-soft);color:var(--warning)}
.kpi.ok .kpi-ico{background:var(--success-soft);color:var(--success)}
.kpi.off .kpi-ico{background:var(--surface-2);color:var(--muted)}
.bar{height:6px;margin-top:8px;overflow:hidden;border-radius:999px;background:var(--surface-2)}
.bar>span{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.timeline{margin:0;padding:0;list-style:none}
.timeline li{position:relative;display:flex;align-items:center;gap:12px;padding:12px 0 12px 20px;border-bottom:1px solid var(--border)}
.timeline li:last-child{border-bottom:0}
.timeline li::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:var(--primary-soft)}
.timeline li::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--primary)}
.tl-time{min-width:44px;font-weight:700}
.tl-body{flex:1;min-width:0;display:flex;flex-direction:column}
.tl-body small,.review small,.health small{font-size:.78rem;color:var(--muted)}
.ch-ico{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center}
.review{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--border)}
.review:first-child{padding-top:0}
.review:last-child{border-bottom:0;padding-bottom:0}
.review-body{flex:1;min-width:0}
.review-body a{font-weight:600}
.review-body p{margin:2px 0;overflow:hidden;color:var(--muted);font-size:.84rem;white-space:nowrap;text-overflow:ellipsis}
.review form{margin:0}
.chat-sm{height:210px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.8rem;cursor:pointer}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.health{display:flex;gap:12px;margin-bottom:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.health:last-child{margin-bottom:0}
.health-body{flex:1;min-width:0}
.health-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.health-q{display:flex;justify-content:space-between;margin-top:8px;font-size:.8rem}
.nav a.sub{padding:6px 12px 6px 43px;font-size:.86rem}
.nav a.sub.active{background:none;color:var(--primary);font-weight:600}
@media (max-width:640px){
  .review{flex-wrap:wrap}
}

/* ============ Giao diện theo bản thiết kế: sidebar, thanh trên, Tổng quan ============ */
.content{padding:16px}
.grid{gap:12px}

/* --- sidebar --- */
.sidebar .brand{min-height:72px;padding:0 16px;gap:10px;font-size:1rem;font-weight:700}
.sidebar .brand .logo{width:32px;height:32px;border-radius:9px;background:var(--primary);box-shadow:none;font-size:1.02rem}
.nav{padding:12px 10px;gap:2px}
.nav a{min-height:34px;padding:7px 10px;gap:10px;border-radius:8px;font-size:.875rem}
.nav .ico{width:18px;height:18px}
.nav .ico svg{width:18px;height:18px}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group>a .chev{margin-left:auto;display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.nav-kids{position:relative;margin:1px 0 3px 19px;padding-left:12px;display:flex;flex-direction:column;gap:1px}
.nav-kids::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--border)}
.nav a.sub{min-height:30px;padding:5px 10px;font-size:.83rem}
.nav a.sub.active{background:var(--primary-soft);color:var(--primary)}
.nav-admin{margin-top:auto;padding-top:10px;border-top:1px solid var(--border)}
.nav-admin .section{padding:2px 12px 6px}

/* --- thanh trên cùng --- */
.topbar{min-height:72px;padding:10px 16px;gap:10px;background:var(--surface);backdrop-filter:none}
.topbar-title{min-width:0}
.topbar h1{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.topbar-sub{margin:3px 0 0;font-size:.75rem;color:var(--muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .bell{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:var(--muted)}
.topbar .bell:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.topbar .bell .dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--danger);border:2px solid var(--surface)}
.user-menu{position:relative}
.user-menu>button{display:flex;align-items:center;gap:9px;min-height:40px;padding:4px 8px 4px 4px;
  border:1px solid transparent;border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer}
.user-menu>button:hover{background:var(--surface-2)}
.user-menu>button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.user-menu .avatar{width:32px;height:32px;font-size:.84rem;flex-shrink:0}
.user-menu .chev{display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.user-meta{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.25}
.user-meta .nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;font-weight:600}
.user-meta small{font-size:.72rem}
.user-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;padding:6px;z-index:50;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg)}
.user-pop[hidden]{display:none}
.user-pop form{margin:0}
.user-pop a,.user-pop button{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:8px 10px;
  border:0;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.user-pop a:hover,.user-pop button:hover{background:var(--surface-2);text-decoration:none}
.user-pop svg{color:var(--muted);flex-shrink:0}
.menu-btn{display:none;place-items:center;width:40px;height:40px;padding:0;border-radius:10px}

/* --- thẻ --- */
.card .card-h{min-height:52px;padding:10px 14px;gap:8px;flex-wrap:wrap}
.card .card-h h2{font-size:.95rem;font-weight:650}
.card .card-b{padding:14px}
.card-ico{display:grid;place-items:center;color:var(--primary);flex-shrink:0}

/* --- 4 ô chỉ số --- */
.kpi{min-height:100px;padding:14px 16px;gap:12px}
.kpi-ico{width:40px;height:40px;border-radius:10px}
.kpi-ico svg{width:20px;height:20px}
.kpi .l{margin:1px 0 3px;font-size:.75rem;font-weight:500}
.kpi .n{font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.kpi .n small{font-size:1.05rem}
.kpi .n.txt{font-size:1.15rem;font-weight:700}
.kpi .sub{margin-top:7px;font-size:.75rem}
.kpi .sub.dot-line{display:flex;align-items:center;gap:6px}
.kpi .sub .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
.kpi.ok .sub .dot{background:var(--green)}
.kpi.warn .kpi-ico{background:var(--warning-soft);color:var(--orange)}
.kpi.ok .kpi-ico{background:var(--success-soft);color:var(--green)}
.kpi-bar{display:flex;align-items:center;gap:8px;margin-top:9px}
.kpi-bar .bar{flex:1;margin:0}
.kpi-bar .pct{font-size:.72rem;font-weight:600;color:var(--muted)}
.bar{height:7px;background:color-mix(in srgb,var(--border) 60%,var(--surface))}

/* --- lịch chạy hôm nay --- */
.timeline li{gap:10px;padding:11px 0 11px 18px;border-bottom:0}
.timeline li::before{left:4px;width:2px;background:var(--border)}
.timeline li:first-child::before{top:50%}
.timeline li:last-child::before{bottom:50%}
.timeline li::after{width:10px;height:10px;margin-top:-5px;box-shadow:0 0 0 2px var(--surface)}
.tl-time{display:flex;flex-direction:column;min-width:44px;font-size:.84rem;font-weight:700}
.tl-time small{font-size:.7rem;font-weight:500}
.tl-thumb{width:72px;height:56px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--muted)}
.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tl-body{gap:5px;align-items:flex-start}
.tl-body a{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 8px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:600}
.pill>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill svg{flex-shrink:0}
.badge.ico::before{display:none}
.badge.ico svg{flex-shrink:0}
.b-upcoming{background:var(--surface-2);color:var(--muted)}

/* --- chờ bạn duyệt --- */
.review{gap:10px;align-items:flex-start;padding:12px 0}
.thumb{width:80px;height:60px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--muted)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.review-body a{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.review-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
.review-act{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* --- hỏi Agent --- */
.chat-sm{height:auto;min-height:92px;max-height:150px}
.msg.greet{max-width:100%;display:flex;gap:10px;padding:0;background:none;border:0;white-space:normal}
.bot-ava{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;
  background:var(--primary-soft);color:var(--primary)}
.greet-b{padding:10px 13px;border:1px solid var(--border);border-radius:14px;border-bottom-left-radius:4px;
  background:var(--surface-2);font-size:.85rem;line-height:1.55}
.chips{gap:8px;margin-top:12px}
.chip{padding:6px 11px;border-radius:8px;font-size:.76rem;background:var(--surface-2)}
.composer{min-height:48px;align-items:center;padding:5px 5px 5px 14px;border-radius:12px;background:var(--surface)}
.composer textarea{font-size:.88rem}
.composer .btn.primary{width:36px;height:36px;padding:0;border-radius:9px;justify-content:center}
.composer .btn.primary svg{width:18px;height:18px}

/* --- sức khỏe kết nối --- */
.health{gap:12px;margin:0;padding:14px 0;border:0;border-bottom:1px solid var(--border);border-radius:0}
.health:first-child{padding-top:0}
.health:last-child{border-bottom:0;padding-bottom:0}
.health .ch-ico{width:38px;height:38px}
.health-top strong{font-size:.9rem}
.health-q{margin-top:9px;font-size:.75rem;font-weight:600}
.health-q .q-l{font-weight:500;color:var(--muted)}
.health-bar{display:flex;align-items:center;gap:8px;margin-top:5px}
.health-bar .bar{flex:1;margin:0}
.health-bar .pct{font-size:.72rem;font-weight:600;color:var(--muted)}
.health .bar>span{background:var(--fb)}
.health.zalo .bar>span{background:var(--zalo-bar)}
.ch-ico svg{width:100%;height:100%;border-radius:50%}

/* --- thông báo gần đây --- */
.notif{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.notif:first-child{padding-top:0}
.notif:last-child{border-bottom:0;padding-bottom:0}
.notif>span{min-width:0;overflow-wrap:anywhere}
.notif .badge{max-width:48%;white-space:normal}
.notif .when{font-size:.74rem;color:var(--muted)}

/* --- màn hình nhỏ --- */
@media (max-width:1024px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  /* các cặp ô số nhỏ nằm trong thẻ vẫn để hai cột cho đỡ trống */
  .card .grid.cols-2:has(>.stat){grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .menu-btn{display:grid}
  .topbar{min-height:64px;padding:8px 12px}
}
@media (max-width:640px){
  .kpi{flex-direction:row;gap:10px;min-height:0;padding:12px 13px}
  .kpi-ico{width:36px;height:36px}
  .kpi .n{font-size:1.4rem}
  .kpi .n.txt{font-size:.98rem}
  .kpi .sub{font-size:.7rem}
  .topbar h1{font-size:1.05rem}
  .topbar-sub{display:none}
  .user-meta{display:none}
  .card .card-h,.card .card-b{padding-left:12px;padding-right:12px}
  .timeline li{flex-wrap:wrap;padding-left:16px}
  .tl-thumb{width:56px;height:44px}
  .tl-body{flex:1 1 100%;order:3}
  .timeline .badge{margin-left:auto}
  .thumb{width:64px;height:50px}
  .review-act{flex:1 1 100%;padding-left:74px}
  .review-act .btn,.review-act form{flex:1}
  .review-act .btn{width:100%;justify-content:center;min-height:40px}
  .chip{font-size:.74rem}
}
@media (max-width:640px){.btn,.topbar .bell,.topbar .user-menu>button,.topbar .menu-btn{min-height:40px}.topbar .bell,.topbar .menu-btn{min-width:40px}}

/* ============ Duyệt bài: hàng đợi dạng thẻ, dùng một tay ============ */
.undo-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--text);color:var(--bg);font-size:.88rem}
.undo-bar .btn{background:transparent;border-color:color-mix(in srgb,var(--bg) 45%,transparent);color:var(--bg)}
.undo-bar[hidden]{display:none}
.review-queue{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-items:start}
.post-card{overflow:hidden}
.post-card .card-h{gap:8px}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2)}
.seg button{padding:4px 11px;border:0;border-radius:999px;background:none;color:var(--muted);
  font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.preview{padding:10px 13px;border-radius:14px;background:var(--primary-soft);
  font-size:.9rem;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.preview.fbv{border-radius:10px;background:var(--surface-2)}
.preview[hidden]{display:none}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}
.thumb-sq{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border);
  border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:.8rem;font-weight:600}
.thumb-sq img{width:100%;height:100%;object-fit:cover;display:block}
.targets{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.targets .hint{margin:0}
.chips-t{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow-y:auto}
.chip-t{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);font-size:.8rem;cursor:pointer}
.chip-t:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}
.chip-t.off{opacity:.55;cursor:default}
.big-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:8px;margin-top:14px}
.big-row .btn{min-height:46px;justify-content:center;border-radius:12px;font-size:.92rem}
@media (max-width:640px){
  .review-queue{grid-template-columns:minmax(0,1fr)}
  .chips-t{max-height:none}
}

/* ============ Menu mới: nhóm "Thêm" thu gọn + thanh dưới đáy trên điện thoại ============ */
.nav-more{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.nav-more>summary{display:flex;align-items:center;gap:10px;min-height:34px;padding:7px 10px;border-radius:8px;
  color:var(--muted);font-size:.875rem;font-weight:500;cursor:pointer;list-style:none}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more>summary:hover{background:var(--surface-2);color:var(--text)}
.nav-more>summary .chev{margin-left:auto;display:grid;place-items:center}
.nav-more[open]>summary .chev{transform:rotate(180deg)}
.nav .cnt{margin-left:auto;padding:1px 7px;border-radius:999px;background:var(--danger);color:#fff;
  font-size:.7rem;font-weight:700;line-height:1.5}
.nav a.active .cnt{background:var(--danger)}
.tabbar{display:none}
@media (max-width:860px){
  .tabbar{position:fixed;inset:auto 0 0 0;z-index:34;display:grid;grid-template-columns:repeat(5,1fr);
    padding:6px 4px;padding-bottom:max(6px,env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--border)}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;
    color:var(--muted);font-size:.68rem;font-weight:600}
  .tabbar a:hover{text-decoration:none}
  .tabbar a.active{color:var(--primary)}
  .tabbar a .dot{position:absolute;top:0;right:22%;padding:0 5px;border-radius:999px;background:var(--danger);
    color:#fff;font-size:.6rem;font-weight:700}
  .content{padding-bottom:78px}
}

/* ============ Sửa theo bản thiết kế: thanh trên, Nhóm, Kho hàng ============ */
/* Nút Soạn bài trên thanh trên: ≤640px chỉ còn icon 40px để tiêu đề trang đủ chỗ. */
.topbar .new-post{flex-shrink:0}
@media (max-width:640px){
  .topbar .new-post{width:40px;min-width:40px;padding:0;gap:0;justify-content:center}
  .topbar .new-post .lbl{display:none}
}

/* --- một hàng gọn: ô tìm + chip lọc + chữ trạng thái --- */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tools>form{display:flex;flex:1 1 200px;min-width:150px;margin:0}
.tools>form .input{min-width:0}
.tools .hint{margin:0 0 0 auto;text-align:right}
.tools .chip-row{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:640px){
  .tools>form{flex:1 1 100%}
  .tools .hint{flex:1 1 100%;margin-left:0;text-align:left}
  .tools .chip-row{flex:1 1 100%}
}

/* --- công tắc bật/tắt: nút của form POST, không cần JS --- */
.sw-form{display:flex;align-items:center;margin:0;padding:8px 0}
.sw{width:42px;height:24px;padding:0;border:0;border-radius:999px;position:relative;flex-shrink:0;
  background:var(--primary);cursor:pointer}
.sw::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.sw.off{background:color-mix(in srgb,var(--muted) 55%,var(--border))}
.sw.off::after{right:auto;left:3px}
.sw:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nw{white-space:nowrap}

/* --- vai trò nhóm --- */
.b-chua_phan_loai{background:var(--warning-soft);color:var(--warning)}
.b-dich{background:var(--primary-soft);color:var(--primary)}
.b-nguon{background:var(--surface-2);color:var(--muted)}
.b-bo_qua{background:transparent;color:var(--muted)}

/* --- bảng Nhóm: đọc nhanh, sửa ở hàng mở thêm --- */
.table-wrap{max-width:100%}
.grp-table th{white-space:nowrap}
.grp-table tr td.c-name{min-width:190px}
.grp-table .c-name strong{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-table .c-name small{display:block;max-width:260px;font-size:.76rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-table .c-mem,.grp-table .c-role,.grp-table .c-last,.grp-table .c-stat,
.grp-table .c-sw,.grp-table .c-act{white-space:nowrap}
.grp-table .c-sw,.grp-table .c-act{width:1%}
.grp-table .c-rule{white-space:nowrap;font-size:.84rem}
.grp-table .c-note{max-width:220px;font-size:.84rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-table .c-sw .note{font-size:.8rem;color:var(--muted)}
.grp-table tr.edit-row>td{background:var(--surface-2)}
.grp-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;align-items:end}
.grp-edit label{display:block;margin-bottom:4px;font-size:.76rem;font-weight:600;color:var(--muted)}
/* Điện thoại: thẻ nhóm bố cục cố định — dòng 1 tên (cắt 2 dòng),
   dòng 2 vai trò + tình trạng bên trái, công tắc + Sửa luôn nằm bên phải. */
@media (max-width:640px){
  .table-wrap:has(> .grp-table){overflow-x:visible}
  .grp-table thead{display:none}
  .grp-table,.grp-table tbody,.grp-table tr,.grp-table td{display:block}
  .grp-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px;
    border-bottom:1px solid var(--border)}
  .grp-table tr:last-child{border-bottom:0}
  .grp-table tr td{padding:0;border:0;white-space:normal}
  .grp-table tr.grp-row td.c-name{order:1;flex:1 1 100%;min-width:0}
  .grp-table .c-name strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
    max-width:100%;white-space:normal;overflow:hidden}
  .grp-table .c-name small{max-width:100%}
  .grp-table tr.grp-row td.c-role{order:2;flex:0 0 auto}
  .grp-table tr.grp-row td.c-stat{order:3;flex:0 0 auto}
  .grp-table tr.grp-row td.c-sw{order:4;width:auto;margin-left:auto}
  .grp-table tr.grp-row td.c-sw .sw-form{padding:0}
  .grp-table tr.grp-row td.c-act{order:5;width:auto}
  .grp-table tr td.c-mem,.grp-table tr td.c-rule,.grp-table tr td.c-note,
  .grp-table tr.grp-row td.c-last{display:none}
  .grp-table tr.edit-row{display:block;padding:12px}
  .grp-table tr.edit-row>td{display:block}
  .sw{width:46px;height:28px}
  .sw::after{width:22px;height:22px}
}

/* --- phân trang: máy tính dùng số trang, điện thoại dùng "Xem thêm" --- */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 14px;border-top:1px solid var(--border)}
.pager .pages{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pager .pg{min-width:34px;justify-content:center}
.pager .pg.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.pager .more{display:none}
.pager .hint{margin:0 0 0 auto}
@media (max-width:640px){
  .pager{flex-direction:column;align-items:stretch}
  .pager .pages{display:none}
  .pager .more{display:flex;min-height:42px;justify-content:center}
  .pager .hint{margin:0;text-align:center}
}

/* --- bảng Kho hàng: cuộn ngang trong .table-wrap, điện thoại thành thẻ --- */
.stk-table th{white-space:nowrap}
.stk-table tr td.c-code{min-width:110px}
.stk-table .c-code small{display:block;font-size:.74rem}
.stk-table .c-type,.stk-table .c-area,.stk-table .c-price,.stk-table .c-legal,
.stk-table .c-status,.stk-table .c-run,.stk-table .c-act{white-space:nowrap}
.stk-table .c-loc{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-table .c-media{max-width:150px;font-size:.84rem;color:var(--muted);white-space:nowrap}
.stk-table .c-run{font-size:.84rem}
@media (max-width:640px){
  .stk-table thead{display:none}
  .stk-table,.stk-table tbody,.stk-table tr,.stk-table td{display:block}
  .stk-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:12px;
    border-bottom:1px solid var(--border)}
  .stk-table tr:last-child{border-bottom:0}
  .stk-table tr td{padding:0;border:0;white-space:normal}
  .stk-table tr td.c-code{order:1;flex:1 1 auto;min-width:0}
  .stk-table tr td.c-price{order:2}
  .stk-table tr td.c-status{order:3}
  .stk-table tr td.c-type,.stk-table tr td.c-loc,.stk-table tr td.c-area{order:4;font-size:.8rem;color:var(--muted)}
  .stk-table tr td.c-type::after,.stk-table tr td.c-loc::after{content:"·";margin-left:7px;color:var(--muted)}
  .stk-table tr td.c-legal,.stk-table tr td.c-media{display:none}
  .stk-table tr td.c-run{order:5;flex:1 1 100%;font-size:.78rem}
  .stk-table tr td.c-act{order:6;flex:1 1 100%}
  .stk-table .c-act .btn-row{justify-content:flex-start}
}
.nowrap{white-space:nowrap}

/* ============ Danh bạ: chọn người nhận có ảnh + tên + số điện thoại ============ */
.contact-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.contact{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);font-size:.88rem;cursor:pointer}
.contact:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.contact .ava{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;
  border-radius:50%;background:var(--surface-2);color:var(--muted);font-weight:700;font-size:.82rem}
.contact .ava img{width:100%;height:100%;object-fit:cover;display:block}
.contact strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.contact small{display:block;font-size:.76rem}
.contact input{flex-shrink:0}

/* ============ Lịch đăng: lưới ngày × khung giờ, điện thoại là dòng thời gian ============ */
.cal-wrap{overflow-x:auto}
.cal{display:grid;grid-template-columns:84px repeat(5,minmax(148px,1fr));min-width:840px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cal>div{min-height:74px;padding:8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cal .hd{min-height:auto;background:var(--surface-2);font-weight:700;font-size:.82rem}
.cal .hd small{display:block;font-weight:500;font-size:.72rem;overflow-wrap:anywhere}
.cal .hd.is-today{color:var(--primary)}
.cal .slot{display:flex;align-items:center;gap:6px;background:var(--surface-2);font-weight:700;font-size:.82rem}
.cal .slot .ch-ico{width:18px;height:18px}
.cell{display:flex;flex-direction:column;gap:4px}
.cell.over{background:var(--primary-soft)}
.ev{display:flex;flex-direction:column;padding:5px 7px;border-radius:8px;font-size:.75rem;
  background:var(--primary-soft);border-left:3px solid var(--zalo)}
.ev[draggable="true"]{cursor:grab}
.ev b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ev small{font-size:.7rem}
.ev.facebook{border-left-color:var(--fb)}
.ev.done{opacity:.65}
.ev.wait{background:var(--warning-soft)}
.ev.err{background:var(--danger-soft);border-left-color:var(--danger)}
.ev .mv{margin-top:4px}
.ev .mv>summary{color:var(--primary);font-size:.7rem;cursor:pointer;list-style:none}
.ev .mv>summary::-webkit-details-marker{display:none}
.ev .mv form{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ev .mv .select{width:auto;min-width:0;flex:1 1 68px;padding:4px 6px;font-size:.74rem}
.ev .mv .btn{padding:4px 8px;font-size:.74rem}
.sched-day{display:none}
/* Một hàng lọc duy nhất: kênh + Hôm nay/Mai/Tuần. Chọn ngày chỉ có nghĩa ở dạng dòng thời gian. */
.sched-filters .day-chips{display:none}
.rules-note{margin-bottom:10px}
.rules-note>summary{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:.84rem;
  font-weight:600;cursor:pointer;list-style:none}
.rules-note>summary::-webkit-details-marker{display:none}
.rules-note>summary .ico{display:grid;place-items:center}
.rules-note .hint{margin-top:6px}
@media (max-width:860px){
  .page-head>.btn-row.sched-filters{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .sched-filters .btn{flex-shrink:0}
  .sched-filters .day-chips{display:flex;flex-shrink:0;gap:8px}
}
.tl .tl-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
.tl .tl-row:last-child{border-bottom:0}
.tl .tl-row b{min-width:44px}
.tl-ev{display:block}
.tl-ev.done{color:var(--muted)}
.tl-ev.err{color:var(--danger)}
.tl-ev.wait{color:var(--warning)}
@media (max-width:860px){
  .cal-wrap{display:none}
  .sched-day{display:block}
}

/* ============ Việc hôm nay: hộp việc + đếm ngược tới khung kế tiếp ============ */
.grow{flex:1;min-width:0}
.next-slot{margin-bottom:12px}
.next-slot .card-b{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.clock{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1;flex-shrink:0;
  font-variant-numeric:tabular-nums}
.tasks{display:flex;flex-direction:column;gap:10px}
.task{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--surface);
  border:1px solid var(--border);border-left:4px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.task.e{border-left-color:var(--danger)}
.task.w{border-left-color:var(--warning)}
.task.i{border-left-color:var(--primary)}
.task-t{display:flex;align-items:flex-start;gap:8px}
.task-t b{font-size:.95rem}
.task-ico{display:grid;place-items:center;flex-shrink:0;color:var(--muted)}
.task.e .task-ico{color:var(--danger)}
.task.w .task-ico{color:var(--warning)}
.task.i .task-ico{color:var(--primary)}
.task form{margin:0}
.done-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:28px 18px;
  border-radius:var(--radius);background:var(--success-soft);color:var(--success);font-weight:600}
/* Hết việc: một dòng tóm tắt thay cho lưới thẻ rỗng. */
.day-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);font-size:.88rem;color:var(--muted)}
.day-summary .ico{display:grid;place-items:center;flex-shrink:0}
@media (max-width:640px){
  .clock{font-size:1.6rem}
  .next-slot .card-b{gap:10px}
  .task .btn-row .btn{flex:1 1 auto;min-height:40px;justify-content:center}
  .task .btn-row form{flex:1 1 auto}
  .task .btn-row form .btn{width:100%}
}

/* ============ Chat với Agent: một luồng liên tục, phiếu giao việc trong luồng ============ */
.agent-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px;align-items:start}
.chat-card{height:calc(100vh - 150px);min-height:420px;overflow:hidden}
.thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px}
.thread .msg{max-width:88%}
.thread .msg.system{align-self:stretch;max-width:100%;text-align:left}
.msg-t{white-space:pre-wrap;overflow-wrap:anywhere}
.msg-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;margin-top:8px}
.msg-media img,.msg-media video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2)}
.msg-task{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.msg-task form{margin:0}
.ticket{display:flex;flex-direction:column;gap:5px;margin-top:8px;padding:10px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text)}
.tk-h{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tk-r{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;font-size:.84rem}
.tk-r span{color:var(--muted)}
.tk-r b{overflow-wrap:anywhere}
.ticket .btn-row{margin-top:4px}
.ticket .hint{margin:4px 0 0}
.quick{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--border)}
.quick .chip{flex-shrink:0;white-space:nowrap}
.chat-compose{position:relative;display:flex;align-items:center;gap:6px;padding:8px 12px 12px}
.chat-compose .input{flex:1;min-width:0;border-radius:999px}
.chat-compose .attach{width:38px;padding:0;justify-content:center;border-radius:50%}
.chat-compose .attach-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.attach-list{position:absolute;left:58px;right:12px;bottom:-2px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mention{position:absolute;left:58px;bottom:54px;z-index:20;margin:0;padding:4px;max-height:210px;
  overflow-y:auto;list-style:none;min-width:220px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow-lg)}
.mention[hidden]{display:none}
.mention button{display:block;width:100%;padding:7px 10px;border:0;border-radius:8px;background:none;
  color:var(--text);font:inherit;font-size:.86rem;text-align:left;cursor:pointer}
.mention button:hover{background:var(--surface-2)}
.chat-side{display:flex;flex-direction:column}
@media (max-width:900px){
  .agent-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  /* Điện thoại: chat cao gần hết màn, ô nhắn dính đáy ngay trên thanh menu. */
  .chat-card{height:calc(100vh - 190px);border-radius:0;border-left:0;border-right:0;margin:0 -16px}
  .chat-compose{position:sticky;bottom:0;background:var(--surface);
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
  .chat-side{margin-top:12px}
}
@media (max-width:640px){
  .chat-card{margin:0 -12px}
  .thread .msg{max-width:94%}
}

/* ============ Khách hàng: một dòng một khách, dùng được bằng một tay ============ */
.lead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px;
  align-items:start;padding:12px 0;border-bottom:1px solid var(--border)}
.lead:first-child{padding-top:0}
.lead:last-child{border-bottom:0;padding-bottom:0}
.lead>*{min-width:0}
.lead b{font-size:.95rem}
.lead .badge{margin-left:6px}
.quote{font-size:.82rem;color:var(--muted);border-left:2px solid var(--border);padding-left:10px;
  overflow-wrap:anywhere}
.lead-act .btn-row{justify-content:flex-end}
.lead-act form{margin:0}
.lead-act .input{width:auto;min-width:0}
.lead-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.lead-form label{display:block;margin-bottom:4px;font-size:.76rem;font-weight:600;color:var(--muted)}
@media (max-width:900px){
  .lead{grid-template-columns:minmax(0,1fr);gap:8px}
  .lead-act .btn-row{justify-content:flex-start}
  .lead-act .btn{min-height:40px}
}
@media (max-width:640px){button.sw{position:relative}button.sw::before{content:"";position:absolute;inset:-8px -4px}}
.tl .now{display:flex;align-items:center;gap:8px;padding:6px 14px;color:var(--danger);font-size:.74rem;font-weight:700}
.tl .now::before,.tl .now::after{content:"";flex:1;height:2px;background:var(--danger);border-radius:2px}
.tl .now::before{flex:0 0 10px;height:10px;border-radius:50%}

/* ============ Tự động: 10 việc lặp lại của Agent, 3 nhóm thẻ ============ */
.jobs-group{margin:18px 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.job{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.job.soon{background:var(--surface-2)}
.job-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.job-h b{flex:1;min-width:0;font-size:.95rem}
.job-h .sw-form{padding:0}
.job-b{padding:12px 14px;display:flex;flex-direction:column}
.job-b .kv{font-size:.84rem;padding:4px 0}
.job-b .kv .k{min-width:120px}
.job-b .muted{color:var(--muted)}
.job-rules{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--border)}
.job-sub{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.job-rule{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:var(--surface-2);
  font-size:.84rem}
.job-rule small{display:block;font-size:.76rem}
.job-rule .btn{flex-shrink:0}
.job-act{margin-top:10px}
.job-edit{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.job-edit .field{margin-bottom:10px}
@media (max-width:640px){
  .jobs{grid-template-columns:minmax(0,1fr)}
  .job-b .kv{display:flex;justify-content:space-between;gap:10px}
  .job-b .kv .k{min-width:0}
  .job-act .btn{min-height:40px}
}

/* ============ Cài đặt: 4 tab chọn bằng ?tab= (không cần JS) ============ */
.tabs{flex:1;overflow-x:auto;padding-bottom:2px}
.tabs .btn{flex-shrink:0}
@media (max-width:640px){
  .page-head:has(.tabs){margin-bottom:14px}
  .tabs{gap:6px}
  .tabs .btn{min-height:38px}
}
.chat-card .msg{white-space:normal}
.chat-card .msg-t{display:block;white-space:pre-wrap}
.chat-card .msg .ticket{margin-top:10px}
.chat-card .ticket .badge{align-self:flex-start;margin-top:4px}
.chat-card .quick{scrollbar-width:none}
.chat-card .quick::-webkit-scrollbar{display:none}
.chat-card .attach{display:inline-grid;place-items:center;flex-shrink:0;width:40px;height:40px;padding:0;border-radius:50%}
.chat-card .chat-compose{margin:8px 12px 12px;padding:5px;border:1px solid var(--border);border-radius:26px;background:var(--surface-2);align-items:center;transition:border-color .15s,box-shadow .15s,background .15s}
.chat-card .chat-compose:focus-within{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.chat-card .chat-compose .input,.chat-card .chat-compose .input:focus{min-width:0;padding:8px 4px;border:0;background:transparent;box-shadow:none;outline:0}
.chat-card .chat-compose .attach{width:38px;height:38px;border:0;background:transparent;color:var(--muted)}
.chat-card .chat-compose .attach:hover{background:var(--primary-soft);color:var(--primary)}
.chat-card .chat-compose .btn.primary{height:38px;padding:0 18px;border-radius:999px}
.chat-card .chat-compose .attach-list{flex-basis:100%;padding:0 10px}
.chat-card .chat-compose .attach-list:not(:has(*)){display:none}
@media (max-width:860px){
  input,select,textarea,.input,.select,.textarea{font-size:16px}
}

.fab-chat{position:fixed;right:20px;bottom:20px;z-index:40;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 40%,transparent);cursor:pointer;transition:transform .15s}
.fab-chat:hover{transform:scale(1.06)}
.fab-chat:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 40%,transparent);outline-offset:3px}
.fab-chat::after{content:"";position:absolute;top:3px;right:3px;width:12px;height:12px;border:2px solid var(--surface);border-radius:50%;background:#22c55e}
.fab-tip{position:absolute;right:66px;padding:6px 10px;border-radius:8px;background:var(--text);color:var(--surface);font-size:.8rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.fab-chat:hover .fab-tip{opacity:1}
.fab-open .fab-chat .fab-tip{display:none}
.fab-panel{position:fixed;right:20px;bottom:88px;z-index:40;display:flex;flex-direction:column;width:380px;max-width:calc(100vw - 32px);height:min(560px,calc(100vh - 120px));overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 18px 48px rgba(15,23,42,.22)}
.fab-panel[hidden]{display:none}
.fab-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.fab-head strong{flex:1}
.fab-head a{font-size:.8rem}
.fab-x{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.fab-x:hover{background:var(--surface-2)}
.fab-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.fab-load{margin:auto 0;text-align:center;font-size:.85rem}
.fab-quick{display:flex;gap:6px;overflow-x:auto;padding:6px 12px 0;scrollbar-width:none}
.fab-quick::-webkit-scrollbar{display:none}
.fab-quick:empty{display:none}
.fab-quick .chip{flex-shrink:0}
@media (max-width:860px){
  .fab-chat{right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
  .fab-tip{display:none}
  .fab-panel{inset:auto 0 0 0;width:100%;max-width:none;height:calc(100dvh - 56px);border-radius:16px 16px 0 0;z-index:50}
  .fab-open .fab-chat{display:none}
}

/* ===== Gói dịch vụ (/billing) — thêm ở CUỐI tệp, sau phần Chat và nút nổi ===== */
.flash.warn{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}
.flash a{color:inherit;font-weight:700;text-decoration:underline}
.b-paid{background:var(--success-soft);color:var(--success)}
.b-hot{background:var(--primary-soft);color:var(--primary)}

.plan-chip{display:flex;flex-direction:column;gap:1px;margin:10px 10px 14px;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font-size:.8rem}
.plan-chip:hover{border-color:var(--primary);text-decoration:none}
.plan-chip .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-chip small{color:var(--muted)}
.plan-chip.warn{border-color:color-mix(in srgb,var(--warning) 45%,transparent);background:var(--warning-soft)}
.plan-chip.warn small{color:var(--warning)}
.plan-chip.off{border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:var(--danger-soft)}
.plan-chip.off small{color:var(--danger)}

.bill-plan{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bill-plan-name{font-size:1.2rem}
.bill-plan-price{color:var(--muted);font-size:.86rem}
.bill-use{margin-bottom:14px}
.bill-use:last-child{margin-bottom:0}
.bill-use-h{display:flex;align-items:baseline;gap:8px}
.bill-use-h span{flex:1;min-width:0}
.bill-use.warn .bar>span{background:var(--orange)}
.bill-use.bad .bar>span{background:var(--danger)}
.bill-use.bad .bill-use-h strong{color:var(--danger)}

.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.plan-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface-2)}
.plan-card.hot{border-color:var(--primary)}
.plan-card.now{background:var(--primary-soft)}
.plan-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan-card-h strong{flex:1;min-width:0}
.plan-price{font-size:1.3rem;font-weight:700}
.plan-price small{font-size:.78rem;font-weight:400;color:var(--muted)}
.plan-feats{margin:0;padding-left:18px;color:var(--muted);font-size:.84rem}
.plan-feats li{margin:2px 0}
.plan-card .btn{margin-top:auto;justify-content:center}

.bill-months{max-height:none}
.bill-quote td strong{white-space:nowrap}
.bill-qr{display:grid;place-items:center;padding:8px 0 14px}
.bill-qr img{max-width:100%;height:auto;border-radius:var(--radius-sm);background:#fff}
.bill-copy{display:flex;flex-direction:column;gap:8px}
.bill-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-2)}
.bill-row .k{color:var(--muted);font-size:.82rem;min-width:110px}
.bill-row strong{flex:1;min-width:0;overflow-wrap:anywhere}
.bill-done h2{margin-bottom:10px}

@media (max-width:860px){
  .bill-top,.bill-pay{grid-template-columns:1fr}
  .plan-cards{grid-template-columns:1fr}
  .plan-chip{margin:8px 10px 10px}
  .bill-qr img{width:100%;max-width:320px;height:auto}
  .bill-row{flex-wrap:wrap}
  .bill-row .k{min-width:0;flex-basis:100%}
  .bill-row .btn.sm{min-height:42px;padding:0 16px}
}

/* --- /admin/orders: xác nhận tay, gắn giao dịch vào đơn --- */
.bill-inline{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.bill-inline:last-child{margin-bottom:0}
.bill-inline .input{width:160px;padding:5px 8px}
.bill-inline .btn{white-space:nowrap}
.bill-admin-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.bill-admin-form .field{flex:1;min-width:180px;margin:0}
.bill-admin-form .btn-row{flex-basis:100%}
@media (max-width:860px){
  .bill-inline{flex-wrap:wrap}
  .bill-inline .input{width:100%}
}

/* --- Khách hàng (/admin/companies): dải số liệu, bộ lọc, dòng bấm được --- */
.crm-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.crm-kpi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.crm-kpi:hover{text-decoration:none;border-color:var(--primary)}
.crm-kpi .k{color:var(--muted);font-size:.76rem;line-height:1.3}
.crm-kpi strong{font-size:1.2rem}
.crm-kpi.warn strong{color:var(--warning)}
.crm-kpi.bad strong{color:var(--danger)}
.crm-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.crm-filters .field label{display:block}
.crm-new>summary{cursor:pointer;padding:14px 18px;font-weight:600}
.crm-new[open]>summary{border-bottom:1px solid var(--border)}
.crm-table tr[data-row-href]{cursor:pointer}
.crm-table tr[data-row-href]:hover{background:var(--surface-2)}
@media (max-width:860px){
  .crm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-filters .field,.crm-filters .btn-row{flex:1 1 100%}
}

/* --- Hồ sơ khách hàng (/admin/companies/{id}): việc nhanh, ghi chú nội bộ --- */
.crm-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--border)}
.crm-act .k{color:var(--muted);font-size:.82rem;flex-basis:100%}
.crm-act .input{width:auto;flex:1;min-width:140px;padding:5px 8px}
.crm-act .select{padding:5px 8px}
.crm-act .btn{white-space:nowrap}
.crm-note{padding:8px 0;border-top:1px solid var(--border)}
.crm-note:first-of-type{margin-top:4px}

/* --- Đang xem thay khách: thanh dính trên cùng, hiện ở mọi trang --- */
.imp-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 16px;background:var(--warning-soft);color:var(--warning);
  border-bottom:1px solid var(--border);font-size:.88rem}
.imp-bar .who{flex:1;min-width:0}
.imp-bar small{color:inherit;opacity:.8}
.imp-bar form{margin:0}

/* --- /register: ô bẫy chống bot — người thật không thấy, không chạm vào được --- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:860px){
  .crm-act .input,.crm-act .select,.crm-act .btn{flex:1 1 100%;width:100%}
}

/* --- Cài đặt hệ thống (/admin/settings): biểu mẫu nhiều ô, mỗi thẻ một nút Lưu --- */
.set-form .field{margin-bottom:12px}
.set-form .field .hint{display:block;margin-top:4px}
.set-upper{text-transform:uppercase}
/* Hàng nút "việc nhanh": mỗi nút là một form POST riêng nên phải tự xếp hàng. */
.set-acts{display:flex;flex-wrap:wrap;gap:8px}
.set-acts form{margin:0}
@media (max-width:860px){
  .set-acts form,.set-acts .btn{flex:1 1 100%;width:100%}
}

/* --- Khối liên hệ hỗ trợ thật (views/partials/contact.php) --- */
.contact-block{margin-top:10px;font-size:.88rem}
.contact-block .ttl{color:var(--muted);font-size:.8rem;margin-bottom:6px}
.contact-block ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.contact-block li{display:flex;gap:8px;align-items:baseline}
.contact-block .lbl{color:var(--muted);min-width:68px}
.contact-block .hint{margin-top:6px}
.contact-block.compact{margin-top:8px}
.contact-block.compact .lbl{min-width:56px}

/* --- Thanh bên: mục Hỗ trợ (chỉ hiện khi admin đã khai liên hệ) --- */
.help-chip{display:flex;align-items:baseline;gap:8px;margin:0 10px 14px;padding:9px 11px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);
  color:var(--text);font-size:.8rem}
.help-chip:hover{border-color:var(--primary);text-decoration:none}
.help-chip .nm{font-weight:700}
.help-chip small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Cài đặt hệ thống → Ngành nghề: bảng mẫu ngành + xem trước mẫu bài --- */
.set-sub{margin:18px 0 8px;font-size:.92rem;font-weight:700}
.set-prev{margin:0;padding:10px 12px;min-height:140px;white-space:pre-wrap;word-break:break-word;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);
  font-size:.86rem;line-height:1.55}
.table tr.is-on td{background:var(--surface-2)}
.job-h{flex-wrap:wrap;row-gap:6px}
.job-h b{flex:1 1 160px}
.job-h .badge{white-space:nowrap}

/* ============ Bố cục theo ngành (menu + thanh dưới đáy) ============ */
/* Chip ngành dưới tên site, tiêu đề nhóm trong menu, mục "Sắp có" (không bấm được). */
.ind-chip{display:flex;align-items:center;gap:6px;margin:10px 10px 0;padding:5px 10px;min-width:0;
  border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:.74rem;font-weight:600}
.ind-chip svg{flex-shrink:0}
.nav-grp{padding:14px 12px 5px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);min-width:0;overflow-wrap:anywhere}
.nav-soon{display:flex;align-items:center;gap:11px;min-height:34px;padding:7px 10px;min-width:0;
  border-radius:8px;color:var(--muted);font-size:.875rem}
.nav-soon .ico{display:grid;place-items:center;width:18px;height:18px;flex-shrink:0}
.nav-soon .soon{margin-left:auto}
.soon{padding:1px 7px;border-radius:999px;background:var(--warning-soft);color:var(--warning);
  font-size:.66rem;font-weight:700;line-height:1.6;white-space:nowrap}
/* Nút "Thêm" của thanh dưới đáy: trông y như một mục, mở menu ☰ đang có. */
.tabbar .more-tab{display:none}
@media (max-width:860px){
  .tabbar .more-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:5px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:.68rem;font-weight:600;
    cursor:pointer}
  .tabbar a,.tabbar .more-tab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding-left:2px;padding-right:2px}
}

/* ============ Trang chủ theo ngành: ô số liệu + hai khối ============ */
.home-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.home-kpi{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text)}
.home-kpi:hover{border-color:var(--primary);text-decoration:none}
.home-kpi .ic{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:10px;
  background:var(--primary-soft);color:var(--primary)}
.home-kpi .ic.g{background:var(--success-soft);color:var(--success)}
.home-kpi .ic.o{background:var(--warning-soft);color:var(--warning)}
.home-kpi .ic.r{background:var(--danger-soft);color:var(--danger)}
.home-kpi .tx{min-width:0}
.home-kpi b{display:block;font-size:1.3rem;line-height:1.2}
.home-kpi .tx>span{display:block;color:var(--muted);font-size:.76rem;overflow-wrap:anywhere}
.home-row{margin-bottom:12px;align-items:start}
.home-time{width:46px;flex-shrink:0;color:var(--primary);font-weight:700}
.home-table th,.home-table td{padding:7px 12px}
@media (max-width:860px){
  .home-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .home-kpi{padding:10px}
  .home-kpi .ic{width:32px;height:32px}
  .home-kpi b{font-size:1.1rem}
}

/* ============ Kho hàng: lưới ảnh (bán lẻ, ăn uống) và danh sách (spa, dịch vụ…) ============ */
.stk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.stk-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.stk-card .im{display:grid;place-items:center;height:104px;background:var(--surface-2);overflow:hidden}
.stk-card .im img{width:100%;height:100%;object-fit:cover}
.stk-card .im .no-im{color:var(--muted);font-size:.72rem}
.stk-card .bx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 10px;min-width:0}
.stk-card .nm{font-weight:600;font-size:.86rem;min-width:0;overflow-wrap:anywhere}
.stk-card .pr{color:var(--primary);font-weight:700}
.stk-card .st{color:var(--muted);font-size:.74rem;min-width:0;overflow-wrap:anywhere}
.stk-card .st.low{color:var(--danger);font-weight:700}
.stk-card .btn-row{margin-top:4px;flex-wrap:wrap}
.stk-list{display:flex;flex-direction:column}
.stk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid var(--border)}
.stk-row:last-child{border-bottom:0}
.stk-row .pr{color:var(--primary);font-weight:700}
.stk-row .btn-row{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:860px){
  .stk-grid{grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .stk-card .im{height:88px}
  .stk-row{padding:10px 12px}
}

/* Hàng nút đổi kiểu hiển thị Kho hàng (chỉ hiện với ngành không xem dạng bảng). */
.tools .stk-view{margin-left:auto}
@media (max-width:860px){.tools .stk-view{margin-left:0}}
/* Máy tính: khối trái rộng hơn khối phải đúng như bản thiết kế (điện thoại vẫn một cột). */
@media (min-width:861px){.grid.cols-2.home-row{grid-template-columns:1.35fr 1fr}}
.chat-card .chat-compose .btn.primary.send{width:38px;padding:0;justify-content:center;border-radius:50%;flex:none}
.chat-card .chat-compose .btn.primary.send svg{margin-left:-2px}
.fab-form .attach{flex:none;cursor:pointer}
.fab-form{flex-wrap:wrap}
.fab-form .attach-list{order:9;flex-basis:100%;padding:0 10px}
.fab-chat{border-radius:16px;animation:fab-sway 4s ease-in-out infinite}
.fab-chat:hover,.fab-chat[aria-expanded="true"]{animation:none}
.fab-chat::after{top:-3px;right:-3px}
.fab-eyes{transform-box:fill-box;transform-origin:center;animation:fab-blink 4s infinite}
@keyframes fab-sway{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(0,-4px) rotate(-4deg)}50%{transform:translate(0,0) rotate(0)}75%{transform:translate(0,-4px) rotate(4deg)}}
@keyframes fab-blink{0%,44%,50%,94%,100%{transform:scaleY(1)}47%,97%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.fab-chat,.fab-eyes{animation:none}}
.chat-card .chat-compose{border-radius:12px;padding-left:10px}
.chat-card .chat-compose .attach,.chat-card .chat-compose .btn.primary.send{border-radius:9px}
.fab-panel.chat-card{margin:0}

/* ============ Đơn hàng (bán lẻ / ăn uống): một dòng một đơn, điện thoại xếp thành thẻ ============ */
.ord{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,auto);
  gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--border)}
.ord:first-child{padding-top:0}
.ord:last-child{border-bottom:0;padding-bottom:0}
.ord>*{min-width:0}
.ord b{font-size:.95rem}
.ord .badge{margin-left:6px}
.ord-items{overflow-wrap:anywhere}
.ord-sum{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ord .pr,.ord-total .pr{color:var(--primary);font-weight:700}
.ord-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.ord-flow .st{padding:3px 10px;border:1px solid var(--border);border-radius:999px;font-size:.78rem;
  color:var(--muted);min-width:0;overflow-wrap:anywhere}
.ord-flow .st.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:700}
.ord-table td{vertical-align:middle}
.ord-table .input{min-width:0}
.ord-total{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;
  border-top:1px solid var(--border)}
.ord-total .spacer{flex:1}
@media (max-width:900px){
  .ord{grid-template-columns:minmax(0,1fr);gap:6px}
  .ord-sum{align-items:flex-start}
  .ord-total .hint{flex-basis:100%;text-align:left}
}
.page-head>.btn-row.ord-tabs{min-width:0}
@media (max-width:860px){.page-head>.btn-row.ord-tabs{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.page-head>.btn-row.ord-tabs .btn{flex:none}}

/* Màn chuyển khoản: số tiền là mã nhận diện đơn, nên phải là thứ nổi nhất trên màn. */
.bill-amount{margin-bottom:12px;padding:12px;border:1px solid var(--primary);border-radius:var(--radius-sm);
  background:var(--primary-soft)}
.bill-amount p{margin:0 0 8px}
.bill-amount-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bill-amount-row strong{font-size:1.5rem;line-height:1.2;min-width:0;overflow-wrap:anywhere}
@media (max-width:900px){
  .bill-amount-row strong{flex-basis:100%}
  .bill-amount-row .btn.sm{min-height:42px;padding:0 16px}
}
.bm-adv{margin:6px 0 14px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px}
.bm-adv summary{cursor:pointer;color:var(--muted);font-size:.9rem}
.bm-adv[open] summary{margin-bottom:10px}
.bp-status{font-size:.9rem;line-height:1.6;margin:8px 0}
.bp-ok{color:var(--success,#15803d);font-weight:600}
.bp-bad{color:var(--danger,#b91c1c)}

/* Đề xuất của Agent (/suggestions) */
.sugg-list{display:grid;gap:12px}
.sugg .sugg-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sugg .sugg-h b{font-weight:650}
.sugg-quote{margin:10px 0 6px;padding:10px 12px;background:var(--surface-2);border-left:3px solid var(--border);border-radius:6px;white-space:normal;overflow-wrap:anywhere}
.sugg-form{display:grid;gap:8px;margin-top:10px}
.sugg-form textarea{width:100%;min-height:72px;resize:vertical}
.job-sugg{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sugg-post{margin-top:8px;font-size:.84rem;overflow-wrap:anywhere}
.sugg-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}

/* ============ Kết quả đăng theo ngày (trang chủ) + bảng căn × nhóm ============ */
.day-results{margin-bottom:12px}
.dr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dr-item{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text)}
.dr-item:hover{border-color:var(--primary);text-decoration:none}
.dr-item .ic{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;
  background:var(--primary-soft);color:var(--primary)}
.dr-item .ic.g{background:var(--success-soft);color:var(--success)}
.dr-item .ic.o{background:var(--warning-soft);color:var(--warning)}
.dr-item .ic.r{background:var(--danger-soft);color:var(--danger)}
.dr-item b{display:block;font-size:1.25rem;line-height:1.2}
.dr-item .tx>span{display:block;color:var(--muted);font-size:.76rem}
.table.board th{text-transform:none;letter-spacing:0;min-width:120px;vertical-align:bottom}
.table.board td{vertical-align:top}
.board-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0}
.ev.pend{background:var(--warning-soft)}
.tl-ev.pend{color:var(--warning)}
@media (max-width:860px){.dr-grid{grid-template-columns:1fr 1fr;gap:8px}.dr-item{padding:8px}}