/* ===== Nền tảng ===== */
:root {
    --bg: #eef1f6;
    --surface: #ffffff;
    --border: #e0e5ee;
    --border-strong: #c6cedd;
    --border-soft: #eef1f6;
    --text: #16202c;
    --text-muted: #667289;
    --text-faint: #8b96a9;
    --primary: #1a56a8;
    --primary-dark: #143f7d;
    --primary-darker: #10386f;
    --primary-soft: #eaf1fb;
    --accent-dark: #123a6b;
    /*
      Tên cũ, nay chỉ là lối vào của thang màu ý nghĩa khai ở cuối khối này.

      Hơn hai chục chỗ trong tệp còn gọi mấy tên này (nút xoá, hộp thông báo, chấm trạng
      thái, dòng KPI...). Trỏ chúng về --st-* thay vì sửa từng chỗ: cần chỉnh sắc độ về
      sau thì đổi đúng MỘT nơi và mọi màn đi theo, không sợ sót chỗ nào rồi lệch màu.
    */
    --success: var(--st-ok);
    --success-soft: var(--st-ok-soft);
    --success-border: var(--st-ok-line);
    --danger: var(--st-late);
    --danger-soft: var(--st-late-soft);
    --warn: var(--st-warn);
    --warn-soft: var(--st-warn-soft);
    --warn-border: var(--st-warn-line);
    /* Bo góc theo Material: mặt phẳng lớn bo nhiều, ô nhập bo vừa, chip bo tròn hẳn. */
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --radius-pill: 999px;

    /*
      Độ nổi theo tầng của Material. Bóng gồm hai lớp: một lớp sát và đậm tạo mép, một lớp toả
      rộng và nhạt tạo chiều sâu — một lớp thôi sẽ ra bóng bệt, nhìn phẳng.
      Đã pha sắc xanh xám của nền thay vì đen thuần, để bóng không bị xám bẩn.
    */
    --elev-1: 0 1px 2px rgba(20, 35, 60, .10), 0 1px 3px 1px rgba(20, 35, 60, .06);
    --elev-2: 0 1px 2px rgba(20, 35, 60, .12), 0 2px 6px 2px rgba(20, 35, 60, .08);
    --elev-3: 0 1px 3px rgba(20, 35, 60, .14), 0 4px 12px 3px rgba(20, 35, 60, .10);

    /* Giữ tên cũ để các khối chưa chuyển vẫn chạy. */
    --shadow: var(--elev-1);

    /*
      Lớp phủ trạng thái của Material: chạm/di chuột không đổi hẳn màu nền mà phủ thêm một lớp
      mờ của màu chữ lên trên. Nhờ vậy cùng một quy tắc dùng được cho cả nền sáng lẫn nền màu.
    */
    --state-hover: rgba(20, 35, 60, .055);
    --state-press: rgba(20, 35, 60, .10);

    /* ===== Thang màu theo Ý NGHĨA =====

       Tách hẳn khỏi màu thương hiệu ở trên, và đây là điểm mấu chốt.

       Trước đây badge trạng thái dùng chung màu xanh với nút bấm, nên mắt vừa học được
       "xanh dương là chỗ bấm được" thì lại gặp badge xanh không bấm được — phải dừng lại
       đọc chữ mới hiểu. Từ nay:

           --primary  CHỈ dành cho thao tác (nút, liên kết, mục đang chọn)
           bốn nhóm dưới CHỈ dành cho tình trạng của dữ liệu

       Mỗi nhóm có ba sắc: chữ (đậm, đủ tương phản trên nền nhạt), nền, và viền. */

    /* Xong xuôi, đúng hạn */
    --st-ok: #1a7f52;
    --st-ok-soft: #e6f5ee;
    --st-ok-line: #a8dcc4;

    /* Sắp tới hạn, cần để mắt tới */
    --st-warn: #9a6700;
    --st-warn-soft: #fdf5e2;
    --st-warn-line: #ecd9a6;

    /* Quá hạn, ưu tiên cao */
    --st-late: #b3261e;
    --st-late-soft: #fbeae9;
    --st-late-line: #f0c4c1;

    /* Chưa bắt đầu, trung tính — xám ngả xanh cho hợp nền, không phải xám thuần */
    --st-idle: #5c6a80;
    --st-idle-soft: #f0f3f8;
    --st-idle-line: #d7dee9;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
    font-family: inherit;
}

/*
  Thang chữ của Material: tiêu đề giãn chữ âm nhẹ cho đặc, nhãn và chữ nhỏ giãn chữ dương cho dễ
  đọc. Đây là thứ tạo cảm giác "Material" rõ nhất sau bo góc và đổ bóng.
*/
h1, h2, h3 { letter-spacing: -.2px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.main { padding-top: 24px; padding-bottom: 48px; }

/* ===== Bố cục có menu dọc =====
   Menu dọc neo cố định bên trái, phần còn lại của trang nằm trong .shell và được đẩy
   sang phải đúng bằng bề rộng menu. Trang Đăng nhập không có menu nên .shell không lệch. */
:root { --sidebar-w: 232px; }

.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}
body.has-sidebar .shell { margin-left: var(--sidebar-w); }

/* Nội dung đã bị menu chiếm chỗ nên không căn giữa theo cả màn hình nữa */
body.has-sidebar .main, body.has-sidebar .topbar-inner, body.has-sidebar .footer .container {
    max-width: none;
    min-width: 0;
}

/* Đẩy phần chân trang xuống đáy khi nội dung ngắn. Cần width 100%: .main vừa là ô co giãn
   của .shell vừa mang lớp .container có lề auto, mà lề auto trong flexbox sẽ chặn ô giãn hết
   bề ngang — không đặt width thì vùng nội dung co lại vừa bằng chữ và trôi vào giữa. */
.shell > .main {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
    overflow-y: auto;
    z-index: 40;
}

/* Hàng đầu menu: tên hệ thống + nút thu gọn */
.sidebar-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.sidebar-head .brand { flex: 1; min-width: 0; padding: 4px 2px 0; }
.sidebar .brand-text { font-size: 13px; white-space: normal; line-height: 1.35; }

/* Nút thu gọn menu (mũi tên «) nằm trong menu */
.sidebar-collapse {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}
.sidebar-collapse:hover { background: var(--primary-soft); color: var(--primary); border-color: #bcd5f2; }

/* Nút mở lại menu (icon SVG) trên thanh trên, chỉ hiện khi menu đã thu gọn ở màn hình rộng */
.sidebar-expand {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.sidebar-expand:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }

/* ===== Menu dọc ===== */
.sidenav { display: flex; flex-direction: column; gap: 2px; }

.sidenav a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: #5b6779;
    font-weight: 500;
}

.sidenav a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
/* Mục đang mở theo kiểu ngăn điều hướng của Material: viên thuốc nền nhạt, chữ màu chính. */
.sidenav a.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

/* Nhãn phân nhóm, ví dụ "Quản trị" */
.sidenav-title {
    margin-top: 14px;
    padding: 6px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-faint);
    border-top: 1px solid var(--border-soft);
}

/* Nhóm gập/mở bằng thẻ details — không cần JavaScript */
.sidenav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: #5b6779;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

/* Bỏ tam giác mặc định của details để tự vẽ mũi tên bên phải */
.sidenav-group summary::-webkit-details-marker { display: none; }

/* Đổi hẳn ký tự thay vì xoay: glyph nhỏ xoay 180° hiển thị nhoè, nhìn ra thành dấu gạch */
.sidenav-group summary::after { content: "▾"; font-size: 11px; }
.sidenav-group[open] summary::after { content: "▴"; }

.sidenav-group summary:hover { background: var(--primary-soft); color: var(--primary); }
.sidenav-group summary.active { color: var(--primary); }

.sidenav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 2px 10px; padding-left: 8px; border-left: 2px solid var(--border); }
.sidenav-sub a { padding: 7px 10px; font-size: 13.5px; }

/* Nút ba gạch menu (icon SVG), chỉ hiện khi menu dọc bị thu lại trên màn hình hẹp */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.menu-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary);
}

.menu-toggle-icon {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Nút đóng menu trên mobile */
.sidebar-close-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    margin-left: auto;
    transition: all 0.15s ease;
}
.sidebar-close-mobile:hover {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: #e6b8b5;
}

/* Đủ hai lớp để thắng .brand{display:flex} khai báo bên dưới, nếu không sẽ lộ ở màn hình rộng */
.brand.brand-compact { display: none; }

.sidebar-scrim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 35, 60, .38);
    z-index: 35;
}

/* ===== Thanh trên cùng ===== */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 60px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: block;
    object-fit: contain;
}

.brand-text { color: var(--text); font-weight: 600; white-space: nowrap; }

/* Chỉ báo tuần đang diễn ra ở thanh trên (như thiết kế: chấm xanh + tuần + khoảng ngày) */
.topbar-week {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}
.topbar-week-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: 0 0 auto; }
.topbar-week-range { color: var(--text-faint); }

/* Mục menu trên thanh trên — dành cho trang công khai (Tài liệu tích hợp) */
.topbar-link {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.topbar-link:hover { color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.topbar-link.active { color: var(--primary); background: var(--primary-soft); }

/* ===== Nút Tải Ứng Dụng Mobile (Android & iOS) trên Topbar ===== */
.topbar-app-downloads {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.4;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
    -webkit-font-smoothing: antialiased;
}

.app-download-btn:hover {
    text-decoration: none;
    box-shadow: var(--elev-1);
    transform: translateY(-1px);
}

.app-download-android:hover {
    background: #eef8f2;
    border-color: #a8dcc4;
    color: #1a7f52;
}

.app-download-ios:hover {
    background: #f0f3f8;
    border-color: #c6cedd;
    color: #1a56a8;
}

.app-download-btn .app-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.app-download-android .app-icon {
    color: #2ea44f;
}

.app-download-ios .app-icon {
    color: #16202c;
}

/* Modal thông báo iOS đang xét duyệt */
.app-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

.app-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.app-modal-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 26px 24px 22px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}

.app-modal-backdrop.show .app-modal-card {
    transform: scale(1);
}

.app-modal-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #f0f3f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #1a56a8;
}

.app-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.app-modal-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 20px;
}

.app-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Điều hướng đã chuyển hết sang menu dọc, thanh trên chỉ còn khối tài khoản bên phải */
.user-area { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* ===== Thanh trên: Quy tắc Responsive cho Mobile & Tablet ===== */
@media (max-width: 860px) {
    .topbar-link { display: none !important; }
    .topbar-week { display: none !important; }
    .topbar-inner { gap: 10px; }

    /* Nút tải app trên màn hình tablet/mobile: ẩn nhãn chữ, chuyển thành nút tròn/viên thuốc icon gọn gàng */
    .app-download-btn span { display: none !important; }
    .app-download-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        flex-shrink: 0 !important;
    }
    .app-download-btn .app-icon {
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
    }
    .topbar-app-downloads {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 640px) {
    .topbar-inner {
        gap: 8px;
        height: 52px;
        padding-left: 8px;
        padding-right: 8px;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .brand-text { display: none !important; }
    .brand-compact { flex-shrink: 0; }
    .brand-compact .brand-mark { width: 28px; height: 28px; }

    .user-area {
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
    }

    /* Rút gọn thông tin người dùng: ẩn vai trò, giới hạn bề rộng tên */
    .user-chip {
        max-width: 90px;
        padding: 3px 6px;
        font-size: 12px;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-chip em { display: none !important; }

    /* Nút Đăng xuất nhỏ gọn */
    .inline-form { flex-shrink: 0; margin: 0; }
    .inline-form .btn-ghost {
        padding: 4px 8px;
        font-size: 11.5px;
        white-space: nowrap;
    }

    .user-area .btn-primary {
        padding: 5px 10px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    .notif-panel {
        position: fixed;
        top: 54px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }
}

@media (max-width: 420px) {
    .topbar-inner {
        gap: 5px;
        padding-left: 6px;
        padding-right: 6px;
    }
    .user-area {
        gap: 4px;
    }
    .topbar-app-downloads {
        gap: 4px !important;
    }
    .app-download-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .app-download-btn .app-icon {
        width: 15px !important;
        height: 15px !important;
    }
    .menu-toggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }
    .brand-compact .brand-mark {
        width: 26px;
        height: 26px;
    }
    .notif-bell {
        width: 32px;
        height: 32px;
    }
    .user-chip {
        max-width: 65px;
        font-size: 11px;
        padding: 2px 4px;
    }
    .inline-form .btn-ghost {
        padding: 4px 6px;
        font-size: 11px;
    }
}

.user-chip {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: right;
    color: var(--text);
    padding: 5px 10px;
    border-radius: 6px;
}

.user-chip:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.user-chip em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.user-chip:hover em { color: var(--primary); }

.link-quiet { color: var(--text-muted); font-size: 13px; }
.inline-form { display: inline; margin: 0; }

/* Ô chọn nằm thẳng trên thanh tiêu đề (chọn tháng ở màn Tổng quan) — không có nhãn riêng nên
   phải tự co lại cho vừa, khác với ô chọn trong khối bộ lọc. */
.inline-filter { display: flex; gap: 6px; margin: 0; }
.inline-filter select { min-width: 0; width: auto; }

.footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 16px 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== Tiêu đề trang =====

   Nâng lên thành một khối trắng như .pagehead của màn Checklist, thay vì để chữ trần
   trên nền xám. Sửa ngay tại lớp cũ nên năm chục màn đang dùng .page-head đều lên theo
   mà không phải sửa từng view — và các view đó vẫn giữ nguyên cấu trúc HTML cũ.

   Nội dung bên trong vẫn là <h1> + <p> + khối nút bên phải như cũ. */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: 20px 24px;
    margin-bottom: 14px;
}

.page-head h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.35px;
}

.page-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

/* Chữ đậm trong dòng mô tả là tên đối tượng đang xem — cho nó màu chữ chính để nổi
   lên khỏi phần chú thích xung quanh. */
.page-head p strong,
.page-head p b { color: var(--text); font-weight: 600; }

/* Khối nút bên phải tiêu đề: căn theo đáy để không bị trôi lên khi tiêu đề hai dòng. */
.page-head .btn-row { align-items: center; }

/* ===== Ô tuần hiện tại trên màn hình tổng hợp =====
   Nằm bên trong .page-head (vốn đã là khối trắng có bóng) nên bỏ bóng riêng đi, chỉ
   giữ nền nhạt và dải màu bên trái — hai lớp bóng lồng nhau trông rất bẩn. */
.week-box {
    background: var(--bg);
    border: none;
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-xs);
    box-shadow: none;
    padding: 11px 15px;
    min-width: 200px;
}

.week-box-title { font-weight: 650; font-size: 14.5px; color: var(--text); }
.week-box-range { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.week-box-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* ===== Thẻ ===== */
/*
  Thẻ theo kiểu "elevated card" của Material: không viền, phân tách với nền bằng độ nổi.
  Viền cộng bóng cùng lúc làm mép thẻ trông dày và cũ.
*/
.card {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    margin-bottom: 14px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.card-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 650;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.card-body { padding: 20px; }

/* Dòng chú thích ngay dưới một bảng: kẻ ngăn và thu nhỏ lại cho ra dáng chân bảng,
   thay vì dính sát vào dòng cuối trông như còn một dòng dữ liệu nữa. */
.table-wrap + .card-body,
.pager + .card-body {
    border-top: 1px solid var(--border);
    padding: 13px 16px;
}

.table-wrap + .card-body .hint,
.pager + .card-body .hint { font-size: 12.5px; }

/* ===== Ô số liệu ===== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }

/* Không viền, chỉ dùng độ nổi để tách khỏi nền — khớp với .card và .pagehead. Viền cộng
   bóng cùng lúc làm mép ô trông dày và cũ. */
.stat {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--elev-1);
}

/* Con số để màu chữ thường, KHÔNG mặc định xanh thương hiệu: một dãy ô số liệu mà số
   nào cũng xanh thì không số nào nổi lên, kể cả số đang báo động. Ô nào cần nhấn thì
   thêm .stat-ok / .stat-warn / .stat-late. */
.stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 12.5px;
    margin-top: 4px;
}

.stat-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Sắc thái theo ý nghĩa của con số. */
.stat-ok .stat-value { color: var(--st-ok); }
.stat-warn .stat-value { color: var(--st-warn); }
.stat-late .stat-value { color: var(--st-late); }
.stat-primary .stat-value { color: var(--primary); }

