/* ban-tin-mau (07/10/2026, TGĐ: "Bảng tin này nên có màu sắc nhiều hơn để tập trung những điểm quan trọng / cảnh báo").
   Chỉ tô màu, không đổi bố cục. Nạp NGAY SAU css/bantin.css. P3 (07/10, Bảng tin Quy định) thêm màu theo hiệu lực ở cuối tệp.
   Dựa trên lớp sẵn có: thẻ tin .bti-the.bti-s-* (chiều tin), chip mức .bti-lv-cao / .bti-lv-tb (dò bằng :has),
   ô số .bti-kpi, dự án bị chạm .bti-pc, tóm tắt .bti-tt, việc nên làm .bti-g2-full, lọc mảng .bti-mchips.
   Màu lấy từ biến theme (--danger, --warn, --success, --primary, --brand) trộn với nền thẻ, nên đúng cả 3 giao diện.
   Review RM-03: mọi quy tắc chỉ áp TRONG ba vùng khai biến (.bti-trang, .bti-hn, .bti-ngan) qua tiền tố :where(...)
   (không tăng độ ưu tiên) — màn điện thoại #mbApp và hộp Nạp/Chia sẻ .bti-hp giữ nguyên như trước.
   Review RM-04: cả tệp nằm trong @supports color-mix — trình duyệt cũ giữ giao diện cũ, không mất viền/nền. */

@supports (color: color-mix(in srgb, red 50%, blue)) {

:where(.bti-trang, .bti-hn, .bti-ngan) {
  --btm-nen: var(--card, #fff);
  --btm-dan: color-mix(in srgb, var(--danger) 8%, var(--btm-nen));
  --btm-dan-vien: color-mix(in srgb, var(--danger) 45%, var(--btm-nen));
  --btm-warn: color-mix(in srgb, var(--warn) 12%, var(--btm-nen));
  --btm-warn-vien: color-mix(in srgb, var(--warn) 55%, var(--btm-nen));
  --btm-ok: color-mix(in srgb, var(--success) 8%, var(--btm-nen));
  --btm-ok-vien: color-mix(in srgb, var(--success) 40%, var(--btm-nen));
  --btm-blue: color-mix(in srgb, var(--primary) 7%, var(--btm-nen));
  --btm-blue-vien: color-mix(in srgb, var(--primary) 35%, var(--btm-nen));
  --btm-gold: color-mix(in srgb, var(--brand) 8%, var(--btm-nen));
}

/* ---------- đầu trang ---------- */
:where(.bti-trang) .bti-tr-dau { background: linear-gradient(90deg, var(--btm-blue), var(--btm-nen) 60%); }

/* ---------- Tóm tắt 30 giây: mỗi dòng một dải màu theo mức ---------- */
:where(.bti-trang) .bti-hop h3 { padding-left: 8px; border-left: 4px solid var(--primary); }
:where(.bti-trang) .bti-tt li { padding: 5px 8px; margin: 3px 0; border-radius: 7px; border-left: 4px solid var(--primary); background: var(--btm-blue); }
:where(.bti-trang) .bti-tt li:has(.bti-dot.bti-dan) { border-left-color: var(--danger); background: var(--btm-dan); }
:where(.bti-trang) .bti-tt li:has(.bti-dot.bti-warn) { border-left-color: var(--warn); background: var(--btm-warn); }
:where(.bti-trang) .bti-tt li:has(.bti-dot.bti-ok) { border-left-color: var(--success); background: var(--btm-ok); }

/* ---------- Con số tuần ---------- */
:where(.bti-trang) .bti-kpi { border-top: 4px solid var(--primary); background: var(--btm-blue); }
:where(.bti-trang) .bti-kpi.bti-dan { border-color: var(--btm-dan-vien); border-top-color: var(--danger); background: var(--btm-dan); }
:where(.bti-trang) .bti-kpi.bti-warn { border-color: var(--btm-warn-vien); border-top-color: var(--warn); background: var(--btm-warn); }
:where(.bti-trang) .bti-kpi.bti-warn b { color: color-mix(in srgb, var(--warn) 45%, var(--ink)); }

/* ---------- lọc theo mảng: mỗi mảng một sắc nhạt ---------- */
:where(.bti-trang) .bti-mchips button:has(.bti-c-pda) { border-color: color-mix(in srgb, var(--primary) 45%, var(--btm-nen)); background: var(--btm-blue); }
:where(.bti-trang) .bti-mchips button:has(.bti-c-pdn) { border-color: color-mix(in srgb, var(--brand) 45%, var(--btm-nen)); background: var(--btm-gold); }
:where(.bti-trang) .bti-mchips button:has(.bti-c-tc) { border-color: var(--btm-ok-vien); background: var(--btm-ok); }
:where(.bti-trang) .bti-mchips button:has(.bti-c-ns) { border-color: var(--btm-warn-vien); background: var(--btm-warn); }
:where(.bti-trang) .bti-mchips button:has(.bti-c-sm) { border-color: var(--btm-dan-vien); background: var(--btm-dan); }
:where(.bti-trang) .bti-mchips button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }

/* ---------- nhóm "Mới tuần này" / "Theo dõi tiếp" ---------- */
:where(.bti-trang) .bti-nhom { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--btm-blue); border: 1px solid var(--btm-blue-vien); color: var(--primary); }

