/* =====================================================================
   Nhà nghỉ / Khách sạn — Custom theme
   Reskins Bootstrap 5.3 via CSS variables + adds the admin layout
   (responsive offcanvas sidebar, cards, tables, forms, dashboard tiles).
   ===================================================================== */

:root {
    /* Brand (indigo) — overrides Bootstrap's default blue everywhere:
       buttons, links, form focus rings, pagination, badges, etc. */
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-text-emphasis: #3730a3;
    --bs-primary-bg-subtle: #e0e7ff;
    --bs-primary-border-subtle: #c7d2fe;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-link-hover-color-rgb: 67, 56, 202;

    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1.25rem;

    --app-bg: #f4f5fa;
    --app-surface: #ffffff;
    --app-border: #e6e8f0;
    --app-text-muted: #6b7280;
    --app-sidebar-bg: #161b34;
    --app-sidebar-bg-active: #2a3163;
    --app-sidebar-text: #d3d7ee;
    --app-sidebar-text-active: #ffffff;
    --app-sidebar-section-title: #9aa1c4;
    --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --app-shadow-md: 0 4px 10px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .05);
}

html, body { height: 100%; }

body {
    background-color: var(--app-bg);
    color: #1f2430;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ---------------------------------------------------------------------
   Booking panel: highlight key fields (khach hang / hinh thuc thue / so khach)
   --------------------------------------------------------------------- */
.field-highlight {
    background: #f5f6ff;
    border-left: 3px solid var(--bs-primary, #4f46e5);
    border-radius: var(--bs-border-radius-sm, .5rem);
    padding: .4rem .625rem .5rem;
}

.field-highlight .form-label {
    color: var(--app-text-muted, #6b7280);
    /* Ở màn hình vừa (3 cột chia đều, khoảng tablet) nhãn dài như
       "Khách hàng đã có" dễ bị xuống dòng, kéo 3 ô nổi bật (khách hàng /
       hình thức thuê / số khách) lệch cao thấp không đều nhau — rút gọn
       bằng dấu "…" để 3 ô luôn cùng chiều cao, đồng bộ như nhau. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.field-highlight .form-label i {
    color: var(--bs-primary, #4f46e5);
    margin-right: .25rem;
    font-size: .85em;
}

.field-highlight .form-select:focus,
.field-highlight .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 79, 70, 229), .2);
}

/* ---------------------------------------------------------------------
   Clickable table rows (bam vao dong de xem chi tiet, thay vi nut rieng)
   --------------------------------------------------------------------- */
.row-clickable {
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   App shell layout
   --------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

.app-main {
    /* This is the flex item that sits next to the sidebar inside
       .app-shell (a row flex container). Without flex-grow it only
       sizes to its own content's natural width, so a page with little
       content (a short form) renders as a narrow column with a big
       empty gap on the right, while a page with a wide table renders
       full width — the exact "trang hẹp trang rộng" inconsistency.
       flex: 1 1 auto makes it always fill the remaining row width,
       regardless of how much content the page has. */
    flex: 1 1 auto;
    min-width: 0; /* allow flex child to shrink so tables can scroll instead of overflowing the page */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------
   Sidebar (responsive offcanvas below lg, static column from lg up)
   --------------------------------------------------------------------- */
.sidebar {
    --bs-offcanvas-width: 264px;
    width: 264px;
    flex-shrink: 0;
    background: var(--app-sidebar-bg) !important;
    color: var(--app-sidebar-text) !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}

/* Bootstrap's responsive offcanvas (.offcanvas-lg) forces
   background-color: transparent !important on both the offcanvas root
   AND its .offcanvas-body from the lg breakpoint up, so it can sit
   inline as a static flex child. Re-assert our dark background
   (with !important, after Bootstrap's stylesheet in source order,
   so it wins the cascade) on every layer so the sidebar keeps its
   theme color at every viewport width instead of fading to the page
   background on desktop. */
.sidebar,
.sidebar .offcanvas-body,
.sidebar .sidebar-scroll {
    background-color: var(--app-sidebar-bg) !important;
}

.sidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar .offcanvas-title {
    color: #fff;
    font-weight: 700;
}

.sidebar-scroll {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 1rem;
    color: var(--app-sidebar-text);
}

.sidebar .brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.01em;
}

.sidebar .brand .brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--bs-primary), #7c74f0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #fff;
}

.sidebar .brand img { border-radius: 8px; object-fit: cover; }

.sidebar .section-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--app-sidebar-section-title);
    padding: 18px 20px 6px;
}

.sidebar a.nav-link-item {
    color: var(--app-sidebar-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 2px 10px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar a.nav-link-item i { font-size: 1.05rem; width: 20px; text-align: center; }

.sidebar a.nav-link-item:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.sidebar a.nav-link-item.active {
    background: var(--app-sidebar-bg-active);
    color: var(--app-sidebar-text-active);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

/* ---------------------------------------------------------------------
   Top navbar
   --------------------------------------------------------------------- */
.top-navbar {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 64px;
}

.avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    flex-shrink: 0;
}

.sidebar-toggle-btn {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2430;
}

.sidebar-toggle-btn:hover { background: #f3f4f8; }

/* ---------------------------------------------------------------------
   Content area
   --------------------------------------------------------------------- */
main.app-content {
    padding: 24px;
    flex: 1 1 auto;
    width: 100%;
    max-width: auto;
    margin: 0 0;
}

@media (max-width: 767.98px) {
    main.app-content { padding: 14px; }
    .top-navbar { padding-left: 12px !important; padding-right: 12px !important; }

    /* Page header bars (heading/filters + action button) wrap instead of overflowing. */
    .d-flex.justify-content-between { flex-wrap: wrap; row-gap: .6rem; }

    /* Grouped filter/toolbar buttons wrap onto multiple lines instead of forcing horizontal scroll. */
    .btn-group { flex-wrap: wrap; }
    .btn-group > .btn { flex: 1 1 auto; }
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

/* ---------------------------------------------------------------------
   Form-page containers — two unified widths used by every create/edit
   page (was an inconsistent mix of inline 600/700/800px per page).
   .form-card for simple single-column forms, .form-card-wide for forms
   with multi-column rows (customer/CCCD fields, room type pricing rules,
   booking form). Both are consistent across the whole app now.
   --------------------------------------------------------------------- */
.form-card { max-width: auto; margin-left: auto; margin-right: auto; }
.form-card-wide { max-width: auto; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

.card-header {
    background-color: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    border-top-left-radius: var(--bs-border-radius-lg) !important;
    border-top-right-radius: var(--bs-border-radius-lg) !important;
    font-weight: 600;
    padding: .85rem 1.1rem;
}

.card-header.bg-light { background-color: #f8f9fc !important; }

.card-body { padding: 0.5rem; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn { border-radius: var(--bs-border-radius-sm); font-weight: 500; }
.btn-sm { border-radius: .45rem; }

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .25);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--bs-border-radius-sm);
    border-color: #d7dae5;
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

.form-label { font-weight: 500; font-size: .875rem; color: #3a4050; }

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

/* ---------------------------------------------------------------------
   Searchable selects (Tom Select) — combobox kiểu "giá trị luôn hiện
   trên ô, ô tìm kiếm + icon kính lúp nằm riêng trong bảng gợi ý mở ra
   bên dưới" (plugin dropdown_input, xem app-custom.js).
   --------------------------------------------------------------------- */
.ts-wrapper.form-select {
    padding: 0;
    border: 1px solid #d7dae5;
    background: none;
    border-radius: var(--bs-border-radius-sm);
}

.ts-wrapper .ts-control {
    border-radius: var(--bs-border-radius-sm);
    border-color: #d7dae5;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem 2rem .375rem .75rem;
    position: relative;
    /* display:flex + min-width:0 trên .item bên dưới: để giá trị đang
       chọn dài (vd "-- Khách hàng mới (nhập bên dưới) --") rút gọn bằng
       "…" trên 1 dòng thay vì tự xuống dòng nhiều dòng, đội chiều cao ô
       select lên bất thường so với các ô khác cùng hàng — rõ nhất ở cỡ
       màn hình 3 cột chia đều (tablet). */
    display: flex;
    align-items: center;
}

.ts-wrapper.single .ts-control .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ts-wrapper.single .ts-control { background-image: none; }

/* Mũi tên chỉ hướng thay cho mũi tên mặc định của Bootstrap (đã tắt ở
   trên), tự lật ngược khi bảng gợi ý đang mở. */
.ts-wrapper.single .ts-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .9rem;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid #8890a6;
    border-bottom: 2px solid #8890a6;
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--app-duration-fast, .15s) ease;
    pointer-events: none;
}

.ts-wrapper.dropdown-active.single .ts-control::after {
    transform: translateY(-35%) rotate(-135deg);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

.ts-dropdown {
    border: 1px solid #e3e5ee;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--app-shadow-md);
    /* Cao hơn mọi modal/lớp phủ khác trong hệ thống (modal Bootstrap
       #roomModal = 1055, overlay quét CCCD = 1080) — app-custom.js còn
       ép lại giá trị này bằng inline style mỗi lần mở, đây chỉ là mức
       nền phòng khi trình duyệt vẽ trước khi JS kịp chạy. */
    z-index: 2000;
    padding: .5rem;
    margin-top: .375rem;
}

/* Ô tìm kiếm riêng trong bảng gợi ý, có icon kính lúp, tách khỏi danh
   sách kết quả bằng khoảng cách + đường viền nhẹ. */
.ts-dropdown .dropdown-input-wrap {
    position: relative;
    margin-bottom: .5rem;
}

.ts-dropdown .dropdown-input-wrap .bi-search {
    position: absolute;
    top: 50%;
    left: .65rem;
    transform: translateY(-50%);
    color: var(--app-text-muted);
    font-size: .85rem;
    pointer-events: none;
}

.ts-dropdown .dropdown-input,
.ts-dropdown .ts-dropdown-input {
    width: 100%;
    border: 1px solid #e3e5ee;
    border-radius: var(--bs-border-radius-sm);
    padding: .5rem .75rem .5rem 2.1rem;
    font-size: .875rem;
    background: #f8f9fc;
    outline: none;
}

.ts-dropdown .dropdown-input:focus,
.ts-dropdown .ts-dropdown-input:focus {
    border-color: var(--bs-primary);
    background: #fff;
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .15);
}

.ts-dropdown .ts-dropdown-content {
    padding-top: .125rem;
}

.ts-dropdown [data-selectable] {
    padding: .5rem .65rem;
    border-radius: var(--bs-border-radius-sm);
    font-size: .9rem;
}

.ts-dropdown .active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.ts-wrapper .item { color: #1f2430; }

.ts-dropdown .no-results {
    padding: .5rem .65rem;
    color: var(--app-text-muted);
    font-size: .875rem;
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table { --bs-table-border-color: var(--app-border); margin-bottom: 0; font-size: .875rem; }

.table thead.table-light th {
    background-color: #f8f9fc;
    color: #4b5468;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * { background-color: #f7f8fd; }

.table > :not(caption) > * > * { padding: .75rem .9rem; }

/* Không cho chữ trong ô bảng tự xuống dòng theo từng chữ (đặc biệt tên
   sản phẩm/khu vực/khách hàng ngắn nhưng cột bị ép hẹp trên màn hình
   nhỏ, kiểu "Giữ / xe / qua / đêm" mỗi chữ 1 dòng, dòng bị kéo rất cao,
   khó đọc) — để bảng tự cuộn ngang (đã có sẵn qua .table-responsive)
   thay vì bóp chữ vỡ dòng. Nơi nào thật sự cần xuống dòng (ô ghi chú
   dài...) thì thêm class .text-wrap của Bootstrap để bỏ qua rule này. */
.table > :not(caption) > * > *:not(.text-wrap) { white-space: nowrap; }

.card > .table-responsive:first-child table,
.card > .table-responsive:only-child table { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Badges & status pills
   --------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; padding: .38em .62em; }
.status-badge { border-radius: 50%; }

/* ---------------------------------------------------------------------
   Dashboard stat tiles
   --------------------------------------------------------------------- */
.stat-tile {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
}

.stat-tile .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-tile .stat-label { font-size: .8rem; color: var(--app-text-muted); font-weight: 500; }
.stat-tile .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.stat-icon.bg-brand-soft { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.stat-icon.bg-success-soft { background: #d1fae5; color: #047857; }
.stat-icon.bg-danger-soft { background: #fee2e2; color: #b91c1c; }
.stat-icon.bg-warning-soft { background: #fef3c7; color: #92400e; }
.stat-icon.bg-secondary-soft { background: #e5e7eb; color: #374151; }

.stat-tile-link { text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.stat-tile-link:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-md); border-color: var(--bs-primary); }
.stat-tile-link .stat-value, .stat-tile-link .stat-label { color: inherit; }

/* ---------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------- */
.alert { border-radius: var(--bs-border-radius); border-width: 1px; }

/* ---------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------- */
.pagination .page-link { border-radius: .5rem !important; margin: 0 2px; border-color: var(--app-border); color: #1f2430; }
.pagination .page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); }

/* ---------------------------------------------------------------------
   Calendar table (bookings.calendar)
   --------------------------------------------------------------------- */
.calendar-table {
    border-collapse: separate;
    border-spacing: 0;
}

.calendar-table th, .calendar-table td {
    vertical-align: middle;
    border-color: var(--app-border);
}

.calendar-table thead th {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: #1f2430;
    padding: .6rem .4rem;
    white-space: nowrap;
}

/* Cột "Phòng" và ô góc trên-trái luôn dính lại khi kéo ngang bảng nhiều
   ngày (14/30 ngày) — không mất dấu đang xem phòng nào. */
.calendar-table thead th:first-child,
.calendar-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--app-surface);
    box-shadow: 2px 0 4px rgba(16, 24, 40, .04);
}

.calendar-table thead th:first-child {
    z-index: 3;
}

.calendar-table thead th.calendar-day-weekend { background: #fff1f2; }
.calendar-table thead th.calendar-day-today { background: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis); }

.calendar-table tbody tr:hover td {
    background: #f8f9ff;
}

.calendar-table tbody tr:hover td:first-child {
    background: #f0f1fb;
}

.calendar-table tbody td.calendar-cell-empty {
    background: var(--app-bg);
}

/* Chip tên khách trong ô lịch — trước là link, giờ là button (mở modal
   xem nhanh), reset lại style mặc định của <button> cho giống pill cũ
   nhưng có thêm hover/focus rõ ràng để biết bấm được. */
.calendar-booking-chip {
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    padding: .35rem .6rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #fff;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .12s ease, transform .1s ease;
}

.calendar-booking-chip:hover,
.calendar-booking-chip:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.calendar-booking-chip:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------
   Login page
   --------------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(124, 116, 240, .35), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(79, 70, 229, .35), transparent 40%),
        linear-gradient(135deg, #12162b, #1e2344);
    padding: 20px;
}

.login-card {
    max-width: 400px;
    width: 100%;
    border: none;
    border-radius: var(--bs-border-radius-xl);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.text-muted { color: var(--app-text-muted) !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d7dae5; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #c1c5d6; }

@media print {
    .sidebar, .top-navbar, .no-print { display: none !important; }
    main.app-content { padding: 0 !important; }
    .card { box-shadow: none !important; border: none !important; }
}

/* ---------------------------------------------------------------------
   Focus visibility (keyboard navigation) — a soft brand ring on any
   interactive element focused via keyboard, without adding an outline
   to elements focused by mouse click.
   --------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Form controls, buttons and Tom Select already show their own focus
   ring (Bootstrap/our brand box-shadow below) — the generic outline
   above on top of that doubled up into two overlapping rings around
   every input (very visible on the login form). Keep the outline only
   for things that had NO focus indicator before (links, sidebar nav
   items, calendar days, pagination...). */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.btn:focus-visible,
.ts-wrapper.focus .ts-control {
    outline: none;
}

/* ---------------------------------------------------------------------
   Empty states — every "Chưa có..."/"Không có..." row across the list
   pages (phòng, đặt phòng, khách hàng, hóa đơn, kho, dịch vụ, nhân
   viên, báo cáo...) gets the same quiet icon-over-text treatment
   instead of a bare line of muted text.
   --------------------------------------------------------------------- */
.empty-state { padding: 2.5rem 1rem; }
.empty-state i { font-size: 2rem; opacity: .3; display: block; margin-bottom: .5rem; }
.empty-state span { display: block; }

.list-group-item.empty-state-inline { text-align: center; }
.list-group-item.empty-state-inline i { opacity: .45; margin-right: .35rem; }

/* ---------------------------------------------------------------------
   Interactive-card polish — a gentle lift on hover for cards the user
   is meant to click through (room tiles, dashboard list rows), so the
   affordance is visible without relying on the cursor alone.
   --------------------------------------------------------------------- */
.room-card {
    transition: box-shadow .15s ease, transform .15s ease;
    cursor: pointer;
}
.room-card:hover {
    box-shadow: var(--app-shadow-md);
    transform: translateY(-2px);
}
.room-card:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.list-group-item-action { transition: background-color .1s ease; }

.btn { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------------
   Flatpickr (date & date-time pickers) — reskinned to match the app's
   indigo brand, card radius/shadow and Inter type instead of its
   default look, so it reads as part of the same design system rather
   than a bolted-on widget.
   --------------------------------------------------------------------- */
.flatpickr-calendar {
    font-family: var(--bs-body-font-family);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--app-shadow-md), 0 0 0 1px var(--app-border);
    width: 300px;
}

.flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid var(--app-border); }

.flatpickr-months .flatpickr-month {
    color: #1f2430;
    fill: #1f2430;
}

.flatpickr-current-month { font-weight: 600; font-size: 1rem; }

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600;
    border-radius: .4rem;
}

.flatpickr-current-month .numInputWrapper:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: #f3f4f8; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    border-radius: .5rem;
    top: 9px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: var(--bs-primary); fill: var(--bs-primary); }

span.flatpickr-weekday {
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-text-muted);
}

.flatpickr-day {
    border-radius: .5rem;
    font-weight: 500;
}

.flatpickr-day.today { border-color: var(--bs-primary); }

.flatpickr-day:hover, .flatpickr-day:focus {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.flatpickr-day.today.selected { border-color: var(--bs-primary); }

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #c3c7d6; }

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--bs-primary-bg-subtle); }

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: #1f2430; }

/* The visible text field Flatpickr creates (altInput) already inherits
   .form-control from the original input via app-custom.js; this just
   makes sure a disabled/readonly original doesn't visually dim it. */
input.form-control ~ input.form-control[readonly] { background-color: #fff; cursor: pointer; }


/* ---------------------------------------------------------------------
   CCCD photo capture + AI auto-fill (bookings/create, customers form)
   --------------------------------------------------------------------- */
.cccd-photo-preview img.cccd-photo-img {
    max-height: 110px;
    max-width: 100%;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    object-fit: cover;
    background: #fff;
}

.cccd-ai-scan-status:empty { display: none; }

.cccd-camera-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 33, .85);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cccd-camera-box {
    background: #14172c;
    border-radius: var(--bs-border-radius-lg);
    padding: 16px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.cccd-camera-video {
    width: 100%;
    display: block;
    border-radius: .75rem;
    background: #000;
    max-height: 60vh;
}

.cccd-camera-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}

/* =====================================================================
   Bảng chọn dịch vụ/vật tư kiểu POS (modal Phòng khi khách đang ở):
   bấm thẳng vào từng ô món để cộng vào giỏ, thay vì chọn dropdown.
   ===================================================================== */
.pos-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
}

.pos-item-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    padding: .55rem .65rem;
    transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease, background-color .1s ease;
    cursor: pointer;
}

.pos-item-btn:hover {
    border-color: var(--bs-primary);
    box-shadow: var(--app-shadow-md, 0 4px 10px rgba(0, 0, 0, .08));
    transform: translateY(-1px);
}

.pos-item-btn:active,
.pos-item-btn.pos-item-btn-tapped {
    transform: scale(.95);
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle, #eef2ff);
}

.pos-item-name {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.25;
}

.pos-item-price {
    font-size: .78rem;
    color: var(--bs-primary);
    font-weight: 600;
}

.pos-item-stock {
    font-size: .72rem;
}

.pos-cart-list {
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .5rem .65rem;
    min-height: 46px;
}

.pos-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: .3rem 0;
    border-bottom: 1px solid #f0f0f3;
}

.pos-cart-row:last-child {
    border-bottom: none;
}

.pos-cart-row-name {
    font-size: .85rem;
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-cart-row-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pos-qty-btn {
    padding: 0 .4rem;
    line-height: 1.6;
}

.pos-cart-qty {
    min-width: 1.4rem;
    text-align: center;
    font-weight: 600;
    font-size: .85rem;
}

.pos-cart-row-subtotal {
    min-width: 76px;
    text-align: right;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.pos-cart-footer {
    background: var(--bs-primary-bg-subtle, #eef2ff);
    border-radius: .5rem;
    padding: .6rem .75rem;
    margin-top: .5rem;
}

/* =====================================================================
   Sơ đồ phòng kiểu POS chuyên nghiệp (module Phòng): thanh công cụ tìm
   nhanh + tab trạng thái dạng thống kê + lưới ô phòng lớn, chạm được,
   thay cho card Bootstrap thường. Cùng ngôn ngữ thiết kế với lưới chọn
   món kiểu POS (.pos-item-grid/.pos-item-btn) ở bảng thao tác phòng.
   ===================================================================== */
.room-board-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.room-search-box {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}

.room-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-text-muted);
    pointer-events: none;
}

.room-search-box input {
    width: 100%;
    padding-left: 34px;
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--app-border);
}

.room-area-select {
    min-width: 180px;
    width: auto;
}

.room-board-clock {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-text-muted);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-sm);
    padding: .4rem .7rem;
    white-space: nowrap;
}

