/* Lyly Command Center — overrides nhỏ trên Tailwind CDN */
:root { color-scheme: light; }
html, body { height: 100%; }
body { margin: 0; }
/* AI-MARK[QAI-UI:lyly-modal-scroll-lock] 2026-07-13 09:59 (GMT+7) — khoá scroll màn chính khi modal/confirm Lyly đang mở; chỉ modal/card tự cuộn để user không lạc vị trí nền. | rel: lyly.js initModalScrollLock, annOpenSendConfirm */
body.lyly-modal-lock {
  overflow: hidden;
  overscroll-behavior: contain;
}
body.lyly-modal-lock #lylyMainCol {
  overscroll-behavior: contain;
}

/* scrollbars gọn */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* AI-MARK[QAI-UI:lyly-shell-polish] 2026-07-03 11:05 (GMT+7) — ẩn scrollbar document, căn topbar sát phải và cho search vào vị trí nút back cũ; dùng CSS riêng để tránh Tailwind purge | rel: lyly.js renderTopbar, UI-L4-Lyly */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* sidebar trái: ẩn HẲN thanh cuộn (vẫn cuộn được) */
#lylySidebar, #lylySidebar nav { scrollbar-width: none; -ms-overflow-style: none; }
#lylySidebar::-webkit-scrollbar, #lylySidebar nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Sidebar rail: thu gọn 4rem, HOVER mở rộng 16rem (overlay, không đẩy nội dung) ── */
.lyly-rail { width: 4rem; transition: width .2s ease; }
.lyly-rail:hover { width: 16rem; box-shadow: 12px 0 40px rgba(2,6,23,.4); }
.lyly-rail nav { overflow-x: hidden; }
.lyly-rail .lyly-navtext, .lyly-rail .lyly-group,
.lyly-rail .lyly-brandtext, .lyly-rail .lyly-foot {
  opacity: 0; white-space: nowrap; overflow: hidden;
  transition: opacity .12s ease; pointer-events: none;
}
.lyly-rail:hover .lyly-navtext, .lyly-rail:hover .lyly-group,
.lyly-rail:hover .lyly-brandtext, .lyly-rail:hover .lyly-foot {
  opacity: 1; pointer-events: auto;
}

/* AI-MARK[QAI-UI:lyly-ia-ainative] 2026-07-03 15:38 (GMT+7) — brand mark sidebar dùng logo Quik thật; riêng Lyly-only disable link về Platform bằng .lyly-brand-logo-wrap--locked | rel: lyly.js renderSidebar, QAI-AUTH:lyly-only-user, /admin/index.html */
.lyly-brand-logo-wrap {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .22);
  transition: width .2s ease;
}
.lyly-brand-logo {
  width: 84%;
  height: 84%;
  object-fit: contain;
}
.lyly-brand-logo-wrap:hover { box-shadow: 0 10px 22px rgba(2, 6, 23, .28); }
.lyly-brand-logo-wrap:focus-visible { outline: 2px solid #FF6B2B; outline-offset: 2px; }
.lyly-brand-logo-wrap--locked { cursor: default; pointer-events: none; opacity: .92; }
.lyly-brand-logo-wrap--locked:hover { box-shadow: 0 8px 18px rgba(2, 6, 23, .22); }
.lyly-rail:hover .lyly-brand-logo-wrap { width: 5.75rem; }
.lyly-rail:hover .lyly-brand-logo { width: 88%; }

.lyly-topbar-inner {
  padding-left: 1.25rem;
  padding-right: .75rem;
}
@media (min-width: 640px) {
  .lyly-topbar-inner {
    padding-left: 2rem;
    padding-right: .875rem;
  }
}

/* AI-MARK[QAI-UI:lyly-notif-bell] 2026-07-03 11:05 (GMT+7) — chốt style nút chuông/badge bằng CSS riêng để icon không mất và số nằm đúng vòng tròn | rel: lyly.js renderTopbar/wireNotifBell */
#lylyNotifBell {
  color: #64748b;
}
#lylyNotifBell:hover {
  color: #FF6B2B;
}
#lylyNotifBell svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
}
#lylyAccountBtn {
  margin-right: 0;
}

/* Badge chuông: chốt hình học bằng CSS riêng để số luôn nằm đúng trong vòng tròn. */
#lylyNotifBadge {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 9999px;
  background: #FF6B2B;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 7px rgba(255, 107, 43, .35);
}
#lylyNotifBadge.hidden { display: none; }

/* nav item active */
.lyly-nav-item.active { background: rgba(255,107,43,.14); color: #fff; }
.lyly-nav-item.active .lyly-nav-ico { color: #FF6B2B; }

/* GĐ3-UI (UI-B) FULL-WIDTH: gutter đồng nhất topbar/subnav/main (20px mobile → 32px ≥640px). Viết tay purge-safe:
   sm:px-8 KHÔNG có trong lyly-tailwind.css (prebuilt) → dùng class này thay vì Tailwind arbitrary/purged. | rel: index.html #lylyMain, lyly.js renderSubnav/topbar */
.lyly-shell-x { padding-left: 1.25rem; padding-right: 1.25rem; }
.lyly-page { padding: 1.25rem; }
@media (min-width: 640px) {
  .lyly-shell-x { padding-left: 2rem; padding-right: 2rem; }
  .lyly-page { padding: 2rem; }
}

/* fade-in tab */
.lyly-pane { animation: lylyfade .22s ease; }
@keyframes lylyfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* chat bubbles */
.lyly-bubble { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

/* ── AUTO-FIT ô hiển thị nội dung (kiểu Claude) — ô cao dần theo nội dung tới ~50% màn hình rồi CUỘN.
   Áp toàn cục: mọi ô kết quả/nội dung (.lyly-bubble) + textarea nhập + utility .lyly-autofit. Sizing
   ở lyly.css (purge-safe, KHÔNG dùng max-h-[..vh] Tailwind arbitrary bị purge). Full-width — không đụng shell. */
.lyly-bubble { max-height: 50vh; overflow-y: auto; overflow-x: hidden; }
/* Textarea nhập: JS tự cao dần theo dòng (lylyAutoGrow) tới trần rồi cuộn; CSS chốt trần + tắt kéo tay. */
#lylyMain textarea, #lylyModalHost textarea { max-height: 50vh; overflow-y: auto; resize: none; }
/* Utility cho ô nội dung KHÔNG phải .lyly-bubble (preview/list dài) muốn cùng hành vi. */
.lyly-autofit { max-height: 50vh; overflow-y: auto; overflow-x: hidden; }
/* Ô nội dung trong THÂN modal đã cuộn (.lyly-modal-body) → bỏ trần 50vh để tránh cuộn-lồng-cuộn khó chịu. */
.lyly-modal-body .lyly-bubble { max-height: none; overflow-y: visible; }

/* AI-MARK[QAI-UI:lyly-youtube-hint] 2026-07-09 20:35 (GMT+7) — hint nhỏ dưới ô nội dung khi phát hiện link YouTube (composer Bước 2 + popup Chỉnh sửa thông báo); ẩn qua [hidden], KHÔNG chặn gửi | rel: lylyRenderYtHint, acwRenderStep2, openAnnEditModal */
.lyly-yt-hint { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #fff7f5; border: 1px solid #ffd9c6; font-size: 12px; color: #9a4a1f; }
.lyly-yt-hint[hidden] { display: none; }
.lyly-yt-hint img { width: 40px; height: 24px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #0f172a; }
.lyly-yt-hint span { line-height: 1.4; }

/* typing dots */
.lyly-dot { animation: lylyblink 1.2s infinite both; }
.lyly-dot:nth-child(2) { animation-delay: .2s; }
.lyly-dot:nth-child(3) { animation-delay: .4s; }
@keyframes lylyblink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* line clamp helper */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Birthday: dải tháng cuộn ngang, ẩn thanh cuộn */
.lyly-monthstrip { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.lyly-monthstrip::-webkit-scrollbar { height: 0; display: none; }

/* ── AI-MARK[QAI-UI:lyly-knowledge] 2026-06-30 08:41 (GMT+7) — Kho tri thuc tab CSS: stats strip, platform chips, dropzone, ingest bar, badges | rel: UI-L4-Lyly, lyly.js viewKnowledge */

/* Stats strip */
.kb-stats-strip { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.kb-stat { flex:1 1 100px; display:flex; flex-direction:column; gap:2px; align-items:center; padding:10px 12px; border-radius:16px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(2,6,23,.06); }
.kb-stat-val { font-size:1.5rem; font-weight:800; color:#0f172a; line-height:1; }
.kb-stat-lbl { font-size:11px; color:#94a3b8; font-weight:500; text-align:center; }

/* Grounding control bar */
.kb-grounding-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 14px; margin-bottom:14px; border-radius:16px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(2,6,23,.06); }

/* Ingest bar */
.kb-ingest-bar { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 10px; }
.kb-ingest-btn { display:inline-flex; align-items:center; gap:6px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; color:#334155; font-size:13px; font-weight:600; padding:8px 14px; cursor:pointer; transition:border-color .15s, color .15s, box-shadow .15s; box-shadow:0 1px 2px rgba(2,6,23,.05); }
.kb-ingest-btn:hover:not(:disabled) { border-color:#FF6B2B; color:#FF6B2B; }
.kb-ingest-btn--disabled, .kb-ingest-btn:disabled { opacity:.5; cursor:not-allowed; }
.kb-soon-badge { display:inline-flex; align-items:center; border-radius:999px; background:#fef3c7; color:#b45309; font-size:10px; font-weight:700; padding:1px 7px; margin-left:4px; }

/* Platform tags inline */
.kb-plat-tag { display:inline-flex; align-items:center; gap:2px; border-radius:999px; font-size:11px; font-weight:600; padding:2px 8px; }
.kb-plat-tag--internal { background:#e0f2fe; color:#0369a1; }
.kb-plat-tag--facebook { background:#dbeafe; color:#1d4ed8; }
.kb-plat-tag--tiktok { background:#fce7f3; color:#be185d; }

/* Source provenance badge */
.kb-src-badge { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#94a3b8; font-weight:500; }

/* Delete button on rows */
.kb-del-btn { display:flex; align-items:center; justify-content:center; height:32px; width:32px; border-radius:8px; border:none; background:transparent; color:#cbd5e1; cursor:pointer; transition:color .15s, background .15s; flex-shrink:0; }
.kb-del-btn:hover { color:#e11d48; background:#fff1f2; }

/* Dropzone */
.kb-dropzone { border:2px dashed #cbd5e1; border-radius:16px; padding:24px 16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; background:#f8fafc; }
.kb-dropzone:hover, .kb-dropzone.is-over { border-color:#FF6B2B; background:#fff7f5; }

/* AI-MARK[QAI-UI:kb-analyze] 2026-07-01 23:00 (GMT+7) — GĐ2 "Thêm tri thức 1-chạm AI tự phân loại": ghi chú độ tin cậy thấp + hàng checklist mục rút trích trong openKbConfirmModal (thay class Tailwind arbitrary — chống purge) | rel: UI-L4-Lyly, lyly.js openKbConfirmModal, server/lyly/knowledge-analyze.js */
.kb-confidence-note { display:flex; align-items:center; gap:6px; border-radius:10px; background:#fffbeb; border:1px solid #fde68a; color:#b45309; font-size:12px; font-weight:600; padding:8px 10px; }
.kb-extract-item { display:flex; align-items:flex-start; gap:8px; border-radius:12px; border:1px solid #e2e8f0; background:#f8fafc; padding:8px 10px; cursor:pointer; }
.kb-extract-item input[type="checkbox"] { margin-top:3px; flex-shrink:0; }
.kb-extract-item-badge { flex-shrink:0; display:inline-flex; align-items:center; border-radius:999px; background:#fff; border:1px solid #e2e8f0; color:#475569; font-size:10px; font-weight:700; padding:2px 8px; margin-top:1px; }
.kb-extract-item-text { flex:1 1 auto; font-size:12px; color:#475569; line-height:1.4; }

/* ── AI-MARK[QAI-UI:kb-redesign] 2026-07-02 — GĐ3 redesign Kho tri thức: hero "đang dùng" thay 6 thẻ · toolbar 1 nút Thêm + Cấu hình popover · unified add-modal method tabs · empty-state có ví dụ. Purge-safe (viết tay ở lyly.css) | rel: UI-L4-Lyly, lyly.js viewKnowledge/kbHeroStrip/kbToolbar/openKbAddModal */
/* Hero trạng thái "Lyly đang dùng …" (thay dải 6 thẻ thống kê) */
.kb-hero { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px; border-radius:16px; background:linear-gradient(135deg,#fff7f5,#ffffff); border:1px solid #ffe1d3; box-shadow:0 1px 3px rgba(2,6,23,.06); }
.kb-hero--manual { background:linear-gradient(135deg,#fffbeb,#ffffff); border-color:#fde68a; }
.kb-hero-icon { height:40px; width:40px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#FF6B2B,#f43f5e); color:#fff; }
.kb-hero--manual .kb-hero-icon { background:linear-gradient(135deg,#f59e0b,#f97316); }
.kb-hero-main { flex:1 1 auto; min-width:0; }
.kb-hero-title { font-size:14px; font-weight:700; color:#0f172a; line-height:1.35; }
.kb-hero-title b { color:#FF6B2B; }
.kb-hero--manual .kb-hero-title b { color:#b45309; }
.kb-hero-sub { font-size:12px; color:#64748b; margin-top:2px; }
.kb-hero-side { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.kb-hero-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#64748b; background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:2px 9px; white-space:nowrap; }
@media (max-width:640px){ .kb-hero-side{ display:none; } }

/* AI-MARK[QAI-UI:knowledge-clean-dashboard] 2026-07-04 10:02 (GMT+7) - giu feedback ingest trong modal,
   nhung bo panel dashboard "Lyly da hoc nhu the nao" de giao dien Kho tri thuc gon hon. | rel: lyly.js viewKnowledge */
.kb-ingest-success { display:grid; gap:8px; border-radius:12px; background:#ecfdf5; border:1px solid #bbf7d0; color:#047857; padding:10px; }
.kb-ingest-success b,
.kb-ingest-success em { display:flex; align-items:center; gap:6px; font-style:normal; font-weight:800; }
.kb-ingest-success span { color:#065f46; font-size:12px; font-weight:600; line-height:1.4; }
.kb-ingest-success em { color:#c2410c; font-size:12px; }
/* Toolbar: nút Thêm tri thức (chính) + Cấu hình/Làm mới (phụ) */
.kb-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.kb-toolbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kb-toolbar-note { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#94a3b8; }
.kb-add-btn { display:inline-flex; align-items:center; gap:7px; border-radius:12px; border:none; background:linear-gradient(135deg,#FF6B2B,#f43f5e); color:#fff; font-size:14px; font-weight:700; padding:9px 16px; cursor:pointer; box-shadow:0 2px 8px rgba(255,107,43,.28); transition:opacity .15s, transform .06s; }
.kb-add-btn:hover { opacity:.95; }
.kb-add-btn:active { transform:translateY(1px); }
/* AI-MARK[QAI-UI:knowledge-ai-native-ingest] 2026-07-04 10:56 (GMT+7) — popup Thêm tri thức fit vừa viewport, upload nhiều file, preview kế hoạch và prompt soạn nháp theo lịch. | rel: lyly.js openKbAddModal/openKbPlanPromptModal, LYLY-INTG:knowledge-plan-compose */
.kb-add-card,
.kb-plan-card {
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kb-add-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #eef2f7;
  flex: 0 0 auto;
}
.kb-add-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #fff7f5;
  color: #FF6B2B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.kb-add-body { padding: 16px 18px 18px; display: grid; gap: 12px; overflow: auto; }
.kb-add-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-add-cancel,
.kb-add-submit {
  min-height: 42px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.kb-add-cancel { border: 1px solid #e2e8f0; background: #fff; color: #475569; }
.kb-add-cancel:hover { border-color: #cbd5e1; background: #f8fafc; }
.kb-add-submit { border: 0; background: linear-gradient(135deg,#FF6B2B,#f43f5e); color: #fff; box-shadow: 0 8px 18px rgba(244,63,94,.16); }
.kb-add-submit:hover { opacity: .95; }
.kb-add-submit:disabled { opacity: .65; cursor: wait; }
.kb-cfg-btn { display:inline-flex; align-items:center; gap:6px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; color:#475569; font-size:13px; font-weight:600; padding:8px 13px; cursor:pointer; transition:border-color .15s, color .15s; }
.kb-cfg-btn:hover { border-color:#FF6B2B; color:#FF6B2B; }

/* Popover cấu hình: grounding + lọc nền tảng */
.kb-cfg-popover { display:flex; flex-direction:column; gap:12px; padding:14px; margin-bottom:12px; border-radius:16px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 4px 16px rgba(2,6,23,.08); }
.kb-cfg-popover[hidden] { display:none; }
.kb-cfg-popover .kb-grounding-bar { margin-bottom:0; box-shadow:none; border-color:#eef2f7; }
.kb-cfg-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kb-cfg-label { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#0f172a; }

/* Unified "Thêm tri thức" modal — method tabs + panels */
.kb-method-tabs { display:flex; gap:6px; background:#f1f5f9; padding:4px; border-radius:12px; margin-bottom:4px; }
.kb-method-tab { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; background:transparent; color:#64748b; font-size:13px; font-weight:600; padding:8px 6px; border-radius:9px; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; }
.kb-method-tab.is-active { background:#fff; color:#FF6B2B; box-shadow:0 1px 3px rgba(2,6,23,.1); }
.kb-method-panel[hidden] { display:none; }
.kb-file-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 7px 9px;
  font-size: 13px;
}
.kb-file-name { min-width: 0; color: #0f172a; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-file-size { color: #94a3b8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.kb-file-remove {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  color: #94a3b8;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kb-file-remove:hover { color: #e11d48; background: #fff1f2; }
.kb-smart-plan {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #bbf7d0;
}
.kb-smart-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-smart-plan-head b { display: block; color: #0f172a; font-size: 13px; }
.kb-smart-plan-head span { display: block; color: #64748b; font-size: 11px; margin-top: 1px; }
.kb-plan-primary,
.kb-plan-secondary {
  border: 0;
  border-radius: 11px;
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.kb-plan-primary { color: #fff; background: linear-gradient(135deg,#FF6B2B,#f43f5e); box-shadow: 0 6px 14px rgba(244,63,94,.16); }
.kb-plan-secondary { color: #0f172a; background: #fff; border: 1px solid #cbd5e1; justify-self: start; }
.kb-plan-rows,
.kb-plan-list { display: grid; gap: 7px; }
.kb-plan-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 8px 9px;
}
.kb-plan-date { color: #f97316; font-size: 11px; font-weight: 850; white-space: nowrap; }
.kb-plan-main { min-width: 0; display: grid; gap: 2px; }
.kb-plan-main b { color: #0f172a; font-size: 12px; line-height: 1.35; }
.kb-plan-main em { color: #64748b; font-size: 11px; font-style: normal; line-height: 1.35; overflow-wrap: anywhere; }
.kb-plan-more { color: #64748b; font-size: 11px; font-weight: 700; }
.kb-plan-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}
.kb-plan-check input { margin-top: 2px; accent-color: #FF6B2B; }
.kb-plan-check span { display: grid; gap: 2px; min-width: 0; }
.kb-plan-check b { color: #0f172a; font-size: 13px; line-height: 1.35; }
.kb-plan-check em { color: #64748b; font-size: 11px; font-style: normal; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .kb-add-head { padding: 16px; }
  .kb-add-body { padding: 14px; }
  .kb-add-actions { grid-template-columns: 1fr; }
  .kb-method-tabs { flex-direction: column; }
  .kb-smart-plan-head { align-items: stretch; flex-direction: column; }
  .kb-plan-primary { width: 100%; }
  .kb-plan-row { grid-template-columns: 1fr; gap: 4px; }
  .kb-plan-date { white-space: normal; }
}

/* Empty-state có ví dụ mẫu (dạy người dùng cách bổ sung) */
.lyly-empty-example { margin:12px auto 0; max-width:440px; text-align:left; border-radius:12px; background:#f8fafc; border:1px dashed #cbd5e1; padding:10px 12px; font-size:12px; color:#475569; line-height:1.5; }
.lyly-empty-example b { color:#0f172a; font-weight:700; }
.kb-empty-add { display:inline-flex; align-items:center; gap:6px; margin-top:14px; border-radius:12px; border:none; background:linear-gradient(135deg,#FF6B2B,#f43f5e); color:#fff; font-size:13px; font-weight:700; padding:8px 15px; cursor:pointer; box-shadow:0 2px 8px rgba(255,107,43,.25); }
.kb-empty-add:hover { opacity:.95; }

/* ── AI-MARK[QAI-UI:lyly-announce] 2026-06-30 09:39 (GMT+7) — Announce tab CSS: platform chips, draft textareas, group chips, ann-plat-tag | rel: UI-L4-Lyly, lyly.js viewAnnounce */

/* Platform multi-select chips (composer) */
.ann-plat-chip {
  background: #fff;
  color: #475569;
  border-color: #e2e8f0;
}
.ann-plat-chip:hover { border-color: #FF6B2B; color: #FF6B2B; }
.ann-plat-chip.is-active {
  background: linear-gradient(to bottom right, #FF6B2B, #f43f5e);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(255,107,43,.3);
}

/* Kênh chưa sẵn sàng — Facebook lấy trạng thái động từ capability; TikTok vẫn chưa có connector. | rel: lyly.js annPlatformReadiness */
.ann-plat-chip--soon {
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e2e8f0;
  border-style: dashed;
  cursor: not-allowed;
}
.ann-plat-chip--soon:hover { border-color: #e2e8f0; color: #94a3b8; }
.ann-plat-soon {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 6px;
  padding: 1px 5px;
}

/* Group picker chips */
.ann-group-chip {
  background: #fff;
  color: #475569;
  border-color: #e2e8f0;
}
.ann-group-chip:hover { border-color: #FF6B2B; color: #FF6B2B; }
.ann-group-chip.is-active {
  background: #fff7f5;
  color: #FF6B2B;
  border-color: #FF6B2B;
}
/* GĐ1: cảnh báo nhóm đang im lặng / không nhận thông báo ngay tại ô chọn nhóm | rel: lyly.js annRenderGroupPicker */
.ann-group-chip--warn { border-color: #fdba74; }
.ann-group-chip--warn.is-active { border-color: #FF6B2B; }
.ann-group-warn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #c2410c;
  background: #fff7ed;
  border-radius: 6px;
  padding: 1px 5px;
}

/* GĐ2: Thẻ gợi ý AI-native từ KB (4 nhóm, mỗi nhóm 1 dải thẻ cuộn ngang) | rel: lyly.js annRenderSuggestions */
.ann-suggest { }
.ann-sugg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 800; color: #0B1437; margin-bottom: 8px; }
.ann-sugg-head > i { color: #FF6B2B; }
.ann-sugg-sub { font-size: 11px; font-weight: 500; color: #94a3b8; margin-left: 2px; }
.ann-sugg-group { margin-bottom: 8px; }
.ann-sugg-group-t { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.ann-sugg-group-t i { color: #FF6B2B; }
.ann-sugg-count { font-size: 10px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0 6px; }
/* GĐ4 (redesign comms): WRAP lưới, KHÔNG scroll ngang — thẻ tự giãn theo full-width (auto-fill). | rel: lyly.js annRenderSuggestions */
.ann-sugg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ann-sugg-card { min-width: 0; overflow: hidden; text-align: left; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; padding: 9px 11px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.ann-sugg-card:hover { border-color: #FF6B2B; box-shadow: 0 2px 8px rgba(255,107,43,.12); }
.ann-sugg-card--link { background: #fffbeb; border-color: #fde68a; }
.ann-sugg-card--link:hover { border-color: #f59e0b; }
.ann-sugg-card-t { min-width: 0; display: flex; align-items: flex-start; gap: 5px; font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.ann-sugg-card-t i { color: #FF6B2B; flex-shrink: 0; }
.ann-sugg-card-t span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ann-sugg-card-meta { min-width: 0; font-size: 10.5px; font-weight: 600; color: #94a3b8; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.ann-sugg-card-ctx { font-size: 11px; color: #475569; margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ann-sugg-card-cta { font-size: 11px; font-weight: 700; color: #FF6B2B; margin-top: 6px; }
.ann-sugg-card--link .ann-sugg-card-cta { color: #b45309; }
/* GĐ4: badge số việc chờ trên thanh sub-tab comms | rel: lyly.js subTabBtn/loadCommsBadges */
.lyly-subnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #FF6B2B; color: #fff; font-size: 10px; font-weight: 800; margin-left: 5px; }

/* Platform tags inline (list) */
.ann-plat-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
}
.ann-plat-tag--internal { background: #e0f2fe; color: #0369a1; }
.ann-plat-tag--email    { background: #ede9fe; color: #6d28d9; }
.ann-plat-tag--facebook { background: #dbeafe; color: #1d4ed8; }
.ann-plat-tag--tiktok   { background: #fce7f3; color: #be185d; }
.ann-plat-tag--zalo     { background: #dcfce7; color: #15803d; }
.ann-plat-tag--youtube  { background: #fee2e2; color: #b91c1c; }

/* AI-MARK[QAI-UI:lyly-omnichannel-composer] 2026-07-23 14:11 (GMT+7) — kênh đa nền tảng + độ dài Ngắn/Vừa/Dài + tự gán nơi post/status connector + preview per-platform gọn; additive, không thay group guard cũ. | rel: lyly.js annOmniControlsHtml/annPostDestinationsHtml/acwRenderStep2/acReviewAnnounce */
/* AI-MARK[QAI-UI:lyly-omni-balanced-picker] 2026-08-02 22:17 (GMT+7) — nhãn Facebook/Zalo ngắn gọn; lưới kênh 3x2 và thẻ đích 3 cột cân đều; picker HR mở dạng popover để không kéo cao thẻ. | rel: lyly.js annPlatformDisplayLabel/annBindEmailRecipientPicker */
/* AI-MARK[QAI-UI:lyly-omni-smart-length-disclosure] 2026-08-03 08:03 (GMT+7) — tách bộ chọn cấu trúc Ngắn/Vừa/Dài thành cụm luôn nhìn thấy, có trạng thái Lyly đang nghĩ lại; riêng kênh vẫn thu gọn để popup dễ đọc. | rel: lyly.js annBindOmniControls/annBindOmniLengthControls/annOmniControlsHtml */
/* AI-MARK[QAI-UI:lyly-omni-platform-quality] 2026-08-03 08:31 (GMT+7) — preview đa nền tảng có skeleton/loading theo lượt Lyly refine; ô Nội dung gốc hiển thị animation rõ ràng và khoá nhẹ trong lúc AI đang viết lại. | rel: lyly.js acwRefreshPlatformDrafts/annSetSourceThinking, LYLY-INTG:announce-omni-refine */
.ann-omni-controls {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
}
.ann-omni-controls-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #dbe3ee;
  border-radius: 11px;
  padding: 8px 11px;
  background: #f8fafc;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.ann-omni-controls-toggle:hover { border-color: #cbd5e1; background: #fff; }
.ann-omni-controls.is-open .ann-omni-controls-toggle {
  border-color: #fdba74;
  background: #fff7ed;
  box-shadow: 0 4px 12px rgba(234, 88, 12, .08);
}
.ann-omni-controls-toggle-copy { min-width: 0; display: grid; gap: 2px; }
.ann-omni-controls-toggle-copy b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.ann-omni-controls-toggle-copy em {
  color: #94a3b8;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}
.ann-omni-controls-chevron { flex: 0 0 auto; color: #94a3b8; transition: transform .16s ease, color .16s ease; }
.ann-omni-controls.is-open .ann-omni-controls-chevron { transform: rotate(180deg); color: #ea580c; }
.ann-omni-controls-body {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
}
.ann-omni-controls-body[hidden] { display: none; }
.ann-omni-length-control {
  display: grid;
  gap: 7px;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
}
.ann-omni-length-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.ann-omni-length-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.ann-omni-length-head em {
  min-width: 0;
  color: #94a3b8;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}
.ann-omni-length-control.is-busy .ann-omni-length { cursor: wait; opacity: .62; }
.ann-omni-length-control.is-busy .ann-omni-length-status { color: #c2410c; }
.ann-omni-length-status {
  min-height: 16px;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}
.ann-omni-length-status[data-state="success"] { color: #15803d; }
.ann-omni-length-status[data-state="fallback"] { color: #b45309; }
.ann-omni-length-status[data-state="error"] { color: #be123c; }
.ann-omni-length-status[hidden] { display: none; }
.ann-source-editor {
  position: relative;
  isolation: isolate;
}
.ann-source-editor.is-thinking textarea {
  filter: saturate(.72);
  opacity: .56;
  cursor: wait;
}
.ann-source-thinking {
  position: absolute;
  inset: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(251, 146, 60, .42);
  border-radius: 12px;
  background: rgba(255, 247, 237, .93);
  color: #9a3412;
  box-shadow: 0 8px 24px rgba(234, 88, 12, .10);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.ann-source-thinking[hidden] { display: none; }
.ann-source-thinking > span:last-child { display: grid; gap: 2px; }
.ann-source-thinking b { font-size: 12px; font-weight: 900; }
.ann-source-thinking small { color: #c2410c; font-size: 10.5px; font-weight: 700; }
.ann-source-thinking-spinner { position: relative; width: 28px; height: 28px; flex: 0 0 auto; }
.ann-source-thinking-spinner::before {
  content: '';
  position: absolute;
  inset: 1px;
  border: 2px solid rgba(251, 146, 60, .26);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: ann-source-spin .85s linear infinite;
}
.ann-source-thinking-spinner i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fb7185;
  animation: ann-source-pulse 1.1s ease-in-out infinite;
}
.ann-source-thinking-spinner i:nth-child(1) { top: 3px; right: 2px; }
.ann-source-thinking-spinner i:nth-child(2) { right: 1px; bottom: 4px; animation-delay: .18s; }
.ann-source-thinking-spinner i:nth-child(3) { left: 2px; bottom: 3px; animation-delay: .36s; }
@keyframes ann-source-spin { to { transform: rotate(360deg); } }
@keyframes ann-source-pulse { 0%, 100% { opacity: .25; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.2); } }
.ann-omni-preview-grid--loading { opacity: .98; }
.ann-omni-preview-card--skeleton .ann-omni-preview-head em { color: #c2410c; }
.ann-omni-preview-skeleton {
  display: grid;
  gap: 9px;
  min-height: 142px;
  align-content: center;
  padding: 16px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}
.ann-omni-preview-skeleton i {
  display: block;
  width: var(--ann-skeleton-width, 88%);
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0 20%, #fff7ed 50%, #e2e8f0 80%);
  background-size: 220% 100%;
  animation: ann-preview-shimmer 1.25s ease-in-out infinite;
}
.ann-omni-preview-skeleton i:nth-child(2) { --ann-skeleton-width: 73%; animation-delay: .12s; }
.ann-omni-preview-skeleton i:nth-child(3) { --ann-skeleton-width: 94%; animation-delay: .24s; }
.ann-omni-preview-skeleton i:nth-child(4) { --ann-skeleton-width: 54%; animation-delay: .36s; }
.ann-omni-preview-skeleton span { margin-top: 3px; color: #c2410c; }
@keyframes ann-preview-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.ann-omni-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.ann-omni-channel {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s, color .12s;
}
.ann-omni-channel span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ann-omni-channel:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}
.ann-omni-channel.is-active {
  border-color: #FF6B2B;
  background: #fff7ed;
  color: #9a3412;
  box-shadow: 0 0 0 2px rgba(255, 107, 43, .10);
}
.ann-omni-channel--facebook.is-active { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.ann-omni-channel--email.is-active { border-color: #7c3aed; background: #f5f3ff; color: #6d28d9; }
.ann-omni-channel--tiktok.is-active { border-color: #be185d; background: #fdf2f8; color: #9d174d; }
.ann-omni-channel--zalo.is-active { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.ann-omni-channel--youtube.is-active { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.ann-omni-lengths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.ann-omni-length {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  color: #64748b;
  text-align: left;
  cursor: pointer;
}
.ann-omni-length b,
.ann-omni-length em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ann-omni-length b {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.ann-omni-length em {
  margin-top: 1px;
  color: #94a3b8;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}
.ann-omni-length.is-active {
  border-color: #FF6B2B;
  background: #fff7ed;
}
.ann-omni-length.is-active b { color: #9a3412; }
.ann-omni-preview-title {
  margin: 10px 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.ann-omni-preview-title i,
.ann-omni-preview-title svg { color: #2563eb; }
.ann-omni-preview {
  min-width: 0;
}
.ann-omni-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
}
.ann-omni-preview-card {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #94a3b8;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.ann-omni-preview-card--internal { border-top-color: #0ea5e9; }
.ann-omni-preview-card--email { border-top-color: #7c3aed; }
.ann-omni-preview-card--facebook { border-top-color: #2563eb; }
.ann-omni-preview-card--tiktok { border-top-color: #be185d; }
.ann-omni-preview-card--zalo { border-top-color: #16a34a; }
.ann-omni-preview-card--youtube { border-top-color: #ef4444; }
.ann-omni-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid #edf2f7;
  background: #f8fafc;
}
.ann-omni-preview-head span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.ann-omni-preview-head em {
  flex: none;
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}
.ann-omni-quality-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid #edf2f7;
  background: #fff;
}
.ann-viral-format,
.ann-content-safety {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.ann-viral-format {
  flex: 1 1 auto;
  background: #eef2ff;
  color: #3730a3;
}
.ann-viral-format i,
.ann-viral-format svg { flex: 0 0 auto; }
.ann-content-safety {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ann-content-safety--safe {
  background: #dcfce7;
  color: #15803d;
}
.ann-content-safety--warn {
  background: #fef3c7;
  color: #a16207;
}
.ann-content-safety--risk {
  background: #ffe4e6;
  color: #be123c;
}
.ann-omni-preview-body {
  max-height: 210px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 11px;
  color: #334155;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ann-omni-preview-body strong { color: #0f172a; font-weight: 850; }
.ann-omni-preview-body em { font-style: italic; }
.ann-omni-preview-empty {
  color: #94a3b8;
  font-style: italic;
}
.ann-auto-target-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -2px 0 10px;
  flex-wrap: wrap;
}
.ann-auto-target-actions span,
.ann-auto-target-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 850;
}
.ann-auto-target-actions span {
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 5px 9px;
}
.ann-auto-target-actions button {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #c2410c;
  padding: 5px 10px;
  cursor: pointer;
}
.ann-auto-target-actions button:hover {
  border-color: #fb923c;
  color: #9a3412;
}
.ann-omni-refine {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fbfcfe;
}
.ann-omni-refine--review { margin-top: 2px; }
.ann-omni-refine-head,
.ann-omni-refine-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ann-omni-refine-head {
  justify-content: space-between;
  flex-wrap: wrap;
}
.ann-omni-refine-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.ann-omni-refine-head em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.ann-omni-refine-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 650;
  outline: none;
}
.ann-omni-refine-row input:focus {
  border-color: #FF6B2B;
  box-shadow: 0 0 0 3px rgba(255,107,43,.12);
}
.ann-omni-refine-row button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg,#FF6B2B,#ef4444);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.ann-omni-refine-msg {
  min-height: 16px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 750;
}
@media (max-width: 640px) {
  .ann-omni-refine-row {
    align-items: stretch;
    flex-direction: column;
  }
  .ann-omni-refine-row button { width: 100%; }
}
.ann-post-destinations {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
}
.ann-post-destinations-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ann-post-destinations-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.ann-post-destinations-head em {
  flex: 0 0 auto;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
}
.ann-post-destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}
.ann-post-destination {
  position: relative;
  min-width: 0;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 9px 10px;
}
.ann-post-destination-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ann-post-destination-top span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.ann-post-destination-top b {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 900;
}
.ann-post-destination p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.42;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ann-post-destination-action,
.ann-post-destination-note {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 900;
}
.ann-post-destination-note--picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
}
.ann-post-destination-note--picker > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ann-post-destination-note--picker .ann-post-destination-action {
  max-width: 100%;
  white-space: nowrap;
}
.ann-post-destination-action {
  min-height: 28px;
  border: 1px solid #fecaca;
  background: #fff;
  color: #b91c1c;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
}
.ann-post-destination-action:hover {
  border-color: #f87171;
  background: #fef2f2;
}
.ann-post-destination-action--zalo {
  border-color: #bbf7d0;
  color: #15803d;
}
.ann-post-destination-action--zalo:hover {
  border-color: #4ade80;
  background: #f0fdf4;
}
.ann-post-destination-note {
  color: #15803d;
}
.ann-post-destination-note--email {
  color: #6d28d9;
}
/* AI-MARK[QAI-UI:lyly-email-hr-multi-picker] 2026-08-02 21:29 (GMT+7) —
   HR email picker renders the complete backend roster with multi-select, search and bulk actions. | rel: lyly.js annBindEmailRecipientPicker */
.ann-email-hr-picker-options {
  position: absolute;
  z-index: 40;
  left: 10px;
  right: 10px;
  top: calc(100% + 6px);
  min-width: 0;
  max-width: calc(100vw - 32px);
  margin-top: 0;
  padding: 9px;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  background: #faf9ff;
  box-shadow: 0 18px 36px rgba(76, 29, 149, .18), 0 3px 10px rgba(15, 23, 42, .08);
}
.ann-email-hr-picker-head,
.ann-email-hr-picker-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.ann-email-hr-picker-head {
  color: #6d28d9;
  font-size: 11px;
  line-height: 1.35;
}
.ann-email-hr-picker-head span {
  color: #7c3aed;
  font-size: 10px;
  font-weight: 800;
}
.ann-email-hr-picker-tools {
  margin-top: 7px;
  flex-wrap: wrap;
}
.ann-email-hr-picker-tools input {
  flex: 1 1 150px;
  min-width: 120px;
  min-height: 29px;
  border: 1px solid #c4b5fd;
  border-radius: 7px;
  background: #fff;
  color: #4c1d95;
  padding: 4px 7px;
  font: inherit;
  font-size: 11px;
}
.ann-email-hr-picker-tools button {
  min-height: 29px;
  border: 1px solid #c4b5fd;
  border-radius: 7px;
  background: #fff;
  color: #6d28d9;
  padding: 4px 7px;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
}
.ann-email-hr-picker-tools button:hover {
  background: #ede9fe;
}
.ann-email-hr-picker-list {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 7px;
  border-top: 1px solid #ede9fe;
}
.ann-email-hr-picker-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 3px;
  border-bottom: 1px solid #ede9fe;
  cursor: pointer;
}
.ann-email-hr-picker-row:hover {
  background: #f5f3ff;
}
.ann-email-hr-picker-row input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: #7c3aed;
}
.ann-email-hr-picker-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ann-email-hr-picker-row b,
.ann-email-hr-picker-row small {
  overflow-wrap: anywhere;
}
.ann-email-hr-picker-row b {
  color: #312e81;
  font-size: 11px;
}
.ann-email-hr-picker-row small {
  color: #7c3aed;
  font-size: 10px;
}
.ann-email-hr-picker-empty {
  display: block;
  color: #b91c1c;
  font-size: 11px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .ann-omni-channel-grid,
  .ann-post-destinations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .ann-omni-channel-grid,
  .ann-post-destinations-grid {
    grid-template-columns: 1fr;
  }
  .ann-post-destination-note--picker {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ann-post-destination-note--picker .ann-post-destination-action {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
.ann-post-destination--ready {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.ann-post-destination--ready .ann-post-destination-top b {
  background: #dcfce7;
  color: #15803d;
}
.ann-post-destination--requires_group {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.ann-post-destination--requires_group .ann-post-destination-top b {
  background: #dbeafe;
  color: #1d4ed8;
}
.ann-post-destination--requires_email {
  border-color: #ddd6fe;
  background: #f5f3ff;
}
.ann-post-destination--requires_email .ann-post-destination-top b {
  background: #ede9fe;
  color: #6d28d9;
}
.ann-post-destination--checking,
.ann-post-destination--connector_pending {
  border-color: #fed7aa;
  background: #fff7ed;
}
.ann-post-destination--checking .ann-post-destination-top b,
.ann-post-destination--connector_pending .ann-post-destination-top b {
  background: #ffedd5;
  color: #c2410c;
}

/* AI-MARK[QAI-UI:lyly-dispatch-panel] 2026-07-04 16:32 (GMT+7) — cụm kênh/nhóm/lịch dùng chung trong popup tạo & duyệt nội dung; thêm schedule kit purge-safe cho nút Lyly tự lên lịch + lên kế hoạch thủ công. | rel: lyly.js annDispatchPanelHtml/annScheduleKitHtml */
.ann-post-panel {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fbfcfe;
}
.ann-post-row {
  display: grid;
  grid-template-columns: 108px minmax(0,1fr);
  align-items: center;
  gap: 8px 12px;
}
.ann-post-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}
.ann-post-label i,
.ann-post-label svg { color: #FF6B2B; flex: none; }
.ann-post-channels,
.ann-post-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.ann-post-channel,
.ann-post-group {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 6px 10px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.ann-post-channel { cursor: default; }
.ann-post-group { cursor: pointer; }
.ann-post-channel.is-active,
.ann-post-group.is-active {
  border-color: #FF6B2B;
  background: #fff7f5;
  color: #FF6B2B;
}
.ann-post-channel--disabled {
  border-style: dashed;
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}
.ann-post-channel em {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  color: #64748b;
  background: #e2e8f0;
  border-radius: 6px;
  padding: 1px 5px;
}
.ann-post-group--warn {
  border-color: #fdba74;
  background: #fff7ed;
  color: #b45309;
}
.ar-grp.is-active {
  border-color: #FF6B2B;
  background: #fff7f5;
  color: #FF6B2B;
}
.ann-post-empty {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}
.ann-post-schedule input {
  width: min(260px,100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 10px;
  color: #334155;
  font-size: 13px;
  outline: none;
  background: #fff;
}
.ann-post-schedule input:focus {
  border-color: #FF6B2B;
  box-shadow: 0 0 0 3px rgba(255,107,43,.15);
}
.ann-post-schedule-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.ann-post-schedule-wrap > input {
  flex: 0 1 260px;
}
.ann-post-schedule-kit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.ann-post-schedule-smart,
.ann-post-schedule-manual,
.ann-post-schedule-plan {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid;
  border-radius: 9999px;
  padding: 6px 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ann-post-schedule-smart {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #ea580c;
}
.ann-post-schedule-manual {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}
.ann-post-schedule-plan {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4f46e5;
}
.ann-post-schedule-smart:hover,
.ann-post-schedule-manual:hover,
.ann-post-schedule-plan:hover {
  border-color: #FF6B2B;
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
}
.ann-post-schedule-smart i,
.ann-post-schedule-smart svg,
.ann-post-schedule-manual i,
.ann-post-schedule-manual svg,
.ann-post-schedule-plan i,
.ann-post-schedule-plan svg {
  flex: none;
}
.ann-post-schedule-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: min(100%, 170px);
  max-width: 420px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ann-post-schedule-hint i,
.ann-post-schedule-hint svg {
  color: #FF6B2B;
  flex: none;
}
@media (max-width: 640px) {
  .ann-post-row { grid-template-columns: 1fr; align-items: start; }
  .ann-post-schedule-wrap > input,
  .ann-post-schedule-kit,
  .ann-post-schedule-smart,
  .ann-post-schedule-manual {
    width: 100%;
  }
}

/* AI-MARK[QAI-UI:lyly-action-review-modal] 2026-07-20 10:20 (GMT+7) — popup "Duyệt & gửi thông báo" layout một cột,
   preview Telegram, đính kèm trong flow, card nhóm/lịch, footer action cố định; textarea không bold mặc định, bold chỉ
   khi user dùng marker đậm hoặc Cmd+B.
   ⚠️ TUYỆT ĐỐI KHÔNG viết chuỗi (dấu-sao dấu-sao gạch-chéo) trong comment CSS: comment CSS KHÔNG lồng nhau, nó đóng ở
   dấu đóng ĐẦU TIÊN → phần đuôi thành CSS sống, nuốt trọn rule ngay bên dưới. Chính lỗi đó (2026-07-13→2026-07-20) đã
   giết rule .acrv-overlay bên dưới ⇒ popup render nhưng position:static nằm ngoài viewport trong khi body khoá cuộn
   ⇒ user thấy "bấm nháp không hiện popup". | rel: lyly.js acReviewAnnounce, sổ lỗi 2026-07-20-review-popup-invisible */
.acrv-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(15, 23, 42, .45);
}
.acrv-modal {
  width: min(940px, 100%);
  margin: 24px 0;
  overflow: hidden;
  background: #fff;
}
.acrv-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(135deg,#fff7f5 0%,#ffffff 72%);
}
.acrv-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
}
.acrv-head-main { flex: 1; min-width: 0; }
.acrv-title {
  color: #0B1437;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}
.acrv-sub {
  margin-top: 3px;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}
.acrv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.acrv-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 850;
}
.acrv-close {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.acrv-close:hover {
  background: #f8fafc;
  color: #475569;
}
.acrv-body {
  display: grid;
  gap: 13px;
  padding: 16px 18px 18px;
  background: #f8fafc;
}
.acrv-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.acrv-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.acrv-section-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}
.acrv-section-title i,
.acrv-section-title svg {
  color: #FF6B2B;
  flex: none;
}
.acrv-section-sub {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}
.acrv-soft-btn {
  min-height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  padding: 7px 10px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.acrv-soft-btn:hover {
  border-color: #FF6B2B;
  color: #FF6B2B;
}
.acrv-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.acrv-field > span {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.acrv-field input,
.acrv-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe3ee;
  border-radius: 13px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  outline: none;
}
.acrv-field input {
  min-height: 42px;
  padding: 9px 12px;
  font-weight: 600;
}
.acrv-field textarea {
  min-height: 170px;
  padding: 11px 12px;
  font-weight: 400;
  resize: vertical;
}
textarea.lyly-rich-editor,
.lyly-rich-editor {
  font-weight: 400;
}
/* AI-MARK[QAI-UI:lyly-manual-bold-editors] 2026-07-13 14:48 (GMT+7) — mọi ô soạn Lyly mặc định text thường; bold chỉ là marker user tự Cmd/Ctrl+B và preview/payload xử lý riêng. | rel: lyly.js annBindBoldShortcut */
textarea[data-lyly-rich-editor="1"],
textarea[data-ac-wishtext],
#empWish {
  font-weight: 400;
}
.acrv-field input:focus,
.acrv-field textarea:focus {
  border-color: #FF6B2B;
  box-shadow: 0 0 0 3px rgba(255,107,43,.14);
}
.acrv-preview-card {
  display: grid;
  gap: 7px;
}
.acrv-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.acrv-preview-label i,
.acrv-preview-label svg { color: #2563eb; }
.acrv-tg-preview {
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg,#eff6ff 0%,#f8fbff 100%);
}
.acrv-tg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.acrv-tg-meta span {
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.acrv-tg-meta em {
  flex: none;
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}
.acrv-preview-text {
  max-height: 190px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #dbeafe;
  border-radius: 14px 14px 14px 6px;
  padding: 11px 12px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 20px rgba(30, 64, 175, .08);
}
.acrv-preview-text strong {
  color: #0f172a;
  font-weight: 800;
}
.lyly-rich-preview strong {
  color: #0f172a;
  font-weight: 800;
}
.acrv-preview-empty {
  color: #94a3b8;
  font-style: italic;
}
.acrv-targets .ann-post-groups {
  gap: 8px;
}
.acrv-targets .ann-post-group {
  min-height: 36px;
  border-radius: 12px;
  padding: 8px 12px;
  white-space: normal;
}
.acrv-sched-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.acrv-sched-kit {
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.acrv-sched-kit .ann-post-schedule-kit {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.acrv-sched-kit .ann-post-schedule-smart,
.acrv-sched-kit .ann-post-schedule-plan {
  min-height: 42px;
  width: 100%;
  border-radius: 13px;
  padding: 8px 11px;
  white-space: normal;
}
.acrv-sched-kit .ann-post-schedule-hint {
  grid-column: 1 / -1;
  display: flex;
  max-width: none;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
}
.acrv-attachments .lyly-att-list:empty::before {
  content: 'Chưa có đính kèm';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px dashed #dbe3ee;
  border-radius: 13px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
}
.acrv-att-msg {
  min-height: 18px;
  color: #64748b;
  font-size: 12px;
}
.ann-history-log {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 12px;
}
.acrv-history-panel .ann-history-log {
  margin-top: 0;
}
.ann-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.ann-history-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ann-history-head i,
.ann-history-head svg {
  color: #FF6B2B;
  flex: none;
}
.ann-history-head em {
  flex: none;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.ann-history-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.ann-history-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #334155;
  font-size: 11.5px;
  line-height: 1.35;
}
.ann-history-table th,
.ann-history-table td {
  padding: 8px 9px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.ann-history-table th {
  color: #64748b;
  background: #f8fafc;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}
.ann-history-table td {
  font-weight: 650;
}
.ann-history-table tr:last-child td {
  border-bottom: 0;
}
.ann-history-table em {
  display: inline-block;
  margin-left: 4px;
  color: #64748b;
  font-style: normal;
  font-weight: 800;
}
.ann-history-empty {
  color: #94a3b8;
  text-align: center;
}
.ann-history-log--compact {
  margin-top: 10px;
}
.ann-history-log--compact .ann-history-head {
  font-size: 11.5px;
}
.ann-history-log--compact .ann-history-table {
  min-width: 640px;
}
.ann-history-log--compact .ann-history-table th,
.ann-history-log--compact .ann-history-table td {
  padding: 7px 8px;
}
.acrv-footer {
  flex: none;
  display: grid;
  gap: 10px;
  padding: 13px 18px 16px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.acrv-msg {
  min-height: 20px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}
.acrv-actions {
  display: grid;
  grid-template-columns: minmax(130px, .75fr) minmax(180px, 1fr) minmax(220px, 1.25fr);
  gap: 10px;
}
.acrv-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 13px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.acrv-btn--ghost {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
}
.acrv-btn--ghost:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.acrv-btn--primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
  box-shadow: 0 8px 18px rgba(255, 107, 43, .24);
}
.acrv-btn--primary:hover { opacity: .95; }
.acrv-btn:disabled {
  opacity: .66;
  cursor: wait;
}
@media (max-width: 760px) {
  .acrv-overlay {
    align-items: flex-start;
    padding: 10px;
  }
  .acrv-modal {
    margin: 10px 0;
    width: 100%;
  }
  .acrv-head,
  .acrv-body,
  .acrv-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .acrv-section-head {
    display: grid;
  }
  .acrv-soft-btn {
    width: 100%;
  }
  .acrv-sched-grid,
  .acrv-actions,
  .acrv-sched-kit .ann-post-schedule-kit {
    grid-template-columns: 1fr;
  }
}

/* Draft editable textarea */
.ann-draft-ta {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  font-weight: 400;
}

/* ── AI-MARK[QAI-UI:lyly-notif-bell] 2026-06-30 10:57 (GMT+7) — Notification bell panel CSS; WIDTH đặt Ở ĐÂY (lyly.css), KHÔNG dựa Tailwind `w-80` (bị purge khỏi lyly-tailwind.css build-sẵn → panel bóp hẹp, chữ xuống dòng) | rel: UI-L4-Lyly, lyly.js wireNotifBell/renderLylyNotifPanel */

/* Bell panel container (absolute dropdown, fixed width + max-height + scroll).
   ⚠️ width PHẢI ở lyly.css (purge-proof): lyly-tailwind.css là bản build SẴN, deploy KHÔNG build lại
   → class Tailwind mới (w-80…) thêm vào lyly.js KHÔNG có tác dụng. */
.lyly-notif-panel {
  width: 22rem;
  max-width: calc(100vw - 24px);
  max-height: 420px;
  display: flex;
  flex-direction: column;
}
.lyly-notif-panel.hidden { display: none; }
.lyly-notif-head > span,
.lyly-notif-head > button { white-space: nowrap; }

/* Head row */
.lyly-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

/* Tabs */
.lyly-notif-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 10px 0;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.lyly-notif-tab {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.lyly-notif-tab:hover { color: #0f172a; }
.lyly-notif-tab.is-active { color: #FF6B2B; border-bottom-color: #FF6B2B; }

/* Scrollable list */
.lyly-notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* Day separator */
.lyly-notif-day {
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Notification item row */
.lyly-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.lyly-notif-item:hover { background: #f8fafc; }
.lyly-notif-item.is-unread { background: #fff7f5; }
.lyly-notif-item.is-unread:hover { background: #fef2ec; }

/* Icon column */
.lyly-notif-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.lyly-notif-item.is-unread .lyly-notif-icon { background: #fff0ea; color: #FF6B2B; }

/* Body */
.lyly-notif-body { flex: 1; min-width: 0; }
.lyly-notif-title { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.lyly-notif-text  { font-size: 12px; color: #475569; line-height: 1.4; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.lyly-notif-meta  { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* Unread dot */
.lyly-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF6B2B;
  flex-shrink: 0;
  margin-top: 6px;
}

/* Empty state */
.lyly-notif-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
}

/* AI-MARK[QAI-UI:birthday-card-flow-smart] 2026-07-03 21:44 (GMT+7) —
   Birthday flow: list thumbnail ưu tiên thiệp đã dựng/khoá, thumbnail ảnh có nút X xoá riêng,
   và layout không phụ thuộc Tailwind purge. | rel: lyly.js bdCardPreviewUrl/renderEmployeeModalBody */
/* AI-MARK[QAI-UI:work-anniversary-trigger-tabs] 2026-07-28 10:35 (GMT+7) —
   Trigger Thâm niên và Ngày lễ tách thành sub-tab riêng cạnh Sinh nhật; danh sách rộng, không cắt tên/chức danh, class viết tay purge-safe. | rel: lyly.js viewWorkAnniversary, lyly.js viewHolidayTriggers */
.bd-trigger-hub {
  display: grid;
  gap: 12px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: linear-gradient(135deg,#ffffff 0%,#f8fbff 62%,#fff7ed 100%);
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
  padding: 16px;
}
.bd-trigger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bd-trigger-title { min-width: 0; display: grid; gap: 2px; }
.bd-trigger-title span { display: inline-flex; align-items: center; gap: 6px; color: #2563eb; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.bd-trigger-title h3 { margin: 0; color: #0f172a; font-size: 17px; line-height: 1.2; font-weight: 950; }
.bd-trigger-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bd-trigger-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 11px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.bd-trigger-action:hover { border-color: #FF6B2B; color: #0f172a; }
.bd-trigger-spin { animation: lco-spin .85s linear infinite; }
.bd-trigger-policy { display: flex; flex-wrap: wrap; gap: 7px; }
.bd-trigger-policy span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
}
.bd-trigger-policy svg { color: #FF6B2B; flex: 0 0 auto; }
.bd-trigger-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #be123c;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.bd-trigger-alert svg { flex: 0 0 auto; margin-top: 1px; }
.bd-trigger-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.bd-trigger-kpis span {
  min-width: 0;
  border-radius: 13px;
  border: 1px solid #e8edf3;
  background: rgba(255,255,255,.8);
  padding: 9px 10px;
}
.bd-trigger-kpis b { display: block; color: #0f172a; font-size: 18px; line-height: 1.1; font-weight: 950; }
.bd-trigger-kpis em { display: block; margin-top: 2px; color: #64748b; font-size: 11px; font-style: normal; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.bd-trigger-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; align-items: start; }
.bd-trigger-grid--solo { grid-template-columns: minmax(0,1fr); }
.bd-trigger-col {
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid #e8edf3;
  border-radius: 15px;
  background: #fff;
  padding: 11px;
}
.bd-trigger-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-trigger-col-head span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: #0f172a; font-size: 12px; font-weight: 950; }
.bd-trigger-col-head svg { color: #FF6B2B; flex: 0 0 auto; }
.bd-trigger-col-head b { flex: 0 0 auto; min-width: 24px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 950; }
.bd-trigger-list { display: grid; gap: 7px; }
.bd-trigger-col--wide .bd-trigger-list { grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); }
.bd-trigger-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fbfcfe;
  padding: 8px 9px;
  text-align: left;
}
.bd-trigger-row--btn { cursor: pointer; }
.bd-trigger-row--btn:hover { border-color: #FF6B2B; background: #fff7f3; }
.bd-trigger-date { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.bd-trigger-date b { color: #0f172a; font-size: 13px; line-height: 1.1; font-weight: 950; }
.bd-trigger-date em { color: #64748b; font-size: 10.5px; font-style: normal; font-weight: 750; line-height: 1.2; }
.bd-trigger-main { min-width: 0; display: grid; gap: 2px; }
.bd-trigger-main b { color: #0f172a; font-size: 12.5px; line-height: 1.25; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-trigger-col--wide .bd-trigger-main b { white-space: normal; }
.bd-trigger-main em,
.bd-trigger-main small { color: #64748b; font-size: 11px; font-style: normal; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.bd-trigger-main small { color: #2563eb; }
.bd-trigger-chip { justify-self: end; border-radius: 999px; padding: 4px 7px; font-size: 10.5px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.bd-trigger-chip.is-ok { background: #dcfce7; color: #15803d; }
.bd-trigger-chip.is-warn { background: #fef3c7; color: #b45309; }
.bd-trigger-chip.is-hot { background: #ffe4e6; color: #be123c; }
.bd-trigger-chip.is-info { background: #dbeafe; color: #1d4ed8; }
.bd-trigger-chip.is-muted { background: #f1f5f9; color: #64748b; }
.bd-trigger-empty {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  padding: 10px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}
.bd-trigger-empty svg { color: #94a3b8; flex: 0 0 auto; }
@media (max-width: 1120px) {
  .bd-trigger-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bd-trigger-hub { padding: 13px; border-radius: 15px; }
  .bd-trigger-head { align-items: flex-start; flex-direction: column; }
  .bd-trigger-actions { width: 100%; justify-content: stretch; }
  .bd-trigger-action { flex: 1 1 0; }
  .bd-trigger-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bd-trigger-row { grid-template-columns: 52px minmax(0,1fr); align-items: start; }
  .bd-trigger-chip { grid-column: 2; justify-self: start; }
}
.bd-item-media {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.bd-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bd-item-media--card {
  width: 68px;
  height: 44px;
  border-radius: 12px;
  background: #f8fafc;
}
.bd-item-media--card img { object-fit: cover; }
.bd-thumb-cell { position: relative; min-width: 0; }
.bd-thumb-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(15,23,42,.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(15,23,42,.22);
  transition: background .15s ease, transform .12s ease;
}
.bd-thumb-x:hover { background: #dc2626; transform: translateY(-1px); }
.bd-thumb-x svg { width: 14px; height: 14px; }

/* Birthday popup: preview thiệp ghép + thumbnail ảnh CBNV/khung (aspect-ratio không
   có trong build Tailwind tĩnh → định nghĩa thuần ở đây để chắc chắn hiển thị). */
.bd-prev-card { width: 100%; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(2,6,23,.10); display: block; }
.bd-zoomable { cursor: zoom-in; }
.bd-zoomable:hover { border-color: #FF6B2B; }
#empCardPrev.is-soft-loading { opacity: .72; transition: opacity .15s ease; }
.bd-prev-card-wrap { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; border: 1px dashed #cbd5e1; background: #f8fafc; color: #94a3b8; text-align: center; padding: 1rem; }
.bd-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid #e2e8f0; background: #f1f5f9; display: block; }
.bd-thumb-wrap { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px dashed #cbd5e1; background: #f8fafc; color: #94a3b8; }
.bd-modal-card { width: min(1080px, 100%); }
.bd-modal-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #eef2f7; flex: 0 0 auto; }
.bd-head-avatar { width: 54px; height: 54px; border-radius: 18px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex: 0 0 auto; }
.bd-head-kicker { color: #FF6B2B; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; margin-bottom: 2px; }
.bd-modal-body { padding: 16px 18px 18px; }
.bd-flow-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #fed7aa; border-radius: 14px; background: #fff7ed; color: #c2410c; padding: 10px 12px; margin-bottom: 14px; }
.bd-flow-main { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 900; }
.bd-flow-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #dcfce7; color: #15803d; padding: 4px 9px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.bd-flow-chip--draft { background: #f1f5f9; color: #64748b; }
.bd-modal-grid { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(460px,1.1fr); gap: 16px; align-items: start; }
.bd-preview-panel,
.bd-form-panel,
.bd-plan-panel { border: 1px solid #e8edf3; border-radius: 16px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.05); }
.bd-preview-panel,
.bd-form-panel { padding: 14px; }
.bd-form-panel { display: grid; gap: 11px; }
.bd-plan-panel { padding: 12px; background: #fbfcfe; display: grid; gap: 10px; }
.bd-panel-title { display: flex; align-items: center; gap: 8px; color: #0f172a; font-size: 13px; font-weight: 900; margin-bottom: 10px; }
.bd-panel-title i,
.bd-panel-title svg { color: #FF6B2B; flex: 0 0 auto; }
.bd-preview-caption,
.bd-thumb-caption { color: #94a3b8; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.35; }
.bd-preview-caption { margin: 7px 0 10px; }
.bd-thumb-caption { margin-top: 5px; }
.bd-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bd-photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.bd-card-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-dark-btn,
.bd-light-btn,
.bd-danger-btn,
.bd-inline-btn,
.bd-save-btn,
.bd-send-now-btn,
.bd-clear-btn { border-radius: 12px; font-size: 13px; font-weight: 800; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: border-color .15s ease, background .15s ease, opacity .15s ease, color .15s ease; }
.bd-dark-btn { width: 100%; min-height: 40px; background: #07133f; color: #fff; }
.bd-dark-btn:hover { opacity: .94; }
.bd-light-btn { min-height: 38px; border: 1px solid #e2e8f0; color: #475569; background: #fff; padding: 9px 10px; }
.bd-light-btn:hover { border-color: #FF6B2B; color: #0f172a; }
.bd-light-btn:disabled { opacity: .55; cursor: not-allowed; border-color: #e2e8f0; color: #94a3b8; background: #f8fafc; }
.bd-edit-card-btn i,
.bd-edit-card-btn svg { color: #FF6B2B; }
.bd-danger-btn { min-height: 38px; border: 1px solid #fecaca; color: #dc2626; background: #fff; padding: 9px 10px; }
.bd-danger-btn:hover { background: #fff1f2; }
.bd-inline-btn { justify-self: start; min-height: 34px; border: 1px solid #e2e8f0; color: #475569; background: #fff; padding: 8px 12px; }
.bd-inline-btn i,
.bd-inline-btn svg { color: #FF6B2B; }
.bd-align-box { margin-top: 10px; border: 1px solid #e8edf3; border-radius: 14px; background: #fbfcfe; padding: 10px; display: grid; gap: 8px; }
.bd-align-label { display: inline-flex; align-items: center; gap: 6px; color: #0f172a; font-size: 12px; font-weight: 900; line-height: 1.3; }
.bd-align-label--secondary { margin-top: 2px; color: #64748b; }
.bd-align-label i,
.bd-align-label svg { color: #FF6B2B; flex: 0 0 auto; }
.bd-align-box textarea { width: 100%; min-height: 58px; resize: vertical; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #334155; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.45; outline: none; padding: 9px 10px; }
.bd-align-box textarea:focus { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.14); }
.bd-align-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bd-align-hint { color: #94a3b8; font-size: 11px; font-weight: 600; line-height: 1.35; }
.bd-align-hint--compact { margin-top: 8px; text-align: center; }
.bd-align-hint.is-ok { color: #059669; }
.bd-align-hint.is-err { color: #dc2626; }
.bd-card-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15,23,42,.56);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.bd-card-editor-modal {
  width: min(920px, 100%);
  max-height: min(92vh, 760px);
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
  display: flex;
  flex-direction: column;
}
.bd-card-editor-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #edf2f7;
}
.bd-card-editor-title { color: #0f172a; font-size: 19px; font-weight: 900; line-height: 1.2; }
.bd-card-editor-sub { margin-top: 3px; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.35; }
.bd-card-editor-close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bd-card-editor-close:hover { background: #f1f5f9; color: #0f172a; }
.bd-card-editor-body {
  overflow-y: auto;
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(340px, 1fr);
  gap: 14px;
}
.bd-card-editor-preview,
.bd-card-editor-tools {
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: #fbfcfe;
  padding: 13px;
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
}
.bd-card-editor-tools { display: grid; gap: 9px; align-self: start; }
.bd-editor-current-card { margin-bottom: 7px; }
.bd-drag-editor { display: grid; gap: 8px; }
.bd-drag-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: linear-gradient(135deg,#eef6ff,#fff7ed);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.bd-drag-frame::before {
  content: "Đang tải ảnh nhân sự...";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg,#eef6ff,#fff7ed);
}
.bd-drag-frame.is-ready::before { content: ""; display: none; }
.bd-drag-frame.is-error::before { content: "Không tải được ảnh CBNV. Hãy đổi ảnh hoặc thử lại."; color: #dc2626; background: #fff7f7; }
.bd-drag-frame.is-dragging { cursor: grabbing; border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.12); }
.bd-drag-frame img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  object-fit: fill;
  will-change: transform,width,height;
  pointer-events: none;
  user-select: none;
}
.bd-drag-frame:not(.is-ready) img { visibility: hidden; }
.bd-drag-guide {
  position: absolute;
  inset: 12%;
  border: 2px dashed rgba(255,107,43,.76);
  border-radius: 999px;
  box-shadow: 0 0 0 999px rgba(15,23,42,.08) inset;
  pointer-events: none;
}
.bd-drag-controls { display: grid; grid-template-columns: 36px 56px 36px minmax(0,1fr); gap: 7px; align-items: center; }
.bd-mini-btn {
  height: 36px;
  width: 36px;
  border-radius: 11px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bd-mini-btn:hover { border-color: #FF6B2B; color: #FF6B2B; }
.bd-mini-btn svg { width: 15px; height: 15px; }
.bd-drag-zoom { text-align: center; color: #475569; font-size: 12px; font-weight: 900; }
.bd-drag-empty { border: 1px dashed #cbd5e1; border-radius: 13px; background: #fff; color: #94a3b8; padding: 14px; font-size: 12px; font-weight: 700; text-align: center; }
.bd-field { display: grid; gap: 6px; color: #475569; font-size: 12px; font-weight: 900; }
.bd-field span { color: #94a3b8; font-weight: 600; }
.bd-field select,
.bd-field textarea,
.bd-date-row input,
.bd-time-row input { width: 100%; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #334155; font: inherit; outline: none; }
.bd-field select { padding: 9px 10px; font-size: 13px; font-weight: 700; }
.bd-field textarea { min-height: 142px; resize: vertical; padding: 10px 12px; font-size: 13px; font-weight: 400; line-height: 1.5; }
.bd-wish-field {
  border: 1px solid #e8edf3;
  border-radius: 15px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
}
.bd-wish-field span { font-size: 11px; line-height: 1.35; }
.bd-field .bd-wish-textarea {
  min-height: 340px;
  max-height: 620px;
  padding: 14px 15px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.72;
  border-radius: 14px;
  overflow-y: auto;
}
.bd-field select:focus,
.bd-field textarea:focus,
.bd-date-row input:focus,
.bd-time-row input:focus { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.15); }
.bd-dispatch-row,
.bd-date-row,
.bd-time-row { display: grid; grid-template-columns: 116px minmax(0,1fr); align-items: center; gap: 8px 12px; }
.bd-date-row input,
.bd-time-row input { max-width: 190px; padding: 9px 10px; font-size: 13px; font-weight: 800; }
.bd-send-groups { display: grid; gap: 7px; }
.bd-send-group { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid #e2e8f0; border-radius: 13px; background: #fff; color: #475569; padding: 9px 10px; text-align: left; cursor: pointer; }
.bd-send-group > i,
.bd-send-group > svg { color: #94a3b8; flex: 0 0 auto; }
.bd-send-group span { display: grid; gap: 2px; min-width: 0; font-size: 13px; font-weight: 900; line-height: 1.2; }
.bd-send-group small { color: #94a3b8; font-size: 11px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.bd-send-group.is-active { border-color: #FF6B2B; background: #fff7f5; color: #FF6B2B; }
.bd-send-group.is-active > i,
.bd-send-group.is-active > svg { color: #FF6B2B; }
.bd-plan-note { border-radius: 12px; background: #f8fafc; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.45; padding: 9px 10px; }
.bd-save-btn { width: 100%; min-height: 44px; border: 0; background: linear-gradient(135deg,#FF6B2B,#f43f5e); color: #fff; box-shadow: 0 10px 20px rgba(244,63,94,.18); }
.bd-save-btn:hover { opacity: .95; }
.bd-save-btn:disabled { opacity: .65; cursor: wait; }
.bd-send-now-btn { width: 100%; min-height: 42px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; box-shadow: 0 8px 18px rgba(29,78,216,.08); }
.bd-send-now-btn:hover { border-color: #60a5fa; background: #dbeafe; color: #1e40af; }
.bd-send-now-btn:disabled { opacity: .65; cursor: wait; }
.bd-clear-btn { width: 100%; min-height: 30px; border: 0; background: transparent; color: #94a3b8; font-size: 12px; }
.bd-clear-btn:hover { color: #dc2626; }
@media (max-width: 860px) {
  .bd-modal-grid { grid-template-columns: 1fr; }
  .bd-card-editor-backdrop { align-items: flex-start; padding: 12px; overflow-y: auto; }
  .bd-card-editor-body { grid-template-columns: 1fr; }
  .bd-card-action-row,
  .bd-dispatch-row,
  .bd-date-row,
  .bd-time-row { grid-template-columns: 1fr; align-items: start; }
  .bd-photo-actions { grid-template-columns: 1fr; }
  .bd-flow-status { align-items: flex-start; flex-direction: column; }
  .bd-drag-controls { grid-template-columns: 36px 52px 36px; }
  .bd-drag-controls .bd-light-btn { grid-column: 1 / -1; }
  .bd-field .bd-wish-textarea { min-height: 250px; max-height: 460px; }
}

/* AI-MARK[QAI-UI:quik-work-awards] 2026-07-14 16:04 (GMT+7) —
   Tab Trao giải Quik Work: studio thiệp căn giữa/full width; từng Top có nhập điểm cạnh thay ảnh, popup Gửi ngay chứa soạn nội dung, preview Telegram, đính kèm và lịch gửi.
   Custom CSS để không phụ thuộc Tailwind purge. */
.qw-shell { display: grid; gap: 14px; }
.qw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #e8edf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
  padding: 16px 18px;
}
.qw-toolbar h2 { margin: 4px 0 3px; color: #0f172a; font-size: 24px; font-weight: 900; line-height: 1.15; letter-spacing: 0; }
.qw-toolbar p { margin: 0; color: #64748b; font-size: 13px; font-weight: 600; line-height: 1.45; }
.qw-kicker { display: inline-flex; align-items: center; gap: 6px; color: #FF6B2B; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.qw-months { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.qw-month {
  min-width: 118px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  color: #475569;
  padding: 9px 12px;
  text-align: left;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.qw-month span { display: block; font-size: 13px; font-weight: 900; line-height: 1.2; }
.qw-month small { display: block; margin-top: 3px; color: #94a3b8; font-size: 11px; font-weight: 700; line-height: 1.2; }
.qw-month:hover { border-color: #FF6B2B; }
.qw-month.is-active { border-color: transparent; color: #fff; background: linear-gradient(135deg,#FF6B2B,#f43f5e); box-shadow: 0 10px 24px rgba(244,63,94,.18); }
.qw-month.is-active small { color: rgba(255,255,255,.78); }
.qw-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; justify-items: center; }
.qw-grid--card-only { width: 100%; max-width: min(1500px,100%); margin: 0 auto; }
.qw-card-panel,
.qw-copy-panel {
  border: 1px solid #e8edf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
  padding: 15px;
}
.qw-card-panel--hero { width: 100%; max-width: min(1500px,100%); padding: 18px; }
.qw-card-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.qw-card-panel-head p { margin: 4px 0 0; color: #94a3b8; font-size: 12px; font-weight: 700; line-height: 1.45; }
.qw-open-send-btn { min-width: 148px; flex: 0 0 auto; }
.qw-card-prev { width: 100%; max-width: 1320px; margin: 0 auto; }
.qw-card-prev .bd-prev-card,
.qw-card-prev .bd-prev-card-wrap { width: 100%; border-radius: 18px; }
.qw-frame-strip { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr); gap: 10px; align-items: stretch; margin: 10px 0 12px; }
.qw-frame-thumb {
  display: grid;
  gap: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 7px;
  color: #64748b;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}
.qw-frame-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block; }
.qw-frame-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; align-content: stretch; }
.qw-frame-actions .bd-dark-btn { grid-column: 1 / -1; }
.qw-frame-actions .bd-light-btn,
.qw-frame-actions .bd-dark-btn { min-height: 42px; }
.qw-frame-actions button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.qw-ranks { display: grid; gap: 9px; }
.qw-rank-card {
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 9px;
}
.qw-rank-card.is-gold { border-color: #fcd34d; background: linear-gradient(180deg,#fffbeb,#fff); }
.qw-rank-card.is-silver { border-color: #bfdbfe; background: linear-gradient(180deg,#eff6ff,#fff); }
.qw-rank-card.is-bronze { border-color: #fed7aa; background: linear-gradient(180deg,#fff7ed,#fff); }
.qw-rank-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qw-rank-head span { display: inline-flex; align-items: center; gap: 6px; color: #0f172a; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.qw-rank-card.is-gold .qw-rank-head span svg { color: #d97706; }
.qw-rank-card.is-silver .qw-rank-head span svg { color: #2563eb; }
.qw-rank-card.is-bronze .qw-rank-head span svg { color: #ea580c; }
.qw-rank-tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.qw-score-field {
  min-height: 32px;
  border: 1px solid #dbe4ef;
  border-radius: 11px;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.qw-score-field span { color: #64748b; font-size: 10.5px; font-weight: 900; text-transform: none; }
.qw-score-field input {
  width: 56px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  outline: none;
}
.qw-score-field:focus-within { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.12); }
.qw-photo-btn,
.qw-edit-photo {
  min-height: 32px;
  border-radius: 11px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.qw-photo-btn { color: #2563eb; }
.qw-photo-btn:hover,
.qw-edit-photo:hover { border-color: #FF6B2B; color: #FF6B2B; }
.qw-edit-photo:disabled { opacity: .45; cursor: not-allowed; border-color: #e2e8f0; color: #94a3b8; }
.qw-rank-person { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 10px; align-items: center; }
.qw-rank-avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.9);
  background: linear-gradient(135deg,#0B5FFF,#FF6B2B);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.qw-rank-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qw-rank-person select {
  width: 100%;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 10px;
  outline: none;
}
.qw-rank-person select:focus { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.14); }
.qw-rank-person small { display: block; margin-top: 4px; color: #94a3b8; font-size: 11px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.qw-copy-panel { display: grid; gap: 11px; }
.qw-copy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qw-copy-head p { margin: -4px 0 0; color: #94a3b8; font-size: 12px; font-weight: 600; line-height: 1.35; }
.qw-message {
  width: 100%;
  min-height: 260px;
  max-height: 520px;
  resize: vertical;
  border: 1px solid #dbe4ef;
  border-radius: 15px;
  background: #fff;
  color: #1f2937;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  padding: 14px 15px;
  outline: none;
}
.qw-message:focus { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.14); }
.qw-message-preview {
  border: 1px solid #e8edf3;
  border-radius: 15px;
  background: #fbfcfe;
  padding: 12px 13px;
  color: #334155;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.qw-message-preview-label { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; margin-bottom: 7px; }
.qw-send-preview {
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  background: linear-gradient(180deg,#f8fbff,#fff);
  padding: 12px;
  color: #334155;
  display: grid;
  gap: 10px;
  min-height: 0;
  align-content: start;
}
.qw-send-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qw-send-preview-head span { display: inline-flex; align-items: center; gap: 7px; color: #0f172a; font-size: 13px; font-weight: 900; }
.qw-send-preview-head small { color: #64748b; font-size: 11px; font-weight: 800; text-align: right; }
.qw-send-card {
  width: min(360px,100%);
  border: 1px solid #cfe5ff;
  border-radius: 14px;
  background: #e8f3ff;
  padding: 6px;
  cursor: zoom-in;
  box-shadow: 0 8px 20px rgba(37,99,235,.08);
}
.qw-send-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.qw-send-card--empty {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  cursor: default;
}
.qw-telegram-bubble {
  max-width: 760px;
  border-radius: 18px 18px 18px 6px;
  background: #e8f3ff;
  border: 1px solid #cfe5ff;
  box-shadow: 0 8px 22px rgba(37,99,235,.08);
  padding: 13px 14px;
  color: #172033;
}
.qw-telegram-title { color: #0f172a; font-size: 14px; font-weight: 900; line-height: 1.35; margin-bottom: 8px; overflow-wrap: anywhere; }
.qw-telegram-body { white-space: pre-wrap; font-size: 13px; font-weight: 400; line-height: 1.62; overflow-wrap: anywhere; }
.qw-preview-placeholder { color: #94a3b8; font-weight: 700; }
.qw-attach-panel,
.qw-dispatch-panel {
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: #fbfcfe;
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.qw-attach-panel.is-drag { border-color: #FF6B2B; background: #fff7ed; }
.qw-attach-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qw-attach-head > div,
.qw-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
}
.qw-upload-btn {
  min-height: 34px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  color: #2563eb;
  padding: 7px 10px;
  cursor: pointer;
}
.qw-upload-btn:hover { border-color: #2563eb; background: #eff6ff; }
.qw-attach-msg,
.qw-send-msg { min-height: 16px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.qw-actions { display: grid; grid-template-columns: minmax(140px,.7fr) minmax(150px,.8fr) minmax(210px,1.25fr); gap: 10px; }
.qw-secondary,
.qw-primary {
  min-height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 900;
}
.qw-secondary {
  border: 1px solid #dbe4ef;
  background: #fff;
  color: #475569;
}
.qw-secondary:hover { border-color: #FF6B2B; color: #FF6B2B; }
.qw-primary {
  border: 1px solid transparent;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
  color: #fff;
  box-shadow: 0 12px 26px rgba(244,63,94,.18);
}
.qw-primary:hover { opacity: .95; }
.qw-primary:disabled,
.qw-secondary:disabled { opacity: .68; cursor: wait; }
.qw-send-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.44);
  padding: 18px;
  overflow: auto;
}
.qw-send-modal {
  width: min(1180px,calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
  overflow: hidden;
}
.qw-send-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #e8edf3;
  padding: 16px 18px;
  flex: 0 0 auto;
}
.qw-send-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(244,63,94,.18);
}
.qw-send-modal-title { color: #0f172a; font-size: 18px; font-weight: 900; line-height: 1.2; }
.qw-send-modal-sub { margin-top: 3px; color: #64748b; font-size: 12px; font-weight: 700; line-height: 1.45; }
.qw-send-modal-close {
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qw-send-modal-close:hover { border-color: #e2e8f0; color: #FF6B2B; background: #f8fafc; }
.qw-send-modal-body { padding: 16px; }
.qw-send-modal-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.82fr);
  gap: 14px;
  align-items: start;
}
.qw-copy-panel--modal {
  border: 1px solid #e8edf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
  padding: 14px;
  min-width: 0;
}
.qw-copy-panel--modal { display: grid; gap: 11px; }
.qw-send-preview-panel { min-width: 0; position: sticky; top: 0; align-self: start; }
#lylyModalHost .qw-send-modal .qw-message {
  min-height: 250px;
  max-height: 44vh;
}
.qw-drag-frame { aspect-ratio: 5 / 6; }
.qw-drag-guide {
  position: absolute;
  inset: 10%;
  border: 2px dashed rgba(255,107,43,.78);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(15,23,42,.08) inset;
  pointer-events: none;
}
@media (max-width: 980px) {
  .qw-toolbar,
  .qw-copy-head { align-items: flex-start; flex-direction: column; }
  .qw-card-panel-head { flex-direction: column; align-items: stretch; }
  .qw-open-send-btn { width: 100%; }
  .qw-send-modal-bg { align-items: flex-start; }
  .qw-send-modal-grid { grid-template-columns: 1fr; }
  .qw-send-preview-panel { position: static; }
}
@media (max-width: 640px) {
  .qw-card-panel--hero { padding: 12px; }
  .qw-frame-strip { grid-template-columns: 1fr; }
  .qw-rank-person { grid-template-columns: 46px minmax(0,1fr); }
  .qw-rank-avatar { width: 46px; height: 46px; border-radius: 14px; }
  .qw-message { min-height: 240px; }
  .qw-actions { grid-template-columns: 1fr; }
  .qw-send-modal-bg { padding: 10px; }
  .qw-send-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .qw-send-modal-head { padding: 13px 14px; }
  .qw-send-modal-body { padding: 12px; }
  .qw-send-preview-head,
  .qw-attach-head { align-items: flex-start; flex-direction: column; }
}

/* AI-MARK[QAI-UI:wall-newspaper-studio] 2026-07-15 11:06 (GMT+7) —
   Báo tường image-first: redesign control board thành issue setup + action dock rõ ưu tiên, Chọn tin và Thêm tin mở popup overlay toàn viewport; Thêm tin dùng rail + composer form thay vì form ngang thấp; gallery PNG mỗi tin = một ảnh AI hoá theo 4 khung trắng QuikFamily mới. */
#wallApp { min-height: 0; }
.wall-shell { display: grid; gap: 14px; width: min(100%,1760px); max-width: 100%; min-height: 0; margin: 0 auto; }
.wall-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#fff7ed 100%);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  padding: 16px 18px;
}
.wall-topbar-main { min-width: 0; }
.wall-kicker { display: inline-flex; align-items: center; gap: 6px; color: #2563eb; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; }
.wall-topbar h2 { margin: 4px 0 2px; color: #0f172a; font-size: 24px; font-weight: 900; line-height: 1.12; letter-spacing: 0; }
.wall-topbar p { margin: 0; color: #64748b; font-size: 13px; font-weight: 700; line-height: 1.45; }
.wall-topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wall-topbar-summary { min-width: min(560px,100%); max-width: 100%; }
.wall-metric {
  min-height: 42px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  color: #475569;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.wall-metric svg { color: #64748b; }
.wall-metric b { color: #0f172a; font-size: 13px; }
.wall-metric--source svg { color: #2563eb; }
.wall-metric--target svg { color: #059669; }
.wall-metric--file svg { color: #f97316; }
.wall-workspace { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; min-height: 0; }
.wall-compose-panel {
  border: 1px solid #e8edf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15,23,42,.06);
  padding: 16px;
  display: grid;
  gap: 14px;
  align-self: start;
  min-height: 0;
  contain: layout paint;
}
.wall-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wall-panel-head > div { display: inline-flex; align-items: center; gap: 8px; color: #0f172a; font-size: 15px; font-weight: 900; line-height: 1.2; }
.wall-panel-head > div svg { color: #FF6B2B; }
.wall-head-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.wall-source-controls,
.wall-editor-stack,
.wall-preview-stack { display: grid; gap: 11px; min-width: 0; min-height: 0; align-content: start; }
.wall-compose-main { display: grid; gap: 14px; min-width: 0; min-height: 0; align-items: start; }
.wall-command-panel {
  display: grid;
  border: 1px solid #e8edf3;
  border-radius: 20px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,250,252,.96)),
    radial-gradient(circle at 0 0,rgba(255,107,43,.1),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(37,99,235,.1),transparent 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 32px rgba(15,23,42,.06);
  padding: 14px;
  grid-template-columns: minmax(0,1fr) minmax(280px,.26fr);
  gap: 14px;
  align-items: stretch;
  overflow: hidden;
}
.wall-command-fields {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: end;
}
.wall-command-group {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: end;
}
.wall-command-group--setup { grid-template-columns: minmax(0,.92fr) minmax(0,.72fr) minmax(0,.88fr); }
.wall-command-focus { min-width: 0; }
.wall-setting-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  padding: 10px;
}
.wall-setting-card > small {
  min-height: 16px;
  color: #94a3b8;
  display: block;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}
.wall-setting-card--month { border-color: #fed7aa; background: #fffaf5; }
.wall-command-actions {
  justify-self: stretch;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) 48px;
  gap: 9px;
  align-items: stretch;
}
.wall-command-actions > * { width: 100%; }
#wallCardsBtn { grid-column: 1; grid-row: 1; }
.wall-refresh-btn { grid-column: 2; grid-row: 1; }
.wall-pick-btn { grid-column: 1 / -1; grid-row: 2; }
.wall-add-news-btn { grid-column: 1 / -1; grid-row: 3; }
.wall-command-panel svg { width: 16px; height: 16px; }
.wall-source-toggle {
  min-width: 0;
  border: 1px solid #dbe4ef;
  background: #fff;
  color: #475569;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 9px;
  font-weight: 900;
  min-height: 52px;
  border-radius: 14px;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.wall-source-toggle span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.wall-source-toggle strong {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
}
.wall-source-toggle small {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.15;
}
.wall-source-toggle b {
  flex: 0 0 auto;
  min-width: 38px;
  border-radius: 999px;
  background: #fff7ed;
  color: #f97316;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.35;
}
.wall-source-toggle[aria-expanded="true"],
.wall-source-toggle:hover { border-color: #FF6B2B; color: #FF6B2B; background: #fff7ed; }
.wall-pick-btn { justify-content: space-between; }
.wall-add-news-btn { color: #2563eb; }
.wall-add-news-btn { grid-template-columns: auto minmax(0,1fr); }
.wall-add-news-btn[aria-expanded="true"],
.wall-add-news-btn:hover { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.wall-refresh-btn {
  min-width: 48px;
  min-height: 58px;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0;
  aspect-ratio: 1 / 1;
  border-color: #bfdbfe;
  background: linear-gradient(180deg,#ffffff,#eff6ff);
  color: #2563eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(37,99,235,.08);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.wall-refresh-btn span,
.wall-refresh-btn b { display: none; }
.wall-refresh-btn svg { width: 18px; height: 18px; }
.wall-refresh-btn:hover,
.wall-refresh-btn:focus-visible {
  border-color: #60a5fa;
  background: #eff6ff;
  color: #1d4ed8;
  transform: translateY(-1px);
}
.wall-add-news-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1202;
  place-items: center;
  padding: clamp(14px,2vw,28px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
.wall-workspace.is-add-open .wall-add-news-panel,
.wall-add-news-panel.is-open { display: grid; }
.wall-add-news-scrim { background: rgba(15,23,42,.46); }
.wall-add-news-dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100dvh - 28px);
  min-height: min(680px, calc(100dvh - 28px));
  display: grid;
  grid-template-columns: minmax(260px,.32fr) minmax(0,1fr);
  border: 1px solid rgba(191,219,254,.95);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15,23,42,.28);
  min-width: 0;
  overflow: hidden;
}
.wall-add-news-rail {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  align-content: start;
  gap: 22px;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  border-right: 1px solid #dbeafe;
  background: linear-gradient(155deg,#fff7ed 0%,#ffffff 46%,#eff6ff 100%);
  overflow: hidden;
}
.wall-add-news-mark {
  width: 48px;
  height: 48px;
  border: 1px solid #fed7aa;
  border-radius: 16px;
  background: #fff;
  color: #FF6B2B;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(255,107,43,.12);
}
.wall-add-news-rail-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.wall-add-news-rail-copy span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
}
.wall-add-news-rail-copy h3 {
  margin: 0;
  color: #0f172a;
  font-size: 26px;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
}
.wall-add-news-rail-copy p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}
.wall-add-news-flow {
  align-self: end;
  display: grid;
  gap: 9px;
  min-width: 0;
}
.wall-add-news-flow span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(219,234,254,.95);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: #475569;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.wall-add-news-flow svg { color: #2563eb; flex: 0 0 auto; }
.wall-add-news-main {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 22px 24px 18px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}
.wall-add-news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid #e8edf3;
  padding-bottom: 16px;
}
.wall-add-news-head > div { min-width: 0; display: grid; gap: 3px; }
.wall-add-news-head span {
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}
.wall-add-news-head span svg { color: #FF6B2B; }
.wall-add-news-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.wall-add-news-head b {
  flex: 0 0 auto;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #15803d;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}
.wall-add-news-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.wall-add-news-grid {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 16px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 2px;
  overscroll-behavior: contain;
}
.wall-new-title-field input {
  min-height: 54px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 750;
}
.wall-new-body-field {
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(260px,1fr);
}
.wall-add-news-panel textarea {
  min-height: clamp(300px, 48dvh, 520px);
  max-height: none;
  font-size: 13px;
  font-weight: 400;
  resize: none;
}
.wall-add-news-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 9px;
  align-items: center;
  border-top: 1px solid #e8edf3;
  padding-top: 14px;
  background: linear-gradient(180deg,rgba(255,255,255,.72),#fff);
}
.wall-add-news-actions span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.wall-source-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  place-items: center;
  padding: clamp(12px,2vw,24px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
.wall-workspace.is-source-open .wall-source-panel { display: grid; }
.wall-source-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
}
.wall-source-dialog {
  position: relative;
  z-index: 1;
  width: min(1560px, calc(100vw - 32px));
  max-height: calc(100dvh - 28px);
  min-height: min(740px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: 11px;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background: linear-gradient(180deg,#f8fbff,#fff);
  box-shadow: 0 28px 72px rgba(15,23,42,.22);
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}
.wall-field { display: grid; gap: 7px; min-width: 0; }
.wall-field span,
.wall-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.wall-field span svg,
.wall-section-label svg { color: #64748b; flex: 0 0 auto; }
.wall-field input,
.wall-field textarea,
.wall-field select {
  width: 100%;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  padding: 11px 12px;
  outline: none;
}
.wall-field textarea { resize: vertical; min-height: 86px; }
.wall-field input:focus,
.wall-field textarea:focus,
.wall-field select:focus { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.14); }
.wall-command-panel .wall-field input,
.wall-command-panel .wall-field select {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 700;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 13px;
}
.wall-command-panel .wall-field input {
  min-height: 46px;
  border-radius: 14px;
  padding-left: 12px;
  padding-right: 12px;
}
.wall-command-panel .wall-field textarea { min-height: 46px; max-height: 74px; font-size: 13px; }
.wall-command-actions .wall-compose-ai {
  min-height: 62px;
  justify-content: start;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  padding-left: 13px;
  padding-right: 13px;
}
.wall-command-actions .wall-compose-ai span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}
.wall-command-actions .wall-compose-ai strong {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}
.wall-command-actions .wall-compose-ai small {
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}
.wall-compose-ai,
.wall-primary {
  min-width: 0;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
  color: #fff;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  box-shadow: 0 10px 24px rgba(244,63,94,.18);
}
.wall-image-btn { white-space: nowrap; }
.wall-image-btn svg,
.wall-image-btn i { flex: 0 0 auto; }
.wall-compose-ai:hover,
.wall-primary:hover { opacity: .95; }
.wall-compose-ai:disabled,
.wall-primary:disabled { opacity: .68; cursor: wait; }
.wall-spin { animation: wall-spin .9s linear infinite; }
@keyframes wall-spin { to { transform: rotate(360deg); } }
.wall-msg { min-height: 20px; font-size: 12px; font-weight: 800; line-height: 1.4; }
.wall-msg > span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: #f8fafc;
  padding: 2px 8px;
}
.wall-source-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.wall-source-dropdown-head > div { min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: #0f172a; font-size: 13px; font-weight: 900; }
.wall-source-dropdown-head > div small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.wall-source-dropdown-head svg { color: #FF6B2B; }
.wall-source-dropdown-head small { color: #64748b; font-size: 11px; font-weight: 800; text-align: right; }
.wall-source-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.wall-source-head-actions > b {
  flex: 0 0 auto;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #f97316;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}
.wall-source-close {
  width: 34px;
  height: 34px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wall-source-close:hover,
.wall-source-close:focus-visible {
  border-color: #fb7185;
  background: #fff1f2;
  color: #e11d48;
}
.wall-select-tools {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
}
.wall-select-tools span { color: #64748b; font-size: 12px; font-weight: 800; line-height: 1.35; text-align: right; }
.wall-source-scroll {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
}
.wall-mini-btn {
  min-height: 32px;
  border: 1px solid #dbe4ef;
  border-radius: 11px;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}
.wall-mini-btn:hover { border-color: #FF6B2B; color: #FF6B2B; background: #fff7ed; }
.wall-mini-btn:disabled { opacity: .55; cursor: not-allowed; }
.wall-mini-btn--hot { border-color: #fed7aa; color: #f97316; background: #fff7ed; }
.wall-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(100%,1fr));
  gap: 8px;
  max-height: none;
  min-height: 0;
  overflow: visible;
  contain: layout paint;
}
.wall-news-table { align-items: start; }
.wall-news-row {
  display: grid;
  grid-template-columns: 34px minmax(132px,.44fr) minmax(280px,1.35fr) minmax(150px,.52fr) minmax(180px,.72fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.wall-news-row--head {
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #eff6ff;
  color: #475569;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}
.wall-news-item {
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #fff;
  color: #0f172a;
  padding: 11px 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wall-news-item:hover { border-color: #bfdbfe; background: #f8fbff; transform: translateY(-1px); }
.wall-news-item.is-selected { border-color: #FF8A4C; background: #fff7ed; box-shadow: 0 8px 18px rgba(255,107,43,.1); }
.wall-news-item input { position: absolute; opacity: 0; pointer-events: none; }
.wall-news-check {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  border: 1px solid #dbe4ef;
  background: #fff;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wall-news-item.is-selected .wall-news-check { border-color: #FF6B2B; background: #FF6B2B; color: #fff; }
.wall-news-copy { min-width: 0; display: grid; gap: 4px; }
.wall-news-copy strong { color: #0f172a; font-size: 13px; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wall-news-copy small {
  color: #64748b;
  display: -webkit-box;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.42;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.wall-news-copy em { color: #2563eb; font-style: normal; font-size: 11px; font-weight: 900; }
.wall-news-time,
.wall-news-targets,
.wall-news-attachments { min-width: 0; }
.wall-news-time { display: grid; gap: 3px; color: #334155; }
.wall-news-time b { font-size: 12px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.wall-news-time em { color: #64748b; font-size: 11px; font-style: normal; font-weight: 800; line-height: 1.25; }
.wall-news-targets {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.wall-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.wall-source-badge--sent { background: #ecfdf5; color: #047857; }
.wall-source-badge--bot { background: #fff7ed; color: #f97316; }
.wall-source-badge--sheet { background: #eff6ff; color: #2563eb; }
.wall-source-badge--manual { background: #eef2ff; color: #4f46e5; }
.wall-muted-cell { color: #94a3b8; font-size: 12px; font-weight: 800; }
.wall-attachment-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.wall-attachment-thumb {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe4ef;
  border-radius: 11px;
  background: #f8fafc;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wall-attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-attachment-thumb.is-broken::after { content: 'Ảnh'; color: #94a3b8; font-size: 10px; font-weight: 900; }
.wall-file-chip,
.wall-link-chip {
  max-width: 128px;
  min-height: 26px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wall-link-chip { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.wall-news-remove {
  min-height: 28px;
  border-color: #fecaca;
  color: #dc2626;
  background: #fff;
}
.wall-news-remove:hover {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}
.wall-empty-source {
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #94a3b8;
  background: #f8fafc;
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.wall-card-studio {
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: linear-gradient(180deg,#f8fbff,#fff);
  box-shadow: 0 8px 22px rgba(37,99,235,.06);
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  contain: layout paint;
}
.wall-card-studio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wall-card-studio-head--actions-only { justify-content: flex-end; }
.wall-card-studio-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.wall-card-studio-head small { color: #64748b; font-size: 11px; font-weight: 800; line-height: 1.3; }
.wall-card-studio-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wall-card-gallery { min-width: 0; }
.wall-workspace.is-rendering .wall-command-panel,
.wall-workspace.is-rendering .wall-card-studio {
  border-color: #fed7aa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 14px 34px rgba(249,115,22,.09);
}
.wall-card-loading {
  border: 1px dashed #fed7aa;
  border-radius: 16px;
  background: linear-gradient(180deg,#fffaf5,#ffffff);
  display: grid;
  gap: 13px;
  padding: 14px;
  min-height: 212px;
  align-content: center;
}
.wall-card-loading-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.wall-card-loading-head span {
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}
.wall-card-loading-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}
.wall-card-loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 11px;
}
.wall-card-skeleton {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: linear-gradient(110deg,#f8fafc 0%,#eef4ff 42%,#fff7ed 58%,#f8fafc 100%);
  overflow: hidden;
}
.wall-card-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation: wall-shimmer 1.35s ease-in-out infinite;
}
.wall-card-skeleton b {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #fff7ed;
  color: #f97316;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
}
@keyframes wall-shimmer {
  100% { transform: translateX(100%); }
}
.wall-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 12px;
  align-items: start;
}
.wall-card-tile {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
  overflow: hidden;
  min-width: 0;
  position: relative;
}
.wall-card-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(248,113,113,.38);
  border-radius: 11px;
  background: rgba(255,255,255,.94);
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 8px 18px rgba(15,23,42,.14);
}
.wall-card-remove:hover {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}
.wall-card-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #eff6ff;
  display: block;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
}
.wall-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wall-card-meta {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 3px 8px;
  align-items: start;
  padding: 10px 11px 11px;
}
.wall-card-meta span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #fff7ed;
  color: #f97316;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
}
.wall-card-meta b {
  min-width: 0;
  color: #0f172a;
  display: -webkit-box;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.35;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.wall-card-meta small {
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
}
.wall-card-empty {
  min-height: 126px;
  border: 1px dashed #bfdbfe;
  border-radius: 15px;
  background: #fff;
  color: #64748b;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 16px;
  text-align: center;
}
.wall-card-empty svg { color: #2563eb; }
.wall-card-empty b { color: #0f172a; font-size: 13px; font-weight: 900; }
.wall-card-empty span { max-width: 520px; font-size: 12px; font-weight: 800; line-height: 1.45; }
.wall-card-msg { min-height: 18px; font-size: 12px; font-weight: 800; line-height: 1.4; }
.wall-image-send {
  border: 1px solid #e8edf3;
  border-radius: 18px;
  background: #fbfcfe;
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 12px;
}
.wall-editor-toolbar {
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: #fbfcfe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}
.wall-editor-toolbar > div { display: grid; gap: 3px; min-width: 0; }
.wall-editor-toolbar small { color: #64748b; font-size: 11px; font-weight: 800; line-height: 1.25; }
.wall-editor-chip {
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #f97316;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.wall-body-field { min-height: 0; }
.wall-body { min-height: 300px; max-height: 500px; font-weight: 400; }
.wall-publish-rail { display: grid; gap: 11px; min-width: 0; align-content: start; }
.wall-live-preview {
  border: 1px solid #cfe5ff;
  border-radius: 18px;
  background: linear-gradient(180deg,#f8fbff,#fff);
  padding: 12px;
  color: #334155;
  display: grid;
  gap: 10px;
  min-height: 0;
  align-content: start;
}
.wall-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wall-preview-head span { display: inline-flex; align-items: center; gap: 7px; color: #0f172a; font-size: 13px; font-weight: 900; }
.wall-preview-head small { color: #64748b; font-size: 11px; font-weight: 800; text-align: right; }
.wall-telegram-bubble {
  max-width: none;
  border-radius: 18px 18px 18px 6px;
  background: #e8f3ff;
  border: 1px solid #cfe5ff;
  box-shadow: 0 8px 22px rgba(37,99,235,.08);
  padding: 13px 14px;
  color: #172033;
}
.wall-preview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
  gap: 7px;
  margin-bottom: 10px;
}
.wall-preview-card {
  aspect-ratio: 16 / 9;
  border: 1px solid #bfdbfe;
  border-radius: 11px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
}
.wall-preview-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wall-preview-card-more {
  min-height: 42px;
  border: 1px dashed #bfdbfe;
  border-radius: 11px;
  background: rgba(255,255,255,.7);
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}
.wall-telegram-title { color: #0f172a; font-size: 14px; font-weight: 900; line-height: 1.35; margin-bottom: 8px; overflow-wrap: anywhere; }
.wall-telegram-body { white-space: pre-wrap; font-size: 13px; font-weight: 400; line-height: 1.62; overflow-wrap: anywhere; }
.wall-preview-placeholder { color: #94a3b8; font-weight: 700; }
.wall-preview-loading {
  min-height: 64px;
  border: 1px dashed #bfdbfe;
  border-radius: 13px;
  background: rgba(255,255,255,.62);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
}
.wall-attach-panel,
.wall-dispatch-panel {
  border: 1px solid #e8edf3;
  border-radius: 18px;
  background: #fbfcfe;
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.wall-dispatch-panel .ann-post-row {
  border-radius: 14px;
  background: #fff;
}
.wall-attach-panel.is-drag { border-color: #FF6B2B; background: #fff7ed; }
.wall-attach-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wall-attach-head > div,
.wall-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
}
.wall-upload-btn {
  min-height: 34px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  color: #2563eb;
  padding: 7px 10px;
  cursor: pointer;
}
.wall-upload-btn:hover { border-color: #2563eb; background: #eff6ff; }
.wall-attach-msg { min-height: 16px; font-size: 12px; font-weight: 700; }
.wall-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.wall-secondary {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
.wall-secondary:hover { border-color: #FF6B2B; color: #FF6B2B; }
.wall-primary {
  grid-column: 1 / -1;
  min-height: 48px;
}
.wall-source-error {
  min-height: 220px;
  border: 1px solid #fed7aa;
  border-radius: 18px;
  background: #fff7ed;
  color: #9a3412;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
.wall-source-error b { display: block; color: #0f172a; font-size: 16px; font-weight: 900; margin-bottom: 4px; }
.wall-source-error span { display: block; color: #9a3412; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.wall-source-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #fff;
  color: #f97316;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
@media (min-width: 1081px) {
  .wall-compose-main { grid-template-columns: minmax(520px,1fr) minmax(410px,.78fr); }
  .wall-image-send { grid-template-columns: minmax(360px,.8fr) minmax(420px,1fr); align-items: start; }
  .wall-image-send .wall-live-preview { grid-row: span 2; }
  .wall-image-send .wall-actions { grid-column: 2; }
  .wall-body { min-height: 420px; height: clamp(420px, 50dvh, 620px); max-height: none; }
  .wall-live-preview .wall-telegram-body { max-height: none; overflow: visible; }
  .wall-dispatch-panel { grid-template-columns: minmax(0,1fr); align-items: start; }
  .wall-dispatch-panel .ann-post-row { grid-template-columns: 102px minmax(0,1fr); align-items: start; }
}
@media (min-width: 1081px) and (max-width: 1280px) {
  .wall-command-panel { grid-template-columns: minmax(0,1fr) minmax(260px,.32fr); }
  .wall-command-fields { grid-template-columns: minmax(0,1fr); }
  .wall-command-group--setup { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .wall-command-actions { grid-template-columns: minmax(0,1fr) 48px; }
}
@media (max-width: 1080px) {
  .wall-workspace { grid-template-columns: 1fr; }
  .wall-topbar-summary { min-width: 0; }
  .wall-command-panel { grid-template-columns: 1fr; }
  .wall-command-fields { grid-template-columns: 1fr; }
  .wall-command-group--setup { grid-template-columns: 1fr; }
  .wall-command-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 48px; }
  #wallCardsBtn { grid-column: 1 / 3; grid-row: 1; }
  .wall-refresh-btn { grid-column: 3; grid-row: 1; }
  .wall-pick-btn { grid-column: 1; grid-row: 2; }
  .wall-add-news-btn { grid-column: 2 / 4; grid-row: 2; }
  .wall-image-send { grid-template-columns: 1fr; }
  .wall-compose-main { grid-template-columns: 1fr; }
  .wall-news-row { grid-template-columns: 34px minmax(116px,.46fr) minmax(220px,1fr); }
  .wall-news-row--head span:nth-child(4),
  .wall-news-row--head span:nth-child(5),
  .wall-news-targets,
  .wall-news-attachments { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .wall-topbar { align-items: flex-start; flex-direction: column; }
  .wall-topbar-actions { justify-content: flex-start; }
  .wall-topbar-summary { width: 100%; display: grid; grid-template-columns: 1fr; }
  .wall-panel-head,
  .wall-editor-toolbar,
  .wall-card-studio-head { align-items: flex-start; flex-direction: column; }
  .wall-head-actions { justify-content: flex-start; }
  .wall-card-studio-actions { justify-content: flex-start; }
  .wall-add-news-head { align-items: flex-start; flex-direction: column; }
  .wall-add-news-head-actions { width: 100%; justify-content: space-between; }
  .wall-add-news-grid { grid-template-rows: auto minmax(0,1fr); }
  .wall-add-news-actions { grid-template-columns: 1fr; }
  .wall-select-tools,
  .wall-source-dropdown-head,
  .wall-actions { grid-template-columns: 1fr; }
  .wall-source-dropdown-head { align-items: flex-start; flex-direction: column; }
  .wall-source-dialog {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
    min-height: min(620px, calc(100dvh - 22px));
    border-radius: 18px;
    padding: 11px;
  }
  .wall-add-news-dialog {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 18px;
  }
  .wall-add-news-rail {
    grid-template-rows: auto auto;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid #dbeafe;
    padding: 16px;
  }
  .wall-add-news-mark { width: 42px; height: 42px; border-radius: 14px; }
  .wall-add-news-rail-copy h3 { font-size: 20px; }
  .wall-add-news-flow {
    align-self: start;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .wall-add-news-main {
    padding: 14px;
  }
  .wall-add-news-panel textarea { min-height: 220px; }
  .wall-source-head-actions { width: 100%; justify-content: space-between; }
  .wall-select-tools span { text-align: left; }
  .wall-body { min-height: 320px; }
  .wall-source-error { align-items: flex-start; flex-direction: column; }
  .wall-primary { grid-column: auto; }
  .wall-news-row--head { display: none; }
  .wall-news-row { grid-template-columns: 34px minmax(0,1fr); align-items: start; }
  .wall-news-time,
  .wall-news-copy,
  .wall-news-targets,
  .wall-news-attachments { grid-column: 2; }
  .wall-news-targets::before,
  .wall-news-attachments::before {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 4px;
  }
  .wall-news-targets::before { content: 'Nhóm nhận'; }
  .wall-news-attachments::before { content: 'Ảnh / file'; }
}
@media (max-width: 520px) {
  .wall-command-actions { grid-template-columns: minmax(0,1fr) 46px; }
  #wallCardsBtn { grid-column: 1; grid-row: 1; }
  .wall-refresh-btn { grid-column: 2; grid-row: 1; }
  .wall-pick-btn { grid-column: 1 / -1; grid-row: 2; }
  .wall-add-news-btn { grid-column: 1 / -1; grid-row: 3; }
  .wall-source-toggle b { min-width: 34px; padding-left: 6px; padding-right: 6px; }
  .wall-setting-card,
  .wall-add-news-dialog { border-radius: 14px; }
}

/* ── AI-MARK[QAI-UI:lyly-competitors] 2026-06-30 11:27 (GMT+7) — Competitor Intel tab CSS: loading skeleton, ci-card, ci-sov-bar, ci-note, empty-state | rel: UI-L4-Lyly, lyly.js viewCompetitors */

/* Skeleton loading shimmer */
.ci-skeleton { border-radius: 16px; background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%); background-size: 200% 100%; animation: ci-shimmer 1.4s infinite; }
@keyframes ci-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Competitor card */
.ci-card { border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(2,6,23,.06); margin-bottom: 0; overflow: hidden; }
.ci-card-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 10px; }
.ci-avatar { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#0B5FFF,#FF6B2B); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow:hidden; text-align:center; line-height:1; }
.ci-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ci-name { font-size: 16px; line-height: 1.32; font-weight: 800; color: #0f172a; overflow-wrap: anywhere; }
.ci-meta { font-size: 12px; line-height: 1.4; color: #64748b; }
.ci-card-body { padding: 2px 20px 18px 78px; display: grid; gap: 10px; }

/* SOV bar */
.ci-sov-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ci-sov-label { font-size: 11px; font-weight: 600; color: #94a3b8; width: 60px; flex-shrink: 0; }
.ci-sov-track { flex: 1; height: 8px; border-radius: 99px; background: #f1f5f9; overflow: hidden; }
.ci-sov-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,#0B5FFF,#FF6B2B); }
.ci-sov-val { font-size: 12px; font-weight: 700; color: #0f172a; width: 36px; text-align: right; flex-shrink: 0; }

/* Insight note */
.ci-note { font-size: 13px; color: #475569; background: #f8fafc; border-radius: 10px; padding: 11px 13px; line-height: 1.55; }

/* Campaign tag */
.ci-tag { display: inline-flex; align-items: center; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 9px; background: #fef3c7; color: #b45309; }

/* Divider inside card */
.ci-divider { height: 1px; background: #f1f5f9; margin: 8px 0; }

/* ── AI-MARK[QAI-UI:lyly-products] 2026-06-30 11:27 (GMT+7) — Products sub-tab CSS: prod-card, note-row, empty state; read-only badge | rel: UI-L4-Lyly, lyly.js viewKnowledge/kbRenderList */

/* Product catalog card */
.prod-card { border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(2,6,23,.06); padding: 14px 16px; margin-bottom: 8px; }
.prod-card-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.prod-card-cat { font-size: 11px; color: #64748b; margin-top: 2px; }
.prod-card-desc { font-size: 13px; color: #475569; margin-top: 6px; line-height: 1.5; }

/* /note row */
.prod-note-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; }
.prod-note-row:last-child { border-bottom: none; }
.prod-note-icon { width: 28px; height: 28px; border-radius: 8px; background: #fff7f5; color: #FF6B2B; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.prod-note-body { flex: 1; min-width: 0; }
.prod-note-text { font-size: 13px; color: #0f172a; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.prod-note-meta { font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* Read-only badge */
.prod-readonly-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 9px; background: #f1f5f9; color: #64748b; }

/* ── AI-MARK[QAI-UI:lyly-groups] 2026-06-30 12:19 (GMT+7) — Tab Nhóm CSS: grp-card, source-row, group-row, learned-row, badges | rel: UI-L4-Lyly, lyly.js viewGroups */

/* Card wrapper (phẳng, brand style) */
.grp-card {
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(2,6,23,.06);
  overflow: hidden;
}
.grp-card--muted { background: #f8fafc; }

/* Card header row */
.grp-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.grp-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

/* Card description text */
.grp-card-desc {
  font-size: 12px;
  color: #64748b;
  padding: 8px 16px 10px;
  line-height: 1.5;
}

/* Groups list (nhóm Lyly tham gia) */
.grp-groups-list {
  divide-y: 1px solid #f1f5f9;
}
/* AI-MARK[QAI-UI:group-mgmt] 2026-07-01 17:11 (GMT+7) — .grp-group-row-wrap bọc row+panel cài đặt (đường viền dưới nay ở wrapper, không phải row, để panel không bị tách khỏi hàng của nó) | rel: lyly.js grpLoadGroups */
.grp-group-row-wrap { border-bottom: 1px solid #f8fafc; }
.grp-group-row-wrap:last-child { border-bottom: none; }
.grp-group-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
}
.grp-group-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.grp-group-body { flex: 1; min-width: 0; }
.grp-group-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.grp-group-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.grp-group-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex-shrink: 0; margin-top: 2px; }

/* Sources list (lyly_learn_sources) */
.grp-source-list { }
.grp-source-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f8fafc;
}
.grp-source-row:last-child { border-bottom: none; }
.grp-source-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff7f5;
  color: #FF6B2B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.grp-source-body { flex: 1; min-width: 0; }
.grp-source-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.grp-source-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.grp-source-date { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.grp-source-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
  flex-wrap: wrap;
}

/* Icon action buttons */
.grp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.grp-icon-btn:hover { background: #e2e8f0; color: #0f172a; }
.grp-icon-btn--blue { background: #e0f2fe; color: #0369a1; }
.grp-icon-btn--blue:hover { background: #bae6fd; color: #0c4a6e; }
.grp-icon-btn--red:hover { background: #fff1f2; color: #e11d48; }

/* Status pills */
.grp-active-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: #dcfce7;
  color: #15803d;
}
.grp-inactive-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: #f1f5f9;
  color: #64748b;
}

/* Learn badge (nhóm đang học từ user) */
.grp-learn-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: #fff7f5;
  color: #FF6B2B;
  border: 1px solid #fed7aa;
}

/* Source name tag (trong header "Tin đã học") */
.grp-src-name-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  margin-left: 4px;
}

/* Soon badge (Phần B placeholder) */
.grp-soon-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  background: #fef3c7;
  color: #b45309;
  margin-left: auto;
}

/* Empty state */
.grp-empty {
  padding: 32px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* Section header inside learned list */
.grp-section-hd {
  padding: 8px 16px 4px;
}
.grp-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Learned message list */
.grp-learned-list { }
.grp-learned-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.grp-learned-row:last-child { border-bottom: none; }
.grp-learned-row--ann { background: #f0fdf4; }
.grp-learned-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.grp-learned-row--ann .grp-learned-icon { background: #dcfce7; color: #15803d; }
.grp-learned-body { flex: 1; min-width: 0; }
.grp-learned-text {
  font-size: 13px;
  color: #0f172a;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.grp-learned-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

/* AI-MARK[QAI-UI:knowledge-group-learning] 2026-07-03 12:14 (GMT+7) — Tri thức > Học từ nhóm: pipeline nguồn học/feedback/lịch gợi ý; class viết tay vì lyly-tailwind.css purge class mới | rel: lyly.js viewLearn/grpRenderSources/grpRenderLearned */
.gl-board { display: grid; gap: 14px; }
.gl-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.gl-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF6B2B, #f43f5e);
  color: #fff;
}
.gl-hero-main { min-width: 0; }
.gl-hero-title { color: #0f172a; font-size: 16px; font-weight: 900; line-height: 1.25; }
.gl-hero-flow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.gl-hero-flow span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 800;
}
.gl-hero-flow svg { color: #FF6B2B; }
.gl-primary-btn,
.gl-light-btn,
.gl-action,
.gl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.gl-primary-btn {
  min-height: 38px;
  border: 0;
  background: linear-gradient(135deg, #FF6B2B, #f43f5e);
  color: #fff;
  padding: 8px 14px;
  box-shadow: 0 6px 14px rgba(255,107,43,.22);
}
.gl-primary-btn:hover { opacity: .94; }
.gl-light-btn {
  min-height: 34px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  padding: 7px 11px;
}
.gl-light-btn:hover,
.gl-light-btn.is-active { border-color: #FF6B2B; background: #fff7f5; color: #FF6B2B; }
.gl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gl-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid #e8edf3;
  border-radius: 13px;
  background: #fff;
  padding: 9px 11px;
  box-shadow: 0 1px 2px rgba(15,23,42,.035);
}
.gl-stat svg { color: #FF6B2B; }
.gl-stat span { color: #64748b; font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-stat b { color: #0f172a; font-size: 18px; line-height: 1; }
.gl-workspace { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr); gap: 14px; align-items: start; }
.gl-panel {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}
.gl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.gl-head-actions { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.gl-panel-head > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}
.gl-panel-head svg { color: #FF6B2B; flex: none; }
.gl-panel-sub { color: #64748b; font-size: 12.5px; line-height: 1.45; padding: 0 14px 11px; }
.gl-feed-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px 12px;
}
.gl-feed-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #94a3b8;
  padding: 0 11px;
}
.gl-feed-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 650;
}
.gl-feed-search input::placeholder { color: #a8b3c7; }
.gl-scan-msg { min-height: 18px; color: #94a3b8; font-size: 12px; font-weight: 700; text-align: right; }
.gl-scan-msg .is-ok { color: #059669; }
.gl-scan-msg .is-err { color: #e11d48; }
.gl-source-list { display: grid; gap: 9px; padding: 0 12px 12px; }
.gl-source-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}
.gl-source-card.is-selected { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.12); }
.gl-source-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gl-source-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff7f5;
  color: #FF6B2B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gl-source-body { min-width: 0; }
.gl-source-name { color: #0f172a; font-size: 14px; line-height: 1.25; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-source-meta { color: #64748b; font-size: 12.5px; margin-top: 2px; }
.gl-source-meta code { background: #f1f5f9; border-radius: 6px; padding: 1px 6px; color: #64748b; }
.gl-source-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gl-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 22px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 750;
}
.gl-chip svg { color: #94a3b8; flex: none; }
.gl-source-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-width: 220px; }
.gl-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 850;
}
.gl-status.is-on { background: #dcfce7; color: #15803d; }
.gl-status.is-off { background: #f1f5f9; color: #64748b; }
.gl-action {
  min-height: 32px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 6px 10px;
}
.gl-action:hover { border-color: #93c5fd; background: #dbeafe; }
.gl-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  padding: 0;
}
.gl-icon-btn:hover { border-color: #FF6B2B; color: #FF6B2B; background: #fff7f5; }
.gl-icon-btn--danger:hover { border-color: #fecaca; color: #e11d48; background: #fff1f2; }
.gl-scope-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 220px;
  border-radius: 999px;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gl-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 150px;
  padding: 26px 18px;
  text-align: center;
  color: #94a3b8;
}
.gl-empty svg { color: #cbd5e1; }
.gl-empty-title { color: #64748b; font-size: 13px; font-weight: 850; }
.gl-empty-sub { color: #94a3b8; font-size: 12.5px; line-height: 1.45; max-width: 360px; }
.gl-feed-loading { display: grid; gap: 8px; place-items: center; min-height: 160px; color: #94a3b8; font-size: 13px; font-weight: 700; }
.gl-feed-list { display: grid; }
.gl-section-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
}
.gl-section-hd--gap { border-top: 1px solid #f1f5f9; margin-top: 4px; }
.gl-section-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #059669;
  font-size: 12px;
  font-weight: 900;
}
.gl-section-label--muted { color: #64748b; }
.gl-section-hd em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}
.gl-feed-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid #f8fafc;
}
.gl-feed-row--ann { background: #f0fdf4; }
.gl-feed-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gl-feed-row--ann .gl-feed-icon { background: #dcfce7; color: #15803d; }
.gl-feed-body { min-width: 0; }
.gl-feed-text { color: #0f172a; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.gl-feed-meta { display: flex; flex-wrap: wrap; gap: 5px 9px; color: #94a3b8; font-size: 11px; margin-top: 5px; }
.gl-feed-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.gl-panel--schedule { overflow: visible; }
.gl-schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 12px 12px; }
.gl-schedule-grid > div { min-width: 0; border: 1px solid #e8edf3; border-radius: 14px; background: #fff; overflow: hidden; }
@media (max-width: 1100px) {
  .gl-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .gl-hero { grid-template-columns: auto minmax(0, 1fr); }
  .gl-primary-btn { grid-column: 1 / -1; width: 100%; }
  .gl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-source-card { grid-template-columns: 1fr; }
  .gl-source-actions { justify-content: flex-start; max-width: none; }
  .gl-panel-head { align-items: flex-start; flex-direction: column; }
  .gl-feed-tools { grid-template-columns: 1fr; }
  .gl-scan-msg { text-align: left; }
  .gl-schedule-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .gl-stats { grid-template-columns: 1fr; }
  .gl-hero-flow span { width: 100%; }
  .gl-feed-row { grid-template-columns: auto minmax(0, 1fr); }
  .gl-feed-badge { grid-column: 2; justify-self: start; }
}

/* AI-MARK[QAI-UI:quik-ai-community] 2026-07-14 15:23 (GMT+7) — Quik AI Community là dashboard-only: score hiệu quả, capability matrix, reaction ledger; không còn composer/up bài. | rel: lyly.js viewQuikAiCommunity, server/lyly/community-news.js */
.qac-shell { display: grid; gap: 14px; min-width: 0; }
.qac-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: linear-gradient(135deg,#f8fbff 0%,#ffffff 56%,#fff7ed 100%);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.qac-hero-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #10265c;
  color: #fff;
  box-shadow: 0 8px 18px rgba(16,38,92,.18);
}
.qac-hero-main { min-width: 0; display: grid; gap: 5px; }
.qac-kicker { color: #c2410c; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.qac-hero h2 { margin: 0; color: #0f172a; font-size: 22px; line-height: 1.12; font-weight: 900; overflow-wrap: anywhere; }
.qac-statusbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.qac-statusbar span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #475569;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.qac-statusbar svg { color: #2563eb; flex: none; }
.qac-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.qac-primary-btn, .qac-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border-radius: 11px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.qac-primary-btn { border: 0; background: linear-gradient(135deg,#FF6B2B,#f43f5e); color: #fff; box-shadow: 0 6px 14px rgba(255,107,43,.22); }
.qac-primary-btn:hover { opacity: .94; }
.qac-secondary-btn { border: 1px solid #e2e8f0; background: #fff; color: #475569; }
.qac-secondary-btn:hover { border-color: #FF6B2B; color: #c2410c; background: #fff7f5; }
.qac-primary-btn:disabled, .qac-secondary-btn:disabled { opacity: .58; cursor: not-allowed; }
.qac-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.qac-metric {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 4px 8px;
  align-items: center;
  border: 1px solid #e8edf3;
  border-radius: 15px;
  background: #fff;
  padding: 13px 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.045);
}
.qac-metric svg { color: #FF6B2B; }
.qac-metric span { min-width: 0; color: #64748b; font-size: 11px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qac-metric b { grid-column: 1 / -1; color: #0f172a; font-size: 24px; line-height: 1.05; font-weight: 900; overflow-wrap: anywhere; }
.qac-metric small { grid-column: 1 / -1; color: #94a3b8; font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; }
.qac-workspace { display: grid; grid-template-columns: minmax(380px,.9fr) minmax(340px,1fr); gap: 14px; align-items: stretch; }
.qac-panel {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}
.qac-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.qac-panel-head > div { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #0f172a; font-size: 14px; font-weight: 900; }
.qac-panel-head svg { color: #FF6B2B; flex: none; }
.qac-panel-head small { color: #94a3b8; font-size: 11px; font-weight: 800; white-space: nowrap; }
.qac-ai-panel { display: grid; align-content: start; }
.qac-score-wrap {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 15px;
  background: linear-gradient(135deg,#f8fbff,#fff7ed);
}
.qac-score-ring {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center,#fff 0 58%,transparent 59%),
    conic-gradient(#2563eb var(--qac-score),#e2e8f0 0);
  color: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
}
.qac-score-ring b { display: block; font-size: 24px; line-height: 1; font-weight: 950; }
.qac-score-ring span { color: #64748b; font-size: 11px; font-weight: 850; }
.qac-score-copy { display: grid; gap: 5px; min-width: 0; }
.qac-score-copy b { color: #0f172a; font-size: 18px; line-height: 1.18; font-weight: 950; overflow-wrap: anywhere; }
.qac-score-copy span { color: #64748b; font-size: 12.5px; line-height: 1.45; font-weight: 750; overflow-wrap: anywhere; }
.qac-insight-list { display: grid; gap: 8px; padding: 0 14px 14px; }
.qac-insight-list div {
  min-width: 0;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  background: #fff;
  padding: 9px 10px;
}
.qac-insight-list b { display: block; color: #0f172a; font-size: 12px; line-height: 1.25; font-weight: 900; }
.qac-insight-list span { display: block; margin-top: 3px; color: #64748b; font-size: 12px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.qac-capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 14px; }
.qac-capability {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 6px 9px;
  align-items: start;
  border: 1px solid #e8edf3;
  border-radius: 13px;
  background: #fbfdff;
  padding: 10px;
}
.qac-capability svg { color: #64748b; margin-top: 1px; }
.qac-capability div { min-width: 0; display: grid; gap: 2px; }
.qac-capability b { color: #0f172a; font-size: 12.5px; line-height: 1.28; font-weight: 900; overflow-wrap: anywhere; }
.qac-capability span { color: #64748b; font-size: 11px; line-height: 1.35; font-weight: 750; overflow-wrap: anywhere; }
.qac-capability em {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 22px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 3px 8px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
}
.qac-capability.is-on { border-color: #bbf7d0; background: #f0fdf4; }
.qac-capability.is-on svg { color: #059669; }
.qac-capability.is-on em { background: #dcfce7; color: #15803d; }
.qac-capability.is-wait { border-style: dashed; }
.qac-reaction-panel { display: grid; gap: 0; }
.qac-reaction-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 14px 14px 0; }
.qac-reaction-grid span {
  min-width: 0;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  background: #fbfdff;
  padding: 9px 10px;
}
.qac-reaction-grid b { display: block; color: #0f172a; font-size: 20px; line-height: 1.05; }
.qac-reaction-grid em { display: block; margin-top: 3px; color: #64748b; font-size: 11px; font-style: normal; font-weight: 800; overflow-wrap: anywhere; }
.qac-emoji-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 14px; }
.qac-emoji-strip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 850;
}
.qac-emoji-strip b { color: #0f172a; }
.qac-last-signal { display: grid; gap: 8px; margin: 0 14px 14px; border: 1px solid #dbeafe; border-radius: 13px; background: #f8fbff; padding: 10px 11px; }
.qac-last-signal.is-empty { border-style: dashed; background: #fbfdff; }
.qac-last-signal > div:first-child { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.qac-last-signal > div:first-child svg { color: #2563eb; }
.qac-last-signal b { color: #0f172a; font-size: 12px; font-weight: 900; }
.qac-last-signal small { color: #94a3b8; font-size: 11px; font-weight: 800; }
.qac-last-signal p { margin: 0; color: #334155; font-size: 12px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.qac-message-peek {
  display: grid;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 9px 10px;
}
.qac-message-peek span {
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.qac-message-peek pre {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #0f172a;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
}
.qac-last-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.qac-last-meta span { display: inline-flex; min-height: 22px; border: 1px solid #e8edf3; border-radius: 999px; background: #fff; color: #475569; padding: 3px 8px; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.qac-post-list { display: grid; gap: 10px; padding: 14px; }
.qac-post {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(170px,.28fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fbfdff;
  padding: 12px;
}
.qac-post-main { min-width: 0; display: grid; gap: 7px; }
.qac-post-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qac-post-title b { min-width: 0; color: #0f172a; font-size: 13.5px; line-height: 1.3; font-weight: 900; overflow-wrap: anywhere; }
.qac-status { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; padding: 3px 8px; font-size: 10.5px; font-weight: 900; white-space: nowrap; }
.qac-status--published { background: #dcfce7; color: #15803d; }
.qac-status--scheduled { background: #ffedd5; color: #c2410c; }
.qac-status--draft { background: #f1f5f9; color: #64748b; }
.qac-post p { margin: 0; color: #334155; font-size: 12.5px; line-height: 1.48; overflow-wrap: anywhere; }
.qac-post-message {
  display: grid;
  gap: 7px;
  border: 1px solid #dbeafe;
  border-radius: 13px;
  background: #fff;
  padding: 9px 10px;
}
.qac-post-message > div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.qac-post-message svg { color: #2563eb; flex: none; }
.qac-post-body {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #0f172a;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  background: transparent;
}
.qac-post-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: #94a3b8; font-size: 11px; font-weight: 800; }
.qac-post-meta span, .qac-post-meta a { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.qac-post-meta a { color: #2563eb; }
.qac-post-detail { display: flex; flex-wrap: wrap; gap: 6px; }
.qac-post-detail span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.qac-post-signal { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; align-content: start; }
.qac-post-signal > span { min-width: 0; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; padding: 8px; }
.qac-post-signal b { display: block; color: #0f172a; font-size: 18px; line-height: 1; }
.qac-post-signal em { display: block; margin-top: 3px; color: #64748b; font-size: 10.5px; font-style: normal; font-weight: 800; }
.qac-post-signal div { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.qac-post-signal small { display: inline-flex; min-height: 22px; align-items: center; border-radius: 999px; background: #eef6ff; color: #1d4ed8; padding: 3px 7px; font-size: 10.5px; font-weight: 850; }
.qac-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 160px;
  padding: 28px 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #fff;
  color: #94a3b8;
  text-align: center;
}
.qac-empty svg { color: #cbd5e1; }
.qac-empty b { color: #475569; font-size: 13px; }
.qac-empty span { max-width: 420px; color: #94a3b8; font-size: 12px; line-height: 1.45; }
.qac-empty.is-error { border-color: #fecaca; background: #fff1f2; }
.qac-empty.is-error svg, .qac-empty.is-error b, .qac-empty.is-error span { color: #be123c; }
@media (max-width: 1120px) {
  .qac-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qac-workspace { grid-template-columns: 1fr; }
  .qac-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .qac-hero { grid-template-columns: auto minmax(0,1fr); align-items: start; }
  .qac-hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .qac-score-wrap { grid-template-columns: 1fr; justify-items: start; }
  .qac-capability-grid { grid-template-columns: 1fr; }
  .qac-post { grid-template-columns: 1fr; }
  .qac-post-signal { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .qac-hero { padding: 14px; }
  .qac-hero h2 { font-size: 19px; }
  .qac-metrics, .qac-reaction-grid { grid-template-columns: 1fr; }
  .qac-hero-actions { align-items: stretch; flex-direction: column; }
  .qac-primary-btn, .qac-secondary-btn { width: 100%; }
  .qac-post-title { flex-direction: column; }
  .qac-status { align-self: flex-start; }
}

/* ── AI-MARK[QAI-UI:web-tools-p3] 2026-06-30 14:53 (GMT+7) — Phase 3 web-tools CSS: lyly-web-badge, lyly-web-hint (tool card); ci-refresh-bar, ci-refresh-btn, ci-refresh-msg (Competitor Intel) | rel: UI-L4-Lyly, lyly.js renderToolGrid/viewCompetitors */

/* Web-required badge trên tool card */
.lyly-web-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  white-space: nowrap;
  line-height: 1.3;
}

/* Chú thích nhỏ dưới desc của web tool */
.lyly-web-hint {
  font-size: 11px;
  color: #0369a1;
  opacity: .75;
  font-style: italic;
  margin-top: 6px;
}

/* Thanh làm mới dữ liệu đối thủ — Competitor Intel tab */
.ci-refresh-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(2,6,23,.06);
}

.ci-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(2,6,23,.05);
}
.ci-refresh-btn:hover:not(:disabled) {
  border-color: #FF6B2B;
  color: #FF6B2B;
}
.ci-refresh-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.ci-refresh-btn--loading {
  color: #64748b;
  border-color: #e2e8f0;
}

/* Thông báo kết quả refresh (bên phải nút) */
.ci-refresh-msg {
  font-size: 12px;
  font-weight: 500;
}

/* ── AI-MARK[QAI-UI:lyly-competitors] 2026-07-03 12:25 (GMT+7) — GĐ1 redesign CSS: hero/sub-tab, dropdown filter, campaign card badges/body alignment, competitor profile, timeline, insights. Purge-safe (viết tay) | rel: UI-L4-Lyly, lyly.js viewCompetitors/ci* */
/* Hero */
.ci-hero { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:12px; border-radius:16px; background:linear-gradient(135deg,#f0f9ff,#ffffff); border:1px solid #dbeafe; box-shadow:0 1px 3px rgba(2,6,23,.06); flex-wrap:wrap; }
.ci-hero-icon { height:40px; width:40px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; }
.ci-hero-main { flex:1 1 220px; min-width:0; }
.ci-hero-title { font-size:14px; font-weight:700; color:#0f172a; }
.ci-hero-title b { color:#2563eb; }
.ci-hero-sub { font-size:12px; color:#64748b; margin-top:2px; }
.ci-hero-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }

/* Sub-tab (giống kb-subtab, gạch chân cam ở .is-active — purge-safe) */
.ci-subtab { border-bottom: 2px solid transparent; white-space: nowrap; }
.ci-subtab.is-active { color: #FF6B2B; border-bottom-color: #FF6B2B; }
.ci-subtabs-row { display:flex; align-items:flex-end; gap:12px; border-bottom:1px solid #e2e8f0; overflow:visible; margin-top:8px; }
.ci-subtabs-scroll { flex:1 1 auto; min-width:0; display:flex; align-items:flex-end; gap:4px; overflow-x:auto; }
.ci-subtabs-row .ci-filter-toolbar { margin:0 0 6px auto; }

/* Grid + dropdown filter */
.ci-grid { display:grid; gap:14px; position:relative; z-index:1; }
.ci-filter-toolbar { position:relative; z-index:30; display:flex; align-items:center; justify-content:flex-end; gap:12px; margin:10px 0 14px; }
.ci-filter-result { min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; color:#64748b; font-size:12px; font-weight:600; }
.ci-filter-result b { color:#0f172a; font-size:15px; }
.ci-filter-result small { min-width:0; color:#94a3b8; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-filter-menu { position:relative; flex-shrink:0; }
.ci-filter-menu > summary { list-style:none; }
.ci-filter-menu > summary::-webkit-details-marker { display:none; }
.ci-filter-button { height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; border:1px solid #ffd8c8; background:#fff; color:#FF6B2B; font-size:13px; font-weight:800; padding:0 14px; cursor:pointer; box-shadow:0 1px 2px rgba(2,6,23,.05); transition:box-shadow .15s,border-color .15s,background .15s; }
.ci-filter-button:hover,
.ci-filter-menu[open] .ci-filter-button { border-color:#FF6B2B; background:#fff7ed; box-shadow:0 5px 16px rgba(255,107,43,.14); }
.ci-filter-button b { min-width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#FF6B2B; color:#fff; font-size:11px; line-height:1; }
.ci-filter-panel { position:absolute; right:0; top:calc(100% + 8px); width:min(620px, calc(100vw - 180px)); max-width:calc(100vw - 180px); display:grid; gap:12px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 18px 48px rgba(15,23,42,.18); padding:14px; }
.ci-filter-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid #f1f5f9; color:#0f172a; font-size:13px; font-weight:800; }
.ci-filter-reset { border:none; background:#f8fafc; color:#64748b; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; }
.ci-filter-reset:hover { color:#FF6B2B; background:#fff1ea; }
.ci-filter-section { display:grid; gap:8px; }
.ci-filter-section-title { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#94a3b8; }
.ci-filter-options { display:flex; flex-wrap:wrap; gap:8px; }
.ci-filter-choice { display:inline-flex; align-items:center; border-radius:999px; border:1px solid #e2e8f0; background:#fff; color:#475569; font-size:12px; font-weight:700; padding:7px 12px; cursor:pointer; transition:border-color .15s,color .15s,background .15s,box-shadow .15s; }
.ci-filter-choice:hover { border-color:#FF6B2B; color:#FF6B2B; }
.ci-filter-choice.is-active { background:linear-gradient(135deg,#FF6B2B,#f43f5e); color:#fff; border-color:transparent; box-shadow:0 1px 3px rgba(255,107,43,.28); }

/* Campaign card badges */
.ci-badges { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 0; }
.ci-badge { display:inline-flex; align-items:center; gap:4px; border-radius:8px; font-size:11px; font-weight:700; padding:3px 9px; background:#eef2ff; color:#4338ca; }
.ci-badge--campaign { background:#eef2ff; color:#4338ca; }
.ci-badge--event { background:#fef3c7; color:#b45309; }
.ci-badge--launch { background:#dcfce7; color:#15803d; }
.ci-badge--promo { background:#fce7f3; color:#be185d; }
.ci-badge--other { background:#f1f5f9; color:#475569; }
.ci-plat { display:inline-flex; align-items:center; border-radius:8px; font-size:11px; font-weight:700; padding:3px 9px; background:#f1f5f9; color:#475569; }
.ci-plat--facebook { background:#dbeafe; color:#1d4ed8; }
.ci-plat--web { background:#e0f2fe; color:#0369a1; }

/* Campaign card content */
.ci-hook { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.55; font-weight:700; color:#0f172a; background:#fff7ed; border-left:3px solid #FF6B2B; border-radius:10px; padding:10px 12px; margin-bottom:0; }
.ci-hook i { color:#FF6B2B; flex-shrink:0; margin-top:2px; }
.ci-field { font-size:13px; color:#475569; margin-bottom:0; line-height:1.55; }
.ci-field b { color:#334155; }
.ci-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:0; }
.ci-chip { display:inline-flex; align-items:center; border-radius:999px; font-size:11px; font-weight:600; padding:2px 9px; background:#f1f5f9; color:#64748b; }
.ci-sources { display:flex; flex-wrap:wrap; gap:10px; margin-top:0; padding-top:2px; }
.ci-sources a { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#0369a1; text-decoration:underline; }

/* Competitor profile card */
.ci-comp-card { border-radius:16px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(2,6,23,.06); padding:14px 16px; }
.ci-comp-camps { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.ci-comp-camp { display:flex; align-items:center; gap:8px; min-width:0; }
.ci-comp-camp-name { font-size:13px; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-comp-all { display:inline-flex; align-items:center; gap:5px; border:none; background:none; color:#FF6B2B; font-size:13px; font-weight:600; cursor:pointer; padding:2px 0; }
.ci-comp-all:hover { text-decoration:underline; }

/* Timeline */
.ci-timeline { display:flex; flex-direction:column; }
.ci-tl-row { display:flex; gap:12px; }
.ci-tl-rail { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:14px; }
.ci-tl-dot { width:12px; height:12px; border-radius:999px; background:#FF6B2B; margin-top:5px; box-shadow:0 0 0 3px #fff7ed; }
.ci-tl-row:not(:last-child) .ci-tl-rail::after { content:''; flex:1 1 auto; width:2px; background:#e2e8f0; margin-top:4px; }
.ci-tl-body { flex:1 1 auto; min-width:0; padding-bottom:18px; }
.ci-tl-when { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.03em; }
.ci-tl-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0; }
.ci-tl-comp { font-size:12px; font-weight:700; color:#0f172a; }
.ci-tl-name { font-size:14px; font-weight:700; color:#0f172a; }
.ci-tl-hook { font-size:12px; color:#64748b; margin-top:2px; line-height:1.5; }

/* Insights (Góc nhìn Quik) */
.ci-insight-intro { display:flex; align-items:center; gap:8px; font-size:13px; color:#334155; background:#fff7ed; border:1px solid #ffe1d3; border-radius:12px; padding:10px 14px; margin-bottom:12px; }
.ci-insight-intro i { color:#FF6B2B; flex-shrink:0; }
.ci-insight-group { margin-bottom:14px; }
.ci-insight-comp { font-size:12px; font-weight:800; color:#0f172a; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.ci-insight-item { border-radius:12px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(2,6,23,.05); padding:10px 12px; margin-bottom:6px; }
.ci-insight-take { font-size:13px; color:#0f172a; line-height:1.5; }
.ci-insight-from { display:flex; align-items:center; gap:4px; font-size:11px; color:#94a3b8; margin-top:4px; }

/* Error */
.ci-error { border-radius:16px; border:1px solid #fecaca; background:#fff1f2; padding:16px 20px; color:#e11d48; font-size:14px; }
.ci-retry { margin-left:10px; font-size:13px; font-weight:600; color:#FF6B2B; background:none; border:none; cursor:pointer; text-decoration:underline; }

/* ── AI-MARK[QAI-UI:lyly-competitors] 2026-07-02 01:55 (GMT+7) — GĐ2 "Góc nhìn Quik": bản tin AI (ci-brief) + hỏi-đáp (ci-chat/ci-qa) + gợi ý động (ci-sugg). Purge-safe (viết tay) | rel: lyly.js ciRenderInsights/ciRenderBriefBox/ciRenderQaThread */
.ci-section-hd { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#0f172a; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; }
.ci-section-hd i { color:#FF6B2B; }
/* Bản tin AI */
.ci-brief { border-radius:16px; background:linear-gradient(135deg,#fff7ed,#ffffff); border:1px solid #ffe1d3; box-shadow:0 1px 3px rgba(2,6,23,.06); padding:14px 16px; margin-bottom:14px; }
.ci-brief-loading { display:flex; align-items:center; gap:6px; color:#94a3b8; font-size:13px; font-weight:600; }
.ci-brief-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ci-brief-head > i { color:#FF6B2B; }
.ci-brief-title { font-size:14px; font-weight:800; color:#0f172a; }
.ci-brief-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:#f1f5f9; color:#64748b; }
.ci-brief-badge.is-fresh { background:#dcfce7; color:#15803d; }
.ci-brief-regen { margin-left:auto; height:28px; width:28px; border-radius:8px; border:none; background:transparent; color:#94a3b8; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ci-brief-regen:hover { color:#FF6B2B; background:#fff1ea; }
.ci-brief-summary { font-size:13px; color:#334155; line-height:1.55; margin-bottom:10px; }
.ci-brief-sec { margin-top:8px; }
.ci-brief-sec-t { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.ci-brief-sec-t i { color:#FF6B2B; }
.ci-brief-actions .ci-brief-sec-t i { color:#16a34a; }
.ci-brief-li { display:flex; align-items:flex-start; gap:6px; font-size:13px; color:#334155; line-height:1.5; padding:2px 0; }
.ci-brief-li > i { flex-shrink:0; margin-top:2px; color:#94a3b8; }
.ci-brief-actions .ci-brief-li > i { color:#16a34a; }
.ci-brief-time { font-size:11px; color:#94a3b8; margin-top:10px; }
/* Chat hỏi-đáp */
.ci-chat { border-radius:16px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(2,6,23,.06); padding:14px 16px; margin-bottom:14px; }
.ci-ask-row { display:flex; gap:8px; }
.ci-ask-input { flex:1 1 auto; min-width:0; border-radius:12px; border:1px solid #e2e8f0; padding:9px 12px; font-size:13px; }
.ci-ask-input:focus { outline:none; border-color:#FF6B2B; box-shadow:0 0 0 3px rgba(255,107,43,.15); }
.ci-ask-btn { flex-shrink:0; border-radius:12px; border:none; background:linear-gradient(135deg,#FF6B2B,#f43f5e); color:#fff; padding:0 14px; cursor:pointer; display:flex; align-items:center; }
.ci-ask-btn:hover { opacity:.95; }
.ci-suggs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ci-sugg { border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc; color:#475569; font-size:12px; font-weight:600; padding:4px 12px; cursor:pointer; transition:border-color .15s,color .15s; }
.ci-sugg:hover { border-color:#FF6B2B; color:#FF6B2B; }
.ci-qa-thread { margin-top:12px; display:flex; flex-direction:column; gap:12px; }
.ci-qa { display:flex; flex-direction:column; gap:6px; }
.ci-qa-q { display:flex; align-items:flex-start; gap:6px; font-size:13px; font-weight:700; color:#0f172a; }
.ci-qa-q i { color:#64748b; flex-shrink:0; margin-top:2px; }
.ci-qa-a { display:flex; align-items:flex-start; gap:6px; font-size:13px; color:#334155; line-height:1.55; background:#fff7ed; border-radius:12px; padding:10px 12px; }
.ci-qa-a > i { color:#FF6B2B; flex-shrink:0; margin-top:2px; }
.ci-qa-typing { color:#cbd5e1; }
/* Chi tiết takeaway theo đối thủ (hỗ trợ, dưới bản tin) */
.ci-insight-detail { margin-top:6px; }

/* ── AI-MARK[QAI-UI:lyly-competitors] 2026-07-02 — GĐ3 enrich hiển thị: badge MỚI, độ nổi bật (ước lượng), ưu đãi, facts (nhịp/đối tượng/kênh), hero động thái mới. Purge-safe | rel: lyly.js ciRenderCampaignCard/ciRenderHero */
.ci-card--new { border-color:#fdba74; box-shadow:0 0 0 1px #fdba74, 0 1px 3px rgba(2,6,23,.06); }
.ci-badge-new { display:inline-flex; align-items:center; gap:3px; border-radius:8px; font-size:11px; font-weight:800; padding:3px 8px; background:linear-gradient(135deg,#FF6B2B,#f43f5e); color:#fff; }
.ci-prom { display:inline-flex; align-items:center; border-radius:8px; font-size:11px; font-weight:700; padding:3px 8px; background:#f1f5f9; color:#64748b; }
.ci-prom--cao { background:#fee2e2; color:#b91c1c; }
.ci-prom--vừa { background:#fef3c7; color:#b45309; }
.ci-prom--thấp { background:#f1f5f9; color:#94a3b8; }
.ci-offer { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.55; color:#0f172a; background:#f0fdf4; border-left:3px solid #16a34a; border-radius:10px; padding:10px 12px; margin-bottom:0; }
.ci-offer i { color:#16a34a; flex-shrink:0; margin-top:2px; }
.ci-offer b { color:#15803d; }
.ci-facts { font-size:12px; line-height:1.55; color:#64748b; margin-bottom:0; }
.ci-hero-new { color:#c2410c; }

@media (max-width: 760px) {
  .ci-subtabs-row { flex-direction:column; align-items:stretch; gap:8px; border-bottom:0; }
  .ci-subtabs-scroll { border-bottom:1px solid #e2e8f0; }
  .ci-subtabs-row .ci-filter-toolbar { margin:0 0 10px; }
  .ci-filter-toolbar { align-items:stretch; flex-direction:column; }
  .ci-filter-result small { white-space:normal; }
  .ci-filter-menu { width:100%; }
  .ci-filter-button { width:100%; }
  .ci-filter-panel { left:0; right:auto; width:100%; max-width:calc(100vw - 32px); }
  .ci-card-head { padding:16px 16px 8px; }
  .ci-card-body { padding:2px 16px 16px; }
}

/* ── AI-MARK[QAI-UI:lyly-home-perf] 2026-07-02 — GĐ1 Tổng quan: dashboard hiệu suất (window strip + stat card 4 khối). Purge-safe | rel: lyly.js homePerfDashboard/_lpCard */
.lp-window { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#64748b; background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:5px 12px; margin-bottom:12px; }
.lp-window i { color:#FF6B2B; }
.lp-window b { color:#0f172a; }
.lp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:6px; }
@media (min-width:1024px){ .lp-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.lp-card { position:relative; border-radius:16px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(2,6,23,.06); padding:14px; }
.lp-card-ic { height:32px; width:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff7f5; color:#FF6B2B; margin-bottom:8px; }
.lp-card-val { font-size:1.6rem; font-weight:800; color:#0f172a; line-height:1; }
.lp-card-lbl { font-size:13px; font-weight:600; color:#334155; margin-top:4px; }
.lp-card-sub { font-size:11px; color:#94a3b8; margin-top:2px; }
.lp-card--alert { border-color:#fdba74; background:linear-gradient(135deg,#fff7ed,#fff); }
.lp-card--alert .lp-card-ic { background:#ffedd5; color:#c2410c; }
.lp-card--alert .lp-card-val { color:#c2410c; }
.lp-card--danger { border-color:#fecaca; background:linear-gradient(135deg,#fff1f2,#fff); }
.lp-card--danger .lp-card-ic { background:#fee2e2; color:#b91c1c; }
.lp-card--danger .lp-card-val { color:#b91c1c; }

/* ── AI-MARK[QAI-UI:lyly-home-brief] 2026-07-03 13:20 (GMT+7) — GĐ2 Tổng quan: banner bản tin AI "Lyly tuần này"; 2026-07-03 nhận chip 7 ngày + nút Làm mới trong card để bỏ toolbar riêng. Purge-safe | rel: lyly.js homeBriefHtml */
.hb-card { border-radius:16px; background:linear-gradient(135deg,#fff7f5,#ffffff); border:1px solid #ffe1d3; box-shadow:0 1px 3px rgba(2,6,23,.06); padding:14px 16px; margin-bottom:14px; }
.hb-loading { display:flex; align-items:center; gap:6px; color:#94a3b8; font-size:13px; font-weight:600; }
.hb-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.hb-head > i { color:#FF6B2B; }
.hb-title { font-size:14px; font-weight:800; color:#0f172a; }
.hb-range { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#64748b; background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.hb-range i { color:#FF6B2B; }
.hb-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:#f1f5f9; color:#64748b; }
.hb-badge.is-fresh { background:#dcfce7; color:#15803d; }
.hb-refresh { margin-left:auto; height:30px; border-radius:10px; border:1px solid #ffd9c7; background:#fff; color:#FF6B2B; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 10px; font-size:11px; font-weight:800; white-space:nowrap; }
.hb-refresh:hover { background:#fff1ea; }
.hb-refresh:disabled { cursor:default; opacity:.55; background:#fff; color:#94a3b8; border-color:#e2e8f0; }
.hb-refresh.is-spin i { animation:lco-spin .8s linear infinite; }
.hb-summary { font-size:13px; color:#334155; line-height:1.55; margin-bottom:10px; }
.hb-sec { margin-top:8px; }
.hb-sec-t { font-size:12px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.hb-li { display:flex; align-items:flex-start; gap:6px; font-size:13px; color:#334155; line-height:1.5; padding:2px 0; }
.hb-li > i { flex-shrink:0; margin-top:2px; color:#94a3b8; }
.hb-attention .hb-sec-t { color:#b45309; }
.hb-attention .hb-li > i { color:#f59e0b; }
.hb-reco .hb-li > i { color:#16a34a; }
.hb-time { font-size:11px; color:#94a3b8; margin-top:10px; }
@media (max-width: 640px) {
  .hb-head { align-items:flex-start; }
  .hb-refresh { width:100%; margin-left:0; }
}

/* ── AI-MARK[QAI-UI:lyly-groups] 2026-06-30 13:27 (GMT+7) — Phần B Lịch tự soạn CSS: suggest-section-hd, holiday-list, draft-list, state pills | rel: UI-L4-Lyly, lyly.js grpLoadSuggestions */

/* Sub-section header bên trong grp-card */
.grp-suggest-section-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 8px;
}
.grp-suggest-section-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex: 1;
}

/* Badge "Chỉ xem" cạnh tiêu đề gợi ý */
.grp-suggest-readonly-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #64748b;
  white-space: nowrap;
}

/* Danh sách lễ VN sắp tới */
.grp-suggest-holiday-list {}
.grp-suggest-holiday-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f8fafc;
}
.grp-suggest-holiday-row:last-child { border-bottom: none; }
.grp-suggest-holiday-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fff7f5;
  color: #FF6B2B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.grp-suggest-holiday-body { flex: 1; min-width: 0; }
.grp-suggest-holiday-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.grp-suggest-holiday-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* Pill "Còn N ngày" */
.grp-suggest-days-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
  flex-shrink: 0;
}
.grp-suggest-days-pill--soon {
  background: #fff7ed;
  color: #c2410c;
}

/* Danh sách auto-draft */
.grp-suggest-draft-list {}
.grp-suggest-draft-row {
  width: 100%;
  border: 0;
  background: #fff;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease;
}
.grp-suggest-draft-row:hover { background: #fff7f5; box-shadow: inset 3px 0 0 #FF6B2B; }
.grp-suggest-draft-row:focus-visible { outline: 2px solid rgba(255,107,43,.35); outline-offset: -2px; }
.grp-suggest-draft-row:last-child { border-bottom: none; }
.grp-suggest-draft-row--discarded { opacity: .55; }
.grp-suggest-draft-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.grp-suggest-draft-occasion {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  flex: 1;
  min-width: 0;
}
.grp-suggest-draft-body {
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.grp-suggest-draft-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
}
.grp-suggest-readonly-note {
  font-style: italic;
}
.grp-suggest-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #FF6B2B;
  font-weight: 800;
}
.acw-vbody-edit {
  display: block;
  min-height: 260px;
  font-weight: 400;
  resize: vertical;
  white-space: pre-wrap;
  background: #fff;
  border-color: #ffd6c2;
  box-shadow: inset 0 1px 0 rgba(255, 107, 43, .08);
  overflow-wrap: anywhere;
}
.acw-edit-head {
  margin: 12px 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
}
.acw-edit-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  color: #334155;
}
.acw-edit-head em {
  font-style: normal;
  color: #94a3b8;
}
.acw-omni-panel {
  margin-bottom: 12px;
  padding: 11px 12px 8px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fbfcfe;
}
.acw-omni-panel .acw-edit-head {
  margin-top: 0;
}
.acw-internal-scope {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 10px 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}
.acw-internal-scope--muted {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #475569;
}
.acw-channel-review {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.acw-grp-empty {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 9px 11px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

/* Trạng thái duyệt pill */
.grp-suggest-state {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
.grp-suggest-state--pending {
  background: #fef3c7;
  color: #b45309;
}
.grp-suggest-state--approved {
  background: #dcfce7;
  color: #15803d;
}
.grp-suggest-state--sent {
  background: #e0f2fe;
  color: #0369a1;
}
.grp-suggest-state--discarded {
  background: #f1f5f9;
  color: #64748b;
}

/* ── Thanh sub-tab ngang theo nhóm cha (router đổ vào #lylySubnav) ──────────────
   AI-MARK[QAI-UI:lyly-ia-ainative] 2026-06-30 16:10 (GMT+7) — sticky dưới topbar (h-16=4rem) + z-index ở ĐÂY (KHÔNG dùng Tailwind arbitrary top-16/z-[15] vì purge — guard lyly-tailwind-purged-classes) | rel: index.html #lylySubnav, lyly.js renderSubnav */
.lyly-subnav {
  position: sticky;
  top: 4rem;
  z-index: 15;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
/* Gạch chân tab CẢ width LẪN màu active ở ĐÂY — vì `.border-b-2{}` VÀ `.border-brand-orange{}` (base) đều BỊ PURGE
   khỏi lyly-tailwind.css build-sẵn (chỉ còn hover:border-brand-orange). Nếu dựa Tailwind → active ra XÁM, không cam.
   Mẫu chuẩn đã chạy: .lyly-notif-tab.is-active (trên). guard lyly-tailwind-purged-classes. */
.lyly-subnav-tab { white-space: nowrap; border-bottom: 2px solid transparent; }
.lyly-subnav-tab.is-active { color: #FF6B2B; border-bottom-color: #FF6B2B; }
/* Kho tri thức sub-tab — cùng lỗi purge (border-b-2 + border-brand-orange) → fallback CSS cho gạch chân active. */
.kb-subtab { border-bottom: 2px solid transparent; }
.kb-subtab.is-active { color: #FF6B2B; border-bottom-color: #FF6B2B; }

/* Tiện ích brand cho Xưởng nội dung — biến thể opacity/accent Tailwind bị purge khỏi build-sẵn (guard lyly-tailwind-purged-classes) */
.lyly-learn-box { background: rgba(255, 107, 43, 0.06); border: 1px solid rgba(255, 107, 43, 0.28); }
.lyly-accent { accent-color: #FF6B2B; }
.cw-chip-approved { background: #e0f2fe; color: #0369a1; }
.cw-pill-active { color: #FF6B2B; background: rgba(255, 107, 43, 0.10); border-color: #FF6B2B; }

/* AI-MARK[QAI-UI:lyly-campaign-planner] 2026-07-23 12:32 (GMT+7) — Campaign Planner UI: brief intake + proposal output full-width + AI-native plan blueprint preview + campaign library/plan mode visible ngay dưới hero, purge-safe, không phụ thuộc class Tailwind mới; output gồm Big Idea, Key Message, nội dung, timeline, KPI, task/deadline/approval. | rel: lyly.js viewCampaignPlanner/cpProposalPlanPreviewHtml, QAI-UI:lyly-campaign-plan-mode */
.cp-workbench {
  display: grid;
  gap: 18px;
  color: #0f172a;
}
.cp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 48%, #ecfeff 100%);
  padding: 22px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
}
.cp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #c2410c;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0;
}
.cp-hero h1,
.cp-output h2 {
  margin: 10px 0 0;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}
.cp-hero h1 {
  font-size: 36px;
}
.cp-hero p {
  max-width: 780px;
  margin: 10px 0 0;
  color: #475569;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}
.cp-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.cp-hero-tags span {
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #ffffff;
  color: #2563eb;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 850;
}
.cp-hero-panel {
  display: grid;
  align-content: space-between;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #ccfbf1;
  background: #f0fdfa;
  padding: 16px;
}
.cp-hero-panel b {
  font-size: 16px;
  font-weight: 900;
  color: #115e59;
}
.cp-hero-panel span,
.cp-hero-panel em {
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}
.cp-hero-panel div {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #99f6e4;
  padding: 10px;
}
.cp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  align-items: start;
}
.cp-intake,
.cp-signal-panel,
.cp-output,
.cp-proposal-section,
.cp-budget,
.cp-risks {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.cp-intake {
  padding: 16px;
}
.cp-form-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.cp-form-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}
.cp-form-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 650;
}
.cp-sample-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.cp-sample-row button,
.cp-ghost-btn,
.cp-primary-btn,
.cp-actions button,
.cp-output--busy button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .06s ease;
}
.cp-sample-row button:hover,
.cp-ghost-btn:hover,
.cp-actions button:hover,
.cp-output--busy button:hover {
  border-color: #FF6B2B;
  color: #c2410c;
  background: #fff7ed;
}
.cp-primary-btn,
.cp-actions button.is-primary {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, #FF6B2B, #f43f5e);
  box-shadow: 0 10px 20px rgba(244, 63, 94, .18);
}
.cp-primary-btn:hover,
.cp-actions button.is-primary:hover {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #f97316, #e11d48);
}
.cp-primary-btn:disabled,
.cp-actions button:disabled {
  opacity: .68;
  cursor: wait;
}
.cp-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cp-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.cp-field--objective,
.cp-field--audience,
.cp-field--market {
  grid-column: span 2;
}
.cp-field span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}
.cp-field span svg {
  color: #FF6B2B;
}
.cp-field input,
.cp-field textarea,
.cp-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cp-field textarea {
  min-height: 92px;
}
.cp-field select {
  appearance: none;
}
.cp-field input:focus,
.cp-field textarea:focus,
.cp-field select:focus {
  border-color: #FF6B2B;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 107, 43, .16);
}
.cp-attachments {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}
.cp-attach-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.cp-attach-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cp-attach-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 900;
}
.cp-attach-head span svg {
  color: #2563eb;
}
.cp-attach-head p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}
.cp-attach-drop {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
  min-height: 88px;
  border-radius: 8px;
  border: 1px dashed #93c5fd;
  background: #ffffff;
  color: #2563eb;
  padding: 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cp-attach-drop:hover,
.cp-attach-drop.is-dragging {
  border-color: #FF6B2B;
  background: #fff7ed;
  color: #c2410c;
}
.cp-attach-drop:disabled,
.cp-attach-head button:disabled {
  opacity: .65;
  cursor: not-allowed;
}
.cp-attach-drop span {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
}
.cp-attach-drop em {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.4;
  font-style: normal;
  font-weight: 700;
}
.cp-attach-list {
  display: grid;
  gap: 8px;
}
.cp-attach-file {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 9px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px;
}
.cp-attach-file.is-ready {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.cp-attach-file.is-error {
  border-color: #fecdd3;
  background: #fff1f2;
}
.cp-attach-icon,
.cp-attach-file button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.cp-attach-icon {
  color: #2563eb;
  background: #eff6ff;
}
.cp-attach-file.is-ready .cp-attach-icon {
  color: #15803d;
  background: #dcfce7;
}
.cp-attach-file.is-error .cp-attach-icon {
  color: #be123c;
  background: #ffe4e6;
}
.cp-attach-file b {
  display: block;
  color: #0f172a;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-attach-file em {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 750;
}
.cp-attach-file.is-error em {
  color: #be123c;
}
.cp-attach-file button {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}
.cp-attach-file button:hover {
  border-color: #fecdd3;
  color: #be123c;
  background: #fff1f2;
}
.cp-attach-error {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  background: #fff1f2;
  color: #be123c;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 800;
}
.cp-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}
.cp-signal-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  position: sticky;
  top: 92px;
}
.cp-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cp-score-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}
.cp-score-head b {
  color: #0f172a;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}
.cp-score-track {
  height: 9px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.cp-score-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #2563eb, #FF6B2B);
}
.cp-signal-grid {
  display: grid;
  gap: 7px;
}
.cp-signal-grid span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  min-width: 0;
}
.cp-signal-grid svg {
  color: #2563eb;
  flex-shrink: 0;
}
.cp-ai-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.cp-ai-chain span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 850;
}
.cp-ai-chain span.is-on {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
}
.cp-missing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
.cp-missing b {
  width: 100%;
  color: #b45309;
  font-size: 12px;
  font-weight: 900;
}
.cp-missing em {
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  padding: 4px 8px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 850;
}
.cp-ready {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #dcfce7;
  color: #166534;
  padding: 10px;
  font-size: 12px;
  font-weight: 850;
}
.cp-error,
.cp-soft-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 750;
}
.cp-error {
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #be123c;
}
.cp-soft-warn {
  margin-bottom: 12px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
}
.cp-output {
  display: grid;
  gap: 14px;
  padding: 16px;
  scroll-margin-top: 126px;
}
.cp-output--empty,
.cp-output--busy {
  min-height: 260px;
  align-content: center;
  justify-items: center;
  text-align: center;
  border-style: dashed;
  background: #f8fafc;
}
.cp-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  color: #FF6B2B;
  border: 1px solid #fed7aa;
}
.cp-output--empty h2,
.cp-output--busy h2 {
  margin: 0;
  max-width: 720px;
  font-size: 22px;
}
.cp-output--empty p,
.cp-output--busy p {
  margin: 0;
  max-width: 620px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}
.cp-output-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}
.cp-output-head h2 {
  font-size: 28px;
}
.cp-output-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}
.cp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cp-action-msg {
  min-height: 18px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
}
.cp-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cp-summary-strip span {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  padding: 10px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}
.cp-summary-strip svg {
  color: #FF6B2B;
  flex-shrink: 0;
  margin-top: 1px;
}
.cp-source-box {
  display: grid;
  gap: 10px;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  background: #f0fdfa;
  padding: 13px;
}
.cp-source-box .cp-section-title {
  margin-bottom: 0;
}
.cp-source-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cp-source-files span {
  display: grid;
  gap: 2px;
  max-width: 320px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #ffffff;
  color: #115e59;
  padding: 8px 10px;
}
.cp-source-files b {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.28;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-source-files em,
.cp-source-box p {
  margin: 0;
  color: #0f766e;
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 750;
}
.cp-plan-blueprint {
  display: grid;
  gap: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eff6ff 100%);
  padding: 14px;
}
.cp-plan-blueprint-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.cp-plan-blueprint-head h3 {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}
.cp-plan-blueprint-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 750;
}
.cp-plan-blueprint-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cp-plan-blueprint-kpis span {
  min-width: 82px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 9px;
}
.cp-plan-blueprint-kpis b {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}
.cp-plan-blueprint-kpis em {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}
.cp-plan-blueprint-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 12px;
  align-items: start;
}
.cp-plan-blueprint-tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cp-plan-blueprint-tasks article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}
.cp-plan-blueprint-tasks small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
}
.cp-plan-blueprint-tasks b {
  color: #0f172a;
  font-size: 12.5px;
  line-height: 1.28;
  font-weight: 900;
}
.cp-plan-blueprint-tasks p {
  display: -webkit-box;
  margin: 5px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-plan-blueprint-tasks em {
  display: block;
  margin-top: 5px;
  color: #0f766e;
  font-size: 11.5px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 850;
}
.cp-plan-blueprint-side {
  display: grid;
  gap: 9px;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  background: #f0fdfa;
  padding: 12px;
}
.cp-plan-blueprint-side b {
  color: #115e59;
  font-size: 12px;
  font-weight: 900;
}
.cp-plan-blueprint-side div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cp-plan-blueprint-side span {
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #99f6e4;
  color: #0f766e;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 850;
}
.cp-plan-blueprint-side em {
  color: #0f766e;
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 750;
}
.cp-big-idea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #fed7aa;
  background: linear-gradient(135deg, #fff7ed, #ffffff 52%, #eff6ff);
  padding: 16px;
}
.cp-big-idea span,
.cp-section-title h3,
.cp-cta span {
  letter-spacing: 0;
}
.cp-big-idea span {
  color: #c2410c;
  font-size: 12px;
  font-weight: 900;
}
.cp-big-idea h3 {
  margin: 6px 0 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.16;
  font-weight: 900;
}
.cp-big-idea p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.55;
}
.cp-big-idea aside {
  display: grid;
  gap: 6px;
  align-content: start;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  padding: 12px;
}
.cp-big-idea aside b {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}
.cp-big-idea aside em {
  color: #334155;
  font-size: 12.5px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 700;
}
.cp-proposal-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 12px;
  align-items: start;
}
.cp-proposal-section {
  padding: 14px;
}
.cp-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cp-section-title svg {
  color: #FF6B2B;
  flex-shrink: 0;
}
.cp-section-title h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}
.cp-message-house blockquote {
  margin: 0 0 10px;
  border-left: 4px solid #14b8a6;
  padding: 10px 12px;
  background: #f0fdfa;
  color: #115e59;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.5;
}
.cp-message-house ul,
.cp-timeline ul {
  margin: 0;
  padding-left: 18px;
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.55;
}
.cp-message-house li,
.cp-timeline li {
  margin: 4px 0;
}
.cp-cta {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 10px;
}
.cp-cta span {
  color: #c2410c;
  font-size: 11px;
  font-weight: 900;
}
.cp-cta b {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.35;
}
.cp-content-list,
.cp-kpi-table,
.cp-budget,
.cp-risks {
  display: grid;
  gap: 9px;
}
.cp-content-list article {
  display: grid;
  gap: 5px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 10px;
}
.cp-content-list b {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}
.cp-content-list span {
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 850;
}
.cp-content-list p,
.cp-content-list em {
  margin: 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 700;
  font-style: normal;
}
.cp-content-list em {
  color: #c2410c;
}
.cp-timeline {
  display: grid;
  gap: 10px;
}
.cp-timeline article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}
.cp-timeline article > span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  font-size: 13px;
  font-weight: 900;
}
.cp-timeline article > div {
  display: grid;
  gap: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}
.cp-timeline article:last-child > div {
  border-bottom: 0;
  padding-bottom: 0;
}
.cp-timeline b {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}
.cp-timeline em,
.cp-timeline small {
  color: #64748b;
  font-style: normal;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}
.cp-kpi-table article {
  display: grid;
  grid-template-columns: minmax(95px, .45fr) minmax(0, .85fr) minmax(0, .85fr);
  gap: 8px;
  align-items: start;
  border-bottom: 1px solid #eef2f7;
  padding-bottom: 9px;
}
.cp-kpi-table article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.cp-kpi-table b {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 900;
}
.cp-kpi-table span,
.cp-kpi-table small {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.cp-kpi-table em {
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.4;
}
.cp-kpi-table small {
  grid-column: 2 / -1;
  color: #64748b;
}
.cp-budget-risk {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
}
.cp-budget,
.cp-risks {
  padding: 14px;
}
.cp-budget article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  position: relative;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 10px;
  overflow: hidden;
}
.cp-budget article > span {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  min-width: 4px;
  background: linear-gradient(90deg, #14b8a6, #2563eb);
}
.cp-budget b,
.cp-risks b {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 900;
}
.cp-budget em {
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.cp-budget p {
  grid-column: 1 / -1;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.cp-risks article {
  display: grid;
  gap: 5px;
  border-radius: 8px;
  border: 1px solid #fee2e2;
  background: #fff7f7;
  padding: 10px;
}
.cp-risks span,
.cp-risks em {
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 700;
}
.cp-risks em {
  color: #9f1239;
}
.cp-ai-raw {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 10px 12px;
}
.cp-ai-raw summary {
  cursor: pointer;
  color: #334155;
  font-size: 12.5px;
  font-weight: 900;
}
.cp-ai-raw .lyly-bubble {
  margin-top: 10px;
  color: #334155;
  font-size: 13px;
}
.cp-orbit {
  position: relative;
  width: 74px;
  height: 74px;
}
.cp-orbit span {
  position: absolute;
  inset: 10px;
  border: 2px solid transparent;
  border-top-color: #FF6B2B;
  border-right-color: #14b8a6;
  border-radius: 999px;
  animation: cpOrbit 1.15s linear infinite;
}
.cp-orbit span:nth-child(2) {
  inset: 18px;
  border-top-color: #2563eb;
  border-right-color: transparent;
  animation-duration: .85s;
  animation-direction: reverse;
}
.cp-orbit span:nth-child(3) {
  inset: 29px;
  border: 0;
  background: #FF6B2B;
  animation: cpPulse 1s ease-in-out infinite;
}
.cp-spin {
  animation: cpOrbit .9s linear infinite;
}
@keyframes cpOrbit {
  to { transform: rotate(360deg); }
}
@keyframes cpPulse {
  0%, 100% { transform: scale(.74); opacity: .55; }
  50% { transform: scale(1); opacity: 1; }
}
@media (max-width: 1180px) {
  .cp-layout,
  .cp-budget-risk,
  .cp-proposal-grid,
  .cp-plan-blueprint-body {
    grid-template-columns: 1fr;
  }
  .cp-plan-blueprint-tasks {
    grid-template-columns: 1fr;
  }
  .cp-signal-panel {
    position: static;
  }
  .cp-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .cp-hero,
  .cp-big-idea {
    grid-template-columns: 1fr;
  }
  .cp-hero {
    padding: 16px;
  }
  .cp-hero h1 {
    font-size: 28px;
  }
  .cp-output-head h2,
  .cp-big-idea h3 {
    font-size: 22px;
  }
  .cp-form-head,
  .cp-attach-head,
  .cp-output-head,
  .cp-plan-blueprint-head {
    align-items: stretch;
    flex-direction: column;
  }
  .cp-sample-row,
  .cp-attach-head .cp-ghost-btn,
  .cp-actions,
  .cp-plan-blueprint-kpis {
    justify-content: flex-start;
  }
  .cp-field-grid,
  .cp-summary-strip {
    grid-template-columns: 1fr;
  }
  .cp-field--objective,
  .cp-field--audience,
  .cp-field--market {
    grid-column: auto;
  }
  .cp-form-actions {
    justify-content: stretch;
  }
  .cp-form-actions button,
  .cp-attach-head .cp-ghost-btn,
  .cp-actions button {
    width: 100%;
  }
  .cp-kpi-table article {
    grid-template-columns: 1fr;
  }
  .cp-kpi-table small {
    grid-column: auto;
  }
}

/* AI-MARK[QAI-UI:lyly-campaign-sales-smart-plan] 2026-07-03 21:28 (GMT+7) — Tab
   Chiến dịch & Sales: sau khi Lyly tạo/lưu/xác nhận, hiển thị plan thông minh từ lyly_content
   ngay trên timeline lịch đăng. Purge-safe. | rel: lyly.js cwSmartPlanPanel/cwConfirmPlan */
.cw-smart-plan {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr) minmax(260px, .85fr);
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #ffe1d3;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7f5 0%, #ffffff 44%, #f8fafc 100%);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .06);
}
.cw-smart-main,
.cw-smart-steps,
.cw-smart-tasks {
  min-width: 0;
}
.cw-smart-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #fff;
  color: #FF6B2B;
  border: 1px solid #ffd6c4;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}
.cw-smart-title {
  margin-top: 10px;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cw-smart-sub {
  margin-top: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}
.cw-smart-progress {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 12px;
}
.cw-smart-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #FF6B2B, #f43f5e);
}
.cw-smart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cw-smart-actions button,
.cw-smart-related button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  color: #475569;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.cw-smart-actions button:hover,
.cw-smart-related button:hover {
  border-color: #FF6B2B;
  color: #FF6B2B;
}
.cw-smart-confirm {
  border-color: transparent !important;
  background: linear-gradient(135deg, #FF6B2B, #f43f5e) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(244, 63, 94, .16);
}
.cw-smart-confirm:disabled { opacity: .72; cursor: wait; }
.cw-smart-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 900;
}
.cw-smart-state.is-ok {
  background: #dcfce7;
  color: #15803d;
}
.cw-smart-steps {
  display: grid;
  gap: 8px;
}
.cw-smart-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid #eef2f7;
  border-radius: 13px;
  background: rgba(255, 255, 255, .82);
}
.cw-smart-step-no {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff2ec;
  color: #FF6B2B;
  font-size: 12px;
  font-weight: 900;
}
.cw-smart-step-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.cw-smart-step-body b {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.cw-smart-step-body b svg { color: #FF6B2B; }
.cw-smart-step-body em {
  color: #64748b;
  font-style: normal;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cw-smart-tasks {
  display: grid;
  align-content: start;
  gap: 7px;
  border-radius: 15px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 10px;
}
.cw-smart-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.cw-smart-task {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.42;
}
.cw-smart-task svg {
  color: #FF6B2B;
  flex-shrink: 0;
  margin-top: 2px;
}
.cw-smart-related {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 5px;
  border-top: 1px solid #eef2f7;
}
.cw-smart-related button {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .cw-smart-plan { grid-template-columns: 1fr 1fr; }
  .cw-smart-tasks { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cw-smart-plan { grid-template-columns: 1fr; }
  .cw-smart-tasks { grid-column: auto; }
}

/* AI-MARK[QAI-UI:lyly-campaign-plan-mode] 2026-07-30 16:59 (GMT+7) — Mode kế hoạch trong tab Tạo Chiến Dịch: workspace cân lại title/metric/meta/action thành command bar, progress strip không lặp tiêu đề, timeline đầu việc chỉnh qua popup, purge-safe. | rel: lyly.js cwSmartPlanPanel/cpRenderSavedCampaigns/cwPlanTimeline/cwOpenPlanTaskEditor */
#cpSavedCampaigns {
  scroll-margin-top: 112px;
}
#cpSavedCampaigns.is-just-saved .cp-plan-library {
  animation: cp-library-focus 1.8s ease;
}
@keyframes cp-library-focus {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 43, .28), 0 8px 26px rgba(15, 23, 42, .06); }
  42% { box-shadow: 0 0 0 8px rgba(255, 107, 43, .12), 0 14px 34px rgba(15, 23, 42, .10); }
  100% { box-shadow: 0 8px 26px rgba(15, 23, 42, .06); }
}
.cp-plan-library {
  position: relative;
  display: grid;
  gap: 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 16px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .06);
}
.cp-plan-library--has-items {
  padding: 14px;
}
.cp-plan-library.is-plan-collapsed {
  gap: 10px;
  padding: 12px 14px;
}
.cp-plan-library--loading,
.cp-plan-library--empty {
  min-height: 118px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  border-style: dashed;
  background: #f8fafc;
}
.cp-plan-library--loading {
  grid-template-columns: auto minmax(0, 1fr);
}
.cp-plan-empty-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff7ed;
  color: #FF6B2B;
}
.cp-plan-library--loading b,
.cp-plan-library--empty h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}
.cp-plan-library--empty p {
  margin: 5px 0 0;
  max-width: 620px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}
.cp-plan-library--empty button,
.cp-plan-library-side button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #c2410c;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.cp-plan-library--empty button:hover,
.cp-plan-library-side button:hover {
  border-color: #FF6B2B;
  background: #ffffff;
  color: #FF6B2B;
}
.cp-plan-library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.cp-plan-library-head--compact {
  align-items: center;
}
.cp-plan-library-head--workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 4px 8px 0;
}
.cp-plan-title-block {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}
.cp-plan-overline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.cp-plan-library-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
}
.cp-plan-library.is-plan-collapsed .cp-plan-library-head h2 {
  font-size: 20px;
}
.cp-plan-library-head p {
  margin: 0;
  max-width: 960px;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 750;
}
.cp-plan-library.is-plan-collapsed .cp-plan-library-head p {
  display: -webkit-box;
  max-width: 880px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-plan-library-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 0;
}
.cp-plan-command-panel {
  width: auto;
  align-content: center;
  justify-items: end;
  gap: 6px;
}
.cp-plan-workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  min-width: 0;
}
.cp-plan-workspace-toolbar .cp-plan-manage-meta {
  flex: 1 1 520px;
}
.cp-plan-workspace-toolbar .cp-plan-command-panel {
  flex: 0 1 540px;
}
.cp-plan-library-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-plan-command-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-plan-command-group.is-main {
  flex-wrap: nowrap;
}
.cp-plan-command-group.is-main button {
  min-height: 36px;
  white-space: nowrap;
}
.cp-plan-command-group.is-secondary {
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}
.cp-plan-command-group.is-secondary button {
  min-height: 28px;
  padding: 5px 8px;
  color: #64748b;
  border-color: #e2e8f0;
  background: #ffffff;
  font-size: 11px;
}
.cp-plan-command-group.is-secondary button:hover {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}
.cp-plan-command-group button.is-primary {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}
.cp-plan-command-group button.is-primary:hover {
  border-color: #FF6B2B;
  background: #ffffff;
  color: #FF6B2B;
}
.cp-plan-command-group button.is-danger {
  border-color: #fecdd3;
  color: #e11d48;
  background: #ffffff;
}
.cp-plan-command-group button.is-danger:hover {
  border-color: #e11d48;
  background: #fff1f2;
}
.cp-plan-library-msg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
}
.cp-plan-manage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0 6px;
}
.cp-plan-manage-bar--meta-only {
  justify-content: flex-start;
}
.cp-plan-manage-meta,
.cp-plan-manage-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.cp-plan-manage-meta > span:not(.inline-flex) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 850;
}
.cp-plan-manage-meta svg {
  color: #2563eb;
}
.cp-plan-manage-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #ffffff;
  color: #2563eb;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.cp-plan-manage-actions button:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.cp-plan-manage-actions button.is-danger {
  border-color: #fecdd3;
  color: #e11d48;
}
.cp-plan-manage-actions button.is-primary {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}
.cp-plan-manage-actions button.is-primary:hover {
  border-color: #FF6B2B;
  background: #ffffff;
  color: #FF6B2B;
}
.cp-plan-manage-actions button.is-danger:hover {
  border-color: #e11d48;
  background: #fff1f2;
}
.cp-plan-library-open {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
.cp-plan-library-toggle {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}
.cp-plan-library-open:hover {
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
}
.cp-plan-library-toggle:hover {
  border-color: #16a34a !important;
  color: #166534 !important;
}
.cp-plan-library-kpis,
.cp-plan-insights {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-plan-library-kpis--inline {
  align-items: center;
  gap: 5px;
}
.cp-plan-library-kpis span,
.cp-plan-insights span {
  min-width: 92px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 9px 10px;
}
.cp-plan-library-kpis--inline span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  border-radius: 999px;
  background: #ffffff;
  padding: 4px 8px;
}
.cp-plan-library.is-plan-collapsed .cp-plan-library-kpis span {
  min-width: 0;
  padding: 4px 8px;
}
.cp-plan-library-kpis b,
.cp-plan-insights b {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}
.cp-plan-library-kpis--inline b {
  display: inline;
  font-size: 12px;
}
.cp-plan-library-kpis em,
.cp-plan-insights em {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}
.cp-plan-library-kpis--inline em {
  display: inline;
  margin: 0;
  font-size: 10.5px;
  line-height: 1;
}
.cp-plan-library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.cp-saved-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
}
.cp-plan-library.is-overlay-open .cp-saved-overlay {
  display: block;
}
.cp-saved-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, .36);
  cursor: pointer;
}
.cp-saved-panel {
  position: absolute;
  top: 74px;
  left: 50%;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 120px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.cp-saved-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid #eef2f7;
}
.cp-saved-panel-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.cp-saved-panel-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FF6B2B;
  font-size: 12px;
  font-weight: 900;
}
.cp-saved-panel-head b {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
}
.cp-saved-panel-head button {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}
.cp-saved-panel-head button:hover {
  border-color: #FF6B2B;
  color: #FF6B2B;
}
.cp-saved-toolbar {
  display: grid;
  gap: 9px;
  padding: 10px;
  border-bottom: 1px solid #eef2f7;
  background: #f8fafc;
}
.cp-saved-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #94a3b8;
  padding: 0 10px;
}
.cp-saved-toolbar input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
}
.cp-saved-toolbar input::placeholder {
  color: #94a3b8;
}
.cp-saved-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.cp-saved-status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-saved-status-tabs button,
.cp-saved-filter-row select {
  min-height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
}
.cp-saved-status-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cp-saved-status-tabs button b {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
}
.cp-saved-status-tabs button.is-active {
  border-color: #FF6B2B;
  background: #fff7ed;
  color: #c2410c;
}
.cp-saved-filter-row select {
  max-width: 138px;
  flex: 0 0 auto;
  outline: 0;
}
.cp-saved-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  overflow: auto;
  padding: 10px;
}
.cp-saved-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}
.cp-saved-list > button,
.cp-saved-row-main {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 11px;
  cursor: pointer;
}
.cp-saved-list > button:hover,
.cp-saved-list > button.is-active,
.cp-saved-row-main:hover,
.cp-saved-row.is-active .cp-saved-row-main {
  border-color: #FF6B2B;
  box-shadow: 0 8px 18px rgba(255, 107, 43, .10);
}
.cp-saved-row-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}
.cp-saved-row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 30px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 6px 7px;
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
}
.cp-saved-row-actions button:hover {
  border-color: #2563eb;
  background: #ffffff;
}
.cp-saved-row-actions button.is-danger {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}
.cp-saved-row-actions button.is-danger:hover {
  border-color: #e11d48;
  background: #ffffff;
}
.cp-saved-list b {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.32;
  font-weight: 900;
}
.cp-saved-list em {
  display: -webkit-box;
  margin-top: 4px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 700;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-saved-list small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.cp-saved-list small i {
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
/* AI-MARK[QAI-UI:lyly-campaign-clone-continuation] 2026-08-03 11:51 (GMT+7) — metadata thư viện hiển thị thời gian tạo/người tạo và form clone có mốc dời lịch rõ ràng | rel: lyly.js cpSavedPlanRowHtml/cpCloneOverlayHtml */
.cp-saved-row-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: #94a3b8;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}
.cp-saved-row-meta svg {
  color: #2563eb;
  margin-left: 3px;
}
.cp-clone-field-wide small {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
}
.cp-saved-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #94a3b8;
  text-align: center;
  padding: 18px;
}
.cp-saved-empty b {
  color: #475569;
  font-size: 13px;
}
.cp-saved-empty span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
}
.cp-clone-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.cp-clone-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, .42);
  cursor: pointer;
}
.cp-clone-panel {
  position: absolute;
  top: 72px;
  left: 50%;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 96px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .30);
}
.cp-clone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #eef2f7;
}
.cp-clone-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cp-clone-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FF6B2B;
  font-size: 12px;
  font-weight: 900;
}
.cp-clone-head b {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}
.cp-clone-head em {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 750;
}
.cp-clone-head button {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}
.cp-clone-form {
  display: grid;
  gap: 11px;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}
.cp-clone-form label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.cp-clone-form input,
.cp-clone-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 10px 11px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
  outline: 0;
  resize: vertical;
}
.cp-clone-form input:focus,
.cp-clone-form textarea:focus {
  border-color: #FF6B2B;
  box-shadow: 0 0 0 3px rgba(255, 107, 43, .12);
}
.cp-clone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cp-clone-suggestions {
  display: grid;
  gap: 7px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  padding: 11px;
}
.cp-clone-suggestions span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c2410c;
  font-size: 12px;
  font-weight: 900;
}
.cp-clone-suggestions p {
  margin: 0;
  color: #7c2d12;
  font-size: 12px;
  line-height: 1.42;
  font-weight: 750;
}
.cp-clone-error {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  background: #fff1f2;
  color: #be123c;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 850;
}
.cp-clone-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.cp-clone-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.cp-clone-actions button.is-primary {
  border-color: #FF6B2B;
  background: #FF6B2B;
  color: #ffffff;
}
.cp-clone-actions button:disabled {
  cursor: wait;
  opacity: .75;
}
.cp-selected-plan {
  min-width: 0;
}
.cp-selected-plan--full {
  width: 100%;
}
.cp-plan-collapsed-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 16px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 12px 14px;
}
.cp-plan-progress-strip {
  min-height: 72px;
}
.cp-plan-collapsed-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cp-plan-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}
.cp-plan-mode-chip.is-active {
  background: #dcfce7;
  color: #15803d;
}
.cp-plan-mode-chip.is-draft {
  background: #fef3c7;
  color: #92400e;
}
.cp-plan-collapsed-main b {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}
.cp-plan-collapsed-main em {
  display: -webkit-box;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 750;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-plan-collapsed-progress {
  display: flex;
  align-items: center;
  justify-self: stretch;
  gap: 10px;
  min-width: 0;
}
.cp-plan-collapsed-progress span {
  flex: 1 1 auto;
  height: 9px;
  min-width: 120px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}
.cp-plan-collapsed-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #FF6B2B, #ec4899);
}
.cp-plan-collapsed-progress b {
  flex: 0 0 auto;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}
.cp-detail-card {
  max-width: min(1040px, calc(100vw - 32px));
}
.cp-detail-body {
  display: grid;
  gap: 14px;
}
.cp-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 14px;
  align-items: start;
}
.cp-detail-editor,
.cp-detail-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.cp-detail-side {
  position: sticky;
  top: 0;
}
.cp-regenerate-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
  padding: 12px;
  cursor: pointer;
}
.cp-regenerate-box input {
  margin-top: 3px;
  accent-color: #FF6B2B;
}
.cp-regenerate-box b,
.cp-regenerate-box em {
  display: block;
}
.cp-regenerate-box b {
  color: #9a3412;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 900;
}
.cp-regenerate-box em {
  margin-top: 3px;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.4;
  font-style: normal;
  font-weight: 750;
}
.cw-smart-plan.cp-plan-mode {
  grid-template-columns: minmax(0, 1fr);
  border-color: #dbeafe;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 54%, #eef2ff 100%);
}
.cw-smart-plan.cp-plan-mode.is-active {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f0fdf4 100%);
}
.cp-plan-main {
  display: grid;
  gap: 8px;
}
.cp-plan-insights {
  padding-top: 2px;
}
.cp-plan-preview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.cp-plan-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 10px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 2px;
}
.cp-plan-mode .cp-plan-kanban {
  margin-top: 2px;
}
.cp-plan-col {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 210px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}
.cp-plan-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #eef2f7;
}
.cp-plan-col-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}
.cp-plan-col-head svg {
  color: #FF6B2B;
}
.cp-plan-col-head em {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.cp-plan-col-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}
.cp-plan-task {
  display: grid;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
  min-width: 0;
}
.cp-plan-task-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cp-plan-task b {
  color: #0f172a;
  font-size: 12.5px;
  line-height: 1.28;
  font-weight: 900;
}
.cp-plan-task p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.42;
  font-weight: 700;
}
.cp-plan-approval,
.cp-plan-done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  padding: 4px 7px;
  font-size: 10.5px;
  font-weight: 900;
}
.cp-plan-approval.is-ok,
.cp-plan-done {
  background: #dcfce7;
  color: #15803d;
}
.cp-plan-approval.is-warn {
  background: #fee2e2;
  color: #be123c;
}
.cp-plan-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cp-plan-task-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  padding: 4px 7px;
  font-size: 10.5px;
  font-weight: 850;
}
.cp-plan-task-meta svg {
  color: #2563eb;
}
.cp-plan-deliverable {
  display: grid;
  gap: 3px;
  border-left: 3px solid #bfdbfe;
  padding-left: 8px;
}
.cp-plan-deliverable span {
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 900;
}
.cp-plan-deliverable em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.cp-plan-task button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #c2410c;
  padding: 7px 9px;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
}
.cp-plan-task button:hover {
  border-color: #FF6B2B;
  color: #FF6B2B;
  background: #ffffff;
}
.cp-plan-task button:disabled {
  cursor: wait;
  opacity: .72;
}
.cp-plan-empty-col {
  min-height: 88px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 850;
}
.cp-plan-timeline {
  display: grid;
  gap: 10px;
}
.cp-plan-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}
.cp-plan-section-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}
.cp-plan-section-head span svg {
  color: #2563eb;
}
.cp-plan-section-head em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.cp-plan-tline-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(132px, auto);
  gap: 10px;
  align-items: start;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}
.cp-plan-tline-index {
  display: grid;
  gap: 5px;
  justify-items: start;
}
.cp-plan-tline-index span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}
.cp-plan-tline-index em {
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.cp-plan-tline-summary {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.cp-plan-tline-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.cp-plan-tline-title-row b {
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.32;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.cp-plan-status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 900;
}
.cp-plan-status-pill.is-approved {
  background: #dcfce7;
  color: #15803d;
}
.cp-plan-status-pill.is-review {
  background: #fef3c7;
  color: #92400e;
}
.cp-plan-status-pill.is-doing {
  background: #dbeafe;
  color: #1d4ed8;
}
.cp-plan-status-pill.is-blocked {
  background: #fee2e2;
  color: #b91c1c;
}
.cp-plan-tline-summary p {
  margin: 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 700;
}
.cp-plan-tline-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.cp-plan-tline-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
}
.cp-plan-tline-meta svg {
  color: #2563eb;
  flex: 0 0 auto;
}
.cp-plan-tline-actions {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 126px;
}
.cp-plan-tline-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
}
.cp-plan-tline-actions button:hover {
  border-color: #2563eb;
  background: #ffffff;
}
.cp-plan-tline-actions button[data-cpplan-edit] {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}
.cp-plan-tline-actions button[data-cpplan-edit]:hover {
  border-color: #FF6B2B;
  background: #ffffff;
  color: #FF6B2B;
}
.cp-plan-tline-item.is-dirty {
  border-color: #fdba74;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, .10);
}
.cp-plan-tline-item.is-approved {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.cp-plan-tline-item.is-review {
  border-color: #fde68a;
  background: #fffbeb;
}
.cp-plan-tline-item.is-doing {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.cp-task-edit-card {
  max-width: min(760px, calc(100vw - 32px));
  overflow: hidden;
  border-radius: 8px !important;
}
.cp-task-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #eef2f7;
  padding: 16px 18px;
}
.cp-task-edit-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cp-task-edit-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FF6B2B;
  font-size: 12px;
  font-weight: 900;
}
.cp-task-edit-head b {
  color: #0f172a;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.cp-task-edit-head em {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 750;
}
.cp-task-edit-head button {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}
.cp-task-edit-head button:hover {
  border-color: #FF6B2B;
  color: #FF6B2B;
}
.cp-task-edit-body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}
.cp-task-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  min-width: 0;
}
.cp-task-edit-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.cp-task-edit-field--wide {
  grid-column: 1 / -1;
}
.cp-task-edit-field input,
.cp-task-edit-field select,
.cp-task-edit-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 10px 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
  outline: 0;
}
.cp-task-edit-field textarea {
  resize: vertical;
}
.cp-task-edit-field input:focus,
.cp-task-edit-field select:focus,
.cp-task-edit-field textarea:focus {
  border-color: #FF6B2B;
  box-shadow: 0 0 0 3px rgba(255, 107, 43, .12);
}
.cp-task-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #eef2f7;
  padding-top: 12px;
}
.cp-task-edit-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.cp-task-edit-actions button:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.cp-task-edit-actions button.is-primary {
  border-color: #FF6B2B;
  background: #FF6B2B;
  color: #ffffff;
}
.cp-task-edit-actions button.is-primary:hover {
  border-color: #e45a20;
  background: #e45a20;
}
.cp-plan-approval-gate {
  display: grid;
  gap: 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  padding: 12px;
}
.cp-plan-gate-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cp-plan-gate-steps span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #ffedd5;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}
.cp-plan-gate-steps svg {
  color: #fb923c;
}
.cp-plan-gate-steps b {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
}
.cp-plan-gate-steps em {
  color: #64748b;
  font-size: 11px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 750;
}
.cp-plan-gate-steps span.is-done {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.cp-plan-gate-steps span.is-done svg {
  color: #16a34a;
}
.cp-plan-gate-steps span.is-current {
  border-color: #fdba74;
  background: #fff7ed;
}
.cp-plan-gate-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-plan-gate-cta p {
  margin: 0;
  min-width: 220px;
  flex: 1 1 260px;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.42;
  font-weight: 800;
}
.cp-plan-gate-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.cp-plan-approval-gate--compact .cp-plan-gate-steps {
  grid-template-columns: 1fr;
}
.cp-detail-plan {
  display: grid;
  gap: 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}
.cp-detail-plan.is-active {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.cp-detail-plan > div:first-child {
  display: grid;
  gap: 4px;
}
.cp-detail-plan span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FF6B2B;
  font-size: 12px;
  font-weight: 900;
}
.cp-detail-plan.is-active span {
  color: #15803d;
}
.cp-detail-plan b {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}
.cp-detail-plan em,
.cp-detail-plan p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.42;
  font-style: normal;
  font-weight: 750;
}
@media (max-width: 1180px) {
  .cp-plan-library-head--workspace {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cp-plan-command-panel {
    justify-items: stretch;
  }
  .cp-plan-workspace-toolbar {
    align-items: stretch;
  }
  .cp-plan-workspace-toolbar .cp-plan-command-panel {
    flex-basis: 100%;
    justify-items: start;
  }
  .cp-plan-command-group,
  .cp-plan-command-group.is-secondary {
    justify-content: flex-start;
  }
  .cp-plan-command-group.is-main,
  .cp-plan-command-group.is-secondary {
    flex-wrap: wrap;
  }
  .cp-plan-library-grid {
    grid-template-columns: 1fr;
  }
  .cp-saved-list {
    grid-template-columns: 1fr;
  }
  .cp-plan-kanban {
    grid-template-columns: repeat(4, minmax(240px, 1fr));
  }
  .cp-plan-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cp-detail-grid,
  .cp-plan-tline-item {
    grid-template-columns: 1fr;
  }
  .cp-detail-side {
    position: static;
  }
  .cp-plan-tline-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cp-plan-gate-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .cp-plan-library--loading,
  .cp-plan-library--empty {
    grid-template-columns: 1fr;
  }
  .cp-plan-library-head {
    display: grid;
  }
  .cp-plan-overline-row {
    align-items: flex-start;
  }
  .cp-plan-library-side {
    justify-items: stretch;
    min-width: 0;
  }
  .cp-plan-workspace-toolbar {
    padding: 8px;
  }
  .cp-plan-library-actions,
  .cp-plan-command-group {
    justify-content: stretch;
  }
  .cp-plan-library-actions button,
  .cp-plan-command-group button {
    flex: 1 1 160px;
  }
  .cp-plan-manage-bar {
    display: grid;
  }
  .cp-plan-manage-actions button {
    flex: 1 1 150px;
  }
  .cp-plan-collapsed-card {
    grid-template-columns: 1fr;
  }
  .cp-plan-collapsed-progress {
    width: 100%;
  }
	  .cp-saved-panel {
	    top: 78px;
	    right: 12px;
	    left: 12px;
	    width: auto;
	    max-height: calc(100dvh - 96px);
    transform: none;
	  }
  .cp-saved-filter-row {
    align-items: stretch;
    flex-direction: column;
  }
  .cp-saved-filter-row select {
    max-width: none;
    width: 100%;
  }
  .cp-saved-row {
    grid-template-columns: 1fr;
  }
  .cp-saved-row-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cp-saved-row-actions button {
    width: 100%;
  }
  .cp-clone-panel {
    top: 54px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 68px);
  }
  .cp-clone-grid {
    grid-template-columns: 1fr;
  }
	  .cp-saved-list,
	  .cp-plan-preview {
	    grid-template-columns: 1fr;
	  }
  .cp-plan-section-head,
  .cp-plan-tline-title-row,
  .cp-plan-tline-fields {
    grid-template-columns: 1fr;
  }
  .cp-plan-section-head {
    display: grid;
  }
  .cp-plan-tline-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cp-task-edit-card {
    max-width: calc(100vw - 24px);
  }
  .cp-task-edit-form {
    grid-template-columns: 1fr;
  }
  .cp-task-edit-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cp-plan-library-kpis span,
  .cp-plan-insights span {
    flex: 1 1 120px;
  }
}

/* AI-MARK[QAI-UI:lyly-creative-schedule] 2026-07-03 11:48 (GMT+7) — timeline lịch đăng cho mọi tab Sáng tạo; class viết tay vì lyly-tailwind.css purge class mới | rel: lyly.js renderCreativeList/creativeCard/cwScheduleIso */
.cw-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cw-schedule-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}
.cw-schedule-title svg { color: #FF6B2B; }
.cw-schedule-kpis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cw-schedule-kpis span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
}
.cw-schedule {
  display: grid;
  gap: 14px;
}
.cw-schedule-section {
  display: grid;
  gap: 8px;
}
.cw-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.cw-section-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #FF6B2B;
}
.cw-section-title em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff2ec;
  color: #FF6B2B;
  font-style: normal;
  font-size: 11px;
}
.cw-section-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}
.cw-schedule-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 142px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.cw-schedule-card:hover {
  border-color: rgba(255, 107, 43, .55);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
  transform: translateY(-1px);
}
.cw-datebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff7f5, #ffffff);
  border: 1px solid #ffd6c4;
  color: #FF6B2B;
  padding: 8px 6px;
}
.cw-datebox small {
  font-size: 10.5px;
  line-height: 1;
  color: #f97316;
  font-weight: 800;
}
.cw-datebox b {
  color: #0f172a;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
}
.cw-datebox em {
  font-style: normal;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.cw-datebox--empty {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
}
.cw-datebox--empty b {
  color: #64748b;
  font-size: 13px;
}
.cw-card-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 7px;
}
.cw-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cw-card-title {
  flex: 1;
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cw-score {
  flex-shrink: 0;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}
.cw-card-body {
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 22px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}
.cw-chip svg {
  flex-shrink: 0;
  color: #94a3b8;
}
@media (max-width: 640px) {
  .cw-schedule-head { align-items: flex-start; flex-direction: column; }
  .cw-schedule-kpis { justify-content: flex-start; }
  .cw-section-list { grid-template-columns: 1fr; }
  .cw-schedule-card { grid-template-columns: 1fr; min-height: 0; }
  .cw-datebox { min-height: 62px; flex-direction: row; justify-content: flex-start; padding: 10px 12px; }
  .cw-datebox b { font-size: 20px; }
}

/* AI-MARK[QAI-UI:lyly-modal-scroll] 2026-07-01 10:59 (GMT+7) — modal card KHÔNG cao quá màn hình + thân CUỘN được: `max-h-[NNvh]` Tailwind arbitrary BỊ PURGE khỏi build → thân modal không cuộn → nội dung dài bị CẮT. Header/footer flex-none, body flex-1 cuộn. Dùng ở 5 modal (lyly.js). guard lyly-tailwind-purged-classes | rel: sổ lỗi lyly-modal-scroll-purge, lyly.js .lyly-modal-card/.lyly-modal-body */
.lyly-modal-card { display: flex; flex-direction: column; max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); } /* trừ my-6 (3rem) + p-4 outer (2rem) → card+lề luôn vừa màn hình */
.lyly-modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* AI-MARK[QAI-UI:birthday-agentic] 2026-07-01 16:16 (GMT+7) — chip "Phương án 1/2/3" (option-picker lời chúc sinh nhật, Trung tâm hành động): border/màu active PHẢI ở đây, KHÔNG dựa .border-brand-orange{}/.bg-brand-orange (bị purge khỏi lyly-tailwind.css build-sẵn — cùng lỗi đã ghi ở .lyly-subnav-tab.is-active). guard lyly-tailwind-purged-classes | rel: lyly.js acWishOptionsHtml, acCard birthday branch */
.ac-wishopt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  color: #64748b;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}
.ac-wishopt:hover { border-color: #FF6B2B; color: #FF6B2B; }
.ac-wishopt.is-active { border-color: #FF6B2B; color: #FF6B2B; background: rgba(255, 107, 43, 0.10); }

/* AI-MARK[QAI-UI:group-mgmt] 2026-07-01 17:11 (GMT+7) — GĐ4a Quản lý nhóm thông minh: health badge (active/deactivated/last-send) + settings editor (category/quietHours/allowedTypes/tone) trên tab Nhóm; Action Center group-alerts + advisory targetFlags trên thẻ announce/birthday. Custom classes (KHÔNG Tailwind arbitrary) vì lyly-tailwind.css build-sẵn bị purge (guard lyly-tailwind-purged-classes). | rel: UI-L4-Lyly, server/lyly/routes.js GET /groups-health, PATCH /groups/:chatId/settings, POST /groups/:chatId/reactivate, server/lyly/action-center.js groupAlerts/targetFlags, lyly.js grpLoadGroups/grpGroupHealthBadge/grpToggleSettings/acCard */

/* Health badge — trạng thái nhóm (active/deactivated) */
.grp-health-ok {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: #dcfce7;
  color: #15803d;
}
.grp-health-off {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: #fee2e2;
  color: #b91c1c;
}
/* GĐ1: nhóm active nhưng đang trong giờ im lặng (quiet-hours) — tính client-side | rel: lyly.js grpHealthBadge/grpInQuietHours */
.grp-health-quiet {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  background: #fef3c7;
  color: #b45309;
}
.grp-health-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}
.grp-health-meta--fail { color: #e11d48; }

/* Nút mở/đóng Cài đặt nhóm (inline expander) */
.grp-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.grp-settings-toggle:hover { border-color: #FF6B2B; color: #FF6B2B; }
.grp-settings-toggle.is-active { border-color: #FF6B2B; color: #FF6B2B; background: rgba(255, 107, 43, 0.10); }

/* Slot chứa panel cài đặt (rỗng khi đóng, không chiếm layout) */
.grp-settings-slot:empty { display: none; }
/* Panel cài đặt nhóm (mở rộng dưới hàng nhóm — nằm trong .grp-group-row-wrap nên KHÔNG tự border-bottom, tránh double-border với wrapper) */
.grp-settings-panel {
  padding: 12px 16px 14px;
  background: #f8fafc;
  border-top: 1px dashed #e2e8f0;
}
.grp-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.grp-settings-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0;
  display: block;
  margin-bottom: 4px;
}
.grp-settings-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 3px;
}
.grp-settings-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.grp-settings-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
}

/* Thẻ cảnh báo nhóm bị vô hiệu hoá — Trung tâm hành động */
.ac-group-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #fecaca;
  box-shadow: 0 1px 3px rgba(2,6,23,.06);
  padding: 12px 14px;
}
.ac-group-alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #fee2e2;
  color: #b91c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ac-group-alert-body { flex: 1; min-width: 0; }
.ac-group-alert-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.ac-group-alert-reason { font-size: 12px; color: #b91c1c; margin-top: 2px; }
.ac-group-alert-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.ac-group-alert-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* Advisory "sẽ bỏ qua nhóm X" trên thẻ announce/birthday — không ẩn nút duyệt */
.ac-skip-advisory {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

/* AI-MARK[QAI-UI:lyly-gd5-polish] 2026-07-01 21:07 (GMT+7) — GĐ5 polish: primitives dùng chung EMPTY/LOADING/badge/section-title cho 5 tab (Trung tâm Hành động, Thông báo, Sinh nhật, Nhóm, Kho tri thức) — thuần CSS, không đổi hành vi | rel: UI-L4-Lyly, lyly.js viewActionCenter/viewAnnounce/viewBirthday/viewGroups/viewKnowledge */

/* Empty-state khung chấm (thay thế các biến thể inline rải rác) */
.lyly-empty {
  border: 2px dashed #e2e8f0;
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  color: #94a3b8;
  max-width: 100%;
  word-break: break-word;
}
.lyly-empty-ico { width: 32px; height: 32px; opacity: .4; margin: 0 auto 10px; display: block; }
.lyly-empty-title { font-weight: 600; color: #64748b; }
.lyly-empty-sub { font-size: 13px; margin-top: 4px; }

/* Loading state khung (thay thế các biến thể inline rải rác) */
.lyly-loading {
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  color: #94a3b8;
  max-width: 100%;
}
.lyly-loading-txt { margin-top: 8px; font-size: 13px; }

/* Badge đếm số (sub-tab Kho tri thức…) — thay biến thể h-4.5/bg-brand-orange/20 (bị purge) */
.lyly-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #64748b;
}
.lyly-count-badge.is-active { background: rgba(255, 107, 43, .16); color: #FF6B2B; }

/* Hover nền cam nhạt nút Sửa thông báo — .hover\:bg-brand-orange/10 KHÔNG có trong lyly-tailwind.css build-sẵn
   (chỉ .bg-brand-orange/10 base tồn tại, biến thể hover bị purge — guard lyly-tailwind-purged-classes) */
.ann-edit-btn:hover { background: rgba(255, 107, 43, .1); }

/* Tiêu đề mục (section title) dùng chung — thay re-inline text-sm font-bold text-navy-900 uppercase tracking-wide */
.lyly-section-title {
  font-size: .8125rem;
  font-weight: 700;
  color: #0B1437;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Responsive: gọn lưới cài đặt nhóm + modal quy tắc định kỳ (Lặp/Thứ-Ngày/Giờ) trên màn hẹp
   .grid-cols-3 scope trong .lyly-modal-body để KHÔNG ảnh hưởng grid-cols-3 khác (vd renderToolGridList) */
@media (max-width: 640px) {
  .grp-settings-grid { grid-template-columns: 1fr; }
  .lyly-modal-body .grid-cols-3 { grid-template-columns: 1fr; }
}

/* ── AI-MARK[QAI-UI:lyly-analytics] 2026-07-02 10:16 (GMT+7) — GĐ1 tab Phân tích: phân tích đối thủ đa chiều (định vị/ưu đãi/nhịp+kênh/đối tượng). Viết tay purge-safe; reuse ci-hero/ci-avatar/ci-badge/ci-plat/ci-chip/ci-prom/ci-refresh-btn/lyly-empty | rel: lyly.js viewAnalytics/an* */
.an-hero { background: linear-gradient(135deg,#fff7f5,#ffffff); border-color: #ffe1d3; }
.an-hero .ci-hero-icon { background: linear-gradient(135deg,#FF6B2B,#f43f5e); }
.an-hero .ci-hero-title b { color: #c2410c; }
.an-empty-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: #FF6B2B; text-decoration: none; }
.an-empty-cta:hover { text-decoration: underline; }

/* Section wrapper */
.an-section { border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(2,6,23,.06); padding: 14px 16px; margin-bottom: 14px; }
.an-section-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: #0B1437; margin-bottom: 12px; }
.an-section-head i { color: #FF6B2B; }
.an-hint { font-size: 11.5px; color: #94a3b8; margin-top: 10px; line-height: 1.5; }
.an-muted { font-size: 12.5px; color: #94a3b8; }
.an-tag-est { font-size: 10px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 6px; padding: 1px 6px; text-transform: none; letter-spacing: 0; }

/* Positioning matrix */
.an-mx-wrap { overflow-x: auto; }
.an-mx { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.an-mx th { text-align: center; font-weight: 700; color: #64748b; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.an-mx th.an-mx-corner { text-align: left; }
.an-mx td { text-align: center; padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
.an-mx tr:last-child td { border-bottom: none; }
.an-mx-comp { text-align: left !important; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.an-mx-avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.an-mx-cell { display: inline-flex; min-width: 22px; justify-content: center; border-radius: 7px; font-weight: 800; padding: 2px 7px; }
.an-mx-cell--mid { background: #eef2ff; color: #4338ca; }
.an-mx-cell--hi { background: #fee2e2; color: #b91c1c; }
.an-mx-zero { color: #cbd5e1; }
.an-mx-total { font-weight: 800; color: #0B1437; }

/* Cards grid (positioning / cadence / offers / audience) */
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 720px) { .an-grid { grid-template-columns: 1fr; } }
.an-card { border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(2,6,23,.05); padding: 13px 14px; }
.an-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.an-card-name { font-size: 13.5px; font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; }
.an-card-sub { font-size: 11.5px; color: #94a3b8; margin-top: 1px; }
.an-card-plats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.an-card-block { margin-top: 8px; }
.an-card-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.an-list { margin: 0; padding-left: 16px; font-size: 12.5px; color: #334155; line-height: 1.55; }
.an-list li { margin-bottom: 2px; }

/* Bars (intensity / platform) */
.an-bars { display: flex; flex-direction: column; gap: 9px; }
.an-bar-row { display: flex; align-items: center; gap: 10px; }
.an-bar-label { flex: 0 0 96px; font-size: 12.5px; font-weight: 600; color: #334155; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-track { flex: 1; height: 16px; border-radius: 8px; background: #f1f5f9; overflow: hidden; }
.an-bar-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg,#FF6B2B,#f43f5e); min-width: 3px; }
.an-bar-fill--plat { background: linear-gradient(90deg,#0B5FFF,#6366f1); }
.an-bar-val { flex: 0 0 28px; font-size: 12.5px; font-weight: 800; color: #0B1437; text-align: left; }

/* Offers */
.an-summary { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.an-summary i { color: #c2410c; }
.an-summary b { color: #0B1437; }
.an-offer-row { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid #f1f5f9; }
.an-card-head + .an-offer-row { border-top: none; }
.an-offer-tag { flex: 0 0 26px; height: 26px; border-radius: 8px; background: #fce7f3; color: #be185d; display: flex; align-items: center; justify-content: center; }
.an-offer-body { min-width: 0; flex: 1; }
.an-offer-name { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.an-offer-text { font-size: 12.5px; color: #334155; margin: 2px 0 5px; line-height: 1.5; }
.an-offer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.an-offer-when { font-size: 11px; color: #94a3b8; }
.an-offer-src { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #FF6B2B; text-decoration: none; }
.an-offer-src:hover { text-decoration: underline; }

/* Prominence ranking */
.an-proms { display: flex; flex-direction: column; gap: 7px; }
.an-prom-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; }
.an-prom-body { flex: 1; min-width: 0; font-size: 12.5px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-prom-body b { color: #0f172a; }

/* Lite empty (per-slice) */
.an-empty-lite { display: flex; align-items: center; gap: 10px; border-radius: 14px; background: #f8fafc; border: 1px dashed #cbd5e1; padding: 16px 18px; color: #64748b; font-size: 13px; }
.an-empty-lite i { color: #94a3b8; flex-shrink: 0; }

/* ── GĐ2 — Lát cắt Chiến lược (AI): SWOT / khoảng trống / định vị / actions | rel: lyly.js anRenderStratBox ── */
.an-strat { border-radius: 16px; background: linear-gradient(135deg,#fff7f5,#ffffff); border: 1px solid #ffe1d3; box-shadow: 0 1px 3px rgba(2,6,23,.06); padding: 14px 16px; }
.an-strat-loading { display: flex; align-items: center; gap: 6px; border-radius: 16px; background: #fff7f5; border: 1px solid #ffe1d3; padding: 16px 18px; color: #64748b; font-size: 13px; }
.an-strat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.an-strat-head > i { color: #FF6B2B; }
.an-strat-title { font-size: 14px; font-weight: 800; color: #0B1437; }
.an-strat-regen { margin-left: auto; height: 28px; width: 28px; border-radius: 8px; border: 1px solid #ffd9c7; background: #fff; color: #FF6B2B; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.an-strat-regen:hover { background: #fff1ea; }
.an-strat-pos { margin-bottom: 12px; }
.an-strat-time { font-size: 11px; color: #94a3b8; margin-top: 10px; line-height: 1.5; }

/* SWOT 2×2 */
.an-swot { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 640px) { .an-swot { grid-template-columns: 1fr; } }
.an-swot-q { border-radius: 12px; padding: 10px 12px; border: 1px solid #e2e8f0; background: #fff; }
.an-swot-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; margin-bottom: 5px; }
.an-swot-q--s { background: #f0fdf4; border-color: #bbf7d0; } .an-swot-q--s .an-swot-t { color: #15803d; }
.an-swot-q--w { background: #fff7ed; border-color: #fed7aa; } .an-swot-q--w .an-swot-t { color: #c2410c; }
.an-swot-q--o { background: #eff6ff; border-color: #bfdbfe; } .an-swot-q--o .an-swot-t { color: #1d4ed8; }
.an-swot-q--t { background: #fef2f2; border-color: #fecaca; } .an-swot-q--t .an-swot-t { color: #b91c1c; }

/* Strategy blocks (whitespace / positioning map / actions) */
.an-strat-block { border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; padding: 10px 12px; margin-top: 10px; }
.an-strat-block-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #0B1437; margin-bottom: 5px; }
.an-strat-block-t i { color: #FF6B2B; }
.an-strat-block--ws { background: #fffbeb; border-color: #fde68a; }
.an-strat-block--ws .an-strat-block-t { color: #b45309; }
.an-strat-block--act { background: #f0fdfa; border-color: #99f6e4; }
.an-strat-block--act .an-strat-block-t { color: #0f766e; }
.an-strat-map { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 640px) { .an-strat-map { grid-template-columns: 1fr; } }
.an-strat-map .an-strat-block { margin-top: 0; }
.an-strat-block--crowd .an-strat-block-t { color: #7c3aed; }
.an-strat-block--open .an-strat-block-t { color: #0369a1; }

/* GĐ đính-kèm thông báo — chip ảnh/tài liệu (viết tay, purge-safe) */
.lyly-att-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.lyly-att-empty { font-size: 12px; color: #94a3b8; font-style: italic; }
.lyly-att-chip { position: relative; min-width: 0; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; overflow: hidden; }
.lyly-att-media { display: grid; grid-template-rows: 82px 32px; width: 118px; }
.lyly-att-preview { position: relative; display: block; width: 100%; min-width: 0; border: 0; padding: 0; background: #f1f5f9; cursor: zoom-in; overflow: hidden; }
.lyly-att-img { height: 82px; padding: 0; overflow: hidden; }
.lyly-att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* AI-MARK[QAI-UI:lyly-announce-attachments] 2026-07-14 14:25 (GMT+7) — thumbnail video đính kèm nằm trong tile có action rail riêng, nút xoá không overlay lên video | rel: attChipHtml, acwRenderAtts */
.lyly-att-video { height: 82px; padding: 0; overflow: hidden; cursor: zoom-in; }
.lyly-att-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0f172a; }
.att-video-play { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(15,23,42,.55); border-radius: 9999px; pointer-events: none; }
.lyly-att-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 32px; border-top: 1px solid #eef2f7; background: #fff; padding: 4px 6px; }
.lyly-att-doc { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 230px; max-width: 340px; padding: 8px 9px; }
.lyly-att-doc-icon { width: 28px; height: 28px; border-radius: 9px; background: #fff7ed; color: #FF6B2B; display: inline-flex; align-items: center; justify-content: center; }
.lyly-att-name { font-size: 12px; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyly-att-badge { position: absolute; left: 4px; bottom: 4px; font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(to bottom right, #FF6B2B, #f43f5e); border-radius: 6px; padding: 1px 5px; }
.lyly-att-rm { position: static; flex: 0 0 auto; width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff1f2; border: 1px solid #fecdd3; color: #e11d48; box-shadow: none; cursor: pointer; }
.lyly-att-rm:hover { background: #ffe4e6; color: #be123c; border-color: #fda4af; }

/* Quản trị nhóm (gỡ khỏi sổ gửi) — viết tay, purge-safe */
/* AI-MARK[QAI-UI:group-admin] 2026-07-03 12:03 (GMT+7) — tab Nhóm redesign: workspace thoáng, stats/filter + row hợp nhất sổ gửi/sức khoẻ/cài đặt; không dùng card background cài đặt riêng | rel: lyly.js viewGroups/grpRenderAdminList */
.grp-board { display: grid; gap: 12px; }
.grp-board-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grp-board-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Nút "Hủy" dừng Lyly giữa chừng (AbortController) — composer/wizard loading */
.lyly-cancel-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; padding: 6px 16px; font-size: 13px; font-weight: 600; color: #64748b; background: #fff; border: 1px solid #e2e8f0; border-radius: 9999px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.lyly-cancel-btn:hover { border-color: #f43f5e; color: #e11d48; background: #fff1f2; }
.lyly-cancel-inline { margin-left: 6px; font-weight: 700; color: #fff; opacity: .9; text-decoration: underline; cursor: pointer; }
.lyly-cancel-inline:hover { opacity: 1; }
/* Pulse khi user cố đóng popup lúc Lyly đang chạy — nhắc bấm Hủy */
.lyly-cancel-pulse { animation: lylyCancelPulse .45s ease 2; }
@keyframes lylyCancelPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(244,63,94,.25); border-color: #f43f5e; color: #e11d48; } }
.grp-board-title { display: inline-flex; align-items: center; gap: 8px; color: #0f172a; font-size: 15px; font-weight: 800; }
.grp-board-title svg { color: #FF6B2B; }
.grp-refresh-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; color: #475569; padding: 8px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.grp-refresh-btn:hover { border-color: #FF6B2B; color: #FF6B2B; }
.grp-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.grp-admin-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 42px; border: 1px solid #e8edf3; border-radius: 13px; background: #fff; padding: 9px 11px; box-shadow: 0 1px 2px rgba(15,23,42,.035); }
.grp-admin-stat svg { color: #FF6B2B; }
.grp-admin-stat span { min-width: 0; color: #64748b; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-admin-stat b { color: #0f172a; font-size: 18px; line-height: 1; }
.grp-engagement-panel:empty { display: none; }
.grp-engagement-card { display: grid; gap: 10px; border: 1px solid #dbeafe; border-radius: 15px; background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #fff7ed 100%); padding: 13px 14px; box-shadow: 0 1px 3px rgba(15,23,42,.045); }
.grp-engagement-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grp-engagement-head > div { display: inline-flex; align-items: center; gap: 7px; color: #0b1437; font-size: 13px; font-weight: 900; }
.grp-engagement-head svg { color: #2563eb; }
.grp-engagement-head small { color: #64748b; font-size: 11px; font-weight: 800; }
.grp-engagement-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grp-engagement-metrics span { min-width: 0; border: 1px solid rgba(148,163,184,.28); border-radius: 12px; background: rgba(255,255,255,.78); padding: 9px 10px; }
.grp-engagement-metrics b { display: block; color: #0f172a; font-size: 21px; line-height: 1.05; }
.grp-engagement-metrics em { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-style: normal; font-weight: 800; overflow-wrap: anywhere; }
.grp-engagement-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grp-engagement-emojis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grp-engagement-emojis span { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; border-radius: 999px; background: #eef6ff; color: #1d4ed8; padding: 3px 8px; font-size: 12px; font-weight: 800; }
.grp-engagement-emojis b { color: #0f172a; }
.grp-engagement-last { display: inline-flex; align-items: center; gap: 5px; color: #64748b; font-size: 11px; font-weight: 800; }
.grp-engagement-detail { display: grid; gap: 8px; border: 1px solid rgba(37,99,235,.16); border-radius: 13px; background: rgba(255,255,255,.82); padding: 10px 11px; }
.grp-engagement-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.grp-engagement-detail-head span { display: inline-flex; align-items: center; gap: 6px; color: #0f172a; font-size: 12px; font-weight: 900; }
.grp-engagement-detail-head svg { color: #2563eb; }
.grp-engagement-detail-head em { color: #1d4ed8; background: #eff6ff; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-style: normal; font-weight: 900; }
.grp-engagement-detail-grid { display: grid; grid-template-columns: 1.15fr 1fr .75fr; gap: 7px; }
.grp-engagement-detail-grid span { min-width: 0; border: 1px solid #e8edf3; border-radius: 10px; background: #fff; color: #334155; padding: 7px 8px; font-size: 11.5px; font-weight: 800; overflow-wrap: anywhere; }
.grp-engagement-detail-grid b { display: block; margin-bottom: 2px; color: #94a3b8; font-size: 10px; text-transform: uppercase; }
.grp-engagement-detail p { margin: 0; color: #475569; font-size: 12px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.grp-filterbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.grp-filter { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #64748b; padding: 6px 11px; font-size: 12px; font-weight: 800; cursor: pointer; }
.grp-filter:hover { border-color: #FF6B2B; color: #FF6B2B; }
.grp-filter.is-active { border-color: #FF6B2B; background: #fff7f5; color: #FF6B2B; }
.grp-filter em { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-style: normal; font-size: 11px; }
.grp-filter.is-active em { background: #ffe1d3; color: #FF6B2B; }
.grp-admin-shell { min-height: 120px; }
.grp-admin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 12px; }
.grp-admin-row { display: flex; flex-direction: column; gap: 0; min-width: 0; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden; }
.grp-admin-row--paused { border-color: #fed7aa; }
.grp-admin-row--left { border-color: #fecaca; }
.grp-admin-row--out { border-style: dashed; }
.grp-admin-main { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: flex-start; padding: 14px; }
.grp-admin-icon { width: 42px; height: 42px; border-radius: 12px; background: #eef2ff; color: #4f46e5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.grp-admin-row--in .grp-admin-icon { background: #dcfce7; color: #15803d; }
.grp-admin-row--out .grp-admin-icon { background: #f1f5f9; color: #64748b; }
.grp-admin-row--paused .grp-admin-icon { background: #ffedd5; color: #c2410c; }
.grp-admin-row--left .grp-admin-icon { background: #fee2e2; color: #b91c1c; }
.grp-admin-body { min-width: 0; }
.grp-admin-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.grp-admin-name-wrap { min-width: 0; }
.grp-admin-name { color: #0b1437; font-size: 15px; font-weight: 800; line-height: 1.28; overflow-wrap: anywhere; word-break: break-word; }
.grp-admin-meta { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.grp-admin-meta code { background: #f1f5f9; border-radius: 6px; padding: 1px 6px; }
.grp-admin-sync { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: #2563eb; font-size: 11px; font-weight: 800; }
.grp-admin-sync svg { color: #2563eb; flex-shrink: 0; }
.grp-admin-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.grp-admin-badge { display: inline-flex; align-items: center; min-height: 22px; font-size: 11px; font-weight: 800; border-radius: 9999px; padding: 3px 9px; white-space: nowrap; }
.grp-admin-badge--in { background: #dcfce7; color: #15803d; }
.grp-admin-badge--out { background: #f1f5f9; color: #64748b; }
.grp-admin-badge--default { background: #fef3c7; color: #b45309; }
.grp-admin-badge--left { background: #fee2e2; color: #b91c1c; }
.grp-admin-badge--paused { background: #ffedd5; color: #c2410c; }
.grp-admin-badge--quiet { background: #e0f2fe; color: #0369a1; }
.grp-admin-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.grp-admin-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 23px; border-radius: 999px; background: #f8fafc; color: #64748b; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.grp-admin-chip svg { flex-shrink: 0; color: #94a3b8; }
.grp-admin-chip--fail { background: #fff1f2; color: #e11d48; }
.grp-admin-chip--signal { background: #eef6ff; color: #1d4ed8; }
.grp-admin-chip--signal svg { color: #2563eb; }
.grp-admin-signal-detail { display: grid; gap: 7px; margin-top: 9px; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; padding: 9px 10px; }
.grp-admin-signal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.grp-admin-signal-head span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: #0f172a; font-size: 12px; font-weight: 900; overflow-wrap: anywhere; }
.grp-admin-signal-head svg { color: #2563eb; flex-shrink: 0; }
.grp-admin-signal-head em { color: #64748b; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.grp-admin-signal-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.grp-admin-signal-meta span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 22px; border-radius: 999px; background: #fff; border: 1px solid #e8edf3; color: #475569; padding: 3px 8px; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.grp-admin-signal-meta b { color: #94a3b8; font-weight: 900; }
.grp-admin-signal-detail p { margin: 0; color: #334155; font-size: 12px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.grp-admin-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.grp-admin-remove, .grp-admin-add, .grp-admin-reactivate, .grp-admin-settings { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; font-size: 12.5px; font-weight: 800; border-radius: 10px; padding: 7px 12px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.grp-admin-settings { color: #475569; background: #fff; border-color: #e2e8f0; }
.grp-admin-settings:hover, .grp-admin-settings.is-active { border-color: #FF6B2B; color: #FF6B2B; background: #fff7f5; }
.grp-admin-remove { color: #b91c1c; background: #fff; border-color: #fecaca; }
.grp-admin-remove:hover { background: #fef2f2; }
.grp-admin-add { color: #fff; background: linear-gradient(to bottom right, #FF6B2B, #f43f5e); }
.grp-admin-add:hover { opacity: .93; }
.grp-admin-reactivate { color: #1d4ed8; background: #fff; border-color: #bfdbfe; }
.grp-admin-reactivate:hover { background: #eff6ff; }
.grp-admin-hint { font-size: 12px; color: #94a3b8; font-style: italic; max-width: 190px; text-align: right; line-height: 1.35; }
.grp-admin-msg { font-size: 12px; min-height: 16px; }
.grp-admin-settings-slot:empty { display: none; }
.grp-admin-settings-slot { padding: 0 14px 14px 68px; }
.grp-admin-settings-slot .grp-settings-panel { margin-top: 0; padding: 13px; border: 1px solid #e8edf3; border-radius: 13px; background: #fbfcfe; }
@media (max-width: 980px) {
  .grp-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grp-engagement-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grp-engagement-detail-grid { grid-template-columns: 1fr; }
  .grp-admin-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grp-admin-stats { grid-template-columns: 1fr; }
  .grp-engagement-metrics { grid-template-columns: 1fr; }
  .grp-admin-main { grid-template-columns: 38px minmax(0, 1fr); }
  .grp-admin-actions { grid-column: 1 / -1; align-items: stretch; }
  .grp-admin-actions > button { width: 100%; }
  .grp-admin-top { flex-direction: column; }
  .grp-admin-badges { justify-content: flex-start; }
  .grp-admin-settings-slot { padding: 0 12px 12px; }
}

/* ── AI-MARK[QAI-UI:lyly-home-cockpit] 2026-07-02 21:34 (GMT+7) — P1 Tổng quan REDESIGN → cockpit chiến lược: toolbar + KPI có sparkline + chart Độ phủ/Chất lượng. SVG tay, viết tay purge-safe (KHÔNG Tailwind arbitrary) | rel: lyly.js homePerfDashboard/_lcoSpark/_lcoKpi/_lcoBar/_lcoGauge, server/lyly/overview-metrics.js series */
.lco-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lco-range { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 5px 12px; }
.lco-range i { color: #FF6B2B; }
.lco-refresh { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.lco-refresh:hover { border-color: #FF6B2B; color: #FF6B2B; }
.lco-refresh.is-spin i { animation: lco-spin .8s linear infinite; }
@keyframes lco-spin { to { transform: rotate(360deg); } }

.lco-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
@media (min-width: 640px) { .lco-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .lco-kpis { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.lco-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(2,6,23,.06); padding: 12px; }
.lco-kpi-lb { font-size: 11px; font-weight: 600; color: #64748b; line-height: 1.3; min-height: 28px; }
.lco-kpi-vl { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.1; margin-top: 2px; }
.lco-kpi-sub { font-size: 10.5px; color: #94a3b8; margin-top: 6px; }
.lco-spark { display: block; width: 100%; height: 22px; margin-top: 8px; }

.lco-charts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 6px; }
@media (min-width: 768px) { .lco-charts { grid-template-columns: 1.15fr 1fr; } }
.lco-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 1px 3px rgba(2,6,23,.06); padding: 14px 16px; }
.lco-card-t { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #0B1437; margin-bottom: 12px; }
.lco-card-t i { color: #FF6B2B; }
.lco-card-t span { font-weight: 500; color: #94a3b8; font-size: 11px; }
.lco-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lco-bar-nm { width: 72px; flex: none; font-size: 12px; color: #475569; }
.lco-bar-tr { flex: 1; height: 9px; background: #eef0f4; border-radius: 6px; overflow: hidden; }
.lco-bar-fl { height: 100%; border-radius: 6px; min-width: 2px; }
.lco-bar-vn { width: 28px; text-align: right; flex: none; font-size: 12px; font-weight: 700; color: #0f172a; }
.lco-card-ft { margin-top: 8px; padding-top: 9px; border-top: 1px dashed #e2e8f0; font-size: 11.5px; color: #64748b; }
.lco-card-ft b { color: #0f172a; }
.lco-gauges { display: flex; gap: 18px; justify-content: center; margin-bottom: 4px; }
.lco-gg { text-align: center; }
.lco-gg-l { font-size: 11px; color: #64748b; margin-top: 4px; }
.lco-know { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.lco-know div { font-size: 11.5px; color: #64748b; }
.lco-know b { color: #0f172a; font-weight: 700; margin-left: 2px; }

/* ── AI-MARK[QAI-UI:lyly-home-cockpit] 2026-07-03 16:00 (GMT+7) — P2: Tổng quan chỉ giữ dải cảnh báo chủ động; khối tình báo đối thủ đã chuyển sang tab Phân tích. Purge-safe | rel: lyly.js _lcoAlerts/homePerfDashboard */
.lco-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lco-al { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 7px 11px; border: 1px solid; }
.lco-al i { flex: none; }
.lco-al--urgent { background: #fef2f2; border-color: #fecaca; color: #b42318; }
.lco-al--warn { background: #fff7ed; border-color: #fed7aa; color: #9a5b12; }
.lco-al--info { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.lco-al-tg { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; background: #229ED9; color: #fff; border-radius: 5px; padding: 1px 6px; }
.lco-comp { margin-top: 12px; }
.lco-empty-sm { font-size: 12px; color: #94a3b8; font-style: italic; padding: 4px 0; }
.lco-mv { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #e2e8f0; }
.lco-mv-t { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 5px; }
.lco-mv-row { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: #475569; padding: 2px 0; }
.lco-mv-row b { color: #0f172a; }
.lco-mv-dot { width: 6px; height: 6px; border-radius: 50%; background: #7c3aed; flex: none; margin-top: 5px; }
.lco-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #7c3aed; background: #f5f3ff; border: 1px solid #e9d5ff; border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.lco-cta:hover { background: #ede9fe; }

/* ── AI-MARK[QAI-UI:lyly-home-cockpit] 2026-07-04 14:39 (GMT+7) — P3: khối Hiệu quả theo nhãn (bar cam + seed) + hàng chart thứ 2; nhãn bar wrap, không ellipsis để dashboard không cắt text. Purge-safe | rel: lyly.js _lcoTags */
.lco-charts--2 { margin-top: 12px; }
.lco-charts--single { grid-template-columns: 1fr !important; }
.lco-card-t { flex-wrap: wrap; line-height: 1.35; }
.lco-bar-nm { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.lco-bar-nm--wide { width: 96px; }
.lco-seed-link { background: none; border: none; color: #FF6B2B; font-weight: 600; font-size: 11.5px; cursor: pointer; padding: 0; }
.lco-seed-link:hover { text-decoration: underline; }

/* AI-MARK[QAI-UI:lyly-home-ops-dashboard] 2026-07-04 14:39 (GMT+7) - dashboard vận hành Home: kế hoạch đăng bài, chiến dịch/sales, sinh nhật, kho tri thức; graph thanh rõ, text wrap. | rel: lyly.js _homeOpsDashboards, LYLY-INTG:overview-activity */
.lco-ops { margin-top: 12px; margin-bottom: 12px; }
.lco-ops-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:4px 0 10px; }
.lco-ops-head span { display:inline-flex; align-items:center; gap:7px; color:#0B1437; font-size:13px; font-weight:850; }
.lco-ops-head span i { color:#FF6B2B; }
.lco-ops-head em { color:#94a3b8; font-size:11.5px; font-style:normal; overflow-wrap:anywhere; }
.lco-ops-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 980px) { .lco-ops-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lco-op-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 1px 3px rgba(2,6,23,.06); padding:14px 16px; min-width:0; }
.lco-op-card--wide { min-height:100%; }
.lco-op-title { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:#0B1437; font-size:13px; font-weight:850; margin-bottom:12px; line-height:1.35; }
.lco-op-title i { color:#FF6B2B; flex:none; }
.lco-op-title span { min-width:0; overflow-wrap:anywhere; }
.lco-op-title a { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-height:28px; border-radius:9px; border:1px solid #ffd9c7; background:#fff7f3; color:#FF6B2B; font-size:11px; font-weight:800; padding:5px 9px; text-decoration:none; white-space:nowrap; }
.lco-op-title a:hover { background:#ffe9de; }
.lco-op-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.lco-op-metrics--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lco-op-metric { display:flex; align-items:flex-start; gap:8px; min-width:0; border:1px solid #edf1f6; background:#f8fafc; border-radius:12px; padding:9px; }
.lco-op-metric > i { color:#3b5bff; flex:none; margin-top:2px; }
.lco-op-metric span { min-width:0; display:flex; flex-direction:column; gap:1px; }
.lco-op-metric b { color:#0f172a; font-size:20px; line-height:1; font-weight:850; }
.lco-op-metric em { color:#475569; font-style:normal; font-size:11.5px; font-weight:750; line-height:1.25; overflow-wrap:anywhere; }
.lco-op-metric small { color:#94a3b8; font-size:10.5px; line-height:1.25; overflow-wrap:anywhere; }
.lco-op-bars { display:flex; flex-direction:column; gap:8px; margin:8px 0 12px; }
.lco-op-bar { display:grid; grid-template-columns:minmax(78px,118px) minmax(80px,1fr) minmax(24px,auto); align-items:center; gap:9px; color:#475569; font-size:11.5px; }
.lco-op-bar span { min-width:0; line-height:1.25; overflow-wrap:anywhere; }
.lco-op-bar i { display:block; height:8px; background:#eef0f4; border-radius:999px; overflow:hidden; }
.lco-op-bar i b { display:block; height:100%; border-radius:999px; min-width:2px; }
.lco-op-bar em { color:#0f172a; font-style:normal; font-weight:800; text-align:right; }
.lco-op-list { display:flex; flex-direction:column; gap:8px; }
.lco-op-row { display:flex; align-items:flex-start; gap:9px; border:1px solid #edf1f6; border-radius:12px; padding:9px; color:inherit; text-decoration:none; background:#fff; transition:border-color .12s, background .12s; min-width:0; }
.lco-op-row:hover { border-color:#ffd0bd; background:#fffaf7; }
.lco-op-row-ic { width:30px; height:30px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff1ea; color:#FF6B2B; }
.lco-op-row-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.lco-op-row-main b { color:#0f172a; font-size:12.5px; line-height:1.35; overflow-wrap:anywhere; }
.lco-op-row-main small { color:#64748b; font-size:11.5px; line-height:1.45; overflow-wrap:anywhere; }
.lco-op-row-main em { color:#94a3b8; font-size:10.8px; font-style:normal; line-height:1.35; overflow-wrap:anywhere; }
.lco-op-empty { border:1px dashed #dbe3ee; border-radius:12px; padding:14px; text-align:center; color:#94a3b8; font-size:12px; line-height:1.45; }
.lco-op-kb { display:flex; flex-direction:column; gap:9px; }
.lco-op-kb-row { display:grid; grid-template-columns:minmax(116px,150px) minmax(80px,1fr) minmax(24px,auto); align-items:center; gap:9px; font-size:11.5px; color:#475569; }
.lco-op-kb-row span { min-width:0; display:flex; align-items:center; gap:6px; line-height:1.25; overflow-wrap:anywhere; }
.lco-op-kb-row span i { color:#FF6B2B; flex:none; }
.lco-op-kb-row > i { display:block; height:8px; background:#eef0f4; border-radius:999px; overflow:hidden; }
.lco-op-kb-row > i b { display:block; height:100%; border-radius:999px; background:#16a34a; min-width:2px; }
.lco-op-kb-row em { color:#0f172a; font-style:normal; font-weight:850; text-align:right; }
.lco-op-foot { margin-top:11px; padding-top:9px; border-top:1px dashed #e2e8f0; color:#64748b; font-size:11.5px; line-height:1.4; overflow-wrap:anywhere; }
@media (max-width: 760px) {
  .lco-op-metrics, .lco-op-metrics--compact { grid-template-columns:1fr; }
  .lco-op-title a { margin-left:0; width:100%; }
  .lco-op-bar, .lco-op-kb-row { grid-template-columns:minmax(0,1fr) minmax(90px,1.2fr) auto; }
}

/* ── AI-MARK[QAI-UI:lyly-home-cockpit] 2026-07-02 21:34 (GMT+7) — P4: chips "đào sâu" bám dữ liệu cockpit → Hỏi Lyly. Purge-safe | rel: lyly.js renderHomeQuickChips */
.lco-qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lco-qchip { font-size: 11.5px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.lco-qchip:hover { border-color: #FF6B2B; color: #FF6B2B; }
/* P4: nút "Soạn" cạnh mỗi đề xuất trong bản tin AI (skill đề xuất→1 chạm tạo nội dung) */
.hb-compose { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #FF6B2B; background: #fff1ea; border: 1px solid #ffd9c7; border-radius: 8px; padding: 2px 8px; cursor: pointer; }
.hb-compose:hover { background: #ffe4d6; }
.hb-compose.is-done { color: #15803d; background: #dcfce7; border-color: #bbf7d0; cursor: default; }

/* Elicit modal (mong muốn → câu hỏi thiết lập ⭐ — kiểu Claude AskUserQuestion).
   bg-brand-orange/5, accent-*, text-[11px] BỊ PURGE khỏi build Tailwind → định nghĩa thuần ở đây.
   guard lyly-tailwind-purged-classes. Brand orange = #FF6B2B. */
/* Lựa chọn elicit: KHÔNG tô màu lựa chọn KHUYẾN NGHỊ (chỉ gắn badge ⭐). Ô nào ĐANG CHỌN (radio
   checked) mới tô cam — highlight DI CHUYỂN theo lựa chọn thật của user → dễ nhìn khi đổi. */
.lyly-eopt { border-color: #e2e8f0; }
.lyly-eopt:has(input:checked) { border-color: #FF6B2B; background: rgba(255,107,43,.06); }
.lyly-eopt.is-sel { border-color: #FF6B2B; background: rgba(255,107,43,.06); }  /* fallback JS cho trình duyệt cũ không hỗ trợ :has() */
.lyly-eradio { accent-color: #FF6B2B; }
.lyly-ebadge { font-size: 11px; line-height: 1; background: rgba(255,107,43,.12); color: #FF6B2B; }

/* Redesign Thông báo: đính kèm INLINE + preview tile + lightbox + preview popup + quản lý lễ (purge-safe) */
.ann-attach-inline { padding-top: 16px; } /* pt-4 Tailwind bị purge → viết tay */
.lyly-att-img { cursor: zoom-in; }
.lyly-att-zoom { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(15,23,42,.55); color: #fff; opacity: 0; transition: opacity .12s; pointer-events: none; }
.lyly-att-img:hover .lyly-att-zoom, .lyly-att-video:hover .lyly-att-zoom { opacity: 1; }
.lyly-att-doc { gap: 8px; padding: 8px 9px; max-width: 340px; }
.lyly-att-doc-meta { display: flex; flex-direction: column; min-width: 0; }
.lyly-att-size { font-size: 10px; color: #94a3b8; }
.lyly-att-doc-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.lyly-att-view { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #FF6B2B; border: 1px solid #ffd9c6; border-radius: 8px; padding: 2px 7px; background: #fff7f5; cursor: pointer; white-space: nowrap; }
.lyly-att-view:hover { background: #ffe9e0; }
/* Vùng kéo-thả đính kèm trong khung soạn */
.ann-att-drop { position: relative; border: 1.5px dashed #e2e8f0; border-radius: 14px; padding: 12px; transition: border-color .12s, background .12s; }
.ann-att-drop.is-drag { border-color: #FF6B2B; background: #fff7f5; }
.ann-att-drop-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: #94a3b8; }
.ann-att-drop .lyly-att-list:empty + .ann-att-drop-hint { margin-top: 0; }
/* Nút quản lý ngày lễ trong dải gợi ý */
.ann-sugg-cfg { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #64748b; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 3px 10px; background: #fff; cursor: pointer; }
.ann-sugg-cfg:hover { border-color: #FF6B2B; color: #FF6B2B; }
/* Preview popup (file) */
.att-preview { max-height: 62vh; overflow: auto; }
.att-preview-img { max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; }
.att-preview-pdf { width: 100%; height: 60vh; border: 1px solid #e2e8f0; border-radius: 10px; }
.att-preview-open { text-align: right; margin-top: 6px; }
.att-preview-open a, .att-preview-dl { font-size: 12px; font-weight: 600; color: #FF6B2B; }
.att-preview-sheet { margin-bottom: 14px; }
.att-preview-sheet-name { font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 5px; }
.att-preview-trunc { font-size: 11px; color: #f59e0b; font-weight: 600; }
.att-preview-tablewrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.att-preview-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.att-preview-table th, .att-preview-table td { border: 1px solid #eef2f7; padding: 5px 9px; text-align: left; white-space: nowrap; color: #334155; }
.att-preview-table th { background: #f8fafc; font-weight: 700; position: sticky; top: 0; }
.att-preview-table tbody tr:nth-child(even) td { background: #fcfdfe; }
.att-preview-text { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.55; color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.att-preview-unsupported { text-align: center; padding: 26px 10px; }
.att-preview-dl { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1px solid #ffd9c6; border-radius: 10px; padding: 6px 12px; background: #fff7f5; }
/* Lightbox ảnh */
.lyly-lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(4,6,15,.86); padding: 24px; }
.lyly-lightbox-stage { max-width: 94vw; max-height: 86vh; overflow: auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.lyly-lightbox-img { max-width: 94vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.5); transform-origin: center center; transition: transform .12s ease; }
.lyly-lightbox-empty { min-width: min(420px, 86vw); padding: 18px 20px; border-radius: 10px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 800; text-align: center; }
.lyly-lightbox-video { background: #000; }
.lyly-lightbox-x { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.lyly-lightbox-x:hover { background: rgba(255,255,255,.28); }
.lyly-lightbox-tools { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(15,23,42,.72); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.lyly-lightbox-tools button { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); color: #fff; border: 0; cursor: pointer; }
.lyly-lightbox-tools button:hover { background: rgba(255,255,255,.22); }
.lyly-lightbox-tools span { min-width: 48px; text-align: center; font-size: 12px; font-weight: 900; }
/* Quản lý ngày lễ (popup) */
.holcfg-add { border: 1px solid #eef2f7; border-radius: 14px; padding: 14px; background: #fbfcfe; }
.holcfg-list { display: flex; flex-direction: column; gap: 6px; }
.holcfg-item { display: flex; align-items: center; gap: 10px; border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 12px; }
.holcfg-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.holcfg-item-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.holcfg-item-meta { font-size: 11px; color: #94a3b8; }
.holcfg-del { color: #94a3b8; padding: 4px; border-radius: 8px; cursor: pointer; }
.holcfg-del:hover { color: #e11d48; background: #fff1f2; }
.holcfg-note { font-size: 11px; color: #94a3b8; line-height: 1.5; }

/* AI-native v2: BẢNG ĐỀ XUẤT SẴN SÀNG (abrd-*) — purge-safe, viết tay */
.abrd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.abrd-head-t { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #0f172a; }
.abrd-head-sub { font-size: 11px; font-weight: 500; color: #94a3b8; }
.abrd-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.abrd-filter { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 999px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .12s, color .12s, background .12s, box-shadow .12s; }
.abrd-filter:hover { border-color: #ffd0bd; color: #FF6B2B; background: #fff7f5; }
.abrd-filter.is-active { border-color: #FF6B2B; color: #FF6B2B; background: #fff2ec; box-shadow: 0 2px 8px rgba(255,107,43,.10); }
.abrd-filter span { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #f1f5f9; color: inherit; font-size: 10px; }
.abrd-selfwrite { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #64748b; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 5px 12px; background: #fff; cursor: pointer; }
.abrd-selfwrite:hover { border-color: #FF6B2B; color: #FF6B2B; }
.abrd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.abrd-card { min-width: 0; overflow: hidden; border: 1px solid #e8edf3; border-radius: 16px; padding: 14px; background: #fcfdff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 3px rgba(2,6,23,.05); }
.abrd-card-top { min-width: 0; display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.abrd-badge { max-width: 100%; min-width: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; line-height: 1.25; border-radius: 9999px; padding: 3px 9px; background: #f1f5f9; color: #475569; white-space: normal; }
.abrd-badge svg { width: 12px; height: 12px; flex: none; }
.abrd-badge--occasion { background: #fff2ec; color: #FF6B2B; }
.abrd-badge--competitor { background: #eef4ff; color: #2563eb; }
.abrd-badge--rule { background: #ecfdf5; color: #059669; }
.abrd-badge--product { background: #f5f3ff; color: #7c3aed; }
.abrd-badge--sample { background: #fef9ec; color: #b45309; }
.abrd-meta { flex: 1 1 150px; min-width: 0; font-size: 11px; color: #94a3b8; white-space: normal; line-height: 1.35; overflow-wrap: anywhere; text-align: right; }
.abrd-title { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.35; overflow-wrap: anywhere; }
.abrd-ctx { font-size: 12px; color: #64748b; line-height: 1.45; overflow-wrap: anywhere; }
.abrd-open { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #FF6B2B; border: 1px solid #ffd9c6; border-radius: 10px; padding: 6px 11px; background: #fff7f5; cursor: pointer; }
.abrd-open:hover { background: #ffe9e0; }
.abrd-body { display: block; }
.abrd-body:empty { display: none; }
.abrd-loading { font-size: 12px; color: #94a3b8; padding: 8px 0; display: flex; align-items: center; gap: 7px; }
.abrd-variants { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.abrd-variant { display: flex; gap: 8px; border: 1px solid #e8edf3; border-radius: 12px; padding: 10px; cursor: pointer; background: #fff; }
.abrd-variant--sel { border-color: #FF6B2B; background: #fff7f5; }
.abrd-variant input { margin-top: 3px; accent-color: #FF6B2B; }
.abrd-variant-body { font-size: 12.5px; color: #334155; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow-y: auto; }
.abrd-editchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.abrd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #475569; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 4px 10px; background: #fff; cursor: pointer; }
.abrd-chip:hover { border-color: #FF6B2B; color: #FF6B2B; }
.abrd-chip:disabled { opacity: .5; cursor: default; }
.abrd-chipmsg { font-size: 11px; color: #94a3b8; }
.abrd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.abrd-groupchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #334155; border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px 11px; background: #fff; cursor: pointer; }
.abrd-groupchip:hover { border-color: #FF6B2B; color: #FF6B2B; }
.abrd-timechip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #64748b; }
.abrd-send { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; border: none; border-radius: 11px; padding: 8px 14px; background: linear-gradient(to bottom right, #FF6B2B, #f43f5e); box-shadow: 0 2px 8px rgba(255,107,43,.25); cursor: pointer; }
.abrd-send:hover { opacity: .95; }
.abrd-send:disabled { opacity: .55; cursor: default; }
.abrd-grpopt { display: block; width: 100%; text-align: left; font-size: 13px; font-weight: 600; color: #334155; border: 1px solid #e8edf3; border-radius: 10px; padding: 10px 12px; background: #fff; cursor: pointer; margin-bottom: 6px; }
.abrd-grpopt:hover { border-color: #FF6B2B; background: #fff7f5; }
.abrd-grpopt--sel { border-color: #FF6B2B; background: #fff7f5; }
/* thẻ đề xuất = nút bấm cả thẻ (mở popup soạn) */
.abrd-card--btn { text-align: left; width: 100%; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s; }
.abrd-card--btn:hover { border-color: #ffd0bd; box-shadow: 0 4px 14px rgba(255,107,43,.12); transform: translateY(-1px); }
.abrd-card--btn:active { transform: translateY(0); }
@media (max-width: 720px) {
  .abrd-meta { flex-basis: 100%; text-align: left; }
}

/* AI-native v3: TRANG THÔNG BÁO popup-centric — hero + chip + composer 3 bước (acw-*), purge-safe, viết tay */
.acw-hero { border: 1px solid #ffe1d3; border-radius: 18px; padding: 16px 18px; background: linear-gradient(135deg,#fff7f5,#ffffff); box-shadow: 0 1px 3px rgba(2,6,23,.05); }
.acw-hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.acw-hero-icon { height: 40px; width: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#FF6B2B,#f43f5e); color: #fff; }
.acw-hero-t { min-width: 0; }
.acw-hero-title { font-size: 15px; font-weight: 800; color: #0f172a; }
.acw-hero-sub { font-size: 12px; color: #64748b; margin-top: 1px; }
.acw-hero-row { display: flex; gap: 8px; flex-wrap: wrap; }
.acw-hero-input { flex: 1; min-width: 200px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; font-size: 13px; background: #fff; outline: none; }
.acw-hero-input:focus { border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.15); }
.acw-hero-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; border: none; border-radius: 12px; padding: 10px 16px; background: linear-gradient(135deg,#FF6B2B,#f43f5e); box-shadow: 0 2px 8px rgba(255,107,43,.28); cursor: pointer; white-space: nowrap; }
.acw-hero-btn:hover { opacity: .95; }

/* AI-MARK[QAI-UI:lyly-announce-cta] 2026-07-04 16:51 (GMT+7) — CTA + popup tab Thông báo: soft-modal bo góc đồng bộ, header không làm vuông góc; popup Lịch lễ có schedule kit nhanh purge-safe. | rel: lyly.js viewAnnounce/annOpenWatchModal/openRuleModal */
.acw-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.acw-action {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 13px 15px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2,6,23,.06);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.acw-action:hover { border-color: #FF6B2B; box-shadow: 0 10px 24px rgba(15,23,42,.10); transform: translateY(-1px); }
.acw-action-ico {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acw-action--watch { border-color: #ffd9c6; background: linear-gradient(135deg,#fff7f5,#ffffff); }
.acw-action--watch .acw-action-ico { color: #fff; background: linear-gradient(135deg,#FF6B2B,#f43f5e); }
.acw-action--pending { border-color: #dbeafe; background: linear-gradient(135deg,#f8fbff,#ffffff); }
.acw-action--pending .acw-action-ico { color: #1d4ed8; background: #dbeafe; }
.acw-action-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acw-action-title { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.15; }
.acw-action-sub { font-size: 12px; color: #64748b; line-height: 1.35; }
.acw-action-count {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  flex: none;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #FF6B2B;
  background: #fff2ec;
}
.acw-action--pending .acw-action-count { color: #1d4ed8; background: #dbeafe; }
@media (max-width: 760px) {
  .acw-actions { grid-template-columns: 1fr; }
}

/* AI-MARK[QAI-UI:announce-send-confirm] 2026-07-13 09:59 (GMT+7) — popup xác nhận gửi ngay nổi trên composer/action-center;
   nội bộ Telegram hiển thị toàn bộ body theo bubble + đính kèm/nhóm trước khi gửi thật. | rel: lyly.js annOpenSendConfirm */
.ann-send-confirm {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .48);
  overscroll-behavior: contain;
}
.ann-send-confirm-card {
  width: min(640px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.ann-send-confirm-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg,#fff7f5,#ffffff);
}
.ann-send-confirm-icon {
  height: 40px;
  width: 40px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
}
.ann-send-confirm-title { font-weight: 900; color: #0f172a; line-height: 1.2; }
.ann-send-confirm-sub { margin-top: 2px; font-size: 12px; color: #64748b; line-height: 1.35; }
.ann-send-confirm-x {
  height: 32px;
  width: 32px;
  flex: none;
  border: 0;
  border-radius: 10px;
  color: #94a3b8;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ann-send-confirm-x:hover { background: #f1f5f9; color: #475569; }
.ann-send-confirm-body { padding: 18px 20px 20px; }
.ann-send-confirm-label {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}
.ann-send-confirm-preview {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 13px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ann-send-confirm-preview b {
  display: block;
  margin-bottom: 5px;
  color: #0f172a;
  font-size: 14px;
}
.ann-send-confirm-omni {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
  background: #f8fafc;
}
.ann-send-confirm-omni .ann-omni-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ann-send-confirm-omni .ann-omni-preview-body {
  max-height: 170px;
}
.ann-send-confirm-att {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff2ec;
  color: #ea580c;
  font-size: 12px;
  font-weight: 700;
}
.ann-send-confirm-attlist {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ann-send-confirm-attlist span,
.ann-send-confirm-attlist em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff2ec;
  color: #ea580c;
  font-size: 11.5px;
  font-weight: 800;
  font-style: normal;
}
.ann-tg-preview {
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg,#eff6ff 0%,#f8fbff 100%);
}
.ann-tg-bubble {
  max-height: min(46vh, 420px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #dbeafe;
  border-radius: 16px 16px 16px 6px;
  padding: 12px 13px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 64, 175, .10);
}
.ann-tg-meta {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ann-tg-meta span {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}
.ann-tg-meta em {
  font-size: 11px;
  font-style: normal;
  color: #94a3b8;
  white-space: nowrap;
}
.ann-tg-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
}
.ann-tg-empty {
  color: #94a3b8;
  font-size: 13px;
  font-style: italic;
}
.ann-tg-note {
  margin-top: 9px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.ann-send-confirm-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid #fed7aa;
  border-radius: 13px;
  padding: 10px 12px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 13px;
  line-height: 1.4;
}
.ann-send-confirm-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ann-send-confirm-groups span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 7px 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}
.ann-send-confirm-groups span em {
  margin-left: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  padding: 2px 6px;
  color: inherit;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.ann-send-confirm-groups .ann-send-confirm-target--connector_pending,
.ann-send-confirm-groups .ann-send-confirm-target--checking {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}
.ann-send-confirm-groups .ann-send-confirm-target--ready {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}
.ann-send-confirm-empty {
  border: 1px dashed #fecaca;
  border-radius: 13px;
  padding: 11px 12px;
  color: #e11d48;
  background: #fff1f2;
  font-size: 13px;
  font-weight: 700;
}
.ann-send-confirm-msg {
  min-height: 20px;
  margin-top: 12px;
  font-size: 13px;
}
.ann-send-result {
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  padding: 10px 11px;
  background: #f8fafc;
}
.ann-send-result--emerald {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}
.ann-send-result--amber {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}
.ann-send-result--rose {
  border-color: #fecaca;
  background: #fff1f2;
  color: #be123c;
}
.ann-send-result-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 900;
}
.ann-send-result-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.ann-send-result-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #475569;
  line-height: 1.35;
}
.ann-send-result-row--ok { color: #15803d; }
.ann-send-result-row--fail { color: #be123c; }
.ann-send-result-row span { min-width: 0; }
.ann-send-result-row b { color: inherit; }
.ann-send-result-row em {
  display: block;
  margin-top: 1px;
  color: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  opacity: .86;
}
.ann-upload-clear {
  margin-left: 6px;
  border: 0;
  border-radius: 999px;
  padding: 3px 8px;
  background: #fee2e2;
  color: #be123c;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.ann-upload-clear:hover { background: #fecaca; }
.ann-send-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.ann-send-confirm-cancel,
.ann-send-confirm-submit {
  min-height: 42px;
  flex: 1;
  border-radius: 13px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.ann-send-confirm-cancel {
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #fff;
}
.ann-send-confirm-submit {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
  box-shadow: 0 7px 18px rgba(255, 107, 43, .24);
}
.ann-send-confirm-submit:disabled { cursor: wait; }
@media (max-width: 560px) {
  .ann-send-confirm-actions { flex-direction: column-reverse; }
}

/* Back-compat nếu markup cũ còn trong cache ngắn hạn. */
.acw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acw-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #334155; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 6px 13px; background: #fff; cursor: pointer; }
.acw-chip:hover { border-color: #FF6B2B; color: #FF6B2B; }
.acw-chip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; color: #FF6B2B; background: #fff2ec; border-radius: 9999px; }

/* composer popup (dùng chung lyly-modal-card/lyly-modal-body) */
.acw-hicon { height: 40px; width: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#FF6B2B,#f43f5e); color: #fff; }
.acw-modal {
  width: min(920px, 100%);
}
.ann-soft-modal {
  border-radius: 24px !important;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 28px 80px rgba(15,23,42,.26), 0 3px 12px rgba(15,23,42,.08);
}
.ann-watch-modal { width: min(920px, 100%); }
.ann-rule-modal { width: min(680px, 100%); }
/* AI-MARK[QAI-UI:lyly-announce-edit-modal] 2026-07-13 10:57 (GMT+7) — legacy class giữ purge-safe cho màn cũ nếu còn cache; runtime openAnnEditModal đã chuyển sang popup Duyệt & gửi đầy đủ có đính kèm. | rel: lyly.js openAnnEditModal, acReviewAnnounce */
.ann-edit-modal { width: min(980px, 100%); }
.ann-edit-modal #annEditBody { min-height: 260px; resize: vertical; }

/* AI-MARK[QAI-UI:lyly-schedule-picker] 2026-07-04 18:13 (GMT+7) — popup lịch hợp nhất 3 tab (Định kỳ/Ngày cụ thể/Khoảng) trong openRuleModal | rel: lyly.js openRuleModal, UI-L4-Lyly */
.ar-tabbar { display: flex; gap: 6px; border-bottom: 1px solid #f1f5f9; padding-bottom: 2px; }
.ar-tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #94a3b8;
  padding: 8px 12px; border-radius: 10px 10px 0 0; position: relative;
}
.ar-tab:hover { color: #FF6B2B; }
.ar-tab.is-active { color: #0B1437; background: #fff7f5; }
.ar-tab.is-active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 2px;
  background: linear-gradient(to right, #FF6B2B, #f43f5e); border-radius: 2px;
}
.ar-pane { padding-top: 4px; }
.ar-pane.hidden { display: none; }
.ar-dow-chip {
  appearance: none; cursor: pointer; border-radius: 9999px; border: 1px solid #e2e8f0;
  background: #fff; color: #475569; font-size: 12px; font-weight: 700; padding: 6px 12px;
}
.ar-dow-chip:hover { border-color: #FF6B2B; color: #FF6B2B; }
.ar-dow-chip.is-active {
  background: linear-gradient(to bottom right, #FF6B2B, #f43f5e); color: #fff; border-color: transparent;
  box-shadow: 0 1px 4px rgba(255,107,43,.3);
}
.ar-date-add {
  appearance: none; cursor: pointer; border-radius: 12px; border: none; white-space: nowrap;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 9px 14px; margin-top: 4px;
}
.ar-date-add:hover { opacity: .95; }
.ar-date-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: #334155; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 5px 6px 5px 12px; background: #fff;
}
.ar-date-chip button {
  appearance: none; border: none; background: #f1f5f9; color: #94a3b8; cursor: pointer;
  width: 18px; height: 18px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center;
}
.ar-date-chip button:hover { background: #ffe4e6; color: #e11d48; }
.ar-soon-box {
  display: flex; align-items: center; gap: 8px; border: 1px dashed #e2e8f0; border-radius: 13px;
  background: #f8fafc; color: #64748b; font-size: 12.5px; font-weight: 650; padding: 14px 16px;
}
.ann-smart-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg,#fff7f5,#ffffff);
  flex: none;
}
.ann-smart-head-body { flex: 1; min-width: 0; }
.ann-smart-title { font-size: 18px; line-height: 1.2; font-weight: 900; color: #0B1437; }
.ann-smart-sub { margin-top: 3px; font-size: 12.5px; color: #64748b; line-height: 1.45; }
.ann-smart-close {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #94a3b8;
  cursor: pointer;
}
.ann-smart-close:hover { background: #fff; color: #FF6B2B; }
.ann-smart-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 13px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
}
.ann-smart-note span { display: inline-flex; align-items: center; gap: 7px; }
.ann-watch-plan {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(300px, 1.35fr);
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(135deg,#f8fbff,#ffffff);
}
.ann-watch-plan-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.ann-watch-plan-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}
.ann-watch-plan-title i,
.ann-watch-plan-title svg {
  color: #FF6B2B;
  flex: none;
}
.ann-watch-plan-sub {
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}
.ann-watch-plan-controls {
  justify-content: flex-end;
}
.ann-rule-schedule-kit {
  padding: 10px 11px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fbfcfe;
}
@media (max-width: 760px) {
  .ann-watch-plan { grid-template-columns: 1fr; }
  .ann-watch-plan-controls { justify-content: flex-start; }
}
.ann-smart-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.ann-smart-section-head > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ann-smart-section-head > span {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 9999px;
  padding: 4px 10px;
}
.ann-smart-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 12px;
  padding: 8px 13px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
  box-shadow: 0 2px 8px rgba(255,107,43,.25);
  cursor: pointer;
}
.ann-smart-add:hover { opacity: .95; }
.acw-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 20px; background: #fbfcfe; border-bottom: 1px solid #f1f5f9; }
.acw-step { font-size: 11.5px; font-weight: 600; color: #94a3b8; }
.acw-step--on { color: #FF6B2B; }
.acw-step--done { color: #059669; }
.acw-step-sep { font-style: normal; color: #cbd5e1; font-size: 12px; }
.acw-attbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #64748b; border: 1px solid #e2e8f0; border-radius: 9px; padding: 5px 10px; background: #fff; cursor: pointer; }
.acw-attbtn:hover { border-color: #FF6B2B; color: #FF6B2B; }
.acw-preview { border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 12px 14px; font-size: 13px; color: #334155; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }
.acw-prev-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acw-prev-att { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #FF6B2B; background: #fff2ec; border-radius: 9999px; padding: 3px 9px; }
.acw-grps { display: flex; flex-wrap: wrap; gap: 8px; }
.acw-grp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #334155; border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 12px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.acw-grp:hover { border-color: #FF6B2B; }
.acw-grp--on { border-color: #FF6B2B; background: #fff7f5; color: #FF6B2B; }
.acw-grp--warn { border-style: dashed; }
.acw-grp-warn { font-size: 10.5px; font-weight: 600; color: #b45309; background: #fef9ec; border-radius: 9999px; padding: 1px 6px; }
.acw-post-panel { margin-top: 12px; margin-bottom: 0; }
/* AI-MARK[QAI-UI:lyly-composer-schedule-polish] 2026-07-13 10:23 (GMT+7) — card Lịch gửi trong composer: input rõ, 2 hành động thông minh cân hàng, CTA lên lịch tách riêng; purge-safe không dùng Tailwind arbitrary. | rel: lyly.js acwRenderStep3, annScheduleKitHtml */
.acw-sched {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
}
.acw-sched-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.acw-sched-note {
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}
.acw-sched-main {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.acw-sched-inputwrap {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}
.acw-sched-inputwrap span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.acw-sched-inputwrap input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 13px;
  padding: 9px 12px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  outline: none;
}
.acw-sched-inputwrap input:focus {
  border-color: #FF6B2B;
  box-shadow: 0 0 0 3px rgba(255,107,43,.15);
}
.acw-sched-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}
.acw-sched .ann-post-schedule-kit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}
.acw-sched .ann-post-schedule-smart,
.acw-sched .ann-post-schedule-plan {
  min-height: 42px;
  width: 100%;
  border-radius: 13px;
  padding: 8px 11px;
  white-space: normal;
}
.acw-sched .ann-post-schedule-hint {
  grid-column: 1 / -1;
  display: flex;
  max-width: none;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
}
.acw-sched-submit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 13px;
  padding: 9px 14px;
  background: linear-gradient(135deg,#FF6B2B,#f43f5e);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(255,107,43,.22);
  cursor: pointer;
}
.acw-sched-submit:hover { opacity: .95; }
@media (max-width: 840px) {
  .acw-sched-main,
  .acw-sched-actions {
    grid-template-columns: 1fr;
  }
  .acw-sched-note {
    text-align: left;
  }
  .acw-sched-submit {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .acw-sched .ann-post-schedule-kit {
    grid-template-columns: 1fr;
  }
}

/* Bước 2 v2: tab 2 bản + đính kèm lưới thumbnail + overlay xem nổi (purge-safe, viết tay) */
.acw-vtabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.acw-vtab { font-size: 12.5px; font-weight: 700; color: #64748b; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 5px 14px; background: #fff; cursor: pointer; }
.acw-vtab:hover { border-color: #FF6B2B; color: #FF6B2B; }
.acw-vtab--on { border-color: #FF6B2B; background: #fff7f5; color: #FF6B2B; }
.acw-vtabs-hint { font-size: 11px; color: #94a3b8; margin-left: auto; }
.acw-vbody { border: 1px solid #e8edf3; border-radius: 12px; background: #fbfcfe; padding: 13px 15px; font-size: 13px; color: #334155; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 42vh; overflow-y: auto; }
.acw-att-drop { border: 1.5px dashed #e2e8f0; border-radius: 12px; padding: 10px; transition: border-color .12s, background .12s; }
.acw-att-drop--over { border-color: #FF6B2B; background: #fff7f5; }
.acw-att-empty { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: #94a3b8; padding: 12px 0; }
.acw-att-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.acw-att-grid:empty { display: none; }
.acw-att-card { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.acw-att-card--media { display: grid; grid-template-rows: 84px 32px; width: 104px; }
.acw-att-thumb { position: relative; display: block; width: 100%; height: 84px; border: 0; border-radius: 0; overflow: hidden; padding: 0; cursor: pointer; background: #f1f5f9; }
.acw-att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acw-att-card:hover { border-color: #FF6B2B; }
/* AI-MARK[QAI-UI:lyly-announce-attachments] 2026-07-14 14:25 (GMT+7) — thumbnail video trong lưới đính kèm composer có action rail riêng, không đặt nút xoá phủ lên preview | rel: acwRenderAtts, acwOpenAttView */
.acw-att-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0f172a; }
.acw-att-badge { position: absolute; left: 4px; bottom: 4px; font-size: 9px; font-weight: 700; color: #fff; background: rgba(255,107,43,.92); border-radius: 5px; padding: 1px 5px; }
.acw-att-zoom { position: absolute; right: 4px; bottom: 4px; height: 20px; width: 20px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(15,23,42,.55); border-radius: 6px; opacity: 0; transition: opacity .12s; }
.acw-att-thumb:hover .acw-att-zoom { opacity: 1; }
.acw-att-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 32px; border-top: 1px solid #eef2f7; background: #fff; padding: 4px 6px; }
.acw-att-rm { position: static; flex: 0 0 auto; height: 24px; width: 26px; display: flex; align-items: center; justify-content: center; color: #e11d48; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 8px; cursor: pointer; }
/* AI-MARK[QAI-UI:lyly-cal-video-preview] 2026-07-09 21:30 (GMT+7) — preview video/ảnh đính kèm ở LỊCH HẸN (xác nhận đã có video) | rel: annLoadCalendar, routes.js plan-calendar meta.attachments */
.ann-cal-media { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 8px 22px; }
.ann-cal-thumb { width: 72px; height: 46px; border-radius: 8px; }
.acw-att-rm:hover { background: #ffe4e6; color: #be123c; border-color: #fda4af; }
.acw-att-file { display: grid; grid-template-columns: 24px minmax(0,1fr) auto auto; align-items: center; gap: 9px; min-width: 230px; max-width: 340px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 9px 10px; background: #fff; cursor: pointer; }
.acw-att-file:hover { border-color: #FF6B2B; }
.acw-att-fmeta { display: flex; flex-direction: column; min-width: 0; }
.acw-att-fname { font-size: 12.5px; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acw-att-fsize { font-size: 11px; color: #94a3b8; }
.acw-att-view { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #FF6B2B; white-space: nowrap; }
.acw-att-file .acw-att-actions { border-top: 0; padding: 0; min-height: 0; }
.acw-att-file .acw-att-rm { background: #fff1f2; color: #e11d48; }
.acw-att-file .acw-att-rm:hover { background: #fff1f2; color: #e11d48; }
/* overlay xem đính kèm — NỔI trên popup soạn (z cao hơn modal z-50) */
#acwOverlayHost { position: relative; z-index: 70; }
.acw-ov { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(2,6,23,.72); padding: 24px; }
.acw-ov-img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.acw-ov-video { background: #000; }
.acw-ov-xf { position: fixed; top: 18px; right: 20px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.12); border: none; border-radius: 9999px; cursor: pointer; }
.acw-ov-xf:hover { background: rgba(255,255,255,.25); }
.acw-ov-card { width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.acw-ov-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; }
.acw-ov-title { flex: 1; min-width: 0; font-weight: 700; color: #0f172a; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acw-ov-x { height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; color: #64748b; background: #f8fafc; border: none; border-radius: 8px; cursor: pointer; }
.acw-ov-x:hover { background: #f1f5f9; }
.acw-ov-body { padding: 16px 18px; overflow: auto; }

/* ── Popup lịch đăng hợp nhất (openRuleModal 3 tab) — GĐ1 "chọn nhiều ngày cụ thể/nhiều thứ" ──
   Viết tay, purge-safe (KHÔNG Tailwind arbitrary). Tông cam #FF6B2B/hồng #f43f5e đồng bộ .ann-plat-chip.
   AI-MARK[QAI-UI:lyly-schedule-picker] 2026-07-04 18:20 (GMT+7) — rel: lyly.js openRuleModal */
.ar-tabbar { display: flex; gap: 4px; border-bottom: 1px solid #e2e8f0; }
.ar-tab { position: relative; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #64748b; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s; }
.ar-tab:hover { color: #FF6B2B; }
.ar-tab.is-active { color: #0f172a; border-bottom-color: #FF6B2B; }
.ar-dow-chip { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 9999px; border: 1px solid #e2e8f0; color: #64748b; background: #fff; cursor: pointer; transition: all .15s; }
.ar-dow-chip:hover { border-color: #FF6B2B; color: #FF6B2B; }
.ar-dow-chip.is-active { background: linear-gradient(to bottom right, #FF6B2B, #f43f5e); color: #fff; border-color: transparent; }
.ar-date-add { padding: 8px 12px; font-size: 12px; font-weight: 600; border-radius: 12px; border: 1px solid #FF6B2B; color: #FF6B2B; background: #fff; white-space: nowrap; cursor: pointer; transition: all .15s; }
.ar-date-add:hover { background: #FF6B2B; color: #fff; }
.ar-date-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; font-size: 12px; font-weight: 600; border-radius: 9999px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ar-date-chip button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 9999px; background: rgba(194,65,12,.12); color: #c2410c; border: none; font-size: 12px; line-height: 1; cursor: pointer; }
.ar-date-chip button:hover { background: #c2410c; color: #fff; }
.ar-soon-box { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px dashed #cbd5e1; color: #64748b; font-size: 13px; }

/* AI-MARK[QAI-UI:lyly-facebook-css-comment-termination] 2026-07-11 12:10 (GMT+7) — CSS Facebook phải giữ comment an toàn để parser luôn tới được rule trạng thái disabled; regression contract khóa lỗi render dashboard. | rel: LYLY-TEST:facebook-dashboard-contract, regression-ledger 2026-07-11-lyly-facebook-css-comment-termination */
/* ── AI-MARK[QAI-UI:lyly-facebook-tab] 2026-08-03 15:35 (GMT+7) — CSS module Facebook (fb-*): hero kết nối, capability chip, page card, stat grid, period selector và các surface đọc/đối thoại; đăng bài dùng Omnichannel. Viết tay, purge-safe vì lyly-tailwind.css là bundle PREBUILT không rebuild lại (grid-cols-3 và utility disabled cursor-not-allowed bị purge khỏi đó). Tránh chuỗi đóng-comment trong mô tả để rule sau comment luôn parse. | rel: lyly.js viewFbOverview/viewFbPosts/viewFbInsights/viewFbComments */
.fb-hero { border-radius: 20px; background: linear-gradient(135deg,#eff6ff,#ffffff); border: 1px solid #dbeafe; box-shadow: 0 1px 3px rgba(2,6,23,.06); padding: 32px 24px; text-align: center; max-width: 560px; margin: 0 auto; }
.fb-hero-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; display: flex; align-items: center; justify-content: center; }
.fb-hero-title { font-size: 17px; font-weight: 800; color: #0f172a; }
.fb-hero-sub { margin-top: 8px; font-size: 13px; line-height: 1.6; color: #64748b; }
.fb-guide { margin-top: 18px; text-align: left; border-radius: 14px; border: 1px solid #e2e8f0; background: #f8fafc; }
.fb-guide > summary { list-style: none; cursor: pointer; user-select: none; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #334155; }
.fb-guide > summary::-webkit-details-marker { display: none; }
.fb-guide ol { margin: 0; padding: 0 14px 14px 30px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.55; color: #475569; }
.fb-guide code { background: #eef2ff; color: #4338ca; border-radius: 6px; padding: 1px 6px; font-size: 11.5px; }

.fb-warn-banner { display: flex; align-items: center; gap: 8px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #b45309; font-size: 12.5px; font-weight: 600; padding: 10px 14px; margin-bottom: 12px; }
.fb-mock-chip { display: inline-flex; align-items: center; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 700; padding: 3px 10px; }

/* Capability grid (Tổng quan) — 3 trạng thái: ok (xanh) / unknown (hổ phách) / locked (xám, dim) */
.fb-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fb-cap-chip { display: flex; align-items: center; gap: 9px; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; padding: 10px 12px; }
.fb-cap-chip-ico { width: 17px; height: 17px; flex-shrink: 0; }
.fb-cap-chip-label { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: #0f172a; }
.fb-cap-chip-state { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.fb-cap-chip--ok { border-color: #bbf7d0; background: #f0fdf4; }
.fb-cap-chip--ok .fb-cap-chip-ico { color: #16a34a; }
.fb-cap-chip--ok .fb-cap-chip-state { background: #dcfce7; color: #15803d; }
.fb-cap-chip--unknown .fb-cap-chip-ico { color: #d97706; }
.fb-cap-chip--unknown .fb-cap-chip-state { background: #fef3c7; color: #b45309; }
.fb-cap-chip--locked { opacity: .68; cursor: not-allowed; }
.fb-cap-chip--locked .fb-cap-chip-ico { color: #94a3b8; }
.fb-cap-chip--locked .fb-cap-chip-state { background: #f1f5f9; color: #64748b; }

/* Page card (Tổng quan) */
.fb-page-card { display: flex; gap: 14px; border-radius: 18px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(2,6,23,.06); padding: 18px 20px; margin-bottom: 16px; }
.fb-avatar { width: 60px; height: 60px; border-radius: 16px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg,#0B5FFF,#FF6B2B); display: flex; align-items: center; justify-content: center; }
.fb-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-avatar-fallback { color: #fff; font-size: 18px; font-weight: 800; }
.fb-page-main { flex: 1 1 auto; min-width: 0; }
.fb-page-name-row { display: flex; align-items: center; gap: 6px; }
.fb-page-name { font-size: 16px; font-weight: 800; color: #0f172a; overflow-wrap: anywhere; }
.fb-verified { color: #1d4ed8; display: inline-flex; }
.fb-page-meta { margin-top: 2px; font-size: 12.5px; color: #64748b; }
.fb-page-meta a { color: #FF6B2B; text-decoration: underline; }
.fb-page-about { margin-top: 8px; font-size: 12.5px; color: #475569; line-height: 1.55; }
.fb-page-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.fb-page-stat { display: flex; flex-direction: column; }
.fb-page-stat b { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.15; }
.fb-page-stat span { font-size: 11px; color: #94a3b8; font-weight: 600; }

/* Nút dùng chung module Facebook (đủ trạng thái disabled; utility cursor-not-allowed của Tailwind bị purge nên viết tay). */
.fb-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; font-size: 13px; font-weight: 700; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-decoration: none; }
.fb-btn--ghost { background: #fff; border-color: #e2e8f0; color: #334155; }
.fb-btn--ghost:hover:not(:disabled) { border-color: #FF6B2B; color: #FF6B2B; }
.fb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Chỉ số — bộ chọn kỳ + lưới thẻ số liệu */
.fb-period-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.fb-period-btn { border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; font-size: 12.5px; font-weight: 700; padding: 6px 14px; cursor: pointer; }
.fb-period-btn:hover { border-color: #FF6B2B; color: #FF6B2B; }
.fb-period-btn.is-active { background: linear-gradient(135deg,#FF6B2B,#f43f5e); color: #fff; border-color: transparent; }
.fb-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* AI-MARK[QAI-UI:lyly-facebook-omnichannel-only] 2026-08-03 15:35 (GMT+7) — Facebook chỉ hiển thị các surface đọc/đối thoại; đăng bài dùng Omnichannel, tất cả class viết tay để không lệ thuộc Tailwind prebuilt.
   Mobile navigation là overlay độc lập với sidebar desktop. | rel: lyly.js LYLY-INTG:facebook-tab */
.lyly-mobile-nav-btn { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; color: #334155; cursor: pointer; }
.lyly-mobile-nav-btn:hover, .lyly-mobile-nav-btn:focus-visible { border-color: #FF6B2B; color: #FF6B2B; outline: none; }
.lyly-mobile-nav-host { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.lyly-mobile-nav-host.is-open { pointer-events: auto; }
.lyly-mobile-nav-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15,23,42,.48); opacity: 0; transition: opacity .2s ease; cursor: default; }
.lyly-mobile-nav-panel { position: absolute; inset: 0 auto 0 0; width: min(304px, calc(100vw - 56px)); display: flex; flex-direction: column; background: #0f1b46; color: #e2e8f0; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 46px rgba(2,6,23,.3); }
.lyly-mobile-nav-host.is-open .lyly-mobile-nav-backdrop { opacity: 1; }
.lyly-mobile-nav-host.is-open .lyly-mobile-nav-panel { transform: translateX(0); }
.lyly-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.lyly-mobile-nav-head b { display: block; color: #fff; font-size: 15px; }
.lyly-mobile-nav-head span { display: block; margin-top: 2px; color: #a8b5d6; font-size: 11px; }
.lyly-mobile-nav-close { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.lyly-mobile-nav-list { display: grid; gap: 4px; padding: 12px; overflow-y: auto; }
.lyly-mobile-nav-link { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 0 12px; border-radius: 12px; color: #dbe5ff; font-size: 14px; font-weight: 650; text-decoration: none; }
.lyly-mobile-nav-link:hover, .lyly-mobile-nav-link:focus-visible, .lyly-mobile-nav-link.active { background: rgba(255,107,43,.17); color: #fff; outline: none; }
.lyly-mobile-nav-link.active > svg:first-child { color: #ff9a71; }

.fb-cockpit, .fb-community { display: grid; gap: 16px; }
.fb-command-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid #dbeafe; border-radius: 20px; background: linear-gradient(132deg,#eef6ff 0%,#fff 58%,#fff7f5 100%); }
.fb-command-kicker { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 9px; background: #dbeafe; color: #1d4ed8; font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.fb-command-hero h2 { margin: 9px 0 4px; color: #0f172a; font-size: 22px; font-weight: 850; line-height: 1.2; }
.fb-command-hero p { max-width: 620px; margin: 0; color: #64748b; font-size: 13px; line-height: 1.55; }
.fb-kpi-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.fb-kpi { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.06); }
.fb-kpi-ico { width: 20px; height: 20px; margin-top: 3px; color: #FF6B2B; flex: 0 0 auto; }
.fb-kpi > div { min-width: 0; display: grid; gap: 2px; }
.fb-kpi span { color: #64748b; font-size: 11.5px; font-weight: 700; }
.fb-kpi b { color: #0f172a; font-size: 23px; font-weight: 850; line-height: 1.05; }
.fb-kpi small { color: #94a3b8; font-size: 11px; line-height: 1.35; }
.fb-cockpit-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 16px; }
.fb-cockpit-grid > section, .fb-top-post, .fb-community-card { min-width: 0; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.06); }
.fb-cockpit-grid > section { padding: 18px; }
.fb-section-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fb-section-line h3 { margin: 0; color: #0f172a; font-size: 14px; font-weight: 800; }
.fb-section-line > span, .fb-section-line div > span { display: block; margin-top: 3px; color: #94a3b8; font-size: 11.5px; line-height: 1.4; }
.fb-next-grid { display: grid; gap: 8px; }
.fb-next-action { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 13px; background: #fff; color: #334155; text-align: left; cursor: pointer; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.fb-next-action:hover:not(:disabled) { border-color: #fed7aa; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(255,107,43,.09); }
.fb-next-action > svg:first-child { color: #FF6B2B; flex: 0 0 auto; }
.fb-next-action span { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.fb-next-action b { color: #1e293b; font-size: 12.5px; }
.fb-next-action small { color: #64748b; font-size: 11.5px; line-height: 1.35; }
.fb-next-action-arrow { color: #94a3b8; flex: 0 0 auto; }
.fb-next-action.is-disabled { opacity: .58; cursor: not-allowed; }
.fb-top-post { padding: 15px; }
.fb-top-post--empty { color: #64748b; font-size: 12.5px; line-height: 1.5; }
.fb-top-post-head, .fb-post-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #64748b; font-size: 11px; font-weight: 700; }
.fb-top-post-head span, .fb-post-card-head span { display: inline-flex; align-items: center; gap: 5px; color: #c2410c; }
.fb-top-post p { margin: 12px 0; color: #334155; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.fb-post-metrics { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; color: #64748b; font-size: 11.5px; font-weight: 650; }
.fb-inline-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #d94f19; font-size: 12px; font-weight: 750; text-decoration: none; cursor: pointer; }
.fb-inline-link:hover { color: #a63c14; text-decoration: underline; }
.fb-source-note, .fb-community-safety { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: #94a3b8; font-size: 11.5px; line-height: 1.45; }
.fb-source-note svg, .fb-community-safety svg { flex: 0 0 auto; margin-top: 1px; }
.fb-boundary-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid #dbeafe; border-radius: 15px; background: #f8fbff; color: #475569; }
.fb-boundary-note > svg { color: #2563eb; flex: 0 0 auto; margin-top: 2px; }
.fb-boundary-note > div { display: grid; gap: 3px; }
.fb-boundary-note b { color: #1e3a8a; font-size: 12px; }
.fb-boundary-note span { font-size: 11.5px; line-height: 1.5; }


.fb-content-toolbar, .fb-community-toolbar, .fb-insight-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fb-content-toolbar { padding: 2px 0 10px; color: #64748b; font-size: 12px; line-height: 1.45; }
.fb-post-list, .fb-community-list { display: grid; gap: 12px; }
.fb-post-card { display: grid; grid-template-columns: minmax(0,180px) minmax(0,1fr); overflow: hidden; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.06); }
.fb-post-card--text { grid-template-columns: 1fr; }
.fb-post-media { width: 100%; height: 100%; min-height: 165px; object-fit: cover; background: #f1f5f9; }
.fb-post-main { min-width: 0; padding: 16px; }
.fb-post-main p { margin: 11px 0; color: #334155; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.fb-post-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 12px; }

/* AI-MARK[QAI-UI:lyly-facebook-social-feed] 2026-07-11 13:13 (GMT+7) — Nội dung là social feed ưu tiên media toàn khung: ảnh dọc contain trên backdrop mờ, không còn cột ảnh hẹp cạnh văn bản; đọc thêm và filter giữ dữ liệu Meta dễ quét | rel: lyly.js fbFeedPostCard, QAI-UI:lyly-facebook-analytics */
.fb-feed { display: grid; gap: 16px; }
.fb-feed-hero, .fb-analytics-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid #dbeafe; border-radius: 20px; background: linear-gradient(132deg,#eef6ff 0%,#fff 58%,#fff7f5 100%); }
.fb-feed-hero > div, .fb-analytics-hero > div { min-width: 0; }
.fb-feed-hero h2, .fb-analytics-hero h2 { margin: 9px 0 4px; color: #0f172a; font-size: 22px; font-weight: 850; line-height: 1.2; }
.fb-feed-hero p, .fb-analytics-hero p { max-width: 680px; margin: 0; color: #64748b; font-size: 13px; line-height: 1.55; }
.fb-feed-layout { display: grid; grid-template-columns: minmax(210px,.48fr) minmax(440px,760px) minmax(210px,.48fr); align-items: start; gap: 16px; }
.fb-feed-stream { min-width: 0; display: grid; gap: 14px; }
.fb-feed-rail { min-width: 0; position: sticky; top: 82px; display: grid; gap: 13px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.06); }
.fb-feed-page-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fb-feed-page-head > div:last-child { min-width: 0; display: grid; gap: 2px; }
.fb-feed-page-head b { color: #0f172a; font-size: 13px; overflow-wrap: anywhere; }
.fb-feed-page-head span { color: #94a3b8; font-size: 11px; overflow-wrap: anywhere; }
.fb-feed-page-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: linear-gradient(135deg,#0B5FFF,#FF6B2B); color: #fff; font-size: 12px; font-weight: 800; }
.fb-feed-page-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fb-feed-page-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.fb-feed-page-stats div { display: grid; gap: 2px; padding: 9px; border-radius: 11px; background: #f8fafc; }
.fb-feed-page-stats b { color: #0f172a; font-size: 15px; font-weight: 850; }
.fb-feed-page-stats span { color: #94a3b8; font-size: 10px; line-height: 1.25; }
.fb-feed-rail-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 10px; border: 1px solid #fed7aa; border-radius: 11px; background: #fff7f2; color: #c2410c; font-size: 11.5px; font-weight: 800; cursor: pointer; text-decoration: none; }
.fb-feed-rail-link:hover { border-color: #fb923c; background: #ffedd5; }
.fb-feed-rail p { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: #94a3b8; font-size: 10.5px; line-height: 1.45; }
.fb-feed-rail p svg { flex: 0 0 auto; margin-top: 1px; }
.fb-feed-rail-title { display: flex; align-items: center; gap: 7px; color: #1e293b; font-size: 12px; }
.fb-feed-rail-title svg { color: #2563eb; }
.fb-feed-context-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; color: #64748b; font-size: 11.5px; }
.fb-feed-context-row b { color: #0f172a; font-size: 12px; text-align: right; }
.fb-feed-stream-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
.fb-feed-stream-head > div:first-child { display: grid; gap: 3px; }
.fb-feed-stream-head b { color: #1e293b; font-size: 13px; }
.fb-feed-stream-head span { color: #94a3b8; font-size: 11px; line-height: 1.35; }
.fb-feed-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fb-feed-filter { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #64748b; font-size: 10.5px; font-weight: 750; cursor: pointer; }
.fb-feed-filter span { display: inline-grid; min-width: 16px; height: 16px; place-items: center; border-radius: 99px; background: #f1f5f9; color: #64748b; font-size: 9.5px; }
.fb-feed-filter:hover, .fb-feed-filter.is-active { border-color: #fed7aa; background: #fff7f2; color: #c2410c; }
.fb-feed-filter.is-active span { background: #ffedd5; color: #c2410c; }
.fb-feed-card { min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.06); }
.fb-feed-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px 0; }
.fb-feed-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fb-feed-identity > div:last-child { min-width: 0; display: grid; gap: 2px; }
.fb-feed-identity b { color: #0f172a; font-size: 13px; overflow-wrap: anywhere; }
.fb-feed-identity span { display: inline-flex; align-items: center; gap: 4px; color: #94a3b8; font-size: 10.5px; }
.fb-feed-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg,#0B5FFF,#FF6B2B); color: #fff; font-size: 11px; font-weight: 800; }
.fb-feed-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.fb-feed-more { width: 28px; height: 28px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 9px; color: #94a3b8; text-decoration: none; }
.fb-feed-more:hover { background: #f8fafc; color: #475569; }
.fb-feed-copy { padding: 11px 16px 13px; }
.fb-feed-message { margin: 0; color: #334155; font-size: 13px; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-feed-message.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.fb-feed-readmore { margin-top: 6px; padding: 0; border: 0; background: transparent; color: #c2410c; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.fb-feed-readmore:hover { text-decoration: underline; }
.fb-feed-media-stage { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 260px; max-height: min(68vh,680px); overflow: hidden; background: #eaf0f7; }
.fb-feed-media-stage > a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; max-height: min(68vh,680px); }
.fb-feed-media-backdrop { position: absolute; z-index: 0; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) saturate(.82); opacity: .30; transform: scale(1.04); }
.fb-feed-media { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; max-height: min(68vh,680px); object-fit: contain; background: rgba(255,255,255,.15); box-shadow: 0 10px 28px rgba(15,23,42,.13); }
.fb-feed-signal { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; color: #64748b; font-size: 11px; font-weight: 700; }
.fb-feed-signal small { margin-left: auto; color: #94a3b8; font-size: 10px; font-weight: 600; }
.fb-feed-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; padding: 5px 8px 8px; }
.fb-feed-actions > * { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: #64748b; font-size: 11.5px; font-weight: 750; text-decoration: none; cursor: pointer; }
.fb-feed-actions > *:hover { background: #f8fafc; color: #334155; }
.fb-feed-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 18px; border: 1px dashed #cbd5e1; border-radius: 16px; background: #fff; color: #64748b; font-size: 12px; text-align: center; }
.fb-feed-empty b { color: #334155; }

/* AI-MARK[QAI-UI:lyly-facebook-analytics] 2026-07-12 09:45 (GMT+7) — dashboard Phân tích AI-native: ẩn metric Facebook ngừng hỗ trợ, thêm click bài, AI readout card flex chống dựng chữ trên production và chart ngày tách dòng đầy đủ có khung/gridline mượt | rel: lyly.js viewFbAnalytics, LYLY-INTG:facebook-analytics */
.fb-analytics { display: grid; gap: 16px; }
.fb-analytics-hero-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.fb-analytics-period { display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 4px; border: 1px solid #dbeafe; border-radius: 13px; background: rgba(255,255,255,.78); }
.fb-analytics-period button { min-height: 30px; padding: 5px 9px; border: 0; border-radius: 9px; background: transparent; color: #64748b; font-size: 11px; font-weight: 800; cursor: pointer; }
.fb-analytics-period button:hover { background: #eff6ff; color: #1d4ed8; }
.fb-analytics-period button.is-active { background: #10265c; color: #fff; box-shadow: 0 2px 6px rgba(15,35,85,.18); }
.fb-analytics-scope { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.fb-analytics-scope article, .fb-analytics-metric { min-width: 0; display: grid; gap: 4px; padding: 15px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.05); }
.fb-analytics-scope span, .fb-analytics-metric > span { color: #64748b; font-size: 11px; font-weight: 750; }
.fb-analytics-scope b { color: #0f172a; font-size: 14px; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.fb-analytics-scope small, .fb-analytics-metric small { color: #94a3b8; font-size: 10.5px; line-height: 1.4; }
.fb-analytics-ai-card { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); align-items: stretch; gap: 18px; padding: 22px; border: 1px solid #bfdbfe; border-radius: 22px; background: radial-gradient(circle at 18% 0%,rgba(59,130,246,.15),transparent 36%), linear-gradient(135deg,#eff6ff 0%,#fff 58%,#fff7ed 100%); box-shadow: 0 14px 36px rgba(15,23,42,.08); }
.fb-analytics-ai-card > div:first-child { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px 8px 2px; }
.fb-analytics-ai-card h3 { margin: 8px 0 5px; color: #0f172a; font-size: 18px; font-weight: 850; line-height: 1.22; }
.fb-analytics-ai-card p { max-width: 520px; margin: 0; color: #64748b; font-size: 12px; line-height: 1.55; }
.fb-analytics-ai-grid { display: grid; grid-template-columns: repeat(2,minmax(240px,1fr)); gap: 12px; }
.fb-analytics-ai-grid article { min-width: 0; min-height: 132px; display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; border: 1px solid rgba(191,219,254,.95); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(37,99,235,.06); }
.fb-analytics-ai-grid article svg { width: 30px; height: 30px; flex: 0 0 30px; padding: 7px; border-radius: 11px; background: linear-gradient(135deg,#eff6ff,#dbeafe); color: #2563eb; box-sizing: border-box; }
.fb-analytics-ai-grid article b { display: block; color: #0f172a; font-size: 13px; font-weight: 850; line-height: 1.26; overflow-wrap: break-word; word-break: normal; }
.fb-analytics-ai-grid article span { display: block; margin-top: auto; color: #64748b; font-size: 11px; line-height: 1.5; overflow-wrap: break-word; word-break: normal; }
.fb-analytics-section { min-width: 0; padding: 18px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.05); }
.fb-analytics-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.fb-analytics-section-head > div { display: grid; gap: 3px; }
.fb-analytics-section-head h3 { margin: 0; color: #0f172a; font-size: 14px; font-weight: 850; }
.fb-analytics-section-head span { color: #94a3b8; font-size: 11px; line-height: 1.4; }
.fb-analytics-availability { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.fb-analytics-availability.is-available { background: #ecfdf5; color: #047857; }
.fb-analytics-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 10px; }
.fb-analytics-metric b { color: #0f172a; font-size: 23px; font-weight: 850; line-height: 1.1; }
.fb-analytics-metric.is-unavailable { border-style: dashed; background: #fafcff; }
.fb-analytics-series { display: grid; gap: 12px; padding: 16px; border: 1px solid #eef2f7; border-radius: 18px; background: linear-gradient(180deg,#fff 0%,#fbfdff 100%); box-shadow: 0 1px 3px rgba(2,6,23,.04); }
.fb-analytics-series + .fb-analytics-series { margin-top: 14px; }
.fb-analytics-series:first-of-type { padding-top: 16px; border-top: 1px solid #eef2f7; }
.fb-analytics-series-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fb-analytics-series-head > div { display: grid; gap: 2px; }
.fb-analytics-series-head b { color: #1e293b; font-size: 13px; }
.fb-analytics-series-head span, .fb-analytics-series p { color: #94a3b8; font-size: 10.5px; line-height: 1.4; }
.fb-analytics-series-stats { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.fb-analytics-series-stats span { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border: 1px solid #eef2f7; border-radius: 999px; background: #f8fafc; color: #64748b; font-size: 10px; font-weight: 750; white-space: nowrap; }
.fb-analytics-series-stats b { color: #0f172a; font-size: 10px; }
.fb-analytics-series p { margin: 0; }
.fb-analytics-bars { position: relative; height: 196px; display: flex; align-items: stretch; justify-content: space-between; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 16px 14px 8px; border: 1px solid #eef2f7; border-radius: 16px; background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.fb-analytics-bars::before { content: ""; position: absolute; inset: 18px 14px 48px; border-radius: 12px; background: repeating-linear-gradient(to top,rgba(148,163,184,.16) 0 1px,transparent 1px 42px); pointer-events: none; }
.fb-analytics-bars::-webkit-scrollbar { height: 6px; }
.fb-analytics-bars::-webkit-scrollbar-track { background: transparent; }
.fb-analytics-bars::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }
.fb-analytics-bar-wrap { position: relative; z-index: 1; min-width: 40px; max-width: 76px; flex: 1 1 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; scroll-snap-align: start; }
.fb-analytics-bar-value { padding: 1px 5px; border-radius: 999px; background: rgba(255,255,255,.86); color: #64748b; font-size: 10px; font-weight: 850; line-height: 1.2; box-shadow: 0 1px 3px rgba(2,6,23,.06); }
.fb-analytics-bar { width: 30px; flex: 0 0 auto; min-height: 2px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg,#60a5fa 0%,#2563eb 58%,#1d4ed8 100%); box-shadow: 0 6px 14px rgba(37,99,235,.24); }
.fb-analytics-bar-wrap small { display: grid; gap: 1px; min-width: 34px; overflow: visible; color: #64748b; font-size: 9.5px; font-weight: 750; line-height: 1.08; text-align: center; }
.fb-analytics-bar-wrap small span { display: block; white-space: nowrap; }
.fb-analytics-post-list { display: grid; gap: 9px; }
.fb-analytics-post { display: grid; grid-template-columns: 72px minmax(0,1fr); overflow: hidden; border: 1px solid #eef2f7; border-radius: 13px; background: #fbfdff; }
.fb-analytics-post-media { min-height: 72px; display: grid; place-items: center; overflow: hidden; background: #eef2f7; color: #94a3b8; }
.fb-analytics-post-media img { width: 100%; height: 100%; object-fit: cover; }
.fb-analytics-post-main { min-width: 0; padding: 10px 12px; }
.fb-analytics-post-main > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #64748b; font-size: 10.5px; }
.fb-analytics-post-main > div:first-child b { color: #475569; font-size: 10.5px; }
.fb-analytics-post-main > div:first-child a { color: #c2410c; }
.fb-analytics-post-main p { display: -webkit-box; margin: 5px 0 8px; overflow: hidden; color: #334155; font-size: 11.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fb-analytics-post-metrics { display: flex; flex-wrap: wrap; gap: 7px 11px; color: #64748b; font-size: 10px; }
.fb-analytics-post-metrics span { white-space: nowrap; }
.fb-analytics-post-metrics b { color: #334155; font-weight: 800; }
.fb-analytics-empty { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; border: 1px dashed #cbd5e1; border-radius: 14px; background: #fbfdff; color: #64748b; font-size: 11.5px; text-align: center; }
.fb-analytics-empty b { color: #334155; }

.fb-insight-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin-bottom: 12px; border: 1px solid #dbeafe; border-radius: 16px; background: linear-gradient(135deg,#eff6ff,#fff); }
.fb-insight-note > div { display: grid; gap: 2px; }
.fb-insight-note span { color: #1d4ed8; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fb-insight-note b { color: #0f172a; font-size: 27px; font-weight: 850; line-height: 1; }
.fb-insight-note p { margin: 3px 0 0; color: #64748b; font-size: 11.5px; }
.fb-insight-note > svg { color: #2563eb; flex: 0 0 auto; }
.fb-insight-actions { margin-top: 12px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.fb-insight-actions > div:first-child { display: grid; gap: 3px; }
.fb-insight-actions b { color: #1e293b; font-size: 12.5px; }
.fb-insight-actions span { color: #64748b; font-size: 11.5px; line-height: 1.4; }
.fb-insight-actions > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }

.fb-community-toolbar { padding: 18px; border: 1px solid #dbeafe; border-radius: 18px; background: linear-gradient(135deg,#eff6ff,#fff); }
.fb-community-toolbar > div { min-width: 0; display: grid; gap: 4px; }
.fb-community-toolbar b { color: #0f172a; font-size: 15px; }
.fb-community-toolbar span { color: #64748b; font-size: 11.5px; line-height: 1.45; }
.fb-comment-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.fb-comment-filters button { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #64748b; font-size: 11.5px; font-weight: 750; cursor: pointer; }
.fb-comment-filters button:hover, .fb-comment-filters button.is-active { border-color: #fed7aa; background: #fff7f2; color: #c2410c; }
.fb-community-safety { padding: 10px 12px; border: 1px solid #bbf7d0; border-radius: 13px; background: #f0fdf4; color: #157047; }
.fb-community-card { padding: 16px; border-left-width: 4px; }
.fb-community-card--issue { border-left-color: #e11d48; }
.fb-community-card--lead { border-left-color: #f97316; }
.fb-community-card--question { border-left-color: #2563eb; }
.fb-community-card--praise { border-left-color: #16a34a; }
.fb-community-card--general { border-left-color: #94a3b8; }
.fb-community-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fb-community-author { display: grid; gap: 2px; min-width: 0; }
.fb-community-author span { color: #0f172a; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.fb-community-author small { color: #94a3b8; font-size: 10.5px; }
.fb-priority-chip { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; border-radius: 999px; padding: 4px 8px; font-size: 10.5px; font-weight: 800; }
.fb-priority-chip--issue { background: #fff1f2; color: #be123c; }
.fb-priority-chip--lead { background: #fff7ed; color: #c2410c; }
.fb-priority-chip--question { background: #eff6ff; color: #1d4ed8; }
.fb-priority-chip--praise { background: #f0fdf4; color: #15803d; }
.fb-priority-chip--general { background: #f1f5f9; color: #64748b; }
.fb-community-message { margin: 11px 0 8px; color: #334155; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-community-metrics { display: flex; flex-wrap: wrap; gap: 12px; color: #94a3b8; font-size: 10.5px; font-weight: 650; }
.fb-reply-box { margin-top: 13px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
.fb-reply-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #475569; font-size: 11px; font-weight: 800; }
.fb-reply-label em { color: #b45309; font-size: 10.5px; font-style: normal; font-weight: 700; }
.fb-reply-box textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; color: #334155; font: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.5; }
.fb-reply-box textarea:focus { border-color: #FF6B2B; outline: 2px solid rgba(255,107,43,.14); }
.fb-reply-box textarea:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.fb-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.fb-reply-actions small { color: #94a3b8; font-size: 10.5px; line-height: 1.35; }
.fb-reply-result { margin-top: 8px; padding: 7px 9px; border-radius: 9px; font-size: 11.5px; font-weight: 700; }
.fb-reply-result.is-ok { background: #ecfdf5; color: #047857; }
.fb-reply-result.is-error { background: #fff1f2; color: #be123c; }
.fb-community-empty { padding: 24px; border: 1px dashed #cbd5e1; border-radius: 16px; background: #fff; color: #64748b; font-size: 12.5px; text-align: center; }

@media (max-width: 1360px) {
  .fb-feed-layout { grid-template-columns: minmax(210px,.42fr) minmax(0,1fr); }
  .fb-feed-context-rail { position: static; grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; }
  .fb-feed-context-rail .fb-feed-rail-title, .fb-feed-context-rail > p, .fb-feed-context-rail > .fb-feed-rail-link { grid-column: 1 / -1; }
  .fb-feed-context-row { padding-bottom: 0; border-bottom: 0; }
}
@media (max-width: 1040px) {
  .fb-analytics-scope { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fb-analytics-ai-card { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .lyly-mobile-nav-btn { display: inline-flex; }
}
@media (min-width: 1024px) {
  .lyly-mobile-nav-host { display: none; }
}
@media (max-width: 860px) {
  .fb-cockpit-grid { grid-template-columns: 1fr; }
  .fb-feed-layout { grid-template-columns: 1fr; }
  .fb-feed-rail, .fb-feed-context-rail { position: static; grid-column: auto; }
  .fb-feed-page-rail { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
  .fb-feed-page-rail > p { grid-column: 1 / -1; }
  .fb-feed-page-rail .fb-feed-page-head { grid-column: 1 / -1; }
  .fb-feed-context-rail { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fb-feed-context-rail .fb-feed-rail-title, .fb-feed-context-rail > p, .fb-feed-context-rail > .fb-feed-rail-link { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body.lyly-mobile-nav-open { overflow: hidden; }
  .lyly-topbar-inner { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .lyly-topbar-inner > .relative.flex-1 { min-width: 0; }
  #lylyGlobalSearch { font-size: 12px; }
  .fb-command-hero, .fb-community-toolbar, .fb-insight-actions, .fb-reply-actions { align-items: stretch; flex-direction: column; }
  .fb-command-hero .fb-btn, .fb-community-toolbar .fb-btn { align-self: flex-start; }
  .fb-kpi-grid { grid-template-columns: 1fr; }
  .fb-page-card { padding: 14px; }
  .fb-post-card { grid-template-columns: 1fr; }
  .fb-post-media { max-height: 220px; min-height: 0; }
  .fb-content-toolbar { align-items: flex-start; flex-direction: column; }
  .fb-feed-hero, .fb-analytics-hero { align-items: stretch; flex-direction: column; padding: 17px; }
  .fb-feed-hero h2, .fb-analytics-hero h2 { font-size: 19px; }
  .fb-feed-hero .fb-btn { align-self: flex-start; }
  .fb-feed-stream-head { align-items: stretch; flex-direction: column; }
  .fb-feed-filters { justify-content: flex-start; }
  .fb-feed-page-rail, .fb-feed-context-rail { grid-template-columns: 1fr; }
  .fb-feed-page-rail > *, .fb-feed-context-rail > * { grid-column: auto !important; }
  .fb-feed-context-row { padding-bottom: 9px; border-bottom: 1px solid #f1f5f9; }
  .fb-feed-media-stage, .fb-feed-media-stage > a { min-height: 180px; max-height: 62vh; }
  .fb-feed-media { max-height: 62vh; }
  .fb-feed-signal small { width: 100%; margin-left: 0; }
  .fb-feed-actions { grid-template-columns: 1fr; gap: 1px; padding: 5px 8px 8px; }
  .fb-feed-actions > * { justify-content: flex-start; padding: 0 10px; }
  .fb-analytics-hero-actions { align-items: stretch; justify-content: flex-start; }
  .fb-analytics-period { width: 100%; }
  .fb-analytics-period button { flex: 1 1 0; }
  .fb-analytics-scope { grid-template-columns: 1fr; }
  .fb-analytics-ai-grid { grid-template-columns: 1fr; }
  .fb-analytics-ai-card { padding: 14px; }
  .fb-analytics-section { padding: 14px; }
  .fb-analytics-section-head, .fb-analytics-series-head { align-items: stretch; flex-direction: column; }
  .fb-analytics-series-stats { justify-content: flex-start; }
  .fb-analytics-availability { align-self: flex-start; }
  .fb-analytics-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fb-analytics-bars { height: 190px; }
  .fb-analytics-bar-wrap { min-width: 74px; flex-basis: 74px; }
  .fb-analytics-post { grid-template-columns: 58px minmax(0,1fr); }
  .fb-analytics-post-media { min-height: 58px; }
  .fb-insight-actions > div:last-child { width: 100%; }
  .fb-insight-actions .fb-btn { flex: 1 1 auto; justify-content: center; }
  .fb-community-head { align-items: flex-start; }
  .fb-priority-chip { max-width: 46%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   AI-MARK[QAI-UI:lyly-posts-manage] 2026-07-23 09:53 (GMT+7) — Tab "Quản lý bài đã đăng" + popup Thu hồi khẩn cấp, card hiện đủ nhóm và toàn văn thông báo.
   Viết TAY (purge-safe): mọi sizing/màu/layer ở đây, KHÔNG dựa Tailwind arbitrary. Icon sized bằng CSS (chống purge).
   ════════════════════════════════════════════════════════════════════════════ */
.pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.pm-title { font-size: 1.15rem; font-weight: 800; color: #12203f; }
.pm-sub { font-size: .82rem; color: #64748b; margin-top: 2px; max-width: 720px; line-height: 1.5; }
.pm-refresh { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .82rem; font-weight: 600; border-radius: 12px; padding: 8px 14px; cursor: pointer; }
.pm-refresh:hover { border-color: #FF6B2B; color: #FF6B2B; }
.pm-refresh svg { width: 1rem; height: 1rem; }

/* AI-MARK[QAI-UI:lyly-posts-manage] 2026-07-30 11:11 (GMT+7) — posts-manage là sổ mọi tin Lyly đã gửi (announcement + birthday), có search tức thì + filter loại tin/kênh/tên nhóm; reply-to-Lyly chỉ là analytics, không tự dispatch. | rel: announcements.js listPublishedAnnouncements, Lyly_Bot/src/utils/chat_context.py */
.pm-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pm-search { min-width: 260px; flex: 1; height: 42px; display: flex; align-items: center; gap: 8px; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; color: #94a3b8; padding: 0 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.pm-search svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pm-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #0f172a; font: inherit; font-size: .86rem; font-weight: 650; }
.pm-search input::placeholder { color: #9aa7bb; font-weight: 600; }
.pm-filter-menu { position: relative; flex-shrink: 0; }
.pm-group-menu { max-width: min(320px, 38vw); }
.pm-filter-menu > summary { list-style: none; }
.pm-filter-menu > summary::-webkit-details-marker { display: none; }
.pm-filter-button { height: 42px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; color: #334155; font-size: .84rem; font-weight: 800; padding: 0 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.pm-filter-button:hover, .pm-filter-menu[open] .pm-filter-button { border-color: #FF6B2B; color: #FF6B2B; background: #fff7ed; }
.pm-filter-button svg { width: 1rem; height: 1rem; }
.pm-filter-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-filter-button b { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #FF6B2B; color: #fff; font-size: .7rem; line-height: 1; padding: 0 6px; }
.pm-filter-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 25; width: 230px; display: grid; gap: 5px; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; padding: 8px; box-shadow: 0 18px 38px rgba(15,23,42,.16); }
.pm-filter-pop--groups { width: 320px; max-height: min(360px, calc(100vh - 220px)); overflow-y: auto; overscroll-behavior: contain; }
.pm-kind { width: 100%; min-height: 38px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 0; border-radius: 10px; background: transparent; color: #475569; padding: 8px; text-align: left; cursor: pointer; font: inherit; }
.pm-kind:hover { background: #f8fafc; color: #0f172a; }
.pm-kind.is-active { background: #fff7ed; color: #c2410c; }
.pm-kind svg { width: 1rem; height: 1rem; }
.pm-kind span { min-width: 0; font-size: .82rem; font-weight: 800; overflow-wrap: anywhere; }
.pm-kind b { min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f1f5f9; color: inherit; font-size: .72rem; padding: 0 6px; }
.pm-kind-empty { padding: 8px 10px; color: #64748b; font-size: .8rem; font-weight: 650; line-height: 1.4; }
.pm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pm-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.pm-filter:hover { border-color: #FF6B2B; }
.pm-filter.is-active { background: #FF6B2B; border-color: #FF6B2B; color: #fff; }
.pm-filter-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(15,23,42,.08); color: inherit; font-size: .68rem; font-weight: 700; }
.pm-filter.is-active .pm-filter-n { background: rgba(255,255,255,.28); }

.pm-error { border-radius: 14px; background: #fff1f2; border: 1px solid #fecdd3; padding: 14px 16px; font-size: .85rem; color: #be123c; }

.pm-cards { display: flex; flex-direction: column; gap: 10px; }
.pm-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 15px 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.pm-card:hover { border-color: #cbd5e1; }
.pm-card-main { min-width: 0; flex: 1; }
.pm-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-card-title { font-weight: 800; color: #12203f; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; max-width: 100%; }
.pm-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.pm-card-targets, .pm-card-content { margin-top: 11px; }
.pm-card-label { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800; text-transform: uppercase; color: #64748b; letter-spacing: .04em; }
.pm-card-label svg { width: .9rem; height: .9rem; }
.pm-target-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pm-target-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; border-radius: 999px; padding: 5px 9px; font-size: .76rem; line-height: 1.25; }
.pm-target-chip--internal { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.pm-target-chip--facebook { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }
.pm-target-chip--tiktok { border-color: #d4d4d8; background: #f4f4f5; color: #334155; }
.pm-target-channel { flex-shrink: 0; font-size: .64rem; font-weight: 800; text-transform: uppercase; color: inherit; opacity: .78; }
.pm-target-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.pm-target-count { flex-shrink: 0; font-size: .64rem; font-weight: 800; background: rgba(255,255,255,.7); border-radius: 999px; padding: 1px 6px; color: inherit; }
.pm-card-body { font-size: .82rem; color: #475569; margin-top: 6px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.pm-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-shrink: 0; padding-top: 2px; }

.pm-chan { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.pm-chan svg { width: .82rem; height: .82rem; }
.pm-chan--internal { background: #e8f5fe; color: #1d6fa5; }
.pm-chan--email { background: #ede9fe; color: #6d28d9; }
.pm-chan--facebook { background: #e7f0ff; color: #1558b0; }
.pm-chan--tiktok { background: #f1f1f4; color: #334155; }
.pm-when, .pm-src { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: #94a3b8; }
.pm-when svg, .pm-src svg { width: .82rem; height: .82rem; }
.pm-src { color: #64748b; }
.pm-src--birthday { color: #be185d; }

.pm-rc { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.pm-rc svg { width: .82rem; height: .82rem; }
.pm-rc--done { background: #d1fae5; color: #047857; }
.pm-rc--partial { background: #fef3c7; color: #b45309; }

.pm-recall-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #fecdd3; background: #fff; color: #e11d48; font-size: .82rem; font-weight: 700; border-radius: 12px; padding: 8px 14px; cursor: pointer; }
.pm-recall-btn:hover { background: #fff1f2; border-color: #fda4af; }
.pm-recall-btn svg { width: 1rem; height: 1rem; }
.pm-edit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #bfdbfe; background: #fff; color: #1d4ed8; font-size: .82rem; font-weight: 700; border-radius: 12px; padding: 8px 14px; cursor: pointer; }
.pm-edit-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.pm-edit-btn svg { width: 1rem; height: 1rem; }

/* ── Popup Sửa bài đã đăng ── */
.pm-edit-modal { max-width: 720px; }
.pm-edit-head { border-bottom-color: #dbeafe; }
.pm-edit-hicon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #eff6ff; color: #1d4ed8; display: flex; align-items: center; justify-content: center; }
.pm-edit-hicon svg { width: 1.2rem; height: 1.2rem; }
.pm-edit-body { padding: 18px 20px; }
.pm-edit-label { display: block; color: #334155; font-size: .78rem; font-weight: 800; margin-bottom: 7px; }
.pm-edit-textarea { display: block; width: 100%; min-height: 220px; resize: vertical; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 13px; padding: 12px 13px; background: #fff; color: #0f172a; font: inherit; font-size: .88rem; line-height: 1.58; font-weight: 400; }
.pm-edit-textarea:focus { border-color: #2563eb; outline: 3px solid rgba(37,99,235,.14); }
.pm-edit-preview { margin-top: 10px; min-height: 44px; max-height: 180px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: #334155; padding: 10px 12px; font-size: .82rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-edit-preview strong { font-weight: 800; color: #0f172a; }
.pm-edit-targets { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: .8rem; font-weight: 700; }
.pm-edit-targets svg { width: 1rem; height: 1rem; }
.pm-edit-save { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff; font-size: .85rem; font-weight: 700; padding: 10px 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(37,99,235,.24); }
.pm-edit-save:hover { opacity: .95; }
.pm-edit-save:disabled { opacity: .7; cursor: default; }
.pm-edit-save svg { width: 1rem; height: 1rem; }
.pm-edit-result { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; border-radius: 11px; padding: 9px 11px; font-size: .8rem; font-weight: 700; line-height: 1.45; }
.pm-edit-result svg { flex-shrink: 0; margin-top: 1px; }
.pm-edit-result.is-ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.pm-edit-result.is-error { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

/* ── Popup Thu hồi khẩn cấp ── */
.pm-recall-modal { max-width: 640px; }
.pm-recall-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #f1f5f9; }
.pm-recall-hicon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #fff1f2; color: #e11d48; display: flex; align-items: center; justify-content: center; }
.pm-recall-hicon svg { width: 1.2rem; height: 1.2rem; }
.pm-recall-h-title { font-weight: 800; color: #12203f; }
.pm-recall-h-sub { font-size: .78rem; color: #64748b; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-recall-x { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; color: #94a3b8; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.pm-recall-x:hover { background: #f1f5f9; }
.pm-recall-body { padding: 18px 20px; }

.pm-warn { display: flex; align-items: flex-start; gap: 8px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: .82rem; line-height: 1.5; padding: 10px 12px; margin-bottom: 14px; }
.pm-warn svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 2px; color: #ea580c; }
.pm-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pm-sum-ok, .pm-sum-warn { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; border-radius: 12px; padding: 8px 12px; }
.pm-sum-ok { background: #ecfdf5; color: #047857; }
.pm-sum-warn { background: #fffbeb; color: #b45309; }
.pm-sum-ok svg, .pm-sum-warn svg { width: 1rem; height: 1rem; }

.pm-tg-list { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.pm-tg-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 11px 12px; border-top: 1px solid #f1f5f9; }
.pm-tg-row:first-child { border-top: 0; }
.pm-tg-row--recalled, .pm-tg-row--manual_done { background: #f6fef9; }
.pm-tg-row--manual_pending { background: #fffdf5; }
.pm-tg-lead { display: flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer; }
.pm-tg-check { width: 16px; height: 16px; accent-color: #e11d48; cursor: pointer; }
.pm-tg-checkph { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; }
.pm-tg-checkph svg { width: 1rem; height: 1rem; }
.pm-tg-row--recalled .pm-tg-checkph, .pm-tg-row--manual_done .pm-tg-checkph { color: #059669; }
.pm-tg-row--manual_pending .pm-tg-checkph { color: #d97706; }
.pm-tg-mid { flex: 1; min-width: 0; }
.pm-tg-label { font-size: .85rem; font-weight: 600; color: #12203f; display: flex; align-items: center; gap: 6px; }
.pm-tg-count { font-size: .68rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 7px; }
.pm-tg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.pm-method { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.pm-method svg { width: .78rem; height: .78rem; }
.pm-method--api { background: #ecfdf5; color: #047857; }
.pm-method--manual { background: #fffbeb; color: #b45309; }
.pm-st { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; }
.pm-st svg { width: .9rem; height: .9rem; }
.pm-st--ok { color: #059669; }
.pm-st--warn { color: #d97706; }
.pm-tg-err { font-size: .68rem; color: #b91c1c; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tg-hint { flex-basis: 100%; display: flex; align-items: flex-start; gap: 5px; margin-top: 2px; font-size: .72rem; line-height: 1.45; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 8px; }
.pm-tg-hint svg { width: .9rem; height: .9rem; flex-shrink: 0; margin-top: 1px; color: #d97706; }
.pm-tg-hint b { color: #78350f; }
.pm-tg-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pm-tg-link { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: #1558b0; text-decoration: none; }
.pm-tg-link:hover { text-decoration: underline; }
.pm-tg-link svg { width: .9rem; height: .9rem; }
.pm-mark-done { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; font-size: .74rem; font-weight: 700; border-radius: 10px; padding: 5px 10px; cursor: pointer; }
.pm-mark-done:hover { background: #d1fae5; }
.pm-mark-done svg { width: .9rem; height: .9rem; }
.pm-mark-undo { border: 0; background: transparent; color: #94a3b8; font-size: .72rem; cursor: pointer; text-decoration: underline; padding: 4px; }
.pm-mark-undo:hover { color: #64748b; }

.pm-recall-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pm-selectall { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: #475569; font-weight: 600; cursor: pointer; }
.pm-selectall input { width: 16px; height: 16px; accent-color: #e11d48; cursor: pointer; }
.pm-foot-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-do-recall { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; font-size: .85rem; font-weight: 700; padding: 10px 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(225,29,72,.28); }
.pm-do-recall:hover { opacity: .95; }
.pm-do-recall:disabled { opacity: .7; cursor: default; }
.pm-do-recall svg { width: 1rem; height: 1rem; }
.pm-repost-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .82rem; font-weight: 700; border-radius: 12px; padding: 9px 16px; cursor: pointer; }
.pm-repost-btn:hover { border-color: #FF6B2B; color: #FF6B2B; }
.pm-repost-btn svg { width: 1rem; height: 1rem; }
.pm-repost-btn--primary { border: 0; background: linear-gradient(135deg, #FF6B2B, #f43f5e); color: #fff; box-shadow: 0 2px 8px rgba(255,107,43,.25); }
.pm-repost-btn--primary:hover { color: #fff; opacity: .95; }

/* Breakpoint 600px (KHONG 640) co CHU DICH: facebook-dashboard.contract.test.js dung lastIndexOf tren
   chuoi media-query 640 lam MOC de cat khoi responsive .fb-analytics; them 1 media-query 640 sau khoi fb
   se cuop moc do va lam DO test. Giu 600 o day de khong dung moc (va comment nay tranh viet lai chuoi moc). */
@media (max-width: 600px) {
  .pm-head, .pm-toolbar { align-items: stretch; flex-direction: column; }
  .pm-search { min-width: 0; width: 100%; }
  .pm-filter-menu { width: 100%; }
  .pm-group-menu { max-width: none; }
  .pm-filter-button { width: 100%; justify-content: space-between; }
  .pm-filter-pop { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  .pm-card { flex-direction: column; }
  .pm-card-actions { justify-content: flex-end; }
  .pm-tg-row { flex-wrap: wrap; }
  .pm-tg-side { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUAN LY SAN XUAT (Text & Media) — Kanban brief + media
   AI-MARK[QAI-UI:lyly-production] 2026-07-23 11:22 (GMT+7) — style tab San xuat: head +
   Kanban 5 cot (scroll-x tu nhien, KHONG media-query 640 → khong dung moc contract test) +
   card theo giai doan + modal tao/sua + drop upload + nut bo nhom design. Hand-written, purge-safe, hex brand.
   ═══════════════════════════════════════════════════════════════════════════ */
.prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.prod-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.prod-title-tag { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #FF6B2B; background: #fff3ec; border: 1px solid #ffd8c2; border-radius: 999px; padding: 2px 8px; }
.prod-sub { margin-top: 3px; font-size: .82rem; color: #64748b; line-height: 1.5; max-width: 780px; }
.prod-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.prod-btn-ghost { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .82rem; font-weight: 600; border-radius: 12px; padding: 8px 14px; cursor: pointer; }
.prod-btn-ghost:hover { border-color: #FF6B2B; color: #FF6B2B; }
.prod-btn-ghost svg { width: 1rem; height: 1rem; }
.prod-btn-primary { display: inline-flex; align-items: center; gap: 6px; border: 0; background: linear-gradient(135deg, #FF6B2B, #f43f5e); color: #fff; font-size: .82rem; font-weight: 700; border-radius: 12px; padding: 9px 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(255,107,43,.25); }
.prod-btn-primary:hover { opacity: .95; color: #fff; }
.prod-btn-primary svg { width: 1rem; height: 1rem; }

.prod-design-badge { margin: 4px 0 2px; }
.prod-dg { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; border-radius: 999px; padding: 4px 12px; }
.prod-dg--ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.prod-dg--warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.prod-dg svg { width: .9rem; height: .9rem; }

.prod-flash { margin: 6px 0; font-size: .8rem; font-weight: 600; border-radius: 12px; padding: 9px 14px; }
.prod-flash--ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.prod-flash--warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.prod-flash--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.prod-board { margin-top: 10px; }
/* AI-MARK[QAI-UI:lyly-production] 2026-07-23 — Kanban GIÃN FULL-WIDTH: cột flex:1 chia đều lấp hết chiều ngang
   (hết cảnh lệch-trái bỏ trống nửa màn) + min-width 232px → màn hẹp mới scroll-x. | rel: viewProductions */
.prod-cols { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.prod-col { flex: 1 1 232px; min-width: 232px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 16px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.prod-col-head { display: flex; align-items: center; gap: 7px; padding: 11px 13px; border-bottom: 1px solid #eef2f7; font-size: .8rem; font-weight: 800; color: #334155; }
.prod-col-head svg { width: 1rem; height: 1rem; }
.prod-col-label { flex: 1; }
.prod-col-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(15,23,42,.07); font-size: .68rem; font-weight: 800; color: #475569; }
.prod-col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.prod-col-empty { text-align: center; color: #cbd5e1; font-size: .8rem; padding: 12px 0; }
.prod-col--slate .prod-col-head { color: #475569; }
.prod-col--amber .prod-col-head { color: #b45309; } .prod-col--amber { background: #fffdf6; border-color: #fef3c7; }
.prod-col--emerald .prod-col-head { color: #047857; } .prod-col--emerald { background: #f4fdf9; border-color: #d1fae5; }
.prod-col--sky .prod-col-head { color: #0369a1; } .prod-col--sky { background: #f5fbff; border-color: #e0f2fe; }
.prod-col--violet .prod-col-head { color: #6d28d9; } .prod-col--violet { background: #faf8ff; border-color: #ede9fe; }

/* .prod-kcard (KHÔNG dùng .prod-card — đã bị Product catalog QAI-UI:lyly-products chiếm, tránh cascade lẫn). */
.prod-kcard { background: #fff; border: 1px solid #e7edf3; border-radius: 13px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.prod-kcard-thumb { width: 100%; height: 110px; object-fit: cover; border-radius: 9px; margin-bottom: 8px; background: #f1f5f9; border: 1px solid #eef2f7; display: block; }
.prod-card-title { font-size: .86rem; font-weight: 700; color: #0f172a; line-height: 1.35; }
.prod-card-body { margin-top: 4px; font-size: .76rem; color: #64748b; line-height: 1.45; }
.prod-card-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.prod-card-meta > span { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: #f1f5f9; color: #475569; }
.prod-card-meta svg { width: .8rem; height: .8rem; }
.prod-brief-chip { background: #eef2ff !important; color: #4338ca !important; }
.prod-media-prog { background: #fff7ed !important; color: #c2410c !important; }
.prod-media-prog.is-full { background: #ecfdf5 !important; color: #047857 !important; }
.prod-media-none { background: #f1f5f9 !important; color: #64748b !important; }
/* AI-MARK[QAI-UI:lyly-production-actions] 2026-08-04 14:36 (GMT+7) — action production gọn theo thứ tự thao tác: nhóm phụ 2 cột, CTA chính full-row, xoá tách góc phải; không còn Gen ảnh trên Kanban. | rel: prCardHtml */
.prod-card-actions { margin-top: 11px; padding-top: 9px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 6px; }
.prod-card-actions-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.prod-card-actions-main .prod-a { min-width: 0; justify-content: center; }
.prod-card-actions-main .prod-a:only-child { grid-column: 1 / -1; }
.prod-card-actions-main .prod-a--primary { grid-column: 1 / -1; }
.prod-card-actions-foot { display: flex; justify-content: flex-end; min-height: 0; }
.prod-a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .72rem; font-weight: 600; border-radius: 9px; padding: 5px 9px; cursor: pointer; }
.prod-a:hover { border-color: #FF6B2B; color: #FF6B2B; }
.prod-a svg { width: .85rem; height: .85rem; }
.prod-a--primary { border: 0; background: linear-gradient(135deg, #FF6B2B, #f43f5e); color: #fff; box-shadow: 0 1px 5px rgba(255,107,43,.22); }
.prod-a--primary:hover { color: #fff; opacity: .95; }
.prod-a--del { color: #ef4444; border-color: #fee2e2; padding: 5px 8px; }
.prod-a--del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

@media (max-width: 520px) {
  .prod-card-actions-main { grid-template-columns: 1fr; }
  .prod-card-actions-main .prod-a--primary { grid-column: auto; }
}

/* Modal tao/sua + media */
.prod-modal { max-width: 640px; }
.prod-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #f1f5f9; }
.prod-modal-hicon { height: 40px; width: 40px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, #FF6B2B, #f43f5e); color: #fff; display: flex; align-items: center; justify-content: center; }
.prod-modal-h-title { font-weight: 800; color: #0f172a; }
.prod-modal-h-sub { font-size: .76rem; color: #64748b; margin-top: 1px; }
.prod-modal-x { height: 32px; width: 32px; border-radius: 9px; color: #94a3b8; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; }
.prod-modal-x:hover { background: #f1f5f9; color: #475569; }
.prod-modal-body { padding: 16px 18px; }
.prod-form { display: flex; flex-direction: column; gap: 16px; }
.prod-sec { display: flex; flex-direction: column; gap: 8px; }
.prod-sec-t { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: .02em; }
.prod-sec-t svg { width: .95rem; height: .95rem; color: #FF6B2B; }
.prod-input, .prod-textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 11px; padding: 9px 12px; font-size: .85rem; color: #0f172a; background: #fff; }
.prod-input:focus, .prod-textarea:focus { outline: none; border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.12); }
.prod-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.prod-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prod-field { display: flex; flex-direction: column; gap: 4px; }
.prod-field > span { font-size: .72rem; font-weight: 600; color: #64748b; }
.prod-suggest { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #ffd8c2; background: #fff3ec; color: #c2410c; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 4px 11px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.prod-suggest:hover { background: #ffe6d6; }
.prod-suggest svg { width: .85rem; height: .85rem; color: #c2410c; }
.prod-suggest-msg { font-size: .74rem; min-height: 0; }
.prod-suggest-msg:empty { display: none; }
.prod-chan-row { display: flex; flex-wrap: wrap; gap: 8px; }
.prod-chan-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.prod-chan-chip svg { width: .9rem; height: .9rem; }
.prod-chan-chip.is-active { background: #FF6B2B; border-color: #FF6B2B; color: #fff; }
.prod-groups { display: flex; flex-wrap: wrap; gap: 7px; }
.prod-group-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.prod-group-chip svg { width: .8rem; height: .8rem; }
.prod-group-chip.is-active { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.prod-cfg-current { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid #d1fae5; background: #f6fef9; color: #047857; border-radius: 12px; padding: 9px 10px; margin-bottom: 12px; font-size: .78rem; font-weight: 700; }
.prod-cfg-current span, .prod-cfg-clear { display: inline-flex; align-items: center; gap: 5px; }
.prod-cfg-current svg { width: .9rem; height: .9rem; flex-shrink: 0; }
.prod-cfg-clear { border: 1px solid #fecaca; background: #fff; color: #dc2626; border-radius: 10px; padding: 5px 10px; font-size: .73rem; font-weight: 800; cursor: pointer; }
.prod-cfg-clear:hover { background: #fef2f2; border-color: #fca5a5; }
.prod-cfg-clear:disabled { opacity: .6; cursor: default; }
.prod-form-msg { font-size: .78rem; min-height: 0; }
.prod-form-msg:empty { display: none; }
.prod-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.prod-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; border: 2px dashed #cbd5e1; border-radius: 14px; padding: 24px 16px; color: #64748b; font-size: .82rem; cursor: pointer; background: #f8fafc; }
.prod-drop:hover, .prod-drop.is-drag { border-color: #FF6B2B; color: #c2410c; background: #fff7f2; }
.prod-drop svg { width: 1.5rem; height: 1.5rem; color: #FF6B2B; }
.prod-drop input { display: none; }

/* Studio Ảnh + Caption (tách riêng) — popup preview/kết quả tab Sản xuất
   AI-MARK[QAI-UI:lyly-production] 2026-07-23 14:15 (GMT+7) — studio sửa caption/mô tả ảnh + Lyly soạn caption + upload/gen ảnh reference-aware. */
.prod-studio-modal { max-width: 980px; }
.prod-studio { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.prod-studio-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.prod-studio-t { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: .02em; }
.prod-studio-t svg { width: .95rem; height: .95rem; color: #FF6B2B; }
.prod-studio-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.prod-studio-hint { font-size: .68rem; font-weight: 600; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.prod-gen-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prod-gen-hint { font-size: .72rem; color: #94a3b8; line-height: 1.45; margin-top: -2px; }
.prod-ai-off { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: #94a3b8; background: #f1f5f9; border-radius: 999px; padding: 4px 10px; }
.prod-ai-off svg { width: .8rem; height: .8rem; }
.prod-image-desc-field { margin-top: 2px; }
.prod-image-desc { min-height: 92px; }
.prod-studio-col--text .prod-studio-t { align-items: center; }
.prod-inline-compose { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #fed7aa; background: #fff7ed; color: #c2410c; border-radius: 999px; padding: 4px 10px; font-size: .72rem; font-weight: 850; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.prod-inline-compose:hover { border-color: #fdba74; color: #9a3412; }
.prod-inline-compose:disabled { opacity: .6; cursor: default; }
.prod-inline-save { margin-left: 0; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #dbeafe; background: #eff6ff; color: #1d4ed8; border-radius: 999px; padding: 4px 10px; font-size: .72rem; font-weight: 800; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.prod-inline-save:hover { border-color: #93c5fd; color: #1e40af; }
.prod-inline-save:disabled { opacity: .6; cursor: default; }
.prod-caption-box { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; font-size: .84rem; color: #243056; line-height: 1.55; background: #f8fafc; min-height: 96px; max-height: 320px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.prod-caption-edit { resize: vertical; min-height: 188px; background: #fff; max-height: none; }
.prod-caption-edit:focus { outline: none; border-color: #FF6B2B; box-shadow: 0 0 0 3px rgba(255,107,43,.12); }
.prod-caption-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-caption-meta > span { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: #eef2ff; color: #4338ca; }
.prod-caption-meta svg { width: .8rem; height: .8rem; }
.prod-caption-status { font-size: .76rem; min-height: 18px; }
.prod-caption-status:empty { display: none; }
@media (max-width: 720px) {
  .prod-studio { grid-template-columns: 1fr; }
  .prod-caption-edit { min-height: 150px; }
  .prod-studio-col--text .prod-studio-t { flex-wrap: wrap; }
  .prod-inline-compose { margin-left: 0; }
  .prod-inline-compose, .prod-inline-save { padding-inline: 9px; }
}

/* Kho ảnh dùng chung cho tab Sản xuất.
   AI-MARK[QAI-UI:lyly-production-media-library] 2026-08-04 08:42 (GMT+7) — gallery + editor ảnh mẫu,
   khung gallery đồng đều, contain nguyên ảnh và spec tỉ lệ/kích thước rõ ràng; namespace riêng để không va vào .prod-card. | rel: lyly.js prOpenImageLibrary */
.prod-library-modal { max-width: 1220px; }
.prod-library-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prod-library-search { flex: 1 1 360px; display: flex; align-items: center; gap: 7px; min-width: 260px; }
.prod-library-search > svg { color: #94a3b8; flex-shrink: 0; }
.prod-library-search .prod-input { flex: 1; min-width: 0; }
.prod-library-toolbar > .prod-input { width: min(100%, 290px); }
.prod-library-upload { position: relative; overflow: hidden; white-space: nowrap; }
.prod-library-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.prod-library-smart-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; border: 1px solid #fed7aa; background: #fff7ed; color: #c2410c; border-radius: 11px; padding: 8px 11px; font-size: .74rem; font-weight: 650; }
.prod-library-smart-note svg { flex-shrink: 0; }
.prod-library-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap: 18px; margin-top: 14px; align-items: start; }
.prod-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 11px; min-height: 240px; max-height: min(62vh, 620px); overflow-y: auto; padding: 2px; align-content: start; }
.prod-library-card { display: flex; flex-direction: column; min-width: 0; gap: 5px; padding: 7px; border: 1px solid #e2e8f0; border-radius: 13px; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.prod-library-card:hover { border-color: #fdba74; box-shadow: 0 5px 15px rgba(15,23,42,.08); transform: translateY(-1px); }
.prod-library-card.is-selected { border-color: #fb923c; box-shadow: 0 0 0 3px rgba(251,146,60,.15); }
.prod-library-card-media { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 9px; background: linear-gradient(135deg, #f8fafc, #e2e8f0); color: #cbd5e1; }
.prod-library-card-media img { width: 100%; height: 100%; padding: 5px; object-fit: contain; display: block; }
.prod-library-card-match { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; max-width: calc(100% - 12px); padding: 3px 6px; border-radius: 999px; background: rgba(255,247,237,.94); color: #c2410c; font-size: .6rem; font-weight: 850; box-shadow: 0 2px 7px rgba(15,23,42,.12); }
.prod-library-card-badge { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; }
.prod-library-card-title { display: block; overflow: hidden; color: #0f172a; font-size: .75rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.prod-library-card-spec { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #64748b; font-size: .64rem; font-weight: 650; }
.prod-library-card-spec b { color: #0f5bd8; font-size: .68rem; font-weight: 850; }
.prod-library-card-spec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-library-card-meta { display: flex; gap: 4px; overflow: hidden; color: #64748b; font-size: .66rem; white-space: nowrap; }
.prod-library-card-meta span { overflow: hidden; text-overflow: ellipsis; }
.prod-library-card-meta span + span::before { content: '·'; margin-right: 4px; color: #cbd5e1; }
.prod-library-editor { display: flex; flex-direction: column; gap: 9px; min-width: 0; border: 1px solid #e5e7eb; border-radius: 15px; background: #f8fafc; padding: 12px; }
.prod-library-editor-head { display: flex; align-items: center; gap: 8px; }
.prod-library-editor-title { flex: 1; color: #0f172a; font-size: .8rem; font-weight: 850; }
.prod-library-usage { color: #94a3b8; font-size: .68rem; font-weight: 650; }
.prod-library-preview { position: relative; aspect-ratio: 4 / 5; min-height: 0; max-height: 420px; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #f8fafc, #e2e8f0); }
.prod-library-preview img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 7px; }
.prod-library-preview-missing { display: grid; height: 100%; min-height: 180px; place-items: center; color: #94a3b8; font-size: .75rem; }
.prod-library-preserve-badge { position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; font-size: .65rem; font-weight: 850; box-shadow: 0 3px 10px rgba(15,23,42,.16); }
.prod-library-layout-badge { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; background: rgba(255,247,237,.92); color: #c2410c; font-size: .63rem; font-weight: 850; box-shadow: 0 3px 10px rgba(15,23,42,.14); }
.prod-library-preview-spec { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.9); color: #334155; font-size: .63rem; font-weight: 800; }
.prod-library-source-note { display: flex; align-items: flex-start; gap: 6px; padding: 8px 9px; border: 1px solid #bae6fd; border-radius: 9px; background: #f0f9ff; color: #0369a1; font-size: .68rem; font-weight: 650; line-height: 1.45; }
.prod-library-source-note svg { flex: 0 0 auto; margin-top: 1px; }
/* AI-MARK[QAI-UI:lyly-production-editorial-overlay] 2026-08-04 10:05 (GMT+7) — preview layout editorial card cùng renderer backend; card cục bộ, hierarchy rõ, không còn dải chữ ngang phủ kín ảnh. | rel: LYLY-TOOL:media-library-editorial-overlay, lyly.js prLibraryOverlayParts */
.prod-library-overlay { position: absolute; left: 7%; right: auto; bottom: 7%; width: max-content; min-width: 38%; max-width: 80%; display: flex; flex-direction: column; gap: 3px; padding: 12px 15px 13px 19px; border: 1px solid rgba(255,255,255,.26); border-left: 4px solid #ff6b2b; border-radius: 12px; color: #fff; background: linear-gradient(135deg, rgba(7,20,55,.90), rgba(15,35,78,.76)); box-shadow: 0 10px 24px rgba(7,20,55,.24); backdrop-filter: blur(10px); text-shadow: 0 1px 3px rgba(0,0,0,.24); text-align: left; overflow-wrap: anywhere; }
.prod-library-overlay[hidden] { display: none; }
.prod-library-overlay-kicker { display: block; color: #ffad7d; font-size: clamp(.55rem, 1.2vw, .78rem); font-weight: 850; letter-spacing: .01em; line-height: 1.2; }
.prod-library-overlay-headline { display: block; color: #fff; font-size: clamp(.88rem, 2.15vw, 1.75rem); font-weight: 850; line-height: 1.08; }
.prod-library-overlay-support { display: block; color: rgba(255,255,255,.84); font-size: clamp(.62rem, 1.25vw, .9rem); font-weight: 550; line-height: 1.28; }
.prod-library-overlay--top { top: 7%; bottom: auto; }
.prod-library-overlay--center { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); min-width: 42%; border-left: 0; border-top: 4px solid #ff6b2b; text-align: center; align-items: center; }
.prod-library-overlay--bottom { bottom: 7%; top: auto; }
.prod-library-overlay-input { min-height: 74px; }
.prod-library-suggestion-box { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid #fed7aa; border-radius: 10px; background: linear-gradient(135deg, #fff7ed, #fffaf5); }
.prod-library-suggestion-head { display: flex; align-items: center; gap: 8px; color: #9a3412; font-size: .7rem; font-weight: 850; }
.prod-library-suggestion-head > span { display: inline-flex; align-items: center; gap: 5px; flex: 1; }
.prod-library-suggest-btn { padding: 5px 8px; font-size: .64rem; }
.prod-library-suggest-btn.is-busy { opacity: .62; pointer-events: none; }
.prod-library-suggestions { display: grid; grid-template-columns: 1fr; gap: 6px; }
.prod-library-suggestion { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 8px 9px; border: 1px solid #fed7aa; border-radius: 8px; background: rgba(255,255,255,.86); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.prod-library-suggestion:hover, .prod-library-suggestion.is-recommended { border-color: #fb923c; box-shadow: 0 3px 10px rgba(194,65,12,.1); transform: translateY(-1px); }
.prod-library-suggestion-copy { white-space: pre-line; color: #431407; font-size: .73rem; font-weight: 850; line-height: 1.35; }
.prod-library-suggestion-reason { color: #9a3412; font-size: .62rem; font-weight: 600; line-height: 1.35; }
.prod-library-suggestion-empty { color: #9a3412; font-size: .66rem; font-weight: 600; line-height: 1.4; }
.prod-library-suggestion-empty.is-error { color: #be123c; }
.prod-library-editor .prod-field > span em { color: #c2410c; font-style: normal; font-weight: 650; }
.prod-library-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.prod-library-editor-actions .prod-btn-primary, .prod-library-editor-actions .prod-btn-ghost { padding: 7px 10px; font-size: .72rem; }
.prod-library-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 160px; padding: 18px; color: #94a3b8; text-align: center; font-size: .75rem; }
.prod-library-empty b { color: #475569; font-size: .8rem; }
.prod-library-empty--grid { grid-column: 1 / -1; min-height: 240px; border: 1px dashed #cbd5e1; border-radius: 14px; }
.prod-library-error { grid-column: 1 / -1; padding: 20px; color: #b91c1c; font-size: .8rem; }
@media (max-width: 820px) {
  .prod-library-layout { grid-template-columns: 1fr; }
  .prod-library-grid { max-height: 42vh; }
  .prod-library-editor { order: -1; }
}

/* AI-MARK[QAI-UI:lyly-production-media-library-v2] 2026-08-04 13:35 (GMT+7) — nâng cấp kho ảnh thành workspace 2 bước: chọn production đang làm, sau đó chọn/biên tập ảnh; thêm upload kéo-thả, thống kê và target cards để thao tác nhanh trên desktop/mobile. | rel: lyly.js prLibraryRenderTargets/prOpenImageLibrary */
.prod-library-modal { max-width: 1380px; background: #f8fafc; }
.prod-library-head { align-items: center; gap: 14px; padding: 19px 24px; background: linear-gradient(135deg, #ffffff 0%, #fffaf5 100%); border-bottom: 1px solid #f1f5f9; }
.prod-library-head .prod-modal-hicon { background: linear-gradient(135deg, #ff6b35, #f0445e); box-shadow: 0 8px 18px rgba(240,68,94,.2); }
.prod-library-head-stat { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.prod-library-head-stat span { display: inline-flex; align-items: baseline; gap: 4px; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 10px; background: rgba(255,255,255,.85); color: #64748b; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.prod-library-head-stat b { color: #0f172a; font-size: .84rem; }
.prod-library-modal .prod-modal-body { padding: 18px 20px 20px; background: #f8fafc; }
.prod-library-focus, .prod-library-tools { border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(15,23,42,.04); }
.prod-library-focus { padding: 16px 17px 14px; }
.prod-library-tools { margin-top: 14px; padding: 15px 17px 13px; }
.prod-library-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.prod-library-section-head--compact { align-items: center; margin-bottom: 11px; }
.prod-library-section-head h3 { margin: 3px 0 2px; color: #0f172a; font-size: .94rem; font-weight: 900; letter-spacing: -.01em; }
.prod-library-section-head p { margin: 0; color: #64748b; font-size: .72rem; font-weight: 550; line-height: 1.45; }
.prod-library-eyebrow { color: #c2410c; font-size: .61rem; font-weight: 900; letter-spacing: .11em; }
.prod-library-target-count { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: .64rem; font-weight: 850; }
.prod-library-target-control { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); align-items: end; gap: 12px; margin-bottom: 12px; }
.prod-library-target-select { display: flex; flex-direction: column; gap: 5px; }
.prod-library-target-select > span, .prod-library-filter > span { color: #475569; font-size: .66rem; font-weight: 850; }
.prod-library-target-select select { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; font-size: .75rem; font-weight: 750; outline: none; }
.prod-library-target-select select:focus, .prod-library-filter select:focus, .prod-library-search input:focus { border-color: #fb923c; box-shadow: 0 0 0 3px rgba(251,146,60,.13); }
.prod-library-target-meta { min-height: 38px; display: flex; align-items: center; padding: 8px 11px; border: 1px solid #dbeafe; border-radius: 10px; background: #f8fbff; }
.prod-library-target-meta-empty, .prod-library-target-meta-selected { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #64748b; font-size: .68rem; font-weight: 650; line-height: 1.35; }
.prod-library-target-meta-selected { color: #0369a1; }
.prod-library-target-meta-selected b { color: #0f172a; }
.prod-library-target-meta-selected span { color: #0369a1; }
.prod-library-target-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 8px; max-height: 154px; overflow-y: auto; padding: 2px; }
.prod-library-target-card { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 11px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #0f172a; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; }
.prod-library-target-card:hover { border-color: #fdba74; background: #fffaf5; box-shadow: 0 5px 14px rgba(194,65,12,.08); transform: translateY(-1px); }
.prod-library-target-card.is-selected { border-color: #fb923c; background: linear-gradient(135deg, #fff7ed, #fff); box-shadow: 0 0 0 3px rgba(251,146,60,.14); }
.prod-library-target-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.prod-library-target-stage { display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 20px); padding: 4px 6px; border-radius: 999px; font-size: .59rem; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-library-target-stage--slate { background: #f1f5f9; color: #475569; }
.prod-library-target-stage--amber { background: #fff7ed; color: #c2410c; }
.prod-library-target-stage--emerald { background: #ecfdf5; color: #047857; }
.prod-library-target-stage--sky { background: #eff6ff; color: #0369a1; }
.prod-library-target-stage--violet { background: #f5f3ff; color: #6d28d9; }
.prod-library-target-chevron { color: #cbd5e1; flex: 0 0 auto; }
.prod-library-target-card strong { overflow: hidden; color: #1e293b; font-size: .74rem; font-weight: 850; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.prod-library-target-card-meta { display: flex; gap: 5px; overflow: hidden; color: #64748b; font-size: .61rem; font-weight: 650; white-space: nowrap; }
.prod-library-target-card-meta span { overflow: hidden; text-overflow: ellipsis; }
.prod-library-target-card-meta span + span::before { content: '·'; margin-right: 5px; color: #cbd5e1; }
.prod-library-target-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 62px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 11px; color: #94a3b8; font-size: .68rem; font-weight: 650; text-align: center; }
.prod-library-stats { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; color: #64748b; font-size: .62rem; font-weight: 700; }
.prod-library-stats span { padding: 5px 7px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; }
.prod-library-stats b { color: #0f172a; }
.prod-library-toolbar { gap: 9px; }
.prod-library-search { flex-basis: 420px; }
.prod-library-filter { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.prod-library-filter .prod-input { width: 132px; min-height: 38px; }
.prod-library-upload-zone { position: relative; display: flex; align-items: center; gap: 10px; min-height: 62px; margin-top: 11px; padding: 9px 12px; border: 1px dashed #fdba74; border-radius: 12px; background: linear-gradient(90deg, #fff7ed 0%, #fff 75%); color: #9a3412; overflow: hidden; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.prod-library-upload-zone:hover, .prod-library-upload-zone.is-drag { border-color: #f97316; background: #fff7ed; box-shadow: 0 0 0 3px rgba(249,115,22,.09); }
.prod-library-upload-zone input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.prod-library-upload-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; background: #ffedd5; color: #ea580c; }
.prod-library-upload-zone b, .prod-library-upload-zone span { display: block; }
.prod-library-upload-zone b { color: #7c2d12; font-size: .72rem; font-weight: 900; }
.prod-library-upload-zone div:nth-child(3) span { margin-top: 2px; color: #9a3412; font-size: .63rem; font-weight: 600; }
.prod-library-upload-action { margin-left: auto; padding: 7px 9px; border: 1px solid #fed7aa; border-radius: 8px; background: #fff; color: #c2410c; font-size: .65rem; font-weight: 850; white-space: nowrap; }
.prod-library-smart-note { margin-top: 10px; }
.prod-library-layout { grid-template-columns: minmax(0, 1.22fr) minmax(370px, .78fr); gap: 16px; margin-top: 15px; }
.prod-library-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); max-height: min(56vh, 610px); padding: 3px; }
.prod-library-card { padding: 8px; border-radius: 15px; }
.prod-library-card-media { aspect-ratio: 4 / 3; border-radius: 10px; }
.prod-library-editor { position: sticky; top: 0; max-height: min(70vh, 760px); overflow-y: auto; border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(15,23,42,.06); }
.prod-library-footer-hint { display: inline-flex; align-items: center; gap: 6px; flex: 1; color: #64748b; font-size: .66rem; font-weight: 650; }
@media (max-width: 940px) {
  .prod-library-head-stat { display: none; }
  .prod-library-target-control { grid-template-columns: 1fr; align-items: stretch; }
  .prod-library-layout { grid-template-columns: 1fr; }
  .prod-library-editor { position: static; order: -1; max-height: none; }
}
@media (max-width: 620px) {
  .prod-library-modal .prod-modal-body { padding: 11px; }
  .prod-library-head { padding: 14px; }
  .prod-library-focus, .prod-library-tools { padding: 13px 12px; border-radius: 14px; }
  .prod-library-section-head { display: block; }
  .prod-library-target-count { display: inline-block; margin-top: 7px; }
  .prod-library-stats { justify-content: flex-start; margin-top: 7px; }
  .prod-library-filter { width: 100%; justify-content: space-between; margin-top: 7px; }
  .prod-library-filter .prod-input { flex: 1; width: auto; }
  .prod-library-upload-zone { align-items: flex-start; }
  .prod-library-upload-action { display: none; }
  .prod-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .prod-library-card { padding: 6px; }
  .prod-library-card-meta { display: none; }
  .prod-library-footer-hint { display: none; }
}

/* AI-MARK[QAI-UI:lyly-production-media-library-polish] 2026-08-04 14:05 (GMT+7) — polish vòng cuối cho workspace kho ảnh:
   bo góc mềm hơn, giảm cảm giác khung lồng khung, gom tìm kiếm/bộ lọc và làm rõ thứ bậc nút thao tác chính. | rel: lyly.js prOpenImageLibrary */
.prod-library-modal {
  border-radius: 28px !important;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .22);
}
.prod-library-head {
  min-height: 78px;
  padding: 18px 24px;
  border-bottom-color: #eef2f7;
}
.prod-library-head-stat span {
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .92);
}
.prod-library-head .prod-modal-x {
  width: 38px;
  height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.prod-library-head .prod-modal-x:hover {
  border-color: #fdba74;
  background: #fff7ed;
  color: #c2410c;
  transform: rotate(4deg);
}
.prod-library-modal .prod-modal-body { padding: 20px 22px 22px; }
.prod-library-focus,
.prod-library-tools {
  border-color: rgba(226, 232, 240, .9);
  border-radius: 24px;
  box-shadow: 0 5px 22px rgba(15, 23, 42, .035);
}
.prod-library-focus { padding: 18px 19px 16px; }
.prod-library-tools { margin-top: 16px; padding: 17px 19px 15px; }
.prod-library-section-head { align-items: center; margin-bottom: 14px; }
.prod-library-section-head h3 { font-size: .98rem; }
.prod-library-section-head p { max-width: 660px; }
.prod-library-target-count { padding: 7px 11px; }
.prod-library-target-control {
  grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.prod-library-target-select { gap: 6px; }
.prod-library-target-select select,
.prod-library-target-meta {
  min-height: 44px;
  border-radius: 14px;
}
.prod-library-target-select select { padding-inline: 12px; }
.prod-library-target-meta { padding: 9px 13px; }
.prod-library-target-list { gap: 10px; max-height: 172px; }
.prod-library-target-card {
  gap: 8px;
  min-height: 96px;
  padding: 12px 13px;
  border-radius: 16px;
}
.prod-library-target-card:hover { box-shadow: 0 8px 18px rgba(194, 65, 12, .09); }
.prod-library-target-card.is-selected { box-shadow: inset 0 0 0 1px #fb923c, 0 8px 20px rgba(249, 115, 22, .11); }
.prod-library-target-empty { min-height: 74px; border-radius: 16px; }
.prod-library-stats { gap: 6px; }
.prod-library-stats span { padding: 6px 9px; border-radius: 999px; }
.prod-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.prod-library-search { flex: none; min-width: 0; width: 100%; gap: 8px; }
.prod-library-search .prod-input,
.prod-library-filter .prod-input {
  min-height: 44px;
  border-radius: 14px;
}
.prod-library-search .prod-btn-ghost {
  min-width: 72px;
  min-height: 44px;
  justify-content: center;
  border-radius: 14px;
}
.prod-library-filter { gap: 8px; }
.prod-library-filter > span { white-space: nowrap; }
.prod-library-filter .prod-input { width: 148px; padding-inline: 12px; }
.prod-library-upload-zone {
  min-height: 72px;
  margin-top: 13px;
  padding: 11px 14px;
  border-radius: 18px;
}
.prod-library-upload-icon { width: 42px; height: 42px; border-radius: 14px; }
.prod-library-upload-action {
  padding: 9px 13px;
  border-radius: 999px;
  font-size: .67rem;
}
.prod-library-smart-note {
  margin-top: 11px;
  border-radius: 14px;
  padding: 10px 12px;
}
.prod-library-layout { gap: 18px; margin-top: 18px; }
.prod-library-card { padding: 9px; border-radius: 18px; }
.prod-library-card-media { border-radius: 13px; }
.prod-library-card:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .09); }
.prod-library-card.is-selected { box-shadow: inset 0 0 0 1px #fb923c, 0 0 0 3px rgba(251, 146, 60, .1); }
.prod-library-editor {
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 24px;
  box-shadow: 0 9px 28px rgba(15, 23, 42, .055);
}
.prod-library-editor .prod-input,
.prod-library-editor .prod-textarea { border-radius: 14px; }
.prod-library-preview { border-radius: 18px; }
.prod-library-source-note { border-radius: 14px; padding: 9px 11px; }
.prod-library-suggestion-box { border-radius: 14px; padding: 10px; }
.prod-library-suggestion { border-radius: 12px; padding: 9px 10px; }
.prod-library-editor-actions {
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}
.prod-library-editor-actions .prod-a--del { margin-left: 0; border-radius: 999px; }
.prod-library-editor-actions .prod-btn-primary,
.prod-library-editor-actions .prod-btn-ghost {
  min-height: 40px;
  justify-content: center;
  border-radius: 13px;
  padding: 8px 12px;
}
.prod-library-modal .prod-form-actions {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 17px;
  padding: 14px 2px 0;
  border-top: 1px solid #e8edf3;
}
.prod-library-modal .prod-form-actions > .prod-btn-ghost {
  min-width: 86px;
  justify-content: center;
  border-radius: 999px;
}
@media (max-width: 940px) {
  .prod-library-modal .prod-modal-body { padding: 17px; }
  .prod-library-focus, .prod-library-tools { border-radius: 20px; }
}
@media (max-width: 620px) {
  .prod-library-modal { border-radius: 22px !important; }
  .prod-library-head { min-height: 68px; padding: 14px 15px; }
  .prod-library-modal .prod-modal-body { padding: 12px; }
  .prod-library-focus, .prod-library-tools { padding: 14px 13px; border-radius: 18px; }
  .prod-library-toolbar { grid-template-columns: 1fr; gap: 8px; }
  .prod-library-filter { width: 100%; justify-content: space-between; margin-top: 0; }
  .prod-library-filter .prod-input { flex: 1; width: auto; }
  .prod-library-target-card { min-height: 90px; padding: 10px 11px; border-radius: 14px; }
  .prod-library-editor { padding: 13px; border-radius: 20px; }
  .prod-library-modal .prod-form-actions { align-items: stretch; flex-direction: column; }
  .prod-library-modal .prod-form-actions > .prod-btn-ghost { width: 100%; }
}

/* AI-MARK[QAI-UI:lyly-production-smart-preview] 2026-08-04 14:19 (GMT+7) — preview hai trạng thái ảnh gốc/bản chỉnh sửa,
   hiển thị rõ quyết định bố cục của Lyly và giảm cảm giác người dùng đang sửa trong một khung mù. | rel: lyly.js prLibrarySmartLayout */
.prod-library-preview-shell { display: flex; flex-direction: column; gap: 8px; }
.prod-library-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 31px; }
.prod-library-preview-label { display: inline-flex; align-items: center; gap: 6px; color: #0f172a; font-size: .72rem; font-weight: 900; }
.prod-library-preview-label svg { color: #f97316; }
.prod-library-preview-modes { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; }
.prod-library-preview-mode { min-height: 28px; padding: 4px 9px; border: 0; border-radius: 999px; background: transparent; color: #64748b; font-size: .62rem; font-weight: 800; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.prod-library-preview-mode:hover { color: #c2410c; }
.prod-library-preview-mode.is-active { background: #fff; color: #c2410c; box-shadow: 0 2px 8px rgba(15,23,42,.09); }
.prod-library-preview.is-original-preview .prod-library-layout-badge { opacity: .55; }
.prod-library-preview.is-original-preview .prod-library-preserve-badge { background: rgba(15,23,42,.82); }
.prod-library-preview-insight { display: flex; align-items: flex-start; gap: 6px; min-height: 30px; padding: 7px 9px; border: 1px solid #dbeafe; border-radius: 11px; background: linear-gradient(135deg, #f0f9ff, #f8fbff); color: #0369a1; font-size: .64rem; font-weight: 700; line-height: 1.4; }
.prod-library-preview-insight svg { flex: 0 0 auto; margin-top: 1px; color: #0ea5e9; }
.prod-library-overlay--airy { padding-top: 10px; padding-bottom: 11px; }
.prod-library-overlay--airy .prod-library-overlay-headline { letter-spacing: -.015em; }
.prod-library-overlay--compact { gap: 2px; padding: 9px 12px 10px 16px; }
.prod-library-overlay--compact .prod-library-overlay-headline { font-size: clamp(.78rem, 1.85vw, 1.42rem); line-height: 1.12; }
.prod-library-overlay--compact .prod-library-overlay-support { font-size: clamp(.58rem, 1.05vw, .78rem); }
.prod-library-smart-rule { display: flex; align-items: flex-start; gap: 6px; margin-top: -3px; padding: 8px 9px; border: 1px solid #e0e7ff; border-radius: 11px; background: #f7f8ff; color: #52607a; font-size: .63rem; font-weight: 600; line-height: 1.4; }
.prod-library-smart-rule svg { flex: 0 0 auto; margin-top: 1px; color: #7c3aed; }
.prod-library-smart-rule b { color: #4338ca; font-weight: 850; }
@media (max-width: 620px) {
  .prod-library-preview-toolbar { align-items: flex-start; flex-direction: column; }
  .prod-library-preview-modes { align-self: stretch; }
  .prod-library-preview-mode { flex: 1; }
  .prod-library-smart-rule { font-size: .61rem; }
}