/*
 * Tông màu xanh y tế — ghi đè màu chủ đạo mặc định của Duralux (#3454d1) bằng xanh lá cho phù
 * hợp đơn vị y tế/tiêm chủng. File này nạp sau bootstrap.min.css và theme.min.css nên các luật
 * bên dưới thắng thế nhờ thứ tự nạp.
 *
 * Đã đồng bộ lại theo đúng tông màu tham khảo từ bản thiết kế mới (trước đây #2E7D32) — đổi giá
 * trị NGAY TẠI ĐÂY là đủ để lan toả nhất quán ra toàn bộ app (sidebar, nút, badge, link...) vì
 * mọi nơi đều đọc qua chung 4 biến này, không phải sửa từng chỗ riêng lẻ.
 */

:root {
    /* 2026-08-30: tăng sáng + ngả hue về xanh lá cây thật (giảm bớt ám xanh dương/teal của tông
       cũ) — cũ #1f7a4d/#155c39/#0f4029 nằm ở hue ~150° (ngả cyan); bộ mới ở hue ~138° và L cao
       hơn ~8 điểm mỗi mức, giữ nguyên quan hệ đậm/nhạt giữa 3 biến. */
    --brand-primary: #259d49;
    --brand-primary-dark: #1d7c3a;
    --brand-primary-darker: #155b2a;
    --brand-primary-rgb: 37, 157, 73;
    --brand-soft-bg: #e6f4ec;
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
}

/* .form-select padding-right (2026-09-25, phát hiện qua ảnh chụp thật ở trang Nhân sự) —
   bootstrap.min.css đặt "padding:.375rem 2.25rem .375rem .75rem" (chừa 2.25rem/36px bên phải cho
   mũi tên) + mũi tên nền tại "right .75rem center" (~12px từ mép phải). theme.min.css nạp SAU lại
   đặt ".form-select,input{padding:12px 15px}" — thu hẹp lề phải xuống còn 15px mà KHÔNG đụng tới
   vị trí mũi tên (vẫn ~12px), khiến chữ dài (vd "Tất cả phòng ban") tràn sát và ĐÈ LÊN mũi tên,
   nhìn như chữ cuối bị biến dạng/mất nét (vd "ban" trông giống "han"). Lỗi ở MỌI <select
   class="form-select"> toàn app hễ nội dung đủ dài chạm mép phải, không riêng trang Nhân sự — trả
   lại đủ khoảng đệm cho mũi tên ở đây (nạp sau theme.min.css nên thắng thế). */
.form-select { padding-right: 2.25rem !important; }

/* Thu hẹp bảng điều hướng (sidebar) — mặc định Duralux rộng 280px, thừa nhiều khoảng trống bên
   phải chữ. 220px (2026-08) từng đủ chỗ cho nhãn dài nhất lúc đó, nhưng sau khi đổi "Giao việc" →
   "Quản lý giao việc" và thêm "Quản lý văn bản"/"Quản lý nhân sự" (2026-09-06) — nhãn dài hơn hẳn —
   mục có kèm số huy hiệu (vd "Quản lý giao việc" + số việc chưa đọc) bị tràn dòng, xuống thành 2
   dòng. Nới lên 250px để mọi nhãn hiện có (kể cả kèm huy hiệu 2 chữ số) luôn nằm gọn 1 dòng — đo
   thực tế bằng Playwright thấy 220px chỉ đủ 189px cho nội dung link, không đủ cho
   icon+chữ+huy hiệu của "Quản lý giao việc". .nxl-container (khung nội dung) và .nxl-header
   (thanh trên cùng) phải đổi theo ĐÚNG cùng 1 giá trị vì chúng định vị bằng margin-left/left tuyệt
   đối khớp với độ rộng sidebar (xem theme.min.css) — chỉ đổi 1 trong 3 sẽ làm nội dung/thanh trên
   cùng chồng lấn hoặc hở khoảng trống với sidebar. */
.nxl-navigation {
    width: 250px !important;
}
.nxl-container {
    margin-left: 250px !important;
}
.nxl-header {
    left: 250px !important;
}
/* Dưới 1200px, theme gốc tự chuyển sidebar sang dạng ẩn/trượt ra (off-canvas, bấm icon hamburger
   mới hiện) và đẩy nội dung + thanh trên cùng về sát lề trái (margin-left/left: 0) để chiếm toàn
   bộ chiều rộng màn hình — 3 luật "!important" phía trên vốn không giới hạn theo màn hình nên đã
   đè luôn cả rule này, khiến nội dung trên mobile bị chừa hẳn 220px trống bên trái dù sidebar
   không hiện. Trả lại đúng hành vi gốc bằng cách reset lại ở cùng breakpoint theme đang dùng. */
@media (max-width: 1199.98px) {
    .nxl-container {
        margin-left: 0 !important;
    }
    .nxl-header {
        left: 0 !important;
    }
}

/* Viền dưới nhấn màu thương hiệu cho thanh trên cùng và khối logo ở sidebar — 1 điểm nhấn xanh
   lá nhỏ, không đổi bố cục/màu nền chung. */
.nxl-header {
    border-bottom: 2px solid var(--brand-primary);
}
.m-header {
    border-bottom: 1px solid var(--brand-soft-bg);
}

/* Tên đơn vị + logo giữa thanh trên cùng (partials/header.blade.php) — canh giữa tuyệt đối theo
   .header-wrapper thay vì margin:auto giữa các flex item, để không bị lệch bởi độ rộng khác nhau
   của cụm bên trái (hamburger/toggle) và bên phải (chuông thông báo/avatar). Ẩn trên màn hình hẹp
   (d-none d-md-flex trong Blade) vì không đủ chỗ cùng lúc với 2 cụm kia. */
.header-wrapper {
    position: relative;
}
.header-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.header-brand-logo {
    height: 60px;
    width: auto;
}
.header-brand-text {
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 27px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Logo trong ô tròn "brand-mark" ở đầu sidebar (partials/sidebar.blade.php) — bản thân
   .brand-mark không có kích thước riêng trong theme gốc (chỉ định hình qua icon font-size bên
   trong), nên phải khai báo cứng kích thước ở đây mới kiểm soát được — .m-header cao sẵn 80px
   nên còn dư nhiều chỗ để phóng to. */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.brand-mark-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Máy tính/laptop có màn hình hẹp hơn màn chuẩn (1920x1080) nhưng KHÔNG phải điện thoại/tablet
   (>=992px): thu nhỏ NGUYÊN KHỐI toàn bộ trang (sidebar + header + nội dung) theo đúng tỉ lệ
   chiều rộng màn hình thực tế / 1920 — y hệt cách trình duyệt tự zoom out, để hiển thị ĐẦY ĐỦ
   bố cục giống hệt màn 1920px thay vì rút gọn/ẩn bớt cột. "zoom" (khác "transform: scale") vẫn
   tham gia luồng layout bình thường nên position:sticky (tiêu đề bảng, cột đóng băng...) và các
   phép đo bằng JS (getBoundingClientRect trong tasks/index.blade.php) không bị lệch.
   Dưới 992px (tablet/điện thoại) CỐ TÌNH không zoom — dùng giao diện rút gọn/tối ưu vùng chạm
   riêng ở 2 @media bên dưới, vì thu nhỏ nguyên khối trên màn hình nhỏ sẽ khiến chữ/nút bé đến
   mức không bấm được bằng ngón tay. */
@media (min-width: 992px) and (max-width: 1919.98px) {
    html {
        zoom: calc(100vw / 1920);
    }
}

/* Thu nhỏ toàn bộ giao diện theo tỉ lệ trên màn hình nhỏ — hầu hết kích thước của Bootstrap
   (chữ, nút, khoảng cách...) tính theo "rem" (dựa trên cỡ chữ gốc ở <html>), nên chỉ cần giảm
   cỡ chữ gốc là toàn bộ giao diện tự thu nhỏ theo đúng tỉ lệ, không cần sửa từng chỗ. Chỉ áp
   dụng cho màn hình nhỏ qua @media — màn hình lớn (desktop) giữ nguyên cỡ chữ mặc định 16px. */
@media (max-width: 768px) {
    html { font-size: 15px; }
}
@media (max-width: 576px) {
    html { font-size: 13.5px; }
}

/* Chặn iOS Safari tự phóng to màn hình khi chạm vào ô nhập liệu — Safari tự zoom nếu cỡ chữ tính
   toán của input/select/textarea đang focus nhỏ hơn 16px. Vì cỡ chữ mobile trong app này bị thu
   nhỏ theo rem (html font-size ở trên) và nhiều nơi còn set cứng nhỏ hơn nữa (~12-13px), hầu hết
   ô nhập đều dưới ngưỡng 16px. Ép tối thiểu 16px riêng cho các ô nhập liệu (không đụng nhãn/chữ
   khác quanh nó) để giữ gọn giao diện nhưng vẫn tránh bị phóng to khi gõ. */
@media (max-width: 768px) {
    input, select, textarea,
    .form-control, .form-select {
        font-size: 16px !important;
    }
}

/* Nút "Xem" (con mắt) và nút ẩn/hiện việc con ở Sổ theo dõi vốn cố tình nhỏ (p-0) cho bảng gọn
   trên desktop — trên di động thì quá nhỏ để chạm chính xác. Nới rộng vùng chạm bằng padding +
   margin âm bù lại (không đổi kích thước icon/không ảnh hưởng bố cục), chỉ áp dụng cho mobile. */
@media (max-width: 768px) {
    .resizable-table .col-frozen .btn-link.p-0 {
        padding: 8px !important;
        margin: -8px;
    }
}

/* Chữ, nền, viền dùng màu chủ đạo */
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.bg-soft-primary, .bg-light-primary { background-color: var(--brand-soft-bg) !important; }
.badge.bg-light-primary, .btn-light-primary {
    color: var(--brand-primary) !important;
    background: var(--brand-soft-bg) !important;
    border-color: var(--brand-soft-bg) !important;
}
.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:not(:disabled):not(.disabled).active,
.btn-light-primary:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Nút chính (dùng biến riêng của Bootstrap 5 cho từng nút) */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-darker);
    --bs-btn-active-border-color: var(--brand-primary-darker);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
/* Khối --bs-btn-bg phía trên KHÔNG đủ — theme.min.css có riêng 1 luật
   ".btn-primary,.btn-primary:hover{...background-color:#3454d1!important}" (xanh dương mặc định
   của Duralux) dùng !important trên chính background-color, nên luôn thắng bất kể --bs-btn-bg đã
   đổi đúng (đã tự kiểm bằng getComputedStyle: --bs-btn-bg = #259d49 nhưng background-color thực
   tế vẫn ra #3454d1). Phát hiện qua báo cáo thực tế trên trang Sổ theo dõi (2026-08-31) — nút
   "Lọc" (.btn-primary) hiện xanh dương thay vì xanh lá dù mọi nút khác đã đúng màu. Trước đây chỉ
   vá tạm cho riêng trang login (.auth-cover-card .btn-primary bên dưới); sửa ở đây 1 lần cho toàn
   bộ app vì rất có thể còn nhiều .btn-primary khác (Users, Departments, Settings...) đang bị y hệt
   mà chưa ai để ý. Phải dùng !important + specificity bằng hoặc hơn để thắng chắc chắn. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-primary:active {
    background-color: var(--brand-primary-darker) !important;
    border-color: var(--brand-primary-darker) !important;
}
/* Nút "Đăng nhập" (auth/login.blade.php) — ép cứng !important vì trang login là trang duy nhất
   nạp qua layouts/guest.blade.php, phòng trường hợp bị 1 rule khác của theme gốc ghi đè màu xanh
   dương mặc định (#3454d1) của Duralux. */
