:root {
  /* Quy chuẩn cỡ chữ dùng chung (một thang 5 bậc, không dùng cỡ lẻ).
     --fs-title  tiêu đề trang / tiêu đề khối
     --fs-lead   tiêu đề mục nhỏ, thân bài viết
     --fs-body   chữ nội dung, ô nhập, nút
     --fs-meta   nhãn giá trị, chú thích, ghi chú
     --fs-label  nhãn viết hoa, eyebrow, badge */
  --fs-title: 18px;
  --fs-lead: 15px;
  --fs-body: 14px;
  --fs-meta: 13px;
  --fs-label: 11px;
  --ink: #12211d;
  --muted: #6b7772;
  --paper: #f4f2ec;
  --panel: #fffdf8;
  --forest: #173f35;
  --mint: #bde7d5;
  --line: #d9ddd7;
  --border: #cbd1cc;
  --input-bg: #ffffff;
  --table-header-bg: #faf9f6;
  --table-row-hover: #f8faf9;
  --table-border: #edece8;
  --card-shadow: 0 4px 20px rgba(26,53,45,.03);
  --theme-active-bg: #f0fdf4;
  --dropdown-active-bg: #eef8f4;
  --sub-panel: #f8fafc;
  --sub-border: #e2e8f0;
  --tag-bg: #e5e7eb;
  --tag-color: #374151;
  --hero-bg: linear-gradient(115deg, #183f35, #2d6655);
  --hero-shadow: 0 18px 50px rgba(19,55,46,.16);
  --hero-text: #eff8f4;
  --hero-subtext: #c4d8d1;
  --hero-badge-bg: rgba(255,255,255,.07);
  --hero-badge-border: rgba(255,255,255,.16);
  --sidebar-bg: #102e27;
  --sidebar-color: #d8e3df;
  --sidebar-nav-muted: #68857b;
  --sidebar-nav-item: #afc2bb;
  --sidebar-nav-active-bg: rgba(189,231,213,.12);
  --sidebar-border: rgba(255,255,255,.09);
  --sidebar-footer-text: #91a69f;
  --btn-outline-bg: #ffffff;
  --btn-outline-hover: #f3f4f1;
  --login-shell-bg: #f1f4f1;
  --login-shadow: 0 18px 55px rgba(26, 53, 45, .1);
  --health-banner-bg: #eef8f4;
  --health-banner-border: #c9e6db;
  --health-banner-text: #175240;
  --health-banner-meta: #436e60;
  --btn-primary-bg: #173f35;
  --btn-primary-fg: #ffffff;
  --btn-success-bg: #059669;
  --btn-danger-disabled-bg: #f87171;
  --text-danger: #991b1b;
  --text-retire: #9b4236;
  --text-warn: #92400e;
  --eyebrow: #52766a;
  --mint-fg: #173f35;
  --forest-ink: #173f35;
  --ok-fg: #059669;
  --isl-danger-bg: #fee2e2;
  --isl-danger-fg: #991b1b;
  --isl-danger-line: #fca5a5;
  --isl-ok-bg: #d1fae5;
  --isl-ok-line: #a7f3d0;
  --isl-mint-bg: #eef8f4;
  --isl-mint-bg2: #e2ece8;
  --isl-mint-line: #cce3d8;
  --isl-warn-bg: #fef3c7;
  --isl-warn-fg: #92400e;
  --isl-warn-soft: #fff7ed;
  --isl-ok-soft: #f0fdf4;
  --isl-indigo-bg: #eef2ff;
  --isl-indigo-bg2: #e0e7ff;
  --isl-indigo-fg: #3730a3;
  --isl-link-bg: #eff6ff;
  --isl-link-fg: #1d4ed8;
  --isl-neutral-bg: #f3f4f6;
  --isl-neutral-fg: #374151;
  --isl-pink-bg: #fce7f3;
  --isl-pink-fg: #9d174d;
  --isl-rose-bg: #fff1f2;
  --isl-rose-line: #fda4af;
  --isl-rose-fg: #881337;
  --rose-accent: #e11d48;
  --rose-ink: #9f1239;
  --ink-strong: #1e293b;
  --ink-strong2: #0f172a;
  --ink-strong3: #334155;
  --brand-ink: #314c43;
  --danger-ink: #b91c1c;
  --code-bg: #f8fafc;
  --code-line: #e2e8f0;
  --panel-soft: #faf9f6;
  --panel-soft2: #fafaf9;
  --box-white: #ffffff;
  --box-white-line: #e2e5e1;
  --line-strong: #cbd5e1;
  --toast-ok-bg: #16a34a;
  --toast-err-bg: #dc2626;
  --ok-ink: #065f46;
  --warn-ink: #b45309;
  --focus-blue: #2563eb;
  --primary-accent: #173f35;
  --border-color: #cbd1cc;
  --danger: #991b1b;
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* Dark mode explicit & system dark */
[data-theme="dark"],
html.dark-theme,
html.dark-mode {
  --ink: #f1f5f9;
  --muted: #a5b4c8;
  --paper: #090d16;
  --panel: #131c2e;
  --forest: #10b981;
  --mint: #6ee7b7;
  --line: #3b4d70;
  --border: #5b74a3;
  --input-bg: #0d1524;
  --table-header-bg: #0f172a;
  --table-row-hover: #1b263b;
  --table-border: #1e2c42;
  --card-shadow: 0 4px 20px rgba(0,0,0,.35);
  --theme-active-bg: rgba(16, 185, 129, 0.12);
  --dropdown-active-bg: rgba(16, 185, 129, 0.15);
  --sub-panel: #0d1524;
  --sub-border: #3b4d70;
  --tag-bg: #1e293b;
  --tag-color: #cbd5e1;
  --hero-bg: linear-gradient(115deg, #0d2820, #143e32);
  --hero-shadow: 0 18px 50px rgba(0,0,0,.45);
  --hero-text: #ecfdf5;
  --hero-subtext: #a7f3d0;
  --hero-badge-bg: rgba(255,255,255,.05);
  --hero-badge-border: rgba(255,255,255,.12);
  --sidebar-bg: #0a1120;
  --sidebar-color: #cbd5e1;
  --sidebar-nav-muted: #8fa3b8;
  --sidebar-nav-item: #94a3b8;
  --sidebar-nav-active-bg: rgba(16,185,129,.15);
  --sidebar-border: rgba(255,255,255,.07);
  --sidebar-footer-text: #8fa3b8;
  --btn-outline-bg: #131c2e;
  --btn-outline-hover: #1e2c42;
  --login-shell-bg: #070b12;
  --login-shadow: 0 18px 55px rgba(0, 0, 0, .6);
  --health-banner-bg: #064e3b;
  --health-banner-border: #047857;
  --health-banner-text: #a7f3d0;
  --health-banner-meta: #6ee7b7;
  --btn-primary-bg: #34d399;
  --btn-primary-fg: #052018;
  --btn-success-bg: #047857;
  --btn-danger-disabled-bg: #b91c1c;
  --text-danger: #fca5a5;
  --text-retire: #fca5a5;
  --text-warn: #fbbf24;
  --eyebrow: #7fa99b;
  --mint-fg: #064e3b;
  --forest-ink: #6ee7b7;
  --ok-fg: #34d399;
  --isl-danger-bg: rgba(220, 38, 38, .16);
  --isl-danger-fg: #fca5a5;
  --isl-danger-line: rgba(252, 165, 165, .4);
  --isl-ok-bg: rgba(16, 185, 129, .15);
  --isl-ok-line: rgba(110, 231, 183, .4);
  --isl-mint-bg: rgba(16, 185, 129, .12);
  --isl-mint-bg2: rgba(16, 185, 129, .12);
  --isl-mint-line: rgba(110, 231, 183, .35);
  --isl-warn-bg: rgba(217, 119, 6, .16);
  --isl-warn-fg: #fbbf24;
  --isl-warn-soft: rgba(217, 119, 6, .08);
  --isl-ok-soft: rgba(16, 185, 129, .08);
  --isl-indigo-bg: rgba(99, 102, 241, .18);
  --isl-indigo-bg2: rgba(99, 102, 241, .18);
  --isl-indigo-fg: #a5b4fc;
  --isl-link-bg: rgba(59, 130, 246, .16);
  --isl-link-fg: #93c5fd;
  --isl-neutral-bg: #1e293b;
  --isl-neutral-fg: #cbd5e1;
  --isl-pink-bg: rgba(236, 72, 153, .15);
  --isl-pink-fg: #f9a8d4;
  --isl-rose-bg: rgba(225, 29, 72, .13);
  --isl-rose-line: rgba(251, 113, 133, .4);
  --isl-rose-fg: #fda4af;
  --rose-accent: #fb7185;
  --rose-ink: #fda4af;
  --ink-strong: #e2e8f0;
  --ink-strong2: #f1f5f9;
  --ink-strong3: #cbd5e1;
  --brand-ink: #a7f3d0;
  --danger-ink: #fca5a5;
  --code-bg: #0d1524;
  --code-line: #3b4d70;
  --panel-soft: #0d1524;
  --panel-soft2: #0f172a;
  --box-white: #131c2e;
  --box-white-line: #3b4d70;
  --line-strong: #3b4d70;
  --toast-ok-bg: #047857;
  --toast-err-bg: #b91c1c;
  --ok-ink: #6ee7b7;
  --warn-ink: #fbbf24;
  --focus-blue: #60a5fa;
  --primary-accent: #10b981;
  --border-color: #546d99;
  --danger: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --ink: #f1f5f9;
    --muted: #a5b4c8;
    --paper: #090d16;
    --panel: #131c2e;
    --forest: #10b981;
    --mint: #6ee7b7;
    --line: #3b4d70;
    --border: #5b74a3;
    --input-bg: #0d1524;
    --table-header-bg: #0f172a;
    --table-row-hover: #1b263b;
    --table-border: #1e2c42;
    --card-shadow: 0 4px 20px rgba(0,0,0,.35);
    --theme-active-bg: rgba(16, 185, 129, 0.12);
    --dropdown-active-bg: rgba(16, 185, 129, 0.15);
    --sub-panel: #0d1524;
    --sub-border: #3b4d70;
    --tag-bg: #1e293b;
    --tag-color: #cbd5e1;
    --hero-bg: linear-gradient(115deg, #0d2820, #143e32);
    --hero-shadow: 0 18px 50px rgba(0,0,0,.45);
    --hero-text: #ecfdf5;
    --hero-subtext: #a7f3d0;
    --hero-badge-bg: rgba(255,255,255,.05);
    --hero-badge-border: rgba(255,255,255,.12);
    --sidebar-bg: #0a1120;
    --sidebar-color: #cbd5e1;
    --sidebar-nav-muted: #8fa3b8;
    --sidebar-nav-item: #94a3b8;
    --sidebar-nav-active-bg: rgba(16,185,129,.15);
    --sidebar-border: rgba(255,255,255,.07);
    --sidebar-footer-text: #8fa3b8;
    --btn-outline-bg: #131c2e;
    --btn-outline-hover: #1e2c42;
    --login-shell-bg: #070b12;
    --login-shadow: 0 18px 55px rgba(0, 0, 0, .6);
    --health-banner-bg: #064e3b;
    --health-banner-border: #047857;
    --health-banner-text: #a7f3d0;
    --health-banner-meta: #6ee7b7;
    --btn-primary-bg: #34d399;
    --btn-primary-fg: #052018;
    --btn-success-bg: #047857;
    --btn-danger-disabled-bg: #b91c1c;
    --text-danger: #fca5a5;
    --text-retire: #fca5a5;
    --text-warn: #fbbf24;
    --eyebrow: #7fa99b;
    --mint-fg: #064e3b;
  --forest-ink: #6ee7b7;
    --ok-fg: #34d399;
    --isl-danger-bg: rgba(220, 38, 38, .16);
    --isl-danger-fg: #fca5a5;
    --isl-danger-line: rgba(252, 165, 165, .4);
    --isl-ok-bg: rgba(16, 185, 129, .15);
    --isl-ok-line: rgba(110, 231, 183, .4);
    --isl-mint-bg: rgba(16, 185, 129, .12);
    --isl-mint-bg2: rgba(16, 185, 129, .12);
    --isl-mint-line: rgba(110, 231, 183, .35);
    --isl-warn-bg: rgba(217, 119, 6, .16);
    --isl-warn-fg: #fbbf24;
    --isl-warn-soft: rgba(217, 119, 6, .08);
    --isl-ok-soft: rgba(16, 185, 129, .08);
    --isl-indigo-bg: rgba(99, 102, 241, .18);
    --isl-indigo-bg2: rgba(99, 102, 241, .18);
    --isl-indigo-fg: #a5b4fc;
    --isl-link-bg: rgba(59, 130, 246, .16);
    --isl-link-fg: #93c5fd;
    --isl-neutral-bg: #1e293b;
    --isl-neutral-fg: #cbd5e1;
    --isl-pink-bg: rgba(236, 72, 153, .15);
    --isl-pink-fg: #f9a8d4;
    --isl-rose-bg: rgba(225, 29, 72, .13);
    --isl-rose-line: rgba(251, 113, 133, .4);
    --isl-rose-fg: #fda4af;
    --rose-accent: #fb7185;
    --rose-ink: #fda4af;
    --ink-strong: #e2e8f0;
    --ink-strong2: #f1f5f9;
    --ink-strong3: #cbd5e1;
    --brand-ink: #a7f3d0;
    --danger-ink: #fca5a5;
    --code-bg: #0d1524;
    --code-line: #3b4d70;
    --panel-soft: #0d1524;
    --panel-soft2: #0f172a;
    --box-white: #131c2e;
    --box-white-line: #3b4d70;
    --line-strong: #3b4d70;
    --toast-ok-bg: #047857;
    --toast-err-bg: #b91c1c;
    --ok-ink: #6ee7b7;
    --warn-ink: #fbbf24;
    --focus-blue: #60a5fa;
    --primary-accent: #10b981;
    --border-color: #546d99;
    --danger: #fca5a5;
  }
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
button, input, select, textarea { font: inherit; }
.eyebrow { margin: 0 0 12px; color: var(--eyebrow); font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em; }
.muted { color: var(--muted); }
/* Template dùng .text-muted ở 32 chỗ (detail.html 21 chỗ: ghi chú phụ, "Chưa có góp ý nào",
   trạng thái AI viết lại…) nhưng app.css chưa từng định nghĩa lớp này, nên tới nay các dòng
   đó vẫn hiện màu chữ thường và lẫn với nội dung chính. */
.text-muted { color: var(--muted); }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--login-shell-bg); }
.login-panel { width: min(440px, 100%); }
.login-card { width: 100%; padding: 42px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--login-shadow); color: var(--ink); }
.login-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 28px; border-radius: 11px; color: var(--btn-primary-fg); background: var(--btn-primary-bg); font-family: 'Mulish', sans-serif; font-size: 24px; font-weight: 900; }
.login-card h1 { margin: 0 0 24px; font-family: 'Mulish', sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.login-card form { display: grid; gap: 10px; margin-top: 36px; }
.login-card label { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.login-card input { width: 100%; padding: 14px 15px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); background: var(--input-bg); outline: none; }
.login-card input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.login-card button { margin-top: 14px; padding: 15px 18px; border: 0; border-radius: 10px; color: var(--btn-primary-fg); background: var(--btn-primary-bg); font-weight: 800; cursor: pointer; }
.form-error { margin-top: 24px; padding: 12px 14px; border: 1px solid #e7bbb3; border-radius: 9px; color: #8c2f22; background: #fff1ef; font-size: 14px; }

.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px; color: var(--sidebar-color); background: var(--sidebar-bg); }
.portal-logo { display: flex; gap: 12px; align-items: center; padding: 0 10px 35px; color: white; text-decoration: none; font-family: 'Mulish', sans-serif; font-size: 21px; font-weight: 800; }
.portal-logo span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--btn-primary-fg); background: var(--btn-primary-bg); font-family: 'Mulish', sans-serif; font-size: 20px; font-weight: 900; }
.nav-label { margin: 28px 12px 8px; color: var(--sidebar-nav-muted); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.nav-item { display: flex; gap: 12px; align-items: center; margin: 3px 0; padding: 11px 12px; border-radius: 8px; color: var(--sidebar-nav-item); text-decoration: none; font-size: 13px; font-weight: 600; }
.nav-item span { color: var(--sidebar-nav-muted); font-family: ui-monospace, monospace; font-size: 10px; }
.nav-item.active { color: white; background: var(--sidebar-nav-active-bg); }
.nav-item.disabled { cursor: default; opacity: .58; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #63d5a6; box-shadow: 0 0 0 4px rgba(99,213,166,.13); }
.sidebar-footer { display: flex; gap: 10px; align-items: center; margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--sidebar-border); color: var(--sidebar-footer-text); font-size: 11px; }
.portal-main { min-width: 0; padding: 0 38px 56px; font-size: var(--fs-body); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 24px; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font-family: 'Mulish', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.user-area, .user-chip { display: flex; gap: 14px; align-items: center; }
.btn-compact { padding: 8px 12px; font-size: var(--fs-meta); }
.page-toolbar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.page-messages { margin-top: 24px; }
.user-chip > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: #3e7465; font-weight: 800; }
.user-chip strong, .user-chip small { display: block; font-size: var(--fs-meta); }
.user-chip strong { color: var(--ink); }
.user-chip small { margin-top: 2px; color: var(--muted); }
.logout-button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: transparent; cursor: pointer; font-size: var(--fs-meta); font-weight: 700; }
.hero-strip { display: flex; justify-content: space-between; gap: 40px; align-items: center; margin: 34px 0 42px; padding: 38px 42px; border-radius: 18px; color: var(--hero-text); background: var(--hero-bg); box-shadow: var(--hero-shadow); }
.hero-strip h2 { margin: 0 0 10px; font-family: 'Mulish', sans-serif; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
.hero-strip p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--hero-subtext); line-height: 1.6; }
.hero-strip .eyebrow { color: var(--mint); }
.foundation-badge { display: flex; gap: 14px; align-items: center; min-width: 170px; padding: 18px; border: 1px solid var(--hero-badge-border); border-radius: 14px; background: var(--hero-badge-bg); }
.foundation-badge strong { font-family: 'Mulish', sans-serif; font-size: 34px; font-weight: 900; }
.foundation-badge span { color: var(--hero-subtext); font-size: 11px; line-height: 1.35; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-family: 'Mulish', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.section-heading > span { color: var(--muted); font-size: var(--fs-meta); }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.module-card { position: relative; min-height: 210px; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--card-shadow); color: var(--ink); }
.module-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent, #4c8977); }
.module-top { display: flex; justify-content: space-between; align-items: center; }
.module-code { color: var(--accent, #4c8977); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 800; }
.coming-soon { padding: 5px 8px; border-radius: 999px; color: var(--tag-color); background: var(--tag-bg); font-size: 10px; font-weight: 700; }
.module-card h3 { margin: 34px 0 10px; font-family: 'Mulish', sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); }
.module-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.module-arrow { position: absolute; right: 20px; bottom: 18px; color: var(--accent, #4c8977); font-size: 24px; }
.accent-blue { --accent: #4b75aa; }.accent-violet { --accent: #8062a7; }.accent-amber { --accent: #bb7a2d; }.accent-rose { --accent: #b66569; }.accent-slate { --accent: #667580; }

/* Marketing Daily & Sales styles */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0; }
.kpi-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--card-shadow); color: var(--ink); }
.kpi-card .kpi-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.kpi-card .kpi-value { font-family: 'Mulish', sans-serif; font-size: 24px; font-weight: 800; color: var(--forest); margin-top: 6px; }
.kpi-card .kpi-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.health-banner { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border: 1px solid var(--health-banner-border); border-radius: 12px; background: var(--health-banner-bg); margin: 20px 0; }
.health-status { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--health-banner-text); font-size: 13px; }
.health-meta { font-size: var(--fs-meta); color: var(--health-banner-meta); }

