:root {
    /* VNU Color Palette */
    --primary-color: #1b5e20;
    --primary-light: #2e7d32;
    --primary-dark: #1b5e20;
    --secondary-color: #4caf50;
    --accent-color: #ffd600;

    /* Neutral Colors */
    --bg-body: #ffffff;
    --bg-sidebar: #E2EFE3;
    --bg-card: #E0EEE1;
    --text-main: #17221C;
    --primary-color: #1b5e20;
    --active-menu-bg: #def1e4;
    --text-muted: #666666;
    --text-on-primary: #ffffff;
    --border-color: #e0e0e0;

    /* Spacing System (Based on Design Specs) */
    --sp-8: 8px;
    --sp-10: 10px;
    --sp-14: 14px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-34: 34px;
    --sp-48: 48px;
    --sp-56: 56px;

    /* Proportional Sizing (Calculated from 1719px total design width) */
    /* Formula: 15px + 260px + 15px + 1414px + 15px = 1719px */
    --side-padding-pct: 0.87%;
    /* 15/1719 */
    --sidebar-pct: 15.12%;
    /* 260/1719 */
    --gap-pct: 0.87%;
    /* 15/1719 */
    --header-height: 70px;
    --border-radius: 28px;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI Variable Text', 'Segoe UI Variable Static Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    padding: 0;
    /* Full screen - no padding */
}

/* Scrollbar Styles — Figma spec: thumb #C9C9C9 / track #F6F6F6 / width 6px */
* {
    scrollbar-width: thin;
    scrollbar-color: #C9C9C9 #F6F6F6;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #F6F6F6;
    border-radius: 16px;
}

::-webkit-scrollbar-thumb {
    background: #C9C9C9;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #AEAEAE;
}

/* Layout Wrapper (App Container) */
.vnu-wrapper {
    display: flex;
    align-items: flex-start;
    /* Ensure sidebar and main start at same top */
    min-height: 100vh;
    width: 100%;
    margin: 0;
    overflow: visible;
    /* Must NOT be hidden - breaks sticky positioning */
    position: relative;
    padding: 20px var(--side-padding-pct);
    /* Fixed 20px top spacing */
    box-sizing: border-box;
}

/* Sidebar */
.vnu-sidebar {
    /* Figma: sidebar 260px trên canvas 1720px = 15.12%. Giữ tỷ lệ; chỉ chặn
       hai đầu để không teo/phình vô hạn. Nội thất bên trong co theo % của
       chính sidebar (xem --menu-gutter, font clamp bên dưới). */
    flex: 0 0 clamp(200px, var(--sidebar-pct), 300px);
    background-color: var(--bg-sidebar);
    color: var(--text-main);
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    align-self: flex-start;
    transition: var(--transition);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-right: none;
    border-radius: 28px;
    margin-right: var(--gap-pct);
    overflow-y: auto;
}

/* Logo cách trên 24px, dưới logo 34px tới đường kẻ; căn giữa ngang cho cân 2 bên */
.vnu-sidebar-header {
    padding: 9.23% 9.23% 13.08%;
    /* Figma 24/24/34px ÷ 260 */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Separator line: Figma #319:2007/2008 — 232px (89.2%), 2 màu chồng nhau (emboss) */
.vnu-sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Centered - khoảng cách 2 bên bằng nhau */
    width: 89.2%;
    /* 232/260 of sidebar width */
    height: 2px;
    background: linear-gradient(to bottom, #CEE0D1 1px, #F6FFF6 1px);
}

/* Logo 186×60 khi sidebar 260px → 186/212 content box, không kéo full width */
.vnu-sidebar-header img {
    width: 87.7%;
    max-width: 186px;
    height: auto;
    object-fit: contain;
}

.vnu-sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-10) 0;
}

.vnu-menu-label {
    padding: 5px 0 8px 9.23%;
    /* Figma 24px ÷ 260 */
    /* Left 24px = Figma (#774:4919 x=44 − sidebar x=20); top 5px + menu padding 10px = 15px dưới đường kẻ */
    font-size: clamp(10px, 0.698vw, 12px);
    /* Figma 12px ÷ 1720 */
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0.1em;
    color: #A6A6A6;
    /* Figma #774:4919 */
    text-transform: uppercase;
}

.vnu-menu-item {
    /* Figma 8px dọc / 16px ngang trên sidebar 260px.
       Ngang quy ra 6.15% để co theo sidebar; dọc giữ px vì không scale
       theo bề rộng. Thanh active dùng chung --menu-gutter nên luôn dính mép. */
    --menu-gutter: 6.15%;
    padding: 8px 6.15%;
    margin: 4px var(--menu-gutter);
    display: flex;
    align-items: center;
    gap: 4.62%;
    /* Figma 12px ÷ 260 */
    text-decoration: none;
    color: rgba(23, 34, 28, 0.65);
    /* Figma fill_031a38ec */
    transition: var(--transition);
    font-family: 'Segoe UI Variable Display', 'Segoe UI Variable', 'Segoe UI', sans-serif;
    /* Figma: Semibold Display */
    font-weight: 600;
    /* Figma: 600 Semibold */
    font-size: clamp(12.5px, 0.872vw, 15px);
    /* Figma 15px ÷ canvas 1720px */
    line-height: 1.47;
    /* Figma 22/15 — không dùng px để giãn theo font */
    border-radius: 16px;
    /* Figma: 16px */
    cursor: pointer;
}

.vnu-menu-item img.vnu-menu-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.vnu-menu-item:hover {
    background-color: rgba(27, 94, 32, 0.06);
    color: #17221C;
}

/* Figma: chữ + icon active màu đen #17221C, chỉ thanh chỉ báo trái màu xanh */
.vnu-menu-item.active {
    background-color: var(--active-menu-bg);
    color: #17221C;
    position: relative;
}

.vnu-menu-item .vnu-menu-icon {
    opacity: 0.65;
}

.vnu-menu-item.active .vnu-menu-icon,
.vnu-menu-item:hover .vnu-menu-icon {
    opacity: 1;
}

.vnu-menu-item.active::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--menu-gutter));
    /* Bám mép trái vùng lề, đồng bộ với --menu-gutter */
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 28px;
    background-color: #008855;
    /* VNU Green theo design guidelines */
    border-radius: 0 8px 8px 0;
}

.vnu-menu-item .arrow {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.vnu-menu-item.open .arrow {
    transform: rotate(180deg);
}

/* Submenu */
.vnu-submenu {
    display: none;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 5px 0;
}

.vnu-menu-item.open+.vnu-submenu {
    display: block;
}

.vnu-submenu-item {
    padding: 10px var(--sp-24) 10px 56px;
    display: block;
    text-decoration: none;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}

.vnu-submenu-item:hover,
.vnu-submenu-item.active {
    color: var(--primary-color);
}

/* Main Content Area */
.vnu-main {
    flex: 1;
    /* Automatically takes remaining percentage (~82.27%) */
    /* min-width:0 — mặc định flex item không co dưới kích thước nội dung
       (min-width:auto); trang nào có nội dung rộng ép chiều ngang (bảng dài,
       lưới nhiều cột cố định width...) sẽ đội cả .vnu-main (và cả trang) rộng
       ra theo, đè lên sidebar thay vì tự cuộn ngang gọn bên trong trang đó. */
    min-width: 0;
    min-height: calc(100vh - 20px);
    /* Adjusted for 20px top padding */
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 15px;
    /* Vertical gap remains fixed */
    background-color: transparent;
}

/* Footer removed */
.vnu-footer {
    display: none;
}

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

.vnu-footer a:hover {
    text-decoration: underline;
}

/* Header (Floating Navbar Card) */
.vnu-header {
    height: 88px;
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-radius: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
    width: 100%;
    box-sizing: border-box;
}

.vnu-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vnu-header-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vnu-filter-sep {
    width: 1px;
    height: 22px;
    background: #D0D0D0;
    flex-shrink: 0;
    margin: 0 6px;
}

.vnu-btn-date {
    height: 40px;
    padding: 0 20px;
    border: 2px solid #17221C;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    background: #17221C;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.vnu-btn-date:hover {
    background: #2a3d30;
    border-color: #2a3d30;
}

.vnu-select {
    height: 40px;
    /* Fixed height as per design */
    padding: 0 35px 0 16px;
    border: 2px solid #D0D0D0;
    /* Normal border: #D0D0D0 */
    border-radius: 50px;
    /* Capsule shape */
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    background-color: #ffffff;
    outline: none;
    cursor: pointer;
    min-width: 130px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: #647272;
    /* Normal text color: #647272 */
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.vnu-select:hover {
    border-color: #17221C;
}

.vnu-select:focus {
    border-color: #17221C;
    /* Focus border: #17221C */
    color: #17221C;
    /* Focus text: #17221C */
    box-shadow: none;
    /* Remove any shadow */
}

.vnu-select-large {
    min-width: 200px;
}

.vnu-header-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.vnu-nav-icon {
    position: relative;
    cursor: pointer;
}

.vnu-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff4757;
    color: white;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 700;
}

.vnu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.vnu-profile img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.vnu-profile-info span {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
    text-align: right;
    line-height: 1.2;
}

.vnu-profile-info small {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: right;
}

/* Notify icon inside .vnu-nav-icon */
.vnu-nav-icon img {
    width: 24px;
    opacity: 0.8;
}

/* Profile dropdown menu */
.vnu-dropdown-menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 30px;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 15px 0;
    z-index: 1001;
    border: 1px solid #eee;
}

.vnu-dropdown-menu.show {
    display: block;
}

.vnu-dropdown-header {
    padding: 0 20px 10px;
}

.vnu-dropdown-header p {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}

.vnu-dropdown-menu hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 10px 0;
}

.vnu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    text-decoration: none;
    color: #444;
    font-size: 0.9rem;
    transition: 0.2s;
}

.vnu-dropdown-item:hover {
    background: #f8f9fa;
    color: var(--primary-color);
}

/* Dropdown thông báo (chuông) — lệch trái so với profile menu vì icon nằm bên trái avatar,
   min-width rộng hơn để chứa số đếm bên phải mỗi dòng. */
.vnu-notify-menu {
    right: 220px;
    min-width: 300px;
}

.vnu-dropdown-item .vnu-notify-count {
    margin-left: auto;
    background: #F0F0F0;
    color: #647272;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
}

/* Page Content Card */
.vnu-content {
    background-color: var(--bg-card);
    /* Mint background #E0EEE1 theo Figma (node 319:1629) */
    border-radius: 28px;
    padding: 10px;
    /* Requested 10px spacing từ edges */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Breadcrumb - xuyên suốt dự án */
.vnu-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    padding-top: 0px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7a72;
}

.vnu-breadcrumb a {
    color: #6b7a72;
    text-decoration: none;
    transition: color 0.2s;
}

.vnu-breadcrumb a:hover {
    color: var(--primary-color);
}

.vnu-breadcrumb .vnu-breadcrumb-sep {
    color: #b0bfb4;
    font-size: 12px;
}

.vnu-breadcrumb .vnu-breadcrumb-current {
    color: #484727;
    font-weight: 700;
}


.vnu-page-header {
    padding: 0 var(--sp-10);
    margin-bottom: -10px;
    /* Bring it closer to content but stay outside */
}

/* UI Components */
.vnu-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.vnu-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Stats Cards */
.vnu-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.vnu-stat-card {
    background-color: #fff;
    padding: 25px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border-left: 5px solid var(--primary-color);
}

.vnu-stat-card:hover {
    transform: translateY(-5px);
}

.vnu-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background-color: rgba(27, 94, 32, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.vnu-stat-info h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.vnu-stat-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Tables */
.vnu-table-container {
    overflow-x: auto;
}

.vnu-table {
    width: 100%;
    border-collapse: collapse;
}

.vnu-table th {
    background-color: #f8f9fa;
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
}

.vnu-table td {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.vnu-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.vnu-status-success {
    background: #e3fcef;
    color: #00875a;
}

.vnu-status-warning {
    background: #fffae6;
    color: #ff8b00;
}

.vnu-status-danger {
    background: #ffebe6;
    color: #de350b;
}

/* Responsive — sidebar off-canvas trên màn nhỏ */
.vnu-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #D0D0D0;
    border-radius: 12px;
    background: #FEFFFD;
    color: #17221C;
    cursor: pointer;
    flex-shrink: 0;
}

.vnu-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 34, 28, 0.4);
    z-index: 999;
}

@media (max-width: 1024px) {
    .vnu-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: min(300px, 84vw);
        flex: none;
        border-radius: 0 20px 20px 0;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
    }

    .vnu-sidebar.open {
        transform: translateX(0);
    }

    .vnu-main {
        margin-left: 0;
        width: 100%;
    }

    .vnu-menu-toggle {
        display: inline-flex;
    }

    .vnu-sidebar-backdrop.show {
        display: block;
    }
}

/* Topbar co giãn trên điện thoại */
@media (max-width: 768px) {
    .vnu-header {
        height: auto;
        min-height: 60px;
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 10px;
        border-radius: 20px;
    }

    .vnu-header-filters {
        flex-wrap: wrap;
        gap: 6px;
    }

    .vnu-select {
        height: 36px;
        font-size: 13px;
    }

    .vnu-select-large {
        min-width: 0;
        max-width: 55vw;
    }

    .vnu-header-right {
        gap: 12px;
    }

    /* Ẩn chữ tên user, giữ avatar cho gọn */
    .vnu-profile-info {
        display: none;
    }
}

/* ==========================================================================
   AUTHENTICATION PAGES — Login (new split-screen design)
   ========================================================================== */

.vnu-auth-page {
    min-height: 100vh;
    background: #E0EEE1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* vertical padding = 5vh mỗi bên, dùng cùng giá trị trong công thức width card */
    padding: clamp(20px, 5vh, 79px) clamp(16px, 8.75vw, 168px);
    box-sizing: border-box;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

.vnu-login-card {
    display: grid;
    grid-template-columns: 924fr 660fr;
    /*
     * Giới hạn width theo CẢ HAI chiều:
     * 1. Không quá width khả dụng (100%)
     * 2. Không quá width khiến height vượt (100vh - 2×padding_dọc)
     *    → max_w = (100vh - 2×5vh) × 1584/960 = 90vh × 1.65
     * → dùng min() để lấy giá trị nhỏ hơn
     */
    width: min(100%, calc(90vh * 1584 / 960), 1584px);
    background: #FEFFFD;
    border-radius: clamp(18px, 2.27vw, 36px);
    overflow: hidden;
    box-shadow: 0 4px 48px rgba(23, 34, 28, 0.10);
    aspect-ratio: 1584 / 960;
}

/* padding = 36/1584 ≈ 2.27vw — không right padding vì ảnh sát mép phân chia cột */
.vnu-login-left {
    padding: clamp(12px, 2.27vw, 36px) 0 clamp(12px, 2.27vw, 36px) clamp(12px, 2.27vw, 36px);
}

.vnu-login-campus-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: clamp(12px, 1.64vw, 26px);
    display: block;
}

/* padding-top: 96/1584≈6.06vw | left/right: 123/1584≈7.76vw */
.vnu-login-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(40px, 6.06vw, 96px) clamp(24px, 7.76vw, 123px) clamp(16px, 2.27vw, 36px);
}

.vnu-login-form-wrap {
    width: 100%;
}

/* logo: width = tỷ lệ 216/1584=13.64vw, height tự tính theo aspect-ratio SVG */
.vnu-login-logo {
    display: block;
    width: min(100%, clamp(100px, 13.64vw, 216px));
    height: auto;
    margin: 0 auto clamp(24px, 6.06vw, 96px);
}

/* 28/1584≈1.77vw | margin: 11/1584≈0.69vw */
.vnu-login-title {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: clamp(18px, 1.77vw, 28px);
    font-weight: 600;
    color: #17221C;
    margin: 0 0 clamp(6px, 0.69vw, 11px);
    line-height: 1.25;
    text-align: center;
}

/* 16/1584≈1.01vw | margin: 22/1584≈1.39vw */
.vnu-login-subtitle {
    font-size: clamp(13px, 1.01vw, 16px);
    color: #647272;
    margin: 0 0 clamp(12px, 1.39vw, 22px);
    text-align: center;
}

/* gap label→input: 24/1584≈1.52vw | margin-bottom: 24/1584≈1.52vw */
.vnu-login-group {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.52vw, 24px);
    margin-bottom: clamp(10px, 1.52vw, 24px);
}

/* 18/1584≈1.14vw */
.vnu-login-label {
    font-size: clamp(13px, 1.14vw, 18px);
    font-weight: 400;
    color: #17221C;
    line-height: 1.3;
}

.vnu-login-label strong {
    font-weight: 700;
}

/* height: 56/1584≈3.54vw | font: 16/1584≈1.01vw */
.vnu-login-input {
    width: 100%;
    height: clamp(38px, 3.54vw, 56px);
    padding: 0 clamp(10px, 1.14vw, 18px);
    border: 2px solid #e2e5e4;
    border-radius: 14px;
    font-size: clamp(13px, 1.01vw, 16px);
    font-family: inherit;
    color: #17221c;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.vnu-login-input:focus {
    border-color: #17221c;
}

.vnu-login-input::placeholder {
    color: #c0cccc;
}

.vnu-login-input.is-invalid {
    border-color: #ed3e09;
}

.vnu-login-error {
    font-size: 12px;
    color: #ed3e09;
    margin-top: 4px;
    display: block;
}

.vnu-login-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 0;
    font-size: 14px;
    color: #647272;
}

.vnu-login-extra label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.vnu-login-extra a {
    color: #008855;
    font-weight: 600;
    text-decoration: none;
}

.vnu-login-extra a:hover {
    text-decoration: underline;
}

.vnu-login-btn {
    width: 100%;
    height: clamp(38px, 3.54vw, 56px);
    background: #4CD681;
    border: none;
    border-radius: 14px;
    font-size: clamp(14px, 1.14vw, 18px);
    font-weight: 600;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    color: #17221C;
    cursor: pointer;
    margin-top: clamp(24px, 3.54vw, 56px);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vnu-login-btn:hover {
    background: #38c46a;
}

.vnu-login-btn:active {
    transform: translateY(1px);
}

.invalid-feedback {
    color: #ed3e09;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

@media (max-width: 900px) {
    .vnu-auth-page {
        padding: 24px 16px;
        /* flex-start + margin:auto trên card: căn giữa khi đủ chỗ,
           tự neo lên đỉnh (cuộn được) khi card cao hơn viewport —
           align-items:center sẽ cắt mất phần đầu card khi tràn */
        align-items: flex-start;
    }

    .vnu-login-card {
        grid-template-columns: 1fr;
        aspect-ratio: unset;
        width: 100%;
        max-width: 560px;
        margin: auto;
        border-radius: 24px;
    }

    .vnu-login-left {
        display: none;
    }

    .vnu-login-right {
        padding: 48px clamp(24px, 9%, 56px);
        justify-content: flex-start;
    }

    .vnu-login-logo {
        width: clamp(140px, 40%, 216px);
        margin-bottom: 36px;
    }

    /* Tap target ≥48px; font input ≥16px để iOS Safari không tự zoom khi focus */
    .vnu-login-input,
    .vnu-login-btn {
        height: 48px;
        font-size: 16px;
    }

    .vnu-login-label {
        font-size: 15px;
    }

    .vnu-login-btn {
        margin-top: 28px;
    }
}

@media (max-width: 480px) {
    .vnu-auth-page {
        padding: 0;
        align-items: stretch;
    }

    .vnu-login-card {
        border-radius: 0;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
    }

    .vnu-login-right {
        padding: 32px 24px;
        /* Cân nội dung giữa màn hình; khi bàn phím mở (dvh co lại) form vẫn trong tầm nhìn */
        justify-content: center;
    }

    .vnu-login-logo {
        margin-bottom: 28px;
    }
}

/* ============================================================
   VNU KTX - Dashboard CSS (synced with Figma frame #1:3)
   Colors:
     #FEFFFD  = card background (fill_66eb6723)
     #FFFFFF  = building card bg (fill_658ab2fa)
     #17221C  = primary text (fill_e94daada)
     #647272  = secondary text (fill_f1e5b191)
     #008855  = green accent (fill_31891b0a)
     #43B4FF  = blue accent (fill_9e187a40)
     #4CD681  = green light (fill_af7b293c)
     #FCAF00  = yellow (fill_16488390)
     #F0F0F0  = track / grey bg (fill_114125f5)
     #6B7D95  = chart axis text (fill_3024d59a)
   ============================================================ */

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

/* ===== BASE CARD ===== */
.db-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

/* style_7953979f = Semibold 14px / style_0fe7975f = Regular 14px */
.db-container * {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

.db-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    display: flex;
    flex-direction: column;
}

/* Semibold 12px uppercase 0.1em */
.db-card-label {
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 22px;
}

/* ===== ROW 1 – OVERVIEW GRID ===== */
.db-overview-grid {
    display: grid;
    grid-template-columns: 2.456fr 3fr;
    gap: 10px;
}

.db-buildings-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.db-buildings-scroll::-webkit-scrollbar {
    display: none;
}

.db-buildings-scroll .db-building-card {
    flex: 0 0 calc((100% - 20px) / 3);
    min-width: 180px;
    scroll-snap-align: start;
}

/* --- Tổng sinh viên card: no shadow, label gap 24px, progress gap 28px --- */
.db-card-students {
    box-shadow: none;
}

.db-card-students .db-card-label {
    margin-bottom: 24px;
}

/* Progress bar container: h=64px @1728px (3.7vw) borderRadius=16px */
.db-main-progress-container {
    height: clamp(44px, 3.7vw, 64px);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 28px;
}

/* 4px gap between segments matching Figma (4px inter-segment spacing) */
.db-main-progress-bar {
    display: flex;
    height: 100%;
    gap: 4px;
}

/* 4 segments */
.db-progress-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.db-seg-blue {
    background: #43B4FF;
    border-radius: 16px 4px 4px 16px;
}

.db-seg-green {
    background: #4CD681;
    border-radius: 4px;
}

.db-seg-yellow {
    background: #FCAF00;
    border-radius: 4px;
}

.db-seg-grey {
    background: #F0F0F0;
    color: #647272;
    font-size: 12px;
    border-radius: 4px 16px 16px 4px;
}

/* Stats row: 10px left indent matches Figma (1685 at x=34 vs progress bar at x=24) */
.db-main-stats {
    display: flex;
    align-items: center;
    padding-left: 10px;
}

/* "1685" bold 42px @1728px → clamp cho màn nhỏ */
.db-main-total {
    font-size: clamp(30px, 2.45vw, 42px);
    font-weight: 700;
    color: #17221C;
    line-height: 46px;
    flex-shrink: 0;
}

/* 56px @1728px = 3.24vw */
.db-main-details {
    display: flex;
    flex: 1;
    margin-left: clamp(16px, 3.24vw, 56px);
    gap: 0;
}

/* style_59a749dd detail blocks */
.db-detail-item {
    position: relative;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    white-space: nowrap;
    justify-content: center;
}

.db-detail-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 37px;
    border-radius: 2px;
}

/* Divider colors from Figma #894:89–92 */
.db-item-blue::before {
    background: #43B4FF;
}

.db-item-green::before {
    background: #33CC6D;
}

.db-item-yellow::before {
    background: #FCAF00;
}

.db-item-grey::before {
    background: #F0F0F0;
}

/* style_0fe7975f: Regular 14px #647272 */
.db-detail-label {
    font-size: 14px;
    font-weight: 400;
    color: #647272;
    line-height: 22px;
}

/* style_59a749dd: Bold 18px #17221C */
.db-detail-val {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 24px;
}

/* --- Building cards (#894:44-46) bg=#FFFFFF box shadow rgba(0,0,0,0.07) --- */
.db-building-card {
    background: #FFFFFF !important;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.07) !important;
    padding: 24px !important;
    gap: 0;
    display: flex;
    flex-direction: column;
}

/* Semibold 12px UPPER 0.1em #17221C */
.db-building-header {
    font-size: 12px;
    font-weight: 600;
    color: #17221C;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 16px;
    margin-bottom: 14px;
}

.db-building-main {
    margin-bottom: 8px;
}

/* Bold 36px lineHeight 46px #17221C — clamp cho màn nhỏ */
.db-building-pct {
    font-size: clamp(26px, 2.1vw, 36px);
    font-weight: 700;
    color: #17221C;
    line-height: 46px;
}

/* "400 sinh viên" semibold #17221C, "/434 chỗ" regular #647272 */
.db-building-sv {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

.db-building-slot {
    font-size: 14px;
    font-weight: 400;
    color: #647272;
}

/* Track: 12px high #F0F0F0; fills: 8px high inset 2px */
.db-building-track {
    height: 12px;
    background: #F0F0F0;
    border-radius: 6px;
    margin: 8px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 2px;
    box-sizing: border-box;
}

.db-building-fill-blue {
    height: 100%;
    background: #43B4FF;
    border-radius: 4px 0 0 4px;
}

.db-building-fill-green {
    height: 100%;
    background: #4CD681;
    border-radius: 0 4px 4px 0;
}

/* Footer: 2 rows, each row = label left + value right */
.db-building-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.db-building-f-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Regular 12px #647272 */
.db-bf-label {
    font-size: 12px;
    font-weight: 400;
    color: #647272;
    white-space: nowrap;
}

/* Semibold 14px #17221C */
.db-bf-val {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

/* ===== ROW 2 – CONTENT GRID ===== */
.db-content-grid {
    display: grid;
    grid-template-columns: 63fr 37fr;
    gap: 10px;
    /* Hai cột cao theo nội dung riêng, không cột nào kéo cột kia dài ra */
    align-items: start;
}

.db-content-left,
.db-content-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-content-right {
    align-self: start;
    position: sticky;
    top: 10px;
}

/* ===== STATS ROW (3 cards) ===== */
/* auto-fit để tự xuống hàng trên màn hẹp, không cần media query riêng */
.db-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* Cards: #FEFFFD bg, shadow rgba(17,59,100,0.07), borderRadius 16px, 142px height (Figma) */
.db-stat-card {
    border-radius: 16px !important;
    min-height: 142px;
    padding-bottom: 16px !important;
}

/* Semibold 12px UPPER 0.1em #647272 */
.db-stat-header {
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 16px;
}

/* Icon 28×28 + value side by side, gap 8px → value starts at 24+28+8=60px from card left */
.db-stat-body {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 10px;
}

/* Icon container: exactly 28×28 to match Figma icon position */
.db-stat-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* style_7a1d05bb: Bold 36px lineHeight 46px #17221C — clamp cho màn nhỏ */
.db-stat-value {
    font-size: clamp(26px, 2.1vw, 36px);
    font-weight: 700;
    color: #17221C;
    line-height: 46px;
}

/* ts1 style: fontSize 28px #647272 fontWeight 350 (semilight) */
.db-stat-unit {
    font-size: 28px;
    font-weight: 350;
    color: #647272;
}

/* style_7953979f: Semibold 14px #008855 */
.db-stat-footer {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}

.db-text-green {
    color: #008855;
}

.db-user-avatars {
    display: flex;
    align-items: center;
}

.db-avatar-sm {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    flex-shrink: 0;
}

/* ===== HEATMAP CARD ===== */
/* #319:1645: 874x462 bg=#FEFFFD shadow borderRadius=26px */
.db-heatmap-card {
    flex: 1;
}

.db-heatmap-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
}

/* Legend aligns with title bottom, label has no bottom gap */
.db-heatmap-header .db-card-label {
    margin-bottom: 0;
}

/* style bold 24px #17221C */
.db-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #17221C;
    margin: 4px 0 0 0;
    line-height: 1.3;
}

/* Legend */
.db-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    white-space: nowrap;
}

.db-legend-colors {
    display: flex;
    gap: 2px;
}

.db-color-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

/* Heatmap cell colors — percentage-based */
.db-c0 {
    background: #FEFFFD;
    border: 1px dashed #87D8D9;
    box-sizing: border-box;
}

/* 0% trống */
.db-c1 {
    background: #D9F4F4;
}

/* 1–25% */
.db-c2 {
    background: #A0E1E1;
}

/* 26–50% */
.db-c3 {
    background: #4FBEC1;
}

/* 51–75% */
.db-c4 {
    background: #2A9DA2;
}

/* 76–99% */
.db-c5 {
    background: #1A6E73;
}

/* 100% đầy / bảo trì */

.db-heatmap-building {
    margin-bottom: 14px;
}

.db-heatmap-building-label {
    font-size: 12px;
    font-weight: 600;
    color: #4A4A4A;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #E8E8E8;
}

.db-heatmap-floor {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

.db-heatmap-floor-label {
    font-size: 10px;
    color: #999;
    min-width: 20px;
    padding-top: 3px;
    flex-shrink: 0;
}

.db-heatmap-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1;
}

.db-heatmap-cell {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.db-heatmap-cell:hover {
    opacity: 0.75;
}

/* ===== BAR CHART CARD ===== */
/* Figma: 510x314 — dùng aspect-ratio để scale theo chiều rộng thực tế */
.db-chart-card {
    flex: none;
    aspect-ratio: 510 / 314;
    min-height: 0;
    overflow: hidden;
}

.db-chart-card .db-card-label {
    margin-bottom: 8px;
}

.db-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 9px;
}

/* style_7a1d05bb: Bold 36px #17221C — clamp cho màn nhỏ */
.db-chart-total {
    font-size: clamp(26px, 2.1vw, 36px);
    font-weight: 700;
    color: #17221C;
    line-height: 46px;
}

.db-chart-legend {
    display: flex;
    gap: 16px;
    align-items: center;
}

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

/* 15x15 squares borderRadius 4px */
.db-dot {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    flex-shrink: 0;
}

.db-dot-blue {
    background: #3BB0FF;
}

/* #321:2094 */
.db-dot-green {
    background: #4CD681;
}

/* #321:2095 */

/* style_7953979f: Semibold 14px — màu chữ theo Figma #3026:41/42 */
.db-legend-nam {
    font-size: 14px;
    font-weight: 600;
    color: #43B4FF;
}

.db-legend-nu {
    font-size: 14px;
    font-weight: 600;
    color: #4CD681;
}

.db-bar-chart {
    width: 100%;
    flex: 1;
}

/* ===== GAUGE CARD ===== */
/* Figma vẽ card 510x302, NHƯNG không ép aspect-ratio đó: gauge SVG có tỷ lệ
   riêng (viewBox 336x192 = 1.75). Hai tỷ lệ đá nhau, card thắng + overflow
   hidden -> cắt mất dòng "%". Để chiều cao card do nội dung quyết định. */
.db-gauge-card {
    flex: none;
    min-height: 0;
}

.db-gauge-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* "116" bold 18px #17221C; "/ 125 hồ sơ" semilight 18px #17221C (ts2) */
.db-gauge-val {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 22px;
}

/* ts2 = fontWeight 350 (Semilight) */
.db-gauge-light {
    font-size: 18px;
    font-weight: 350;
    color: #17221C;
}

/* Regular 14px #17221C */
.db-gauge-desc {
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    margin-top: 2px;
    line-height: 22px;
}

.db-gauge-svg-wrap {
    /* Figma: gauge 336px trong card 510px = 65.9%, KHÔNG full width.
       Cao theo đúng tỷ lệ viewBox nên card tự ra ~302/510 như thiết kế. */
    flex: none;
    width: 65.9%;
    min-width: 180px;
    margin-inline: auto;
    aspect-ratio: 336 / 192;
    /* arc top overflows ~5px into stats area */
    overflow: visible;
}

.db-gauge-svg-wrap>svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cột phải của stats row gauge — căn phải theo Figma #3026:6/8 */
.db-gauge-right {
    text-align: right;
}

/* Đường kẻ mảnh dưới label card cột phải (Figma line #3026:13/45: #F6F6F6 2px) */
.db-card-divider {
    border-top: 2px solid #F6F6F6;
    margin-bottom: 10px;
}

/* ===== CA TRỰC FOOTER: avatar chồng nhau + tên xanh (Figma #319:1727-1729) ===== */
.db-stat-duty {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.db-user-avatars .db-avatar-sm+.db-avatar-sm {
    margin-left: -14px;
}

.db-duty-names {
    color: #008855;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== HEATMAP TOOLTIP (Figma #353:2553-2556: nền #17221C, bo 8px) ===== */
.db-tooltip {
    position: fixed;
    z-index: 3000;
    background: #17221C;
    border-radius: 8px;
    padding: 8px 14px 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    transform: translate(-50%, calc(-100% - 10px));
    white-space: nowrap;
}

.db-tooltip.show {
    opacity: 1;
}

.db-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #17221C;
}

/* "A1 - 1001 :" Semibold 12px upper #8A918C */
.db-tooltip-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8A918C;
    line-height: 16px;
}

/* "3/6 chỗ trống" Semibold 14px #F6F6F6 */
.db-tooltip-value {
    font-size: 14px;
    font-weight: 600;
    color: #F6F6F6;
    line-height: 22px;
}

/* ===== DASHBOARD RESPONSIVE ===== */
/* Cột phải (chart + gauge) xuống dưới, xếp 2 card cạnh nhau */
@media (max-width: 1280px) {
    .db-content-grid {
        grid-template-columns: 1fr;
    }

    .db-content-right {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

/* Card Tổng sinh viên xuống hàng riêng, hàng tòa nhà cuộn ngang full width */
@media (max-width: 1100px) {
    .db-overview-grid {
        grid-template-columns: 1fr;
    }

    .db-buildings-scroll .db-building-card {
        flex-basis: calc((100% - 20px) / 3);
    }
}

@media (max-width: 768px) {
    .db-content-right {
        grid-template-columns: 1fr;
    }

    .db-buildings-scroll .db-building-card {
        flex-basis: min(260px, 80%);
    }

    .db-heatmap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Số tổng + cột chi tiết xuống 2 hàng cho dễ đọc */
    .db-main-stats {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .db-main-details {
        flex-basis: 100%;
        margin-left: 0;
    }
}

/* ============================================================
   SMART FACILITY MANAGEMENT (Quản lý Cơ sở)
   Matches Figma interactive layout 3-panel
   ============================================================ */

/* Figma #722:9235: card #FEFFFD, bo 26px, padding 24px */
.vnu-facility-wrapper {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 24px 24px 0 24px;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
}

.vnu-facility-header-row {
    display: flex;
    flex-direction: column;
    /* Stack title and tabs vertically */
    align-items: flex-start;
    /* Align everything to the left */
    gap: 24px;
    /* Figma: title bottom (264) → tabs (288) = 24px */
    margin-bottom: 24px;
    /* Exact 24px gap to match Figma */
}

.vnu-page-title {
    font-size: 36px;
    /* Figma: Bold 36px / line-height 46px */
    font-weight: 700;
    line-height: 46px;
    color: var(--text-main);
    margin: 0;
}

.vnu-facility-tabs {
    display: flex;
    gap: 24px;
    /* Figma: 24px giữa các tab */
    width: 100%;
    /* Ensure line goes across the full width */
    border-bottom: 1px solid #E2E5E4;
    /* Figma line #684:663 */
}

.vnu-facility-tab-item {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    /* Figma fill_031a38ec */
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
    /* Figma: text (304) → line (314) = 10px */
    letter-spacing: 0.1em;
    /* Figma: 10% */
    transition: all 0.3s ease;
}

.vnu-facility-tab-item.active {
    color: var(--text-main);
}

.vnu-facility-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    /* Sit exactly on the border-bottom below */
    left: 0;
    width: 100%;
    /* Full width under text looks better for 12px caps */
    height: 2px;
    /* Thinner line for elegance */
    background: var(--text-main);
    border-radius: 2px;
}

/* 3-Panel Layout Container */
.vnu-facility-container {
    display: flex;
    gap: 0;
    background: transparent;
    /* Wrapper already has solid white background */
    border: none;
    padding: 0;
    /* Clean transparent layout */
    flex: 1;
    min-height: 800px;
}

/* Common Panel Style */
.vnu-facility-dorm,
.vnu-facility-building,
.vnu-facility-room-wrapper,
.vnu-facility-room {
    background: transparent;
    /* Seamless integration with white container background */
    border: none;
    /* No outer card borders */
    border-radius: 0;
    /* Flat layout inside */
    padding: 0;
    display: flex;
    flex-direction: column;
}

.vnu-facility-dorm {
    width: 300px;
    padding-right: 30px;
    border: none;
    /* No border stroke */
}

.vnu-facility-building {
    width: 252px;
    /* 212px card width + 40px padding space */
    padding: 0 20px;
    border: none;
    /* No border stroke */
}

.vnu-building-group:first-child .vnu-area-title,
.vnu-area-title:first-of-type {
    margin-top: 0;
}

.vnu-facility-room-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vnu-facility-room {
    flex: 1;
    padding-left: 30px;
    padding-top: 0;
    padding-bottom: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.vnu-room-action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 52px;
    flex-shrink: 0;
    border: 1px solid #E2E5E4;
    background: rgba(246, 246, 246, 0.9);
    margin: 40px 30px;
    border-radius: 6px;
}

.vnu-room-action-bar-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    transition: background 0.15s;
}

.vnu-room-action-bar-btn:hover {
    background: rgba(160, 225, 225, 0.15);
}

.vnu-room-action-bar-sep {
    width: 1px;
    height: 20px;
    background: #E2E5E4;
    flex-shrink: 0;
}


/* Sidebar Buttons & Items */
.btn-add-facility {
    background: #17221C;
    color: #FEFFFD;
    border-radius: 6px;
    height: 42px;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-weight: 600;
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 24px;
    transition: var(--transition);
}

.btn-add-facility:hover {
    background: #000000;
    transform: translateY(-1px);
}

.vnu-facility-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.vnu-facility-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    padding: 0;
    margin-bottom: 4px;
}