.auth-cover-card .btn-primary {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.auth-cover-card .btn-primary:hover,
.auth-cover-card .btn-primary:focus,
.auth-cover-card .btn-primary:active {
    background: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

/* ===== Bộ class nút/thẻ dùng CHUNG cho các trang đã nâng cấp tông xanh lá (2026-08-31) =====
   Ban đầu khai báo riêng lẻ trong <style> của từng trang (Sổ theo dõi, Giao việc mới) — gộp lên
   đây từ khi dùng tới trang thứ 3 (Báo cáo kiểm soát) để khỏi lặp code, mọi trang sau chỉ cần
   gắn thẳng các class này vào markup, không cần khai báo lại CSS. */
.st-filter-card {
    box-shadow: 0 1px 2px rgba(15, 64, 41, .06);
    border-color: var(--brand-soft-bg, #e6f4ec);
}
.st-btn-outline {
    background: #fff;
    border: 1.5px solid var(--brand-soft-bg, #e6f4ec);
    color: var(--brand-primary-dark, #1d7c3a);
    font-weight: 600;
}
/* theme.min.css có luật ".btn:hover:hover/.btn:focus:hover..." đặt color:#fff (0,3,0) cho MỌI
   .btn khi hover/focus — với 2 nút nền sáng này thì chữ trắng = biến mất. Ghi đè bằng !important
   (bản light-skin của luật đó KHÔNG !important) + tô nền xanh nhạt cho chữ nổi rõ hơn. Phủ luôn
   :focus/:active/:focus-visible vì theme cũng làm trắng ở các trạng thái đó. */
.st-btn-outline:hover,
.st-btn-outline:focus,
.st-btn-outline:focus-visible,
.st-btn-outline:active {
    background: var(--brand-soft-bg, #e6f4ec) !important;
    border-color: var(--brand-primary, #259d49) !important;
    color: var(--brand-primary-darker, #155b2a) !important;
}
.st-btn-ghost {
    background: var(--brand-soft-bg, #e6f4ec);
    border: 1px solid #d4ecdf;
    color: var(--brand-primary-dark, #1d7c3a);
    font-weight: 600;
}
.st-btn-ghost:hover,
.st-btn-ghost:focus,
.st-btn-ghost:focus-visible,
.st-btn-ghost:active {
    background: #cfe8d9 !important;
    border-color: var(--brand-primary, #259d49) !important;
    color: var(--brand-primary-darker, #155b2a) !important;
}
.st-btn-gradient {
    background: linear-gradient(135deg, var(--brand-primary-dark, #1d7c3a), var(--brand-primary, #259d49));
    border: none;
    color: #fff;
    box-shadow: 0 3px 10px rgba(37, 157, 73, .32);
}
.st-btn-gradient:hover {
    filter: brightness(1.06);
    color: #fff;
}
/* ".card-header.st-soft-header" (2 lớp) — khớp đúng độ ưu tiên với luật
   ".card .card-header{background-color:transparent}" có sẵn trong theme.min.css (cũng 2 lớp),
   nếu không luật đó thắng do cùng thứ tự nạp trước (bài học lặp lại nhiều lần trong dự án này). */
.card-header.st-soft-header {
    background: var(--brand-soft-bg, #e6f4ec);
    border-bottom-color: #d4ecdf;
}
/* Tiêu đề cột bảng nền xanh nhạt — dùng cho các bảng .table thường (không phải .resizable-table
   riêng của Sổ theo dõi), vd Báo cáo kiểm soát. */
.st-soft-table thead th {
    background: var(--brand-soft-bg, #e6f4ec);
    color: var(--brand-primary-darker, #155b2a);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: .72rem;
    border-bottom-color: #d4ecdf;
}

/* Minh hoạ cột phải trang đăng nhập (auth/login.blade.php) — nền gradient phủ kín toàn bộ cột,
   SVG vẽ tay chủ đề y tế/quản lý công việc (bảng việc, chữ thập, lịch, biểu đồ...) đặt tuyệt đối
   bên trên. */
.auth-illustration {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #eef7f1 0%, #dcefe4 100%);
}
.auth-illustration svg {
    position: absolute;
    inset: 0;
}
@keyframes auth-illustration-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.7; }
}
.auth-illustration-pulse {
    animation: auth-illustration-pulse 4s ease-in-out infinite;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

/* Link, tab, phân trang */
a:hover { color: var(--brand-primary-dark); }
.nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link.active,
.nav-tabs-wrapper .nav-tabs-custom-style .nav-item .nav-link.hover,
.customers-nav-tabs .nav-item .nav-link.active {
    color: var(--brand-primary) !important;
    border-bottom-color: var(--brand-primary) !important;
    background-color: var(--brand-soft-bg) !important;
}
.table-responsive .dataTables_paginate .page-link.active,
ul.pagination-common-style li a:hover,
.page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Ô chọn, công tắc bật/tắt */
.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), .15) !important;
}

/* Thanh điều hướng (sidebar) — thêm vạch nhấn xanh lá cho mục đang chọn */
.nxl-item.active > .nxl-link {
    box-shadow: inset 3px 0 0 var(--brand-primary);
}
.nxl-item.active > .nxl-link .nxl-micon i,
.nxl-navigation .navbar-content .nxl-item:hover > .nxl-link .nxl-micon i {
    color: var(--brand-primary) !important;
}

/* Thanh trên cùng (header) */
.nxl-header .header-wrapper .nxl-head-link:focus,
.nxl-header .header-wrapper .nxl-head-link:hover {
    color: var(--brand-primary) !important;
}

/* Thương hiệu trong sidebar */
.b-brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    flex-shrink: 0;
}
/* Hàng "cần sửa" chưa xem trong Sổ theo dõi — cùng cơ chế biến với .table-danger/.table-success
   của Bootstrap để hiển thị nhất quán (viền, hover...). */
.table-revision {
    --bs-table-color: #000;
    --bs-table-bg: #ffe8cc;
    --bs-table-border-color: #f0c896;
    --bs-table-striped-bg: #f5dfc0;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #f0c896;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #f2d6ac;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* .dropdown-item mặc định của Bootstrap có white-space:nowrap (dành cho menu ngắn) — nội
   dung thông báo dài cần xuống dòng bình thường, tránh tràn ra ngoài khung dropdown. */
.dropdown-item-wrap {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Popup thông báo góc phải màn hình (xem partials/toast-notifications.blade.php) */
.app-toast {
    box-sizing: border-box;
    max-width: 100%;
    pointer-events: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    overflow: hidden;
    animation: app-toast-in .25s ease;
}
.app-toast-hide { animation: app-toast-out .25s ease forwards; }
/* Popup kết quả thao tác (session flash: success/warning/error) — xem showFlashToast() */
.app-toast-success { border-left-color: #28a745; }
.app-toast-warning { border-left-color: #ffc107; }
.app-toast-error { border-left-color: #dc3545; }
.app-toast-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px 4px;
    font-size: 13px;
}
.app-toast-header strong {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.app-toast-close {
    flex-shrink: 0;
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: #98a6ad;
    cursor: pointer;
}
.app-toast-body {
    display: block;
    padding: 0 12px 12px;
    font-size: 12px;
    color: #6c757d;
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
}
.app-toast-body:hover { color: var(--brand-primary); }
@keyframes app-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes app-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(12px); }
}

.hover-shadow { transition: box-shadow .15s ease, transform .15s ease; }
.hover-shadow:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); transform: translateY(-2px); }

.b-brand .brand-text {
    color: var(--brand-primary-darker);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.15;
    white-space: nowrap;
}

/* Logo lockup (icon + chữ "TEDS", xem public/assets/images/logo-teds.png — đổi 2026-09-09, trước
   đó là logo-tms.png) thay cho icon tròn + chữ "Medapas" tách rời trước đây. .m-header (ô đầu
   sidebar, 220x80px) vẫn nền TRẮNG theo theme gốc (không đổi cùng phần điều hướng xanh đậm bên
   dưới) — ảnh nền trong suốt/không có viền nên không cần bọc thẻ riêng, chỉ cần phóng to cho vừa
   lấp ô 220x80 thay vì để nhỏ lọt thỏm giữa khoảng trắng. */
.brand-logo-card {
    display: block;
    width: 100%;
}
.brand-logo-card-img {
    display: block;
    width: 100%;
    max-width: 160px;
    height: auto;
}

/* Kéo giãn độ rộng cột trong Sổ theo dõi (xem tasks/index.blade.php).
   Bootstrap .table mặc định border-collapse: collapse — sticky trên th/td KHÔNG hoạt động
   đúng khi border bị collapse (lỗi hiển thị dòng tiêu đề chèn giữa các dòng dữ liệu), nên
   phải chuyển riêng bảng này sang border-collapse: separate. */
.resizable-table {
    border-collapse: separate;
    border-spacing: 0;
    /* Bootstrap mặc định --bs-table-bg: transparent — cột "đóng băng" cần nền ĐẶC (không
       trong suốt) để che nội dung các cột khác cuộn ngang bên dưới nó; đặt mặc định #fff ở
       đây, các dòng có highlight riêng (.table-danger…) tự ghi đè lại đúng màu của dòng đó
       vì --bs-table-bg khai báo ngay trên <tr> luôn thắng giá trị kế thừa từ bảng cha. */
    --bs-table-bg: #fff;
}

/* Dòng tiêu đề "dính" khi cuộn: .table-responsive có overflow-x:auto — theo đúng chuẩn CSS,
   hễ 1 trục có overflow khác "visible" thì trục còn lại cũng tự động thành "auto", nên bản
   thân khung .table-responsive (chứ không phải trang) mới là "vùng cuộn" thật sự — sticky
   theo top của TRANG sẽ không có tác dụng gì vì khung này không có chiều cao giới hạn để tự
   cuộn. Phải giới hạn chiều cao khung này rồi cho nó tự cuộn dọc thì sticky mới có ý nghĩa.
   Đây cũng là lý do "cuộn trang" đổi thành "cuộn trong khung bảng". */
.tasks-table-scroll {
    max-height: 65vh;
    overflow-y: auto;
}

/* Cuộn ngang bị "vô hình" trước khi có luật này — theme.min.css có luật scrollbar TOÀN CỤC
   (`::-webkit-scrollbar{width:5px;height:5px}` + thumb xám nhạt #e5e7eb trên nền trắng) áp cho
   MỌI khung cuộn kể cả khung bảng này. Với bảng nhiều cột, scroll ngang vẫn hoạt động đúng về
   mặt kỹ thuật (overflow-x:auto do Bootstrap .table-responsive) nhưng thanh cuộn ngang mảnh 5px
   màu nhạt gần như không thấy được ở cuối bảng, khiến người dùng tưởng không cuộn ngang được (chỉ
   biết cuộn dọc vì lăn chuột dọc luôn hoạt động, còn cuộn ngang bắt buộc phải THẤY thanh cuộn để
   kéo tay — không có bánh xe cuộn ngang trên chuột thường). Ghi đè riêng cho khung bảng Sổ theo
   dõi (áp cho cả bảng chính lẫn 2 khung Trưởng phòng, xem .st-mp-table-scroll ở
   tasks/_manager_panel.blade.php) — dày hơn (10px) + tông xanh thương hiệu để dễ nhận ra và dễ
   kéo bằng chuột. */
.tasks-table-scroll::-webkit-scrollbar,
.st-mp-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.tasks-table-scroll::-webkit-scrollbar-track,
.st-mp-table-scroll::-webkit-scrollbar-track {
    background-color: var(--brand-soft-bg, #e6f4ec);
}
.tasks-table-scroll::-webkit-scrollbar-thumb,
.st-mp-table-scroll::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary, #259d49);
    border-radius: 10px;
}
.tasks-table-scroll::-webkit-scrollbar-thumb:hover,
.st-mp-table-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary-dark, #1d7c3a);
}
/* Firefox không hỗ trợ ::-webkit-scrollbar-* — dùng cặp thuộc tính chuẩn riêng của Firefox. */
.tasks-table-scroll,
.st-mp-table-scroll {
    scrollbar-color: var(--brand-primary, #259d49) var(--brand-soft-bg, #e6f4ec);
}
/* Con trỏ "grab" báo hiệu kéo được để cuộn ngang (xem JS kéo-để-cuộn ở tasks/index.blade.php) —
   đổi thành "grabbing" trong lúc đang thực sự kéo, tắt bôi đen chữ để không chọn nhầm văn bản khi
   rê chuột qua các ô. */
.tasks-table-scroll,
.st-mp-table-scroll {
    cursor: grab;
}
.tasks-table-scroll.is-panning,
.st-mp-table-scroll.is-panning {
    cursor: grabbing;
    user-select: none;
}
/* "grab" kế thừa xuống cả link/nút/ô nhập bên trong nếu không chặn lại — trả về đúng con trỏ mặc
   định của từng loại để không gây hiểu lầm là kéo được ngay trên các phần tử vẫn bấm/gõ bình
   thường (JS cũng bỏ qua các phần tử này khi bắt đầu kéo, xem closest('a, button, input, ...')). */
.tasks-table-scroll a, .tasks-table-scroll button, .tasks-table-scroll input, .tasks-table-scroll select,
.st-mp-table-scroll a, .st-mp-table-scroll button, .st-mp-table-scroll input, .st-mp-table-scroll select {
    cursor: auto;
}
.tasks-table-scroll a, .st-mp-table-scroll a { cursor: pointer; }
.resizable-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
    text-align: center;
}
.resizable-table .col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 1;
}
.resizable-table .col-resize-handle:hover,
.resizable-table .col-resize-handle.resizing {
    background: rgba(0, 0, 0, .15);
}
/* Tay cầm kéo giãn cột chỉ dùng được bằng chuột (mousedown/mousemove) — trên cảm ứng vừa
   không kéo được vừa dễ vướng khi chạm gần mép cột (link sắp xếp, ô tìm kiếm...), nên ẩn hẳn
   trên thiết bị cảm ứng/màn hình nhỏ thay vì để 1 nút "chết". */
@media (max-width: 768px) {
    .resizable-table .col-resize-handle {
        display: none;
    }
}

/* Mọi cột: khi kéo hẹp lại, nội dung tự thu gọn/ẩn bớt (dấu "…") theo đúng độ rộng cột thay
   vì tràn ra ngoài — riêng cột "Công việc" vẫn tự xuống dòng (đã yêu cầu riêng) vì đây là nội
   dung chính cần đọc đầy đủ, không nên bị cắt bớt. */
.resizable-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.resizable-table td.col-task-title {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}
.resizable-table th.col-task-title {
    width: 180px;
}
/* STT, Xem, Mã chỉ chứa nội dung ngắn (số thứ tự / 1 icon / mã việc) — thu hẹp vừa đủ chữ, căn
   giữa cả tiêu đề lẫn nội dung. Trên desktop vẫn giữ min-width để trình duyệt không bóp gần
   bằng 0 khi bảng không đủ chỗ (dưới table-layout:auto, trước khi JS khoá table-layout:fixed —
   xem tasks/index.blade.php). */
.resizable-table th:nth-child(1),
.resizable-table td:nth-child(1) {
    width: 70px;
    min-width: 46px;
}
.resizable-table th:nth-child(2),
.resizable-table td:nth-child(2) {
    width: 60px;
    min-width: 46px;
}
.resizable-table th:nth-child(3),
.resizable-table td:nth-child(3) {
    width: 130px;
    min-width: 100px;
    text-align: center;
}
/* Ưu tiên, Hạn — cũng chỉ chứa nội dung ngắn, thu hẹp vừa đủ chữ. */
.resizable-table th:nth-child(8),
.resizable-table td:nth-child(8),
.resizable-table th:nth-child(9),
.resizable-table td:nth-child(9) {
    width: 110px;
    min-width: 85px;
}
/* Trên mobile, ẩn hẳn 2 cột STT và Xem để đỡ chật chỗ cho các cột quan trọng hơn (Mã, Công
   việc…) — bấm vào Mã công việc đã mở được trang chi tiết, trùng chức năng với nút Xem nên
   không mất thao tác nào cả. */
@media (max-width: 768px) {
    .resizable-table th:nth-child(1),
    .resizable-table td:nth-child(1),
    .resizable-table th:nth-child(2),
    .resizable-table td:nth-child(2) {
        display: none;
    }
}

/* Cố định (đóng băng) 4 cột STT, Xem, Mã, Công việc khi cuộn ngang — offset "left" do JS tính
   lại theo độ rộng thực tế từng cột (xem tasks/index.blade.php). */
.resizable-table td.col-frozen {
    position: sticky;
    z-index: 5;
}
.resizable-table th.col-frozen {
    z-index: 12;
}
.resizable-table th:nth-child(4).col-frozen,
.resizable-table td:nth-child(4).col-frozen {
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .2);
}

/* Gỡ cố định 4 cột STT/Xem/Mã/Công việc — CHỈ trên mobile (offset "left" do JS gán bằng inline
   style nên phải !important mới ghi đè được). "left: auto" khiến các ô này không còn dính
   ngang, nhưng dòng tiêu đề (th) vẫn còn "top: 0" từ luật .resizable-table th phía trên nên
   vẫn dính dọc khi cuộn — chỉ mất phần dính ngang, đúng ý muốn. Từ md trở lên vẫn cố định
   như cũ. */
@media (max-width: 768px) {
    .resizable-table th.col-frozen,
    .resizable-table td.col-frozen {
        left: auto !important;
    }
    .resizable-table th:nth-child(4).col-frozen,
    .resizable-table td:nth-child(4).col-frozen {
        box-shadow: none;
    }
}

/* Đường phân cách giữa MỌI cột — kẻ 1 đường mảnh bên phải mỗi ô để dễ nhìn ranh giới cột
   khi bảng đã có nhiều cột và cho kéo giãn độ rộng. */
.resizable-table th,
.resizable-table td {
    border-right: 1px solid var(--bs-border-color, #dee2e6);
}
.resizable-table th:last-child,
.resizable-table td:last-child {
    border-right: none;
}

/* =====================================================================================
   Bảng điều khiển (dashboard.blade.php)
   ===================================================================================== */
/* Lưới đều nhau ở MỌI kích thước màn hình — luôn xếp đúng thứ tự trái→phải, trên→dưới theo
   đúng mảng khai báo trong Blade (Tổng, Mới giao, Đang làm, Chờ N.Thu, Hoàn thành, Đã hủy, Trễ
   hạn). Trước đây dùng flex-wrap tự do (mỗi ô rộng theo nội dung) khiến các ô ngắn/dài xen kẽ
   trông như lệch thứ tự dù DOM vẫn đúng — auto-fit/minmax cho mỗi ô rộng bằng nhau, tự động thu
   gọn số cột theo bề rộng màn hình mà không cần viết riêng luật cho từng breakpoint. */
.dashboard-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}
.dashboard-stat-row .dashboard-stat-link {
    width: 100%;
}
.dashboard-stat-row .card-body {
    padding: 4px 4px !important;
}
.dashboard-stat-row .fs-5 {
    line-height: 1.2;
}
.dashboard-stat-row .fs-11 {
    line-height: 1.2;
}

/* Mặc định (desktop/tablet): hiện nhãn ĐẦY ĐỦ, ẩn nhãn rút gọn — thiếu luật nền này khiến cả 2
   span cùng hiện song song (lỗi "Tổng công việc Tổng", "Mới giao Mới giao"...) vì <span> vốn
   dĩ display:inline sẵn, chỉ có luật bên trong @media mobile bên dưới nói phải ẩn/hiện cái nào. */
.dashboard-stat-label-full { display: inline; }
.dashboard-stat-label-short { display: none; }

/* Báo cáo kiểm soát tháng (report/index.blade.php, report/daily.blade.php) — 5 ô thống kê
   (Việc trong kỳ/Hoàn thành/Đúng hạn/Trễ hạn/Tỷ lệ đúng hạn) cùng dạng thẻ như dashboard-stat-row
   nhưng thấp hơn, giảm đệm trên/dưới để cột không cao quá mức cần thiết. Ghi đè biến gutter của
   Bootstrap (row g-2 mặc định .5rem = 8px) xuống 2px để các ô nằm sát nhau như yêu cầu. */
.report-stat-row {
    --bs-gutter-x: 2px;
    --bs-gutter-y: 2px;
}
.report-stat-row .card-body {
    padding: 4px 4px !important;
}
.report-stat-row .fs-5 {
    line-height: 1.2;
}
.report-stat-row .fs-11 {
    line-height: 1.2;
}

/* Tiêu đề "Việc cần theo dõi"/"Vừa hoàn thành" — phóng to chữ, đậm hơn cho nổi bật. */
.dashboard-panel-title {
    font-size: 17px;
    font-weight: 700;
}

/* Tiêu đề khung "Việc Phải Làm"/"Việc Giao Đi" (Sổ theo dõi tiến độ, Trưởng phòng) — theme đặt
   --bs-card-cap-padding-y: 25px cho MỌI .card-header trong app, khiến 2 khung này cao quá mức
   cần thiết. Giảm riêng ở đây (không đổi biến toàn cục) để không ảnh hưởng các card khác. */
.st-manager-panel-header {
    padding-top: 8px;
    padding-bottom: 8px;
}
/* Cả dòng tiêu đề bấm được để thu gọn/mở rộng khung (không chỉ mũi tên cuối dòng) — xem JS
   trong tasks/index.blade.php. */
.st-manager-panel-header.st-panel-collapse-btn {
    cursor: pointer;
    user-select: none;
}

/* Dòng trong bảng ở Bảng điều khiển — thu hẹp vừa đủ hiển thị chữ, áp dụng MỌI kích thước màn
   hình (không riêng mobile — xem thêm luật riêng mobile bên dưới, nới thêm 1 chút nữa). */
.dashboard-table th,
.dashboard-table td {
    padding-top: .25rem;
    padding-bottom: .25rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    /* Mobile: đảo lại — ẩn nhãn đầy đủ, hiện nhãn rút gọn cho vài ô thống kê dài (Tổng công
       việc → Tổng, Chờ nghiệm thu → Chờ N.Thu) — ô nào không khai báo "short" thì short = full
       nên không đổi gì cả. */
    .dashboard-stat-label-full { display: none; }
    .dashboard-stat-label-short { display: inline; }

    .dashboard-stat-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .dashboard-stat-row .card-body {
        padding: 6px 2px !important;
    }
    .dashboard-stat-row .fs-5 {
        font-size: 1rem !important;
    }
    .dashboard-stat-row .fs-11 {
        font-size: 10px !important;
    }

    /* Các bảng trên Bảng điều khiển (việc bị hủy/cần nghiệm thu/cần duyệt/cần theo dõi/vừa hoàn
       thành) — tinh gọn dòng để hiện được nhiều dòng hơn trên 1 màn hình, tránh dòng quá cao. */
    .dashboard-table th,
    .dashboard-table td {
        padding: 4px 6px !important;
        font-size: 11.5px !important;
        line-height: 1.3;
    }
    .dashboard-table .btn-sm {
        padding: 2px 6px;
        font-size: 10.5px;
    }
    .dashboard-table .badge {
        font-size: 9.5px;
        padding: 3px 5px;
    }
}

/* Tinh gọn dòng ở TẤT CẢ các bảng trong nội dung app (không chỉ Bảng điều khiển) — chỉ giữ đủ
   khoảng đệm để đọc được, giảm chiều cao dòng thừa để hiện được nhiều dòng hơn trên 1 màn hình,
   mọi kích thước màn hình (không riêng mobile như .dashboard-table ở trên). */
.st-view .table td,
.st-view .table th {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
/* Cột "Mã" ở Sổ theo dõi — đệm nhỏ hơn mặt bằng chung của bảng (selector cụ thể hơn nên thắng
   luật đệm chung phía trên). */
.st-view .resizable-table th:nth-child(3),
.st-view .resizable-table td:nth-child(3) {
    padding: 6px;
}
.st-view .card-body {
    padding: 1rem;
}
.st-view .row.g-3 {
    --bs-gutter-y: .75rem;
}

/* =====================================================================================
   Sổ theo dõi — khung lọc (tasks/index.blade.php, #taskFilterForm) — thu nhỏ ô tìm kiếm/lọc ở
   MỌI kích thước màn hình, không riêng mobile (khác các luật mobile-only bên dưới).
   ===================================================================================== */
#taskFilterForm .st-search,
#taskFilterForm .form-select {
    max-width: 170px;
}
#taskFilterForm .form-control,
#taskFilterForm .form-select,
#taskFilterForm .btn {
    padding-top: .375rem;
    padding-bottom: .375rem;
    font-size: 13px;
    line-height: 1.5;
}

/* Việc thường ngày — khung lọc (tasks/_daily_index.blade.php, #dailyFilterForm) — thu nhỏ 2 ô
   lọc Trạng thái/Người giao, cùng cỡ với #taskFilterForm ở tab "Việc theo kế hoạch". */
#dailyFilterForm .form-select {
    max-width: 170px;
    width: auto;
}
#dailyFilterForm input[type="date"] {
    max-width: 148px;
}

/* =====================================================================================
   Mobile: Sổ theo dõi — tab "Việc theo kế hoạch" (tasks/index.blade.php, #taskFilterForm)
   ===================================================================================== */
@media (max-width: 768px) {
    #taskFilterForm .form-control,
    #taskFilterForm .form-select {
        font-size: 12.5px;
        padding: 4px 8px;
        height: auto;
    }
    #taskFilterForm .btn {
        font-size: 12px;
        padding: 4px 10px;
    }
    #taskFilterForm .col-auto {
        margin-bottom: 4px;
    }
}

/* =====================================================================================
   Mobile: Giao việc thường ngày (tasks/daily/create.blade.php)
   ===================================================================================== */
@media (max-width: 768px) {
    .daily-desc-alert {
        font-size: 12px !important;
        padding: 8px 10px;
    }

    /* Bảng từng dòng việc (tên/nội dung/giờ bắt đầu/giờ kết thúc) chật trên màn hình hẹp — xếp
       mỗi dòng thành 1 khối dọc thay vì 5 cột ngang, kèm nhãn (data-label) trước mỗi ô cho rõ. */
    .daily-task-table thead {
        display: none;
    }
    .daily-task-table,
    .daily-task-table tbody,
    .daily-task-table tr,
    .daily-task-table td {
        display: block;
        width: 100%;
    }
    .daily-task-table tr {
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 8px;
    }
    .daily-task-table td {
        border: none;
        padding: 3px 0;
    }
    .daily-task-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        color: #98a6ad;
        margin-bottom: 2px;
    }
    .daily-task-table td:last-child {
        text-align: right;
        padding-top: 4px;
    }
    .daily-task-table .form-control-sm {
        font-size: 13px;
    }
}

/* =====================================================================================
   Mobile: Báo cáo kiểm soát + KPI & Năng suất — bộ lọc dùng chung (report-filter-form)
   ===================================================================================== */
@media (max-width: 768px) {
    .report-filter-form.row {
        row-gap: 6px;
    }
    .report-filter-form .form-control,
    .report-filter-form .form-select {
        font-size: 12.5px;
        padding: 4px 8px;
        height: auto;
    }
    .report-filter-form .btn {
        font-size: 12px;
        padding: 4px 10px;
    }
    .report-filter-form label {
        font-size: 12px;
    }
    .report-filter-form .col-auto {
        margin-bottom: 2px;
    }

    /* Khoảng cách giữa các khối xếp chồng trên mobile (tabs → thẻ lọc → hàng thống kê → bảng
       theo phòng ban) — mb-3 mặc định (1rem = 16px) tạo khoảng trống quá cao khi màn hình hẹp,
       thu xuống còn 8px cho gọn hơn nhưng vẫn tách bạch được từng khối. Riêng khối hàng thống kê
       (report-stat-row) thu sát xuống 2px như giữa các hàng thẻ bên trong nó. */
    .report-page .nav-tabs.mb-3,
    .report-page .card.mb-3 {
        margin-bottom: 8px !important;
    }
    .report-page .report-stat-row.mb-3 {
        margin-bottom: 2px !important;
    }
}

/* Bộ chọn giờ "cuộn giờ:phút" 24h (xem assets/js/time-wheel-picker.js) — thay cho ô giờ mặc
   định của trình duyệt trên toàn bộ input[type=time]. Input gốc vẫn còn trong DOM để giữ
   name/value/required hoạt động đúng, chỉ ẩn khỏi mắt bằng opacity (không display:none, vì
   display:none loại phần tử khỏi kiểm tra "required" của trình duyệt). */
.time-wheel-field {
    position: relative;
    display: inline-block;
    width: 100%;
}
.time-wheel-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.time-wheel-trigger {
    width: 100%;
    text-align: left;
    background: #fff;
}
.time-wheel-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1060;
    width: 176px;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    padding: 8px;
}
.time-wheel-cols {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 160px;
    position: relative;
}
.time-wheel-col {
    width: 60px;
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    text-align: center;
    scrollbar-width: none;
}
.time-wheel-col::-webkit-scrollbar {
    display: none;
}
.time-wheel-spacer {
    height: 64px;
    flex-shrink: 0;
}
.time-wheel-item {
    height: 32px;
    line-height: 32px;
    scroll-snap-align: center;
    font-size: 15px;
    color: #98a6ad;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.time-wheel-item.is-selected {
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 17px;
}
.time-wheel-colon {
    width: 14px;
    line-height: 160px;
    font-weight: 700;
    color: #98a6ad;
    flex-shrink: 0;
}
.time-wheel-selection-line {
    position: absolute;
    top: 64px;
    left: 4px;
    right: 4px;
    height: 32px;
    border-top: 1px solid var(--brand-primary);
    border-bottom: 1px solid var(--brand-primary);
    pointer-events: none;
}
.time-wheel-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* =====================================================================================
   Sổ theo dõi — bảng màu/kiểu riêng tham khảo bản thiết kế do người dùng cung cấp. CHỈ áp dụng
   trong phạm vi .st-view (bọc quanh nội dung 2 trang tasks/index.blade.php và
   tasks/_daily_index.blade.php) — không đụng tới màu sắc/kiểu dáng của phần còn lại trong app
   (Dashboard, Báo cáo, KPI, trang chi tiết việc...) dù có dùng chung 1 số class Bootstrap như
   .badge/.bg-soft-*, vì các trang đó không nằm trong .st-view nên không bị ảnh hưởng.
   ===================================================================================== */
.st-view {
    --st-ink: #1f2a24;
    --st-ink-soft: #5b6b62;
    --st-ink-faint: #8a9690;
    --st-line: #e4e2d8;
    --st-paper: #faf9f3;
    --st-brand: #1f7a4d;
    --st-brand-dark: #155c39;
    --st-brand-light: #e6f4ec;
    --st-amber: #c98a1c;
    --st-amber-light: #fbf0dc;
    --st-red: #c0392f;
    --st-red-light: #fbe6e3;
    --st-teal: #1c8f8f;
    --st-teal-light: #e2f5f5;
    --st-gray-light: #f0efe6;
    --st-radius: 10px;
}

/* Khung/thẻ */
.st-view .card {
    border-color: var(--st-line);
    border-radius: var(--st-radius);
}
.st-view .nav-tabs {
    border-bottom-color: var(--st-line);
}
.st-view .nav-tabs .nav-link {
    color: var(--st-ink-soft);
    font-size: 13.5px;
}
.st-view .nav-tabs .nav-link.active {
    color: var(--st-brand-dark);
    border-bottom-color: var(--st-brand);
    font-weight: 600;
}

/* Ô tìm kiếm có icon lồng bên trong */
.st-view .st-search {
    position: relative;
}
.st-view .st-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--st-ink-faint);
    font-size: 14px;
    pointer-events: none;
}
.st-view .st-search input {
    padding-left: 30px;
}