.status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-label); font-weight: 700; }
.status-badge.status-previewed { background: #fef3c7; color: #92400e; }
.status-badge.status-approved { background: #d1fae5; color: #065f46; }
.status-badge.status-draft { background: var(--tag-bg); color: var(--tag-color); }

/* Nhãn "AI" của bài có media do AI tạo (OC-F, 2.64.0): chip nhỏ đứng cạnh mã
   bài (thư viện) hoặc trong cụm badge (trang chi tiết). Bảng màu tím tách khỏi
   bảng màu .status-badge để không bị đọc nhầm thành một trạng thái quy trình. */
.content-ai-chip {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; background: #ede9fe; color: #5b21b6;
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; vertical-align: middle;
}

/* Chọn NHIỀU "Concept" (OC-G 15/10/2026; gọn lại ở UI-1): chip nhỏ dùng chung
   cho form tạo brief, form sửa brief và form sửa nội dung. Mỗi từ đầu của nhãn
   là MỘT DÒNG có nhãn nhỏ xám ở đầu dòng; nhóm chỉ để NHÌN, tính từ nhãn lúc
   render nên không lưu ở đâu và không đổi thứ tự danh mục.
   Ô tích thật vẫn nằm trong DOM nhưng ẩn bằng kỹ thuật visually-hidden (KHÔNG
   display:none) để bàn phím/trình đọc màn hình dùng được; trạng thái chọn vẽ
   bằng nền màu thương hiệu nhạt + viền đậm + dấu ✓, mục chính thêm nhãn "chính". */
.concept-tags { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.concept-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.concept-group__label { color: var(--muted); font-size: var(--fs-label); font-weight: 800; letter-spacing: .04em; }
/* Đặc tả phải thắng `.field-wrap label` (đặt 13px/800 cho mọi nhãn trong ô nhập):
   chip concept cần đúng 14px của thang cỡ chữ chung. */
.concept-tags .concept-tag-option {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--input-bg); color: var(--ink);
  font-size: var(--fs-body); font-weight: 600; line-height: 1.25; cursor: pointer;
}
.concept-tags .concept-tag-option:hover { border-color: var(--forest); background: var(--dropdown-active-bg); }
.concept-tags .concept-tag-option:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 2px; }
.concept-tags .concept-tag-option input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
.concept-tag-option__check { display: none; color: var(--forest); font-weight: 800; }
.concept-tags .concept-tag-option--checked { border-color: var(--forest); background: var(--dropdown-active-bg); color: var(--ink); }
.concept-tag-option--checked .concept-tag-option__check { display: inline-flex; }
.concept-tag-option__label { line-height: 1.25; overflow-wrap: anywhere; }
.concept-tag-option__main {
  display: none; align-items: center; padding: 1px 7px; border-radius: 999px;
  background: var(--forest); color: var(--btn-primary-fg); font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
}
.concept-tag-option--main .concept-tag-option__main { display: inline-flex; }
/* Hàng đầu của ô Concept (UI-1): nhãn trường bên trái, chip "Sản xuất bằng AI"
   bên phải. Trước đây ô AI là một hàng riêng chiếm cả dòng nên form thô và cao. */
.field-wrap__head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.field-wrap .ai-toggle {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--input-bg);
  color: var(--ink); font-size: var(--fs-meta); font-weight: 700; cursor: pointer;
}
.field-wrap .ai-toggle:hover, .field-wrap .ai-toggle:has(input:checked) { border-color: var(--forest); background: var(--dropdown-active-bg); }
.field-wrap .ai-toggle:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 2px; }
.field-wrap .ai-toggle input[type="checkbox"] { width: 14px; height: 14px; margin: 0; flex: 0 0 auto; accent-color: var(--forest); cursor: pointer; }
.ai-toggle__text { white-space: nowrap; }
.ai-toggle__hint { color: var(--muted); font-size: var(--fs-label); font-weight: 600; }
/* Chip concept ở trang chi tiết / danh sách (OC-G). Mục chính đậm hơn. */
.content-concept-chip {
  display: inline-flex; align-items: center; margin: 0 6px 0 0; padding: 2px 9px;
  border-radius: 999px; background: var(--tag-bg); color: var(--tag-color);
  font-size: var(--fs-label); font-weight: 700;
}
.content-concept-chip--main { background: #dcfce7; color: #166534; }

.content-card { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin-bottom: 24px; box-shadow: var(--card-shadow); color: var(--ink); }
.content-card h3 { margin: 0 0 16px; font-family: 'Mulish', sans-serif; font-size: 18px; font-weight: 800; color: var(--ink); }

/* Brief form (tạo content · mã ads KOC · brief trong trang chi tiết).
   Không dùng `overflow: hidden` trên khung: bo góc của dải tiêu đề do chính
   `.content-brief__intro` tự lo, nhờ vậy khung cha vẫn là containing block bình
   thường cho các phần tử con. */
.content-brief { max-width: 1040px; margin-top: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--card-shadow); }
.content-brief__intro { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 30px 32px; color: white; background: linear-gradient(120deg, #194f42, #2f7966); border-radius: 17px 17px 0 0; }
.content-brief__intro .eyebrow { margin: 0 0 7px; color: #bdebdc; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.content-brief__intro h2 { margin: 0 0 9px; font-family: 'Mulish', sans-serif; font-size: 28px; letter-spacing: -.02em; }
.content-brief__intro p:not(.eyebrow) { max-width: 680px; margin: 0; color: #def7ee; line-height: 1.55; }
.content-brief__intro .status-badge { flex: 0 0 auto; background: rgba(255,255,255,.15); color: white; }
.content-brief__form { padding: 8px 32px 0; }
.brief-section { padding: 26px 0; border-bottom: 1px solid var(--line); }
.brief-section--ai { border-bottom: 0; }
.brief-section__heading { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.brief-section__heading > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; color: var(--forest); background: var(--tag-bg); font: 800 11px ui-monospace, monospace; }
.brief-section__heading h3 { margin: 1px 0 4px; font-family: 'Mulish', sans-serif; font-size: var(--fs-title); color: var(--ink); }
.brief-section__heading p, .field-wrap small { display: block; margin: 0; color: var(--muted); font-size: var(--fs-meta); line-height: 1.5; }
.brief-grid { display: grid; gap: 18px; align-items: start; }.brief-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.brief-grid > .field-wrap { margin-top: 0; }
/* `align-content: start` + `align-items: start` ở trên là bản sửa UI-1 cho hàng
   "Bối cảnh": ô nhập của cột thấp bị hàng xóm cao (Concept) kéo giãn, vì grid
   mặc định chia đều chỗ trống cho các hàng auto nên select phình cao và nhãn bị
   đẩy lên, để lại khoảng trống thừa. Chỗ trống giờ dồn xuống đáy ô. */
.field-wrap { display: grid; gap: 7px; margin-top: 13px; align-content: start; }.field-wrap:first-child { margin-top: 0; }
.field-wrap label { color: var(--ink); font-size: 13px; font-weight: 800; }.field-wrap label em { color: #c23b45; font-style: normal; }
.field-wrap .form-control, .field-wrap textarea, .field-wrap input:not([type="checkbox"]):not([type="radio"]), .field-wrap select { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: var(--input-bg); font: inherit; }
.field-wrap textarea { min-height: 96px; resize: vertical; }.field-wrap input:focus, .field-wrap select:focus, .field-wrap textarea:focus { outline: 0; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.field-wrap :disabled { cursor: not-allowed; opacity: .62; }
.field-wrap--checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field-wrap--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.field-wrap--checkbox input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--forest); cursor: pointer; }
/* Dòng trợ giúp của ô tick luôn xuống hàng riêng, thẳng với nhãn: để chung hàng
   thì câu dài bị bóp vào một dòng và rất khó đọc ở màn hẹp. */
.field-wrap--checkbox small { flex: 1 0 100%; margin: 2px 0 0 25px; }
/* Ads opt-out shares one compact layout across create and edit briefs. */
.content-ads-choice { margin-top: 16px; min-width: 0; }
.content-ads-choice--checkbox label { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 28px; cursor: pointer; }
.content-ads-choice--checkbox input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--forest); cursor: pointer; }
.content-ads-choice--checkbox small { margin-left: 28px; }
.content-brief__notice { margin-top: 10px; padding: 13px 15px; border: 1px solid #e6d4a2; border-radius: 10px; color: #73520a; background: #fff9e9; font-size: 13px; line-height: 1.45; }
.drive-access-note { grid-column: 1 / -1; display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border: 1px solid #b9e3d5; border-radius: 9px; color: #245f51; background: #f0faf6; font-size: var(--fs-meta); line-height: 1.55; }
.drive-access-note__icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; border-radius: 50%; color: #fff; background: #278269; font-weight: 800; }
.drive-access-note strong { color: #16483d; }.drive-access-note code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 1px 4px; border-radius: 4px; color: #174f42; background: #d9f1e8; font-size: var(--fs-label); }
.content-brief__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }.content-brief__actions .btn:disabled { cursor: not-allowed; opacity: .55; }
/* Dải hành động là chân của khung brief: tràn hết bề ngang thẻ, có vạch ngăn và
   tự bo góc dưới, nên mắt tách được phần đọc với phần bấm lưu. */
.content-brief__form .content-brief__actions { margin: 22px -32px 0; padding: 16px 32px; border-top: 1px solid var(--line); border-radius: 0 0 17px 17px; background: var(--panel); }
.content-brief__actions-back { margin-left: auto; }
/* Cần đủ đặc tả để thắng `.field-wrap small` (đặt màu --muted): để trần một
   class thì dòng nhắc bắt buộc bị nuốt màu và hiện ra xám như chữ trợ giúp. */
.field-wrap small.field-wrap__warn { color: var(--text-warn); font-weight: 800; }
.brief-headbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin: 18px 0 0; }
.brief-headbar__back { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; color: var(--forest); font-size: 13px; font-weight: 700; text-decoration: none; }
.brief-headbar__back:hover { border-color: var(--line); background: var(--panel); }
.brief-headbar__legend { margin: 0; color: var(--muted); font-size: var(--fs-meta); }
.brief-headbar__legend em { color: #c23b45; font-style: normal; font-weight: 800; }
@media (max-width: 720px) { .content-brief__intro { display: block; padding: 24px; }.content-brief__intro .status-badge { display: inline-flex; margin-top: 15px; }.content-brief__form { padding: 8px 22px 0; }.content-brief__form .content-brief__actions { margin: 22px -22px 0; padding: 16px 22px; }.content-brief__actions-back { margin-left: 0; }.brief-grid--two { grid-template-columns: 1fr; } }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.data-table th { padding: 12px 14px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--table-header-bg); }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--table-border); color: var(--ink); }
.data-table tr:hover td { background: var(--table-row-hover); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .tag { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--tag-bg); color: var(--tag-color); }

/* Viền trong suốt để nút đặc (btn-primary/success/danger) cao ĐÚNG BẰNG nút viền
   (btn-outline) khi đứng cùng hàng — trước đây lệch 2px vì nút viền có thêm 1px viền. */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { opacity: 0.9; }
.btn-success { background: var(--btn-success-bg); color: white; }
.btn-success:hover { background: #047857; }
.btn-danger { background: #dc2626; color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { background: var(--btn-danger-disabled-bg); cursor: not-allowed; opacity: 0.6; }
.btn-outline { border: 1px solid var(--line); background: var(--btn-outline-bg); color: var(--ink); }
.btn-outline:hover { background: var(--btn-outline-hover); }

.form-inline { display: flex; gap: 12px; align-items: center; }
.form-control { box-sizing: border-box; min-height: 40px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; background: var(--input-bg); color: var(--ink); }
.content-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.form-control:focus { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(16,185,129,.18); }

/* AI Writing Skill */
.skill-hero { margin-top: 24px; padding: 30px 32px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(16, 185, 129, .13), var(--panel) 52%); display: flex; justify-content: space-between; gap: 28px; align-items: center; }
.skill-hero h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); line-height: 1.14; letter-spacing: -.035em; }
.skill-hero > div:first-child > p:last-child { max-width: 700px; margin: 0; color: var(--muted); line-height: 1.65; }
.skill-status { flex: 0 0 270px; display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.skill-status-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.12); }
.skill-status.is-ready .skill-status-dot { background: #059669; box-shadow: 0 0 0 4px rgba(5,150,105,.12); }
.skill-status strong, .skill-status span { display: block; }
.skill-status strong { font-size: 13px; margin-bottom: 4px; }.skill-status span { color: var(--muted); font-size: var(--fs-meta); line-height: 1.45; }
.skill-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 18px; max-width: 1200px; }
.skill-editor-card, .skill-contract-card, .skill-flow-card { margin: 0; }
.skill-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.skill-section-heading h3 { margin: 0; }.skill-section-heading .eyebrow { margin-bottom: 7px; }
.skill-save-note, .field-help, .writing-skill-actions span { color: var(--muted); font-size: var(--fs-meta); line-height: 1.5; }
.writing-skill-form { display: grid; gap: 18px; }.writing-skill-field { display: grid; gap: 8px; }.writing-skill-field label { font-size: 13px; font-weight: 800; }
.writing-skill-form .form-control { width: 100%; }.writing-skill-editor { min-height: 460px; resize: vertical; padding: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1.6; }
.writing-skill-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.writing-skill-label-row span { font-size: var(--fs-meta); color: var(--muted); }
.field-help { margin: 0; }.writing-skill-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; padding-top: 4px; }
.skill-side-panel { display: grid; align-content: start; gap: 18px; }.skill-contract-card h3 { margin-bottom: 18px; }
.skill-contract-list { margin: 0; display: grid; gap: 13px; }.skill-contract-list div { display: grid; gap: 5px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.skill-contract-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.skill-contract-list dt { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.skill-contract-list dd { margin: 0; font-size: var(--fs-meta); overflow-wrap: anywhere; }.skill-contract-list code { font-size: 11px; }
.skill-flow-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 15px; }.skill-flow-list li { display: flex; gap: 11px; }.skill-flow-list li > span { flex: 0 0 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--tag-bg); color: var(--tag-color); font-size: 11px; font-weight: 800; }.skill-flow-list strong, .skill-flow-list small { display: block; }.skill-flow-list strong { font-size: 13px; margin: 1px 0 3px; }.skill-flow-list small { color: var(--muted); font-size: var(--fs-meta); line-height: 1.45; }.writing-skill-readonly { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--ink); }.empty-state { color: var(--muted); }
@media (max-width: 980px) { .skill-layout { grid-template-columns: 1fr; }.skill-side-panel { grid-template-columns: 1fr 1fr; }.skill-hero { align-items: flex-start; flex-direction: column; }.skill-status { flex-basis: auto; width: 100%; } }
@media (max-width: 640px) { .skill-hero { padding: 23px 20px; }.skill-editor-card, .skill-contract-card, .skill-flow-card { padding: 20px; }.skill-side-panel { grid-template-columns: 1fr; }.skill-section-heading { display: block; }.skill-save-note { display: block; margin-top: 8px; }.writing-skill-editor { min-height: 330px; } }