.vnu-facility-item-cover {
    width: 100%;
    height: 100px;
    background: #F6F6F6;
    border-radius: 6px;
    margin-bottom: 12px;
    transition: background-color 0.2s ease;
}

.vnu-facility-item:hover .vnu-facility-item-cover {
    background: #EBEBEB;
}

.vnu-facility-item.active .vnu-facility-item-cover {
    background: #E8EFEA;
    border: 1px solid #008855;
}

.vnu-facility-item-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 10px;
    width: 100%;
}

.vnu-facility-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vnu-facility-item-name {
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #647272;
    margin: 0;
    transition: color 0.2s ease;
}

.vnu-facility-item:hover .vnu-facility-item-name,
.vnu-facility-item.active .vnu-facility-item-name {
    color: #17221C;
}

.vnu-facility-item-addr {
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #647272;
    margin: 0;
}

.vnu-facility-item-arrow {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    margin-top: -1px;
    transition: all 0.2s ease;
}

.vnu-facility-item:hover .vnu-facility-item-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* Building List Styling */
.vnu-area-title {
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(100, 114, 114, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    margin-top: 16px;
}

.vnu-building-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vnu-building-edit-btn {
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
}

.vnu-building-item:hover .vnu-building-edit-btn {
    opacity: 0.6;
}

.vnu-building-edit-btn:hover {
    opacity: 1 !important;
    background: #F0F4F3;
}

.vnu-building-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 212px;
    height: 52px;
    box-sizing: border-box;
    padding: 0 8px 0 16px;
    border-radius: 6px;
    background: #FEFFFD;
    border-style: solid;
    border-width: 1px 1px 3px 1px;
    border-color: #E2E5E4;
    cursor: pointer;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #647272;
    margin-bottom: 8px;
    transition: var(--transition);
}

.vnu-building-item:hover {
    border-color: #17221C;
    color: #17221C;
}

.vnu-building-item.active {
    background: #FEFFFD;
    color: #17221C;
    border-color: #E2E5E4;
    border-radius: 6px 6px 0 0;
    border-bottom-color: transparent;
    margin-bottom: 0;
}

.vnu-building-item img {
    opacity: 0;
    width: 20px;
    height: 20px;
    transition: all 0.2s ease;
}

.vnu-building-item:hover img {
    opacity: 1;
}

.vnu-building-item.active img {
    opacity: 1;
    filter: none;
}

/* Building Details View (Figma Spec) */
.vnu-building-details {
    background: #FEFFFD;
    border-style: solid;
    border-width: 0 1px 3px 1px;
    border-color: #E2E5E4;
    border-radius: 0 0 6px 6px;
    padding: 12px 16px 16px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    animation: vnuFadeInSlide 0.25s ease-out;
}

.vnu-detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vnu-detail-label {
    font-size: 12px;
    font-weight: 400;
    color: rgba(23, 34, 28, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vnu-detail-val {
    font-size: 14px;
    font-weight: 600;
    /* Figma style_dc8f7829: Semibold 14 */
    color: #17221C;
}

.vnu-detail-list {
    margin: 0;
    padding-left: 16px;
    list-style-type: disc;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    line-height: 22px;
}

.vnu-detail-list li {
    margin-bottom: 0;
}

@keyframes vnuFadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.btn-add-inline {
    display: none;
    /* Replaced by the building card add button */
}

.btn-add-inline:hover {
    border-color: #17221C;
    background: #F8FBF8;
}

/* Room Grid Styling */
.vnu-floor-section+.vnu-floor-section {
    margin-top: 28px;
}


.vnu-room-header-row {
    margin-bottom: 12px;
}

.vnu-floor-header {
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(100, 114, 114, 0.65);
    /* Figma #722:9295 — cùng màu label KHU */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Figma: đường kẻ đứt ngang trên mỗi tầng (#722:9322), tile cách line 5px */
.vnu-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-auto-rows: 80px;
    gap: 10px;
    border-top: 1px dashed #E2E5E4;
    padding-top: 5px;
}

/* Figma #722:11038 (đã chọn tòa): phòng có giường = teal #A0E1E1;
   Figma #722:10808 (new): phòng chưa cấu hình = #F6F6F6 */
.vnu-room-card {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #A0E1E1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 6px 4px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.vnu-room-card--empty {
    background: #F6F6F6;
}

.vnu-room-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 107, 115, 0.2);
}

.vnu-room-card.selected {
    outline: 2px solid #2B6B73;
    outline-offset: 1px;
}

.vnu-room-name {
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #2B6B73;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vnu-room-card--empty .vnu-room-name {
    color: #647272;
    /* Figma #722:10221 */
}

/* Beds Grid inside Room Card */
.vnu-room-bed-grid {
    display: grid;
    grid-template-columns: repeat(4, 15px);
    gap: 2px;
    margin-top: 4px;
}

.vnu-room-bed {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    background-color: #FFFFFF;
}

.vnu-room-type {
    display: none;
}

.vnu-room-item-add {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #D9F4F4;
    /* Figma #722:10000 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.vnu-room-item-add:hover {
    background: #A0E1E1;
    transform: translateY(-2px);
}

/* Room action popup (appears near clicked room) */
.vnu-room-action-popup {
    position: fixed;
    display: flex;
    align-items: center;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.vnu-room-action-popup.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Capacity Modal ────────────────────────────────────────── */
/* Figma #722:10289: 699×650, bo 16, padding ~34 */
.vnu-modal.vnu-modal-capacity {
    width: 700px;
    max-width: 95vw;
    padding: 32px;
    border-radius: 16px;
    background: #FEFFFD;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.vnu-modal-capacity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.vnu-modal-capacity-title {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
}

.vnu-modal-capacity-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left panel — danh sách phòng */
.vnu-cap-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.vnu-cap-section-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    flex-shrink: 0;
}

/* Figma: ô 32×32, bước 37px (gap 5) */
.vnu-cap-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 32px);
    grid-auto-rows: 32px;
    gap: 5px;
    overflow-y: auto;
    align-content: start;
}

/* 3 trạng thái ô phòng */
.vnu-cap-cell {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #A0E1E1;
    cursor: grab;
    transition: background 0.15s, border 0.15s;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
}

.vnu-cap-cell:active {
    cursor: grabbing;
}

#cap-tooltip {
    position: fixed;
    background: #17221C;
    color: #FEFFFD;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    display: none;
}


.vnu-cap-cell.selected {
    background: #34A1A6;
    /* xanh đậm = đang chọn */
}

.vnu-cap-cell.assigned {
    background: #F0FBFA;
    /* trắng dashed = đã thiết lập */
    border: 1.5px dashed #A0E1E1;
}

/* Divider dọc */
.vnu-cap-divider {
    width: 1px;
    background: #E2E5E4;
    flex-shrink: 0;
    margin: 0 20px;
    align-self: stretch;
}

/* Right panel — capacity tiers */
.vnu-cap-right {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 4px;
}

.vnu-cap-tier {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vnu-cap-tier-label {
    font-size: 14px;
    /* Figma style_1737266c */
    font-weight: 600;
    color: #17221C;
}

.vnu-cap-tier-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.vnu-cap-plus-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #F0FBFA;
    border: 1px dashed #A0E1E1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
    box-sizing: border-box;
}

.vnu-cap-plus-btn:hover {
    background: #D8F5F5;
}

.vnu-cap-tier-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}

.vnu-cap-tier-cell {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #A0E1E1;
    flex-shrink: 0;
    cursor: grab;
    position: relative;
}

.vnu-cap-tier-cell:active {
    cursor: grabbing;
}

.vnu-cap-tier.drag-over .vnu-cap-tier-cells {
    outline: 2px dashed #34A1A6;
    border-radius: 6px;
}

.vnu-cap-tier-cell-empty {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #FEFFFD;
    border: 1px dashed #A0E1E1;
    flex-shrink: 0;
    box-sizing: border-box;
}

.vnu-modal-capacity-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #E2E5E4;
}

.vnu-btn-cap-cancel {
    width: 154px;
    height: 42px;
    border-radius: 6px;
    background: #E5E5E5;
    border: none;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    cursor: pointer;
    transition: background 0.15s;
}

.vnu-btn-cap-cancel:hover {
    background: #D0D0D0;
}

.vnu-btn-cap-confirm {
    width: 154px;
    height: 42px;
    border-radius: 6px;
    background: #17221C;
    border: none;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #FEFFFD;
    cursor: pointer;
    transition: background 0.15s;
}

.vnu-btn-cap-confirm:hover {
    background: #2a3d34;
}


.vnu-room-action-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 0 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: #17221C;
    border-radius: 7px;
    transition: background 0.15s;
    white-space: nowrap;
}

.vnu-room-action-item:hover {
    background: rgba(160, 225, 225, 0.25);
}

.vnu-room-action-sep {
    width: 1px;
    height: 22px;
    background: #E2E5E4;
    flex-shrink: 0;
}

/* Utilities */
.vnu-empty-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #8D9A9A;
    font-style: italic;
    font-size: 14px;
    text-align: center;
}

.vnu-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--primary-color);
    font-weight: 600;
}

/* Footer Floating Button */
.vnu-facility-footer {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 100;
}

.btn-add-float {
    background: #00BB77;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(0, 187, 119, 0.4);
    cursor: pointer;
    transition: var(--transition);
    font-size: 15px;
}

.btn-add-float img {
    filter: brightness(0) invert(1);
}

.btn-add-float:hover {
    transform: scale(1.05);
    background: #00a066;
}

/* Tables in Tabs */
.vnu-facility-card {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.vnu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.vnu-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.vnu-table {
    width: 100%;
    border-collapse: collapse;
}

.vnu-table th {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid #F1F5F3;
    font-size: 12px;
    text-transform: uppercase;
    color: #8D9A9A;
    letter-spacing: 0.05em;
}

.vnu-table td {
    padding: 18px 15px;
    border-bottom: 1px solid #F1F5F3;
    font-size: 14px;
}

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

.vnu-btn-sm {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.vnu-btn-success {
    background: #00BB77;
    color: #fff;
}

.vnu-table-actions {
    display: flex;
    gap: 10px;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    opacity: 0.6;
    transition: 0.2s;
}

.btn-icon:hover {
    opacity: 1;
}

/* Uni Grid */
.vnu-uni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.vnu-uni-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #EDEDED;
    background: #F8FBF8;
}

.vnu-uni-logo img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.vnu-uni-info {
    flex: 1;
}

.vnu-uni-name {
    font-weight: 700;
    font-size: 15px;
}

.vnu-uni-code {
    font-size: 13px;
    color: #8D9A9A;
}


/* Base Utility Classes */
.d-none {
    display: none !important;
}



/* Upgraded Building Add button to match card width */
.vnu-building-item-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 212px;
    height: 52px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #FEFFFD;
    /* Figma #722:9312 */
    border: 1px solid #E2E5E4;
    cursor: pointer;
    color: #8D9A9A;
    margin-bottom: 20px;
    transition: var(--transition);
}

.vnu-building-item-add svg {
    width: 20px;
    height: 20px;
    stroke: #8D9A9A;
    transition: var(--transition);
}

.vnu-building-item-add:hover {
    border-color: #17221C;
    color: #17221C;
}

.vnu-building-item-add:hover svg {
    stroke: #17221C;
}

/* Add Building / Add Room Modal — form layout */
#form-add-building,
#form-add-room,
#onevnuForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Add Building Modal — 2-column grids */
.vnu-modal-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

/* Asymmetric 2-col: Tên Toà (2fr) / Nguyên tố (1fr) */
.vnu-modal-2col-asym {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0 16px;
}

/* Number input with → button inside (Sức chứa / Diện tích) */
.vnu-number-input-wrap {
    position: relative;
}

.vnu-number-input-wrap .vnu-modal-input {
    width: 100%;
    padding-right: 46px;
}

.vnu-number-input-wrap .vnu-number-add-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid #E2E5E4;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    color: #17221C;
    transition: var(--transition);
    flex-shrink: 0;
}

.vnu-number-input-wrap .vnu-number-add-btn:hover {
    background: #17221C;
    border-color: #17221C;
    color: #FEFFFD;
}

/* Number tags (2 ×, 4 ×, 6 ×) */
.vnu-number-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.vnu-number-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0 4px 0 10px;
    border-radius: 0;
    background: #FEFFFD;
    border: 1px solid #E2E5E4;
    font-size: 13px;
    font-weight: 500;
    color: #17221C;
    height: 32px;
    box-sizing: border-box;
}

.vnu-tag-rm {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.vnu-tag-rm img {
    display: block;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.vnu-tag-rm:hover img {
    opacity: 1;
}

/* keep old class names pointing to the same thing */
.vnu-number-tag-remove {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Room type tags in add-building modal */
.vnu-rt-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #FEFFFD;
    border: 1px solid #E2E5E4;
    border-radius: 0;
    padding: 0 4px 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: #17221C;
    height: 32px;
    box-sizing: border-box;
}

.vnu-rt-tag-remove {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Room naming pattern preview */
.vnu-room-pattern-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    user-select: none;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    margin-bottom: 6px;
}

.vnu-room-pattern-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    border-radius: 6px;
    background: #FEFFFD;
    border: 1px solid #C7D5D3;
    cursor: grab;
}

.vnu-room-pattern-item:active {
    cursor: grabbing;
    opacity: 0.7;
}

.vnu-room-pattern-item.drag-over {
    border-color: #4CD681;
    background: #EEFEEF;
}

.vnu-drag-handle {
    font-size: 13px;
    color: #8D9A9A;
    line-height: 1;
}

.vnu-room-pattern-part {
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
}

.vnu-room-pattern-sep {
    color: #8D9A9A;
    font-weight: 600;
}

.vnu-room-pattern-example {
    font-size: 13px;
    color: #647272;
}

.vnu-room-pattern-example strong {
    color: #17221C;
    font-weight: 700;
}

/* Floor Tabs selector row in Room Column */
.vnu-floor-selector-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 24px;
}

.vnu-floor-tab-card {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 6px;
    border: none;
    background: #FEFFFD;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    gap: 4px;
}

.vnu-floor-tab-card:hover {
    background: #E3E3E3;
}

.vnu-floor-tab-card.active {
    background: #E3E3E3;
    border: none;
}

.vnu-floor-tab-card .vnu-floor-tab-text {
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #647272;
}

.vnu-floor-tab-icon {
    display: grid;
    grid-template-columns: repeat(4, 5px);
    gap: 1.5px;
    justify-content: center;
    align-items: center;
}

.vnu-floor-tab-icon span {
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background-color: #647272;
    display: block;
}

.vnu-floor-tab-card-add {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px dashed #D0D0D0;
    background: #F8FBF8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8D9A9A;
    font-size: 20px;
    font-weight: 600;
    transition: var(--transition);
}

.vnu-floor-tab-card-add:hover {
    background: #FFFFFF;
    border-color: #00BB77;
    color: #00BB77;
}

/* Empty room slots for premium canvas aesthetic */
/* Ô trống theo lưới blueprint kẻ đứt của Figma #722:9955+ */
.vnu-room-item-slot-empty {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px dashed #E2E5E4;
    background: transparent;
    pointer-events: none;
}

/* ============================================================
   ACCOMMODATIONS MODULE — VNU Design System
   ============================================================ */

.vnu-acc-wrapper {
    background: #FEFFFD;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 166px);
    /* Thấp hơn 600px trước đây — min-height cao hơn calc(100vh-150px) trên cửa sổ
       không đủ cao (laptop, trình duyệt nhiều thanh công cụ) từng đẩy footer
       (nút Duyệt/Gán phòng/Nhận phòng...) ra ngoài khung nhìn mà không có gợi ý
       cuộn nào, trông như nút biến mất dù vẫn tồn tại trong DOM. */
    min-height: 420px;
}

/* ── Header ── */
.vnu-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 16px;
    border-bottom: 1px solid #F0F4F0;
    flex-shrink: 0;
    gap: 14px;
    flex-wrap: wrap;
}

.vnu-acc-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vnu-acc-title {
    font-size: 20px;
    font-weight: 700;
    color: #17221C;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.vnu-acc-count-badge {
    background: #E0EEE1;
    color: #008855;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 50px;
    white-space: nowrap;
}

.vnu-acc-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

/* Capsule select */
.vnu-capsule-select {
    height: 36px;
    border: 2px solid #D0D0D0;
    border-radius: 50px;
    padding: 0 32px 0 16px;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #647272;
    background: #FEFFFD url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23647272' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 130px;
    appearance: none;
}

.vnu-capsule-select:focus {
    border-color: #17221C;
    color: #17221C;
}

/* Search input */
.vnu-search-input {
    height: 36px;
    border: 2px solid #D0D0D0;
    border-radius: 14px;
    padding: 0 14px;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-size: 13px;
    color: #17221C;
    background: #FEFFFD;
    outline: none;
    transition: all 0.2s ease;
    min-width: 170px;
}

.vnu-search-input::placeholder {
    color: #B0BCBC;
}

.vnu-search-input:focus {
    border-color: #17221C;
}

/* Filter button */
.vnu-btn-filter {
    height: 36px;
    padding: 0 18px;
    background: #17221C;
    color: #FEFFFD;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
}

a.vnu-btn-filter {
    text-decoration: none;
}

a.vnu-btn-filter:hover {
    text-decoration: none;
}

/* Xếp phòng button — VNU green */
.vnu-btn-filter.vnu-btn-room-assign {
    background: #008855;
}

.vnu-btn-filter.vnu-btn-room-assign:hover {
    background: #006B43;
}

.vnu-btn-filter:hover {
    background: #2a3d34;
    transform: translateY(-1px);
}

/* Add button */
.vnu-btn-add-acc {
    height: 36px;
    padding: 0 18px;
    background: #008855;
    color: #FEFFFD;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.vnu-btn-add-acc:hover {
    background: #006640;
    color: #FEFFFD;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Body ── */
.vnu-acc-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Left: List panel ── */
.vnu-acc-list-panel {
    width: clamp(300px, 30vw, 400px);
    flex-shrink: 0;
    min-height: 0;
    border-right: 1px solid #F0F4F0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vnu-acc-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Accommodation item card */
.vnu-acc-item {
    background: #F8FBF8;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 2px solid transparent;
    user-select: none;
}

.vnu-acc-item:hover {
    background: #EEF7F0;
    border-color: #C0E0CC;
    transform: translateX(2px);
}

.vnu-acc-item.active {
    background: #E0F2EA;
    border-color: #008855;
}

/* Avatar */
.vnu-acc-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #17221C;
    color: #FEFFFD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Item info */
.vnu-acc-item-info {
    flex: 1;
    min-width: 0;
}

.vnu-acc-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #17221C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

/* Dấu hiệu SV có điểm ưu tiên — chỉ hiện ở tab "Chờ duyệt" (xem list_items.blade.php) */
.vnu-acc-priority-star {
    color: #F5A623;
    font-size: 12px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Item right side */
.vnu-acc-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

/* ── Status badges ── */
.vnu-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 50px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
    display: inline-block;
}

.vnu-status-draft {
    background: #F5F5F5;
    color: #616161;
}

.vnu-status-pending {
    background: #FFF3E0;
    color: #E65100;
}

.vnu-status-approved {
    background: #E3F2FD;
    color: #1565C0;
}

.vnu-status-assigned {
    background: #EDE7F6;
    color: #512DA8;
}

.vnu-status-active {
    background: #D0FAE5;
    color: #1B5E20;
}

.vnu-status-checkout {
    background: #ECEFF1;
    color: #546E7A;
}

.vnu-status-rejected {
    background: #FFE0E6;
    color: #C62828;
}

.vnu-status-terminated {
    background: #212121;
    color: #FFFFFF;
}

/* Pagination */
.vnu-acc-pagination {
    padding: 10px 14px;
    border-top: 1px solid #F0F4F0;
    flex-shrink: 0;
}

.vnu-acc-pagination .pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
}

.vnu-acc-pagination .page-item {
    display: flex;
}

.vnu-acc-pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    background: #FEFFFD;
    border: 1.5px solid #E0EEE1;
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1;
}

.vnu-acc-pagination .page-item .page-link:hover {
    border-color: #17221C;
    color: #17221C;
}

.vnu-acc-pagination .page-item.active .page-link {
    background: #17221C;
    border-color: #17221C;
    color: #FEFFFD;
}

.vnu-acc-pagination .page-item.disabled .page-link {
    color: #C8D4D4;
    border-color: #F0F4F0;
    pointer-events: none;
    cursor: default;
}

/* List empty state */
.vnu-acc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    flex: 1;
}

.vnu-acc-empty p {
    font-size: 14px;
    font-weight: 600;
    color: #A0AFAF;
    text-align: center;
}

/* ── Right: Detail panel ── */
.vnu-acc-detail-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #FEFFFD;
}

/* Empty state */
.vnu-detail-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px;
}

.vnu-detail-empty-state p {
    font-size: 14px;
    font-weight: 600;
    color: #B0BCBC;
    text-align: center;
    max-width: 240px;
    line-height: 1.6;
}

/* Loading */
.vnu-detail-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #647272;
    font-size: 14px;
}

/* Detail content container */
.vnu-detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Bắt buộc để .vnu-detail-body (flex:1 bên trong) chịu co lại theo không gian
       thật thay vì phình theo chiều cao nội dung — mặc định flex item có
       min-height:auto (= kích thước nội dung), phá vỡ cuộn nội bộ. */
    min-height: 0;
}

/* Detail header */
.vnu-detail-header {
    padding: 18px 28px;
    border-bottom: 1px solid #F0F4F0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
}

.vnu-detail-header-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #17221C;
    color: #FEFFFD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.vnu-detail-header-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vnu-detail-header-avatar.js-avatar-preview {
    cursor: pointer;
}

.vnu-detail-header-info {
    flex: 1;
    min-width: 0;
}

.vnu-detail-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 6px;
}

.vnu-detail-student-name {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.vnu-detail-quick-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
}

.vnu-detail-quick-item {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    white-space: nowrap;
}

.vnu-detail-quick-label {
    font-size: 11px;
    font-weight: 600;
    color: #8DA0A0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 5px;
}

.vnu-detail-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F0F4F0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #647272;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.vnu-detail-close-btn:hover {
    background: #E0EEE1;
    color: #17221C;
}

/* Detail body */
.vnu-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.vnu-detail-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vnu-detail-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #8DA0A0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid #F0F4F0;
}

.vnu-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}

.vnu-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Biến thể 1 dòng cho các trường giá trị ngắn (mã SV, CCCD, giới tính, ngày
   sinh...) thay vì lưới 2 cột để trống nhiều khoảng trắng — xem "Thông tin
   sinh viên" trong accommodations/partials/detail.blade.php */
.vnu-detail-grid--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 28px;
}

.vnu-detail-grid--inline .vnu-detail-field {
    flex: 0 0 auto;
    white-space: nowrap;
}

.vnu-detail-grid--inline .vnu-detail-field--grow {
    flex: 1 1 140px;
    min-width: 140px;
    white-space: normal;
}

.vnu-detail-field-label {
    font-size: 10px;
    font-weight: 700;
    color: #8DA0A0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vnu-detail-field-value {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 1.4;
}

.vnu-detail-field-value.muted {
    color: #A0AFAF;
    font-weight: 400;
    font-style: italic;
}

/* Timeline */
.vnu-timeline {
    display: flex;
    flex-direction: column;
    position: relative;
}

.vnu-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: #E0EEE1;
}

.vnu-timeline-item {
    display: flex;
    gap: 14px;
    padding-bottom: 14px;
    position: relative;
}

.vnu-timeline-item:last-child {
    padding-bottom: 0;
}

.vnu-timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #17221C;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-top: 1px;
}

.vnu-timeline-dot-inner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FEFFFD;
}

.vnu-timeline-content {
    flex: 1;
    min-width: 0;
}

.vnu-timeline-action {
    font-size: 13px;
    font-weight: 700;
    color: #17221C;
    line-height: 1.3;
}

.vnu-timeline-note {
    font-size: 12px;
    color: #647272;
    margin-top: 2px;
}

.vnu-timeline-time {
    font-size: 11px;
    color: #A0AFAF;
    margin-top: 3px;
}

/* Detail footer / actions */
.vnu-detail-footer {
    padding: 14px 28px;
    border-top: 1px solid #F0F4F0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
}

/* Action buttons */
.vnu-btn-action {
    height: 36px;
    padding: 0 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.vnu-btn-action:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.vnu-btn-approve {
    background: #D0FAE5;
    color: #1B5E20;
    border-color: #A0E6C0;
}

.vnu-btn-approve:hover {
    background: #A0E6C0;
    color: #1B5E20;
}

.vnu-btn-reject {
    background: #FFE0E6;
    color: #C62828;
    border-color: #FFB8C4;
}

.vnu-btn-reject:hover {
    background: #FFB8C4;
    color: #C62828;
}

.vnu-btn-assign {
    background: #E3F2FD;
    color: #1565C0;
    border-color: #B3D9F8;
}

.vnu-btn-assign:hover {
    background: #B3D9F8;
    color: #1565C0;
}

.vnu-btn-action[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.vnu-btn-action[disabled]:hover {
    background: inherit;
    color: inherit;
}

.vnu-btn-primary {
    background: #17221C;
    color: #FEFFFD;
    border-color: #17221C;
}

.vnu-btn-primary:hover {
    background: #2a3d34;
    color: #FEFFFD;
}

.vnu-btn-neutral {
    background: #F5F5F5;
    color: #424242;
    border-color: #E0E0E0;
}

.vnu-btn-neutral:hover {
    background: #E0E0E0;
    color: #212121;
}

.vnu-btn-danger {
    background: #FFE0E6;
    color: #C62828;
    border-color: #FFB8C4;
}

.vnu-btn-danger:hover {
    background: #FFB8C4;
    color: #C62828;
}

/* Modal overlay */
/* Lịch .js-vn-date (fengyuanchen/datepicker) mặc định z-index:1 khi mở (class
   .datepicker-dropdown) — thấp hơn hẳn .vnu-modal-overlay (9998/1050), nên khi mở
   trong modal (vd modal "Duyệt hồ sơ") lịch bị modal che khuất phía sau. */
.datepicker-container.datepicker-dropdown {
    z-index: 10050 !important;
}

.vnu-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 33, 20, 0.65);
    /* Figma #722:10283 */
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

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

.vnu-modal-box {
    background: #FEFFFD;
    border-radius: 20px;
    padding: 28px;
    width: 440px;
    max-width: 95vw;
    /* An toàn chung: modal không tự scroll thì trên màn hình thấp/mobile, phần cuối
       (nút Hủy/Xác nhận, ô nhập cuối) có thể bị đẩy ra ngoài viewport và không cách
       nào chạm tới (openModal() khoá luôn scroll của body) — đã xảy ra thật ở modal
       Duyệt hồ sơ khi thêm phần "Kỳ ở". */
    max-height: 90vh;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

/* Vùng cuộn riêng cho phần chọn loại phòng + Kỳ ở trong modal Duyệt hồ sơ — giữ
   nút Hủy/Xác nhận duyệt luôn cố định nhìn thấy được dù danh sách loại phòng dài. */
.vnu-approve-scroll {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 4px;
    /* Đẩy thanh scroll ra sát mép phải, tránh đè lên badge/giá tiền của các lựa
       chọn loại phòng — bù lại padding bên phải bằng margin âm để nội dung không
       bị thu hẹp so với trước. */
    padding-right: 12px;
    margin-right: -12px;
}

.vnu-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #17221C;
    margin-bottom: 20px;
}

/* Modal có nút đóng (×) ở góc trên phải, cạnh tiêu đề — dùng cho modal không thể
   đóng bằng click ra ngoài (vd Duyệt hàng loạt, data-no-outside-close). */
.vnu-modal-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.vnu-modal-title-row .vnu-modal-title {
    margin-bottom: 0;
}

/* Popup chi tiết phòng — màn Phân phòng, click vào ô phòng (Figma node 722:7569,
   panel 650x1077, bg #FEFFFD, border-radius 26px).
   display:flex column — phần đầu (ảnh/loại phòng), tiêu đề danh sách SV, LỊCH SỬ
   PHÒNG và nút Đóng LUÔN cố định hiện đủ; chỉ .vnu-room-detail-students-scroll
   (flex:1) co giãn/cuộn riêng khi phòng đông SV. overflow-y:auto ở đây chỉ còn
   là lưới an toàn cho trường hợp hiếm (lịch sử phòng quá dài...). */
.vnu-modal-room-detail {
    width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 26px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

.vnu-modal-room-detail > * {
    flex-shrink: 0;
}

.vnu-modal-room-detail * {
    box-sizing: border-box;
}

.vnu-room-detail-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: #647272;
    font-size: 16px;
}

.vnu-room-detail-close:hover {
    color: #17221C;
}

/* Ảnh phòng + card "Loại phòng" nằm cạnh nhau */
.vnu-room-detail-top {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.vnu-room-detail-photo {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
    background: #F6F6F6;
    flex-shrink: 0;
    padding: 24px;
}

/* Card "Loại phòng" — nền xám nhạt, key:value theo hàng, chia dòng bằng viền mảnh */
.vnu-room-detail-info-card {
    flex: 1;
    background: #F6F6F6;
    border-radius: 16px;
    padding: 8px 18px;
    min-width: 0;
}

.vnu-room-detail-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
}

.vnu-room-detail-info-row+.vnu-room-detail-info-row {
    border-top: 1px solid #E2E5E4;
}

.vnu-room-detail-info-label {
    color: #17221C;
    font-weight: 400;
    white-space: nowrap;
}

.vnu-room-detail-info-value {
    color: #17221C;
    font-weight: 600;
    text-align: right;
}

.vnu-room-detail-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.vnu-room-detail-section-label-spaced {
    margin-top: 20px;
}

/* Bảng danh sách sinh viên — mỗi hàng là 1 thẻ trắng viền xám (giống Figma) */
.vnu-room-detail-table-head,
.vnu-room-detail-row {
    display: grid;
    grid-template-columns: 1.1fr 2fr 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.vnu-room-detail-table-head {
    padding: 0 12px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #B3B3B3;
}

/* Danh sách SV đang ở cuộn RIÊNG bên trong (không kéo cuộn cả modal) — phòng
   đông SV (6-8 người) không đẩy trôi mất LỊCH SỬ PHÒNG/nút Đóng bên dưới.
   flex:1 + min-height:0 — phần duy nhất co giãn/cuộn trong .vnu-modal-room-detail
   (các phần khác đều flex-shrink:0, xem trên), max-height chỉ là trần trên cùng
   để không chiếm hết chỗ của LỊCH SỬ PHÒNG khi ít SV. */
.vnu-room-detail-students-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
}

.vnu-room-detail-row {
    background: #FFFFFF;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #17221C;
}

.vnu-room-detail-row-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vnu-room-detail-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #008855;
    color: #FEFFFD;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vnu-room-detail-gender-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.vnu-room-detail-student-link {
    color: inherit;
    text-decoration: none;
}

.vnu-room-detail-student-link:hover {
    color: #008855;
    text-decoration: underline;
}

.vnu-room-detail-empty {
    text-align: center;
    color: #647272;
    font-size: 14px;
    padding: 20px 0;
}

.vnu-room-detail-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.vnu-room-detail-actions a,
.vnu-room-detail-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.vnu-room-detail-actions a:hover,
.vnu-room-detail-actions button:hover {
    opacity: 1;
}

.vnu-room-detail-actions img {
    width: 20px;
    height: 20px;
}

.js-room-detail-leader.active {
    opacity: 1;
    filter: drop-shadow(0 0 0 #008855);
}

.js-room-detail-revert {
    font-size: 16px;
    color: #647272;
}

.vnu-room-detail-transfer-panel {
    margin: 10px 0 16px;
    padding: 12px 14px;
    background: #F8FBF8;
    border-radius: 10px;
}

.vnu-room-detail-transfer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.vnu-room-detail-transfer-row .vnu-modal-select {
    flex: 1;
}

/* Lịch sử phòng — từ module Phản ánh hiện trường (Issue) */
.vnu-room-detail-history-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #F0F2F1;
}

.vnu-room-detail-history-row img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.vnu-room-detail-history-title {
    font-size: 13px;
    color: #17221C;
}

.vnu-room-detail-history-time {
    font-size: 12px;
    color: #647272;
    margin-top: 2px;
}

.vnu-modal-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 6px;
    display: block;
    line-height: 1;
}

.vnu-modal-select {
    width: 100%;
    padding: 10px 16px;
    border: 2px solid #D0D0D0;
    border-radius: 12px;
    font-size: 14px;
    color: #17221C;
    background: #FEFFFD;
    outline: none;
    transition: all 0.2s ease;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    font-weight: 500;
    appearance: none;
}

.vnu-modal-select:focus {
    border-color: #17221C;
}

/* Modal "Duyệt hàng loạt" — rộng hơn modal mặc định, danh sách hồ sơ cuộn riêng
   để nút Xác nhận/Hủy luôn cố định phía dưới dù chọn nhiều hồ sơ. */
