/* =============================================================================
   TASK MANAGEMENT SYSTEM - UNIFIED STYLESHEET
   =============================================================================
   
   HƯỚNG DẪN SỬ DỤNG:
   File này PHẢI được sử dụng cùng với file theme (theme.css hoặc theme-*.css)
   
   Trong HTML, include theo thứ tự:
   <link rel="stylesheet" href="css/theme.css">      <link rel="stylesheet" href="css/style.css">      Để đổi màu sắc, thay file theme:
   - theme.css        (Mặc định - Zenmine/Redmine Style)
   - theme-green.css  (Xanh lá)
   - theme-purple.css (Tím)
   - Hoặc tự tạo theme mới dựa trên template
   
   FONT: Roboto (Google Fonts) - Load từ theme.css
   PRIMARY COLOR: #116699 (Redmine Blue)
   
   =============================================================================
   MỤC LỤC:
   1. RESET & BASE
   2. LAYOUT (Header, Sidebar, Content)
   3. COMPONENTS (Cards, Buttons, Forms, Tables, Badges)
   4. MODULE: LOGIN
   5. MODULE: DASHBOARD
   6. MODULE: ISSUE FORMS (Compact Form, Grid 12 Cols, Upload)
   7. MODULE: ISSUE LISTS (Table, Filter, Context Menu)
   8. MODULE: VIEW ISSUE (History, Attachments)
   9. UTILITIES
   10. ANIMATIONS
   11. MODULE: Y LỆNH (Tabs, Patient Info, Action Buttons)
   12. RESPONSIVE
   ============================================================================= */

/* =============================================================================
   1. RESET & BASE
   ============================================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

/* iOS Safe Area & Dynamic Viewport Height Support */
html {
    height: 100%;
    height: -webkit-fill-available; /* iOS Safari fallback */
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: var(--bg-body);
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    flex-direction: column;
    /* Multi-fallback cho chiều cao */
    height: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height - iOS 15.4+ */
    height: -webkit-fill-available; /* iOS Safari fallback */
    overflow: hidden;
    /* Safe area cho notch/home indicator */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

    /* Body cho trang Login (không có sidebar) */
    body.login-body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        height: 100dvh;
        height: -webkit-fill-available;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
    }

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

    a:hover {
        text-decoration: underline;
    }

/* =============================================================================
   3. LAYOUT (Header, Sidebar, Content)
   ============================================================================= */

/* --- HEADER (TOP NAV) --- */
.top-nav {
    background: var(--bg-card);
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    z-index: 10;
}

.logo {
    font-weight: 700;
    font-size: 20px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .logo span {
        color: var(--text-muted);
        font-weight: 400;
        font-size: 16px;
    }

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.logout-btn {
    color: var(--danger-color);
    margin-left: 15px;
    font-size: 18px;
    transition: 0.2s;
}

    .logout-btn:hover {
        color: var(--danger-hover);
        transform: scale(1.1);
    }

/* Toggle Menu Button */
.toggle-menu-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 2px;
    margin-right: 10px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .toggle-menu-btn:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--primary-color);
    }

/* --- MAIN CONTAINER --- */
.main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* Fix flexbox overflow issue */
    /* iOS fix */
    position: relative;
}

/* --- SIDEBAR --- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding-top: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    overflow-y: auto;
    white-space: nowrap;
}

    .sidebar.collapsed {
        width: 0 !important;
        padding: 0 !important;
        border: none;
        overflow: hidden;
    }

.menu-list {
    list-style: none;
    padding: 0 12px;
    margin: 0;
}

.menu-item {
    margin-bottom: 4px;
}

    .menu-item a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        color: var(--sidebar-text-hover);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        border-radius: 2px;
        transition: all 0.2s;
    }

        .menu-item a i {
            width: 20px;
            text-align: center;
            font-size: 16px;
        }

        .menu-item a:hover {
            background: var(--sidebar-hover);
            color: var(--sidebar-text-active);
        }

    .menu-item.active a {
        background: var(--primary-color);
        color: var(--sidebar-text-active);
        box-shadow: var(--shadow-lg);
    }

/* --- CONTENT AREA --- */
.content-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scroll trên iOS */
    overscroll-behavior: contain; /* Ngăn scroll lan ra ngoài */
    background-color: var(--bg-body);
    /* Padding bottom cho safe area + đệm để scroll đến cuối */
    padding-bottom: 0px;
    min-height: 0; /* Fix flexbox overflow issue */
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}

    .mobile-overlay.show {
        display: block;
    }

/* =============================================================================
   4. COMPONENTS (Cards, Buttons, Forms, Tables, Badges)
   ============================================================================= */

/* --- PAGE HEADER --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .page-header h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary);
    }

/* --- CARDS --- */
.card {
    background: var(--bg-card);
    border-radius: 3px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.table-card {
    padding: 0;
    overflow: hidden;
}

/* --- BUTTONS --- */
.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-primary:hover {
        background: var(--primary-hover);
    }

.btn-secondary {
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-secondary:hover {
        background: var(--bg-hover);
        border-color: var(--text-light);
    }

/* Button quay lại (dùng trong page header) */
.btn-back {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
    flex-shrink: 0;
}

    .btn-back:hover {
        background: var(--primary-hover);
    }

.btn-submit {
    width: 100%;
    padding: 14px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn-submit:hover {
        background-color: var(--primary-hover);
    }

    .btn-submit:disabled {
        background-color: var(--text-light);
        cursor: not-allowed;
    }

/* --- TABLES --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    text-align: left;
    white-space: nowrap;
}

    .data-table th {
        background-color: var(--bg-muted);
        padding: 10px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .data-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border-light);
        color: var(--text-secondary);
    }

    .data-table tr:last-child td {
        border-bottom: none;
    }

    /* Hover effect và cursor cho dòng clickable */
    .data-table tbody tr {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

        .data-table tbody tr:hover {
            background-color: var(--bg-hover);
        }

    /* Fallback cho table không có tbody */
    .data-table tr:hover {
        background-color: var(--bg-hover);
    }

    .data-table tr.selected {
        background-color: var(--primary-light) !important;
    }

    .data-table a {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 500;
    }

        .data-table a:hover {
            text-decoration: underline;
        }

/* Table Column Types */
.col-tiny {
    width: 1px;
    white-space: nowrap;
    text-align: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.col-fit {
    width: 1%;
    white-space: nowrap;
}

.col-date {
    width: 1%;
    white-space: nowrap;
    min-width: 110px;
    text-align: center;
}

.col-subject {
    min-width: 200px;
    white-space: normal;
    line-height: 1.4;
}

/* Pagination Bar - Kiểu Redmine */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 12px;
}

    .pagination-bar.redmine-style {
        padding: 12px 15px;
        font-size: 15px;
        color: #505050;
        gap: 10px;
    }

.pagination-per-page {
    color: #505050;
    font-size: 15px;
}

    .pagination-per-page .page-size-link {
        color: #169;
        text-decoration: none;
        padding: 3px 4px;
        border-radius: 3px;
        font-size: 15px;
        cursor: pointer;
    }

        .pagination-per-page .page-size-link:hover {
            text-decoration: underline;
        }

        .pagination-per-page .page-size-link.active {
            font-weight: 700;
            color: #333;
            text-decoration: none;
        }

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .pagination-pages .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 2px 8px;
        color: #169;
        text-decoration: none;
        border-radius: 2px;
        font-size: 15px;
        border: 1px solid transparent;
        cursor: pointer;
    }

        .pagination-pages .page-link:hover:not(.disabled):not(.current) {
            text-decoration: underline;
        }

        .pagination-pages .page-link.current {
            background: #507AAA;
            color: #fff;
            font-weight: normal;
            border-color: #507AAA;
            cursor: default;
        }

        .pagination-pages .page-link.disabled {
            color: #bbb;
            cursor: not-allowed;
        }

    .pagination-pages .page-ellipsis {
        padding: 0 6px;
        color: #666;
        font-size: 15px;
    }

.pagination-range {
    color: #888;
    font-size: 14px;
}

/* Legacy pagination (giữ lại cho tương thích) */
.pagination-info {
    font-size: 15px;
    color: var(--text-muted);
}

.page-size-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    font-size: 15px;
}

.pagination-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-indicator {
    font-size: 15px;
    padding: 5px 10px;
}

/* Pull to Refresh Indicator (ẩn mặc định, chỉ hiện trên mobile) */
.pull-refresh-indicator {
    display: none;
}

/* --- FORMS --- */
.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 15px;
    }

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-input);
    border-radius: 2px;
    font-size: 15px;
    transition: 0.2s;
}

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