/* Dải tab trạng thái: vừa là bộ lọc vừa là ô thống kê nhanh (đếm số
   phòng), giống dải category/total kiểu máy POS bán lẻ. */
.room-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.room-status-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .6rem .9rem;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: #1f2430;
    box-shadow: var(--app-shadow-sm);
    transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}

.room-status-tab:hover {
    box-shadow: var(--app-shadow-md);
    transform: translateY(-1px);
    color: #1f2430;
}

.room-status-tab-count {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    min-width: 1.4rem;
}

.room-status-tab-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.room-status-tab.active {
    border-color: transparent;
    background: var(--bs-primary);
    color: #fff;
}
.room-status-tab.active .room-status-tab-label { color: rgba(255, 255, 255, .85); }

.room-status-tab-success.active { background: #059669; }
.room-status-tab-danger.active { background: #dc2626; }
.room-status-tab-warning.active { background: #d97706; }
.room-status-tab-secondary.active { background: #4b5563; }

/* Lưới ô phòng: ô vuông lớn, chạm được, đủ thông tin để ra quyết định
   ngay từ xa mà không cần bấm vào — đúng tinh thần màn hình bán hàng POS. */
.room-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}

.room-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-left: 5px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--app-shadow-sm);
    padding: .85rem .9rem 1rem;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.room-tile:hover {
    box-shadow: var(--app-shadow-md);
    transform: translateY(-3px);
}

.room-tile:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.room-tile-success { border-left-color: #059669; }
.room-tile-danger { border-left-color: #dc2626; }
.room-tile-warning { border-left-color: #d97706; }
.room-tile-secondary { border-left-color: #6b7280; }

/* Phòng đã "Ngừng sử dụng" — làm mờ đi để phân biệt trực quan với phòng
   đang hoạt động, nhưng vẫn bấm vào xem/mở lại được bình thường. */
.room-tile-inactive {
    opacity: .55;
    filter: grayscale(.4);
    border-left-color: #374151 !important;
}

.room-tile-inactive:hover {
    opacity: .8;
}

.room-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.room-tile-number {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.room-tile-status-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.room-tile-success .room-tile-status-dot { background: #d1fae5; color: #047857; }
.room-tile-danger .room-tile-status-dot { background: #fee2e2; color: #b91c1c; }
.room-tile-warning .room-tile-status-dot { background: #fef3c7; color: #92400e; }
.room-tile-secondary .room-tile-status-dot { background: #e5e7eb; color: #374151; }

.room-tile-type {
    font-size: .76rem;
    font-weight: 600;
    color: var(--app-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-tile-area { color: var(--app-text-muted); font-weight: 500; }

.room-tile-price {
    font-size: .76rem;
    color: var(--app-text-muted);
    margin-top: 2px;
}

.room-tile-guest {
    font-size: .8rem;
    font-weight: 600;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-tile-eta {
    font-size: .74rem;
    font-weight: 600;
}

.room-tile-status-badge {
    align-self: flex-start;
    margin-top: 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    padding: .2rem .5rem;
    border-radius: 999px;
}

/* =====================================================================
   Bảng thao tác phòng (modal) — bố cục 2 cột kiểu POS: danh sách dịch
   vụ/vật tư để chọn (bấm là thêm ngay, không cần xác nhận) bên trái,
   hóa đơn tạm tính (ticket) bên phải, giống màn hình bán hàng thật.
   ===================================================================== */
.panel-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 18px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    padding: .8rem 1rem;
}

.panel-info-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-text-muted);
    margin-bottom: 1px;
}

.panel-info-value {
    font-size: .88rem;
    font-weight: 600;
    color: #1f2430;
}

/* --- Danh sách dịch vụ để chọn (picker) --- */
.pos-picker {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    padding: .75rem;
    background: var(--app-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pos-picker-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.pos-picker-search {
    position: relative;
    flex: 1 1 160px;
}

.pos-picker-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-text-muted);
    font-size: .85rem;
    pointer-events: none;
}

.pos-picker-search input {
    padding-left: 30px;
}

.pos-picker-instock-toggle {
    white-space: nowrap;
    flex-shrink: 0;
}

.pos-item-list {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 2px;
}

.pos-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-sm);
    padding: .5rem .65rem;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .1s ease;
}

.pos-item-row:hover:not(:disabled) {
    border-color: var(--bs-primary);
    box-shadow: var(--app-shadow-sm);
}

.pos-item-row:active:not(:disabled),
.pos-item-row.pos-item-row-tapped {
    transform: scale(.98);
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle, #eef2ff);
}

.pos-item-row:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.pos-item-row-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}
.pos-item-row:disabled .pos-item-row-icon { background: #e5e7eb; color: #9ca3af; }

.pos-item-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pos-item-row-name {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-item-row-stock {
    font-size: .72rem;
}

.pos-item-row-price {
    flex-shrink: 0;
    text-align: right;
    font-size: .82rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.pos-item-row-unit {
    font-weight: 500;
    color: var(--app-text-muted);
    font-size: .72rem;
}

/* --- Hóa đơn tạm tính (ticket) --- */
.pos-ticket {
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    padding: .9rem 1rem;
    background: var(--app-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pos-ticket-section-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--app-text-muted);
    margin-bottom: 8px;
}

.pos-ticket-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .85rem;
    padding: 2px 0;
}

.pos-ticket-note {
    font-size: .74rem;
    color: var(--app-text-muted);
    margin-bottom: 4px;
}

.pos-ticket-services {
    margin: 8px 0;
    flex: 1 1 auto;
    max-height: 180px;
    overflow-y: auto;
}

.pos-ticket-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed var(--app-border);
    padding-top: 8px;
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 800;
}

/* =====================================================================
   Popup xác nhận dùng chung (thay cho confirm() của trình duyệt) — xem
   #appConfirmModal trong layouts/app.blade.php và confirmPopup() trong
   app-custom.js.
   ===================================================================== */
.app-confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fef3c7;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* =====================================================================
   Thanh hành động (footer) trong bảng thao tác phòng: gom hết các nút
   hành động chính (nhận/trả phòng, đặt phòng, dọn xong, sửa phòng...)
   xuống 1 dải gọn ở cuối, thay vì rải rác các nút to trong nội dung.
   ===================================================================== */
.panel-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--app-border);
    margin-top: 1.1rem;
    padding-top: .9rem;
}

.panel-modal-footer > form {
    display: inline-flex;
}

/* Khối "Trả phòng" mở rộng (số tiền thu + phương thức + QR) phải chiếm
   trọn 1 hàng riêng trong thanh nút flex-wrap của bảng thao tác phòng,
   không bị ép nằm chung hàng với các nút nhỏ khác. Selector ở trên chỉ
   áp dụng cho <form> con trực tiếp (không phải mọi form lồng bên trong)
   để không phá bố cục dọc của form thu tiền lúc trả phòng.
   */
.panel-modal-footer .checkout-form-block {
    flex: 1 1 100%;
    width: 100%;
}


/* =====================================================================
   ============================  V2 POLISH  ============================
   Lớp nâng cấp giao diện: tinh chỉnh thị giác (gradient/shadow nhẹ),
   chuyển động (hiệu ứng vào trang, hover, ripple, đếm số...) và mở rộng
   responsive cho từng breakpoint (≤575px, ≤400px) trên các thành phần
   tuỳ biến (room-tile, pos-*, panel-info-grid, calendar...). Tất cả hiệu
   ứng chuyển động đều tắt tự động khi người dùng bật "Reduce motion"
   trong hệ điều hành/trình duyệt (mục cuối file).
   ===================================================================== */

:root {
    /* Thêm các biến mới, bổ sung cho bộ token gốc ở đầu file (không ghi
       đè) — dùng cho lớp hiệu ứng/độ sâu ở phần này. */
    --app-shadow-lg: 0 12px 28px rgba(16, 24, 40, .10), 0 4px 8px rgba(16, 24, 40, .06);
    --app-shadow-xl: 0 24px 48px rgba(16, 24, 40, .16), 0 8px 16px rgba(16, 24, 40, .08);
    --app-ease: cubic-bezier(.22, .8, .24, 1);
    --app-duration-fast: .15s;
    --app-duration-base: .25s;
    --app-duration-slow: .45s;
    --app-gradient-brand: linear-gradient(135deg, var(--bs-primary) 0%, #6d63f2 100%);
}

/* ---------------------------------------------------------------------
   Chuyển động nền tảng — keyframes dùng chung cho cả trang.
   --------------------------------------------------------------------- */
@keyframes appFadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes appFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes appScaleIn {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes appShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes appPulseSoft {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

@keyframes appRipple {
    to { transform: scale(2.6); opacity: 0; }
}

@keyframes appSpin {
    to { transform: rotate(360deg); }
}

/* Mỗi trang khi tải xong "bay nhẹ" vào vị trí thay vì xuất hiện đột
   ngột — cảm giác mượt, hiện đại hơn nhưng vẫn rất nhanh (350ms).
   QUAN TRỌNG: KHÔNG dùng fill-mode "both"/"forwards" ở đây. Với fill-mode
   giữ lại trạng thái cuối, "transform: translateY(0)" của keyframe sẽ
   tồn tại vĩnh viễn sau khi animation kết thúc — biến main.app-content
   thành một stacking context mới, "nhốt" mọi modal Bootstrap (position:
   fixed) được khai báo bên trong @yield('content') (ví dụ #roomModal ở
   rooms/index, modal xem nhanh ở bookings/calendar) vào một ngữ cảnh
   xếp lớp cục bộ — khiến modal bị .modal-backdrop (nằm ngoài, gắn thẳng
   vào <body>) đè lên trên. Không có fill-mode, phần tử tự trở lại
   "transform: none" ngay khi animation kết thúc nên không còn bị lỗi
   này, mà hình ảnh lúc kết thúc animation vẫn giữ nguyên y hệt (opacity
   1, transform none — đúng bằng style gốc của phần tử). */
main.app-content {
    animation: appFadeInUp .38s var(--app-ease);
}

/* ---------------------------------------------------------------------
   Scroll-reveal — thẻ .card, .stat-tile, .room-tile, .room-status-tab
   được app-custom.js gắn lớp .reveal-init khi tải trang, rồi chuyển
   sang .reveal-in ngay khi cuộn tới (IntersectionObserver). Nếu JS lỗi/
   tắt, phần tử vẫn hiển thị bình thường (không phụ thuộc JS để hiện ra).
   Chỉ dùng opacity (KHÔNG dùng transform) — .card chính là nơi chứa
   #roomModal/modal lịch (ở rooms/index, bookings/calendar): một
   "transform" còn tồn tại sau khi hiệu ứng kết thúc sẽ biến .card thành
   stacking context mới và nhốt modal bên trong nó, khiến modal bị
   .modal-backdrop đè lên trên — đúng lỗi vừa gặp với animation ở
   main.app-content phía trên. opacity: 1 (đủ điều kiện, KHÔNG <1) không
   tạo stacking context nên an toàn tuyệt đối trong mọi trường hợp. */
.reveal-init { opacity: 0; }
.reveal-in {
    opacity: 1;
    transition: opacity var(--app-duration-slow) var(--app-ease);
}

/* ---------------------------------------------------------------------
   Card — thêm chiều sâu khi hover (chỉ đổi bóng đổ, không dịch chuyển vị
   trí, để không làm nhảy layout của bảng/danh sách dài).
   --------------------------------------------------------------------- */
main.app-content .card {
    transition: box-shadow var(--app-duration-base) ease, border-color var(--app-duration-base) ease;
}
main.app-content .card:hover {
    box-shadow: var(--app-shadow-md);
}

/* Card có thanh nhấn gradient mỏng ở mép trên — dùng cho các khối nổi
   bật (ví dụ card biểu đồ doanh thu ở dashboard): thêm class
   "card-accent" thủ công khi muốn nhấn mạnh. */
.card-accent { position: relative; overflow: hidden; }
.card-accent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--app-gradient-brand);
}

/* ---------------------------------------------------------------------
   Buttons — gradient tinh tế cho nút chính, hiệu ứng nhấn mượt hơn và
   hỗ trợ ripple (tạo bằng JS trong app-custom.js, class ".btn-ripple").
   --------------------------------------------------------------------- */
.btn {
    position: relative;
    overflow: hidden;
    transition: background-color var(--app-duration-fast) ease,
                border-color var(--app-duration-fast) ease,
                box-shadow var(--app-duration-fast) ease,
                transform var(--app-duration-fast) ease,
                filter var(--app-duration-fast) ease;
}

.btn-primary {
    background-image: var(--app-gradient-brand);
    border-color: var(--bs-primary);
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.06);
}
.btn-primary:active {
    filter: brightness(.96);
}

.btn:active { transform: translateY(1px) scale(.99); }

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
    transform: scale(0);
    animation: appRipple .55s ease-out forwards;
}
.btn-outline-primary .btn-ripple,
.btn-outline-secondary .btn-ripple,
.btn-outline-danger .btn-ripple,
.btn-outline-success .btn-ripple,
.btn-outline-warning .btn-ripple,
.btn-light .btn-ripple {
    background: rgba(79, 70, 229, .18);
}

/* Nút submit đang xử lý (JS thêm class "is-loading" + thuộc tính
   disabled khi submit form) — icon quay nhẹ thay cho việc bấm lại được. */
.btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    border-top-color: #fff;
    animation: appSpin .6s linear infinite;
}
.btn-outline-primary.is-loading::after,
.btn-outline-secondary.is-loading::after,
.btn-outline-danger.is-loading::after,
.btn-outline-success.is-loading::after,
.btn-outline-warning.is-loading::after,
.btn-light.is-loading::after {
    border-color: rgba(79, 70, 229, .35);
    border-top-color: var(--bs-primary);
}

/* ---------------------------------------------------------------------
   Sidebar — chiều sâu gradient nhẹ thay vì màu phẳng, mượt hơn khi hover
   (dùng transform cho hiệu ứng "trượt nhẹ" của icon thay vì chỉ đổi màu).
   --------------------------------------------------------------------- */
.sidebar,
.sidebar .offcanvas-body,
.sidebar .sidebar-scroll {
    background: linear-gradient(180deg, var(--app-sidebar-bg) 0%, #12152b 100%) !important;
}

.sidebar a.nav-link-item {
    transition: background-color var(--app-duration-fast) ease,
                color var(--app-duration-fast) ease,
                padding-left var(--app-duration-fast) ease;
}
.sidebar a.nav-link-item:hover { padding-left: 20px; }
.sidebar a.nav-link-item i { transition: transform var(--app-duration-fast) ease; }
.sidebar a.nav-link-item:hover i { transform: scale(1.08); }

.sidebar a.nav-link-item.active {
    background: linear-gradient(90deg, var(--app-sidebar-bg-active) 0%, rgba(42, 49, 99, .55) 100%);
}

.offcanvas-backdrop.show { backdrop-filter: blur(1px); }

/* ---------------------------------------------------------------------
   Top navbar — bóng đổ chỉ xuất hiện khi trang đã cuộn xuống (class
   "scrolled" do app-custom.js bật/tắt), tránh viền + bóng chồng nhau khi
   ở đầu trang.
   --------------------------------------------------------------------- */
.top-navbar {
    transition: box-shadow var(--app-duration-base) ease;
}
.top-navbar.scrolled {
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
}

.avatar-circle {
    box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 3px var(--bs-primary-border-subtle);
}

/* ---------------------------------------------------------------------
   Stat tiles — thanh nhấn gradient theo màu icon + icon phồng nhẹ khi
   hover, số liệu có thể đếm dần khi cuộn tới (xem countUpStats trong
   app-custom.js; nếu JS tắt, số vẫn hiển thị đúng giá trị ban đầu).
   --------------------------------------------------------------------- */
.stat-tile {
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--app-duration-base) ease, transform var(--app-duration-base) ease;
}
.stat-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: var(--bs-secondary-color, #9aa1c4);
    opacity: .5;
}
.stat-tile:has(.bg-success-soft)::before { background: #059669; opacity: .7; }
.stat-tile:has(.bg-brand-soft)::before { background: var(--bs-primary); opacity: .7; }
.stat-tile:has(.bg-danger-soft)::before { background: #dc2626; opacity: .7; }
.stat-tile:has(.bg-warning-soft)::before { background: #d97706; opacity: .7; }

.stat-tile .stat-icon { transition: transform var(--app-duration-base) var(--app-ease); }
.stat-tile:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }

/* ---------------------------------------------------------------------
   Empty states — nhẹ nhàng hiện ra thay vì xuất hiện cứng, icon "thở"
   rất nhẹ để không gây cảm giác trống trải.
   --------------------------------------------------------------------- */
.empty-state { animation: appFadeIn var(--app-duration-slow) ease both; }
.empty-state i { animation: appPulseSoft 2.6s ease-in-out infinite; }

/* ---------------------------------------------------------------------
   Toast & Modal — vào/ra mượt hơn mặc định của Bootstrap (scale nhẹ +
   dịch chuyển thay vì chỉ fade phẳng).
   --------------------------------------------------------------------- */
.modal.fade .modal-dialog {
    transform: scale(.95) translateY(-8px);
    transition: transform var(--app-duration-base) var(--app-ease), opacity var(--app-duration-base) ease;
}
.modal.show .modal-dialog { transform: scale(1) translateY(0); }

.toast { transition: transform var(--app-duration-base) var(--app-ease), opacity var(--app-duration-base) ease; }
.toast:not(.show) { transform: translateY(10px); opacity: 0; }
.toast.showing, .toast.show { box-shadow: var(--app-shadow-lg); }

/* ---------------------------------------------------------------------
   Bảng — hover mượt hơn (đổi từ tức thì sang có transition), dòng vừa
   được thêm (nếu trang gắn class "row-just-added") nhấn nhẹ để dễ nhận
   ra thay đổi vừa xảy ra.
   --------------------------------------------------------------------- */
.table > tbody > tr { transition: background-color var(--app-duration-fast) ease; }

@keyframes appRowHighlight {
    from { background-color: var(--bs-primary-bg-subtle); }
    to { background-color: transparent; }
}
.row-just-added { animation: appRowHighlight 1.6s ease-out both; }

/* ---------------------------------------------------------------------
   Spinner — đồng bộ màu thương hiệu thay vì màu xám mặc định của
   Bootstrap ở các trạng thái "Đang tải...".
   --------------------------------------------------------------------- */
.spinner-border, .spinner-grow { color: var(--bs-primary); }

/* ---------------------------------------------------------------------
   Pagination & badge — polish nhỏ đồng bộ với phần còn lại.
   --------------------------------------------------------------------- */
.pagination .page-link { transition: background-color var(--app-duration-fast) ease, color var(--app-duration-fast) ease, border-color var(--app-duration-fast) ease; }
.pagination .page-link:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text-emphasis); }

.badge { transition: filter var(--app-duration-fast) ease; }

/* ---------------------------------------------------------------------
   Bề rộng nội dung tối đa trên màn hình cực rộng (>1800px, màn ngoài
   4K/ultra-wide) — chỉ giới hạn ở ngưỡng rất cao để KHÔNG ảnh hưởng tới
   hành vi "luôn lấp đầy chiều rộng còn lại" đã sửa ở trên (laptop/PC
   thường ≤1800px không bị tác động), tránh dòng bảng/nội dung kéo dài
   quá mức khó đọc trên màn quá khổ.
   --------------------------------------------------------------------- */
@media (min-width: 1800px) {
    main.app-content { max-width: 1800px; margin-inline: auto; width: 100%; }
}

/* =======================================================================
   RESPONSIVE MỞ RỘNG — tablet nhỏ / điện thoại (≤575.98px) và điện
   thoại rất nhỏ (≤400px), cho các khối bố cục tuỳ biến (không phải class
   Bootstrap chuẩn nên cần khai báo riêng ở đây).
   ======================================================================= */
@media (max-width: 575.98px) {
    main.app-content { padding: 10px; }

    .stat-tile { padding: .8rem .85rem; gap: 10px; }
    .stat-tile .stat-icon { width: 38px; height: 38px; font-size: 1.05rem; }
    .stat-tile .stat-value { font-size: 1.2rem; }
    .stat-tile .stat-label { font-size: .74rem; }

    .room-tile-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
    .room-tile { padding: .65rem .7rem .75rem; }
    .room-tile-number { font-size: 1.15rem; }

    .pos-item-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }

    .panel-info-grid { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: .65rem .8rem; }

    .room-status-tab { padding: .5rem .7rem; }
    .room-status-tab-count { font-size: 1rem; }

    .room-board-clock { font-size: .74rem; padding: .35rem .55rem; }
    .room-area-select { min-width: 140px; }

    .calendar-table thead th:not(:first-child) { min-width: 46px !important; }
    .calendar-table th:first-child { min-width: 108px !important; }

    .pos-picker, .pos-ticket { padding: .65rem; }

    .login-card { border-radius: var(--bs-border-radius-lg); }

    /* Áp dụng chung cho MỌI modal có class "modal-fullscreen-sm-down"
       (hiện gồm #roomModal ở rooms/index và modal xem nhanh đặt phòng ở
       bookings/calendar — thêm modal khác chỉ cần gắn class này là tự
       được thanh nút dính đáy màn hình di động, không cần sửa CSS): modal
       đã bung toàn màn hình trên di động, thanh nút thao tác
       (.panel-modal-footer) dính lại ở đáy màn hình khi cuộn nội dung
       bên trên, giống thanh hành động cố định của app di động — không
       còn phải cuộn xuống tận cùng mới bấm được nút thao tác chính. */
    .modal-fullscreen-sm-down .panel-modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: #fff;
        margin: .75rem calc(-1 * var(--bs-modal-padding, 1rem)) calc(-1 * var(--bs-modal-padding, 1rem));
        padding: .6rem var(--bs-modal-padding, 1rem) calc(.6rem + env(safe-area-inset-bottom, 0px)) var(--bs-modal-padding, 1rem);
        border-radius: 0;
        box-shadow: 0 -6px 16px rgba(15, 23, 42, .08);
    }

    /* Nút bấm để mở/đóng khối "Thông tin khách" (chỉ hiện trên di động —
       trên desktop khối này luôn hiện sẵn, không cần bấm, xem quy tắc
       d-sm-none/d-sm-block ở panel-info-toggle-wrap trong _panel.blade.php). */
    .panel-info-toggle-wrap [data-bs-toggle="collapse"] .panel-info-toggle-icon {
        transition: transform .2s ease;
    }
    .panel-info-toggle-wrap [data-bs-toggle="collapse"][aria-expanded="true"] .panel-info-toggle-icon {
        transform: rotate(180deg);
    }
}

@media (max-width: 400px) {
    .panel-info-grid { grid-template-columns: 1fr; }
    .room-tile-grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }
    .avatar-circle { width: 30px; height: 30px; font-size: .74rem; }
}

/* ---------------------------------------------------------------------
   Tôn trọng lựa chọn "Giảm chuyển động" của người dùng (hệ điều hành /
   trình duyệt) — tắt gần như toàn bộ animation/transition trang trí ở
   trên, chỉ giữ lại thay đổi tức thì, vì lý do trợ năng (accessibility).
   Đặt cuối file để có độ ưu tiên cascade cao nhất trong stylesheet này.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* =======================================================================
   ======================  V3 — GIAO DIỆN KIỂU APP DI ĐỘNG  ======================
   - Thanh tab đáy (.app-bottom-nav) + bảng "Thêm"/"Tài khoản" (bottom sheet)
   - App bar gọn: nút quay lại / logo, tiêu đề 2 tầng, avatar
   - Modal trên di động thành bottom sheet (trượt lên, bo góc trên, có
     tay nắm, vuốt xuống để đóng) và hỗ trợ MODAL LỒNG (modal trong modal)
   - Bảng dữ liệu tự chuyển thành danh sách thẻ; hàng nhiều cột chỉ hiện
     vài trường chính, phần còn lại mở trong sheet "Chi tiết" (modal lồng)
   - Chữ dài (thông báo, ghi chú) tự rút gọn + "Xem thêm" mở sheet
   - Bộ lọc gắn data-mobile-sheet thu vào nút "Bộ lọc" mở sheet
   - Nút Lưu/Hủy (.form-actions) dính đáy; nút "Thêm mới" thành FAB
   Toàn bộ JS nằm ở public/js/app-mobile.js.
   ======================================================================= */
:root {
    --app-bottom-nav-h: 62px;
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-sheet-radius: 20px;
}

/* ---------- Thanh tab đáy ---------- */
.app-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1035;
    display: flex;
    align-items: stretch;
    height: calc(var(--app-bottom-nav-h) + var(--app-safe-bottom));
    padding-bottom: var(--app-safe-bottom);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--app-border);
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .06);
}