.vnu-modal-bulk-approve {
    width: 720px;
}

/* Modal xem trước giấy tờ đính kèm (ảnh/PDF) — thay cho việc mở link ở tab mới */
.vnu-modal-doc-preview {
    width: 80vw;
    max-width: 900px;
}

.vnu-modal-doc-preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    max-height: 75vh;
    overflow: auto;
    overscroll-behavior: contain;
}

.vnu-modal-doc-preview-body .vnu-doc-rotate-wrap {
    display: flex;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

.vnu-modal-doc-preview-body img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    transition: transform 0.2s ease;
    transform-origin: 0 0;
    cursor: grab;
}

.vnu-modal-doc-preview-body img.vnu-doc-zoomed {
    cursor: grab;
}

.vnu-modal-doc-preview-body img.vnu-doc-dragging {
    cursor: grabbing;
    transition: none;
}

.vnu-modal-doc-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vnu-modal-rotate-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #E1E8E5;
    background: #FEFFFD;
    color: #647272;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
}

.vnu-modal-rotate-btn:hover {
    background: #E6EFEC;
    color: #17221C;
}

.vnu-modal-doc-preview-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.vnu-modal-doc-preview-wrap .vnu-modal-doc-preview-body {
    flex: 1;
    min-width: 0;
}

.vnu-modal-doc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #E1E8E5;
    background: rgba(254, 255, 253, 0.92);
    color: #17221C;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(23, 34, 28, 0.12);
}

.vnu-modal-doc-nav:hover {
    background: #E6EFEC;
}

.vnu-modal-doc-nav-prev {
    left: 8px;
}

.vnu-modal-doc-nav-next {
    right: 8px;
}

.vnu-modal-doc-preview-body iframe {
    width: 100%;
    height: 75vh;
    border: none;
}

.vnu-modal-doc-preview-fallback {
    color: #647272;
    text-align: center;
    padding: 24px;
}

.vnu-bulk-approve-rows {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    /* Đẩy thanh scroll ra sát mép phải modal thay vì dính luôn vào content —
       margin âm bù lại padding để không đổi chiều rộng vùng nội dung. */
    padding-right: 14px;
    margin-right: -14px;
}

.vnu-bulk-approve-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0F4F0;
}

.vnu-bulk-approve-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vnu-bulk-approve-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vnu-bulk-approve-row-name {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    flex: 1 1 40%;
    min-width: 0;
}

.vnu-bulk-approve-row-code {
    font-weight: 400;
    color: #8DA0A0;
}

.vnu-bulk-approve-row-top select {
    flex: 1 1 55%;
    min-width: 0;
}

.vnu-bulk-approve-row .vnu-stay-preset-row,
.vnu-bulk-approve-row .vnu-stay-date-row {
    margin-bottom: 0;
}

/* Danh sách chọn loại phòng lúc duyệt (modal Duyệt) — 1 dòng/loại phòng kèm giá */
.vnu-approve-rt-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid #E2E5E4;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.vnu-approve-rt-option:hover {
    border-color: #008855;
    background: #F0FAF4;
}

.vnu-approve-rt-option:has(input:checked) {
    border-color: #008855;
    background: #EEFEEF;
}

.vnu-approve-rt-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #008855;
    flex-shrink: 0;
}

.vnu-approve-rt-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

.vnu-approve-rt-price {
    font-size: 13px;
    font-weight: 700;
    color: #008855;
    white-space: nowrap;
}

.vnu-approve-rt-option-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.vnu-approve-rt-option-disabled:hover {
    border-color: #E2E5E4;
    background: none;
}

.vnu-approve-rt-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.vnu-approve-rt-badge-full {
    background: #FEE2E2;
    color: #C62828;
}

.vnu-approve-rt-badge-warn {
    background: #FFF3CD;
    color: #8A6D00;
}

.vnu-approve-rt-badge-ok {
    background: #E3F5EA;
    color: #00803D;
}

.vnu-approve-total-summary {
    background: #E3F5EA;
    color: #00803D;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
}

.vnu-bulk-approve-quick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F6F6F6;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.vnu-bulk-approve-quick-row label {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    white-space: nowrap;
}

.vnu-bulk-approve-quick-row select {
    flex: 1;
}

/* Nút chọn nhanh "Kỳ ở" (Cả Kỳ 1/Kỳ 2/Chỉ Hè/Giữa kỳ) — modal duyệt đơn lẻ/hàng loạt */
.vnu-stay-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.vnu-stay-preset-btn {
    font-size: 12.5px;
    padding: 6px 12px;
    background: #E3F5EA;
    color: #00803D;
}

.vnu-stay-preset-btn:hover {
    background: #CDEEDA;
}

/* Kỳ SV đã chọn lúc đăng ký (hoặc cán bộ vừa bấm) — làm đậm để phân biệt các lựa
   chọn còn lại vẫn đang ở màu xanh nhạt mặc định. */
.vnu-stay-preset-btn--active,
.vnu-stay-preset-btn--active:hover {
    background: #00803D;
    color: #FEFFFD;
    font-weight: 700;
}

.vnu-stay-date-row {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
}

.vnu-stay-date-row .vnu-modal-field {
    flex: 1 1 50%;
    min-width: 0;
}

.vnu-stay-date-row .vnu-modal-field label {
    font-size: 12px;
    color: #647272;
    font-weight: 600;
}

.vnu-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Spin animation for loading */
@keyframes vnu-spin {
    to {
        transform: rotate(360deg);
    }
}

.vnu-spin {
    animation: vnu-spin 0.8s linear infinite;
}

/* ── Accommodation utility classes (replace all inline styles) ── */

/* Avatar color palette — used via class, never inline style */
.vnu-avatar-c0 {
    background: #17221C;
}

.vnu-avatar-c1 {
    background: #1B5E20;
}

.vnu-avatar-c2 {
    background: #1565C0;
}

.vnu-avatar-c3 {
    background: #512DA8;
}

.vnu-avatar-c4 {
    background: #B71C1C;
}

.vnu-avatar-c5 {
    background: #E65100;
}

/* Icons inside buttons — size set via CSS, not inline */
.vnu-btn-filter i,
.vnu-btn-filter-reset i,
.vnu-btn-add-acc i,
.vnu-btn-action i {
    font-size: 11px;
}

/* Narrow search input variant */
.vnu-search-input-sm {
    min-width: 140px;
}

/* Reset-filter button variant */
.vnu-btn-filter-reset {
    background: #647272;
}

.vnu-btn-filter-reset:hover {
    background: #4a5a5a;
    transform: translateY(-1px);
}

/* Detail header — dorm meta label */
.vnu-detail-dorm-label {
    font-size: 12px;
    color: #A0AFAF;
}

/* Inline capacity note beside room value */
.vnu-capacity-note {
    font-size: 12px;
    color: #647272;
}

/* Approved-by date note */
.vnu-approved-date {
    font-size: 12px;
    color: #647272;
}

/* Grid field spanning full row */
.vnu-grid-span-2 {
    grid-column: span 2;
}

/* Inline form wrapper — keeps form in flow without display:block */
.form-inline {
    display: inline;
}

/* Push last footer action to the right */
.vnu-footer-push {
    margin-left: auto;
}

/* Header action button group */
.vnu-acc-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Current-room preview box inside transfer modal */
.vnu-current-room-box {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #F8FBF8;
    border-radius: 10px;
}

.vnu-transfer-mode-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

.vnu-radio-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    cursor: pointer;
}

.vnu-radio-inline input[type="radio"] {
    accent-color: #008855;
    cursor: pointer;
}

.vnu-transfer-price-note {
    font-size: 12px;
    color: #647272;
    background: #FFF8E6;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
    line-height: 1.5;
}

/* ============================================================
   ACCOMMODATION ASSIGNMENT PAGE (Đơn xin nội trú / node 722-1409)
   ============================================================ */

/* Main Page Container Grid */
.vnu-room-assign-container {
    border-radius: 24px;
    padding-top: 0 !important;
    padding: 0px;
    display: flex;
    min-width: 0;
    gap: 10px;
    /* Trang Phân phòng đã ẩn hẳn header phía trên (xem layouts/app.blade.php) — trừ
       ít hơn hẳn so với trước (130px, tính luôn cả header) để tận dụng khoảng trống
       vừa giải phóng, hiện được nhiều phòng/SV hơn mà không cần cuộn. */
    height: calc(100vh - 60px);
    min-height: 600px;
    box-sizing: border-box;
    font-family: 'Segoe UI Variable', 'Inter', sans-serif;
    overflow: hidden;
}

/* Premium Floating Cards — Figma: card ngoài bo 26px */
.vnu-assign-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0 4px 20px rgba(23, 34, 28, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vnu-manual-assign-wrapper {
    border-radius: 26px;
    background: #FEFFFD;
    box-shadow: 0 2px 10px 0 rgba(17, 59, 100, 0.07);
    padding: 10px;
    /* Cột trái ~70%, cột phải (.vnu-table-side-card flex:1) ~30% — 2 cột cùng
       chiều cao trang thay vì xếp phòng trên/danh sách SV dưới như trước. */
    flex: 2.3;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.manual-assign-card {
    flex: 1;
    /* min-width:0 — flex item mặc định không co dưới kích thước nội dung, phòng
       khi nội dung bên trong (bảng, danh sách...) đòi hỏi bề ngang lớn thì tránh
       đội cả card này (và card cha) rộng ra theo, phá layout/responsive cả trang. */
    min-width: 0;
    background: linear-gradient(to bottom, #C7D8FC, #D0FAE5);
    border-radius: 16px;
    box-shadow: none;
}

.vnu-table-side-card {
    flex: 1;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Nút mở modal "Xếp phòng tự động" — nằm ngay cạnh checkbox Phòng nam/nữ trong
   header lưới phòng (thay cho card cố định chiếm hẳn 1 cột riêng như trước) */
/* Cùng phong cách với nút "Lọc" (.vnu-filter-btn-sm) — pill xanh, icon + chữ */
.vnu-auto-assign-trigger-btn {
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #FEFFFD;
    background: #00803D;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.vnu-auto-assign-trigger-btn:hover {
    background: #006631;
}

/* Feature checkboxes (auto-assign card) */

/* Card Body Split layouts */
.manual-assign-body {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Building selector — nằm ngay trong header lưới phòng (KHÔNG còn là cột sidebar
   riêng như trước, vì đã bỏ chọn tầng: chọn tòa xong hiện luôn toàn bộ phòng). */
.vnu-building-selector-inline {
    position: relative;
    flex-shrink: 0;
    margin-right: 14px;
}

.vnu-building-selector-box {
    background: #EEF3FF;
    border: none;
    border-radius: 8px;
    height: auto;
    display: flex;
    align-items: center;
    width: auto;
    padding: 6px 26px 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #3352AC;
    cursor: pointer;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
    box-shadow: none;
    position: relative;
    white-space: nowrap;
}

.vnu-building-selector-box:hover {
    opacity: 0.85;
}

.vnu-building-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    display: inline-block;
}

.vnu-building-selector-box .vnu-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #3352AC;
}

/* Custom Building Dropdown Styles */
.vnu-building-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 180px;
    background: #FEFFFD;
    border: 1px solid #BECBE9;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 59, 100, 0.22);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    padding: 8px 12px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

/* Lớp phủ mờ phía sau dropdown chọn tòa — để dropdown nổi hẳn lên, không bị
   lẫn với lưới phòng phía dưới (bấm ra ngoài lớp phủ cũng đóng dropdown). */
.vnu-building-dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 34, 28, 0.15);
    z-index: 999;
}

.vnu-dropdown-group-title {
    font-size: 11px;
    font-weight: 700;
    color: #647272;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid #ECEFF0;
    padding-bottom: 2px;
}

.vnu-dropdown-item-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s ease;
    user-select: none;
}

.vnu-dropdown-item-check:hover {
    color: #3352AC;
}

/* Hide native radio & checkbox inside dropdown */
.vnu-dropdown-item-check input[type="radio"],
.vnu-dropdown-item-check input[type="checkbox"] {
    display: none;
}

/* Radio-style custom indicator (circle) */
.vnu-dropdown-item-check .radio-custom {
    width: 16px;
    height: 16px;
    border: 2px solid #BECBE9;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all 0.2s ease;
    background: #fff;
}

.vnu-dropdown-item-check input[type="radio"]:checked+.radio-custom {
    border-color: #3352AC;
    background: #3352AC;
}

.vnu-dropdown-item-check input[type="radio"]:checked+.radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* Checkbox-style custom indicator (square) in dropdown */
.vnu-dropdown-item-check .checkbox-custom {
    width: 16px;
    height: 16px;
    border: 2px solid #BECBE9;
    border-radius: 4px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all 0.2s ease;
    background: #fff;
}

.vnu-dropdown-item-check input[type="checkbox"]:checked+.checkbox-custom {
    border-color: #3352AC;
    background: #3352AC;
}

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

/* Room Grid Area */
.vnu-room-grid-area {
    flex: 1;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    background: #FFFFFF;
    border-top: 1px solid #E2E5E4;
    border-right: 1px solid #E2E5E4;
    border-bottom: 1px solid #E2E5E4;
    border-left: none;
    border-radius: 0 16px 16px 0;
}

.vnu-room-grid-area .vnu-card-header {
    background: #F6F6F6;
    height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid #E2E5E4;
    border-radius: 0 16px 0 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    margin-bottom: 10px;
}

/* Header Left: Title area */
.vnu-header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.vnu-card-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vnu-slot-count-badge {
    font-size: 12px;
    font-weight: 800;
    color: #17221C;
    display: inline;
}

.vnu-card-title .vnu-slot-count-badge {
    font-weight: 800;
    color: #17221C;
    font-style: normal;
}

/* Gender Filters */
.vnu-gender-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.vnu-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.vnu-filter-checkbox input[type="checkbox"] {
    display: none;
}

/* Checkbox indicator - uses --checkbox-color, separate from text color */
.vnu-filter-checkbox .checkbox-custom {
    width: 15px;
    height: 15px;
    border: 2px solid var(--checkbox-color, currentColor);
    border-radius: 3px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all 0.2s ease;
    background: transparent;
}

/* Male: text #3D739D, checkbox #43B4FF */
.vnu-filter-checkbox.male {
    color: #3D739D;
    --checkbox-color: #43B4FF;
}

/* Female: text #008855, checkbox #33CC6D */
.vnu-filter-checkbox.female {
    color: #008855;
    --checkbox-color: #33CC6D;
}

/* Empty: text #888, checkbox #E5E5E5 */
.vnu-filter-checkbox.empty {
    color: #666;
    --checkbox-color: #AFAFAF;
}

.vnu-filter-checkbox input:checked+.checkbox-custom {
    background-color: var(--checkbox-color, currentColor);
    border-color: var(--checkbox-color, currentColor);
}

.vnu-filter-checkbox input:checked+.checkbox-custom::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: solid #FEFFFD;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.vnu-filter-checkbox:hover {
    opacity: 0.85;
}

.vnu-room-assign-scroll {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding-top: 0 !important;
    padding: 16px;
    box-sizing: border-box;
}

.vnu-room-assign-scroll::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}

.vnu-room-assign-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.vnu-room-assign-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 114, 114, 0.3);
    border-radius: 4px;
}

/* Mỗi tòa hiện toàn bộ các tầng cùng lúc, xếp thành các dòng ngang riêng biệt
   (tầng cao ở trên, tầng 1 ở dưới cùng — giống mặt cắt toà nhà) thay vì 1 lưới
   chung, để không phải chuyển tab mới xem được phòng ở tầng khác. */
.vnu-room-assign-grid {
    display: flex;
    flex-direction: column;
    /* Cách các TẦNG với nhau rộng hơn khoảng cách xuống dòng trong CÙNG 1 tầng
       (.vnu-room-floor-tiles row-gap:10px) — dễ phân biệt ranh giới tầng. */
    gap: 22px;
    width: 100%;
}

.vnu-room-floor-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.vnu-room-floor-label {
    flex-shrink: 0;
    width: 44px;
    padding-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #647272;
    text-align: right;
}

/* Phòng trong 1 tầng tự xuống dòng khi không đủ chỗ ngang (thay vì tràn ra
   phải cuộn ngang) — flex:1 + min-width:0 để nhường đúng phần rộng còn lại
   sau nhãn "Tầng N", không bị ép rộng theo nội dung. */
.vnu-room-floor-tiles {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    /* row-gap lớn hơn column-gap — dòng phòng xuống dòng trong cùng 1 tầng cách
       nhau rõ hơn, đỡ dính vào nhau khi tầng nhiều phòng phải xuống 2-3 dòng. */
    row-gap: 10px;
    column-gap: 4px;
}

/* Room Tile */
/* ── Room Tile Base ── */
.vnu-room-tile {
    background: #E5E5E5;
    border: none;
    border-top: 3px solid var(--rt-color, transparent);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 70px;
    height: 52px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Male Room (Phòng Nam) ── */
.vnu-room-tile.male {
    background: #DAF0FF;
}

/* ── Female Room (Phòng Nữ) ── */
.vnu-room-tile.female {
    background: #D0FAE5;
}

/* ── Empty Room (Phòng trống) ── */
.vnu-room-tile.empty-room {
    background: rgb(229, 229, 229);
}

.vnu-room-tile.empty-room:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.vnu-room-tile.empty-room .vnu-room-tile-header {
    color: #555555;
}

/* ── Hover states ── */
.vnu-room-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 34, 28, 0.1);
    filter: brightness(0.97);
}

.vnu-room-tile.male:hover {
    box-shadow: 0 4px 12px rgba(67, 180, 255, 0.25);
}

.vnu-room-tile.female:hover {
    box-shadow: 0 4px 12px rgba(51, 204, 109, 0.25);
}

/* ── Assigned (selected) state ── */
.vnu-room-tile.assigned {
    outline: 2px solid currentColor;
    outline-offset: -3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

.vnu-room-tile.male.assigned {
    outline-color: #43B4FF;
}

.vnu-room-tile.female.assigned {
    outline-color: #33CC6D;
}

/* ── Full room ── */
.vnu-room-tile.full {
    cursor: not-allowed;
    opacity: 0.7;
}

/* ── Room Tile Header — số phòng ── */
.vnu-room-tile-header {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    padding: 3px 2px 0;
    color: #555555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vnu-room-tile.male .vnu-room-tile-header {
    color: #1F5C85;
}

.vnu-room-tile.female .vnu-room-tile-header {
    color: #00693F;
}

/* Phòng đầy: tên xám (Figma #722:3140) */
.vnu-room-tile.full .vnu-room-tile-header {
    color: #555555;
}

/* ── Tỉ lệ đang ở/tổng chỗ — thay cho lưới ô giường trước đây, gọn hơn khi xem
   nhiều phòng cùng lúc. Màu chữ vẫn theo giới tính/trạng thái như tiêu đề phòng. ── */
.vnu-room-tile-ratio {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    color: #555555;
}

.vnu-room-tile.male .vnu-room-tile-ratio {
    color: #1F5C85;
}

.vnu-room-tile.female .vnu-room-tile-ratio {
    color: #00693F;
}

.vnu-room-tile.full .vnu-room-tile-ratio {
    color: #555555;
}

/* Room tile nền — phân phòng */
.vnu-room-tile.male.status-assigned {
    background: #DAF0FF;
}

.vnu-room-tile.female.status-assigned {
    background: #D0FAE5;
}

/* Room tile nền — đang nội trú */
.vnu-room-tile.male.status-active {
    background: #DAF0FF;
}

.vnu-room-tile.female.status-active {
    background: #D0FAE5;
}

/* ── Assign Toast notification ── */
.vnu-assign-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.vnu-assign-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.vnu-assign-toast.error {
    background: #E53935;
}

.vnu-assign-toast.success {
    background: #00803D;
}

.vnu-assign-toast.info {
    background: #1565C0;
}

/* ── Drag & Drop states ── */
.vnu-draggable-row {
    cursor: grab;
}

.vnu-draggable-row:active {
    cursor: grabbing;
}

.vnu-row-dragging {
    opacity: 0.5;
    background: #F0F8F4 !important;
}

.vnu-draggable-row.vnu-row-unpaid {
    cursor: not-allowed;
    opacity: 0.5;
}

.vnu-draggable-row.vnu-row-unpaid:active {
    cursor: not-allowed;
}

.vnu-room-tile.vnu-drop-over {
    outline: 2.5px dashed #008855 !important;
    outline-offset: -3px;
    background: #D0FAE5 !important;
    transform: scale(1.04);
}

.vnu-room-tile.vnu-drop-invalid {
    outline: 2.5px dashed #E53935 !important;
    outline-offset: -3px;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Ngay khi bắt đầu kéo 1 SV, làm mờ TOÀN BỘ ô phòng khác loại — cán bộ thấy ngay
   trong tầng/toà đang xem có phòng phù hợp hay không, không phải rê thử từng ô. */
.vnu-room-tile.vnu-type-mismatch {
    opacity: 0.3;
    filter: grayscale(0.6);
    pointer-events: none;
}

/* Ô phòng vừa tìm thấy qua "Tìm phòng phù hợp" — nhấp nháy để cán bộ dễ nhận ra
   giữa cả lưới phòng, nhất là sau khi vừa tự chuyển tòa/tầng. */
@keyframes vnuRoomFoundPulse {

    0%,
    100% {
        outline-color: #008855;
        box-shadow: 0 0 0 0 rgba(0, 136, 85, 0.4);
    }

    50% {
        outline-color: #00b86b;
        box-shadow: 0 0 0 8px rgba(0, 136, 85, 0);
    }
}

.vnu-room-tile.vnu-room-found-highlight {
    outline: 3px solid #008855 !important;
    outline-offset: -3px;
    animation: vnuRoomFoundPulse 0.8s ease-in-out 3;
}

/* Legend màu loại phòng — dải màu ở đầu mỗi ô phòng là loại nào */
.vnu-rt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 0 20px 10px;
    font-size: 12px;
    color: #647272;
}

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

.vnu-rt-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Chip "Loại phòng" trong danh sách SV — nền tô ĐẶC màu loại phòng (JS gán qua
   roomTypeColor(), xem colorRoomTypePills()), chữ trắng — khớp trực quan với
   legend/ô phòng ở lưới xếp phòng, không thể nhầm/mờ như cách nhuộm nhạt trước đó. */
.vnu-rt-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    background: #B3C0C0;
    color: #fff;
}

/* Empty State / Loading Room Grid */
.vnu-room-grid-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: #8DA0A0;
    font-size: 13px;
    font-weight: 600;
}

.vnu-room-grid-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #647272;
    font-size: 13px;
}

/* CARD 2: Student List Section Layout */
.student-list-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Badge "Đã chọn N" cạnh tiêu đề DANH SÁCH SINH VIÊN — thay cho avatar tròn
   + số đếm riêng ở card cột trái trước đây */
.vnu-selected-count-badge {
    background: #EEFEEF;
    border: 1px solid #4CD681;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 12px;
    color: #00803D;
}

.vnu-selected-count-badge strong {
    font-weight: 700;
}

/* Student Table Area */
.vnu-student-table-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 16px 16px 8px;
    box-sizing: border-box;
}

.vnu-student-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    gap: 8px;
    position: relative;
}

.vnu-table-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vnu-table-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.vnu-student-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

/* Search wrap with icon */
.vnu-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 30px;
}

.vnu-search-icon {
    position: absolute;
    left: 10px;
    font-size: 12px;
    color: rgba(23, 34, 28, 0.45);
    pointer-events: none;
}

.vnu-filter-btn-sm {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #FEFFFD;
    background: #00803D;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.vnu-filter-btn-sm:hover {
    background: #006631;
}

.vnu-filter-count {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.vnu-student-search {
    height: 32px;
    width: 100%;
    max-width: 204px;
    border: 1.5px solid #F0F0F0;
    border-radius: 6px;
    padding: 0 10px 0 30px;
    font-size: 14px;
    font-weight: 400;
    /* Figma #512:533: Regular 14, placeholder #899F9F */
    color: #17221C;
    background: #F0F0F0;
    outline: none;
    transition: all 0.2s ease;
}

.vnu-student-search:focus {
    border-color: #17221C;
    background: #FEFFFD;
}

.vnu-student-search::placeholder {
    color: #899F9F;
}

/* Active filter tags row */
.vnu-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Banner "Đang ẩn N SV có loại phòng khác tòa đang xem" — trang Phân phòng,
   danh sách SV bên phải. Báo rõ thay vì ẩn âm thầm (dễ tưởng nhầm là lỗi). */
.vnu-roomtype-filter-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: #FFF8E6;
    border-radius: 8px;
    font-size: 13px;
    color: #647272;
}

.vnu-roomtype-filter-toggle-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: #008855;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    flex-shrink: 0;
}

/* Chip bộ lọc đang áp dụng (trang Lưu trú & Tạm trú) */
.vnu-active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 6px 0 12px;
    border-radius: 20px;
    background: #EEFEEF;
    border: 1px solid #B2E5C7;
    font-size: 13px;
    font-weight: 500;
    color: #17221C;
    white-space: nowrap;
}

.vnu-active-filter-tag .vnu-filter-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #647272;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}

.vnu-active-filter-tag .vnu-filter-tag-remove:hover {
    background: #008855;
    color: #FEFFFD;
}

.vnu-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    background: #E8F5EE;
    border: 1.5px solid #B2D8C4;
    font-size: 12px;
    font-weight: 500;
    color: #17221C;
    cursor: default;
}

.vnu-filter-tag .vnu-tag-remove {
    cursor: pointer;
    font-size: 13px;
    color: #647272;
    line-height: 1;
}

.vnu-filter-tag .vnu-tag-remove:hover {
    color: #17221C;
}

/* Student Table Grid */
.vnu-student-table-scroll {
    flex: 1;
    overflow: auto;
}

/* Cột danh sách SV giờ hẹp hơn (bên phải, ~30% trang) — bảng giữ min-width thay
   vì width:100%, cuộn ngang trong .vnu-student-table-scroll khi cần thay vì bóp
   chật các cột (Mã SV/Sinh viên/Giới tính/Trường/Loại phòng...). */
.vnu-student-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.vnu-student-table thead th:first-child,
.vnu-student-table tbody td:first-child {
    padding-left: 4px;
}

.vnu-student-table th:nth-child(2),
.vnu-student-table td:nth-child(2),
.vnu-student-table th:nth-child(3),
.vnu-student-table td:nth-child(3) {
    width: 1%;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
}

.vnu-student-table thead th[title] {
    cursor: help;
}

.vnu-student-table thead th {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #EBEBEB;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.vnu-th-sortable {
    cursor: pointer;
    user-select: none;
}

.vnu-sort-arrows {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 0;
}

.vnu-sort-arrows span:first-child {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 4px solid #B3B3B3;
    display: block;
}

.vnu-sort-arrows span:last-child {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid #B3B3B3;
    display: block;
}

.vnu-student-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.vnu-student-table tbody tr:hover {
    background: #F7F9F8;
}

.vnu-student-table tbody tr.row-selected {
    outline: 1.5px solid #3B82F6;
    outline-offset: -1px;
}

.vnu-student-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #F2F2F2;
    vertical-align: middle;
    color: #17221C;
    font-size: 12px;
}

.vnu-col-check {
    width: 32px;
    text-align: center;
}

.vnu-col-action {
    width: 32px;
    text-align: center;
}

/* Custom checkbox */
.vnu-checkbox-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 0;
}

.vnu-cb-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.vnu-cb-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #B3B3B3;
    border-radius: 2px;
    background: #fff;
    flex-shrink: 0;
    transition: all 0.15s ease;
    position: relative;
}

.vnu-cb-hidden:checked+.vnu-cb-box {
    background: #008855;
    border-color: #008855;
}

.vnu-cb-hidden:checked+.vnu-cb-box::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.vnu-td-code {
    font-size: 11px;
    font-weight: 500;
    color: #647272;
}

.vnu-student-av {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vnu-student-av-name {
    font-size: 12px;
    font-weight: 600;
    color: #17221C;
}

.vnu-gender-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 50px;
    display: inline-block;
}

.vnu-gender-tag.male {
    background: #E3F2FD;
    color: #1565C0;
}

.vnu-gender-tag.female {
    /* Đồng bộ với quy ước Nữ=xanh lá đang dùng ở khu xếp phòng (checkbox "Phòng nữ"
       + màu ô phòng, xem .vnu-filter-checkbox.female #33CC6D) — trước đây badge này
       dùng hồng, lệch quy ước, gây khó so màu giữa 2 khu vực. */
    background: #E3F9EC;
    color: #1B8A4C;
}

.vnu-gender-tag.other {
    background: #F5F5F5;
    color: #616161;
}

.vnu-td-meta {
    color: #647272;
    font-weight: 500;
}

.vnu-priority-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #FFF3E0;
    color: #E65100;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
}

.vnu-row-link {
    color: #B2C2BC;
    font-size: 12px;
    transition: color 0.15s ease;
}

.vnu-row-link:hover {
    color: #008855;
}

button.vnu-row-link {
    background: none;
    border: none;
    padding: 0;
    margin-right: 8px;
    cursor: pointer;
}

/* Spinner and sentinel */
.vnu-scroll-sentinel {
    height: 1px;
}

.vnu-load-more-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    font-size: 12px;
    color: #647272;
}

/* ── Filter panel ───────────────────────────────────────── */
.vnu-filter-panel {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    width: 320px;
    overflow: hidden;
}

.vnu-filter-panel-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: min(60vh, 460px);
    overflow-y: auto;
}

.vnu-filter-group-label {
    font-size: 11px;
    font-weight: 700;
    color: #8DA0A0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.vnu-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vnu-filter-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.vnu-filter-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid #E2E5E4;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #17221C;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.vnu-filter-option input {
    display: none;
}

.vnu-filter-option:has(input:checked) {
    background: #17221C;
    border-color: #17221C;
    color: #fff;
}

.vnu-filter-option:hover {
    border-color: #17221C;
}

.vnu-filter-panel-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #F0F0F0;
}

.vnu-filter-reset {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: 1.5px solid #E2E5E4;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #647272;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.vnu-filter-reset:hover {
    border-color: #17221C;
    color: #17221C;
}

.vnu-filter-apply {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: none;
    border-radius: 6px;
    background: #17221C;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.vnu-filter-apply:hover {
    background: #2d3e38;
}

.vnu-filter-btn-sm.has-filter {
    background: #17221C;
}

/* Input/select full chiều rộng panel (320px) — dùng lại .vnu-search-input/.vnu-capsule-select
   nhưng bỏ min-width cố định để không tràn panel */
.vnu-filter-input-full {
    width: 100%;
    min-width: 0;
}

/* select2 chèn container ngay sau <select> gốc (đã bị ẩn) — ép width 100% bằng CSS
   thuần thay vì option width:'100%' của JS, vì select2 init lúc panel còn
   display:none (class u-none) nên đo được width=0 nếu để JS tự tính. */
#js-acc-priority-select.select2-hidden-accessible+.select2-container {
    width: 100% !important;
}

/* Grid thay vì flex: minmax(0, 1fr) ép cứng 2 cột bằng nhau, không cho input date
   tràn ra ngoài panel theo kích thước nội dung tối thiểu riêng của nó (flexbox
   min-width:0 không khống chế triệt để input[type=date] trên mọi trình duyệt). */
.vnu-filter-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Panel lọc dạng inline (không phải popup nổi) — nằm ngay dưới header bảng,
   chiếm hết chiều rộng khu vực bảng, ẩn/hiện bằng class "u-none". Dùng ở trang
   Biên lai (receipts.index) — khác .vnu-filter-panel-vnu (popup định vị tuyệt đối
   qua JS) vì ở đây muốn panel đẩy nội dung xuống thay vì đè lên. */
.rcp-filter-panel {
    border: 1px solid #E2E5E4;
    border-radius: 14px;
    background: #FAFBFA;
    margin: 0 14px 16px;
    overflow: hidden;
}

.rcp-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px;
}

.rcp-filter-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #E2E5E4;
}

.rcp-filter-footer .vnu-filter-reset,
.rcp-filter-footer .vnu-filter-apply {
    flex: 0 0 auto;
    padding: 0 20px;
}

.vnu-filter-date-range .vnu-search-input {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    /* Style riêng theo đúng số liệu API Figma (Rectangle 2457, H Fixed 32px):
       fill #F0F0F0, stroke 1px #E2E5E4, radius 4px — khác pill trắng cao 36px
       mặc định của .vnu-search-input */
    height: 32px;
    background: #F0F0F0;
    border: 1px solid #E2E5E4;
    border-radius: 4px;
}

.vnu-filter-date-sep {
    color: #B0BCBC;
    font-size: 13px;
}

/* Biến thể panel lọc theo design Figma (node 1271:1805, "BỘ LỌC") — nền xám nhạt,
   viền dưới dày hơn, có header tiêu đề + nút đóng riêng, dùng cho trang duyệt hồ sơ. */
.vnu-filter-panel-vnu {
    width: 550px;
    background: #F0F0F0;
    border: 1px solid #E2E5E4;
    border-bottom-width: 3px;
    border-radius: 6px;
    /* Dropdown của select2 "Đối tượng ưu tiên" được append làm con trực tiếp của
       panel này (dropdownParent) — overflow:hidden của .vnu-filter-panel gốc sẽ
       cắt mất dropdown nếu nó tràn xuống dưới đáy panel, nên phải mở lại thành
       visible ở biến thể riêng này. */
    overflow: visible;
}

.vnu-filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #8DA0A0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #E2E5E4;
}

.vnu-filter-panel-close {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: #8DA0A0;
    cursor: pointer;
    padding: 0;
}

.vnu-filter-panel-close:hover {
    color: #17221C;
}

.vnu-filter-panel-vnu .vnu-filter-panel-body {
    background: #FEFFFD;
}

/* Nút "Lọc" — đúng màu fill trong Figma (Rectangle 2230, node 722:8895): #4CD681 */
.vnu-filter-apply-vnu {
    background: #4CD681;
}

.vnu-filter-apply-vnu:hover {
    background: #3fc472;
}

/* CARD 3: Auto Assignment Card */
.vnu-auto-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #17221C;
    margin-bottom: 4px;
}

.vnu-auto-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    overflow-y: auto;
}

.vnu-auto-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vnu-field-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

/* Hide native select before select2 init */
select.vnu-auto-select2 {
    display: none;
}

/* Select2 override for auto-assign panel */
.vnu-auto-select2+.select2-container {
    width: 100% !important;
}

.vnu-auto-select2+.select2-container {
    position: relative !important;
}

.vnu-auto-select2+.select2-container::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 10px;
    color: #17221C;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.vnu-auto-select2+.select2-container .select2-selection--multiple {
    border: none !important;
    border-radius: 6px !important;
    min-height: unset !important;
    padding: 5px 28px 5px 8px !important;
    background: #F6F6F6 !important;
    cursor: pointer !important;
}

.vnu-auto-select2+.select2-container .select2-selection--multiple .select2-selection__choice {
    background: #FEFFFD !important;
    border: 1px solid #E2E5E4 !important;
    border-radius: 6px !important;
    color: #17221C !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    height: 30px !important;
    line-height: 28px !important;
    padding: 0 10px 0 8px !important;
    margin: 2px 4px 2px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.vnu-auto-select2+.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #999 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin-right: 2px !important;
    float: none !important;
    order: -1 !important;
}