/* ===== Dashboard theo vai trò =====
   Bỏ thanh tiêu đề nền xanh đặc: cả trang chỉ có mỗi khối này tô đậm nên nó hút hết
   sự chú ý về phía tiêu đề, trong khi thứ đáng nhìn là danh sách bên dưới. Dùng chung
   một kiểu với .card cho nhất quán, phân tách bằng đường kẻ mảnh. */
.dash-panel {
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--elev-1);
    margin-bottom: 14px;
    background: var(--surface);
}

.dash-panel-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    font-weight: 650;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-panel-head .sub { color: var(--text-muted); font-weight: 400; font-size: 12.5px; }
.dash-panel-body { background: var(--surface); }

.dash-item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.dash-item:last-child { border-bottom: 0; }
.dash-item-main { flex: 1 1 260px; min-width: 0; }
.dash-item-main .title { font-weight: 600; }
.dash-item-main .sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.dash-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.num-badge {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
}
.num-badge.danger { background: var(--danger-soft); color: var(--danger); }
.num-badge.warn { background: var(--warn-soft); color: var(--warn); }
.num-badge.info { background: var(--primary-soft); color: var(--primary); }
.num-badge.ok { background: var(--success-soft); color: var(--success); }

.progress-track { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: #e6eaf1; }
.progress-fill { background: var(--success); }

.avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* Cùng khoảng cách dưới như .card để các khối xếp chồng nhau đều tay — thiếu nó thì lưới ô
   số liệu dính sát vào thẻ ngay bên dưới. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.tile-num { font-size: 24px; font-weight: 700; line-height: 1.1; }
.tile-num.danger { color: var(--danger); }
.tile-label { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.member-cell { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; }
.member-cell .info { flex: 1; min-width: 0; }
.member-cell .name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-cell .meta { font-size: 12px; color: var(--text-faint); }

.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.flow-cell { border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 16px; }
.flow-cell .head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.flow-cell .detail { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }

/* Lịch sử tuần gần đây (màn Báo cáo của tôi) */
.hist-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); }
.hist-row:last-child { border-bottom: 0; }
.hist-week { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; min-width: 64px; flex: 0 0 auto; }
.hist-text { flex: 1; min-width: 0; font-size: 13px; color: #5b6779; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.status-dot.ok { background: var(--success); }
.status-dot.warn { background: var(--warn); }
.status-dot.off { background: var(--text-faint); }

/* ===== Bộ lọc =====

   Thu gọn lại: khoảng cách nhỏ hơn, nhãn nhỏ và nhạt hơn, ô nhập thấp hơn. Bộ lọc là
   thứ dùng thưa nên không nên chiếm chỗ như nội dung chính — nhưng vẫn GIỮ nhãn trên
   mỗi ô, vì các màn khác có tới năm sáu ô lọc gần giống nhau, bỏ nhãn là người dùng
   phải mở từng ô ra mới biết nó lọc cái gì.

   Ở màn Checklist thì dùng .filterbar (một hàng, không nhãn) vì chỉ có bốn ô và tên
   ô hiện ngay trong ô. */
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; gap: 4px; }

.filter-field label {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 650;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.filter-field.grow { flex: 1; min-width: 200px; }

/* Ô nhập trong bộ lọc thấp hơn ô nhập trong biểu mẫu: biểu mẫu là để điền, bộ lọc là
   để chọn nhanh rồi đi tiếp. */
.filters input,
.filters select {
    padding: 7px 11px;
    font-size: 13px;
}

.filters input:focus,
.filters select:focus { padding: 6px 10px; }

/* Nút Lọc/Bỏ lọc nằm cuối hàng, canh đáy cho thẳng với các ô bên cạnh. */
.filters .btn-row { align-items: center; }

.check-inline { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; }
.check-inline input { margin: 0; }
.check-inline label { font-size: 13px; color: var(--text); font-weight: 500; }

/* ===== Điều khiển nhập liệu ===== */
/*
  Ô nhập kiểu "outlined text field" của Material: viền mảnh khi nghỉ, khi được chọn thì viền dày
  lên 2px và đổi màu chính — KHÔNG dùng quầng sáng bên ngoài. Quầng sáng làm các ô sát nhau trông
  như bị nhoè vào nhau; đổi độ dày viền thì gọn và rõ hơn hẳn.

  Bù lại 1px vào phần đệm lúc được chọn để chữ trong ô không bị nhích khi viền dày lên.
*/
input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="date"], input[type="email"], input[type="file"],
select, textarea {
    font-family: inherit;
    font-size: 14px;
    padding: 10px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: #fff;
    color: var(--text);
    min-width: 160px;
    transition: border-color .12s ease, background-color .12s ease;
}

input[type="text"]:hover, input[type="password"]:hover, input[type="search"]:hover,
input[type="number"]:hover, input[type="date"]:hover, input[type="email"]:hover,
select:hover, textarea:hover { border-color: var(--text-muted); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border: 2px solid var(--primary);
    padding: 9px 12px;
    box-shadow: none;
}

textarea:focus { padding: 9px 12px; }
textarea { min-height: 84px; resize: vertical; width: 100%; }

/*
  Nhãn nổi phía trên ô, theo kiểu nhãn đã "bay lên" của Material outlined field: chữ nhỏ, giãn
  chữ dương, đổi sang màu chính khi ô bên dưới đang được chọn.
*/
.form-field { position: relative; }

.form-field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--text-muted);
    transition: color .12s ease;
}

.form-field:focus-within > label { color: var(--primary); }

/* ===== Select2: chỉnh lại cho khớp với các ô nhập khác ===== */
.select2-container {
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.filter-field .select2-container {
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
}
.form-field .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: auto;
    padding: 7px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.45;
    padding: 0;
    padding-right: 26px;
    color: var(--text);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #8d97a8; }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 6px;
}

/* Nút xoá lựa chọn: đẩy ra sát mũi tên và làm rõ hơn mặc định */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 18px;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 400;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--danger); }

/* Trạng thái mở / focus dùng chung vòng sáng với các ô nhập khác */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.select2-dropdown {
    border-color: var(--primary);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20, 35, 60, .13);
    overflow: hidden;
    z-index: 1060;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    padding: 7px 9px;
    min-width: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--primary);
}

.select2-results__option { padding: 8px 11px; font-size: 13.5px; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background: var(--primary);
    color: #fff;
}

/* Ô nhập của Select2 không được dính rule width:100% dành cho input trong form */
.form-field .select2-search__field { width: 100% !important; }

/* ===== Nút ===== */
/*
  Nút theo Material 3: bo tròn hẳn hai đầu, chữ đậm vừa và giãn chữ dương nhẹ.
  Nút đặc có độ nổi tăng dần khi di chuột rồi hạ xuống khi bấm — chính chuyển động lên/xuống này
  tạo cảm giác bấm được, chứ không chỉ là đổi màu.
*/
.btn {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn:hover { text-decoration: none; }
.btn:active { box-shadow: none; }
.btn-sm { padding: 6px 14px; font-size: 13px; }

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: var(--elev-1);
}

.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--elev-2); }

.btn-default { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn-default:hover { background: var(--state-hover); border-color: var(--text-muted); }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--state-hover); color: var(--text); }

.btn-danger { background: #fff; color: var(--danger); border-color: #e6b8b5; }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Icon SVG nhúng trong nút — ăn theo màu chữ của nút (currentColor). */
.btn .btn-icon {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 5px;
    flex: 0 0 auto;
}

/* ===== Nhóm nút =====
   Các nút thao tác trên bảng dính liền thành một khối: chỉ bo góc hai đầu, viền giữa
   chồng lên nhau 1px. Con của nhóm có thể là thẻ <a class="btn"> hoặc <form> bọc nút
   (các thao tác ghi đều phải đi bằng POST), nên chọn cả hai kiểu. */
.btn-group { display: inline-flex; align-items: stretch; vertical-align: middle; }
.btn-group .inline-form { display: inline-flex; margin: 0; }
.btn-group .btn { border-radius: 0; margin: 0; position: relative; }

.btn-group > .btn:first-child,
.btn-group > *:first-child > .btn {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btn-group > .btn:last-child,
.btn-group > *:last-child > .btn {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.btn-group > * + .btn,
.btn-group > * + * > .btn { margin-left: -1px; }

/* Nút đang rê chuột phải nổi lên trên để thấy trọn viền của chính nó */
.btn-group .btn:hover, .btn-group .btn:focus { z-index: 1; }

/* ===== Bảng ===== */
.table-wrap {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    display: block;
}

/*
  Bảng có menu thao tác thả xuống vẫn cuộn ngang bình thường: khi mở, app.js neo bảng chọn
  theo toạ độ màn hình (position: fixed) nên nó nằm ngoài khung, không bị overflow cắt mất.
  Giữ lại tên lớp cho các view đang dùng — trước đây lớp này tắt cuộn ngang, khiến bảng nhiều
  cột đẩy tràn cả trang trên điện thoại.
*/
.table-wrap.with-menu {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

/* ---- Menu thao tác trên từng dòng ---- */
.row-menu { position: relative; display: inline-block; }

.row-menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    white-space: nowrap;
}

.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary::marker { content: ""; }
.row-menu > summary:hover { background: var(--bg-soft); }
.row-menu[open] > summary { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

.row-menu-items {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    /* Trên menu dọc (40) — bằng nhau thì chỉ hơn nhờ thứ tự thẻ, đổi bố cục là hỏng. */
    z-index: 50;
    min-width: 170px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(20, 35, 60, .14);
    text-align: left;
}

.row-menu-items a,
.row-menu-items button {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 5px;
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
}

.row-menu-items a:hover,
.row-menu-items button:hover { background: var(--bg-soft); }
.row-menu-items .danger { color: var(--danger); }
.row-menu-items .danger:hover { background: var(--danger-soft); }
.row-menu-sep { height: 1px; margin: 5px 2px; background: var(--border-soft); }

/*
  Tô nền dòng theo giai đoạn dự án. Dùng dải màu rất nhạt: đủ để mắt gom nhóm khi lướt bảng,
  nhưng không lấn át chữ. Dòng của dự án đã đóng thì làm mờ chữ luôn để nó lùi hẳn ra sau.
*/
/* Giai đoạn dự án nói bằng dải màu ở ô đầu dòng thay vì tô nền cả dòng.

   Bảng dự án trước đây có dòng nền xanh nhạt, dòng nền xanh ĐẶC chữ trắng, dòng nền
   xám — ba kiểu nền cùng lúc làm bảng trông như ba bảng ghép lại, và dòng nền đặc thì
   kéo theo cả tá quy tắc ghi đè để chữ, nút, badge bên trong không bị chìm.

   Dải màu bên trái giữ nguyên khả năng phân biệt khi quét mắt, mà mọi dòng vẫn cùng
   một nền nên phần còn lại của bảng đọc bình thường. Chú giải màu dưới bảng vẫn khớp:
   .phase-key dùng lại đúng các màu này. */
table.data tbody tr.row-implement > td:first-child,
table.data tbody tr.row-support > td:first-child,
table.data tbody tr.row-closed > td:first-child {
    position: relative;
    padding-left: 18px;
}

table.data tbody tr.row-implement > td:first-child::before,
table.data tbody tr.row-support > td:first-child::before,
table.data tbody tr.row-closed > td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

table.data tbody tr.row-implement > td:first-child::before { background: var(--primary); }
table.data tbody tr.row-support > td:first-child::before { background: var(--st-ok); }
table.data tbody tr.row-closed > td:first-child::before { background: var(--border-strong); }

/* Dự án đã đóng làm nhạt chữ đi — nó vẫn tra cứu được nhưng không còn phải theo dõi. */
table.data tbody tr.row-closed { color: var(--text-muted); }

/*
  Trước đây dòng "giai đoạn Hỗ trợ" tô nền xanh ĐẶC chữ trắng, kéo theo cả một loạt quy
  tắc ghi đè để chữ phụ, liên kết, badge, nút và menu bên trong không bị chìm. Nay giai
  đoạn đã nói bằng dải màu bên trái nên mọi dòng cùng một nền — bỏ được hết chỗ ghi đè
  đó, và các thành phần bên trong dùng lại màu chuẩn của chúng.

  Menu thả xuống giữ lại phần định màu vì nó nổi trên dòng và nền luôn trắng.
*/
table.data tbody tr .row-menu-items a,
table.data tbody tr .row-menu-items button {
    color: var(--text);
    text-decoration: none;
}

table.data tbody tr .row-menu-items .danger { color: var(--st-late); }
table.data tbody tr .row-menu-items a:hover,
table.data tbody tr .row-menu-items button:hover { background: var(--state-hover); }
table.data tbody tr .row-menu-items .danger:hover { background: var(--st-late-soft); }

/*
  Ô màu nhỏ trong phần chú giải dưới bảng. Phải khai màu riêng ở đây: các lớp row-* bên trên chỉ
  áp cho <tr> trong bảng, nên nếu dựa vào chúng thì ô chú giải sẽ trắng trơn và trông y hệt
  một ô đánh dấu.
*/
/* Ô chú giải mô phỏng đúng DẢI màu bên trái dòng: cùng bề rộng 3px, cùng bo góc, cùng
   màu — nhìn chú giải là nhận ra ngay dải nào ứng với giai đoạn nào. */
.phase-key {
    display: inline-block;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    vertical-align: -2px;
    margin-right: 4px;
}

.phase-key.row-implement { background: var(--primary); }
.phase-key.row-support { background: var(--st-ok); }
.phase-key.row-closed { background: var(--border-strong); }

/* ===== Hộp thoại =====
   Thao tác thêm/sửa mở ngay trên danh sách thay vì chuyển trang: giữ nguyên bộ lọc, số trang và
   vị trí cuộn của người dùng. Kích thước chọn theo lượng nội dung của form. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    background: rgba(16, 26, 42, .65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-backdrop.open { display: flex; }

.modal,
.modal-card {
    width: 100%;
    max-width: 720px;
    background: var(--surface, #ffffff);
    border-radius: var(--radius, 8px);
    box-shadow: var(--elev-3, 0 10px 25px -5px rgba(0, 0, 0, 0.25));
    overflow: hidden;
    animation: modal-in .14s ease-out;
    border: 1px solid var(--border);
    margin: auto;
}

/* Hộp hẹp cho form ít ô, hộp rộng cho form nhiều ô hoặc có bảng bên trong. */
.modal.modal-sm, .modal-card.modal-sm { max-width: 460px; }
.modal.modal-lg, .modal-card.modal-lg { max-width: 1140px; }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}

.modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg);
}

.modal-title { font-size: 17px; font-weight: 600; }

.modal-close {
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--radius-pill);
}

.modal-close:hover { background: var(--state-hover); color: var(--text); }

.modal-body { padding: 20px; }

/* Form bên trong hộp thoại đã có nút ở chân hộp nên bỏ đường kẻ trên của .form-actions. */
.modal-body .form-actions { margin-bottom: 0; }

.modal-loading { padding: 40px; text-align: center; color: var(--text-muted); }

/* ---- Ô gộp nhiều thông tin trong bảng ---- */
.cell-title { font-weight: 600; }
.cell-meta { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }
.cell-progress { min-width: 130px; }
.cell-progress .progress-track { margin-top: 5px; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/*
  Bảng theo kiểu data table của Material: dòng thoáng hơn, chỉ có đường kẻ ngang mảnh, và di chuột
  thì phủ lớp trạng thái thay vì đổi hẳn màu nền.
*/
table.data th, table.data td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
    overflow-wrap: break-word;
}

/* Tiêu đề cột viết hoa, nhỏ và nhạt — khớp với bảng của màn Checklist. Chữ hoa nhỏ đọc
   ra ngay là "nhãn cột" chứ không phải dữ liệu, nên mắt bỏ qua được khi quét nội dung. */