.input-error {
    border-color: var(--danger-color) !important;
}

.error-msg {
    font-size: 12px;
    color: var(--danger-color);
    margin-top: 4px;
    display: block;
}

/* Form Grid System */
.form-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 0;
}

    .form-grid.col-2 {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid.col-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

/* --- BADGES --- */
.badge {
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

    .badge.red {
        background: var(--danger-bg);
        color: var(--danger-color);
        border: 1px solid var(--danger-border);
    }

    .badge.blue {
        background: var(--info-bg);
        color: var(--info-color);
        border: 1px solid var(--info-border);
    }

    .badge.green {
        background: var(--success-bg);
        color: var(--success-color);
        border: 1px solid var(--success-border);
    }

    .badge.orange {
        background: var(--warning-bg);
        color: var(--warning-color);
        border: 1px solid var(--warning-border);
    }

/* --- ALERTS --- */
.alert-error {
    background: var(--danger-bg);
    color: #b91c1c;
    padding: 16px;
    border-radius: 2px;
    margin-bottom: 20px;
    border: 1px solid var(--danger-border);
}

/* =============================================================================
   5. MODULE: LOGIN
   ============================================================================= */
.login-wrapper {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.login-card {
    background: var(--bg-card);
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1 {
        font-size: 28px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 5px;
    }

    .login-header p {
        font-size: 14px;
        color: var(--text-muted);
    }

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.forgot-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

    .forgot-link:hover {
        text-decoration: underline;
    }

.login-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
}

/* =============================================================================
   6. MODULE: DASHBOARD
   ============================================================================= */
.dashboard-wrapper {
    font-family: var(--font-family);
    background-color: var(--bg-body);
    color: var(--text-primary);
    width: 100%;
    padding: 10px;
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background: var(--bg-card);
    padding: 12px 20px;
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.header-title h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--info-bg);
    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Dashboard Tabs */
.tabs-container {
    display: inline-flex;
    background: var(--bg-card);
    padding: 4px;
    border-radius: 2px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.tab-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .tab-btn:hover {
        color: var(--primary-color);
    }

    .tab-btn.active {
        background: var(--primary-light);
        color: var(--primary-color);
        box-shadow: var(--shadow-sm);
    }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-color);
        }

/* Dashboard Tabs (Alternative Style) - ĐÃ FIX WRAPPING */
.dashboard-tabs {
    display: flex;
    flex-wrap: wrap; /* [QUAN TRỌNG] Cho phép xuống dòng trên PC */
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    /* Style cho nút Tab bên trong */
    .dashboard-tabs .tab-btn {
        padding: 8px 16px;
        border: none;
        background: transparent;
        font-weight: 600;
        font-size: 13px;
        color: var(--text-secondary);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap; /* Giữ chữ trên 1 dòng */
        /* [QUAN TRỌNG] Ngăn không cho nút bị co lại */
        flex-shrink: 0;
        flex-grow: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 36px;
    }

        .dashboard-tabs .tab-btn:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: var(--primary-color);
        }

        .dashboard-tabs .tab-btn.active {
            background: var(--primary-light);
            color: var(--primary-color);
            box-shadow: none;
            font-weight: 700;
        }

/* KPI Grid */
.grid-container {
    display: grid;
    gap: 12px;
    margin-bottom: 15px;
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* KPI Card Override */
.dashboard-wrapper .card {
    background: var(--bg-card);
    border-radius: 2px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.card-bg-icon {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 80px;
    opacity: 0.05;
    transform: rotate(10deg);
    pointer-events: none;
}

.kpi-title {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 5px;
}

.kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.5px;
}

.kpi-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.kpi-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    min-height: 20px;
}

.trend-badge {
    padding: 2px 8px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
}

.kpi-sub-stats {
    display: flex;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    margin-top: auto;
}

.sub-stat-item {
    flex: 1;
    text-align: center;
    position: relative;
}

    .sub-stat-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 15%;
        height: 70%;
        width: 1px;
        background: var(--border-light);
    }

.sub-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    display: block;
}

.sub-lbl {
    font-size: 10px;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
}

/* Charts */
.charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}

.chart-card {
    background: var(--bg-card);
    border-radius: 2px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    min-height: 350px;
    display: flex;
    flex-direction: column;
}

.chart-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-split-container {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

.chart-half {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chart-half-title {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.chart-canvas-wrapper {
    flex: 1;
    position: relative;
    min-height: 0;
}

/* Room Grid */
.section-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 20px 0 12px 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.room-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 15px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

.room-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 8px;
}

.room-name {
    font-weight: 700;
    font-size: 14px;
}

.room-code {
    font-size: 11px;
    color: var(--text-light);
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: 2px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

.metric-label {
    color: var(--text-muted);
}

.metric-value-wrap {
    text-align: right;
}

.metric-value {
    font-weight: 700;
    font-size: 15px;
}

.metric-trend {
    font-size: 11px;
    margin-left: 6px;
}

/* Progress Bars */
.lab-item {
    margin-bottom: 15px;
}

.lab-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
}

.lab-bar-bg {
    height: 8px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}

.lab-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease;
}

.lab-wait-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.wait-badge {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 2px 8px;
    border-radius: 2px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

    .stats-grid.three-col {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }

    .stats-grid.two-col {
        grid-template-columns: repeat(2, 1fr);
    }

/* Stat List */
.stat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}

    .stat-item:last-child {
        border-bottom: none;
    }

.stat-label {
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

/* Employee Stats */
.emp-stat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 160px;
    overflow-y: auto;
}

.emp-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-light);
    font-size: 13px;
}

    .emp-stat-item:last-child {
        border-bottom: none;
    }

