html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =========================================================================
   DASHBOARD SHELL - port tu bao-cao.html (ban HTML/JS cu). Chi port phan
   can cho Phase 0-4 (sidebar/topbar/kpi-card) - cac phan con lai (bang,
   panel, bieu do...) se them dan khi port tung tab o cac phase sau.
   ========================================================================= */
/* =========================================================================
   DESIGN TOKENS - MOI mau / bo goc / bong do dung trong file nay lay tu bien duoi day. Che do toi (nut mat trang tren thanh tren)
   chi viec ghi de cac bien nay trong khoi :root[data-bs-theme="dark"] o cuoi file - KHONG sua tung rule.
   Quy uoc: --surface* = nen; --text* = chu; --border* = vien; --<mau>-bg / -fg / -border = bo 3 mau cho trang thai (do, vang, xanh, xanh duong...).
   ========================================================================= */
:root{
  /* nen + chu + vien */
  --bg:#f2f4f7; --card:#ffffff; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9; --track:#e2e8f0;
  --text:#1f2937; --text-strong:#0f172a; --text-2:#475569; --text-muted:#5b6575; --text-faint:#7b8ba1;
  --border:#e3e7ee; --border-strong:#cbd5e1; --border-blue:#bfd3f2;
  /* thuong hieu */
  --primary:#1f4e8c; --primary-dark:#163863; --primary-light:#eaf1fb; --primary-text:#1f4e8c;
  --blue-bg:#dbeafe; --blue-bg-soft:#eff6ff; --blue-fg:#1e3a8a; --blue-fg-2:#1d4ed8; --blue-link:#2563eb;
  /* trang thai */
  --red:#d7373f; --red-bg:#fee2e2; --red-bg-soft:#fef2f2; --red-fg:#b91c1c; --red-border:#fecaca;
  --yellow:#b8860b; --yellow-bg:#fef3c7; --yellow-bg-soft:#fffbeb; --yellow-fg:#92400e; --yellow-border:#fde68a;
  --green:#1c7c4d; --green-bg:#d1fae5; --green-bg-soft:#e8f7ee; --green-fg:#065f46; --green-border:#bbf7d0;
  --indigo-bg:#eef2ff; --indigo-fg:#3730a3; --purple-bg:#ede9fe; --teal-bg-soft:#f0fdfa; --teal-border:#ccfbf1;
  /* menu ben trai */
  --sidebar-bg:#132437; --sidebar-text:#c3cedd; --sidebar-active:#1f4e8c;
  /* bo goc: xs<sm<md<(mac dinh)<lg<xl<xxl<pill */
  --r-sm:6px; --r-md:8px; --radius:10px; --r-lg:12px; --r-xl:14px; --r-xxl:20px; --r-pill:999px;
  /* bong do */
  --shadow-sm:0 1px 3px rgba(15,23,42,.06); --shadow-md:0 3px 10px rgba(15,23,42,.09); --shadow-lg:0 8px 24px rgba(15,23,42,.18);
}

#app{display:flex; min-height:100vh;}
#sidebar{
  width:230px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-text);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:1030;
}
#sidebar .brand{padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.08);}
#sidebar .brand .title{font-weight:700; color:#fff; font-size:15px; line-height:1.3;}
#sidebar .brand .subtitle{font-size:11px; color:#8fa0b8; margin-top:2px;}
#sidebar nav{flex:1; overflow-y:auto; padding:10px 0;}
/* Thanh cuon menu: mong, bo tron, mau mo tren nen toi - sang len khi re chuot (thay thanh trang day mac dinh cua trinh duyet). */
#sidebar nav{scrollbar-width:thin;}
#sidebar nav:hover{scrollbar-color:rgba(255,255,255,.38) transparent;}
#sidebar nav::-webkit-scrollbar{width:8px;}
#sidebar nav::-webkit-scrollbar-track{background:transparent;}
#sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:var(--r-md); border:2px solid transparent; background-clip:content-box;}
#sidebar nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.38); background-clip:content-box;}
#sidebar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.6); background-clip:content-box;}
#sidebar .sidebar-footer{border-top:1px solid rgba(255,255,255,.08); padding:8px; position:relative;}
#sidebar .sidebar-user{width:100%; display:flex; align-items:center; gap:10px; background:none; border:none; border-radius:10px; padding:8px; color:var(--sidebar-text); text-align:left; cursor:pointer;}
#sidebar .sidebar-user:hover, #sidebar .sidebar-user[aria-expanded=true]{background:rgba(255,255,255,.08); color:#fff;}
#sidebar .sidebar-user-avatar{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;}
#sidebar .sidebar-user-initial{display:inline-flex; align-items:center; justify-content:center; background:#3b6fb6; color:#fff; font-weight:700; font-size:14px;}
#sidebar .sidebar-user-text{display:flex; flex-direction:column; min-width:0; line-height:1.25;}
#sidebar .sidebar-user-name{font-size:13px; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#sidebar .sidebar-user-sub{font-size:11px; color:#8fa0b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#sidebar .sidebar-user > .bi{font-size:12px; color:#8fa0b8; flex:none;}
.sidebar-user-menu{min-width:214px; border-radius:var(--r-lg); padding:6px; box-shadow:var(--shadow-lg);}
.sidebar-user-menu .sidebar-user-email{font-size:12.5px; color:#6b7280; padding:6px 10px 8px; word-break:break-all;}
.sidebar-user-menu .dropdown-item{border-radius:var(--r-md); padding:7px 10px; font-size:13.5px; display:flex; align-items:center;}
.sidebar-user-menu form{margin:0;}
#sidebar .nav-link{
  color:var(--sidebar-text); padding:10px 18px; font-size:13.5px; display:flex; align-items:center; gap:10px;
  border-left:3px solid transparent; cursor:pointer; white-space:nowrap;
}
#sidebar .nav-link i{font-size:16px; width:18px; text-align:center;}
#sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
#sidebar .nav-link.active{background:rgba(31,78,140,.35); border-left-color:#4d8fe0; color:#fff; font-weight:600;}

#sidebar .nav-group-toggle{width:100%; background:none; border:none; font:inherit;}
#sidebar .nav-group-toggle .chevron{font-size:11px; transition:transform .15s ease;}
#sidebar .nav-group-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg);}
#sidebar .nav-sublink{padding-left:46px; font-size:12.5px;}

#main{flex:1; min-width:0; margin-left:230px; display:flex; flex-direction:column; min-height:100vh;}
#topbar{
  background:var(--card); border-bottom:1px solid var(--border); padding:10px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:sticky; top:0; z-index:1020;
}
#topbar .page-title-group{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-right:auto; min-width:0;}
#topbar .page-title{font-weight:700; font-size:17px;}
#topbar .topbar-dept-quick{display:flex; gap:6px; flex-wrap:wrap;}
/* Man hinh rong: topbar LUON 1 hang - chi nhom tieu de + 4 nut duoc co lai / tu xuong dong BEN TRONG no; o chon tuan, chuong, ten nguoi dung giu nguyen kich thuoc (khong bi rot xuong hang). */
#topbar .topbar-tools{display:flex; align-items:center; gap:10px; flex:none;}
#topbar .topbar-tools .sp-wrap{width:170px;}
@media (min-width: 992px){
  #topbar{flex-wrap:nowrap;}
  #topbar .page-title-group{flex:1 1 0;}
}
#content{padding:18px 20px 40px; min-width:0;}

/* Sidebar tren dien thoai/man hinh hep: mac dinh AN (truot ra ngoai trai
   qua transform), chi hien khi bam nut hamburger (them vao #topbar, xem
   #sidebarToggle) - #main khong con margin-left danh cho sidebar vi sidebar
   gio la overlay (position:fixed de nguyen), khong day noi dung. Ap dung
   TOAN BO app (khong rieng tab Du an) vi sidebar la 1 phan cua _Layout dung
   chung - truoc day KHONG co breakpoint nao nen tren dien thoai sidebar
   230px cung chiem qua nua man hinh, khong dung duoc. */
#sidebarToggle{display:none; background:none; border:1px solid var(--border); border-radius:var(--r-md); width:34px; height:34px; align-items:center; justify-content:center; font-size:16px; color:var(--text); flex:none;}
#sidebarBackdrop{display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1029;}
@media (max-width: 991px){
  #sidebar{transform:translateX(-100%); transition:transform .2s ease, box-shadow .2s ease;}
  /* Do bong CHI khi menu dang mo - truoc day de san nen khi menu an van ro 1 dai xam o mep trai man hinh. */
  #sidebar.show{transform:translateX(0); box-shadow:2px 0 16px rgba(0,0,0,.15);}
  #main{margin-left:0;}
  #sidebarToggle{display:inline-flex;}
  body.sidebar-open #sidebarBackdrop{display:block;}
  body.sidebar-open{overflow:hidden;}
}

.kpi-card{position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; height:100%; min-height:100px;}
.kpi-card .label{font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.3px; padding-right:36px;}
.kpi-card .value{font-size:22px; font-weight:700; margin-top:4px; color:var(--text);}
.kpi-card .sub{font-size:12px; margin-top:4px;}
.kpi-card.red{border-left:4px solid var(--red);}
.kpi-card.yellow{border-left:4px solid var(--yellow);}
.kpi-card.green{border-left:4px solid var(--green);}
.kpi-card.primary{border-left:4px solid var(--primary);}
.kpi-card .icon-badge{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  background:var(--primary-light); color:var(--primary);
}
.kpi-card.red .icon-badge{background:var(--red-bg); color:var(--red);}
.kpi-card.yellow .icon-badge{background:var(--yellow-bg); color:var(--yellow);}
.kpi-card.green .icon-badge{background:var(--green-bg); color:var(--green);}
.kpi-detail-btn{
  margin-top:8px; font-size:11.5px; font-weight:700; color:var(--primary); background:none; border:none; padding:0;
  display:inline-flex; align-items:center; gap:2px; cursor:pointer;
}
.kpi-detail-btn:hover{text-decoration:underline;}
.kpi-card.red .kpi-detail-btn{color:var(--red);}
.kpi-card.yellow .kpi-detail-btn{color:var(--yellow);}

.kpi-group-box{
  background:rgba(31,78,140,.035); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 12px 14px; margin-bottom:14px;
}
.kpi-group-title{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted);
  margin:0 4px 10px; display:flex; align-items:center; gap:6px;
}
.kpi-group-title i{font-size:13px;}

.issue-item{border:1px solid var(--border); border-left:4px solid var(--red); border-radius:var(--r-md); padding:10px 14px; margin-bottom:8px; background:var(--surface);}
.issue-item.yellow{border-left-color:var(--yellow);}
.issue-item .meta{font-size:11px; color:var(--text-muted); margin-top:3px;}

.login-card{max-width:380px; margin:10vh auto 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px 26px;}

.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; height:100%; min-width:0;}
.panel .panel-title{font-weight:700; font-size:14.5px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;text-transform: uppercase;}
.panel .panel-title > .btn, .panel .panel-title > div{white-space:nowrap;}
.panel .panel-title small{font-weight:400; color:var(--blue-fg); font-size:15px;margin-left: 8px;}

.badge-status{font-size:11px; font-weight:600; padding:4px 9px; border-radius:var(--r-xxl);}
.badge-red{background:var(--red-bg); color:var(--red);}
.badge-yellow{background:var(--yellow-bg); color:var(--yellow);}
.badge-green{background:var(--green-bg); color:var(--green);}
.badge-neutral{background:var(--surface-3); color:var(--text-2);}

/* Tab "Báo cáo dự án" (Views/Shared/Components/ProjectReport/Default.cshtml) -
   bang Workload (badge nho + thanh trang thai 3 mau) va legend chung. */
.pr-mini-badge{font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:var(--r-xxl); white-space:nowrap; display:inline-flex; align-items:center; gap:4px;}
.pr-mini-task{background:var(--purple-bg); color:var(--indigo-fg);}
.pr-mini-time{background:var(--yellow-bg-soft); color:var(--yellow-fg);}
.pr-status-bar-wrap{min-width:150px;}
.pr-status-labels{display:flex; font-size:11px; font-weight:700; margin-bottom:2px;}
.pr-status-labels span{text-align:center;}
.pr-lbl-done{color:var(--green);} .pr-lbl-active{color:#3b82f6;} .pr-lbl-other{color:#c9791a;}
.pr-status-bar{display:flex; height:8px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-3);}
.pr-seg-done{background:var(--green);} .pr-seg-active{background:#3b82f6;} .pr-seg-other{background:#f0a83c;}
.pr-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-2); justify-content:center;}
.pr-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px;}

/* min-width:max-content (khong chi width:100%) - khi bang co NHIEU cot
   nowrap (vd Dieu hanh 12 cot, Barista...) khong du cho o container hep,
   bang PHAI duoc phep rong hon 100% de .table-scroll (overflow-x:auto) cuon
   ngang duoc; neu chi width:100%, trinh duyet se ep noi dung cac o nowrap
   chong len nhau/bi cat thay vi cuon. */
table.dt-wrap{font-size:13px; margin-bottom:0; width:100%; min-width:max-content;}
.dt-wrap thead th{
  background:var(--surface-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.2px; color:var(--text-muted);
  border-bottom:2px solid var(--border); position:sticky; top:0;
}
.dt-wrap tbody td{vertical-align:top; white-space:nowrap; padding:8px 10px;}
/* pre-line: giu xuong dong that su (Alt+Enter trong Excel), khac normal se
   gop tat ca thanh 1 dong dai. */
.dt-wrap tbody td.wrap-cell{white-space:pre-line; word-break:break-word; max-width:340px; line-height:1.4;}
.table-scroll{max-height:520px; overflow-x:auto; overflow-y:auto; max-width:100%; border:1px solid var(--border); border-radius:var(--r-sm);}
/* Cot "Du an" trong danh sach du an - ten qua dai (khong gioi han do dai luc
   nhap) se RUT GON bang "..." thay vi keo dai ca dong/bang ra vo tan - hover
   xem day du qua thuoc tinh title="". Chi ap dung o day (khong dung chung
   .dt-wrap tbody td vi cac bang bao cao khac van muon cuon ngang binh thuong). */
.project-title-cell{display:inline-block; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;}
.dt-wrap tfoot .dt-total-row td{font-weight:700; background:var(--surface-2); border-top:2px solid var(--border); white-space:nowrap;padding-left: 10px;}
.dt-toolbar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;}
.dt-toolbar .dt-search{max-width:220px;}

/* Tab Barista - 4 bang co ty le cot RIENG (khong dung mac dinh cua _SimpleTable
   dung chung) vi table-layout:auto de cac cot "wrap" (noi dung dai, nhieu
   gach dau dong) bi ep chat trong max-width:340px chung trong khi cot ngan
   (Trang thai/Ky bao cao...) thua nhieu khoang trong - table-layout:fixed +
   % rieng cho tung cot giai quyet dung van de nay.
   min-width CUA MOI BANG = tong px can thiet do THAT (do bang
   getBoundingClientRect() luc table-layout:auto, cot ngan + ~15px dem, cot
   wrap ~120-280px tuy do dai header/noi dung) - PHAI dat rieng, khong chi
   dua vao % + .dt-wrap{min-width:max-content} chung, vi table-layout:fixed
   can 1 nguon chieu rong CU THE de % co y nghia. Neu container hep hon so
   nay, .table-scroll (overflow-x:auto) se tu cuon ngang thay vi ep header
   nowrap chong len nhau. */
.barista-vanhanh-table table{table-layout:fixed; min-width:1380px;}
.barista-truyenthong-table table{table-layout:fixed; min-width:1360px;}
.barista-rdcamquan-table table{table-layout:fixed; min-width:1080px;}
.barista-congviec-table table{table-layout:fixed; min-width:830px;}
.barista-vanhanh-table .wrap-cell,
.barista-truyenthong-table .wrap-cell,
.barista-rdcamquan-table .wrap-cell,
.barista-congviec-table .wrap-cell{max-width:none;}
/* Luoi an toan: neu van con lech vai px o vien lam tron, cat gon bang "..."
   thay vi de chu tran/chong len o ben canh (tung xay ra truoc khi co
   min-width rieng o tren). */
.barista-vanhanh-table th,
.barista-truyenthong-table th,
.barista-rdcamquan-table th,
.barista-congviec-table th{overflow:hidden; text-overflow:ellipsis;}

/* Van hanh trung tam (9 cot, tong 1380px): Ky bao cao|Loai|Nhom san pham|
   Thoi gian|Doi tuong KH|Phong ban phoi hop|Trang thai|Ket qua|Kho khan-Ghi chu */
.barista-vanhanh-table th:nth-child(1){width:9%;}
.barista-vanhanh-table th:nth-child(2){width:5%;}
.barista-vanhanh-table th:nth-child(3){width:15%;}
.barista-vanhanh-table th:nth-child(4){width:11%;}
.barista-vanhanh-table th:nth-child(5){width:16%;}
.barista-vanhanh-table th:nth-child(6){width:12%;}
.barista-vanhanh-table th:nth-child(7){width:9%;}
.barista-vanhanh-table th:nth-child(8){width:9%;}
.barista-vanhanh-table th:nth-child(9){width:14%;}

/* Truyen thong (9 cot, tong 1360px): Ky bao cao|Noi dung|Danh sach cong
   thuc|Thoi gian|So cong thuc|So buoi ket hop SX|Trang thai|Ket qua|Kho
   khan-Ghi chu */
.barista-truyenthong-table th:nth-child(1){width:10%;}
.barista-truyenthong-table th:nth-child(2){width:15%;}
.barista-truyenthong-table th:nth-child(3){width:12%;}
.barista-truyenthong-table th:nth-child(4){width:11%;}
.barista-truyenthong-table th:nth-child(5){width:9%;}
.barista-truyenthong-table th:nth-child(6){width:11%;}
.barista-truyenthong-table th:nth-child(7){width:9%;}
.barista-truyenthong-table th:nth-child(8){width:9%;}
.barista-truyenthong-table th:nth-child(9){width:14%;}