table.data thead th {
    background: var(--surface);
    color: var(--text-faint);
    font-size: 11.5px;
    letter-spacing: .5px;
    font-weight: 650;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

table.data tbody tr { transition: background-color .1s ease; }
table.data tbody tr:hover { background: var(--state-hover); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cột đếm ngắn (số thứ tự, số lượng): canh giữa cho thẳng với tiêu đề cột. Canh phải chỉ hợp
   với số cần so sánh theo hàng đơn vị — số thứ tự và số đếm nhỏ thì canh phải trông rời rạc. */
table.data th.center, table.data td.center { text-align: center; }
table.data td.actions { white-space: nowrap; text-align: right; }
table.data .muted { color: var(--text-muted); }
table.data .nowrap { white-space: nowrap; }

/* Bề rộng tối thiểu cho các cột chữ.
   Bảng rộng 100% mà các cột badge / nút lại nowrap nên không co được: trình duyệt dồn
   hết phần thiếu chỗ vào mấy cột chữ xuống dòng được, bóp chúng còn đúng một từ mỗi
   dòng. Đặt sàn cho từng loại cột thì thà cuộn ngang còn hơn để cột chữ nát ra. */
table.data .wrap-text   { min-width: 200px; }   /* nội dung công việc, ghi chú dài */
table.data .col-project { min-width: 200px; }   /* tên dự án */
table.data .col-name    { min-width: 150px; }   /* họ tên người, tên danh mục */

/* Cột đầu của mọi bảng luôn là cột định danh — không bao giờ để nó bị bóp nát. */
table.data tbody td:first-child { min-width: 120px; }

/* Dòng phụ trong cùng một ô: khách hàng, trạng thái dự án... */
table.data .cell-sub { margin-top: 5px; }
table.data .cell-sub.muted { font-size: 12.5px; line-height: 1.4; }

/* ===== Bảng trên màn hẹp ===== */
@media (max-width: 1200px) {
    table.data { font-size: 12.5px; }
    table.data th, table.data td { padding: 7px 8px; }
    table.data .wrap-text, table.data .col-project { min-width: 170px; }
    table.data .col-name { min-width: 130px; }
    .btn-group .btn { padding: 5px 8px; }
}

@media (max-width: 820px) {
    table.data th, table.data td { padding: 6px 7px; }
    table.data .wrap-text, table.data .col-project { min-width: 150px; }
    table.data .col-name { min-width: 120px; }
    table.data tbody td:first-child { min-width: 110px; }

    /* Đầu bảng dính trên đỉnh chỉ có ích khi trang cuộn dọc dài; màn hẹp thì bỏ đi cho nhẹ */
    table.data thead th { position: static; }
}

/* ===== Điện thoại =====
   Dải 360-430px: lấy lại từng chục pixel một. Bảng vẫn cuộn ngang được (.table-wrap) nên
   không cần ép cột hẹp thêm — chỗ đáng lấy lại là lề, khoảng đệm và những chỗ nowrap thừa. */
@media (max-width: 640px) {
    /* Lề trang và lề thẻ ăn tới 80px trên màn 360px — hơn 1/5 bề ngang. */
    .container { padding-left: 12px; padding-right: 12px; }
    .card-body, .dash-panel-body { padding-left: 12px; padding-right: 12px; }
    .card-head, .dash-panel-head { padding-left: 12px; padding-right: 12px; }

    .page-head h1 { font-size: 19px; }
    .page-head p { font-size: 12.5px; }

    /* Nhóm nút để nguyên một khối thì tràn; cho xuống dòng và bỏ nối viền âm. */
    .btn-group { flex-wrap: wrap; gap: 6px; }
    .btn-group > * + * > .btn { margin-left: 0; }
    .btn-group .btn { border-radius: var(--radius-sm); }

    /* Ô thao tác canh trái cho thẳng hàng với phần còn lại của dòng. */
    table.data td.actions { text-align: left; white-space: normal; }
    .leave-approve-form { min-width: 140px; }
    .leave-approve-form .leave-note { min-width: 130px; font-size: 12px; }

    /* Đầu bảng xuống dòng được thì bảng hẹp lại đáng kể, đỡ phải cuộn ngang nhiều. */
    table.data thead th { white-space: normal; }

    /* Đường dẫn phân cấp dài hơn cả bề ngang máy. */
    .breadcrumb-current { max-width: 100%; }

    /* Bộ lọc: mỗi ô một dòng, khỏi chen chúc, không tràn card */
    .filters { display: flex; flex-direction: column; width: 100%; gap: 12px; }
    .filter-field, .filter-field.grow { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    .form-control, .filter-field .select2-container { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
    .filter-field input, .filter-field select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

    /* Ô số liệu 2 cột thay vì 1 cột dài thượt. */
    .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .tile { padding: 12px; }
    .tile-num { font-size: 20px; }
    .tile-label { font-size: 11.5px; }

    .member-grid, .flow-grid { grid-template-columns: 1fr; }

    /* Menu thao tác neo theo màn hình: chừa lề hai bên cho máy hẹp nhất. */
    .row-menu-items { max-width: calc(100vw - 16px); }
}

/* Nhãn tuần báo cáo trên bảng chi tiết tham gia */
/* Xem trước nội dung tin nhắn Telegram */
.message-preview {
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 420px;
    overflow-y: auto;
}

.week-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: #eef2f8;
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Nhãn tuần báo cáo: xanh lá khi đúng tuần hiện tại, đỏ khi đã trễ (hoặc chưa ghi). */
.week-tag.on-time {
    background: #e6f4ea;
    border-color: #a6d8b6;
    color: #1e7d3c;
}

.week-tag.late {
    background: #fdecea;
    border-color: #f2b8b2;
    color: #c0392b;
}

/* ===== Ma trận chức năng (màn Nhóm quyền) ===== */
.perm-matrix.is-disabled { opacity: .45; pointer-events: none; }

.perm-cat { margin-bottom: 18px; }
.perm-cat:last-child { margin-bottom: 0; }

.perm-cat-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-weight: 700;
    color: var(--text-muted);
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.perm-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 0;
    flex-wrap: wrap;
}
.perm-row + .perm-row { border-top: 1px dashed var(--border); }

.perm-mod {
    flex: 0 0 190px;
    font-weight: 600;
    font-size: 13.5px;
}

.perm-actions { display: flex; gap: 8px 18px; flex-wrap: wrap; }

.perm-chk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.perm-chk input { margin: 0; }

/* Chức năng đang TẮT toàn hệ thống: vẫn tích được (cấu hình sẵn cho lúc bật lại) nhưng phải
   nhìn ra ngay là chưa dùng được, không thì cấp quyền xong lại tưởng hệ thống hỏng. */
.perm-chk.is-off > span { color: var(--text-faint); text-decoration: line-through; }

.perm-off-tag {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--st-late);
    background: var(--st-late-soft);
    border: 1px solid var(--st-late-line);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
}

@media (max-width: 640px) {
    .perm-mod { flex-basis: 100%; }
}

/* Danh sách rỗng: chữ nhạt và thoáng, không viền không nền — đây là trạng thái bình
   thường (chưa có dữ liệu) chứ không phải lỗi, nên không cần khung cảnh báo. */
.empty-state {
    padding: 48px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.empty-state .hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-faint);
}

/* ===== Thanh số trang ===== */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

/* Bảng đứng ngay trên thanh số trang đã có sẵn đường kẻ dưới cùng rồi */
.table-wrap + .pager { border-top: none; }

.pager-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.pager-links a, .pager-links span {
    min-width: 32px;
    padding: 5px 9px;
    border-radius: 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pager-links a { color: var(--text-muted); border: 1px solid var(--border); }
.pager-links a:hover { background: var(--primary-soft); color: var(--primary); border-color: #bcd5f2; text-decoration: none; }

.pager-links .current {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    font-weight: 600;
}

.pager-links .disabled { color: var(--border-strong); border: 1px solid var(--border); }
.pager-links .gap { min-width: 0; padding: 5px 2px; border: none; }

/* ===== Khối chi tiết tham gia gom theo thành viên ===== */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 14px;
    flex-wrap: wrap;
}

.section-head h2 { margin: 0; font-size: 17px; }

.member-card { margin-bottom: 14px; }

.member-head { align-items: center; }

.member-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.member-id > span:last-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.member-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

.member-roles { font-style: normal; font-size: 12px; color: var(--text-muted); font-weight: 400; }

.card-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    background: #fbfcfe;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ===== Timeline tiến trình thực hiện ===== */
.timeline {
    list-style: none;
    margin: 0 0 26px;
    padding: 0 0 0 26px;
    position: relative;
}

/* Đường dọc nối các mốc */
.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}

.timeline-item { position: relative; margin-bottom: 14px; }

.timeline-marker {
    position: absolute;
    left: -26px;
    top: 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--border-strong);
    z-index: 1;
}

.timeline-item.is-latest .timeline-marker { border-color: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.timeline-item.is-current .timeline-marker { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }

.timeline-body {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 17px;
}

.timeline-item.is-current .timeline-body { border-color: #bcd5f2; }
.timeline-item.is-latest .timeline-body { border-color: #b7e0cc; }

.timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.timeline-week { font-size: 14px; }
.timeline-head .badge { margin-left: 7px; }

.timeline-content {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--text);
    padding-bottom: 10px;
}

.timeline-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 9px;
    font-size: 12.5px;
}

@media (max-width: 700px) {
    .timeline-head, .timeline-foot { flex-direction: column; align-items: flex-start; }
}

/* ===== Lưới chọn nhiều nhân sự ===== */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 11px;
    background: #fff;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 400;
    min-width: 0;
}

.checkbox-item:hover { background: var(--primary-soft); }
.checkbox-item input { margin: 0; }

/* Nhãn chiếm phần còn lại và không xuống dòng giữa chừng tên người */
.checkbox-item > span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkbox-item.is-inactive > span { color: var(--text-muted); }
.checkbox-item em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }

/* Bảng con trong khối thành viên không cần header dính khi cuộn */
.member-card table.data thead th { position: static; }

/* ===== Nhãn trạng thái ===== */
/* Chip trạng thái theo Material: nền phủ nhạt, không viền, bo tròn hẳn. */
/*
  Badge mặc định giờ là màu TRUNG TÍNH, không còn xanh thương hiệu.

  Đây là chỗ sinh ra cảm giác loạn màu ở các màn cũ: badge phân loại ("Triển khai",
  "Hỗ trợ") dùng đúng màu xanh của nút bấm, nên mắt vừa học "xanh dương là chỗ bấm
  được" thì lại gặp badge xanh không bấm được. Từ nay xanh dương chỉ dành cho thao tác;
  badge nói tình trạng thì dùng thang màu ý nghĩa (--st-*).
*/
.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    border: 1px solid var(--st-idle-line);
    background: var(--st-idle-soft);
    color: var(--st-idle);
}

.badge-active   { background: var(--st-ok-soft);   color: var(--st-ok);   border-color: var(--st-ok-line); }
.badge-inactive { background: var(--st-idle-soft); color: var(--st-idle); border-color: var(--st-idle-line); }
.badge-danger   { background: var(--st-late-soft); color: var(--st-late); border-color: var(--st-late-line); }
.badge-support  { background: var(--st-ok-soft);   color: var(--st-ok);   border-color: var(--st-ok-line); }
.badge-waiting  { background: var(--st-warn-soft); color: var(--st-warn); border-color: var(--st-warn-line); }

/* "Đang làm" là trạng thái DUY NHẤT giữ màu thương hiệu: việc đang chạy không phải kết
   quả tốt hay xấu nên không thuộc thang xanh lá/vàng/đỏ. */