/* Ô chọn/nhập dùng chung — nền giấy ấm, viền mảnh, bo góc */
.st-view .form-select,
.st-view .form-control {
    background: var(--st-paper);
    border-color: var(--st-line);
    color: var(--st-ink);
    border-radius: 8px;
}
.st-view .form-select:focus,
.st-view .form-control:focus {
    border-color: var(--st-brand);
    box-shadow: 0 0 0 .2rem rgba(31, 122, 77, .12);
}

/* Nút bo góc đều theo phong cách thiết kế tham khảo */
.st-view .btn {
    border-radius: 8px;
}

/* Bảng chính (Sổ theo dõi — việc theo kế hoạch): tiêu đề in hoa nhạt màu, dòng hover ấm, dòng
   quá hạn tint đỏ nhạt — không đụng tới sticky/position/z-index đã có sẵn ở .resizable-table,
   chỉ thêm màu sắc/kiểu chữ. */
.st-view .resizable-table thead th {
    background: var(--st-paper);
    color: var(--st-ink-faint);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    font-size: 13px;
    border-color: var(--st-line);
}
.st-view .resizable-table tbody td {
    border-color: var(--st-line);
    vertical-align: middle;
    padding-top: .45rem;
    padding-bottom: .45rem;
}
/* Ô lọc theo từng cột (dòng "Tìm…" ngay dưới tiêu đề cột) — thu hẹp vừa đủ hiển thị chữ. */
.st-view .resizable-table .col-search-row th {
    padding-top: 4px;
    padding-bottom: 4px;
}
.st-view .resizable-table .col-search-input {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    height: auto;
}
.st-view .resizable-table tbody tr:hover {
    background: var(--st-paper);
}
.st-view .resizable-table tbody tr.table-danger,
.st-view .resizable-table tbody tr.table-danger:hover {
    --bs-table-bg: var(--st-red-light);
}
.st-view .resizable-table tbody tr.table-info,
.st-view .resizable-table tbody tr.table-info:hover {
    --bs-table-bg: var(--st-teal-light);
}
.st-view .resizable-table tbody tr.table-success,
.st-view .resizable-table tbody tr.table-success:hover {
    --bs-table-bg: var(--st-brand-light);
}

/* Pill (huy hiệu) bo tròn đều — dùng cho trạng thái/ưu tiên/hạn chót ở cả 2 view */
.st-view .badge {
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 500;
    font-size: 11px;
}
.st-view .bg-soft-info { background: var(--st-teal-light) !important; }
.st-view .text-info { color: var(--st-teal) !important; }
.st-view .bg-soft-primary { background: var(--st-brand-light) !important; }
.st-view .text-primary { color: var(--st-brand-dark) !important; }
.st-view .bg-soft-warning { background: var(--st-amber-light) !important; }
.st-view .text-warning { color: var(--st-amber) !important; }
.st-view .bg-soft-danger { background: var(--st-red-light) !important; }
.st-view .text-danger { color: var(--st-red) !important; }
.st-view .bg-soft-secondary { background: var(--st-gray-light) !important; }
.st-view .text-secondary { color: var(--st-ink-soft) !important; }
.st-view .bg-soft-success { background: var(--st-brand-light) !important; }
.st-view .text-success { color: var(--st-brand-dark) !important; }

/* Pill ưu tiên/hạn chót riêng — không dùng chung màu với trạng thái để phân biệt rõ 2 khái niệm
   khác nhau (Cao = đỏ, Trung bình = xanh ngọc, Thấp = xám, Hôm nay = hổ phách). */
.st-view .st-pill-red { background: var(--st-red-light); color: var(--st-red); }
.st-view .st-pill-teal { background: var(--st-teal-light); color: var(--st-teal); }
.st-view .st-pill-gray { background: var(--st-gray-light); color: var(--st-ink-soft); }
.st-view .st-pill-amber { background: var(--st-amber-light); color: var(--st-amber); }

/* Avatar tròn chữ cái đầu tên — người giao/người thực hiện */
.st-view .st-people-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.6;
    white-space: nowrap;
}
.st-view .st-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ece9fa;
    color: #6a5acd;
    font-size: 9.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.st-view .st-avatar-lg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ece9fa;
    color: #6a5acd;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Nút "Xem" (mắt) dạng icon tròn thay vì link phẳng — nút ẩn/hiện việc con (thẻ <button>) cũng
   dùng chung class này để đồng bộ hình dáng, nên phải tự reset viền/nền mặc định của <button>
   (thẻ <a> không cần vì trình duyệt không tự thêm viền/nền cho <a>). */
.st-view .st-eye {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--st-brand-dark);
    background: var(--st-brand-light);
    padding: 0;
    cursor: pointer;
}
.st-view .st-code-link {
    font-weight: 600;
    color: var(--st-ink);
}
/* "Ô" rộng cố định chứa icon ẩn/hiện việc con (trước Mã) và dấu chấm nhắc nhở (sau Mã) — luôn
   chiếm đúng chỗ này dù nội dung bên trong có hiện hay không (xem tasks/_row.blade.php), để
   chữ Mã luôn bắt đầu ở cùng 1 vị trí giữa các dòng, không bị lệch theo từng dòng. */
.st-view .st-code-icon-slot {
    display: inline-flex;
    width: 30px;
    justify-content: center;
    vertical-align: middle;
}
.st-view .st-code-dot-slot {
    display: inline-flex;
    width: 10px;
    justify-content: center;
    vertical-align: middle;
}
.st-view .st-dot-new {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--st-red);
    margin-left: 0;
}

/* Thanh tiến độ mini trong bảng (Sổ theo dõi — tasks/_row.blade.php) — dùng tông xanh lá thương
   hiệu hiện hành (--brand-*) thay vì --st-brand cũ (2026-08-31, đồng bộ tông đã áp cho Trạm điều
   hành), không phải --st-line/--st-brand gốc của hệ palette "giấy ấm" cũ. */
.st-view .st-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}
.st-view .st-progress-track {
    flex: 1;
    width: 56px;
    height: 6px;
    border-radius: 99px;
    background: var(--brand-soft-bg, #e6f4ec);
    overflow: hidden;
}
.st-view .st-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand-primary-dark, #1d7c3a), var(--brand-primary, #259d49));
}
.st-view .st-progress-fill.is-zero {
    background: #d8dfda;
}
.st-view .st-progress-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--st-ink-soft);
    font-variant-numeric: tabular-nums;
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}

/* Điểm chất lượng */
.st-view .st-score {
    font-weight: 600;
    color: var(--st-brand-dark);
}
.st-view .st-score.is-empty {
    color: var(--st-ink-faint);
    font-weight: 400;
}

/* Chân bảng/phân trang */
.st-view .page-link {
    color: var(--st-ink-soft);
    border-color: var(--st-line);
}
.st-view .page-item.active .page-link {
    background: var(--st-brand-dark);
    border-color: var(--st-brand-dark);
}

/* ---- Dải chọn ngày + lịch mini dùng chung (tasks/_daily_nav.blade.php) — cả trang "Việc thường
   ngày" (Sổ theo dõi) lẫn tab "Việc hằng ngày" ở Bảng điều khiển đều include chung 1 partial. ---- */
.st-view .st-daily-nav {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.st-view .st-day-strip {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 280px;
}
.st-view .st-day-chip {
    flex: 1;
    min-width: 64px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    padding: 5px 4px;
    text-align: center;
    text-decoration: none;
    display: block;
}
/* Thứ và ngày nằm chung 1 dòng ("T3 18") thay vì mỗi thứ 1 dòng riêng — inline-block để 2 span
   xếp cạnh nhau, khoảng trắng giữa chúng lấy từ khoảng trắng có sẵn trong HTML (xuống dòng giữa
   2 thẻ span được trình duyệt gộp thành 1 dấu cách khi ở chế độ inline). */
.st-view .st-day-chip .st-day-dow {
    display: inline-block;
    font-size: 10.5px;
    color: var(--st-ink-soft);
    text-transform: uppercase;
    vertical-align: middle;
}
.st-view .st-day-chip .st-day-dom {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-left: 4px;
    color: var(--st-ink);
    vertical-align: middle;
}
.st-view .st-day-chip .st-day-cnt {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    color: var(--st-ink-faint);
}
.st-view .st-day-chip .st-day-cnt b {
    color: var(--st-brand-dark);
}
.st-view .st-day-chip.is-today {
    border-color: var(--st-brand);
}
.st-view .st-day-chip.is-selected {
    background: var(--st-brand-dark);
    border-color: var(--st-brand-dark);
}
.st-view .st-day-chip.is-selected .st-day-dow,
.st-view .st-day-chip.is-selected .st-day-dom,
.st-view .st-day-chip.is-selected .st-day-cnt,
.st-view .st-day-chip.is-selected .st-day-cnt b {
    color: #fff;
}
.st-view .st-day-chip.has-late:not(.is-selected) {
    border-color: var(--st-red);
}
.st-view .st-day-chip.has-late:not(.is-selected) .st-day-cnt b {
    color: var(--st-red);
}
@media (max-width: 576px) {
    .st-view .st-day-strip {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .st-view .st-day-chip {
        flex: 0 0 64px;
    }
}

.st-view .st-mini-cal-wrap {
    position: relative;
    flex-shrink: 0;
}
.st-view .st-mini-cal-toggle {
    white-space: nowrap;
}
/* Bảng lịch mini ẩn mặc định — bấm nút mới hiện (JS toggle class .is-open), tránh chiếm chỗ
   thường trực phía trên bảng công việc theo nhân viên bên dưới. */
.st-view .st-mini-cal {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 14px;
    width: 260px;
}
.st-view .st-mini-cal.is-open {
    display: block;
}
/* Màn hình hẹp (điện thoại) — neo theo "right: 0" của nút bấm dễ bị tràn ra ngoài mép trái màn
   hình (nút nằm gần mép trái, bảng lịch rộng 260px kéo dài quá khỏi viewport). Chuyển sang định
   vị cố định, luôn hiện giữa màn hình bất kể nút bấm nằm đâu. */
@media (max-width: 576px) {
    .st-view .st-mini-cal {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(300px, calc(100vw - 32px));
        max-height: 80vh;
        overflow-y: auto;
        z-index: 1050;
    }
}
.st-view .st-mini-cal-head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}
.st-view .st-mini-cal-head b {
    flex: 1;
    text-align: center;
}
.st-view .st-mini-cal-nav {
    color: var(--st-ink-soft);
    padding: 2px 6px;
    text-decoration: none;
}
.st-view .st-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
    font-size: 11px;
}
.st-view .st-mini-dow {
    color: var(--st-ink-faint);
    padding-bottom: 4px;
}
.st-view .st-mini-day {
    display: block;
    padding: 6px 0;
    border-radius: 6px;
    color: var(--st-ink);
    text-decoration: none;
    position: relative;
}
.st-view .st-mini-day.is-muted {
    color: var(--st-ink-faint);
}
.st-view .st-mini-day.is-today {
    background: var(--st-brand-light);
    color: var(--st-brand-dark);
    font-weight: 600;
}
.st-view .st-mini-day.is-selected {
    background: var(--st-brand-dark);
    color: #fff;
    font-weight: 600;
}
.st-view .st-mini-day.has-dot::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--st-amber);
}
.st-view .st-mini-day.is-selected.has-dot::after {
    background: #fff;
}

/* ---- Bảng điều khiển — chuyển đổi "Bảng điều khiển" / "Việc hằng ngày" (dashboard.blade.php)
   ---- Cả 2 khối nội dung đều render sẵn cùng lúc, JS chỉ ẩn/hiện (.d-none) để chuyển tức thì,
   không tải lại trang — chỉ khi đổi NGÀY (qua dải chọn ngày/lịch mini) mới thực sự tải lại. */
.st-view .view-switch {
    display: flex;
    gap: 6px;
    background: var(--st-paper);
    padding: 4px;
    border-radius: 10px;
    width: fit-content;
    /* max-width + overflow-x: fit-content không tự co theo khung cha — nếu số nút (vd Trạm điều
       hành có 3 nút, dài hơn 2 nút của Bảng điều khiển) khiến hàng rộng hơn khung chứa, PHẢI tự
       cuộn ngang trong chính nó, không được để tràn ra ngoài kéo cả trang bị cuộn ngang theo. */
    max-width: 100%;
    overflow-x: auto;
}
.st-view .view-switch button {
    border: none;
    background: transparent;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--st-ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    white-space: nowrap;
    transition: background-color .12s, color .12s;
}
/* Tab đang chọn (2026-09-06, theo yêu cầu "nổi bật + highlight xanh lá") — trước đây chỉ nền
   trắng + chữ xanh đậm (rất nhẹ, dễ lướt qua trên nền --st-paper cũng gần trắng). Đổi hẳn sang
   TÔ NỀN xanh lá thương hiệu (--st-brand, cùng màu chủ đạo dùng khắp .st-view) + chữ trắng, tương
   phản rõ để nhận ra ngay đang ở tab nào trong 4 tab của Trạm điều hành. */
.st-view .view-switch button.active {
    background: var(--st-brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(31, 122, 77, .35);
}
.st-view .view-switch button:hover:not(.active) {
    background: rgba(31, 122, 77, .08);
    color: var(--st-brand-dark);
}

.st-view .st-daily-dash-body {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}
@media (max-width: 991.98px) {
    .st-view .st-daily-dash-body {
        grid-template-columns: 1fr;
    }
}
.st-view .st-daily-dash-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.st-view .st-daily-dash-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.st-view .st-task-row {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.st-view .st-task-row.is-overdue {
    border-color: #f0c9c4;
    background: var(--st-red-light);
}
.st-view .st-task-chk {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--st-line);
    margin-top: 2px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
}
.st-view .st-task-chk.is-done {
    background: var(--st-brand);
    border-color: var(--st-brand);
}
.st-view .st-task-chk.is-done::after {
    content: "✓";
    line-height: 1;
}
.st-view .st-task-main {
    flex: 1;
    min-width: 0;
}
.st-view .st-task-title {
    font-size: 13.5px;
    font-weight: 500;
}
.st-view .st-task-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--st-ink-soft);
    flex-wrap: wrap;
}
.st-view .st-task-meta i {
    font-size: 13px;
    margin-right: 3px;
}
.st-view .st-load-more {
    border: 1px dashed var(--st-line);
    background: transparent;
    color: var(--st-ink-soft);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    font-size: 12.5px;
    cursor: pointer;
    width: 100%;
}
.st-view .st-daily-dash-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.st-view .st-quick-panel {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    padding: 14px;
}
.st-view .st-quick-panel h3 {
    font-size: 13px;
    margin: 0 0 10px;
}
.st-view .st-qp-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    padding: 6px 0;
    border-bottom: 1px solid var(--st-line);
}
.st-view .st-qp-row:last-child {
    border-bottom: none;
}
.st-view .st-qp-row span:first-child {
    color: var(--st-ink-soft);
}
.st-view .st-qp-row b {
    color: var(--st-brand-dark);
}
.st-view .st-qp-row b.is-red {
    color: var(--st-red);
}