.messages-list { margin-bottom: 20px; }
.alert { padding: 14px 18px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; }
.errorlist li { color: var(--text-danger); font-size: var(--fs-meta); font-weight: 600; }

@media (max-width: 1020px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .portal-shell { grid-template-columns: 1fr; } .sidebar { position: static; width: 100%; height: auto; } .sidebar nav, .sidebar-footer { display: none; } .portal-logo { padding-bottom: 0; } .portal-main { padding: 0 18px 38px; } .user-chip { display: none; } .hero-strip { padding: 28px; } .foundation-badge { display: none; } .module-grid { grid-template-columns: 1fr; } .login-panel { padding: 28px; } .page-toolbar { justify-content: flex-start; } }

/* Thanh đầu trang chỉ vừa trong một hàng từ ~880px trở lên: nhóm chọn brand + Đổi mật khẩu +
   Đăng xuất cần ~823px, cộng tiêu đề trang bên trái. Luật xếp dọc trước đây nằm trong khối
   720px nên khoảng 721–870px (iPad dọc 768px) vẫn tràn ngang — đo được tới +116px. */
@media (max-width: 880px) { .topbar { flex-direction: column; align-items: stretch; gap: 16px; } .topbar > div { min-width: 0; } .topbar h1 { overflow-wrap: anywhere; } .topbar .user-area { flex-wrap: wrap; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; } .topbar .user-area > * { max-width: 100%; } }