/* ---------- thẻ tin: nền theo mức quan trọng ---------- */
/* Mức CAO: nền đỏ nhạt, sọc trái đỏ đậm (trừ tin CÓ LỢI: xanh lá). Mức VỪA: nền vàng nhạt. Mức THẤP: giữ nền trắng.
   RM-01: border-color đặt TRƯỚC border-left-color để sọc trái giữ màu đậm. */
:where(.bti-trang) .bti-the:has(.bti-lv-cao) { border-color: var(--btm-dan-vien); border-left-color: var(--danger); border-left-width: 6px; background: var(--btm-dan); box-shadow: 0 1px 6px color-mix(in srgb, var(--danger) 14%, transparent); }
:where(.bti-trang) .bti-the.bti-s-ok:has(.bti-lv-cao) { border-color: var(--btm-ok-vien); border-left-color: var(--success); background: var(--btm-ok); box-shadow: none; }
:where(.bti-trang) .bti-the:has(.bti-lv-tb) { border-color: var(--btm-warn-vien); border-left-color: var(--warn); background: var(--btm-warn); }
:where(.bti-trang) .bti-the.bti-s-ok:has(.bti-lv-tb) { border-color: var(--btm-ok-vien); border-left-color: var(--success); background: var(--btm-ok); }
:where(.bti-trang) .bti-the:has(.bti-lv-cao) h4 { font-size: calc(var(--fs-md, 14px) + 1px); }

/* Nhãn mục trong thẻ */
:where(.bti-trang) .bti-the .bti-lab { color: var(--primary); }

/* Dự án bị chạm: chip tô nền theo mức ảnh hưởng */
:where(.bti-trang, .bti-ngan) .bti-pc.bti-dan { background: var(--btm-dan); border-color: var(--danger); }
:where(.bti-trang, .bti-ngan) .bti-pc.bti-warn { background: var(--btm-warn); border-color: var(--warn); }
:where(.bti-trang, .bti-ngan) .bti-pc.bti-ok { background: var(--btm-ok); border-color: var(--btm-ok-vien); }
:where(.bti-trang, .bti-ngan) .bti-pc.bti-blue { background: var(--btm-blue); border-color: var(--btm-blue-vien); }

/* Việc nên làm: hộp nổi bật */
:where(.bti-trang) .bti-g2-full { margin-top: 6px; padding: 6px 10px 8px; border-radius: 8px; background: var(--btm-nen); border: 1px solid var(--btm-blue-vien); border-left: 4px solid var(--primary); }
:where(.bti-trang) .bti-g2-full .bti-lab { margin-top: 0; }
:where(.bti-trang, .bti-ngan) .bti-todo li::marker { color: var(--primary); }

/* Điều chỉnh của lãnh đạo (ghim) */
:where(.bti-trang, .bti-ngan) .bti-ghim { background: var(--btm-gold); border-left: 4px solid var(--brand); }

/* ---------- khối Bảng tin trên Hôm nay (máy tính): dòng tin CAO / VỪA có nền màu ---------- */
:where(.bti-hn) .bti-hn-dong:has(.bti-lv-cao) { background: var(--btm-dan); border-radius: 7px; box-shadow: inset 4px 0 0 var(--danger); }
:where(.bti-hn) .bti-hn-dong:has(.bti-lv-tb) { background: var(--btm-warn); border-radius: 7px; box-shadow: inset 4px 0 0 var(--warn); }
/* RM-02: giữ dấu hiệu rê chuột / tập trung bàn phím (bantin.css:56 tắt outline và chỉ đổi nền) */
:where(.bti-hn) .bti-hn-dong:has(.bti-lv-cao):hover, :where(.bti-hn) .bti-hn-dong:has(.bti-lv-cao):focus { background: color-mix(in srgb, var(--danger) 16%, var(--btm-nen)); }
:where(.bti-hn) .bti-hn-dong:has(.bti-lv-tb):hover, :where(.bti-hn) .bti-hn-dong:has(.bti-lv-tb):focus { background: color-mix(in srgb, var(--warn) 24%, var(--btm-nen)); }
:where(.bti-hn) .bti-hn-dong:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ---------- giữ tương phản chữ phụ trên nền màu (đo 3 giao diện) ---------- */
:where(.bti-trang) .bti-tr-dau, :where(.bti-trang) .bti-the, :where(.bti-trang) .bti-kpi, :where(.bti-trang) .bti-tt li,
:where(.bti-trang) .bti-g2-full, :where(.bti-trang, .bti-ngan) .bti-ghim,
:where(.bti-hn) .bti-hn-dong:has(.bti-lv-cao), :where(.bti-hn) .bti-hn-dong:has(.bti-lv-tb) {
  --ink-3: color-mix(in srgb, var(--ink-2) 75%, var(--ink));
}
:where(.bti-trang) .bti-the .bti-lab:has(+ .bti-prj), :where(.bti-trang) .bti-kpi.bti-dan b { color: color-mix(in srgb, var(--danger) 78%, var(--ink)); }

