/* ==========================================================================
   HungPhat CRM — Modern theme layer
   Loaded after argon.css/app.css. Overrides visual language only:
   colors, spacing, shadows, radii, typography. No layout/behavior changes —
   every class/id targeted here already exists in the markup.
   ========================================================================== */

:root {
    --hp-primary: #5CA0F2;
    --hp-primary-dark: #3d84d8;
    --hp-primary-light: #eaf3fd;
    --hp-primary-soft: #d7e9fb;

    --hp-ink: #1e293b;
    --hp-ink-soft: #334155;
    --hp-muted: #64748b;
    --hp-border: #e2e8f0;
    --hp-bg: #f8fafc;
    --hp-surface: #ffffff;

    --hp-success: #10b981;
    --hp-success-bg: #ecfdf5;
    --hp-success-border: #10b981;
    --hp-success-text: #047857;

    --hp-warning: #f59e0b;
    --hp-warning-bg: #fffbeb;
    --hp-warning-border: #f59e0b;
    --hp-warning-text: #92400e;

    --hp-danger: #ef4444;
    --hp-danger-bg: #fef2f2;
    --hp-danger-border: #ef4444;
    --hp-danger-text: #991b1b;

    --hp-violet: #8b5cf6;
    --hp-violet-bg: #f5f3ff;
    --hp-violet-border: #8b5cf6;
    --hp-violet-text: #5b21b6;

    --hp-radius-sm: 6px;
    --hp-radius: 10px;
    --hp-radius-lg: 14px;

    --hp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --hp-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --hp-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --hp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

html {
    font-size: 80% !important;
}

body {
    background-color: var(--hp-bg) !important;
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--hp-ink);
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid var(--hp-bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------------------------------------------------------------------- *
 * Top navbar
 * ---------------------------------------------------------------------- */
#navbar-main.navbar {
    position: relative;
    background: #0f172a !important;
    box-shadow: var(--hp-shadow);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#navbar-main .nav-link {
    border-radius: var(--hp-radius-sm);
    padding: 0.4rem 0.65rem;
    transition: background-color 0.15s ease;
}

#navbar-main .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#navbar-main .dropdown-menu {
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-lg);
    padding: 0.4rem;
    margin-top: 0.5rem;
}

#navbar-main .dropdown-item {
    border-radius: var(--hp-radius-sm);
    padding: 0.55rem 0.75rem;
    color: var(--hp-ink-soft);
    font-weight: 500;
}

#navbar-main .dropdown-item:hover {
    background-color: var(--hp-primary-light);
    color: var(--hp-primary-dark);
}

#navbar-main .dropdown-item i {
    color: var(--hp-muted);
    margin-right: 0.4rem;
}

/* ---------------------------------------------------------------------- *
 * Secondary header: gradient bar + pill nav + news ticker
 * ---------------------------------------------------------------------- */
.header.bg-gradient-primary {
    background: linear-gradient(100deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.header-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-left: 0;
}

.btn-menu {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    padding: 0.5rem 1.1rem !important;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-menu:hover {
    background-color: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px);
    box-shadow: var(--hp-shadow-sm) !important;
}

.btn-menu.btn-menu-active {
    background-color: #ffffff !important;
    color: var(--hp-primary-dark) !important;
    border-color: #ffffff !important;
}

.header {
    position: relative;
}

.header .marquee {
    display: inline-block;
}

.news-ticker {
    background: var(--hp-ink);
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
}

.news-ticker .news-ticker-icon {
    flex: 0 0 auto;
    color: var(--hp-primary-soft);
}

.news-ticker h1,
.news-ticker .marquee {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* ---------------------------------------------------------------------- *
 * Buttons
 * ---------------------------------------------------------------------- */
.btn {
    border-radius: var(--hp-radius-sm) !important;
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: none !important;
}

.btn-primary,
button[type="submit"].btn-primary {
    background-color: var(--hp-primary) !important;
    border-color: var(--hp-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hp-primary-dark) !important;
    border-color: var(--hp-primary-dark) !important;
}

.btn-secondary {
    background-color: var(--hp-surface) !important;
    border-color: var(--hp-border) !important;
    color: var(--hp-ink-soft) !important;
}

.btn-secondary:hover {
    background-color: #f1f5f9 !important;
}

.btn-light {
    background-color: var(--hp-surface) !important;
    border: 1px solid var(--hp-border) !important;
    color: var(--hp-ink-soft) !important;
}

/* ---------------------------------------------------------------------- *
 * Cards / modals / panels
 * ---------------------------------------------------------------------- */
.card {
    border: 1px solid var(--hp-border) !important;
    border-radius: var(--hp-radius-lg) !important;
    box-shadow: var(--hp-shadow) !important;
}

.card-profile-stats { color: var(--hp-ink); }

.modal-content {
    border: none !important;
    border-radius: var(--hp-radius-lg) !important;
    box-shadow: var(--hp-shadow-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--hp-border) !important;
    padding: 1.1rem 1.4rem;
}

.modal-title {
    font-weight: 700;
    color: var(--hp-ink);
}

.modal-body { padding: 1.4rem; }

label {
    color: var(--hp-ink-soft) !important;
    font-weight: 600 !important;
    font-size: 100% !important;
    letter-spacing: 0.01em;
}

.form-control,
.custom-select {
    border: 1px solid var(--hp-border) !important;
    border-radius: var(--hp-radius-sm) !important;
    color: var(--hp-ink) !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--hp-primary) !important;
    box-shadow: 0 0 0 3px var(--hp-primary-light) !important;
}

.list-group-item.active {
    border-color: var(--hp-primary) !important;
    background-color: var(--hp-primary) !important;
}

.list-group-item {
    border-radius: var(--hp-radius-sm) !important;
    margin-bottom: 0.25rem;
    border: 1px solid transparent !important;
}

.list-group-item:not(.active):hover {
    background-color: var(--hp-primary-light);
}

.alert-success {
    border-radius: var(--hp-radius) !important;
    border: 1px solid #a7f3d0 !important;
    background-color: var(--hp-success-bg) !important;
    color: var(--hp-success-text) !important;
    margin: 0.75rem 0 0 !important;
}

/* ---------------------------------------------------------------------- *
 * Shared listing tables (trash, user count information, dashboard)
 * ---------------------------------------------------------------------- */
.table-wrap {
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow);
    background: var(--hp-surface);
    padding: 0;
}

.table-wrap.detail {
    border-radius: var(--hp-radius);
    box-shadow: none;
}

table.table {
    margin-bottom: 0 !important;
}

/* Sort affordance - scoped by .table-header (not an id): with scrollY on,
 * DataTables clones <thead> into .dataTables_scrollHead, and the clone
 * keeps these classes. */
.table-header th {
    position: relative;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.35) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.table-header th.sorting,
.table-header th.sorting_asc,
.table-header th.sorting_desc {
    cursor: pointer;
    padding-right: 18px !important;
    background-image: none !important;
    user-select: none;
}
/* Hover: lighten with an inset overlay ON TOP of the original #7cb3f5
 * header background (a translucent background-color would REPLACE it and
 * leave white text on a near-white cell). */
.table-header th.sorting:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.18);
}

/* Sorted column: light background with dark text + arrow, so the active
 * sort column stands out and stays readable. */
.table-header th.sorting_asc,
.table-header th.sorting_desc {
    background-color: var(--hp-primary-light) !important;
    color: var(--hp-ink) !important;
    box-shadow: inset 0 -3px 0 var(--hp-primary-dark);
}
.table-header th.sorting_asc:hover,
.table-header th.sorting_desc:hover {
    background-color: var(--hp-primary-soft) !important;
}

