/* Bộ giao diện 3 — bảng điều hành hiện đại (doc/dev/bo-giao-dien.html mục 4, hình mẫu doc/dev/thanhdoan/mau3.jpg) */
/* 2026-10-07 (doc/dev/thanhdoan/sua1.jpg): chữ chính chuyển từ xanh đen #0f2a5f sang xanh dương tươi hơn, hạn chế màu tối */
:root {
  --nen: #f3f7fd; --the: #ffffff; --vien: #e3eaf5; --muc: #1846a3; --muc-2: #3d5f99; --nhat: #7c8ba6;
  --xanh: #1a66e0; --xanh-nhat: #e8f0fd; --la: #16a34a; --cam: #f2780c; --tim: #7c4dde; --vang: #f5b400;
  /* trạng thái (chỉ dùng cho tình trạng chỉ tiêu, luôn kèm nhãn) */
  --dat: #16a34a; --dang: #f59e0b; --chua: #e5484d;
  --series-1: #2a78d6;
}
[x-cloak] { display: none !important; }
body { background: var(--nen); color: var(--muc); font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.chu-tay { font-family: "Dancing Script", cursive; }

.the { background: var(--the); border: 1px solid var(--vien); border-radius: 18px; box-shadow: 0 6px 24px -14px rgb(15 42 95 / .25); }
.tieu-de-the { font-size: .95rem; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--muc); }