.badge-doing    { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

/* Nhóm quyền giữ màu tím riêng — nó là phân loại tài khoản, không phải tình trạng. */
.badge-role     { background: #f0eefb; color: #4b3f9e; border-color: #d5cef2; }

/* ===== Thanh phân bố ===== */
.bar-list { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: minmax(130px, 190px) 1fr 44px; gap: 12px; align-items: center; }
.bar-label { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #eef1f6; border-radius: 999px; height: 9px; overflow: hidden; }
.bar-fill { background: var(--primary); height: 100%; border-radius: 999px; }
.bar-count { font-size: 13px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Khung biểu đồ =====
   Chart.js chạy với maintainAspectRatio: false nên phải có chiều cao thật ở khung bọc, nếu không
   canvas cao 0 và biểu đồ không hiện. Khung tự co theo bề ngang thẻ nên vẫn vừa màn hình hẹp. */
.chart-box { position: relative; height: 260px; }
.chart-box canvas { max-width: 100%; }

@media (max-width: 640px) {
    .chart-box { height: 220px; }
}

/* ===== Khối KPI và các dòng số liệu trên màn Tổng quan ===== */
.kpi-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kpi-score { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* Thang điểm đi kèm số lớn — thiếu nó thì "20" đứng một mình không rõ là điểm hay số việc. */
.kpi-score-unit { font-size: 13px; color: var(--text-muted); margin-left: -4px; }

.kpi-lines { margin-top: 12px; }

/* Nhãn bên trái, số bên phải. Nhãn dài thì xuống dòng chứ không đẩy số ra ngoài. */
.kpi-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 7px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-soft);
}
.kpi-line:last-child { border-bottom: none; }
.kpi-line > span { color: var(--text-muted); }
.kpi-line > strong { font-weight: 600; text-align: right; }

/* ===== Danh sách việc hôm nay trên bảng điều khiển Tổ =====
   Nằm gọn trong một ô bảng nên phải tự xuống dòng, không dùng nowrap. */
.today-list { display: flex; flex-direction: column; gap: 6px; }

.today-item { font-size: 13px; line-height: 1.45; }
.today-item > span { display: block; font-size: 12px; }
.today-item.overdue > a { color: var(--danger); }

/* ===== Bảng tự gộp cột khi hẹp =====
   Bảng nhiều cột trên máy nhỏ thì mỗi cột bị bóp còn một hai từ. Thay vì dựng hai khối HTML song
   song, các cột phụ (.col-hide-sm) ẩn đi và nội dung của chúng hiện lại thành dòng tóm tắt
   (.cell-recap) ngay dưới tên việc — cùng một dữ liệu, hai cách bày. */
.cell-recap { display: none; }

@media (max-width: 900px) {
    table.data.table-collapse .col-hide-sm { display: none; }

    table.data.table-collapse .cell-recap {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 4px;
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.5;
    }

    /* Cột tên việc lấy lại toàn bộ chỗ vừa giải phóng. */
    table.data.table-collapse tbody td:first-child { min-width: 0; }
}

/* ===== Danh sách công việc dạng dòng =====
   Thay cho bảng khi chỗ hẹp (cột nửa màn, hoặc điện thoại): bảng nhiều cột thì mỗi cột bị bóp
   còn một hai từ, còn dạng này dồn thông tin phụ xuống tầng dưới nên tên việc luôn đủ chỗ. */
.task-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.task-feed-item:last-child { border-bottom: none; }
.task-feed-item:hover { background: var(--state-hover); }

.task-feed-main { flex: 1; min-width: 0; }

.task-feed-title {
    font-size: 13.5px;
    line-height: 1.45;
    /* Tên việc dài thì cắt ở dòng thứ hai, không để một mục chiếm hết danh sách. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tầng dưới gom dự án, hạn và tiến độ — mỗi thứ trước đây chiếm trọn một cột bảng. */
.task-feed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.task-feed-side { flex: 0 0 auto; }

@media (max-width: 640px) {
    .task-feed-item { padding: 12px; }
}

/* Bảng diễn giải cách ra điểm KPI: cột dấu phép tính, cột tên, cột số.
   Bày thành phép cộng rồi phép nhân để người xem lần được điểm của mình từ đâu ra. */
.kpi-calc { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13.5px; }
.kpi-calc td { padding: 6px 0; vertical-align: baseline; }

/* Cột dấu +, ×, = — hẹp và canh giữa để các dấu thẳng hàng nhau. */
.kpi-calc td.op {
    width: 18px;
    color: var(--text-faint);
    text-align: center;
    font-weight: 600;
}

.kpi-calc td.val {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kpi-calc .muted { font-size: 12.5px; }

/* Hai dòng kết quả có kẻ trên để tách khỏi phần cộng bên trên. */
.kpi-calc tr.sum td, .kpi-calc tr.total td { border-top: 1px solid var(--border-soft); }
.kpi-calc tr.total td { border-top-color: var(--border); padding-top: 8px; }
.kpi-calc tr.total td.val { font-size: 15px; }

/* Dòng tỷ lệ giờ công khi chưa đủ giờ — đây là chỗ điểm bị hạ. */
.kpi-calc tr.warn-row td, .kpi-calc tr.warn-row td.val { color: var(--warn); }

/* Quy tắc chấm KPI — gập lại mặc định, chỉ mở khi người xem thắc mắc về con số. */
.kpi-rules { margin-top: 10px; }

.kpi-rules > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    font-size: 12.5px;
    color: var(--primary);
}
.kpi-rules > summary::-webkit-details-marker { display: none; }
.kpi-rules > summary::marker { content: ""; }
.kpi-rules > summary:hover { text-decoration: underline; }
.kpi-rules > summary::before { content: "▸ "; }
.kpi-rules[open] > summary::before { content: "▾ "; }

.kpi-rules-body {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}
.kpi-rules-body p { margin: 0 0 10px; }
.kpi-rules-body strong { color: var(--text); }

.kpi-rules-item { margin-bottom: 10px; }
.kpi-rules-item:last-of-type { margin-bottom: 10px; }

/* Khối giờ công: tách khỏi phần điểm bằng một đường kẻ, vì đây là thước đo khác. */
.kpi-hours { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }

.kpi-hours-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 13.5px;
}
.kpi-hours-head > span { color: var(--text-muted); }

.kpi-hours-note { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.danger-text { color: var(--st-late); font-weight: 600; }
.ok-text { color: var(--st-ok); font-weight: 600; }

/* Chưa đủ giờ thì thanh chuyển màu cảnh báo — xanh lá dễ bị hiểu là đã xong. */
.progress-fill.warn { background: var(--st-warn); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

/* Thẻ trong lưới đã có khoảng cách của lưới; giữ thêm margin của .card thì hai cột cao lệch
   nhau và đáy thừa ra một khoảng. */
.two-col > .card { margin-bottom: 0; }
@media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }

    /* Màn hình hẹp: menu dọc trượt ra như ngăn kéo, nội dung không bị đẩy sang phải nữa */
    body.has-sidebar .shell { margin-left: 0; max-width: 100vw; }
    body.has-sidebar .main { max-width: 100%; min-width: 0; box-sizing: border-box; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 24px rgba(20, 35, 60, .18);
    }

    body.menu-open .sidebar { transform: translateX(0); }
    body.menu-open .sidebar-scrim { display: block; }

    .menu-toggle { display: inline-flex !important; }
    .sidebar-expand { display: none !important; }
    .sidebar-close-mobile { display: inline-flex !important; }
    .brand.brand-compact { display: flex !important; flex-shrink: 0; }

    /* Thu gọn là khái niệm của màn hình rộng; màn hình hẹp dùng ngăn kéo nên bỏ qua nút thu gọn */
    .sidebar-collapse { display: none !important; }
}

/* ===== Thu gọn menu trên màn hình rộng ===== */
@media (min-width: 901px) {
    /* Trượt mượt khi đóng/mở */
    .sidebar { transition: transform .18s ease; }
    body.has-sidebar .shell { transition: margin-left .18s ease; }

    body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
    body.sidebar-collapsed .shell { margin-left: 0; }

    /* Menu đóng thì hiện nút mở lại trên thanh trên */
    body.sidebar-collapsed .sidebar-expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .menu-toggle { display: none !important; }
    .sidebar-close-mobile { display: none !important; }
}

/* ===== Thông báo ===== */
.alert {
    padding: 11px 15px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.alert-success { background: var(--success-soft); color: var(--success); border-color: #b7e0cc; }
.alert-danger  { background: var(--danger-soft); color: var(--danger); border-color: #e6b8b5; }

/* ===== Biểu mẫu ===== */
.form-narrow { max-width: 560px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; }
.form-field label { font-weight: 600; font-size: 13px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; }

/* Checkbox/radio phải giữ kích thước tự nhiên, nếu không sẽ giãn hết ô và bóp mất nhãn */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}
.form-field .hint { font-size: 12px; color: var(--text-muted); }

/*
  Lưới 3 cột cho các form nhập nhanh nhiều ô ngắn (thêm nhân sự vào dự án...). Không dùng .filters
  cho những form này: .filters là flex, ô có "grow" sẽ nuốt hết chiều ngang và bóp méo các ô còn
  lại — nhất là khi có select2 bên trong.
*/
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.form-grid-3 .full { grid-column: 1 / -1; }
@media (max-width: 980px) { .form-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .form-grid-3 { grid-template-columns: 1fr; } }

/*
  Chia form dài thành từng khối có tiêu đề. Form dự án có tới 8 ô, để liền một dải thì mắt không
  bám được nhóm nào với nhóm nào; tách khối giúp quét nhanh hơn hẳn.
*/
.form-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.form-section-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/*
  Giá trị chỉ đọc nằm giữa các ô nhập. Đệm trên dưới bằng đúng ô input (8px + viền 1px) để dòng
  chữ nằm ngang hàng với ô bên cạnh, không bị lệch lên trên.
*/
.form-static {
    padding: 9px 0;
    font-size: 14px;
    line-height: 1.35;
}

.form-static .muted { font-size: 13.5px; }

/* Nhãn nhỏ phía trên giá trị chỉ đọc, thay cho <label> của ô nhập. */
.form-static-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

/*
  Nhãn của ô bắt buộc: chữ đỏ kèm dấu * đứng sau, để nhìn lướt là biết phải nhập những gì.
  Đặt SAU luật .form-field:focus-within > label (đổi nhãn sang màu chính khi đang nhập) thì
  ô bắt buộc mới giữ được màu đỏ lúc con trỏ nằm trong ô.
*/
/* Nhãn giữ màu chữ bình thường, CHỈ dấu sao là đỏ.

   Tô đỏ cả nhãn khiến biểu mẫu vừa mở ra đã trông như đang báo lỗi hàng loạt, trong
   khi người dùng chưa nhập gì sai. Đỏ phải để dành cho lỗi thật — thấy đỏ mà không
   phải lỗi vài lần thì đến lúc lỗi thật người ta cũng thôi để ý. */
.req-mark { margin-left: 2px; font-weight: 700; color: var(--st-late); }

/* Chú thích "* Trường bắt buộc" đặt đầu biểu mẫu. */
.form-required-note {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.form-required-note .req-mark { color: var(--st-late); }

.field-error { color: var(--st-late); font-size: 12.5px; }

/* Bảng tóm tắt lỗi: có nền và dải màu để tách khỏi nội dung biểu mẫu — chữ đỏ trơn dễ
   bị lướt qua khi biểu mẫu dài. */
.validation-summary-errors {
    color: var(--st-late);
    margin-bottom: 14px;
    background: var(--st-late-soft);
    border-left: 3px solid var(--st-late);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    padding: 11px 14px;
    font-size: 13px;
}

.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-errors:empty { display: none; }

.input-validation-error { border-color: var(--st-late) !important; }

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--border);
}

/* ===== Thẻ hướng dẫn API (gập/mở) ===== */
.api-help > summary {
    padding: 13px 17px;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
    list-style: none;
}
.api-help > summary::-webkit-details-marker { display: none; }
.api-help > summary::before { content: "▸  "; font-size: 11px; }
.api-help[open] > summary::before { content: "▾  "; }
.api-help[open] > summary { border-bottom: 1px solid var(--border); }
.api-help code { font-size: 12.5px; }

/* ===== Khoá bí mật hệ thống tích hợp ===== */
.key-box { display: flex; gap: 8px; align-items: center; }
.key-input {
    flex: 1;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
    letter-spacing: .3px;
    background: #f7f9fc;
    color: var(--text);
}
.key-peek { font-family: "Consolas", "Courier New", monospace; font-size: 12.5px; color: var(--text-muted); }

.key-regen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.key-regen .hint { margin-top: 4px; max-width: 460px; }

/* ===== Trang đăng nhập ===== */
.login-wrap { max-width: 420px; margin: 40px auto; }
.login-wrap .card-body { padding: 26px; }
.login-title { text-align: center; margin: 0 0 22px; font-size: 19px; }
.login-wrap .form-field { margin-bottom: 15px; }
.login-wrap .btn { width: 100%; text-align: center; }

/* ===== Khối thông báo Website Demo trước khi đăng nhập ===== */
.demo-site-box {
    background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 22px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.16);
    position: relative;
    overflow: hidden;
}
.demo-site-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #d97706);
}
.demo-site-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
    margin-bottom: 12px;
}
.demo-site-pulse {
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: demoPulse 1.6s infinite ease-in-out;
}
@keyframes demoPulse {
    0% { transform: scale(0.85); opacity: 0.6; }
    50% { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.6; }
}
.demo-site-heading {
    font-size: 16px;
    font-weight: 800;
    color: #92400e;
    margin: 0 0 6px;
    letter-spacing: 0.3px;
    line-height: 1.35;
}
.demo-site-desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.45;
}
.btn-demo-redirect {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 11px 24px !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    width: auto !important;
}
.btn-demo-redirect:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(180, 83, 9, 0.45) !important;
    color: #ffffff !important;
}
.btn-demo-redirect svg {
    transition: transform 0.2s ease;
}
.btn-demo-redirect:hover svg {
    transform: translateX(4px);
}

/* Banner đỉnh trang khi chưa đăng nhập */
.demo-global-banner {
    background: linear-gradient(135deg, #991b1b 0%, #b45309 45%, #c2410c 100%);
    color: #ffffff;
    padding: 10px 16px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    position: relative;
    z-index: 99;
}
.demo-global-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.demo-global-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
}
.demo-global-tag {
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.demo-global-msg {
    font-weight: 700;
    color: #fef3c7;
    letter-spacing: 0.2px;
}
.btn-demo-global {
    background: #f59e0b;
    color: #78350f !important;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.btn-demo-global:hover {
    background: #ffffff;
    color: #92400e !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

@media (max-width: 640px) {
    .demo-global-banner {
        padding: 12px 14px;
        text-align: center;
    }
    .demo-global-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }
    .demo-global-text {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px;
    }
    .demo-global-msg {
        font-size: 13.5px;
        line-height: 1.4;
        text-align: center;
    }
    .btn-demo-global {
        width: auto;
        padding: 8px 22px;
        font-size: 13.5px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
}

/* ===== Bảng Kanban =====
   Các cột nằm ngang và CUỘN NGANG trong khung riêng, không kéo giãn cả trang: 5 trạng thái với
   độ rộng đọc được là quá khổ màn hình hẹp, để tràn ra ngoài thì cả bố cục bị đẩy lệch.
*/
/* Các cột cao bằng nhau (stretch) chứ không co theo nội dung: cột chưa có việc nào mà
   lùn hơn hẳn thì cả hàng trông như bị vỡ, và vùng thả của nó cũng bé lại khó kéo tới. */
.kanban {
    display: flex;
    gap: 14px;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 16px;
    min-height: 220px;
}

.kanban-col {
    flex: 0 0 282px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: 72vh;
}

/* Tên cột dính lại khi cuộn trong cột dài — cột có gần hai trăm thẻ thì cuộn một lúc
   là quên mất mình đang ở cột nào. */
.kanban-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    font-weight: 650;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    border-radius: var(--radius) var(--radius) 0 0;
    z-index: 1;
}

.kanban-count {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 1px 9px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Vùng thả phải luôn cao hơn nội dung để cột rỗng vẫn nhận được thẻ kéo tới. */
.kanban-drop {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 90px;
    flex: 1 1 auto;
}

.kanban-drop.is-over {
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 2px var(--primary);
    border-radius: var(--radius-sm);
}

/* Cột chưa có việc nào: khung nét đứt kèm một dòng nhắc, thay vì để trống trơn trông
   như đang hỏng. Khung cũng cho biết đây là chỗ thả thẻ vào được. */
.kanban-drop:empty::after {
    content: "Kéo thẻ vào đây";
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 88px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    font-size: 12.5px;
}

.kanban-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-1);
    padding: 10px 12px;
    cursor: grab;
}

.kanban-card:hover { box-shadow: var(--elev-2); }
.kanban-card.is-dragging { opacity: .45; }
.kanban-card.is-saving { opacity: .6; cursor: progress; }

/* Thẻ không có quyền sửa: vẫn đọc và bấm xem được, chỉ là không kéo. */
.kanban-card.is-locked {
    cursor: default;
    border-style: dashed;
    box-shadow: none;
}

/* Dòng đầu thẻ: mã việc, loại việc, và chấm ưu tiên đẩy về cuối. */
.kanban-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.kanban-head .pri { margin-left: auto; }

/* Chỉ còn cái chấm, bỏ chữ đi — trong thẻ hẹp thì chữ "Trung bình" chiếm chỗ mà không
   nói thêm gì so với màu. Tên đầy đủ nằm ở thuộc tính title khi rê chuột. */
.kanban-head .pri i { width: 8px; height: 8px; }

.kanban-title {
    display: block;
    font-weight: 550;
    font-size: 13.5px;
    line-height: 1.38;
    margin-bottom: 9px;
    color: var(--text);
}

.kanban-card:hover .kanban-title { color: var(--primary); }

.kanban-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}

/* Thanh tiến độ trong thẻ mảnh hơn ngoài bảng, và số nhỏ lại cho cân với thẻ hẹp. */
.kanban-card .prog { margin-bottom: 9px; min-width: 0; }
.kanban-card .prog span { font-size: 11.5px; min-width: 28px; }

.kanban-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Tên người trong thẻ dễ tràn, cho cắt bớt bằng dấu ba chấm thay vì đẩy vỡ thẻ. */
.kanban-foot .person { min-width: 0; }

.kanban-foot .person span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-foot .person-ava { width: 22px; height: 22px; font-size: 9.5px; }

/* Chip độ ưu tiên. Ba mức ba màu, đọc được ngay mà không cần chú giải. */
/* Mức ưu tiên: cao → đỏ, vừa → vàng, thấp → xám nhạt.

   Trước đây "Thấp" tô XANH LÁ, mà xanh lá trong hệ thống này nghĩa là "xong xuôi" —
   nên việc ưu tiên thấp trông như việc đã hoàn thành. Ưu tiên thấp không phải tin vui,
   nó chỉ là ít gấp; xám nhạt mới đúng: có mặt nhưng không đòi chú ý. */
.chip-high {
    background: var(--st-late-soft);
    color: var(--st-late);
    border: 1px solid var(--st-late-line);
}

.chip-normal {
    background: var(--st-warn-soft);
    color: var(--st-warn);
    border: 1px solid var(--st-warn-line);
}

.chip-low {
    background: var(--st-idle-soft);
    color: var(--st-idle);
    border: 1px solid var(--st-idle-line);
}

.chip-high, .chip-normal, .chip-low {
    display: inline-block;
    border-radius: var(--radius-pill);
    padding: 1px 9px;
    font-size: 12px;
    line-height: 1.5;
}

/* Dòng bấm được để mở hộp thoại chi tiết. Con trỏ phải đổi, nếu không người dùng không đoán
   ra là bấm được — trong lưới không có gì gợi ý điều đó.
   Không giới hạn ở thẻ tr: cùng cách bấm này còn dùng cho dòng danh sách (.task-feed-item). */
.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: var(--state-hover); }

/* Các phần tử bên trong vẫn giữ con trỏ riêng của chúng. */
.row-clickable a,
.row-clickable button,
.row-clickable summary { cursor: pointer; }

/* Tiêu đề thẻ Kanban không còn là liên kết (cả thẻ mới là chỗ bấm), nên tự lo màu chữ. */
.kanban-title { color: var(--text); }

/* ===== Cảnh báo theo hạn hoàn thành: cam = còn tối đa 1 ngày, đỏ = đã quá hạn =====
   Đổi cả màu CHỮ chứ không chỉ nền, để việc gấp đập vào mắt ngay khi lướt bảng. */

/* Mức gấp nói bằng một dải màu mảnh bên trái thẻ, KHÔNG tô nền cả thẻ.

   Tô nền cả thẻ làm chữ trên đó khó đọc và khiến cả bảng trông loang lổ khi nhiều
   việc cùng gấp — mà bảng Kanban thì thường có hàng trăm thẻ. Dải màu vẫn thấy rõ khi
   lướt, thẻ thì vẫn sạch và chữ vẫn đủ tương phản. */
.kanban-card.card-soon { border-left: 3px solid var(--st-warn); }
.kanban-card.card-late { border-left: 3px solid var(--st-late); }

/* Việc gấp nói bằng dải màu ở ô ĐẦU dòng, không tô nền cả dòng.

   Nền vàng/đỏ trải hết dòng làm chữ khó đọc và khiến bảng trông loang lổ khi nhiều
   việc cùng gấp — mà bảng công việc thì thường có hàng trăm dòng. Dải màu vẫn thấy rõ
   khi lướt dọc, còn dòng thì vẫn sạch và giữ được hiệu ứng di chuột bình thường. */
table.data tbody tr.row-due-warn > td:first-child,
table.data tbody tr.row-due-danger > td:first-child {
    position: relative;
    padding-left: 18px;
}

table.data tbody tr.row-due-warn > td:first-child::before,
table.data tbody tr.row-due-danger > td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

table.data tbody tr.row-due-warn > td:first-child::before { background: var(--st-warn); }
table.data tbody tr.row-due-danger > td:first-child::before { background: var(--st-late); }