.vnu-auto-select2+.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #17221C !important;
    background: transparent !important;
}

.vnu-auto-select2+.select2-container .select2-search--inline .select2-search__field {
    font-size: 13px !important;
    color: #17221C !important;
    background: transparent !important;
    margin: 4px 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
}

/* Dropdown list */
.select2-dropdown {
    border: 1px solid #E2E5E4 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
}

.select2-results__option {
    font-size: 14px !important;
    color: #17221C !important;
    padding: 8px 12px !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #F0F8F4 !important;
    color: #17221C !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: #E8F5EE !important;
    color: #17221C !important;
}

/* Floor chips grid */
/* Figma #722:2746: hộp #F6F6F6 bo 6 padding 5, chip cách nhau 4 */
.vnu-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #F6F6F6;
    border-radius: 6px;
    padding: 5px;
}

/* Figma #722:2749+: chip #E5E5E5, 32px, không viền */
.vnu-auto-chip {
    background-color: #E5E5E5;
    color: #17221C;
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.vnu-auto-chip:hover {
    background-color: #D8D8D8;
}

.vnu-auto-chip.active {
    background-color: #17221C;
    color: #fff;
    border-color: #17221C;
}

/* Features checklist container */
.vnu-features-checklist-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    background: #FFFFFF;
    overflow: hidden;
    overflow-y: auto;
    max-height: 320px;
}

.vnu-feature-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    cursor: pointer;
    user-select: none;
    padding: 11px 12px;
    transition: background 0.12s ease;
}

.vnu-feature-check:hover {
    background: #F7F9F8;
}

/* Green checkbox variant for features */
.vnu-cb-green:checked+.vnu-cb-box {
    background: #4CD681;
    border-color: #4CD681;
}

/* Auto assign actions — Figma #722:3155/3156: nút 132×32, cách nhau 10px */
.vnu-auto-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

.vnu-btn-clear {
    flex: 1;
    height: 32px;
    background-color: #E5E5E5;
    color: #17221C;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
}

.vnu-btn-clear:hover {
    background-color: #d4d4d4;
}

.vnu-auto-actions .vnu-btn-confirm:hover {
    background-color: #6ed9a0;
}

/* ============================================================
   VNU KTX - Residences Module  (Figma node-id=512-177)
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────── */
.residences-page {
    padding: 0;
}

/* ── 2-Column layout ──────────────────────────────────── */
.residences-layout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.residences-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.residences-sidebar {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── 4 top stat cards ─────────────────────────────────── */
.res-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

/* Figma #512:177: card 341×197, bo 26, padding 24 */
.res-stat-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, 0.07);
}

.res-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #17221C;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.res-stat-value-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.res-stat-big {
    font-size: 36px;
    font-weight: 700;
    color: #17221C;
    line-height: 46px;
}

/* Divider 2px #F6F6F6 dưới số lớn (Figma #1303:20) */
.res-stat-divider {
    border-top: 2px solid #F6F6F6;
    margin: 8px 0;
}

/* "112 / 135": số lưu trú semibold, còn lại regular, cùng #17221C */
.res-stat-sub-val {
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
}

.res-stat-sub-val strong {
    font-weight: 600;
}

.res-stat-unit {
    font-size: 14px;
    color: #17221C;
    font-weight: 600;
}

.res-stat-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.res-stat-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.res-stat-sub-label {
    font-size: 14px;
    font-weight: 400;
    color: #647272;
}

.res-tamtru-val {
    font-size: 14px;
    font-weight: 700;
    color: #4FBEC1;
}

.res-luutru-val {
    font-size: 14px;
    font-weight: 700;
    color: #FFAB72;
}

/* progress bar */
/* Figma #765:1252: track 12px #F0F0F0 bo 6, fill 8px inset 2 */
.res-progress-container {
    width: 100%;
    height: 12px;
    background-color: #F0F0F0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 14px 0 5px;
}

.res-progress-segment-cyan {
    background: #87D8D9;
    height: 8px;
    border-radius: 6px;
}

.res-progress-segment-orange {
    background: #FFAB72;
    height: 8px;
    border-radius: 6px;
}

.res-w-87 {
    width: 87%;
}

.res-w-13 {
    width: 13%;
}

.res-w-84 {
    width: 84%;
}

.res-w-16 {
    width: 16%;
}

.res-w-69 {
    width: 69%;
}

.res-w-31 {
    width: 31%;
}

.res-w-65 {
    width: 65%;
}

.res-w-35 {
    width: 35%;
}

/* Figma: "13% … 87%" Regular 14 #17221C */
.res-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
}

.res-label-cyan {
    color: #17221C;
}

.res-label-orange {
    color: #17221C;
}

/* ── Main table card ──────────────────────────────────── */
/* Figma #512:180: card 874×624 bo 26; bảng #F6F6F6 cách mép 10px */
.res-table-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 24px 10px 10px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, 0.07);
}

/* Figma #512:183: nền #F6F6F6 bo 16, không viền, padding 10 */
.res-table-outer {
    border: none;
    border-radius: 16px;
    background: #F6F6F6;
    overflow: hidden;
    padding: 10px 10px 0;
}

/* Tabs */
/* Figma: hàng tab riêng (y401), không kẻ dưới; hàng Lọc/search riêng (y441) */
.res-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px;
    margin-bottom: 24px;
}

.res-filter-row {
    padding: 0 10px;
    margin-bottom: 14px;
}

/* Ô tìm kiếm không kéo giãn hết chiều rộng — giữ nút "Tìm" sát cạnh ô nhập
   thay vì bị đẩy ra tận mép phải bảng (trang Yêu cầu đổi/trả phòng). */
.res-filter-row.vnu-student-filter-bar {
    justify-content: flex-start;
}

.res-filter-row .vnu-search-wrap {
    flex: 0 1 320px;
}

.res-tabs {
    display: flex;
    gap: 28px;
}

/* Figma #512:504: Semibold 12, tracking 0.1em, active #17221C / inactive 65% */
.res-tab {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    padding-bottom: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    user-select: none;
    text-decoration: none;
    display: inline-block;
}

.res-tab.active {
    color: #17221C;
}

.res-tab.active::after {
    display: none;
    /* Figma không có gạch chân tab */
}

/* Filter bar */
.res-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.btn-action-green {
    background: #008A2E;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-action-green:hover {
    background: #00701f;
    color: #fff;
}

.res-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 200px;
    flex-shrink: 0;
}

.res-search-icon {
    color: #A0AEC0;
    font-size: 13px;
    flex-shrink: 0;
    margin-left: 4px;
}

.res-search-input {
    flex: 1;
    height: 32px;
    border: none;
    border-radius: 6px;
    padding: 0 12px 0 28px;
    font-size: 14px;
    color: #17221C;
    outline: none;
    min-width: 0;
    margin-left: -22px;
    background: #F0F0F0;
}

.res-search-input:focus {
    background: #E8E8E8;
}

.res-search-input::placeholder {
    color: #B3B3B3;
}

.res-filter-select {
    height: 36px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0 28px 0 10px;
    font-size: 13px;
    color: #718096;
    outline: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer;
    flex-shrink: 0;
}

/* Table */
.res-table-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 550px;
    overflow-y: auto;
    padding-right: 2px;
    padding-bottom: 4px;
}

.res-table-wrap::-webkit-scrollbar {
    width: 6px;
}

.res-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.res-table-wrap::-webkit-scrollbar-thumb {
    background: #C8D0CF;
    border-radius: 3px;
}

.res-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #A0ADAB;
}

.res-table-head,
.res-table-row {
    display: grid;
    grid-template-columns: 100px 1fr 70px 70px 130px 100px 110px 110px 96px;
    /* MÃ SV | SINH VIÊN | GT | PHÒNG | TÒA | TRẠNG THÁI | ĐK LƯU TRÚ | YÊU CẦU | 3 nút */
    align-items: center;
    gap: 0 12px;
}

.res-table-head {
    padding: 0 8px 8px;
    background: transparent;
}

.res-th {
    font-size: 12px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Figma #512:207: hàng trắng 42px, viền #E2E5E4, bo 6 */
.res-table-row {
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 4px 8px;
    min-height: 42px;
    box-sizing: border-box;
    transition: box-shadow .15s;
}

.res-table-row:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
    border-color: #D0DAD2;
}

.res-td {
    font-size: 14px;
    color: #17221C;
    display: flex;
    align-items: center;
    min-width: 0;
}

.res-id-cell {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

.res-student-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.res-avatar-sm {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E0EEE1;
    color: #647272;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #fff;
}

.res-student-text {
    min-width: 0;
}

.res-student-name {
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.res-edit-link {
    display: none;
}

.res-td-muted {
    color: #647272;
}

.res-td-bold {
    font-weight: 600;
}

/* Badges */
.res-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    white-space: nowrap;
    min-width: 68px;
}

.res-badge-orange {
    color: #ED3E09;
    background: #FFE8D5;
}

.res-badge-cyan {
    color: #4FBEC1;
    background: #E6F9FA;
}

.res-badge-gray {
    color: #647272;
    background: #F0F2F1;
}

/* C06 status text */
.res-c06-status {
    font-size: 14px;
    font-weight: 400;
}

.res-c06-confirmed {
    color: #03CC80;
}

.res-c06-processing {
    color: #647272;
}

.res-c06-pending {
    color: #647272;
}

.res-c06-failed {
    color: #E53935;
}

.res-c06-error {
    color: #E53E3E;
}

/* Action cell */
.res-action-cell {
    justify-content: flex-end;
    gap: 8px;
}

/* Nút yêu cầu đang bật (đổi phòng / trả phòng) */
.res-icon-btn.res-req-active {
    color: #00803D;
    background: #D0FAE5;
}

.res-scroll-sentinel {
    padding: 14px 0;
    text-align: center;
}

.res-scroll-loading {
    font-size: 13px;
    color: #647272;
}

.res-req-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.res-req-none {
    color: #C4CCC8;
    font-size: 14px;
}

.res-req-badge-change {
    color: #0069C2;
    background: #E3F1FF;
}

.res-req-badge-checkout {
    color: #C2410C;
    background: #FEEBDC;
}

.res-icon-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: #B3B3B3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: .15s;
}

.res-icon-btn:hover {
    color: #17221C;
    background: #F0F2F1;
}

/* Empty state */
.res-empty {
    text-align: center;
    padding: 28px;
    color: #A0AEC0;
    font-size: 13px;
}

/* Pagination */
.res-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* ── Right Sidebar cards ──────────────────────────────── */
.res-sidebar-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, 0.07);
}

.res-sidebar-card-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(23, 34, 28, 0.65);
    margin-bottom: 10px;
}

/* Donut stats row */
.res-donut-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
}

.res-donut-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 1.15;
}

.res-donut-stat-sub {
    font-size: 18px;
    font-weight: 300;
    color: #17221C;
}

.res-donut-stat-label {
    font-size: 13px;
    font-weight: 400;
    color: #647272;
    margin-top: 2px;
    line-height: 1.3;
}

.res-donut-stat-right {
    text-align: right;
}

/* SVG Donut */
.res-donut-svg-wrap {
    position: relative;
    margin: 6px 0 0;
    width: 100%;
}

.res-donut-svg {
    width: 100%;
    height: auto;
    display: block;
}

.res-donut-center-text {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
}

.res-donut-percent {
    font-size: 34px;
    font-weight: 700;
    color: #17221C;
    display: block;
}

.res-donut-desc {
    font-size: 13px;
    font-weight: 400;
    color: #647272;
    display: block;
    margin-top: 1px;
}

/* XEM NHANH */
.res-xemnhanh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.res-xemnhanh-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    cursor: pointer;
}

.res-xemnhanh-nav i {
    font-size: 12px;
}

.res-xemnhanh-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(23, 34, 28, 0.65);
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color .15s;
}

.res-xemnhanh-btn:hover {
    color: #17221C;
}

.res-xemnhanh-page {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    min-width: 24px;
    text-align: center;
}

.res-xemnhanh-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.res-xemnhanh-title {
    font-size: 24px;
    font-weight: 700;
    color: #17221C;
    line-height: 1;
}

.res-xemnhanh-link {
    font-size: 14px;
    color: #008855;
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
}

.res-xemnhanh-link:hover {
    text-decoration: underline;
}

/* Quick list */
.res-quick-list,
.res-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
}

.res-quick-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.res-quick-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #FEFFFD;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.res-quick-name {
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    line-height: 1.4;
}

.res-quick-room {
    font-size: 12px;
    color: #647272;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1400px) {
    .residences-sidebar {
        width: 340px;
    }
}

@media (max-width: 1280px) {
    .residences-sidebar {
        width: 300px;
    }

    .res-table-head,
    .res-table-row {
        grid-template-columns: 90px 1fr 70px 70px 130px 100px 110px 90px;
    }
}

@media (max-width: 1100px) {
    .residences-layout {
        flex-direction: column;
    }

    .residences-sidebar {
        width: 100%;
    }

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

    .res-table-head,
    .res-table-row {
        grid-template-columns: 80px 1fr 70px 70px 120px 100px 110px 40px;
    }
}

@media (max-width: 768px) {
    .res-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .res-quick-list,
    .res-quick-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== PROFILE PAGE ===== */
.vnu-profile-wrap {
    width: 100%;
}

.vnu-profile-main-container {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 32px 32px 0;
    box-shadow: 0 2px 10px rgba(17, 59, 100, 0.07);
    overflow: hidden;
}

/* Top bar: title + button */
.vnu-profile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.vnu-profile-page-title {
    font-size: 24px;
    font-weight: 700;
    color: #17221C;
}

.vnu-profile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vnu-profile-dispatch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #17221C;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s;
}

.vnu-profile-dispatch-btn i {
    font-size: 13px;
}

.vnu-profile-dispatch-btn:hover {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

.vnu-profile-dispatch-btn--danger {
    background: #E5484D;
}

.vnu-profile-dispatch-btn--danger:hover {
    background: #C9302C;
    opacity: 1;
}

.vnu-profile-dispatch-btn--outline {
    background: #FEFFFD;
    color: #17221C;
    border: 1px solid #D8E4E4;
}

.vnu-profile-dispatch-btn--outline:hover {
    background: #E6EFEC;
    color: #17221C;
    opacity: 1;
}

.vnu-profile-dispatch-btn--primary {
    background: #008855;
}

.vnu-profile-dispatch-btn--primary:hover {
    background: #00803D;
    opacity: 1;
}

.vnu-profile-title-divider {
    border: none;
    border-top: 1px solid #E2E5E4;
    margin: 0;
}

.vnu-profile-bottom-divider {
    border: none;
    border-top: 1px solid #E2E5E4;
    margin: 0;
}

/* ===== PROFILE 3-COL GRID ===== */
.vnu-profile-grid {
    display: grid;
    grid-template-columns: 22% 26% 52%;
    gap: 0;
    align-items: stretch;
}

/* Column base */
.vnu-profile-col {
    padding: 28px 28px 32px;
}

.vnu-profile-col--left {
    padding-left: 0;
    border-right: 1px solid #E2E5E4;
}

.vnu-profile-col--status {
    border-right: 1px solid #E2E5E4;
}

.vnu-profile-col--detail {
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Avatar */
.vnu-profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
}

.vnu-profile-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #EAF1EB;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #8ab894;
    margin-bottom: 10px;
    overflow: hidden;
}

.vnu-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vnu-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: #17221C;
    text-align: center;
    margin-bottom: 2px;
    line-height: 1.3;
}

.vnu-profile-code {
    font-size: 12px;
    color: #647272;
    text-align: center;
}

/* Personal info list */
.vnu-pinfo-list {
    display: flex;
    flex-direction: column;
}

/* Hàng inline: label trái — value phải */
.vnu-pinfo-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #F6F6F6;
    gap: 8px;
}

.vnu-pinfo-row:last-child {
    border-bottom: none;
}

/* Hàng dài: label trên, value dưới căn phải */
.vnu-pinfo-row--block {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.vnu-pinfo-label {
    font-size: 14px;
    color: #17221C;
    font-weight: 600;
    line-height: 22px;
    flex-shrink: 0;
}

.vnu-pinfo-val {
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    line-height: 22px;
    text-align: right;
}

/* Tình trạng col */
.vnu-status-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #E2E5E4;
}

.vnu-status-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid #E2E5E4;
    gap: 0;
}


.vnu-status-label {
    flex: 0 0 42%;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #686F6A;
    text-transform: uppercase;
    line-height: 22px;
    padding: 11px 12px 11px 0;
    border-right: 1px solid #E2E5E4;
}

.vnu-status-val {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    line-height: 22px;
    padding: 11px 0 11px 16px;
}

.vnu-status-val--bold {
    font-weight: 600;
}

.vnu-na {
    color: #B3B3B3;
    font-size: 13px;
}

/* Sections in detail col */
.vnu-profile-section {
    width: 100%;
}

.vnu-profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.vnu-profile-section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #17221C;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vnu-profile-section-info-icon {
    font-size: 14px;
    color: #B3B3B3;
    cursor: default;
}

.vnu-profile-section-action {
    font-size: 12px;
    color: var(--primary-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.vnu-profile-section-action:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.vnu-profile-section-action--danger {
    color: #f96d0e;
}

.vnu-profile-section-action--danger:hover {
    color: #c0440a;
}

/* Tables — gray container + white card rows (Figma #1215:608) */
.vnu-profile-table {
    width: 100%;
    background: #F6F6F6;
    border-radius: 16px;
    padding: 10px;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: 14px;
}

.vnu-profile-table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #B3B3B3;
    padding: 4px 14px 8px;
    text-align: left;
    white-space: nowrap;
    background: transparent;
    border: none;
}

.vnu-profile-table tbody td {
    padding: 10px 14px;
    background: #FFFFFF;
    border-top: 1px solid #E2E5E4;
    border-bottom: 1px solid #E2E5E4;
    color: #17221C;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.vnu-profile-table tbody td:first-child {
    font-weight: 600;
    border-left: 1px solid #E2E5E4;
    border-radius: 6px 0 0 6px;
}

.vnu-profile-table tbody td:last-child {
    border-right: 1px solid #E2E5E4;
    border-radius: 0 6px 6px 0;
    width: 1%;
    white-space: nowrap;
}

.vnu-profile-table thead th:last-child {
    width: 1%;
}

.vnu-profile-table tbody tr:hover td {
    background: #F8FFFE;
}

/* Avatar mini */
.vnu-profile-mini-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8f5e9;
    border: 1px solid #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--primary-light);
    margin-right: 8px;
    vertical-align: middle;
}

/* Trưởng phòng badge — shield icon, no background circle */
.vnu-profile-self-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #008855;
    font-size: .85rem;
    margin-left: 6px;
    vertical-align: middle;
}

/* Receipt status */
.vnu-profile-inv-status {
    font-size: .8rem;
    font-weight: 600;
}

.vnu-profile-inv-status.paid {
    color: #16a34a;
}

.vnu-profile-inv-status.unpaid {
    color: var(--text-muted);
}

.vnu-profile-inv-status.overdue {
    color: #dc2626;
}

.vnu-profile-inv-action {
    font-size: .8rem;
    color: #008855;
    text-decoration: none;
    font-weight: 500;
}

.vnu-profile-inv-remind {
    font-size: .8rem;
    color: #ED3E09;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

/* Priority tags */
.vnu-profile-priority-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vnu-profile-priority-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid #E2E5E4;
    background: #FEFFFD;
    font-size: 13px;
    line-height: 18px;
    color: #17221C;
    font-weight: 400;
}

.vnu-profile-priority-tag .vnu-profile-remove-tag {
    color: #647272;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    margin-left: 2px;
}

.vnu-profile-empty {
    color: #647272;
    font-size: 13px;
    padding: 8px 0;
}

/* Violation list */
.vnu-profile-violation-list {
    padding: 0;
}

.vnu-profile-violation-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E2E5E4;
    align-items: flex-start;
}

.vnu-profile-violation-item:first-child {
    padding-top: 0;
}

.vnu-profile-violation-item:last-child {
    border-bottom: none;
}

.vnu-profile-violation-date {
    font-size: 12px;
    line-height: 16px;
    color: #647272;
    white-space: nowrap;
    min-width: 70px;
    margin-top: 2px;
    font-weight: 400;
}

.vnu-profile-violation-body {
    flex: 1;
    min-width: 0;
}

.vnu-profile-violation-title {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 20px;
}

.vnu-profile-violation-desc {
    font-size: 13px;
    color: #647272;
    line-height: 1.5;
    font-weight: 400;
}

.vnu-profile-violation-imgs {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: flex-start;
}

.vnu-profile-violation-img {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.vnu-profile-violation-img-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.vnu-profile-violation-img-wrap .vnu-profile-violation-img {
    width: 100%;
    height: 100%;
}

.vnu-profile-violation-img-more {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* Severity badge & delete */
.vnu-violation-severity {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.vnu-violation-delete-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    color: #B3B3B3;
    cursor: pointer;
    font-size: 13px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}

.vnu-violation-delete-btn:hover {
    color: #ED3E09;
    background: #FFF0EE;
}

/* Modal styles */
.vnu-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #647272;
    margin-bottom: 6px;
}

.vnu-modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #E2E5E4;
    border-radius: 10px;
    font-size: 14px;
    color: #17221C;
    background: #FEFFFD;
    outline: none;
    transition: border-color .15s;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

.vnu-modal-input:focus {
    border-color: #008855;
}

textarea.vnu-modal-input {
    resize: vertical;
}

.vnu-modal-btn-cancel {
    padding: 9px 20px;
    border-radius: 100px;
    border: 1px solid #E2E5E4;
    background: #fff;
    color: #647272;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

.vnu-modal-btn-cancel:hover {
    background: #F6F8F7;
}

.vnu-modal-btn-submit {
    padding: 9px 22px;
    border-radius: 100px;
    border: none;
    background: #ED3E09;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}

.vnu-modal-btn-submit:hover {
    opacity: .88;
}

/* edit icon */
.vnu-profile-edit-icon {
    color: var(--text-muted);
    font-size: .8rem;
    margin-left: 4px;
    cursor: pointer;
}

.vnu-profile-edit-icon:hover {
    color: var(--primary-light);
}

.vnu-profile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 24px;
    border: 1.5px solid var(--primary-light);
    color: var(--primary-light);
    background: #FEFFFD;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vnu-profile-back-btn:hover {
    background: var(--primary-light);
    color: #fff;
}

/* ── Modal: Thêm KTX ─────────────────────────────────────────────── */
.vnu-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
}

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

.vnu-modal {
    background: #FEFFFD;
    border-radius: 16px;
    width: 650px;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px 32px 24px;
    position: relative;
}

.vnu-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#form-add-dormitory,
#form-edit-dormitory {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vnu-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 1;
}

.vnu-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #17221C;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.vnu-modal-close:hover {
    opacity: 1;
}

/* Image upload zone */
.vnu-modal-image-upload {
    width: 100%;
    height: 136px;
    border: 1px dashed #4CD681;
    border-radius: 6px;
    background: #EEFEEF;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.vnu-modal-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #008855;
    font-size: 14px;
    font-weight: 400;
}

.vnu-modal-image-icon {
    font-size: 16px;
    font-weight: 600;
    color: #008855;
}

.vnu-modal-image-preview {
    width: 100%;
    height: 100%;
    position: relative;
}

.vnu-modal-image-change {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Fields */
.vnu-modal-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vnu-required {
    color: #E53935;
}

/* Modal "Tải xuống danh sách sinh viên" — lưới checkbox chọn cột xuất Excel. */
.vnu-export-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 12px;
    max-height: 280px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    background: #FAFBFA;
}

.vnu-export-field-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #17221C;
    cursor: pointer;
}

.vnu-export-field-item input[type="checkbox"] {
    cursor: pointer;
}

.vnu-modal-input {
    width: 100%;
    height: 42px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 14px;
    color: #17221C;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.vnu-modal-input:focus {
    border-color: #17221C;
    background: #fff;
}

.vnu-modal-textarea {
    width: 100%;
    height: 76px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    color: #17221C;
    outline: none;
    resize: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.vnu-modal-textarea:focus {
    border-color: #17221C;
    background: #fff;
}

.vnu-modal-select {
    width: 100%;
    height: 42px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 14px;
    color: #17221C;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2317221C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    box-sizing: border-box;
}

/* Multi-select tags */
.vnu-multi-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vnu-multi-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.vnu-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #FEFFFD;
    border: 1px solid #E2E5E4;
    border-radius: 0;
    padding: 0 4px 0 10px;
    height: 32px;
    box-sizing: border-box;
    font-size: 13px;
    color: #17221C;
    font-weight: 500;
}

.vnu-tag-remove {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Zones */
/* Zones grid: [name-input] [32px ×-btn] [buildings] */
.vnu-zones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    margin-bottom: 6px;
}

/* Zone name input wrapper — × button nằm bên trong */
.vnu-zone-input-wrap {
    position: relative;
}

.vnu-zone-input-wrap .vnu-modal-input {
    width: 100%;
    padding-right: 34px;
}

.vnu-zone-remove-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    color: #AABAB8;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    transition: color 0.2s;
}

.vnu-zone-remove-btn:hover {
    color: #E53935;
}

.vnu-zone-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vnu-buildings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Building input row — × button nằm bên trong */
.vnu-building-input-row {
    position: relative;
}

.vnu-buildings-list .vnu-building-input-row:last-child {
    margin-bottom: 0;
}

.vnu-building-input-row .vnu-modal-input {
    width: 100%;
    padding-right: 34px;
}

.vnu-building-remove-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    color: #AABAB8;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    transition: color 0.2s;
}

.vnu-building-remove-btn:hover {
    color: #E53935;
}

.vnu-add-building-btn {
    height: 42px;
    width: 100%;
    background: #fff;
    border: 1px solid #17221C;
    border-radius: 6px;
    font-size: 22px;
    font-weight: 400;
    color: #17221C;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vnu-add-building-btn:hover {
    background: #F5F5F5;
}

.vnu-add-zone-btn {
    width: calc(50% - 5px);
    /* match zone name column (1fr of 2-column grid with 10px gap) */
    height: 42px;
    background: #fff;
    border: 1px solid #17221C;
    border-radius: 6px;
    font-size: 22px;
    font-weight: 400;
    color: #17221C;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-top: 0;
}

.vnu-add-zone-btn:hover {
    background: #F5F5F5;
}

/* Footer buttons */
.vnu-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #F0F0F0;
    gap: 12px;
    margin-top: 4px;
}

.vnu-btn-cancel {
    height: 42px;
    flex: 1;
    max-width: 180px;
    background: #E5E5E5;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    cursor: pointer;
    transition: background 0.2s;
}

.vnu-btn-cancel:hover {
    background: #D0D0D0;
}

.vnu-btn-confirm {
    height: 42px;
    flex: 1;
    max-width: 180px;
    background: #17221C;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #FEFFFD;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

/* Riêng panel xếp phòng tự động — Figma #722:3155: nút xanh #4CD681 132×32, chữ #17221C */
.vnu-auto-actions .vnu-btn-confirm {
    height: 32px;
    background: #4CD681;
    color: #17221C;
}

.vnu-btn-confirm:hover {
    background: #000;
}

.vnu-btn-confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.modal-open {
    overflow: hidden;
}

/* ===================================================================
   Facility Settings Page — moved from index.blade.php @push('styles')
   =================================================================== */

/* Edit button on dormitory card */
.vnu-facility-item-body {
    position: relative;
}

.vnu-facility-item-edit-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    color: #17221C;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.vnu-facility-item:hover .vnu-facility-item-edit-btn {
    opacity: 1;
}

.vnu-facility-item-edit-btn:hover {
    background: #fff;
    border-color: #17221C;
}

/* Modal header spacing */
.vnu-modal-header {
    margin-bottom: 5px !important;
}

/* Modal scroll: header cố định, body scroll, footer sticky, scrollbar sát phải */
.vnu-modal {
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.vnu-modal-header {
    flex-shrink: 0;
}

.vnu-modal>form {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    margin-right: -32px;
    padding-right: 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .18) transparent;
}

.vnu-modal>form::-webkit-scrollbar {
    width: 4px;
}

.vnu-modal>form::-webkit-scrollbar-track {
    background: transparent;
}

.vnu-modal>form::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 2px;
}

.vnu-modal-footer {
    position: sticky;
    bottom: 0;
    background: #FEFFFD;
    z-index: 1;
}

/* Compact image upload area */
.vnu-modal-image-upload--compact {
    margin-top: 4px !important;
}

/* QR image upload — ảnh QR gốc là hình vuông, không kéo giãn theo chiều ngang của modal */
.vnu-modal-image-upload.vnu-modal-image-upload--qr {
    width: 160px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
}

/* Inline form error */
.vnu-form-error {
    background: #fff5f5;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    color: #c0392b;
    font-size: 13px;
    padding: 8px 12px;
    margin: 4px 0 8px;
}

/* Input validation error highlight */
.vnu-input-error {
    border-color: #e74c3c !important;
    background: #fff8f8 !important;
}

/* ===== Universities Tab ===== */
.vnu-uni-layout {
    display: flex;
    align-items: stretch;
}

.vnu-uni-sidebar {
    flex: 0 0 28%;
    max-width: 360px;
    min-width: 220px;
    padding: 0 20px 16px 0;
}

.vnu-uni-divider {
    width: 1px;
    flex-shrink: 0;
    background: #E2E5E4;
    margin-right: 20px;
}

/* Form inputs */
.vnu-uni-input {
    display: block;
    width: 100%;
    height: 42px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #17221C;
    line-height: 1.4;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.vnu-uni-input:focus {
    border-color: #17221C;
    background: #fff;
}

.vnu-uni-input::placeholder {
    color: #647272;
}

.vnu-uni-textarea {
    height: 66px !important;
    resize: none;
    padding: 10px 12px !important;
    line-height: 1.5;
}

/* Select2 for uni sidebar */
#tab-universities .select2-container {
    width: 100% !important;
}

#tab-universities .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

#tab-universities .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    color: #17221C;
    font-size: 14px;
    padding: 0;
}

#tab-universities .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 8px;
}

#tab-universities .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #17221C;
    background: #fff;
}

#tab-universities .select2-dropdown {
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

#tab-universities .select2-results__option {
    font-size: 14px;
    color: #17221C;
    padding: 8px 14px;
}

#tab-universities .select2-results__option--highlighted {
    background: #F0FAF4 !important;
    color: #17221C !important;
}

#tab-universities .select2-search--dropdown .select2-search__field {
    border: 1px solid #E2E5E4;
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 10px;
}

.vnu-uni-logo-upload {
    width: 100%;
    height: 96px;
    border-radius: 6px;
    border: 1.5px dashed #4CD681;
    background: #EEFEEF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.vnu-uni-logo-upload.is-error {
    border-color: #e74c3c;
    background: #fff8f8;
}

.vnu-uni-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #008855;
}

.vnu-uni-logo-plus {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

.vnu-uni-logo-label {
    font-size: 14px;
    font-weight: 400;
}

.vnu-uni-logo-preview {
    width: 100%;
    height: 100%;
    position: relative;
}

.vnu-uni-logo-change {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 7px;
    cursor: pointer;
}

.vnu-uni-field {
    margin-bottom: 10px;
}

.vnu-uni-label {
    display: block;
    font-size: 14px;
    /* Figma style_1737266c: Semibold 14 */
    font-weight: 600;
    color: #17221C;
    margin-bottom: 5px;
}

.vnu-uni-add-btn {
    width: 100%;
    height: 42px;
    background: #17221C;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.vnu-uni-add-btn:hover {
    background: #2d3d33;
}

.vnu-uni-add-btn.is-edit {
    background: #2563eb;
}

.vnu-uni-add-btn.is-edit:hover {
    background: #1d4ed8;
}

/* Cards grid */
.vnu-uni-cards-wrap {
    flex: 1;
    min-width: 0;
}

.vnu-uni-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 34px;
    /* Figma: cột cách nhau 34px */
}

.vnu-uni-card-item {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    position: relative;
    cursor: pointer;
    transition: background 0.12s, border-radius 0.12s;
    padding: 8px;
    margin: -8px;
}

.vnu-uni-card-item:hover {
    background: #F6F6F6;
    border-radius: 16px;
}

.vnu-uni-card-img {
    width: 100%;
    height: 186px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #E2E5E4;
}

.vnu-uni-card-img img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.vnu-uni-card-body {
    padding: 10px 14px 14px;
}

.vnu-uni-card-code {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 22px;
}

.vnu-uni-card-name {
    font-size: 18px;
    font-weight: 400;
    color: #17221C;
    line-height: 22px;
    margin-top: 2px;
}

.vnu-uni-card-address {
    font-size: 14px;
    color: #647272;
    line-height: 22px;
    margin-top: 2px;
}

/* Card "..." menu */
.vnu-uni-card-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: #F0F0F0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #17221C;
    user-select: none;
}

.vnu-uni-card-menu-btn:hover {
    background: #e0e0e0;
}

.vnu-uni-card-dropdown {
    display: none;
    position: absolute;
    top: 36px;
    right: 0;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10;
    min-width: 130px;
    overflow: hidden;
}

.vnu-uni-card-menu-btn.open .vnu-uni-card-dropdown {
    display: block;
}

/* Selected (đang edit) card */
.vnu-uni-card-item.is-editing .vnu-uni-card-img {
    border: 2px solid #4CD681;
    box-shadow: 0 0 0 3px rgba(76, 214, 129, 0.15);
    background: #fff;
}

.vnu-uni-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 14px;
    color: #17221C;
    cursor: pointer;
}

.vnu-uni-dropdown-item:hover {
    background: #F0F0F0;
}

.vnu-uni-dropdown-delete {
    color: #17221C;
}

.vnu-uni-dropdown-delete:hover {
    background: #F0F0F0;
}

/* Inline delete confirm */
.vnu-uni-confirm-delete {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
    font-size: 13px;
    color: #17221C;
}

.vnu-uni-confirm-delete span {
    flex: 1;
}

.vnu-uni-confirm-yes {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
}

.vnu-uni-confirm-yes:hover {
    background: #c0392b;
}

.vnu-uni-confirm-no {
    background: #F0F0F0;
    color: #17221C;
    border: none;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

.vnu-uni-confirm-no:hover {
    background: #e0e0e0;
}

/* Tab content fills wrapper height */
.vnu-facility-tab-content {
    flex: 1;
}

#tab-room_types {
    display: flex;
    flex-direction: column;
}

/* ===== Room Types Tab ===== */
.vnu-rt-layout {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    flex: 1;
}

.vnu-rt-sidebar {
    flex: 0 0 28%;
    max-width: 360px;
    min-width: 220px;
    padding: 0 20px 16px 0;
}

.vnu-rt-divider {
    width: 1px;
    background: #E2E5E4;
    flex-shrink: 0;
    align-self: stretch;
}

.vnu-rt-cards-wrap {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    padding-left: 20px;
    overflow-x: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.vnu-rt-cards-wrap::-webkit-scrollbar {
    height: 8px;
}

.vnu-rt-cards-wrap::-webkit-scrollbar-track {
    background: #F0F2F1;
    border-radius: 4px;
}

.vnu-rt-cards-wrap::-webkit-scrollbar-thumb {
    background: #B0B8B4;
    border-radius: 4px;
}

.vnu-rt-cards-wrap::-webkit-scrollbar-thumb:hover {
    background: #17221C;
}

.vnu-rt-cards-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    flex: 1;
    align-items: stretch;
    padding-bottom: 6px;
    width: 100%;
    min-width: 100%;
}