/* Menu trái */
.menu a { display: flex; align-items: center; gap: .75rem; padding: .62rem .9rem; border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--muc-2); }
.menu a:hover { background: var(--xanh-nhat); color: var(--xanh); }
.menu a[aria-current] { background: linear-gradient(90deg, #2563eb, #3b82f6); color: #fff; box-shadow: 0 8px 18px -10px #2563eb; }
.menu a i:first-child { width: 1.1rem; text-align: center; }
.menu .nhom { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nhat); padding: 1rem .9rem .35rem; }

/* Băng tiêu đề */
.bang-dau { background: linear-gradient(180deg, #d9e9fb 0%, #eef5fd 55%, #f7fbff 100%); border-radius: 22px; overflow: hidden; position: relative; }
.bang-dau .thanh-pho { position: absolute; right: 12px; top: 8px; height: 300px; width: 52%; opacity: .95; pointer-events: none; }

/* Vòng tiến độ */
.vong { transform: rotate(-90deg); }
.vong circle { fill: none; stroke-width: 9; }
.vong .rail { stroke: #e6edf7; }
.vong .gia-tri { stroke-linecap: round; transition: stroke-dasharray 1s ease; }

/* Bộ chuyển giao diện (shared/js/giao-dien.js) */
[data-giao-dien] { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--nhat); }
.gd-label { margin-right: 4px; }
@media (max-width: 480px) { .gd-label { display: none; } }
.gd-link { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--vien); font-weight: 700; color: var(--muc-2); background: #fff; }
.gd-link:hover { border-color: var(--xanh); color: var(--xanh); }
.gd-link[aria-current] { background: var(--xanh); border-color: var(--xanh); color: #fff; }

/* Thẻ lọc của bảng */
.the-loc button { font-size: .8rem; font-weight: 600; padding: .4rem .8rem; border-radius: 10px; border: 1px solid var(--vien); color: var(--muc-2); background: #fff; white-space: nowrap; }
.the-loc button[aria-pressed="true"] { background: var(--xanh-nhat); border-color: #bcd3f7; color: var(--xanh); }
.bang th { font-size: .74rem; font-weight: 700; color: var(--muc-2); text-align: left; padding: .7rem .8rem; background: #f6f9fe; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang td { padding: .7rem .8rem; border-bottom: 1px solid #eef2f8; vertical-align: middle; font-size: .85rem; }
.bang tr:last-child td { border-bottom: 0; }
.bang tr:hover td { background: #fafcff; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Biểu đồ cột tiến độ theo chiến dịch */
.bd-cot { position: relative; height: 220px; }
.bd-cot .vung-ve { position: absolute; left: 0; right: 0; top: 20px; bottom: 0; }
.bd-cot .luoi { position: absolute; left: 30px; right: 0; border-top: 1px dashed #e3e9f3; }
.bd-cot .truc { position: absolute; left: 0; width: 26px; text-align: right; font-size: .66rem; color: var(--nhat); transform: translateY(-50%); }
.bd-cot .cac-cot { position: absolute; left: 34px; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; gap: 2px; }
.bd-cot .o-cot { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; }
.bd-cot .cot { position: relative; width: min(70%, 34px); border-radius: 4px 4px 0 0; transition: height .9s ease, filter .15s; min-height: 2px; }
.bd-cot .o-cot:hover .cot, .bd-cot .o-cot:focus-visible .cot { filter: brightness(1.08) saturate(1.1); }
.bd-cot .o-cot:focus-visible { box-shadow: inset 0 0 0 2px var(--xanh); border-radius: 6px; }
.bd-cot .nhan-so { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: .72rem; font-weight: 800; color: var(--muc); white-space: nowrap; }
.ten-cot { display: flex; margin-left: 34px; gap: 2px; margin-top: 6px; }
.ten-cot span { flex: 1; text-align: center; font-size: .66rem; font-weight: 600; color: var(--muc-2); line-height: 1.2; }
.goi-y { position: absolute; z-index: 5; pointer-events: none; background: var(--muc); color: #fff; font-size: .75rem; line-height: 1.4; padding: .45rem .6rem; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -100%); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .4); }

/* Thanh ngang cơ cấu theo loại */
.thanh-ngang { height: 8px; background: #edf2f9; border-radius: 4px; overflow: hidden; }
.thanh-ngang > span { display: block; height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; transition: width .9s ease; }

/* Nút lối tắt */
.nut-tat { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-radius: 12px; font-weight: 700; font-size: .85rem; color: #fff; box-shadow: 0 8px 18px -12px rgb(15 42 95 / .6); transition: transform .15s, filter .15s; }
.nut-tat:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ===== Trang công khai (cong-khai.html, mục 4.1) ===== */
.bang-dau.nho { border-radius: 18px; }
.duong-dan { font-size: .78rem; font-weight: 600; color: var(--muc-2); }
.duong-dan a:hover { color: var(--xanh); }
.o-nhap { width: 100%; font: inherit; font-size: .88rem; color: var(--muc); background: #fff; border: 1px solid var(--vien); border-radius: 10px; padding: .55rem .75rem; }
.o-nhap:focus { outline: none; border-color: #93b4ef; box-shadow: 0 0 0 3px #dbe7fb; }
.o-nhap:disabled { background: #f4f6fa; color: var(--nhat); }
.nut { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-size: .85rem; font-weight: 700; border-radius: 10px; padding: .55rem .95rem; border: 1px solid var(--vien); background: #fff; color: var(--muc-2); }
.nut:hover:not(:disabled) { border-color: var(--xanh); color: var(--xanh); }
.nut:disabled { opacity: .45; }
.nut-chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nut-chinh:hover:not(:disabled) { background: #1a53b8; color: #fff; }

/* Thẻ hoạt động */
.the-hd { display: flex; flex-direction: column; overflow: hidden; height: 100%; transition: transform .15s, box-shadow .15s; }
.the-hd:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgb(15 42 95 / .35); }
.the-hd .anh { position: relative; height: 168px; display: flex; align-items: center; justify-content: center; }
.the-hd .anh > img { width: 100%; height: 100%; object-fit: cover; }
.the-hd .anh .logo-cd { height: 84px; width: auto; object-fit: contain; }
.the-hd .ngay { position: absolute; top: 10px; right: 10px; font-size: .72rem; font-weight: 700; background: rgb(255 255 255 / .95); color: var(--muc); border-radius: 8px; padding: .2rem .5rem; }
.the-hd .than { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.the-hd h3 { font-weight: 800; font-size: .95rem; line-height: 1.35; color: var(--muc); }
.nhan-mau { align-self: flex-start; font-size: .7rem; font-weight: 700; border-radius: 8px; padding: .2rem .55rem; }
.the-hd .phu { font-size: .76rem; color: var(--muc-2); }
.the-hd .chan { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; font-size: .76rem; font-weight: 700; color: var(--nhat); }
.the-hd .chan b { color: var(--xanh); }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Chỉ tiêu: thanh tiến độ theo mức (luôn kèm biểu tượng + chữ) */
.muc-dat { --muc-mau: var(--dat); } .muc-kha { --muc-mau: var(--dang); } .muc-thap { --muc-mau: var(--chua); } .muc-chua { --muc-mau: #a3b1c6; }
.thanh-muc { height: 8px; background: #edf2f9; border-radius: 4px; overflow: hidden; }
.thanh-muc > span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--muc-mau); transition: width .9s ease; }
.chu-muc { color: var(--muc-mau); font-weight: 800; }

/* Danh sách đơn vị (chi tiết chiến dịch) */
.ds-dv button { width: 100%; text-align: left; border: 1px solid var(--vien); border-radius: 12px; padding: .65rem .8rem; background: #fff; }
.ds-dv button:hover { background: #f8fbff; }
.ds-dv button[aria-pressed="true"] { border-color: var(--mau, var(--xanh)); box-shadow: inset 3px 0 0 var(--mau, var(--xanh)); background: #f8fbff; }

/* Thông tin hoạt động */
.thong-tin dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nhat); }
.thong-tin dd { font-weight: 600; font-size: .9rem; margin-top: 2px; }
.noi-dung-tin { line-height: 1.75; }
.noi-dung-tin img { border-radius: 12px; margin: 14px auto; }
.noi-dung-tin a { color: var(--xanh); text-decoration: underline; }
.noi-dung-tin h2, .noi-dung-tin h3 { font-weight: 800; margin: 1rem 0 .4rem; }
.noi-dung-tin ul { list-style: disc; padding-left: 1.4rem; }

/* Bản đồ */
#map { height: 66vh; min-height: 420px; border-radius: 14px; z-index: 0; }
.leaflet-container { font-family: inherit; }
.chu-giai { position: absolute; left: 14px; bottom: 14px; z-index: 500; background: rgb(255 255 255 / .96); border: 1px solid var(--vien); border-radius: 12px; padding: 10px 12px; font-size: .75rem; box-shadow: 0 8px 20px -12px rgb(15 42 95 / .4); }
.chu-giai i { display: inline-block; width: 16px; height: 11px; border-radius: 3px; border: 1px solid #d5deeb; vertical-align: -1px; margin-right: 6px; }