/* ===== Breadcrumb đầu trang =====
   Đường về của các màn lồng nhau (Dự án → tên dự án → Checklist...), thay cho nút Back
   của trình duyệt. Mắt cuối là trang hiện tại nên không phải liên kết. */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }

.breadcrumb-sep { color: var(--text-faint); }

.breadcrumb-current {
    color: var(--text);
    font-weight: 600;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Màn soạn mẫu email: trình soạn thảo + bảng tham số ===== */

.tpl-layout { display: flex; gap: 18px; align-items: flex-start; }
.tpl-main { flex: 1 1 64%; min-width: 0; }
.tpl-side { flex: 1 1 36%; min-width: 260px; }
@media (max-width: 900px) { .tpl-layout { flex-direction: column; } .tpl-side { width: 100%; } }

.wys-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-bottom: 0;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    background: var(--bg);
}

.wys-toolbar button {
    border: 1px solid transparent;
    background: none;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
}
.wys-toolbar button:hover { background: var(--primary-soft); }
.wys-toolbar button.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.wys-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }

.wys-editor {
    min-height: 240px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    background: var(--surface);
    line-height: 1.6;
}
.wys-editor:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.wys-editor blockquote { margin: 8px 0; padding: 8px 14px; border-left: 3px solid var(--primary); background: var(--bg-soft); }

.wys-source {
    width: 100%;
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    font-family: Consolas, monospace;
    font-size: 13px;
}

.tpl-params { display: flex; flex-direction: column; gap: 6px; }

.tpl-param {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xs);
    background: var(--surface);
    padding: 7px 10px;
    cursor: pointer;
}
.tpl-param:hover { background: var(--primary-soft); border-color: var(--primary); }
.tpl-param code { font-size: 12.5px; color: var(--primary); white-space: nowrap; }
.tpl-param span { font-size: 12.5px; color: var(--text-muted); }

/* ===== Chuông thông báo trên thanh đầu trang ===== */

.notif { position: relative; }

.notif-bell {
    position: relative;
    border: 1px solid transparent;
    background: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.notif-bell:hover { background: var(--primary-soft); }

.notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.notif-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: 92vw;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(16, 42, 67, .22);
    z-index: 60;
    overflow: hidden;
}
.notif.open .notif-panel { display: block; }

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-soft);
}

.notif-readall {
    border: 0;
    background: none;
    padding: 0;
    color: var(--primary);
    font-size: 12.5px;
    cursor: pointer;
}
.notif-readall:hover { text-decoration: underline; }

.notif-empty { padding: 22px 16px; color: var(--text-muted); font-size: 13px; text-align: center; }

.notif-list { max-height: 60vh; overflow-y: auto; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--primary-soft); text-decoration: none; }
.notif-item.unread { background: #f3f7fd; }
.notif-item.unread .notif-message { font-weight: 600; }

.notif-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    margin-top: 1px;
}
.notif-icon-project { background: var(--primary-soft); color: var(--primary); }
.notif-icon-mention { background: #f0eefb; color: #4b3f9e; }
.notif-icon-due { background: var(--warn-soft); color: var(--warn); }
.notif-icon-comment { background: #e8f4ee; color: #1f7a4d; }
.notif-icon-done { background: #e6f7ed; color: #15803d; }
.notif-icon-status { background: #eff6ff; color: #2563eb; }

.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-message { font-size: 13px; line-height: 1.45; }
.notif-time { font-size: 11.5px; color: var(--text-faint); }

.notif-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 6px;
}

/* ===== Hộp thoại chi tiết công việc: hai cột, bên phải là khung trao đổi ===== */

.task-detail-split { display: flex; gap: 22px; align-items: stretch; }

.task-detail-main { flex: 1 1 58%; min-width: 0; }

.task-detail-chat {
    flex: 1 1 42%;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    padding-left: 22px;
}

.chat-head { font-weight: 600; margin-bottom: 8px; }

/* Danh sách cuộn riêng để hộp thoại không dài vô hạn khi trao đổi nhiều. */
.chat-scroll {
    flex: 1;
    min-height: 220px;
    max-height: 46vh;
    overflow-y: auto;
    padding-right: 6px;
}

.chat-empty { color: var(--text-muted); font-size: 13px; padding: 18px 0; }

/* Lịch sử thao tác — danh sách chỉ đọc, cùng nhịp với .chat-item nhưng gọn hơn (không có nút
   thao tác nào ở đây). Giới hạn chiều cao + cuộn riêng để hộp thoại chi tiết không bị kéo quá dài
   khi một công việc có nhiều lượt sửa. */
.activitylog-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.activitylog-item { padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.activitylog-item:last-child { border-bottom: 0; }
.activitylog-head { display: flex; align-items: baseline; gap: 8px; }
.activitylog-head .muted { font-size: 12px; margin-left: auto; white-space: nowrap; }
.activitylog-desc { color: var(--text-muted); margin-top: 2px; }

.chat-item { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.chat-item:last-child { border-bottom: 0; }

.chat-meta { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.chat-meta .muted { font-size: 12px; }

.chat-recall {
    margin-left: auto;
    border: 0;
    background: none;
    padding: 0;
    color: var(--danger);
    font-size: 12px;
    cursor: pointer;
}
.chat-recall:hover { text-decoration: underline; }

.chat-content { white-space: pre-wrap; word-wrap: break-word; margin-top: 2px; font-size: 14px; }

.chat-input-wrap { position: relative; margin-top: 8px; }
.chat-input-wrap textarea { min-height: 60px; }

/* Trình soạn thảo trong khung trao đổi: thấp hơn ô Mô tả để không chiếm hết chỗ của
   danh sách trao đổi, nhưng vẫn giãn ra được khi gõ dài. */
.chat-input-wrap .rich-area { min-height: 60px; max-height: 30vh; overflow-y: auto; }
.chat-input-wrap .rich-toolbar { padding: 4px 6px; }

/* Nội dung một lượt trao đổi đã soạn bằng trình soạn thảo: bỏ khoảng cách thừa của thẻ đoạn
   để các dòng không bị rời rạc trong khung chat vốn hẹp. */
.chat-content.rich-content > :first-child { margin-top: 0; }
.chat-content.rich-content > :last-child { margin-bottom: 0; }
.chat-content.rich-content p { margin: 0 0 6px; }

.chat-send-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

/* Cụm đính kèm trong khung trao đổi: nút chọn + tên file đã chọn + nút bỏ chọn. */
.chat-attach { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-file-input { display: none; }
.chat-attach label { margin: 0; cursor: pointer; }
.chat-file-name {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-file-clear {
    border: 0;
    background: none;
    padding: 0 2px;
    color: var(--danger);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

/* Liên kết tải file đính kèm trong một lượt trao đổi. */
.chat-files-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.chat-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 13px;
    max-width: 100%;
}
.chat-file .chat-file-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-file:hover .chat-file-label { text-decoration: underline; }

/* Cụm @Tên trong nội dung trao đổi. */
.mention {
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 4px;
    padding: 0 3px;
    font-weight: 600;
}

/* Bảng gợi ý người tham gia khi gõ @ — nổi lên PHÍA TRÊN ô nhập để không bị mép hộp thoại cắt. */
.mention-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 42, 67, .18);
    max-height: 210px;
    overflow-y: auto;
    z-index: 30;
}
.mention-menu.open { display: block; }

.mention-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}
.mention-item.active,
.mention-item:hover { background: var(--primary-soft); }

/* Màn hẹp thì xếp dọc: chi tiết trước, trao đổi dưới. */
@media (max-width: 860px) {
    .task-detail-split { flex-direction: column; }
    .task-detail-chat {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 14px;
    }
}

/* ===== Giờ công (logtime) trong hộp chi tiết công việc ===== */

.timelog-section { margin-top: 4px; }

/* Bốn con số tóm tắt: đã ghi / trần việc / còn lại / hôm nay.
   Gom trong một khối nền nhạt cho ra dáng một cụm số liệu, thay vì bốn cụm chữ trôi nổi. */
.timelog-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: var(--bg-soft, var(--bg));
    border-radius: var(--radius-xs);
}

.timelog-stat { display: flex; flex-direction: column; gap: 1px; }

.timelog-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
}

.timelog-stat strong { font-size: 15px; line-height: 1.3; }

.timelog-bar { margin-bottom: 10px; }

/* Vượt trần thì thanh chuyển đỏ — chỉ xảy ra với dữ liệu cũ, phải thấy ngay. */
.timelog-over { background: var(--danger); }

.timelog-alert { margin: 0 0 10px; }
.timelog-empty { font-size: 13px; margin: 6px 0 10px; }

/* Bảng các lượt đã ghi: gọn hơn bảng thường vì nằm trong hộp thoại. */
.timelog-table { margin-bottom: 10px; }
.timelog-table table.data th,
.timelog-table table.data td { padding-top: 6px; padding-bottom: 6px; }

.timelog-del {
    border: 0;
    background: none;
    padding: 0;
    color: var(--danger);
    font-size: 12px;
    cursor: pointer;
}
.timelog-del:hover { text-decoration: underline; }

/* Hàng nhập giờ. KHÔNG dùng .filters (bố cục của thanh lọc trang rộng) — trong hộp thoại hẹp
   nó làm nhãn xuống dòng và ô co lại méo mó. Ở đây tự dựng: ngày và số giờ rộng cố định vừa đủ,
   ô nội dung ăn hết chỗ còn lại, nút bám đáy hàng. */
.timelog-form { margin-top: 4px; }

.timelog-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.timelog-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.timelog-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* min-width:0 de ghi de luat global "input[type=text] { min-width: 160px }" — khong co dong
   nay thi input Ngay/So gio luon bi keo rong toi thieu 160px du wrapper khai bao hep hon, tran
   de len o ke ben. */
.timelog-field input { margin: 0; min-width: 0; }

/* Chi nhap so nho kieu "2,5" — 64px la du, khong can rong nhu o ngay. */
.timelog-field-hours { width: 64px; flex: 0 0 64px; }
/* min-width chan flex-shrink ep o nay hep hon nhan cua no (nhan "Noi dung da lam" khong xuong
   dong, dat white-space: nowrap) — thieu dong nay thi o co the co lai qua nho, chu nhan tran ra
   ngoai de len o ben canh thay vi tu xuong dong nhu flex-wrap du dinh. */
.timelog-field-note { flex: 1 1 140px; min-width: 110px; }
.timelog-row #logDate { width: 152px; }
.timelog-submit { flex: 0 0 auto; }

/* Hộp thoại hẹp: cho ô nội dung xuống hàng riêng thay vì bóp cả bốn thứ trên một dòng. */
@media (max-width: 620px) {
    .timelog-field-note { flex-basis: 100%; }
    .timelog-submit { width: 100%; }
}

.timelog-blocked { display: block; margin-top: 6px; }

/* Token chống giả mạo: chỉ để script đọc, không chiếm chỗ trên giao diện. */
.timelog-token { display: none; }

/* ===== Todolist con trong hộp chi tiết công việc (xem AppTaskTodo trong app.js) ===== */

.todo-section { margin-top: 4px; }
.todo-token { display: none; }
.todo-empty { font-size: 13px; margin: 6px 0 10px; }

.todo-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }

.todo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: var(--radius-xs);
}

.todo-item:hover { background: var(--bg-soft); }

.todo-check {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.todo-check input[type="checkbox"] { margin: 0; flex: 0 0 auto; }

.todo-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    font-size: 13.5px;
}

.todo-item.done .todo-text { text-decoration: line-through; color: var(--text-muted); }

.todo-edit-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    padding: 2px 6px;
}

.todo-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    opacity: 0;
}

.todo-item:hover .todo-actions,
.todo-item.editing .todo-actions { opacity: 1; }

.todo-edit,
.todo-del {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
}

.todo-edit:hover,
.todo-del:hover { background: var(--bg-soft); color: var(--text); }

.todo-add-row { display: flex; gap: 6px; }
.todo-add-input { flex: 1 1 auto; min-width: 0; }
.todo-add-btn { flex: 0 0 auto; }

/* ===== Trình soạn thảo WYSIWYG gọn (textarea[data-rich], xem AppRichText trong app.js) ===== */

.rich-editor { border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface); }

.rich-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 5px 7px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-soft);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.rich-btn {
    border: 1px solid transparent;
    background: none;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--text);
}
.rich-btn:hover { background: var(--primary-soft); }

.rich-area {
    min-height: 110px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 10px 12px;
    line-height: 1.55;
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rich-area:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.rich-area.rich-area-dragover {
    background-color: var(--primary-soft);
    outline: 2px dashed var(--primary);
}

/* Ảnh trong ô soạn thảo và trang chi tiết */
.rich-area img, .rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 8px 0;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rich-content img {
    cursor: zoom-in;
}
.rich-content img:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

/* Badge trạng thái đang tải ảnh lên */
.rich-img-uploading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 12.5px;
    border: 1px dashed var(--border);
    margin: 4px 0;
    user-select: none;
}
.rich-content .rich-img-uploading {
    display: none !important;
}

/* Video chèn trong trình soạn thảo và trang chi tiết */
.rich-video {
    max-width: 100%;
    height: auto;
    max-height: 480px;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Badge trạng thái đang tải video lên */
.rich-video-uploading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 12.5px;
    border: 1px dashed var(--border);
    margin: 4px 0;
    user-select: none;
}
.rich-content .rich-video-uploading {
    display: none !important;
}

/* Nội dung HTML đã lọc, hiển thị ở trang chi tiết. */
.rich-content { line-height: 1.6; overflow-wrap: break-word; }
.rich-content ul, .rich-content ol { margin: 6px 0 6px 22px; }
.rich-content blockquote { margin: 8px 0; padding: 8px 14px; border-left: 3px solid var(--primary); background: var(--bg-soft); }

/* ===== Ô mật khẩu che *** với nút sao chép (thông tin FTP / Database của dự án) ===== */

.secret-row { display: inline-flex; align-items: center; gap: 8px; }
.secret-mask { letter-spacing: 2px; color: var(--text-muted); }

/* Ô nhập kèm nút bên cạnh (ví dụ ô mật khẩu + nút Copy trên form). */
.input-row { display: flex; align-items: center; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }
.input-row .btn { flex: 0 0 auto; }

/* ===== Khối gập "Thống kê khối lượng" trên màn checklist ===== */

/* Thẻ <details> vốn là khối trắng của .card nên chỉ cần chỉnh riêng phần tiêu đề gập. */
.workload-summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-radius: var(--radius);
    user-select: none;
    font-size: 13.5px;
}

.workload-summary::-webkit-details-marker { display: none; }
.workload-summary::marker { content: ""; }

/* Mũi tên tự xoay theo trạng thái gập/mở, đặt sau chữ cho khỏi lệch hàng. */
.workload-summary::after {
    content: "▾";
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}
.workload-card[open] > .workload-summary::after { content: "▴"; }

.workload-summary:hover { background: var(--primary-soft); }

/* Mở ra thì tiêu đề chỉ bo góc trên, để liền mạch với phần thân bên dưới. */
.workload-card[open] > .workload-summary {
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid var(--border);
}

/*
  Bảng khối lượng căn GIỮA các cột số thay vì căn phải như mặc định của .num: mỗi ô ở đây là một
  con số ngắn kèm dòng chú thích nhỏ bên dưới ("1 việc", "đã cắt trần"), căn phải làm hai dòng
  lệch nhau và cột trông rời khỏi tiêu đề. Chỉ áp cho bảng này, không đụng .num của bảng khác.
*/
table.data.workload-table th.num,
table.data.workload-table td.num {
    text-align: center;
}

/* Hàng tổng cộng cũng phải theo, nếu không số tổng lệch khỏi cột dữ liệu bên trên. */
table.data.workload-table tfoot td { text-align: center; }
table.data.workload-table tfoot td:first-child { text-align: left; }

/* Hàng tổng cộng của bảng thống kê — tách khỏi phần dữ liệu bằng nền và đường kẻ đậm. */
table.data tfoot td {
    background: var(--bg);
    border-top: 2px solid var(--border-strong);
    padding: 10px 12px;
}