.table-header th.sorting::after,
.table-header th.sorting_asc::after,
.table-header th.sorting_desc::after {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85em;
    line-height: 1;
    color: #ffffff;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.table-header th.sorting::after { content: '\2195'; opacity: 0.4; }
.table-header th.sorting:hover::after { opacity: 1; transform: translateY(-50%) scale(1.15); }
.table-header th.sorting_asc::after { content: '\2191'; opacity: 1; color: var(--hp-ink); }
.table-header th.sorting_desc::after { content: '\2193'; opacity: 1; color: var(--hp-ink); }

.table-filter input {
    width: 100%;
    box-sizing: border-box;
    font-weight: 600 !important;
    color: var(--hp-ink-soft) !important;
    border: 1px solid var(--hp-border) !important;
    border-radius: var(--hp-radius-sm) !important;
    max-height: 26px !important;
}
.table-filter input:focus {
    border-color: var(--hp-primary) !important;
    outline: none;
}

/* ---------------------------------------------------------------------- *
 * Dashboard (Giỏ Hàng) - toolbar + listing table
 *
 * Colors are NOT redefined here: header (#7cb3f5), hover (#5CA0F2),
 * status rows (not-validate / item-sold / item-hired), active row
 * (giohang-active) all come from app.css - the original color scheme.
 * This layer only changes layout, density, typography and chrome.
 * ---------------------------------------------------------------------- */
.hp-dashboard {
    margin: 1.25rem 1.25rem 2rem;
}

.hp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.hp-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.hp-toolbar-actions .btn {
    margin: 0 !important;
}
.hp-reset-filters {
    border: 1px solid var(--hp-border) !important;
    color: var(--hp-ink-soft) !important;
    background-color: var(--hp-surface) !important;
}
.hp-reset-filters:hover {
    color: var(--hp-primary-dark) !important;
    border-color: var(--hp-primary) !important;
}
/* Some filter/sort is active: make the way back obvious. */
.hp-reset-filters.is-active {
    color: var(--hp-primary-dark) !important;
    border-color: var(--hp-primary) !important;
    background-color: var(--hp-primary-light) !important;
}
.hp-toolbar-search {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.hp-row-count {
    color: var(--hp-muted);
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hp-quick-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.hp-quick-search-wrap .fa-search {
    position: absolute;
    left: 0.9rem;
    color: var(--hp-muted);
    font-size: 0.85rem;
    pointer-events: none;
}
.hp-quick-search {
    width: 300px;
    max-width: 100%;
    border: 1px solid var(--hp-border);
    border-radius: 999px;
    padding: 0.55rem 1rem 0.55rem 2.4rem;
    font-size: 0.95rem;
    color: var(--hp-ink);
    background-color: var(--hp-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hp-quick-search:focus {
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px var(--hp-primary-light);
    outline: none;
}

.hp-listing-card {
    position: relative;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow-md);
    overflow: hidden;
}

/* All 19 columns always fit: fixed layout + percentage widths from app.js,
 * horizontal overflow is clipped at every DataTables scroll wrapper. */
.hp-listing-card .dataTables_wrapper,
.hp-listing-card .dataTables_scroll,
.hp-listing-card .dataTables_scrollHead,
.hp-listing-card .dataTables_scrollBody,
.hp-listing-card .dataTables_scrollFoot {
    overflow-x: hidden !important;
}
.hp-listing-card .dataTables_scrollHeadInner,
.hp-listing-card .dataTables_scrollFootInner,
.hp-listing-card .dataTables_scrollHeadInner > table,
.hp-listing-card .dataTables_scrollFootInner > table {
    width: 100% !important;
}
table.hp-listing {
    table-layout: fixed;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

table.hp-listing th,
table.hp-listing td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header */
table.hp-listing thead th {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0.7rem 0.4rem !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    vertical-align: middle;
}
table.hp-listing thead th:last-child {
    border-right: 0 !important;
}
/* Header labels may wrap to two lines instead of truncating ("Loại BĐS",
 * "Tình Trạng"...) - header height doesn't affect Scroller's row math. */
.dataTables_scrollHead table.hp-listing thead th {
    white-space: normal;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: anywhere;
}
/* DataTables keeps a zero-height copy of thead/tfoot inside the scroll body
 * purely for column sizing - neutralize the padding/borders/arrows the
 * header rules above would otherwise give it (it showed as an empty strip). */
.dataTables_scrollBody table.hp-listing thead th,
.dataTables_scrollBody table.hp-listing tfoot th {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    line-height: 0 !important;
}
.dataTables_scrollBody table.hp-listing thead th::after {
    content: none !important;
}

/* Body - one fixed-height line per row (Scroller measures a single row
 * height and virtualizes on it; variable heights would break positioning).
 * Full text of long cells is on hover via the title attribute. */
table.hp-listing tbody td {
    height: 36px;
    padding: 0 0.4rem !important;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 36px;
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid var(--hp-border) !important;
}
table.hp-listing tbody td:last-child {
    border-right: 0 !important;
}
table.hp-listing tbody tr {
    transition: background-color 0.1s ease;
}
table.hp-listing tbody tr:hover td {
    border-color: rgba(255, 255, 255, 0.35) !important;
}
table.hp-listing td.text-left { text-align: left !important; }
table.hp-listing td.text-right { text-align: right !important; }
table.hp-listing td.text-right,
table.hp-listing td.col-id,
table.hp-listing td.col-phone {
    font-variant-numeric: tabular-nums;
}
table.hp-listing td.col-id {
    font-weight: 700;
}
table.hp-listing td.col-status {
    font-weight: 600;
}
table.hp-listing td.dataTables_empty {
    height: 120px;
    line-height: 1.4;
    color: var(--hp-muted);
    text-align: center !important;
}

/* Footer column filters */
table.hp-listing tfoot th {
    padding: 0.45rem 0.25rem !important;
    border: 0 !important;
    border-top: 1px solid var(--hp-border) !important;
    background-color: var(--hp-bg) !important;
}
table.hp-listing tfoot input {
    height: 28px;
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
}
table.hp-listing tfoot input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

/* Loading indicator over the table while the dataset downloads */
.hp-listing-card .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    margin: 0;
    padding: 0.6rem 1rem;
    transform: translate(-50%, -50%);
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow-md);
    color: var(--hp-primary);
    font-size: 1.2rem;
    z-index: 20;
}

@media screen and (max-width: 1440px) {
    table.hp-listing tbody td { font-size: 0.85rem; padding: 0 0.25rem !important; }
    table.hp-listing thead th { font-size: 0.74rem; padding: 0.6rem 0.25rem !important; }
    .table-header th.sorting,
    .table-header th.sorting_asc,
    .table-header th.sorting_desc { padding-right: 14px !important; }
    .table-header th.sorting::after,
    .table-header th.sorting_asc::after,
    .table-header th.sorting_desc::after { right: 3px; }
}
@media screen and (max-width: 1200px) {
    .hp-dashboard { margin: 0.75rem 0.5rem 1.5rem; }
    table.hp-listing tbody td { font-size: 0.78rem; padding: 0 0.18rem !important; }
    table.hp-listing thead th { font-size: 0.68rem; }
}
@media screen and (max-width: 767px) {
    .hp-toolbar-search { width: 100%; justify-content: space-between; }
    .hp-quick-search { width: 100%; }
    .hp-quick-search-wrap { flex: 1; }
}

/* ---------------------------------------------------------------------- *
 * Master-detail panel (below the table)
 * ---------------------------------------------------------------------- */
.detail-part {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow-md);
    padding: 1.25rem;
    margin-top: 1.25rem !important;
}

/* Dashboard: .detail-host is a plain container; the fetched view
 * (giohang/detail.blade.php) brings the single .detail-part card. */
.detail-host {
    scroll-margin-top: 1rem;
}
.detail-host:empty {
    display: none;
}
.detail-host > .detail-part {
    margin-left: 0;
    margin-right: 0;
    padding: 1.25rem 0.5rem;
}
.detail-host .detail-loading {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    margin-top: 1.25rem;
    color: var(--hp-primary);
    font-size: 1.4rem;
}
.detail-host .table-wrap.detail {
    height: auto;
    overflow: hidden;
    border-radius: var(--hp-radius);
}
.detail-host .table-wrap.detail table td {
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
    vertical-align: middle;
    white-space: normal;
}
.detail-host .item-detail-tabs {
    gap: 0.4rem;
    padding: 0.35rem;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    background: var(--hp-bg);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
}

/* Owner phone reveal (giohang/detail.blade.php + app.js show_item_telephone) */
.item-telephone .show-item-telephone {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.item-telephone .show-item-telephone .phone-credits {
    margin-left: 0.25rem;
    font-weight: 500;
    opacity: 0.85;
}
.item-telephone-number {
    font-weight: 700;
    font-size: 1rem;
    color: var(--hp-primary-dark);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.item-telephone > .phone-credits {
    display: block;
    color: var(--hp-muted);
    font-size: 0.8rem;
}
.phone-no-credit {
    color: #f5365c;
    font-weight: 600;
}

.detail-part .table-wrap.detail table td:first-child {
    color: var(--hp-muted);
    font-weight: 600 !important;
    width: 40%;
}

.detail-part table td {
    border-color: var(--hp-border) !important;
}

/* color without !important: tab buttons get inline color/background from
 * the view and from app.js when switching tabs - those must win. */
.item-detail-tabs button {
    border-radius: var(--hp-radius-sm) !important;
    font-weight: 600;
    color: var(--hp-muted);
    padding: 0.5rem 0.9rem !important;
}

.item-detail-tabs button.active,
.item-detail-tabs button:hover {
    color: var(--hp-primary);
    background-color: var(--hp-primary-light);
}

/* ---------------------------------------------------------------------- *
 * Shared page building blocks (dashboard, Nhân Viên, Thống Kê, Căn Đã
 * Xoá, Thông Báo). Colors only from the --hp-* tokens / app.css originals.
 * ---------------------------------------------------------------------- */
.hp-page {
    margin: 1.25rem 1.25rem 2rem;
}
.hp-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.hp-page-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--hp-ink);
    letter-spacing: -0.01em;
}
.hp-page-sub {
    margin: 0.2rem 0 0;
    color: var(--hp-muted);
    font-size: 0.95rem;
}

/* Brand in the top navbar */
.hp-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}
.hp-brand img {
    border-radius: 8px;
    object-fit: cover;
}

/* Dashboard row-color legend (reuses the status classes' own colors) */
.hp-legend {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--hp-muted);
    font-size: 0.85rem;
    font-weight: 500;
}
.hp-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.hp-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