.app-bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: none;
    color: #8a90a6;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: color var(--app-duration-fast, .15s) ease;
}

.app-bottom-nav-item i {
    font-size: 1.28rem;
    line-height: 1;
    width: 52px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: background-color var(--app-duration-base, .25s) var(--app-ease, ease), transform var(--app-duration-fast, .15s) ease;
}

.app-bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.app-bottom-nav-item.active { color: var(--bs-primary); }
.app-bottom-nav-item.active i { background: var(--bs-primary-bg-subtle); }
.app-bottom-nav-item:active i { transform: scale(.9); }

@media (max-width: 991.98px) {
    body.has-app-bottom-nav main.app-content {
        padding-bottom: calc(var(--app-bottom-nav-h) + var(--app-safe-bottom) + 18px);
    }
    #appToastContainer {
        bottom: calc(var(--app-bottom-nav-h) + var(--app-safe-bottom)) !important;
        left: 0; right: 0 !important;
        display: flex; flex-direction: column; align-items: center;
    }
    #appToastContainer .toast { width: 100%; max-width: 420px; }
}

/* ---------- Bảng "Thêm": lưới icon ---------- */
.app-more-group-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--app-text-muted);
    margin: .35rem .15rem .55rem;
}
.app-more-group-title:not(:first-child) { margin-top: 1.1rem; }