/* Nhóm việc theo nhân viên trong tab "Việc hằng ngày" (Bảng điều khiển) — tái dùng
   .st-person-group/.st-person-head/.st-person-toggle của trang "Việc thường ngày" nhưng bên
   trong là danh sách thẻ việc (.st-task-row) thay vì bảng, nên cần layout riêng + bỏ viền dưới
   liền mạch (border-bottom) vốn chỉ hợp khi nằm chung 1 card lớn như bên trang kia. Selector có
   #view-daily (ID) để thắng đặc trưng .st-view .st-person-group ở trang kia mà không cần
   !important. */
#view-daily .st-person-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: none;
}
#view-daily .st-person-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#view-daily .st-person-head {
    padding: 0;
}

.st-view .st-daily-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--st-line);
    flex-wrap: wrap;
}
.st-view .st-daily-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.st-view .st-sum-chip {
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--st-paper);
    border: 1px solid var(--st-line);
    color: var(--st-ink-soft);
    white-space: nowrap;
    flex-shrink: 0;
}
.st-view .st-sum-chip b {
    color: var(--st-ink);
}
.st-view .st-sum-chip.is-conflict {
    background: var(--st-amber-light);
    border-color: transparent;
    color: var(--st-amber);
}
.st-view .st-sum-chip.is-conflict b {
    color: var(--st-amber);
}
.st-view .btn-daily-assign {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.st-view .btn-daily-assign:hover,
.st-view .btn-daily-assign:focus {
    color: #fff;
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.st-view .st-person-group {
    border-bottom: 1px solid var(--st-line);
}
.st-view .st-person-group:last-child {
    border-bottom: none;
}
.st-view .st-person-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
}
.st-view .st-person-head b {
    font-size: 13.5px;
    font-weight: 700;
}
.st-view .st-subcount {
    font-size: 11.5px;
    color: var(--st-ink-faint);
}
/* Bấm vào tên nhân viên (cả khối .st-person-head) để ẩn/hiện bảng việc của người đó — mũi tên
   bên phải xoay hướng theo trạng thái đang mở/đóng (xem JS trong tasks/_daily_index.blade.php). */
.st-view .st-person-toggle {
    cursor: pointer;
    user-select: none;
}
.st-view .st-person-toggle-icon {
    color: var(--st-ink-faint);
    font-size: 16px;
}

/* Mỗi nhân viên có 1 bảng <table> riêng, nên nếu để trình duyệt tự đo cột theo nội dung thì độ
   rộng từng cột sẽ khác nhau giữa các bảng (tên việc dài/ngắn khác nhau...) khiến các cột không
   thẳng hàng với nhau khi nhìn từ trên xuống. Ép "table-layout: fixed" + khai báo cứng độ rộng
   từng cột (GIỐNG NHAU ở mọi bảng) để cột nào cũng bắt đầu/kết thúc đúng 1 vị trí xuyên suốt các
   nhóm nhân viên. Không đặt width:100% cho bảng — để bảng co lại đúng bằng tổng độ rộng các cột
   (kể cả "Tên công việc" giờ cũng có width cố định, kéo ngắn lại thay vì giãn hết cỡ), không bị
   trình duyệt tự giãn thêm cột nào để lấp đầy khung chứa. */
.st-view .st-daily-table {
    table-layout: fixed;
}
.st-view .st-daily-table th:nth-child(1),
.st-view .st-daily-table td:nth-child(1) {
    width: 140px;
}
.st-view .st-daily-table th:nth-child(2),
.st-view .st-daily-table td:nth-child(2) {
    width: 220px;
}
.st-view .st-daily-table th:nth-child(3),
.st-view .st-daily-table td:nth-child(3) {
    width: 190px;
    text-align: center;
    overflow: visible;
}
/* Giờ bắt đầu-kết thúc luôn giữ NGUYÊN 1 vị trí giữa cột dù có badge "Trùng giờ" hay không —
   badge tách khỏi luồng canh giữa (position:absolute, không tính vào bề rộng nội dung của
   .st-time-wrap) nên không kéo lệch chữ giờ giữa các dòng, và được phép tràn ra ngoài phần đệm
   cột (overflow:visible ở trên) thay vì bị cắt hay ép co giờ lại. */
.st-view .st-daily-table .st-time-wrap {
    position: relative;
    display: inline-block;
}
.st-view .st-daily-table .st-time-wrap .st-conflict-badge {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}
.st-view .st-daily-table th:nth-child(4),
.st-view .st-daily-table td:nth-child(4) {
    width: 140px;
}
.st-view .st-daily-table th:nth-child(5),
.st-view .st-daily-table td:nth-child(5) {
    width: 150px;
}
.st-view .st-daily-table th:nth-child(6),
.st-view .st-daily-table td:nth-child(6) {
    width: 64px;
}
.st-view .st-daily-table th,
.st-view .st-daily-table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.st-view .st-daily-table td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
}

.st-view .st-daily-table thead th {
    text-align: center;
    font-size: 10.5px;
    color: var(--st-ink-faint);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 5px 12px;
    border: none;
    border-right: 1px solid var(--st-line);
}
.st-view .st-daily-table tbody td {
    height: 26px;
    padding: 4px 12px;
    border-top: 1px solid var(--st-line);
    border-bottom: none;
    border-right: 1px solid var(--st-line);
    vertical-align: middle;
}

/* theme.min.css đặt --bs-backdrop-opacity: 0.9 (gần đen, 90% mờ) cho MỌI modal — hợp lý cho hộp
   thoại xác nhận (chặn thao tác cho tới khi trả lời), nhưng popup "cần xử lý" ở Trạm điều hành/
   Bảng điều khiển (partials/action-needed-modal.blade.php) tự mở ngay khi vào trang, nền quá đậm
   khiến cả trang phía sau gần như biến mất — dễ hiểu lầm trang bị lỗi/chưa tải xong. Dịu lại theo
   đúng mức mặc định gốc của Bootstrap (0.5) cho toàn bộ modal trong app (hiện chưa có modal nào
   khác dùng .modal-backdrop, nên đổi ở đây an toàn, không ảnh hưởng nơi khác). */
.modal-backdrop {
    --bs-backdrop-opacity: 0.5;
}
/* Cột cuối (nút "Xem") không cần đường kẻ phải, đứng sát mép bảng. */
.st-view .st-daily-table th:last-child,
.st-view .st-daily-table td:last-child {
    border-right: none;
}
.st-view .st-daily-table tbody tr.is-conflict {
    background: var(--st-amber-light);
}
.st-view .st-daily-table tbody tr:hover {
    background: var(--st-paper);
}
.st-view .st-daily-table tbody tr.is-conflict:hover {
    background: #f8ecd0;
}
.st-view .st-conflict-badge {
    font-size: 10.5px;
    color: var(--st-amber);
    background: #fff;
    border: 1px solid var(--st-amber);
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 6px;
}
.st-view .st-btn-view {
    border: 1px solid var(--st-line);
    background: #fff;
    color: var(--st-ink-soft);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    text-decoration: none;
    display: inline-block;
}
.st-view .st-btn-view:hover {
    border-color: var(--st-brand);
    color: var(--st-brand-dark);
}

/* Nút chuyển "Danh sách"/"Timeline" — chỉ đổi màu nút đang active, còn lại đồng bộ với các
   btn-group nhỏ khác trong app (viền nhạt, chữ xám). */
.st-view .st-view-switch .btn {
    border-color: var(--st-line);
    color: var(--st-ink-soft);
}
.st-view .st-view-switch .btn.active {
    background: var(--st-brand-dark);
    border-color: var(--st-brand-dark);
    color: #fff;
}

/* ---- View "Timeline" của tab Việc thường ngày — mỗi nhân viên 1 hàng, việc vẽ thành block nằm
   ngang theo đúng tỉ lệ giờ bắt đầu/kết thúc trong ngày (xem tasks/_daily_index.blade.php +
   TaskController::stackTimelineLanes()). Cột tên ghim trái (position:sticky) để vẫn thấy tên
   nhân viên khi cuộn ngang trên khung giờ dài/màn hình hẹp. */
.st-view .st-timeline-scroll {
    overflow-x: auto;
}
.st-view .st-timeline-inner {
    position: relative;
}
.st-view .st-timeline-header,
.st-view .st-timeline-row {
    display: flex;
    align-items: stretch;
}
/* Bề rộng auto-fit theo tên dài nhất — JS đo bề rộng thật của từng tên bằng 1 span ẩn tách khỏi
   layout (không đo trực tiếp trên .st-timeline-namecol b vì nó là flex item bị overflow:hidden co
   nhỏ, đo trực tiếp có thể hụt), rồi set biến --st-tl-namecol-width lên .st-timeline-inner — xem
   script trong tasks/_daily_index.blade.php. 170px là giá trị mặc định dùng tạm trước khi JS chạy
   xong (SSR không đo được bề rộng chữ thật). */
.st-view .st-timeline-namecol {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--st-tl-namecol-width, 170px);
    flex: none;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-right: 1px solid var(--st-line);
}
.st-view .st-timeline-namecol b {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.st-view .st-timeline-header {
    border-bottom: 1px solid var(--st-line);
}
.st-view .st-timeline-hours {
    position: relative;
    flex: 1;
    height: 28px;
}
.st-view .st-timeline-hour {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    font-size: 12.5px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}
/* Mốc 30 phút (không tròn giờ) — chữ nhỏ hơn mốc tròn giờ để không rối mắt, đường kẻ dạng chấm để
   phân biệt với đường kẻ giờ chẵn — nhưng vẫn cùng màu đen đậm như mốc chính theo yêu cầu. */
.st-view .st-timeline-hour.is-half {
    font-size: 11px;
}
/* Mốc đầu tiên (trùng left:0%) và mốc cuối cùng (trùng left:100%) không được canh giữa như các mốc
   giữa — canh giữa sẽ khiến nửa chữ tràn ra ngoài, mốc đầu bị cột tên ghim trái (sticky) đè mất. */
.st-view .st-timeline-hour.is-first {
    transform: translateX(0);
}
.st-view .st-timeline-hour.is-last {
    transform: translateX(-100%);
}
.st-view .st-timeline-row {
    border-bottom: 1px solid var(--st-line);
}
.st-view .st-timeline-row:last-child {
    border-bottom: none;
}
.st-view .st-timeline-track {
    position: relative;
    flex: 1;
    min-height: 38px;
    padding: 4px 0;
}
.st-view .st-timeline-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--st-line);
}
.st-view .st-timeline-gridline.is-half {
    background: transparent;
    border-left: 1px dashed var(--st-line);
}
/* Vạch đánh dấu thời gian hiện tại — 1 vạch DUY NHẤT xuyên suốt từ đầu tới cuối .st-timeline-inner
   (không vẽ riêng từng hàng — sẽ đứt đoạn tại viền border-bottom giữa các hàng). Chỉ hiện khi đang
   xem đúng ngày hôm nay và giờ hiện tại nằm trong khung trục đang hiển thị (xem $showNowLine trong
   tasks/_daily_index.blade.php). Vị trí tính bằng calc() dùng chung 2 biến CSS do JS set lên
   .st-timeline-inner: --st-tl-namecol-width (bề rộng auto-fit cột tên, xem .st-timeline-namecol)
   và --st-tl-now-frac (tỉ lệ 0–1 của giờ hiện tại trong khung trục) — JS chỉ cần cập nhật 2 biến
   này, công thức vị trí nằm hẳn trong CSS nên không thể lệch nhau giữa 2 nơi. */
.st-view .st-timeline-now-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--st-tl-namecol-width, 170px) + (100% - var(--st-tl-namecol-width, 170px)) * var(--st-tl-now-frac, 0));
    width: 2px;
    background: #ff0000;
    z-index: 4;
    pointer-events: none;
}
.st-view .st-timeline-block {
    position: absolute;
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    border-left: 3px solid currentColor;
    padding: 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.st-view .st-timeline-block:hover {
    filter: brightness(0.96);
    text-decoration: none;
}
.st-view .st-timeline-block.is-conflict {
    box-shadow: 0 0 0 1px var(--st-amber) inset;
}

/* Màu riêng cho Timeline theo yêu cầu — CHỈ áp dụng ở Timeline (không đổi màu badge trạng thái ở
   view Danh sách, vẫn dùng bg-soft-*/text-* như cũ). Trạng thái nào không nằm trong 3 mốc chính
   (mới giao/đang làm/hoàn thành) thì giữ nguyên màu theo dailyStatusClass() mặc định phía trên. */
.st-view .st-timeline-block[data-status="chua_nhan"] {
    background: #FFFFCC !important;
    color: var(--st-ink) !important;
    border-left-color: rgba(0, 0, 0, .18);
}
.st-view .st-timeline-block[data-status="dang_thuc_hien"] {
    background: #FFFF66 !important;
    color: var(--st-ink) !important;
    border-left-color: rgba(0, 0, 0, .18);
}
.st-view .st-timeline-block[data-status="hoan_thanh"] {
    background: #00FF00 !important;
    color: var(--st-ink) !important;
    border-left-color: rgba(0, 0, 0, .18);
}
.st-view .st-tl-block-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Block sửa được giờ (chỉ khi người xem là người giao + việc còn "Chưa nhận" — xem
   TaskPolicy::updateDailyBeforeAck()) — kéo giữa block để đổi giờ (giữ nguyên thời lượng), kéo 2
   tay cầm 2 đầu để thu/giãn (xem JS trong tasks/_daily_index.blade.php). Block không sửa được thì
   giữ nguyên hành vi cũ — chỉ là link mở việc, không có tay cầm/con trỏ kéo. */
.st-view .st-timeline-block.is-editable {
    cursor: grab;
}
.st-view .st-timeline-block.is-editable:active {
    cursor: grabbing;
}
.st-view .st-timeline-block.is-saving {
    opacity: .55;
    pointer-events: none;
}
.st-view .st-tl-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 1;
}
.st-view .st-tl-handle-l {
    left: 0;
}
.st-view .st-tl-handle-r {
    right: 0;
}
.st-view .st-tl-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
}
.st-view .st-timeline-block.is-editable:hover .st-tl-handle::after {
    opacity: .45;
}

/* =====================================================================================
   Timeline — bản mobile (≤1024px, cùng mốc bottom-nav/drawer trong theme-override.css) — xổ/thu
   theo từng người thay cho lưới Gantt/lưới giờ, dùng chung cho tasks/_kehoach_timeline.blade.php
   VÀ tasks/_daily_timeline.blade.php. .st-tl-desktop-only bọc lưới cũ (ẩn ở mobile),
   .st-tl-mobile-only bọc accordion mới (ẩn ở desktop, hiện ở mobile).
   ===================================================================================== */
.st-tl-desktop-only { display: block; }
.st-tl-mobile-only { display: none; }
@media (max-width: 1024px) {
    .st-tl-desktop-only { display: none !important; }
    .st-tl-mobile-only { display: block !important; }
}

/* Mỗi việc trong accordion vẫn dùng chung class "st-timeline-block" để tái dùng nguyên JS mở
   modal/tooltip đã có (querySelectorAll('.st-timeline-block') ở @push('page-scripts') của 2 file
   Timeline tự bắt luôn) — nhưng phải VÔ HIỆU HOÁ toàn bộ style định vị tuyệt đối dành cho lưới
   (position/left/top/width/white-space...) vì trong accordion nó chỉ là 1 dòng bình thường. */
.st-view .st-tl-person-body .st-timeline-block {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    white-space: normal !important;
    overflow: visible !important;
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: 9px;
}
.st-view .st-tl-mini-pill-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.st-view .st-tl-mini-pill-range {
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    opacity: .75;
    white-space: nowrap;
}

.st-view .st-tl-date-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 4px 12px;
}
.st-view .st-tl-date-pill {
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    border-radius: 10px;
    border: 1px solid var(--st-line);
    background: #fff;
}
.st-view .st-tl-date-pill.is-today { border-color: var(--st-red); }
.st-view .st-tl-date-pill.is-today .st-tl-date-dow { color: var(--st-red); }
.st-view .st-tl-date-dow { font-size: 9.5px; color: var(--st-ink-faint); font-weight: 600; }
.st-view .st-tl-date-num { font-size: 13.5px; font-weight: 700; }

.st-view .st-tl-person-card {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    margin-bottom: 9px;
    overflow: hidden;
}
.st-view .st-tl-person-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    cursor: pointer;
}
.st-view .st-tl-person-count {
    font-size: 10.5px;
    color: var(--st-ink-faint);
    margin-left: auto;
}
.st-view .st-tl-person-chev {
    font-size: 11px;
    color: var(--st-ink-faint);
    transition: transform .15s;
    margin-left: 4px;
}
.st-view .st-tl-person-card.open .st-tl-person-chev { transform: rotate(180deg); }
.st-view .st-tl-person-body { display: none; padding: 0 13px 12px; }
.st-view .st-tl-person-card.open .st-tl-person-body { display: block; }

/* Comment/tooltip hiện khi rê chuột vào 1 block — nội dung thật sự lấy từ .st-timeline-tooltip-src
   (ẩn sẵn bên trong từng block, xem tasks/_daily_index.blade.php) rồi JS copy sang đây và tự định
   vị bằng getBoundingClientRect() (position:fixed nên không bị .st-timeline-scroll cắt mất, khác
   với việc chỉ dùng CSS :hover thuần vốn sẽ bị overflow-x:auto của khung cuộn cắt theo cả trục
   dọc). */
.st-view .st-timeline-tooltip {
    display: none;
    position: fixed;
    z-index: 1050;
    max-width: min(560px, 92vw);
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
    padding: 20px 22px;
    font-size: 16px;
    color: var(--st-ink);
    pointer-events: none;
}
.st-view .st-timeline-tooltip .st-tl-tip-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--brand-primary-darker, #155b2a);
}
.st-view .st-timeline-tooltip .st-tl-tip-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--st-ink-faint);
    font-size: 15px;
}
.st-view .st-timeline-tooltip .st-tl-tip-dot {
    color: var(--st-line);
}
.st-view .st-timeline-tooltip .st-tl-tip-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}
.st-view .st-timeline-tooltip .st-tl-tip-progress {
    font-weight: 800;
    color: var(--st-ink);
}
.st-view .st-timeline-tooltip .st-tl-tip-progress.is-done {
    color: var(--brand-primary-dark, #1d7c3a);
}
.st-view .st-timeline-tooltip .st-tl-tip-meta .is-conflict-text {
    color: var(--st-amber);
    font-weight: 700;
}
.st-view .st-timeline-tooltip .st-tl-tip-content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--st-line);
    white-space: pre-wrap;
    word-break: break-word;
    font-weight: 600;
    font-size: 16px;
    color: var(--st-ink);
}
.st-view .st-timeline-tooltip .st-tl-tip-content.is-empty {
    font-weight: 400;
    font-style: italic;
    color: var(--st-ink-faint);
}