.emp-name {
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.emp-metrics {
    display: flex;
    gap: 8px;
    font-size: 12px;
}

.tag-pending {
    background: var(--tag-pending-bg);
    color: var(--tag-pending-text);
    padding: 1px 6px;
    border-radius: 2px;
    font-weight: 600;
}

.tag-reject {
    background: var(--tag-reject-bg);
    color: var(--tag-reject-text);
    padding: 1px 6px;
    border-radius: 2px;
}

/* =============================================================================
   7. MODULE: ISSUE FORMS (Compact Form, Grid 12 Cols, Upload)
   ============================================================================= */

/* Compact Form */
.compact-form .form-group {
    margin-bottom: 12px;
}

.compact-form label {
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-form .form-control {
    font-size: 14px;
    padding: 6px 10px;
    height: 36px;
}

/* Flatpickr Alt Input - Đồng bộ với .form-control */
.compact-form input.flatpickr-input {
    width: 100% !important;
    padding: 6px 10px !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 2px !important;
    font-size: 14px !important;
    height: 36px !important;
    transition: 0.2s;
    background-color: #fff !important;
    box-sizing: border-box !important;
}

    .compact-form input.flatpickr-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

/* Form Actions Bottom (Button Lưu ở cuối form) */
.form-actions-bottom {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

    .form-actions-bottom .btn-primary {
        min-width: 160px;
    }

/* Grid 12 Columns */
.grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
    align-items: end;
}

.col-span-12 {
    grid-column: span 12;
}

.col-span-8 {
    grid-column: span 8;
}

.col-span-9 {
    grid-column: span 9;
}

.col-span-6 {
    grid-column: span 6;
}

.col-span-4 {
    grid-column: span 4;
}

.col-span-3 {
    grid-column: span 3;
}

/* Rich Editor */
.rich-editor-container {
    border: 1px solid var(--border-input);
    border-radius: 2px;
    overflow: hidden;
    background: var(--bg-card);
    transition: box-shadow 0.2s;
}

    .rich-editor-container:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

.editor-toolbar {
    background: var(--bg-muted);
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

    .editor-toolbar button {
        background: transparent;
        border: 1px solid transparent;
        color: var(--text-secondary);
        width: 32px;
        height: 32px;
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: all 0.2s;
    }

        .editor-toolbar button:hover {
            background: var(--border-color);
            color: var(--text-primary);
        }

    .editor-toolbar .divider {
        width: 1px;
        height: 20px;
        background: var(--border-input);
        margin: 0 6px;
    }

.editor-content {
    min-height: 250px;
    max-height: 600px;
    overflow-y: auto;
    padding: 16px;
    outline: none;
    line-height: 1.6;
    font-size: 15px;
}

    .editor-content blockquote {
        border-left: 4px solid var(--border-input);
        margin: 0;
        padding-left: 16px;
        color: var(--text-muted);
        font-style: italic;
    }

    .editor-content ul,
    .editor-content ol {
        margin-left: 20px;
    }

.comment-editor {
    min-height: 100px !important;
}

/* File Upload */
.file-upload-wrapper {
    position: relative;
    border: 2px dashed var(--border-input);
    border-radius: 2px;
    padding: 30px;
    text-align: center;
    background: var(--bg-muted);
    transition: 0.2s;
}

    .file-upload-wrapper:hover {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

    .file-upload-wrapper input[type="file"] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

.file-upload-trigger {
    color: var(--text-muted);
    font-weight: 500;
}

    .file-upload-trigger i {
        font-size: 24px;
        margin-bottom: 8px;
        display: block;
        color: var(--primary-color);
    }

/* Upload Drop Zone */
.upload-drop-zone {
    border: 2px dashed var(--border-input);
    border-radius: 2px;
    padding: 20px;
    text-align: center;
    background: var(--bg-muted);
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
    margin-top: 5px;
}

    .upload-drop-zone.drag-over {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

    .upload-drop-zone input[type="file"] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

/* File Queue */
.file-queue-list {
    margin-top: 10px;
}

.file-queue-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    margin-bottom: 6px;
    border-radius: 2px;
    font-size: 13px;
}

.file-info {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 200px;
}

.file-desc-input {
    flex: 1;
    border: 1px solid var(--border-input);
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 12px;
    min-width: 150px;
}

.btn-remove-file {
    color: var(--danger-color);
    cursor: pointer;
    padding: 4px;
}

/* =============================================================================
   8. MODULE: ISSUE LISTS (Table, Filter, Context Menu)
   ============================================================================= */

/* Filter Panel */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

    .filter-toggle-btn:hover,
    .filter-toggle-btn.active {
        background: var(--bg-hover);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

.filter-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    display: none;
}

    .filter-panel.show {
        display: block;
        animation: fadeIn 0.2s;
    }

.filter-row-fixed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

    .filter-row-fixed label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        margin-bottom: 4px;
        display: block;
        text-transform: uppercase;
    }

    .filter-row-fixed .form-control {
        height: 34px;
        padding: 4px 8px;
        font-size: 13px;
    }

/* Dynamic Filter */
#dynamicFilterContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dynamic-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 4px 8px;
    animation: slideLeft 0.2s ease-out;
}

.dynamic-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    background: var(--bg-muted);
    padding: 8px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
}

.dynamic-filter-label,
.filter-label-inline {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 130px;
}

.filter-input-wrapper {
    flex: 1;
    display: flex;
}

    .filter-input-wrapper .form-control {
        font-size: 13px;
        border: 1px solid var(--border-input);
        background: var(--bg-card);
        width: 100%;
    }

.btn-remove-filter {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-light);
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

    .btn-remove-filter:hover {
        background: var(--danger-bg);
        color: var(--danger-color);
    }

.filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

.filter-time-control {
    padding: 4px 10px;
    border: 1px solid var(--border-input);
    border-radius: 2px;
    background: var(--bg-card);
    font-size: 13px;
    color: var(--text-secondary);
    outline: none;
}

/* Highlight Match (Search) */
.highlight-match {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
    font-weight: 600;
    border-radius: 2px;
    padding: 0 2px;
}

.content-snippet {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    background: var(--bg-muted);
    padding: 4px;
    border-radius: 2px;
    border: 1px dashed var(--border-color);
}

/* Context Menu */
.context-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    min-width: 200px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .context-menu li {
        padding: 10px 15px;
        cursor: pointer;
        font-size: 13px;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .context-menu li:hover {
            background: var(--bg-hover);
            color: var(--primary-color);
        }

        .context-menu li.danger:hover {
            background: var(--danger-bg);
            color: var(--danger-color);
        }

/* Context menu dùng cho module Quản lý tài sản */
.qlts-context-menu {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 9999;
    min-width: 160px;
    padding: 4px 0;
}

    .qlts-context-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .qlts-context-menu li {
        padding: 8px 16px;
        cursor: pointer;
        font-size: 13px;
        color: #334155;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background 0.15s;
    }

        .qlts-context-menu li:hover {
            background: #f1f5f9;
        }

        .qlts-context-menu li.dropdown-item-edit:hover {
            background: #116699;
            color: #fff;
        }

        .qlts-context-menu li.dropdown-item-gui-duyet:hover {
            background: #2563eb;
            color: #fff;
        }

        .qlts-context-menu li.dropdown-item-phe-duyet:hover {
            background: #16a34a;
            color: #fff;
        }

        .qlts-context-menu li.dropdown-item-tu-choi:hover {
            background: #dc2626;
            color: #fff;
        }

        .qlts-context-menu li.danger {
            color: #ef4444;
        }

            .qlts-context-menu li.danger:hover {
                background: #fef2f2;
            }

/* =============================================================================
   9. MODULE: VIEW ISSUE (History, Attachments)
   ============================================================================= */

/* View Issue Layout */
.issue-view-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 24px;
}

/* Description Box */
.description-box {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    background-color: var(--bg-card);
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.issue-main-content .description-box {
    background: var(--bg-muted);
    padding: 20px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

/* Issue Sidebar */
.issue-sidebar {
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 2px;
}

    .issue-sidebar .info-group {
        margin-bottom: 20px;
    }

        .issue-sidebar .info-group label {
            display: block;
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 4px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .issue-sidebar .info-group .value {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 15px;
            word-break: break-word;
        }

/* History Section */
.history-section h3 {
    font-size: 16px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.history-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* History Item */
.rm-history-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    color: var(--text-secondary);
}

    .rm-history-item:last-child {
        border-bottom: none;
    }

.rm-item-header {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 15px;
}

    .rm-item-header strong {
        color: var(--primary-color);
        font-weight: 600;
    }

    .rm-item-header .time-ago {
        color: var(--text-light);
        font-size: 14px;
    }

/* Changes List */
.rm-changes-list {
    list-style: none;
    padding-left: 0;
    margin: 5px 0 10px 0;
}

.rm-change-line {
    position: relative;
    padding-left: 20px;
    margin-bottom: 4px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-size: 15px;
}

    .rm-change-line::before {
        content: '✓';
        position: absolute;
        left: 0;
        top: 0;
        color: var(--text-muted);
        font-weight: bold;
        font-size: 12px;
    }

.rm-file-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

    .rm-file-link:hover {
        text-decoration: underline;
    }

.rm-suffix {
    color: var(--text-muted);
    font-style: italic;
    font-size: 14px;
}

.rm-user-note {
    margin-top: 10px;
    padding: 10px 15px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-input);
    border-radius: 2px;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Attachments Box */
.issue-attachments-box {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 2px;
}

/* Comments */
.comment-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    background: var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.comment-body {
    flex: 1;
}

.comment-meta {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 5px;
}

    .comment-meta strong {
        color: var(--text-secondary);
        margin-right: 5px;
    }

.comment-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 12px;
    border-radius: 2px;
    font-size: 14px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}

    .modal-overlay.show {
        display: flex;
    }

.modal-content {
    background: var(--bg-card);
    width: 600px;
    max-width: 90%;
    padding: 24px;
    border-radius: 3px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   10. UTILITIES
   ============================================================================= */

/* Text Colors */
.text-red {
    color: var(--danger-color);
}

.text-blue {
    color: var(--info-color);
}

.text-green {
    color: var(--success-color);
}

.text-orange {
    color: var(--warning-color);
}

.text-muted {
    color: var(--text-muted);
}

.text-primary {
    color: var(--primary-color);
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.text-warning {
    color: var(--warning-color);
}

/* Patient Code (monospace) */
.patient-code {
    font-family: var(--font-family-mono);
    color: var(--text-secondary);
    font-weight: bold;
}

/* Loader */
.loader {
    border: 3px solid var(--border-light);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

/* Login Loader (White) */
.btn-submit .loader {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #fff;
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

/* =============================================================================
   11. ANIMATIONS
   ============================================================================= */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.7);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =============================================================================
   12. MODULE: Y LỆNH (Tabs, Patient Info, Action Buttons)
   ============================================================================= */

/* Tabs Navigation - Desktop mặc định Wrap */
.tabs-nav {
    display: flex;
    flex-wrap: wrap; /* [QUAN TRỌNG] Cho phép xuống dòng trên màn hình rộng/vừa */
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
    background: var(--bg-card);
    padding: 5px 15px 0 15px;
    gap: 2px;
}

.tab-item {
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    white-space: nowrap;
    /* Flex item setup cho desktop */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
}

    .tab-item:hover {
        color: var(--primary-color);
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: 4px 4px 0 0;
    }

    .tab-item.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        background-color: #f8fafc; /* Nền nhẹ khi active */
        border-radius: 4px 4px 0 0;
        position: relative;
        z-index: 1;
    }

    .tab-item i {
        margin-right: 8px;
    }

.tab-content {
    display: none;
    padding: 10px 0;
}

    .tab-content.active {
        display: block;
        animation: fadeIn 0.3s;
    }

/* Table Group Header (Grouping rows) */
.group-header {
    background-color: var(--bg-muted);
    color: var(--primary-color);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    border-bottom: 2px solid var(--border-color);
}

    .group-header td {
        padding: 10px 15px !important;
    }

/* Action Buttons (Thực hiện, Kết thúc, Hủy) */
.btn-action {
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.btn-blue {
    background-color: #2563eb;
}

    .btn-blue:hover {
        background-color: #1d4ed8;
    }

.btn-green {
    background-color: #16a34a;
}

    .btn-green:hover {
        background-color: #15803d;
    }

.btn-red {
    background-color: #dc2626;
}

    .btn-red:hover {
        background-color: #b91c1c;
    }

/* Table Cell Utilities */
.align-middle {
    vertical-align: middle !important;
}

.bg-cell-state {
    border-right: 1px solid var(--border-light);
}

/* Patient Info Grid */
.patient-info-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: baseline;
}

    .info-row .lbl {
        color: var(--text-muted);
        font-size: 13px;
        min-width: 80px;
    }

    .info-row .val {
        color: var(--text-primary);
        font-weight: 500;
        font-size: 14px;
    }

.name-highlight {
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 700;
}

/* Badge Room (Phòng/Giường) */
.badge-room {
    background-color: var(--primary-light);
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 500;
    display: inline-block;
    font-size: 12px;
}

/* Checkbox Inline */
.checkbox-inline {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

    .checkbox-inline input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        margin: 0;
        padding: 0;
        border: 2px solid #94a3b8;
        border-radius: 3px;
        background: #fff;
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
    }

        .checkbox-inline input[type="checkbox"]:checked {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

            .checkbox-inline input[type="checkbox"]:checked::after {
                content: '';
                position: absolute;
                left: 5px;
                top: 2px;
                width: 5px;
                height: 9px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

/* Filter Options Row (Checkboxes + Buttons) */
.filter-options-row {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-checkboxes {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* Progress Summary Bar */
.progress-summary-bar {
    padding: 10px 15px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

/* Progress Value (dùng chung) */
.progress-value {
    font-weight: bold;
}

.progress-summary-bar .progress-value {
    color: var(--primary-color);
}

/* Y Lệnh Table Cells */
.yl-service-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

.yl-service-info {
    font-size: 13px;
    color: var(--danger-color);
    margin-top: 3px;
}

.yl-time-cell {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
}

    .yl-time-cell .time-main {
        font-weight: 600;
        font-size: 15px;
        color: var(--primary-color);
    }

.yl-executor {
    font-weight: 600;
    font-size: 14px;
    color: var(--success-color);
}

.yl-executor-time {
    font-size: 13px;
    color: var(--text-muted);
}

.yl-stt-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.yl-stt-done {
    color: var(--success-color);
    font-size: 18px;
}

/* Progress Footer (Hoàn thành %) */
.yl-progress-footer {
    padding: 15px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    font-size: 16px;
}

    .yl-progress-footer .progress-value {
        font-weight: bold;
        color: var(--text-primary);
        font-size: 18px;
    }

/* Section Title with Underline */
.section-title-underline {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 4px;
}

/* Text Highlight (Đối tượng, Khoa phòng) */
.text-highlight-blue {
    color: var(--primary-color);
    font-weight: bold;
}

/* Status Icons (Thuốc, Vật tư, Dịch vụ) */
.status-icon {
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

    .status-icon.status-pending {
        color: #f97316; /* Orange */
    }

    .status-icon.status-done {
        color: var(--success-color); /* Green */
    }

    .status-icon.status-none {
        color: var(--danger-color); /* Red */
    }

    .status-icon.status-default {
        color: var(--text-muted); /* Gray */
    }

/* Column: Status Icon (TH, VT, DV, Tiến độ) */
.col-status-icon {
    width: 36px !important;
    min-width: 36px;
    max-width: 50px;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 4px 2px !important;
}

/* Column: Fit content (Tuổi, GT) */
.col-fit {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Column: Patient Code */
.col-patient-code {
    width: 1%;
    white-space: nowrap;
    font-family: var(--font-family-mono);
}

/* Separator Line (Dashed) */
.separator-dashed {
    margin: 10px 0;
    border: 0;
    border-top: 1px dashed var(--border-color);
}

/* Patient Name in List */
.patient-name {
    font-weight: bold;
    color: var(--text-primary);
    text-transform: uppercase;
}

.patient-subinfo {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* =============================================================================
   13. RESPONSIVE
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TABLET (max-width: 1200px)
   ----------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .charts-row {
        grid-template-columns: 1fr;
    }

    .chart-split-container {
        flex-direction: column;
        height: 500px;
    }
}

/* -----------------------------------------------------------------------------
   SMALL TABLET (max-width: 992px)
   ----------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .filter-row-fixed {
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid,
    .stats-grid.two-col,
    .stats-grid.three-col {
        grid-template-columns: 1fr;
    }

    .grid-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .col-span-12,
    .col-span-9,
    .col-span-8,
    .col-span-6,
    .col-span-4,
    .col-span-3 {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   MOBILE (max-width: 768px)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* --- BASE --- */
    body {
        font-size: 14px;
    }

    /* --- HEADER / TOP NAV (2 dòng trên mobile) --- */
    .top-nav {
        flex-direction: column;
        height: auto;
        padding: 14px 12px 6px 12px; /* Trên 14px để tên BV thoáng hơn */
        gap: 2px;
        position: relative;
    }

        /* Container chứa toggle + logo */
        .top-nav > div:first-child {
            width: 100%;
            justify-content: center;
        }

    .logo {
        font-size: 16px;
        gap: 6px;
        justify-content: center;
    }

        .logo span {
            display: none; /* Ẩn text phụ trên mobile */
        }

    /* Nút toggle đặt absolute bên trái */
    .toggle-menu-btn {
        position: absolute;
        left: 10px;
        top: 12px;
        font-size: 20px;
        padding: 6px;
        margin: 0;
    }

    /* User menu căn giữa */
    .user-menu {
        font-size: 12px;
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        padding-bottom: 0;
    }

    .logout-btn {
        font-size: 16px;
        padding: 4px;
        margin-left: 8px;
    }

    /* --- SIDEBAR MOBILE --- */
    .sidebar {
        width: 0;
        padding: 0;
        position: fixed;
        top: 62px; /* Khớp với header 2 dòng */
        left: 0;
        bottom: 0;
        z-index: 1000;
        background: var(--sidebar-bg);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile overlay cũng cần update top */
    .mobile-overlay {
        top: 62px;
    }

    .sidebar.mobile-open {
        width: 280px !important;
        padding: 16px 0;
    }

    .menu-item a {
        padding: 14px 20px;
        font-size: 15px;
    }

    /* --- CONTENT AREA --- */
    .content-area {
        padding: 16px 12px;
        /* Extra padding bottom để đảm bảo scroll đến hết nội dung trên iOS */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 40px);
    }

    /* --- PAGE HEADER --- */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

        .page-header h2 {
            font-size: 20px;
        }

    .header-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    /* --- CARDS --- */
    .card {
        padding: 16px;
        margin-bottom: 16px;
    }

    /* --- BUTTONS (Touch-friendly) --- */
    .btn-primary,
    .btn-secondary {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px; /* Touch target */
    }

    .btn-submit {
        padding: 14px;
        font-size: 15px;
        min-height: 48px;
    }

    /* Full-width buttons trên mobile */
    .header-actions .btn-primary,
    .header-actions .btn-secondary {
        flex: 1;
        justify-content: center;
    }

    /* --- TABLES --- */
    .table-responsive {
        margin: 0 -12px; /* Cho table tràn ra ngoài padding */
        padding: 0 12px;
        width: calc(100% + 24px);
    }

    .data-table {
        font-size: 13px;
    }

        .data-table th {
            padding: 10px 8px;
            font-size: 11px;
        }

        .data-table td {
            padding: 10px 8px;
        }

    .col-subject {
        min-width: 180px;
    }

    /* --- PULL TO REFRESH (Mobile) --- */
    .pull-refresh-indicator {
        display: flex;
        position: fixed;
        top: 70px; /* Dưới header */
        left: 50%;
        transform: translateX(-50%) translateY(-60px);
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 20px;
        background: var(--bg-card);
        border-radius: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.2s, transform 0.2s;
        pointer-events: none;
    }

        .pull-refresh-indicator i {
            font-size: 20px;
            color: var(--primary-color);
            transition: transform 0.1s linear;
        }

        .pull-refresh-indicator span {
            font-size: 12px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .pull-refresh-indicator.visible {
            opacity: 1;
        }

        .pull-refresh-indicator.ready {
            background: var(--primary-light);
        }

            .pull-refresh-indicator.ready i {
                color: var(--primary-color);
            }

            .pull-refresh-indicator.ready span {
                color: var(--primary-color);
                font-weight: 500;
            }

        .pull-refresh-indicator.refreshing i {
            animation: spin 0.8s linear infinite;
        }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* --- DASHBOARD TABS (FIX FOR .dashboard-tabs ON MOBILE) --- */
    .dashboard-tabs {
        flex-wrap: nowrap; /* [MOBILE] Không xuống dòng */
        overflow-x: auto; /* Cho phép vuốt ngang */
        overflow-y: hidden; /* Không cho vuốt dọc */
        justify-content: flex-start;
        gap: 5px;
        /* Ẩn thanh cuộn trên mobile */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .dashboard-tabs::-webkit-scrollbar {
            display: none;
            height: 0;
            width: 0;
        }

        .dashboard-tabs .tab-btn {
            padding: 8px 12px;
            font-size: 13px;
            margin-right: 2px;
            flex-shrink: 0;
        }

    /* --- Y LỆNH MODULE (Mobile) --- */
    .tabs-nav {
        flex-wrap: nowrap; /* [MOBILE] Giữ nguyên 1 dòng trên mobile */
        overflow-x: auto; /* Cho phép cuộn ngang */
        padding: 0 10px;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }

    .tab-item {
        padding: 10px 14px;
        font-size: 13px;
        display: block; /* Revert về block mặc định trên mobile */
    }

    /* Patient Info - Stack vertically on mobile */
    .info-row {
        flex-direction: column;
        gap: 6px;
    }

        .info-row .lbl {
            min-width: unset;
            font-size: 12px;
        }

        .info-row .val {
            font-size: 13px;
        }

    /* Action buttons - larger touch targets */
    .btn-action {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 40px;
    }

    /* Group header */
    .group-header td {
        padding: 8px 12px !important;
        font-size: 12px;
    }

    /* Checkbox inline - mobile friendly */
    .checkbox-inline {
        padding: 8px 0;
    }

        .checkbox-inline input[type="checkbox"] {
            width: 20px;
            height: 20px;
        }

    /* Filter Options Row - Stack on mobile */
    .filter-options-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .filter-checkboxes {
        gap: 16px;
    }

    .filter-buttons {
        margin-left: 0;
        width: 100%;
    }

        .filter-buttons .btn-primary,
        .filter-buttons .btn-secondary {
            flex: 1;
        }

    /* --- PAGINATION (Mobile - 2 dòng) --- */
    .pagination-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

        /* Pagination Redmine style - Mobile */
        .pagination-bar.redmine-style {
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
        }

    .pagination-pages {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .pagination-per-page,
    .pagination-range {
        font-size: 14px;
        width: 100%;
        text-align: center;
    }

    .pagination-pages .page-link {
        min-width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .pagination-pages .page-ellipsis {
        font-size: 14px;
    }

    .pagination-info {
        text-align: center;
        font-size: 14px;
    }

    .pagination-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

        .pagination-nav .btn-secondary {
            width: 44px;
            height: 38px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

    .page-indicator {
        flex: 1;
        text-align: center;
        font-size: 14px;
        padding: 10px 16px;
        background: var(--bg-muted);
        border-radius: 2px;
        font-weight: 500;
    }

    /* --- FORMS --- */
    .form-group {
        margin-bottom: 16px;
    }

        .form-group label {
            font-size: 13px;
            margin-bottom: 6px;
        }

    .form-control {
        padding: 12px;
        font-size: 16px; /* 16px để tránh zoom trên iOS */
        min-height: 44px;
    }

    .form-grid.col-2,
    .form-grid.col-4 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* --- COMPACT FORM --- */
    .compact-form .form-control {
        height: 44px;
        font-size: 16px;
    }

    .compact-form input.flatpickr-input {
        height: 44px !important;
        font-size: 16px !important;
    }

    /* --- FORM ACTIONS BOTTOM (Mobile) --- */
    .form-actions-bottom {
        margin-top: 20px;
        padding-top: 16px;
    }

        .form-actions-bottom .btn-primary {
            width: 100%;
            min-width: unset;
            justify-content: center;
        }

    /* --- GRID ROW FIX (Tránh tràn) --- */
    .grid-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 100%;
        overflow: hidden;
    }

        .grid-row .form-group {
            width: 100% !important;
            max-width: 100%;
        }

        .grid-row .form-control {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

    /* --- STATS GRID --- */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* --- ISSUE VIEW LAYOUT --- */
    .issue-view-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .issue-sidebar {
        order: -1; /* Đưa sidebar lên trên trên mobile */
        padding: 16px;
    }

    .issue-main-content .description-box {
        padding: 16px;
        margin-bottom: 20px;
    }

    /* --- FILTER PANEL --- */
    .filter-panel {
        padding: 12px;
        margin-bottom: 12px;
    }

    .filter-toggle-btn {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 44px;
    }

    /* --- FILTER ACTIONS: Buttons xuống dòng trên mobile --- */
    .filter-actions {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

        .filter-actions > div:first-child {
            width: 100%;
        }

            .filter-actions > div:first-child select {
                width: 100% !important;
            }

        .filter-actions > div:last-child {
            width: 100%;
            display: flex;
            gap: 8px;
        }

        .filter-actions .btn-primary,
        .filter-actions .btn-secondary {
            flex: 1;
            justify-content: center;
        }

    /* --- FILE UPLOAD --- */
    .file-upload-wrapper,
    .upload-drop-zone {
        padding: 20px 16px;
    }

    .file-queue-item {
        padding: 10px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .file-info {
        min-width: 100%;
    }

    .file-desc-input {
        min-width: 100%;
    }

    /* --- RICH EDITOR --- */
    .editor-content {
        min-height: 200px;
        padding: 12px;
        font-size: 16px; /* Tránh zoom iOS */
    }

    .editor-toolbar {
        padding: 6px;
        gap: 2px;
    }

        .editor-toolbar button {
            width: 36px;
            height: 36px;
            font-size: 14px;
        }

    /* --- MODAL --- */
    .modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 16px;
    }

    .modal-overlay {
        padding: 0;
    }

    /* --- DIALOG BOX: Giữ nhỏ gọn trên mobile --- */
    .modal-content.dialog-box {
        width: 92%;
        max-width: 340px;
        height: auto;
        max-height: 85vh;
        border-radius: var(--border-radius-lg);
        padding: 0;
        margin: auto;
    }

    .dialog-header {
        padding: 10px 16px;
    }

        .dialog-header h3 {
            font-size: 15px;
        }

    .dialog-body {
        padding: 16px;
        gap: 12px;
    }

    .dialog-icon {
        font-size: 26px;
    }

    .dialog-message {
        font-size: 14px;
    }

    .dialog-footer {
        padding: 10px 16px;
        flex-wrap: wrap;
    }

        .dialog-footer button {
            min-width: 70px;
            padding: 8px 12px;
            font-size: 13px;
        }

    /* --- DASHBOARD --- */
    .dashboard-wrapper {
        padding: 8px;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }

    .header-title h1 {
        font-size: 18px;
    }

    .header-meta {
        font-size: 14px;
    }

    .live-badge {
        font-size: 12px;
        padding: 5px 12px;
    }

    .grid-container {
        gap: 10px;
    }

    /* KPI Cards - Tăng font size */
    .kpi-title {
        font-size: 13px;
    }

    .kpi-value {
        font-size: 28px;
    }

    .kpi-unit {
        font-size: 15px;
    }

    .kpi-footer {
        font-size: 13px;
    }

    .sub-val {
        font-size: 14px !important;
    }

    .sub-lbl {
        font-size: 10px;
    }

    /* --- ROOM GRID --- */
    .room-grid {
        grid-template-columns: 1fr;
    }

    .room-item {
        padding: 12px;
    }

    .room-name {
        font-size: 14px;
    }

    .room-code {
        font-size: 11px;
    }

    .metric-row {
        font-size: 13px;
    }

    .metric-value {
        font-size: 15px !important;
    }

    .metric-trend {
        font-size: 11px;
    }

    .wait-badge {
        font-size: 12px;
    }

    /* --- HISTORY --- */
    .rm-change-line {
        font-size: 14px;
        padding-left: 16px;
    }

    .rm-user-note {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* --- LOGIN --- */
    .login-card {
        padding: 20px 16px;
        margin: 12px;
    }

    .login-header h1 {
        font-size: 22px;
    }

    /* --- ISSUE SIDEBAR --- */
    .issue-sidebar .info-group {
        margin-bottom: 14px;
    }

        .issue-sidebar .info-group label {
            font-size: 12px;
        }

        .issue-sidebar .info-group .value {
            font-size: 14px;
        }
}

/* -----------------------------------------------------------------------------
   TOUCH DEVICE ENHANCEMENTS (Chỉ áp dụng cho mobile/tablet thực sự)
   ----------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) and (max-width: 992px) {
    /* Tăng touch target cho các interactive elements */
    .btn-primary,
    .btn-secondary,
    .btn-submit,
    .filter-toggle-btn {
        min-height: 44px;
    }

    .form-control,
    .compact-form .form-control {
        min-height: 44px;
    }

    .compact-form input.flatpickr-input {
        min-height: 44px !important;
        height: 44px !important;
    }

    .menu-item a {
        min-height: 48px;
    }

    .data-table a {
        display: inline-block;
        padding: 4px 0;
    }

    /* Disable hover effects */
    .btn-primary:hover,
    .btn-secondary:hover,
    .menu-item a:hover,
    .data-table tr:hover {
        /* Giữ nguyên, không đổi màu khi hover trên touch */
    }

    /* Active states cho touch */
    .btn-primary:active {
        background: var(--primary-hover);
        transform: scale(0.98);
    }

    .btn-secondary:active {
        background: var(--bg-hover);
        transform: scale(0.98);
    }

    .menu-item a:active {
        background: var(--sidebar-hover);
    }
}

/* -----------------------------------------------------------------------------
   LANDSCAPE MOBILE
   ----------------------------------------------------------------------------- */
@media (max-width: 896px) and (orientation: landscape) {
    .top-nav {
        height: 48px;
    }

    .sidebar {
        top: 48px;
        height: calc(100vh - 48px);
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }

    .login-wrapper {
        padding: 10px;
    }

    .login-card {
        padding: 20px;
        max-width: 400px;
    }
}

/* -----------------------------------------------------------------------------
   PRINT STYLES
   ----------------------------------------------------------------------------- */
@media print {
    .sidebar,
    .top-nav,
    .toggle-menu-btn,
    .mobile-overlay,
    .btn-primary,
    .btn-secondary,
    .filter-panel,
    .filter-toggle-btn {
        display: none !important;
    }

    .content-area {
        padding: 0;
        overflow: visible;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    body {
        background: white;
        color: black;
    }
}

/* =============================================================================
   GLOBAL DIALOG STYLES
   ============================================================================= */
/* Dialog Box nhỏ gọn hơn Modal thường */
.dialog-box {
    max-width: 450px;
    width: 90%;
    padding: 0;
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
}

.dialog-header {
    background-color: var(--bg-muted);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .dialog-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

.btn-close-dialog {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-light);
    cursor: pointer;
}

    .btn-close-dialog:hover {
        color: var(--danger-color);
    }

.dialog-body {
    padding: 24px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.dialog-icon {
    font-size: 32px;
    flex-shrink: 0;
}
    /* Icon Colors */
    .dialog-icon.info {
        color: var(--info-color);
    }

    .dialog-icon.success {
        color: var(--success-color);
    }

    .dialog-icon.warning {
        color: var(--warning-color);
    }

    .dialog-icon.error {
        color: var(--danger-color);
    }

    .dialog-icon.question {
        color: var(--primary-color);
    }

.dialog-message {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

.dialog-footer {
    padding: 12px 20px;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

    /* Button size trong dialog */
    .dialog-footer button {
        min-width: 80px;
        padding: 8px 16px;
    }

/* =============================================================================
   MODULE: ISSUE LIST - EXTENDED STYLES
   =============================================================================
   Các style bổ sung cho danh sách công việc
   ============================================================================= */

/* --- OVERDUE ROW: Dòng quá hạn deadline --- */
.overdue-row td {
    color: var(--danger-color) !important;
    font-weight: 700 !important;
    background-color: var(--danger-bg);
}

.overdue-row a {
    color: var(--danger-hover) !important;
    text-decoration: underline;
}

/* Giữ nguyên highlight khi hover dòng quá hạn */
.overdue-row:hover td {
    background-color: var(--danger-bg);
}

/* --- QUICK FILTER BUTTONS: Nút lọc nhanh (sắp đến hạn, quá hạn) --- */
.quick-days-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-btn {
    border: 1px solid var(--border-input);
    background: var(--bg-card);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

    .quick-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
        border-color: var(--primary-color);
    }

    .quick-btn:active {
        transform: scale(0.97);
    }

/* --- STATS GRID: Layout cho Dashboard "Việc tôi đã tạo" --- */
@media (min-width: 992px) {
    .stats-grid.grid-mode-created {
        display: grid !important;
        grid-template-columns: 1fr 0.8fr 1.2fr !important;
        gap: 12px;
    }
}

/* =============================================================================
   CHECKBOX INLINE - Filter Checkboxes
   ============================================================================= */
.filter-checkboxes {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

    .checkbox-inline input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        margin: 0;
        padding: 0;
        border: 2px solid #94a3b8;
        border-radius: 3px;
        background: #fff;
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
        vertical-align: middle;
    }

        .checkbox-inline input[type="checkbox"]:checked {
            background: #3b82f6;
            border-color: #3b82f6;
        }

            .checkbox-inline input[type="checkbox"]:checked::after {
                content: '';
                position: absolute;
                left: 4px;
                top: 1px;
                width: 4px;
                height: 8px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

/* ============================================================
   VIEW BỆNH NHÂN - Patient Detail Page Styles
   ============================================================ */

/* --- PATIENT HEADER --- */
.patient-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 12px 24px;
    border-bottom: 1px solid #e2e8f0;
    margin: -32px -32px 0 -32px;
}

.content-area .patient-header-wrapper {
    margin: -32px -32px 0 -32px;
    padding: 16px 32px;
}

.ph-info-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ph-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ph-name {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f4c75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.ph-gender-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gender-male {
    background-color: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.gender-female {
    background-color: #fce7f3;
    color: #db2777;
    border: 1px solid #fbcfe8;
}

.ph-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    flex-wrap: wrap;
}

.ph-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .ph-item i {
        color: #94a3b8;
        font-size: 12px;
    }

.ph-sep {
    color: #cbd5e1;
    font-weight: 300;
}

.font-mono {
    font-family: monospace;
    font-weight: 600;
    color: #334155;
    font-size: 14px;
}

/* --- TAB BỆNH NHÂN --- */
.bn-modern-card {
    padding: 24px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
}

/* Container scroll cho tab Bệnh nhân - chứa cả info + table */
.bn-scroll-container {
    flex: 1;
    overflow: auto;
    padding: 18px 20px;
}

    .bn-scroll-container .bn-detail-grid {
        margin-bottom: 15px;
    }

    .bn-scroll-container .bn-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #334155;
        margin: 20px 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #e2e8f0;
    }

    .bn-scroll-container .bn-history-table {
        width: 100%;
    }

.bn-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 24px;
    align-items: start;
}

.bn-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bn-group-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 6px;
    letter-spacing: 0.5px;
}

.bn-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    width: 100%;
}

.bn-lbl {
    color: #64748b;
    flex: 0 0 100px;
    width: 100px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.bn-val {
    color: #1e293b;
    font-weight: 500;
    font-size: 15px;
    word-break: break-word;
    flex: 1;
}

.bn-address {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bn-highlight {
    color: #0f4c75;
    font-weight: 700;
    font-size: 15px;
}

.bn-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    margin: 30px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .bn-section-title::before {
        content: '';
        display: block;
        width: 4px;
        height: 18px;
        background: #0f4c75;
        border-radius: 2px;
    }

.bn-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .bn-history-table th {
        background: #f1f5f9;
        font-weight: 600;
        color: #475569;
        padding: 12px 10px;
        text-transform: uppercase;
        font-size: 12px;
        white-space: nowrap;
    }

        .bn-history-table th.th-icon,
        .bn-history-table td:first-child {
            width: 45px;
            text-align: center;
        }

    .bn-history-table td {
        padding: 12px 10px;
        vertical-align: middle;
        border-bottom: 1px solid #e2e8f0;
    }

.bn-row-current {
    background-color: #fffbeb;
}

    .bn-row-current td {
        font-weight: 500;
        color: #1e293b;
    }

.bn-icon-current {
    color: #f59e0b;
    font-size: 16px;
}

.bn-icon-done {
    color: #22c55e;
    font-size: 16px;
}

/* --- TAB CÔNG KHÁM / XÉT NGHIỆM --- */
.exam-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 15px;
    align-items: stretch;
    height: calc(100vh - 220px); /* Fallback, sẽ được JS override */
    min-height: 400px;
}

.exam-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}

.exam-info-header {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #fff;
    flex-shrink: 0;
}

.ck-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px 24px;
}

.ck-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ck-lbl {
    color: #64748b;
    white-space: nowrap;
    min-width: 75px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ck-val {
    color: #1e293b;
    font-weight: 500;
    font-size: 15px;
    word-break: break-word;
}

.ck-highlight {
    color: #2563eb;
    font-weight: 700;
    font-size: 15px;
}

.exam-table-wrapper {
    flex: 1;
    overflow: auto;
    padding: 0;
}

    .exam-table-wrapper table th {
        position: sticky;
        top: 0;
        z-index: 2;
        border-top: none;
    }

/* Table dịch vụ: cột tên co dãn, các cột khác fix width */
.exam-service-table {
    width: 100%;
    table-layout: fixed;
}

    .exam-service-table .col-stt {
        width: 50px;
        text-align: center;
    }

    .exam-service-table .col-name {
        width: auto;
    }

    .exam-service-table .col-sl {
        width: 50px;
        text-align: center;
    }

    .exam-service-table .col-loai {
        width: 120px;
    }

    .exam-service-table .col-result {
        width: 100px;
        text-align: center;
    }

    .exam-service-table .col-unit {
        width: 90px;
        text-align: center;
    }

    .exam-service-table .col-normal {
        width: 100px;
        text-align: center;
    }

    .exam-service-table .col-note {
        width: 120px;
    }

    .exam-service-table td {
        vertical-align: middle;
    }

/* Bảng Xét nghiệm: Fixed Layout với wrap text */
.xn-table {
    width: 100%;
    min-width: 800px;
    table-layout: fixed;
}

    .xn-table th,
    .xn-table td {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        vertical-align: top;
        padding: 8px 10px;
    }

    .xn-table .col-name {
        width: auto;
    }

    .xn-table .col-sl {
        width: 50px;
        text-align: center;
    }

    .xn-table .col-result {
        width: 130px;
        text-align: center;
    }

    .xn-table .col-unit {
        width: 90px;
        text-align: center;
    }

    .xn-table .col-normal {
        width: 120px;
        text-align: center;
    }

    .xn-table .col-note {
        width: 150px;
    }

/* Row group cho xét nghiệm */
.xn-group-row {
    background-color: #f0f9ff;
}

    .xn-group-row td {
        font-weight: 600;
        color: #0369a1;
        padding: 8px 10px !important;
        font-size: 15px;
        white-space: normal;
        word-wrap: break-word;
    }

.xn-service-row td:first-child {
    padding-left: 20px;
}

/* Loading Indicator */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #64748b;
    gap: 12px;
    height: 100%;
    min-height: 200px;
}

    .loading-indicator i {
        font-size: 32px;
        color: var(--primary-color);
    }

    .loading-indicator span {
        font-size: 15px;
        font-weight: 500;
    }

/* Loading trong table */
.loading-indicator-row td {
    padding: 40px 20px !important;
}

    .loading-indicator-row td .loading-indicator {
        min-height: auto;
        padding: 20px;
        height: auto;
    }

/* Loading trong exam-list-body - center dọc */
.exam-list-body > .loading-indicator {
    height: 100%;
    min-height: 100%;
}

/* Loading Overlay cho exam-card */
.exam-card {
    position: relative;
}

.exam-card-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 4px;
}

    .exam-card-loading .loading-indicator {
        min-height: auto;
        height: auto;
    }

/* Loading trong exam-table-wrapper - center dọc */
.exam-table-wrapper > .loading-indicator {
    height: 100%;
    min-height: 100%;
}

/* Kết quả bất thường */
.result-low {
    color: #2563eb;
    font-weight: 600;
}

.result-high {
    color: #dc2626;
    font-weight: 600;
}

.exam-actions-bottom {
    padding: 10px 15px;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.exam-list-card {
    padding: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.exam-list-header {
    padding: 10px 15px;
    background-color: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid #bae6fd;
}

.exam-list-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.exam-list-item {
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 3px solid transparent;
}

    .exam-list-item:hover {
        background-color: #f8fafc;
    }

    .exam-list-item.selected {
        background-color: #eff6ff;
        border-left-color: #2563eb;
    }

.eli-date {
    font-weight: 700;
    color: #1e293b;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.eli-dept {
    font-size: 12px;
    color: #64748b;
}

.eli-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
}

.eli-icon {
    color: #2563eb;
    margin-right: 5px;
}

/* --- BẢNG CĐHA (CHẨN ĐOÁN HÌNH ẢNH) --- */
/* Container chính của bảng cần đè min-width: 0 để Grid hoạt động đúng */
.exam-main-panel {
    min-width: 0;
    overflow: hidden;
    height: 100%;
}

.exam-list-panel {
    height: 100%;
    min-width: 0;
    min-height: 0;
}

/* Bảng CĐHA: Fixed Layout */
.cdha-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
    -webkit-text-size-adjust: 100%; /* Ngăn iOS Safari auto font scaling */
    text-size-adjust: 100%;
}

    /* ĐỊNH NGHĨA CỘT CĐHA */
    .cdha-table .col-name {
        width: 250px;
        white-space: normal !important;
        vertical-align: top;
        padding: 8px 10px;
    }

    .cdha-table .col-sl {
        width: 50px;
        text-align: center;
        vertical-align: top;
        padding: 8px 5px;
    }

    .cdha-table .col-result {
        width: 280px;
        white-space: normal !important;
        word-wrap: break-word;
        vertical-align: top;
        padding: 8px 10px;
        color: #1e293b;
    }

    .cdha-table .col-pacs {
        width: 100px;
        text-align: center;
        vertical-align: top;
        padding: 8px 5px;
    }

    .cdha-table .col-note {
        width: auto;
        min-width: 120px;
        white-space: normal !important;
        vertical-align: top;
        padding: 8px 10px;
        color: #64748b;
    }

    /* Group row trong CĐHA - đồng bộ với XN */
    .cdha-table .xn-group-row td {
        font-size: 15px;
        padding: 6px 10px !important;
        line-height: 1.3;
        white-space: normal;
        word-wrap: break-word;
        -webkit-text-size-adjust: 100%; /* Ngăn iOS Safari auto font scaling */
        text-size-adjust: 100%;
    }

/* Nút Xem ảnh PACS */
.btn-pacs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: 1px solid transparent;
    height: 26px;
}

    .btn-pacs:hover {
        background-color: #0284c7;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
    }

/* --- BẢNG THUỐC --- */
.thuoc-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

    .thuoc-table .col-stt {
        width: 50px;
        text-align: center;
        vertical-align: top;
        padding: 8px 5px;
    }

    .thuoc-table .col-name {
        width: 200px;
        white-space: normal !important;
        vertical-align: top;
        padding: 8px 10px;
    }

    .thuoc-table .col-sl {
        width: 50px;
        text-align: center;
        vertical-align: top;
        padding: 8px 5px;
    }

    .thuoc-table .col-unit {
        width: 70px;
        text-align: center;
        vertical-align: top;
        padding: 8px 5px;
    }

    .thuoc-table .col-route {
        width: 90px;
        text-align: center;
        vertical-align: top;
        padding: 8px 5px;
    }

    .thuoc-table .col-usage {
        width: auto;
        min-width: 180px;
        white-space: normal !important;
        word-wrap: break-word;
        vertical-align: top;
        padding: 8px 10px;
        color: #1e293b;
    }

    .thuoc-table .col-note {
        width: 120px;
        white-space: normal !important;
        vertical-align: top;
        padding: 8px 10px;
        color: #64748b;
    }

    /* Group row trong Thuốc - đồng bộ với XN */
    .thuoc-table .xn-group-row td {
        font-size: 15px;
        padding: 6px 10px !important;
        line-height: 1.3;
        white-space: normal;
        word-wrap: break-word;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

/* --- RESPONSIVE VIEW BỆNH NHÂN --- */
@media (max-width: 992px) {
    .exam-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 12px;
        width: 100%;
    }

    .exam-list-panel {
        order: 1;
        height: auto;
        width: 100%;
        min-width: 100%;
    }

    .exam-list-card {
        height: auto;
        width: 100%;
    }

    .exam-list-body {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .exam-list-item {
        min-width: max-content;
    }

    .exam-main-panel {
        order: 2;
        width: 100%;
    }

    .exam-card {
        height: auto;
    }

    .exam-table-wrapper {
        flex: none;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

        .exam-table-wrapper table {
            min-width: 500px;
        }

        .exam-table-wrapper .xn-table {
            min-width: 600px;
        }

        .exam-table-wrapper .cdha-table {
            min-width: 700px;
        }

        .exam-table-wrapper .thuoc-table {
            min-width: 750px;
        }

    .exam-service-table {
        table-layout: auto;
    }

    .bn-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .content-area .patient-header-wrapper {
        margin: -16px -12px 0 -12px;
        padding: 12px 16px;
    }

    .bn-detail-grid {
        grid-template-columns: 1fr;
    }

    .ck-info-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ck-field {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.4;
    }

    .ck-lbl {
        flex: 0 0 85px;
        min-width: 85px;
        white-space: normal;
        font-size: 12px;
    }

    .ck-val {
        flex: 1;
        word-break: break-word;
        overflow-wrap: break-word;
        font-size: 14px;
    }

    .exam-list-panel {
        overflow: visible;
        width: 100%;
        min-width: 100%;
    }

    .exam-list-card {
        width: 100%;
    }

    .exam-list-body {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .exam-list-item {
        padding: 8px 12px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .eli-date {
        font-size: 13px;
        flex-shrink: 0;
    }

    .eli-dept {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }

    .exam-actions-bottom {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

        .exam-actions-bottom button {
            flex: 1 1 auto;
            min-width: 120px;
            font-size: 12px;
            padding: 8px 10px;
        }

    .exam-table-wrapper {
        flex: none;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

        .exam-table-wrapper table {
            min-width: 500px;
            width: max-content;
        }

        .exam-table-wrapper .xn-table {
            min-width: 600px;
        }

        .exam-table-wrapper .cdha-table {
            min-width: 600px;
        }

        .exam-table-wrapper table th,
        .exam-table-wrapper table td {
            white-space: nowrap;
            font-size: 13px !important;
        }

    .xn-group-row td {
        white-space: normal !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
        line-height: 1.3;
    }

    /* CĐHA group row - đồng bộ kích thước với XN */
    .cdha-table .xn-group-row td {
        font-size: 12px !important;
        padding: 6px 10px !important;
        line-height: 1.3;
        -webkit-text-size-adjust: 100% !important; /* Ngăn iOS Safari auto font scaling */
        text-size-adjust: 100% !important;
    }

    /* Giảm kích thước các cột CĐHA trên mobile - phù hợp min-width 600px */
    .cdha-table .col-name {
        width: 150px;
    }

    .cdha-table .col-result {
        width: 160px;
    }

    .cdha-table .col-pacs {
        width: 70px;
    }

    .cdha-table .col-note {
        min-width: 80px;
    }

    .btn-pacs {
        font-size: 11px;
        padding: 3px 8px;
        height: 24px;
        gap: 3px;
    }

    .xn-service-row td {
        font-size: 13px !important;
    }

    /* Bảng thuốc trên mobile */
    .exam-table-wrapper .thuoc-table {
        min-width: 700px;
    }

    .thuoc-table .col-stt {
        width: 40px;
    }

    .thuoc-table .col-name {
        width: 130px;
    }

    .thuoc-table .col-unit {
        width: 50px;
    }

    .thuoc-table .col-route {
        width: 70px;
    }

    .thuoc-table .col-usage {
        min-width: 120px;
    }

    .thuoc-table .col-note {
        min-width: 70px;
    }

    /* Thuoc group row - đồng bộ kích thước */
    .thuoc-table .xn-group-row td {
        font-size: 12px !important;
        padding: 6px 10px !important;
        line-height: 1.3;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    .exam-info-header {
        padding: 15px;
        overflow: hidden;
    }
}

/* =============================================================================
   RESPONSIVE MOBILE - TAB BENH AN DIEN TU / XET NGHIEM / CDHA
   Tach biet phan danh sach phieu va thong tin phieu + danh sach dich vu
   ============================================================================= */
@media (max-width: 480px) {
    /* Layout chuyen thanh flex column, danh sach phieu len tren */
    .exam-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* === PHAN 1: DANH SACH PHIEU (nam tren) === */
    .exam-list-panel {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        flex-shrink: 0 !important;
    }

    .exam-list-card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        border: 1px solid #e2e8f0 !important;
    }

    .exam-list-header {
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%) !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .exam-list-body {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        background: #f8fafc !important;
        border-radius: 0 0 8px 8px !important;
        scroll-snap-type: x mandatory !important;
    }

    /* Item phieu dang card ngang, scroll duoc */
    .exam-list-item {
        flex: 0 0 auto !important;
        min-width: 140px !important;
        max-width: 180px !important;
        padding: 10px 12px !important;
        border-radius: 6px !important;
        border: 1px solid #e2e8f0 !important;
        border-left: 3px solid #94a3b8 !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        scroll-snap-align: start !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

        .exam-list-item:hover {
            border-color: #cbd5e1 !important;
            background: #f8fafc !important;
        }

        .exam-list-item.selected {
            border-left-color: #2563eb !important;
            background: #eff6ff !important;
            border-color: #93c5fd !important;
            box-shadow: 0 2px 6px rgba(37,99,235,0.15) !important;
        }

    .eli-date {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        white-space: nowrap !important;
    }

    .eli-dept {
        font-size: 11px !important;
        color: #64748b !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* === PHAN 2: THONG TIN PHIEU + DANH SACH DICH VU (nam duoi) === */
    .exam-main-panel {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    .exam-card {
        height: auto !important;
        min-height: auto !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        overflow: visible !important;
    }

    /* Thong tin phieu (header) */
    .exam-info-header {
        padding: 14px !important;
        background: linear-gradient(135deg, #f8fafc 0%, #fff 100%) !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .ck-info-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .ck-field {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 6px 0 !important;
        border-bottom: 1px dashed #f1f5f9 !important;
    }

        .ck-field:last-child {
            border-bottom: none !important;
        }

    .ck-lbl {
        flex: 0 0 80px !important;
        min-width: 80px !important;
        font-size: 11px !important;
        color: #64748b !important;
    }

    .ck-val {
        flex: 1 !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }

    /* Bang dich vu */
    .exam-table-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* Actions bottom */
    .exam-actions-bottom {
        padding: 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        border-radius: 0 0 8px 8px !important;
    }

        .exam-actions-bottom button {
            flex: 1 1 calc(50% - 4px) !important;
            min-width: 100px !important;
            font-size: 12px !important;
            padding: 8px 12px !important;
        }

    /* Loading trong danh sach phieu */
    .exam-list-body > .loading-indicator {
        min-height: 60px !important;
        height: auto !important;
        padding: 15px !important;
    }

        .exam-list-body > .loading-indicator i {
            font-size: 24px !important;
        }

        .exam-list-body > .loading-indicator span {
            font-size: 13px !important;
        }

    /* Loading trong card */
    .exam-card-loading {
        border-radius: 8px !important;
    }

        .exam-card-loading .loading-indicator {
            min-height: 150px !important;
        }
}

/* =============================================================================
   FIX: Loading trong bảng Thanh Toán bị lệch phải do min-width lớn
   ============================================================================= */
/* Loading trong bảng có min-width lớn - căn giữa theo viewport */
#tabThanhToan .loading-indicator-row td {
    padding: 0 !important;
}

    #tabThanhToan .loading-indicator-row td .loading-indicator {
        position: sticky;
        left: 0;
        width: 100vw;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        min-height: 200px;
    }

/* Tương tự cho tab Bệnh án điện tử nếu cần */
#tabBenhAnDienTu .loading-indicator-row td .loading-indicator {
    position: sticky;
    left: 0;
    width: calc(100vw - 300px); /* trừ đi sidebar nếu có */
    max-width: 100%;
}