.app-more-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 6px;
}

.app-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #2b3040;
    text-align: center;
    padding: 4px 2px;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
}
.app-more-item:active { background: #f1f2f8; }

.app-more-icon {
    width: 50px; height: 50px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    background: #f1f2fb;
    color: var(--bs-primary);
    transition: transform var(--app-duration-fast, .15s) ease;
}
.app-more-item.active .app-more-icon {
    background: linear-gradient(135deg, var(--bs-primary), #7c74f0);
    color: #fff;
    box-shadow: 0 6px 14px rgba(79, 70, 229, .3);
}
.app-more-item:active .app-more-icon { transform: scale(.92); }

.app-more-label {
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.avatar-circle-lg { width: 52px; height: 52px; font-size: 1.2rem; }

/* ---------- App bar (di động) ---------- */
.appbar-back-btn,
.appbar-avatar-btn {
    border: 0;
    background: transparent;
    width: 38px; height: 38px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #1f2430;
    font-size: 1.25rem;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.appbar-back-btn:active, .appbar-avatar-btn:active { background: #eef0f6; }

.appbar-brand-icon {
    width: 36px; height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--bs-primary), #7c74f0);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.appbar-brand-icon img { width: 100%; height: 100%; object-fit: cover; }

.appbar-subtitle {
    font-size: .68rem;
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.1;
}

@media (max-width: 991.98px) {
    .top-navbar {
        min-height: 56px;
        padding-top: calc(.4rem + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: .4rem !important;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
    .top-navbar .appbar-title {
        font-size: 1.02rem;
        font-weight: 700;
        color: #1f2430 !important;
        line-height: 1.25;
    }
}

/* ---------- Nút Lưu/Hủy của form ---------- */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: .5rem;
}

@media (max-width: 991.98px) {
    .form-actions {
        position: sticky;
        bottom: calc(var(--app-bottom-nav-h) + var(--app-safe-bottom));
        z-index: 20;
        margin: 1rem -.5rem -.5rem;
        padding: .65rem .75rem;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--app-border);
        border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
        box-shadow: 0 -6px 16px rgba(15, 23, 42, .06);
    }
    .form-actions > .btn { flex: 1 1 0; min-height: 44px; }
    .form-actions > .btn-primary { flex-grow: 2; }
}

/* ---------- FAB "Thêm mới" (tạo từ nút .btn-primary dẫn tới /create) ---------- */
.app-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--app-bottom-nav-h) + var(--app-safe-bottom) + 16px);
    z-index: 1034;
    height: 54px;
    min-width: 54px;
    padding: 0 18px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), #7c74f0);
    box-shadow: 0 10px 24px rgba(79, 70, 229, .38), 0 2px 6px rgba(15, 23, 42, .12);
    animation: appFabIn .35s var(--app-ease, ease) both;
    -webkit-tap-highlight-color: transparent;
}
.app-fab i { font-size: 1.35rem; line-height: 1; }
.app-fab:hover, .app-fab:focus { color: #fff; }
.app-fab:active { transform: scale(.94); }
.app-fab.is-compact span { display: none; }
.app-fab.is-compact { padding: 0; width: 54px; }
@keyframes appFabIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 991.98px) {
    .app-fab-source { display: none !important; }
}
@media (min-width: 992px) {
    .app-fab { display: none !important; }
}

/* ---------- Thanh chip lọc cuộn ngang (thay cho btn-group bị xuống dòng) ---------- */
@media (max-width: 767.98px) {
    main.app-content .btn-group:not(.btn-group-vertical) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        max-width: 100%;
        gap: 6px;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    main.app-content .btn-group::-webkit-scrollbar { display: none; }
    main.app-content .btn-group > .btn {
        flex: 0 0 auto;
        border-radius: 999px !important;
        margin-left: 0 !important;
        white-space: nowrap;
    }

    .room-status-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: -10px; margin-right: -10px;
        padding: 0 10px 2px;
        -webkit-overflow-scrolling: touch;
    }
    .room-status-tabs::-webkit-scrollbar { display: none; }
    .room-status-tab { flex: 0 0 auto; }

    .room-board-toolbar .room-search-box { flex: 1 1 100%; }
    .room-board-toolbar > form { flex: 1 1 auto; }
    .room-board-toolbar .room-area-select { width: 100%; }
}