/* Image upload area */
.vnu-rt-img-upload {
    width: 100%;
    height: 96px;
    border-radius: 6px;
    border: 1.5px dashed #4CD681;
    background: #EEFEEF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.vnu-rt-img-upload.is-error {
    border-color: #e74c3c;
    background: #fff8f8;
}

.vnu-rt-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #008855;
}

.vnu-rt-img-plus {
    font-size: 20px;
    font-weight: 600;
}

.vnu-rt-img-label {
    font-size: 14px;
}

.vnu-rt-img-preview {
    width: 100%;
    height: 100%;
    position: relative;
}

.vnu-rt-img-change {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 7px;
    cursor: pointer;
}

/* Form fields */
.vnu-rt-field {
    margin-bottom: 12px;
}

.vnu-rt-label {
    display: block;
    font-size: 14px;
    /* Figma style_1737266c: Semibold 14 */
    font-weight: 600;
    color: #17221C;
    margin-bottom: 6px;
}

.vnu-rt-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vnu-rt-color-input {
    width: 42px;
    height: 42px;
    padding: 2px;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    cursor: pointer;
    background: none;
}

.vnu-rt-color-hint {
    font-size: 12px;
    color: #8DA0A0;
}

/* Figma #432:4916/4917: input nhập liệu nền trắng, viền #E2E5E4 */
.vnu-rt-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    color: #17221C;
    background: #FFFFFF;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    appearance: none;
}

.vnu-rt-input::placeholder {
    color: #647272;
}

/* Ô "giá trị, chủng loại..." nền xám theo Figma #432:4919 */
.vnu-rt-input.rt-amenity-value {
    background: #F6F6F6;
}

.vnu-rt-input.rt-amenity-value::placeholder {
    color: rgba(100, 114, 114, 0.5);
}

.vnu-rt-input:focus {
    border-color: #17221C;
    background: #fff;
}

/* Amenity rows */
.vnu-rt-amenity-row {
    margin-bottom: 8px;
}

.vnu-rt-amenity-value-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}

.vnu-rt-amenity-value-row .vnu-rt-input {
    flex: 1;
}

.vnu-rt-extra-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}

.vnu-rt-extra-row .vnu-rt-input {
    flex: 1;
}

.vnu-rt-arrow-btn {
    flex-shrink: 0;
    width: 32px;
    height: 36px;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    background: #F6F6F6;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vnu-rt-arrow-btn:hover {
    background: #17221C;
    color: #fff;
    border-color: #17221C;
}

.vnu-rt-arrow-btn:hover img {
    filter: invert(1);
}

.vnu-rt-remove-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #fee2e2;
    color: #e74c3c;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.vnu-rt-edit-amenity-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #e8f0fe;
    color: #2563eb;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

/* Submit button — Figma 300×42 bo 6 Semibold 14 */
.vnu-rt-add-btn {
    width: 100%;
    height: 42px;
    padding: 0;
    background: #17221C;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.vnu-rt-add-btn:hover {
    background: #2d3e35;
}

.vnu-rt-add-btn.is-edit {
    background: #2563eb;
}

.vnu-rt-add-btn.is-edit:hover {
    background: #1d4ed8;
}

/* Cards */
.vnu-rt-cards-row>.vnu-rt-card:first-child {
    border-left: none;
    padding-left: 0;
}

.vnu-rt-card {
    flex: 0 0 33.333%;
    min-width: 0;
    border: none;
    border-left: 1px solid #E2E5E4;
    border-radius: 0;
    overflow: visible;
    background: #fff;
    padding: 0 16px;
    box-sizing: border-box;
}

.vnu-rt-card.is-editing>.vnu-rt-card-img {
    border: 2px solid #4CD681;
    box-shadow: 0 0 0 3px rgba(76, 214, 129, 0.15);
}

.vnu-rt-card-img {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 6px;
}

.vnu-rt-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vnu-rt-card-body {
    padding: 12px 12px 10px;
}

.vnu-rt-card-label {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    margin-bottom: 2px;
}

.vnu-rt-card-name {
    font-size: 16px;
    font-weight: 400;
    color: #17221C;
    margin-bottom: 8px;
}

.vnu-rt-card-amenities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    margin-bottom: 8px;
}

.vnu-rt-am-name {
    font-size: 12px;
    font-weight: 600;
    color: #17221C;
}

.vnu-rt-am-value {
    font-size: 12px;
    color: #647272;
}

.vnu-rt-card-extra-label {
    font-size: 12px;
    font-weight: 600;
    color: #17221C;
    margin-bottom: 4px;
}

.vnu-rt-card-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.vnu-rt-extra-item {
    font-size: 12px;
    color: #17221C;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vnu-rt-check {
    color: #4CD681;
    font-weight: 700;
}

.vnu-rt-edit-btn {
    width: 100%;
    padding: 6px 0;
    background: #FFFFFF;
    color: #17221C;
    border: 1px solid rgba(23, 34, 28, 0.40);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.vnu-rt-card:hover .vnu-rt-edit-btn {
    opacity: 1;
}

.vnu-rt-edit-btn:hover {
    background: #F6F6F6;
}

/* ===== Services Tab ===== */
#tab-services {
    display: flex;
    flex-direction: column;
}

.vnu-svc-layout {
    display: flex;
    align-items: stretch;
    width: 100%;
    flex: 1;
}

.vnu-svc-sidebar {
    flex: 0 0 28%;
    max-width: 360px;
    min-width: 220px;
    padding: 0 20px 16px 0;
}

.vnu-svc-divider {
    width: 1px;
    background: #E2E5E4;
    flex-shrink: 0;
    align-self: stretch;
    margin-right: 20px;
}

.vnu-svc-content {
    flex: 1;
    min-width: 0;
}

.vnu-svc-field {
    margin-bottom: 12px;
}

.vnu-svc-label {
    display: block;
    font-size: 14px;
    /* Figma style_1737266c: Semibold 14 */
    font-weight: 600;
    color: #17221C;
    margin-bottom: 6px;
}

.vnu-svc-select-wrap {
    position: relative;
}

.vnu-svc-field {
    position: relative;
}

.vnu-svc-select {
    width: 100%;
    height: 42px;
    padding: 0 36px 0 12px;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    font-size: 14px;
    color: #17221C;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: inherit;
}

.vnu-svc-select:focus {
    border-color: #17221C;
}

.vnu-svc-select-arrow {
    position: absolute;
    right: 10px;
    top: 10px;
    pointer-events: none;
}

.vnu-svc-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    font-size: 14px;
    color: #17221C;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.vnu-svc-input:focus {
    border-color: #17221C;
}

.vnu-svc-textarea {
    width: 100%;
    height: 72px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    font-size: 14px;
    color: #17221C;
    outline: none;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

.vnu-svc-textarea:focus {
    border-color: #17221C;
}

.vnu-svc-textarea::placeholder,
.vnu-svc-input::placeholder {
    color: #647272;
}

.vnu-svc-add-btn {
    width: 100%;
    height: 42px;
    background: #17221C;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.vnu-svc-add-btn:hover {
    background: #2d3e35;
}

.vnu-svc-form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vnu-svc-form-actions .vnu-svc-add-btn { margin-top: 0; }

/* Table */
.vnu-svc-table-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.vnu-svc-table-wrap {
    background: #F6F6F6;
    border-radius: 16px;
    padding: 12px;
    overflow: hidden;
}

.vnu-svc-table-header {
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-bottom: 6px;
}

.vnu-svc-row {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 12px;
    min-height: 42px;
    margin-bottom: 4px;
}

.vnu-svc-row:last-child {
    margin-bottom: 0;
}

.vnu-svc-col-name {
    flex: 0 0 30%;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 1;
}

.vnu-svc-col-desc {
    flex: 1;
    font-size: 14px;
    color: #17221C;
    line-height: 1;
    padding: 0 12px;
}

.vnu-svc-col-type {
    flex: 0 0 20%;
    font-size: 14px;
    color: #17221C;
    line-height: 1;
}

/* Tab "Đối tượng ưu tiên": cột ĐIỂM là số nên căn giữa cho dễ nhìn/so sánh */
.vnu-svc-col-type--center {
    text-align: center;
}

.vnu-svc-col-action {
    flex: 0 0 32px;
    display: flex;
    justify-content: flex-end;
}
/* Tab "Đối tượng ưu tiên": có thêm nút Sửa cạnh nút Xoá → cần rộng hơn 1 nút */
.vnu-svc-col-action--dual {
    flex: 0 0 68px;
    gap: 4px;
}

.vnu-svc-table-header .vnu-svc-col-name,
.vnu-svc-table-header .vnu-svc-col-desc,
.vnu-svc-table-header .vnu-svc-col-type {
    font-size: 12px;
    font-weight: 700;
    color: #B3B3B3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vnu-svc-table-header .vnu-svc-col-name {
    font-weight: 700;
}

.vnu-svc-delete-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* Figma: icon xoá hiện thường trực (đã mờ 40% trong SVG) */
    transition: background 0.12s;
}

.vnu-svc-delete-btn:hover {
    background: #fee2e2;
    opacity: 1;
}

.vnu-svc-delete-btn:hover svg path {
    stroke: #e74c3c;
    stroke-opacity: 1;
}

.vnu-svc-empty {
    font-size: 14px;
    color: #B0B0B0;
    text-align: center;
    padding: 24px 0;
}

.vnu-svc-row.is-confirming {
    background: #fff8f8;
    border-color: #f5c6c6;
}

.vnu-svc-confirm {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-size: 13px;
    color: #17221C;
}

.vnu-svc-confirm-text {
    flex: 1;
}

.vnu-svc-confirm-yes {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.vnu-svc-confirm-yes:hover {
    background: #c0392b;
}

.vnu-svc-confirm-no {
    background: #F0F0F0;
    color: #17221C;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}

.vnu-svc-confirm-no:hover {
    background: #e0e0e0;
}

/* Province + Ward on same row (inside .vnu-modal-field, no extra padding) */
.vnu-modal-location-row {
    display: flex;
    gap: 10px;
}

.vnu-modal-field-half {
    flex: 1;
    min-width: 0;
}

.vnu-modal-field-half .vnu-modal-label {
    display: block;
    margin-bottom: 6px;
}

.vnu-modal-field-half .select2-container {
    width: 100% !important;
}

/* Select2 shared styling — applies to ALL .vnu-modal-overlay modals */
.vnu-modal-overlay .select2-container {
    width: 100% !important;
}

.vnu-modal-overlay .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.vnu-modal-overlay .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    color: #17221C;
    font-size: 14px;
    padding: 0;
}

.vnu-modal-overlay .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8D9A9A;
}

.vnu-modal-overlay .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
    right: 10px;
}

.vnu-modal-overlay .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #17221C;
    background: #fff;
}

.vnu-modal-overlay .select2-dropdown {
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.vnu-modal-overlay .select2-results__option {
    font-size: 14px;
    color: #17221C;
    padding: 8px 14px;
}

.vnu-modal-overlay .select2-results__option--highlighted {
    background: #F0FAF4 !important;
    color: #17221C !important;
}

.vnu-modal-overlay .select2-search--dropdown .select2-search__field {
    border: 1px solid #E2E5E4;
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 10px;
}

/* ===== Cascader component ===== */
.cascader {
    display: block;
    position: relative;
    width: 100%;
}

.cascader>.form-control {
    cursor: pointer;
    user-select: none;
}

.cascader-menu {
    position: absolute;
    z-index: 999;
    margin-top: 5px;
}

.cascader-list {
    background: #ffffff;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #ced4da;
    margin: 0;
    padding: 0;
    min-width: 150px;
    list-style-type: none;
}

.cascader-list>li {
    height: 36px;
    line-height: 36px;
    cursor: pointer;
}

.cascader-list>li:hover {
    background: #0879FB;
    color: #ffffff;
}

/* ===== Pricing Tab ===== */
.vnu-pricing-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 0;
}

.vnu-pricing-col {
    flex: 1;
    min-width: 0;
    padding: 0 24px;
}

.vnu-pricing-col:first-child {
    padding-left: 0;
}

.vnu-pricing-col:last-child {
    padding-right: 0;
}

.vnu-pricing-divider {
    width: 1px;
    align-self: stretch;
    background: #E2E5E4;
    flex-shrink: 0;
}

.vnu-pricing-col-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.vnu-pricing-item {
    margin-bottom: 16px;
}

.vnu-pricing-item-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    margin-bottom: 6px;
}

.vnu-pricing-item-row {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 12px;
    height: 42px;
    gap: 8px;
    transition: border-color 0.15s;
}

.vnu-pricing-item-row:focus-within {
    border-color: #17221C;
}

.vnu-pricing-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    font-family: inherit;
    min-width: 0;
}

.vnu-pricing-input::placeholder {
    color: #647272;
}

/* Toggle switch */
.vnu-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

.vnu-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.vnu-toggle-slider {
    position: absolute;
    inset: 0;
    background: #C5C7C5;
    border-radius: 13px;
    transition: background 0.2s;
}

.vnu-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: 1px;
    top: 1px;
    background: #FFFFFF;
    transition: transform 0.2s;
}

.vnu-toggle-input:checked+.vnu-toggle-slider {
    background: #4CD681;
}

.vnu-toggle-input:checked+.vnu-toggle-slider::before {
    transform: translateX(16px);
}

.vnu-pricing-empty {
    font-size: 13px;
    color: #B0B0B0;
    padding: 8px 0;
}

.vnu-pricing-gender {
    font-size: 11px;
    font-weight: 400;
    color: rgba(23, 34, 28, 0.5);
    margin-left: 2px;
}

/* ── Thiết lập loại phòng modal ─────────────────────────────── */
#rt-tooltip {
    position: fixed;
    background: #17221C;
    color: #FEFFFD;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    display: none;
}

.vnu-modal.vnu-modal-roomtype {
    width: 750px;
    max-width: 95vw;
    max-height: 90vh;
    padding: 32px;
    border-radius: 16px;
    background: #FEFFFD;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.vnu-modal-roomtype-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.vnu-modal-roomtype-title {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 1;
}

.vnu-modal-roomtype-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.vnu-rt-left {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.vnu-rt-section-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    flex-shrink: 0;
    line-height: 1;
}

.vnu-rt-mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    overflow-y: auto;
    align-content: start;
    flex: 1;
    min-height: 0;
}

.vnu-rt-cell {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    background: #A0E1E1;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: #2B6B73;
    box-sizing: border-box;
    flex-shrink: 0;
    user-select: none;
}

.vnu-rt-cell.assigned {
    background: #F0FBFA;
    border: 1px dashed #A0E1E1;
    color: #2B6B73;
}

.vnu-rt-divider {
    width: 1px;
    background: #E2E5E4;
    flex-shrink: 0;
    margin: 0 20px;
    align-self: stretch;
}

.vnu-rt-right {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vnu-rt-tier {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.vnu-rt-tier-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    flex-shrink: 0;
    line-height: 1.2;
}

.vnu-rt-tier-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}

.vnu-rt-plus-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #F0FBFA;
    border: 1px dashed #A0E1E1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.vnu-rt-tier-cell {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    background: #A0E1E1;
    flex-shrink: 0;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: #2B6B73;
    box-sizing: border-box;
    user-select: none;
}

.vnu-rt-tier-cell-empty {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    background: #FEFFFD;
    border: 1px dashed #A0E1E1;
    flex-shrink: 0;
    box-sizing: border-box;
}

.vnu-rt-tier.drag-over .vnu-rt-tier-cells {
    outline: 2px dashed #34A1A6;
    border-radius: 6px;
}

.vnu-modal-roomtype-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    flex-shrink: 0;
    padding-top: 16px;
    border-top: 1px solid #E2E5E4;
}

.vnu-btn-rt-cancel {
    padding: 14px 48px;
    border-radius: 8px;
    border: none;
    background: #F0F0F0;
    color: #17221C;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.vnu-btn-rt-cancel:hover {
    background: #e0e0e0;
}

.vnu-btn-rt-confirm {
    padding: 14px 48px;
    border-radius: 8px;
    border: none;
    background: #17221C;
    color: #FEFFFD;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.vnu-btn-rt-confirm:hover {
    background: #2a3d34;
}

/* ── Modal: Thiết lập diện tích ───────────────────────────── */
#area-tooltip {
    position: fixed;
    background: #17221C;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    display: none;
    z-index: 9999;
    white-space: nowrap;
}

.vnu-modal.vnu-modal-area {
    width: 750px;
    max-width: 95vw;
    max-height: 90vh;
    padding: 32px;
    border-radius: 16px;
    background: #FEFFFD;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.vnu-modal-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.vnu-modal-area-title {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 1;
}

.vnu-modal-area-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.vnu-area-left {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.vnu-area-section-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    flex-shrink: 0;
    line-height: 1;
}

.vnu-area-mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    overflow-y: auto;
    align-content: start;
    flex: 1;
    min-height: 0;
}

.vnu-area-cell {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    background: #A0E1E1;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: #2B6B73;
    box-sizing: border-box;
    flex-shrink: 0;
    user-select: none;
}

.vnu-area-cell.assigned {
    background: #F0FBFA;
    border: 1px dashed #A0E1E1;
    color: #2B6B73;
}

.vnu-area-cell.selected {
    outline: 2px solid #34A1A6;
    outline-offset: -1px;
}

.vnu-area-divider {
    width: 1px;
    background: #E2E5E4;
    flex-shrink: 0;
    margin: 0 20px;
    align-self: stretch;
}

.vnu-area-right {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vnu-area-tier {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.vnu-area-tier-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    flex-shrink: 0;
    line-height: 1.2;
}

.vnu-area-tier-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}

.vnu-area-plus-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #F0FBFA;
    border: 1px dashed #A0E1E1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.vnu-area-tier-cell {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    background: #A0E1E1;
    flex-shrink: 0;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: #2B6B73;
    box-sizing: border-box;
    user-select: none;
}

.vnu-area-tier-cell-empty {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    background: #FEFFFD;
    border: 1px dashed #A0E1E1;
    flex-shrink: 0;
    box-sizing: border-box;
}

.vnu-area-tier.drag-over .vnu-area-tier-cells {
    outline: 2px dashed #34A1A6;
    border-radius: 6px;
}

.vnu-modal-area-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    flex-shrink: 0;
    padding-top: 16px;
    border-top: 1px solid #E2E5E4;
}

.vnu-btn-area-cancel {
    padding: 14px 48px;
    border-radius: 8px;
    border: none;
    background: #F0F0F0;
    color: #17221C;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.vnu-btn-area-cancel:hover {
    background: #e0e0e0;
}

.vnu-btn-area-confirm {
    padding: 14px 48px;
    border-radius: 8px;
    border: none;
    background: #17221C;
    color: #FEFFFD;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}

.vnu-btn-area-confirm:hover {
    background: #2a3d34;
}

.vnu-area-add-tier-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.vnu-area-tier-input {
    flex: 1;
    height: 36px;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    color: #17221C;
    outline: none;
    background: #FEFFFD;
}

.vnu-area-tier-input:focus {
    border-color: #34A1A6;
}

.vnu-area-tier-add-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    border: none;
    background: #17221C;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.vnu-area-tier-add-btn:hover {
    background: #2a3d34;
}

.vnu-area-tiers-empty {
    font-size: 13px;
    color: #9CA3AF;
    text-align: center;
    padding: 20px 0;
}

/* ================================================================
   QUẢN LÝ PHÒNG PAGE  (.qlp-*)
   ================================================================ */

.qlp-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Top row: 614 : 250 : 250 : 250 = 2.456 : 1 : 1 : 1 */
.qlp-top-row {
    display: grid;
    grid-template-columns: 2.456fr 1fr 1fr 1fr;
    gap: 10px;
}

/* Bottom row: 874 : 510 = 1.714 : 1 */
.qlp-bottom-row {
    display: grid;
    grid-template-columns: 1.714fr 1fr;
    gap: 10px;
    align-items: start;
}

/* ── Shared section label ─────────────────────────────────────── */
.qlp-section-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(23, 34, 28, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 16px;
    margin: 0;
}

/* Figma: label trên card thống kê + card tòa màu đậm #17221C (#774:5944, #774:5909) */
.qlp-summary-card .qlp-section-label,
.qlp-building-card .qlp-section-label {
    color: #17221C;
}

/* ── Summary card ─────────────────────────────────────────────── */
.qlp-summary-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 236px;
}

.qlp-progress {
    display: flex;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    gap: 4px;
    flex-shrink: 0;
}

.qlp-pb {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.qlp-pb-male {
    background: #43B4FF;
    border-radius: 16px 4px 4px 16px;
}

.qlp-pb-female {
    background: #4CD681;
    border-radius: 4px;
}

.qlp-pb-locked {
    background: #FCAF00;
    border-radius: 4px;
}

.qlp-pb-empty {
    background: #F0F0F0;
    border-radius: 4px 16px 16px 4px;
    color: #647272;
    font-size: 13px;
}

.qlp-summary-stats {
    display: flex;
    align-items: center;
    flex: 1;
}

.qlp-total {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
}

.qlp-total-num {
    font-size: 42px;
    font-weight: 700;
    color: #17221C;
    line-height: 46px;
}

.qlp-total-cap {
    font-size: 18px;
    font-weight: 400;
    color: #647272;
    margin-left: 4px;
}

.qlp-stat-list {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 0;
}

.qlp-stat-sep {
    width: 2px;
    height: 37px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 10px;
}

.qlp-sep-blue {
    background: #43B4FF;
}

.qlp-sep-green {
    background: #33CC6D;
}

.qlp-sep-yellow {
    background: #FCAF00;
}

.qlp-sep-grey {
    background: #EAEAEA;
}

.qlp-stat-item {
    margin-right: 20px;
    flex-shrink: 0;
}

.qlp-stat-label {
    font-size: 14px;
    font-weight: 400;
    color: #647272;
    line-height: 22px;
    margin: 0;
}

.qlp-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    line-height: 22px;
    margin: 0;
}

/* ── Building stat cards ──────────────────────────────────────── */
.qlp-building-card {
    background: #FFFFFF;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.07);
    min-height: 236px;
    display: flex;
    flex-direction: column;
}

.qlp-bld-pct {
    font-size: 24px;
    font-weight: 700;
    color: #17221C;
    margin: 8px 0 12px;
    line-height: normal;
}

.qlp-bld-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 22px;
    margin-bottom: 4px;
    /* Figma: các dòng cách nhau 26px (22 + 4) */
}

.qlp-bld-key {
    font-size: 14px;
    color: #647272;
}

.qlp-bld-val {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

.qlp-bld-total {
    color: #647272;
    font-weight: 400;
}

.qlp-bld-pct-sm {
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    /* Figma ts6: Regular 14, cùng màu giá trị */
    margin-left: 2px;
}

.qlp-bld-progress-wrap {
    height: 12px;
    background: #F0F0F0;
    border-radius: 6px;
    margin: 8px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 2px;
}

.qlp-bld-bar-blue {
    background: #43B4FF;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.qlp-bld-bar-green {
    background: #4CD681;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.qlp-bld-bar-yellow {
    background: #FCAF00;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Room list card ───────────────────────────────────────────── */
/* Figma: bảng #F6F6F6 cách mép card 10px, cụm header cách đỉnh 16px */
.qlp-room-list-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 16px 10px 10px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 640px;
}

/* Figma: label (indent 20) + search + Lọc cách nhau 14px;
   nút Lọc kết thúc tại 377+61, chừa 436px tới mép phải; cách bảng dưới 14px */
.qlp-list-header {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    height: 32px;
    padding: 0 10px;
}

.qlp-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Figma #774:5099: 204×32, bo 6, nền #F0F0F0, không viền */
.qlp-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F0F0F0;
    border: none;
    border-radius: 6px;
    padding: 0 6px 0 6px;
    height: 32px;
    width: 204px;
}

.qlp-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #17221C;
    width: 100%;
    font-family: inherit;
}

.qlp-search-box input::placeholder {
    color: #899F9F;
}

/* Figma #774:5101: 61×32, bo 6, nền #00803D */
.qlp-filter-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 10px 0 6px;
    background: #00803D;
    color: #FEFFFD;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.qlp-filter-btn:hover {
    background: #026b36;
}

/* Table wrapper */
.qlp-table-wrap {
    background: #F6F6F6;
    border-radius: 16px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Scrollable table body */
.qlp-table-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px 10px;
}

.qlp-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #C9C9C9 #F6F6F6;
}

.qlp-table-scroll::-webkit-scrollbar {
    width: 6px;
}

.qlp-table-scroll::-webkit-scrollbar-track {
    background: #F6F6F6;
    border-radius: 16px;
}

.qlp-table-scroll::-webkit-scrollbar-thumb {
    background: #C9C9C9;
    border-radius: 3px;
}

.qlp-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #AEAEAE;
}

/* Table header */
.qlp-table-header {
    display: grid;
    grid-template-columns: 28px 1fr 1.3fr 1.4fr 0.85fr 1.6fr 32px;
    align-items: center;
    padding: 0 16px 0 10px;
    height: 38px;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F6F6F6;
}

.qlp-th {
    font-size: 12px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.qlp-th-check,
.qlp-th-more {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Table rows */
.qlp-table-row {
    display: grid;
    grid-template-columns: 28px 1fr 1.3fr 1.4fr 0.85fr 1.6fr 32px;
    align-items: center;
    padding: 0 16px 0 10px;
    height: 42px;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    margin: 0 0 4px;
    cursor: pointer;
    transition: background 0.12s;
}

.qlp-table-row:hover {
    background: #F5FFFC;
}

.qlp-td {
    font-size: 14px;
    color: #17221C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qlp-td-check,
.qlp-td-action {
    display: flex;
    align-items: center;
    justify-content: center;
}

.qlp-td-room {
    display: flex;
    align-items: center;
    gap: 5px;
}

.qlp-room-num {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

.qlp-gender-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.qlp-td-status {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
}

.qlp-checkbox {
    accent-color: #038141;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Occupancy dots */
.qlp-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.qlp-dot {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Status — Figma #795:6207+: text màu trơn, không nền */
.qlp-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.qlp-badge-partial {
    color: #008855;
}

.qlp-badge-full {
    color: #3D739D;
}

.qlp-badge-locked {
    color: #BF570C;
}

.qlp-badge-maintenance {
    color: #CE204E;
}

.qlp-edit-btn {
    display: inline-flex;
    align-items: center;
    color: #647272;
    opacity: 0.7;
    transition: opacity 0.12s;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.qlp-edit-btn:hover {
    opacity: 1;
}

.qlp-del-btn svg {
    fill: #ED3E09 !important;
}

.qlp-empty-row {
    padding: 20px;
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
}

.qlp-scroll-sentinel {
    height: 20px;
}

.qlp-scroll-loading {
    text-align: center;
    padding: 8px 0 4px;
    font-size: 13px;
    color: #899F9F;
}

.qlp-scroll-loading--end {
    color: #C8D8CD;
}

/* ── Room types card ──────────────────────────────────────────── */
.qlp-room-types-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 26px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    display: flex;
    flex-direction: column;
    height: 640px;
    overflow: hidden;
}

.qlp-rt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.qlp-rt-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qlp-rt-all {
    font-size: 12px;
    font-weight: 600;
    color: #17221C;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}

.qlp-rt-all:hover {
    color: #038141;
}

/* Figma #941:216: header 462×34, TÊN LOẠI trái (inset 30) — SỐ LƯỢNG phải (inset 24) */
.qlp-rt-bg {
    background: #F6F6F6;
    border-radius: 6px;
    padding: 0 24px 0 30px;
    height: 34px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.qlp-rt-table-header {
    display: flex;
    justify-content: space-between;
    flex: 1;
    /* chiếm hết bề ngang để space-between đẩy 2 cột về 2 đầu */
}

.qlp-rt-th {
    font-size: 12px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.qlp-rt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.qlp-rt-idx {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    min-width: 14px;
}

.qlp-rt-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.qlp-rt-thumb-ph {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    flex-shrink: 0;
}

.qlp-rt-info {
    flex: 1;
    min-width: 0;
}

.qlp-rt-name {
    font-size: 14px;
    color: #17221C;
    margin: 0;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qlp-rt-price {
    font-size: 14px;
    color: #686F6A;
    margin: 0;
    line-height: 22px;
}

.qlp-rt-count {
    font-size: 14px;
    color: #17221C;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.qlp-rt-count strong {
    font-weight: 600;
}

.qlp-rt-pct {
    color: #17221C;
    /* Figma ts4: Regular cùng màu, chỉ khác weight */
    font-weight: 400;
}

.qlp-rt-divider {
    height: 1px;
    background: #F6F6F6;
    /* Figma #934:173 */
    margin: 0;
}

.qlp-rt-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 12px;
}

.qlp-rt-list {
    scrollbar-width: thin;
    scrollbar-color: #C9C9C9 #F6F6F6;
}

.qlp-rt-list::-webkit-scrollbar {
    width: 6px;
}

.qlp-rt-list::-webkit-scrollbar-track {
    background: #F6F6F6;
    border-radius: 16px;
}

.qlp-rt-list::-webkit-scrollbar-thumb {
    background: #C9C9C9;
    border-radius: 3px;
}

.qlp-rt-list::-webkit-scrollbar-thumb:hover {
    background: #AEAEAE;
}

.qlp-rt-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #D0D0D0;
    color: #17221C;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.qlp-rt-add-btn:hover {
    background: #F0F0F0;
    border-color: #038141;
    color: #038141;
    text-decoration: none;
    color: #17221C;
}

/* =====================================================
   Admin Management Pages  (users, roles)
   ===================================================== */

/* Page wrapper */
.adm-page {
    padding-bottom: 40px;
}

/* Override button colors for admin pages */
.adm-page .vnu-btn-filter,
.adm-page .vnu-btn-add-acc {
    background: #4CD681;
    color: #17221C;
}

.adm-page .vnu-btn-filter:hover,
.adm-page .vnu-btn-add-acc:hover {
    background: #38C46A;
    color: #17221C;
    transform: translateY(-1px);
}

/* Page header */
.adm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 14px;
    flex-wrap: wrap;
}

.adm-page-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.adm-page-title {
    font-size: 22px;
    font-weight: 700;
    color: #17221C;
    margin: 0;
    letter-spacing: -0.01em;
}

.adm-count-badge {
    background: #E0EEE1;
    color: #008855;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 50px;
    white-space: nowrap;
}

.adm-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Card */
.adm-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Table */
.adm-table {
    width: 100%;
    border-collapse: collapse;
}

.adm-table thead tr {
    background: #F6F6F6;
}

.adm-table th {
    padding: 12px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.adm-table td {
    padding: 14px 20px;
    font-size: 14px;
    color: #17221C;
    border-bottom: 1px solid #F0F4F0;
    vertical-align: middle;
}

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

.adm-table tbody tr:hover td {
    background: #FAFCFA;
}

/* User cell with avatar */
.adm-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.adm-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 1.35;
}

.adm-user-sub {
    font-size: 12px;
    color: #899F9F;
    line-height: 1.35;
    margin-top: 1px;
}

/* Avatars */
.adm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0;
}

.adm-av-0 {
    background: #17221C;
}

.adm-av-1 {
    background: #038141;
}

.adm-av-2 {
    background: #1565C0;
}

.adm-av-3 {
    background: #7B1FA2;
}

.adm-av-4 {
    background: #C62828;
}

.adm-av-5 {
    background: #E65100;
}

/* Role badge */
.adm-role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #E8F5F0;
    color: #038141;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}

/* Action icon buttons */
.adm-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    flex-shrink: 0;
}

.adm-btn-icon:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.adm-btn-edit {
    background: #EBF4FF;
    color: #2980B9;
}

.adm-btn-edit:hover {
    background: #2980B9;
    color: #fff;
}

.adm-btn-del {
    background: #FEF0EE;
    color: #C0392B;
}

.adm-btn-del:hover {
    background: #C0392B;
    color: #fff;
}

.adm-td-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Pagination */
.adm-pagination {
    padding: 16px 20px;
    border-top: 1px solid #F0F4F0;
}

/* Empty state */
.adm-empty-row {
    text-align: center;
    padding: 48px;
    color: #B3B3B3;
    font-size: 14px;
}

/* ---- Form pages ---- */
.adm-form-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.adm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 2px solid #D0D0D0;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #647272;
    text-decoration: none;
    transition: all 0.15s;
    flex-shrink: 0;
}

.adm-back-btn:hover {
    border-color: #17221C;
    color: #17221C;
    text-decoration: none;
}

.adm-form-title {
    font-size: 22px;
    font-weight: 700;
    color: #17221C;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Form card */
.adm-form-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    padding: 28px;
    margin-bottom: 20px;
}

.adm-form-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 16px;
}

.adm-form-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.adm-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.adm-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.adm-form-divider {
    height: 1px;
    background: #F0F4F0;
    margin: 20px 0;
}

.adm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adm-label {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
}

.adm-label span {
    font-weight: 400;
    color: #B3B3B3;
    font-size: 11px;
    margin-left: 4px;
}

.adm-label span.adm-required {
    color: #CE204E;
    font-weight: 600;
}

.adm-input,
.adm-select,
.adm-textarea {
    border: 2px solid #E2E5E4;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #17221C;
    background: #FEFFFD;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.adm-input,
.adm-select {
    height: 44px;
}

.adm-textarea {
    padding: 12px 14px;
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
}

.adm-input:focus,
.adm-select:focus,
.adm-textarea:focus {
    border-color: #17221C;
}

.adm-input::placeholder,
.adm-textarea::placeholder {
    color: #C0CCCC;
}

.adm-input.is-invalid,
.adm-select.is-invalid,
.adm-textarea.is-invalid {
    border-color: #E74C3C;
    background: #fff8f8;
}

.adm-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23647272' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    background-color: #FEFFFD;
    cursor: pointer;
}

.adm-error-msg {
    font-size: 12px;
    color: #E74C3C;
    margin: 2px 0 0;
}

.adm-field-hint {
    display: block;
    font-size: 12px;
    color: #647272;
    margin: 4px 0 0;
}

/* Multi-select (roles) */
.adm-select-multiple {
    height: auto !important;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 12px;
}

/* Form footer */
.adm-form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #F0F2F1;
    margin-top: 8px;
}

.adm-btn-save {
    height: 44px;
    flex: 1;
    max-width: 200px;
    padding: 0 28px;
    background: #17221C;
    color: #FEFFFD;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.adm-btn-save:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

.adm-btn-cancel {
    height: 44px;
    flex: 1;
    max-width: 200px;
    padding: 0 28px;
    background: #E5E5E5;
    color: #17221C;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    font-family: inherit;
}

.adm-btn-cancel:hover {
    background: #D0D0D0;
    color: #17221C;
    text-decoration: none;
}

/* Nút "Chọn ảnh" thay cho input[type=file] mặc định (không style được đồng bộ
   giữa các trình duyệt) — input thật ẩn qua .u-none, label này kích hoạt nó. */
.adm-btn-avatar-upload {
    height: 40px;
    padding: 0 20px;
    background: #FEFFFD;
    color: #17221C;
    border: 2px solid #E2E5E4;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
    font-family: inherit;
}

.adm-btn-avatar-upload:hover {
    border-color: #17221C;
}

/* ---- Permission section ---- */
.adm-perm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.adm-perm-title {
    font-size: 15px;
    font-weight: 700;
    color: #17221C;
    margin: 0;
}

.adm-perm-all-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #647272;
}

.adm-perm-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
}

.adm-perm-table th {
    background: #F6F6F6;
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.adm-perm-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #F0F4F0;
    vertical-align: top;
}

.adm-perm-table tbody tr:last-child td {
    border-bottom: none;
}

.adm-perm-cat-name {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    white-space: nowrap;
    padding-top: 4px;
    min-width: 130px;
}

.adm-perm-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
}