/* Ô nhập ý kiến duyệt trên màn Duyệt nghỉ phép: nằm ngay trên cặp nút Duyệt/Từ chối. */
.leave-approve-form {
    min-width: 170px;
    white-space: normal;
}
.leave-approve-form .leave-note {
    width: 100%;
    min-width: 150px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

/* ==========================================================================
   BỘ THÀNH PHẦN DÙNG CHUNG CHO CÁC MÀN DANH SÁCH

   Dựng cho màn Checklist trước, nhưng cố ý viết không dính gì tới checklist để
   Công việc của tôi, Bảng điều khiển Tổ, KPI theo tháng đều dùng lại được.

   Quy tắc xuyên suốt: màu xanh thương hiệu chỉ dành cho thứ bấm được, còn tình
   trạng dữ liệu thì nói bằng thang màu ý nghĩa (--st-*) ở đầu file.
   ========================================================================== */

/* ===== Đầu trang gộp =====
   Gộp tiêu đề, số liệu tổng và các nút hành động vào MỘT khối. Trước đây ba thứ
   này nằm ở ba thẻ rời nên chiếm ba tầng chiều cao mà không thứ nào nổi hơn. */
.pagehead {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: 20px 24px;
    margin-bottom: 14px;
}

.pagehead-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pagehead h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.35px;
}

.pagehead-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.pagehead-sub b { color: var(--text); font-weight: 600; }

/* Dấu chấm ngăn giữa các mẩu thông tin — nhẹ hơn dấu gạch, đỡ rối hơn dấu phẩy. */
.pagehead-sub .sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border-strong);
    flex: none;
}

/* Hàng dưới của đầu trang: bên trái chuyển dạng xem, bên phải các nút hành động. */
.pagehead-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.pagehead-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Vòng tiến độ =====
   Thay cho dòng chữ "1/3 mục hoàn thành (33%)": cùng một thông tin nhưng đọc được
   trong một phần giây thay vì phải đọc hết câu. */
.ringstat { display: flex; align-items: center; gap: 13px; }

.ringstat-ring { position: relative; width: 58px; height: 58px; flex: none; }

/* Xoay để vạch bắt đầu từ đỉnh thay vì từ mép phải. */
.ringstat-ring svg { transform: rotate(-90deg); display: block; }

.ringstat-track { stroke: var(--border); }

.ringstat-fill {
    stroke: var(--st-ok);
    stroke-linecap: round;
    transition: stroke-dashoffset .9s cubic-bezier(.22, .9, .3, 1);
}

.ringstat-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
}

.ringstat-label { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.ringstat-label b { display: block; color: var(--text); font-size: 13px; font-weight: 600; }

/* ===== Nút chuyển dạng xem =====
   Kiểu "segmented": các lựa chọn nằm chung một rãnh, cái đang chọn nổi lên. Rõ hơn
   hai nút rời vì thấy ngay đây là một nhóm loại trừ nhau. */
.segbtn {
    display: inline-flex;
    background: var(--bg);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
}

.segbtn > * {
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: color .15s, background .15s;
}

.segbtn > *:hover { color: var(--text); text-decoration: none; }

.segbtn > .on {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--elev-1);
    font-weight: 650;
}

.segbtn svg { width: 15px; height: 15px; flex: none; }

/* ===== Thanh lọc một hàng (Checklist Filter Toolbar) =====
   Bố trí gọn gàng trên một hàng ngang, phân cấp rõ ràng:
   Ô tìm kiếm -> Các dropdown chọn nhanh -> Nút bỏ lọc -> Badge đếm bản ghi góc phải. */
.filterbar {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    padding: 8px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.filterbar form,
.filterbar .filterbar-form {
    display: flex !important;
    align-items: center !important;
    gap: 8px 10px !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Ô tìm kiếm có kính lúp */
.filter-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 320px;
}

.filter-search svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-faint);
    pointer-events: none;
}

.filter-search input,
.filterbar .filter-search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px;
    font: inherit;
    font-size: 13px;
    padding: 0 12px 0 34px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: #fff !important;
    color: var(--text) !important;
    box-sizing: border-box !important;
    transition: border-color .15s, box-shadow .15s;
}

.filter-search input::placeholder {
    color: var(--text-faint);
}

.filter-search input:hover {
    border-color: var(--text-muted) !important;
}

.filter-search input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

/* Các dropdown chọn nhanh (Người thực hiện, Trạng thái, Loại việc, Hạn) */
.filter-pick,
.filterbar select.filter-pick {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 36px;
    line-height: 34px;
    padding: 0 28px 0 12px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm, 8px) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: 175px !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.filter-pick:hover,
.filterbar select.filter-pick:hover {
    background-color: var(--state-hover) !important;
    color: var(--text);
    border-color: var(--text-muted) !important;
}

.filter-pick:focus,
.filterbar select.filter-pick:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
    color: var(--text);
}

/* Khi dropdown đang có giá trị lọc kích hoạt */
.filter-pick.on,
.filterbar select.filter-pick.on {
    background-color: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a56a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Trường hợp Select2 phòng ngừa */
.filterbar .select2-container {
    width: auto !important;
    min-width: 110px !important;
    max-width: 175px !important;
    flex: 0 0 auto !important;
}

/* Nút xóa lọc (Clear filter) */
.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm, 8px);
    transition: background .15s, color .15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-clear:hover {
    background: var(--st-late-soft, #fee2e2);
    color: var(--st-late, #dc2626);
    text-decoration: none;
}

.filter-clear svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Nút Submit Lọc khi không có JS */
.filter-go {
    height: 36px;
    padding: 0 14px;
    flex-shrink: 0;
}
.js .filter-go { display: none; }

/* Số bản ghi hiển thị (Badge count ở góc phải cùng) */
.filter-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-soft);
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.filter-count b {
    color: var(--primary);
    font-weight: 700;
    margin-right: 3px;
}

@media (max-width: 860px) {
    .filterbar { padding: 9px 10px; }
    .filter-search { flex: 1 1 100%; max-width: 100%; }
    .filter-count { margin-left: auto; }
}

@media (max-width: 640px) {
    .filter-pick,
    .filterbar select.filter-pick {
        flex: 1 1 calc(50% - 6px) !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .filter-count {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        margin-top: 2px;
    }
}

/* ===== Khung chứa bảng ===== */
.panel {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

/* Bảng rộng thì cuộn TRONG khung này, không để cả trang trượt ngang. */
.panel-scroll { overflow-x: auto; }

.panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

.panel-foot b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ===== Bảng danh sách ===== */
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/* Tiêu đề cột dính lại khi cuộn dọc — danh sách dài vẫn biết mình đang đọc cột nào. */
table.list thead th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

table.list thead th.num { text-align: right; }

table.list tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

table.list tbody tr:last-child td { border-bottom: 0; }

table.list tbody tr { transition: background .13s; }
table.list tbody tr:hover { background: var(--state-hover); }

/* Cả dòng mở được chi tiết. */
table.list tbody tr.rowlink { cursor: pointer; }

/* ===== Ô đầu dòng, kèm dải mức ưu tiên =====
   Dải màu mảnh bên trái cho biết mức ưu tiên mà không tốn thêm một cột, cũng không
   bắt người dùng đọc chữ. */
table.list td.lead {
    position: relative;
    padding-left: 20px;
    max-width: 340px;
    min-width: 240px;
}

table.list td.lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--st-idle-line);
}

table.list tr[data-pri="cao"] td.lead::before { background: var(--st-late); }
table.list tr[data-pri="vua"] td.lead::before { background: var(--st-warn); }
table.list tr[data-pri="thap"] td.lead::before { background: var(--st-idle-line); }

.lead-code {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.lead-name {
    display: block;
    color: var(--text);
    font-weight: 550;
    line-height: 1.4;
    margin-top: 2px;
}

table.list tr:hover .lead-name { color: var(--primary); }

/* Việc con: thụt vào kèm nhánh chữ L, thấy ngay quan hệ cha–con mà không cần chú thích. */
table.list td.lead.child { padding-left: 42px; }

table.list td.lead.child::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 50%;
    width: 9px;
    border-left: 1.5px solid var(--border-strong);
    border-bottom: 1.5px solid var(--border-strong);
    border-bottom-left-radius: 5px;
}

/* Loại việc: chữ nhỏ viết hoa, KHÔNG dùng badge.
   Nó là cách phân nhóm chứ không phải tình trạng cần theo dõi — để badge thì tranh
   mất sự chú ý của cột trạng thái ngay bên cạnh. */
.lead-kind {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

/* ===== Người thực hiện =====
   Huy hiệu chữ cái đầu giúp tên dài không bó thành ba dòng làm đội chiều cao hàng. */
.person { display: flex; align-items: center; gap: 9px; white-space: nowrap; }

.person-ava {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    background: var(--primary-soft);
    color: var(--primary);
}

.person span { font-size: 13px; }

/* ===== Mức ưu tiên =====
   Chấm màu + chữ, không dùng badge để khỏi tranh chỗ với cột trạng thái. */
.pri { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }

.pri i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pri-cao i { background: var(--st-late); }
.pri-vua i { background: var(--st-warn); }
.pri-thap i { background: var(--border-strong); }

/* ===== Hạn =====
   Ngày ở trên, khoảng cách tới hạn ở dưới và được tô màu theo mức gấp. */
.due { font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35; }
.due b { font-weight: 550; display: block; }
.due small { font-size: 11.5px; font-weight: 600; }
.due-soon small { color: var(--st-warn); }
.due-late small { color: var(--st-late); }
.due-done small { color: var(--text-faint); font-weight: 500; }

/* ===== Giờ công trên bảng checklist =====
   Số giờ đã ghi trên trần của việc. Cùng lối trình bày với cột Hạn: số chính đậm,
   phần phụ nhỏ và nhạt hơn, canh theo cột số để so sánh giữa các dòng bằng mắt. */
.hours { font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.35; }
.hours b { font-weight: 550; }
.hours small { color: var(--text-faint); font-weight: 500; margin-left: 2px; }

/* Vượt trần chỉ xảy ra với dữ liệu cũ — báo đỏ để còn rà lại. */
.hours-over b { color: var(--st-late); }

/* ===== Tiến độ =====
   Thanh nhỏ cạnh con số: so sánh nhiều dòng bằng mắt, không phải đọc từng số. */
.prog { display: flex; align-items: center; gap: 9px; min-width: 96px; }

.prog-track {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}

.prog-track i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--primary);
    transition: width .9s cubic-bezier(.22, .9, .3, 1);
}

.prog span {
    font-size: 12.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    min-width: 32px;
    text-align: right;
}

/* Xong hẳn thì cả thanh lẫn số chuyển sang màu "xong". */
.prog-full .prog-track i { background: var(--st-ok); }
.prog-full span { color: var(--st-ok); }

/* ===== Viên trạng thái =====
   Dùng thang màu ý nghĩa. Chấm màu bên trong giúp phân biệt được cả khi in đen trắng
   hoặc với người khó phân biệt màu. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}

.pill i { width: 6px; height: 6px; border-radius: 50%; flex: none; }

.pill-ok { background: var(--st-ok-soft); color: var(--st-ok); border-color: var(--st-ok-line); }
.pill-ok i { background: var(--st-ok); }

.pill-idle { background: var(--st-idle-soft); color: var(--st-idle); border-color: var(--st-idle-line); }
.pill-idle i { background: var(--st-idle); }

/* Đang chạy là trạng thái DUY NHẤT dùng màu thương hiệu: nó là việc đang diễn ra,
   không phải kết quả tốt hay xấu, nên không thuộc thang xanh/vàng/đỏ. */
.pill-run { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.pill-run i { background: var(--primary); }

.pill-late { background: var(--st-late-soft); color: var(--st-late); border-color: var(--st-late-line); }
.pill-late i { background: var(--st-late); }

.pill-warn { background: var(--st-warn-soft); color: var(--st-warn); border-color: var(--st-warn-line); }
.pill-warn i { background: var(--st-warn); }

/* ===== Số lượt trao đổi =====
   Chưa có lượt nào thì mờ hẳn đi, có rồi thì nổi lên — mắt chỉ dừng ở dòng có người nói. */
.talk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    text-decoration: none;
}

.talk svg { width: 14px; height: 14px; }
.talk-has { color: var(--primary); font-weight: 600; }
.talk:hover { color: var(--primary); text-decoration: none; }

/* ===== Nút thao tác trên dòng =====
   Chỉ hiện khi rê chuột vào dòng, nhờ vậy bảng bớt nhiễu. Vẫn hiện đầy đủ khi đi bằng
   bàn phím, nếu không thì người không dùng chuột mất hẳn lối vào. */
td.rowact { width: 46px; text-align: right; padding-right: 12px; }

.rowbtn {
    opacity: 0;
    transition: opacity .15s, background .15s;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: grid;
    place-items: center;
}

table.list tbody tr:hover .rowbtn { opacity: 1; }
.rowbtn:hover { background: var(--state-hover); color: var(--text); }

.rowbtn:focus-visible {
    opacity: 1;
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Hình vẽ trong nút không nhận sự kiện chuột: cú bấm luôn được tính cho chính thẻ
   <summary>. Thiếu dòng này thì ở trình duyệt cũ, bấm trúng hình có thể bị tính là
   bấm vào dòng và mở nhầm hộp thoại chi tiết thay vì mở menu. */
.rowbtn svg { width: 16px; height: 16px; pointer-events: none; }

/* Nút ba chấm là thẻ <summary> của <details>. Bỏ mũi tên tam giác mặc định của trình
   duyệt — cần cả hai dòng vì WebKit dùng thuộc tính riêng. */
summary.rowbtn { list-style: none; }
summary.rowbtn::-webkit-details-marker { display: none; }
summary.rowbtn::marker { content: ""; }

/* Menu đang mở thì giữ nút hiện, kể cả khi chuột đã rời khỏi dòng. */
.row-menu[open] > summary.rowbtn { opacity: 1; background: var(--state-hover); }


/* ===== Lịch công việc cá nhân (CalendarController) =====
   Lưới lịch tháng riêng, không dùng table.data (bảng dữ liệu hàng-cột thường) vì đây là lưới
   NGÀY chứ không phải bảng bản ghi — mỗi ô là 1 ngày, chứa 0..n việc thay vì 1 dòng = 1 bản ghi.
   Phiên bản nâng cấp: viền dọc nhẹ giữa các cột, chip việc có border-left + dot, hôm nay nổi bật
   bằng dải màu trên đỉnh ô, cuối tuần có nền nhạt, panel sắp tới có badge "Còn N ngày". */
.calendar-layout { grid-template-columns: 2fr 1fr; align-items: start; }

.calendar-card { padding: 22px 22px 8px; }

/* Bộ chọn tháng/năm nhanh — thay thế tiêu đề tháng tĩnh, navigate ngay khi đổi. */
.cal-jump-form { display: flex; align-items: center; }

.cal-jump-selects {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cal-jump-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 7px;
    border: none;
    border-radius: 6px;
    padding: 4px 28px 4px 6px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    cursor: pointer;
    transition: background-color .12s ease;
    line-height: 1.2;
}
/* Select năm — nhỏ hơn tháng một chút */
#cal-jump-year.cal-jump-select {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    padding-top: 6px;
}
.cal-jump-select:hover  { background-color: var(--state-hover); }
.cal-jump-select:focus  { outline: 2px solid var(--primary); outline-offset: 1px; background-color: var(--state-hover); }


.calendar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.calendar-title-block { display: flex; align-items: baseline; gap: 6px; }
.calendar-title      { font-size: 21px; font-weight: 800; color: var(--text); }
.calendar-title-year { font-size: 15px; font-weight: 500; color: var(--text-muted); }

.calendar-nav-actions { display: flex; align-items: center; gap: 8px; }

.calendar-today-btn { border-radius: 999px; }

/* Cụm nút trước/sau gộp chung một viền — kiểu "segmented control". */
.calendar-pager {
    display: inline-flex;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    overflow: hidden;
}
.calendar-pager a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--text-muted);
    font-size: 15px;
    transition: background .12s ease, color .12s ease;
}
.calendar-pager a:first-child { border-right: 1px solid var(--border-soft); }
.calendar-pager a:hover { background: var(--state-hover); color: var(--text); }

/* Icon trang (h1) */
.cal-page-icon {
    display: inline-block;
    width: 22px; height: 22px;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -3px;
    color: var(--primary);
    opacity: .85;
}

/* ---- Lưới lịch ---- */
.calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }

.calendar-grid thead tr {
    border-bottom: 2px solid var(--border-soft);
}