/* ---------- Bảng tin Quy định P3 (SPEC §5.4): màu theo hiệu lực ----------
   Phạm vi gồm cả màn điện thoại (.bti-mb, .bti-mb-hn): nhãn hiệu lực là thông tin, không chỉ trang trí.
   Theme không có biến tím: dự thảo dùng một sắc tím cố định trộn với nền thẻ. Chữ chip giữ --ink (tương phản trên 4,5:1);
   chữ đỏ và nền đỏ trộn thêm --ink để đạt 4,5:1 cả ở theme Đỏ (--danger #EC1F27 trên nền trắng chỉ 4,39:1). */
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) {
  --bth-nen: var(--card, #fff);
  --bth-con: color-mix(in srgb, var(--success) 14%, var(--bth-nen));
  --bth-mot: color-mix(in srgb, var(--warn) 22%, var(--bth-nen));
  --bth-ngung: color-mix(in srgb, var(--danger) 12%, var(--bth-nen));
  --bth-chua: color-mix(in srgb, var(--primary) 12%, var(--bth-nen));
  --bth-tim: #6d28d9;
  --bth-du-thao: color-mix(in srgb, var(--bth-tim) 12%, var(--bth-nen));
  --bth-du-thao-vien: color-mix(in srgb, var(--bth-tim) 55%, var(--bth-nen));
  --bth-tinbao: color-mix(in srgb, var(--warn) 12%, var(--bth-nen));
  --bth-do: color-mix(in srgb, var(--danger) 70%, var(--ink));
  --bth-do-nen: color-mix(in srgb, var(--danger) 80%, var(--ink));
}
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-hl-con { background: var(--bth-con); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-hl-mot-phan { background: var(--bth-mot); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-hl-ngung { background: var(--bth-ngung); border-color: var(--bth-do); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-hl-chua { background: var(--bth-chua); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-hl-du-thao { background: var(--bth-du-thao); border-color: var(--bth-du-thao-vien); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-canh-goc { background: var(--bth-do-nen); border-color: var(--bth-do-nen); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-nhan-tb { background: var(--bth-tinbao); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-tc-doi { background: var(--bth-mot); }
:where(.bti-trang, .bti-hn, .bti-ngan, .bti-mb, .bti-mb-hn) .bti-tc-cu { background: color-mix(in srgb, var(--brand) 8%, var(--bth-nen)); }
/* Thẻ: viền và nền theo hiệu lực đè màu theo mức — [class] nâng độ ưu tiên lên (0,3,0), đặt sau quy tắc mức ở trên.
   Mục hết hiệu lực không mang lớp bti-s-* và chip mức đổi thành bti-lv-tat nên quy tắc màu theo mức không áp. */
:where(.bti-trang, .bti-mb) .bti-the.bti-t-mot-phan[class] { border-left-color: var(--warn); }
:where(.bti-trang, .bti-mb) .bti-the.bti-t-ngung[class] { border-left-color: var(--bth-do); }
:where(.bti-trang, .bti-mb) .bti-the.bti-t-du-thao[class] { border-color: var(--bth-du-thao-vien); }
:where(.bti-trang, .bti-mb) .bti-the.bti-t-tinbao[class] { background: var(--bth-tinbao); box-shadow: none; }
:where(.bti-trang, .bti-mb) .bti-the.bti-t-het[class] { border-color: var(--line); border-left-color: var(--ink-3); background: var(--bth-nen); box-shadow: none; }

/* Tương phản chữ đỏ (mọi nơi có lớp bti-): chip mức CAO, chip "Bất lợi"/"cảnh báo cao", câu báo lỗi */
.bti-lv-cao { background: color-mix(in srgb, var(--danger) 80%, var(--ink)); }
.bti-chip.bti-dan, .bti-bao-loi { color: color-mix(in srgb, var(--danger) 70%, var(--ink)); }

}