/* Quản trị → Cơ cấu tổ chức (public/js/co-cau.js): cây đơn vị bên trái, tài khoản của đơn vị đang chọn bên phải */
.cc { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ---------- Khung trái: cây đơn vị ---------- */
.cc-trai {
  position: sticky; top: calc(var(--cao-thanh-tren) + 12px);
  display: flex; flex-direction: column; max-height: calc(100vh - var(--cao-thanh-tren) - 32px); min-width: 0;
}
.cc-dau-cay { display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--vien); }
.cc-tim-cay { flex: 1; min-width: 0; }
.cc-cay { overflow: auto; flex: 1; padding: 6px 0 8px; overscroll-behavior: contain; }
.cc-pham-vi { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--vien); font-size: 12.5px; overflow-wrap: anywhere; }
.cc-pham-vi .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--xanh-600); }

.cc-menu { position: relative; flex: none; }
.cc-menu > summary { list-style: none; }
.cc-menu > summary::-webkit-details-marker { display: none; }
.menu-cc {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 230px; padding: 6px;
  display: grid; gap: 2px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-goc);
}
.menu-cc button { justify-content: flex-start; width: 100%; color: var(--chu); }
.menu-cc button .ic { color: var(--chu-nhat); }

.cc-hang { display: flex; align-items: center; gap: 2px; padding: 1px 8px 1px calc(6px + var(--sau, 0) * 16px); }
.cc-mo { flex: none; color: var(--chu-mo); }
.cc-mo-trong { flex: none; width: 34px; }
button.cc-chon {
  flex: 1; min-width: 0; justify-content: flex-start; text-align: left; white-space: normal;
  background: transparent; color: var(--chu); padding: 6px 8px; min-height: 34px; font-size: 13.5px;
}
button.cc-chon:hover { background: var(--mat-hover); }
.cc-chon > .ic { flex: none; color: var(--chu-nhat); }
.cc-ten { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cc-hang.khop .cc-ten { font-weight: 700; }
.cc-hang.dang button.cc-chon { background: var(--mat-hover); color: var(--xanh-700); }
.cc-hang.dang .cc-chon > .ic { color: var(--xanh-600); }
.cc-dem {
  flex: none; margin-left: auto; font-size: 12px; line-height: 18px; padding: 1px 8px; border-radius: 99px;
  background: var(--mat-hover); color: var(--chu-nhat); font-variant-numeric: tabular-nums;
}
.cc-dem small { font-size: 12px; opacity: .8; }
.cc-dem.cam { background: var(--cam-nen); color: var(--cam); }
.cc-chua-xep { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--vien-dam); }
.cc-chua-xep .cc-chon > .ic { color: var(--cam); }

/* ---------- Khung phải ---------- */
.cc-phai { min-width: 0; }
.cc-dau-dv { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--vien); }
.cc-tieu-de { flex: 1 1 260px; min-width: 0; }
.cc-tieu-de h3 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.cc-tieu-de h3 .ic { flex: none; color: var(--xanh-600); }
.cc-tieu-de small { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.cc-nut-dv { display: flex; flex-wrap: wrap; gap: 6px; }
button.cc-xoa { color: var(--do); }
button.cc-xoa:hover { background: var(--do-nen); border-color: var(--do); }

.cc-cong-cu { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--vien); }
.cc-tim { flex: 1 1 220px; min-width: 0; }
label.cc-gom { margin: 0; }
.cc-cong-cu select { width: auto; }

.cc-dong .o-nguoi { min-width: 0; flex: 1 1 220px; }
.cc-thong-tin { min-width: 0; }
.cc-thong-tin small { display: block; overflow-wrap: anywhere; }
small.cc-duong { margin-top: 2px; color: var(--chu-mo); font-size: 12px; }
.cc-duong .ic { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.cc-ds[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
.cc-loi { padding: 16px 20px; margin: 0; }
/* .trong-nho chỉ có ở style.css, trang chủ không nạp tệp đó */
.cc .trong-nho { padding: 28px 20px; text-align: center; color: var(--chu-nhat); font-size: 13px; }
.cc .trong-nho .ic { width: 28px; height: 28px; color: var(--chu-mo); display: block; margin: 0 auto 8px; }

.cc-trang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 20px; }
.cc-trang:empty { display: none; }

/* ---------- Hộp thoại ---------- */
.cc-hop label > :is(input, select) { margin-top: 6px; font-weight: 400; }
.cc-hop label.chon-mot { font-weight: 400; }
.cc-hai { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
.cc-goi-y { margin: 6px 0 0; }
.cc-tieu-kiem { margin: 20px 0 4px; font-size: 14px; font-weight: 600; padding-top: 14px; border-top: 1px solid var(--vien); }
.cc-tieu-kiem .mo-chu { font-weight: 400; font-size: 12.5px; }
.cc-kiem { margin: 10px 0; padding: 4px 12px 12px; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--mat-2); }
.cc-kiem-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.cc-kiem-dau b { font-size: 13px; }
.cc-kiem label:not(.chon-mot) { margin-top: 10px; }
[data-them-kiem] { margin-top: 8px; }
/* Vị trí ở đơn vị ngoài nhánh (cấp phường xem): chỉ đọc */
.cc-ngoai p { margin: 8px 0 0; overflow-wrap: anywhere; }
.cc-chinh.cc-ngoai { padding: 4px 12px 12px; border: 1px dashed var(--vien-dam); border-radius: var(--bo-nho); }

/* ---------- Điện thoại: hai khung xếp chồng, cây trên (giới hạn chiều cao, cuộn riêng) ---------- */
@media (max-width: 720px) {
  .cc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cc-trai { position: static; max-height: 46vh; }
  .cc-hang { padding-left: calc(4px + var(--sau, 0) * 12px); padding-right: 6px; }
  .cc-mo-trong { width: 44px; }
  button.cc-chon { font-size: 14px; min-height: 44px; }
  .cc-dau-dv { padding: 14px; }
  .cc-nut-dv > * { flex: 1 1 auto; }
  .cc-cong-cu { padding: 12px 14px; }
  .cc-tim { flex-basis: 100%; }
  label.cc-gom { min-height: 44px; flex: 1; }
  .cc-cong-cu select { min-height: 44px; }
  .cc-trang { padding: 12px 14px; }
  .cc-trang .mo-chu { order: -1; flex-basis: 100%; text-align: center; }
  .cc-trang button { flex: 1; }
  .cc-dong { padding: 10px 14px; }
  .cc-hai { grid-template-columns: minmax(0, 1fr) 96px; }
  .cc-hop label.chon-mot { min-height: 44px; }
}