/* Tiêu đề khối trong thẻ (eyebrow + h3 + nút phụ) cũng là một hàng cứng: ở màn hẹp nó rộng
   hơn thẻ và đẩy cả trang. Cho xuống dòng từ 880px trở xuống, desktop không đổi. */
@media (max-width: 880px) { .section-heading { flex-wrap: wrap; gap: 10px; } .section-heading > div { min-width: 0; } }

/* Reviewed AI guidance: scoped components reuse the portal theme. */
.ai-guide-page {
  max-width:1200px;
  margin:0 auto
}
.ai-guide-back {
  display:inline-block;
  margin:18px 0;
  color:var(--muted);
  font-size:14px
}
.ai-guide-intro {
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel);
  margin-bottom:24px
}
.ai-guide-intro h2 {
  font-size:28px;
  letter-spacing:-.7px;
  margin:10px 0
}
.ai-guide-intro p {
  color:var(--muted);
  line-height:1.7
}
.ai-guide-eyebrow {
  font-size:11px;
  letter-spacing:1.5px;
  font-weight:800;
  color:var(--forest)
}
.ai-guide-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  list-style:none;
  padding:22px 0 0;
  margin:20px 0 0;
  border-top:1px solid var(--line)
}
.ai-guide-steps li {
  font-size:13px;
  font-weight:700;
  display:flex;
  gap:9px;
  align-items:center
}
.ai-guide-steps span {
  display:grid;
  place-items:center;
  flex:0 0 28px;
  height:28px;
  border-radius:50%;
  background:var(--dropdown-active-bg);
  color:var(--forest)
}
.ai-guide-columns {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:24px;
  align-items:start
}
.ai-guide-columns>div {
  min-width:0
}
.ai-guide-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  box-shadow:var(--card-shadow);
  margin-bottom:20px;
  min-width:0;
  overflow-wrap:anywhere
}
.ai-guide-card h2 {
  font-size:21px;
  margin:7px 0 12px;
  letter-spacing:-.4px
}
.ai-guide-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}
.ai-guide-badge {
  padding:7px 11px;
  border-radius:999px;
  background:var(--tag-bg);
  color:var(--tag-color);
  font-size:var(--fs-label);
  font-weight:800;
  white-space:nowrap
}
.ai-guide-badge.is-approved {
  background:var(--health-banner-bg);
  color:var(--health-banner-text);
  border:1px solid var(--health-banner-border)
}
.ai-guide-badge.is-off {
  color:var(--muted);
  background:var(--paper)
}
.ai-guide-meta,.ai-guide-help {
  color:var(--muted);
  font-size:var(--fs-meta);
  line-height:1.65;
  font-weight:400
}
.ai-guide-help {
  display:block;
  margin-top:7px
}
.ai-guide-source {
  margin:20px 0;
  padding:18px;
  border-left:3px solid var(--border);
  border-radius:0 10px 10px 0;
  background:var(--paper);
  font-size:14px;
  line-height:1.85
}
.ai-guide-form {
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:20px
}
.ai-guide-field {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  font-weight:800
}
.ai-guide-field textarea,.ai-guide-field select {
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--input-bg);
  color:var(--ink);
  font:inherit;
  font-size:14px;
  font-weight:400;
  padding:13px;
  line-height:1.8;
  min-height:48px
}
.ai-guide-field textarea {
  resize:vertical;
  min-height:110px
}
.ai-guide-field textarea[name=text] {
  min-height:200px
}
.ai-guide-field textarea:focus,.ai-guide-field select:focus {
  outline:2px solid var(--forest);
  outline-offset:2px
}
.ai-guide-notice {
  background:var(--dropdown-active-bg);
  border-radius:10px;
  padding:13px 15px;
  font-size:13px;
  line-height:1.75
}
.ai-guide-scope-help {
  font-size:var(--fs-meta);
  color:var(--muted);
  background:var(--paper);
  padding:12px 15px;
  border-radius:10px;
  margin-top:-9px
}
.ai-guide-scope-help p {
  margin:4px 0;
  line-height:1.6
}
.ai-guide-warning {
  padding:14px;
  border:1px solid var(--border);
  border-left:3px solid #c28b3c;
  border-radius:8px;
  font-size:13px;
  line-height:1.7
}
.ai-guide-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding-top:6px
}
.ai-guide-stop,.ai-guide-link {
  font:inherit;
  font-size:var(--fs-meta);
  cursor:pointer;
  background:none;
  border:0;
  color:var(--muted);
  padding:10px 4px;
  text-decoration:underline;
  text-underline-offset:3px
}
.ai-guide-link {
  color:var(--forest)
}
.ai-guide-details {
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:18px;
  font-size:13px;
  line-height:1.7
}
.ai-guide-details summary {
  cursor:pointer;
  font-weight:700;
  color:var(--muted);
  padding:5px 0
}
.ai-guide-details[open] summary {
  margin-bottom:16px;
  color:var(--ink)
}
.ai-guide-form .ai-guide-details {
  margin:0
}
.ai-guide-timeline {
  padding-left:21px
}
.ai-guide-timeline li {
  padding:6px 0 18px 8px
}
.ai-guide-empty {
  text-align:center;
  padding:42px 26px;
  color:var(--muted);
  border-style:dashed;
  line-height:1.8
}
.ai-guide-empty-icon {
  font-size:34px;
  color:var(--forest)
}
.ai-guide-inline {
  margin:18px 0
}
.ai-guide-inline .ai-guide-card {
  padding:20px
}
.ai-guide-howto {
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:30px
}
@media(max-width:1100px) {
  .ai-guide-inline {
  grid-template-columns:1fr
}
.ai-guide-steps {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

}
@media(max-width:850px) {
  .ai-guide-columns {
  grid-template-columns:1fr
}
.ai-guide-card,.ai-guide-intro {
  padding:20px
}
.ai-guide-intro h2 {
  font-size:24px
}
.ai-guide-actions .btn {
  width:100%;
  justify-content:center
}
.ai-guide-steps {
  gap:15px
}
.ai-guide-badge {
  white-space:normal
}

}

/* AI Learning dashboard: review guidance before applying it. */
.learning-page { display: grid; gap: 24px; }
.learning-hero { padding: 32px; border: 1px solid var(--line, #deded5); border-radius: 20px; background: var(--panel, #fffdf9); }
.learning-eyebrow { color: var(--forest, #20483e); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.learning-hero h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; line-height: 1.2; margin: 12px 0; max-width: 760px; }
.learning-hero p { max-width: 750px; color: var(--muted, #657169); line-height: 1.7; }
.learning-nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 22px; }
.learning-nav a:not(.btn) { color: var(--forest, #20483e); font-weight: 600; }
.learning-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; scroll-margin-top: 20px; }
.learning-steps article { padding: 22px; border: 1px solid var(--line, #deded5); border-radius: 16px; background: var(--panel, #fffdf9); }
.learning-steps span { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--forest, #20483e); }
.learning-steps h3 { font-size: 17px; margin: 12px 0 8px; }
.learning-steps p, .learning-explain p { font-size: 14px; line-height: 1.7; color: var(--muted, #657169); margin-bottom: 0; }
.learning-note { padding: 18px 22px; border-left: 3px solid var(--forest, #20483e); background: var(--panel, #fffdf9); border-radius: 0 12px 12px 0; font-size: 14px; line-height: 1.8; }
.learning-section { padding: 26px; margin: 0; min-width: 0; scroll-margin-top: 20px; }
.learning-section-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 24px; }
.learning-section-head h2 { font-size: 22px; margin: 8px 0; }
.learning-section-head p { color: var(--muted, #657169); font-size: 14px; margin: 0; line-height: 1.6; }
.learning-guides { display: grid; gap: 16px; }
.learning-guide { border: 1px solid var(--line, #deded5); border-radius: 14px; padding: 22px; }
.learning-guide-meta, .learning-guide-footer { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted, #657169); }
.learning-status { display: inline-block; border-radius: 8px; padding: 5px 9px; font-size: var(--fs-label); line-height: 1.4; font-weight: 650; background: var(--paper, #f2f1eb); color: var(--ink, #1c302a); }
.learning-status.is-approved { color: #175642; background: #e5f3ec; }
.learning-status.is-review { color: #7c4a13; background: #fff0d7; }
.learning-guide-text { line-height: 1.8; margin: 18px 0; white-space: pre-line; overflow-wrap: anywhere; }
.learning-empty { padding: 24px; background: var(--paper, #f2f1eb); border-radius: 12px; }
.learning-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 22px; }
.learning-filters label { flex: 1; min-width: 170px; font-size: var(--fs-meta); font-weight: 650; }
.learning-filters select { display: block; width: 100%; margin-top: 7px; min-height: 42px; }
.learning-table-scroll { overflow-x: auto; }
.learning-table { width: 100%; min-width: 730px; }
.learning-table th { font-size: 10px; white-space: nowrap; }
.learning-table td { vertical-align: top; font-size: 13px; line-height: 1.6; padding-top: 18px; padding-bottom: 18px; }
.learning-table td:first-child { min-width: 220px; width: 36%; }
.learning-table td:last-child { min-width: 160px; }
.learning-table a { color: var(--forest, #20483e); font-weight: 600; text-underline-offset: 3px; }
.learning-comment { color: var(--muted, #657169); margin: 8px 0 0; overflow-wrap: anywhere; }
.learning-retire { border: 0; padding: 0; background: none; color: var(--text-retire); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: var(--fs-meta); }
.learning-advanced { padding: 22px; margin-top: 20px; border: 1px solid var(--line, #deded5); border-radius: 12px; }
.learning-page > .learning-advanced { margin-top: 0; }
.learning-advanced summary { cursor: pointer; font-weight: 650; line-height: 1.6; }
.learning-advanced p { line-height: 1.7; }
.learning-bulk { display: grid; gap: 12px; margin: 20px 0; }
.learning-bulk label { font-size: 13px; }
.learning-explain { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
.learning-explain h3 { font-size: 16px; }
.learning-hash { display: block; margin-top: 12px; overflow-wrap: anywhere; }
.learning-advanced > details { margin-top: 20px; }
@media (max-width: 1150px) { .learning-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .learning-page { gap: 18px; }
  .learning-hero, .learning-section, .learning-guide { padding: 20px; }
  .learning-steps, .learning-explain { grid-template-columns: 1fr; }
  .learning-section-head { align-items: start; flex-direction: column; }
  .learning-filters label { flex-basis: 100%; }
  .learning-guide-footer { align-items: start; flex-direction: column; }
  .learning-nav .btn { width: 100%; text-align: center; }
}

/* Content detail page: thanh đầu trang, khối tóm tắt đọc được ngay, rồi mới tới
   bài viết và các phần phụ trợ. Mọi khối cùng bề ngang 1120px để mép phải của
   trang không nhảy qua lại giữa các mục. */
/* Cỡ chữ nền của các trang content: mọi phần tử không có rule riêng sẽ rơi về
   --fs-body, nên không còn chữ 16px (mặc định trình duyệt) lẫn giữa các khối. */

.content-detail-page > .detail-summary,
.content-detail-page > .content-detail-draft,
.content-detail-page > .content-detail-history,
.content-detail-page > .content-detail-disclosure,
.content-detail-page > .content-card {
  width: 100%;
  max-width: 1120px;
  margin: 20px 0;
  box-sizing: border-box;
  scroll-margin-top: 24px;
}

/* --- Thanh đầu trang: lối về ở lề trái, việc cần làm ở lề phải ---
   Nút "Tạo brief mới" đứng cùng hàng với "← Quay lại danh sách content" và cao
   đúng bằng nó (42px), thay cho khối .page-toolbar canh phải ở hàng riêng. */
.detail-headbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin: 18px 0 0; }
.content-detail-page .content-back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--forest); font-size: var(--fs-meta); font-weight: 700; text-decoration: none; }
.content-detail-page .content-back-link:hover { border-color: var(--border); background: var(--sub-panel); }
.detail-headbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.detail-headbar__form { display: inline-flex; align-items: center; }
.detail-headbar__actions .btn { min-height: 42px; padding: 0 18px; }

/* --- Tóm tắt: trạng thái và thông tin chính, không phải mở mục nào --- */
.detail-summary { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--card-shadow); }
/* Căn giữa theo chiều dọc: badge trạng thái và dãy chip điều hướng cao khác nhau,
   để flex-start thì mép dưới so le, hàng đầu khối Tóm tắt trông lệch. */
.detail-summary__top { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.detail-summary__badges, .detail-summary__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.detail-summary__nav { margin-left: auto; }
/* Nền chìm + viền đổi màu khi hover để dãy nhảy nhanh đọc ra là bấm được, thay
   vì một hàng chữ trôi nổi cạnh các nhãn trạng thái. */
.detail-summary__nav a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--sub-panel); color: var(--forest); text-decoration: none; font-size: var(--fs-meta); font-weight: 700; }
.detail-summary__nav a:hover { border-color: var(--border); background: var(--paper); }
/* Ba cột: sáu mục tóm tắt vừa đúng hai hàng, không còn ô trống lệch bên phải
   như kiểu auto-fit (bốn cột ⇒ hàng hai chỉ có hai ô). */
.detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--line); }
.detail-facts > div { min-width: 0; }
.detail-facts dt { margin: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.detail-facts dd { margin: 0; color: var(--ink); font-size: var(--fs-meta); line-height: 1.5; overflow-wrap: anywhere; }
.detail-facts__empty { color: var(--muted); font-style: italic; }

/* --- Bài viết --- */
.content-detail-draft, .content-detail-history { padding: 28px; }
.content-detail-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.content-detail-heading h2 { margin: 4px 0 0; font-size: var(--fs-title); }
/* Chỉ khối "Bản hiện tại" giữ tiêu đề lớn; các thẻ phụ (góp ý riêng, lịch sử
   chỉnh sửa) xuống tiêu đề nhỏ để trang chỉ còn một điểm nhấn. */
.content-detail-page .content-card > h2 { margin: 0 0 10px; font-size: var(--fs-title); font-weight: 800; }
.detail-review-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.detail-inline-note { margin: 8px 0 0; }
.content-detail-title { margin: 4px 0 0; font-size: var(--fs-title); font-weight: 800; line-height: 1.45; }
.content-detail-caption { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 760px; padding: 16px 0; line-height: 1.8; font-size: var(--fs-lead); color: var(--ink); }
.content-detail-caption--compact { max-width: none; padding: 8px 0 0; font-size: var(--fs-body); line-height: 1.7; }
.content-detail-metadata { margin: 8px 0 20px; color: var(--muted); font-size: var(--fs-meta); }
.content-detail-metadata summary, .content-detail-revision summary { cursor: pointer; line-height: 1.7; }
.content-detail-page code, .content-detail-evidence p, .content-detail-revision p { overflow-wrap: anywhere; word-break: break-word; }
.detail-subsection { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-subsection h3 { margin: 0 0 12px; font-family: 'Mulish', sans-serif; font-size: var(--fs-lead); font-weight: 800; color: var(--ink); }
.detail-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.detail-jobs__item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sub-panel); }
.detail-jobs__line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-meta); line-height: 1.5; overflow-wrap: anywhere; }
.detail-jobs__line + .detail-jobs__line { margin-top: 6px; }
.detail-jobs__hash { color: var(--muted); font-size: var(--fs-meta); }
.detail-jobs__form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.detail-jobs__form .form-control { flex: 1 1 240px; min-width: 180px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); color: var(--ink); font: inherit; font-size: var(--fs-body); }
.content-detail-page .content-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* --- Các mục gấp/mở: Brief · Kiểm chứng AI --- */
.content-detail-disclosure { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.content-detail-disclosure > summary { padding: 20px 24px; cursor: pointer; color: var(--ink); }
.content-detail-disclosure > summary > span { display: block; margin: 6px 0 0 18px; color: var(--muted); font-size: var(--fs-meta); line-height: 1.5; }
.content-detail-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.content-detail-disclosure > .content-brief,
.content-detail-disclosure > .content-card { margin: 0 !important; max-width: none !important; box-shadow: none; border: none; border-radius: 0; }
.content-detail-brief-read p { margin: 6px 0; line-height: 1.6; }
.detail-performance__title { margin-top: 0; }
/* Bảng hiệu quả gộp (Sheet mốc gốc + chuỗi portal + Lũy kế): ba nhóm dòng phải
   đọc ra ngay bằng mắt, không cần đọc chữ. */
.detail-performance__table { min-width: 880px; }
.detail-performance__table th { white-space: nowrap; }
.detail-performance__table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-performance__row--sheet td { background: var(--sub-panel); }
.detail-performance__row--total td { border-top: 2px solid var(--line); background: var(--sub-panel); }
.detail-performance__aside { display: block; font-size: var(--fs-label); color: var(--muted); }
/* Phân trang chuỗi ngày: cùng dáng với phân trang Content Library nhưng tên lớp
   riêng, để đổi chỗ này không làm đổi trang Content Library. */
.detail-performance__pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 14px; }
.detail-performance__pager a,
.detail-performance__pager .detail-performance__page-current,
.detail-performance__pager .detail-performance__page-ellipsis,
.detail-performance__pager .detail-performance__page-nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 7px;
  font-size: var(--fs-meta); text-decoration: none; color: var(--ink);
}
.detail-performance__pager a { border: 1px solid var(--line); background: var(--box-white); transition: background .12s ease, border-color .12s ease; }
.detail-performance__pager a:hover { background: var(--table-row-hover); border-color: var(--line-strong); }
.detail-performance__pager .detail-performance__page-current { background: var(--focus-blue); color: #fff; font-weight: 600; }
.detail-performance__pager .detail-performance__page-ellipsis { color: var(--muted); }
.detail-performance__pager .detail-performance__page-nav[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.detail-performance__pager-note { margin-left: 8px; color: var(--muted); font-size: var(--fs-meta); }
.detail-performance__verbatim { margin-top: 10px; }
.detail-performance__verbatim > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-meta); }
.detail-performance__verbatim .sheet-reference-panel__metric { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-meta); }

/* Thân bài viết: một khung chìm để tách "nội dung bài" khỏi "giao diện". */
.content-detail-body { margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--sub-panel); }
.content-detail-body .content-detail-title { margin: 0; }
.content-detail-body .content-detail-caption { max-width: none; padding: 10px 0 0; }

/* Thanh hành động cuối khối: trợ giúp AI bên trái, việc chính của bài bên phải.
   Bleed ra hết bề ngang thẻ (thẻ đệm 28px, bo góc 14px) để đọc như chân khối. */
.content-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 -28px -28px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--sub-panel); border-radius: 0 0 13px 13px; }
.content-detail-footer:not(:has(> *)) { display: none; }
.content-detail-footer__group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.content-detail-footer__group--end { margin-left: auto; }

/* Nhật ký đăng bài: gấp lại, chỉ mở khi cần soi. */
.detail-jobs-log { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); }
.detail-jobs-log__summary { cursor: pointer; color: var(--muted); font-size: var(--fs-meta); font-weight: 700; }
.detail-jobs-log[open] .detail-jobs { margin-top: 12px; }

/* --- Lịch sử bản viết & kiểm chứng AI --- */
.content-detail-revision h3, .content-detail-instruction h3, .content-detail-evidence h3 { font-size: var(--fs-lead); }
.content-detail-revision { border-top: 1px solid var(--line); padding: 16px 0; min-width: 0; }
.content-detail-revision:first-of-type { border-top: 0; }
.content-detail-revision[open] > summary { margin-bottom: 16px; }
.content-detail-evidence { padding: 8px 24px 16px; }
.content-detail-instruction { border-left: 3px solid var(--forest); padding: 4px 16px; margin: 16px 0; }
.content-detail-page summary:focus-visible, .detail-summary__nav a:focus-visible, .content-detail-page .content-back-link:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

@media (max-width: 900px) {
  .detail-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 700px) {
  .content-detail-draft, .content-detail-history, .content-detail-evidence { padding: 16px; }
  .detail-summary { padding: 18px; }
  .content-detail-disclosure > summary { padding: 16px; }
  .detail-summary__nav { margin-left: 0; }
  .detail-summary__nav a { padding: 7px 10px; }
  .detail-headbar__actions { width: 100%; margin-left: 0; }
  .detail-headbar__actions .btn { flex: 1 1 auto; justify-content: center; }
  .detail-facts { grid-template-columns: 1fr; }
  .content-detail-page .content-actions > form, .content-detail-page .content-actions > a { max-width: 100%; }
  .content-detail-page .content-actions form { flex-wrap: wrap; }
  .detail-jobs__form .form-control { flex-basis: 100%; }
}

/* Giữ khối tài khoản trên đầu trang chi tiết gọn ở màn hẹp. */
@media (max-width: 720px) {
  .content-detail-page .topbar { flex-direction: column; align-items: stretch; gap: 16px; }
  .content-detail-page .topbar > div { min-width: 0; }
  .content-detail-page .topbar h1 { overflow-wrap: anywhere; }
  .content-detail-page .topbar .user-area { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; }
  .content-detail-page .topbar .user-area > * { max-width: 100%; }
}

/* ---------- Campaign Database (Giai đoạn 1: giao diện) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  align-items: flex-end;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-field input[type="text"],
.filter-field input[type="date"] {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  min-width: 150px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 360px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { border-color: var(--forest); color: var(--forest); }
.chip.is-active { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.filter-reset { align-self: flex-end; font-size: var(--fs-meta); font-weight: 700; color: var(--forest); }

.status-badge.status-wait { background: var(--tag-bg); color: var(--tag-color); }
.status-badge.status-approved { background: #dbeafe; color: #1e40af; }
.status-badge.status-live { background: #fef3c7; color: #92400e; }
.status-badge.status-done { background: #d1fae5; color: #065f46; }
.status-badge.status-error { background: #fee2e2; color: #991b1b; }
.status-badge.status-skip { background: var(--tag-bg); color: var(--muted); }

.result-count { font-size: var(--fs-meta); color: var(--muted); margin: 0 0 10px 2px; }
.source-tag { font-size: 11px; font-weight: 700; }
.source-tag.source-agent { color: var(--forest); }
.source-tag.source-manual { color: var(--text-warn); }

.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--card-shadow); }
.tile .tile-k { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tile .tile-v { font-size: 20px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .tile-d { font-size: var(--fs-label); color: var(--muted); margin-top: 2px; }

.preview-post { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sub-panel); margin-bottom: 18px; }
.preview-post .thumb { width: 52px; height: 52px; border-radius: 8px; background: var(--mint); flex: none; display: grid; place-items: center; color: var(--mint-fg); font-size: 18px; }
.preview-post .cap { font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.preview-post .cap strong { color: var(--ink); }

.compare-box { background: var(--theme-active-bg); border-radius: 10px; padding: 11px 13px; margin-bottom: 18px; font-size: var(--fs-meta); }
.compare-box .lbl { display: block; font-weight: 800; color: var(--forest); margin-bottom: 3px; }

.demo-notice {
  font-size: var(--fs-meta);
  color: var(--muted);
  background: var(--sub-panel);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}


/* Learning header remains usable on narrow screens without changing other pages. */
@media (max-width: 720px) {
  .learning-notebook-page .topbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .learning-notebook-page .topbar .user-area { flex-wrap: wrap; justify-content: flex-start; min-width: 0; max-width: 100%; }
  .learning-notebook-page .topbar .user-area > * { flex-shrink: 0; }
  .learning-notebook-page .learning-section pre { overflow-wrap: anywhere; }
}

/* Separate Learning lists and draft editor. */
.learning-nav, .learning-pagination { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0; }
.learning-nav [aria-current="page"] { background: var(--accent, #285c4d); color: white; }
.learning-proposal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
.learning-proposal-layout textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 700px) { .learning-proposal-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Khối "Lên camp" trên trang chi tiết content ----------
   Trước đây khối này không có luật CSS riêng: nó chỉ ăn các lớp dùng chung
   (.content-card/.detail-facts/.brief-grid), nên tiêu đề mục "Lịch sử lượt lên camp"
   trùng cỡ với tiêu đề khối, bảng và hai form dính liền nhau không có vạch ngăn, và
   dòng "Lỗi gần nhất" (đã có class .campaign-panel__error) vẫn hiện màu chữ thường.
   Dùng lại đúng khuôn .detail-subsection của trang chi tiết để khối phụ nào cũng có
   cùng một kiểu vạch ngăn, thay vì thêm một hệ tiêu đề thứ hai. */
.campaign-panel .detail-facts { margin-bottom: 0; }
/* Đủ đặc tả để thắng `.detail-facts dd` (đặt màu --ink): để trần một class thì chữ
   lỗi vẫn đọc ra như một giá trị bình thường, không ai nhận ra bài đang lỗi. */
.detail-facts dd.campaign-panel__error { color: var(--text-danger); font-weight: 600; }
.campaign-panel__actions { display: grid; gap: 16px; }
.campaign-request-form .btn { margin-top: 16px; }
/* Hàng nhập-huỷ: ô lý do co giãn còn nút giữ nguyên bề ngang, cả hai cùng cao 42px
   như ô nhập trong các form khác của trang (mặc định chúng chỉ 40px). */
.campaign-cancel-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.campaign-cancel-form .form-control { flex: 1 1 260px; min-width: 0; min-height: 42px; }
.campaign-cancel-form .btn { flex: 0 0 auto; min-height: 42px; padding: 0 16px; }
.campaign-panel .table-responsive { margin-top: 4px; }
/* Bảng 5 cột có ID dài: giữ bề ngang tối thiểu để cột không bị bóp, phần dư cuộn ngang. */
.campaign-panel .data-table { min-width: 620px; }
/* Dòng dẫn của khu form: nói rõ ô bỏ trống nghĩa là gì, thay vì để người dùng đoán. */
.campaign-panel__hint { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-meta); line-height: 1.5; }
/* Mọi trang dùng .table-responsive đều muốn điều này; thiếu nó thì bảng rộng đẩy vỡ thẻ.
   Trang Hàng đợi lên camp (bảng 8 cột, rộng hơn thẻ ~140px) là ca đang bị: trước đây
   cả trang bị cuộn ngang, nay bảng tự cuộn trong khung. */
.table-responsive { overflow-x: auto; }
/* Trang Tra cứu Marketing: hàng lọc và hàng nút xuất CSV viết bằng inline style cứng một hàng.
   Ở màn 390px chúng rộng 440px và 630px (khối lọc 5 cột, 3 nút CSV không xuống dòng) nên đẩy
   cả trang rộng ra ngoài màn hình. Gom về lớp để màn hẹp xếp lại được mà desktop giữ nguyên. */
.marketing-search__filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.marketing-search__subrow {
  display: flex; gap: 12px; margin-top: 16px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border-color); padding-top: 14px;
}
.marketing-search__row { display: flex; gap: 12px; align-items: center; }
.marketing-search__exports { display: flex; gap: 8px; }
@media (max-width: 1020px) {
  .marketing-search__filters { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
  .marketing-search__subrow { flex-wrap: wrap; gap: 10px; }
  .marketing-search__row { flex-wrap: wrap; }
  .marketing-search__exports { flex-wrap: wrap; }
}
/* Ba chỗ inline style của trang Hàng đợi lên camp chuyển về lớp cho cùng một nguồn CSS. */
.campaign-queue__card { margin-top: 16px; padding: 20px 24px; }
.campaign-queue__empty { padding: 24px; text-align: center; color: var(--muted); }
.campaign-queue__note { margin: 12px 0 0; }
/* Bảng hàng đợi 8 cột: bề rộng cột gom từ inline style của template về đây và siết lại.
   Tám min-width cũ cộng lại 990px, cộng padding thành ~1050px, tức bảng luôn rộng hơn thẻ
   (914px ở màn 1280) nên cột "Thao tác" phải cuộn ngang trong thẻ mới thấy. Tổng min-width
   mới 865px để bảng vừa khít thẻ; phần dư chia cho cột nhiều chữ. */
.campaign-queue__card .data-table th,
.campaign-queue__card .data-table td { padding: 12px 10px; vertical-align: top; }
.campaign-queue__card .data-table th:nth-child(1) { min-width: 56px; }
.campaign-queue__card .data-table th:nth-child(2) { min-width: 76px; }
.campaign-queue__card .data-table th:nth-child(3) { min-width: 92px; }
.campaign-queue__card .data-table th:nth-child(4) { min-width: 118px; }
.campaign-queue__card .data-table th:nth-child(5) { min-width: 105px; }
.campaign-queue__card .data-table th:nth-child(6) { min-width: 172px; }
.campaign-queue__card .data-table th:nth-child(7) { min-width: 110px; }
.campaign-queue__card .data-table th:nth-child(8) { min-width: 136px; }
/* Cột chữ dài (SKU nhiều mã, người yêu cầu + giờ, lỗi import) được phép xuống dòng để
   không kéo bảng rộng ra; badge trạng thái và nút thao tác thì giữ một dòng — hai thứ
   người dùng nhìn để quyết định, xuống dòng chỉ làm hàng cao thêm mà khó đọc hơn. */
.campaign-queue__card .data-table td:nth-child(2),
.campaign-queue__card .data-table td:nth-child(5),
.campaign-queue__card .data-table td:nth-child(7) { overflow-wrap: break-word; }
.campaign-queue__card .data-table td:nth-child(4) .status-badge,
.campaign-queue__card .data-table td:nth-child(8) .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .campaign-cancel-form { flex-direction: column; align-items: stretch; }
  .campaign-cancel-form .form-control { flex-basis: auto; }
}

/* --- Marketing Daily: hàng nút nhanh + so sánh kỳ --- */
.md-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px; }
.md-toolbar__dates { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.md-icon-btn { justify-content: center; min-width: 36px; line-height: 1; }
.md-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.md-delta { font-weight: 700; white-space: nowrap; }
.md-delta--good { color: var(--ok-ink); }
.md-delta--bad { color: var(--danger-ink); }
.md-delta--flat { color: var(--muted); }
.md-compare__group td { background: var(--panel-soft2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.md-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.md-section-head h3 { margin-top: 4px; }

/* --- Content: khối "Đổi giờ đăng" (OC-D / OC-E-portal) --- */
.content-reschedule-panel { margin-top: 16px; }
.content-reschedule__status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.content-reschedule__form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 12px; }
.content-reschedule__form .form-control { max-width: 320px; }
.content-reschedule__notice { margin-top: 10px; padding: 13px 15px; border: 1px solid #e6d4a2; border-radius: 10px; color: #73520a; background: #fff9e9; font-size: var(--fs-meta); line-height: 1.45; }
.content-reschedule__history { margin-top: 10px; }
.content-reschedule__history-list { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-meta); color: var(--muted); }