/* Popup chi tiết việc (Timeline — cả trục giờ lẫn trục ngày, xem .st-tl-mini-modal ở
   tasks/_daily_index.blade.php VÀ tasks/_kehoach_timeline.blade.php) — tinh gọn khoảng cách,
   không dùng .row/.col-*/mb-* mặc định của Bootstrap cho phần thông tin tóm tắt (cộng dồn margin
   + gutter gây khoảng trắng quá lớn). Cụm thao tác bên dưới (.st-tl-mini-action-panel) tái dùng
   NGUYÊN HTML của trang chi tiết đầy đủ (card, card-body, mb-4...) — không sửa class gốc trong
   _action_panel.blade.php/_kehoach_action_panel.blade.php (sẽ ảnh hưởng cả trang chi tiết đầy đủ),
   mà ép khoảng cách nhỏ lại CHỈ trong phạm vi popup bằng class dùng chung .st-tl-mini-modal. */
.st-tl-mini-modal .modal-header {
    padding: 12px 16px;
}
.st-tl-mini-modal .modal-footer {
    padding: 10px 16px;
}
.st-tl-mini-modal .st-tl-modal-section {
    margin-bottom: 8px;
}
.st-tl-mini-modal .st-tl-modal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 16px;
}
.st-tl-mini-modal .st-tl-modal-meta > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.st-tl-mini-modal .st-tl-modal-meta .st-tl-modal-meta-full {
    grid-column: 1 / -1;
}
.st-tl-mini-modal .st-tl-modal-meta .text-muted {
    font-size: 11px;
}
.st-tl-mini-modal .st-tl-modal-meta strong {
    font-size: 13px;
    font-weight: 600;
}
.st-tl-mini-modal .modal-body {
    padding: 12px 16px;
}
/* Cụm thao tác tái dùng nguyên HTML/class của trang chi tiết đầy đủ (card mb-4, card-body padding
   mặc định Bootstrap, <p> không có mb-* nên vẫn ăn margin mặc định 16px của thẻ p...) — ép nhỏ lại
   TOÀN BỘ các nguồn khoảng cách đó, chỉ trong phạm vi popup. */
.st-tl-mini-modal .st-tl-mini-action-panel .card {
    margin-bottom: 6px;
    border-radius: 8px;
}
.st-tl-mini-modal .st-tl-mini-action-panel .card:last-child {
    margin-bottom: 0;
}
.st-tl-mini-modal .st-tl-mini-action-panel .card-body {
    padding: 8px 10px;
}
.st-tl-mini-modal .st-tl-mini-action-panel .card-body h6 {
    font-size: 12.5px;
    margin-bottom: 5px;
}
.st-tl-mini-modal .st-tl-mini-action-panel p {
    margin-bottom: 5px;
}
.st-tl-mini-modal .st-tl-mini-action-panel .mb-3 {
    margin-bottom: 6px !important;
}
.st-tl-mini-modal .st-tl-mini-action-panel .mb-2 {
    margin-bottom: 5px !important;
}
.st-tl-mini-modal .st-tl-mini-action-panel .row.g-2 {
    margin-bottom: 5px;
}
.st-tl-mini-modal .st-tl-mini-action-panel textarea.form-control-sm {
    min-height: 38px;
}
.st-tl-mini-modal .st-tl-mini-action-panel .form-control-sm {
    padding: 3px 8px;
}
.st-tl-mini-modal .st-tl-mini-action-panel .btn-sm {
    padding: 4px 10px;
}

/* ---- Timeline trục NGÀY của Việc theo kế hoạch (tasks/_kehoach_timeline.blade.php) — tái dùng
   nguyên khung .st-timeline-scroll/-inner/-namecol/-row/-track/-block của Timeline trục GIỜ (Việc
   thường ngày) vì cùng là "1 hàng/nhân viên + block định vị theo %"; chỉ phần đầu cột NGÀY và
   gridline cần CSS riêng (.st-ktl-*) vì khác hẳn về ý nghĩa/hiển thị so với mốc giờ. ---- */
.st-view .st-ktl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 0;
    flex-wrap: wrap;
}
.st-view .st-ktl-week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.st-view .st-ktl-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.st-view .st-ktl-filter .form-control,
.st-view .st-ktl-filter .form-select {
    width: auto;
    min-width: 128px;
    font-size: 12.5px;
}
.st-view .st-ktl-week-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #000;
    min-width: 130px;
    text-align: center;
}
.st-view .st-ktl-days {
    position: relative;
    flex: 1;
    height: 38px;
}
.st-view .st-ktl-day {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--st-line);
    box-sizing: border-box;
}
/* --mnav-space (2026-09-06, Đợt 4 mobile) — khoảng cách "an toàn" phía trên thanh dưới .mnav,
   dùng CHUNG cho mọi thanh dính đáy/nút nổi khác trên mobile (catalog-ui .st-cat-bar, settings
   .st-set-bar, leave/_calendar_styles .lp-fab/.lp-cal-wrap) thay vì mỗi nơi tự chế 1 số khác
   nhau (72px/76px/64px trước đây) — đổi 1 chỗ, mọi nơi tự khớp lại. 72px là chiều cao đo được
   của .mnav + chút đệm; CHƯA đo lại trên máy thật để đổi con số 160px của "body" bên dưới, xem
   ghi chú riêng ở khối @media ngay sau đây — 2 con số này CỐ Ý không bằng nhau (160px có biên an
   toàn dư dả hơn hẳn cho phần cuộn cuối trang, --mnav-space chỉ đủ cho 1 thanh/nút nổi bám sát
   đáy). */
:root {
    --mnav-space: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* =====================================================================================
   Điều hướng mobile (≤1024px) — bottom-nav + drawer thay cho sidebar off-canvas của theme ở
   đúng breakpoint mobile THẬT của theme gốc (theme.min.css dùng max-width:1024px cho
   .nxl-navigation/.nxl-head-mobile-toggler, không phải 1199.98px như rule reset margin ở đầu
   file này). Ẩn hẳn sidebar/hamburger cũ ở cùng mốc để không có 2 hệ điều hướng chồng nhau —
   xem partials/bottom-nav.blade.php, partials/mobile-drawer.blade.php, layouts/admin.blade.php.
   ===================================================================================== */
@media (max-width: 1024px) {
    .nxl-navigation,
    #mobile-collapse {
        display: none !important;
    }
    body {
        /* .mnav cộng thêm env(safe-area-inset-bottom) cho vùng an toàn đáy màn hình (thanh cử
           chỉ/tai thỏ) nên chiều cao thật của nó > 64px trên các máy có vùng an toàn này — phải
           cộng thêm y hệt ở đây, nếu không phần dư đó sẽ đè lên nội dung cuối trang (đã gặp thực
           tế ở trang Báo cáo kiểm soát trên điện thoại có vùng an toàn lớn).
           128px (2026-09-05, tăng từ 64px) — 64px trước đây không đủ trên THỰC TẾ (đo được .mnav
           cao ~51px nhưng cuộn hết cỡ vẫn còn ~51px nội dung cuối trang bị đè, không phải chỉ vài
           px lẻ do bo tròn) — phát hiện ở nhiều trang có nội dung dài chạm đáy: nút "Giao việc"
           (tasks/create, tasks/daily/create), dòng cuối bảng việc thường ngày, thanh phân trang
           (users, audit-logs), dòng cuối bảng Phòng/Bộ phận, dòng cuối bảng trễ hạn (report), nút
           "Lưu cài đặt" (settings). Xác nhận qua kiểm thử trực tiếp: 64px thiếu khoảng 51px mới đủ
           che hết .mnav ở TRƯỜNG HỢP XẤU NHẤT đã gặp — chọn 160px để có biên an toàn dư dả cho các
           trang khác chưa phát hiện ra, thay vì chỉ vừa đủ khít (128px thử trước đó vẫn còn dư
           ~3px đè, xác nhận qua kiểm thử trực tiếp). */
        padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
    }
}
@media (min-width: 1025px) {
    .mnav,
    .mdrawer,
    .mdrawer-overlay {
        display: none !important;
    }
}

.mnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--st-line, #e4e2d8);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mnav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--st-ink-faint, #8a998f);
    border: 0;
    background: transparent;
    position: relative;
    min-width: 0;
}
.mnav-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mnav-ic {
    font-size: 17px;
}
.mnav-link.active {
    color: var(--brand-primary);
}
.mnav-dot {
    position: absolute;
    top: 2px;
    right: 18%;
    background: var(--st-red, #c0392f);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 20px;
    min-width: 14px;
    text-align: center;
}
.mnav-fab {
    justify-content: flex-start;
}
.mnav-fab-ic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-top: -18px;
    box-shadow: 0 6px 14px rgba(31, 122, 77, .35);
}

.mdrawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 15, .45);
    z-index: 950;
    display: none;
}
.mdrawer-overlay.show {
    display: block;
}
.mdrawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 300px;
    background: var(--brand-primary-dark);
    color: #eaf3ee;
    z-index: 960;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.mdrawer.show {
    transform: translateX(0);
}
.mdrawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    flex: none;
}
.mdrawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
}
.mdrawer-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.mdrawer-close {
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
}
.mdrawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px 20px;
}
.mdrawer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    color: #cfe3d7;
    font-weight: 500;
    border: 0;
    background: transparent;
    text-align: left;
    width: 100%;
}
.mdrawer-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.mdrawer-link.active {
    background: #fff;
    color: var(--brand-primary-dark);
    font-weight: 600;
}

/* Nhóm thu gọn được trong drawer mobile (2026-09-04, vd "Danh mục KSK") — .mdrawer-group-toggle
   dùng lại nguyên .mdrawer-link nên thừa hưởng style hàng cha, chỉ thêm mũi tên tự xoay + phần
   .mdrawer-group thu/giãn chiều cao mượt bằng transition trên max-height (không dùng display:
   none để có hiệu ứng, giới hạn max-height đủ lớn cho vài dòng con). */
.mdrawer-group-toggle {
    justify-content: space-between;
    cursor: pointer;
}
.mdrawer-group-toggle .mdrawer-group-caret {
    margin-left: auto;
    font-size: 15px;
    transition: transform .18s;
    flex-shrink: 0;
}
.mdrawer-group-toggle[aria-expanded="true"] .mdrawer-group-caret {
    transform: rotate(180deg);
}
.mdrawer-group {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}
.mdrawer-group.show {
    max-height: 220px;
}
.mdrawer-sublink {
    padding-left: 40px;
    font-size: 13px;
}
.mdrawer-logout-form {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 6px;
}

.st-view .st-ktl-day-dow {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--st-ink-faint);
}
.st-view .st-ktl-day-dom {
    font-size: 12.5px;
    font-weight: 700;
    color: #000;
}
.st-view .st-ktl-day.is-month .st-ktl-day-dom {
    font-size: 11px;
}
.st-view .st-ktl-day.is-today {
    background: var(--st-red-light);
}
.st-view .st-ktl-day.is-today .st-ktl-day-dom {
    color: var(--st-red);
}
/* Dải xuyên suốt đánh dấu ngày hôm nay — kéo dài từ đầu giờ xuống hết mọi hàng, không chỉ ở phần
   đầu cột ngày (.st-ktl-day.is-today), để dễ nhận ra "hôm nay" ngay cả khi cuộn xuống nhiều hàng
   nhân viên. Nằm dưới các block công việc (z-index thấp hơn .st-timeline-block) nên không che mất
   nội dung việc nằm đúng ngày hôm nay. */
.st-view .st-ktl-today-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--st-red-light);
    opacity: .6;
    pointer-events: none;
}
.st-view .st-ktl-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--st-line);
}
/* Block bị cắt ở mép tuần đang xem (việc thật sự kéo dài ra ngoài tuần này, xem $item['continuesLeft']/
   ['continuesRight'] trong TaskController::keHoachTimelineData()) — bo góc thẳng ở mép bị cắt để
   trông như "còn tiếp", thay vì bo tròn đều gây cảm giác việc kết thúc đúng ở mép tuần. */
.st-view .st-timeline-block.is-continues-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-style: dashed;
}
.st-view .st-timeline-block.is-continues-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Thanh Timeline "Việc theo kế hoạch" (2026-09-11) — chỉ áp cho .st-ktl-block (gắn riêng ở
   tasks/_kehoach_timeline.blade.php), KHÔNG đụng .st-timeline-block gốc dùng chung với Timeline
   trục-giờ của Việc thường ngày (tasks/_daily_timeline.blade.php, có tay cầm kéo/thu riêng).
   2 mục tiêu: (1) hụt bớt 1 khoảng ở đầu ngày cuối cùng (đã trừ trong width qua calc() ở blade)
   để luôn có khe hở rõ ràng với thanh việc kế tiếp, kể cả khi 2 việc nối sát ngày; (2) thanh đậm/
   rõ hơn hẳn — viền trái dày hơn, có đổ bóng nhẹ tạo chiều sâu, chữ đậm hơn, và tăng độ bão hoà màu
   (bg-soft-*/text-* mặc định khá nhạt, khó thấy trên lưới nhiều cột) mà không cần hard-code lại
   từng mã màu theo trạng thái. */
.st-view .st-ktl-block {
    height: 32px;
    border-left-width: 4px;
    font-weight: 700;
    letter-spacing: .01em;
    filter: saturate(1.35);
    box-shadow: 0 1px 2px rgba(15, 23, 20, .10), inset 0 0 0 1px rgba(15, 23, 20, .05);
    transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.st-view .st-ktl-block:hover {
    filter: saturate(1.45) brightness(0.97);
    box-shadow: 0 4px 10px rgba(15, 23, 20, .18), inset 0 0 0 1px rgba(15, 23, 20, .06);
    transform: translateY(-1px);
}

/* Ô "Nội dung"/"Kết quả mong đợi"/"Nguồn lực" ở trang chi tiết công việc — tách hẳn thành 1 khối
   có nền + viền riêng (thay vì chữ trần lẫn vào các phần khác) và phóng to cỡ chữ, để nội dung
   chi tiết công việc nổi bật, dễ đọc hơn hẳn phần thông tin phụ (mã việc, ưu tiên...) xung quanh. */
.st-view .st-task-detail-box {
    background: var(--st-paper);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    padding: 14px 16px;
}
.st-view .st-task-detail-box p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--st-ink);
}
.st-view .st-task-detail-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--st-ink-faint);
    margin-bottom: 6px;
}

/* Nội dung (không phải nhãn) của Mã việc/Ưu tiên/Người giao/Người thực hiện/Phòng-Bộ phận/Thời
   hạn/Ngày tạo — chữ đậm màu đen thay vì màu chữ mặc định của theme, để nổi bật rõ hơn nhãn xám
   phía trên. */
.st-view .st-task-info-grid strong {
    font-weight: 700;
    color: #000;
}

/* ===== Sidebar nền xanh đậm (2026-08-30) =====
   Áp dụng cho TOÀN BỘ app (sidebar dùng chung mọi trang, xem partials/sidebar.blade.php), theo
   yêu cầu tăng màu/giảm nền trắng — trước đây nền trắng mặc định của theme (.nxl-navigation{
   background:#fff} trong theme.min.css). Đổi toàn bộ chữ/icon sang màu sáng để đọc được trên nền
   tối; đường viền + icon mục đang chọn trước đây dùng var(--brand-primary) (xanh) sẽ CHÌM MẤT trên
   nền xanh đậm mới nên đổi sang màu bạc hà sáng (#6fce97) cho tương phản rõ. Toàn bộ rule dưới đây
   dùng !important + khớp/ vượt độ ưu tiên của rule gốc trong theme.min.css, đặt sau cùng file để
   chắc chắn thắng thay vì chỉ dựa vào !important suông. */