/* Nút mở bộ lọc (thay cho khối [data-mobile-sheet] trên di động) */
.mobile-sheet-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .6rem .85rem;
    margin-bottom: .75rem;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: #fff;
    color: #2b3040;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: var(--app-shadow-sm);
}
.mobile-sheet-trigger .mst-icon {
    width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
}
.mobile-sheet-trigger .mst-badge {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 600;
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    border-radius: 999px;
    padding: .15rem .55rem;
}
.mobile-sheet-trigger .bi-chevron-right { color: #9aa0b4; }
.mobile-sheet-trigger .mst-badge + .bi-chevron-right { margin-left: 0; }
.mobile-sheet-trigger .mst-label + .bi-chevron-right { margin-left: auto; }
/* Khối lọc khi đã chuyển vào sheet thì bỏ viền thẻ cho gọn */
.app-sheet .modal-body > .card { border: 0; box-shadow: none; }
.app-sheet .modal-body > .card > .card-body { padding: 0; }
.app-sheet .modal-body form.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

/* ---------- MODAL → BOTTOM SHEET trên di động ---------- */
@media (max-width: 575.98px) {
    .modal .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-fullscreen) {
        margin: 0;
        max-width: none;
        width: 100%;
        min-height: 100%;
        height: auto;
        display: flex;
        align-items: flex-end;
    }
    .modal .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-fullscreen) > .modal-content {
        width: 100%;
        max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px));
        border: 0;
        border-radius: var(--app-sheet-radius) var(--app-sheet-radius) 0 0;
        padding-top: 14px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -10px 40px rgba(15, 23, 42, .18);
        overflow: hidden;
    }
    .modal .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-fullscreen) > .modal-content > .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* Tay nắm (drag handle) — vuốt xuống ở phần đầu sheet để đóng */
    .modal .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-fullscreen) > .modal-content::before {
        content: "";
        position: absolute;
        top: 6px; left: 50%;
        width: 40px; height: 5px;
        margin-left: -20px;
        border-radius: 999px;
        background: #d5d8e3;
        z-index: 2;
    }
    .modal .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-fullscreen) > .modal-content > .modal-header {
        padding-top: .35rem;
        border-bottom-color: #f0f1f6;
    }

    /* Trượt từ dưới lên thay cho hiệu ứng scale của desktop */
    .modal.fade .modal-dialog,
    .modal.fade .modal-dialog.modal-fullscreen-sm-down {
        transform: translateY(100%);
        transition: transform .32s var(--app-ease, cubic-bezier(.22, .8, .24, 1));
    }
    .modal.show .modal-dialog,
    .modal.show .modal-dialog.modal-fullscreen-sm-down { transform: translateY(0); }
    .modal.is-dragging .modal-dialog { transition: none !important; }

    .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
    .modal-footer > .btn { flex: 1 1 0; min-height: 44px; }

    /* Modal toàn màn hình (bảng thao tác phòng...) — header dính đỉnh */
    .modal-fullscreen-sm-down .modal-header {
        position: sticky; top: 0; z-index: 6; background: #fff;
        padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
    }
}

/* Modal lồng: các lớp phía sau hơi thu nhỏ/mờ để thấy rõ "chồng lớp" */
.modal.is-stacked-behind .modal-dialog { transform: scale(.96) !important; filter: brightness(.96); transition: transform .25s ease, filter .25s ease; }

/* ---------- Sheet chi tiết (modal lồng dùng chung) ---------- */
.app-sheet .modal-title { font-size: 1.02rem; font-weight: 700; }

.sheet-detail-list { margin: 0; }
.sheet-detail-row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    padding: .62rem 0;
    border-bottom: 1px dashed #eceef4;
}
.sheet-detail-row:last-child { border-bottom: 0; }
.sheet-detail-label {
    flex: 0 0 38%;
    color: var(--app-text-muted);
    font-size: .82rem;
    font-weight: 500;
}
.sheet-detail-value {
    flex: 1 1 auto;
    text-align: right;
    font-weight: 600;
    font-size: .9rem;
    color: #1f2430;
    word-break: break-word;
    min-width: 0;
}
.sheet-detail-value .text-muted { font-weight: 400; }
.sheet-detail-value.is-long { text-align: left; font-weight: 500; }
.sheet-detail-row.is-long { flex-direction: column; gap: 4px; }
.sheet-detail-row.is-long .sheet-detail-label { flex-basis: auto; }
.sheet-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-detail-actions > *, .sheet-detail-actions form > .btn { flex: 1 1 auto; }
.sheet-full-text { white-space: pre-line; line-height: 1.6; }