/* RD cam quan (7 cot, tong 1080px): Ky bao cao|Hang muc RD & cam quan|Thoi
   gian|So mau-cong thuc|Trang thai|Ket qua|Kho khan-Ghi chu */
.barista-rdcamquan-table th:nth-child(1){width:12%;}
.barista-rdcamquan-table th:nth-child(2){width:20%;}
.barista-rdcamquan-table th:nth-child(3){width:14%;}
.barista-rdcamquan-table th:nth-child(4){width:13%;}
.barista-rdcamquan-table th:nth-child(5){width:9%;}
.barista-rdcamquan-table th:nth-child(6){width:12%;}
.barista-rdcamquan-table th:nth-child(7){width:20%;}

/* Cong viec khac (7 cot, tong 830px): Phong ban|Ky bao cao|Hang muc|Chi
   tieu|Thuc te|% dat|Tinh trang */
.barista-congviec-table th:nth-child(1){width:12%;}
.barista-congviec-table th:nth-child(2){width:13%;}
.barista-congviec-table th:nth-child(3){width:34%;}
.barista-congviec-table th:nth-child(4){width:9%;}
.barista-congviec-table th:nth-child(5){width:9%;}
.barista-congviec-table th:nth-child(6){width:10%;}
.barista-congviec-table th:nth-child(7){width:13%;}

.mini-chart-wrap{height:220px; margin-bottom:10px;}

.subtabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px;}
.subtabs a{
  border:none; background:none; padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--text-muted);
  border-bottom:2px solid transparent; text-decoration:none; display:inline-block;
}
.subtabs a.active{color:var(--primary); border-bottom-color:var(--primary);}

/* Submenu CAP 2 (vd trong tab "Báo cáo dự án": Theo dự án / Theo nhóm dự án) -
   nho hon .subtabs cap 1 de phan biet cap bac, khong co vien duoi ca dong. */
.subtabs-sm{display:flex; gap:4px; margin-bottom:14px; border-bottom:none;}
.subtabs-sm a{border:none; background:var(--surface-3); padding:5px 14px; font-size:12.5px; font-weight:600; color:var(--text-muted); border-radius:var(--r-pill); text-decoration:none; display:inline-block;}
.subtabs-sm a.active{color:#fff; background:var(--primary); border-bottom-color:transparent;}

/* Tab Admin - luoi checkbox phong ban (modal Them/Sua tai khoan). */
.dept-checkbox-list{display:flex; flex-wrap:wrap; gap:6px 16px; max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--r-md); padding:10px;}
.dept-checkbox-list label{display:flex; align-items:center; gap:6px; font-size:12.5px; margin:0; font-weight:400; cursor:pointer;}
.dept-checkbox-list.disabled{opacity:.5;}

/* search-picker.js - o tim kiem + phan trang thay cho <select> (dung chung
   toan app, xem wwwroot/js/search-picker.js). */
.sp-wrap{position:relative;}
.sp-dropdown{position:absolute; z-index:1070; top:100%; left:0; margin-top:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:6px;}
.sp-list{max-height:220px; overflow-y:auto; overflow-x:auto;}
.sp-item{padding:6px 10px; font-size:13px; border-radius:var(--r-sm); cursor:pointer; white-space:nowrap;}
.sp-item:hover{background:var(--bg);}
.sp-item.active{background:var(--primary-light); font-weight:600;}
.sp-empty{padding:8px 10px;}
.sp-pager{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 4px 2px; border-top:1px solid var(--border); margin-top:4px;}

/* Anh dai dien (tab Tai khoan) */
.avatar-thumb{width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none;}
.avatar-preview-lg{width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid var(--border); background:var(--bg);}
.avatar-initial{width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex:none;}
.avatar-initial-lg{width:72px; height:72px; border-radius:50%; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:24px; font-weight:600;}
.admin-actions{display:flex; gap:6px; white-space:nowrap;}

/* .panel mac dinh height:100% (hop ly khi xep NGANG nhieu panel cung hang,
   vd kpi-card) - nhung khi xep DOC nhieu panel lien tiep (vd trang chi tiet
   du an: panel tieu de -> tabs -> nhieu panel trong tab-content), moi panel
   lai co gang chiem 100% chieu cao con lai cua #content, day noi dung phia
   sau xuong rat xa/trong rong. Dung class nay o moi panel KHONG nam trong 1
   hang can deu chieu cao voi panel khac. */
.panel-auto{height:auto;}

/* Tab "Du an" - thanh tien do chi tieu (dung lai o ca bang lan Kanban),
   view-toggle Bang/Kanban, cot Kanban theo trang thai - xem
   QuanLyKeHoach_UI-Mockup_v10.html (progress-bar/kanban-col/kanban-card). */
.progress{height:6px; background:var(--surface-3); border-radius:var(--r-xxl); overflow:hidden; min-width:70px;}
.progress-bar{height:100%; background:var(--primary); border-radius:var(--r-xxl);}
.progress-bar.green{background:var(--green);}
.progress-bar.red{background:var(--red);}
.progress-wrap{display:flex; align-items:center; gap:6px;}
.progress-wrap .progress{flex:1 1 auto;}
.progress-pct{font-size:11px; color:var(--text-muted); flex:none; min-width:30px; text-align:right;}

/* The "Chi tieu" (Project/Detail.cshtml) dang the/card thay cho bang - moi
   chi tieu 1 the, icon rieng cho tung thong so (muc tieu/hien tai/cach tinh)
   thay vi cot bang kho doc tren man hinh hep. */