.nxl-navigation {
    background: var(--brand-primary-darker, #0f4029) !important;
}
.nxl-navigation .m-header {
    border-bottom-color: rgba(255, 255, 255, .12) !important;
}
.nxl-navigation .b-brand .brand-text {
    /* Đồng bộ màu + cỡ chữ với .header-brand-text ("TRUNG TÂM Y KHOA PASTEUR ĐÀ LẠT" ở header,
       xem dòng ~77 file này) theo yêu cầu — cùng var(--brand-primary), cùng 27px/700/.02em. */
    color: var(--brand-primary) !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
}
/* Phóng to + in đậm nhãn "Điều hướng" (2026-09-06, theo yêu cầu) — mặc định theme chỉ 10px, dễ bị
   lướt qua. Giữ nguyên uppercase/letter-spacing gốc, chỉ tăng cỡ chữ + độ đậm cho nổi bật hơn. */
.nxl-navigation .navbar-content .nxl-caption,
.nxl-navigation .navbar-content .nxl-caption label {
    color: rgba(255, 255, 255, .5) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
.nxl-navigation .navbar-content .nxl-link,
.nxl-navigation .navbar-content .nxl-link .nxl-mtext,
.nxl-navigation .navbar-content .nxl-link .nxl-arrow {
    color: rgba(255, 255, 255, .78) !important;
}
.nxl-navigation .navbar-content .nxl-link .nxl-micon i {
    color: rgba(255, 255, 255, .78) !important;
}
.nxl-navigation .navbar-content .nxl-item:hover > .nxl-link {
    background-color: rgba(255, 255, 255, .10) !important;
}
.nxl-navigation .navbar-content .nxl-item:hover > .nxl-link,
.nxl-navigation .navbar-content .nxl-item:hover > .nxl-link .nxl-mtext,
.nxl-navigation .navbar-content .nxl-item:hover > .nxl-link .nxl-micon i {
    color: #fff !important;
}
.nxl-navigation .navbar-content .nxl-item.active > .nxl-link {
    background-color: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 3px 0 0 #6fce97 !important;
}
.nxl-navigation .navbar-content .nxl-item.active > .nxl-link .nxl-mtext,
.nxl-navigation .navbar-content .nxl-item.active > .nxl-link .nxl-micon i {
    color: #fff !important;
}

/* Menu con (submenu) — làm mờ hơn menu cha để phân biệt cấp bậc; hover/active tô màu xanh lá
   thương hiệu thay vì trắng, tránh nhầm với trạng thái active của menu cha. */
.nxl-navigation .navbar-content .nxl-submenu .nxl-link,
.nxl-navigation .navbar-content .nxl-submenu .nxl-link .nxl-mtext {
    color: rgba(255, 255, 255, .58) !important;
}
.nxl-navigation .navbar-content .nxl-submenu .nxl-item:hover > .nxl-link,
.nxl-navigation .navbar-content .nxl-submenu .nxl-item:hover > .nxl-link .nxl-mtext {
    color: #a8e6c1 !important;
    background-color: rgba(111, 206, 151, .14) !important;
}
.nxl-navigation .navbar-content .nxl-submenu .nxl-item.active > .nxl-link {
    background-color: rgba(111, 206, 151, .16) !important;
    box-shadow: inset 3px 0 0 #6fce97 !important;
}
.nxl-navigation .navbar-content .nxl-submenu .nxl-item.active > .nxl-link,
.nxl-navigation .navbar-content .nxl-submenu .nxl-item.active > .nxl-link .nxl-mtext {
    color: #6fce97 !important;
    font-weight: 600;
}

.nxl-header {
    background: var(--brand-soft-bg, #e6f4ec) !important;
}

/* Tiêu đề trang (.page-header-title h5, layouts/admin.blade.php) cho riêng các màn hình Khám sức
   khỏe — to hơn + màu xanh lá thương hiệu, nổi bật hơn tiêu đề xám mặc định của theme. Đặt NGOÀI
   .hc-view vì .page-header nằm phía trên @yield('content') trong layout (không phải con của
   .hc-view) — dùng thẳng var(--brand-primary-dark) ở :root thay vì --hc-* (chỉ khai báo trong
   phạm vi .hc-view/.hc-modal, không tới được đây). !important vì theme.min.css có sẵn luật
   ".page-header h5{color:...;font-weight:600}" specificity (0,1,1) cao hơn ".hc-page-title" đơn lẻ
   (0,1,0), thắng bất kể thứ tự nạp file — cùng kiểu va chạm đã gặp với .btn-primary phía trên. */
.hc-page-title {
    color: var(--brand-primary-dark, #1d7c3a) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* =====================================================================================
   Khám sức khỏe — phong cách "chuyên nghiệp" riêng (2026-09-01). CHỈ áp dụng trong .hc-view
   (bọc quanh nội dung health-checkup/index.blade.php, companies/index.blade.php,
   checkup-contents/index.blade.php) — không đụng màu sắc/kiểu dáng của phần còn lại trong app,
   đúng khuôn mẫu đã dùng cho .st-view (Sổ theo dõi) ở trên. Màu thương hiệu dùng lại luôn
   var(--brand-primary/...) hiện có (đã là xanh lá cho toàn app), phần này chỉ thêm lớp tinh
   chỉnh bố cục/kiểu dáng: thẻ mềm, tab dạng viên thuốc, bảng nền giấy bạc hà, badge bo tròn,
   4 ô tóm tắt nhanh ở đầu trang Kế hoạch KSK.
   ===================================================================================== */
/* .hc-modal — theme này tự chuyển MỌI .modal ra làm con trực tiếp của <body> khi mở (common-init
   JS), nên các modal chi tiết (Công tác chuẩn bị/thực hiện/nhân sự, Thêm/Sửa hợp đồng, Thêm/Sửa
   công ty, Thêm/Sửa nội dung khám...) LUÔN nằm ngoài .hc-view lúc hiển thị dù viết lồng trong
   .hc-view ở Blade — biến --hc-* và các luật bên dưới phải khai báo thêm ở .hc-modal mới áp dụng
   được vào trong modal (đã tự kiểm bằng DOM: div.modal khi .show là con trực tiếp của body, không
   phải cháu của .hc-view). */
.hc-view,
.hc-modal {
    --hc-ink: #16281f;
    --hc-ink-soft: #52685c;
    --hc-ink-faint: #8aa091;
    --hc-line: #d9ebe0;
    --hc-paper: #f3faf6;
    --hc-brand: var(--brand-primary, #259d49);
    --hc-brand-dark: var(--brand-primary-dark, #1d7c3a);
    --hc-brand-light: var(--brand-soft-bg, #e6f4ec);
    --hc-teal: #12897d;
    --hc-teal-light: #e1f5f2;
    --hc-amber: #b45309;
    --hc-amber-light: #fdf2e2;
    --hc-red: #c0392f;
    --hc-red-light: #fbe6e3;
    --hc-violet: #6d4ec2;
    --hc-violet-light: #ece7fa;
    --hc-radius: 12px;
}

/* Thẻ/khung — bo tròn hơn mặc định theme, viền + bóng nhẹ nhàng hơn. */
.hc-view .card {
    border-color: var(--hc-line);
    border-radius: var(--hc-radius);
    box-shadow: 0 1px 2px rgba(15, 64, 41, .05);
}
.hc-view .card-header {
    background: var(--hc-paper);
    border-bottom-color: var(--hc-line);
}

/* Tab (chỉ trang Kế hoạch KSK có) — chuyển từ gạch chân sang dạng "viên thuốc" nổi khối, tab
   đang chọn tô nền xanh thương hiệu thay vì chỉ gạch chân mảnh. */
.hc-view .nav-tabs {
    border-bottom: 0;
    display: flex;
    gap: 4px;
    background: var(--hc-paper);
    padding: 5px;
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.hc-view .nav-tabs .nav-item {
    flex: none;
}
.hc-view .nav-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    color: var(--hc-ink-soft);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.hc-view .nav-tabs .nav-link:hover:not(.active) {
    background: #fff;
    color: var(--hc-ink);
    isolation: isolate;
}
.hc-view .nav-tabs .nav-link.active {
    background: var(--hc-brand);
    color: #fff;
}

/* Bảng — tiêu đề nền giấy bạc hà in hoa, dòng hover tô nhẹ, dòng bấm được (data-bs-toggle trên
   <tr>, xem health-checkup/index.blade.php) tô đậm hơn 1 chút để gợi ý rõ là bấm được.

   2026-09-... — tiêu đề in ĐẬM HƠN (font-weight 800 + màu chữ đậm hẳn thay vì xám nhạt gần như mờ)
   cho rõ hàng tiêu đề, KHÔNG xuống dòng (white-space: nowrap, khớp <colgroup> đã chia độ rộng theo
   đúng nội dung thật của từng cột ở index.blade.php — tiêu đề dài như "Số lượng khám dự kiến"
   trước đây bị bể xuống 3-4 dòng vì cột quá hẹp so với chữ). */
.hc-view .table thead th,
.hc-modal .table thead th {
    background: var(--hc-paper);
    color: var(--hc-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    font-size: 11.5px;
    border-color: var(--hc-line);
    white-space: nowrap;
}
.hc-view .table tbody td,
.hc-modal .table tbody td {
    border-color: var(--hc-line);
    vertical-align: middle;
    padding-top: 12px;
    padding-bottom: 12px;
}
.hc-view .table tbody tr:hover {
    background: var(--hc-paper);
}
.hc-view .table tbody tr[role="button"]:hover {
    background: var(--hc-brand-light);
}

/* Viền trái đổi màu theo TRẠNG THÁI LỊCH (2026-09-..., HealthCheckupPoint::scheduleStatus()) —
   đã khám/hôm nay/sắp tới/còn xa — gắn vào bảng "Danh sách điểm khám" qua class trên <tr>, đọc
   ĐÚNG tiến độ thời gian thật thay vì chỉ tô 1 màu trang trí cố định. */
.hc-view .table tbody tr td:first-child {
    border-left: 3px solid transparent;
}
.hc-view .table tbody tr.hc-status-today td:first-child { border-left-color: var(--hc-red); }
.hc-view .table tbody tr.hc-status-soon td:first-child { border-left-color: var(--hc-amber); }
.hc-view .table tbody tr.hc-status-upcoming td:first-child { border-left-color: var(--hc-brand); }
.hc-view .table tbody tr.hc-status-muted td:first-child { border-left-color: var(--hc-line); }

/* Chấm + nhãn trạng thái lịch (2026-09-...) — dùng CHUNG cho bảng Danh sách VÀ TIMELINE (thay cho
   chấm TIMELINE cũ chỉ tô theo Ngoại viện/Nội viện, không phản ánh việc điểm khám đó đã qua/sắp
   tới hay còn xa). Loại khám (Ngoại viện/Nội viện) đã có badge riêng lo việc phân biệt đó rồi. */
.hc-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hc-status-dot-today, .hc-timeline-dot.hc-status-dot-today { background: var(--hc-red); }
.hc-status-dot-soon, .hc-timeline-dot.hc-status-dot-soon { background: var(--hc-amber); }
.hc-status-dot-upcoming, .hc-timeline-dot.hc-status-dot-upcoming { background: var(--hc-brand); }
.hc-status-dot-muted, .hc-timeline-dot.hc-status-dot-muted { background: var(--hc-ink-faint); }
.hc-status-label {
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.hc-status-label-today { color: var(--hc-red); }
.hc-status-label-soon { color: var(--hc-amber); }
.hc-status-label-upcoming { color: var(--hc-ink-soft); font-weight: 600; }
.hc-status-label-muted { color: var(--hc-ink-faint); font-weight: 600; }

/* Đổ màu GRADIENT liên tục đỏ nhạt → xanh nhạt theo MỨC ĐỘ CẬN KỀ THẬT (2026-09-..., biến
   --prox: 0 = hôm nay/gấp nhất .. 1 = từ 14 ngày trở lên/hết gấp — HealthCheckupPoint::
   scheduleStatus()['proximity'], gắn 1 LẦN trên <tr>/.hc-timeline-item rồi kế thừa xuống các
   phần tử con qua CSS custom property, không cần lặp lại ở từng chấm/nhãn con) — THAY CHO 3 bậc
   màu rời rạc (đỏ/hổ phách/xanh) ở trên khi có sẵn ngày cụ thể (không áp dụng cho "đã khám"/"chưa
   xếp lịch", 2 trường hợp đó không có "mức độ cận kề" để tính). Khai báo SAU 3 bậc rời rạc để đè
   lên đúng — trình duyệt cũ không hiểu color-mix() sẽ tự bỏ qua khai báo này (không phải lỗi), giữ
   nguyên 3 bậc màu rời rạc phía trên làm phương án dự phòng. */
.hc-status-dot-gradient {
    background: color-mix(in srgb, var(--hc-red) calc((1 - var(--prox, 0)) * 100%), var(--hc-brand) calc(var(--prox, 0) * 100%));
}
.hc-status-label-gradient {
    color: color-mix(in srgb, var(--hc-red) calc((1 - var(--prox, 0)) * 100%), var(--hc-brand-dark) calc(var(--prox, 0) * 100%));
    background: color-mix(in srgb, var(--hc-red-light) calc((1 - var(--prox, 0)) * 100%), var(--hc-brand-light) calc(var(--prox, 0) * 100%));
    padding: 2px 8px;
    border-radius: 999px;
}
.hc-view .table tbody tr.hc-status-gradient td:first-child {
    border-left-color: color-mix(in srgb, var(--hc-red) calc((1 - var(--prox, 0)) * 100%), var(--hc-brand) calc(var(--prox, 0) * 100%));
}

/* Badge — bo tròn hẳn thành viên thuốc, đổi riêng "Ngoại viện" (bg-soft-info) sang màu ngọc lam
   để phân biệt rõ với "Nội viện"/"Đang dùng" (bg-soft-success, vẫn dùng xanh thương hiệu). */
.hc-view .badge {
    border-radius: 20px;
    padding: 5px 11px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .01em;
}
.hc-view .bg-soft-info {
    background: var(--hc-teal-light) !important;
}
.hc-view .text-info {
    color: var(--hc-teal) !important;
}
.hc-view .bg-soft-success {
    background: var(--hc-brand-light) !important;
}
.hc-view .text-success {
    color: var(--hc-brand-dark) !important;
}

/* Nút — bo tròn hơn mặc định; btn-light (nút Sửa/Xoá icon nhỏ) đổi sang tông giấy bạc hà thay vì
   xám trung tính mặc định của theme, đồng bộ với bảng/thẻ phía trên. */
.hc-view .btn,
.hc-modal .btn {
    border-radius: 9px;
}
.hc-view .btn-light,
.hc-modal .btn-light {
    background: var(--hc-paper);
    border-color: var(--hc-line);
    color: var(--hc-ink-soft);
}
.hc-view .btn-light:hover,
.hc-modal .btn-light:hover {
    background: var(--hc-brand-light);
    color: var(--hc-brand-dark);
}
.hc-view .btn-light.text-danger:hover,
.hc-modal .btn-light.text-danger:hover {
    background: var(--hc-red-light);
    color: var(--hc-red) !important;
}

/* Modal chi tiết hợp đồng/công tác chuẩn bị/thực hiện/nhân sự/công ty/nội dung khám — bo góc lớn
   hơn, bóng đổ mềm hơn mặc định của theme, đồng bộ với thẻ/bảng phía trên. */
.hc-modal .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(15, 64, 41, .28);
}
.hc-modal .modal-header,
.hc-modal .modal-footer {
    border-color: var(--hc-line);
}

.hc-view .form-control,
.hc-view .form-select,
.hc-modal .form-control,
.hc-modal .form-select {
    border-color: var(--hc-line);
    border-radius: 8px;
}

/* 4 ô tóm tắt nhanh ở đầu trang "Kế hoạch KSK" (index.blade.php) — tổng hợp đồng/Ngoại viện/Nội
   viện/tổng số lượng khám dự kiến, tính thẳng từ $contracts đã tải sẵn.

   2026-09-... — thu gọn lại (trước đó nền trắng đơn sắc, xếp dọc icon/nhãn/số nên cao + nhiều
   khoảng trống thừa) + mỗi ô 1 màu nền nhạt riêng (không chỉ tô màu icon như trước) cho dễ phân
   biệt nhanh bằng mắt: xanh lá (Tổng hợp đồng) — xanh ngọc (Ngoại viện) — tím (Nội viện) — hổ
   phách (Tổng số lượng). Icon + số liệu xếp NGANG thay vì dọc để giảm chiều cao ô. */
.hc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.hc-stat {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hc-stat-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.hc-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .6);
}
.hc-stat-brand { background: var(--hc-brand-light); }
.hc-stat-brand .hc-stat-icon { color: var(--hc-brand-dark); }
.hc-stat-brand .hc-stat-label { color: var(--hc-brand-dark); }
.hc-stat-brand .hc-stat-value { color: var(--hc-brand-dark); }
.hc-stat-teal { background: var(--hc-teal-light); }
.hc-stat-teal .hc-stat-icon { color: var(--hc-teal); }
.hc-stat-teal .hc-stat-label { color: var(--hc-teal); }
.hc-stat-teal .hc-stat-value { color: var(--hc-teal); }
.hc-stat-violet { background: var(--hc-violet-light); }
.hc-stat-violet .hc-stat-icon { color: var(--hc-violet); }
.hc-stat-violet .hc-stat-label { color: var(--hc-violet); }
.hc-stat-violet .hc-stat-value { color: var(--hc-violet); }
.hc-stat-amber { background: var(--hc-amber-light); }
.hc-stat-amber .hc-stat-icon { color: var(--hc-amber); }
.hc-stat-amber .hc-stat-label { color: var(--hc-amber); }
.hc-stat-amber .hc-stat-value { color: var(--hc-amber); }
.hc-stat-value {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
@media (max-width: 860px) {
    .hc-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Chuyển đổi "Danh sách" / "Dòng thời gian" (tab Thông tin hợp đồng, index.blade.php) — cùng kiểu
   viên thuốc với .nav-tabs ở trên, tách riêng class vì đây không phải tab Bootstrap (không có
   .tab-pane/.fade đi kèm, chỉ ẩn/hiện bằng .d-none qua JS thường). */
.hc-view-switch {
    display: flex;
    gap: 4px;
    background: var(--hc-paper);
    padding: 5px;
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.hc-view-switch button,
.hc-view-switch a {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--hc-ink-soft);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.hc-view-switch button:hover:not(.active),
.hc-view-switch a:hover:not(.active) {
    background: #fff;
    color: var(--hc-ink);
}
.hc-view-switch button.active,
.hc-view-switch a.active {
    background: #fff;
    color: var(--hc-brand-dark);
    box-shadow: 0 1px 2px rgba(15, 64, 41, .08);
}

/* Dòng thời gian hợp đồng — 1 đường dọc nối các mốc, mỗi ngày 1 nhóm (nhãn ngày + thứ), mỗi hợp
   đồng 1 chấm tròn + thẻ nội dung. Màu chấm phân biệt Ngoại viện (ngọc lam)/Nội viện (xanh thương
   hiệu), cùng tông với badge ở bảng Danh sách. */
.hc-timeline {
    position: relative;
    padding-left: 4px;
}
.hc-timeline-group {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.hc-timeline-group:not(:last-child) {
    margin-bottom: 4px;
}
.hc-timeline-date {
    flex: 0 0 108px;
    display: flex;
    flex-direction: column;
    padding-top: 13px;
    text-align: right;
}
.hc-timeline-date-dom {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--hc-ink);
}
.hc-timeline-date-dow {
    font-size: 11.5px;
    color: var(--hc-ink-faint);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.hc-timeline-date-today .hc-timeline-date-dom {
    color: var(--hc-red);
}
.hc-timeline-date-today .hc-timeline-date-dow {
    color: var(--hc-red);
    font-weight: 700;
}
.hc-timeline-group-muted .hc-timeline-date-dom {
    color: var(--hc-ink-faint);
    font-weight: 600;
}
.hc-timeline-items {
    flex: 1;
    min-width: 0;
    border-left: 2px solid var(--hc-line);
    padding: 2px 0 2px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hc-timeline-item {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.hc-timeline-item:hover {
    background: var(--hc-paper);
    border-color: var(--hc-brand);
}
.hc-timeline-dot {
    position: absolute;
    left: -26px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--hc-line);
    flex-shrink: 0;
}
.hc-timeline-dot-brand {
    background: var(--hc-brand);
}
.hc-timeline-dot-teal {
    background: var(--hc-teal);
}
.hc-timeline-dot-muted {
    background: var(--hc-ink-faint);
}
/* Hàng trên cùng của 1 thẻ TIMELINE (2026-09-...) — giờ khởi hành (nếu có) BÊN TRÁI, nhãn trạng
   thái lịch (Hôm nay/Sắp tới/Còn N ngày/Đã khám/Chưa xếp lịch) BÊN PHẢI, xem
   _timeline_entry.blade.php. */
.hc-timeline-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.hc-timeline-time {
    font-weight: 700;
    font-size: 13px;
    color: var(--hc-brand-dark);
    font-variant-numeric: tabular-nums;
}
.hc-timeline-content {
    min-width: 0;
    flex: 1;
}
.hc-timeline-company {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--hc-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hc-timeline-meta {
    font-size: 12.5px;
    color: var(--hc-ink-soft);
    margin-top: 2px;
}

/* Hợp đồng nhiều điểm khám trên Dòng thời gian (2026-09-02, _timeline_entry.blade.php) — hiện
   dạng cây thư mục thay vì rải rác nhiều mốc riêng: dòng CHA tóm tắt hợp đồng (tái dùng nguyên
   .hc-timeline-item, chỉ thêm biến thể .hc-timeline-tree-parent — bấm để mở/thu gọn, KHÔNG mở
   modal), các dòng CON (.hc-timeline-child) thụt vào trong khung .hc-timeline-children có viền trái
   đứt nét riêng, tách khỏi viền trái liền nét của .hc-timeline-items ở tầng ngoài cho dễ phân biệt
   2 cấp bậc. */
.hc-timeline-tree-parent {
    border-style: dashed;
}
.hc-timeline-tree-parent:hover {
    background: var(--hc-brand-light);
    border-color: var(--hc-brand);
}
.hc-timeline-tree-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--hc-brand-light);
    color: var(--hc-brand-dark);
    white-space: nowrap;
}
.hc-timeline-tree-toggle {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--hc-ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: transform .18s ease, background-color .15s ease, color .15s ease;
}
.hc-timeline-tree-parent[aria-expanded="true"] .hc-timeline-tree-toggle {
    transform: rotate(180deg);
    background: var(--hc-brand);
    color: #fff;
}
.hc-timeline-children {
    margin: -2px 0 0 20px;
    padding: 2px 0 2px 20px;
    border-left: 2px dashed var(--hc-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hc-timeline-item.hc-timeline-child {
    background: var(--hc-paper);
    padding: 8px 12px;
}
.hc-timeline-item.hc-timeline-child:hover {
    background: #fff;
    border-color: var(--hc-brand);
}
.hc-timeline-time-wide {
    flex: 0 0 78px;
}
@media (max-width: 640px) {
    .hc-timeline-date {
        flex: 0 0 72px;
        text-align: left;
        padding-top: 11px;
    }
    .hc-timeline-items {
        padding-left: 16px;
    }
    .hc-timeline-dot {
        left: -22px;
    }
}

/* Tab "Thông tin chi tiết" (health-checkup/_point_detail_fields.blade.php) — khung "Đã nhập
   khi tạo điểm khám" bọc quanh 4 ô nhập cơ bản (vẫn là ô nhập THẬT, sửa được ngay tại đây — chỉ
   đóng khung + xếp 2 cột cho gọn), khớp bản thiết kế tham khảo đã duyệt (nền giấy bạc hà, viền
   đứt nét, nhãn nhỏ in hoa kèm icon dấu tích). */
.hc-readback {
    background: var(--hc-paper, #f3faf6);
    border: 1px dashed var(--hc-line, #d9ebe0);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.hc-readback-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui, inherit);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hc-ink-faint, #8aa091);
    margin-bottom: 14px;
}
/* Dạng XEM (mặc định) — chữ tĩnh 2 cột, xem .hc-readback-edit-btn bên dưới để lộ ra form thật. */
.hc-readback-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 0;
}
@media (max-width: 640px) {
    .hc-readback-grid {
        grid-template-columns: 1fr;
    }
}
/* Tiêu đề (dt) in đậm, nội dung (dd) KHÔNG in đậm (2026-09-..., đổi ngược lại so với trước — dd
   từng đậm hơn dt) — đã bỏ hẳn khung nhãn "Đã nhập khi tạo điểm khám" phía trên (.hc-readback-label
   cũ), xem _point_detail_fields.blade.php. */
.hc-readback-item dt {
    font-size: 11px;
    color: var(--hc-ink-faint, #8aa091);
    margin-bottom: 2px;
    font-weight: 700;
}
.hc-readback-item dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--hc-ink, #16281f);
    font-weight: 400;
}
/* 4 ô của .st-contract-fields (_point_fields.blade.php) là 1 dãy .mb-3 phẳng — ô đầu (Địa chỉ
   công ty) chiếm trọn hàng, 3 ô còn lại tự xếp 2 cột theo đúng thứ tự có sẵn. */
.hc-readback .st-contract-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.hc-readback .st-contract-fields > .mb-3:first-child {
    grid-column: 1 / -1;
}
.hc-readback .st-contract-fields .mb-3 {
    margin-bottom: 14px !important;
}
.hc-readback .st-contract-fields .mb-3:last-child {
    margin-bottom: 0 !important;
}
@media (max-width: 640px) {
    .hc-readback .st-contract-fields {
        grid-template-columns: 1fr;
    }
}

/* "Bổ sung chi tiết" — in đậm, chữ màu đen (2026-09-..., trước đó mờ/faint như 1 nhãn phụ). */
.hc-detail-subhead {
    font-family: var(--font-ui, inherit);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hc-ink, #16281f);
    font-weight: 700;
    margin: 4px 0 14px;
}

/* =====================================================================================
   Form "Thêm hợp đồng khám sức khỏe" (#addContractModal) — chia nhóm rõ ràng (2026-09-06).
   Trước đó là 1 danh sách trường phẳng rất dài (công ty + hồ sơ hợp đồng + điểm khám 1 nối
   nhau), khó quét mắt. Nay gom thành các thẻ .hc-form-section có tiêu đề + icon + mô tả ngắn,
   đặt trên nền giấy bạc hà cho tách bạch. CHỈ áp dụng trong modal này — không đụng các form
   khác. Giữ nguyên tông xanh lá thương hiệu của toàn module (biến --hc-* khai báo ở .hc-modal).
   ===================================================================================== */
.hc-add-contract-header {
    align-items: flex-start;
}
.hc-add-contract-title-wrap {
    display: flex;
    flex-direction: column;
}
.hc-add-contract-subtitle {
    font-size: 12px;
    color: var(--hc-ink-soft);
    margin-top: 3px;
}
.hc-modal .modal-body.hc-add-contract-body {
    background: var(--hc-paper);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hc-form-section {
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 12px;
}
.hc-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 16px;
    background: var(--hc-brand-light);
    border-bottom: 1px solid var(--hc-line);
    border-radius: 12px 12px 0 0;
}
.hc-form-section-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--hc-brand-dark);
    font-size: 15px;
}
.hc-form-section-heading {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 1px;
    min-width: 0;
}
.hc-form-section-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hc-brand-dark);
}
.hc-form-section-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--hc-ink-soft);
}
.hc-form-section-body {
    padding: 16px;
}
/* Bỏ khoảng cách đáy thừa của trường cuối trong mỗi nhóm — khung .hc-form-section-body đã tự
   lo padding đều 4 phía. _point_fields.blade.php đã tự đặt margin-bottom:0 cho ô cuối. */
.hc-form-section-body > .mb-3:last-child {
    margin-bottom: 0 !important;
}
.hc-form-section-body > .row:last-child > [class^="col-"] > .mb-3 {
    margin-bottom: 0 !important;
}
.hc-form-section-body .form-text {
    font-size: 11.5px;
    color: var(--hc-ink-faint);
    margin-top: 4px;
}
.hc-add-contract-body ~ .modal-footer {
    background: var(--hc-paper);
}
@media (max-width: 575px) {
    .hc-modal .modal-body.hc-add-contract-body {
        padding: 12px;
    }
    .hc-form-section-head,
    .hc-form-section-body {
        padding: 12px;
    }
}

/* Hình thức khám / Trạng thái hợp đồng — viên thuốc bo tròn hẳn (999px) + tách rời từng nút bằng
   khoảng cách thay vì nối liền cạnh như .btn-group mặc định của Bootstrap, khớp bản thiết kế tham
   khảo. !important vì .hc-modal .btn{border-radius:9px} (theme-override.css, phần .hc-view) có
   cùng độ ưu tiên (2 lớp) — thắng hay thua phụ thuộc thứ tự nạp, !important cho chắc chắn. */
.hc-pill-toggle .btn {
    border-radius: 999px !important;
    margin-left: 0 !important;
    margin-right: 6px;
}
.hc-pill-toggle .btn:last-child {
    margin-right: 0;
}

/* Hợp đồng nhiều điểm khám (2026-09-02, contractOverviewModal) — 2 tầng tab lồng nhau, phải khác
   kiểu dáng rõ để không lẫn: tầng NGOÀI (.hc-point-tabs, chọn ĐIỂM KHÁM) dạng viên thuốc nổi khối,
   nền đậm màu thương hiệu khi đang chọn; tầng TRONG (.hc-subtabs, chọn Thông tin chi tiết/Chuẩn
   bị/Thực hiện/Nhân sự bên trong 1 điểm khám) dạng gạch chân mảnh, cỡ chữ nhỏ hơn — đúng cấp bậc
   thông tin (chọn điểm khám trước, rồi mới chọn nội dung trong điểm khám đó).

   .hc-point-tabs vốn định kế thừa dạng viên thuốc có sẵn của ".hc-view .nav-tabs" — nhưng modal
   luôn bị JS chuyển ra làm con trực tiếp của <body> khi mở (xem ghi chú ở đầu file), nên không còn
   nằm trong .hc-view nữa, rule đó KHÔNG áp dụng được — phải khai báo riêng đầy đủ dưới .hc-modal. */
.hc-modal-subtitle {
    font-size: 12.5px;
    color: var(--hc-ink-soft);
    margin-top: 2px;
}
.hc-modal-subtitle .hc-point-count,
.hc-modal-subtitle .hc-total-quantity {
    font-weight: 700;
    color: var(--hc-brand-dark);
    font-variant-numeric: tabular-nums;
}
.hc-point-tabs-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hc-modal .nav-tabs.hc-point-tabs {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
    display: flex;
    gap: 4px;
    background: var(--hc-paper);
    padding: 5px;
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.hc-modal .nav-tabs.hc-point-tabs .nav-item {
    flex: none;
}
.hc-modal .nav-tabs.hc-point-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    color: var(--hc-ink-soft);
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.hc-modal .nav-tabs.hc-point-tabs .nav-link:hover:not(.active) {
    background: #fff;
    color: var(--hc-ink);
}
.hc-modal .nav-tabs.hc-point-tabs .nav-link.active {
    background: var(--hc-brand);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(29, 124, 58, .5);
}
.hc-point-tab-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--hc-line);
    color: var(--hc-ink-soft);
}
.hc-modal .nav-tabs.hc-point-tabs .nav-link.active .hc-point-tab-badge {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}
/* Nút tròn dấu "+" — thay cho nút "Thêm điểm khám" dạng chữ trước đây, đặt NGAY BÊN PHẢI dãy tab
   điểm khám (cùng hàng, xem .hc-point-tabs-row) thay vì tự xuống hàng riêng bên dưới. */
.hc-add-point-toggle {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--hc-brand);
    background: #fff;
    color: var(--hc-brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s, color .15s, transform .1s;
}
.hc-add-point-toggle:hover {
    background: var(--hc-brand);
    color: #fff;
}
.hc-add-point-toggle:active {
    transform: scale(.92);
}
.hc-add-point-form {
    background: var(--hc-paper);
    border-color: var(--hc-line) !important;
}
.hc-modal .hc-subtabs {
    background: transparent;
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--hc-line);
    gap: 20px;
    width: auto;
}
.hc-modal .hc-subtabs .nav-item {
    flex: none;
}
.hc-modal .hc-subtabs .nav-link {
    border-radius: 0;
    padding: 8px 2px 10px;
    font-size: 12.5px;
    background: transparent !important;
    color: var(--hc-ink-faint);
    border-bottom: 2px solid transparent;
}
.hc-modal .hc-subtabs .nav-link:hover:not(.active) {
    color: var(--hc-ink-soft);
}
.hc-modal .hc-subtabs .nav-link.active {
    color: var(--hc-ink) !important;
    background: transparent !important;
    border-bottom-color: var(--hc-ink);
}

/* Cảnh báo trùng lịch nhân sự (2026-09-02, ô "Người thực hiện"/"Tên nhân viên" trong Công tác
   chuẩn bị/Công tác thực hiện/Danh sách nhân sự) — phát hiện trùng thì bật NGAY popup dùng chung
   #staffConflictModal (showConflictPopup() ở index.blade.php), .st-staff-conflict chỉ còn giữ 1
   nút nhỏ cạnh ô để mở lại đúng popup đó sau khi đã bấm "Đóng", không hiện chữ tràn lan như trước. */
.st-staff-conflict {
    margin-top: 4px;
}
.st-staff-conflict-btn {
    appearance: none;
    border: 1px solid var(--hc-line);
    background: var(--hc-paper);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.5;
}
.st-staff-conflict-btn.is-strong {
    color: var(--hc-red, #c0392f);
    border-color: var(--hc-red-light, #fbe6e3);
    background: var(--hc-red-light, #fbe6e3);
}
.st-staff-conflict-btn.is-note {
    color: var(--hc-ink-faint, #8a9690);
}
.st-staff-conflict-btn:hover {
    filter: brightness(0.97);
}

/* Popup #staffConflictModal (2026-09-02) — đổi sang giao diện "sinh động", màu đỏ cảnh báo rõ ràng
   theo yêu cầu: đầu modal tô nền đỏ nhạt + icon tròn đỏ đặc, mỗi dòng cảnh báo trong thân modal là
   1 khối bo góc riêng (không chỉ chữ trần) — điểm khám khác/nghỉ phép: LUÔN cảnh báo, khối nền đỏ
   nhạt + viền trái đỏ đậm .is-warn; việc kế hoạch trùng ngày hạn chót: chỉ ghi chú, khối xám trung
   tính nhạt hơn .is-note — xem mục 3 phương án đã duyệt (checkStaffConflicts()). */
.hc-conflict-popup-header {
    background: var(--hc-red-light, #fbe6e3);
    border-bottom-color: #f3c6c0 !important;
}
.hc-conflict-popup-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hc-red, #c0392f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-style: normal;
    flex-shrink: 0;
}
.hc-conflict-popup-title {
    color: var(--hc-red, #c0392f);
    font-weight: 700;
    margin: 0;
}
.hc-conflict-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hc-conflict-list li {
    font-size: 13.5px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 9px;
    border-left: 3px solid transparent;
}
.hc-conflict-list li.is-warn {
    background: var(--hc-red-light, #fbe6e3);
    border-left-color: var(--hc-red, #c0392f);
    color: #7a2419;
    font-weight: 700;
}
.hc-conflict-list li.is-note {
    background: var(--hc-paper);
    border-left-color: var(--hc-line);
    color: var(--hc-ink-faint, #8a9690);
    font-weight: 500;
}
.hc-conflict-detail {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    opacity: .8;
}

/* ============================================================================================
   7 chức năng đề xuất áp dụng vào Kế hoạch KSK (2026-09-03) — phạm vi hợp đồng/chuẩn bị/thực
   hiện/nhân sự/kế hoạch, KHÔNG có phần thống kê khám (xem bản đặc tả đã duyệt).
   ============================================================================================ */

/* 1) Thanh tiến độ mini trên bảng "Danh sách điểm khám" (cột "Tiến độ"). */
.hc-progress-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hc-progress-mini-track {
    flex: 1;
    min-width: 60px;
    height: 6px;
    border-radius: 999px;
    background: var(--hc-line);
    overflow: hidden;
}
/* Màu thanh tiến độ theo BẬC % THẬT (2026-09-..., HealthCheckupPoint::progressTone()) — đỏ (0%,
   chưa làm gì)/hổ phách (đang làm dở)/xanh lá (100%, xong hết), thay cho luôn tô 1 màu xanh cố
   định dù mới bắt đầu hay đã xong. */
.hc-progress-mini-fill {
    height: 100%;
    border-radius: 999px;
}
.hc-progress-mini-fill.tone-empty { background: var(--hc-red); }
.hc-progress-mini-fill.tone-mid { background: var(--hc-amber); }
.hc-progress-mini-fill.tone-done { background: var(--hc-brand); }
.hc-progress-mini-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hc-ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 1) Thanh tiến độ + 3 mốc đầu mỗi tab "Điểm khám N" (_point_tab_pane.blade.php). */
.hc-point-progress {
    margin: 10px 0 4px;
}
.hc-progress-track {
    height: 7px;
    border-radius: 999px;
    background: var(--hc-line);
    overflow: hidden;
}
.hc-progress-fill {
    height: 100%;
    background: var(--hc-brand);
    border-radius: 999px;
    transition: width .2s ease;
}
.hc-progress-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.hc-progress-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hc-export-full-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--hc-brand);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.hc-export-full-btn:hover {
    background: var(--hc-brand-dark);
    color: #fff;
}
.hc-progress-step {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hc-paper);
    color: var(--hc-ink-faint);
    border: 1px solid var(--hc-line);
}
.hc-progress-step.is-active {
    background: var(--hc-brand-light);
    color: var(--hc-brand-dark);
    border-color: var(--hc-brand-light);
}
.hc-progress-step.is-done {
    background: var(--hc-brand);
    color: #fff;
    border-color: var(--hc-brand);
}

/* 2) Checkbox "Hoàn thành" trong bảng Công tác chuẩn bị/Công tác thực hiện — dòng đã xong gạch
   ngang + nhạt màu, dòng quá hạn (chưa xong) tô nền đỏ nhạt để nổi bật cần xử lý gấp. */
.st-detail-table tbody tr.st-row-done {
    background: var(--hc-paper);
}
.st-detail-table tbody tr.st-row-done td:not(:first-child):not(:nth-child(2)) input,
.st-detail-table tbody tr.st-row-done .st-detail-task-cell {
    color: var(--hc-ink-faint);
    text-decoration: line-through;
    text-decoration-color: var(--hc-ink-faint);
}
.st-detail-table tbody tr.st-row-done .st-detail-task-cell {
    text-decoration: none;
}
.st-detail-table tbody tr.st-row-overdue:not(.st-row-done) {
    background: var(--hc-red-light, #fbe6e3);
}
.st-detail-table tbody tr.st-row-overdue:not(.st-row-done) input {
    border-color: var(--hc-red, #c0392f);
}
.st-detail-done {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

/* Dòng đã "Chuyển thành việc" VÀ được người giao NGHIỆM THU (2026-09-..., "st-row-locked" — xem
   _detail_form_fields.blade.php/HealthCheckupPoint::syncFromAcceptedTask()) — khác dòng tự tick
   tay bình thường (.st-row-done ở trên, mờ + gạch ngang): dòng này khoá cứng không cho sửa nữa
   nhưng NỘI DUNG vẫn hiển thị rõ, tô nền xanh lá nhạt để phân biệt "đã xong vì được xác nhận thật"
   với "tự tick tay chưa chắc đã thật xong". CHỈ mang đúng 1 trong 2 lớp .st-row-done/.st-row-locked
   (xem tr.class ở _detail_form_fields.blade.php) nên không cần lo việc CSS ở trên đè lên. */
.st-detail-table tbody tr.st-row-locked {
    background: var(--hc-brand-light, #e6f4ec);
}
.st-detail-table tbody tr.st-row-locked td input {
    color: var(--hc-ink, #16281f);
    text-decoration: none;
    background: transparent;
    border-color: transparent;
    cursor: default;
}
.st-detail-table tbody tr.st-row-locked .st-detail-done {
    cursor: default;
}

/* 2)/7) Cột "Việc" — link tới việc thật đã tạo trong Sổ theo dõi, hoặc nút "Chuyển thành việc". */
.st-detail-task-cell {
    font-size: 12.5px;
}
.st-detail-task-link {
    font-weight: 700;
    color: var(--hc-brand-dark);
    text-decoration: none;
}
.st-detail-task-link:hover {
    text-decoration: underline;
}

/* 6) Thông tin hợp đồng (mã HĐ/ngày ký/giá trị/file) ở tiêu đề contractOverviewModal. */
.hc-contract-header {
    align-items: flex-start;
}
.hc-contract-detail {
    margin-top: 8px;
}
/* Trạng thái hoàn thành hợp đồng (2026-09-07) — dòng badge + nút ở tiêu đề contractOverviewModal. */
.hc-contract-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.hc-contract-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--hc-brand-dark);
    background: var(--hc-brand-light);
    border-radius: 999px;
    padding: 3px 10px;
}
.hc-contract-detail-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: 12.3px;
    color: var(--hc-ink-soft);
}
.hc-contract-detail-item strong {
    color: var(--hc-ink);
    font-weight: 700;
}
.st-cd-attachment {
    color: var(--hc-brand-dark);
    font-weight: 600;
    text-decoration: none;
}
.st-cd-attachment:hover {
    text-decoration: underline;
}
.hc-contract-detail-form {
    background: var(--hc-paper);
    border: 1px dashed var(--hc-line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
    max-width: 560px;
}
.hc-contract-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}
@media (max-width: 560px) {
    .hc-contract-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Ô gõ tìm Tỉnh/Thành phố + Phường/Xã (2026-09-03, partials/_address_picker.blade.php + JS
   public/assets/js/address-picker.js) — dùng chung toàn app (không riêng .hc-view), nên khai báo
   ở đây thay vì trong <style> cục bộ 1 trang, cùng khuôn mẫu .st-company-picker-list/.st-staff-menu
   đã có (nền trắng, viền + đổ bóng nhẹ, portal ra <body> định vị bằng JS). */
.st-address-picker-menu {
    position: absolute;
    z-index: 2000;
    background: #fff;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--brand-soft-bg, #e6f4ec);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 64, 41, .14);
}
.st-address-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    border: none;
    background: none;
    font-size: 14px;
    cursor: pointer;
}
.st-address-picker-item:hover,
.st-address-picker-item:focus {
    background: var(--brand-soft-bg, #e6f4ec);
}
.st-address-picker-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--st-ink-faint, #8a9690);
}

/* =====================================================================================
   MODULE: Chấm công (2026-09-03) — .att-view bọc resources/views/attendance/index.blade.php
   (trang chấm công cá nhân). Giờ vào/giờ ra thiết kế lại thành "punch card" nổi bật trong hero
   gradient + hiệu ứng ăn mừng (vòng tròn check vẽ tay + confetti canvas thuần, không thư viện
   ngoài) khi chấm công thành công — cùng khuôn mẫu module riêng .hc-view/.st-view đã có.
   ===================================================================================== */
.att-view {
    --att-ink: #16281f;
    --att-ink-soft: #52685c;
    --att-ink-faint: #8aa091;
    --att-line: #d9ebe0;
    --att-paper: #f3faf6;
    --att-brand: var(--brand-primary, #259d49);
    --att-brand-dark: var(--brand-primary-dark, #1d7c3a);
    --att-brand-light: var(--brand-soft-bg, #e6f4ec);
    --att-amber: #b45309;
    --att-amber-light: #fdf2e2;
}

.att-hero {
    position: relative;
    border-radius: 18px;
    padding: 26px 28px 22px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--att-brand-dark), var(--att-brand) 65%, #2fb862);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(21, 91, 42, .22);
}
.att-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 88% -10%, rgba(255, 255, 255, .16), transparent 45%),
                       radial-gradient(circle at 8% 118%, rgba(255, 255, 255, .10), transparent 40%);
    pointer-events: none;
}
.att-hero-info {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 20px;
}
.att-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .82);
    text-transform: capitalize;
}
.att-hero-eyebrow i { font-size: 14px; }
.att-hero-clock {
    font-size: 34px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1;
}
.att-hero-user {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .88);
}
.att-hero-user strong { color: #fff; }

/* Ca sáng/ca chiều (2026-09-03) — mỗi ngày chấm 2 lượt vào + 2 lượt ra (xem
   Attendance::nextPunch()), .att-shift-grid hiển thị song song 4 mốc giờ, .att-action-row chỉ có
   đúng 2 nút (Vào/Ra) dùng chung cho cả 2 ca — server tự biết đang cần chấm mốc nào tiếp theo, nút
   chỉ đổi nhãn/bật-tắt theo đó thay vì nhân đôi thành 4 nút riêng. */
.att-shift-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 640px) {
    .att-shift-grid { grid-template-columns: 1fr; }
}
.att-shift-col {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    padding: 14px 18px;
    transition: background .2s ease, border-color .2s ease;
}
.att-shift-col.is-complete {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .4);
}
.att-shift-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .78);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.att-shift-times {
    display: flex;
    gap: 22px;
}
.att-shift-time {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.att-shift-time-label {
    font-size: 11px;
    color: rgba(255, 255, 255, .68);
}
.att-shift-time-value {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.att-punch-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #fff;
    color: var(--att-amber);
}
.att-action-row {
    position: relative;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.att-action-btn {
    flex: 1 1 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 14.5px;
    font-weight: 700;
    background: #fff;
    color: var(--att-brand-dark);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    white-space: nowrap;
}
.att-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.att-action-btn:disabled {
    background: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .65);
    cursor: default;
    box-shadow: none;
    transform: none;
}
.att-action-btn-out {
    background: rgba(255, 255, 255, .94);
}
.att-done-banner {
    position: relative;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
}

.att-hero-meta {
    position: relative;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 12.3px;
    color: rgba(255, 255, 255, .85);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.att-hero-meta strong { color: #fff; }
.att-hero-meta .text-success { color: #baffd6 !important; }
.att-hero-meta .text-danger { color: #ffd3cc !important; }

.att-history-card { border-radius: 14px; }
.att-view .att-table thead th {
    font-weight: 800;
    color: var(--att-ink);
    background: var(--att-paper);
    border-bottom-width: 2px;
}
.att-view .att-table td { vertical-align: middle; }
.att-badge-late {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--att-amber-light);
    color: var(--att-amber);
    margin-left: 6px;
}

/* Hiệu ứng "chấm công hoàn thành" — overlay giữa màn hình, tự ẩn sau ~2.4s hoặc bấm ra ngoài để
   tắt sớm. Kích hoạt bởi JS đọc #attCelebrate (chỉ render khi vừa chấm công xong trong đúng request
   đó, xem session('attendance_celebrate') ở AttendanceController::checkIn()/checkOut() — flash 1
   lần rồi tự hết, F5 lại không lặp hiệu ứng). Confetti vẽ bằng canvas thuần, không phụ thuộc thư
   viện ngoài. */
.att-celebrate-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}
.att-celebrate-overlay.is-active { display: flex; }
.att-celebrate-overlay canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.att-celebrate-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 28px 40px;
    box-shadow: 0 20px 60px rgba(15, 64, 41, .28);
    text-align: center;
    opacity: 0;
    transform: scale(.85);
    animation: att-celebrate-card-in .45s cubic-bezier(.22, 1.4, .36, 1) forwards;
}
@keyframes att-celebrate-card-in {
    to { opacity: 1; transform: scale(1); }
}
.att-celebrate-check {
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    display: block;
}
.att-celebrate-check-circle {
    stroke: var(--att-brand, #259d49);
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: att-celebrate-circle .5s ease-out .1s forwards;
}
.att-celebrate-overlay[data-late="1"] .att-celebrate-check-circle {
    stroke: var(--att-amber, #b45309);
}
.att-celebrate-check-mark {
    stroke: var(--att-brand, #259d49);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: att-celebrate-mark .35s ease-out .5s forwards;
}
.att-celebrate-overlay[data-late="1"] .att-celebrate-check-mark {
    stroke: var(--att-amber, #b45309);
}
@keyframes att-celebrate-circle {
    to { stroke-dashoffset: 0; }
}
@keyframes att-celebrate-mark {
    to { stroke-dashoffset: 0; }
}
.att-celebrate-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--att-ink, #16281f);
}
.att-celebrate-sub {
    font-size: 13px;
    color: var(--att-ink-soft, #52685c);
    margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .att-celebrate-card, .att-celebrate-check-circle, .att-celebrate-check-mark {
        animation: none !important;
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
        transform: none !important;
    }
}

/* Dropdown chuông thông báo — không dùng .dropdown-item (theme xếp flex ngang nên tiêu đề
   và nội dung nằm cạnh nhau, chữ bị cắt). Panel riêng, rộng hơn khung 225px mặc định. */
.nxl-header .st-bell.dropdown-menu {
    width: 380px !important;
    min-width: 320px;
    max-width: calc(100vw - 16px);
    padding: 0;
    border: 1px solid #d4ecdf;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 64, 41, .16);
}
.st-bell-hd {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(118deg, #e8f6ee 0%, #f4faf6 55%, #fff 100%);
    border-bottom: 1px solid #d4ecdf;
}
.st-bell-hd b {
    display: block; font-size: 14.5px; font-weight: 800; color: #155b2a; line-height: 1.2;
}
.st-bell-hd small {
    display: block; font-size: 11.5px; color: #5c6f63; font-weight: 600; margin-top: 2px;
}
.st-bell-readall {
    border: 0; background: transparent; color: #1d7c3a; font-size: 12px; font-weight: 700;
    padding: 0; white-space: nowrap; cursor: pointer;
}
.st-bell-readall:hover { text-decoration: underline; }
.st-bell-list { max-height: 380px; overflow-y: auto; }
.st-bell-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; text-decoration: none; color: inherit;
    border-bottom: 1px solid #eef4f0; background: #fff;
}
.st-bell-item:last-child { border-bottom: 0; }
.st-bell-item:hover { background: #f4faf6; color: inherit; }
.st-bell-item.unread { background: #f4faf6; }
.st-bell-ic {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: #e6f4ec; color: #155b2a;
}
.st-bell-ic svg {
    width: 18px; height: 18px; display: block;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}
.st-bell-ic.leave { background: #e6f4ec; color: #155b2a; }
.st-bell-ic.task { background: #e8f0fe; color: #1d4ed8; }
.st-bell-ic.ksk { background: #fde8ee; color: #be123c; }
.st-bell-ic.doc { background: #fff4e0; color: #b45309; }
.st-bell-body { min-width: 0; flex: 1; }
.st-bell-title {
    display: block; font-size: 13.5px; font-weight: 800; color: #142219;
    line-height: 1.35; margin: 0 0 2px;
}
.st-bell-msg {
    display: block; font-size: 12.5px; color: #5c6f63; line-height: 1.4;
    margin: 0;
}
.st-bell-time { display: block; font-size: 11.5px; color: #8a9690; margin-top: 4px; font-weight: 600; }
.st-bell-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px;
    background: #259d49;
}
.st-bell-empty {
    padding: 28px 16px; text-align: center; color: #5c6f63; font-size: 13px;
}
.st-bell-empty svg {
    width: 28px; height: 28px; display: block; margin: 0 auto 8px;
    stroke: #259d49; fill: none; stroke-width: 1.8;
}
.st-bell-foot {
    display: block; text-align: center; padding: 10px 14px;
    font-size: 13px; font-weight: 800; color: #155b2a; text-decoration: none;
    background: #e6f4ec; border-top: 1px solid #d4ecdf;
}
.st-bell-foot:hover { background: #d4ecdf; color: #155b2a; }
@media (max-width: 575.98px) {
    .nxl-header .st-bell.dropdown-menu {
        width: auto !important;
        min-width: 0;
    }
}
/* Sắp xếp bảng dùng chung — mũi tên nhỏ ở góc phải tiêu đề cột. */
.st-view th.app-sortable-column {
    position: relative;
    padding-right: 30px !important;
}
.st-view .app-sort-btn {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 18px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: currentColor;
    opacity: .48;
    transform: translateY(-50%);
    cursor: pointer;
}
.st-view .app-sort-btn span::before,
.st-view .app-sort-btn span::after {
    content: "";
    position: absolute;
    left: 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.st-view .app-sort-btn span::before { top: 6px; border-bottom: 5px solid currentColor; }
.st-view .app-sort-btn span::after { bottom: 6px; border-top: 5px solid currentColor; }
.st-view .app-sort-btn:hover,
.st-view .app-sort-btn:focus-visible,
.st-view .app-sort-btn.is-active { opacity: 1; background: rgba(37, 157, 73, .12); }
.st-view .app-sort-btn[data-direction="asc"] span::after { opacity: .2; }
.st-view .app-sort-btn[data-direction="desc"] span::before { opacity: .2; }
.st-view .app-sort-btn:focus-visible { outline: 2px solid #259d49; outline-offset: 1px; }

/* Bảng dữ liệu trên điện thoại — gắn tự động bởi mobile-table-enhance.js. */
.st-mobile-swipe-hint { display: none; }
@media (max-width: 767.98px) {
    .st-mobile-scroll-shell {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .st-mobile-swipe-hint {
        position: sticky;
        left: 0;
        z-index: 8;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        width: 100%;
        min-height: 28px;
        padding: 4px 9px;
        border-bottom: 1px solid #dce9df;
        background: #f4faf6;
        color: #5f7165;
        font-size: 10.5px;
        font-weight: 700;
    }
    .st-mobile-swipe-hint i { color: #218642; font-size: 15px; font-style: normal; }
    .st-mobile-card-shell > .st-mobile-swipe-hint i { display: none; }

    /* Lưới nghiệp vụ: không làm mất cấu trúc ngày/cột, cố định cột nhận diện bên trái. */
    table.st-mobile-grid-table { margin-bottom: 0 !important; }
    table.st-mobile-grid-table thead th { position: sticky; top: 0; z-index: 3; }
    table.st-mobile-grid-table th:first-child,
    table.st-mobile-grid-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 4px 0 7px rgba(31, 73, 45, .08);
    }
    table.st-mobile-grid-table thead th:first-child { z-index: 5; }
    table.st-mobile-grid-table tbody td:first-child { background: #fff; }
    table.st-mobile-grid-table tbody tr:nth-child(even) td:first-child { background: #f8fbf9; }

    /* Bảng danh sách: mỗi dòng thành một thẻ, từng giá trị luôn đi cùng tên cột. */
    table.st-mobile-card-table,
    table.st-mobile-card-table tbody { display: block; width: 100% !important; min-width: 0 !important; }
    table.st-mobile-card-table { padding: 9px; border: 0 !important; background: #f3f7f4; }
    table.st-mobile-card-table thead {
        display: block;
        position: sticky;
        left: 0;
        z-index: 6;
        margin: -9px -9px 9px;
        padding: 7px 9px;
        overflow-x: auto;
        background: #fff;
        border-bottom: 1px solid #dae7dd;
    }
    table.st-mobile-card-table thead tr { display: flex; width: max-content; min-width: 100%; gap: 6px; }
    table.st-mobile-card-table thead th { display: none; }
    table.st-mobile-card-table thead th.app-sortable-column {
        display: block;
        position: relative;
        width: auto !important;
        min-width: 92px;
        padding: 7px 30px 7px 10px !important;
        border: 1px solid #d8e6dc !important;
        border-radius: 8px;
        background: #f5faf6 !important;
        color: #285b39 !important;
        font-size: 10.5px;
        text-align: left;
        white-space: nowrap;
    }
    table.st-mobile-card-table tbody tr {
        display: block;
        margin: 0 0 10px;
        overflow: hidden;
        border: 1px solid #d8e5dc;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(28, 73, 42, .055);
    }
    table.st-mobile-card-table tbody tr:last-child { margin-bottom: 0; }
    table.st-mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(94px, 36%) minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 39px;
        padding: 9px 11px !important;
        border: 0 !important;
        border-bottom: 1px solid #edf2ee !important;
        background: #fff !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }
    table.st-mobile-card-table tbody td:last-child { border-bottom: 0 !important; }
    table.st-mobile-card-table tbody td::before {
        content: attr(data-label);
        color: #607066;
        font-size: 10.5px;
        font-weight: 800;
        line-height: 1.4;
    }
    table.st-mobile-card-table tbody td[colspan] { display: block; text-align: center !important; }
    table.st-mobile-card-table tbody td[colspan]::before { display: none; }
    table.st-mobile-card-table tbody td .btn,
    table.st-mobile-card-table tbody td button,
    table.st-mobile-card-table tbody td a[role="button"] { min-height: 36px; }
    .nxl-container .nxl-content .main-content { padding-left: 12px !important; padding-right: 12px !important; }
    .page-header { padding-left: 14px !important; padding-right: 14px !important; }
    .modal-dialog { margin: 10px; }
    .modal-content { max-height: calc(100dvh - 20px); }
    .modal-body { overflow-y: auto; }
}

@media (max-width: 380px) {
    table.st-mobile-card-table tbody td { grid-template-columns: 1fr; gap: 3px; }
    .st-mobile-swipe-hint span { display: none; }
}

/* Rà soát giao diện mobile toàn hệ thống (2026-09-12): chuẩn hóa các khối dùng chung để những
   màn hình danh mục, nhân sự, văn bản, KSK, nghỉ phép và báo cáo không tràn ngang hoặc tạo vùng
   bấm quá nhỏ. Các lưới lịch/ma trận nghiệp vụ vẫn do mobile-table-enhance giữ dạng cuộn ngang. */
@media (max-width: 767.98px) {
    html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    .nxl-container, .nxl-content, .st-view { min-width: 0; max-width: 100%; }
    .nxl-container .nxl-content { padding-left: 10px; padding-right: 10px; }

    /* iOS không tự phóng trang khi người dùng chạm vào ô nhập. */
    .st-view input:not([type="checkbox"]):not([type="radio"]),
    .st-view select,
    .st-view textarea { max-width: 100%; font-size: 16px; }
    .st-view textarea { min-height: 92px; }

    /* Header/thanh công cụ được xuống dòng, giữ nút trong chiều rộng màn hình. */
    .st-view .card-header,
    .st-view .card-footer,
    .st-view .page-header-right,
    .st-view .btn-toolbar { flex-wrap: wrap; gap: 8px; }
    .st-view .card-header > *,
    .st-view .card-footer > * { min-width: 0; }
    .st-view .btn-group { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
    .st-view .btn-group > .btn { flex: 0 0 auto; }
    .st-view .btn:not(.btn-sm),
    .st-view button:not(.btn-sm) { min-height: 42px; }
    .st-view .btn-sm { min-height: 36px; }

    /* Tab dài chuyển thành một hàng cuộn thay vì ép chữ và phá bố cục. */
    .st-view .nav-tabs,
    .st-view .nav-pills { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .st-view .nav-tabs .nav-item,
    .st-view .nav-tabs .nav-link,
    .st-view .nav-pills .nav-item,
    .st-view .nav-pills .nav-link { flex: 0 0 auto; white-space: nowrap; }

    /* Modal vừa màn hình, footer không làm nút rơi ra ngoài. */
    .modal-dialog { width: auto; max-width: calc(100% - 20px); }
    .modal-header, .modal-body, .modal-footer { padding-left: 14px; padding-right: 14px; }
    .modal-footer { flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { margin: 0; }
    .dropdown-menu { max-width: calc(100vw - 20px); }

    /* Bộ lọc Bootstrap phổ biến: mỗi cột tự co đúng màn hình kể cả khi view có min-width cũ. */
    .st-view .row > [class*="col-"] { min-width: 0; }
    .st-view .input-group { flex-wrap: nowrap; max-width: 100%; }
    .st-view .input-group > .form-control,
    .st-view .input-group > .form-select { min-width: 0; }
    .st-view .form-control[style*="width"],
    .st-view .form-select[style*="width"] { max-width: 100% !important; }

    /* Phân trang dài cuộn trong chính nó, không tạo cuộn ngang toàn trang. */
    .st-view nav[aria-label*="Pagination"],
    .st-view nav[role="navigation"] { max-width: 100%; overflow-x: auto; }
    .st-view .pagination { width: max-content; min-width: 100%; justify-content: center; margin-bottom: 0; }
    .st-view .page-link { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }

    .st-view .alert { overflow-wrap: anywhere; }
    .st-view img, .st-view svg, .st-view canvas { max-width: 100%; }
    .st-view pre, .st-view code { overflow-wrap: anywhere; white-space: pre-wrap; }

    /* Các trang có KPI/bộ lọc viết riêng trước khi có hệ thống responsive dùng chung. */
    .hcns-nhansu .kpis,
    .hcns-baocao .kpis,
    .hcns-cchn .kpis,
    .hcns-baocao .cols,
    .st-audit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .hcns-nhansu .filters { display: grid; grid-template-columns: 1fr 1fr; }
    .hcns-nhansu .filters .search { grid-column: 1 / -1; width: 100%; min-width: 0; }
    .hcns-nhansu .filters .field { width: 100%; min-width: 0; height: 42px; }
    .hcns-nhansu .table-card,
    .hcns-hopdong .table-card,
    .hcns-cchn .table-card,
    .hcns-biendong .table-card,
    .hcns-xettv .table-card { overflow: visible; border: 0; background: transparent; }
}

@media (max-width: 420px) {
    .hcns-baocao .cols { grid-template-columns: 1fr !important; }
}