/* Static data tables (Nhân Viên, thống kê nhân viên, Căn Đã Xoá, Thống Kê) -
 * same look as the dashboard listing, without virtualization constraints. */
.hp-listing-card.hp-scroll {
    max-height: calc(100vh - 220px);
    overflow: auto;
}
.hp-listing-card.hp-flat {
    border: 0;
    box-shadow: none;
    border-radius: var(--hp-radius);
}
table.hp-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}
table.hp-table thead th {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    padding: 0.65rem 0.75rem !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
    vertical-align: middle;
    white-space: nowrap;
}
table.hp-table thead th:last-child {
    border-right: 0 !important;
}
table.hp-table tbody td {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.92rem;
    font-weight: 500;
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
}
table.hp-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
table.hp-table tfoot th {
    padding: 0.45rem 0.4rem !important;
    border: 0 !important;
    border-top: 1px solid var(--hp-border) !important;
    background-color: var(--hp-bg) !important;
}
table.hp-table tfoot input {
    height: 28px;
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
}
/* Wide static tables (Căn Đã Xoá, ~20 columns): fit the container like
 * the dashboard - fixed layout, single-line cells with ellipsis, header
 * labels allowed to wrap - instead of scrolling horizontally. */
table.hp-table.hp-fit {
    table-layout: fixed;
}
table.hp-table.hp-fit thead th {
    white-space: normal;
    line-height: 1.2;
    padding: 0.55rem 0.3rem !important;
    font-size: 0.74rem;
}
table.hp-table.hp-fit tbody td {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.5rem 0.3rem !important;
    font-size: 0.82rem;
}
table.hp-table.hp-fit tfoot th {
    padding: 0.4rem 0.15rem !important;
}
table.hp-table td.dataTables_empty {
    padding: 2rem !important;
    color: var(--hp-muted);
    text-align: center;
}
.hp-num { font-variant-numeric: tabular-nums; }
.hp-strong { font-weight: 700 !important; }
.hp-muted { color: var(--hp-muted); }
.hp-text-danger { color: #f5365c; font-weight: 600; }
table.hp-table tr.hp-row-muted td { color: #94a3b8; }
table.hp-table th.hp-col-id { width: 60px; }
table.hp-table th.hp-col-actions { width: 1%; }

/* DataTables' own search box on the static tables (dom '<"hp-dt-toolbar"f>rt') */
.hp-dt-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.6rem 0.75rem;
    background: var(--hp-surface);
    border-bottom: 1px solid var(--hp-border);
}
.hp-dt-toolbar .dataTables_filter,
.hp-dt-toolbar .dataTables_filter label {
    margin: 0;
    float: none;
}
.hp-dt-toolbar .dataTables_filter input {
    width: 260px;
    max-width: 100%;
    margin-left: 0 !important;
    border: 1px solid var(--hp-border);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    color: var(--hp-ink);
    background-color: var(--hp-surface);
}
.hp-dt-toolbar .dataTables_filter input:focus {
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px var(--hp-primary-light);
    outline: none;
}

/* Badges */
.hp-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hp-ink-soft);
    background: var(--hp-bg);
    border: 1px solid var(--hp-border);
    vertical-align: middle;
}
td > .hp-badge:first-child { margin-left: 0; }
.hp-badge-primary {
    color: var(--hp-primary-dark);
    background: var(--hp-primary-light);
    border-color: var(--hp-primary-soft);
}
.hp-badge-muted {
    color: var(--hp-muted);
    background: #f1f5f9;
}

/* Row action buttons */
.hp-actions {
    white-space: nowrap;
}
.hp-actions > span,
.hp-actions > .btn {
    display: inline-block;
    margin: 0 0.2rem 0 0 !important;
}
.hp-actions .btn {
    margin: 0 !important;
}
.btn.hp-btn-ghost {
    color: var(--hp-ink-soft) !important;
    background: var(--hp-surface) !important;
    border: 1px solid var(--hp-border) !important;
    box-shadow: none;
}
.btn.hp-btn-ghost:hover {
    color: var(--hp-primary-dark) !important;
    border-color: var(--hp-primary) !important;
}
.btn.hp-btn-success {
    color: var(--hp-success-text) !important;
    background: var(--hp-success-bg) !important;
    border: 1px solid #a7f3d0 !important;
    box-shadow: none;
}
.btn.hp-btn-success:hover {
    color: #ffffff !important;
    background: var(--hp-success) !important;
    border-color: var(--hp-success) !important;
}
#staff-table tbody tr.nhan-vien-item {
    cursor: pointer;
}
.hp-form-error {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--hp-radius-sm);
    background: var(--hp-danger-bg);
    color: var(--hp-danger-text);
    border: 1px solid #fecaca;
    font-size: 0.9rem;
}
.btn.hp-btn-danger {
    color: #f5365c !important;
    background: var(--hp-surface) !important;
    border: 1px solid #fbc4cf !important;
    box-shadow: none;
}
.btn.hp-btn-danger:hover {
    color: #ffffff !important;
    background: #f5365c !important;
    border-color: #f5365c !important;
}

/* Detail panels stay hidden until something is loaded into them */
.detail-part:empty {
    display: none;
}
.detail-part > .detail-loading,
.detail-host .detail-loading {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    color: var(--hp-primary);
    font-size: 1.4rem;
}

/* Underline tabs (thống kê nhân viên panel) */
.hp-tabs {
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--hp-border);
}
.hp-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    color: var(--hp-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.hp-tabs .nav-link:hover {
    color: var(--hp-ink);
}
.hp-tabs .nav-link.active {
    color: var(--hp-primary-dark);
    border-bottom-color: var(--hp-primary-dark);
}
.hp-count-badge {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--hp-primary-light);
    color: var(--hp-primary-dark);
    font-variant-numeric: tabular-nums;
}

/* Cards */
.hp-card {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow);
    padding: 1.1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
    min-width: 0;
}
.hp-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
}
.hp-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hp-ink);
}
.hp-card-sub {
    color: var(--hp-muted);
    font-size: 0.85rem;
}
.hp-empty {
    margin: 0;
    padding: 2.5rem 0;
    text-align: center;
    color: var(--hp-muted);
}

/* ---------------------------------------------------------------------- *
 * Thống Kê
 * ---------------------------------------------------------------------- */