.adm-perm-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #647272;
    cursor: pointer;
    padding: 3px 0;
}

.adm-perm-switch input[type=checkbox] {
    cursor: pointer;
    width: 14px;
    height: 14px;
    accent-color: #038141;
}

.adm-perm-switch-all {
    font-weight: 600;
    color: #17221C;
    border-right: 1px solid #E2E5E4;
    padding-right: 14px;
    margin-right: 4px;
}

@media (max-width: 768px) {
    .adm-form-grid-2 {
        grid-template-columns: 1fr;
    }

    .adm-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Select2 override — Vai trò field */
.adm-roles-select+.select2-container {
    width: 100% !important;
}

.adm-roles-select+.select2-container .select2-selection--multiple {
    border: 2px solid #E2E5E4;
    border-radius: 12px;
    min-height: 44px;
    padding: 4px 8px;
    background: #FEFFFD;
    cursor: pointer;
    transition: border-color 0.15s;
}

.adm-roles-select+.select2-container--focus .select2-selection--multiple,
.adm-roles-select+.select2-container--open .select2-selection--multiple {
    border-color: #17221C;
    outline: none;
    box-shadow: none;
}

.adm-roles-select+.select2-container .select2-selection--multiple .select2-selection__choice {
    background: #E8F5F0;
    border: none;
    border-radius: 20px;
    color: #038141;
    font-size: 12px;
    font-weight: 600;
    padding: 0 10px 0 8px;
    height: 26px;
    line-height: 26px;
    margin: 3px 4px 3px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.adm-roles-select+.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #038141;
    font-size: 14px;
    margin-right: 2px;
    float: none;
    background: none;
    border: none;
}

.adm-roles-select+.select2-container .select2-selection__placeholder {
    color: #C0CCCC;
    font-size: 14px;
    line-height: 34px;
}

.select2-dropdown {
    border: 2px solid #17221C;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(17, 59, 100, 0.1);
    overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}

.select2-results__option {
    padding: 9px 14px;
    font-size: 14px;
    color: #17221C;
}

.select2-results__option--highlighted {
    background: #E8F5F0 !important;
    color: #038141 !important;
}

.select2-results__option[aria-selected=true] {
    background: #F6F6F6;
    color: #B3B3B3;
}

/* ========================================
   VNU Pagination
   ======================================== */
.vnu-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vnu-pager-info {
    font-size: 13px;
    color: #899F9F;
    font-weight: 500;
}

.vnu-pager-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vnu-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.vnu-pager-btn:hover {
    background: #E0EEE1;
    color: #17221C;
    text-decoration: none;
}

.vnu-pager-btn--active {
    background: #17221C;
    color: #FEFFFD;
    cursor: default;
}

.vnu-pager-btn--active:hover {
    background: #17221C;
    color: #FEFFFD;
}

.vnu-pager-btn--disabled {
    color: #C8D4D4;
    cursor: not-allowed;
    background: transparent;
}

.vnu-pager-btn--disabled:hover {
    background: transparent;
    color: #C8D4D4;
}

.vnu-pager-btn--dots {
    color: #B3B3B3;
    cursor: default;
    letter-spacing: 0.1em;
}

.vnu-pager-btn--dots:hover {
    background: transparent;
    color: #B3B3B3;
}


/* ========================================
   Quản lý Ngoại trú (nt-)
   ======================================== */

.nt-page {
    padding-bottom: 40px;
}

/* --- Stat cards --- */
.nt-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.nt-stat-card {
    background: #FEFFFD;
    border-radius: 20px;
    padding: 22px 22px 18px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
}

.nt-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.nt-stat-big {
    font-size: 36px;
    font-weight: 800;
    color: #17221C;
    line-height: 1.1;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.nt-stat-subrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    gap: 6px;
}

.nt-stat-sublabel {
    font-size: 12px;
    color: #647272;
    flex: 1;
}

.nt-stat-subval {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.nt-val-green {
    color: #038141;
}

.nt-val-cyan {
    color: #0891B2;
}

.nt-val-orange {
    color: #EA580C;
}

.nt-progress-bg {
    height: 8px;
    background: #E8F0EC;
    border-radius: 50px;
    overflow: hidden;
}

.nt-progress-fill {
    height: 100%;
    border-radius: 50px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.nt-fill-green {
    background: #4CD681;
}

.nt-fill-cyan {
    background: #06B6D4;
}

.nt-fill-orange {
    background: #FB923C;
}

/* --- Main layout --- */
.nt-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
    align-items: start;
}

/* --- Card wrapper --- */
.nt-card {
    background: #FEFFFD;
    border-radius: 20px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    overflow: hidden;
}

/* --- Card header --- */
.nt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    gap: 12px;
    flex-wrap: wrap;
}

.nt-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #17221C;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nt-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Table --- */
.nt-table-outer {
    overflow-x: auto;
}

.nt-table-head {
    display: grid;
    grid-template-columns: 100px 1fr 80px 130px 100px 110px 44px;
    background: #F6F6F6;
    padding: 0 12px;
}

.nt-th {
    padding: 10px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.nt-table-body {
    min-height: 60px;
}

.nt-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px 130px 100px 110px 44px;
    padding: 0 12px;
    border-bottom: 1px solid #F0F4F0;
    align-items: center;
    transition: background 0.12s;
}

.nt-row:last-child {
    border-bottom: none;
}

.nt-row:hover {
    background: #FAFCFA;
}

.nt-td {
    padding: 12px 8px;
    font-size: 13px;
    color: #17221C;
}

.nt-td-code {
    font-size: 12px;
    color: #899F9F;
    font-family: monospace;
}

.nt-td-student {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nt-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.nt-name {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    line-height: 1.3;
}

.nt-sub {
    font-size: 11px;
    color: #899F9F;
    margin-top: 1px;
}

.nt-td-ward {
    font-size: 12px;
    color: #647272;
}

/* Status badges */
.nt-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.nt-badge-cyan {
    background: #E0F7FA;
    color: #0097A7;
}

.nt-badge-green {
    background: #E8F5E9;
    color: #2E7D32;
}

.nt-badge-navy {
    background: #EEF2FF;
    color: #3730A3;
}

.nt-badge-gray {
    background: #F0F0F0;
    color: #9E9E9E;
}

/* C06 status */
.nt-c06 {
    font-size: 12px;
    font-weight: 600;
}

.nt-c06-ok {
    color: #2E7D32;
}

.nt-c06-sent {
    color: #0891B2;
}

.nt-c06-wait {
    color: #92400E;
}

.nt-c06-none {
    color: #B3B3B3;
}

/* Action button */
.nt-td-action {
    display: flex;
    justify-content: center;
}

.nt-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #899F9F;
    text-decoration: none;
    transition: all 0.15s;
    background: transparent;
}

.nt-icon-btn:hover {
    background: #E8F5F0;
    color: #038141;
}

.nt-empty {
    text-align: center;
    padding: 48px;
    color: #B3B3B3;
    font-size: 14px;
}

.nt-pagination {
    padding: 14px 20px;
    border-top: 1px solid #F0F4F0;
}

/* --- Right: mật độ sinh viên --- */
.nt-density-header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid #F0F4F0;
}

.nt-density-table-head {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    background: #F6F6F6;
    gap: 0;
}

.nt-dth {
    font-size: 10px;
    font-weight: 700;
    color: #B3B3B3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex: 1;
}

.nt-dth:first-child {
    flex: 0 0 32px;
}

.nt-dth-right {
    text-align: right;
    flex: 0 0 90px;
}

.nt-density-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 20px;
    gap: 0;
    border-bottom: 1px solid #F5F7F5;
}

.nt-density-row:last-child {
    border-bottom: none;
}

.nt-density-row:hover {
    background: #FAFCFA;
}

.nt-drank {
    flex: 0 0 32px;
    font-size: 12px;
    font-weight: 700;
    color: #B3B3B3;
    padding-top: 1px;
}

.nt-daddr {
    flex: 1;
    font-size: 12px;
    color: #17221C;
    line-height: 1.5;
    padding-right: 8px;
}

.nt-dcnt {
    flex: 0 0 90px;
    text-align: right;
}

.nt-dcnt-val {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #038141;
}

.nt-dcnt-pct {
    display: block;
    font-size: 11px;
    color: #899F9F;
}

.nt-density-empty {
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: #B3B3B3;
}

/* Responsive */
@media (max-width: 1200px) {
    .nt-stat-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .nt-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .nt-stat-row {
        grid-template-columns: 1fr;
    }
}

/* ── Accommodation detail: Giấy tờ liên quan ──────────────── */
.vnu-detail-docs-empty {
    font-size: 13px;
    color: #B3B3B3;
    padding: 8px 0;
}

.vnu-detail-docs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vnu-detail-doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #F4F8F6;
    border-radius: 8px;
    border: 1px solid #E0ECEA;
}

.vnu-detail-doc-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #E6EFEC;
    flex-shrink: 0;
}

.vnu-doc-pdf {
    color: #D32F2F;
    font-size: 14px;
}

.vnu-doc-word {
    color: #1565C0;
    font-size: 14px;
}

.vnu-doc-img {
    color: #6A1B9A;
    font-size: 14px;
}

.vnu-doc-default {
    color: #647272;
    font-size: 14px;
}

.vnu-detail-doc-info {
    flex: 1;
    min-width: 0;
}

.vnu-detail-doc-name {
    font-size: 13px;
    font-weight: 500;
    color: #17221C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vnu-detail-doc-type {
    font-size: 11px;
    color: #899F9F;
    margin-top: 2px;
}

.vnu-detail-doc-download {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #008855;
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
}

.vnu-detail-doc-download:hover {
    background: #E6EFEC;
    color: #006B43;
}

/* ── Confirm modal variant ─────────────────────────────────── */
.vnu-modal-confirm {
    max-width: 420px;
    text-align: center;
    padding: 32px 28px 24px;
}

.vnu-modal-confirm .vnu-modal-footer {
    justify-content: center;
    gap: 8px;
}

.vnu-modal-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.vnu-modal-confirm-icon--warn {
    background: #FFF0F0;
    color: #D32F2F;
}

.vnu-modal-confirm-icon--info {
    background: #E6EFEC;
    color: #008855;
}

.vnu-modal-confirm-title {
    font-size: 17px;
    font-weight: 700;
    color: #17221C;
    margin-bottom: 10px;
}

.vnu-modal-confirm-desc {
    font-size: 13px;
    color: #647272;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Readonly dormitory display — matches capsule-select look */
.vnu-capsule-readonly {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    background: #F0F5F3;
    border: 1.5px solid #C8D8D8;
    border-radius: 50px;
    font-size: 13px;
    color: #17221C;
    font-weight: 500;
    cursor: default;
    white-space: nowrap;
}

/* Tìm button — VNU green from Figma (#00803D) */
.vnu-btn-filter-search {
    background: #00803D;
}

.vnu-btn-filter-search:hover {
    background: #006B33;
}

/* ── Priority tags ─────────────────────────────────────────── */
.vnu-priority-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vnu-priority-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: #FFF8E6;
    border: 1px solid #F5C842;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    color: #8B6A00;
}

.vnu-priority-tag i {
    font-size: 10px;
    color: #F5A623;
}

.vnu-priority-tag-doc {
    display: inline-flex;
    color: #647272;
    margin-left: 2px;
}

.vnu-priority-tag-doc:hover {
    color: #17221C;
}

.vnu-priority-tag-nodoc {
    display: inline-flex;
    color: #E0A800;
    margin-left: 2px;
}

/* ── Student profile: ngoại trú badge & address history ─── */
.vnu-status-ngoai-tru {
    background: #FFE8D5;
    color: #ED3E09;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
}

.vnu-profile-row-highlight {
    background: #F6F8F7;
}

.vnu-status-row--block {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ── Profile breadcrumb ── */
.vnu-profile-breadcrumb {
    font-size: 13px;
    color: #647272;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vnu-profile-breadcrumb a {
    color: #647272;
    text-decoration: none;
    font-weight: 700;
}

.vnu-profile-breadcrumb a:hover {
    color: #008855;
    text-decoration: underline;
}

.vnu-bc-sep {
    color: #B0BCBC;
    font-weight: 400;
}

.vnu-bc-current {
    color: #17221C;
    font-weight: 400;
}

/* ── Profile inline status badges (cột 2) ── */
.vnu-profile-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-block;
}

.vnu-status-luu-tru {
    background: #FFE8D5;
    color: #ED3E09;
}

.vnu-status-tam-tru {
    background: #D6FAF0;
    color: #03CC80;
}

/* ── Grid ngoại trú: wider cột 2, narrower cột 3 ── */
.vnu-profile-grid--ngoai-tru {
    grid-template-columns: 23% 37% 40%;
}

/* ══════════════════════════════════════════════════
   Room Types — Figma node 774-5747
   ══════════════════════════════════════════════════ */

.rt-page-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card */
.rt-list-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    overflow: hidden;
}

/* Header */
.rt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 16px;
    flex-wrap: wrap;
}

.rt-section-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(23, 34, 28, 0.65);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rt-count {
    font-weight: 400;
    font-size: 11px;
    opacity: 0.55;
    letter-spacing: 0;
    text-transform: none;
}

.rt-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Search */
.rt-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rt-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F6F6F6;
    border-radius: 6px;
    padding: 0 12px;
    height: 34px;
    width: 220px;
}

.rt-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #17221C;
    width: 100%;
}

.rt-search-input::placeholder {
    color: #899F9F;
}

.rt-search-btn {
    display: inline-flex;
    align-items: center;
    background: #008855;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    height: 34px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}

.rt-search-btn:hover {
    background: #00803D;
}

.rt-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #F0F0F0;
    color: #647272;
    text-decoration: none;
    flex-shrink: 0;
}

.rt-clear-btn:hover {
    background: #E2E5E4;
}

/* Add button */
.rt-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: #008855;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}

.rt-add-btn:hover {
    background: #00803D;
    color: #fff;
}

.inv-table-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rt-add-btn--outline {
    background: #FEFFFD;
    color: #008855;
    border: 1px solid #008855;
}

.rt-add-btn--outline:hover {
    background: #E6EFEC;
    color: #00803D;
    border-color: #00803D;
}

.rt-add-btn--outline:disabled {
    background: #F6F6F6;
    color: #B3B3B3;
    border-color: #E2E5E4;
    cursor: not-allowed;
}

.rt-add-btn--outline:disabled:hover {
    background: #F6F6F6;
    color: #B3B3B3;
    border-color: #E2E5E4;
}

.rt-add-btn--blue {
    background: #2980B9;
}

.rt-add-btn--blue:hover {
    background: #1F6591;
    color: #fff;
}

.rt-add-btn--purple {
    background: #6A4C93;
}

.rt-add-btn--purple:hover {
    background: #543A75;
    color: #fff;
}

/*
 * Room Types List — exact Figma values
 * 795-6048: grey wrap  bg=#F6F6F6 radius=16px
 * 795-6056: row card   bg=#FFFFFF border=1px #E2E5E4 radius=6px
 * 795-6051: col header color=#B3B3B3 700 12px uppercase ls=0.1em
 * 795-6167: row name   color=#17221C 600 14px lh=22px
 * 774-5749: col header "tên loại" same style as 795-6051
 */

/* 795-6048 — Grey wrapper */
.rt-table-wrap {
    background: #F6F6F6;
    border-radius: 16px;
    margin: 16px;
    padding: 10px 10px 10px;
}

/* Column headers — exact style from 795-6051 */
.rt-col-headers {
    display: grid;
    grid-template-columns: 36px 56px 1fr 150px 110px 100px;
    padding: 4px 6px 8px;
}

.rt-col-headers span {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B3B3B3;
    white-space: nowrap;
}

.rt-ch-name {
    grid-column: 1 / 4;
    padding-left: 92px;
}

.rt-ch-price {}

.rt-ch-rooms {}

.rt-ch-more {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rt-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s;
}

.rt-more-btn:hover {
    background: #EBEBEB;
}

/* List container */
.rt-list {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
}

.rt-row {
    display: grid;
    grid-template-columns: 36px 56px 1fr 150px 110px 100px;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid #F0F2F1;
    padding: 8px 6px;
    min-height: 64px;
    transition: background 0.12s;
}

.rt-row:last-child {
    border-bottom: none;
}

.rt-row:hover {
    background: #F7FAF8;
}

/* Index — muted number */
.rt-row-index {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #B3B3B3;
    text-align: center;
}

/* Thumbnail 48×48, radius 6px — Figma #934:156 */
.rt-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.rt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Name block — #795:6167 style: 600 14px lh=22px #17221C */
.rt-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 10px;
    min-width: 0;
    overflow: hidden;
}

.rt-name {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: #17221C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sub-text: #899-114 style: 400 14px lh=22px muted */
.rt-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rt-capacity {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #686F6A;
}

/* Price column */
.rt-price-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rt-price-val {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #008855;
    line-height: 22px;
}

.rt-price-sub {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 12px;
    color: #B3B3B3;
}

/* Room count */
.rt-rooms-count {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rt-rooms-num {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #17221C;
    line-height: 22px;
}

.rt-rooms-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 12px;
    color: #B3B3B3;
}

/* Actions — edit_square icon style from #795:6087 */
.rt-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    padding-right: 0;
}

.rt-btn-edit,
.rt-btn-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.rt-btn-edit {
    background: #EBF4FF;
    color: #2980B9;
}

.rt-btn-edit:hover {
    background: #D0E8FF;
    color: #1A6CAD;
}

.rt-btn-del {
    background: #FFE4E6;
    color: #CE204E;
}

.rt-btn-del:hover {
    background: #FFC9CD;
    color: #A8102E;
}

/* Image upload — dashed area (new style) */
.rt-img-upload-area {
    width: 100%;
    height: 160px;
    border: 2px dashed #C8D8CD;
    border-radius: 12px;
    background: #F8FCF9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
    position: relative;
}

.rt-img-upload-area:hover {
    border-color: #008855;
    background: #F0FAF4;
}

#rt-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

#rt-img-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

#rt-img-preview img {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

/* #rt-img-placeholder/#rt-img-preview (ID, specificity 100) đè lên .u-none (class,
   specificity 10) khiến class ẩn không có tác dụng — 2 id này còn được dùng lại ở
   tab "Loại phòng" trong facility/index.blade.php (ẩn/hiện qua .u-none), nên ảnh xem
   trước luôn hiện đè lên chữ "+/Ảnh phòng" kể cả khi chưa chọn ảnh (src rỗng = ảnh vỡ).
   Override bằng ID+class (specificity 110) để .u-none luôn thắng khi có mặt. */
#rt-img-placeholder.u-none,
#rt-img-preview.u-none {
    display: none;
}

.rt-img-plus {
    font-size: 24px;
    color: #008855;
    line-height: 1;
}

.rt-img-text {
    font-size: 13px;
    color: #008855;
    font-weight: 500;
}

.rt-img-change-btn {
    font-size: 12px;
    color: #647272;
    background: #F0F2F1;
    border: none;
    border-radius: 6px;
    padding: 2px 10px;
    cursor: pointer;
    margin-top: 4px;
}

.rt-img-change-btn:hover {
    background: #E2E5E4;
}

/* Amenities rows */
.rt-amenity-row {
    margin-bottom: 12px;
}

.rt-amenity-row .adm-input {
    margin-bottom: 0;
}

.rt-rm-btn {
    background: #FFE4E6;
    color: #CE204E;
    border: none;
    border-radius: 6px;
    width: 34px;
    height: 42px;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}

.rt-rm-btn:hover {
    background: #FFC9CD;
}

.rt-add-row-btn {
    font-size: 13px;
    color: #008855;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-weight: 600;
}

.rt-add-row-btn:hover {
    text-decoration: underline;
}

.rt-extra-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #E8F4EC;
    color: #17221C;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
}

.rt-extra-tag button {
    background: none;
    border: none;
    cursor: pointer;
    color: #647272;
    font-size: 12px;
    padding: 0;
    line-height: 1;
}

.adm-form-divider {
    border: none;
    border-top: 1px solid #F0F2F1;
    margin: 4px 0;
}

/* Image upload in form */
.rt-image-upload-wrap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.rt-image-preview {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: #F6F6F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px dashed #E2E5E4;
}

.rt-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rt-image-upload-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rt-upload-hint {
    font-size: 12px;
    color: #B3B3B3;
}

/* ── rt-* shared helpers for list pages ──────────────────── */
.rt-filter-select {
    height: 34px;
    border: 1px solid #E2E5E4;
    border-radius: 50px;
    padding: 0 14px;
    font-size: 13px;
    color: #17221C;
    background: #fff;
    outline: none;
    min-width: 140px;
    cursor: pointer;
}

.rt-filter-select:focus {
    border-color: #008855;
}

.rt-filter-select--locked {
    display: flex;
    align-items: center;
    height: 34px;
    border: 1px solid #E2E5E4;
    border-radius: 50px;
    padding: 0 14px;
    font-size: 13px;
    color: #647272;
    background: #F5F7F6;
    min-width: 140px;
    cursor: default;
}

/* Inline letter-avatar (no image) */
.rt-thumb-inline {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Ảnh đại diện sinh viên trong bảng danh sách — ưu tiên ảnh thật (students.avatar),
   fallback icon người khi chưa có ảnh hoặc ảnh lỗi (404) — xem onerror ở index.blade.php. */
.rt-avatar-cell {
    background: #F0F0F0;
    overflow: hidden;
}

.rt-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rt-avatar-noimg-icon {
    color: #B3B3B3;
}

/* Generic column helpers */
.rt-col-text {
    display: flex;
    align-items: center;
    padding: 14px 8px;
    font-size: 13px;
    color: #647272;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rt-col-badge {
    display: flex;
    align-items: center;
    padding: 14px 8px;
}

.rt-col-num {
    display: flex;
    align-items: center;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

/* Badge pill */
.rt-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.rt-badge-green {
    background: #E8F5EE;
    color: #008855;
}

.rt-badge-gray {
    background: #F0F0F0;
    color: #647272;
}

.rt-badge-blue {
    background: #EBF4FF;
    color: #2980B9;
}

.rt-badge-red {
    background: #FDECEA;
    color: #CE204E;
}

/* Standalone number-add btn (outside vnu-number-input-wrap) */
button.vnu-number-add-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #E2E5E4;
    background: #F6F6F6;
    cursor: pointer;
    font-size: 16px;
    color: #17221C;
    transition: background 0.15s, border-color 0.15s;
}

button.vnu-number-add-btn:hover {
    background: #17221C;
    border-color: #17221C;
    color: #fff;
}



/* =====================================================================
   ROOM DETAIL  (rd-*)
   Figma frame 722:8892 "Phòng - Detail fullpage"
   Card 424:3680 — bg #FEFFFD, radius 26px, shadow rgba(17,59,100,0.07)
   Sizes converted: px → % where layout-critical, px kept for fixed atoms
   ===================================================================== */

/* ── Wrapper: sits inside vnu-content (green #E6EFEC bg) ── */
.rd-wrap {
    width: 100%;
}

/* ── White card ── */
/* padding-top:0 — titlebar min-height:80px tự handle cả khoảng cách trên
   Button center=(80-32)/2=24px từ card top → cân đối trên/dưới (24px mỗi bên)
   h-sep width=1394-26-22=1346px ✓ (verified from Figma: right=22px, left=26px) */
.rd-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0 2px 10px 0 rgba(17, 59, 100, 0.07);
    padding: 0 22px 26px 26px;
    overflow: hidden;
}

/* ── Title bar: min-height=80px = h-sep y-pos từ card top
   Button (32px) centered in 80px → (80-32)/2=24px từ card top, 24px tới h-sep (symmetric) */
.rd-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    margin-bottom: 0;
}

.rd-room-title {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 700;
    color: #17221C;
    margin: 0;
    line-height: 1.2;
}

/* Edit button — node 512:2, bg #17221C, radius 8px, 126×32px */
.rd-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #17221C;
    color: #FEFFFD;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    padding: 5px 18px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}

.rd-btn-edit:hover {
    background: #008855;
    color: #fff;
}

.rd-btn-edit i {
    font-size: 12px;
}

/* ── Horizontal separator (Line 524, node 439:4965) ── */
/* Figma: 1346×1px, background #E2E5E4 */
/* With card padding 26px left / 22px right, content width = 1394-26-22 = 1346px → margin:0 */
.rd-h-sep {
    height: 1px;
    background: #E2E5E4;
    margin: 0;
}

/* ── Body: 2-col grid — left | right ── */
/* Vertical divider Line 523: dùng border-right trên col-left (giống vnu-profile-col pattern)
   margin-bottom: -26px + overflow:hidden trên card → border chạm đúng đáy card */
.rd-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    margin-bottom: -26px;
    /* bleed to card bottom edge (clipped by overflow:hidden) */
}

/* Single-column variant — used by pages without a right column (e.g. room type detail) */
.rd-body--full {
    grid-template-columns: 1fr;
}

.rd-body--full .rd-col-left {
    border-right: none;
    padding-right: 0;
}

/* ── LEFT column ── */
/* border-right replaces the v-sep div — starts flush with h-sep, ends flush with card bottom */
.rd-col-left {
    padding-top: 34px;
    /* y=284 photo − y=250 h-sep = 34px */
    padding-right: 5%;
    padding-bottom: 26px;
    /* match card bottom padding so content stays inside */
    border-right: 1px solid #E2E5E4;
    display: flex;
    flex-direction: column;
}

/* Photo + info: side-by-side */
/* Photo 300×226px, gap 37px, info panel ~300px */
.rd-photo-info {
    display: flex;
    gap: clamp(20px, 5.3%, 37px);
    align-items: flex-start;
    flex: 0 0 auto;
}

/* Photo box — node 425:4146, w=300 h=226, radius 6px */
.rd-photo-box {
    flex: 0 0 min(300px, 43%);
    width: min(300px, 43%);
    height: 226px;
    border-radius: 6px;
    overflow: hidden;
    background: #F0F0F0;
}

.rd-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No-image placeholder: same 300×226 box, centered icon */
.rd-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F0F0F0;
    color: #C8C8C8;
    gap: 8px;
}

.rd-photo-placeholder i {
    font-size: 40px;
}

.rd-photo-placeholder span {
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    color: #B3B3B3;
}

/* Info panel — when no photo: full left-column width */
.rd-info-panel {
    flex: 1;
    min-width: 0;
}

.rd-info-panel--nophoto {
    flex: unset;
    width: 100%;
}

/* "Loại phòng :" — node 425:4148: 14px/22px semibold #17221C (W77 H22) */
.rd-type-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: #17221C;
    display: block;
    margin-bottom: 4px;
}

/* "Phòng quốc tế" — node 425:4159, 18px regular #17221C */
.rd-type-name {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #17221C;
    margin: 0 0 12px;
    line-height: 22px;
}

/* Info row divider — Line 541 nodes, width 300px from x=665 */
.rd-info-sep {
    height: 1px;
    background: #F6F6F6;
    margin: 0;
}

/* Info row — e.g. "Giá:" / "850000đ" */
.rd-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
}

/* Label — 14px semibold #17221C, e.g. node 1234:1475 */
.rd-info-lbl {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Value — 14px regular #17221C right-aligned, e.g. node 1234:1484 */
.rd-info-val {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    text-align: right;
}

/* ── TIỆN ÍCH CỘNG THÊM section ── */
/* node 1240:1509: label at y=626, 24px below last info-sep (y=602) */
.rd-extras {
    margin-top: 24px;
}

/* Section label: 12px, 700, letter-spacing 1.2px, uppercase, #17221C */
/* node 1240:1509 */
.rd-sec-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #17221C;
    margin: 0 0 10px;
    line-height: normal;
}

/* Extra item row: + icon left, text right-aligned */
/* + icon node 1240:1501 at x=665; text node 425:4184 right-aligned to x=965 */
.rd-extra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    gap: 8px;
}

.rd-extra-plus {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.rd-extra-txt {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    text-align: right;
    flex: 1;
}

/* ── RIGHT column ── */
/* Inner content starts at x=1048, v-sep at x=1001 → 47px left padding */
.rd-col-right {
    padding-top: 34px;
    padding-left: 47px;
    padding-bottom: 26px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── TRẠNG THÁI section ── */
/* Label "TRẠNG THÁI" at y=288; content-top=y=250 → padding-top 38px */
.rd-status-section {
    padding-top: 4px;
    margin-bottom: 28px;
}

/* Toggle — node 486:5369: w=50px h=26px, bg #4CD681 ON, radius 13px */
/* node 486:5370: thumb white, radius 13px, 22×22 */
.rd-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.rd-toggle {
    position: relative;
    width: 50px;
    height: 26px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-block;
}

.rd-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rd-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 13px;
    background: #D0D0D0;
    transition: background .2s;
}

.rd-toggle--on .rd-toggle-track {
    background: #4CD681;
}

.rd-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: transform .2s;
}

.rd-toggle--on .rd-toggle-thumb {
    transform: translateX(24px);
}

/* "Hoạt động" text — node 486:5373: 14px semibold #17221C */
.rd-toggle-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 22px;
}

/* ── DANH SÁCH SINH VIÊN ĐANG Ở ── */
.rd-students-section {
    margin-bottom: 28px;
}

.rd-students-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rd-students-head .rd-sec-label {
    margin-bottom: 0;
}

/* "+ Thêm HSSV" — node 490:2: 14px, color #008855 */
.rd-add-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #008855;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.rd-add-link:hover {
    color: #005530;
}

/* Table background — node 425:3916: bg #F6F6F6, radius 16px */
.rd-stbl-wrap {
    background: #F6F6F6;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 14px;
    padding-bottom: 8px;
}

/* Column header row — node 425:3917~3919: y=412 (14px from bg top) */
/* 12px, 700, letter-spacing 1.2px, uppercase, #B3B3B3 */
.rd-stbl-head {
    display: grid;
    grid-template-columns: 130px 1fr 110px 100px;
    padding: 14px 20px 6px;
    gap: 0;
}

.rd-stbl-head span {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #B3B3B3;
    line-height: normal;
}

/* Data row — nodes 425:3920~3923: bg white, border 1px #E2E5E4, radius 6px, h=42px */
/* Margin: 3px sides 8px, giving "card within card" look */
.rd-stbl-row {
    display: grid;
    grid-template-columns: 130px 1fr 110px 100px;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    margin: 3px 8px;
    padding: 0 12px;
    min-height: 42px;
}

/* Student code — 14px semibold, node 425:3934 */
.rd-col-code {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 22px;
}

/* Student name — 14px regular, with avatar */
.rd-col-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    line-height: 22px;
    min-width: 0;
}

/* Avatar — node 425:3960: Ellipse 26×26px circle */
.rd-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #C6E5D3;
    color: #008855;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    overflow: hidden;
}

/* Date — 14px regular */
.rd-col-date {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
    line-height: 22px;
}

/* Actions column */
.rd-col-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

/* Action icons — nodes 425:3935, 425:3926, etc. — 20×20px each */
.rd-act {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #B3B3B3;
    font-size: 13px;
    text-decoration: none;
    transition: color .12s;
    border-radius: 3px;
}

.rd-act:hover {
    color: #17221C;
}

.rd-act--warn {
    color: #E0A000;
}

.rd-act--warn:hover {
    color: #C07800;
}

.rd-act--del:hover {
    color: #CC3333;
}

.rd-act--view:hover {
    color: #008855;
}

/* ── LỊCH SỬ PHÒNG ── */
.rd-history-section {}

/* Timeline */
.rd-timeline {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rd-tl-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* 1094-1080=14px: icon right=1038+42=1080, text at 1094 */
    padding: 8px 0;
}

/* Timeline icons — w=h=42px circle, per-status color */
/* phản ánh (open): node 425:4169/4180 — orange bg */
/* hoàn tất (resolved): node 425:4170 — green bg */
/* tiếp nhận (processing): node 425:4174 — blue bg */
.rd-tl-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.rd-tl-icon--open {
    background: #FFF1EB;
    color: #E07830;
}

.rd-tl-icon--processing {
    background: #EBF3FF;
    color: #3C82E0;
}

.rd-tl-icon--resolved {
    background: #E8FAF0;
    color: #008855;
}

.rd-tl-icon--closed {
    background: #F2F2F2;
    color: #888;
}

.rd-tl-body {
    flex: 1;
    min-width: 0;
}

/* "Nguyễn Văn Minh phản ánh..." — node 425:4155, 14px */
.rd-tl-text {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    line-height: 22px;
    margin: 0 0 1px;
}

/* Muted part of text (after name) */
.rd-tl-text .muted {
    font-weight: 400;
    color: #647272;
}

/* Date/time — node 425:4165~4168, 14px regular #647272 */
.rd-tl-time {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #647272;
    line-height: 22px;
    margin: 0;
}

/* ── Empty states ── */
.rd-empty {
    text-align: center;
    padding: 28px 0;
    color: #B3B3B3;
}

.rd-empty i {
    font-size: 26px;
    margin-bottom: 8px;
    display: block;
}

.rd-empty p {
    margin: 0;
    font-size: 14px;
}

/* ── Rooms index: clickable room number ── */
a.qlp-room-link {
    color: #17221C;
    font-weight: 700;
    text-decoration: none;
}

a.qlp-room-link:hover {
    color: #008855;
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .rd-body {
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }

    .rd-col-left {
        border-right: none;
        border-bottom: 1px solid #E2E5E4;
        padding-right: 0;
        padding-bottom: 24px;
        margin-bottom: 0;
    }

    .rd-col-right {
        padding-left: 0;
    }

    .rd-stbl-head,
    .rd-stbl-row {
        grid-template-columns: 110px 1fr 90px 80px;
    }
}

@media (max-width: 600px) {
    .rd-photo-info {
        flex-direction: column;
    }

    .rd-photo-box {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Room Edit form (re-*)
   Figma: node 512:6 — panel 650×638px, bg #FEFFFD, radius 16px
   ═══════════════════════════════════════════════════════════════════════ */
.re-wrap {
    max-width: 650px;
    margin: 0 auto;
    padding: 0 0 40px;
}

.re-card {
    background: #FEFFFD;
    border-radius: 16px;
    box-shadow: 0 2px 10px 0 rgba(17, 59, 100, 0.07);
    overflow: hidden;
}

/* Header: title + X close — measured from Figma panel top: title at 38px */
.re-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 38px 34px 18px;
}

.re-title {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
    margin: 0;
    line-height: 1.3;
}

.re-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #647272;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

.re-close:hover {
    background: #F0F0F0;
    color: #17221C;
}

.re-h-sep {
    height: 1px;
    background: #E2E5E4;
    margin: 0;
}

/* Body: padding 34px sides, form grid with 24px row-gap / 10px col-gap */
.re-body {
    padding: 30px 34px 34px;
}

.re-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 10px;
    margin-bottom: 32px;
}

.re-field {
    display: flex;
    flex-direction: column;
}