.metric-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; height:100%;}
.metric-card-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.metric-card-icon{width:32px; height:32px; border-radius:var(--r-md); background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:15px; flex:none;}
.metric-card-name{font-weight:600; flex:1 1 auto; min-width:0; overflow-wrap:break-word;}
.metric-card-actions{flex:none; display:flex; gap:4px;}
.metric-card-body{display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
.metric-stat{display:flex; align-items:center; gap:8px; font-size:13px;}
.metric-stat i{color:var(--text-muted); width:16px; text-align:center; flex:none;}
.metric-stat-label{color:var(--text-muted); flex:none;}
.metric-stat-value{font-weight:600; margin-left:auto; text-align:right;}
.metric-card-progress{display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px dashed var(--border);}
.metric-card-progress .progress{flex:1 1 auto;}
.metric-card-progress .progress-pct{font-weight:700; color:var(--text); min-width:42px;}

/* Tab "Nhat ky hoat dong" (Detail.cshtml) - the icon tron mau theo loai hanh
   dong, thay cho dong text don dieu truoc day (xem mockup tham khao: icon
   badge mau + ten nguoi/gio + dong mo ta in dam ben duoi). */
.activity-item{display:flex; gap:10px; padding:10px 4px; border-bottom:1px solid var(--border);}
.activity-item:last-child{border-bottom:none;}
.activity-icon{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; font-size:14px; color:#fff;}
.activity-icon.act-neutral{background:#94a3b8;}
.activity-icon.act-green{background:var(--green);}
.activity-icon.act-red{background:var(--red);}
.activity-icon.act-blue{background:#3b82f6;}
.activity-icon.act-yellow{background:#f59e0b;}
.activity-icon.act-purple{background:#8b5cf6;}
.activity-icon.act-teal{background:#14b8a6;}
.activity-body{flex:1 1 auto; min-width:0;}
.activity-meta{font-size:12px; color:var(--text-muted);}
.activity-meta strong{color:var(--text);}
.activity-detail{font-size:13px; margin-top:2px;}
.project-row{cursor:pointer;}
.section-title-sm{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; gap:6px;}
.section-title-sm i{font-size:13px;}
/* Khung tach biet TUNG MUC trong modal "Tao du an" (Chi tieu/Thanh vien/
   Lich bao cao/Tai lieu) - modal cang ngay cang dai (nhieu muc), can khung
   ro rang de nguoi dung de phan biet dang o muc nao, thay vi 1 khoi dai
   lien tuc. */
.cp-section{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 14px 12px;}
.cp-dyn-row{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:8px 8px 8px 10px; margin-left:0; margin-right:0;}
.member-avatars{display:inline-flex; align-items:center;}
.member-avatar{
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:#fff; margin-left:-8px; border:2px solid var(--card); flex:none;
}
.member-avatar:first-child{margin-left:0;}
.member-avatar.mc-0{background:#1c7c4d;} .member-avatar.mc-1{background:#b5590a;} .member-avatar.mc-2{background:#6d3fae;}
.member-avatar.mc-3{background:#1f4e8c;} .member-avatar.mc-4{background:#b8860b;} .member-avatar.mc-5{background:#d7373f;}
.member-avatar-more{background:#8896a8;}
.member-avatar-img{object-fit:cover; background:var(--card);}

/* Tab "Thanh vien" (Detail.cshtml, qua _ProjectMemberTable.cshtml) - moi
   thanh vien 1 hang the (avatar/anh that hoac chu cai dau + ten + chuc
   danh/phong ban + pill "Nhan bao cao"), port dung mockup tham khao
   (QuanLyKeHoach_UI-Mockup_v10.html: .member-row/.member-meta/userAvatar())
   thay cho bang liet ke don dieu truoc day. */
.member-row{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border);}
.member-row:last-child{border-bottom:none;}
.member-card-avatar{width:32px; height:32px; border-radius:var(--r-md); flex:none; object-fit:cover;}
.member-card-avatar-initial{display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700;}
.member-meta{flex:1 1 auto; min-width:0;}
.member-meta .name{font-weight:600; font-size:13px;}
.member-meta .role{font-size:11.5px; color:var(--text-muted);}
.upload-drop{border:1.5px dashed var(--border); border-radius:10px; padding:18px 10px; text-align:center; color:var(--text-muted); cursor:pointer; font-size:12.5px;}
.upload-drop:hover{border-color:var(--primary); color:var(--primary);}
.file-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.file-chip{display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-xxl); padding:4px 10px; font-size:11.5px;}
.file-chip button{border:none; background:none; color:var(--text-muted); padding:0; line-height:1; cursor:pointer;}
.file-chip button:hover{color:var(--red);}

/* Nhan nho mau trung tinh - dung o nhieu noi (kanban count, cach tinh chi
   tieu trong "Nop bao cao", ky bao cao gan vao binh luan...). Da duoc THAM
   CHIEU trong project-list.js (Kanban) tu truoc nhung chua co CSS - dinh
   nghia luon tai day. */
.tag-quiet{font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--border); color:var(--text-muted); display:inline-block;}

/* Tab "Bao cao" (Epic 3) - the 1 bao cao da nop. */
.report-card{border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px;}
.report-card:last-child{margin-bottom:0;}
.report-metric-values{display:flex; flex-wrap:wrap; gap:6px;}

/* Tab "Binh luan & chi dao" (Epic 4) - the 1 gop y/chi dao. "directive" vien
   trai mau canh bao de noi bat hon gop y thuong (khong the bi luot qua). */
.comment-item{border:1px solid var(--border); border-left:3px solid var(--border); border-radius:var(--r-md); padding:10px 12px; margin-bottom:10px;}
.comment-item:last-child{margin-bottom:0;}
.comment-item.comment-directive{border-left-color:var(--yellow);}
.comment-content{font-size:13px; margin-top:4px;}

/* Bug da tim thay: MOI modal trong app deu boc header/body/footer trong 1
   the <form> (khuon chung, xem vd metricEditModal/memberAddModal...) - voi
   modal THUONG (khong .modal-dialog-scrollable) dieu nay vo hai vi noi dung
   luon vua man hinh. Nhung .modal-dialog-scrollable can .modal-body la FLEX
   ITEM TRUC TIEP cua .modal-content (Bootstrap dat flex:1 1 auto cho no) de
   tu co lai va CUON RIENG, giu header/footer co dinh - <form> chen giua pha
   vo chuoi flex nay (form mac dinh display:block), khien .modal-body TRAN
   RA het chieu cao that su cua no thay vi cuon, day nut o modal-footer (vd
   "Tao du an") ra NGOAI vung nhin thay duoc tren man hinh thap (laptop
   14 inch, dp cao...) - da tai hien va xac nhan bang do dac truc tiep.
   CHI anh huong modal co modal-dialog-scrollable (modal Tao du an/Dat lich)
   nen khong dung cham gi cac modal con lai. */
.modal-dialog-scrollable .modal-content > form{display:flex; flex-direction:column; min-height:0; overflow:hidden;}
.modal-dialog-scrollable .modal-content > form > .modal-body{flex:1 1 auto; min-height:0;}

/* Tab Check Log file - popup "Tao thu muc & tai file len". */
.folder-tree{max-height:320px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--r-md); padding:10px;}
.folder-tree-year{margin-bottom:8px;}
.folder-tree-year-label{font-weight:600; font-size:12.5px; color:var(--text-muted); margin-bottom:4px;}
.folder-tree-weeks{list-style:none; margin:0; padding-left:18px;}
.folder-tree-week-row{display:flex; align-items:center; gap:2px;}
.folder-tree-week-btn{display:block; flex:1; text-align:left; background:none; border:none; padding:3px 8px; font-size:12.5px; color:var(--text); border-radius:var(--r-sm);}
.folder-tree-week-btn:hover{background:var(--bg);}
.folder-tree-week-btn.active{background:var(--sidebar-bg); color:#fff;}
.folder-tree-week-delete{flex:none; background:none; border:none; padding:3px 6px; font-size:12px; color:var(--red); border-radius:var(--r-sm); opacity:.6;}
.folder-tree-week-delete:hover{opacity:1; background:var(--red-bg);}
.checklog-existing-list{list-style:none; margin:0 0 8px; padding:0; max-height:110px; overflow-y:auto; font-size:12.5px;}
.checklog-existing-list li{padding:2px 0;}

/* Chuong thong bao tren topbar (_Layout.cshtml, wwwroot/js/notifications.js) */
.notif-badge{
  position:absolute; top:-2px; right:-4px; background:var(--red); color:#fff; border-radius:var(--r-xxl);
  font-size:10px; font-weight:700; line-height:1; padding:2.5px 5px; min-width:16px; text-align:center;
}
.notif-dropdown{width:340px; max-height:420px; overflow-y:auto; padding:0;}
.notif-item{display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; position:relative;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--surface-2);}
.notif-item-unread{background:var(--primary-light);}
.notif-item-icon{font-size:16px; flex:none; margin-top:2px;}
.notif-item-body{flex:1 1 auto; min-width:0;}
.notif-item-content{font-size:12.5px; color:var(--text); white-space:normal;}
.notif-item-time{font-size:11px; color:var(--text-muted); margin-top:2px;}
.notif-item-dot{width:8px; height:8px; border-radius:50%; background:var(--primary); flex:none; margin-top:5px;}
.notif-blue{color:#3b82f6;} .notif-red{color:var(--red);} .notif-green{color:var(--green);}
.notif-yellow{color:#f59e0b;} .notif-neutral{color:var(--text-muted);}

.dt-pagination{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12.5px; flex-wrap:wrap; gap:8px;}
.dt-pagination .btns{display:flex; align-items:center; gap:6px;}
/* Tab Tong quan (dashboard) */
.tq-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl); padding:18px 20px; height:100%;}
.tq-donut{width:120px; height:120px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;}
.tq-donut-hole{width:82px; height:82px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1;}
.tq-donut-hole strong{font-size:22px;}
.tq-donut-hole span{font-size:10px; color:var(--text-muted);}
.tq-legend div{font-size:14px; margin:3px 0; display:flex; align-items:center; gap:8px;}
.tq-legend b{min-width:22px; text-align:right;}
.tq-legend i, .tq-legend-row i{display:inline-block; width:12px; height:12px; border-radius:3px;}
.tq-kpi-label{font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase;}
.tq-kpi-value{font-size:40px; font-weight:800; line-height:1.1; margin-top:6px;}
.tq-title{font-size:18px; font-weight:800; display:flex; align-items:center; gap:10px;}
.tq-sub{font-size:12.5px; color:var(--text-muted); margin:4px 0 14px;}
.tq-num{display:inline-flex; width:26px; height:26px; border-radius:50%; background:#12203a; color:#fff; font-size:13px; align-items:center; justify-content:center; flex:none;}
.tq-num.red{background:var(--red);}
.tq-num.yellow{background:var(--yellow);}
.tq-num.green{background:var(--green);}
.tq-dept{display:grid; grid-template-columns:150px 1fr ; align-items:center; gap:10px; margin-bottom:9px; cursor:pointer; border-radius:var(--r-md); padding:4px 6px; margin-left:-6px; margin-right:-6px;}
.tq-dept:hover{background:var(--surface-3);}
.tq-dept-name{font-weight:700; font-size:14px;}
.tq-dept-name small{color:var(--text-muted); font-weight:400; margin-left:4px;}
.tq-bar{display:flex; height:26px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-3);}
.tq-bar span{color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; min-width:22px;}
.tq-dept-pct{text-align:right; font-weight:700; color:#d9822b;}
.tq-dept-pct.ok{color:var(--green);}
.tq-legend-row{display:flex; gap:16px; font-size:12px; color:var(--text-muted); margin-top:10px; flex-wrap:wrap;}
.tq-legend-row span{display:inline-flex; align-items:center; gap:6px;}
.tq-pending{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--border);}
.tq-pending:last-child{border-bottom:0;}
.tq-pending-title{font-weight:600; font-size:14px; line-height:1.4;}
.tq-pending-meta{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; color:var(--text-muted);}
.tq-pending-meta .urgent{color:var(--red); font-weight:600;}
.tq-tag{background:var(--blue-bg-soft); color:var(--primary-text); font-size:12px; font-weight:600; padding:3px 12px; border-radius:var(--r-xxl); white-space:nowrap;}
.tq-red{background:var(--surface); border:1px solid var(--red-border); border-top:4px solid var(--red); border-radius:var(--r-xl); padding:14px 16px; height:100%; display:flex; flex-direction:column; gap:10px; box-shadow:0 1px 3px rgba(215,55,63,.08);}
.tq-red-head{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.tq-red-title{font-weight:700; font-size:15px; display:flex; gap:8px; align-items:flex-start; line-height:1.35;}
.tq-red-pct{color:var(--red); background:var(--red-bg); font-weight:800; font-size:14px; padding:2px 10px; border-radius:var(--r-xxl); white-space:nowrap;}
.tq-red-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12.5px; color:var(--text-muted);}
.tq-red-meta i{margin-right:3px;}
.tq-red-block{font-size:13px; line-height:1.45; background:var(--surface-3); border-left:3px solid var(--border-strong); border-radius:var(--r-sm); padding:7px 10px; white-space:pre-line;}
.tq-red-block.suggest{background:var(--blue-bg-soft); border-left-color:var(--primary);}
.tq-red-block.decision{background:var(--yellow-bg-soft); border-left-color:var(--yellow);}
.tq-red-block.note{background:var(--surface-3); color:var(--text-muted); font-size:12.5px;}
.tq-red-label{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px;}

/* Popup "Chi tiet phong ban" (_TongQuanDeptDetail.cshtml) - CUNG khung voi
   .tq-red (dung chung .tq-red-head/.tq-red-title/.tq-red-meta/.tq-red-block)
   nhung mau khung/% doi theo TRANG THAI tung hang muc, khong luon do. */
.tq-item{background:var(--surface); border:1px solid var(--border); border-top:4px solid var(--border-strong); border-radius:var(--r-xl); padding:14px 16px; height:100%; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm);}
.tq-item.st-red{border-color:var(--red-border); border-top-color:var(--red); box-shadow:0 1px 3px rgba(215,55,63,.08);}
.tq-item.st-yellow{border-color:var(--yellow-border); border-top-color:var(--yellow); box-shadow:0 1px 3px rgba(184,134,11,.08);}
.tq-item.st-green{border-color:var(--green-border); border-top-color:var(--green); box-shadow:0 1px 3px rgba(28,124,77,.08);}
.tq-item-pct{font-weight:800; font-size:14px; padding:2px 10px; border-radius:var(--r-xxl); white-space:nowrap; background:var(--surface-3); color:var(--text-2);}
.tq-item.st-red .tq-item-pct{color:var(--red); background:var(--red-bg);}
.tq-item.st-yellow .tq-item-pct{color:var(--yellow); background:var(--yellow-bg);}
.tq-item.st-green .tq-item-pct{color:var(--green); background:var(--green-bg);}
.tq-pending-suggest{grid-column:1 / -1; font-size:12.5px; line-height:1.45; background:var(--blue-bg-soft); border-left:3px solid var(--primary); border-radius:var(--r-sm); padding:6px 10px; white-space:pre-line;}

/* Tab "Hạng mục" (Views/Project/_ProjectTasksTab.cshtml) */
.task-table .task-phase td{background:var(--phase-bg, var(--surface-3)); cursor:pointer; user-select:none;}
.task-table .task-phase .task-phase-chev{display:inline-block; width:16px; transition:transform .15s;}
.task-table .task-phase.closed .task-phase-chev{transform:rotate(-90deg);}
.task-table .task-quick-row td{background:var(--surface-2);}
.task-avs{display:inline-flex; align-items:center;}
.task-av{width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; border:2px solid var(--surface); margin-left:-7px; object-fit:cover; background:var(--primary);}
.task-avs .task-av:first-child{margin-left:0;}
.task-av-more{background:var(--track); color:var(--text-2);}
.task-assignee-chips{display:flex; flex-wrap:wrap; gap:6px;}
.task-chip{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); border-radius:var(--r-xxl); padding:3px 10px; font-size:12.5px; cursor:pointer; margin:0; background:var(--surface);}
.task-chip:has(input:checked){background:var(--primary-light); border-color:var(--primary); color:var(--primary); font-weight:600;}
.task-chip input{margin:0;}
.phase-color-opt{width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; display:inline-flex; margin:0; box-shadow:0 0 0 1px var(--border);}
.phase-color-opt input{opacity:0; position:absolute; pointer-events:none;}
.phase-color-opt:has(input:checked){border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light);}
.task-hist-item{border-left:2px solid var(--border); padding:2px 0 8px 12px; margin-left:4px; font-size:13px;}
.report-task-updates{background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-md); padding:6px 10px;}

/* Thanh keo % (tab Hang muc + form nop bao cao): nut keo tron chua so */
.pct-slider{display:flex; align-items:center; gap:10px; min-width:0;}
.pct-track{position:relative; flex:1 1 auto; min-width:110px; height:28px; display:flex; align-items:center;}
.pct-track input[type=range]{--p:0%; -webkit-appearance:none; appearance:none; width:100%; height:10px; margin:0; border-radius:var(--r-pill); outline:none; cursor:pointer; border:1.5px solid #3b82f6;
  background:linear-gradient(to right,#3b82f6 0,#3b82f6 var(--p),var(--surface) var(--p),var(--surface) 100%);}
.pct-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#3b82f6; border:2px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.3);}
.pct-track input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#3b82f6; border:2px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.3);}
.pct-slider-val{position:absolute; top:50%; left:13px; transform:translate(-50%,-50%); width:26px; text-align:center; color:#fff; font-size:11px; font-weight:700; pointer-events:none; line-height:1;}
.pct-slider-save{flex:0 0 auto; padding:2px 10px; font-size:12px;}
.report-group .panel-title{font-weight:600;}

/* ===== Mau sac cho cac nhom / tieu de ===== */
.report-group{border-top:3px solid #3b82f6;}
.report-group.rg-green{border-top-color:#10b981;}
.report-group .panel-title span{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--blue-fg);}
.report-group .panel-title span i{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-md); background:var(--blue-bg); color:var(--blue-link); font-size:14px; margin:0 !important;}
.report-group.rg-green .panel-title span{color:var(--green-fg);}
.report-group.rg-green .panel-title span i{background:var(--green-bg); color:var(--green-fg);}
.report-group .cp-section{background:var(--surface-3); border-color:var(--border-blue);}
.report-group.rg-green .cp-section{background:var(--surface-3); border-color:var(--green-border);}
#tab-tasks .panel-title > span{font-weight:700; color:var(--blue-fg);}
#tab-tasks .panel-title > span i{color:var(--blue-link);}
.task-table thead th{background:var(--blue-bg-soft); color:var(--blue-fg);}
.task-table .task-phase td{border-left:4px solid #3b82f6;}

/* ===== Tab Hang muc tren dien thoai: moi hang muc thanh 1 the ===== */

/* ===== Giao dien thong nhat cho TAT CA tab trong du an ===== */
#tab-overview{--acc:#3b82f6; --acc-bg:#dbeafe; --acc-fg:#2563eb; --acc-title:#1e3a8a;}
#tab-documents{--acc:#f59e0b; --acc-bg:#fef3c7; --acc-fg:#d97706; --acc-title:#78350f;}
#tab-members{--acc:#8b5cf6; --acc-bg:#ede9fe; --acc-fg:#7c3aed; --acc-title:#4c1d95;}
#tab-tasks{--acc:#3b82f6; --acc-bg:#dbeafe; --acc-fg:#2563eb; --acc-title:#1e3a8a;}
#tab-reports{--acc:#3b82f6; --acc-bg:#dbeafe; --acc-fg:#2563eb; --acc-title:#1e3a8a;}
#tab-comments{--acc:#ec4899; --acc-bg:#fce7f3; --acc-fg:#db2777; --acc-title:#831843;}
#tab-activity{--acc:#14b8a6; --acc-bg:#ccfbf1; --acc-fg:#0d9488; --acc-title:#134e4a;}
.report-group{--acc:#3b82f6; --acc-bg:#dbeafe; --acc-fg:#2563eb; --acc-title:#1e3a8a;}
.report-group.rg-green{--acc:#10b981; --acc-bg:#d1fae5; --acc-fg:#059669; --acc-title:#065f46;}
.tab-pane .panel{border-top:3px solid var(--acc, var(--border));}
.tab-pane .panel .panel-title > span{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--acc-title, inherit);}
.tab-pane .panel .panel-title > span > i{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-md); background:var(--acc-bg); color:var(--acc-fg); font-size:14px; margin:0 !important;}
.tab-pane .metric-card{border-top:3px solid var(--acc); }
.tab-pane .metric-card-icon{background:var(--acc-bg); color:var(--acc-fg);}
.tab-pane .member-row{border-left:3px solid var(--acc); background:var(--surface-2); border-radius:var(--r-md); margin-bottom:6px;}
#tab-comments .comment-item{border-left-color:var(--acc); background:var(--surface-2);}
#tab-comments .comment-item.comment-directive{border-left-color:#f59e0b; background:var(--yellow-bg-soft);}
#tab-documents .attachment-item{border-left:3px solid var(--acc); padding-left:10px; background:var(--surface-3); margin-bottom:6px; border-radius:var(--r-sm);}
#tab-documents .upload-drop{border-color:var(--acc); background:var(--yellow-bg-soft); color:var(--acc-fg);}
#tab-activity .activity-item{border-left:3px solid var(--acc); padding-left:12px; margin-bottom:4px;}
#tab-overview .panel .p-3 .d-flex.border-bottom .text-muted i{color:var(--acc-fg);}

/* Thanh tab: co mau, tren dien thoai vuot ngang */
#projectDetailTabs .nav-link{font-weight:600; color:var(--text-2);}
#projectDetailTabs .nav-link.active{color:var(--blue-fg-2); border-bottom:3px solid #3b82f6;}
@media (max-width: 767.98px){
  #projectDetailTabs{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  #projectDetailTabs::-webkit-scrollbar{display:none;}
  #projectDetailTabs .nav-link{white-space:nowrap; padding:8px 12px;}
  .tab-pane .panel .panel-title > .btn{white-space:normal;}
  .tab-pane .member-row{flex-wrap:wrap;}
  .tab-pane .attachment-item{flex-wrap:wrap; gap:6px;}
  .tab-pane .attachment-item a{max-width:100% !important;}
  .tab-pane .comment-item .comment-content{overflow-wrap:anywhere;}
  #tab-overview .d-flex.justify-content-between.py-1{flex-wrap:wrap; gap:2px 12px;}
}

/* ===== Lam dep lai: Tong quan / Thanh vien / Hang muc ===== */
.tab-pane .panel{box-shadow:var(--shadow-sm); border-radius:var(--r-lg);}
.tab-pane .panel .panel-title{text-transform:none; letter-spacing:0; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--border);}

/* --- Tong quan --- */
.ov-desc{--acc:#64748b; --acc-bg:#e2e8f0; --acc-fg:#475569; --acc-title:#1e293b;}
.ov-metrics{--acc:#3b82f6;}
.ov-info{--acc:#0ea5e9; --acc-bg:#e0f2fe; --acc-fg:#0284c7; --acc-title:#0c4a6e;}
.ov-sched{--acc:#14b8a6; --acc-bg:#ccfbf1; --acc-fg:#0d9488; --acc-title:#134e4a;}
.ov-info .p-3 > .d-flex{align-items:center; padding:9px 0 !important;}
.ov-info .p-3 > .d-flex > .text-muted{display:inline-flex; align-items:center; gap:8px; font-weight:500;}
.ov-info .p-3 > .d-flex > .text-muted i{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:var(--acc-bg); color:var(--acc-fg); margin:0 !important;}
.ov-info .p-3 > .d-flex > span:last-child{font-weight:600; text-align:right;}
.ov-sched .p-3 > div{display:flex; align-items:center; gap:8px; background:var(--teal-bg-soft); border:1px solid var(--teal-border); border-radius:var(--r-md); padding:7px 10px; margin-bottom:6px !important;}
.ov-sched .p-3 > div i{color:var(--green-fg); margin:0 !important;}
.ov-sched .p-3 > div.text-muted{background:transparent; border:0; padding:2px 4px;}
.ov-metrics .metric-card{background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--border-blue); border-top:3px solid #3b82f6; border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.ov-metrics .metric-stat{background:var(--surface); border-radius:var(--r-sm); padding:3px 6px;}
.ov-metrics .metric-card-progress .progress{height:9px; border-radius:var(--r-pill);}
.ov-metrics .metric-card-progress .progress-pct{color:var(--blue-fg-2);}

/* --- Thanh vien --- */
.mg-owner{--acc:#8b5cf6; --acc-bg:#ede9fe; --acc-fg:#7c3aed; --acc-title:#4c1d95;}
.mg-part{--acc:#3b82f6; --acc-bg:#dbeafe; --acc-fg:#2563eb; --acc-title:#1e3a8a;}
.mg-watch{--acc:#64748b; --acc-bg:#e2e8f0; --acc-fg:#475569; --acc-title:#1e293b;}
.mg .mg-count{margin-left:6px; min-width:22px; padding:1px 8px; border-radius:var(--r-pill); background:var(--acc-bg); color:var(--acc-fg); font-size:12px; font-weight:700; text-align:center;}
.mg .member-row{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-left:3px solid var(--acc); border-radius:10px; background:var(--surface); margin-bottom:8px;}
.mg .member-row:last-child{margin-bottom:0;}
.mg .member-row:hover{background:var(--acc-bg);}
.mg .member-card-avatar{width:40px; height:40px; border-radius:50%; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--acc-bg); flex:none;}
.mg .member-meta{flex:1 1 auto; min-width:0;}
.mg .member-meta .name{font-weight:700; color:var(--acc-title);}
.mg .member-meta .role{font-size:12px; color:var(--text-muted);}
#tab-members .col-lg-4 .panel{--acc:#10b981; --acc-bg:#d1fae5; --acc-fg:#059669; --acc-title:#065f46;}

/* --- Hang muc --- */
#tab-tasks .kpi-card{border:1px solid transparent; border-left-width:4px; border-radius:var(--r-lg); min-height:84px; box-shadow:var(--shadow-sm);}
#tab-tasks .kpi-card.primary{background:var(--blue-bg-soft); border-color:var(--border-blue); border-left-color:#3b82f6;}
#tab-tasks .kpi-card.green{background:var(--green-bg-soft); border-color:var(--green-border); border-left-color:#10b981;}
#tab-tasks .kpi-card.red{background:var(--red-bg-soft); border-color:var(--red-border); border-left-color:#ef4444;}
#tab-tasks .kpi-card.yellow{background:var(--yellow-bg-soft); border-color:var(--yellow-border); border-left-color:#f59e0b;}
#tab-tasks .kpi-card .value{font-size:26px;}
#tab-tasks .task-table{border-collapse:separate; border-spacing:0;}
#tab-tasks .task-table thead th{font-size:12px; text-transform:uppercase; letter-spacing:.3px; border-bottom:2px solid var(--border-blue);}
#tab-tasks .task-table .task-phase td{font-size:13.5px; padding-top:9px; padding-bottom:9px; border-bottom:1px solid var(--border-blue);}
#tab-tasks .task-table tr.task-row:hover > td{background:var(--surface-3);}
#tab-tasks .task-table tr.task-row > td{vertical-align:middle; padding-top:10px; padding-bottom:10px;}
#tab-tasks .task-title-link{color:var(--blue-fg);}
#tab-tasks .task-av{box-shadow:0 0 0 2px var(--surface);}
@media (max-width: 767.98px){
  .tab-pane .panel{padding:12px;}
  .mg .member-row{padding:8px 10px;}
  .mg .member-card-avatar{width:36px; height:36px;}
  #tab-tasks .kpi-card .value{font-size:22px;}
}
.phase-chip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--r-pill); background:var(--green-bg); color:var(--green-fg); font-size:11.5px; font-weight:600;}
.phase-chip i{font-size:11px;}

/* ===== Dau trang chi tiet du an ===== */
.proj-head{position:relative; border-radius:var(--r-xl); border:1px solid var(--border-blue); background:linear-gradient(135deg,var(--blue-bg-soft) 0%,var(--surface) 55%); box-shadow:var(--shadow-md); overflow:visible;}
.proj-head::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:14px 0 0 14px; background:linear-gradient(180deg,#3b82f6,#8b5cf6);}
.proj-head-main{flex:1 1 320px; min-width:0; padding-left:6px;}
.proj-code{display:inline-flex; align-items:center; gap:2px; padding:2px 10px; border-radius:var(--r-sm); background:#1e3a8a; color:#fff; font-family:monospace; font-size:12px; font-weight:600; letter-spacing:.3px;}
.proj-title{margin:8px 0 10px; font-weight:800; color:var(--text-strong); line-height:1.3; overflow-wrap:anywhere;}
.proj-meta{display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-2); font-size:12.5px;}
.proj-prio-low{background:var(--track); color:var(--text-2);}
.proj-prio-normal{background:var(--blue-bg); color:var(--blue-fg-2);}
.proj-prio-high{background:var(--red-bg); color:var(--red-fg);}
.proj-progress{margin-top:14px; max-width:560px; padding:10px 14px 12px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--pp-soft); box-shadow:var(--shadow-md);}
.proj-progress-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--text-2);}
.proj-progress-head strong{font-size:26px; line-height:1; font-weight:800; color:var(--pp);}
.proj-progress-bar{height:16px; border-radius:var(--r-pill); background:var(--track); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.12);}
.proj-progress-fill{height:100%; min-width:6px; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--pp-light),var(--pp)); box-shadow:0 0 8px var(--pp-soft); transition:width .6s ease;}
.pp-low{--pp:#ef4444; --pp-light:#fca5a5; --pp-soft:#fecaca;}
.pp-mid{--pp:#f59e0b; --pp-light:#fcd34d; --pp-soft:#fde68a;}
.pp-good{--pp:#3b82f6; --pp-light:#93c5fd; --pp-soft:#bfdbfe;}
.pp-done{--pp:#10b981; --pp-light:#6ee7b7; --pp-soft:#a7f3d0;}
@media (max-width:767.98px){
  .proj-progress{max-width:none;}
  .proj-title{font-size:1.15rem;}
}

/* Dau trang: 2 cot (thong tin | tien do) */
.proj-head-main{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr); gap:16px 28px; align-items:center;}
.proj-head-main > .alert{grid-column:1 / -1;}
.proj-col-prog .proj-progress{margin-top:0; max-width:none;}
@media (max-width:991.98px){ .proj-head-main{grid-template-columns:1fr;} }

/* Bieu do "Ti le du an": doughnut + bang chu giai day du */
.pr-pie-wrap{position:relative; height:250px; margin-bottom:12px;}
.pr-pie-list{display:flex; flex-direction:column; gap:6px;}
.pr-pie-item{display:flex; align-items:center; gap:8px; font-size:13px;}
.pr-pie-dot{width:11px; height:11px; border-radius:50%; flex:none;}
.pr-pie-name{flex:0 0 118px; color:var(--text-2); font-weight:500;}
.pr-pie-bar{flex:1 1 auto; height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden;}
.pr-pie-bar > span{display:block; height:100%; border-radius:var(--r-pill);}
.pr-pie-count{flex:0 0 32px; text-align:right;}
.pr-pie-pct{flex:0 0 40px; text-align:right; color:var(--text-muted); font-size:12px;}
.pr-pie-total{margin-top:4px; padding-top:8px; border-top:1px dashed var(--border);}
.pr-pie-total .pr-pie-name{flex:1 1 auto; font-weight:700; color:var(--text-strong);}
@media (max-width:575.98px){ .pr-pie-name{flex-basis:92px;} .pr-pie-wrap{height:220px;} }

/* ===== Bao cao du an: Can chu y + Hieu suat thanh vien + modal chi tiet ===== */
.pr-attn-remind{--acc:#ef4444; --acc-bg:#fee2e2; --acc-fg:#dc2626; --acc-title:#7f1d1d;}
.pr-attn-load{--acc:#f59e0b; --acc-bg:#fef3c7; --acc-fg:#d97706; --acc-title:#78350f;}
.pr-perf{--acc:#6366f1; --acc-bg:#e0e7ff; --acc-fg:#4f46e5; --acc-title:#312e81;}
.pr-attn-count{margin-left:8px; min-width:24px; padding:1px 9px; border-radius:var(--r-pill); background:var(--acc); color:#fff; font-size:12px; font-weight:700; text-align:center;}
.pr-attn-list{display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; padding-right:4px;}
.pr-attn-item{padding:8px 10px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--acc);}
.pr-reasons{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px;}
.pr-reason{font-size:11.5px; padding:2px 8px; border-radius:var(--r-pill); background:var(--red-bg); color:var(--red-fg);}
.pr-reason-load{background:var(--yellow-bg); color:var(--yellow-fg);}
.pr-member-link{color:var(--blue-fg); text-decoration:none;}
.pr-member-link:hover{text-decoration:underline; color:var(--blue-link);}
.pr-perf-table thead th{white-space:nowrap; user-select:none;}
.pr-perf-table thead th[data-sort]:hover{color:var(--indigo-fg);}
.pr-perf-table thead th[data-dir="asc"]::after{content:" ▲"; font-size:9px;}
.pr-perf-table thead th[data-dir="desc"]::after{content:" ▼"; font-size:9px;}
.pr-perf-warn > td:first-child{box-shadow:inset 3px 0 0 #ef4444;}
.pr-chip{display:inline-block; padding:1px 8px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; margin-left:3px;}
.pr-chip-red{background:var(--red-bg); color:var(--red-fg);} .pr-chip-amber{background:var(--yellow-bg); color:var(--yellow-fg);} .pr-chip-green{background:var(--green-bg); color:var(--green-fg);}
.pr-mini-stack{display:flex; height:8px; width:90px; border-radius:var(--r-pill); overflow:hidden; background:var(--track);}
.pr-mini-stack .s-done{background:#10b981;} .pr-mini-stack .s-doing{background:#3b82f6;} .pr-mini-stack .s-todo{background:#cbd5e1;}
.md-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.md-avatar{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none;}
.md-avatar-initial{display:inline-flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; font-size:22px; font-weight:700;}
.md-name{font-size:18px; font-weight:800; color:var(--text-strong);}
.md-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin-bottom:16px;}
.md-kpi{background:var(--blue-bg-soft); border:1px solid var(--border-blue); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column;}
.md-kpi span{font-size:11.5px; color:var(--text-2); font-weight:600;} .md-kpi strong{font-size:20px; color:var(--blue-fg); line-height:1.2;} .md-kpi small{font-size:11px; color:var(--text-muted);}
.md-kpi.md-bad{background:var(--red-bg-soft); border-color:var(--red-border);} .md-kpi.md-bad strong{color:var(--red-fg);}
.md-section{font-weight:700; color:var(--blue-fg); margin:6px 0 8px; display:flex; align-items:center; gap:6px; padding-bottom:4px; border-bottom:1px solid var(--border);}
.md-table th{font-size:11.5px; color:var(--text-2); white-space:nowrap;}
.md-row{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--border); flex-wrap:wrap;}

/* ===== Bao cao du an tren dien thoai: bang -> the ===== */
@media (max-width: 767.98px){
  .pr-workload-table, .pr-workload-table tbody, .pr-perf-table, .pr-perf-table tbody{display:block; width:100%;}
  .pr-workload-table thead, .pr-perf-table thead{display:none;}
  .table-scroll:has(.pr-workload-table), .table-scroll:has(.pr-perf-table){max-height:none; border:0; overflow:visible;}
  .pr-workload-table tr, .pr-perf-table tr{display:block; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border-blue); border-radius:10px; padding:10px 12px; margin-bottom:10px;}
  .pr-perf-table tr.pr-perf-warn{border-left-color:#ef4444;}
  .pr-workload-table td, .pr-perf-table td{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0 !important; border:0; background:transparent; text-align:left; white-space:normal !important;}
  .pr-workload-table td:first-child, .pr-perf-table td:first-child{display:block; padding-bottom:8px !important; margin-bottom:4px; border-bottom:1px dashed var(--border) !important; box-shadow:none;}
  .pr-workload-table td::before, .pr-perf-table td::before{flex:0 0 108px; font-size:11.5px; font-weight:600; color:var(--text-muted, var(--text-muted));}
  .pr-workload-table td:nth-child(2)::before{content:"Số dự án";}
  .pr-workload-table td:nth-child(3)::before{content:"Thời gian";}
  .pr-workload-table td:nth-child(4)::before{content:"Trạng thái"; align-self:flex-start;}
  .pr-workload-table td:nth-child(4) .pr-status-bar-wrap{flex:1 1 auto; min-width:0;}
  .pr-perf-table td:nth-child(4)::before{content:"Hoạt động cuối";}
  .pr-perf-table td:nth-child(5)::before{content:"Cập nhật 30 ngày";}
  .pr-perf-table td:nth-child(6)::before{content:"Chỉ đạo chờ";}
  .pr-perf-table td:nth-child(2)::before{content:"Báo cáo";}
  .pr-perf-table td:nth-child(3)::before{content:"Đúng hạn";}
  .pr-attn-list{max-height:none;}
  .md-kpis{grid-template-columns:repeat(2,1fr);}
  .md-table{font-size:12.5px;}
  #memberDetailModal .modal-body{padding:12px;}
  .pr-perf .panel-title{flex-direction:column; align-items:flex-start;}
}
.pr-export-btn{white-space:nowrap; font-size:12px; padding:2px 10px; text-transform:none; font-weight:600;}
.proj-head .dropdown-menu{z-index:1080;}
.proj-actions{display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:140px; padding-top:15px;}
.proj-actions .dropdown > .btn, .proj-export-btn{width:100%;}
.proj-export-btn{font-weight:600;}

/* ===== Muc tieu gan vao hang muc ===== */
/* the chi tieu (tab Tong quan): do phu boi hang muc */
/* muc tieu ca nhan (chi tiet thanh vien) */

/* chia rieng phan cam ket tung nguoi */

/* ===== Popup Them/Sua hang muc (bo cuc moi) ===== */
.task-modal .modal-body{background:var(--surface-2); padding:16px 18px;}
.task-modal-head{background:linear-gradient(135deg,var(--blue-bg-soft),var(--surface)); border-bottom:1px solid var(--border-blue);}
.task-modal-head .modal-title{font-weight:800; color:var(--blue-fg);}
.tm-card{background:var(--surface); border:1px solid var(--border); border-top:3px solid #3b82f6; border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--shadow-sm);}
.tm-title{font-weight:700; font-size:13px; letter-spacing:.2px; color:var(--blue-fg); margin-bottom:12px; display:flex; align-items:center; gap:8px; text-transform:uppercase;}
.tm-title i{width:26px; height:26px; border-radius:var(--r-md); background:var(--blue-bg); color:var(--blue-link); display:inline-flex; align-items:center; justify-content:center; font-size:13px;}
.task-modal .task-assignee-chips{display:flex; flex-wrap:wrap; gap:6px;}
.task-modal .task-chip{display:inline-flex; align-items:center; gap:6px; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px 12px; cursor:pointer; font-size:13px; margin:0;}
.task-modal .task-chip:has(input:checked){background:var(--blue-bg); border-color:var(--border-blue); color:var(--blue-fg); font-weight:600;}


/* tien do TU TINH (hang muc gan chi tieu): chi doc */

/* ===== Form nop bao cao: chi tieu + hang muc cua toi CUNG 1 khoi ===== */
.rp-metric{background:var(--surface-2); border:1px solid var(--border-blue); border-left:4px solid #3b82f6; border-radius:var(--r-lg); padding:12px 14px; margin-bottom:14px;}
.rp-metric-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
.rp-metric-name{font-weight:800; color:var(--blue-fg); font-size:14px;}
.rp-metric-name i{color:var(--blue-link); margin-right:4px;}
.rp-metric-num{font-family:monospace; font-size:12px; color:var(--text-2);}
.rp-tasks{margin-top:12px; padding:10px 0 2px 14px; border-left:3px solid #10b981; margin-left:6px;}
.rp-tasks-h{font-weight:700; font-size:12.5px; color:var(--green-fg); margin-bottom:8px;}
.rp-tasks-h i{margin-right:4px;}
.rp-task{background:var(--surface); border:1px solid var(--green-border); border-radius:10px; padding:10px 12px; margin-bottom:10px;}
.rp-task:last-child{margin-bottom:8px;}
.rp-task-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; font-size:13px;}
.rp-task-ctrl{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.rp-task-ctrl .pct-slider{flex:1 1 220px;}
.rp-task-ctrl .form-select{max-width:150px;}
.rp-other{border-left-color:#94a3b8; background:var(--surface-3);}

/* So lieu nhap theo tung hang muc trong form bao cao */

/* ===== Tab Cong viec: giai doan -> cong viec (bang Cong viec / Nguoi thuc hien / Tien do) ===== */
.wl-table thead th{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--surface); border-bottom:1px solid var(--border); padding:10px 12px;}
.wl-table td{vertical-align:middle; padding:9px 12px; border-color:var(--border);}
.wl-table .task-row:hover td{background:var(--surface-2);}
.wl-table .task-title-link{color:var(--text-2); font-weight:500 !important; font-size:13.5px;}
.wl-table .task-title-link:hover{color:var(--blue-fg-2);}
.wl-table .task-phase td{background:var(--phase-bg, var(--indigo-bg)); border-top:1px solid var(--border); padding:10px 12px;}
.wl-table .task-phase strong{font-size:13.5px; color:var(--text-strong);}
.wl-prog{display:grid; grid-template-columns:minmax(0,1fr) 22px; grid-template-areas:"pct pct" "bar clock"; column-gap:8px; row-gap:2px; align-items:center;}
.wl-prog .wl-pct{grid-area:pct; font-size:12px; color:var(--text-2); font-weight:600; line-height:1;}
.wl-prog .wl-bar{grid-area:bar; height:6px; border-radius:var(--r-pill); background:#fcd34d; overflow:hidden;}
.wl-prog .wl-bar span{display:block; height:100%; background:#1fa8f5; border-radius:var(--r-pill); transition:width .25s;}
.wl-prog .wl-clock{grid-area:clock; font-size:15px; color:var(--text-faint); justify-self:center;}
.wl-prog.is-done .wl-bar{background:#bbf7d0;} .wl-prog.is-done .wl-bar span{background:#10b981;} .wl-prog.is-done .wl-clock{color:var(--green-fg);} .wl-prog.is-done .wl-pct{color:var(--green-fg);}
.wl-prog.is-late .wl-clock{color:#ef4444;}
.wl-prog.is-edit{cursor:pointer;} .wl-prog.is-edit:hover .wl-bar{box-shadow:0 0 0 2px #bfdbfe;}
.wl-prog-phase{grid-template-columns:minmax(0,1fr); grid-template-areas:"pct" "bar";}
.wl-prog-phase .wl-bar{height:5px; opacity:.85;}
.wl-edit{margin-top:8px;}
.wl .task-avs{justify-content:center;}

/* ===== Danh sach du an gom theo giai doan ===== */
.pj-table .project-title-cell{max-width:380px; color:var(--text-2); font-weight:500 !important; font-size:13.5px;}
.pj-table .project-row:hover .project-title-cell{color:var(--blue-fg-2);}
.pg-head{cursor:pointer; user-select:none;}
.grp-swatch{display:inline-block; width:22px; height:22px; border-radius:var(--r-sm); border:1px solid var(--border); vertical-align:middle;}
.pg-phase-row{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.pg-phase-row input{flex:1 1 auto; min-width:0;}

/* Modal tai khoan chia tab */
.acc-tabs .nav-link{font-size:13px; font-weight:600; color:var(--text-muted); padding:8px 16px;}
.acc-tabs .nav-link.active{color:var(--blue-fg-2);}
.acc-tab-content{min-height:330px;}
.acc-tab-content .cp-section:last-child{margin-bottom:0 !important;}
.admin-dept-list{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); max-height:230px !important;}

/* Bo loc danh sach du an (gon) */
.pj-filter{border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:12px; background:var(--surface-2);}
.pj-filter-main{display:flex; align-items:center; gap:8px;}

.pj-filter-main .pj-sel{flex:0 0 190px; width:190px;}
.pj-filter-more{margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
@media (max-width:575.98px){ .pj-filter-main .pj-sel{flex:1 1 100%; width:100%;} }
.pj-filter-main .input-group, .pj-filter-main .form-select, .pj-filter-main .btn{height:38px;}
.pj-filter-main .input-group-text{height:38px;}
.pj-filter-main .btn{display:inline-flex; align-items:center; gap:6px;}
.pj-table thead th{white-space:nowrap;}
.pj-table td.pj-date{white-space:nowrap; font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums;}

/* ===== Bao cao du an: theo doi tung du an ===== */
.pt-dot{display:inline-block; width:12px; height:12px; border-radius:50%; background:#cbd5e1; vertical-align:middle;margin-right:3px}
.pt-dot.pt-red{background:#ef4444;} .pt-dot.pt-yellow{background:#f59e0b;} .pt-dot.pt-green{background:#10b981;}
.pt-sum{font-size:12px; font-weight:500; color:var(--text-muted);}
.pt-table td{vertical-align:top;}
.pt-bars{min-width:190px;}
.pt-bar{position:relative; height:8px; border-radius:var(--r-pill); background:var(--track); margin:4px 0 3px;}
.pt-bar .pt-act{display:block; height:100%; border-radius:var(--r-pill); background:#1fa8f5;}
.pt-bars.pt-bad .pt-act{background:#ef4444;} .pt-bars.pt-warn .pt-act{background:#f59e0b;} .pt-bars.pt-ok .pt-act{background:#10b981;}
.pt-bar .pt-plan{position:absolute; top:-3px; width:2px; height:14px; background:var(--text-2); border-radius:1px;}
.pt-num{font-size:12px;}
.pt-gap{margin-left:6px; font-weight:700; font-size:11.5px;}
.pt-gap.pt-bad{color:var(--red-fg);} .pt-gap.pt-warn{color:var(--yellow-fg);} .pt-gap.pt-ok{color:var(--green-fg);}
.pt-reasons{margin:0; padding-left:16px;} .pt-reasons li{margin-bottom:2px;}
.pt-line{font-size:12.5px;}
.pt-verdict{font-size:12px; font-weight:600; margin-top:2px;}
.pt-verdict.pt-ok{color:var(--green-fg);} .pt-verdict.pt-warn{color:var(--yellow-fg);} .pt-verdict.pt-bad{color:var(--red-fg);} .pt-verdict.pt-done{color:var(--blue-fg-2);} .pt-verdict.pt-na{color:var(--text-faint); font-weight:500;}
.pt-bars.pt-done .pt-act{background:#1fa8f5;} .pt-bars.pt-na .pt-act{background:#cbd5e1;}
.pt-basis{font-size:11px; color:var(--text-muted); margin-top:2px;}

/* ===== Dien thoai: Danh sach du an + Theo doi du an (bang -> the) ===== */
@media (max-width: 767.98px){
  #projectListTable .panel-title, .pt-panel .panel-title{flex-wrap:wrap; gap:8px;}
  .pj-filter-main .pj-search{flex:1 1 100%; max-width:none;}
  .pj-filter-main .btn{flex:1 1 auto; justify-content:center;}
  #projectTableView, .pt-panel .table-scroll{max-height:none; border:0; overflow:visible;}

  /* --- danh sach du an --- */
  .pj-table, .pj-table tbody{display:block; width:100%;}
  .pj-table thead{display:none;}
  .pj-table tr.pg-head{display:flex; flex-wrap:wrap; margin:14px 0 6px; border-radius:10px; overflow:hidden; background:var(--phase-bg, var(--indigo-bg));}
  .pj-table tr.pg-head td{display:block; border:0; padding:9px 12px; background:transparent !important;}
  .pj-table tr.pg-head td:first-child{flex:1 1 100%; font-size:14px;}
  .pj-table tr.pg-head td:nth-child(2){flex:1 1 100%; padding-top:0 !important;}
  .pj-table tr.pg-head td:nth-child(n+3){display:none;}
  .pj-table tr.project-row{display:block; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border-blue); border-radius:10px; padding:10px 12px; margin:8px 0;}
  .pj-table tr.project-row > td{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; border:0; background:transparent; text-align:left !important; white-space:normal !important;}
  .pj-table tr.project-row > td[data-label]::before{content:attr(data-label); flex:0 0 100px; font-size:11.5px; color:var(--text-muted, var(--text-muted)); font-weight:600;}
  .pj-table tr.project-row > td.tk-title{display:block; padding:0 0 6px !important; font-size:14.5px;}
  .pj-table .project-title-cell{max-width:100%; white-space:normal; display:inline;}
  .pj-table tr.project-row > td.pj-prog{align-items:flex-start;}
  .pj-table tr.project-row > td.pj-prog .wl-prog{flex:1 1 auto; min-width:0;}
  .pj-table tr.project-row > td.pj-act{justify-content:flex-end; margin-top:4px; padding-top:8px !important; border-top:1px dashed var(--border) !important;}
  .pj-table td.js-owner-cell{text-align:right;}
  .dt-pagination{flex-direction:column; align-items:stretch; gap:10px;}
  .dt-pagination .btns{display:flex; align-items:center; justify-content:space-between;}

  /* --- theo doi du an (bao cao) --- */
  .pt-table, .pt-table tbody{display:block; width:100%;}
  .pt-table thead{display:none;}
  .pt-table tr{display:block; position:relative; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border-strong); border-radius:10px; padding:10px 12px; margin-bottom:10px;}
  .pt-table tr[data-health="red"]{border-left-color:#ef4444;} .pt-table tr[data-health="yellow"]{border-left-color:#f59e0b;} .pt-table tr[data-health="green"]{border-left-color:#10b981;}
  .pt-table td{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:5px 0; border:0 !important; background:transparent !important; text-align:left; white-space:normal !important;}
  .pt-table td[data-label]::before{content:attr(data-label); flex:0 0 86px; font-size:11.5px; color:var(--text-muted, var(--text-muted)); font-weight:600;}
  .pt-table td.pt-hd{position:absolute; top:12px; right:12px; padding:0 !important;}
  .pt-table td:nth-child(2){display:block; padding-right:24px !important; font-size:14px;}
  .pt-table td.pt-prog{display:block; border-top:1px dashed var(--border) !important; margin-top:4px; padding-top:8px !important;}
  .pt-table td.pt-prog .pt-bars{min-width:0;}
  .pt-table td.pt-warn-cell{display:block;}
  .pt-table td.pt-warn-cell::before{display:block; margin-bottom:2px;}
  .pt-panel .panel-title .btn-group{order:3;}
}

/* Theo doi du an: dong tieu de nhom > giai doan */
.pt-table tr.pt-head{cursor:pointer; user-select:none;}
.pt-table tr.pt-head td{background:var(--indigo-bg); border-top:1px solid var(--border); padding:9px 12px; vertical-align:middle;}
.pt-table tr.pt-head .pg-arrow{margin:0 6px; color:var(--text-muted);}
.pt-hc{display:inline-flex; align-items:center; gap:3px; margin-left:10px; font-size:12px; font-weight:600; color:var(--text-2);}
@media (max-width: 767.98px){
  .pt-table tr.pt-head{border-left:0; padding:0; margin:14px 0 6px; background:var(--indigo-bg); border-radius:10px; overflow:hidden;}
  .pt-table tr.pt-head td{display:block; padding:9px 12px !important;}
}
/* Bo loc (danh sach + bao cao): moi o nhap/chon/ngay cao bang nhau 38px */
.pj-filter .form-control, .pj-filter .form-select, .pj-filter .sp-input, .pj-filter input[type=date]{height:38px; min-height:38px; padding-top:0; padding-bottom:0; font-size:14px; line-height:1.4;}
.pj-filter .btn{height:38px;}
.pj-applied{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-4px 0 12px; font-size:12.5px; color:var(--text-2);}
.pj-chip{display:inline-block; background:var(--indigo-bg); color:var(--indigo-fg); border-radius:var(--r-pill); padding:2px 10px; font-size:12px; font-weight:500;}
/* Do uu tien tren danh sach du an */
.pj-prio{display:inline-block; border-radius:var(--r-pill); padding:1px 9px; font-size:11.5px; font-weight:600; vertical-align:middle; white-space:nowrap;}
.pj-prio-high{background:var(--red-bg); color:var(--red-fg);}
.pj-prio-normal{background:var(--blue-bg); color:var(--blue-fg-2);}
.pj-prio-low{background:var(--track); color:var(--text-2);}
/* Trang thai du an (bao cao): moi trang thai 1 mau */
.pj-st{display:inline-block; border-radius:var(--r-pill); padding:1px 9px; font-size:11.5px; font-weight:600; white-space:nowrap; vertical-align:middle;}
.pj-st-draft{background:var(--track); color:var(--text-2);}
.pj-st-active{background:var(--blue-bg); color:var(--blue-fg-2);}
.pj-st-completed{background:var(--green-bg); color:var(--green-fg);}
.pj-st-cancelled{background:var(--red-bg); color:var(--red-fg);}
.pj-st-archived{background:var(--yellow-bg); color:var(--yellow-fg);}

/* Nhom du an: moi nhom 1 dong, giai doan la cac chip danh so */
.pg-name{display:flex; align-items:center; gap:8px; font-size:14px;}
.pg-phases{display:flex; flex-wrap:wrap; gap:6px;}
.pg-phase{display:inline-flex; align-items:center; gap:6px; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-pill); padding:2px 10px 2px 3px; font-size:12.5px; white-space:nowrap;}
.pg-phase i{font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#3b82f6; color:#fff; font-size:10.5px; font-weight:700;}
.pg-phase small{color:var(--text-muted); font-weight:600; background:var(--track); border-radius:var(--r-pill); padding:0 6px;}

/* ===== Form nop bao cao (gon): chi tieu dang the luoi, noi dung + dinh kem gon ===== */
.rp-form-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.rp-form-title{font-weight:700; font-size:15px; color:var(--blue-fg);} .rp-form-title i{margin-right:4px; color:var(--blue-link);}
.rp-due{display:inline-flex; align-items:center; gap:5px; background:var(--yellow-bg-soft); color:var(--yellow-fg); border:1px solid var(--yellow-border); border-radius:var(--r-pill); padding:3px 12px; font-size:12px; font-weight:600;}
.rp-section-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:8px;}
.rp-grid{display:grid; gap:10px;}
.rp-card{background:var(--surface-2); border:1px solid var(--border-blue); border-radius:10px; padding:9px 11px;}
.rp-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px;}
.rp-card-name{font-weight:700; font-size:13px; color:var(--blue-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rp-card-progress{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.rp-card-progress .progress{ height:6px;}
.rp-card-num{ color:var(--text-2); font-family:monospace;}
.rp-extra{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; margin-top:10px;}
.rp-extra-item{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.rp-actions{display:flex; justify-content:flex-end; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border);}
@media (max-width:575.98px){ .rp-grid{grid-template-columns:1fr;} .rp-actions .btn{width:100%;} }

/* ===== Lich su bao cao (gon, so lieu noi bat) ===== */
.rh-sum{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto;}
.rh-sum-item{display:inline-flex; align-items:baseline; gap:4px; font-size:12px; color:var(--text-2); background:var(--surface-3); border-radius:var(--r-pill); padding:2px 10px;}
.rh-sum-item b{font-size:14px; color:var(--text-strong);}
.rh-sum-item.rh-ok{background:var(--green-bg); color:var(--green-fg);} .rh-sum-item.rh-ok b{color:var(--green-fg);}
.rh-sum-item.rh-late{background:var(--red-bg); color:var(--red-fg);} .rh-sum-item.rh-late b{color:var(--red-fg);}
.rh-sum-item.rh-miss{background:var(--yellow-bg); color:var(--yellow-fg);} .rh-sum-item.rh-miss b{color:var(--yellow-fg);}
.rh-card{border-left:4px solid #10b981; background:var(--surface);}
.rh-card.rh-late-card{border-left-color:#ef4444;}
.rh-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.rh-avatar{width:34px; height:34px; border-radius:50%; background:var(--blue-bg); color:var(--blue-fg-2); font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none;}
.rh-who{flex:1 1 180px; min-width:0; font-size:13.5px;}
.rh-time{font-size:11.5px; color:var(--text-muted);} .rh-time i{margin:0 2px;}
.rh-actions{display:flex; align-items:center; gap:6px;}
.rh-stats{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 8px;}
.rh-stat{display:flex; flex-direction:column; min-width:110px; max-width:220px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:6px 12px;}
.rh-stat-label{font-size:11px; color:var(--text-muted); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rh-stat-value{font-size:19px; font-weight:800; color:var(--text-strong); line-height:1.2;} .rh-stat-value small{font-size:11.5px; font-weight:600; color:var(--text-muted);}
.rh-stat-main{background:var(--blue-bg-soft); border-color:var(--border-blue);} .rh-stat-main .rh-stat-value{color:var(--blue-fg-2);}
.rh-stat .progress{height:4px; margin-top:4px;}
.rh-content{font-size:13px; color:var(--text-2); margin-top:8px; line-height:1.5;}
.rh-files{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.rh-file{display:inline-flex; align-items:center; gap:4px; max-width:260px; background:var(--surface-3); border-radius:var(--r-pill); padding:2px 10px; font-size:12px;}
.rh-file a{color:var(--text-2); text-decoration:none; max-width:220px;}
.rh-file button{border:0; background:none; color:var(--text-faint); padding:0 2px; line-height:1;} .rh-file button:hover{color:var(--red-fg);}
@media (max-width:575.98px){ .rh-stat{flex:1 1 calc(50% - 8px); max-width:none;} .rh-sum{margin-left:0;} }
/* Form nop bao cao: khong tran tren man hinh hep */
.rp-form{min-width:0; max-width:100%;}
.rp-grid{grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));}
.rp-grid > .rp-card, .rp-card *{min-width:0;}
.rp-card{max-width:100%; overflow:hidden;}
.rp-card-name{flex:1 1 auto; min-width:0;}
.rp-card-progress{flex-wrap:wrap; row-gap:3px;}
.rp-card-progress .progress{flex:1 1 100%;}
.rp-card-num{white-space:normal; word-break:break-word; font-size:11.5px;}
.rp-card .input-group{flex-wrap:nowrap; max-width:100%;}
.rp-card .input-group .form-control{min-width:0; width:1%;}
@media (max-width:575.98px){
  .rp-form{padding:12px !important;}
  .rp-form-head{flex-direction:column; gap:6px;}
  .rp-extra, .rp-extra-item{width:100%;}
  .rp-extra-item .btn, .rp-extra-item input[type=date]{width:100% !important;}
}

/* ===== Modal Them/Sua nhom du an ===== */
.pgm .pgm-head{align-items:center; gap:12px; background:linear-gradient(135deg,var(--blue-bg-soft),var(--surface)); border-bottom:1px solid var(--border-blue);}
.pgm-icon{width:40px; height:40px; border-radius:var(--r-lg); background:var(--blue-bg); color:var(--blue-fg-2); display:inline-flex; align-items:center; justify-content:center; font-size:19px; flex:none;}
.pgm .modal-title{font-size:17px; font-weight:700; margin:0;}
.pgm .modal-body{padding:18px 20px;}
.pgm-preview{display:flex; align-items:center; gap:6px; flex-wrap:wrap; border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin-bottom:16px; background:var(--blue-bg-soft); font-size:13.5px;}
.pgm-prev-arrow{color:var(--text-muted);} .pgm-prev-count{margin-left:6px; font-size:12px; color:var(--text-muted);}
.pgm-field{margin-bottom:16px;}
.pgm-label{display:block; font-size:13px; font-weight:700; color:var(--text-strong); margin-bottom:6px;}
.pgm-hint{font-size:11.5px; font-weight:400; color:var(--text-muted);}
.pgm .form-control{height:40px;}
.pgm-colors{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.pgm-swatch{width:30px; height:30px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px #cbd5e1; cursor:pointer; padding:0; position:relative; transition:transform .1s;}
.pgm-swatch:hover{transform:scale(1.1);}
.pgm-swatch.on{box-shadow:0 0 0 2px #2563eb;}
.pgm-swatch-custom{display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--text-muted); font-size:13px; overflow:hidden;}
.pgm-swatch-custom input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer;}
.pgm-count{background:var(--blue-bg); color:var(--blue-fg-2); font-size:12px; font-weight:700; border-radius:var(--r-pill); padding:1px 9px;}
.pgm-phases .pg-phase-row{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.pgm-num{width:26px; height:26px; border-radius:50%; background:#3b82f6; color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none;}
.pgm-ib{width:34px; height:34px; border:1px solid var(--border); background:var(--surface); border-radius:var(--r-md); color:var(--text-2); display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer;}
.pgm-ib:hover{background:var(--surface-3);} .pgm-ib-del{color:var(--red-fg);} .pgm-ib-del:hover{background:var(--red-bg); border-color:var(--red-border);}
.pgm-add{width:100%; border:1.5px dashed var(--border-blue); background:var(--surface-2); color:var(--blue-fg-2); border-radius:10px; padding:8px; font-weight:600; font-size:13px; cursor:pointer;}
.pgm-add:hover{background:var(--blue-bg-soft);}
@media (max-width:575.98px){ .pgm .modal-body{padding:14px;} }
/* Bao cao du an tren dien thoai: khong tran ngang */
@media (max-width: 767.98px){
  .pt-panel, .pj-filter, .pj-applied{max-width:100%; min-width:0;}
  .pt-panel .panel-title{display:flex; flex-wrap:wrap; align-items:center; gap:8px; row-gap:10px;}
  .pt-panel .panel-title > span:first-child{flex:1 1 100%;}
  .pt-panel .pt-sum{flex:1 1 100%; margin-left:0 !important; display:flex; flex-wrap:wrap; gap:4px 12px;}
  .pt-panel .panel-title > .ms-auto{margin-left:0; flex:1 1 100%; display:flex; flex-wrap:wrap; gap:8px;}
  .pt-panel .panel-title .btn-group{flex:1 1 auto;}
  .pt-panel .panel-title .btn-group .btn{flex:1 1 auto; white-space:nowrap; padding-left:8px; padding-right:8px;}
  .pt-panel .pr-export-btn{flex:1 1 100%; text-align:center;}
  .pj-chip{white-space:normal; max-width:100%;}
  .pj-applied{row-gap:4px;}
  .pj-filter-main .btn{white-space:nowrap;}
  .pt-table tr.pt-head td{white-space:normal !important;}
  .pt-table tr.pt-head .pt-hc{margin-left:8px;}
  .pt-table td.pt-warn-cell{overflow-wrap:anywhere;}
}

/* ===== Popup chon thanh vien + dong thanh vien da chon ===== */
.mp-toolbar{display:flex; flex-wrap:wrap; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2);}
.mp-toolbar .input-group{flex:1 1 260px;} .mp-toolbar .form-control, .mp-toolbar .form-select, .mp-toolbar .input-group-text{height:38px;}
.mp-role{display:flex; align-items:center; gap:8px;} .mp-role .form-select{width:170px;}
.mp-table thead th{position:sticky; top:0; background:var(--surface); z-index:1; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); border-bottom:1px solid var(--border); padding:9px 10px;}
.mp-table td{vertical-align:middle; padding:8px 10px; font-size:13px;}
.mp-row{cursor:pointer;} .mp-row:hover td{background:var(--surface-3);}
.mp-row.mp-taken{opacity:.45; cursor:not-allowed;}
.mp-user{display:flex; align-items:center; gap:8px;}
.mp-av{width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;}
.mp-av-i{display:inline-flex; align-items:center; justify-content:center; background:var(--blue-bg); color:var(--blue-fg-2); font-weight:700; font-size:13px;}
.cp-member-row{ flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); margin-bottom:8px;}
.cm-user{display:flex; align-items:center; gap:8px; flex:1 1 180px; min-width:0;}
.cm-info{min-width:0;} .cm-meta{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cm-role{width:150px;} .cm-rep{}
@media (max-width:767.98px){
  .mp-table th:nth-child(4), .mp-table td:nth-child(4), .mp-table th:nth-child(5), .mp-table td:nth-child(5){display:none;}
  .mp-role{width:100%;} .mp-role .form-select{flex:1 1 auto; width:auto;}
  .cm-role{flex:1 1 130px; width:auto;}
}

/* Popup chon thanh vien: phan trang + hang thanh vien da chon (gon, dep) */
.mp-pager{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 16px; border-top:1px solid var(--border); background:var(--surface-2);}
.cp-member-row{display:grid; gap:8px 10px; align-items:center; border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.cp-member-row .cm-user{grid-area:user; flex:none;}
.cp-member-row .cm-rm{ width:28px; height:28px; border:0; border-radius:50%; background:var(--red-bg-soft); color:var(--red-fg); display:inline-flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; padding:0;}
.cp-member-row .cm-rm:hover{background:var(--red-bg);}
.cp-member-row .cm-ctl{grid-area:ctl; align-items:center; gap:10px; padding-top:8px; border-top:1px dashed var(--border);}
.cm-name{font-weight:700; font-size:14px; color:var(--text-strong); line-height:1.25;}
.cm-meta{font-size:12px !important;}
.cp-member-row .cm-role{flex:1 1 auto; min-width:0;}
.cm-rep{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12.5px; color:var(--text-2); white-space:nowrap; cursor:pointer;}
.cm-rep input{margin:0; cursor:pointer;}
/* Tieu de nhom > giai doan tren danh sach du an */
.pgh-wrap{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.pj-table tr.pg-head td{vertical-align:middle;}
.pgh-group{font-size:14.5px; font-weight:700; color:var(--text-strong);}
.pgh-sep{font-size:11px; color:var(--text-faint);}
.pgh-phase{display:inline-block; background:var(--surface); border:1px solid rgba(15,23,42,.12); border-radius:var(--r-pill); padding:1px 12px; font-size:12.5px; font-weight:600; color:var(--text-2);}
.pgh-count{display:inline-block; background:rgba(255,255,255,.65); border-radius:var(--r-pill); padding:1px 10px; font-size:11.5px; font-weight:600; color:var(--text-2); margin-left:2px;}

/* ===== Hop "Tao du an" chia tab ===== */
.cp-tabs{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:thin;}
.cp-tabs .nav-link{font-size:13px; font-weight:600; color:var(--text-muted); padding:8px 14px;}
.cp-tabs .nav-link.active{color:var(--blue-fg-2);}
.cp-tabs .nav-link i{margin-right:4px;}
.cp-tab-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#ef4444; margin-left:6px; vertical-align:middle;}
.cp-tab-count{display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; font-size:11px; font-weight:700; background:var(--blue-bg); color:var(--blue-fg-2); border-radius:var(--r-pill); margin-left:6px; padding:0 5px;}
.cp-date-err{background:var(--red-bg-soft); border:1px solid var(--red-border); color:var(--red-fg); border-radius:var(--r-md); padding:6px 10px; font-size:12.5px;}
.cp-newgroup{background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:10px; padding:10px; margin-top:8px;}
.cp-owner-banner{display:flex; align-items:center; gap:8px; background:var(--blue-bg-soft); border:1px solid var(--border-blue); color:#1e40af; border-radius:10px; padding:8px 12px; margin-bottom:10px; font-size:12.5px;}
.cp-owner-banner.warn{background:var(--yellow-bg-soft); border-color:var(--yellow-border); color:var(--yellow-fg);}
.cp-suggest{background:var(--green-bg-soft); border:1px solid var(--green-border); border-radius:10px; padding:8px 10px; margin-bottom:10px; font-size:12.5px; color:var(--green-fg);}
.cp-suggest .sg-chip{display:inline-flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--green-border); color:var(--green-fg); border-radius:var(--r-pill); padding:2px 10px; margin:3px 4px 0 0; cursor:pointer; font-size:12px; font-weight:600;}
.cp-suggest .sg-chip:hover{background:var(--green-bg);}
.cp-suggest .sg-all{border-color:#16a34a; background:#16a34a; color:#fff;}
.cp-metric-row{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr) 28px; gap:8px; align-items:center; margin-bottom:8px;}
.cp-metric-row .cm-rm{width:28px; height:28px; border:0; border-radius:50%; background:var(--red-bg-soft); color:var(--red-fg); display:inline-flex; align-items:center; justify-content:center; font-size:12px; padding:0; cursor:pointer;}
.upload-drop.dragover{background:var(--blue-bg-soft); border-color:#3b82f6;}
.cp-file{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:5px 10px; margin-top:6px; font-size:12.5px;}
.cp-file .cp-file-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cp-file .cp-file-size{color:var(--text-muted); font-size:11.5px; white-space:nowrap;}
.cp-file button{border:0; background:none; color:var(--text-faint); padding:0 2px;} .cp-file button:hover{color:var(--red-fg);}
@media (max-width:767.98px){
  .cp-metric-row{ grid-template-areas:"n n rm" "t u a";}
  .cp-metric-row .cm-name-in{grid-area:n;} .cp-metric-row .cm-rm{grid-area:rm;}
  .cp-metric-row .cm-target-in{grid-area:t;} .cp-metric-row .cm-unit-in{grid-area:u;} .cp-metric-row .cm-agg-in{grid-area:a;}
  .cp-metric-row{grid-template-columns:1fr 1fr 1fr;}
  .cp-metric-row .cm-name-in{grid-column:1 / 3;} .cp-metric-row .cm-rm{grid-column:3;}
  #projectCreateModal .modal-footer{position:sticky; bottom:0; background:var(--surface); flex-wrap:wrap; gap:6px;}
  #projectCreateModal .cp-foot .btn{flex:1 1 auto;}
}
/* Hang thanh vien da chon: 1 DONG tren man hinh rong (avatar+ten | vai tro | nhan bao cao | bo); 2 tang tren dien thoai */
.cp-member-row{grid-template-columns:minmax(0,1fr) 170px auto 28px; grid-template-areas:"user role rep rm"; padding:8px 12px;}
.cp-member-row .cm-ctl{display:contents; padding:0; border:0;}
.cp-member-row .cm-role{grid-area:role; width:100%;}
.cp-member-row .cm-rep{grid-area:rep;}
.cp-member-row .cm-rm{grid-area:rm;}
@media (max-width: 767.98px){
  .cp-member-row{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"user rm" "ctl ctl";}
  .cp-member-row .cm-ctl{grid-area:ctl; display:flex; align-items:center; gap:10px; padding-top:8px; border-top:1px dashed var(--border);}
  .cp-member-row .cm-role{flex:1 1 auto; width:auto;}
}

/* ===== O chon NHIEU (checkbox + tim kiem) ===== */
.ms-wrap{position:relative; min-width:0;}
.ms-btn{width:100%; text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:2rem;}
.ms-btn.ms-empty-val .ms-text{color:var(--text-muted);}
.ms-panel{position:absolute; top:100%; left:0; z-index:1070; margin-top:4px; min-width:100%; width:max-content; max-width:min(380px,92vw); background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); padding:8px;}
.ms-panel[hidden]{display:none;}
.ms-panel .ms-search{height:34px; font-size:13px; margin-bottom:6px;}
.ms-actions{display:flex; justify-content:space-between; margin-bottom:4px;}
.ms-link{border:0; background:none; color:var(--blue-link); font-size:12px; padding:2px 4px; cursor:pointer;} .ms-link:hover{text-decoration:underline;}
.ms-list{max-height:250px; overflow:auto;}
.ms-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; margin:0;}
.ms-item:hover{background:var(--surface-3);}
.ms-item input{margin:0; flex:none;} .ms-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ms-empty{padding:10px; text-align:center; color:var(--text-faint); font-size:12.5px;}
.pj-filter-main .ms-wrap.pj-sel{flex:0 0 190px; width:190px;}
.pj-filter .ms-btn{height:38px; font-size:14px; padding-top:0; padding-bottom:0; line-height:36px;}
@media (max-width:575.98px){ .pj-filter-main .ms-wrap.pj-sel{flex:1 1 100%; width:100%;} .ms-panel{width:100%; max-width:none;} }
.ms-pager{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; padding-top:6px; border-top:1px solid var(--border);}
.ms-pager[hidden]{display:none;}
.ms-pbtn{border:1px solid var(--border); background:var(--surface); border-radius:var(--r-sm); font-size:12px; padding:2px 8px; cursor:pointer;} .ms-pbtn:disabled{opacity:.4; cursor:default;}
.ms-plabel{font-size:12px; color:var(--text-muted);}

/* ===== Template du an ===== */
.tpl-phase-h{margin:14px 0 6px; padding:6px 10px; background:var(--indigo-bg); border-radius:var(--r-md); font-size:13.5px; color:var(--indigo-fg);}
.tpl-proj{border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--surface);}
.tpl-proj.tpl-off{opacity:.45;}
.tpl-proj-h{display:flex; gap:8px; align-items:center;}
.tpl-chk{margin:0; display:flex; align-items:center;}
.tpl-title{flex:1 1 auto; font-weight:600;}
.tpl-prio{flex:0 0 130px; width:130px;}
.tpl-dates{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.tpl-dates label{font-size:12px; color:var(--text-muted); margin:0; display:flex; flex-direction:column; gap:2px;}
.tpl-dates input{width:138px; font-size:12.5px; padding:2px 6px;}
.tpl-members{ gap:6px; flex-wrap:wrap; margin-top:8px;}
.tpl-mem{display:inline-flex; align-items:center; gap:4px; background:var(--surface-3); border-radius:var(--r-pill); padding:2px 4px 2px 10px; font-size:12.5px;}
.tpl-role{border:0; background:transparent; font-size:11.5px; color:var(--blue-link); padding:0; cursor:pointer;}
.tpl-mem-rm{border:0; background:transparent; color:var(--text-faint); padding:0 4px; line-height:1; cursor:pointer;} .tpl-mem-rm:hover{color:var(--red-fg);}
.tpl-metrics{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px 12px; margin-top:8px;}
.tpl-met{display:flex; align-items:center; gap:6px; font-size:12.5px;}
.tpl-met-n{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2);}
.tpl-met-v{flex:0 0 110px; width:110px; text-align:right; font-size:12.5px; padding:2px 6px;}
.tpl-met-u{flex:0 0 auto; color:var(--text-faint); font-size:11.5px; min-width:26px;}
@media (max-width:575.98px){ .tpl-proj-h{flex-wrap:wrap;} .tpl-prio{flex:1 1 100%; width:100%;} .tpl-dates input{width:100%;} .tpl-dates label{flex:1 1 45%;} }
.tpl-chk{gap:5px; font-size:12.5px; color:var(--text-2); cursor:pointer;} .tpl-chk span{white-space:nowrap;}
.tpl-add{border:1px dashed var(--border-strong); background:var(--surface); border-radius:var(--r-pill); font-size:12px; color:var(--blue-link); padding:2px 8px; max-width:150px; cursor:pointer;}
/* Man hinh dung/sua template */
.ed-phase{border:1px solid var(--border-blue); border-radius:var(--r-lg); padding:10px; margin-bottom:12px; background:var(--surface-2);}
.ed-phase-h{display:flex; gap:6px; align-items:center; margin-bottom:8px;} .ed-phase-h i.bi-layers{color:var(--indigo-fg);}
.ed-phase-name{font-weight:600; max-width:360px;}
.ed-proj{border:1px solid var(--border); border-radius:10px; padding:10px; margin-bottom:8px; background:var(--surface);}
.ed-proj-h{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.ed-title{flex:1 1 220px; font-weight:600;} .ed-prio{flex:0 0 120px; width:120px;} .ed-cat{flex:0 0 170px; width:170px;}
.ed-off{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--text-muted);}
.ed-off label{display:flex; gap:4px; align-items:center; margin:0;} .ed-off input{width:70px; font-size:12.5px; padding:2px 6px;}
.ed-mets{margin-top:6px;}
.ed-met{display:grid; gap:6px; margin-bottom:4px; align-items:center;}
.ed-sch{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--text-muted);}
.ed-sch label{display:flex; gap:4px; align-items:center; margin:0;} .ed-sch select{width:auto;}
.ed-day{gap:3px !important;}
@media (max-width:767.98px){ .ed-met{grid-template-columns:1fr 1fr; } .ed-cat,.ed-prio{flex:1 1 45%; width:auto;} }
.tpl-colors{display:flex; flex-wrap:wrap; gap:6px; align-items:center;} .tpl-colors .pgm-swatch{width:24px; height:24px;}
/* Danh sach template */
.tpl-intro{display:flex; gap:10px; align-items:flex-start; margin:0 0 12px; padding:10px 14px; background:var(--surface-3); border:1px solid var(--border-blue); border-radius:10px; font-size:13px; color:var(--text-2);}
.tpl-intro > i{color:var(--indigo-fg); font-size:16px; margin-top:1px;}
.tpl-intro-more{display:block; margin-top:2px; color:var(--text-muted); font-size:12.5px;}
.tpl-table thead th{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); font-weight:600; white-space:nowrap;}
.tpl-table td{vertical-align:middle;}
.tpl-name-wrap{display:flex; gap:12px; align-items:center;}
.tpl-ico{flex:0 0 38px; width:38px; height:38px; border-radius:10px; background:var(--indigo-bg); color:#4338ca; display:inline-flex; align-items:center; justify-content:center; font-size:18px;}
.tpl-name{font-weight:600; color:var(--text-strong); font-size:14.5px;}
.tpl-desc{font-size:12.5px; color:var(--text-muted); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tpl-badge-shared{display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:1px 8px; border-radius:var(--r-pill); background:var(--green-bg); color:var(--green-fg); font-size:11px; font-weight:600; vertical-align:middle;}
.tpl-badge-paused{display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:1px 8px; border-radius:var(--r-pill); background:var(--yellow-bg); color:var(--yellow-fg); font-size:11px; font-weight:600; vertical-align:middle;}
/* Nhat ky he thong (Cau hinh > Nhat ky he thong). */
.al-table td{vertical-align:top; font-size:13px;}
.al-details{font-size:12.5px; color:var(--text-2); max-width:420px;}
.al-details details summary{cursor:pointer; color:var(--blue-link); font-size:12px;}
.al-badge{display:inline-block; padding:1px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; white-space:nowrap;}
.al-b-blue{background:var(--blue-bg); color:#1e40af;} .al-b-amber{background:var(--yellow-bg); color:var(--yellow-fg);} .al-b-green{background:var(--green-bg); color:var(--green-fg);} .al-b-red{background:var(--red-bg); color:var(--red-fg);} .al-b-gray{background:var(--track); color:var(--text-2);}

/* Vai tro mau (Admin > Tai khoan). */
.admin-role-box{background:var(--surface-3); border:1px solid var(--border-blue);}
.admin-role-badge{display:inline-flex; align-items:center; gap:4px; margin-top:3px; padding:1px 8px; border-radius:var(--r-pill); background:var(--indigo-bg); color:var(--indigo-fg); font-size:11px; font-weight:600;}

/* Tab "Viec cua toi" (Views/Shared/Components/MyWork/Default.cshtml). */
.mw-nav-badge{margin-left:auto; min-width:20px; padding:1px 6px; border-radius:var(--r-pill); background:#ef4444; color:#fff; font-size:11px; font-weight:700; text-align:center; line-height:16px;}
.mw-hello{font-size:15px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px;}
a.mw-kpi{display:block; text-decoration:none; color:inherit;}
a.mw-kpi:hover{box-shadow:var(--shadow-md);}
.mw-empty{ font-size:13px; padding:6px 2px;}
.mw-list{display:flex; flex-direction:column; gap:6px; max-height:420px; overflow:auto;}
.mw-item{display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:var(--r-md); padding:8px 10px; background:var(--surface);}
.mw-item:hover{background:var(--surface-2); border-color:var(--border-strong);}
.mw-item.is-late{border-left:3px solid var(--red);}
.mw-item-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; font-size:13.5px;}
.mw-item-body{font-size:13px; color:var(--text-2); margin-top:3px; white-space:pre-line;}
.mw-meta{font-size:12px; color:var(--text-muted); white-space:nowrap;}
.mw-due{font-size:12px; font-weight:600; white-space:nowrap;}
.mw-chips{display:flex; flex-wrap:wrap; gap:6px;}
.mw-chip{display:inline-block; padding:4px 12px; border-radius:var(--r-pill); background:var(--yellow-bg-soft); border:1px solid var(--yellow-border); color:var(--yellow-fg); font-size:13px; text-decoration:none;}
.mw-chip:hover{background:var(--yellow-bg);}
@media (max-width:575.98px){ .mw-item-top{flex-direction:column; gap:2px;} .mw-meta{white-space:normal;} }
.pgr-pause-history{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-size:13px;}
.pgr-pause-history summary{cursor:pointer; font-weight:600; color:var(--text-2);}
.pgr-pause-history li{margin-bottom:4px;}
.pg-pause-note{margin-top:4px; font-size:12px; color:var(--yellow-fg); background:var(--yellow-bg-soft); border-left:3px solid #f59e0b; padding:3px 8px; border-radius:4px; max-width:420px;}
.tpl-chips{display:flex; flex-wrap:wrap; gap:6px;}
.tpl-chip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-2); font-size:12px; white-space:nowrap;} .tpl-chip i{color:var(--text-muted); font-size:12px;}
.tpl-actions .btn{margin-left:4px;}
@media (max-width:767.98px){ .tpl-actions{white-space:normal;} }
.tpl-chips{max-width:250px;} .tpl-desc{max-width:300px;}
.tpl-table td, .tpl-table th{white-space:normal;} .tpl-table td.text-nowrap, .tpl-table th.text-end, .tpl-actions{white-space:nowrap;}
.tpl-rep{display:inline-flex; align-items:center; gap:3px; margin:0 2px; font-size:11px; color:var(--text-muted); cursor:pointer; white-space:nowrap;} .tpl-rep input{margin:0; cursor:pointer;}
.tpl-add-btn{border:1px dashed var(--border-strong); background:var(--surface); border-radius:var(--r-pill); font-size:12px; color:var(--blue-link); padding:2px 10px; cursor:pointer;} .tpl-add-btn:hover{background:var(--blue-bg-soft);}
#tplPickerModal + .modal-backdrop{z-index:1070;}
/* Thanh vien chia 3 nhom */
.tpl-grps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px;}
.tpl-grp{border:1px solid var(--border); border-radius:10px; background:var(--surface-2); padding:6px 8px 8px; min-height:74px; display:flex; flex-direction:column; gap:6px;}
.tpl-grp[data-role=owner]{background:var(--surface-3); border-color:var(--border-blue);} .tpl-grp[data-role=participant]{background:var(--blue-bg-soft); border-color:var(--border-blue);} .tpl-grp[data-role=watcher]{background:var(--surface-2);}
.tpl-grp-h{font-size:12px; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:5px;}
.tpl-grp[data-role=owner] .tpl-grp-h{color:#6d28d9;} .tpl-grp[data-role=participant] .tpl-grp-h{color:var(--blue-fg-2);}
.tpl-grp-n{margin-left:auto; background:var(--surface); border-radius:var(--r-pill); padding:0 7px; font-size:11px; color:var(--text-muted); font-weight:600;}
.tpl-grp-body{display:flex; flex-direction:column; gap:4px;}
.tpl-grp .tpl-mem{display:flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:2px 4px 2px 8px; min-width:0;}
.tpl-grp .tpl-mem b{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:12.5px;}
.tpl-mv{width:26px; border:0; background:transparent; color:var(--text-muted); font-size:13px; padding:0; cursor:pointer; appearance:none; text-align:center;}
.tpl-grp .tpl-add-btn{align-self:flex-start; margin-top:auto;}
@media (max-width:767.98px){ .tpl-grps{grid-template-columns:1fr;} }
.tpl-members{display:block !important;} .tpl-grps{width:100%;}
/* Sua noi dung template: lich bao cao + chi tieu gon hon */
.ed-sch-w{display:inline-flex !important; flex-wrap:wrap; gap:4px 10px; align-items:center;}
.ed-sch-w .ed-day{display:inline-flex; align-items:center; gap:3px; margin:0; font-size:12.5px; color:var(--text-2);} .ed-sch-w .ed-day input{margin:0;}
.ed-met{grid-template-columns:minmax(150px,2fr) 120px 110px 110px 26px;}
.ed-sch [hidden]{display:none !important;}
.dt-toolbar .dt-filter{width:auto; min-width:170px; max-width:220px;}
.dt-toolbar:has(.dt-filter){justify-content:flex-start;}
.dt-toolbar .dt-filter + [data-dt-count]{margin-left:auto;}
.pg-share{display:flex; align-items:center; gap:8px; margin:0; min-height:0;} .pg-share .form-check-input{margin:0; cursor:pointer;} .pg-share-lbl{font-size:12px; color:var(--text-muted); white-space:nowrap;}
.badge-sample{background:var(--purple-bg); color:#6d28d9;}
.proj-sample-note{background:var(--surface-3); border:1px solid var(--border-blue); color:#5b21b6; border-radius:var(--r-md); padding:6px 10px; font-size:12.5px; margin-top:8px;}
/* Hang loc chinh gon: tim kiem gian ra, 4 o chon nho hon (van co the co lai), 2 nut khong xuong dong */


.pj-filter-main .ms-wrap.pj-sel, .pj-filter-main .pj-sel{ min-width:120px;}
.pj-filter-main .btn{flex:0 0 auto; white-space:nowrap;}
.pj-filter-main .ms-btn{padding-left:.6rem; padding-right:1.7rem; font-size:13.5px;}
@media (max-width:1199.98px){ .pj-filter-main{flex-wrap:wrap;} .pj-filter-main .ms-wrap.pj-sel, .pj-filter-main .pj-sel{flex:1 1 calc(50% - 8px); width:auto;} .pj-filter-main .pj-search{flex:1 1 100%;} }
@media (max-width:575.98px){ .pj-filter-main .ms-wrap.pj-sel, .pj-filter-main .pj-sel{} }
/* Hang loc chinh: tim kiem + nhom + trang thai + Loc them (Nguoi phu trach / Tham gia nam trong khung Loc them, hang dau) */
.pj-filter-main{flex-wrap:wrap;}
.pj-filter-main .pj-search{flex:1 1 280px; min-width:220px; max-width:460px;}
.pj-filter-main .ms-wrap.pj-sel, .pj-filter-main .pj-sel{flex:0 0 190px; width:190px;}
@media (max-width:575.98px){ .pj-filter-main .ms-wrap.pj-sel, .pj-filter-main .pj-sel{flex:1 1 100%; width:100%;} }

/* Danh sach du an: MOI khoi (nhom that hoac "Chua phan nhom du an") mac dinh THU GON (chi thay dong
   tieu de + tien do trung binh, bam vao de mo/dong) - xem _ProjectListResults.cshtml. Mui ten xoay theo trang thai. */
.pj-table .pg-head .task-phase-chev{ display:inline-block; transition:transform .15s; }
.pj-table .pg-head.closed .task-phase-chev{ transform:rotate(-90deg); }

/* Bang "Du lieu doanh so theo khu vuc" (tab Kinh Doanh GT, _KinhDoanhGTTable.cshtml)
   - vien 1px cho tung o td, CHI rieng bang nay (khong dung .dt-wrap chung de
   khong anh huong cac bang khac dang dung chung class do). */
.kdgt-table td{ border-width:1px; border-style:solid; border-color:var(--border); }

/* Tieu de 2 tong (Thang = xanh duong, Tuan = xanh la) khop dung mau file
   Excel goc - CHI rieng bang nay, dung class RIENG (khong doi .dt-wrap thead
   th chung) de khong anh huong bang khac. Dong 1 (nhom) mau DAM, dong 2 (cot
   con) mau NHAT hon cung tong mau - chu trang, GIU nguyen chu hoa/font co san. */
.kdgt-table thead th.kdgt-h-blue-dark{ background:#1f4e79; color:#fff; }
.kdgt-table thead th.kdgt-h-blue-med{ background:#2f75b5; color:#fff; }
.kdgt-table thead th.kdgt-h-green-dark{ background:#375623; color:#fff; }
.kdgt-table thead th.kdgt-h-green-med{ background:#548235; color:#fff; }

/* Bao cao "Nhom du an" (Du an > Bao cao du an > tab con "Nhom du an") -
   _ProjectGroupReportParts.cshtml: header nhom + duong thoi gian theo giai doan. */
.pgr-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.pgr-title{display:flex; align-items:center; gap:10px;}
.pgr-swatch{width:16px; height:16px; border-radius:5px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.pgr-assess-list{padding-left:18px; margin-bottom:0;}
.pgr-assess-list li{margin-bottom:4px; font-size:13.5px;}
.pgr-assess-list li:last-child{margin-bottom:0;}
.pgr-timeline{display:flex; align-items:stretch; gap:4px; overflow-x:auto; padding-bottom:4px;}
.pgr-phase-card{flex:1 1 190px; min-width:190px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px;}
.pgr-phase-card.is-done{background:var(--green-bg-soft); border-color:var(--green-border);}
.pgr-phase-card.is-empty{opacity:.6;}
.pgr-phase-name{font-weight:700; font-size:13px; margin-bottom:6px;}
.pgr-phase-meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); margin-top:4px;}
.pgr-phase-arrow{display:flex; align-items:center; color:var(--text-faint); flex:none;}
@media (max-width:768px){
  .pgr-phase-card{flex-basis:160px; min-width:160px;}
}

/* ===== Toi uu DIEN THOAI (<768px) cho Tong quan / Bao cao / Du an / Viec cua toi ===== */
@media (max-width: 767.98px){
  /* Topbar gon: [☰] Tieu de ....... [tuan][chuong] + 1 hang nut tat (Cong viec/Chi dao/KH tuan sau/KPI) vuot ngang
     thay vi xuong 2-3 dong (display:contents de tieu de + nut tat thanh con TRUC TIEP cua #topbar, sap lai bang order). */
  #topbar{padding:8px 12px; gap:8px; row-gap:6px;}
  #topbar .page-title-group{display:contents;}
  #sidebarToggle{order:0;}
  #topbar .page-title{order:1; flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px;}
  #topbar .topbar-tools{order:2; gap:6px;}
  #topbar .topbar-tools .sp-wrap{width:128px;}
  #topbar .topbar-dept-quick{order:3; flex:0 0 100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;}
  #topbar .topbar-dept-quick::-webkit-scrollbar{display:none;}
  #topbar .topbar-dept-quick .btn{flex:none; white-space:nowrap;}

  /* Thanh tab phu (Danh sach/Nhom du an/.../Bao cao du an; Theo du an/Theo nhom du an): 1 dong, vuot ngang, KHONG xuong dong chu. */
  .subtabs, .subtabs-sm{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-right:-4px;}
  .subtabs::-webkit-scrollbar, .subtabs-sm::-webkit-scrollbar{display:none;}
  .subtabs a, .subtabs-sm a{flex:none; white-space:nowrap;}
  .subtabs a{padding:10px 14px;}
  .subtabs-sm a{padding:8px 16px;}

  /* Nut/o nhap du to de bam bang ngon tay (truoc day cao 27px) + chu 16px cho o nhap de iOS khong tu phong to man hinh khi bam vao. */
  #content .btn-sm, #content .btn-group-sm > .btn{min-height:38px; padding-top:6px; padding-bottom:6px;}
  #content .form-select-sm, #content .form-control-sm, #content .dt-search{min-height:38px; font-size:16px;}
  #content input.form-control, #content select.form-select, #content textarea.form-control, .modal input.form-control, .modal select.form-select, .modal textarea.form-control{font-size:16px;}
  .dt-pagination .btn{min-height:38px; padding-left:14px; padding-right:14px;}
  .dt-toolbar{flex-wrap:wrap;} .dt-toolbar .dt-search{max-width:none; flex:1 1 100%;} .dt-toolbar .dt-filter{max-width:none; flex:1 1 100%;}

  /* Chu qua nho (<11px) doc khong ra tren man hinh nho. */
  .tq-red-label{font-size:11.5px;}
  .dt-pagination span.text-muted, .dt-pagination .small{font-size:12px;}

  /* Bao cao nhom: the giai doan vuot ngang co diem dung, header nhom gon. */
  .pgr-timeline{scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; margin-right:-8px; padding-right:8px;}
  .pgr-phase-card{scroll-snap-align:start; flex:0 0 78%; min-width:0;}
  .pgr-phase-arrow{display:none;}
  .pgr-header{flex-direction:column; align-items:flex-start;}
  .pgr-title h5{font-size:16px;}

  /* Viec cua toi: the KPI 2 cot, danh sach khoi cuon rieng. */
  .mw-list{max-height:none;}
  .mw-hello{font-size:14px; padding:10px 12px;}
  .mw-item{padding:10px 12px;}
  .mw-chip{padding:9px 16px; font-size:14px;}
  .pr-member-link{display:inline-block; padding:7px 0;}

  /* Bang tim kiem tren dau bang: o loc + tim kiem xep doc. */
  .table-scroll{-webkit-overflow-scrolling:touch;}
}

/* ===== Dong thoi gian (Gantt) - Bao cao nhom du an (_ProjectGroupReportParts.cshtml, Services/GroupGantt.cs) ===== */
.gantt-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:10px; background:var(--surface);}
.gantt{--gl:210px; position:relative; min-width:680px; padding:4px 0 6px;}
.gantt-row{display:grid; grid-template-columns:var(--gl) 1fr; align-items:center; min-height:30px;}
.gantt-label{padding:2px 10px; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:sticky; left:0; background:var(--surface); z-index:3;}
.gantt-label a{color:var(--text-2); text-decoration:none;} .gantt-label a:hover{text-decoration:underline; color:var(--blue-fg-2);}
.gantt-proj{padding-left:26px; font-size:12px;}
.gantt-count{display:inline-block; min-width:18px; padding:0 6px; border-radius:var(--r-pill); background:var(--track); color:var(--text-2); font-size:11px; text-align:center;}
.gantt-track{position:relative; height:26px; margin-right:12px;}
.gantt-head .gantt-track{height:22px; border-bottom:1px solid var(--border);}
.gantt-tick{position:absolute; top:2px; font-size:11px; color:var(--text-muted); padding-left:4px; border-left:1px solid var(--border-strong); height:18px; white-space:nowrap;}
.gantt-phase{background:var(--surface-3); margin-top:2px;}
.gantt-phase .gantt-label{background:var(--surface-3); font-weight:700; color:var(--blue-fg);}
.gantt-span{position:absolute; top:9px; height:8px; border-radius:var(--r-sm); background:rgba(30,58,138,.28);}
.gantt-empty{position:absolute; left:6px; top:5px; font-size:11.5px; color:var(--text-faint); white-space:nowrap;}
.gantt-bar{position:absolute; top:4px; height:18px; border-radius:var(--r-sm); overflow:hidden; display:flex; align-items:center; background:var(--track); border:1px solid rgba(15,23,42,.18); text-decoration:none; color:#fff; box-shadow:var(--shadow-sm);}
.gantt-bar:hover{filter:brightness(.95); box-shadow:0 2px 6px rgba(15,23,42,.25);}
.gantt-fill{position:absolute; left:0; top:0; bottom:0; opacity:.95;}
.gantt-pct{position:relative; z-index:1; margin-left:4px; padding:0 5px; border-radius:4px; font-size:11px; font-weight:700; background:rgba(15,23,42,.55); color:#fff;}   /* nen toi mo: doc duoc du nam tren phan da dat (dam) hay phan con lai (nhat) */
/* mau: nen NHAT (phan con lai), phan dam = da dat */
.gantt-green{background:#bbf7d0;} .gantt-green .gantt-fill,.gantt-key.gantt-green{background:#16a34a;}
.gantt-yellow{background:#fde68a;} .gantt-yellow .gantt-fill,.gantt-key.gantt-yellow{background:#d97706;}
.gantt-red{background:#fecaca;} .gantt-red .gantt-fill,.gantt-key.gantt-red{background:#dc2626;}
.gantt-na{background:var(--blue-bg);} .gantt-na .gantt-fill{background:#3b82f6;}
.gantt-done{background:#bfdbfe;} .gantt-done .gantt-fill,.gantt-key.gantt-done{background:#2563eb;}
.gantt-closed{background:var(--track);} .gantt-closed .gantt-fill{background:#9ca3af;}
.gantt-draft{background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 5px,var(--track) 5px,var(--track) 10px); border-style:dashed;} .gantt-draft .gantt-fill,.gantt-key.gantt-draft{background:#94a3b8;}
.gantt-paused{background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 5px,var(--track) 5px,var(--track) 10px);} .gantt-paused .gantt-fill,.gantt-key.gantt-paused{background:#9ca3af;}
.gantt-bar.is-overdue{outline:2px solid #dc2626; outline-offset:-1px;}
/* duong "hom nay" chay doc qua moi dong - vi tri = cot nhan (--gl) + % tren phan track (tru le phai 12px) */
.gantt-today{position:absolute; top:0; bottom:0; width:2px; background:#ef4444; z-index:2; pointer-events:none;
  left:calc(var(--gl) + (100% - var(--gl) - 12px) * var(--today) / 100);}
.gantt-today::before{content:"Hôm nay"; position:absolute; top:-1px; left:4px; font-size:10px; font-weight:700; color:#ef4444; white-space:nowrap; background:rgba(255,255,255,.85); padding:0 3px; border-radius:3px;}
.gantt-warn{font-size:13px; border-radius:var(--r-md); padding:8px 12px; margin-bottom:8px; border-left:4px solid;}
.gantt-warn-red{background:var(--red-bg-soft); border-color:#dc2626; color:var(--red-fg);}
.gantt-warn-yellow{background:var(--yellow-bg-soft); border-color:#f59e0b; color:var(--yellow-fg);}
.gantt-warn-paused{background:var(--surface-3); border-color:#9ca3af; color:var(--text-2);}
.gantt-legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12px; color:var(--text-2); align-items:center;}
.gantt-key{display:inline-block; width:14px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle;}
.gantt-key-today{display:inline-block; width:2px; height:12px; background:#ef4444; margin-right:6px; vertical-align:middle;}
@media (max-width:767.98px){ .gantt{--gl:130px; min-width:560px;} .gantt-label{font-size:12px;} .gantt-proj{padding-left:16px;} }

/* ===================================================================================================================
   LOP "HIEN DAI HOA" (dat CUOI FILE de ghi de nhe nhang, khong dong vao cac khoi cu):
   1) tieu de bang canh le dung cot   2) thanh cuon mong dong bo   3) hieu ung chuyen muot   4) nut hanh dong chinh
   5) tuong phan chu (WCAG AA)        6) chi tiet nho: so can deu cot, placeholder, tab trong modal, focus ban phim
   =================================================================================================================== */

/* 1) Tieu de cot dung Bootstrap .table-sm (padding 3.5px) con o du lieu 8x10px -> tieu de LECH ~7px so voi noi dung o MOI bang
      (.dt-wrap). Cho tieu de cung le trai/phai voi o du lieu. */
.dt-wrap thead th{padding:9px 10px; vertical-align:middle; white-space:nowrap;}
.dt-wrap tbody td, .dt-wrap tfoot td{font-variant-numeric:tabular-nums;}

/* 2) Thanh cuon mong, mo, bo tron cho MOI vung cuon (trang, bang, hop thoai, danh sach chon...) - thay thanh xam day mac dinh co mui ten. */
*{scrollbar-width:thin; scrollbar-color:rgba(100,116,139,.45) transparent;}
*::-webkit-scrollbar{width:9px; height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(100,116,139,.4); border-radius:var(--r-md); border:2px solid transparent; background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(71,85,105,.65); background-clip:content-box;}
*::-webkit-scrollbar-corner{background:transparent;}
#sidebar nav{scrollbar-color:rgba(255,255,255,.16) transparent;}   /* menu toi: giu thanh sang mo rieng (khoi o tren) */

/* 3) Hieu ung chuyen muot (chi khi nguoi dung KHONG tat chuyen dong trong he dieu hanh). */
@media (prefers-reduced-motion: no-preference){
  a, .nav-link, .kpi-card, .panel, .mw-item, .subtabs a, .subtabs-sm a, .dt-wrap tbody tr, .ms-item, .sp-item, .gantt-bar, .sidebar-user, .pj-chip, .wl-bar span, .pgr-phase-card{
    transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .18s ease, transform .18s ease, filter .15s ease;
  }
  .kpi-card:hover, .mw-item:hover, .pgr-phase-card:hover{box-shadow:var(--shadow-md);}
  a.mw-kpi:hover{transform:translateY(-1px);}
  .wl-bar span, .pt-bar span, .pr-seg{transition:width .5s cubic-bezier(.22,1,.36,1);}
}

/* 4) Nut hanh dong CHINH o tieu de moi bang/khung (+ Them/Tao ...) dac, noi bat - cac nut khac (Xuat Excel, Tao tu template...) giu
      kieu vien de phan cap ro rang (truoc day tat ca deu vien nhat mau nen khong biet bam nut nao truoc). */
.panel-title .btn-outline-primary{--bs-btn-color:#fff; --bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--primary-dark); --bs-btn-hover-border-color:var(--primary-dark);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--primary-dark); --bs-btn-active-border-color:var(--primary-dark);
  --bs-btn-focus-shadow-rgb:31,78,140; font-weight:600; box-shadow:0 1px 2px rgba(31,78,140,.25);}
.btn-outline-primary{--bs-btn-color:var(--blue-link); --bs-btn-border-color:var(--blue-link); --bs-btn-hover-bg:var(--primary); --bs-btn-hover-border-color:var(--primary); --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--primary-dark); --bs-btn-active-border-color:var(--primary-dark); --bs-btn-active-color:#fff;}   /* xanh Bootstrap #0d6efd chi ~4.3:1 tren nen nhat -> dam hon de doc ro */

/* 5) Tuong phan chu >= 4.5:1 (do bang cong cu tren cac trang that). */
.mw-empty{color:var(--green-fg);}
.pt-verdict.pt-ok, .pt-bars.pt-ok .pt-verdict{color:var(--green-fg);}
.pt-verdict.pt-na, .pt-bars.pt-na .pt-verdict{color:var(--text-muted);}
.tq-red-label{color:var(--text-2);}
.tq-red-block.decision .tq-red-label{color:var(--yellow-fg);}

/* 6) Chi tiet nho */
body{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.kpi-card .value, .wl-pct, .pr-pie-count, .pr-pie-pct{font-variant-numeric:tabular-nums;}
input::placeholder, textarea::placeholder{text-overflow:ellipsis;}
.panel, .kpi-card{box-shadow:var(--shadow-sm);}
/* Tab trong hop thoai: 1 dong vuot ngang, an thanh cuon (truoc day hien thanh cuon ngang day co mui ten ngay duoi tab). */
.modal .nav-tabs, .modal .nav-pills{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
.modal .nav-tabs::-webkit-scrollbar, .modal .nav-pills::-webkit-scrollbar{display:none;}
.modal .nav-tabs .nav-link, .modal .nav-pills .nav-link{white-space:nowrap;}
/* Focus ban phim ro rang cho cac nut/ lien ket tu viet (khong phai Bootstrap). */
.sidebar-user:focus-visible, #sidebar .nav-link:focus-visible, .subtabs a:focus-visible, .subtabs-sm a:focus-visible,
.mw-item:focus-visible, .gantt-bar:focus-visible, .pgr-phase-card:focus-visible{outline:2px solid #4d8fe0; outline-offset:2px; border-radius:var(--r-md);}

/* ===== Loc nhanh + bo loc tu luu (Danh sach du an) ===== */
.pj-quick{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:10px;}
.pj-quick-label{font-size:12.5px; font-weight:600; color:var(--text-2); margin-right:2px; white-space:nowrap;}
.pj-quick-label i{color:#f59e0b;}
.pj-qbtn{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border-blue); background:var(--surface); color:var(--text-2); border-radius:var(--r-pill); padding:4px 12px; font-size:13px; line-height:1.4; cursor:pointer;}
.pj-qbtn:hover{border-color:var(--border-blue); background:var(--surface-3); color:var(--primary-text);}
.pj-qbtn.active, .pj-schip.active{background:#1f4e8c; border-color:#1f4e8c; color:#fff;}
.pj-qbtn.active .bi, .pj-schip.active .bi{color:#fff;}
.pj-qsave{border-style:dashed; color:var(--primary-text); background:transparent;}
.pj-saved{display:contents;}
.pj-schip{display:inline-flex; align-items:stretch; border:1px solid var(--border-blue); background:var(--blue-bg-soft); border-radius:var(--r-pill); overflow:hidden;}
.pj-schip-apply{border:0; background:transparent; padding:4px 6px 4px 12px; font-size:13px; color:var(--primary-text); display:inline-flex; align-items:center; gap:5px; cursor:pointer; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pj-schip-del{border:0; background:transparent; padding:0 10px 0 4px; font-size:16px; line-height:1; color:var(--text-muted); cursor:pointer;}
.pj-schip-del:hover{color:var(--red-fg);}
.pj-schip.active .pj-schip-apply, .pj-schip.active .pj-schip-del{color:#fff;}
.pj-saveform{display:inline-flex; gap:6px; align-items:center; flex:1 1 320px; max-width:520px;}
.pj-saveform[hidden]{display:none;}
.pj-saveform .form-control{height:34px;}
@media (max-width:767.98px){
  .pj-quick{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
  .pj-quick::-webkit-scrollbar{display:none;}
  .pj-qbtn, .pj-schip{flex:0 0 auto; white-space:nowrap;}
  .pj-saveform{flex:0 0 min(86vw,420px); max-width:none;}
}
.pj-qbtn[hidden]{display:none;}

/* ===== Thong bao: tab trong chuong, link "Xem tat ca", trang Tat ca thong bao ===== */
.notif-dropdown{flex-direction:column; overflow:hidden;}
.notif-dropdown.show{display:flex;}
#notifListContainer{flex:1 1 auto; overflow-y:auto; max-height:320px;}
.notif-tabs{display:flex; gap:4px; padding:6px 10px 0; border-bottom:1px solid var(--border);}
.notif-tab{border:0; background:transparent; padding:6px 10px; font-size:12.5px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;}
.notif-tab:hover{color:var(--text);}
.notif-tab.active{color:var(--primary); border-bottom-color:var(--primary);}
.notif-tab-count{display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--primary); color:#fff; font-size:11px; line-height:18px; text-align:center;}
.notif-tab-count[hidden]{display:none;}
.notif-footer{display:block; padding:9px 12px; text-align:center; font-size:12.5px; font-weight:600; border-top:1px solid var(--border); background:var(--surface-2); text-decoration:none;}
.notif-footer:hover{background:var(--surface-3);}
.np-filters{display:flex; flex-wrap:wrap; gap:8px 14px; padding:10px 14px; border-bottom:1px solid var(--border);}
.np-seg{display:inline-flex; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;}
.np-seg a{padding:5px 12px; font-size:13px; color:var(--text); text-decoration:none; border-right:1px solid var(--border); background:var(--surface);}
.np-seg a:last-child{border-right:0;}
.np-seg a.active{background:var(--primary); color:#fff;}
.np-seg a:not(.active):hover{background:var(--surface-3);}
.np-item .notif-item-content{font-size:14px;}
.np-pager{display:flex; align-items:center; justify-content:center; gap:14px; padding:12px;}
@media (max-width:575.98px){ .notif-dropdown{width:min(92vw,340px);} }

/* ===== Bao cao nhom: nut xuat + che do IN (Ctrl+P / nut "In / Luu PDF" -> chon "Luu dang PDF") ===== */
.pgr-header-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.pgr-actions{display:flex; gap:6px;}
@media print{
  @page{size:A4 landscape; margin:10mm;}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  #sidebar, #sidebarBackdrop, #topbar, #appToastContainer, .subtabs, .no-print, .pj-filter, .btn, .modal, .dropdown-menu{display:none;}
  #main{margin-left:0; min-height:0;}
  #content{padding:0;}
  body{background:var(--surface);}
  .panel, .kpi-card{box-shadow:none; break-inside:avoid;}
  .gantt-scroll, .table-scroll{overflow:visible;}
  a{color:inherit; text-decoration:none;}
}

/* ===== Khung cho (skeleton) khi tai bang / danh sach bang AJAX: them class .is-loading vao vung chua ket qua ===== */
.is-loading{position:relative; pointer-events:none; min-height:120px;}
.is-loading > *{animation:skel-dim .15s ease .12s forwards;}
.is-loading::after{
  content:""; position:absolute; inset:0; z-index:5; border-radius:var(--r-md); opacity:0;
  background:
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.75) 50%, transparent 100%) 0 0 / 200% 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--surface-3) 0 14px, transparent 14px 40px) 14px 16px / calc(100% - 28px) calc(100% - 24px) no-repeat;
  animation:skel-in .15s ease .12s forwards, skel-shimmer 1.2s linear infinite;
}
@keyframes skel-dim{to{opacity:.3;}}
@keyframes skel-in{to{opacity:1;}}
@keyframes skel-shimmer{from{background-position:200% 0, 14px 16px;} to{background-position:-200% 0, 14px 16px;}}
@media (prefers-reduced-motion: reduce){ .is-loading::after{animation:skel-in .15s ease .12s forwards;} }

/* ===== Toast "Hoan tac" (window.appUndoable) ===== */
.app-undo-toast{overflow:hidden; min-width:280px;}
.app-undo-btn{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); font-weight:600;}
.app-undo-btn:hover{background:rgba(255,255,255,.26); color:#fff;}
.app-undo-bar{height:3px; background:rgba(255,255,255,.18);}
.app-undo-bar > span{display:block; height:100%; width:100%; background:#60a5fa; transform-origin:left; animation:undo-count linear forwards;}
@keyframes undo-count{from{transform:scaleX(1);} to{transform:scaleX(0);}}

/* ===== Trang thai trong co huong dan "lam gi tiep" ===== */
.empty-state{text-align:center; padding:22px 16px; color:var(--text-muted);}
.empty-state > .bi{display:block; font-size:2rem; color:#9db4d6; margin-bottom:6px;}
.empty-state .es-title{font-weight:600; color:var(--text); font-size:14px;}
.empty-state .es-hint{font-size:13px; margin-top:4px; max-width:460px; margin-left:auto; margin-right:auto;}
.empty-state-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-bottom:18px;}


/* =========================================================================
   CHE DO TOI - bat/tat bang nut mat trang tren thanh tren (luu trong trinh duyet, mac dinh theo he dieu hanh).
   Bootstrap 5.3 tu doi mau cac thanh phan cua no khi <html data-bs-theme="dark">; ta ghi de bo bien rieng cua Dashboard + noi bo bien Bootstrap
   ve cung bang mau de 2 he thong khong lech nhau.
   ========================================================================= */
:root[data-bs-theme="dark"]{
  color-scheme:dark;
  --bg:#0d1520; --card:#162131; --surface:#162131; --surface-2:#1a2739; --surface-3:#203046; --track:#2a3b52;
  --text:#e3e9f2; --text-strong:#f4f7fb; --text-2:#c3cddb; --text-muted:#9aa8bc; --text-faint:#71829a;
  --border:#2a3a51; --border-strong:#3b4f6b; --border-blue:#2e4a73;
  --primary:#3d7fdb; --primary-dark:#2f68b8; --primary-light:rgba(91,155,240,.16); --primary-text:#8fbcf5;
  --blue-bg:rgba(59,130,246,.24); --blue-bg-soft:rgba(59,130,246,.11); --blue-fg:#bcd6fb; --blue-fg-2:#93bdf8; --blue-link:#7fb0f6;
  --red:#ef6b73; --red-bg:rgba(239,68,68,.20); --red-bg-soft:rgba(239,68,68,.12); --red-fg:#fca5a5; --red-border:rgba(239,68,68,.38);
  --yellow:#e0a92b; --yellow-bg:rgba(245,158,11,.20); --yellow-bg-soft:rgba(245,158,11,.11); --yellow-fg:#fcd34d; --yellow-border:rgba(245,158,11,.38);
  --green:#3fbf82; --green-bg:rgba(16,185,129,.20); --green-bg-soft:rgba(16,185,129,.12); --green-fg:#6ee7b7; --green-border:rgba(16,185,129,.38);
  --indigo-bg:rgba(99,102,241,.24); --indigo-fg:#c7d2fe; --purple-bg:rgba(139,92,246,.24); --teal-bg-soft:rgba(20,184,166,.12); --teal-border:rgba(20,184,166,.35);
  --sidebar-bg:#0a121c; --sidebar-text:#b4c0d0; --sidebar-active:#2f68b8;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 3px 10px rgba(0,0,0,.45); --shadow-lg:0 8px 24px rgba(0,0,0,.55);
  /* dong bo bien Bootstrap */
  --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-border-color:var(--border);
  --bs-secondary-bg:var(--surface-3); --bs-tertiary-bg:var(--surface-2); --bs-emphasis-color:var(--text-strong);
  --bs-secondary-color:var(--text-muted); --bs-heading-color:var(--text-strong); --bs-link-color:var(--blue-link); --bs-link-hover-color:var(--blue-fg-2);
}

.notif-desktop-btn{display:block; width:100%; border:0; border-top:1px solid var(--border); background:var(--surface-2); padding:8px 12px; font-size:12.5px; color:var(--primary-text); text-align:center; cursor:pointer;}
.notif-desktop-btn:hover{background:var(--surface-3);}
.notif-desktop-btn[hidden]{display:none;}

/* --- Che do toi: cac diem con co mau CUNG (khong di qua bien) --- */
:root[data-bs-theme="dark"] .task-table .task-phase td,
:root[data-bs-theme="dark"] .wl-table .task-phase td,
:root[data-bs-theme="dark"] .pj-table tr.pg-head{background:color-mix(in srgb, var(--phase-bg, #6366f1) 26%, var(--surface));}
:root[data-bs-theme="dark"] .pgh-count{background:rgba(255,255,255,.12);}
:root[data-bs-theme="dark"] .bg-white{background-color:var(--surface) !important;}
:root[data-bs-theme="dark"] .bg-light, :root[data-bs-theme="dark"] .bg-body-tertiary{background-color:var(--surface-2) !important;}
:root[data-bs-theme="dark"] .text-dark{color:var(--text) !important;}
:root[data-bs-theme="dark"] img.avatar-img, :root[data-bs-theme="dark"] .gantt-bar{filter:none;}
/* Gantt (che do toi): phan "con lai" cua thanh dung mau trong suot thay vi pastel sang. */
:root[data-bs-theme="dark"] .gantt-green{background:rgba(22,163,74,.28);}
:root[data-bs-theme="dark"] .gantt-yellow{background:rgba(217,119,6,.30);}
:root[data-bs-theme="dark"] .gantt-red{background:rgba(220,38,38,.30);}
:root[data-bs-theme="dark"] .gantt-done{background:rgba(37,99,235,.32);}
:root[data-bs-theme="dark"] .gantt-bar{border-color:rgba(255,255,255,.22);}

/* Che do toi: bo mau nhan (accent) cua tung tab/khung chi tiet du an - nen trong suot + chu sang. */
:root[data-bs-theme="dark"] :is(#tab-overview, #tab-tasks, #tab-reports, .report-group, .mg-part){--acc-bg:rgba(59,130,246,.22); --acc-fg:#7fb0f6; --acc-title:#bcd6fb;}
:root[data-bs-theme="dark"] :is(#tab-documents){--acc-bg:rgba(245,158,11,.20); --acc-fg:#fcd34d; --acc-title:#fde68a;}
:root[data-bs-theme="dark"] :is(#tab-members, .mg-owner){--acc-bg:rgba(139,92,246,.24); --acc-fg:#c4b5fd; --acc-title:#ddd6fe;}
:root[data-bs-theme="dark"] :is(#tab-comments){--acc-bg:rgba(236,72,153,.22); --acc-fg:#f9a8d4; --acc-title:#fbcfe8;}
:root[data-bs-theme="dark"] :is(#tab-activity, .ov-sched){--acc-bg:rgba(20,184,166,.22); --acc-fg:#5eead4; --acc-title:#99f6e4;}
:root[data-bs-theme="dark"] :is(.ov-desc, .mg-watch){--acc-bg:rgba(148,163,184,.18); --acc-fg:#cbd5e1; --acc-title:#e2e8f0;}
:root[data-bs-theme="dark"] :is(.ov-info){--acc-bg:rgba(14,165,233,.22); --acc-fg:#7dd3fc; --acc-title:#bae6fd;}
:root[data-bs-theme="dark"] :is(.report-group.rg-green, #tab-members .col-lg-4 .panel){--acc-bg:rgba(16,185,129,.20); --acc-fg:#6ee7b7; --acc-title:#a7f3d0;}

/* Che do toi: popup (modal / dropdown / bang tra ve) dung mau nen "be mat" (--surface) nhu cac khung khac thay vi nen trang cua trang. */
:root[data-bs-theme="dark"] .modal{--bs-modal-bg:var(--surface); --bs-modal-color:var(--text); --bs-modal-border-color:var(--border); --bs-modal-header-border-color:var(--border); --bs-modal-footer-border-color:var(--border);}
:root[data-bs-theme="dark"] .dropdown-menu{--bs-dropdown-bg:var(--surface); --bs-dropdown-color:var(--text); --bs-dropdown-border-color:var(--border); --bs-dropdown-link-color:var(--text); --bs-dropdown-link-hover-color:var(--text-strong); --bs-dropdown-link-hover-bg:var(--surface-3); --bs-dropdown-divider-bg:var(--border);}
:root[data-bs-theme="dark"] .offcanvas, :root[data-bs-theme="dark"] .popover{--bs-offcanvas-bg:var(--surface); --bs-popover-bg:var(--surface); --bs-popover-border-color:var(--border);}
:root[data-bs-theme="dark"] .table{--bs-table-color:var(--text); --bs-table-border-color:var(--border); --bs-table-hover-bg:var(--surface-3); --bs-table-striped-bg:var(--surface-2);}
:root[data-bs-theme="dark"] .list-group{--bs-list-group-bg:var(--surface); --bs-list-group-border-color:var(--border); --bs-list-group-color:var(--text);}
:root[data-bs-theme="dark"] .form-control, :root[data-bs-theme="dark"] .form-select{border-color:var(--border-strong);}