.hp-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    padding: 0.25rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-sm);
}
.hp-segment {
    border: 0;
    background: transparent;
    color: var(--hp-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--hp-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.hp-segment:hover {
    color: var(--hp-ink);
    background: var(--hp-bg);
}
.hp-segment.is-active {
    color: #ffffff;
    background: var(--hp-primary);
}
.hp-segment:focus-visible {
    outline: 2px solid var(--hp-primary-dark);
    outline-offset: 1px;
}
.hp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.hp-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow);
    min-width: 0;
}
.hp-kpi-label {
    color: var(--hp-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.hp-kpi-value {
    color: var(--hp-ink);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.hp-kpi-name {
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-kpi-note {
    color: var(--hp-muted);
    font-size: 0.82rem;
    min-height: 1.1em;
}
.hp-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.hp-chart-grid .hp-card {
    margin-bottom: 1.25rem;
}
.hp-chart {
    min-height: 140px;
}
.hp-chart .apexcharts-tooltip {
    border: 1px solid var(--hp-border) !important;
    box-shadow: var(--hp-shadow-md) !important;
    border-radius: var(--hp-radius-sm) !important;
}
@media screen and (max-width: 991px) {
    .hp-chart-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------- *
 * Thông Báo
 * ---------------------------------------------------------------------- */
/* One readable column: header (title + add button) aligned with the list. */
.hp-notify > .hp-page-head,
.hp-notify > .hp-card,
.hp-notify-list {
    max-width: 980px;
}
.hp-notify-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hp-notice {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow);
    overflow: hidden;
}
.hp-notice-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 1rem 0.35rem 0.35rem;
}
.hp-notice-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 0.75rem;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: var(--hp-radius);
    cursor: pointer;
}
.hp-notice-toggle:hover {
    background: var(--hp-bg);
}
.hp-notice-toggle:focus-visible {
    outline: 2px solid var(--hp-primary);
    outline-offset: -2px;
}
.hp-notice-title {
    flex: 1;
    min-width: 0;
    color: var(--hp-ink);
    font-size: 1.1rem;
    font-weight: 700;
}
.hp-notice-date {
    flex-shrink: 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--hp-primary-light);
    color: var(--hp-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hp-notice-chevron {
    flex-shrink: 0;
    color: var(--hp-muted);
    transition: transform 0.2s ease;
}
.hp-notice-toggle.collapsed .hp-notice-chevron {
    transform: rotate(-90deg);
}
.hp-notice-body {
    padding: 1rem 1.5rem 1.4rem;
    border-top: 1px solid var(--hp-border);
}

/* Rich text (notice bodies + editor): readable long-form typography. */
.hp-richtext {
    color: var(--hp-ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.hp-richtext > :first-child { margin-top: 0; }
.hp-richtext > :last-child { margin-bottom: 0; }
.hp-richtext p { margin: 0 0 0.75rem; }
.hp-richtext strong, .hp-richtext b { font-weight: 700; color: var(--hp-ink); }
.hp-richtext h1, .hp-richtext h2, .hp-richtext h3 {
    color: var(--hp-ink);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.25rem 0 0.5rem;
}
.hp-richtext h1 { font-size: 1.5rem; }
.hp-richtext h2 { font-size: 1.3rem; }
.hp-richtext h3 { font-size: 1.12rem; }
.hp-richtext ul, .hp-richtext ol { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.hp-richtext li { margin-bottom: 0.25rem; }
.hp-richtext li[data-list="bullet"] { list-style-type: disc; }
.hp-richtext blockquote {
    margin: 0 0 0.75rem;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--hp-primary);
    background: var(--hp-primary-light);
    border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0;
    color: var(--hp-ink);
}
.hp-richtext a { color: var(--hp-primary-dark); text-decoration: underline; }
.hp-richtext .ql-align-center { text-align: center; }
.hp-richtext .ql-align-right { text-align: right; }
.hp-richtext .ql-align-justify { text-align: justify; }
.hp-richtext .ql-indent-1 { padding-left: 2em; }
.hp-richtext .ql-indent-2 { padding-left: 4em; }
.hp-richtext .ql-indent-3 { padding-left: 6em; }
.hp-richtext .ql-indent-4 { padding-left: 8em; }

/* Editor (Quill snow theme) framed like the other form controls */
.hp-editor {
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    overflow: hidden;
    background: var(--hp-surface);
}
.hp-editor.is-invalid { border-color: var(--hp-danger); }
.hp-editor .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid var(--hp-border);
    background: var(--hp-bg);
    font-family: inherit;
}
.hp-editor .ql-container.ql-snow {
    border: 0;
    font-family: inherit;
}
.hp-editor .ql-editor {
    min-height: 260px;
    max-height: 55vh;
    overflow-y: auto;
    color: var(--hp-ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}
.hp-editor .ql-editor.ql-blank::before {
    color: #94a3b8;
    font-style: normal;
}

/* ---------------------------------------------------------------------- *
 * Login
 * ---------------------------------------------------------------------- */
body.hp-auth-page {
    background:
        radial-gradient(1200px 500px at 50% -10%, var(--hp-primary-soft), transparent 70%),
        var(--hp-bg) !important;
}
.hp-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.hp-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow-lg);
    padding: 2rem 2rem 1.75rem;
}
.hp-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}
.hp-auth-logo {
    border-radius: 12px;
    object-fit: cover;
    box-shadow: var(--hp-shadow-sm);
}
.hp-auth-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hp-ink);
}
.hp-auth-tagline {
    color: var(--hp-muted);
    font-size: 0.85rem;
}
.hp-auth-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hp-ink);
}
.hp-auth-sub {
    margin: 0.25rem 0 1.25rem;
    color: var(--hp-muted);
    font-size: 0.95rem;
}
.hp-auth-alert {
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--hp-radius-sm);
    background: var(--hp-danger-bg);
    color: var(--hp-danger-text);
    border: 1px solid #fecaca;
    font-size: 0.9rem;
}
.hp-field {
    margin-bottom: 1rem;
}
.hp-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--hp-ink-soft);
    font-size: 0.9rem;
    font-weight: 600;
}
.hp-input-icon {
    position: relative;
}
.hp-input-icon > i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
}
.hp-input-icon .form-control {
    height: 44px;
    padding-left: 2.5rem;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    color: var(--hp-ink);
    font-size: 1rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hp-input-icon .form-control:focus {
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px var(--hp-primary-light);
}
.hp-input-icon .form-control.is-invalid {
    border-color: var(--hp-danger);
}
.hp-field-error {
    display: block;
    margin-top: 0.35rem;
    color: var(--hp-danger-text);
    font-size: 0.85rem;
    font-weight: 500;
}
.hp-remember {
    margin: 0.25rem 0 1.25rem;
}
.hp-remember .custom-control-label {
    color: var(--hp-muted);
    font-weight: 500;
    font-size: 0.92rem;
}
.hp-auth-submit {
    height: 46px;
    font-size: 1rem;
    font-weight: 700;
}
.hp-auth-foot {
    margin: 1.25rem 0 0;
    color: #94a3b8;
    font-size: 0.85rem;
}

@media screen and (max-width: 767px) {
    .hp-page { margin: 0.75rem 0.5rem 1.5rem; }
    .hp-legend { display: none; }
    .hp-auth-card { padding: 1.5rem 1.25rem; }
}

/* ---------------------------------------------------------------------- *
 * Dashboard: filter row under the sortable header (mirrors the tfoot row)
 * ---------------------------------------------------------------------- */
table.hp-listing thead tr.hp-head-filter th {
    padding: 0.4rem 0.25rem !important;
    background-color: var(--hp-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hp-border) !important;
    cursor: default;
}
table.hp-listing thead tr.hp-head-filter th::after { content: none !important; }
table.hp-listing thead tr.hp-head-filter input {
    height: 28px;
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
}
/* The hidden sizing clone of thead inside the scroll body must stay 0px tall
 * (needs to out-specify the visible filter row's padding rule above). */
.dataTables_scrollBody table.hp-listing thead tr.hp-head-filter th {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}
.dataTables_scrollBody table.hp-listing thead tr.hp-head-filter th > * {
    display: none !important;
}

/* ---------------------------------------------------------------------- *
 * Banner
 * ---------------------------------------------------------------------- */
.hp-banner > * { max-width: 980px; }
.hp-banner-preview {
    border-radius: var(--hp-radius);
    overflow: hidden;
}
.hp-textarea {
    min-height: 90px;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    color: var(--hp-ink);
    background: var(--hp-surface);
    font-size: 1rem;
    resize: vertical;
}
.hp-textarea:focus {
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px var(--hp-primary-light);
}
.hp-field-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}
.hp-char-count {
    color: var(--hp-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ---------------------------------------------------------------------- *
 * Detail panel (giohang/detail.blade.php) - same structure, refined look
 * ---------------------------------------------------------------------- */
.hp-detail-summary {
    padding: 1rem 1.1rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    background: linear-gradient(135deg, var(--hp-primary-light), var(--hp-surface) 70%);
}
.hp-detail-id {
    color: var(--hp-primary-dark);
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.hp-detail-title {
    margin: 0.15rem 0 0.55rem;
    color: var(--hp-ink);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
.hp-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.hp-detail-badges .hp-badge { margin-left: 0; }
.hp-badge.hp-status { border-color: transparent; }
.hp-detail-price {
    margin-top: 0.7rem;
    color: var(--hp-ink);
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hp-detail-price span {
    color: var(--hp-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.detail-host .table-wrap.detail {
    border: 1px solid var(--hp-border);
    box-shadow: none;
}
table.hp-info-table {
    margin: 0;
}
table.hp-info-table th,
table.hp-info-table td {
    padding: 0.5rem 0.75rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hp-border) !important;
    font-size: 0.9rem;
    vertical-align: middle;
    background: transparent !important;
    min-height: 0;
    height: auto;
}
table.hp-info-table tr:last-child th,
table.hp-info-table tr:last-child td {
    border-bottom: 0 !important;
}
table.hp-info-table th {
    width: 42%;
    color: var(--hp-muted) !important;
    font-weight: 600;
    white-space: normal;
}
table.hp-info-table td {
    color: var(--hp-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}
table.hp-info-table tr:nth-child(even) th,
table.hp-info-table tr:nth-child(even) td {
    background: var(--hp-bg) !important;
}

/* Tabs: underline style with icons; active state = .is-active (app.js set_detail_tab) */
.hp-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 !important;
    margin: 0 0 1rem !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hp-border) !important;
    border-radius: 0 !important;
}
.hp-detail-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem !important;
    margin-bottom: -1px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--hp-muted) !important;
    font-weight: 600;
    box-shadow: none !important;
}
.hp-detail-tabs .nav-link i { font-size: 0.85em; opacity: 0.8; }
.hp-detail-tabs .nav-link:focus { outline: none; }
.hp-detail-tabs .nav-link:focus-visible {
    outline: 2px solid var(--hp-primary);
    outline-offset: -2px;
}
.hp-detail-tabs .nav-link:hover {
    color: var(--hp-ink) !important;
    background: var(--hp-bg) !important;
}
.hp-detail-tabs .nav-link.is-active {
    color: var(--hp-primary-dark) !important;
    border-bottom-color: var(--hp-primary-dark) !important;
}
.hp-tab-panel {
    min-height: 120px;
}
.hp-tab-panel-body {
    max-height: 420px;
    overflow-y: auto;
    /* Room on every side: this box scrolls (overflow clips), and its content
     * pokes out a little - timeline dots, gallery hover shadows, focus rings. */
    padding: 0.5rem 0.6rem 0.75rem 0.75rem;
}

/* Activity timeline (notes / history / phone views) */
.hp-log {
    list-style: none;
    margin: 0 0 0 0.4rem; /* timeline dots sit 6px left of the line */
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--hp-border);
}
.hp-log-item {
    position: relative;
    padding: 0 0 0.9rem 1rem;
}
.hp-log-item::before {
    content: '';
    position: absolute;
    left: calc(-1rem - 6px);
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hp-primary);
    box-shadow: 0 0 0 3px var(--hp-surface);
}
.hp-log-item-plain::before { background: var(--hp-muted); }
.hp-log-item:last-child { padding-bottom: 0.25rem; }
.hp-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.hp-log-author {
    color: var(--hp-ink);
    font-weight: 700;
    font-size: 0.9rem;
}
.hp-log-time {
    color: var(--hp-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.hp-log-text {
    color: var(--hp-ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.hp-log-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--hp-muted);
    background: var(--hp-bg);
    border: 1px dashed var(--hp-border);
    border-radius: var(--hp-radius);
}
.hp-inline-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.hp-inline-form .form-control {
    flex: 1;
    height: 38px;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    background: var(--hp-surface);
    color: var(--hp-ink);
}
.hp-inline-form .form-control:focus {
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 3px var(--hp-primary-light);
}
.hp-inline-form .btn { white-space: nowrap; margin: 0; }

/* Image gallery */
.hp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
}
.hp-gallery-item {
    margin: 0;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    overflow: hidden;
    background: var(--hp-surface);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hp-gallery-item:hover {
    box-shadow: var(--hp-shadow-md);
    transform: translateY(-1px);
}
.hp-gallery-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--hp-bg);
}
.hp-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-gallery-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
}
.hp-gallery-select {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    min-width: 0;
    cursor: pointer;
    font-weight: 400;
}
.hp-gallery-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--hp-muted);
    line-height: 1.3;
}
.hp-gallery-meta strong {
    color: var(--hp-ink);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-gallery-download {
    flex-shrink: 0;
    color: var(--hp-muted);
    padding: 0.25rem;
}
.hp-gallery-download:hover { color: var(--hp-primary-dark); }
.hp-gallery-viewer {
    display: flex;
    justify-content: center;
    background: var(--hp-bg);
}
.hp-gallery-viewer img {
    max-width: 100%;
    max-height: 70vh;
    transition: transform 0.2s ease;
}
.hp-gallery-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Action bar under the tabs */
.hp-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hp-border);
}
.hp-detail-actions .btn { margin: 0 !important; float: none !important; }
.hp-detail-actions-spacer { flex: 1; }

