/* ==========================================
   T.I.M.E.S SYSTEM - MAIN STYLESHEET
   ========================================== */

* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            font-family: 'Segoe UI', Tahoma, sans-serif;

            background: linear-gradient(135deg, #1e3d2b 0%, #3e5c43 100%);

            height: 100vh;

            padding: 15px;

            overflow: hidden;

        }



        .container {

            max-width: 100%;

            height: 100%;

            margin: 0 auto;

            background: #fdfaf1;

            border-radius: 10px;

            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

            position: relative;

            overflow: hidden;

            display: grid;

            grid-template-columns: 65px 1fr;

            grid-template-rows: 1fr;

            transition: all 0.3s ease;

        }



        #login-overlay {

            grid-column: 1/-1;

            grid-row: 1/-1;

            z-index: 99999;

            border-radius: 10px;

            position: fixed;

            inset: 0;

            background: linear-gradient(135deg, #1e3d2b 0%, #2980b9 100%);

            display: flex;

            justify-content: center;

            align-items: center;

        }



        .login-box {

            background: white;

            padding: 40px;

            border-radius: 15px;

            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);

            width: 400px;

            text-align: center;

        }



        .login-box h2 {

            color: #2c3e50;

            margin-bottom: 25px;

            font-family: "Times New Roman", serif;

            font-size: 24px;

        }



        .login-input {

            width: 100%;

            padding: 12px;

            margin-bottom: 15px;

            border: 1px solid #bdc3c7;

            border-radius: 8px;

            font-size: 14px;

        }



        .btn-login {

            width: 100%;

            padding: 12px;

            background: #3498db;

            color: white;

            border: none;

            border-radius: 8px;

            font-weight: bold;

            cursor: pointer;

            font-size: 15px;

            transition: 0.3s;

        }



        .btn-login:hover {

            background: #2980b9;

        }



        /* === ICON-ONLY SIDEBAR WITH JS TOOLTIP === */

        .sidebar {

            grid-column: 1/2;

            grid-row: 1/-1;

            background: #f4f6f8;

            display: flex;

            flex-direction: column;

            height: 100%;

            min-height: 0;

            overflow: hidden;

            border-right: 1px solid #e5e7eb;

            z-index: 1000;

            align-items: stretch;

            width: 65px;

        }



        .sidebar-menu {

            flex: 1;

            min-height: 0;

            width: 100%;

            overflow-y: auto !important;

            overflow-x: hidden !important;

            padding: 8px 0;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 3px;

            scrollbar-width: thin;

            scrollbar-color: rgba(0, 0, 0, 0.15) transparent;

        }



        .sidebar-menu::-webkit-scrollbar {

            width: 3px;

        }



        .sidebar-menu::-webkit-scrollbar-track {

            background: transparent;

        }



        .sidebar-menu::-webkit-scrollbar-thumb {

            background: rgba(0, 0, 0, 0.15);

            border-radius: 3px;

        }



        .sidebar-menu::-webkit-scrollbar-thumb:hover {

            background: rgba(0, 0, 0, 0.3);

        }



        .group-title {

            display: none;

        }



        .sidebar button.nav-tab {

            width: 46px;

            height: 46px;

            border: 1px solid transparent;

            background: transparent;

            border-radius: 10px;

            padding: 0;

            color: #4b5563;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            box-sizing: border-box;

            transition: all 0.15s ease;

            flex-shrink: 0;

        }



        .sidebar button.nav-tab .icon {

            font-size: 21px;

            display: flex;

            align-items: center;

            justify-content: center;

            pointer-events: none;

            line-height: 1;

        }



        .sidebar button.nav-tab .text {

            display: none;

        }



        .sidebar button.nav-tab:hover {

            background: rgba(59, 130, 246, 0.08);

            border-color: rgba(59, 130, 246, 0.2);

            transform: scale(1.04);

        }



        .sidebar button.nav-tab:active {

            transform: scale(0.96);

        }



        .sidebar button.nav-tab.active {

            background: white;

            color: #1e3d2b;

            border-color: rgba(30, 61, 43, 0.15);

            box-shadow: 0 3px 10px rgba(30, 61, 43, 0.08);

            position: relative;

        }



        .sidebar button.nav-tab.active::after {

            content: '';

            position: absolute;

            left: 0;

            top: 22%;

            height: 56%;

            width: 3px;

            background: #1e3d2b;

            border-radius: 0 4px 4px 0;

        }



        /* Responsive sidebar heights for laptops and smaller screens */

        @media (max-height: 850px) {

            .sidebar button.nav-tab {

                width: 42px;

                height: 42px;

                border-radius: 9px;

            }

            .sidebar button.nav-tab .icon {

                font-size: 19px;

            }

            .sidebar-menu {

                gap: 2px;

                padding: 6px 0;

            }

        }



        @media (max-height: 750px) {

            .sidebar button.nav-tab {

                width: 38px;

                height: 38px;

                border-radius: 8px;

            }

            .sidebar button.nav-tab .icon {

                font-size: 17px;

            }

            .sidebar-menu {

                gap: 2px;

                padding: 4px 0;

            }

        }



        @media (max-height: 650px) {

            .sidebar button.nav-tab {

                width: 34px;

                height: 34px;

                border-radius: 7px;

            }

            .sidebar button.nav-tab .icon {

                font-size: 15px;

            }

            .sidebar-menu {

                gap: 1px;

                padding: 3px 0;

            }

        }



        /* Floating tooltip rendered by JS at body level */

        #sidebar-tooltip {

            position: fixed;

            left: 72px;

            padding: 6px 13px;

            background: #1f2937;

            color: white;

            border-radius: 8px;

            font-size: 13px;

            font-weight: 600;

            white-space: nowrap;

            pointer-events: none;

            opacity: 0;

            transition: opacity 0.15s;

            z-index: 99999;

            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);

        }

        #sidebar-tooltip::before {

            content: '';

            position: absolute;

            right: 100%;

            top: 50%;

            transform: translateY(-50%);

            border: 6px solid transparent;

            border-right-color: #1f2937;

        }



        .main-wrapper {

            grid-column: 2/3;

            grid-row: 1/-1;

            display: flex;

            flex-direction: column;

            height: 100vh;

            overflow: hidden;

        }



        .header-fixed-section {

            flex-shrink: 0;

            z-index: 100;

            background: white;

            border-bottom: 2px solid #e67e22;

        }



        .tab-scroll-content {

            flex-grow: 1;

            overflow-y: auto;

            padding: 15px;

        }



        .tab-content {

            display: none;

            animation: fadeIn 0.3s;

        }



        .tab-content.active {

            display: block;

        }



        #tab-schedule.active,
        #tab-stats.active,
        #tab-sat.active,
        #tab-chamcong.active,
        #tab-utils.active,
        #tab-kiemtra.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        #tab-thongke.active {
            display: flex;
            flex-direction: column;
            display: flex !important;
            flex-direction: column !important;
            flex: 1 !important;
            height: 100% !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

        /* Ẩn footer ở tất cả các tab trừ tab Trang Chủ */
        body:not(:has(#tab-home.active)) .main-footer {
            display: none !important;
        }

        /* Ép các tab chiếm đúng phần nội dung còn lại, không để tab-scroll-content cuộn ngoài */
        .tab-scroll-content:has(#tab-schedule.active),
        .tab-scroll-content:has(#tab-sat.active),
        .tab-scroll-content:has(#tab-chamcong.active),
        .tab-scroll-content:has(#tab-thongke.active),
        .tab-scroll-content:has(#tab-utils.active),
        .tab-scroll-content:has(#tab-kiemtra.active) {
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 4px 6px !important;
            height: 100% !important;
            min-height: 0 !important;
        }



        /* Tab fill toàn bộ chiều cao container cha */
        #tab-schedule.active,
        #tab-sat.active,
        #tab-utils.active,
        #tab-kiemtra.active,
        #tab-chamcong.active,
        #tab-thongke.active {
            flex: 1 !important;
            height: 100% !important;
            min-height: 0 !important;
        }



        @keyframes fadeIn {

            from {

                opacity: 0;

            }



            to {

                opacity: 1;

            }

        }



        /* ── BANNER ── */

        .hospital-banner-global {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 5px 15px;

        }



        .banner-left {

            display: flex;

            align-items: center;

            gap: 12px;

            flex-shrink: 0;

        }



        .banner-right {

            flex: 1;

            overflow: hidden;

            margin-left: 12px;

            display: flex;

            align-items: center;

            justify-content: flex-end;

            padding-right: 16px;

        }



        .banner-clock {

            text-align: center;

            color: #1a5fa8;

            background: transparent;

            border: none;

            padding: 5px 15px;

        }



        #clock-time {

            font-size: 22px;

            font-weight: 800;

            letter-spacing: 2px;

            line-height: 1.2;

            color: #0d47a1;

        }



        #clock-date {

            font-size: 11px;

            font-weight: 600;

            margin-top: 2px;

            color: #1a5fa8;

        }



        .banner-logo {

            width: 100px;

            height: 85px;

            object-fit: contain;

            cursor: pointer;

            transition: transform 0.2s;

        }

        .banner-logo:hover {

            transform: scale(1.05);

        }



        /* Thu gọn banner toàn bộ → lấy lại chiều cao nội dung */

        .banner-logo {

            width: 60px !important;

            height: 50px !important;

        }



        .banner-text h1 {

            font-size: 13px !important;

        }



        .banner-text h2 {

            font-size: 10px !important;

            letter-spacing: 1px !important;

        }



        .banner-text p {

            font-size: 10px !important;

        }



        #clock-time {

            font-size: 16px !important;

        }



        .hospital-banner-global {

            padding: 3px 10px !important;

        }



        .banner-text {

            text-align: center;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

        }



        .banner-text h1 {

            font-size: 16px;

            font-weight: 800;

            margin: 0 0 2px;

            text-transform: uppercase;

            letter-spacing: 1px;

            background: linear-gradient(to right, #0d47a1, #1565c0, #1a78c2);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }



        .banner-text h2 {

            font-size: 12px;

            font-weight: 700;

            margin: 0 0 4px;

            padding-bottom: 4px;

            text-transform: uppercase;

            letter-spacing: 2px;

            background: linear-gradient(to right, #1a5fa8, #27ae60);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            opacity: 0.9;

            border-bottom: 2px solid #2c3e50;

        }



        .banner-text p {

            color: white;

            font-size: 11px;

            font-weight: 600;

            margin: 0;

            padding: 2px 10px;

            text-transform: uppercase;

            background: linear-gradient(to right, #e67e22, #d35400);

            border-radius: 20px;

            letter-spacing: 1px;

            box-shadow: 0 2px 6px rgba(230, 126, 34, 0.4);

        }



        .global-marquee-container {

            display: flex;

            align-items: center;

            background: #f1f8e9;

            border-top: 1px solid #ddd;

            padding: 0 10px;

            gap: 10px;

        }



        .hamburger-in-marquee {

            background: none;

            border: none;

            font-size: 18px;

            color: #c0392b;

            cursor: pointer;

            flex-shrink: 0;

            padding: 2px 5px;

            transition: transform 0.2s;

        }



        .hamburger-in-marquee:hover {

            transform: scale(1.2);

        }



        #thong-bao-chay {

            flex: 1;

            font-weight: bold;

            color: #c0392b;

            font-size: 13px;

            padding: 4px 0;

        }



        .admin-btn-in-marquee {

            background: #e74c3c;

            color: white;

            border: none;

            padding: 4px 10px;

            border-radius: 20px;

            font-size: 10px;

            font-weight: bold;

            cursor: pointer;

            white-space: nowrap;

            flex-shrink: 0;

            transition: 0.3s;

        }



        .admin-btn-in-marquee:hover {

            background: #c0392b;

        }



        .logout-label {

            font-weight: normal;

            font-size: 9px;

            opacity: 0.9;

        }



        @media (max-width: 1200px) {

            .hospital-banner-global {

                padding: 3px 10px;

            }



            .banner-logo {

                width: 55px !important;

                height: 55px !important;

            }



            .banner-text h1 {

                font-size: 14px !important;

            }



            .banner-text h2 {

                font-size: 11px !important;

                letter-spacing: 1px !important;

                margin-bottom: 2px !important;

                padding-bottom: 2px !important;

            }



            .banner-text p {

                font-size: 10px !important;

                padding: 2px 8px !important;

            }



            .global-marquee-container {

                gap: 5px;

            }



            .hamburger-in-marquee {

                font-size: 16px !important;

            }



            #thong-bao-chay {

                font-size: 12px !important;

                padding: 3px 0 !important;

            }



            .admin-btn-in-marquee {

                padding: 2px 8px !important;

                font-size: 9px !important;

            }



            #clock-time {

                font-size: 18px !important;

            }



            #clock-date {

                font-size: 10px !important;

            }

        }



        /* ── DASHBOARD ── */

        .page-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 20px;

            padding-bottom: 15px;

            border-bottom: 2px solid #d4c5a9;

        }



        .page-header h2 {

            font-size: 1.3rem;

            font-weight: 700;

            margin: 0;

            color: #1e3d2b;

        }



        .dashboard-3col {
            display: grid;
            grid-template-columns: 1fr 1.3fr 1.3fr;
            gap: 15px;
        }

        @media (max-width: 1024px) {
            .dashboard-3col {
                grid-template-columns: 1fr;
            }
        }



        .dash-panel {

            background: white;

            border: 1px solid rgba(22, 46, 32, 0.08);

            border-radius: 12px;

            padding: 20px;

            box-shadow: 0 4px 20px -2px rgba(22, 46, 32, 0.06);

        }



        .dash-panel-title {

            font-size: 14px;

            font-weight: 700;

            color: #1b3a24;

            border-bottom: 1px solid #f3f4f6;

            padding-bottom: 10px;

            margin: 0 0 15px;

            text-transform: uppercase;

            font-family: 'Outfit', sans-serif;

            letter-spacing: 0.5px;

        }



        .stat-mini-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to right, #ffffff, #f9fafb);
            padding: 14px 16px;
            border-radius: 10px;
            margin-bottom: 12px;
            border-left: 4px solid #10b981;
            box-shadow: 0 4px 12px rgba(22, 46, 32, 0.03);
            border-top: 1px solid rgba(0, 0, 0, 0.02);
            border-right: 1px solid rgba(0, 0, 0, 0.02);
            border-bottom: 1px solid rgba(0, 0, 0, 0.02);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .stat-mini-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(22, 46, 32, 0.08);
            background: linear-gradient(to right, #ffffff, #f1f4f6);
        }



        .stat-mini-card .s-label {

            font-size: 13px;

            color: #6b7280;

            font-weight: 600;

        }



        .stat-mini-card .s-value {

            font-size: 18px;

            font-weight: 700;

            color: #111827;

            font-family: 'Outfit', sans-serif;

        }



        .stats-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 15px;

            margin-bottom: 20px;

        }



        .split-view {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 15px;

            margin-bottom: 20px;

        }



        .card {

            background: white;

            border: 1px solid rgba(22, 46, 32, 0.08);

            border-radius: 12px;

            padding: 20px;

            box-shadow: 0 4px 20px -2px rgba(22, 46, 32, 0.06);

        }



        .card-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 15px;

            padding-bottom: 10px;

            border-bottom: 1px solid #f3f4f6;

        }



        .card-title {

            font-size: 1rem;

            font-weight: 700;

            color: #1b3a24;

            text-transform: uppercase;

            font-family: 'Outfit', sans-serif;

            letter-spacing: 0.5px;

        }



        @media (max-width: 1000px) {



            .dashboard-3col,

            .stats-grid,

            .split-view {

                grid-template-columns: 1fr;

            }

        }



        /* ── FORM & BUTTONS ── */

        .form-section {

            background: #f8fafc;

            padding: 20px;

            border-radius: 12px;

            margin-bottom: 20px;

            border-left: 4px solid #3b82f6;

            border-top: 1px solid rgba(0, 0, 0, 0.01);

            border-right: 1px solid rgba(0, 0, 0, 0.01);

            border-bottom: 1px solid rgba(0, 0, 0, 0.01);

        }



        .form-group {

            margin-bottom: 12px;

            display: flex;

            gap: 10px;

            align-items: center;

        }



        .form-group label {

            min-width: 110px;

            font-weight: 600;

            color: #374151;

            font-size: 12px;

        }



        .form-group input,

        .form-group select,

        .form-group textarea {

            flex: 1;

            padding: 8px 12px;

            border: 1px solid #d1d5db;

            border-radius: 6px;

            font-size: 12px;

            transition: all 0.2s ease;

            outline: none;

            background: white;

            color: #1f2937;

        }



        .form-group input:focus,

        .form-group select:focus,

        .form-group textarea:focus {

            border-color: #10b981;

            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);

        }



        .form-group textarea {

            resize: vertical;

            min-height: 50px;

        }



        .button-group {

            display: flex;

            gap: 8px;

            margin-top: 8px;

            flex-wrap: wrap;

        }



        button {

            padding: 6px 12px;

            border: none;

            border-radius: 6px;

            cursor: pointer;

            font-size: 12px;

            font-weight: 600;

            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

            color: white;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

        }



        button:hover {

            transform: translateY(-1px);

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        }



        button:active {

            transform: translateY(1px) scale(0.98);

            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

        }



        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }

        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #047857 100%);
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #059669 0%, #065f46 100%);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }

        .btn-danger {
            background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
            box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
        }

        .btn-danger:hover {
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
        }

        .btn-warning:hover {
            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            box-shadow: 0 2px 6px rgba(107, 114, 128, 0.2);
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
            box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
        }

        .btn-purple {
            background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
            box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
        }

        .btn-purple:hover {
            background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }



        /* ── TABLE DEFAULT (ULTRA-COMPACT TOÀN HỆ THỐNG) ── */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 4px;
            box-shadow: 0 1px 4px rgba(22, 46, 32, 0.05);
            border-radius: 4px;
            font-size: 11.5px;
        }

        table thead tr:first-child th:first-child {
            border-top-left-radius: 4px;
        }

        table thead tr:first-child th:last-child {
            border-top-right-radius: 4px;
        }

        th {
            padding: 2px 6px !important;
            height: 22px !important;
            min-height: 22px !important;
            font-size: 11px !important;
            line-height: 18px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            background-color: #275d38 !important;
            color: #ffffff !important;
            border-bottom: 1.5px solid #cbd5e1 !important;
            box-sizing: border-box !important;
        }

        td {
            padding: 1px 6px !important;
            height: 20px !important;
            min-height: 20px !important;
            text-align: left;
            border-bottom: 1.5px solid #cbd5e1 !important;
            border-right: 1px solid #f1f5f9 !important;
            font-size: 11.5px !important;
            line-height: 18px !important;
            font-variant-numeric: tabular-nums;
            box-sizing: border-box !important;
        }

        td button,
        td .btn,
        td .btn-action,
        td .btn-danger,
        td .btn-sm,
        td .btn-warning,
        td .btn-primary,
        td .btn-success {
            margin: 0 1px !important;
            padding: 0 5px !important;
            height: 18px !important;
            line-height: 18px !important;
            font-size: 10.5px !important;
            border-radius: 3px !important;
        }



        tbody tr:nth-child(even) {

            background: #f9fafb;

        }



        tbody tr:first-child td {

            border-top: none !important;

        }



        tbody tr.editable-row,
        td.editable-row {
            transition: background-color 0.2s ease, transform 0.15s ease;
        }

        tbody tr.editable-row:hover,
        td.editable-row:hover {
            background: #f0f4f1 !important;
            cursor: pointer;
        }



        .action-buttons {

            display: flex;

            gap: 5px;

            flex-direction: column;

        }



        .action-buttons button {

            padding: 5px 8px;

            font-size: 11px;

        }



        /* ── SPLIT LAYOUT & SCROLLBAR ── */

        .split-layout {
            display: flex;
            gap: 15px;
            align-items: stretch;
            max-width: 100%;
        }



        .split-layout>div {

            min-width: 0 !important;

        }



        .sidebar-form {

            flex: 0 0 340px;

            background: #f1f2f6;

            padding: 15px;

            border-radius: 8px;

            border: 1px solid #dcdde1;

            position: sticky;

            top: 0;

            max-height: 100%;

            overflow-y: auto;


            max-height: calc(100vh - 240px) !important;
            overflow-y: auto !important;
        }



        .main-table {
            flex: 1;
            overflow: auto !important;
            max-height: calc(100vh - 240px) !important;
            min-width: 0 !important;
        }



        #tab-utils .main-table {

            max-height: 70vh !important;

            border: 1px solid #ddd;

            border-radius: 8px;

        }



        #tab-utils .split-layout>div>div:last-child {

            max-height: calc(100vh - 240px) !important;

            overflow-y: auto !important;

            border-radius: 0 0 6px 6px;

        }



        .busy-container {

            flex: 1 1 auto;

            height: 0;

            min-height: 150px;

            overflow: auto !important;

            background: white;

            border: 1px solid #bdc3c7;

            border-radius: 5px;

        }



        ::-webkit-scrollbar {

            width: 6px;

            height: 6px;

        }



        ::-webkit-scrollbar-thumb {

            background: #bdc3c7;

            border-radius: 5px;

        }



        ::-webkit-scrollbar-track {

            background: #f1f1f1;

        }



        .sidebar-form .form-group {

            flex-direction: row;

            align-items: center;

            margin-bottom: 2px;

        }

        .sidebar-form .form-group input,
        .sidebar-form .form-group select,
        .sidebar-form .form-group textarea {
            padding: 2px 4px;
            min-height: 24px;
        }




        .sidebar-form .form-group label {

            min-width: 100px;

            font-size: 12px;

            margin-bottom: 0;

        }



        .time-range {

            display: flex;

            gap: 5px;

            align-items: center;

            flex: 1;

        }



        .time-range input {

            width: 100%;

            text-align: center;

            font-weight: bold;

            color: #2c3e50;

        }



        .skills-box {

            background: #dfe4ea;

            border-radius: 5px;

            padding: 10px;

            margin-top: 10px;

        }



        .skills-header {

            text-align: center;

            font-size: 12px;

            font-weight: bold;

            color: #2f3640;

            margin-bottom: 10px;

            padding-bottom: 5px;

            border-bottom: 1px solid #bdc3c7;

        }



        .skills-grid {

            display: flex;

            gap: 10px;

        }



        .skills-col {

            flex: 1;

        }



        .skills-col h4 {

            font-size: 11px;

            margin-bottom: 8px;

            display: flex;

            align-items: center;

            gap: 5px;

            border-bottom: 1px solid #ccc;

            padding-bottom: 3px;

        }



        .checkbox-item {

            display: flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 6px;

            font-size: 12px;

            color: #2c3e50;

            cursor: pointer;

        }



        .scrollable-checkbox-list {

            max-height: 140px;

            overflow-y: auto;

            border: 1px solid #bdc3c7;

            padding: 8px;

            background: white;

            border-radius: 3px;

        }



        .tab-header-title {

            display: none;

            background: #ecf0f1;

            color: #2c3e50;

            padding: 10px;

            text-align: center;

            font-weight: bold;

            border-radius: 5px;

            margin-bottom: 15px;

            border: 1px solid #bdc3c7;

        }

        #todaySchedulePreview table thead th {

            top: 0px !important;

        }



        #rooms-table td:not(:nth-child(5)) {

            white-space: nowrap !important;

        }



        #rooms-table td:nth-child(5) {

            min-width: 250px !important;

            white-space: normal !important;

        }



        .dashboard-table-card {

            position: relative;

            padding: 0;

            border-radius: 8px;

            margin-bottom: 40px;

        }



        .dashboard-search-bar {

            position: sticky;

            top: 0;

            z-index: 920 !important;

            background: #fdfaf1;

            padding: 12px 15px;

            border-bottom: 2px solid #2d5a27;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .row-scheduled {

            color: #111827 !important;

        }



        .row-scheduled td {

            color: #111827 !important;

        }



        body.read-only-user #tab-sat input:not(#sat-search-bn),

        body.read-only-user #tab-sat button,

        body.read-only-user #tab-machines .sidebar-form,

        body.read-only-user #tab-machines td button,

        body.read-only-user #tab-procedures .sidebar-form,

        body.read-only-user #tab-procedures td button,

        body.read-only-user #tab-rooms .sidebar-form,

        body.read-only-user #tab-rooms td button,

        body.read-only-user #tab-staff .sidebar-form,

        body.read-only-user #tab-staff td button {

            display: none !important;

        }



        body.read-only-user #tab-patients .editable-row,

        body.read-only-user #tab-busy .editable-row,

        body.read-only-user #tab-sat .editable-row {

            pointer-events: none !important;

        }



        body.read-only-user #tab-busy div[style*="border-bottom: 2px solid"] {

            border-bottom: none !important;

            margin: 0 !important;

            padding: 0 !important;

        }



        /* ── MISC ── */

        .alert {

            padding: 15px;

            border-radius: 5px;

            margin-bottom: 15px;

            font-size: 13px;

        }



        .alert-success {

            background: #d4edda;

            color: #155724;

            border-left: 4px solid #28a745;

        }



        .alert-info {

            background: #d1ecf1;

            color: #0c5460;

            border-left: 4px solid #bee5eb;

        }



        .alert-danger {

            background: #f8d7da;

            color: #721c24;

            border-left: 4px solid #f5c6cb;

        }



        .grid-3 {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 20px;

        }



        .spinner {

            border: 4px solid #ecf0f1;

            border-top: 4px solid #3498db;

            border-radius: 50%;

            width: 40px;

            height: 40px;

            animation: spin 1s linear infinite;

            margin: 0 auto 20px;

        }



        @keyframes spin {

            from {

                transform: rotate(0deg);

            }



            to {

                transform: rotate(360deg);

            }

        }



        .dropdown {

            flex: 1;

            position: relative;

            display: inline-block;

        }



        .dropdown .dropbtn {

            width: 100%;

            height: 100%;

            padding: 15px 20px;

            border: none;

            background: transparent;

            color: #e8f5e9;

            cursor: pointer;

            font-size: 13px;

            font-weight: bold;

            transition: all 0.3s;

            white-space: nowrap;

            text-align: center;

        }



        .dropdown:hover .dropbtn {

            background: rgba(241, 196, 15, 0.2);

        }



        .dropdown-content {

            display: none;

            position: absolute;

            background-color: #2d5a27;

            min-width: 160px;

            width: 100%;

            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

            z-index: 10000;

            border-radius: 0 0 8px 8px;

            overflow: hidden;

            top: 100%;

            left: 0;

        }



        .dropdown:hover .dropdown-content {

            display: block;

        }



        .dropdown-content button.nav-tab {

            width: 100%;

            text-align: left;

            padding: 12px 20px;

            border-radius: 0;

            border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        }



        .dropdown-content button.nav-tab:hover {

            background: #3e5c43;

            padding-left: 25px;

        }



        .dropdown-content button.nav-tab.active {

            background: #f1c40f;

            color: #1e3d2b;

            border-left: 4px solid #d35400;

            border-bottom: none;

        }



        .dropdown-content button.nav-tab[style*="display: inline-block"] {

            display: block !important;

        }



        .dropdown-content button.nav-tab[style*="display: none"] {

            display: none !important;

        }







        @media (max-width: 1450px) {

            nav.sticky-nav button {

                padding: 12px 8px !important;

                font-size: 11.5px !important;

                letter-spacing: -0.3px;

            }

        }



        @media (max-width: 1366px) {}



        @media (max-width: 1250px) {

            nav.sticky-nav button {

                padding: 10px 4px !important;

                font-size: 10.5px !important;

            }

        }



        .input-ready-time::-webkit-calendar-picker-indicator {

            display: none !important;

            -webkit-appearance: none;

        }



        #custom-success-popup button:hover {

            background: #219653;

            transform: translateY(-2px);

        }



        @keyframes popIn {

            from {

                transform: scale(0.7);

                opacity: 0;

            }



            to {

                transform: scale(1);

                opacity: 1;

            }

        }



        /* ── FOOTER ── */

        .tab-content.active,

        .page.active {

            display: flex !important;

            flex-direction: column;

            flex: 1;

            min-height: 0;

        }



        .main-footer {

            background-color: #1e3d2b;

            color: #ecf0f1;

            padding: 10px 20px 10px !important;

            font-size: 12px;

            margin-top: auto !important;

            margin-bottom: 0 !important;

            border-top: 2px solid #e67e22;

            border-radius: 0 0 8px 8px;

            height: auto !important;

            display: flex !important;

            flex-direction: column;

            flex-shrink: 0 !important;

        }



        .footer-content {

            flex: 1 1 auto;

            min-height: 0;

            display: grid;

            grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);

            gap: 25px;

            margin: 0;

        }



        .footer-col {

            min-width: 0;

        }



        .footer-col h4 {

            color: #f1c40f;

            margin: 0 0 8px;

            font-size: 14px;

            line-height: 1.2;

            text-transform: uppercase;

            font-weight: bold;

        }



        .footer-col p {

            margin: 4px 0;

            line-height: 1.3;

            color: #bdc3c7;

            font-size: 12px;

            min-width: 0;

        }



        .footer-col ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .footer-col ul li {

            margin-bottom: 4px;

            line-height: 1.22;

            min-width: 0;

        }



        .footer-col ul li a {

            color: #bdc3c7;

            text-decoration: none;

            transition: color 0.2s;

            font-size: 12px;

            min-width: 0;

        }



        .footer-col ul li a:hover {

            color: #f1c40f;

            text-decoration: underline;

        }



        .footer-col h4,

        .footer-col p,

        .footer-col ul li a {

            display: flex;

            align-items: flex-start;

            gap: 5px;

        }



        .footer-col p span:last-child,

        .footer-col ul li a span:last-child {

            min-width: 0;

        }



        .f-icon {

            width: 18px;

            min-width: 18px;

            text-align: center;

            flex-shrink: 0;

        }



        .footer-bottom {

            text-align: center;

            margin-top: 8px !important;

            padding: 5px 0 0 !important;

            border-top: 1px solid rgba(255, 255, 255, 0.2) !important;

            font-size: 12px !important;

            line-height: 1.3 !important;

            color: #bdc3c7 !important;

            display: block !important;

            width: 100% !important;

            clear: both !important;

        }



        @media (max-width: 1200px) {

            .footer-content {

                gap: 12px;

            }



            .main-footer {

                padding: 12px 15px 12px !important;

            }



            .footer-col h4 {

                margin-bottom: 6px;

                font-size: 13px;

            }

        }



        @media print {



            nav.sticky-nav,

            .tab-header-title,

            #schedule-search-input,

            .btn-primary,

            .btn-success,

            .btn-danger,

            .btn-purple,

            .btn-warning,

            .btn-secondary,

            label,

            .header-fixed-section {

                display: none !important;

            }



            body {

                background: white;

                padding: 0;

                height: auto;

                overflow: visible;

            }



            .container {

                box-shadow: none;

                max-width: 100%;

                height: auto;

                display: block;

                overflow: visible;

            }



            #schedule-table {

                box-shadow: none;

                border: 1px solid #000;

            }



            #schedule-table th {

                position: sticky !important;

                top: 0 !important;

                z-index: 20 !important;

                background: #275d38 !important;

                box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

            }

        }



        /* ── STICKY ACTION BAR ── */

        .sticky-action-bar {

            flex-shrink: 0 !important;

            z-index: 900 !important;

            background-color: #fdfaf1 !important;

            padding: 10px 20px !important;

            border-top: 2px solid #27ae60 !important;

            border-radius: 0 0 8px 8px !important;

            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

        }



        /* Thu gọn thẻ BN trong tab Thứ 7 → hiển thị được nhiều BN hơn */

        #sat-patient-list div[id^="sat-bn-"] {

            padding: 3px 8px !important;

            margin-bottom: 2px !important;

        }



        #sat-patient-list b {

            font-size: 12px !important;

        }



        #sat-patient-list label {

            font-size: 11px !important;

        }



        #sat-patient-list input[type=checkbox] {

            width: 12px !important;

            height: 12px !important;

        }



        #sat-patient-list .input-ready-time {

            font-size: 11px !important;

            padding: 1px 2px !important;

        }



        /* Thu gọn bảng ở tất cả tab → hiển thị nhiều dữ liệu hơn */
        #schedule-table th, #machines-table th, #procedures-table th, #staff-table th, #rooms-table th,
        #busy-staff-table th, #busy-pat-table th, #leave-pat-table th, #table-count th, #table-error-time th, #table-error-other th,
        #hl-table th, #table-admin-employees th, #stats-unscheduled-table th, #stats-staff-table th {
            padding: 2px 5px !important;
            font-size: 11px !important;
            height: 22px !important;
            min-height: 22px !important;
            line-height: 18px !important;
            box-sizing: border-box !important;
        }

        #schedule-table td, #machines-table td, #procedures-table td, #staff-table td, #rooms-table td,
        #busy-staff-table td, #busy-pat-table td, #leave-pat-table td, #table-count td, #table-error-time td, #table-error-other td,
        #hl-table td, #table-admin-employees td, #stats-unscheduled-table td, #stats-staff-table td {
            padding: 1px 5px !important;
            font-size: 11.5px !important;
            height: 20px !important;
            min-height: 20px !important;
            line-height: 18px !important;
            border-bottom: 1.5px solid #cbd5e1 !important;
            border-right: 1px solid #f1f5f9 !important;
            box-sizing: border-box !important;
        }

        /* ================================================================= */
        /* 🚀 GHIM CỨNG TIÊU ĐỀ BẢNG ULTRA-COMPACT */
        /* ================================================================= */

        /* 1. Tạo "Hố cuộn" có giới hạn chiều cao để bật thanh cuộn nội bộ */
        #tab-schedule div[style*="overflow-y:auto"],
        #tab-schedule div[style*="overflow-y: auto"],
        .table-sticky-container,
        .table-container-scroll {
            height: calc(100vh - 350px) !important;
            max-height: 65vh !important;
            overflow-y: auto !important;
            position: relative !important;
        }

        /* 2. Ép bảng tách viền (Cực kỳ quan trọng để dính được tiêu đề) */
        table,
        #schedule-table,
        #patients-table {
            border-collapse: separate !important;
            border-spacing: 0 !important;
            width: 100% !important;
        }

        /* 3. Ghim Tiêu Đề Siêu Gọn */
        table thead th,
        th {
            position: -webkit-sticky !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 850 !important;
            background-color: #275d38 !important;
            color: white !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            background-clip: padding-box !important;
            border-bottom: 1.5px solid #cbd5e1 !important;
            padding: 2px 6px !important;
            vertical-align: middle !important;
            font-size: 11px !important;
            height: 22px !important;
            min-height: 22px !important;
            line-height: 18px !important;
        }



        /* Tab Bệnh nhân: ghim thanh tìm kiếm thành một cụm với tiêu đề bảng */

        .patients-table-wrap {

            position: relative !important;

            padding-top: 0 !important;

        }



        .patients-search-bar {

            position: -webkit-sticky !important;

            position: sticky !important;

            top: 0 !important;

            z-index: 920 !important;

            margin-bottom: 0 !important;

            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;

        }



        #patients-table {
            margin-top: 0 !important;
        }

        /* ── RIÊNG BẢNG BỆNH NHÂN: DÒNG THOÁNG RỘNG, DỄ NHÌN ── */
        #patients-table thead th {
            top: 56px !important;
            z-index: 890 !important;
            padding: 5px 8px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            height: 30px !important;
            min-height: 30px !important;
            line-height: 20px !important;
            box-sizing: border-box !important;
        }

        #patients-table tbody td {
            padding: 5px 8px !important;
            font-size: 12.5px !important;
            height: 32px !important;
            min-height: 32px !important;
            line-height: 20px !important;
            border-bottom: 1.5px solid #cbd5e1 !important;
            border-right: 1px solid #f1f5f9 !important;
            box-sizing: border-box !important;
        }

        #patients-table tbody td strong {
            font-size: 13px !important;
            color: #0f172a !important;
        }

        #patients-table tbody td button {
            height: 22px !important;
            line-height: 22px !important;
            padding: 0 8px !important;
            font-size: 11.5px !important;
            margin: 0 !important;
        }

        /* ── RIÊNG BẢNG NHÂN SỰ ADMIN: GỌN GÀNG, THẨM MỸ ── */
        #table-admin-employees thead th {
            padding: 3px 6px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            height: 24px !important;
            min-height: 24px !important;
            line-height: 20px !important;
            box-sizing: border-box !important;
        }

        #table-admin-employees tbody td {
            padding: 2px 6px !important;
            font-size: 11.5px !important;
            height: 24px !important;
            min-height: 24px !important;
            line-height: 20px !important;
            vertical-align: middle !important;
            border-bottom: 1.5px solid #cbd5e1 !important;
            border-right: 1px solid #f1f5f9 !important;
            box-sizing: border-box !important;
        }



        /* Tab Xếp lịch: toolbar gọn một dòng, nhường chiều cao cho bảng lịch trình */

        .schedule-compact-header {

            flex: 0 0 auto !important;

        }



        .schedule-compact-header>div {

            flex-wrap: nowrap !important;

            overflow: hidden;

        }



        .schedule-compact-header label,

        .schedule-compact-header button,

        .schedule-title-inline {

            white-space: nowrap !important;

        }



        .schedule-compact-header #schedule-result:empty {

            display: none !important;

        }



        #tab-schedule .schedule-table-wrap {

            height: auto !important;

            max-height: none !important;

            flex: 1 1 auto !important;

            min-height: 0 !important;

            overflow-y: auto !important;

        }



        #schedule-table {

            margin-top: 0 !important;

        }



        /* Tab Tiện ích: header + nạp file cùng dòng, bảng tự cuộn và ghim tiêu đề */

        #tab-utils.active {

            min-height: 0;

        }



        .utils-compact-header {

            position: sticky !important;

            top: -15px !important;

            z-index: 900 !important;

            flex-shrink: 0 !important;

        }



        .utils-split-layout {

            flex: 1 1 auto !important;

            min-height: 0 !important;

            align-items: stretch !important;

            margin-bottom: 0 !important;

        }



        .utils-split-layout>div {

            min-height: 0 !important;

        }



        .utils-table-scroll {

            min-height: 0 !important;

            overflow-y: auto !important;

            position: relative !important;

        }



        .utils-table-scroll table {

            margin-top: 0 !important;

        }



        .utils-table-scroll thead th {

            top: 0 !important;

            z-index: 880 !important;

        }



        /* ============================================================ */

        /* 📌 ĐÓNG ĐINH THANH PHÂN TRANG XUỐNG ĐÁY MÀN HÌNH (BẢN FIX) */

        /* ============================================================ */



        /* 1. Phá vỡ lệnh giấu nội dung của khung bảng, thả tự do cho thanh phân trang */

        .dashboard-table-card {

            overflow: visible !important;

        }



        /* 2. Phân trang - không sticky để tránh che nút action */

        #home-pagination-container,

        #sched-pagination-container,

        #sched-pagination {

            background: #fdfaf1 !important;

            border-top: 1px solid #c8d6b2 !important;

            margin: 0 !important;

        }



        /* Final header sizing: prevent the logo, unit name and clock from being clipped. */

        body {

            min-height: 100vh !important;

            height: 100vh !important;

        }



        .container {

            height: calc(100vh - 30px) !important;

            min-height: 0 !important;

        }



        .main-wrapper {

            height: 100% !important;

            min-height: 0 !important;

            overflow: hidden !important;

        }



        .header-fixed-section {

            overflow: visible !important;

            flex: 0 0 auto !important;

            min-height: 134px !important;

            background: #fff !important;

        }



        .hospital-banner-global {

            min-height: 94px !important;

            padding: 12px 18px 10px !important;

            display: grid !important;

            grid-template-columns: minmax(0, 1fr) auto !important;

            column-gap: 16px !important;

            align-items: center !important;

            overflow: visible !important;

        }



        .banner-left {

            min-width: 0 !important;

            gap: 14px !important;

            overflow: visible !important;

        }



        .banner-logo {

            width: 78px !important;

            height: 68px !important;

            object-fit: contain !important;

            flex: 0 0 78px !important;

        }



        .banner-text {

            min-width: 0 !important;

            align-items: flex-start !important;

            text-align: left !important;

            overflow: visible !important;

        }



        .banner-text h1 {

            font-size: 16px !important;

            line-height: 1.18 !important;

            margin: 0 0 3px !important;

            white-space: normal !important;

        }



        .banner-text h2 {

            font-size: 13px !important;

            line-height: 1.18 !important;

            margin: 0 0 5px !important;

            padding-bottom: 3px !important;

            white-space: normal !important;

        }



        .banner-text p {

            font-size: 11px !important;

            line-height: 1.25 !important;

            padding: 3px 10px !important;

            white-space: normal !important;

        }



        .banner-right {

            flex: 0 0 auto !important;

            margin-left: 0 !important;

            padding-right: 12px !important;

            overflow: visible !important;

            justify-content: flex-end !important;

        }



        .banner-clock {

            min-width: 150px !important;

            padding: 4px 8px !important;

            text-align: center !important;

        }



        #clock-time {

            display: block !important;

            font-size: 20px !important;

            line-height: 1.15 !important;

            white-space: nowrap !important;

        }



        #clock-date {

            display: block !important;

            font-size: 12px !important;

            line-height: 1.25 !important;

            white-space: nowrap !important;

        }



        .global-marquee-container {

            min-height: 40px !important;

            display: grid !important;

            grid-template-columns: minmax(0, 1fr) auto !important;

            align-items: center !important;

            overflow: hidden !important;

        }



        #thong-bao-chay {

            min-width: 0 !important;

            line-height: 1.25 !important;

            padding: 4px 0 !important;

        }



        @media (max-width: 900px) {

            .hospital-banner-global {

                grid-template-columns: 1fr !important;

                row-gap: 6px !important;

            }



            .banner-right {

                justify-content: flex-start !important;

            }



            .banner-clock {

                min-width: 0 !important;

                text-align: left !important;

            }

        }

        /* ================= PREMIUM UI UPGRADES ================= */

        /* Table Row Hover & Aesthetics */

        table tbody tr {
            transition: background-color 0.2s ease;
        }

        table tbody tr:hover td {
            background-color: rgba(46, 204, 113, 0.08) !important;
            cursor: default;
        }



        /* Glassmorphism Header & Sticky Table Headers */

        .header-fixed-section {

            background: rgba(255, 255, 255, 0.85) !important;

            backdrop-filter: blur(12px);

            -webkit-backdrop-filter: blur(12px);

            border-bottom: 1px solid rgba(230, 126, 34, 0.3) !important;

            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

        }



        table th {

            background: rgba(242, 242, 242, 0.9) !important;

            backdrop-filter: blur(8px);

            -webkit-backdrop-filter: blur(8px);

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);

            z-index: 10;

        }



        /* Smooth Tab Transitions */

        .tab-content {
            animation: smoothSlideUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
        }

        @keyframes smoothSlideUp {

            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }

        }



        /* Forms & Inputs Depth */

        .form-section,
        .sidebar-form {

            background: rgba(255, 255, 255, 0.95);

            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

            border-radius: 10px;

            border: 1px solid rgba(0, 0, 0, 0.04);

            transition: box-shadow 0.3s;


            max-height: calc(100vh - 240px) !important;
            overflow-y: auto !important;
        }

        .form-section:hover,
        .sidebar-form:hover {
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        }



        .form-group input,
        .form-group select,
        .form-group textarea {

            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

            border: 1px solid #ddd;

        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {

            border-color: #27ae60;

            box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);

            outline: none;

        }



        /* Ripple Buttons */

        button {
            position: relative;
            overflow: hidden;
        }

        button::after {

            content: '';
            position: absolute;
            top: 50%;
            left: 50%;

            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.4);

            opacity: 0;
            border-radius: 100%;

            transform: scale(1, 1) translate(-50%, -50%);
            transform-origin: 50% 50%;

        }

        button:focus:not(:active)::after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {

            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }

            100% {
                transform: scale(30, 30);
                opacity: 0;
            }

        }

        /* --- PREMIUM TOAST NOTIFICATION SYSTEM --- */
        .toast-container {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 1000000;
            display: flex;
            flex-direction: column;
            gap: 12px;
            pointer-events: none;
        }

        .toast-card {
            background: rgba(255, 255, 255, 0.95);
            border-left: 5px solid #1abc9c;
            color: #2c3e50;
            padding: 14px 18px;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 280px;
            max-width: 420px;
            font-size: 13px;
            font-weight: 600;
            backdrop-filter: blur(8px);
            pointer-events: auto;
            transform: translateX(120%);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .toast-card.show {
            transform: translateX(0);
            opacity: 1;
        }

        .toast-card.hide {
            transform: translateX(120%);
            opacity: 0;
        }

        .toast-card.success {
            border-left-color: #2ecc71;
            background: linear-gradient(135deg, #ffffff, #f4fbf7);
        }

        .toast-card.error {
            border-left-color: #e74c3c;
            background: linear-gradient(135deg, #ffffff, #fdf6f5);
        }

        .toast-card.info {
            border-left-color: #3498db;
            background: linear-gradient(135deg, #ffffff, #f6faff);
        }

        .toast-icon {
            font-size: 18px;
            flex-shrink: 0;
        }

        .toast-message {
            flex-grow: 1;
            line-height: 1.4;
        }

        /* --- USER DROPDOWN MENU STYLE --- */
        #nav-btn-user:hover {
            background: #cbd5e1 !important;
            border-color: #94a3b8 !important;
        }

        .user-dropdown-menu a {
            display: flex;
        }

        .user-dropdown-menu a:hover {
            background: #f8fafc !important;
            color: #1abc9c !important;
        }

        .user-dropdown-menu a#user-menu-admin-btn:hover {
            background: #e8f8f5 !important;
            color: #16a085 !important;
        }

        /* Tùy chỉnh giao diện cho ô nhập ngày tháng của Flatpickr */
        input.flatpickr-input[type="text"] {
            border: 1px solid #ccc;
            outline: none;
            font-weight: bold;
            color: #2c3e50;
            cursor: pointer;
            background: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
            width: 110px;
            text-align: center;
            transition: all 0.3s;
            box-sizing: border-box;
            height: 32px;
        }

        input.flatpickr-input[type="text"]:hover {
            border-color: #3498db;
        }

        input.flatpickr-input[type="text"]:focus {
            border-color: #27ae60;
transition: box-shadow 0.3s;


            max-height: calc(100vh - 240px) !important;
            overflow-y: auto !important;
        }

        .form-section:hover,
        .sidebar-form:hover {
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        }



        .form-group input,
        .form-group select,
        .form-group textarea {

            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

            border: 1px solid #ddd;

        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {

            border-color: #27ae60;

            box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);

            outline: none;

        }



        /* Ripple Buttons */

        button {
            position: relative;
            overflow: hidden;
        }

        button::after {

            content: '';
            position: absolute;
            top: 50%;
            left: 50%;

            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.4);

            opacity: 0;
            border-radius: 100%;

            transform: scale(1, 1) translate(-50%, -50%);
            transform-origin: 50% 50%;

        }

        button:focus:not(:active)::after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {

            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }

            100% {
                transform: scale(30, 30);
                opacity: 0;
            }

        }

        /* --- PREMIUM TOAST NOTIFICATION SYSTEM --- */
        .toast-container {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 1000000;
            display: flex;
            flex-direction: column;
            gap: 12px;
            pointer-events: none;
        }

        .toast-card {
            background: rgba(255, 255, 255, 0.95);
            border-left: 5px solid #1abc9c;
            color: #2c3e50;
            padding: 14px 18px;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 280px;
            max-width: 420px;
            font-size: 13px;
            font-weight: 600;
            backdrop-filter: blur(8px);
            pointer-events: auto;
            transform: translateX(120%);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .toast-card.show {
            transform: translateX(0);
            opacity: 1;
        }

        .toast-card.hide {
            transform: translateX(120%);
            opacity: 0;
        }

        .toast-card.success {
            border-left-color: #2ecc71;
            background: linear-gradient(135deg, #ffffff, #f4fbf7);
        }

        .toast-card.error {
            border-left-color: #e74c3c;
            background: linear-gradient(135deg, #ffffff, #fdf6f5);
        }

        .toast-card.info {
            border-left-color: #3498db;
            background: linear-gradient(135deg, #ffffff, #f6faff);
        }

        .toast-icon {
            font-size: 18px;
            flex-shrink: 0;
        }

        .toast-message {
            flex-grow: 1;
            line-height: 1.4;
        }

        /* --- USER DROPDOWN MENU STYLE --- */
        #nav-btn-user:hover {
            background: #cbd5e1 !important;
            border-color: #94a3b8 !important;
        }

        .user-dropdown-menu a {
            display: flex;
        }

        .user-dropdown-menu a:hover {
            background: #f8fafc !important;
            color: #1abc9c !important;
        }

        .user-dropdown-menu a#user-menu-admin-btn:hover {
            background: #e8f8f5 !important;
            color: #16a085 !important;
        }

        /* Tùy chỉnh giao diện cho ô nhập ngày tháng của Flatpickr */
        input.flatpickr-input[type="text"] {
            border: 1px solid #ccc;
            outline: none;
            font-weight: bold;
            color: #2c3e50;
            cursor: pointer;
            background: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
            width: 110px;
            text-align: center;
            transition: all 0.3s;
            box-sizing: border-box;
            height: 32px;
        }

        input.flatpickr-input[type="text"]:hover {
            border-color: #3498db;
        }

        input.flatpickr-input[type="text"]:focus {
            border-color: #27ae60;
            box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
        }

        /* Ẩn viền chữ nhật đối với ô chọn ngày ở Dashboard (đã có wrapper bo tròn) */
        input.dashboard-date {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 4px !important;
            width: 90px !important;
        }

        input.dashboard-date:focus {
            border: none !important;
            box-shadow: none !important;
        }

        /* --- BẢNG CHẤM CÔNG & THỐNG KÊ SIÊU GỌN (ULTRA-COMPACT 19PX) --- */
        #table-chamcong, #table-thongke, #table-preview-thuthuat {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            white-space: nowrap;
            font-size: 11px;
        }
        #table-chamcong th, #table-chamcong td,
        #table-thongke th, #table-thongke td,
        #table-preview-thuthuat th, #table-preview-thuthuat td {
            padding: 0 1px !important;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid #cbd5e1;
            border-right: 1px solid #cbd5e1;
            background-color: #ffffff;
            font-size: 11px;
            height: 19px !important;
            box-sizing: border-box;
            line-height: 18px;
        }
        #table-chamcong tbody tr,
        #table-thongke tbody tr,
        #table-preview-thuthuat tbody tr {
            height: 19px !important;
        }
        #table-chamcong tbody td,
        #table-thongke tbody td,
        #table-preview-thuthuat tbody td {
            position: static;
        }

        /* 1. THEAD BẢNG CHẤM CÔNG */
        #table-chamcong thead th {
            background-color: #275d38 !important;
            font-weight: 700 !important;
            font-size: 10.5px !important;
            text-transform: uppercase;
            letter-spacing: 0.1px;
            color: #ffffff !important;
            position: sticky !important;
            z-index: 20 !important;
            padding: 0 !important;
            margin: 0 !important;
            height: 16px !important;
            min-height: 16px !important;
            max-height: 16px !important;
            line-height: 16px !important;
            box-shadow: none !important;
            border-bottom: 1px solid #cbd5e1 !important;
            border-right: 1px solid #cbd5e1 !important;
        }
        #table-chamcong thead tr:first-child th {
            top: 0 !important;
            z-index: 30 !important;
            height: 16px !important;
            min-height: 16px !important;
            max-height: 16px !important;
            line-height: 16px !important;
            background-color: #275d38 !important;
            color: #ffffff !important;
            padding: 0 !important;
            font-size: 10.5px !important;
            border-bottom: 1px solid #1e462a !important;
        }
        #table-chamcong thead tr:nth-child(2) th {
            top: 16px !important;
            z-index: 25 !important;
            font-size: 9.5px !important;
            background-color: #1e462a !important;
            color: #ffffff !important;
            font-weight: 600 !important;
            padding: 0 !important;
            height: 14px !important;
            min-height: 14px !important;
            max-height: 14px !important;
            line-height: 14px !important;
            border-bottom: 1px solid #cbd5e1 !important;
        }
        #table-chamcong thead tr:first-child th[rowspan="2"] {
            height: 30px !important;
            min-height: 30px !important;
            max-height: 30px !important;
            line-height: 30px !important;
            padding: 0 2px !important;
            vertical-align: middle !important;
        }

        /* 2. CÁC CỘT GHIM CỐ ĐỊNH BẢNG CHẤM CÔNG */
        #table-chamcong thead tr:first-child th:first-child {
            position: sticky !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 45 !important;
            background-color: #275d38 !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            font-size: 11px !important;
            text-align: center;
            border-right: 2px solid #cbd5e1 !important;
            width: 190px !important;
            min-width: 190px !important;
            max-width: 190px !important;
        }
        #table-chamcong tbody td:first-child {
            position: sticky !important;
            left: 0 !important;
            z-index: 12 !important;
            text-align: left;
            padding: 0 8px !important;
            font-weight: 600;
            font-size: 11.5px !important;
            color: #1e293b !important;
            border-right: 2px solid #cbd5e1;
            background-color: #ffffff !important;
            width: 190px !important;
            min-width: 190px !important;
            max-width: 190px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
            line-height: 19px;
        }

        #table-chamcong thead tr:first-child th:nth-child(2) {
            position: sticky !important;
            top: 0 !important;
            left: 190px !important;
            z-index: 45 !important;
            background-color: #275d38 !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            font-size: 11px !important;
            text-align: center;
            border-right: 1.5px solid #cbd5e1 !important;
            width: 36px !important;
            min-width: 36px !important;
            max-width: 36px !important;
        }
        #table-chamcong tbody td:nth-child(2) {
            position: sticky !important;
            left: 190px !important;
            z-index: 12 !important;
            text-align: center;
            border-right: 1.5px solid #cbd5e1;
            background-color: #ffffff !important;
            width: 36px !important;
            min-width: 36px !important;
            max-width: 36px !important;
            padding: 0 !important;
        }

        #table-chamcong thead tr:first-child th:last-child {
            position: sticky !important;
            top: 0 !important;
            right: 0 !important;
            z-index: 45 !important;
            background-color: #275d38 !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            font-size: 11px !important;
            text-align: center;
            border-left: 2px solid #cbd5e1 !important;
        }
        #table-chamcong tbody td:last-child {
            position: sticky !important;
            right: 0 !important;
            z-index: 12 !important;
            text-align: center;
            border-left: 2px solid #cbd5e1;
            background-color: #ffffff !important;
            width: 58px;
            min-width: 58px;
            max-width: 58px;
            font-size: 11.5px;
            font-weight: 800;
            color: #2563eb !important;
            padding: 0 1px !important;
        }

        /* 3. NGÀY NGHỈ & HÔM NAY */
        #table-chamcong thead th.bg-holiday {
            background-color: #fef08a !important;
            color: #854d0e !important;
            font-weight: 800 !important;
        }
        #table-chamcong tbody td.bg-holiday {
            background-color: #fff9c4 !important;
        }
        #table-chamcong th.col-today {
            background: #1d4ed8 !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            border-left: 2px solid #3b82f6 !important;
            border-right: 2px solid #3b82f6 !important;
        }
        #table-chamcong th.th-today-sub {
            background: #1e40af !important;
            color: #eff6ff !important;
            font-weight: 700 !important;
            border-left: 2px solid #3b82f6 !important;
            border-right: 2px solid #3b82f6 !important;
        }
        #table-chamcong td.col-today {
            background-color: #eff6ff !important;
            border-left: 2px solid #93c5fd !important;
            border-right: 2px solid #93c5fd !important;
        }
        #table-chamcong td.col-today .cc-input-text {
            border: 1px solid #3b82f6 !important;
            background: #ffffff !important;
            color: #1d4ed8 !important;
            font-weight: 800 !important;
        }

        /* 4. HOVER HÀNG */
        #table-chamcong tbody tr:hover td,
        #table-thongke tbody tr:hover td,
        #table-preview-thuthuat tbody tr:hover td {
            background-color: #f1f5f9;
        }
        #table-chamcong tbody tr:hover td.bg-holiday {
            background-color: #fff0b3 !important;
        }
        #table-chamcong tbody tr:hover td.col-today {
            background-color: #dbeafe !important;
        }
        #table-chamcong tbody tr:hover td:first-child,
        #table-chamcong tbody tr:hover td:nth-child(2),
        #table-thongke tbody tr:hover td:first-child,
        #table-preview-thuthuat tbody tr:hover td:first-child {
            background-color: #f1f5f9 !important;
            color: #1e293b !important;
            z-index: 15 !important;
        }
        #table-chamcong tbody tr:hover td:last-child {
            background-color: #f1f5f9 !important;
            color: #2563eb !important;
            z-index: 15 !important;
        }

        /* 5. Ô NHẬP LIỆU ULTRA-COMPACT */
        #table-chamcong .heso-input {
            width: 30px !important;
            height: 17px !important;
            text-align: center;
            font-weight: 700;
            font-size: 10.5px !important;
            border: 1px solid #cbd5e1;
            border-radius: 2px;
            background: #fff;
            color: #0f172a;
            outline: none;
            padding: 0 !important;
            margin: 0 !important;
            line-height: 17px !important;
        }
        #table-chamcong .heso-input:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 1px rgba(37,99,235,0.3);
        }
        #table-chamcong .cc-input-text {
            width: 22px !important;
            height: 17px !important;
            padding: 0 !important;
            margin: 0 !important;
            text-align: center;
            font-weight: 700;
            font-size: 10.5px !important;
            line-height: 17px !important;
            border: 1px solid #cbd5e1;
            border-radius: 2px;
            background: #fff;
            color: #2563eb;
            outline: none;
            text-transform: uppercase;
        }
        #table-chamcong .cc-input-text:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 1px rgba(37,99,235,0.3);
            background: #eff6ff;
        }

        /* 6. THEAD BẢNG THỐNG KÊ & PREVIEW */
        #table-thongke thead th,
        #table-preview-thuthuat thead th {
            background-color: #275d38 !important;
            font-weight: 700 !important;
            font-size: 10.5px !important;
            text-transform: uppercase;
            letter-spacing: 0.1px;
            color: #ffffff !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 20 !important;
            padding: 0 4px !important;
            margin: 0 !important;
            height: 20px !important;
            min-height: 20px !important;
            max-height: 20px !important;
            line-height: 20px !important;
            box-shadow: none !important;
            border-bottom: 1px solid #cbd5e1 !important;
            border-right: 1px solid #cbd5e1 !important;
        }
        #table-thongke thead th:first-child,
        #table-preview-thuthuat thead th:first-child {
            position: sticky !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 45 !important;
            background-color: #275d38 !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            font-size: 11px !important;
            text-align: center;
            border-right: 2px solid #cbd5e1 !important;
            width: 200px !important;
            min-width: 200px !important;
            max-width: 200px !important;
        }
        #table-thongke tbody td:first-child,
        #table-preview-thuthuat tbody td:first-child {
            position: sticky !important;
            left: 0 !important;
            z-index: 12 !important;
            text-align: left;
            padding: 0 8px !important;
            font-weight: 600;
            font-size: 11.5px !important;
            color: #1e293b !important;
            border-right: 2px solid #cbd5e1;
            background-color: #ffffff !important;
            width: 200px !important;
            min-width: 200px !important;
            max-width: 200px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
            line-height: 19px;
        }

        /* 7. THANH CUỘN NGANG */
        #table-chamcong-container, #main-thongke-container {
            scrollbar-width: auto;
            scrollbar-color: #94a3b8 #f1f5f9;
        }
        #table-chamcong-container::-webkit-scrollbar,
        #main-thongke-container::-webkit-scrollbar {
            height: 8px !important;
            width: 8px !important;
            display: block !important;
        }
        #table-chamcong-container::-webkit-scrollbar-thumb,
        #main-thongke-container::-webkit-scrollbar-thumb {
            background: #94a3b8 !important;
            border-radius: 4px;
            border: 1px solid #f1f5f9;
        }
        #table-chamcong-container::-webkit-scrollbar-thumb:hover,
        #main-thongke-container::-webkit-scrollbar-thumb:hover {
            background: #64748b !important;
        }

        /* ── 8. DASHBOARD MONTHLY CHARTS (TRANG CHỦ) ── */
        .dashboard-monthly-charts {
            margin-bottom: 25px;
        }
        @media (max-width: 960px) {
            .dashboard-monthly-charts {
                grid-template-columns: 1fr !important;
            }
        }


        #table-chamcong tbody tr.chamcong-total-row td {
            background-color: #f1f5f9 !important;
            font-weight: 800 !important;
            border-top: 2px solid #94a3b8 !important;
            border-bottom: 2px solid #94a3b8 !important;
            height: 22px !important;
            line-height: 22px !important;
        }
        #table-chamcong tbody tr.chamcong-total-row td:first-child {
            background-color: #f1f5f9 !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            text-transform: uppercase;
        }
        #table-chamcong tbody tr.chamcong-total-row td:nth-child(2) {
            background-color: #f1f5f9 !important;
            color: #64748b !important;
        }
        #table-chamcong tbody tr.chamcong-total-row td:last-child {
            background-color: #f1f5f9 !important;
            color: #1d4ed8 !important;
            font-weight: 900 !important;
            font-size: 12px !important;
        }


/* ========================================================
   SORTABLE DRAG & DROP STYLES (v3 Cloudflare)
   ======================================================== */
.sortable-ghost {
    opacity: 0.35 !important;
    background-color: #dbeafe !important;
    outline: 2px dashed #3b82f6 !important;
}

.sortable-chosen {
    background-color: #eff6ff !important;
}

.drag-handle {
    cursor: grab !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #64748b !important;
    transition: all 0.15s ease !important;
}

.drag-handle:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #1e293b !important;
}

.drag-handle:active {
    cursor: grabbing !important;
}