/* ---------- Chữ dài: rút gọn + "Xem thêm" (mở sheet) ---------- */
@media (max-width: 575.98px) {
    .clamp-sheet-body {
        display: -webkit-box;
        -webkit-line-clamp: var(--clamp-lines, 3);
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@media (min-width: 576px) {
    .clamp-sheet-more { display: none !important; }
}
.clamp-sheet-more {
    border: 0;
    background: none;
    padding: 0;
    margin-top: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Khối [data-mobile-sheet]: ẩn trên di động (thay bằng nút mở sheet) */
@media (max-width: 767.98px) {
    .mst-hidden-mobile { display: none !important; }
}
@media (min-width: 768px) {
    .mobile-sheet-trigger { display: none !important; }
}

/* ---------- BẢNG → DANH SÁCH THẺ trên di động ---------- */
@media (max-width: 767.98px) {
    .card:has(> .table-responsive > table.table-mcard),
    .card:has(> .table-responsive > table.table-mcard) > .table-responsive {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .card:has(> .table-responsive > table.table-mcard) > .card-header {
        background: transparent !important;
        border: 0;
        padding-left: .15rem; padding-right: .15rem;
    }
    .table-responsive:has(> table.table-mcard) { overflow: visible; }

    table.table-mcard,
    table.table-mcard > tbody,
    table.table-mcard > tfoot { display: block; width: 100%; }
    table.table-mcard > thead { display: none; }
    table.table-mcard > tbody > tr,
    table.table-mcard > tfoot > tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid var(--app-border);
        border-radius: 16px;
        box-shadow: var(--app-shadow-sm);
        margin-bottom: 10px;
        padding: .7rem .9rem .55rem;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    table.table-mcard > tbody > tr.row-clickable:active { background: #f7f7fd; transform: scale(.995); }
    table.table-mcard > tbody > tr.d-none { display: none !important; }
    table.table-mcard > tbody > tr > td,
    table.table-mcard > tfoot > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: .28rem 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: right !important;
        white-space: normal;
        font-size: .88rem;
        min-width: 0;
        flex: 1 1 100%;
    }
    table.table-mcard > tbody > tr > td::before,
    table.table-mcard > tfoot > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        color: var(--app-text-muted);
        font-weight: 500;
        font-size: .8rem;
        padding-top: 1px;
    }
    table.table-mcard > tbody > tr > td > .mcard-val {
        min-width: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
    }
    /* Ô đầu tiên = tiêu đề thẻ */
    table.table-mcard > tbody > tr > td.mcard-title {
        order: -2;
        text-align: left !important;
        font-weight: 700;
        font-size: 1rem;
        color: #1f2430;
        padding-bottom: .35rem;
        margin-bottom: .2rem;
        border-bottom: 1px solid #f0f1f6 !important;
        padding-right: 28px;
    }
    table.table-mcard > tbody > tr > td.mcard-title::before { display: none; }
    table.table-mcard > tbody > tr.row-clickable::after {
        content: "\F285"; /* bi-chevron-right */
        font-family: "bootstrap-icons";
        position: absolute;
        top: .8rem; right: .8rem;
        color: #b3b8c9;
        font-size: .95rem;
    }
    /* Trường phụ (ẩn trong thẻ, xem trong sheet chi tiết) */
    table.table-mcard > tbody > tr > td.mcard-extra { display: none; }
    table.table-mcard > tbody > tr > td.mcard-empty { display: none; }
    /* Chân thẻ: nút "Chi tiết" (trái) + cột thao tác (phải) cùng 1 hàng */
    table.table-mcard > tbody > tr > td.mcard-actions,
    table.table-mcard > tbody > tr > td.mcard-footer {
        order: 10;
        flex: 1 1 auto;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        border-top: 1px solid #f0f1f6 !important;
        margin-top: .3rem;
        padding-top: .5rem;
    }
    table.table-mcard > tbody > tr > td.mcard-footer { justify-content: flex-start; }
    table.table-mcard > tbody > tr > td.mcard-actions { flex: 0 0 auto; justify-content: flex-end; margin-left: auto; }
    table.table-mcard > tbody > tr > td.mcard-actions::before,
    table.table-mcard > tbody > tr > td.mcard-footer::before { display: none; }
    table.table-mcard > tbody > tr > td.mcard-actions:empty { display: none; }
    table.table-mcard > tbody > tr > td.mcard-actions form { display: inline-flex; }
    .mcard-more-btn {
        border: 0;
        background: var(--bs-primary-bg-subtle);
        color: var(--bs-primary-text-emphasis);
        font-weight: 600;
        font-size: .78rem;
        border-radius: 999px;
        padding: .3rem .75rem;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    /* Dòng trống (empty state) */
    table.table-mcard > tbody > tr:has(> td.empty-state) { padding: 0; }
    table.table-mcard > tbody > tr > td.empty-state { justify-content: center; text-align: center !important; flex-direction: column; align-items: center; }
    table.table-mcard > tbody > tr > td.empty-state::before { display: none; }
    /* Dòng tổng (tfoot) → thẻ tổng kết nổi bật */
    table.table-mcard > tfoot > tr {
        background: linear-gradient(135deg, #f5f6ff, #fff);
        border-color: var(--bs-primary-border-subtle);
    }
    table.table-mcard > tfoot > tr > td.mcard-title { font-weight: 700; justify-content: flex-start; text-align: left !important; }
    table.table-mcard > tfoot > tr > td.mcard-title::before { display: none; }
}

/* ---------- Tinh chỉnh chung trên điện thoại ---------- */
@media (max-width: 767.98px) {
    .card { border-radius: 16px; }
    .btn { min-height: 38px; }
    .btn-sm { min-height: 32px; }
    .form-control, .form-select { font-size: 16px; } /* chặn iOS tự zoom khi focus */
    .form-control-sm, .form-select-sm { font-size: 15px; }
    .pagination { flex-wrap: wrap; justify-content: center; }
    main.app-content > .d-flex.justify-content-between > form { flex: 1 1 100%; }
    main.app-content > .d-flex.justify-content-between > form input[type="text"] { max-width: none !important; }
}
@media (min-width: 768px) {
    table.table-mcard td.mcard-footer { display: none; }
}
@media (max-width: 575.98px) {
    .stat-tile { min-width: 0; }
    .stat-tile > div { min-width: 0; }
    .stat-tile .stat-value { font-size: 1.05rem; overflow-wrap: anywhere; line-height: 1.25; }
}

/* =======================================================================
   Thanh nút bảng thao tác phòng (.panel-modal-footer) — v3
   Nhóm phụ (.pmf-secondary) bên trái dạng nút "ghost" có icon; nhóm chính
   (.pmf-primary) bên phải, nút to. Trên điện thoại: thanh dính đáy gồm nút
   "⋯" (mở action sheet chứa nhóm phụ) + nút chính chiếm phần còn lại;
   khối "Trả phòng & thanh toán" mở trong sheet riêng (app-mobile.js).
   ======================================================================= */
.panel-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 1.1rem;
    padding: .85rem 0 0;
    border-top: 1px solid var(--app-border);
}

.pmf-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.pmf-secondary > form { display: inline-flex; margin: 0; }

.pmf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    background: #f3f4f9;
    color: #3a4050;
    font-weight: 500;
    border-radius: 10px;
    padding: .38rem .7rem;
}
.pmf-btn i { font-size: .95rem; opacity: .85; }
.pmf-btn:hover { background: #e9ebf4; color: #1f2430; border-color: #dfe2ee; }
.pmf-btn-success { color: #047857; background: #ecfdf5; }
.pmf-btn-success:hover { background: #d1fae5; color: #065f46; }
.pmf-btn-warning { color: #b45309; background: #fffbeb; }
.pmf-btn-warning:hover { background: #fef3c7; color: #92400e; }
.pmf-btn-danger { color: #dc2626; background: #fef2f2; }
.pmf-btn-danger:hover { background: #fee2e2; color: #b91c1c; }

.pmf-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}
.pmf-primary > form { display: inline-flex; margin: 0; }

.pmf-main {
    min-height: 42px;
    padding: .5rem 1.25rem;
    font-weight: 600;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 6px 14px -6px rgba(16, 24, 40, .35);
}
.pmf-main i { font-size: 1.05rem; }
.btn-success.pmf-main { background: linear-gradient(135deg, #10b981, #059669); border-color: #059669; }
.btn-danger.pmf-main { background: linear-gradient(135deg, #f43f5e, #dc2626); border-color: #dc2626; }

/* Khối Trả phòng mở rộng trên desktop: chiếm trọn hàng dưới thanh nút */
.pmf-primary:has(> .checkout-form-block:not(.d-none)) { flex: 1 1 100%; }
.pmf-primary > .checkout-form-block { flex: 1 1 100%; width: 100%; text-align: left; }

.pmf-more-btn { display: none; }

/* ---- Điện thoại: thanh hành động dính đáy kiểu app ---- */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .panel-modal-footer,
    .panel-modal-footer {
        position: sticky;
        /* Chrome tính vùng dính theo content-box của vùng cuộn (.modal-body
           có padding) → bù âm đúng bằng padding để thanh sát mép đáy. */
        bottom: calc(-1 * var(--bs-modal-padding, 1rem));
        z-index: 5;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 1rem calc(-1 * var(--bs-modal-padding, 1rem)) calc(-1 * var(--bs-modal-padding, 1rem));
        padding: .65rem var(--bs-modal-padding, 1rem) calc(.65rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--app-border);
        border-radius: 0;
        box-shadow: 0 -8px 20px rgba(15, 23, 42, .08);
    }

    .panel-modal-footer .pmf-secondary { display: none; }

    .pmf-more-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 48px;
        min-width: 48px;
        padding: 0 .9rem;
        border: 1px solid var(--app-border);
        border-radius: 14px;
        background: #f5f6fa;
        color: #2b3040;
        font-weight: 600;
        font-size: .88rem;
    }
    .pmf-more-btn i { font-size: 1.3rem; line-height: 1; }
    .pmf-more-btn:active { transform: scale(.95); background: #eceef5; }
    .panel-modal-footer:not(.pmf-no-primary) .pmf-more-btn span { display: none; }
    .pmf-no-primary .pmf-more-btn { flex: 1 1 auto; }

    .pmf-primary {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        margin-left: 0;
        min-width: 0;
    }
    .pmf-primary > form,
    .pmf-primary > .pmf-main { flex: 1 1 0; min-width: 0; }
    .pmf-primary .pmf-main { width: 100%; min-height: 48px; font-size: 1rem; border-radius: 14px; }
    /* Khối Trả phòng không mở trong thanh đáy — đã chuyển sang sheet */
    .pmf-primary > .checkout-form-block { display: none !important; }
}

/* ---- Action sheet (nhóm nút phụ khi mở trên di động) ---- */
.action-sheet-list { display: flex; flex-direction: column; gap: 6px; }
.action-sheet-list > form { margin: 0; display: block; }
.action-sheet-list .pmf-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: .8rem .95rem;
    font-size: .95rem;
    border-radius: 14px;
    min-height: 50px;
}
.action-sheet-list .pmf-btn i {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .8);
    font-size: 1.05rem;
    opacity: 1;
}
.action-sheet-list .pmf-btn::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    margin-left: auto;
    color: #b3b8c9;
    font-size: .85rem;
}
.checkout-sheet-body .checkout-form-block { border: 0; box-shadow: none !important; }
.checkout-sheet-body .checkout-form-block > .card-header { display: none; }
.checkout-sheet-body .checkout-form-block > .card-body { padding: 0; }
.checkout-sheet-body .checkout-form-block [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }

/* Số tiền rút gọn ở ô thống kê (App\Support\Money::short) — chạm để xem đầy đủ */
.stat-value[data-money-full] {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
    text-decoration: underline dotted rgba(107, 114, 128, .35);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.stat-value[data-money-full].is-full {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .95em;
    color: var(--bs-primary);
}
/* Đang chạy số (đếm trên số đầy đủ trước khi đổi sang dạng gọn): thu nhỏ
   chữ một chút để dãy số dài không bị cắt "…" giữa chừng. */
.stat-value[data-money-full].is-counting {
    font-size: .82em;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}


/* =======================================================================
   =====================  V4 — LÀM ĐẸP GIAO DIỆN DESKTOP  =====================
   (chỉ áp dụng từ 992px trở lên — không ảnh hưởng giao diện di động V3)
   - Sidebar dính cả chiều cao, thẻ người dùng ở chân, thu gọn thành
     thanh icon 76px (nút ở chân sidebar, nhớ trạng thái), tooltip khi thu gọn
   - Thanh tiêu đề: breadcrumb nhóm/trang, ngày hôm nay, nút nhanh "Sơ đồ
     phòng", menu tài khoản dạng dropdown
   - Card/bảng/form/nút lọc/stat tile tinh chỉnh lại khoảng cách & chiều sâu
   ======================================================================= */
:root {
    --app-sidebar-w: 260px;
    --app-sidebar-w-collapsed: 76px;
    --app-radius-card: 16px;
}

@media (min-width: 992px) {
    body { background: #f3f4f9; }

    /* ---------- Sidebar ---------- */
    .sidebar {
        --bs-offcanvas-width: var(--app-sidebar-w);
        width: var(--app-sidebar-w);
        position: sticky;
        top: 0;
        height: 100vh;
        transition: width .25s var(--app-ease, ease);
        border-right: 0 !important;
        box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 6px 0 24px rgba(15, 23, 42, .06);
        z-index: 1030;
    }
    .sidebar .offcanvas-body { height: 100%; overflow: hidden; }
    .sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }

    .sidebar .brand {
        padding: 22px 18px 18px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .sidebar .brand .brand-icon,
    .sidebar .brand .brand-logo {
        width: 38px; height: 38px; border-radius: 11px; object-fit: cover; flex-shrink: 0;
        box-shadow: 0 6px 16px rgba(79, 70, 229, .35);
    }
    .sidebar .brand .brand-name {
        font-size: .98rem;
        line-height: 1.25;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .sidebar .section-title { padding: 16px 22px 6px; font-size: .66rem; }

    .sidebar a.nav-link-item {
        margin: 2px 12px;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: .88rem;
        white-space: nowrap;
        position: relative;
    }
    .sidebar a.nav-link-item:hover { padding-left: 16px; background: rgba(255, 255, 255, .07); }
    .sidebar a.nav-link-item i {
        width: 30px; height: 30px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
        font-size: 1.02rem;
        flex-shrink: 0;
    }
    .sidebar a.nav-link-item.active {
        background: linear-gradient(90deg, rgba(99, 102, 241, .28), rgba(99, 102, 241, .08));
        box-shadow: none;
        color: #fff;
    }
    .sidebar a.nav-link-item.active i {
        background: linear-gradient(135deg, var(--bs-primary), #7c74f0);
        color: #fff;
        box-shadow: 0 4px 12px rgba(79, 70, 229, .45);
    }
    .sidebar a.nav-link-item.active::before {
        content: "";
        position: absolute;
        left: -12px; top: 8px; bottom: 8px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: #818cf8;
    }

    .sidebar-footer {
        align-items: center;
        gap: 8px;
        padding: 12px 12px 14px;
        border-top: 1px solid rgba(255, 255, 255, .07);
        background: rgba(0, 0, 0, .12);
    }
    .sidebar-user { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding-left: 4px; }
    .sidebar-user .avatar-circle { background: linear-gradient(135deg, #6366f1, #a78bfa); color: #fff; width: 36px; height: 36px; }
    .sidebar-user-info { min-width: 0; }
    .sidebar-user-name { color: #fff; font-weight: 600; font-size: .85rem; }
    .sidebar-user-role { color: var(--app-sidebar-section-title); font-size: .72rem; }
    .sidebar-collapse-btn {
        flex: 0 0 auto;
        width: 34px; height: 34px;
        border: 0; border-radius: 9px;
        background: rgba(255, 255, 255, .06);
        color: var(--app-sidebar-text);
        display: inline-flex; align-items: center; justify-content: center;
        transition: background-color .15s ease, transform .25s ease;
    }
    .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

    /* Thu gọn: thanh icon */
    html.sidebar-collapsed .sidebar { width: var(--app-sidebar-w-collapsed); }
    html.sidebar-collapsed .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
    html.sidebar-collapsed .sidebar .brand-name,
    html.sidebar-collapsed .sidebar .nav-label,
    html.sidebar-collapsed .sidebar-user-info { display: none; }
    html.sidebar-collapsed .sidebar .section-title { padding: 14px 0 4px; text-align: center; }
    html.sidebar-collapsed .sidebar .section-title span { display: none; }
    html.sidebar-collapsed .sidebar .section-title::after {
        content: ""; display: block; width: 22px; height: 1px; margin: 0 auto; background: rgba(255,255,255,.12);
    }
    html.sidebar-collapsed .sidebar a.nav-link-item { justify-content: center; padding: 8px 0; margin: 3px 14px; }
    html.sidebar-collapsed .sidebar a.nav-link-item:hover { padding-left: 0; }
    html.sidebar-collapsed .sidebar a.nav-link-item.active::before { left: -14px; }
    html.sidebar-collapsed .sidebar-footer { flex-direction: column; padding: 12px 0 14px; }
    html.sidebar-collapsed .sidebar-user { padding-left: 0; justify-content: center; }
    html.sidebar-collapsed .sidebar-collapse-btn { transform: scaleX(-1); }

    .sidebar-tip {
        position: fixed;
        z-index: 1090;
        padding: .35rem .65rem;
        border-radius: 8px;
        background: #111427;
        color: #fff;
        font-size: .8rem;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
        transform: translateY(-50%);
        animation: appFadeIn .12s ease;
    }
    @keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* ---------- Thanh tiêu đề ---------- */
    .top-navbar {
        min-height: 70px;
        padding-left: 28px !important;
        padding-right: 28px !important;
        background: rgba(255, 255, 255, .88);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid rgba(230, 232, 240, .9);
    }
    .top-navbar .appbar-title {
        font-size: 1.28rem;
        font-weight: 700;
        color: #161b2e !important;
        letter-spacing: -.02em;
        line-height: 1.2;
    }
    .topbar-crumb {
        align-items: center;
        gap: 6px;
        font-size: .74rem;
        font-weight: 500;
        color: #8a90a6;
        margin-bottom: 2px;
    }
    .topbar-crumb i { font-size: .6rem; opacity: .7; }
    .topbar-crumb span:last-child { color: var(--bs-primary); }

    .topbar-date {
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 14px;
        border-radius: 12px;
        background: #f3f4f9;
        color: #4b5468;
        font-size: .82rem;
        font-weight: 500;
    }
    .topbar-date i { color: var(--bs-primary); }

    .topbar-quick { height: 40px; align-items: center; gap: 6px; border-radius: 12px; padding: 0 16px; }

    .topbar-account {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 46px;
        padding: 4px 10px 4px 5px;
        border: 1px solid var(--app-border);
        border-radius: 14px;
        background: #fff;
        color: #1f2430;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .topbar-account:hover,
    .topbar-account[aria-expanded="true"] { border-color: #c7cbe0; box-shadow: var(--app-shadow-sm); }
    .topbar-account .avatar-circle { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #6366f1, #a78bfa); color: #fff; }
    .topbar-account-caret { font-size: .75rem; color: #8a90a6; transition: transform .2s ease; }
    .topbar-account[aria-expanded="true"] .topbar-account-caret { transform: rotate(180deg); }
    .topbar-account-menu {
        min-width: 230px;
        padding: .4rem;
        border: 1px solid var(--app-border);
        border-radius: 14px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
        margin-top: 8px !important;
    }
    .topbar-account-menu .dropdown-item { border-radius: 9px; padding: .55rem .75rem; display: flex; align-items: center; gap: 10px; font-size: .9rem; }
    .topbar-account-menu .dropdown-item:hover { background: #f3f4f9; }
    .topbar-account-menu .dropdown-item.text-danger:hover { background: #fef2f2; }

    /* ---------- Vùng nội dung ---------- */
    main.app-content { padding: 26px 28px 40px; }

    /* ---------- Card ---------- */
    .card {
        border-radius: var(--app-radius-card);
        border-color: #e8eaf2;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
    }
    .card-header {
        border-top-left-radius: var(--app-radius-card) !important;
        border-top-right-radius: var(--app-radius-card) !important;
        padding: 1rem 1.25rem;
        font-size: .95rem;
        font-weight: 650;
        color: #1f2430;
        background: #fff !important;
    }
    .card-body { padding: 1.1rem 1.25rem; }
    .card > .table-responsive { border-radius: var(--app-radius-card); }
    .card > .card-header + .table-responsive { border-radius: 0 0 var(--app-radius-card) var(--app-radius-card); }

    /* ---------- Bảng ---------- */
    .table { font-size: .88rem; }
    .table > :not(caption) > * > * { padding: .85rem 1rem; }
    .table thead.table-light th {
        background: #f8f9fc;
        color: #6b7280;
        font-size: .7rem;
        letter-spacing: .06em;
        padding-top: .75rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid #eceef5;
    }
    .table > tbody > tr > td { border-color: #f0f1f6; color: #2b3040; }
    .table > tbody > tr:last-child > td { border-bottom: 0; }
    .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
    .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
    .table-hover > tbody > tr:hover > * { background-color: #f6f7ff; }
    .table > tbody > tr.row-clickable > td:first-child { font-weight: 600; color: #1f2430; }
    .table > tbody > tr.row-clickable:hover > td:first-child { color: var(--bs-primary); }
    .table .badge { font-size: .72rem; }

    /* ---------- Nút lọc dạng chip (btn-group) ---------- */
    main.app-content .btn-group:not(.btn-group-vertical) {
        gap: 4px;
        padding: 4px;
        background: #fff;
        border: 1px solid #e8eaf2;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
        flex-wrap: wrap;
    }
    main.app-content .btn-group > .btn {
        border: 0 !important;
        border-radius: 9px !important;
        margin-left: 0 !important;
        background: transparent;
        color: #4b5468;
        font-weight: 500;
        box-shadow: none;
        padding: .38rem .8rem;
    }
    main.app-content .btn-group > .btn:hover { background: #f3f4f9; color: #1f2430; }
    main.app-content .btn-group > .btn.active {
        background: var(--bs-primary);
        color: #fff;
        box-shadow: 0 4px 10px -2px rgba(79, 70, 229, .45);
    }
    main.app-content .btn-group > .btn-outline-secondary.active { background: #1f2430; box-shadow: 0 4px 10px -2px rgba(31, 36, 48, .35); }

    /* ---------- Form ---------- */
    .form-control, .form-select { min-height: 40px; border-radius: 10px; border-color: #dcdfea; }
    .form-control-sm, .form-select-sm { min-height: 34px; border-radius: 9px; }
    .form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: #c5c9da; }
    .form-label { font-size: .84rem; font-weight: 600; color: #3a4050; margin-bottom: .4rem; }
    /* Thanh Lưu/Hủy: dính đáy màn hình khi form dài (luôn bấm được nút Lưu) */
    .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        justify-content: flex-end;
        margin-top: 1.4rem;
        padding: .85rem 1.25rem;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid #e8eaf2;
        border-radius: 14px;
        box-shadow: 0 -6px 20px -8px rgba(15, 23, 42, .12);
    }
    /* Nằm trong card: thành chân card, tràn sát 2 mép */
    .card-body > .form-actions,
    .card-body > form > .form-actions {
        margin: 1.4rem -1.25rem -1.1rem;
        border: 0;
        border-top: 1px solid #eceef5;
        border-radius: 0 0 var(--app-radius-card) var(--app-radius-card);
        background: rgba(250, 251, 253, .96);
    }
    .form-actions > .btn { min-width: 110px; min-height: 40px; border-radius: 10px; }
    .form-actions > .btn-primary { order: 2; }
    .form-actions > .btn-outline-secondary { order: 1; }

    /* ---------- Nút ---------- */
    .btn { border-radius: 10px; white-space: nowrap; }
    .btn-sm { border-radius: 8px; }
    .btn-primary { background: linear-gradient(135deg, #5b52ee, var(--bs-primary)); border: 0; }
    .btn-primary:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); }

    /* ---------- Stat tile ---------- */
    .stat-tile { padding: 1.2rem 1.3rem; border-radius: var(--app-radius-card); gap: 16px; border-color: #e8eaf2; }
    .stat-tile:hover { box-shadow: 0 10px 24px -8px rgba(16, 24, 40, .14); transform: translateY(-2px); }
    .stat-tile .stat-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 1.35rem; }
    .stat-tile .stat-label { font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
    .stat-tile .stat-value { font-size: 1.6rem; letter-spacing: -.02em; }

    /* ---------- Thông báo ---------- */
    .alert { border-radius: 14px; border: 1px solid transparent; padding: .9rem 1.1rem; }
    .alert-secondary { background: #f5f6fb; border-color: #e6e8f2; color: #4b5468; }
    .alert-info { background: #eff6ff; border-color: #dbeafe; color: #1e40af; }

    /* ---------- Phân trang ---------- */
    .pagination { gap: 4px; }
    .pagination .page-link { border-radius: 9px !important; min-width: 36px; text-align: center; }
    .pagination .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); box-shadow: 0 4px 10px -2px rgba(79, 70, 229, .45); }

    /* ---------- Modal ---------- */
    .modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); }
    .modal-header { padding: 1rem 1.4rem; border-bottom-color: #eceef5; }
    .modal-title { font-weight: 700; letter-spacing: -.01em; }
    .modal-body { padding: 1.25rem 1.4rem; }
    .modal-backdrop.show { opacity: .45; }

    /* ---------- Sơ đồ phòng ---------- */
    .room-tile-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
}

@media (min-width: 1600px) {
    main.app-content { padding-left: 36px; padding-right: 36px; }
}

/* Hàng lọc dạng form.row.align-items-end: nút cao bằng ô nhập để thẳng hàng đáy */
@media (min-width: 992px) {
    form.row.align-items-end .btn:not(.btn-sm) { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
}

/* =======================================================================
   Modal Thêm / Sửa (app-mobile.js mục 13) — nội dung trang form nằm gọn
   trong modal: bỏ khung card thừa, thanh Lưu/Hủy dính đáy modal.
   ======================================================================= */
.app-form-modal .modal-body { padding: 1.1rem 1.35rem 0; }
.app-form-modal .form-modal-content > .card,
.app-form-modal .form-modal-content > .row > [class*="col"] > .card.form-card,
.app-form-modal .form-modal-content > .row > [class*="col"] > .card.form-card-wide {
    border: 0; box-shadow: none; background: transparent;
}
.app-form-modal .form-modal-content > .card > .card-body,
.app-form-modal .form-modal-content .card.form-card > .card-body,
.app-form-modal .form-modal-content .card.form-card-wide > .card-body { padding: 0; }
.app-form-modal .form-modal-content { padding-bottom: 1.1rem; }

.app-form-modal .form-actions,
.app-form-modal .card-body > .form-actions,
.app-form-modal .card-body > form > .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 1.2rem -1.35rem -1.1rem;
    padding: .8rem 1.35rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0;
    border-top: 1px solid #eceef5;
    border-radius: 0;
    box-shadow: 0 -6px 18px -8px rgba(15, 23, 42, .12);
}
.app-form-modal .form-actions > .btn { min-width: 110px; min-height: 42px; }
.app-form-modal .form-actions > .btn-primary { order: 2; }
.app-form-modal .form-actions > .btn-outline-secondary { order: 1; }

@media (max-width: 575.98px) {
    .app-form-modal .modal-body { padding: 1rem 1rem 0; }
    .app-form-modal .form-actions,
    .app-form-modal .card-body > .form-actions,
    .app-form-modal .card-body > form > .form-actions { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
    .app-form-modal .form-actions > .btn { flex: 1 1 0; min-height: 48px; }
}
.app-form-modal .row .form-actions,
.app-form-modal .row .card-body > form > .form-actions {
    margin-left: 0; margin-right: 0;
    border: 1px solid #eceef5; border-radius: 12px;
}
.app-form-modal .form-actions,
.app-form-modal .card-body > .form-actions,
.app-form-modal .card-body > form > .form-actions { background: #fff; }


/* =======================================================================
   =====================  V5 — TỐI ƯU ANIMATION (MƯỢT, KHÔNG KHỰNG)  =====================
   Nguyên tắc: chỉ animate transform/opacity (GPU), bỏ các hiệu ứng buộc
   trình duyệt vẽ lại/tính lại layout mỗi khung hình.
   ======================================================================= */

/* 1) Bỏ backdrop-filter (làm mờ nền) ở thanh tiêu đề, thanh tab đáy, thanh
      Lưu/Hủy, thanh nút modal phòng: blur phải vẽ lại vùng phía sau MỖI
      khung hình khi cuộn — nguyên nhân chính gây khựng khi cuộn, nhất là
      máy yếu/điện thoại. Thay bằng nền gần như đặc, nhìn gần như y hệt. */
.top-navbar,
.app-bottom-nav,
.form-actions,
.panel-modal-footer,
.app-form-modal .form-actions {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.top-navbar { background: rgba(255, 255, 255, .985) !important; }
.app-bottom-nav { background: rgba(255, 255, 255, .985); }
.form-actions, .panel-modal-footer { background-color: #fff; }
.offcanvas-backdrop.show { backdrop-filter: none; }

/* Thanh dính (sticky/fixed) có lớp vẽ riêng → cuộn không phải vẽ lại chúng */
.top-navbar, .app-bottom-nav, .app-fab { transform: translateZ(0); }

/* 2) Hiệu ứng vào trang: chỉ mờ dần nhanh (không dịch chuyển cả khối nội
      dung lớn — dịch chuyển khối lớn ngay lúc trình duyệt còn đang vẽ trang
      là lúc dễ rớt khung hình nhất). */
@keyframes appPageIn { from { opacity: 0; } to { opacity: 1; } }
main.app-content { animation: appPageIn .2s ease-out; }

.reveal-in { transition: opacity .3s ease-out; }

/* 3) Sidebar: hover không đổi padding (đổi padding = tính lại layout mỗi
      khung hình) — thay bằng dịch chuyển nhẹ chữ/icon bằng transform. */
.sidebar a.nav-link-item { transition: background-color .15s ease, color .15s ease !important; }
.sidebar a.nav-link-item:hover { padding-left: 16px !important; }
.sidebar a.nav-link-item i,
.sidebar a.nav-link-item .nav-label { transition: transform .18s ease; }
.sidebar a.nav-link-item:hover .nav-label { transform: translateX(3px); }
.sidebar a.nav-link-item:hover i { transform: scale(1.06); }
@media (min-width: 992px) {
    .sidebar a.nav-link-item:hover { padding-left: 12px !important; }
    html.sidebar-collapsed .sidebar a.nav-link-item:hover { padding-left: 0 !important; }
    /* Thu gọn/mở rộng: chỉ chuyển động lúc bấm nút (không chạy khi tải trang) */
    .sidebar { transition: none; }
    html.sidebar-animating .sidebar { transition: width .2s cubic-bezier(.2, .8, .2, 1); }
    html.sidebar-animating .app-main { pointer-events: none; }
}

/* 4) Modal: chuẩn bị sẵn lớp GPU cho hộp thoại khi trượt/phóng; modal phía
      sau (khi mở modal lồng) chỉ thu nhỏ nhẹ, bỏ filter brightness (filter
      trên khối lớn = vẽ lại toàn bộ modal mỗi khung hình). */
.modal.fade .modal-dialog { will-change: transform; backface-visibility: hidden; }
.modal.is-stacked-behind .modal-dialog { filter: none !important; transition: transform .22s ease !important; }
.modal-backdrop.fade { transition: opacity .2s linear; }

/* 5) Nút: bỏ filter khi hover/nhấn (vẽ lại gradient), dùng opacity/transform */
.btn { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease, opacity .15s ease !important; }
.btn-primary:hover, .btn-primary:focus { filter: none; opacity: .94; }
.btn-primary:active { filter: none; opacity: 1; }
.btn:active { transform: scale(.985); }
.btn-ripple { will-change: transform, opacity; }
.badge { transition: none; }

/* 6) Thẻ hover: nâng bằng transform + bóng tĩnh (không animate box-shadow nhiều thẻ) */
.stat-tile, .room-tile { transition: transform .18s ease, border-color .15s ease !important; }
.stat-tile .stat-icon { transition: transform .2s ease; }

/* 7) Icon "trống" nhấp nháy vô hạn → chỉ chạy 1 lần */
.empty-state i { animation: appPulseSoft 1.6s ease-in-out 1; }

/* 8) Danh sách dài: trình duyệt bỏ qua vẽ các thẻ phòng ngoài màn hình */
.room-tile { content-visibility: auto; contain-intrinsic-size: auto 132px; }

/* =======================================================================
   Quét QR trên CCCD (js/cccd-qr.js)
   ======================================================================= */
.cccd-qr-modal .modal-dialog { max-width: 520px; }
.cccd-qr-view {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #0f1224;
}
.cccd-qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cccd-qr-frame {
    position: absolute;
    left: 50%; top: 50%;
    width: 62%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2000px rgba(8, 10, 24, .45);
    border-radius: 14px;
    pointer-events: none;
}
.cccd-qr-frame span {
    position: absolute; width: 26px; height: 26px;
    border: 3px solid #fff; border-radius: 4px;
}
.cccd-qr-frame span:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.cccd-qr-frame span:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.cccd-qr-frame span:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.cccd-qr-frame span:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.cccd-qr-line {
    position: absolute; left: 8%; right: 8%; top: 10%;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #818cf8, transparent);
    box-shadow: 0 0 10px #818cf8;
    animation: cccdQrLine 1.8s ease-in-out infinite alternate;
}
@keyframes cccdQrLine { from { top: 10%; } to { top: 88%; } }
.cccd-qr-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #c7cbe0; text-align: center; padding: 1.2rem; font-size: .9rem;
    background: #0f1224;
}
.cccd-qr-placeholder i { font-size: 2rem; opacity: .7; }
.cccd-qr-hint { margin-top: .8rem; font-size: .85rem; color: #4b5468; }
.cccd-qr-hint i { color: var(--bs-primary); }
.cccd-qr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .8rem; }
.cccd-qr-actions > * { flex: 1 1 auto; }
.cccd-qr-manual { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed #e3e5ee; }
.cccd-qr-filled {
    box-shadow: 0 0 0 .2rem rgba(16, 185, 129, .25) !important;
    border-color: #10b981 !important;
    transition: box-shadow .3s ease, border-color .3s ease;
}

/* Nhãn nhỏ trong ô chọn Tom Select (data-badge) — vd loại phòng Nhà nghỉ/KS | Nhà trọ */
.ts-badge {
    display: inline-block;
    margin-left: 6px;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: 1px;
    background: #eef0f6;
    color: #4b5468;
}
.ts-badge-nghi { background: var(--bs-primary-bg-subtle, #e0e7ff); color: var(--bs-primary-text-emphasis, #3730a3); }
.ts-badge-tro { background: #cff4fc; color: #055160; }
.ts-dropdown .optgroup-header { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a90a6; }

/* Ô "Khách nhận phòng ngay bây giờ" (modal đặt phòng) — nổi bật, đổi màu theo trạng thái */
.checkin-now-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: .25rem 0 0;
    padding: .7rem .9rem;
    border: 2px solid #d7dae5;
    border-radius: 12px;
    background: #f7f8fb;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.checkin-now-toggle .form-check-input {
    width: 2.6em; height: 1.4em;
    margin: 0;
    cursor: pointer;
    float: none;
}
.checkin-now-toggle .form-check-input:checked { background-color: #059669; border-color: #059669; }
.checkin-now-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.checkin-now-title { font-weight: 700; font-size: .95rem; color: #1f2430; }
.checkin-now-sub { font-size: .78rem; color: #6b7280; }
.checkin-now-on { display: none; }
.checkin-now-toggle:has(input:checked) {
    border-color: #10b981;
    background: #ecfdf5;
}
.checkin-now-toggle:has(input:checked) .checkin-now-title { color: #047857; }
.checkin-now-toggle:has(input:checked) .checkin-now-on { display: block; }
.checkin-now-toggle:has(input:checked) .checkin-now-off { display: none; }
.checkin-now-toggle .form-check.form-switch { margin-left: 0 !important; padding-left: 0 !important; min-height: 0; display: flex; }
.checkin-now-toggle .form-check.form-switch .form-check-input { margin-left: 0 !important; }

/* Logo ứng dụng (images/icons) — ảnh tròn, không cần nền/bo góc như icon cũ */
.sidebar .brand .brand-logo-app { border-radius: 50% !important; box-shadow: 0 4px 12px rgba(65, 166, 255, .35) !important; background: transparent; }
.appbar-brand-icon:has(img[src*="images/icons"]) { background: transparent; border-radius: 50%; }

/* Chọn loại giường (Thêm/Sửa phòng) */
.bed-type-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bed-type-option {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 68px; padding: .5rem .4rem;
    border: 1.5px solid #dcdfea; border-radius: 12px; background: #fff;
    font-size: .82rem; font-weight: 600; color: #4b5468; text-align: center; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.bed-type-option:hover { border-color: #b9bed3; }
.bed-type-option i { font-size: 1.05rem; }
.bed-type-icons { display: inline-flex; gap: 1px; color: #8a90a6; }
.btn-check:checked + .bed-type-option {
    border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
}
.btn-check:checked + .bed-type-option .bed-type-icons { color: var(--bs-primary); }
.btn-check:focus-visible + .bed-type-option { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }
@media (max-width: 400px) { .bed-type-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Nhãn loại giường trên ô phòng */
.room-tile-bed { font-size: .74rem; font-weight: 600; color: #6b7280; margin-top: 2px; }
.room-tile-bed i { font-size: .72rem; opacity: .8; }

/* Thời hạn sử dụng của shop (multi-shop) */
.sidebar-shop-expiry { font-size: .68rem; margin-top: 2px; color: #86efac; }
.sidebar-shop-expiry.expiry-warning { color: #fcd34d; }
.sidebar-shop-expiry.expiry-danger { color: #fca5a5; font-weight: 600; }
html.sidebar-collapsed .sidebar-shop-expiry { display: none; }
.shop-expiry-chip {
    font-size: .78rem; line-height: 1.5;
    padding: .45rem .6rem; border-radius: 10px;
    background: #ecfdf5; color: #065f46;
}
.shop-expiry-chip.expiry-warning { background: #fffbeb; color: #92400e; }
.shop-expiry-chip.expiry-danger { background: #fef2f2; color: #b91c1c; }

/* Chuyển phòng */
.transfer-current { display: flex; gap: 14px; align-items: center; padding: .8rem 1rem; border-radius: 14px; background: #f5f6fb; }
.transfer-current-room { text-align: center; min-width: 92px; padding-right: 14px; border-right: 1px dashed #d7dae5; }
.transfer-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.transfer-room {
    display: flex; flex-direction: column; gap: 2px;
    padding: .6rem .75rem; border: 1.5px solid #dcdfea; border-radius: 12px; background: #fff; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.transfer-room:hover { border-color: #b9bed3; }
.transfer-room-number { font-size: 1.15rem; font-weight: 800; color: #1f2430; }
.transfer-room-type, .transfer-room-bed { font-size: .75rem; color: #6b7280; }
.transfer-room-price { font-size: .8rem; font-weight: 700; color: #374151; margin-top: 2px; }
.transfer-room-price.up { color: #dc2626; }
.transfer-room-price.down { color: #059669; }
.btn-check:checked + .transfer-room { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.transfer-price-choice { padding: .8rem 1rem; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; }
.transfer-price-choice .bed-type-option strong { font-size: .95rem; }
@media (max-width: 575.98px) {
    .transfer-current { flex-direction: column; align-items: flex-start; }
    .transfer-current-room { border-right: 0; padding-right: 0; text-align: left; }
    .transfer-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cảnh báo khách đang có phòng (ô "Khách hàng đã có") */
.ts-badge-warn { background: #fff3cd; color: #997404; }
.customer-active-warn {
    margin-top: 6px;
    padding: .35rem .6rem;
    border-radius: 8px;
    background: #fff8e1;
    border: 1px solid #ffe69c;
    color: #8a6100;
    font-size: .8rem;
    font-weight: 500;
}
.customer-active-warn i { color: #f59e0b; }
#appConfirmMessage { white-space: pre-line; }

/* Chưa chọn "Hình thức thuê" khi bấm Đặt / Nhận phòng */
.rental-missing { animation: rentalShake .45s ease; }
.rental-missing .ts-control,
.rental-missing .form-select {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2) !important;
}
.rental-missing .form-label { color: #dc3545 !important; }
@keyframes rentalShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Lịch sử đặt phòng: thanh xóa hàng loạt đơn đã hủy */
.bulk-delete-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .5rem .75rem; border: 1px dashed #f1aeb5; border-radius: 12px; background: #fff5f5;
}
.bulk-delete-all { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 500; cursor: pointer; }
.bulk-check, #bulkCheckAll { width: 1.15rem; height: 1.15rem; cursor: pointer; vertical-align: -3px; }
tr.bulk-selected > td { background-color: #fff5f5 !important; }

/* Thẻ phòng có đơn ĐẶT TRƯỚC (khách chưa nhận) — đánh dấu nhẹ */
.room-tile-badges { display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; }
.room-tile-badges .room-tile-status-badge { margin-top: 6px; }
.room-tile-reserved {
    border-left-color: #6366f1;
    background-image: linear-gradient(135deg, rgba(99, 102, 241, .07), rgba(99, 102, 241, 0) 60%);
    box-shadow: var(--app-shadow-sm), inset 0 0 0 1px rgba(99, 102, 241, .22);
}
.room-tile-reserved .room-tile-status-dot { background: #e0e7ff; color: #4338ca; }
.room-tile-reserved-badge { background: #e0e7ff; color: #3730a3 !important; }
.room-tile-reserved-badge i { font-size: .62rem; }
.room-tile-reserved-eta { color: #4338ca; font-weight: 600; }

/* Loại phòng: bảng mốc lố giờ */
.ot-box { border: 1px solid var(--app-border, #e5e7eb); border-radius: 12px; padding: .75rem; background: #fafbff; height: 100%; }
.ot-box-title { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.ot-row {
    display: grid; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e5e7eb;
    grid-template-columns: 24px auto 76px auto minmax(80px, 1fr) 128px 32px; /* luôn 1 hàng, các cột thẳng nhau */
}
.ot-row:last-child { border-bottom: 0; }
.ot-no {
    width: 24px; height: 24px; border-radius: 50%; background: #e0e7ff; color: #3730a3;
    font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.ot-label { font-size: .82rem; color: #4b5468; white-space: nowrap; }
.ot-short { display: none; }
.ot-row .form-control, .ot-row .form-select { width: 100%; min-width: 0; }
.ot-row .ot-over { text-align: center; }
.ot-row .ot-value { text-align: right; font-variant-numeric: tabular-nums; }
.ot-row .ot-del { padding: .2rem 0; width: 32px; }
@media (max-width: 575.98px) {
    .ot-row { gap: 5px; grid-template-columns: 20px auto 50px auto minmax(56px, 1fr) 96px 28px; }
    .ot-no { width: 20px; height: 20px; font-size: .66rem; }
    .ot-label { font-size: .74rem; }
    .ot-long { display: none; }
    .ot-short { display: inline; }
    .ot-row .form-control, .ot-row .form-select { padding-left: .35rem; padding-right: .35rem; font-size: .8rem; }
    .ot-row .form-select { padding-right: 1.4rem; background-position: right .3rem center; }
    .ot-row .ot-del { width: 28px; }
}

/* Thẻ phòng: thời gian đã ở */
.room-tile-elapsed { font-size: .78rem; color: #b45309; display: flex; align-items: center; gap: 4px; }
.room-tile-elapsed strong { font-weight: 700; font-variant-numeric: tabular-nums; }