/* ---------------------------------------------------------------------- *
 * Theme toggle (navbar + login page)
 * ---------------------------------------------------------------------- */
.hp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.hp-theme-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.hp-theme-toggle:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }
.hp-theme-toggle .fa-sun { display: none; }
[data-theme="dark"] .hp-theme-toggle .fa-sun { display: inline; }
[data-theme="dark"] .hp-theme-toggle .fa-moon { display: none; }
.hp-auth-page .hp-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    margin: 0;
    color: var(--hp-ink-soft);
    border-color: var(--hp-border);
    background: var(--hp-surface);
}

/* ---------------------------------------------------------------------- *
 * Listing tables - same visual language as the detail panel: bordered
 * rounded card, horizontal separators only, soft zebra on plain rows
 * (status rows keep their app.css colors), refined filter rows.
 * ---------------------------------------------------------------------- */
.hp-listing-card {
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow);
}
table.hp-listing td.col-id { color: var(--hp-primary-dark); font-weight: 700; }
table.hp-listing tr.not-validate td.col-id,
table.hp-listing tr.item-sold td.col-id,
table.hp-listing tr.item-hired td.col-id,
table.hp-listing tr.giohang-active td.col-id,
table.hp-listing tbody tr:hover td.col-id { color: inherit; }
/* DataTables marks rows odd/even by display index - stable under Scroller
 * (unlike :nth-child, which flips as rows are recycled). */
table.hp-listing tbody tr.even:not(.not-validate):not(.item-sold):not(.item-hired):not(.giohang-active),
table.hp-table tbody tr:nth-child(even):not(.giohang-active) {
    background-color: var(--hp-bg);
}
table.hp-listing tbody tr:hover td { border-color: transparent !important; }
table.hp-listing td.col-status { font-weight: 600; }
/* Filter rows (head + foot): light surface with rounded inputs like the
 * detail panel's inline form. */
table.hp-listing thead tr.hp-head-filter th,
table.hp-listing tfoot th {
    background-color: var(--hp-bg) !important;
}
.table-filter input.form-control {
    border-radius: var(--hp-radius-sm) !important;
    background-color: var(--hp-surface);
    font-weight: 500 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.table-filter input.form-control:focus {
    box-shadow: 0 0 0 3px var(--hp-primary-light) !important;
}
.table-filter input.form-control:not(:placeholder-shown) {
    border-color: var(--hp-primary) !important;
    background-color: var(--hp-primary-light);
}
table.hp-table thead th { border-right: 0 !important; }
table.hp-table tbody td { border-bottom-color: var(--hp-border) !important; }

/* ---------------------------------------------------------------------- *
 * Back-to-top button
 * ---------------------------------------------------------------------- */
.hp-to-top {
    position: fixed;
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--hp-primary);
    color: #ffffff;
    box-shadow: var(--hp-shadow-md);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}
.hp-to-top.is-visible { opacity: 1; transform: none; }
.hp-to-top:hover { background: var(--hp-primary-dark); }
[data-theme="dark"] .hp-to-top:hover { background: #3d84d8; }
.hp-to-top:focus-visible { outline: 3px solid var(--hp-primary-soft); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .hp-to-top { transition: none; }
}

/* ---------------------------------------------------------------------- *
 * Media: gallery tiles, upload progress, lightbox
 * ---------------------------------------------------------------------- */
.hp-gallery-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 100%;
    color: var(--hp-muted);
    font-size: 0.8rem;
    font-weight: 600;
}
.hp-gallery-icon i { font-size: 1.8rem; color: var(--hp-primary); }
.hp-gallery-thumb img { background: var(--hp-bg); }
.hp-file-input { height: auto; padding: 0.5rem; }
.hp-upload-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
}
.hp-upload-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--hp-bg);
    border: 1px solid var(--hp-border);
    overflow: hidden;
}
.hp-upload-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--hp-primary);
    transition: width 0.2s ease;
}
.hp-upload-label {
    color: var(--hp-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hp-upload-error { margin: 0.75rem 0 0; }
.glightbox-clean .gslide-description { background: var(--hp-surface); }
.glightbox-clean .gdesc-inner { padding: 0.6rem 1rem; }
.glightbox-clean .gslide-desc { color: var(--hp-ink-soft); font-size: 0.9rem; font-family: inherit; }
.gslide-image img { transition: transform 0.2s ease; }
.hp-glb-rotate {
    position: absolute;
    top: 15px;
    right: 70px;
    z-index: 99999;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.32);
    color: #ffffff;
    cursor: pointer;
}
.hp-glb-rotate:hover { background: rgba(0, 0, 0, 0.55); }

/* ---------------------------------------------------------------------- *
 * Staff statistics panel (Nhân Viên > Thống kê)
 * ---------------------------------------------------------------------- */
.hp-staff-stats { padding: 0.25rem; }
.hp-staff-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}
.hp-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--hp-primary-light);
    color: var(--hp-primary-dark);
    font-size: 1.3rem;
    font-weight: 700;
}
.hp-staff-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--hp-ink);
    font-size: 1.2rem;
    font-weight: 700;
}
.hp-staff-name .hp-badge { margin-left: 0; }
.hp-staff-meta { color: var(--hp-muted); font-size: 0.9rem; }
.hp-kpis-compact { gap: 0.75rem; margin-bottom: 1rem; }
.hp-kpis-compact .hp-kpi { padding: 0.8rem 1rem; box-shadow: none; }
.hp-kpis-compact .hp-kpi-value { font-size: 1.5rem; }
.hp-tabs { align-items: flex-end; }
.hp-tabs-search {
    margin-left: auto;
    padding-bottom: 0.4rem;
    list-style: none;
}
.hp-tabs-search .hp-quick-search { width: 260px; padding-top: 0.45rem; padding-bottom: 0.45rem; }
table.hp-stats-table { table-layout: fixed; }
/* Any scrollY DataTable keeps a hidden sizing copy of <thead> in its scroll
 * body - keep it 0px tall (the dashboard has its own, more specific rule). */