.calendar-grid th {
    padding: 0 8px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

/* Cột cuối tuần — nhận diện nhanh hơn */
.calendar-grid th:nth-child(6),
.calendar-grid th:nth-child(7) { color: var(--primary); opacity: .7; }

.calendar-day {
    vertical-align: top;
    padding: 8px 7px;
    height: 112px;
    border-bottom: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    transition: background .12s ease;
    cursor: default;
}
.calendar-day:last-child { border-right: none; }
.calendar-grid tbody tr:last-child .calendar-day { border-bottom: none; }
.calendar-day:hover { background: var(--state-hover); }

/* Cuối tuần — nền nhạt để phân biệt với ngày làm việc */
.calendar-day-weekend { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.calendar-day-weekend:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* Ngày thuộc tháng trước/sau — mờ đi */
.calendar-day-outside { opacity: .45; }
.calendar-day-outside:hover { opacity: .6; }

/* Hôm nay — nổi bật hơn với viền màu thương hiệu + nền nhẹ */
.calendar-day-today {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    position: relative;
}
.calendar-day-today::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 0 0 3px 3px;
}
.calendar-day-today:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Số ngày */
.calendar-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.calendar-day.calendar-day-outside .calendar-day-num { opacity: .5; }

/* Số hôm nay — khoanh tròn đặc màu thương hiệu */
.calendar-day-today .calendar-day-num {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
}

/* Số ngày tháng hiện tại — đậm hơn một chút */
.calendar-day:not(.calendar-day-outside) .calendar-day-num { color: var(--text); }

.calendar-task-list { display: flex; flex-direction: column; gap: 3px; }

/* Chip việc — border-left màu + dot indicator để nhận diện trạng thái ngay mà không cần đọc chữ */
.calendar-task {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.55;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px 2px 5px;
    border-left: 3px solid transparent;
    transition: filter .12s ease, opacity .12s ease;
    overflow: hidden;
}
.calendar-task:hover { filter: brightness(0.93); }

.cal-task-dot {
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-radius: 50%;
}
.cal-task-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-task-overdue {
    background: var(--st-late-soft);
    color: var(--st-late);
    border-left-color: var(--st-late);
}
.calendar-task-overdue   .cal-task-dot { background: var(--st-late); }

.calendar-task-done {
    background: var(--st-ok-soft);
    color: var(--st-ok);
    border-left-color: var(--st-ok);
}
.calendar-task-done      .cal-task-dot { background: var(--st-ok); }

.calendar-task-active {
    background: var(--primary-soft);
    color: var(--primary);
    border-left-color: var(--primary);
}
.calendar-task-active    .cal-task-dot { background: var(--primary); }

.calendar-task-cancelled {
    background: var(--st-idle-soft);
    color: var(--st-idle);
    border-left-color: var(--st-idle);
}
.calendar-task-cancelled .cal-task-dot { background: var(--st-idle); }

/* Tag tên thành viên hiển thị trên chip việc trong Lịch công tác Tổ */
.cal-member-tag {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    height: 15px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

/* Badge hiển thị tổng giờ Logtime trên chip việc */
.cal-task-time {
    font-size: 10px;
    font-weight: 700;
    color: inherit;
    opacity: 0.85;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 4px;
    font-variant-numeric: tabular-nums;
}

.calendar-more {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 1px 6px;
    margin-top: 1px;
    opacity: .75;
}
.calendar-more:hover { opacity: 1; text-decoration: underline; cursor: pointer; }

/* Chú giải màu */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 4px;
    margin-top: 6px;
    border-top: 1px solid var(--border-soft);
    font-size: 11.5px;
    color: var(--text-muted);
}
.calendar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.calendar-legend .calendar-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.calendar-dot-overdue { background: var(--st-late); }
.calendar-dot-done    { background: var(--st-ok); }
.calendar-dot-active  { background: var(--primary); }

/* ---- Panel "Công việc sắp tới" bên phải ---- */
.cal-upcoming-icon {
    display: inline-block;
    width: 14px; height: 14px;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -2px;
    color: var(--primary);
    opacity: .8;
}

/* Badge "Còn N ngày" / "Quá N ngày" thay cho badge trạng thái thông thường */
.cal-due-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.cal-due-late  { background: var(--st-late-soft); color: var(--st-late); }
.cal-due-today { background: var(--primary-soft); color: var(--primary); }
.cal-due-soon  { background: rgba(245,158,11,.12);  color: #92400e; }

/* Border-left trên item sắp tới theo tone */
.cal-upcoming-item { border-left: 3px solid transparent; transition: border-color .12s ease; }
.cal-upcoming-overdue   { border-left-color: var(--st-late); }
.cal-upcoming-done      { border-left-color: var(--st-ok); }
.cal-upcoming-active    { border-left-color: var(--primary); }
.cal-upcoming-cancelled { border-left-color: var(--st-idle); }

/* Người thực hiện trong panel sắp tới */
.cal-upcoming-assignee {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    font-weight: 500;
}
.cal-user-icon {
    width: 12px;
    height: 12px;
    color: var(--primary);
    opacity: .85;
    flex-shrink: 0;
}

/* Empty state */
.cal-upcoming-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    color: var(--text-muted);
    font-size: 13px;
}
.cal-upcoming-empty svg {
    width: 40px; height: 40px;
    opacity: .4;
}

/* Số ngày có việc — hover có hiệu ứng nổi bật và con trỏ pointer */
.calendar-day-has-tasks {
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.calendar-day-has-tasks:hover {
    color: var(--primary);
    font-weight: 800;
}

/* Modal danh sách công việc theo ngày (DayTasks) */
.day-tasks-modal {
    padding: 2px 0;
}
.day-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.day-tasks-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.day-tasks-badge {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}
.day-tasks-date {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.day-tasks-count {
    color: var(--text-muted);
    font-size: 13px;
}
.day-tasks-table {
    width: 100%;
    margin: 0;
}
.day-task-row {
    cursor: pointer;
    transition: background-color .1s ease;
}
.day-task-row:hover {
    background-color: var(--state-hover) !important;
}
.day-task-title-cell {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.day-task-link {
    color: var(--text);
    text-decoration: none;
    line-height: 1.35;
}
.day-task-link:hover {
    color: var(--primary);
}
.day-task-assignee {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}
.cal-dot-overdue { background: var(--st-late); }
.cal-dot-done    { background: var(--st-ok); }
.cal-dot-active  { background: var(--primary); }
.cal-dot-cancelled { background: var(--st-idle); }

@media (max-width: 900px) {
    .calendar-layout { grid-template-columns: 1fr; }
    .calendar-day { height: 90px; }
    .calendar-card { padding: 16px 12px 4px; }
}

/* Người đã bật giảm chuyển động thì bỏ hẳn hiệu ứng chạy của vòng và thanh tiến độ. */
@media (prefers-reduced-motion: reduce) {
    .ringstat-fill,
    .prog-track i { transition: none; }
}

/* ===== Màn KPI: bảng xếp hạng, vòng điểm, diễn giải công thức =====

   Toàn bộ khối này bám thang màu theo Ý NGHĨA (--st-*) chứ không dùng --primary: điểm số là
   TÌNH TRẠNG của dữ liệu, không phải chỗ bấm được. Xem lại phần đầu tệp về quy ước đó. */

/* Ba sắc của thanh tiến độ, đặt tên theo ý nghĩa chứ không theo màu — đổi sắc độ sau này
   thì sửa ở đây, các view không phải biết. */
.progress-fill.bar-ok   { background: var(--st-ok); }
.progress-fill.bar-warn { background: var(--st-warn); }
.progress-fill.bar-late { background: var(--st-late); }

/* Thẻ tổng quan: tên người dài thì thu chữ lại, không để tràn ra khỏi thẻ. */
.stat-value-sm {
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Huy chương ba hạng đầu -----
   Bảng đã sắp theo điểm nên thứ hạng vốn có sẵn; huy chương chỉ làm nó nhìn thấy được mà
   không thêm cột nào. Từ hạng 4 trở đi vẫn là số thường, tránh biến cả bảng thành sắc màu. */
.rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #6b4e00;
    background: #f6e5b0;
    border: 1px solid #e3cd8c;
}
.rank-medal.rank-2 { color: #4b5462; background: #e6eaf0; border-color: #cbd3de; }
.rank-medal.rank-3 { color: #7a4a25; background: #f2e0d2; border-color: #dcc3ad; }

/* ----- Ô điểm trong bảng xếp hạng -----
   Số và thanh nằm chung một ô: thanh không kèm số thì không đọc chính xác được, còn số không
   kèm thanh thì mắt không so sánh nhanh giữa các dòng. */
.kpi-col-score { min-width: 160px; }

.kpi-cell { display: flex; align-items: center; gap: 10px; }

.kpi-cell-num {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
    flex: none;
}

.kpi-cell-bar { flex: 1; min-width: 60px; }

/* ----- Vòng điểm trên màn chi tiết -----
   Vẽ bằng conic-gradient thay vì SVG: chỉ cần một biến --dial là đủ, không phải tính chu vi
   đường tròn rồi đặt stroke-dasharray. Phần lõi trắng đè lên giữa tạo thành vành. */
.score-block {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.score-dial {
    position: relative;
    width: 120px;
    height: 120px;
    flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--dial-color) 0 var(--dial, 0%), var(--border) var(--dial, 0%) 100%);
}

.score-dial { --dial-color: var(--st-ok); }
.score-dial.tone-warn { --dial-color: var(--st-warn); }
.score-dial.tone-late { --dial-color: var(--st-late); }

.score-dial-inner {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.score-dial-inner strong {
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.score-dial-inner em {
    font-style: normal;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.score-side { flex: 1; min-width: 190px; }

.score-side-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-soft);
}
.score-side-line:last-child { border-bottom: none; }
.score-side-line > span { color: var(--text-muted); }
.score-side-line > strong { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Huy hiệu xếp loại phóng to cho khối điểm chính — cùng màu, chỉ khác cỡ. */
.badge-lg {
    font-size: 13px;
    padding: 5px 13px;
    margin-bottom: 10px;
}

/* ----- Tóm tắt từng nhóm việc trên màn chi tiết -----
   Đặt ngay trên bảng chi tiết: người xem thấy kết quả nhóm trước, rồi mới soi từng dòng nếu
   thắc mắc — ngược lại thì phải đọc hết bảng mới biết nhóm này được bao nhiêu. */
.group-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.group-score {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex: none;
    min-width: 96px;
}
.group-score > strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.group-score > em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }

.group-bars { flex: 1; min-width: 220px; }

.group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.group-meta strong { color: var(--text); font-weight: 600; }

/* ----- Màn Cấu hình KPI: bản xem trước công thức -----
   Bày công thức thành chuỗi chip có màu thay vì một dòng chữ: mỗi thành phần một khối riêng
   thì nhìn ra ngay cái nào cộng, cái nào nhân, cái nào là kết quả. */
.formula-preview { display: flex; flex-direction: column; gap: 12px; }

.formula-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.formula-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}

.formula-op { color: var(--text-faint); font-weight: 700; font-size: 15px; }

.chip-support { background: var(--st-ok-soft);   color: var(--st-ok);   border-color: var(--st-ok-line); }
.chip-execute { background: var(--primary-soft); color: var(--primary); border-color: #bcd5f2; }
.chip-bonus   { background: #f0eefb;             color: #4b3f9e;        border-color: #d5cef2; }
.chip-penalty { background: var(--st-late-soft); color: var(--st-late); border-color: var(--st-late-line); }
.chip-rate    { background: var(--st-warn-soft); color: var(--st-warn); border-color: var(--st-warn-line); }
.chip-quality { background: var(--st-idle-soft); color: var(--st-idle); border-color: var(--st-idle-line); }

.chip-final {
    background: var(--st-ok);
    color: #fff;
    border-color: var(--st-ok);
}

.formula-note { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* ----- Dải xếp loại -----
   Năm ô liền nhau theo đúng thứ tự điểm tăng dần. Bốn ô nhập số rời rạc thì phải tự nhẩm mới
   biết khoảng "Khá" rộng hay hẹp; nhìn dải là thấy ngay. */
.rank-scale {
    display: flex;
    margin-top: 16px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.rank-seg {
    flex: 1;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid var(--border);
}
.rank-seg:last-child { border-right: none; }

.rank-seg em {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 11.5px;
    margin-top: 3px;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

.seg-fail { background: var(--st-late-soft); color: var(--st-late); }
.seg-pass { background: var(--st-warn-soft); color: var(--st-warn); }
.seg-fair { background: var(--st-idle-soft); color: var(--st-idle); }
.seg-good { background: var(--st-ok-soft);   color: var(--st-ok); }
.seg-exc  { background: var(--st-ok);        color: #fff; }

/* Ngưỡng nhập sai thứ tự: làm mờ cả dải và viền đỏ, khỏi phải bấm lưu mới biết. */
.rank-scale.is-invalid {
    border-color: var(--st-late);
    opacity: .5;
}

/* Hai ô chọn ngày cuối tuần nằm cạnh nhau trong một ô của form-grid. */
.check-row { display: flex; gap: 18px; flex-wrap: wrap; }
.check-row .check-inline { padding-bottom: 0; }

@media (max-width: 640px) {
    .score-dial { width: 96px; height: 96px; }
    .score-dial-inner strong { font-size: 24px; }

    /* Dải xếp loại năm ô trên điện thoại thì mỗi ô còn một hai chữ — xếp dọc lại. */
    .rank-scale { flex-direction: column; }
    .rank-seg { border-right: none; border-bottom: 1px solid var(--border); text-align: left; }
    .rank-seg:last-child { border-bottom: none; }
    .rank-seg em { display: inline; margin-left: 6px; }
}

/* ===== Trung tâm Trao đổi Dự án (Discussions Hub & Realtime Chat) ===== */
.badge-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--st-idle);
    margin-right: 4px;
}
.badge-status-dot.online {
    background-color: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

/* Topbar Discussions Dropdown */
.discussions-bell {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    transition: background 0.15s ease;
}
.discussions-bell:hover {
    background: rgba(255, 255, 255, 0.15);
}
.discussions-dropdown-panel {
    width: 340px;
    max-height: 440px;
    overflow-y: auto;
    padding: 0;
    box-shadow: var(--elev-3);
}
.discussions-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 2;
}
.discussions-panel-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.discussions-panel-all {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.discussions-panel-all:hover {
    text-decoration: underline;
}
.discussions-panel-list {
    padding: 4px 0;
}
.discussions-panel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.15s ease;
}
.discussions-panel-item:last-child {
    border-bottom: none;
}
.discussions-panel-item:hover {
    background: var(--primary-soft);
}
.discussions-item-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #1a56a8, #0e86d4);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.discussions-item-content {
    flex: 1;
    min-width: 0;
}
.discussions-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discussions-item-summary {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.discussions-item-meta {
    font-size: 11px;
    color: var(--text-faint);
    flex-shrink: 0;
}
.discussions-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
}
.discussions-empty-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

/* Trang Hub Trao đổi Dự án */
.discussions-hub-page {
    margin: 4px 0 0 0;
}
.discussions-hub-layout {
    display: flex;
    height: calc(100vh - 165px);
    max-height: calc(100vh - 165px);
    min-height: 460px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--elev-1);
}
.discussions-sidebar {
    width: 330px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}
.discussions-sidebar-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.discussions-search-box {
    position: relative;
    display: flex;
    align-items: center;
}
.discussions-search-box .search-icon {
    position: absolute;
    left: 10px;
    font-size: 13px;
    opacity: 0.6;
    pointer-events: none;
}
.discussions-search-box .search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: #f1f5f9;
}
.discussions-search-box .search-input:focus {
    background: #fff;
    border-color: var(--primary);
}
.discussions-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.discussions-empty-sidebar {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.discussions-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text);
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}
.discussions-nav-item:hover {
    background: #edf2f7;
}
.discussions-nav-item.active {
    background: var(--primary-soft);
    border-left-color: var(--primary);
}
.discussions-nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #1a56a8, #3b82f6);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.discussions-nav-body {
    flex: 1;
    min-width: 0;
}
.discussions-nav-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.discussions-nav-title .project-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discussions-nav-title .msg-time {
    font-size: 11px;
    color: var(--text-faint);
    flex-shrink: 0;
}
.discussions-nav-lastmsg {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

/* Cột phải: Chat area */
.discussions-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.chat-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.chat-header-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #1a56a8, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-header-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.chat-messages-area {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}
.chat-loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 13.5px;
    gap: 10px;
}
.chat-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(26, 86, 168, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: chat-spin 0.8s linear infinite;
}
@keyframes chat-spin {
    to { transform: rotate(360deg); }
}
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px;
    text-align: center;
}
.chat-empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.8;
}
.chat-empty-state .empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.chat-empty-state .empty-desc {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 360px;
}
.chat-messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-message-row {
    display: flex;
    gap: 10px;
    max-width: 80%;
}
.chat-message-row.is-other {
    align-self: flex-start;
}
.chat-message-row.is-me {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #64748b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-content-box {
    display: flex;
    flex-direction: column;
}
.msg-sender-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    margin-left: 2px;
}
.chat-message-row.is-me .msg-content-box {
    align-items: flex-end;
}
.msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.45;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-message-row.is-other .msg-bubble {
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.chat-message-row.is-me .msg-bubble {
    background: #1a56a8;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}
.msg-meta {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 4px;
    padding: 0 4px;
}
.mention-highlight {
    background: rgba(37, 99, 235, 0.15);
    color: #1d4ed8;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
}
.chat-message-row.is-me .mention-highlight {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Mention Picker Popup */
.mention-picker-popup,
.task-picker-popup {
    position: absolute;
    bottom: 70px;
    left: 20px;
    width: 320px;
    max-height: 260px;
    background: #ffffff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-3);
    z-index: 20;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mention-picker-head,
.task-picker-head {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mention-picker-list,
.task-picker-list {
    max-height: 210px;
    overflow-y: auto;
}
.mention-picker-item,
.task-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid #f8fafc;
}
.mention-picker-item:hover,
.task-picker-item:hover,
.task-picker-item.is-selected {
    background: var(--primary-soft);
}
.mention-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mention-info {
    display: flex;
    flex-direction: column;
}
.mention-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}
.mention-uname {
    font-size: 11px;
    color: var(--text-muted);
}
.task-picker-badge {
    padding: 2px 6px;
    background: #e2e8f0;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    flex-shrink: 0;
}
.task-picker-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.task-picker-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-picker-sub {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
}

/* Task Card inside message bubble */
.chat-task-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    margin: 4px 0;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    text-decoration: none !important;
    color: #1d4ed8 !important;
    font-weight: 600;
    font-size: 12.5px;
    transition: all 0.15s ease;
    max-width: 100%;
}
.chat-task-card:hover {
    background: rgba(37, 99, 235, 0.16);
    border-color: #2563eb;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
}
.chat-task-card-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.chat-task-card-code {
    font-weight: 700;
    color: #1e40af;
    flex-shrink: 0;
}
.chat-task-card-title {
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}
.chat-task-card-arrow {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
}
.chat-message-row.is-me .chat-task-card {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff !important;
}
.chat-message-row.is-me .chat-task-card-code,
.chat-message-row.is-me .chat-task-card-title {
    color: #ffffff !important;
}

/* Attachment Preview Bar before sending */
.chat-attachment-preview-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    animation: fadeIn 0.15s ease;
}
.chat-preview-thumb-wrap {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-preview-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat-preview-icon {
    font-size: 24px;
}
.chat-preview-info {
    flex: 1;
    min-width: 0;
}
.chat-preview-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-preview-size {
    font-size: 11.5px;
    color: var(--text-muted);
}
.chat-preview-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #94a3b8;
    padding: 4px 6px;
    border-radius: 50%;
    transition: all 0.15s ease;
}
.chat-preview-remove:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* Media in Chat Messages */
.chat-msg-attachment {
    margin-top: 6px;
}
.chat-img-link {
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    max-width: 320px;
    max-height: 240px;
    border: 1px solid rgba(0,0,0,0.08);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.chat-img-link:hover {
    opacity: 0.95;
    transform: scale(1.01);
}
.chat-msg-img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    background: #000000;
}
.chat-video-wrap {
    max-width: 340px;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
}
.chat-msg-video {
    width: 100%;
    max-height: 240px;
    display: block;
}
.chat-file-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    text-decoration: none !important;
    color: inherit;
    transition: background 0.15s ease;
}
.chat-file-card:hover {
    background: rgba(0,0,0,0.08);
}
.chat-message-row.is-me .chat-file-card {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: #ffffff;
}
.chat-file-icon {
    font-size: 24px;
}
.chat-file-info {
    display: flex;
    flex-direction: column;
}
.chat-file-name {
    font-size: 13px;
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-file-size {
    font-size: 11px;
    opacity: 0.75;
}
.chat-file-down {
    font-size: 16px;
    opacity: 0.7;
}

/* Input Bar */
.chat-input-container {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    padding: 12px 20px;
    background: #ffffff;
    border-top: 1px solid var(--border);
}
.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 3px 6px 3px 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-input-bar:focus-within {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 168, 0.1);
}
.chat-tool-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    padding: 6px 8px;
    border-radius: 50%;
    transition: background 0.15s ease;
}
.chat-tool-btn:hover {
    background: rgba(26, 86, 168, 0.1);
}
.chat-input-field {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    color: var(--text);
    padding: 8px 0;
}
.chat-send-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.chat-send-btn:hover {
    background: var(--primary-dark);
}
.chat-send-btn:active {
    transform: scale(0.97);
}
.chat-no-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    padding: 30px;
}