.re-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    line-height: 19px;
    margin-bottom: 10px;
}

/* Input / select: Figma bg #F6F6F6, border #E2E5E4, radius 6px, height 42px */
.re-input,
.re-select {
    height: 42px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 14px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #17221C;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.re-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23647272' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.re-input:focus,
.re-select:focus {
    border-color: #008855;
    background: #fff;
}

.re-input-error {
    border-color: #E03A3A !important;
}

.re-error {
    font-size: 12px;
    color: #E03A3A;
    margin-top: 4px;
}

/* Footer: submit button right-aligned, 154×42px, Figma bg #17221C */
.re-footer {
    display: flex;
    justify-content: flex-end;
}

.re-btn-save {
    width: 154px;
    height: 42px;
    background: #17221C;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.2px;
    transition: background 0.15s;
}

.re-btn-save:hover {
    background: #2d3d36;
}

@media (max-width: 680px) {
    .re-form-grid {
        grid-template-columns: 1fr;
    }

    .re-wrap {
        padding: 0 0 24px;
    }
}

/* ── Room Edit: Dịch vụ gia tăng chip multi-select ── */
.re-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 42px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 6px 8px;
}

.re-chip-wrap:focus-within {
    border-color: #008855;
    background: #fff;
}

.re-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #E2EDE8;
    color: #17221C;
    border-radius: 4px;
    padding: 2px 8px 2px 10px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.re-chip-x {
    background: none;
    border: none;
    padding: 0 0 0 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #647272;
    display: flex;
    align-items: center;
}

.re-chip-x:hover {
    color: #E03A3A;
}

.re-chip-input-row {
    display: contents;
}

.re-service-picker {
    flex: 1;
    min-width: 140px;
    background: transparent;
    border: none;
    border-radius: 0;
    height: 28px;
    padding: 0 4px;
    font-size: 13px;
    color: #647272;
    background-image: none;
    padding-right: 4px;
    box-shadow: none;
    outline: none;
}

.re-service-picker:focus {
    outline: none;
}

/* === Violation Add Modal — Figma 722:8861 === */
.vio-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .45);
    align-items: center;
    justify-content: center;
}

.vio-card {
    background: #FFF;
    border: 1px solid #E2E5E4;
    border-bottom: 3px solid #E2E5E4;
    border-radius: 6px;
    width: min(480px, 90vw);
    padding: 14px 14px 24px;
}

.vio-card form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vio-img-upload {
    width: 100%;
    aspect-ratio: 273 / 64;
    background: #FFF7ED;
    border: 1px dashed #FDB974;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.vio-img-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #F96D0E;
}

.vio-input {
    width: 100%;
    height: 32px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    color: #17221C;
    outline: none;
    box-sizing: border-box;
}

.vio-input::placeholder {
    color: #B3B3B3;
}

.vio-input:focus {
    border-color: #FDB974;
}

.vio-textarea {
    width: 100%;
    height: 68px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    color: #17221C;
    outline: none;
    resize: none;
    box-sizing: border-box;
}

.vio-textarea::placeholder {
    color: #B3B3B3;
}

.vio-textarea:focus {
    border-color: #FDB974;
}

.vio-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.vio-btn-cancel,
.vio-btn-confirm {
    flex: 1;
    height: 32px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    cursor: pointer;
    color: #17221C;
}

.vio-btn-cancel {
    background: #E2E5E4;
    font-weight: 400;
}

.vio-btn-confirm {
    background: #FDB974;
    font-weight: 600;
}

.vio-btn-cancel:hover {
    background: #D6DAD9;
}

.vio-btn-confirm:hover {
    opacity: .88;
}

.vio-img-previews {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
}

.vio-img-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.vio-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vio-img-thumb-rm {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, .55);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vio-img-thumb-rm:hover {
    background: rgba(0, 0, 0, .8);
}

/* ================================================================
   Fee Management — Thu phí KTX
   Covers: receipts/index.blade, billing_periods/index.blade
   ================================================================ */

/* ── Receipt stats row ──────────────────────────────────────── */
.fee-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.fee-stat-card {
    background: #fff;
    border: 1px solid #E2E5E4;
    border-radius: 16px;
    padding: 18px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fee-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(23, 34, 28, .55);
}

.fee-stat-value {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #17221C;
    line-height: 1;
}

.fee-stat-bar-track {
    height: 8px;
    background: #E2E5E4;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    gap: 2px;
}

.fee-stat-bar-seg {
    height: 100%;
    border-radius: 4px;
}

/* ── Receipt main card ──────────────────────────────────────── */
.fee-main-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, .07);
    overflow: hidden;
}

.fee-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 24px 14px;
}

.fee-toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F0F0F0;
    border-radius: 6px;
    padding: 5px 12px;
    min-width: 200px;
}

.fee-toolbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #899F9F;
    width: 100%;
}

.fee-toolbar-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #43B4FF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Receipt table ──────────────────────────────────────────── */
.fee-table-wrap {
    background: #F6F6F6;
    border-radius: 16px;
    margin: 0 16px 20px;
    overflow: hidden;
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
}

.fee-table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B3B3B3;
    padding: 14px 12px 10px;
    text-align: left;
    white-space: nowrap;
}

.fee-table tbody td {
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #E2E5E4;
    font-size: 14px;
    color: #17221C;
    vertical-align: middle;
}

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

.fee-table tbody tr {
    cursor: pointer;
}

.fee-table tbody tr:hover td {
    background: #F8FFFE;
}

.fee-code {
    font-weight: 600;
    font-size: 13px;
}

.fee-student-name {
    font-weight: 600;
    font-size: 14px;
}

.fee-student-room {
    font-size: 12px;
    color: #647272;
}

.fee-amount {
    font-size: 14px;
    font-weight: 700;
    color: #17221C;
    text-align: right;
}

/* display:flex trực tiếp trên <td> phá layout bảng (Chrome tự chèn thêm 1 box ẩn có
   viền quanh cell) — bọc nội dung trong 1 span rồi mới flex, không flex thẳng trên td. */
.fee-amount-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
    width: max-content;
    margin-left: auto;
}

/* Thẻ THU/CHI — dùng chung palette với fee-badge-paid (xanh)/fee-badge-overdue (cam)
   để nhất quán màu sắc trong toàn màn Thu phí. */
.fee-direction-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.fee-direction-in {
    background: #D3FFED;
    color: #008855;
}

.fee-direction-out {
    background: #FFE8D5;
    color: #ED3E09;
}

.fee-amount-out {
    color: #ED3E09;
}

/* ── Status badges (shared) ──────────────────────────────────── */
.fee-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.fee-badge-paid {
    background: #D3FFED;
    color: #008855;
}

.fee-badge-overdue {
    background: #FFE8D5;
    color: #ED3E09;
}

.fee-badge-unpaid {
    background: #F0F0F0;
    color: #647272;
}

.fee-badge-pending {
    background: #FFF3D6;
    color: #B8860B;
}

/* Badge phụ (không thay thế fee-badge trạng thái) — đánh dấu biên lai đã thanh toán
   từng bị điều chỉnh số tiền, xem ReceiptController::adjust(). Không phải 1 trạng thái
   mới của receipts.status, chỉ là cờ hiển thị dựa trên receipts.adjusted_count. */
.fee-badge-adjusted {
    background: #E7ECFF;
    color: #3452C6;
    margin-left: 6px;
}

/* Icon "cần xử lý" kiểu kế toán — chấm đỏ nhấp nháy nhẹ trước badge "Đang chờ xác
   nhận", gây chú ý giữa danh sách dài toàn trạng thái tĩnh (đã/chưa thanh toán). */
.fee-alert-icon {
    color: #ED3E09;
    font-size: 15px;
    margin-right: 6px;
    vertical-align: middle;
    animation: fee-alert-pulse 1.6s ease-in-out infinite;
}

@keyframes fee-alert-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

.fee-refund-btn {
    background: none;
    border: none;
    cursor: pointer;
    opacity: .55;
    padding: 2px;
    transition: opacity .15s;
}

.fee-refund-btn:hover {
    opacity: 1;
}

/* ── Receipt detail slide panel ─────────────────────────────── */
.fee-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 33, 20, .65);
    z-index: 1040;
    align-items: stretch;
}

.fee-panel-overlay.active {
    display: flex;
}

.fee-panel {
    margin-left: auto;
    width: 650px;
    max-width: 90vw;
    background: #FEFFFD;
    border-radius: 26px 0 0 26px;
    padding: 30px 32px;
    overflow-y: auto;
    position: relative;
    animation: feeSlideIn .22s ease;
}

@keyframes feeSlideIn {
    from {
        transform: translateX(60px);
        opacity: 0;
    }

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

.fee-panel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: #17221C;
    opacity: .55;
    font-size: 22px;
    transition: opacity .15s;
}

.fee-panel-close:hover {
    opacity: 1;
}

.fee-panel-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
    /* Chừa chỗ cho nút đóng (.fee-panel-close, position:absolute top/right:20px,
       font-size 22px) — không thì nút "In biên lai" đè lên nút X. */
    padding-right: 40px;
}

.fee-panel-title {
    font-size: 24px;
    font-weight: 700;
    color: #17221C;
    margin-bottom: 20px;
}

.fee-panel-section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(23, 34, 28, .65);
    margin-bottom: 10px;
}

.fee-panel-student {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.fee-panel-student-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #E2EFE3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #038141;
    font-weight: 700;
    flex-shrink: 0;
}

.fee-panel-student-name {
    font-size: 14px;
    font-weight: 400;
    color: #17221C;
}

.fee-panel-student-code {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    margin-left: auto;
}

.fee-panel-divider {
    border: none;
    border-top: 1px solid #E2E5E4;
    margin: 16px 0;
}

.fee-panel-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fee-panel-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #17221C;
}

.fee-panel-meta-label {
    color: #647272;
}

.fee-panel-items {
    margin-top: 16px;
}

.fee-panel-item-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #F0F0F0;
    font-size: 14px;
    color: #17221C;
}

.fee-panel-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #17221C;
}

.fee-panel-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-fee-pay {
    flex: 1;
    background: #008855;
    color: #FEFFFD;
    border: none;
    border-radius: 6px;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.btn-fee-pay:hover {
    background: #00803D;
}

.btn-fee-pay:disabled {
    background: #E2E5E4;
    color: #647272;
    cursor: default;
}

/* ── Misc ────────────────────────────────────────────────────── */
.fee-pagination {
    padding: 0 16px 16px;
    display: flex;
    justify-content: flex-end;
}

.fee-empty {
    text-align: center;
    padding: 60px 20px;
    color: #647272;
    font-size: 14px;
}

/* ================================================================
   Billing Periods page
   ================================================================ */
.bp-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, .07);
    overflow: hidden;
}

.bp-card-title {
    font-size: 36px;
    font-weight: 700;
    color: #17221C;
    padding: 24px 30px 0;
}

.bp-card-title-divider {
    height: 1px;
    background: #E2E5E4;
    margin: 20px 30px 0;
}

.bp-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: stretch;
}

/* ── Left: create form ───────────────────────────────────────── */
/* border-right thay cho div divider riêng — liền mạch từ divider ngang trên xuống đáy card, giống pattern .rd-col-left */
.bp-form-col {
    padding: 24px;
    border-right: 1px solid #E2E5E4;
}

.bp-form-section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(23, 34, 28, .65);
    margin-bottom: 16px;
}

.bp-form-group {
    margin-bottom: 14px;
}

.bp-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    margin-bottom: 5px;
    display: block;
}

.bp-input,
.bp-select {
    width: 100%;
    height: 42px;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #17221C;
    background: #fff;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}

.bp-input:focus,
.bp-select:focus {
    border-color: #008855;
}

.bp-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%2317221C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 34px;
}

.bp-price-preview {
    background: #F6F6F6;
    border-radius: 6px;
    padding: 6px 0;
    margin-top: 4px;
}

.bp-price-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
    font-size: 14px;
    color: #17221C;
    border-bottom: 1px solid #E2E5E4;
}

.bp-price-row:last-child {
    border-bottom: none;
}

.bp-import-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 12px;
    height: 42px;
    cursor: pointer;
}

.bp-import-label {
    font-size: 14px;
    color: #17221C;
}

.bp-import-file {
    display: none;
}

.btn-bp-create {
    width: 100%;
    height: 42px;
    background: #17221C;
    color: #FEFFFD;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s;
    margin-top: 18px;
}

.btn-bp-create:hover {
    background: #008855;
}

/* ── Right: period table ─────────────────────────────────────── */
.bp-table-col {
    min-width: 0;
}

.bp-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
}

.bp-table-section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(23, 34, 28, .65);
}

.bp-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-filter-wrap {
    position: relative;
}

.bp-filter-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #43B4FF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.bp-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    background: #FEFFFD;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(17, 59, 100, .15);
    padding: 14px;
    min-width: 200px;
}

.bp-filter-panel.is-open {
    display: block;
}

.bp-filter-group {
    margin-bottom: 10px;
}

.bp-filter-group:last-child {
    margin-bottom: 0;
}

.bp-filter-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    margin-bottom: 4px;
}

.bp-filter-group .bp-select {
    height: 38px;
}

.bp-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F0F0F0;
    border-radius: 6px;
    padding: 5px 12px;
    min-width: 180px;
}

.bp-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #899F9F;
    width: 100%;
}

.bp-table-wrap {
    background: #F6F6F6;
    border-radius: 16px;
    margin: 0 16px 20px;
    overflow: hidden;
}

.bp-table {
    width: 100%;
    border-collapse: collapse;
}

.bp-table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B3B3B3;
    padding: 14px 12px 10px;
    text-align: left;
    white-space: nowrap;
}

.bp-table tbody td {
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #E2E5E4;
    font-size: 14px;
    color: #17221C;
    vertical-align: middle;
}

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

.bp-table tbody tr:hover td {
    background: #F8FFFE;
}

.bp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
}

.bp-badge-open {
    background: #D3FFED;
    color: #008855;
}

.bp-badge-closed {
    background: #FFE8D5;
    color: #ED3E09;
}

.bp-detail-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #17221C;
    opacity: .5;
    transition: opacity .15s;
    padding: 2px;
    display: inline-flex;
}

.bp-detail-btn:hover {
    opacity: 1;
}

.bp-pagination {
    padding: 0 16px 16px;
    display: flex;
    justify-content: flex-end;
}

.bp-empty {
    text-align: center;
    padding: 60px;
    color: #647272;
    font-size: 14px;
}

/* ================================================================
   Receipt index — redesign theo Figma 632:2661
   ================================================================ */

/* ── 3-column main grid ─────────────────────────────────────── */
.inv-main-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: start;
}

/* ── Left column: action cards ──────────────────────────────── */
.inv-left-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inv-action-card {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, .07);
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inv-action-card__label {
    font-size: 12px;
    font-weight: 600;
    color: #686F6A;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
}

.inv-action-card__count {
    font-size: 28px;
    font-weight: 700;
    color: #17221C;
    line-height: 1;
    text-align: center;
}

.inv-action-card--create .inv-action-card__label {
    margin-bottom: 4px;
}

.inv-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}

.inv-action-btn:hover {
    opacity: .85;
}

.inv-action-btn--yellow {
    background: #FCAF00;
    color: #FEFFFD;
}

.inv-action-btn--green {
    background: #4CD681;
    color: #FEFFFD;
}

/* ── Center column: receipt table ───────────────────────────── */
.inv-center-col {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, .07);
    overflow: hidden;
}

/* Trang Thùng rác biên lai — không có cột trái (action cards), chiếm toàn bộ chiều rộng */
.inv-center-col--full {
    grid-column: 1 / -1;
}

.inv-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
}

.inv-table-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #686F6A;
}

.inv-table-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-filter-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #43B4FF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.inv-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F0F0F0;
    border-radius: 6px;
    padding: 5px 10px;
    min-width: 160px;
}

.inv-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #899F9F;
    width: 100%;
}

.inv-table-wrap {
    background: #F6F6F6;
    border-radius: 16px;
    margin: 0 14px 16px;
    overflow: hidden;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
}

.inv-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B3B3B3;
    padding: 12px 10px 8px;
    text-align: left;
    white-space: nowrap;
}

.inv-table thead th.u-text-right {
    text-align: right;
}

.inv-table tbody td {
    padding: 9px 10px;
    background: #fff;
    border-bottom: 1px solid #E2E5E4;
    font-size: 13px;
    color: #17221C;
    vertical-align: middle;
}

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

.inv-table tbody tr {
    cursor: pointer;
}

.inv-table tbody tr:hover td {
    background: #F8FFFE;
}

/* ── Right column: quick pay panel ─────────────────────────── */
.inv-right-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inv-right-panel {
    background: #FEFFFD;
    border-radius: 26px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, .07);
    padding: 20px;
}

.inv-right-panel__tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(23, 34, 28, .55);
    margin-bottom: 4px;
}

.inv-right-panel__title {
    font-size: 20px;
    font-weight: 700;
    color: #17221C;
    margin-bottom: 16px;
}

.inv-right-panel__field {
    margin-bottom: 12px;
}

.inv-right-panel__label {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    display: block;
    margin-bottom: 4px;
}

.inv-right-panel__input {
    width: 100%;
    height: 42px;
    background: #F6F6F6;
    border: 1px solid #E2E5E4;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13px;
    color: #17221C;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}

.inv-right-panel__input:focus {
    border-color: #008855;
}

.inv-right-panel__search-btn {
    width: 100%;
    height: 42px;
    background: #4CD681;
    color: #FEFFFD;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: background .15s;
}

.inv-right-panel__search-btn:hover {
    background: #008855;
}

.vnu-login-alert {
    background: #FFF0F0;
    border: 1px solid #FFCCCC;
    border-radius: 10px;
    padding: 12px 16px;
    color: #ED3E09;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ── Quick pay search results list ─────────────────────────── */
#invDirectPayPanel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inv-qp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #F0F2F1;
}

.inv-qp-row:last-child {
    border-bottom: none;
}

.inv-qp-code {
    font-size: 12px;
    font-weight: 700;
    color: #17221C;
}

.inv-qp-name {
    font-size: 12px;
    color: #647272;
    grid-column: 1;
}

.inv-qp-amount {
    font-size: 13px;
    font-weight: 700;
    color: #17221C;
    grid-column: 2;
    grid-row: 1;
    text-align: right;
}

.inv-qp-pay-btn {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding: 8px;
    background: #008855;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.inv-qp-pay-btn:hover {
    background: #00803D;
}

/* ── Quick pay results (server-rendered partial) ───────────── */
.inv-qp-row {
    padding: 10px 0;
    border-bottom: 1px solid #F0F2F1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inv-qp-row:last-child {
    border-bottom: none;
}

.inv-qp-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-qp-code {
    font-size: 12px;
    font-weight: 700;
    color: #17221C;
}

.inv-qp-name {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
}

.inv-qp-sub {
    font-size: 11px;
    color: #899F9F;
}

.inv-qp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.inv-qp-amount {
    font-size: 14px;
    font-weight: 700;
    color: #17221C;
}

.inv-qp-pay-btn {
    padding: 6px 14px;
    background: #008855;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.inv-qp-pay-btn:hover {
    background: #00803D;
}

.inv-qp-empty {
    padding: 16px 0;
    text-align: center;
    color: #899F9F;
    font-size: 13px;
}

.inv-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1.5px solid #E2E5E4;
    border-radius: 50px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    cursor: pointer;
}

.inv-reset-btn:hover {
    background: #F5F7F6;
}

/* ── Receipt table icon actions ─────────────────────────────── */
.fee-student-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fee-student-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.fee-action-cell {
    white-space: nowrap;
}

.fee-force-delete-icon {
    color: #ED3E09;
}

.fee-action-icon {
    width: 22px;
    height: 22px;
}

.fee-action-icon--muted {
    opacity: .35;
}

.fee-action-icon-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    line-height: 0;
    transition: background .15s;
}

.fee-action-icon-btn:hover {
    background: #F0F2F1;
}

/* ── Lưu trú & Tạm trú — ASM thất bại: badge mở log, icon reset ─────── */
.res-c06-failed-btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.res-asm-log-card {
    background: #FEFFFD;
    border-radius: 16px;
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.res-asm-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #E6EFEC;
}

.res-asm-log-title {
    font-weight: 700;
    font-size: 16px;
    color: #17221C;
}

.res-asm-log-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #647272;
    cursor: pointer;
}

.res-asm-log-close:hover {
    color: #17221C;
}

.res-asm-log-body {
    padding: 16px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.res-asm-log-item {
    background: #F5F8F6;
    border-radius: 10px;
    padding: 12px 14px;
}

.res-asm-log-item-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #E53935;
    margin-bottom: 4px;
}

.res-asm-log-time {
    color: #647272;
    font-weight: 400;
}

.res-asm-log-field {
    font-size: 12px;
    color: #647272;
    margin-bottom: 4px;
}

.res-asm-log-message {
    font-size: 13px;
    color: #17221C;
}

.res-asm-log-empty {
    text-align: center;
    color: #647272;
    padding: 24px 0;
}

.fee-action-icon-btn img {
    width: 22px;
    height: 22px;
}

/* ── Access Logs stats bar ───────────────────────────────── */
.alog-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: #FEFFFD;
    border-radius: 16px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    padding: 16px 28px;
    width: fit-content;
}

.alog-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alog-stat-val {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #17221C;
    line-height: 1;
}

.alog-stat-green {
    color: #008855;
}

.alog-stat-red {
    color: #CE204E;
}

.alog-stat-label {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #647272;
}

.alog-stat-sep {
    width: 1px;
    height: 28px;
    background: #E2E5E4;
    margin: 0 20px;
    flex-shrink: 0;
}

/* ── Select2 override for VNU design ────────────────────── */
.select2-container--default .select2-selection--single {
    height: 44px;
    border: 2px solid #E2E5E4;
    border-radius: 12px;
    background: #FEFFFD;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 14px;
    color: #17221C;
    font-size: 14px;
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 10px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #17221C;
    outline: none;
}

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

.select2-dropdown {
    border: 2px solid #E2E5E4;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(17, 59, 100, 0.10);
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-size: 14px;
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #008855;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #E8F5EE;
    color: #17221C;
}

/* ── Access logs table responsive ───────────────────────── */
@media (max-width: 768px) {
    .alog-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .alog-table-wrap .rt-col-headers,
    .alog-table-wrap .rt-row {
        min-width: 700px;
    }
}

/* ── Access logs HTML table ───────────────────────────────── */
.alog-tbl {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    background: #FEFFFD;
}

.alog-th {
    padding: 10px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #899F9F;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #F6F6F6;
    border-bottom: 1px solid #EAECEB;
    white-space: nowrap;
}

.alog-td {
    padding: 13px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #F0F2F1;
}

.alog-td-idx {
    font-size: 12px;
    color: #B3B3B3;
    font-weight: 500;
}

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

.alog-tr:hover .alog-td {
    background: #F8FAF9;
}

/* ── Access Logs page classes ─────────────────────────────── */
.alog-card-hdr {
    padding-bottom: 20px;
}

.alog-stats-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.alog-today-label {
    font-size: 12px;
    color: #899F9F;
}

.alog-total-count {
    font-size: 11px;
    color: #B3B3B3;
}

.rt-badge-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rt-search-wrap>svg {
    flex-shrink: 0;
}

.alog-sel-type {
    width: 128px;
}

.alog-sel-action {
    width: 108px;
}

.alog-table-outer {
    overflow-x: auto;
}

.alog-tbl col:nth-child(1) {
    width: 3%;
}

.alog-tbl col:nth-child(2) {
    width: 7%;
}

.alog-tbl col:nth-child(3) {
    width: 10%;
}

.alog-tbl col:nth-child(4) {
    width: 22%;
}

.alog-tbl col:nth-child(5) {
    width: 10%;
}

.alog-tbl col:nth-child(6) {
    width: 11%;
}

.alog-tbl col:nth-child(7) {
    width: 11%;
}

.alog-tbl col:nth-child(8) {
    width: 17%;
}

.alog-tbl col:nth-child(9) {
    width: 9%;
}

.alog-th.rt-ch-more {
    text-align: center;
}

.alog-td-time {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
}

.alog-td-date {
    font-size: 12px;
    color: #647272;
}

.alog-td-name {
    max-width: 0;
    overflow: hidden;
}

.alog-name-link {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alog-name-text {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alog-guest-text {
    font-size: 13px;
    color: #647272;
}

.alog-td-code {
    font-size: 12px;
    color: #899F9F;
}

.alog-td-gate {
    font-size: 13px;
    font-weight: 500;
    color: #17221C;
}

.alog-badge-student {
    background: #EBF4FF;
    color: #2980B9;
}

.alog-badge-staff {
    background: #F0F0F0;
    color: #647272;
}

.alog-badge-guest {
    background: #FFF3E6;
    color: #E65100;
}

.alog-del-form {
    display: inline;
}

.alog-empty-msg {
    padding: 56px 24px;
    text-align: center;
    color: #647272;
    font-size: 14px;
}

.alog-pagination {
    padding: 16px 24px 24px;
}

/* ── Access Logs create/edit forms ───────────────────────── */
.adm-alert-box {
    background: #FDECEA;
    border: 1px solid #F5C6CB;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #CE204E;
}

.adm-alert-list {
    margin: 0;
    padding-left: 16px;
}

.adm-field-mt {
    margin-top: 16px;
}

.adm-hidden {
    display: none;
}

.alog-select2 {
    width: 100% !important;
}

.adm-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-bottom: 8px;
}

.adm-submit-btn {
    height: 44px;
    padding: 0 28px;
    font-size: 14px;
}

/* First/last column edge padding — match card header 24px */
.alog-tbl th:first-child,
.alog-tbl td:first-child {
    padding-left: 24px;
}

.alog-tbl th:last-child,
.alog-tbl td:last-child {
    padding-right: 24px;
}

/* ── Visitors table ───────────────────────────────────────── */
.vst-tbl col:nth-child(1) {
    width: 3%;
}

.vst-tbl col:nth-child(2) {
    width: 22%;
}

.vst-tbl col:nth-child(3) {
    width: 13%;
}

.vst-tbl col:nth-child(4) {
    width: 20%;
}

.vst-tbl col:nth-child(5) {
    width: 14%;
}

.vst-tbl col:nth-child(6) {
    width: 18%;
}

.vst-tbl col:nth-child(7) {
    width: 10%;
}

.vst-sub-text {
    display: block;
    font-size: 11px;
    color: #899F9F;
    margin-top: 2px;
}

.vst-btn-checkout {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    background: #FFF3E6;
    color: #E65100;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
}

.vst-btn-checkout:hover {
    background: #FFE0C2;
}

.vst-done-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
}

/* ── alog-select2: match modal Select2 style ─────────────── */
.alog-select2+.select2-container {
    width: 100% !important;
}

.alog-select2+.select2-container--default .select2-selection--single {
    height: 44px;
    border: 2px solid #E2E5E4;
    border-radius: 12px;
    background: #FEFFFD;
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.alog-select2+.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #17221C;
    font-size: 14px;
    line-height: 44px;
    padding: 0;
}

.alog-select2+.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #C0CCCC;
    font-size: 14px;
}

.alog-select2+.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 12px;
}

.alog-select2+.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #647272 transparent transparent;
}

.alog-select2+.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #17221C;
}

.alog-select2+.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 24px;
    color: #899F9F;
}

/* Section gap — replaces adm-form-divider when divider is removed */
.adm-section-mt {
    margin-top: 24px;
}

/* ── Issues table ────────────────────────────────────────── */
.iss-tbl col:nth-child(1) {
    width: 3%;
}

.iss-tbl col:nth-child(2) {
    width: 22%;
}

.iss-tbl col:nth-child(3) {
    width: 8%;
}

.iss-tbl col:nth-child(4) {
    width: 9%;
}

.iss-tbl col:nth-child(5) {
    width: 11%;
}

.iss-tbl col:nth-child(6) {
    width: 18%;
}

.iss-tbl col:nth-child(7) {
    width: 13%;
}

.iss-tbl col:nth-child(8) {
    width: 9%;
}

.iss-tbl col:nth-child(9) {
    width: 7%;
}

.iss-sel-type {
    width: 152px;
}

.iss-sel-pri {
    width: 120px;
}

.iss-sel-st {
    width: 140px;
}

/* Issues priority badges */
.iss-p-1 {
    background: #E8F4FD;
    color: #2980B9;
}

.iss-p-2 {
    background: #FFF8E1;
    color: #F57F17;
}

.iss-p-3 {
    background: #FDECEA;
    color: #CE204E;
}

/* Issues status badges */
.iss-s-1 {
    background: #FFF3E6;
    color: #E65100;
}

.iss-s-2 {
    background: #E8F4FD;
    color: #2980B9;
}

.iss-s-3 {
    background: #E8F5E9;
    color: #388E3C;
}

.iss-s-4 {
    background: #F5F5F5;
    color: #647272;
}

/* ── Parking Tickets table ───────────────────────────────── */
.pkt-tbl col:nth-child(1) {
    width: 3%;
}

.pkt-tbl col:nth-child(2) {
    width: 22%;
}

.pkt-tbl col:nth-child(3) {
    width: 10%;
}

.pkt-tbl col:nth-child(4) {
    width: 18%;
}

.pkt-tbl col:nth-child(5) {
    width: 10%;
}

.pkt-tbl col:nth-child(6) {
    width: 11%;
}

.pkt-tbl col:nth-child(7) {
    width: 11%;
}

.pkt-tbl col:nth-child(8) {
    width: 15%;
}

.pkt-sel-vtype {
    width: 128px;
}

.pkt-sel-st {
    width: 128px;
}

/* Parking vehicle type badges */
.pkt-vtype-motorbike {
    background: #E8F4FD;
    color: #2980B9;
}

.pkt-vtype-electric {
    background: #FFF8E1;
    color: #F57F17;
}

.pkt-vtype-bicycle {
    background: #F5F5F5;
    color: #647272;
}

/* Parking status badges */
.pkt-status-active {
    background: #E8F5E9;
    color: #388E3C;
}

.pkt-status-inactive {
    background: #F5F5F5;
    color: #647272;
}

/* ── Staff Schedules table ───────────────────────────────── */
.sch-tbl col:nth-child(1) {
    width: 3%;
}

.sch-tbl col:nth-child(2) {
    width: 16%;
}

.sch-tbl col:nth-child(3) {
    width: 10%;
}

.sch-tbl col:nth-child(4) {
    width: 7%;
}

.sch-tbl col:nth-child(5) {
    width: 15%;
}

.sch-tbl col:nth-child(6) {
    width: 25%;
}

.sch-tbl col:nth-child(7) {
    width: 12%;
}

.sch-tbl col:nth-child(8) {
    width: 12%;
}

.sch-sel-user {
    width: 148px;
}

.sch-sel-date {
    height: 32px;
    border: 1.5px solid #E2E5E4;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    color: #17221C;
    background: #FEFFFD;
    font-family: inherit;
}

.sch-sel-date:focus {
    outline: none;
    border-color: #008855;
}

.sch-sel-shift {
    width: 100px;
}

.sch-sel-st {
    width: 136px;
}

/* Staff shift badges */
.sch-shift-morning {
    background: #FFF8E1;
    color: #F57F17;
}

.sch-shift-afternoon {
    background: #E8F4FD;
    color: #2980B9;
}

.sch-shift-night {
    background: #EDE7F6;
    color: #512DA8;
}

/* Staff status badges */
.sch-status-assigned {
    background: #F5F5F5;
    color: #647272;
}

.sch-status-confirmed {
    background: #E8F5E9;
    color: #388E3C;
}

.sch-status-completed {
    background: #EBF5FB;
    color: #1565C0;
}

.sch-status-absent {
    background: #FDECEA;
    color: #CE204E;
}

/* ═══════════════════════════════════════════════════════════════
   Accommodation — Status tabs + keyboard hint (trang danh sách lưu trú)
   ═══════════════════════════════════════════════════════════════ */
.vnu-status-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 28px;
    border-bottom: 1px solid #F0F4F0;
    flex-shrink: 0;
}

.vnu-status-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.vnu-status-tabs::-webkit-scrollbar {
    display: none;
}

.vnu-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #647272;
    background: transparent;
    border: 2px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s ease;
}

.vnu-status-tab:hover {
    background: #EFF5F2;
    color: #17221C;
    text-decoration: none;
}

.vnu-status-tab.active {
    background: #008855;
    color: #FEFFFD;
}

.vnu-status-tab.active:hover {
    background: #006B43;
    color: #FEFFFD;
}

.vnu-status-tab-count {
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 50px;
    text-align: center;
    background: #E0EEE1;
    color: #008855;
}

.vnu-status-tab.active .vnu-status-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #FEFFFD;
}

.vnu-kbd-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    color: #647272;
    white-space: nowrap;
    flex-shrink: 0;
}

.vnu-kbd-hint span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vnu-kbd-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid #D0D8D4;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #FEFFFD;
    color: #17221C;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 1100px) {
    .vnu-kbd-hint {
        display: none;
    }
}

/* ── Accommodation — Bulk select (chọn nhiều + thao tác hàng loạt) ── */
.vnu-acc-check-wrap {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.vnu-acc-check {
    width: 16px;
    height: 16px;
    accent-color: #008855;
    cursor: pointer;
}

.vnu-bulk-selectall {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 22px;
    border-bottom: 1px solid #F0F4F0;
    font-size: 12.5px;
    font-weight: 600;
    color: #647272;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

/* line-height khớp đúng 15px = chiều cao checkbox — chặn lệch tâm do khác biệt
   cách trình duyệt/OS tính baseline chữ so với box checkbox (đã thấy lệch trên
   Chrome Windows dù Chrome/Linux hiển thị đúng). */
.vnu-bulk-selectall span {
    line-height: 15px;
}

.vnu-bulk-selectall input {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: #008855;
    cursor: pointer;
    flex-shrink: 0;
}

.vnu-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #F0F4F0;
    background: #FEFFFD;
    flex-shrink: 0;
}

.vnu-bulk-count {
    font-size: 12.5px;
    color: #647272;
    margin-right: auto;
    white-space: nowrap;
}

.vnu-bulk-count strong {
    color: #008855;
    font-size: 14px;
}

.vnu-bulk-clear {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}

.vnu-bulk-clear:hover {
    color: #17221C;
}

/* ── Accommodation — polish: hint dưới list, empty state tích cực ── */
.vnu-kbd-hint-list {
    justify-content: center;
    gap: 12px;
    padding: 7px 10px;
    border-top: 1px solid #F0F4F0;
    flex-shrink: 0;
}

.vnu-acc-filters .vnu-search-input {
    min-width: 230px;
}

.vnu-acc-empty-positive p {
    color: #008855;
    font-weight: 600;
}

.vnu-acc-empty-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #647272;
    text-decoration: underline;
}