.dataTables_scrollBody > table > thead th,
.dataTables_scrollBody > table > thead td {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    line-height: 0 !important;
}
.dataTables_scrollBody > table > thead th::after { content: none !important; }
table.hp-stats-table tbody td {
    height: 40px;
    padding: 0 0.75rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.hp-stats-table td.col-id { color: var(--hp-primary-dark); }
table.hp-stats-table .hp-badge { margin-left: 0; }
.hp-staff-stats .dataTables_scrollBody { border-radius: 0 0 var(--hp-radius-lg) var(--hp-radius-lg); }
@media screen and (max-width: 767px) {
    .hp-tabs-search { margin-left: 0; width: 100%; }
    .hp-tabs-search .hp-quick-search { width: 100%; }
}

/* ---------------------------------------------------------------------- *
 * DARK MODE - <html data-theme="dark"> (set before first paint by the
 * inline script in layouts/app.blade.php, toggled by hpToggleTheme()).
 * Tokens are redefined; the few hardcoded app.css colors (table header,
 * status rows, borders) get dark variants of the SAME hues.
 * ---------------------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;
    --hp-primary: #5CA0F2;
    --hp-primary-dark: #8ec0f7;
    --hp-primary-light: rgba(92, 160, 242, 0.14);
    --hp-primary-soft: rgba(92, 160, 242, 0.26);
    --hp-ink: #e5ecf5;
    --hp-ink-soft: #c3cfdd;
    --hp-muted: #8d9bb0;
    --hp-border: #263245;
    --hp-bg: #0c1422;
    --hp-surface: #131d2e;
    --hp-success-bg: rgba(16, 185, 129, 0.14);
    --hp-success-text: #6ee7b7;
    --hp-warning-bg: rgba(245, 158, 11, 0.14);
    --hp-warning-text: #fcd34d;
    --hp-danger-bg: rgba(239, 68, 68, 0.14);
    --hp-danger-text: #fca5a5;
    --hp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --hp-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    --hp-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --hp-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] body,
[data-theme="dark"] .main-content {
    color: var(--hp-ink-soft);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .modal-title,
[data-theme="dark"] label { color: var(--hp-ink); }
/* Menu bar: same blue gradient, deepened so it doesn't glare on dark pages. */
[data-theme="dark"] .header.bg-gradient-primary {
    background: linear-gradient(90deg, #1f3f66 0%, #24497a 100%) !important;
}
[data-theme="dark"] .btn-menu { background: rgba(255, 255, 255, 0.08) !important; }
[data-theme="dark"] .btn-menu.btn-menu-active,
[data-theme="dark"] .btn-menu:hover { background: rgba(255, 255, 255, 0.18) !important; }
/* Ticker bar used --hp-ink (dark in light mode) as its background - pin it. */
[data-theme="dark"] .news-ticker { background: #1e293b; border-color: var(--hp-border); }
[data-theme="dark"] .news-ticker h1.marquee { color: #e2e8f0; }
[data-theme="dark"] .text-muted { color: var(--hp-muted) !important; }
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.hp-brand) { color: var(--hp-primary-dark); }

/* Surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .detail-part,
[data-theme="dark"] .hp-listing-card {
    background-color: var(--hp-surface) !important;
    border-color: var(--hp-border) !important;
    color: var(--hp-ink-soft);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--hp-border); }
[data-theme="dark"] .close { color: var(--hp-ink); text-shadow: none; }
[data-theme="dark"] .modal-backdrop.show { opacity: 0.7; }
[data-theme="dark"] .dropdown-item { color: var(--hp-ink-soft); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .dropdown-item.active { background: var(--hp-primary-light); color: var(--hp-ink); }
[data-theme="dark"] .dropdown-divider { border-color: var(--hp-border); }
[data-theme="dark"] .dropdown-header span { color: var(--hp-ink-soft) !important; }

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
[data-theme="dark"] .bootstrap-select .bs-searchbox .form-control {
    background-color: #0f1929 !important;
    border-color: var(--hp-border) !important;
    color: var(--hp-ink) !important;
}
[data-theme="dark"] .form-control::placeholder { color: #64748b; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus { border-color: var(--hp-primary) !important; }
[data-theme="dark"] .custom-control-label::before { background-color: #0f1929; border-color: #3b4a61; }
[data-theme="dark"] .bootstrap-select .dropdown-menu li a { color: var(--hp-ink-soft); }
[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected a,
[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover { background: var(--hp-primary-light); color: var(--hp-ink); }
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-light {
    background-color: var(--hp-surface) !important;
    border-color: var(--hp-border) !important;
    color: var(--hp-ink) !important;
}

/* Tables: header + borders (app.css #7cb3f5 / #e9ecef) in darker tones */
[data-theme="dark"] .table { color: var(--hp-ink-soft); }
[data-theme="dark"] table tr th { background-color: #2c5687; color: #eaf2fc; }
[data-theme="dark"] table td { border-color: var(--hp-border); }
[data-theme="dark"] table.hp-listing tbody td,
[data-theme="dark"] table.hp-table tbody td {
    border-bottom-color: var(--hp-border) !important;
}
[data-theme="dark"] table.hp-listing tbody tr.odd:not(.not-validate):not(.item-sold):not(.item-hired):not(.giohang-active) {
    background-color: var(--hp-surface);
}
[data-theme="dark"] .table-header th.sorting_asc,
[data-theme="dark"] .table-header th.sorting_desc { background-color: #cfe3fb !important; color: #0f172a !important; }
[data-theme="dark"] .table-header th.sorting_asc::after,
[data-theme="dark"] .table-header th.sorting_desc::after { color: #0f172a; }
[data-theme="dark"] .table-header th.sorting_asc:hover,
[data-theme="dark"] .table-header th.sorting_desc:hover { background-color: #b8d6f8 !important; }

/* Status rows: same hues as app.css, deepened for a dark surface */
[data-theme="dark"] .not-validate { background-color: #1e5a33; color: #dcfce7; }
[data-theme="dark"] .item-sold { background-color: #7a1f33; color: #ffe4ea; }
[data-theme="dark"] .item-hired { background-color: #6b651c; color: #fefce8; }
[data-theme="dark"] .giohang-active { background-color: #4b4b8f; color: #ffffff; }
[data-theme="dark"] .table-hover tbody tr:hover { background-color: #3d7fce !important; color: #ffffff !important; }
[data-theme="dark"] .hp-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }

/* Buttons tuned for dark */
[data-theme="dark"] .btn.hp-btn-danger { background: transparent !important; border-color: rgba(245, 54, 92, 0.45) !important; color: #fda4b4 !important; }
[data-theme="dark"] .btn.hp-btn-danger:hover { background: #f5365c !important; color: #fff !important; }
[data-theme="dark"] .btn.hp-btn-success { border-color: rgba(16, 185, 129, 0.45) !important; }
[data-theme="dark"] .hp-reset-filters.is-active { color: var(--hp-primary-dark) !important; }
[data-theme="dark"] .hp-badge-muted { background: rgba(148, 163, 184, 0.12); }
[data-theme="dark"] .phone-no-credit, [data-theme="dark"] .hp-text-danger { color: #fda4b4; }
[data-theme="dark"] .hp-auth-alert, [data-theme="dark"] .hp-form-error { border-color: rgba(239, 68, 68, 0.35); }

/* Rich text editor (Quill) */
[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--hp-ink-soft); }
[data-theme="dark"] .ql-snow .ql-fill { fill: var(--hp-ink-soft); }
[data-theme="dark"] .ql-snow .ql-picker { color: var(--hp-ink-soft); }
[data-theme="dark"] .ql-snow .ql-picker-options { background: var(--hp-surface); border-color: var(--hp-border) !important; }
[data-theme="dark"] .ql-snow .ql-tooltip { background: var(--hp-surface); color: var(--hp-ink); border-color: var(--hp-border); box-shadow: var(--hp-shadow-md); }
[data-theme="dark"] .ql-snow .ql-tooltip input[type=text] { background: #0f1929; color: var(--hp-ink); border-color: var(--hp-border); }
[data-theme="dark"] .hp-richtext span[style*="color"] { filter: brightness(1.35); }

/* Charts (ApexCharts tooltip chrome; colors set in stats.js) */
[data-theme="dark"] .apexcharts-tooltip { background: var(--hp-surface) !important; color: var(--hp-ink) !important; }
[data-theme="dark"] .apexcharts-tooltip-title { background: var(--hp-bg) !important; border-color: var(--hp-border) !important; }

/* ---------------------------------------------------------------------- *
 * Misc
 * ---------------------------------------------------------------------- */
.dropdown-header span {
    color: var(--hp-ink-soft) !important;
}

@media screen and (max-width: 767px) {
    .header-body {
        padding: 0.6rem 0.25rem;
    }
}

/* Scroller's own stylesheet paints every virtual-scrolled table white and the
   not-yet-rendered area with a light hatch - follow the theme instead (the
   staff stats tables showed white odd rows in dark mode). */
html div.DTS div.dataTables_scrollBody table { background-color: var(--hp-surface); }
html div.dts div.dataTables_scrollBody { background: var(--hp-surface); }

/* ------------------------------------------------------------------------
 * Gold accents in the detail summary (badges + price) and stronger menu
 * item outlines. Gold is tuned per theme for contrast: deep goldenrod text
 * on the light card, bright gold on the dark one; badges are solid gold
 * with dark ink in both themes.
 * ---------------------------------------------------------------------- */
:root {
    --hp-gold: #d4af37;
    --hp-gold-light: #f3d77e;
    --hp-gold-border: #b8912a;
    --hp-gold-ink: #3a2a00;
    --hp-gold-text: #a57a06;
}
[data-theme="dark"] {
    --hp-gold-border: #e6c55a;
    --hp-gold-text: #f5c84c;
}

.hp-detail-badges .hp-badge,
.hp-detail-badges .hp-badge.hp-status,
.hp-detail-badges .hp-badge.hp-badge-primary {
    color: var(--hp-gold-ink);
    background: linear-gradient(135deg, var(--hp-gold-light), var(--hp-gold));
    border: 1px solid var(--hp-gold-border);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(58, 42, 0, 0.18);
}

.hp-detail-price {
    margin-top: 0.8rem;
    color: var(--hp-gold-text);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.hp-detail-price span {
    color: var(--hp-muted);
    font-size: 1rem;
    letter-spacing: 0;
}

.btn-menu {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18) !important;
}
.btn-menu:hover {
    background-color: rgba(255, 255, 255, 0.26) !important;
    border-color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.22) !important;
}
.btn-menu.btn-menu-active { border-color: #ffffff !important; }
[data-theme="dark"] .btn-menu {
    background-color: rgba(92, 160, 242, 0.16) !important;
    border-color: rgba(142, 192, 247, 0.85) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .btn-menu:hover,
[data-theme="dark"] .btn-menu.btn-menu-active {
    background-color: rgba(92, 160, 242, 0.32) !important;
    border-color: #b9d8fb !important;
}
[data-theme="dark"] .btn-menu.btn-menu-active { color: #ffffff !important; }

/* ======================================================================== *
 * PHONE LAYOUT (< 768px). Desktop is untouched; every rule below is either
 * inside the media query or hides a phone-only element on larger screens.
 * The dashboard breakpoint is mirrored in app.js (DASHBOARD_PHONE_QUERY).
 * ======================================================================== */

/* Phone-only / desktop-only pieces */
table.hp-listing .col-card { display: none; }
.hp-mobile-sort { display: none; }

/* Account avatar (navbar, below lg) */
.hp-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
}

@media screen and (max-width: 767.98px) {
    /* ---- Top navbar + menu ------------------------------------------- */
    #navbar-main { padding: 0.5rem 0; }
    #navbar-main > .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
        flex-wrap: nowrap;
    }

    .container-header-menu-pc {
        display: block !important;
        padding-left: 0;
        padding-right: 0;
    }
    .container-fluid .header-body.hp-menu,
    .header-body.hp-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0;
        padding: 0.6rem 1rem !important;
        gap: 0.45rem;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .header-body.hp-menu::-webkit-scrollbar { display: none; }
    .header-body.hp-menu::after { content: ''; flex: 0 0 0.5rem; } /* end padding */
    .hp-menu .btn-menu {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 0.42rem 0.85rem !important;
        font-size: 0.85rem;
    }
    .news-ticker { padding-left: 0.75rem; }

    /* ---- Page shells ------------------------------------------------- */
    .hp-page,
    .hp-dashboard { margin: 0.75rem 0.75rem 1.5rem !important; }
    .hp-page-head { flex-wrap: wrap; gap: 0.6rem; }
    .hp-page-title { font-size: 1.25rem; }
    .modal-dialog { margin: 0.5rem; }
    .modal-body { padding: 1rem; }
    .hp-to-top { right: 0.9rem; bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); }

    /* ---- Toolbar ----------------------------------------------------- */
    .hp-toolbar { gap: 0.6rem; }
    .hp-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 0.5rem;
        width: 100%;
    }
    .hp-toolbar-actions > span,
    .hp-toolbar-actions > button { min-width: 0; }
    .hp-toolbar-actions .btn {
        width: 100%;
        margin: 0 !important;
        padding: 0.55rem 0.5rem;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hp-reset-filters .hp-btn-label { display: none; }
    .hp-reset-filters .fas { margin: 0 !important; }
    .hp-toolbar-search { flex-wrap: wrap; gap: 0.5rem; }
    .hp-toolbar-search .hp-quick-search-wrap { order: 1; flex: 1 1 100%; }
    .hp-toolbar-search .hp-row-count { order: 2; }
    .hp-quick-search { height: 40px; font-size: 16px; } /* 16px: no iOS zoom */
    input.form-control, select.form-control, textarea.form-control { font-size: 16px; }

    /* ---- Detail panel ------------------------------------------------ */
    .detail-part { padding: 0.9rem !important; border-radius: var(--hp-radius); }
    .hp-detail-price { font-size: 1.6rem; }
    .hp-detail-tabs,
    .hp-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hp-detail-tabs::-webkit-scrollbar,
    .hp-tabs::-webkit-scrollbar { display: none; }
    .hp-detail-tabs .nav-link,
    .hp-tabs .nav-link { flex: 0 0 auto; white-space: nowrap; }
    .hp-tabs .hp-tabs-search { flex: 0 0 100%; }
    .hp-tabs { flex-wrap: wrap !important; }
    .hp-tabs .nav-link { padding: 0.55rem 0.55rem; font-size: 0.85rem; }
    .hp-kpis.hp-kpis-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
    .hp-kpis-compact .hp-kpi { padding: 0.6rem 0.65rem; min-width: 0; }
    .hp-kpis-compact .hp-kpi-label { font-size: 0.7rem; line-height: 1.25; }
    .hp-kpis-compact .hp-kpi-value { font-size: 1.15rem; }
    .hp-kpis-compact .hp-kpi-note { display: none; }
    .hp-segmented {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
    }
    .hp-segmented::-webkit-scrollbar { display: none; }
    .hp-segment { flex: 0 0 auto; white-space: nowrap; }

    /* ---- Nhân Viên: one card per staff member ------------------------ */
    #staff-table thead { display: none; }
    #staff-table,
    #staff-table tbody { display: block; width: 100% !important; }
    #staff-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "id name level"
            "email email email"
            "phone phone phone"
            "used used left"
            "act act act";
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        padding: 0.75rem 0.9rem;
        border-bottom: 1px solid var(--hp-border);
    }
    #staff-table tbody td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        font-size: 0.88rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #staff-table tbody td:nth-child(1) { grid-area: id; color: var(--hp-muted); }
    #staff-table tbody td:nth-child(1)::before { content: '#'; }
    #staff-table tbody td:nth-child(2) { grid-area: name; font-size: 0.98rem; }
    #staff-table tbody td:nth-child(3) { grid-area: email; color: var(--hp-muted); }
    #staff-table tbody td:nth-child(4) { grid-area: phone; }
    #staff-table tbody td:nth-child(4)::before { content: '\f095'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 0.4rem; color: var(--hp-muted); font-size: 0.8em; }
    #staff-table tbody td:nth-child(5) { grid-area: used; color: var(--hp-muted); text-align: left !important; align-self: center; }
    #staff-table tbody td:nth-child(5)::before { content: 'Đã xem '; }
    #staff-table tbody td:nth-child(5)::after { content: ' lượt hôm nay'; }
    #staff-table tbody td:nth-child(6) { grid-area: left; }
    #staff-table tbody td:nth-child(6) .hp-clicks::before { content: 'Còn '; font-weight: 500; }
    #staff-table tbody td:nth-child(7) { grid-area: level; }
    #staff-table tbody td:nth-child(8) {
        grid-area: act;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.4rem;
        overflow: visible;
    }
    #staff-table tbody td:nth-child(8) .btn { margin: 0 !important; padding: 0.4rem 0.7rem; font-size: 0.8rem; }
    #staff-table tbody td.dataTables_empty { grid-column: 1 / -1; padding: 1.5rem !important; }

    /* ---- Staff statistics: fixed-height 3-line rows (Scroller) --------- */
    .hp-staff-stats .dataTables_scrollHead { display: none !important; }
    table.hp-stats-table,
    table.hp-stats-table tbody { display: block; width: 100% !important; }
    table.hp-stats-table thead { display: none; }
    table.hp-stats-table tbody tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-rows: 22px 20px 20px;
        grid-template-areas:
            "id ch st val"
            "addr addr addr addr"
            "proj proj proj date";
        column-gap: 0.5rem;
        row-gap: 3px;
        height: 86px;
        padding: 0.5rem 0.8rem;
        box-sizing: border-box;
        border-bottom: 1px solid var(--hp-border);
        overflow: hidden;
    }
    table.hp-stats-table tbody td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        font-size: 0.82rem;
        line-height: 20px;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left !important;
    }
    table.hp-stats-table tbody td:nth-child(1) { grid-area: id; }
    table.hp-stats-table tbody td:nth-child(2) { grid-area: ch; color: var(--hp-muted); }
    table.hp-stats-table tbody td:nth-child(3) { grid-area: addr; font-weight: 600; color: var(--hp-ink); }
    table.hp-stats-table tbody td:nth-child(4) { grid-area: proj; color: var(--hp-muted); }
    table.hp-stats-table tbody td:nth-child(5) { grid-area: st; }
    table.hp-stats-table tbody td:nth-child(6) { grid-area: val; text-align: right !important; font-weight: 700; }
    table.hp-stats-table tbody td:nth-child(7) { grid-area: date; text-align: right !important; color: var(--hp-muted); font-size: 0.76rem; }
    table.hp-stats-table tbody td:nth-child(8) { display: none; }
    .js-staff-views tbody td:nth-child(6)::after { content: ' lượt'; font-weight: 500; color: var(--hp-muted); }
    .js-staff-views tbody td:nth-child(7)::before { content: 'Xem: '; }
    table.hp-stats-table tbody td.dataTables_empty { grid-column: 1 / -1; grid-row: 1 / -1; text-align: center !important; }
    .hp-staff-head { gap: 0.75rem; }
    .hp-kpis { gap: 0.5rem; }

    /* ---- Căn Đã Xoá: wide table scrolls sideways, id column pinned ---- */
    .hp-listing-card.hp-scroll { max-height: calc(100svh - 170px); -webkit-overflow-scrolling: touch; }
    table.hp-table.hp-fit { min-width: 1500px; }
    table.hp-table.hp-fit tbody td:first-child,
    table.hp-table.hp-fit thead th:first-child,
    table.hp-table.hp-fit tfoot th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
    }
    table.hp-table.hp-fit tbody td:first-child {
        background-color: var(--hp-surface);
        box-shadow: 1px 0 0 var(--hp-border);
    }

    /* ---- Profile / Thống kê / misc ---------------------------------- */
    .hp-kpi-value { font-size: 1.35rem; }
}

[data-theme="dark"] .hp-user-avatar { background: rgba(92, 160, 242, 0.18); border-color: rgba(142, 192, 247, 0.7); }


/* Dashboard card list: phones AND portrait tablets (19 columns can't be read
 * below ~1024px). Mirrored in app.js DASHBOARD_PHONE_QUERY. */
@media screen and (max-width: 1023.98px) {
    .hp-mobile-sort {
        display: block;
        order: 3;
        width: auto;
        flex: 0 1 auto;
        height: 36px;
        padding: 0.3rem 0.6rem;
        font-size: 16px;
    }
    .hp-dashboard .hp-legend { display: none; }
    /* ---- Dashboard: one card per listing ------------------------------ */
    .hp-dashboard .dataTables_scrollHead,
    .hp-dashboard .dataTables_scrollFoot,
    table.hp-listing thead,
    table.hp-listing tfoot { display: none !important; }
    .hp-dashboard .dataTables_scrollBody {
        max-height: calc(100vh - 150px) !important;
        max-height: calc(100svh - 150px) !important;
    }
    table.hp-listing,
    table.hp-listing tbody { display: block; width: 100% !important; }
    /* Fixed card height: Scroller virtualizes on a single row height. */
    table.hp-listing tbody tr {
        display: block;
        height: 126px;
        overflow: hidden;
        border-bottom: 1px solid var(--hp-border);
        background-color: var(--hp-surface) !important;
        color: var(--hp-ink) !important;
        box-shadow: inset 5px 0 0 transparent;
    }
    table.hp-listing tbody td { display: none !important; }
    table.hp-listing tbody td.col-card,
    table.hp-listing tbody td.dataTables_empty {
        display: block !important;
        height: auto;
        padding: 0 !important;
        border: 0 !important;
        line-height: 1.35;
        white-space: normal;
        text-align: left !important;
    }
    table.hp-listing tbody td.dataTables_empty { padding: 2rem 1rem !important; text-align: center !important; }
    /* Status: colored edge + chip instead of a fully colored row */
    table.hp-listing tbody tr.not-validate { box-shadow: inset 5px 0 0 #3fbf52; }
    table.hp-listing tbody tr.item-sold    { box-shadow: inset 5px 0 0 #f5365c; }
    table.hp-listing tbody tr.item-hired   { box-shadow: inset 5px 0 0 #e0d220; }
    table.hp-listing tbody tr.giohang-active {
        background-color: var(--hp-primary-light) !important;
        box-shadow: inset 5px 0 0 var(--hp-primary), inset 0 0 0 2px var(--hp-primary);
    }
    .table-hover tbody tr.giohang-item:hover { background-color: var(--hp-surface) !important; color: var(--hp-ink) !important; }
    .table-hover tbody tr.giohang-item.giohang-active:hover { background-color: var(--hp-primary-light) !important; }
    table.hp-listing tbody tr.giohang-item:active { background-color: var(--hp-bg) !important; }

    .hp-mcard {
        display: flex;
        flex-direction: column;
        gap: 3px;
        height: 125px;
        padding: 0.55rem 0.8rem 0.5rem 1rem;
        font-size: 0.82rem;
        cursor: pointer;
    }
    .hp-mcard > div,
    .hp-mcard span {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hp-mcard-top { display: flex; align-items: center; gap: 0.4rem; height: 24px; flex: 0 0 auto; }
    .hp-mcard-id { color: var(--hp-primary-dark); font-weight: 700; flex: 0 0 auto; }
    .hp-mcard-type { color: var(--hp-muted); font-size: 0.75rem; font-weight: 600; }
    .hp-mcard-status {
        flex: 0 0 auto;
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        background: var(--hp-bg);
        border: 1px solid var(--hp-border);
        color: var(--hp-ink-soft);
    }
    tr.item-sold .hp-mcard-status { background: #f5365c; border-color: #f5365c; color: #ffffff; }
    tr.item-hired .hp-mcard-status { background: #f8f262; border-color: #d9d23c; color: #0a0c0d; }
    tr.not-validate .hp-mcard-id::after {
        content: 'Chưa duyệt';
        margin-left: 0.4rem;
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        font-size: 0.7rem;
        background: #7ae37b;
        color: #1c1818;
        vertical-align: 1px;
    }
    .hp-mcard-price {
        margin-left: auto;
        flex: 0 0 auto;
        max-width: 45%;
        color: var(--hp-gold-text);
        font-size: 1.02rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
    .hp-mcard-title { color: var(--hp-ink); font-weight: 700; font-size: 0.92rem; height: 1.35em; }
    .hp-mcard-line { color: var(--hp-ink-soft); height: 1.35em; }
    .hp-mcard-note { color: var(--hp-muted); font-style: italic; }
    .hp-mcard-foot {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        height: 1.35em;
        color: var(--hp-muted);
        font-size: 0.76rem;
    }
    .hp-mcard-foot .fas { margin-right: 0.15rem; opacity: 0.8; }
}
@media screen and (max-width: 1023.98px) {
    [data-theme="dark"] table.hp-listing tbody tr.not-validate { box-shadow: inset 5px 0 0 #2f9e48; }
    [data-theme="dark"] tr.not-validate .hp-mcard-id::after { background: #1e5a33; color: #dcfce7; }
    [data-theme="dark"] tr.item-sold .hp-mcard-status { background: #7a1f33; border-color: #a02a44; color: #ffe4ea; }
    [data-theme="dark"] tr.item-hired .hp-mcard-status { background: #6b651c; border-color: #8a8326; color: #fefce8; }
}
@media screen and (max-width: 767.98px) {
    .hp-mobile-sort { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------------
 * Login background: three blurred brand-blue glows drifting slowly behind
 * the card, a faint dot grid fading out from the center, and a soft
 * entrance for the card. Only transform/opacity animate (GPU compositing);
 * everything stops under prefers-reduced-motion.
 * ---------------------------------------------------------------------- */
.hp-auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hp-auth-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(61, 132, 216, 0.16) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}
.hp-auth-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
}
.hp-auth-glow-1 {
    width: 520px; height: 520px;
    top: -160px; left: -120px;
    background: #5CA0F2;
    animation: hp-drift-1 26s ease-in-out infinite alternate;
}
.hp-auth-glow-2 {
    width: 440px; height: 440px;
    bottom: -140px; right: -100px;
    background: #7cc4ff;
    animation: hp-drift-2 30s ease-in-out infinite alternate;
}
.hp-auth-glow-3 {
    width: 320px; height: 320px;
    top: 40%; left: 55%;
    background: #a5c8f5;
    opacity: 0.4;
    animation: hp-drift-3 22s ease-in-out infinite alternate;
}
@keyframes hp-drift-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(90px, 70px, 0) scale(1.12); }
}
@keyframes hp-drift-2 {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-110px, -60px, 0) scale(0.92); }
}
@keyframes hp-drift-3 {
    from { transform: translate3d(-50%, -50%, 0) scale(0.9); }
    to   { transform: translate3d(-80%, -30%, 0) scale(1.15); }
}
.hp-auth { position: relative; z-index: 1; }
.hp-auth-page .hp-theme-toggle { z-index: 2; }
.hp-auth-card {
    background: color-mix(in srgb, var(--hp-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    animation: hp-auth-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes hp-auth-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
[data-theme="dark"] .hp-auth-glow { opacity: 0.3; }
[data-theme="dark"] .hp-auth-glow-3 { opacity: 0.22; }
[data-theme="dark"] .hp-auth-bg::after {
    background-image: radial-gradient(rgba(142, 192, 247, 0.12) 1px, transparent 1.2px);
}
@media screen and (max-width: 767.98px) {
    .hp-auth-glow-1 { width: 340px; height: 340px; }
    .hp-auth-glow-2 { width: 300px; height: 300px; }
    .hp-auth-glow-3 { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-auth-glow, .hp-auth-card { animation: none; }
}

/* Nhân Viên: phone-view credits left today */
.hp-badge.hp-clicks { font-variant-numeric: tabular-nums; margin-left: 0; }
.hp-badge.hp-clicks.is-low { color: var(--hp-warning-text); background: var(--hp-warning-bg); border-color: var(--hp-warning-border); }
.hp-badge.hp-clicks.is-empty { color: var(--hp-danger-text); background: var(--hp-danger-bg); border-color: var(--hp-danger-border); }
td.hp-clicks-left .hp-badge { margin-left: 0; }