/* Khối Trao đổi trong trang Chi tiết Dự án */
.project-detail-discussion-card {
    margin-top: 24px;
}
.project-detail-discussion-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.project-detail-discussion-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.compact-chat-messages {
    height: 380px;
    overflow-y: auto;
    padding: 16px;
}
.compact-input-container {
    padding: 12px 16px;
}

@media (max-width: 768px) {
    .discussions-hub-layout {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
    .discussions-sidebar {
        width: 100%;
        max-height: 240px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .discussions-chat-container {
        height: 520px;
    }
}

.nav-count-badge {
    background-color: var(--primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    line-height: 1.3;
    margin-left: 6px;
    vertical-align: middle;
}

/* ===== HUD Power Curve Thời gian làm việc & Logtime (Web Dashboard) ===== */
.hud-card {
    margin-bottom: 24px;
    padding: 18px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elev-1);
}

.hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
}

.hud-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hud-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(26, 86, 168, 0.2);
    flex-shrink: 0;
}

.hud-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.2;
}

.hud-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.hud-today-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg);
}

.hud-today-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.hud-today-badge.tone-ok {
    background: var(--st-ok-soft);
    border-color: var(--st-ok-line);
    color: var(--st-ok);
}
.hud-today-badge.tone-ok .hud-today-dot {
    background: var(--st-ok);
    box-shadow: 0 0 0 2px rgba(26, 127, 82, 0.25);
}

.hud-today-badge.tone-primary {
    background: var(--primary-soft);
    border-color: rgba(26, 86, 168, 0.3);
    color: var(--primary);
}
.hud-today-badge.tone-primary .hud-today-dot {
    background: var(--primary);
    box-shadow: 0 0 0 2px rgba(26, 86, 168, 0.25);
}

.hud-today-badge.tone-warn {
    background: var(--st-warn-soft);
    border-color: var(--st-warn-line);
    color: var(--st-warn);
}
.hud-today-badge.tone-warn .hud-today-dot {
    background: var(--st-warn);
    box-shadow: 0 0 0 2px rgba(154, 103, 0, 0.25);
}

.hud-today-badge.tone-late {
    background: var(--st-late-soft);
    border-color: var(--st-late-line);
    color: var(--st-late);
}
.hud-today-badge.tone-late .hud-today-dot {
    background: var(--st-late);
    box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.25);
}

.hud-today-badge.tone-idle {
    background: var(--st-idle-soft);
    border-color: var(--st-idle-line);
    color: var(--st-idle);
}
.hud-today-badge.tone-idle .hud-today-dot {
    background: var(--st-idle);
}

/* Body layout */
.hud-body {
    display: grid;
    grid-template-columns: 180px 1fr 240px;
    gap: 24px;
    align-items: center;
}

/* Col 1: Gauge */
.hud-gauge-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    border-right: 1px solid var(--border-soft);
}

.hud-gauge-pane .score-dial {
    width: 106px;
    height: 106px;
}

.hud-gauge-pane .score-dial-inner strong {
    font-size: 22px;
}

.hud-gauge-meta {
    margin-top: 10px;
    text-align: center;
}

.hud-gauge-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.hud-gauge-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}

/* Col 2: 7 Capsule Bars */
.hud-chart-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hud-bars-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    position: relative;
    padding-top: 8px;
}

.hud-day-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px 6px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, transform 0.15s ease;
    cursor: default;
}

.hud-day-col:hover {
    background: var(--bg);
    transform: translateY(-2px);
}

.hud-day-col.is-today {
    background: rgba(26, 86, 168, 0.05);
    border: 1px solid rgba(26, 86, 168, 0.25);
}

.hud-day-col.is-today .hud-day-name span:first-child {
    color: var(--primary);
}

.hud-day-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.hud-day-date {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.hud-today-tag {
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--primary);
    color: #ffffff;
    padding: 1px 5px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.2px;
}

.hud-bar-track-wrap {
    position: relative;
    width: 32px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hud-bar-track {
    position: relative;
    width: 24px;
    height: 100%;
    background: var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border: 1px solid var(--border);
}

/* Target 8h guide line (8h / 12h = 66.67%) */
.hud-target-guide {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 66.67%;
    border-bottom: 1.5px dashed rgba(26, 86, 168, 0.45);
    pointer-events: none;
    z-index: 2;
}

.hud-bar-fill {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height 0.4s ease-out;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    box-sizing: border-box;
    z-index: 1;
}

.hud-bar-fill.bar-ok {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}

.hud-bar-fill.bar-primary {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    color: #ffffff;
}

.hud-bar-fill.bar-warn {
    background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
    color: #ffffff;
}

.hud-bar-fill.bar-late {
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    color: #ffffff;
}

.hud-bar-fill.bar-empty {
    background: transparent;
    height: 100% !important;
    border: 1px dashed var(--border-strong);
}

.hud-day-hours {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.hud-day-col.is-today .hud-day-hours {
    color: var(--primary);
}

/* Legend */
.hud-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-soft);
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.hud-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.legend-dot.bar-ok { background: #10b981; }
.legend-dot.bar-primary { background: #0284c7; }
.legend-dot.bar-warn { background: #ea580c; }
.legend-dot.bar-late { background: #dc2626; }
.legend-dot.bar-empty { background: var(--border-strong); border: 1px dashed #94a3b8; }

/* Col 3: Stat tiles */
.hud-stats-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--border-soft);
}

.hud-stat-tile {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.hud-stat-tile:hover {
    border-color: var(--border-strong);
}

.hud-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.hud-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.hud-stat-val small {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.hud-stat-sub {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 2px;
}

.text-ok { color: var(--st-ok) !important; }
.text-warn { color: var(--st-warn) !important; }
.text-late { color: var(--st-late) !important; }

/* Responsive */
@media (max-width: 1024px) {
    .hud-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hud-gauge-pane {
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
        padding-right: 0;
        padding-bottom: 16px;
        flex-direction: row;
        gap: 20px;
    }
    .hud-gauge-meta {
        margin-top: 0;
        text-align: left;
    }
    .hud-stats-pane {
        border-left: none;
        border-top: 1px solid var(--border-soft);
        padding-left: 0;
        padding-top: 16px;
        flex-direction: row;
        gap: 10px;
    }
    .hud-stat-tile {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .hud-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .hud-bars-grid {
        gap: 4px;
    }
    .hud-bar-track-wrap {
        width: 100%;
    }
    .hud-bar-track {
        width: 18px;
    }
    .hud-stats-pane {
        flex-direction: column;
    }
}

/* ==========================================================================
   TIMESHEET & TEAM MATRIX MODULE
   ========================================================================== */

/* Timesheet Table */
#timesheetTable td {
    vertical-align: middle;
}

.task-code {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--st-late);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-outline-danger:hover {
    background: #fef2f2;
    border-color: var(--st-late);
}

/* Heatmap Timesheet Matrix */
.timesheet-matrix-wrap {
    overflow-x: auto;
    position: relative;
    max-width: 100%;
    border-top: 1px solid var(--border);
}

.timesheet-matrix-table {
    width: 100%;
    min-width: 1450px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
}

.timesheet-matrix-table th,
.timesheet-matrix-table td {
    padding: 6px 2px;
    text-align: center;
    border-right: 1px solid var(--border-light, #e2e8f0);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.timesheet-matrix-table thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    height: 46px;
    vertical-align: middle;
}

/* Sticky columns */
.timesheet-matrix-table .sticky-col {
    position: sticky;
    background: var(--surface);
    z-index: 2;
}

.timesheet-matrix-table thead .sticky-col {
    z-index: 12;
    background: var(--bg);
}

.timesheet-matrix-table .col-stt {
    left: 0;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    text-align: center;
}

.timesheet-matrix-table .col-name {
    left: 38px;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    text-align: left;
    padding-left: 10px;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 6px rgba(0,0,0,0.06);
}

/* Header day cell */
.col-day {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
}

.th-day-num {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.th-day-dow {
    font-size: 10px;
    color: var(--text-faint);
    font-weight: 500;
}

.th-today {
    background: #e0f2fe !important;
    color: var(--primary) !important;
}

.th-weekend,
.col-weekend {
    background: #f8fafc;
}

.th-holiday {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

/* Body cell day */
.cell-day {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 38px;
    font-size: 11px;
    font-weight: 600;
    transition: transform 0.1s ease, filter 0.1s ease;
    user-select: none;
}

.cell-day:hover {
    filter: brightness(0.92);
    z-index: 3;
}

.cell-ok {
    background: #ecfdf5 !important;
    color: #065f46 !important;
}

.cell-warn {
    background: #fff7ed !important;
    color: #9a3412 !important;
}

.cell-late {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.cell-leave {
    background: #f5f3ff !important;
    color: #5b21b6 !important;
}

.cell-weekend {
    background: #fafafa;
    color: #cbd5e1;
}

.cell-empty {
    color: #cbd5e1;
}

.cell-today {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Summary cols */
.col-total {
    width: 65px;
    min-width: 65px;
    max-width: 65px;
    text-align: right !important;
    padding-right: 8px !important;
    font-weight: 600;
}

.col-target {
    width: 65px;
    min-width: 65px;
    max-width: 65px;
    text-align: right !important;
    padding-right: 8px !important;
}

.col-rate {
    width: 65px;
    min-width: 65px;
    max-width: 65px;
    text-align: center !important;
}

/* Footer summary row */
.tr-footer td {
    background: var(--bg);
    border-top: 2px solid var(--border);
    font-size: 12px;
    height: 38px;
}

.cell-foot-has {
    font-weight: 700;
    color: var(--primary);
}

.cell-foot-empty {
    color: var(--text-faint);
}

/* =========================================================================
   Image Thumbnail & Lightbox Modal Viewer
   ========================================================================= */

/* Khối hiển thị ảnh đính kèm trong Trao đổi & Chi tiết công việc */
.chat-file-img-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 4px;
    max-width: 100%;
}

.chat-img-thumb {
    position: relative;
    display: inline-block;
    max-width: 220px;
    max-height: 160px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: zoom-in;
}

.chat-img-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    border-color: var(--primary);
}

.chat-img-thumb img {
    display: block;
    max-width: 100%;
    max-height: 160px;
    object-fit: cover;
}

.chat-img-zoom-hint {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.chat-img-thumb:hover .chat-img-zoom-hint {
    opacity: 1;
}

.chat-file-img-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.chat-file-img-meta .chat-file-image {
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
}

.chat-file-img-meta .chat-file-down-link {
    color: var(--text-muted);
    font-size: 11.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-soft, rgba(128, 128, 128, 0.08));
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat-file-img-meta .chat-file-down-link:hover {
    color: var(--primary);
    background: var(--primary-soft, rgba(0, 122, 204, 0.15));
}

/* Lightbox Modal */
body.app-lightbox-open {
    overflow: hidden !important;
}

.app-lightbox {
    position: fixed;
    inset: 0;
    z-index: 105000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.app-lightbox-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    pointer-events: none;
}

.app-lightbox-header {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: rgba(18, 18, 18, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e6edf3;
    z-index: 10;
}

.app-lightbox-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-lightbox-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-lightbox-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-lightbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #e6edf3;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-decoration: none;
}

.app-lightbox-btn.app-lightbox-close {
    padding: 6px 10px;
    background: rgba(235, 87, 87, 0.2);
    border-color: rgba(235, 87, 87, 0.4);
    color: #ff7b72;
}

.app-lightbox-btn.app-lightbox-close:hover {
    background: rgba(235, 87, 87, 0.4);
    color: #ffffff;
}

.app-lightbox-body {
    pointer-events: auto;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
    position: relative;
    cursor: zoom-out;
}

.app-lightbox-img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease;
    cursor: default;
}

.app-lightbox-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.app-lightbox-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top-color: #58a6ff;
    animation: app-spin 0.8s linear infinite;
}

@keyframes app-spin {
    to { transform: rotate(360deg); }
}