.vnu-acc-empty-link:hover {
    color: #008855;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   Accommodation — Responsive (MacBook nhỏ / tablet / điện thoại)
   ═══════════════════════════════════════════════════════════════ */

/* MacBook 13" và màn ~1440px trở xuống: thu gọn padding, ô tìm kiếm */
@media (max-width: 1440px) {
    .vnu-acc-header {
        padding: 16px 20px 12px;
    }

    .vnu-status-tabs-row {
        padding: 8px 20px;
    }

    .vnu-acc-filters .vnu-search-input {
        min-width: 180px;
    }

    .vnu-detail-header {
        padding: 18px 20px 14px;
    }

    .vnu-detail-body {
        padding: 18px 20px;
    }

    .vnu-detail-footer {
        padding: 12px 20px;
    }
}

/* Tablet: sidebar đã tự ẩn (rule chung 1024px), nới lại chiều cao */
@media (max-width: 1024px) {
    .vnu-acc-wrapper {
        height: calc(100vh - 120px);
        min-height: 480px;
    }

    .vnu-status-tab {
        padding: 0 11px;
    }
}

/* Điện thoại / tablet dọc: 1 cột — list full width, detail thành overlay.
   Bỏ cuộn lồng: wrapper cao tự nhiên, cả trang chỉ còn 1 thanh cuộn. */
@media (max-width: 900px) {
    .vnu-acc-wrapper {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .vnu-acc-body {
        overflow: visible;
    }

    .vnu-acc-list-panel {
        width: 100%;
        border-right: none;
        overflow: visible;
    }

    .vnu-acc-list-scroll {
        overflow: visible;
    }

    /* Thanh bulk dính đáy màn hình khi cuộn trang */
    .vnu-bulk-bar {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }

    .vnu-acc-detail-panel {
        display: none;
    }

    .vnu-acc-body.detail-open .vnu-acc-detail-panel {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: #FEFFFD;
    }

    /* Khóa cuộn trang phía sau khi overlay chi tiết đang mở */
    body:has(.vnu-acc-body.detail-open) {
        overflow: hidden;
    }

    .vnu-acc-header {
        padding: 12px 14px 10px;
        gap: 10px;
    }

    .vnu-acc-title {
        font-size: 17px;
    }

    .vnu-acc-filters {
        width: 100%;
        justify-content: flex-start;
    }

    .vnu-acc-filters .vnu-search-input {
        flex: 1;
        min-width: 0;
    }

    .vnu-status-tabs-row {
        padding: 6px 12px;
    }

    /* Thông tin chi tiết: 2 cột → 1 cột cho dễ đọc */
    .vnu-detail-grid {
        grid-template-columns: 1fr;
    }

    .vnu-detail-header {
        padding: 14px 16px 12px;
    }

    .vnu-detail-body {
        padding: 14px 16px;
    }

    .vnu-detail-footer {
        padding: 10px 16px;
    }
}

@media (max-width: 480px) {
    .vnu-acc-wrapper {
        border-radius: 16px;
    }

    /* Nút hành động chiếm đủ rộng cho ngón tay */
    .vnu-detail-footer .vnu-btn-action {
        flex: 1;
        justify-content: center;
    }

    .vnu-bulk-bar {
        flex-wrap: wrap;
    }
}

/* ============================================================
   IMPORT MÃ SINH VIÊN THEO CCCD (students-import-codes)
   ============================================================ */

.sic-page {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.sic-card {
    background: #FEFFFD;
    border-radius: 26px;
    padding: 32px;
    box-shadow: 0px 2px 10px 0px rgba(17, 59, 100, 0.07);
    width: min(560px, 100%);
}

.sic-label {
    font-size: 12px;
    font-weight: 600;
    color: #17221C;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
}

.sic-desc {
    font-size: 14px;
    color: #647272;
    line-height: 22px;
    margin: 0 0 12px;
}

.sic-missing {
    font-size: 14px;
    color: #BF570C;
    background: #FFE8D5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
}

.sic-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 16px;
    border: 1.5px dashed #4CD681;
    background: #EEFEEF;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}

.sic-dropzone:hover {
    background: #E2FBE6;
}

.sic-dropzone-title {
    font-size: 14px;
    font-weight: 600;
    color: #008855;
}

.sic-dropzone-hint {
    font-size: 13px;
    color: #647272;
}

.sic-file-name {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    margin-top: 4px;
}

.sic-submit {
    width: 100%;
    height: 42px;
    margin-top: 14px;
    background: #17221C;
    color: #FEFFFD;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.sic-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sic-guide {
    margin-top: 22px;
    border-top: 2px solid #F6F6F6;
    padding-top: 16px;
}

.sic-guide-title {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
    margin: 0 0 8px;
}

.sic-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 10px;
}

.sic-guide-table th,
.sic-guide-table td {
    border: 1px solid #E2E5E4;
    padding: 6px 12px;
    text-align: left;
}

.sic-guide-table th {
    background: #F6F6F6;
    font-size: 12px;
    font-weight: 700;
    color: #647272;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sic-guide-notes {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #647272;
    line-height: 22px;
}

/* Nút tải file mẫu trong trang import mã SV */
.sic-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    margin-bottom: 16px;
    background: #FEFFFD;
    color: #008855;
    border: 1.5px solid #4CD681;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.sic-template-btn:hover {
    background: #EEFEEF;
    color: #008855;
}

/* ══════════════════════════════════════════════════
   Profile sinh viên — Responsive + tiện ích dọn inline style
   ══════════════════════════════════════════════════ */

/* Bảng trong cột chi tiết luôn cuộn ngang khi hẹp, không tràn body */
.vnu-profile-table-wrap {
    overflow-x: auto;
}

.vnu-profile-table {
    width: 100%;
}

/* ≤1024px: gộp 2 cột trên + cột chi tiết xuống hàng, bỏ viền dọc */
@media (max-width: 1024px) {

    .vnu-profile-grid,
    .vnu-profile-grid--ngoai-tru {
        grid-template-columns: 1fr 1fr;
    }

    .vnu-profile-col--detail {
        grid-column: 1 / -1;
        border-top: 1px solid #E2E5E4;
        padding-top: 24px;
    }

    .vnu-profile-col--status {
        border-right: none;
    }
}

/* ≤768px: stack toàn bộ 1 cột, bỏ viền dọc, padding gọn */
@media (max-width: 768px) {

    .vnu-profile-grid,
    .vnu-profile-grid--ngoai-tru {
        grid-template-columns: 1fr;
    }

    .vnu-profile-col {
        padding: 20px 0;
        border-right: none !important;
    }

    .vnu-profile-col--left {
        border-bottom: 1px solid #E2E5E4;
    }

    .vnu-profile-col--status {
        border-bottom: 1px solid #E2E5E4;
    }

    .vnu-profile-col--detail {
        border-top: none;
    }
}

/* ── Lớp tiện ích thay cho inline style (profile) ── */
.u-mt-16 {
    margin-top: 16px;
}

.u-mt-10 {
    margin-top: 10px;
}

.u-nowrap {
    white-space: nowrap;
}

.vnu-profile-mate-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vnu-profile-mate-name .vnu-icon-mid {
    vertical-align: middle;
    flex-shrink: 0;
}

.vnu-profile-mate-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vnu-profile-mate-actions img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: .7;
}

.vnu-profile-section-title-mb {
    margin-bottom: 16px;
}

.vnu-status-addr {
    font-size: 12px;
    line-height: 1.5;
}

.vnu-txt-success {
    color: #03CC80;
    font-weight: 600;
}

.vnu-vpr-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.vnu-del-form-inline {
    flex-shrink: 0;
}

.u-break-all {
    word-break: break-all;
}

.u-lh-15 {
    line-height: 1.5;
}

.u-fw-500 {
    font-weight: 500;
}

.u-fs-12 {
    font-size: 12px;
}

.u-hidden {
    display: none;
}

.u-muted {
    color: #899F9F;
}

.u-muted-sm {
    font-size: 11px;
    color: #899F9F;
}

.u-muted-sm-mt {
    font-size: 11px;
    color: #899F9F;
    margin-top: 2px;
}

.u-current-sm {
    font-size: 11px;
    color: #03CC80;
    font-weight: 600;
}

.vnu-status-addr {
    font-size: 12px;
    line-height: 1.5;
}

.vnu-violation-severity {
    color: var(--sev, inherit);
}

/* ══════════════════════════════════════════════════
   Utility classes — thay cho inline style (dọn blade)
   ══════════════════════════════════════════════════ */
.u-inline {
    display: inline;
}

.u-inline-block {
    display: inline-block;
}

.u-block {
    display: block;
}

.u-flex {
    display: flex;
}

.u-flex-col {
    display: flex;
    flex-direction: column;
}

.u-flex-center {
    display: flex;
    align-items: center;
}

.u-flex-shrink0 {
    flex-shrink: 0;
}

.u-flex-1 {
    flex: 1;
}

.u-items-center {
    align-items: center;
}

.u-gap-2 {
    gap: 2px;
}

.u-gap-6 {
    gap: 6px;
}

.u-gap-8 {
    gap: 8px;
}

.u-gap-10 {
    gap: 10px;
}

.u-gap-12 {
    gap: 12px;
}

.u-gap-16 {
    gap: 16px;
}

.u-mb-8 {
    margin-bottom: 8px;
}

.u-mb-10 {
    margin-bottom: 10px;
}

.u-mb-16 {
    margin-bottom: 16px;
}

.u-mb-20 {
    margin-bottom: 20px;
}

.u-mt-3 {
    margin-top: 3px;
}

.u-mt-4 {
    margin-top: 4px;
}

.u-mt-6 {
    margin-top: 6px;
}

.u-mt-8 {
    margin-top: 8px;
}

.u-m-0 {
    margin: 0;
}

.u-text-right {
    text-align: right;
}

.u-text-center {
    text-align: center;
}

.u-nowrap {
    white-space: nowrap;
}

.u-lh-13 {
    line-height: 1.3;
}

.u-fs-11 {
    font-size: 11px;
}

.u-fs-13 {
    font-size: 13px;
}

.u-fw-600 {
    font-weight: 600;
}

.u-opacity-5 {
    opacity: .5;
}

.u-w-48 {
    width: 48px;
}

.u-w-100 {
    width: 100px;
}

.u-w-120 {
    width: 120px;
}

.u-w-160 {
    width: 160px;
}

.u-w-520 {
    width: 520px;
}

.u-w-full {
    width: 100%;
}

.u-col-span-2 {
    grid-column: span 2;
}

/* Màu chữ hay dùng */
.u-c-muted {
    color: #647272;
}

.u-c-b3 {
    color: #B3B3B3;
    font-size: 13px;
}

.u-c-899 {
    color: #899F9F;
}

.u-c-899-12 {
    color: #899F9F;
    font-size: 12px;
    font-weight: 400;
}

.u-c-danger {
    color: #ED3E09;
    font-size: 12px;
    margin-top: 3px;
}

.u-c-red {
    color: red;
}

.u-c-strong {
    font-weight: 600;
    color: #17221C;
}

/* Empty state chung của các trang list */
.u-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: #647272;
    font-size: 14px;
}

/* Ảnh thumbnail phủ ô */
.u-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* ── Violations list (dọn inline) ── */
.rt-grid-violations {
    grid-template-columns: 36px 180px 1fr 110px 100px 100px 80px;
}

.vio-cell-student {
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vio-cell-title {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vio-student-link {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    text-decoration: none;
    line-height: 1.3;
}

.vio-title-text {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    line-height: 1.3;
}

.vio-sub {
    font-size: 11px;
    color: #899F9F;
}

.vio-cell-imgs {
    padding: 14px 8px;
    display: flex;
    gap: 3px;
    align-items: center;
    flex-wrap: wrap;
}

.vio-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #E2E5E4;
}

.vio-thumb-more {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #F6F6F6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #647272;
    border: 1px solid #E2E5E4;
}

.vio-thumb-none {
    color: #C4C4C4;
    font-size: 12px;
}

.rt-badge-sev {
    background: var(--sev-bg);
    color: var(--sev-c);
}

.rt-add-btn-grey {
    background: #647272;
}

/* ── Thùng rác lưu trú (accommodations) ── */
.rt-grid-accommodations-trash {
    grid-template-columns: 36px 1fr 1fr 120px 120px 90px;
}

/* ── Tài khoản VNU (thí sinh trúng tuyển) list ── */
.rt-grid-onevnu-accounts {
    grid-template-columns: 36px 130px 1fr 110px 120px 1fr 90px 100px 130px;
}

.onevnu-cell-name {
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onevnu-university {
    font-size: 11px;
    color: #899F9F;
}

.u-w-150 {
    width: 150px;
}

.u-pad-list-bottom {
    padding: 16px 24px 24px;
}

.u-pad-card {
    padding: 16px 24px 24px;
}

/* Utility bổ sung cho script dọn inline */
.u-grid {
    display: grid;
}

.u-flex-dir-col {
    flex-direction: column;
}

.u-flex-wrap {
    flex-wrap: wrap;
}

.u-justify-center {
    justify-content: center;
}

.u-gap-3 {
    gap: 3px;
}

.u-ml-12 {
    margin-left: 12px;
}

.u-fs-10 {
    font-size: 10px;
}

.u-fs-12 {
    font-size: 12px;
}

.u-fs-14 {
    font-size: 14px;
}

.u-fw-400 {
    font-weight: 400;
}

.u-lh-15 {
    line-height: 1.5;
}

.u-cursor-pointer {
    cursor: pointer;
}

.u-object-cover {
    object-fit: cover;
}

.u-object-contain {
    object-fit: contain;
}

.u-radius-6 {
    border-radius: 6px;
}

.u-h-full {
    height: 100%;
}

/* Color/bg utils cho script dọn inline */
.u-color-b3 {
    color: #B3B3B3;
}

.u-color-17 {
    color: #17221C;
}

.u-color-c4 {
    color: #C4C4C4;
}

.u-color-ed {
    color: #ED3E09;
}

.u-bg-647 {
    background: #647272;
}

.u-bg-f6 {
    background: #F6F6F6;
}

.u-w-100pct {
    width: 100%;
}

.u-h-100pct {
    height: 100%;
}

.u-w-32 {
    width: 32px;
}

.u-w-130 {
    width: 130px;
}

.u-w-140 {
    width: 140px;
}

.u-no-underline {
    text-decoration: none;
}

.u-bg-f0 {
    background: #f0f0f0;
}

/* ── Class thay các inline đa khai báo hay lặp (dọn blade) ── */
.u-pl-12 {
    padding-left: 12px;
}

.u-empty-24 {
    text-align: center;
    padding: 24px;
    color: #647272;
}

.u-empty-40 {
    padding: 40px;
    text-align: center;
    color: #647272;
}

.u-empty-40-danger {
    padding: 40px;
    text-align: center;
    color: #ED3E09;
}

.u-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.u-cb-green {
    cursor: pointer;
    accent-color: #038141;
}

.u-input-sm {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.fee-panel-row {
    padding: 10px 20px;
    font-size: 14px;
    color: #647272;
    border-bottom: 1px solid #E8F2EC;
}

.fee-panel-row-right {
    padding: 10px 20px;
    font-size: 14px;
    text-align: right;
    border-bottom: 1px solid #E8F2EC;
}

.badge-code-green {
    background: #F6F6F6;
    color: #038141;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.badge-pill-green {
    background: #E0EEE1;
    color: #038141;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Grid cột danh sách (list header + row) */
.lc-a {
    grid-template-columns: 36px 1fr 160px 150px 100px;
}

.lc-b {
    grid-template-columns: 36px 1fr 220px 150px 100px;
}

.lc-c {
    grid-template-columns: 36px 1fr 220px 120px 100px;
}

.lc-d {
    grid-template-columns: 36px 1fr 180px 90px 100px;
}

.lc-e {
    grid-template-columns: 36px 1fr 180px 150px 100px;
}

.lc-f {
    grid-template-columns: 36px 1fr 160px 160px 130px 110px 100px;
}

.lc-g {
    grid-template-columns: 36px 1fr 160px 110px 110px 110px 100px;
}

.lc-h {
    grid-template-columns: 48px 1fr 150px 100px;
}

.lc-i {
    grid-template-columns: 48px 1fr 120px 100px;
}

.lc-j {
    grid-template-columns: 36px 180px 1fr 130px 150px 100px;
}

/* ── Class cho các inline one-off còn lại (dọn blade) ── */
.u-mt-20 {
    margin-top: 20px;
}

.u-mt-24 {
    margin-top: 24px;
}

.u-mt20-mb16 {
    margin-top: 20px;
    margin-bottom: 16px;
}

.u-ml-auto {
    margin-left: auto;
}

.u-h-66 {
    height: 66px;
}

.u-img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.u-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-scroll-400 {
    height: auto;
    max-height: 400px;
    overflow-y: auto;
}

.u-gcol-1 {
    grid-column: 1/2;
}

.u-textarea-v {
    height: auto;
    resize: vertical;
}

.acc-meta {
    font-size: 11px;
    margin-right: 4px;
    opacity: .6;
}

.acc-scroll-loading {
    display: none;
    text-align: center;
    padding: 10px;
}

.bf-grid {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 16px;
    margin-bottom: 16px;
}

.dept-capsule-select {
    height: 36px;
    width: 160px;
    border-radius: 50px;
    font-size: 13px;
    padding: 0 14px;
}

.db-empty-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    gap: 16px;
    color: #647272;
}

.db-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #17221C;
}

.db-empty-note {
    color: #B3B3B3;
    font-size: 13px;
    padding: 12px;
}

.inv-seg-base {
    flex: 1;
    background: #E2E5E4;
}

.inv-seg-green {
    background: #4CD681;
}

.inv-seg-yellow {
    background: #FCAF00;
}

.inv-seg-red {
    background: #FC5913;
}

/* ================================================================
   Báo cáo Thu chi (receipts/report.blade.php) — Bootstrap 5 card,
   chỉ thêm accent màu VNU + icon badge, biểu đồ dùng ApexCharts.
   ================================================================ */
.rpt-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, .07);
}

.rpt-stat-card .card-body {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rpt-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: #fff;
}

.rpt-icon-green {
    background: #008855;
}

.rpt-icon-red {
    background: #E4483A;
}

.rpt-icon-orange {
    background: #FCAF00;
}

.rpt-icon-blue {
    background: #3BB0FF;
}

.rpt-stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #647272;
    margin-bottom: 2px;
}

.rpt-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #17221C;
}

.rpt-chart-card .card-header {
    background: transparent;
    border-bottom: 1px solid #E2E5E4;
    font-weight: 700;
    color: #17221C;
}

.rpt-table-card .card-header {
    background: transparent;
    border-bottom: 1px solid #E2E5E4;
    font-weight: 700;
    color: #17221C;
}

.rpt-table-card table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #899F9F;
    border-top: none;
}

.res-gauge-pad {
    padding: 6px 24px 0;
}

.badge-grey-role {
    background: #F0F2F1;
    color: #647272;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.role-perm-count {
    color: #C8CEC9;
    font-size: 12px;
}

.qlp-search-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.usr-perm-row {
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 4px;
    flex-wrap: wrap;
}

.tr-collapse-hidden {
    display: none;
    padding: 0 20px 8px;
}

.tr-fixed-hidden {
    display: none;
    position: fixed;
    z-index: 999;
}

/* Popup xác nhận (vnuConfirm) trong layout */
.vnu-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 34, 28, .45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.vnu-confirm-card {
    background: #FEFFFD;
    border-radius: 20px;
    padding: 32px 28px 24px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    text-align: center;
}

.vnu-confirm-title {
    font-size: 17px;
    font-weight: 700;
    color: #17221C;
    margin-bottom: 8px;
    line-height: 1.4;
}

.vnu-confirm-msg {
    font-size: 15px;
    font-weight: 600;
    color: #17221C;
    margin-bottom: 24px;
    line-height: 1.5;
}

.vnu-confirm-btn-cancel {
    flex: 1;
    padding: 10px;
    border: 1.5px solid #E2E5E4;
    border-radius: 50px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #647272;
    cursor: pointer;
}

.vnu-confirm-btn-ok {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 50px;
    background: #008855;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

/* Trưởng phòng — nút đặt & badge (profile SV) */
.vnu-leader-btn {
    border: 1px solid #B2E5C7;
    background: #EEFEEF;
    color: #008855;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.vnu-leader-btn:hover {
    background: #008855;
    color: #fff;
}

.vnu-leader-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #00803D;
    background: #D0FAE5;
    padding: 2px 10px;
    border-radius: 20px;
}

/* ══ Màn Điện/Nước (biểu giá + nhập chỉ số) ══ */
.uf-page {
    padding: 4px;
}

.uf-card {
    background: #FEFFFD;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(17, 59, 100, .07);
    padding: 24px 28px;
}

.uf-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #17221C;
    margin-bottom: 8px;
}

.uf-desc {
    font-size: 13px;
    color: #647272;
    line-height: 1.5;
    margin-bottom: 20px;
}

.uf-tariff-block {
    margin-bottom: 32px;
}

.uf-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.uf-block-title {
    font-size: 14px;
    font-weight: 600;
    color: #17221C;
}

.uf-add-row {
    border: 1px dashed #B2E5C7;
    background: #EEFEEF;
    color: #008855;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.uf-add-row:hover {
    background: #008855;
    color: #fff;
    border-color: #008855;
}

.uf-table {
    width: 100%;
    border-collapse: collapse;
}

.uf-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #B3B3B3;
    text-align: left;
    padding: 6px 8px;
}

.uf-table td {
    padding: 5px 8px;
    border-top: 1px solid #EEF1F0;
}

.uf-th-idx {
    width: 48px;
}

.uf-idx {
    color: #899F9F;
    font-size: 13px;
}

.uf-input {
    width: 100%;
    height: 34px;
    border: 1px solid #E2E5E4;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 14px;
    color: #17221C;
    outline: none;
}

.uf-input:focus {
    border-color: #008855;
}

.uf-del-row {
    width: 26px;
    height: 26px;
    border: none;
    background: #F6F6F6;
    color: #E5484D;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.uf-del-row:hover {
    background: #E5484D;
    color: #fff;
}

.uf-save-btn {
    margin-top: 14px;
    background: #008855;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.uf-save-btn:hover {
    background: #00713f;
}

.uf-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.uf-select {
    height: 38px;
    border: 1px solid #E2E5E4;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    color: #17221C;
    background: #fff;
    outline: none;
}

/* Ô hiển thị giá trị đã khoá cứng (vd KTX của user đang đăng nhập) — cùng kích
   thước với .uf-select nhưng nền xám, không phải input, báo hiệu không sửa được. */
.uf-select--locked {
    display: flex;
    align-items: center;
    background: #F5F7F6;
    color: #647272;
    cursor: not-allowed;
}

.uf-year {
    width: 100px;
}

.uf-filter-btn {
    height: 38px;
    background: #17221C;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* .vnu-filter-reset mặc định flex:1 (thiết kế cho .vnu-filter-panel-footer) — trong
   .uf-filter-bar (hàng input/select cuộn ngang) nó bị giãn hết chiều rộng còn lại,
   ghi đè về kích thước như 1 link bình thường. */
.uf-filter-bar .vnu-filter-reset {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
}

.uf-warning {
    background: #FFF7E6;
    border: 1px solid #FFE0A3;
    color: #A15C00;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.uf-warning a {
    color: #008855;
    font-weight: 600;
}

.uf-room-name {
    font-weight: 600;
    color: #17221C;
}

.uf-consumption {
    color: #647272;
}

.uf-amount {
    font-weight: 600;
    color: #008855;
}

.uf-meter-table th,
.uf-meter-table td {
    padding: 6px 10px;
}

.uf-old-locked {
    display: inline-block;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #647272;
}

.uf-init-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.uf-input-init {
    border: 1px dashed #F59E0B;
    background: #FFFBEB;
    max-width: 150px;
}

.uf-init-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #B45309;
    background: #FEF3C7;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.uf-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #E8F2EC;
    margin-bottom: 20px;
}

.uf-tab {
    font-size: 13px;
    font-weight: 600;
    color: #647272;
    text-decoration: none;
    padding: 0 2px 12px;
    position: relative;
}

.uf-tab.active {
    color: #17221C;
}

.uf-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #008855;
}

.uf-btn-row {
    margin-top: 14px;
}

.uf-close-btn {
    margin-top: 14px;
    background: #17221C;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.uf-close-btn:hover {
    background: #000;
}

.uf-close-hint {
    margin-left: 12px;
    font-size: 12px;
    color: #899F9F;
}

.uf-badge-closed {
    background: #D0FAE5;
    border: 1px solid #A7ECC7;
    color: #00803D;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.uf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.uf-actions .uf-save-btn,
.uf-actions .uf-close-btn {
    margin-top: 0;
}

.uf-close-hint {
    display: block;
    margin-top: 8px;
    margin-left: 0;
}

/* ── Pricing tab — đơn vị giá + bảng vé lượt tham khảo ── */
.vnu-pricing-unit {
    font-size: 11px;
    font-weight: 600;
    color: #647272;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

.vnu-pricing-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #17221C;
}

.vnu-pricing-ref-table th,
.vnu-pricing-ref-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #F0F4F0;
}

.vnu-pricing-ref-table th {
    font-size: 11.5px;
    font-weight: 700;
    color: #647272;
    text-transform: uppercase;
}

.vnu-pricing-ref-table td:not(:first-child) {
    font-weight: 600;
    white-space: nowrap;
}

.vnu-pricing-ref-note {
    margin-top: 10px;
    font-size: 12px;
    color: #647272;
    line-height: 1.5;
}

/* ── Billing periods — preset kỳ + hint + nút tạo nhanh ── */
.bp-form-hint {
    font-size: 12px;
    color: #647272;
    margin-top: 6px;
    line-height: 1.5;
}

.bp-preset-row {
    display: flex;
    gap: 8px;
}

.bp-preset-btn {
    flex: 1;
    height: 34px;
    border: 2px solid #D0D8D4;
    border-radius: 50px;
    background: #FEFFFD;
    font-size: 13px;
    font-weight: 600;
    color: #647272;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bp-preset-btn:hover {
    border-color: #008855;
    color: #008855;
}

.bp-preset-btn.active {
    background: #008855;
    border-color: #008855;
    color: #FEFFFD;
}

.bp-quick-form {
    margin-top: 10px;
}

.bp-quick-btn {
    width: 100%;
    height: 38px;
    border: 2px dashed #C8D8D0;
    border-radius: 12px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #647272;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bp-quick-btn:hover {
    border-color: #008855;
    color: #008855;
}

/* ═══════════════════════════════════════════════════════════════
   Sổ thu chi (cashbook ledger)
   ═══════════════════════════════════════════════════════════════ */
.cb-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    flex-wrap: wrap;
}

.cb-summary-item {
    border-radius: 14px;
    padding: 12px 22px;
    min-width: 160px;
}

.cb-summary-in {
    background: #E8F5E9;
}

.cb-summary-out {
    background: #FDECEA;
}

.cb-summary-net {
    background: #EFF5F2;
}

.cb-summary-label {
    font-size: 12px;
    font-weight: 600;
    color: #647272;
    margin-bottom: 4px;
}

.cb-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: #17221C;
}

.cb-summary-in .cb-summary-value {
    color: #008855;
}

.cb-summary-out .cb-summary-value {
    color: #CE204E;
}

.cb-summary-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.cb-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px 14px;
    flex-wrap: wrap;
}

.cb-receipt-no {
    font-weight: 700;
    white-space: nowrap;
}

.cb-badge-out {
    background: #FDECEA;
    color: #CE204E;
}

.cb-note {
    max-width: 320px;
}

.cb-amount {
    font-weight: 700;
    white-space: nowrap;
}

.cb-amount-in {
    color: #008855;
}

.cb-amount-out {
    color: #CE204E;
}

@media (max-width: 900px) {
    .cb-summary-actions {
        margin-left: 0;
        width: 100%;
    }

    .cb-note {
        max-width: none;
    }
}

.bp-month-row {
    display: flex;
    gap: 10px;
}

.bp-month-row .bp-select {
    flex: 1;
    min-width: 0;
}

/* Tạo biên lai thủ công */
.mi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 20px;
}

.mi-mode-row {
    display: flex;
    gap: 20px;
}

.mi-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #17221C;
    cursor: pointer;
}

.mi-mode input {
    accent-color: #008855;
    cursor: pointer;
}

.mi-total {
    font-size: 14px;
    color: #647272;
    margin: 4px 0 8px;
}

.mi-total strong {
    color: #008855;
    font-size: 16px;
}

.mi-cancel {
    color: #647272;
    font-size: 14px;
    text-decoration: none;
}

/* Nút "Xoá dòng" trong bảng dòng chi tiết biên lai (receipts/edit.blade.php,
   receipts/adjust.blade.php) — trước đây không có CSS riêng nên <button> nhận style mặc
   định của trình duyệt + bị .mi-grid kéo giãn full-width trông rất xấu. Dùng palette đỏ
   xoá dùng chung với .rt-btn-del (#FFE4E6/#CE204E) nhưng dạng pill nhỏ vì đây là nút chữ,
   không phải icon vuông. */
.ie-remove-row {
    justify-self: start;
    align-self: center;
    width: fit-content;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #FFE4E6;
    color: #CE204E;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s;
}

.ie-remove-row:hover {
    background: #FFD0D6;
}

.mi-cancel:hover {
    color: #17221C;
    text-decoration: underline;
}

.bp-select:disabled,
.bp-input:disabled {
    background: #F4F6F5;
    color: #899F9F;
    cursor: not-allowed;
}

.mi-note {
    font-size: 12px;
    color: #899F9F;
    font-weight: 400;
}

.fee-amount[title] {
    cursor: help;
}

/* ==================================================================
   LƯỚI AN TOÀN RESPONSIVE — áp cho mọi màn, không cần sửa từng blade
   ================================================================== */

/* Nhãn menu: xấu nhất là cắt bằng "…", tuyệt đối không xuống dòng
   (xuống dòng làm vỡ chiều cao hàng, lệch icon — lỗi đã gặp) */
.vnu-menu-item {
    white-space: nowrap;
}

.vnu-menu-item>span,
.vnu-menu-item>a {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trang không bao giờ được cuộn ngang; phần nào rộng thì tự nó cuộn */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Bảng rộng → cuộn ngang trong khung của nó thay vì đẩy vỡ layout.
   Chỉ bật ở màn hẹp để không đổi cách render bảng trên desktop. */
@media (max-width: 900px) {
    .vnu-main table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vnu-main table th,
    .vnu-main table td {
        white-space: nowrap;
    }
}

/* Ảnh/media không tràn khung */
img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Lưới 2 cột của các form → 1 cột khi hẹp */
@media (max-width: 720px) {

    .mi-grid,
    .bp-form-grid,
    .vnu-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Cụm nút: xuống dòng thay vì tràn ra ngoài card */
.vnu-card-actions,
.bp-form-actions,
.fee-toolbar {
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   Utilities — PHẢI để cuối file.
   .u-none cùng độ ưu tiên (0,1,0) với các class layout như .mi-grid
   (display:grid), nên chỉ thắng nhờ đứng sau. Đừng chuyển lên trên.
   Không dùng !important để jQuery .show()/.toggle() (inline style)
   vẫn ghi đè được.
------------------------------------------------------------------ */
.u-none {
    display: none;
}

/* ── Cấu hình phí — hàng "+ Thêm" vé xe (vé tháng / vé lượt) ── */
.vnu-pricing-add-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.vnu-pricing-add-name,
.vnu-pricing-add-amount {
    height: 34px;
    border: 1px dashed #C8D0CE;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    color: #17221C;
    background: transparent;
    outline: none;
    min-width: 0;
    font-family: inherit;
}

.vnu-pricing-add-name {
    flex: 1.3;
}

.vnu-pricing-add-amount {
    flex: 1;
}

.vnu-pricing-add-name:focus,
.vnu-pricing-add-amount:focus {
    border-color: #008855;
    border-style: solid;
}

.vnu-pricing-add-name::placeholder,
.vnu-pricing-add-amount::placeholder {
    color: #B0B0B0;
}

.vnu-pricing-add-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 6px;
    background: #008855;
    color: #FEFFFD;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.vnu-pricing-add-btn:hover {
    background: #006B43;
}

.vnu-pricing-add-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Phương thức thanh toán (payment_methods) */
#modal-add-pm form,
#modal-edit-pm form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rt-grid-payment-methods {
    grid-template-columns: 36px 1.2fr 1.6fr 70px 100px 90px;
}

.pm-cell-name {
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-name-text {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    line-height: 1.3;
}

.pm-cell-bank {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-bank-line {
    font-size: 13px;
    font-weight: 600;
    color: #17221C;
    line-height: 1.3;
}

.pm-cell-qr {
    padding: 14px 8px;
}

.pm-qr-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #E2E5E4;
}

/* Xác nhận thanh toán chuyển khoản (payments/pending) */
.rt-grid-payments-pending {
    grid-template-columns: 36px 180px 1fr 120px 110px 120px 150px;
    column-gap: 10px;
}

.pp-cell-student {
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-cell-receipt {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-student-note {
    font-style: italic;
}

.pp-proof-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #E2E5E4;
    cursor: pointer;
}

.pp-actions-row {
    display: flex;
    gap: 6px;
}

.pp-btn-confirm,
.pp-btn-reject {
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pp-btn-confirm {
    background: #E8F5EE;
    color: #008855;
}

.pp-btn-confirm:hover {
    background: #008855;
    color: #fff;
}

.pp-btn-reject {
    background: #FFE4E6;
    color: #CE204E;
}

.pp-btn-reject:hover {
    background: #CE204E;
    color: #fff;
}

.pp-proof-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

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

.pp-proof-modal-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
}

.pp-proof-modal-close {
    position: absolute;
    top: 24px;
    right: 32px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

#modal-pp-confirm form,
#modal-pp-reject form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-confirm-receipt-box {
    background: #F6F6F6;
    border-radius: 10px;
    padding: 12px 14px;
}

.pp-confirm-receipt-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #E2E5E4;
}

.pp-confirm-receipt-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #647272;
    padding: 3px 0;
}

.pp-confirm-receipt-meta-row span:last-child {
    color: #17221C;
    font-weight: 500;
}

.pp-confirm-receipt-items {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #E2E5E4;
}

.pp-confirm-receipt-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #E2E5E4;
    font-weight: 700;
}

.pp-confirm-receipt-total span:last-child {
    color: #008855;
    font-weight: 700;
}

/* Căn lề bộ lọc toà/trạng thái/loại/thu-chi/ngày (dùng chung style .uf-filter-bar) */
.inv-filter-bar {
    padding: 0 16px 12px;
}

/* Toolbar "Sửa ngày hàng loạt" — hiện khi có ≥1 biên lai tiền phòng chưa TT được chọn */
.inv-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    margin: 0 0 10px;
    background: #F6F6F6;
    border-radius: 10px;
    font-size: 13px;
    color: #647272;
}

.inv-select-cell {
    width: 36px;
    text-align: center;
}

.inv-select-cell input,
.fee-action-icon-btn.js-edit-receipt-dates {
    cursor: pointer;
}

.fee-action-icon-btn.js-edit-receipt-dates {
    line-height: 22px;
}

.fee-action-icon-btn.js-edit-receipt-dates i {
    font-size: 17px;
    color: #647272;
    vertical-align: middle;
}

/* Nút Xác nhận/Từ chối khi hiện trong panel chi tiết biên lai (thay cho btn-fee-pay) —
   width:100% để .pp-actions-row (vốn chỉ co theo nội dung) giãn hết chiều rộng panel,
   giống hệt cách .btn-fee-pay (flex:1, con trực tiếp của .fee-panel-actions) đang làm. */
.pp-actions-row--panel {
    width: 100%;
}

.pp-actions-row--panel .pp-btn-confirm,
.pp-actions-row--panel .pp-btn-reject {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
}